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>
2025-02-02 14:20:34 +01:00
parent 12c3e6a03d
commit 9822bd930b
54 changed files with 1351 additions and 877 deletions
--- a/packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.tsx
@@ -1,7 +1,7 @@
 "use client"

 import { CheckMini, ChevronRightMini, EllipseMiniSolid } from "@medusajs/icons"
-import * as Primitives from "@radix-ui/react-dropdown-menu"
+import { DropdownMenu as RadixDropdownMenu } from "radix-ui"
 import * as React from "react"

 import { clx } from "@/utils/clx"
@@ -9,41 +9,41 @@ import { clx } from "@/utils/clx"
 /**
 * This component is based on the [Radix UI Dropdown Menu](https://www.radix-ui.com/primitives/docs/components/dropdown-menu) primitive.
 */
-const Root = Primitives.Root
+const Root = RadixDropdownMenu.Root
 Root.displayName = "DropdownMenu"

 /**
 * This component is based on the [Radix UI Dropdown Menu Trigger](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#trigger) primitive.
 */
-const Trigger = Primitives.Trigger
+const Trigger = RadixDropdownMenu.Trigger
 Trigger.displayName = "DropdownMenu.Trigger"

 /**
 * This component is based on the [Radix UI Dropdown Menu Group](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#group) primitive.
 */
-const Group = Primitives.Group
+const Group = RadixDropdownMenu.Group
 Group.displayName = "DropdownMenu.Group"

 /**
 * This component is based on the [Radix UI Dropdown Menu Sub](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#sub) primitive.
 */
-const SubMenu = Primitives.Sub
+const SubMenu = RadixDropdownMenu.Sub
 SubMenu.displayName = "DropdownMenu.SubMenu"

 /**
 * This component is based on the [Radix UI Dropdown Menu RadioGroup](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#radiogroup) primitive.
 */
-const RadioGroup = Primitives.RadioGroup
+const RadioGroup = RadixDropdownMenu.RadioGroup
 RadioGroup.displayName = "DropdownMenu.RadioGroup"

 /**
 * This component is based on the [Radix UI Dropdown Menu SubTrigger](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#subtrigger) primitive.
 */
 const SubMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof Primitives.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof Primitives.SubTrigger>
+  React.ElementRef<typeof RadixDropdownMenu.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.SubTrigger>
 >(({ className, children, ...props }, ref) => (
-  <Primitives.SubTrigger
+  <RadixDropdownMenu.SubTrigger
    ref={ref}
    className={clx(
      "bg-ui-bg-component text-ui-fg-base txt-compact-small relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 outline-none transition-colors",
@@ -57,7 +57,7 @@ const SubMenuTrigger = React.forwardRef<
  >
    {children}
    <ChevronRightMini className="text-ui-fg-muted ml-auto" />
-  </Primitives.SubTrigger>
+  </RadixDropdownMenu.SubTrigger>
 ))
 SubMenuTrigger.displayName = "DropdownMenu.SubMenuTrigger"

@@ -65,11 +65,11 @@ SubMenuTrigger.displayName = "DropdownMenu.SubMenuTrigger"
 * This component is based on the [Radix UI Dropdown Menu SubContent](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#subcontent) primitive.
 */
 const SubMenuContent = React.forwardRef<
-  React.ElementRef<typeof Primitives.SubContent>,
-  React.ComponentPropsWithoutRef<typeof Primitives.SubContent>
+  React.ElementRef<typeof RadixDropdownMenu.SubContent>,
+  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.SubContent>
 >(({ className, collisionPadding = 8, ...props }, ref) => (
-  <Primitives.Portal>
-    <Primitives.SubContent
+  <RadixDropdownMenu.Portal>
+    <RadixDropdownMenu.SubContent
      ref={ref}
      collisionPadding={collisionPadding}
      className={clx(
@@ -79,7 +79,7 @@ const SubMenuContent = React.forwardRef<
      )}
      {...props}
    />
-  </Primitives.Portal>
+  </RadixDropdownMenu.Portal>
 ))
 SubMenuContent.displayName = "DropdownMenu.SubMenuContent"

@@ -87,8 +87,8 @@ SubMenuContent.displayName = "DropdownMenu.SubMenuContent"
 * This component is based on the [Radix UI Dropdown Menu Content](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#content) primitive.
 */
 const Content = React.forwardRef<
-  React.ElementRef<typeof Primitives.Content>,
-  React.ComponentPropsWithoutRef<typeof Primitives.Content>
+  React.ElementRef<typeof RadixDropdownMenu.Content>,
+  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.Content>
 >(
  (
    {
@@ -100,8 +100,8 @@ const Content = React.forwardRef<
    },
    ref
  ) => (
-    <Primitives.Portal>
-      <Primitives.Content
+    <RadixDropdownMenu.Portal>
+      <RadixDropdownMenu.Content
        ref={ref}
        sideOffset={sideOffset}
        align={align}
@@ -113,7 +113,7 @@ const Content = React.forwardRef<
        )}
        {...props}
      />
-    </Primitives.Portal>
+    </RadixDropdownMenu.Portal>
  )
 )
 Content.displayName = "DropdownMenu.Content"
@@ -122,10 +122,10 @@ Content.displayName = "DropdownMenu.Content"
 * This component is based on the [Radix UI Dropdown Menu Item](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#item) primitive.
 */
 const Item = React.forwardRef<
-  React.ElementRef<typeof Primitives.Item>,
-  React.ComponentPropsWithoutRef<typeof Primitives.Item>
+  React.ElementRef<typeof RadixDropdownMenu.Item>,
+  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.Item>
 >(({ className, ...props }, ref) => (
-  <Primitives.Item
+  <RadixDropdownMenu.Item
    ref={ref}
    className={clx(
      "bg-ui-bg-component text-ui-fg-base txt-compact-small relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 outline-none transition-colors",
@@ -143,10 +143,10 @@ Item.displayName = "DropdownMenu.Item"
 * This component is based on the [Radix UI Dropdown Menu CheckboxItem](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#checkboxitem) primitive.
 */
 const CheckboxItem = React.forwardRef<
-  React.ElementRef<typeof Primitives.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof Primitives.CheckboxItem>
+  React.ElementRef<typeof RadixDropdownMenu.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.CheckboxItem>
 >(({ className, children, checked, ...props }, ref) => (
-  <Primitives.CheckboxItem
+  <RadixDropdownMenu.CheckboxItem
    ref={ref}
    className={clx(
      "bg-ui-bg-component text-ui-fg-base txt-compact-small relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-[31px] pr-2 outline-none transition-colors",
@@ -160,12 +160,12 @@ const CheckboxItem = React.forwardRef<
    {...props}
  >
    <span className="absolute left-2 flex size-[15px] items-center justify-center">
-      <Primitives.ItemIndicator>
+      <RadixDropdownMenu.ItemIndicator>
        <CheckMini />
-      </Primitives.ItemIndicator>
+      </RadixDropdownMenu.ItemIndicator>
    </span>
    {children}
-  </Primitives.CheckboxItem>
+  </RadixDropdownMenu.CheckboxItem>
 ))
 CheckboxItem.displayName = "DropdownMenu.CheckboxItem"

@@ -173,10 +173,10 @@ CheckboxItem.displayName = "DropdownMenu.CheckboxItem"
 * This component is based on the [Radix UI Dropdown Menu RadioItem](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#radioitem) primitive.
 */
 const RadioItem = React.forwardRef<
-  React.ElementRef<typeof Primitives.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof Primitives.RadioItem>
+  React.ElementRef<typeof RadixDropdownMenu.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.RadioItem>
 >(({ className, children, ...props }, ref) => (
-  <Primitives.RadioItem
+  <RadixDropdownMenu.RadioItem
    ref={ref}
    className={clx(
      "bg-ui-bg-component txt-compact-small relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-[31px] pr-2 outline-none transition-colors",
@@ -189,12 +189,12 @@ const RadioItem = React.forwardRef<
    {...props}
  >
    <span className="absolute left-2 flex size-[15px] items-center justify-center">
-      <Primitives.ItemIndicator>
+      <RadixDropdownMenu.ItemIndicator>
        <EllipseMiniSolid className="text-ui-fg-base" />
-      </Primitives.ItemIndicator>
+      </RadixDropdownMenu.ItemIndicator>
    </span>
    {children}
-  </Primitives.RadioItem>
+  </RadixDropdownMenu.RadioItem>
 ))
 RadioItem.displayName = "DropdownMenu.RadioItem"

@@ -202,10 +202,10 @@ RadioItem.displayName = "DropdownMenu.RadioItem"
 * This component is based on the [Radix UI Dropdown Menu Label](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#label) primitive.
 */
 const Label = React.forwardRef<
-  React.ElementRef<typeof Primitives.Label>,
-  React.ComponentPropsWithoutRef<typeof Primitives.Label>
+  React.ElementRef<typeof RadixDropdownMenu.Label>,
+  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.Label>
 >(({ className, ...props }, ref) => (
-  <Primitives.Label
+  <RadixDropdownMenu.Label
    ref={ref}
    className={clx("text-ui-fg-subtle txt-compact-xsmall-plus", className)}
    {...props}
@@ -217,10 +217,10 @@ Label.displayName = "DropdownMenu.Label"
 * This component is based on the [Radix UI Dropdown Menu Separator](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#separator) primitive.
 */
 const Separator = React.forwardRef<
-  React.ElementRef<typeof Primitives.Separator>,
-  React.ComponentPropsWithoutRef<typeof Primitives.Separator>
+  React.ElementRef<typeof RadixDropdownMenu.Separator>,
+  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.Separator>
 >(({ className, ...props }, ref) => (
-  <Primitives.Separator
+  <RadixDropdownMenu.Separator
    ref={ref}
    className={clx(
      "bg-ui-border-component border-t-ui-border-menu-top border-b-ui-border-menu-bot -mx-1 my-1 h-0.5 border-b border-t",