@medusajs/dashboard 3.0.0-snapshot-20250410112222 → 3.0.0-snapshot-20251104011621

package/src/components/inputs/country-select/country-select.tsx

@@ -4,75 +4,50 @@ import {
   useImperativeHandle,
   useRef,
 } from "react"
-
-import { TrianglesMini } from "@medusajs/icons"
-import { clx } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { countries } from "../../../lib/data/countries"
+import { Select } from "@medusajs/ui"
 
 export const CountrySelect = forwardRef<
-  HTMLSelectElement,
-  ComponentPropsWithoutRef<"select"> & {
+  HTMLButtonElement,
+  ComponentPropsWithoutRef<typeof Select> & {
     placeholder?: string
-    value?: string
     defaultValue?: string
+    onChange?: (value: string) => void
   }
->(
-  (
-    { className, disabled, placeholder, value, defaultValue, ...props },
-    ref
-  ) => {
-    const { t } = useTranslation()
-    const innerRef = useRef<HTMLSelectElement>(null)
-
-    useImperativeHandle(ref, () => innerRef.current as HTMLSelectElement)
+>(({ disabled, placeholder, defaultValue, onChange, ...field }, ref) => {
+  const { t } = useTranslation()
+  const innerRef = useRef<HTMLButtonElement>(null)
 
-    const isPlaceholder = innerRef.current?.value === ""
+  useImperativeHandle(ref, () => innerRef.current as HTMLButtonElement)
+  
+  return (
+    <div className="relative">
+      <Select
+        {...field}
+        value={field.value ? field.value?.toLowerCase() : undefined}
+        onValueChange={onChange}
+        defaultValue={defaultValue ? defaultValue.toLowerCase() : undefined}
+        disabled={disabled}
+      >
+        <Select.Trigger ref={innerRef} className="w-full">
+          <Select.Value
+            placeholder={placeholder || t("fields.selectCountry")}
+          />
+        </Select.Trigger>
+        <Select.Content>
+          {countries.map((country) => (
+            <Select.Item
+              key={country.iso_2}
+              value={country.iso_2.toLowerCase()}
+            >
+              {country.display_name}
+            </Select.Item>
+          ))}
+        </Select.Content>
+      </Select>
+    </div>
+  )
+})
 
-    return (
-      <div className="relative">
-        <TrianglesMini
-          className={clx(
-            "text-ui-fg-muted transition-fg pointer-events-none absolute right-2 top-1/2 -translate-y-1/2",
-            {
-              "text-ui-fg-disabled": disabled,
-            }
-          )}
-        />
-        <select
-          value={value !== undefined ? value.toLowerCase() : undefined}
-          defaultValue={defaultValue ? defaultValue.toLowerCase() : undefined}
-          disabled={disabled}
-          className={clx(
-            "bg-ui-bg-field shadow-buttons-neutral transition-fg txt-compact-small flex w-full select-none appearance-none items-center justify-between rounded-md px-2 py-1.5 outline-none",
-            "placeholder:text-ui-fg-muted text-ui-fg-base",
-            "hover:bg-ui-bg-field-hover",
-            "focus-visible:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active",
-            "aria-[invalid=true]:border-ui-border-error aria-[invalid=true]:shadow-borders-error",
-            "invalid::border-ui-border-error invalid:shadow-borders-error",
-            "disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
-            {
-              "text-ui-fg-muted": isPlaceholder,
-            },
-            className
-          )}
-          {...props}
-          ref={innerRef}
-        >
-          {/* Add an empty option so the first option is preselected */}
-          <option value="" disabled className="text-ui-fg-muted">
-            {placeholder || t("fields.selectCountry")}
-          </option>
-          {countries.map((country) => {
-            return (
-              <option key={country.iso_2} value={country.iso_2.toLowerCase()}>
-                {country.display_name}
-              </option>
-            )
-          })}
-        </select>
-      </div>
-    )
-  }
-)
 CountrySelect.displayName = "CountrySelect"

package/src/components/inputs/percentage-input/percentage-input.tsx

@@ -1,10 +1,22 @@
-import { Input, Text, clx } from "@medusajs/ui"
+import { clx, Input, Text } from "@medusajs/ui"
+import { getNumberOfDecimalPlaces } from "../../../lib/number-helper"
 import { ComponentProps, ElementRef, forwardRef } from "react"
 import Primitive from "react-currency-input-field"
 
-/**
- * @deprecated Use `PercentageInput` instead
- */
+const MIN_DECIMAL_SCALE = 2
+
+function resolveDecimalScale(
+  value: string | readonly string[] | number | undefined | null
+): number | undefined {
+  if (value == null || Array.isArray(value)) {
+    return MIN_DECIMAL_SCALE
+  }
+  return Math.max(
+    getNumberOfDecimalPlaces(parseFloat(value.toString())),
+    MIN_DECIMAL_SCALE
+  )
+}
+
 export const DeprecatedPercentageInput = forwardRef<
   ElementRef<typeof Input>,
   Omit<ComponentProps<typeof Input>, "type">
@@ -38,38 +50,56 @@ DeprecatedPercentageInput.displayName = "PercentageInput"
 export const PercentageInput = forwardRef<
   ElementRef<"input">,
   ComponentProps<typeof Primitive>
->(({ min = 0, decimalScale = 2, className, ...props }, ref) => {
-  return (
-    <div className="relative">
-      <Primitive
-        ref={ref as any} // dependency is typed incorrectly
-        min={min}
-        autoComplete="off"
-        decimalScale={decimalScale}
-        decimalsLimit={decimalScale}
-        {...props}
-        className={clx(
-          "caret-ui-fg-base bg-ui-bg-field shadow-buttons-neutral transition-fg txt-compact-small flex w-full select-none appearance-none items-center justify-between rounded-md px-2 py-1.5 pr-10 text-right outline-none",
-          "placeholder:text-ui-fg-muted text-ui-fg-base",
-          "hover:bg-ui-bg-field-hover",
-          "focus-visible:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active",
-          "aria-[invalid=true]:border-ui-border-error aria-[invalid=true]:shadow-borders-error",
-          "invalid::border-ui-border-error invalid:shadow-borders-error",
-          "disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
-          className
-        )}
-      />
-      <div className="absolute inset-y-0 right-0 z-10 flex w-8 items-center justify-center border-l">
-        <Text
-          className="text-ui-fg-muted"
-          size="small"
-          leading="compact"
-          weight="plus"
-        >
-          %
-        </Text>
+>(
+  (
+    {
+      min = 0,
+      max = 100,
+      decimalScale,
+      decimalsLimit,
+      value,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const resolvedDecimalScale = decimalScale ?? resolveDecimalScale(value)
+    const resolvedDecimalsLimit = decimalsLimit ?? resolvedDecimalScale
+
+    return (
+      <div className="relative">
+        <Primitive
+          ref={ref as any} // dependency is typed incorrectly
+          min={min}
+          max={max}
+          autoComplete="off"
+          decimalScale={resolvedDecimalScale}
+          decimalsLimit={resolvedDecimalsLimit}
+          value={value}
+          {...props}
+          className={clx(
+            "caret-ui-fg-base bg-ui-bg-field shadow-buttons-neutral transition-fg txt-compact-small flex w-full select-none appearance-none items-center justify-between rounded-md px-2 py-1.5 pl-10 text-left outline-none",
+            "placeholder:text-ui-fg-muted text-ui-fg-base",
+            "hover:bg-ui-bg-field-hover",
+            "focus-visible:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active",
+            "aria-[invalid=true]:border-ui-border-error aria-[invalid=true]:shadow-borders-error",
+            "invalid::border-ui-border-error invalid:shadow-borders-error",
+            "disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
+            className
+          )}
+        />
+        <div className="absolute inset-y-0 left-0 z-10 flex w-8 items-center justify-center border-r">
+          <Text
+            className="text-ui-fg-muted"
+            size="small"
+            leading="compact"
+            weight="plus"
+          >
+            %
+          </Text>
+        </div>
       </div>
-    </div>
-  )
-})
+    )
+  }
+)
 PercentageInput.displayName = "PercentageInput"

package/src/components/inputs/province-select/province-select.tsx

@@ -4,47 +4,36 @@ import {
   useImperativeHandle,
   useRef,
 } from "react"
-
-import { TrianglesMini } from "@medusajs/icons"
-import { clx } from "@medusajs/ui"
+import { Select } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { getCountryProvinceObjectByIso2 } from "../../../lib/data/country-states"
 
-interface ProvinceSelectProps extends ComponentPropsWithoutRef<"select"> {
-  /**
-   * ISO 3166-1 alpha-2 country code
-   */
-  country_code: string
-  /**
-   * Whether to use the ISO 3166-1 alpha-2 code or the name of the province as the value
-   *
-   * @default "iso_2"
-   */
-  valueAs?: "iso_2" | "name"
-  placeholder?: string
-}
-
 export const ProvinceSelect = forwardRef<
-  HTMLSelectElement,
-  ProvinceSelectProps
+  HTMLButtonElement,
+  ComponentPropsWithoutRef<typeof Select> & {
+    placeholder?: string
+    defaultValue?: string
+    country_code: string
+    valueAs?: "iso_2" | "name"
+    onChange?: (value: string) => void
+  }
 >(
   (
     {
-      className,
       disabled,
       placeholder,
+      defaultValue,
       country_code,
       valueAs = "iso_2",
-      ...props
+      onChange,
+      ...field
     },
     ref
   ) => {
     const { t } = useTranslation()
-    const innerRef = useRef<HTMLSelectElement>(null)
+    const innerRef = useRef<HTMLButtonElement>(null)
 
-    useImperativeHandle(ref, () => innerRef.current as HTMLSelectElement)
-
-    const isPlaceholder = innerRef.current?.value === ""
+    useImperativeHandle(ref, () => innerRef.current as HTMLButtonElement)
 
     const provinceObject = getCountryProvinceObjectByIso2(country_code)
 
@@ -55,9 +44,12 @@ export const ProvinceSelect = forwardRef<
     const options = Object.entries(provinceObject?.options ?? {}).map(
       ([iso2, name]) => {
         return (
-          <option key={iso2} value={valueAs === "iso_2" ? iso2 : name}>
+          <Select.Item
+            key={iso2}
+            value={valueAs === "iso_2" ? iso2.toLowerCase() : name}
+          >
             {name}
-          </option>
+          </Select.Item>
         )
       }
     )
@@ -66,46 +58,34 @@ export const ProvinceSelect = forwardRef<
       ? t(`taxRegions.fields.sublevels.placeholders.${provinceObject.type}`)
       : ""
 
-    const placeholderOption = provinceObject ? (
-      <option value="" disabled className="text-ui-fg-muted">
-        {placeholder || placeholderText}
-      </option>
-    ) : null
-
     return (
       <div className="relative">
-        <TrianglesMini
-          className={clx(
-            "text-ui-fg-muted transition-fg pointer-events-none absolute right-2 top-1/2 -translate-y-1/2",
-            {
-              "text-ui-fg-disabled": disabled,
-            }
-          )}
-        />
-        <select
+        <Select
+          {...field}
+          value={
+            field.value
+              ? valueAs === "iso_2"
+                ? field.value.toLowerCase()
+                : field.value
+              : undefined
+          }
+          defaultValue={
+            defaultValue
+              ? valueAs === "iso_2"
+                ? defaultValue.toLowerCase()
+                : defaultValue
+              : undefined
+          }
+          onValueChange={onChange}
           disabled={disabled}
-          className={clx(
-            "bg-ui-bg-field shadow-buttons-neutral transition-fg txt-compact-small flex w-full select-none appearance-none items-center justify-between rounded-md px-2 py-1.5 outline-none",
-            "placeholder:text-ui-fg-muted text-ui-fg-base",
-            "hover:bg-ui-bg-field-hover",
-            "focus-visible:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active",
-            "aria-[invalid=true]:border-ui-border-error aria-[invalid=true]:shadow-borders-error",
-            "invalid::border-ui-border-error invalid:shadow-borders-error",
-            "disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
-            {
-              "text-ui-fg-muted": isPlaceholder,
-            },
-            className
-          )}
-          {...props}
-          ref={innerRef}
         >
-          {/* Add an empty option so the first option is preselected */}
-          {placeholderOption}
-          {options}
-        </select>
+          <Select.Trigger ref={innerRef} className="w-full">
+            <Select.Value placeholder={placeholder || placeholderText} />
+          </Select.Trigger>
+          <Select.Content>{options}</Select.Content>
+        </Select>
       </div>
     )
   }
 )
-ProvinceSelect.displayName = "CountrySelect"
+ProvinceSelect.displayName = "ProvinceSelect"

package/src/components/layout/main-layout/main-layout.tsx

@@ -29,6 +29,7 @@ import { queryClient } from "../../../lib/query-client"
 import { useExtension } from "../../../providers/extension-provider"
 import { useSearch } from "../../../providers/search-provider"
 import { UserMenu } from "../user-menu"
+import { useDocumentDirection } from "../../../hooks/use-document-direction"
 
 export const MainLayout = () => {
   return (
@@ -94,7 +95,7 @@ const Logout = () => {
 const Header = () => {
   const { t } = useTranslation()
   const { store, isPending, isError, error } = useStore()
-
+  const direction = useDocumentDirection()
   const name = store?.name
   const fallback = store?.name?.slice(0, 1).toUpperCase()
 
@@ -106,11 +107,12 @@ const Header = () => {
 
   return (
     <div className="w-full p-3">
-      <DropdownMenu>
+    <DropdownMenu
+          dir={direction}>
         <DropdownMenu.Trigger
           disabled={!isLoaded}
           className={clx(
-            "bg-ui-bg-subtle transition-fg grid w-full grid-cols-[24px_1fr_15px] items-center gap-x-3 rounded-md p-0.5 pr-2 outline-none",
+            "bg-ui-bg-subtle transition-fg grid w-full grid-cols-[24px_1fr_15px] items-center gap-x-3 rounded-md p-0.5 pe-2 outline-none",
             "hover:bg-ui-bg-subtle-hover",
             "data-[state=open]:bg-ui-bg-subtle-hover",
             "focus-visible:shadow-borders-focus"
@@ -121,7 +123,7 @@ const Header = () => {
           ) : (
             <Skeleton className="h-6 w-6 rounded-md" />
           )}
-          <div className="block overflow-hidden text-left">
+          <div className="block overflow-hidden text-start">
             {name ? (
               <Text
                 size="small"
@@ -267,7 +269,7 @@ const Searchbar = () => {
         )}
       >
         <MagnifyingGlass />
-        <div className="flex-1 text-left">
+        <div className="flex-1 text-start">
           <Text size="small" leading="compact" weight="plus">
             {t("app.search.label")}
           </Text>

package/src/components/layout/settings-layout/settings-layout.tsx

@@ -43,6 +43,10 @@ const useSettingRoutes = (): INavItem[] => {
         label: t("returnReasons.domain"),
         to: "/settings/return-reasons",
       },
+      {
+        label: t("refundReasons.domain"),
+        to: "/settings/refund-reasons",
+      },
       {
         label: t("salesChannels.domain"),
         to: "/settings/sales-channels",

package/src/components/layout/shell/shell.tsx

@@ -156,7 +156,7 @@ const Breadcrumbs = () => {
             )}
             {!isLast && (
               <span className="mx-2">
-                <TriangleRightMini />
+                <TriangleRightMini className="rtl:rotate-180" />
               </span>
             )}
           </li>
@@ -177,7 +177,7 @@ const ToggleSidebar = () => {
         onClick={() => toggle("desktop")}
         size="small"
       >
-        <SidebarLeft className="text-ui-fg-muted" />
+        <SidebarLeft className="text-ui-fg-muted rtl:rotate-180" />
       </IconButton>
       <IconButton
         className="hidden max-lg:flex"
@@ -185,7 +185,7 @@ const ToggleSidebar = () => {
         onClick={() => toggle("mobile")}
         size="small"
       >
-        <SidebarLeft className="text-ui-fg-muted" />
+        <SidebarLeft className="text-ui-fg-muted rtl:rotate-180" />
       </IconButton>
     </div>
   )
@@ -210,7 +210,7 @@ const DesktopSidebarContainer = ({ children }: PropsWithChildren) => {
 
   return (
     <div
-      className={clx("hidden h-screen w-[220px] border-r", {
+      className={clx("hidden h-screen w-[220px] border-e", {
         "lg:flex": desktop,
       })}
     >
@@ -234,8 +234,8 @@ const MobileSidebarContainer = ({ children }: PropsWithChildren) => {
         />
         <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"
+            "bg-ui-bg-subtle shadow-elevation-modal fixed inset-y-2 start-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-start-1/2 data-[state=open]:slide-in-from-start-1/2 duration-200"
           )}
         >
           <div className="p-3">

package/src/components/layout/user-menu/user-menu.tsx

@@ -29,10 +29,12 @@ import { useLogout, useMe } from "../../../hooks/api"
 import { queryClient } from "../../../lib/query-client"
 import { useGlobalShortcuts } from "../../../providers/keybind-provider/hooks"
 import { useTheme } from "../../../providers/theme-provider"
+import { useDocumentDirection } from "../../../hooks/use-document-direction"
 
 export const UserMenu = () => {
   const { t } = useTranslation()
   const location = useLocation()
+  const direction = useDocumentDirection()
 
   const [openMenu, setOpenMenu] = useState(false)
   const [openModal, setOpenModal] = useState(false)
@@ -44,33 +46,33 @@ export const UserMenu = () => {
 
   return (
     <div>
-      <DropdownMenu open={openMenu} onOpenChange={setOpenMenu}>
+      <DropdownMenu dir={direction} open={openMenu} onOpenChange={setOpenMenu}>
         <UserBadge />
         <DropdownMenu.Content className="min-w-[var(--radix-dropdown-menu-trigger-width)] max-w-[var(--radix-dropdown-menu-trigger-width)]">
           <UserItem />
           <DropdownMenu.Separator />
           <DropdownMenu.Item asChild>
             <Link to="/settings/profile" state={{ from: location.pathname }}>
-              <UserIcon className="text-ui-fg-subtle mr-2" />
+              <UserIcon className="text-ui-fg-subtle me-2" />
               {t("app.menus.user.profileSettings")}
             </Link>
           </DropdownMenu.Item>
           <DropdownMenu.Separator />
           <DropdownMenu.Item asChild>
             <Link to="https://docs.medusajs.com" target="_blank">
-              <BookOpen className="text-ui-fg-subtle mr-2" />
+              <BookOpen className="text-ui-fg-subtle me-2" />
               {t("app.menus.user.documentation")}
             </Link>
           </DropdownMenu.Item>
           <DropdownMenu.Item asChild>
             <Link to="https://medusajs.com/changelog/" target="_blank">
-              <TimelineVertical className="text-ui-fg-subtle mr-2" />
+              <TimelineVertical className="text-ui-fg-subtle me-2" />
               {t("app.menus.user.changelog")}
             </Link>
           </DropdownMenu.Item>
           <DropdownMenu.Separator />
           <DropdownMenu.Item onClick={toggleModal}>
-            <Keyboard className="text-ui-fg-subtle mr-2" />
+            <Keyboard className="text-ui-fg-subtle me-2" />
             {t("app.menus.user.shortcuts")}
           </DropdownMenu.Item>
           <ThemeToggle />
@@ -93,7 +95,7 @@ const UserBadge = () => {
 
   if (isPending) {
     return (
-      <button className="shadow-borders-base flex max-w-[192px] select-none items-center gap-x-2 overflow-hidden text-ellipsis whitespace-nowrap rounded-full py-1 pl-1 pr-2.5">
+      <button className="shadow-borders-base flex max-w-[192px] select-none items-center gap-x-2 overflow-hidden text-ellipsis whitespace-nowrap rounded-full py-1 ps-1 pe-2.5">
         <Skeleton className="h-5 w-5 rounded-full" />
         <Skeleton className="h-[9px] w-[70px]" />
       </button>
@@ -109,7 +111,7 @@ const UserBadge = () => {
       <DropdownMenu.Trigger
         disabled={!user}
         className={clx(
-          "bg-ui-bg-subtle grid w-full cursor-pointer grid-cols-[24px_1fr_15px] items-center gap-2 rounded-md py-1 pl-0.5 pr-2 outline-none",
+          "bg-ui-bg-subtle grid w-full cursor-pointer grid-cols-[24px_1fr_15px] items-center gap-2 rounded-md py-1 ps-0.5 pe-2 outline-none",
           "hover:bg-ui-bg-subtle-hover",
           "data-[state=open]:bg-ui-bg-subtle-hover",
           "focus-visible:shadow-borders-focus"
@@ -148,9 +150,9 @@ const ThemeToggle = () => {
 
   return (
     <DropdownMenu.SubMenu>
-      <DropdownMenu.SubMenuTrigger className="rounded-md">
-        <CircleHalfSolid className="text-ui-fg-subtle mr-2" />
-        {t("app.menus.user.theme.label")}
+      <DropdownMenu.SubMenuTrigger dir="ltr" className="rounded-md rtl:rotate-180">
+        <CircleHalfSolid className="text-ui-fg-subtle me-2" />
+        <span className="rtl:rotate-180">{t("app.menus.user.theme.label")}</span>
       </DropdownMenu.SubMenuTrigger>
       <DropdownMenu.SubMenuContent>
         <DropdownMenu.RadioGroup value={theme}>

package/src/components/modals/hooks/use-state-aware-to.tsx

@@ -4,6 +4,7 @@ import { Path, useLocation } from "react-router-dom"
 /**
  * Checks if the current location has a restore_params property.
  * If it does, it will return a new path with the params added to it.
+ * Otherwise, it will check if the current location has search params and preserve them.
  * Otherwise, it will return the previous path.
  *
  * This is useful if the modal needs to return to the original path, with
@@ -15,12 +16,17 @@ export const useStateAwareTo = (prev: string | Partial<Path>) => {
   const to = useMemo(() => {
     const params = location.state?.restore_params
 
-    if (!params) {
-      return prev
+    if (params) {
+      return `${prev}?${params.toString()}`
     }
 
-    return `${prev}?${params.toString()}`
-  }, [location.state, prev])
+    // If no restore_params in state, check if the current URL has search params
+    if (location.search) {
+      return `${prev}${location.search}`
+    }
+
+    return prev
+  }, [location.state, location.search, prev])
 
   return to
 }

package/src/components/modals/route-modal-form/route-modal-form.tsx

@@ -35,22 +35,22 @@ export const RouteModalForm = <TFieldValues extends FieldValues = any>({
     const isSearchChanged = currentLocation.search !== nextLocation.search
 
     if (blockSearch) {
-      const ret = isDirty && (isPathChanged || isSearchChanged)
+      const shouldBlock = isDirty && (isPathChanged || isSearchChanged)
 
-      if (!ret) {
+      if (isPathChanged) {
         onClose?.(isSubmitSuccessful)
       }
 
-      return ret
+      return shouldBlock
     }
 
-    const ret = isDirty && isPathChanged
+    const shouldBlock = isDirty && isPathChanged
 
-    if (!ret) {
+    if (isPathChanged) {
       onClose?.(isSubmitSuccessful)
     }
 
-    return ret
+    return shouldBlock
   })
 
   const handleCancel = () => {

package/src/components/search/search.tsx

@@ -44,6 +44,7 @@ import {
 } from "./constants"
 import { SearchArea } from "./types"
 import { useSearchResults } from "./use-search-results"
+import { useDocumentDirection } from "../../hooks/use-document-direction"
 
 export const Search = () => {
   const [area, setArea] = useState<SearchArea>("all")
@@ -54,6 +55,7 @@ export const Search = () => {
   const { t } = useTranslation()
   const navigate = useNavigate()
 
+
   const inputRef = useRef<HTMLInputElement>(null)
   const listRef = useRef<HTMLDivElement>(null)
 
@@ -367,7 +369,7 @@ const CommandInput = forwardRef<
   ) => {
     const { t } = useTranslation()
     const innerRef = useRef<HTMLInputElement>(null)
-
+    const direction = useDocumentDirection()
     useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
       ref,
       () => innerRef.current
@@ -376,7 +378,7 @@ const CommandInput = forwardRef<
     return (
       <div className="flex flex-col border-b">
         <div className="px-4 pt-4">
-          <DropdownMenu>
+          <DropdownMenu dir={direction}>
             <DropdownMenu.Trigger asChild>
               <Badge
                 size="2xsmall"
@@ -432,7 +434,7 @@ const CommandInput = forwardRef<
             )}
             {...props}
           />
-          <div className="absolute right-4 top-1/2 flex -translate-y-1/2 items-center justify-end gap-x-2">
+          <div className="absolute end-4 top-1/2 flex -translate-y-1/2 items-center justify-end gap-x-2">
             {isFetching && (
               <Spinner className="text-ui-fg-muted animate-spin" />
             )}