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/admin/dashboard/src/components/common/form/form.tsx
+++ b/packages/admin/dashboard/src/components/common/form/form.tsx
@@ -6,8 +6,7 @@ import {
  Tooltip,
  clx,
 } from "@medusajs/ui"
-import * as LabelPrimitives from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import { Label as RadixLabel, Slot } from "radix-ui"
 import React, {
  ReactNode,
  createContext,
@@ -103,8 +102,8 @@ const Item = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
 Item.displayName = "Form.Item"

 const Label = forwardRef<
-  React.ElementRef<typeof LabelPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitives.Root> & {
+  React.ElementRef<typeof RadixLabel.Root>,
+  React.ComponentPropsWithoutRef<typeof RadixLabel.Root> & {
    optional?: boolean
    tooltip?: ReactNode
    icon?: ReactNode
@@ -141,8 +140,8 @@ const Label = forwardRef<
 Label.displayName = "Form.Label"

 const Control = forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
+  React.ElementRef<typeof Slot.Root>,
+  React.ComponentPropsWithoutRef<typeof Slot.Root>
 >(({ ...props }, ref) => {
  const {
    error,
@@ -153,7 +152,7 @@ const Control = forwardRef<
  } = useFormField()

  return (
-    <Slot
+    <Slot.Root
      ref={ref}
      id={formItemId}
      aria-describedby={
--- a/packages/admin/dashboard/src/components/data-grid/components/data-grid-keyboard-shortcut-modal.tsx
+++ b/packages/admin/dashboard/src/components/data-grid/components/data-grid-keyboard-shortcut-modal.tsx
@@ -8,7 +8,7 @@ import {
  Kbd,
  Text,
 } from "@medusajs/ui"
-import * as Dialog from "@radix-ui/react-dialog"
+import { Dialog as RadixDialog } from "radix-ui"
 import { useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"

@@ -177,35 +177,35 @@ export const DataGridKeyboardShortcutModal = ({
  }, [searchValue, shortcuts])

  return (
-    <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      <Dialog.Trigger asChild>
+    <RadixDialog.Root open={open} onOpenChange={onOpenChange}>
+      <RadixDialog.Trigger asChild>
        <Button size="small" variant="secondary">
          {t("dataGrid.shortcuts.label")}
        </Button>
-      </Dialog.Trigger>
-      <Dialog.Portal>
-        <Dialog.Overlay
+      </RadixDialog.Trigger>
+      <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 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 outline-none">
+        <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 outline-none">
          <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>
@@ -238,8 +238,8 @@ export const DataGridKeyboardShortcutModal = ({
              )
            })}
          </div>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
+        </RadixDialog.Content>
+      </RadixDialog.Portal>
+    </RadixDialog.Root>
  )
 }
--- a/packages/admin/dashboard/src/components/layout/main-layout/main-layout.tsx
+++ b/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>
  )
--- a/packages/admin/dashboard/src/components/layout/nav-item/nav-item.tsx
+++ b/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>
  )
--- a/packages/admin/dashboard/src/components/layout/settings-layout/settings-layout.tsx
+++ b/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>
  )
 }

--- a/packages/admin/dashboard/src/components/layout/shell/shell.tsx
+++ b/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>
  )
 }
--- a/packages/admin/dashboard/src/components/layout/user-menu/user-menu.tsx
+++ b/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>
  )
 }

--- a/packages/admin/dashboard/src/components/search/search.tsx
+++ b/packages/admin/dashboard/src/components/search/search.tsx
@@ -7,8 +7,8 @@ import {
  Kbd,
  Text,
 } from "@medusajs/ui"
-import * as Dialog from "@radix-ui/react-dialog"
 import { Command } from "cmdk"
+import { Dialog as RadixDialog } from "radix-ui"
 import {
  Children,
  ComponentPropsWithoutRef,
@@ -285,7 +285,7 @@ const CommandPalette = forwardRef<
 ))
 CommandPalette.displayName = Command.displayName

-interface CommandDialogProps extends Dialog.DialogProps {
+interface CommandDialogProps extends RadixDialog.DialogProps {
  isLoading?: boolean
 }

@@ -297,10 +297,10 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
  }, [props.isLoading, children])

  return (
-    <Dialog.Root {...props}>
-      <Dialog.Portal>
-        <Dialog.Overlay className="bg-ui-bg-overlay fixed inset-0" />
-        <Dialog.Content
+    <RadixDialog.Root {...props}>
+      <RadixDialog.Portal>
+        <RadixDialog.Overlay className="bg-ui-bg-overlay fixed inset-0" />
+        <RadixDialog.Content
          className={clx(
            "bg-ui-bg-base shadow-elevation-modal fixed left-[50%] top-[50%] flex max-h-[calc(100%-16px)] w-[calc(100%-16px)] min-w-0 max-w-2xl translate-x-[-50%] translate-y-[-50%] flex-col overflow-hidden rounded-xl p-0",
            {
@@ -308,12 +308,12 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
            }
          )}
        >
-          <Dialog.Title className="sr-only">
+          <RadixDialog.Title className="sr-only">
            {t("app.search.title")}
-          </Dialog.Title>
-          <Dialog.Description className="sr-only">
+          </RadixDialog.Title>
+          <RadixDialog.Description className="sr-only">
            {t("app.search.description")}
-          </Dialog.Description>
+          </RadixDialog.Description>
          <CommandPalette className="[&_[cmdk-group-heading]]:text-muted-foreground flex h-full flex-col overflow-hidden [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0">
            {children}
          </CommandPalette>
@@ -337,9 +337,9 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
              </div>
            </div>
          </div>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
+        </RadixDialog.Content>
+      </RadixDialog.Portal>
+    </RadixDialog.Root>
  )
 }

--- a/packages/admin/dashboard/src/components/table/data-table/data-table-filter/data-table-filter.tsx
+++ b/packages/admin/dashboard/src/components/table/data-table/data-table-filter/data-table-filter.tsx
@@ -1,5 +1,5 @@
 import { Button, clx } from "@medusajs/ui"
-import * as Popover from "@radix-ui/react-popover"
+import { Popover as RadixPopover } from "radix-ui"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useSearchParams } from "react-router-dom"

@@ -174,14 +174,14 @@ export const DataTableFilter = ({
          }
        })}
        {!readonly && availableFilters.length > 0 && (
-          <Popover.Root modal open={open} onOpenChange={setOpen}>
-            <Popover.Trigger asChild id="filters_menu_trigger">
+          <RadixPopover.Root modal open={open} onOpenChange={setOpen}>
+            <RadixPopover.Trigger asChild id="filters_menu_trigger">
              <Button size="small" variant="secondary">
                {t("filters.addFilter")}
              </Button>
-            </Popover.Trigger>
-            <Popover.Portal>
-              <Popover.Content
+            </RadixPopover.Trigger>
+            <RadixPopover.Portal>
+              <RadixPopover.Content
                className={clx(
                  "bg-ui-bg-base text-ui-fg-base shadow-elevation-flyout z-[1] h-full max-h-[200px] w-[300px] overflow-auto rounded-lg p-1 outline-none"
                )}
@@ -213,9 +213,9 @@ export const DataTableFilter = ({
                    </div>
                  )
                })}
-              </Popover.Content>
-            </Popover.Portal>
-          </Popover.Root>
+              </RadixPopover.Content>
+            </RadixPopover.Portal>
+          </RadixPopover.Root>
        )}
        {!readonly && activeFilters.length > 0 && (
          <ClearAllFilters filters={filters} prefix={prefix} />
--- a/packages/admin/dashboard/src/components/table/data-table/data-table-filter/date-filter.tsx
+++ b/packages/admin/dashboard/src/components/table/data-table/data-table-filter/date-filter.tsx
@@ -1,7 +1,7 @@
 import { EllipseMiniSolid } from "@medusajs/icons"
 import { DatePicker, Text, clx } from "@medusajs/ui"
-import * as Popover from "@radix-ui/react-popover"
 import isEqual from "lodash/isEqual"
+import { Popover as RadixPopover } from "radix-ui"
 import { useMemo, useState } from "react"

 import { t } from "i18next"
@@ -124,7 +124,7 @@ export const DateFilter = ({
  }

  return (
-    <Popover.Root modal open={open} onOpenChange={handleOpenChange}>
+    <RadixPopover.Root modal open={open} onOpenChange={handleOpenChange}>
      <FilterChip
        hadPreviousValue={!!previousValue}
        label={label}
@@ -133,8 +133,8 @@ export const DateFilter = ({
        readonly={readonly}
      />
      {!readonly && (
-        <Popover.Portal>
-          <Popover.Content
+        <RadixPopover.Portal>
+          <RadixPopover.Content
            data-name="date_filter_content"
            align="start"
            sideOffset={8}
@@ -238,10 +238,10 @@ export const DateFilter = ({
                </div>
              </div>
            )}
-          </Popover.Content>
-        </Popover.Portal>
+          </RadixPopover.Content>
+        </RadixPopover.Portal>
      )}
-    </Popover.Root>
+    </RadixPopover.Root>
  )
 }

--- a/packages/admin/dashboard/src/components/table/data-table/data-table-filter/filter-chip.tsx
+++ b/packages/admin/dashboard/src/components/table/data-table/data-table-filter/filter-chip.tsx
@@ -1,8 +1,8 @@
 import { XMarkMini } from "@medusajs/icons"
 import { Text, clx } from "@medusajs/ui"
-import { useTranslation } from "react-i18next"
+import { Popover as RadixPopover } from "radix-ui"
 import { MouseEvent } from "react"
-import * as Popover from "@radix-ui/react-popover"
+import { useTranslation } from "react-i18next"

 export type FilterChipProps = {
  hadPreviousValue?: boolean
@@ -29,12 +29,8 @@ const FilterChip = ({
  }

  return (
-    <div
-      className="bg-ui-bg-field transition-fg shadow-borders-base text-ui-fg-subtle flex cursor-default select-none items-stretch overflow-hidden rounded-md"
-    >
-      {!hadPreviousValue && (
-        <Popover.Anchor />
-      )}
+    <div className="bg-ui-bg-field transition-fg shadow-borders-base text-ui-fg-subtle flex cursor-default select-none items-stretch overflow-hidden rounded-md">
+      {!hadPreviousValue && <RadixPopover.Anchor />}
      <div
        className={clx(
          "flex items-center justify-center whitespace-nowrap px-2 py-1",
@@ -61,12 +57,16 @@ const FilterChip = ({
          </div>
        )}
        {!!(value || hadPreviousValue) && (
-          <Popover.Trigger asChild className={clx("flex-1 cursor-pointer overflow-hidden border-r p-1 px-2",
-            {
-              "hover:bg-ui-bg-field-hover": !readonly,
-              "data-[state=open]:bg-ui-bg-field-hover": !readonly,
-            }
-          )}>
+          <RadixPopover.Trigger
+            asChild
+            className={clx(
+              "flex-1 cursor-pointer overflow-hidden border-r p-1 px-2",
+              {
+                "hover:bg-ui-bg-field-hover": !readonly,
+                "data-[state=open]:bg-ui-bg-field-hover": !readonly,
+              }
+            )}
+          >
            <Text
              size="small"
              leading="compact"
@@ -75,7 +75,7 @@ const FilterChip = ({
            >
              {value || "\u00A0"}
            </Text>
-          </Popover.Trigger>
+          </RadixPopover.Trigger>
        )}
      </div>
      {!readonly && !!(value || hadPreviousValue) && (
--- a/packages/admin/dashboard/src/components/table/data-table/data-table-filter/number-filter.tsx
+++ b/packages/admin/dashboard/src/components/table/data-table/data-table-filter/number-filter.tsx
@@ -1,21 +1,18 @@
 import { EllipseMiniSolid } from "@medusajs/icons"
 import { Input, Label, clx } from "@medusajs/ui"
-import * as Popover from "@radix-ui/react-popover"
-import * as RadioGroup from "@radix-ui/react-radio-group"
 import { debounce } from "lodash"
 import {
-  ChangeEvent,
-  useCallback,
-  useEffect,
-  useState,
-} from "react"
+  Popover as RadixPopover,
+  RadioGroup as RadixRadioGroup,
+} from "radix-ui"
+import { ChangeEvent, useCallback, useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"

+import { TFunction } from "i18next"
 import { useSelectedParams } from "../hooks"
 import { useDataTableFilterContext } from "./context"
-import { IFilter } from "./types"
-import { TFunction } from "i18next"
 import FilterChip from "./filter-chip"
+import { IFilter } from "./types"

 type NumberFilterProps = IFilter

@@ -140,7 +137,7 @@ export const NumberFilter = ({
  const previousDisplayValue = parseDisplayValue(previousValue, t)

  return (
-    <Popover.Root modal open={open} onOpenChange={handleOpenChange}>
+    <RadixPopover.Root modal open={open} onOpenChange={handleOpenChange}>
      <FilterChip
        hasOperator
        hadPreviousValue={!!previousDisplayValue}
@@ -150,8 +147,8 @@ export const NumberFilter = ({
        readonly={readonly}
      />
      {!readonly && (
-        <Popover.Portal>
-          <Popover.Content
+        <RadixPopover.Portal>
+          <RadixPopover.Content
            data-name="number_filter_content"
            align="start"
            sideOffset={8}
@@ -171,7 +168,7 @@ export const NumberFilter = ({
            }}
          >
            <div className="p-1">
-              <RadioGroup.Root
+              <RadixRadioGroup.Root
                value={operator}
                onValueChange={(val) => setOperator(val as Comparison)}
                className="flex flex-col items-start"
@@ -179,20 +176,20 @@ export const NumberFilter = ({
                autoFocus
              >
                {operators.map((o) => (
-                  <RadioGroup.Item
+                  <RadixRadioGroup.Item
                    key={o.operator}
                    value={o.operator}
                    className="txt-compact-small hover:bg-ui-bg-base-hover focus-visible:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed transition-fg grid w-full grid-cols-[20px_1fr] gap-2 rounded-[4px] px-2 py-1.5 text-left outline-none"
                  >
                    <div className="size-5">
-                      <RadioGroup.Indicator>
+                      <RadixRadioGroup.Indicator>
                        <EllipseMiniSolid />
-                      </RadioGroup.Indicator>
+                      </RadixRadioGroup.Indicator>
                    </div>
                    <span className="w-full">{o.label}</span>
-                  </RadioGroup.Item>
+                  </RadixRadioGroup.Item>
                ))}
-              </RadioGroup.Root>
+              </RadixRadioGroup.Root>
            </div>
            <div>
              {operator === "range" ? (
@@ -245,14 +242,17 @@ export const NumberFilter = ({
                </div>
              )}
            </div>
-          </Popover.Content>
-        </Popover.Portal>
+          </RadixPopover.Content>
+        </RadixPopover.Portal>
      )}
-    </Popover.Root>
+    </RadixPopover.Root>
  )
 }

-const parseDisplayValue = (value: string[] | null | undefined, t: TFunction) => {
+const parseDisplayValue = (
+  value: string[] | null | undefined,
+  t: TFunction
+) => {
  const parsed = JSON.parse(value?.join(",") || "{}")
  let displayValue = ""

--- a/packages/admin/dashboard/src/components/table/data-table/data-table-filter/select-filter.tsx
+++ b/packages/admin/dashboard/src/components/table/data-table/data-table-filter/select-filter.tsx
@@ -1,7 +1,7 @@
 import { CheckMini, EllipseMiniSolid, XMarkMini } from "@medusajs/icons"
 import { clx } from "@medusajs/ui"
-import * as Popover from "@radix-ui/react-popover"
 import { Command } from "cmdk"
+import { Popover as RadixPopover } from "radix-ui"
 import { useState } from "react"
 import { useTranslation } from "react-i18next"

@@ -98,7 +98,7 @@ export const SelectFilter = ({
    : null

  return (
-    <Popover.Root modal open={open} onOpenChange={handleOpenChange}>
+    <RadixPopover.Root modal open={open} onOpenChange={handleOpenChange}>
      <FilterChip
        hasOperator
        hadPreviousValue={!!normalizedPrev?.length}
@@ -108,8 +108,8 @@ export const SelectFilter = ({
        onRemove={handleRemove}
      />
      {!readonly && (
-        <Popover.Portal>
-          <Popover.Content
+        <RadixPopover.Portal>
+          <RadixPopover.Content
            hideWhenDetached
            align="start"
            sideOffset={8}
@@ -193,9 +193,9 @@ export const SelectFilter = ({
                })}
              </Command.List>
            </Command>
-          </Popover.Content>
-        </Popover.Portal>
+          </RadixPopover.Content>
+        </RadixPopover.Portal>
      )}
-    </Popover.Root>
+    </RadixPopover.Root>
  )
 }
--- a/packages/admin/dashboard/src/components/table/data-table/data-table-filter/string-filter.tsx
+++ b/packages/admin/dashboard/src/components/table/data-table/data-table-filter/string-filter.tsx
@@ -1,11 +1,11 @@
 import { Input, Label, clx } from "@medusajs/ui"
-import * as Popover from "@radix-ui/react-popover"
 import { debounce } from "lodash"
+import { Popover as RadixPopover } from "radix-ui"
 import { ChangeEvent, useCallback, useEffect, useState } from "react"
 import { useSelectedParams } from "../hooks"
 import { useDataTableFilterContext } from "./context"
-import { IFilter } from "./types"
 import FilterChip from "./filter-chip"
+import { IFilter } from "./types"

 type StringFilterProps = IFilter

@@ -24,7 +24,9 @@ export const StringFilter = ({

  const query = selectedParams.get()

-  const [previousValue, setPreviousValue] = useState<string | undefined>(query?.[0])
+  const [previousValue, setPreviousValue] = useState<string | undefined>(
+    query?.[0]
+  )

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const debouncedOnChange = useCallback(
@@ -69,7 +71,7 @@ export const StringFilter = ({
  }

  return (
-    <Popover.Root modal open={open} onOpenChange={handleOpenChange}>
+    <RadixPopover.Root modal open={open} onOpenChange={handleOpenChange}>
      <FilterChip
        hasOperator
        hadPreviousValue={!!previousValue}
@@ -79,8 +81,8 @@ export const StringFilter = ({
        readonly={readonly}
      />
      {!readonly && (
-        <Popover.Portal>
-          <Popover.Content
+        <RadixPopover.Portal>
+          <RadixPopover.Content
            hideWhenDetached
            align="start"
            sideOffset={8}
@@ -115,9 +117,9 @@ export const StringFilter = ({
                />
              </div>
            </div>
-          </Popover.Content>
-        </Popover.Portal>
+          </RadixPopover.Content>
+        </RadixPopover.Portal>
      )}
-    </Popover.Root>
+    </RadixPopover.Root>
  )
 }