chore(ui,dashboard): Use radix-ui package (#11195)

* update deps for ui

* chore(ui,dashboard): Use radix-ui package

---------

Co-authored-by: Oli Juhl <59018053+olivermrbl@users.noreply.github.com>

packages/admin/dashboard/src/routes/locations/common/components/conditional-price-form/conditional-price-form.tsx

@@ -17,7 +17,7 @@ import {
   Text,
   Tooltip,
 } from "@medusajs/ui"
-import * as Accordion from "@radix-ui/react-accordion"
+import { Accordion as RadixAccordion } from "radix-ui"
 import React, { Fragment, ReactNode, useRef, useState } from "react"
 import {
   Control,
@@ -235,7 +235,7 @@ const ConditionalPriceList = ({
   onValueChange,
 }: ConditionalPriceListProps) => {
   return (
-    <Accordion.Root
+    <RadixAccordion.Root
       type="multiple"
       defaultValue={[getRuleValue(0)]}
       value={value}
@@ -243,7 +243,7 @@ const ConditionalPriceList = ({
       className="flex flex-col gap-y-3"
     >
       {children}
-    </Accordion.Root>
+    </RadixAccordion.Root>
   )
 }
 
@@ -268,13 +268,13 @@ const ConditionalPriceItem = ({
   }
 
   return (
-    <Accordion.Item
+    <RadixAccordion.Item
       value={getRuleValue(index)}
       className={clx(
         "bg-ui-bg-component shadow-elevation-card-rest rounded-lg"
       )}
     >
-      <Accordion.Trigger asChild>
+      <RadixAccordion.Trigger asChild>
         <div className="group/trigger flex w-full cursor-pointer items-start justify-between gap-x-2 p-3">
           <div className="flex flex-1 flex-wrap items-center justify-between gap-2">
             <div className="flex h-7 items-center">
@@ -310,8 +310,8 @@ const ConditionalPriceItem = ({
             </IconButton>
           </div>
         </div>
-      </Accordion.Trigger>
-      <Accordion.Content className="text-ui-fg-subtle">
+      </RadixAccordion.Trigger>
+      <RadixAccordion.Content className="text-ui-fg-subtle">
         <Divider variant="dashed" />
         <Form.Field
           control={control}
@@ -392,8 +392,8 @@ const ConditionalPriceItem = ({
           control={control}
           currency={currency}
         />
-      </Accordion.Content>
-    </Accordion.Item>
+      </RadixAccordion.Content>
+    </RadixAccordion.Item>
   )
 }
 

packages/admin/dashboard/src/routes/orders/order-detail/components/order-activity-section/order-timeline.tsx

@@ -1,5 +1,5 @@
 import { Button, Text, Tooltip, clx, usePrompt } from "@medusajs/ui"
-import * as Collapsible from "@radix-ui/react-collapsible"
+import { Collapsible as RadixCollapsible } from "radix-ui"
 
 import { PropsWithChildren, ReactNode, useMemo, useState } from "react"
 
@@ -628,14 +628,14 @@ const OrderActivityCollapsible = ({
   }
 
   return (
-    <Collapsible.Root open={open} onOpenChange={setOpen}>
+    <RadixCollapsible.Root open={open} onOpenChange={setOpen}>
       {!open && (
         <div className="grid grid-cols-[20px_1fr] items-start gap-2">
           <div className="flex size-full flex-col items-center">
             <div className="border-ui-border-strong w-px flex-1 bg-[linear-gradient(var(--border-strong)_33%,rgba(255,255,255,0)_0%)] bg-[length:1px_3px] bg-right bg-repeat-y" />
           </div>
           <div className="pb-4">
-            <Collapsible.Trigger className="text-left">
+            <RadixCollapsible.Trigger className="text-left">
               <Text
                 size="small"
                 leading="compact"
@@ -646,11 +646,11 @@ const OrderActivityCollapsible = ({
                   count: activities.length,
                 })}
               </Text>
-            </Collapsible.Trigger>
+            </RadixCollapsible.Trigger>
           </div>
         </div>
       )}
-      <Collapsible.Content>
+      <RadixCollapsible.Content>
         <div className="flex flex-col gap-y-0.5">
           {activities.map((item, index) => {
             return (
@@ -667,8 +667,8 @@ const OrderActivityCollapsible = ({
             )
           })}
         </div>
-      </Collapsible.Content>
-    </Collapsible.Root>
+      </RadixCollapsible.Content>
+    </RadixCollapsible.Root>
   )
 }
 

packages/admin/dashboard/src/routes/products/common/components/category-combobox/category-combobox.tsx

@@ -7,7 +7,7 @@ import {
 } from "@medusajs/icons"
 import { AdminProductCategoryResponse } from "@medusajs/types"
 import { Text, clx } from "@medusajs/ui"
-import * as Popover from "@radix-ui/react-popover"
+import { Popover as RadixPopover } from "radix-ui"
 import {
   CSSProperties,
   ComponentPropsWithoutRef,
@@ -239,8 +239,8 @@ export const CategoryCombobox = forwardRef<
   }
 
   return (
-    <Popover.Root open={open} onOpenChange={handleOpenChange}>
-      <Popover.Anchor
+    <RadixPopover.Root open={open} onOpenChange={handleOpenChange}>
+      <RadixPopover.Anchor
         asChild
         onClick={() => {
           if (!open) {
@@ -317,8 +317,8 @@ export const CategoryCombobox = forwardRef<
             <TrianglesMini className="text-ui-fg-muted" />
           </button>
         </div>
-      </Popover.Anchor>
-      <Popover.Content
+      </RadixPopover.Anchor>
+      <RadixPopover.Content
         sideOffset={4}
         role="listbox"
         className={clx(
@@ -454,8 +454,8 @@ export const CategoryCombobox = forwardRef<
             </div>
           )}
         </div>
-      </Popover.Content>
-    </Popover.Root>
+      </RadixPopover.Content>
+    </RadixPopover.Root>
   )
 })
 

packages/admin/dashboard/src/routes/tax-regions/common/components/tax-override-card/tax-override-card.tsx

@@ -1,23 +1,20 @@
 import {
-    ArrowDownRightMini,
-    PencilSquare,
-    Trash,
-    TriangleRightMini,
+  ArrowDownRightMini,
+  PencilSquare,
+  Trash,
+  TriangleRightMini,
 } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import { Badge, IconButton, StatusBadge, Text, Tooltip } from "@medusajs/ui"
-import * as Collapsible from "@radix-ui/react-collapsible"
+import { Collapsible as RadixCollapsible } from "radix-ui"
 import { ComponentPropsWithoutRef } from "react"
 import { useTranslation } from "react-i18next"
 
 import { FetchError } from "@medusajs/js-sdk"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { Divider } from "../../../../../components/common/divider"
-import { useCollections } from "../../../../../hooks/api/collections"
-import { useCustomerGroups } from "../../../../../hooks/api/customer-groups"
 import { useProductTypes } from "../../../../../hooks/api/product-types"
 import { useProducts } from "../../../../../hooks/api/products"
-import { useProductTags } from "../../../../../hooks/api/tags"
 import { formatPercentage } from "../../../../../lib/percentage-helpers"
 import { TaxRateRuleReferenceType } from "../../constants"
 import { useDeleteTaxRateAction } from "../../hooks"
@@ -50,14 +47,14 @@ export const TaxOverrideCard = ({ taxRate }: TaxOverrideCardProps) => {
   ).length
 
   return (
-    <Collapsible.Root>
+    <RadixCollapsible.Root>
       <div className="flex items-center justify-between px-6 py-3">
         <div className="flex items-center gap-x-2">
-          <Collapsible.Trigger asChild>
+          <RadixCollapsible.Trigger asChild>
             <IconButton size="2xsmall" variant="transparent" className="group">
               <TriangleRightMini className="text-ui-fg-muted transition-transform group-data-[state='open']:rotate-90" />
             </IconButton>
-          </Collapsible.Trigger>
+          </RadixCollapsible.Trigger>
           <div className="flex items-center gap-x-1.5">
             <Text size="small" weight="plus" leading="compact">
               {taxRate.name}
@@ -110,7 +107,7 @@ export const TaxOverrideCard = ({ taxRate }: TaxOverrideCardProps) => {
           />
         </div>
       </div>
-      <Collapsible.Content>
+      <RadixCollapsible.Content>
         <div className="bg-ui-bg-subtle">
           <Divider variant="dashed" />
           <div className="px-6 py-3">
@@ -154,8 +151,8 @@ export const TaxOverrideCard = ({ taxRate }: TaxOverrideCardProps) => {
             </div>
           </div>
         </div>
-      </Collapsible.Content>
-    </Collapsible.Root>
+      </RadixCollapsible.Content>
+    </RadixCollapsible.Root>
   )
 }
 
@@ -186,18 +183,18 @@ const ReferenceBadge = ({
     case TaxRateRuleReferenceType.PRODUCT:
       label = t("taxRegions.fields.targets.tags.product")
       break
-    case TaxRateRuleReferenceType.PRODUCT_COLLECTION:
-      label = t("taxRegions.fields.targets.tags.productCollection")
-      break
-    case TaxRateRuleReferenceType.PRODUCT_TAG:
-      label = t("taxRegions.fields.targets.tags.productTag")
-      break
+    // case TaxRateRuleReferenceType.PRODUCT_COLLECTION:
+    //   label = t("taxRegions.fields.targets.tags.productCollection")
+    //   break
+    // case TaxRateRuleReferenceType.PRODUCT_TAG:
+    //   label = t("taxRegions.fields.targets.tags.productTag")
+    //   break
     case TaxRateRuleReferenceType.PRODUCT_TYPE:
       label = t("taxRegions.fields.targets.tags.productType")
       break
-    case TaxRateRuleReferenceType.CUSTOMER_GROUP:
-      label = t("taxRegions.fields.targets.tags.customerGroup")
-      break
+    // case TaxRateRuleReferenceType.CUSTOMER_GROUP:
+    //   label = t("taxRegions.fields.targets.tags.customerGroup")
+    //   break
   }
 
   if (!label) {
@@ -277,15 +274,15 @@ const useReferenceValues = (
     }
   )
 
-  const tags = useProductTags(
-    {
-      id: ids,
-      limit: 10,
-    },
-    {
-      enabled: !!ids.length && type === TaxRateRuleReferenceType.PRODUCT_TAG,
-    }
-  )
+  // const tags = useProductTags(
+  //   {
+  //     id: ids,
+  //     limit: 10,
+  //   },
+  //   {
+  //     enabled: !!ids.length && type === TaxRateRuleReferenceType.PRODUCT_TAG,
+  //   }
+  // )
 
   const productTypes = useProductTypes(
     {
@@ -297,26 +294,26 @@ const useReferenceValues = (
     }
   )
 
-  const collections = useCollections(
-    {
-      id: ids,
-      limit: 10,
-    },
-    {
-      enabled:
-        !!ids.length && type === TaxRateRuleReferenceType.PRODUCT_COLLECTION,
-    }
-  )
+  // const collections = useCollections(
+  //   {
+  //     id: ids,
+  //     limit: 10,
+  //   },
+  //   {
+  //     enabled:
+  //       !!ids.length && type === TaxRateRuleReferenceType.PRODUCT_COLLECTION,
+  //   }
+  // )
 
-  const customerGroups = useCustomerGroups(
-    {
-      id: ids,
-      limit: 10,
-    },
-    {
-      enabled: !!ids.length && type === TaxRateRuleReferenceType.CUSTOMER_GROUP,
-    }
-  )
+  // const customerGroups = useCustomerGroups(
+  //   {
+  //     id: ids,
+  //     limit: 10,
+  //   },
+  //   {
+  //     enabled: !!ids.length && type === TaxRateRuleReferenceType.CUSTOMER_GROUP,
+  //   }
+  // )
 
   switch (type) {
     case TaxRateRuleReferenceType.PRODUCT:
@@ -330,17 +327,17 @@ const useReferenceValues = (
         isError: products.isError,
         error: products.error,
       }
-    case TaxRateRuleReferenceType.PRODUCT_TAG:
-      return {
-        labels: tags.product_tags?.map((tag: any) => tag.value),
-        isPending: tags.isPending,
-        additional:
-          tags.product_tags && tags.count
-            ? tags.count - tags.product_tags.length
-            : 0,
-        isError: tags.isError,
-        error: tags.error,
-      }
+    // case TaxRateRuleReferenceType.PRODUCT_TAG:
+    //   return {
+    //     labels: tags.product_tags?.map((tag: any) => tag.value),
+    //     isPending: tags.isPending,
+    //     additional:
+    //       tags.product_tags && tags.count
+    //         ? tags.count - tags.product_tags.length
+    //         : 0,
+    //     isError: tags.isError,
+    //     error: tags.error,
+    //   }
     case TaxRateRuleReferenceType.PRODUCT_TYPE:
       return {
         labels: productTypes.product_types?.map((type) => type.value),
@@ -352,27 +349,27 @@ const useReferenceValues = (
         isError: productTypes.isError,
         error: productTypes.error,
       }
-    case TaxRateRuleReferenceType.PRODUCT_COLLECTION:
-      return {
-        labels: collections.collections?.map((collection) => collection.title!),
-        isPending: collections.isPending,
-        additional:
-          collections.collections && collections.count
-            ? collections.count - collections.collections.length
-            : 0,
-        isError: collections.isError,
-        error: collections.error,
-      }
-    case TaxRateRuleReferenceType.CUSTOMER_GROUP:
-      return {
-        labels: customerGroups.customer_groups?.map((group) => group.name!),
-        isPending: customerGroups.isPending,
-        additional:
-          customerGroups.customer_groups && customerGroups.count
-            ? customerGroups.count - customerGroups.customer_groups.length
-            : 0,
-        isError: customerGroups.isError,
-        error: customerGroups.error,
-      }
+    // case TaxRateRuleReferenceType.PRODUCT_COLLECTION:
+    //   return {
+    //     labels: collections.collections?.map((collection) => collection.title!),
+    //     isPending: collections.isPending,
+    //     additional:
+    //       collections.collections && collections.count
+    //         ? collections.count - collections.collections.length
+    //         : 0,
+    //     isError: collections.isError,
+    //     error: collections.error,
+    //   }
+    // case TaxRateRuleReferenceType.CUSTOMER_GROUP:
+    //   return {
+    //     labels: customerGroups.customer_groups?.map((group) => group.name!),
+    //     isPending: customerGroups.isPending,
+    //     additional:
+    //       customerGroups.customer_groups && customerGroups.count
+    //         ? customerGroups.count - customerGroups.customer_groups.length
+    //         : 0,
+    //     isError: customerGroups.isError,
+    //     error: customerGroups.error,
+    //   }
   }
 }

packages/admin/dashboard/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-history-section/workflow-execution-history-section.tsx

@@ -1,4 +1,5 @@
 import { Spinner, TriangleDownMini } from "@medusajs/icons"
+import { HttpTypes } from "@medusajs/types"
 import {
   clx,
   CodeBlock,
@@ -7,8 +8,8 @@ import {
   IconButton,
   Text,
 } from "@medusajs/ui"
-import * as Collapsible from "@radix-ui/react-collapsible"
 import { format } from "date-fns"
+import { Collapsible as RadixCollapsible } from "radix-ui"
 import { useEffect, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { useLocation } from "react-router-dom"
@@ -20,7 +21,6 @@ import {
   STEP_SKIPPED_STATES,
 } from "../../../constants"
 import { TransactionStepState, TransactionStepStatus } from "../../../types"
-import { HttpTypes } from "@medusajs/types"
 
 type WorkflowExecutionHistorySectionProps = {
   execution: HttpTypes.AdminWorkflowExecution
@@ -154,8 +154,8 @@ const Event = ({
           />
         </div>
       </div>
-      <Collapsible.Root open={open} onOpenChange={setOpen}>
-        <Collapsible.Trigger asChild>
+      <RadixCollapsible.Root open={open} onOpenChange={setOpen}>
+        <RadixCollapsible.Trigger asChild>
           <div className="group flex cursor-pointer items-start justify-between outline-none">
             <Text size="small" leading="compact" weight="plus">
               {identifier}
@@ -171,8 +171,8 @@ const Event = ({
               </IconButton>
             </div>
           </div>
-        </Collapsible.Trigger>
-        <Collapsible.Content ref={ref}>
+        </RadixCollapsible.Trigger>
+        <RadixCollapsible.Content ref={ref}>
           <div className="flex flex-col gap-y-2 pb-4 pt-2">
             <div className="text-ui-fg-subtle flex flex-col gap-y-2">
               <Text size="small" leading="compact">
@@ -269,8 +269,8 @@ const Event = ({
               </div>
             )}
           </div>
-        </Collapsible.Content>
-      </Collapsible.Root>
+        </RadixCollapsible.Content>
+      </RadixCollapsible.Root>
     </div>
   )
 }