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/components/layout/main-layout/main-layout.tsx

@@ -15,7 +15,7 @@ import {
   Users,
 } from "@medusajs/icons"
 import { Avatar, DropdownMenu, Text, clx } from "@medusajs/ui"
-import * as Collapsible from "@radix-ui/react-collapsible"
+import { Collapsible as RadixCollapsible } from "radix-ui"
 import { useTranslation } from "react-i18next"
 
 import { useStore } from "../../../hooks/api/store"
@@ -323,9 +323,9 @@ const ExtensionRouteSection = () => {
         <Divider variant="dashed" />
       </div>
       <div className="flex flex-col gap-y-1 py-3">
-        <Collapsible.Root defaultOpen>
+        <RadixCollapsible.Root defaultOpen>
           <div className="px-4">
-            <Collapsible.Trigger asChild className="group/trigger">
+            <RadixCollapsible.Trigger asChild className="group/trigger">
               <button className="text-ui-fg-subtle flex w-full items-center justify-between px-2">
                 <Text size="xsmall" weight="plus" leading="compact">
                   {t("app.nav.common.extensions")}
@@ -335,9 +335,9 @@ const ExtensionRouteSection = () => {
                   <MinusMini className="group-data-[state=closed]/trigger:hidden" />
                 </div>
               </button>
-            </Collapsible.Trigger>
+            </RadixCollapsible.Trigger>
           </div>
-          <Collapsible.Content>
+          <RadixCollapsible.Content>
             <nav className="flex flex-col gap-y-0.5 py-1 pb-4">
               {menuItems.map((item, i) => {
                 return (
@@ -352,8 +352,8 @@ const ExtensionRouteSection = () => {
                 )
               })}
             </nav>
-          </Collapsible.Content>
-        </Collapsible.Root>
+          </RadixCollapsible.Content>
+        </RadixCollapsible.Root>
       </div>
     </div>
   )

packages/admin/dashboard/src/components/layout/nav-item/nav-item.tsx

@@ -1,5 +1,5 @@
 import { Kbd, Text, clx } from "@medusajs/ui"
-import * as Collapsible from "@radix-ui/react-collapsible"
+import { Collapsible as RadixCollapsible } from "radix-ui"
 import {
   PropsWithChildren,
   ReactNode,
@@ -155,8 +155,8 @@ export const NavItem = ({
         </NavLink>
       </NavItemTooltip>
       {items && items.length > 0 && (
-        <Collapsible.Root open={open} onOpenChange={setOpen}>
-          <Collapsible.Trigger
+        <RadixCollapsible.Root open={open} onOpenChange={setOpen}>
+          <RadixCollapsible.Trigger
             className={clx(
               "text-ui-fg-subtle hover:text-ui-fg-base transition-fg hover:bg-ui-bg-subtle-hover flex w-full items-center gap-x-2 rounded-md py-0.5 pl-0.5 pr-2 outline-none lg:hidden",
               { "pl-2": isSetting }
@@ -168,8 +168,8 @@ export const NavItem = ({
             <Text size="small" weight="plus" leading="compact">
               {label}
             </Text>
-          </Collapsible.Trigger>
-          <Collapsible.Content>
+          </RadixCollapsible.Trigger>
+          <RadixCollapsible.Content>
             <div className="flex flex-col gap-y-0.5 pb-2 pt-0.5">
               <ul className="flex flex-col gap-y-0.5">
                 <li className="flex w-full items-center gap-x-1 lg:hidden">
@@ -222,8 +222,8 @@ export const NavItem = ({
                 })}
               </ul>
             </div>
-          </Collapsible.Content>
-        </Collapsible.Root>
+          </RadixCollapsible.Content>
+        </RadixCollapsible.Root>
       )}
     </div>
   )

packages/admin/dashboard/src/components/layout/settings-layout/settings-layout.tsx

@@ -1,6 +1,6 @@
 import { ArrowUturnLeft, MinusMini } from "@medusajs/icons"
 import { IconButton, Text, clx } from "@medusajs/ui"
-import * as Collapsible from "@radix-ui/react-collapsible"
+import { Collapsible as RadixCollapsible } from "radix-ui"
 import { Fragment, useEffect, useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { Link, useLocation } from "react-router-dom"
@@ -134,21 +134,21 @@ const SettingsSidebar = () => {
       </div>
       <div className="flex flex-1 flex-col">
         <div className="flex flex-1 flex-col overflow-y-auto">
-          <CollapsibleSection
+          <RadixCollapsibleSection
             label={t("app.nav.settings.general")}
             items={routes}
           />
           <div className="flex items-center justify-center px-3">
             <Divider variant="dashed" />
           </div>
-          <CollapsibleSection
+          <RadixCollapsibleSection
             label={t("app.nav.settings.developer")}
             items={developerRoutes}
           />
           <div className="flex items-center justify-center px-3">
             <Divider variant="dashed" />
           </div>
-          <CollapsibleSection
+          <RadixCollapsibleSection
             label={t("app.nav.settings.myAccount")}
             items={myAccountRoutes}
           />
@@ -157,7 +157,7 @@ const SettingsSidebar = () => {
               <div className="flex items-center justify-center px-3">
                 <Divider variant="dashed" />
               </div>
-              <CollapsibleSection
+              <RadixCollapsibleSection
                 label={t("app.nav.common.extensions")}
                 items={extensionRoutes}
               />
@@ -208,7 +208,7 @@ const Header = () => {
   )
 }
 
-const CollapsibleSection = ({
+const RadixCollapsibleSection = ({
   label,
   items,
 }: {
@@ -216,20 +216,20 @@ const CollapsibleSection = ({
   items: INavItem[]
 }) => {
   return (
-    <Collapsible.Root defaultOpen className="py-3">
+    <RadixCollapsible.Root defaultOpen className="py-3">
       <div className="px-3">
         <div className="text-ui-fg-muted flex h-7 items-center justify-between px-2">
           <Text size="small" leading="compact">
             {label}
           </Text>
-          <Collapsible.Trigger asChild>
+          <RadixCollapsible.Trigger asChild>
             <IconButton size="2xsmall" variant="transparent" className="static">
               <MinusMini className="text-ui-fg-muted" />
             </IconButton>
-          </Collapsible.Trigger>
+          </RadixCollapsible.Trigger>
         </div>
       </div>
-      <Collapsible.Content>
+      <RadixCollapsible.Content>
         <div className="pt-0.5">
           <nav className="flex flex-col gap-y-0.5">
             {items.map((setting) => (
@@ -237,8 +237,8 @@ const CollapsibleSection = ({
             ))}
           </nav>
         </div>
-      </Collapsible.Content>
-    </Collapsible.Root>
+      </RadixCollapsible.Content>
+    </RadixCollapsible.Root>
   )
 }
 

packages/admin/dashboard/src/components/layout/shell/shell.tsx

@@ -1,8 +1,7 @@
-import * as Dialog from "@radix-ui/react-dialog"
-
 import { SidebarLeft, TriangleRightMini, XMark } from "@medusajs/icons"
 import { IconButton, clx } from "@medusajs/ui"
 import { AnimatePresence } from "motion/react"
+import { Dialog as RadixDialog } from "radix-ui"
 import { PropsWithChildren, ReactNode, useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
 import {
@@ -225,22 +224,22 @@ const MobileSidebarContainer = ({ children }: PropsWithChildren) => {
   const { mobile, toggle } = useSidebar()
 
   return (
-    <Dialog.Root open={mobile} onOpenChange={() => toggle("mobile")}>
-      <Dialog.Portal>
-        <Dialog.Overlay
+    <RadixDialog.Root open={mobile} onOpenChange={() => toggle("mobile")}>
+      <RadixDialog.Portal>
+        <RadixDialog.Overlay
           className={clx(
             "bg-ui-bg-overlay fixed inset-0",
             "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
           )}
         />
-        <Dialog.Content
+        <RadixDialog.Content
           className={clx(
             "bg-ui-bg-subtle shadow-elevation-modal fixed inset-y-2 left-2 flex w-full max-w-[304px] flex-col overflow-hidden rounded-lg border-r",
             "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2 duration-200"
           )}
         >
           <div className="p-3">
-            <Dialog.Close asChild>
+            <RadixDialog.Close asChild>
               <IconButton
                 size="small"
                 variant="transparent"
@@ -248,17 +247,17 @@ const MobileSidebarContainer = ({ children }: PropsWithChildren) => {
               >
                 <XMark />
               </IconButton>
-            </Dialog.Close>
-            <Dialog.Title className="sr-only">
+            </RadixDialog.Close>
+            <RadixDialog.Title className="sr-only">
               {t("app.nav.accessibility.title")}
-            </Dialog.Title>
-            <Dialog.Description className="sr-only">
+            </RadixDialog.Title>
+            <RadixDialog.Description className="sr-only">
               {t("app.nav.accessibility.description")}
-            </Dialog.Description>
+            </RadixDialog.Description>
           </div>
           {children}
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
+        </RadixDialog.Content>
+      </RadixDialog.Portal>
+    </RadixDialog.Root>
   )
 }

packages/admin/dashboard/src/components/layout/user-menu/user-menu.tsx

@@ -18,7 +18,7 @@ import {
   Text,
   clx,
 } from "@medusajs/ui"
-import * as Dialog from "@radix-ui/react-dialog"
+import { Dialog as RadixDialog } from "radix-ui"
 import { useTranslation } from "react-i18next"
 
 import { Skeleton } from "../../common/skeleton"
@@ -231,25 +231,25 @@ const GlobalKeybindsModal = (props: {
     : globalShortcuts
 
   return (
-    <Dialog.Root {...props}>
-      <Dialog.Portal>
-        <Dialog.Overlay className="bg-ui-bg-overlay fixed inset-0" />
-        <Dialog.Content className="bg-ui-bg-subtle shadow-elevation-modal fixed left-[50%] top-[50%] flex h-full max-h-[612px] w-full max-w-[560px] translate-x-[-50%] translate-y-[-50%] flex-col divide-y overflow-hidden rounded-lg">
+    <RadixDialog.Root {...props}>
+      <RadixDialog.Portal>
+        <RadixDialog.Overlay className="bg-ui-bg-overlay fixed inset-0" />
+        <RadixDialog.Content className="bg-ui-bg-subtle shadow-elevation-modal fixed left-[50%] top-[50%] flex h-full max-h-[612px] w-full max-w-[560px] translate-x-[-50%] translate-y-[-50%] flex-col divide-y overflow-hidden rounded-lg">
           <div className="flex flex-col gap-y-3 px-6 py-4">
             <div className="flex items-center justify-between">
               <div>
-                <Dialog.Title asChild>
+                <RadixDialog.Title asChild>
                   <Heading>{t("app.menus.user.shortcuts")}</Heading>
-                </Dialog.Title>
-                <Dialog.Description className="sr-only"></Dialog.Description>
+                </RadixDialog.Title>
+                <RadixDialog.Description className="sr-only"></RadixDialog.Description>
               </div>
               <div className="flex items-center gap-x-2">
                 <Kbd>esc</Kbd>
-                <Dialog.Close asChild>
+                <RadixDialog.Close asChild>
                   <IconButton variant="transparent" size="small">
                     <XMark />
                   </IconButton>
-                </Dialog.Close>
+                </RadixDialog.Close>
               </div>
             </div>
             <div>
@@ -286,9 +286,9 @@ const GlobalKeybindsModal = (props: {
               )
             })}
           </div>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
+        </RadixDialog.Content>
+      </RadixDialog.Portal>
+    </RadixDialog.Root>
   )
 }