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/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>
  )
 }