@medusajs/dashboard 2.10.4-preview-20250928000328 → 2.10.4-snapshot-20250918173105

package/dist/{user-metadata-DFTGB46F.mjs → user-metadata-ZURLDLGC.mjs}

@@ -1,7 +1,7 @@
 import "./chunk-XRTVFYCW.mjs";
 import {
   MetadataForm
-} from "./chunk-IL5IMREK.mjs";
+} from "./chunk-S2UEWRDA.mjs";
 import "./chunk-IUCDCPJU.mjs";
 import "./chunk-6HTZNHPT.mjs";
 import {
@@ -9,14 +9,12 @@ import {
 } from "./chunk-4TC5YS65.mjs";
 import "./chunk-LPEUYMRK.mjs";
 import "./chunk-OC7BQLYI.mjs";
-import "./chunk-S4DMV3ZT.mjs";
 import "./chunk-OBQI23QM.mjs";
-import "./chunk-PAG2HG6I.mjs";
+import "./chunk-OGHQ6VJI.mjs";
 import "./chunk-KOSCMAIC.mjs";
-import "./chunk-5U3FFMC7.mjs";
 import "./chunk-X6DSNTTX.mjs";
 import "./chunk-I6E6CALJ.mjs";
-import "./chunk-RGP3IXX4.mjs";
+import "./chunk-4RG7UJCT.mjs";
 import "./chunk-QTCZFYFH.mjs";
 import "./chunk-B4GODIOW.mjs";
 import "./chunk-ENV6YVOM.mjs";
@@ -27,21 +25,22 @@ import {
   useUpdateUser,
   useUser
 } from "./chunk-2ZKVRTBW.mjs";
-import "./chunk-LKVQ5YC6.mjs";
+import "./chunk-ZCZL3STK.mjs";
+import "./chunk-OHSRRFGN.mjs";
 import "./chunk-F6PXCY3N.mjs";
-import "./chunk-NY6I2FYO.mjs";
-import "./chunk-R2G2B47Y.mjs";
+import "./chunk-NCR5UWRI.mjs";
+import "./chunk-ZODJNBAV.mjs";
 import "./chunk-GRT22PE5.mjs";
 import "./chunk-32IQRUVY.mjs";
-import "./chunk-U25RCIX2.mjs";
-import "./chunk-ITJEYJNB.mjs";
-import "./chunk-EYTETK3W.mjs";
+import "./chunk-KSRI5LOF.mjs";
+import "./chunk-YI4CZGTU.mjs";
+import "./chunk-BFNH5UWD.mjs";
 import "./chunk-KX4P5L3R.mjs";
-import "./chunk-XP3BY6G6.mjs";
+import "./chunk-4Q4LIFFO.mjs";
 import "./chunk-V2LANK5S.mjs";
 import "./chunk-QZ6PT4QV.mjs";
 import "./chunk-QL4XKIVL.mjs";
-import "./chunk-4QUHWHBD.mjs";
+import "./chunk-X4X5KUGQ.mjs";
 import "./chunk-FXYH54JP.mjs";
 import "./chunk-774WSTCC.mjs";
 import "./chunk-DEQUVHHE.mjs";

package/dist/{workflow-execution-detail-YNT2RKIP.mjs → workflow-execution-detail-4R6AFFHV.mjs}

@@ -10,22 +10,18 @@ import {
 import {
   JsonViewSection,
   SingleColumnPage
-} from "./chunk-GIZFNLKK.mjs";
+} from "./chunk-2RQLKDBF.mjs";
 import {
   useExtension
 } from "./chunk-C5P5PL3E.mjs";
 import {
   SingleColumnPageSkeleton
 } from "./chunk-LPEUYMRK.mjs";
-import {
-  useDocumentDirection
-} from "./chunk-S4DMV3ZT.mjs";
-import "./chunk-PAG2HG6I.mjs";
+import "./chunk-OGHQ6VJI.mjs";
 import "./chunk-KOSCMAIC.mjs";
-import "./chunk-5U3FFMC7.mjs";
 import "./chunk-X6DSNTTX.mjs";
 import "./chunk-I6E6CALJ.mjs";
-import "./chunk-RGP3IXX4.mjs";
+import "./chunk-4RG7UJCT.mjs";
 import {
   useWorkflowExecution,
   workflowExecutionsQueryKeys
@@ -36,21 +32,22 @@ import "./chunk-PIR2H25N.mjs";
 import "./chunk-RLY2SL5E.mjs";
 import "./chunk-C5LYZZZ5.mjs";
 import "./chunk-2ZKVRTBW.mjs";
-import "./chunk-LKVQ5YC6.mjs";
+import "./chunk-ZCZL3STK.mjs";
+import "./chunk-OHSRRFGN.mjs";
 import "./chunk-F6PXCY3N.mjs";
-import "./chunk-NY6I2FYO.mjs";
-import "./chunk-R2G2B47Y.mjs";
+import "./chunk-NCR5UWRI.mjs";
+import "./chunk-ZODJNBAV.mjs";
 import "./chunk-GRT22PE5.mjs";
 import "./chunk-32IQRUVY.mjs";
-import "./chunk-U25RCIX2.mjs";
-import "./chunk-ITJEYJNB.mjs";
-import "./chunk-EYTETK3W.mjs";
+import "./chunk-KSRI5LOF.mjs";
+import "./chunk-YI4CZGTU.mjs";
+import "./chunk-BFNH5UWD.mjs";
 import "./chunk-KX4P5L3R.mjs";
-import "./chunk-XP3BY6G6.mjs";
+import "./chunk-4Q4LIFFO.mjs";
 import "./chunk-V2LANK5S.mjs";
 import "./chunk-QZ6PT4QV.mjs";
 import "./chunk-QL4XKIVL.mjs";
-import "./chunk-4QUHWHBD.mjs";
+import "./chunk-X4X5KUGQ.mjs";
 import {
   queryClient
 } from "./chunk-FXYH54JP.mjs";
@@ -496,7 +493,6 @@ var Canvas = ({
 }) => {
   const [zoom, setZoom] = useState2(1);
   const [isDragging, setIsDragging] = useState2(false);
-  const direction = useDocumentDirection();
   const scale = useMotionValue(defaultState.scale);
   const x = useMotionValue(defaultState.x);
   const y = useMotionValue(defaultState.y);
@@ -592,7 +588,7 @@ var Canvas = ({
             children: /* @__PURE__ */ jsx5(PlusMini, {})
           }
         ),
-        /* @__PURE__ */ jsx5("div", { children: /* @__PURE__ */ jsxs3(DropdownMenu, { dir: direction, children: [
+        /* @__PURE__ */ jsx5("div", { children: /* @__PURE__ */ jsxs3(DropdownMenu, { children: [
           /* @__PURE__ */ jsx5(DropdownMenu.Trigger, { className: "disabled:text-ui-fg-disabled transition-fg hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed focus-visible:bg-ui-bg-base-pressed flex w-[50px] items-center justify-center border-r p-1 outline-none", children: /* @__PURE__ */ jsxs3(
             Text3,
             {

package/dist/{workflow-execution-list-5WL4L464.mjs → workflow-execution-list-5J3DQQRD.mjs}

@@ -9,15 +9,15 @@ import "./chunk-LQTHYS2Z.mjs";
 import {
   _DataTable,
   useDataTable
-} from "./chunk-EYL2JACT.mjs";
+} from "./chunk-7VJK6HNE.mjs";
 import "./chunk-YEDAFXMB.mjs";
-import "./chunk-HQKGZADC.mjs";
+import "./chunk-AOFGTNG6.mjs";
 import "./chunk-EMIHDNB7.mjs";
 import "./chunk-Z26G6WFJ.mjs";
 import "./chunk-M3VFKDXJ.mjs";
 import {
   SingleColumnPage
-} from "./chunk-GIZFNLKK.mjs";
+} from "./chunk-2RQLKDBF.mjs";
 import {
   useQueryParams
 } from "./chunk-C76H5USB.mjs";
@@ -26,7 +26,6 @@ import {
   useExtension
 } from "./chunk-C5P5PL3E.mjs";
 import "./chunk-LPEUYMRK.mjs";
-import "./chunk-S4DMV3ZT.mjs";
 import "./chunk-67ORSRVT.mjs";
 import {
   useWorkflowExecutions

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medusajs/dashboard",
-  "version": "2.10.4-preview-20250928000328",
+  "version": "2.10.4-snapshot-20250918173105",
   "scripts": {
     "generate:static": "node ./scripts/generate-currencies.js && prettier --write ./src/lib/currencies.ts",
     "dev": "vite",
@@ -45,10 +45,10 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "3.4.2",
-    "@medusajs/admin-shared": "2.10.4-preview-20250928000328",
-    "@medusajs/icons": "2.10.4-preview-20250928000328",
-    "@medusajs/js-sdk": "2.10.4-preview-20250928000328",
-    "@medusajs/ui": "4.0.24-preview-20250928000328",
+    "@medusajs/admin-shared": "2.10.4-snapshot-20250918173105",
+    "@medusajs/icons": "2.10.4-snapshot-20250918173105",
+    "@medusajs/js-sdk": "2.10.4-snapshot-20250918173105",
+    "@medusajs/ui": "4.0.24-snapshot-20250918173105",
     "@radix-ui/react-dialog": "1.1.4",
     "@radix-ui/react-dismissable-layer": "1.1.4",
     "@tanstack/react-query": "5.64.2",
@@ -78,10 +78,10 @@
     "zod": "3.25.76"
   },
   "devDependencies": {
-    "@medusajs/admin-shared": "2.10.4-preview-20250928000328",
-    "@medusajs/admin-vite-plugin": "2.10.4-preview-20250928000328",
-    "@medusajs/types": "2.10.4-preview-20250928000328",
-    "@medusajs/ui-preset": "2.10.4-preview-20250928000328",
+    "@medusajs/admin-shared": "2.10.4-snapshot-20250918173105",
+    "@medusajs/admin-vite-plugin": "2.10.4-snapshot-20250918173105",
+    "@medusajs/types": "2.10.4-snapshot-20250918173105",
+    "@medusajs/ui-preset": "2.10.4-snapshot-20250918173105",
     "@types/node": "^20.11.15",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",

package/src/components/common/action-menu/action-menu.tsx

@@ -4,7 +4,6 @@ import { EllipsisHorizontal } from "@medusajs/icons"
 import { PropsWithChildren, ReactNode } from "react"
 import { Link } from "react-router-dom"
 import { ConditionalTooltip } from "../conditional-tooltip"
-import { useDocumentDirection } from "../../../hooks/use-document-direction"
 
 export type Action = {
   icon: ReactNode
@@ -39,7 +38,6 @@ export const ActionMenu = ({
   variant = "transparent",
   children,
 }: ActionMenuProps) => {
-  const direction = useDocumentDirection()
   const inner = children ?? (
     <IconButton size="small" variant={variant}>
       <EllipsisHorizontal />
@@ -47,7 +45,7 @@ export const ActionMenu = ({
   )
 
   return (
-    <DropdownMenu dir={direction}>
+    <DropdownMenu>
       <DropdownMenu.Trigger asChild>{inner}</DropdownMenu.Trigger>
       <DropdownMenu.Content>
         {groups.map((group, index) => {

package/src/components/common/customer-info/customer-info.tsx

@@ -93,7 +93,7 @@ const Contact = ({ data }: { data: HttpTypes.AdminOrder }) => {
             </Text>
 
             <div className="flex justify-end">
-              <Copy content={phone} className="text-ui-fg-muted" />
+              <Copy content={email} className="text-ui-fg-muted" />
             </div>
           </div>
         )}

package/src/components/common/json-view-section/json-view-section.tsx

@@ -46,10 +46,7 @@ export const JsonViewSection = ({ data }: JsonViewSectionProps) => {
             <ArrowUpRightOnBox />
           </IconButton>
         </Drawer.Trigger>
-        <Drawer.Content
-          dir="ltr"
-          className="bg-ui-contrast-bg-base text-ui-code-fg-subtle !shadow-elevation-commandbar overflow-hidden border border-none max-md:inset-x-2 max-md:max-w-[calc(100%-16px)]"
-        >
+        <Drawer.Content className="bg-ui-contrast-bg-base text-ui-code-fg-subtle !shadow-elevation-commandbar overflow-hidden border border-none max-md:inset-x-2 max-md:max-w-[calc(100%-16px)]">
           <div className="bg-ui-code-bg-base flex items-center justify-between px-6 py-4">
             <div className="flex items-center gap-x-4">
               <Drawer.Title asChild>

package/src/components/common/sidebar-link/sidebar-link.tsx

@@ -37,7 +37,7 @@ export const SidebarLink = ({
               </Text>
             </div>
             <div className="flex size-7 items-center justify-center">
-              <TriangleRightMini className="text-ui-fg-muted rtl:rotate-180" />
+              <TriangleRightMini className="text-ui-fg-muted" />
             </div>
           </div>
         </div>

package/src/components/common/switch-box/switch-box.tsx

@@ -50,8 +50,6 @@ export const SwitchBox = <
             <div className="bg-ui-bg-component shadow-elevation-card-rest flex items-start gap-x-3 rounded-lg p-3">
               <Form.Control>
                 <Switch
-                  className="rtl:rotate-180"
-                  dir="ltr"
                   {...field}
                   checked={value}
                   onCheckedChange={(e) => {

package/src/components/data-grid/components/data-grid-root.tsx

@@ -29,7 +29,6 @@ import { FieldValues, UseFormReturn } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 
 import { useCommandHistory } from "../../../hooks/use-command-history"
-import { useDocumentDirection } from "../../../hooks/use-document-direction"
 import { ConditionalTooltip } from "../../common/conditional-tooltip"
 import { DataGridContext } from "../context"
 import {
@@ -51,7 +50,7 @@ import { isCellMatch, isSpecialFocusKey } from "../utils"
 import { DataGridKeyboardShortcutModal } from "./data-grid-keyboard-shortcut-modal"
 export interface DataGridRootProps<
   TData,
-  TFieldValues extends FieldValues = FieldValues,
+  TFieldValues extends FieldValues = FieldValues
 > {
   data?: TData[]
   columns: ColumnDef<TData>[]
@@ -97,7 +96,7 @@ const getCommonPinningStyles = <TData,>(
 
 export const DataGridRoot = <
   TData,
-  TFieldValues extends FieldValues = FieldValues,
+  TFieldValues extends FieldValues = FieldValues
 >({
   data = [],
   columns,
@@ -701,7 +700,6 @@ const DataGridHeader = ({
   const [shortcutsOpen, setShortcutsOpen] = useState(false)
   const [columnsOpen, setColumnsOpen] = useState(false)
   const { t } = useTranslation()
-  const direction = useDocumentDirection()
 
   // Since all columns are checked by default, we can check if any column is unchecked
   const hasChanged = columnOptions.some((column) => !column.checked)
@@ -718,11 +716,7 @@ const DataGridHeader = ({
   return (
     <div className="bg-ui-bg-base flex items-center justify-between border-b p-4">
       <div className="flex items-center gap-x-2">
-        <DropdownMenu
-          dir={direction}
-          open={columnsOpen}
-          onOpenChange={handleColumnsOpenChange}
-        >
+        <DropdownMenu open={columnsOpen} onOpenChange={handleColumnsOpenChange}>
           <ConditionalTooltip
             showTooltip={isDisabled}
             content={t("dataGrid.columns.disabled")}

package/src/components/data-grid/components/data-grid-toggleable-number-cell.tsx

@@ -106,10 +106,9 @@ const OuterComponent = ({
     >
       <div className="absolute inset-y-0 left-4 z-[3] flex w-fit items-center justify-center">
         <Switch
-          dir="ltr"
           ref={buttonRef}
           size="small"
-          className="shrink-0 rtl:rotate-180"
+          className="shrink-0"
           checked={localValue.checked}
           disabled={localValue.disabledToggle}
           onCheckedChange={handleCheckedChange}

package/src/components/data-table/data-table.tsx

@@ -31,26 +31,26 @@ type DataTableActionProps = {
   label: string
   disabled?: boolean
 } & (
-  | {
+    | {
       to: string
     }
-  | {
+    | {
       onClick: () => void
     }
-)
+  )
 
 type DataTableActionMenuActionProps = {
   label: string
   icon: ReactNode
   disabled?: boolean
 } & (
-  | {
+    | {
       to: string
     }
-  | {
+    | {
       onClick: () => void
     }
-)
+  )
 
 type DataTableActionMenuGroupProps = {
   actions: DataTableActionMenuActionProps[]
@@ -138,18 +138,15 @@ export const DataTable = <TData,>({
   const isViewConfigEnabled = useFeatureFlag("view_configurations")
 
   // If view config is disabled, don't use column visibility features
-  const effectiveEnableColumnVisibility =
-    isViewConfigEnabled && enableColumnVisibility
+  const effectiveEnableColumnVisibility = isViewConfigEnabled && enableColumnVisibility
   const effectiveEnableViewSelector = isViewConfigEnabled && enableViewSelector
 
   const enableFiltering = filters && filters.length > 0
-  const showFilterMenu =
-    enableFilterMenu !== undefined ? enableFilterMenu : enableFiltering
+  const showFilterMenu = enableFilterMenu !== undefined ? enableFilterMenu : enableFiltering
   const enableCommands = commands && commands.length > 0
   const enableSorting = columns.some((column) => column.enableSorting)
 
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>(initialColumnVisibility)
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>(initialColumnVisibility)
 
   // Update column visibility when initial visibility changes
   React.useEffect(() => {
@@ -157,12 +154,9 @@ export const DataTable = <TData,>({
     const currentKeys = Object.keys(columnVisibility).sort()
     const newKeys = Object.keys(initialColumnVisibility).sort()
 
-    const hasChanged =
-      currentKeys.length !== newKeys.length ||
+    const hasChanged = currentKeys.length !== newKeys.length ||
       currentKeys.some((key, index) => key !== newKeys[index]) ||
-      Object.entries(initialColumnVisibility).some(
-        ([key, value]) => columnVisibility[key] !== value
-      )
+      Object.entries(initialColumnVisibility).some(([key, value]) => columnVisibility[key] !== value)
 
     if (hasChanged) {
       setColumnVisibility(initialColumnVisibility)
@@ -170,13 +164,10 @@ export const DataTable = <TData,>({
   }, [initialColumnVisibility])
 
   // Wrapper function to handle column visibility changes
-  const handleColumnVisibilityChange = React.useCallback(
-    (visibility: VisibilityState) => {
-      setColumnVisibility(visibility)
-      onColumnVisibilityChange?.(visibility)
-    },
-    [onColumnVisibilityChange]
-  )
+  const handleColumnVisibilityChange = React.useCallback((visibility: VisibilityState) => {
+    setColumnVisibility(visibility)
+    onColumnVisibilityChange?.(visibility)
+  }, [onColumnVisibilityChange])
 
   // Extract filter IDs for query param management
   const filterIds = useMemo(() => filters?.map((f) => f.id) ?? [], [filters])
@@ -240,7 +231,7 @@ export const DataTable = <TData,>({
       Array.from(prev.keys()).forEach((key) => {
         if (prefixedFilterIds.includes(key)) {
           // Extract the unprefixed key
-          const unprefixedKey = prefix ? key.replace(`${prefix}_`, "") : key
+          const unprefixedKey = prefix ? key.replace(`${prefix}_`, '') : key
           if (!(unprefixedKey in value)) {
             prev.delete(key)
           }
@@ -266,14 +257,11 @@ export const DataTable = <TData,>({
   }, [order])
 
   // Memoize current configuration to prevent infinite loops
-  const currentConfiguration = useMemo(
-    () => ({
-      filters: filtering,
-      sorting: sorting,
-      search: search,
-    }),
-    [filtering, sorting, search]
-  )
+  const currentConfiguration = useMemo(() => ({
+    filters: filtering,
+    sorting: sorting,
+    search: search,
+  }), [filtering, sorting, search])
 
   const handleSortingChange = (value: DataTableSortingState) => {
     setSearchParams((prev) => {
@@ -327,43 +315,42 @@ export const DataTable = <TData,>({
     onRowClick: rowHref ? onRowClick : undefined,
     pagination: enablePagination
       ? {
-          state: pagination,
-          onPaginationChange: handlePaginationChange,
-        }
+        state: pagination,
+        onPaginationChange: handlePaginationChange,
+      }
       : undefined,
     filtering: enableFiltering
       ? {
-          state: filtering,
-          onFilteringChange: handleFilteringChange,
-        }
+        state: filtering,
+        onFilteringChange: handleFilteringChange,
+      }
       : undefined,
     sorting: enableSorting
       ? {
-          state: sorting,
-          onSortingChange: handleSortingChange,
-        }
+        state: sorting,
+        onSortingChange: handleSortingChange,
+      }
       : undefined,
     search: enableSearch
       ? {
-          state: search,
-          onSearchChange: handleSearchChange,
-        }
+        state: search,
+        onSearchChange: handleSearchChange,
+      }
       : undefined,
     rowSelection,
     isLoading,
     columnVisibility: effectiveEnableColumnVisibility
       ? {
-          state: columnVisibility,
-          onColumnVisibilityChange: handleColumnVisibilityChange,
-        }
+        state: columnVisibility,
+        onColumnVisibilityChange: handleColumnVisibilityChange,
+      }
+      : undefined,
+    columnOrder: effectiveEnableColumnVisibility && columnOrder && onColumnOrderChange
+      ? {
+        state: columnOrder,
+        onColumnOrderChange: onColumnOrderChange,
+      }
       : undefined,
-    columnOrder:
-      effectiveEnableColumnVisibility && columnOrder && onColumnOrderChange
-        ? {
-            state: columnOrder,
-            onColumnOrderChange: onColumnOrderChange,
-          }
-        : undefined,
   })
 
   const shouldRenderHeading = heading || subHeading
@@ -371,9 +358,7 @@ export const DataTable = <TData,>({
   return (
     <UiDataTable
       instance={instance}
-      className={
-        layout === "fill" ? "h-full [&_tr]:last-of-type:!border-b" : undefined
-      }
+      className={layout === "fill" ? "h-full [&_tr]:last-of-type:!border-b" : undefined}
     >
       <UiDataTable.Toolbar
         className="flex flex-col items-start justify-between gap-2 md:flex-row md:items-center"
@@ -412,9 +397,7 @@ export const DataTable = <TData,>({
               </div>
             )}
             {actionMenu && <ActionMenu variant="primary" {...actionMenu} />}
-            {actions && actions.length > 0 && (
-              <DataTableActions actions={actions} />
-            )}
+            {actions && actions.length > 0 && <DataTableActions actions={actions} />}
             {!actions && action && <DataTableAction {...action} />}
           </div>
         </div>
@@ -424,9 +407,7 @@ export const DataTable = <TData,>({
         <UiDataTable.Pagination translations={paginationTranslations} />
       )}
       {enableCommands && (
-        <UiDataTable.CommandBar
-          selectedLabel={(count) => `${count} selected`}
-        />
+        <UiDataTable.CommandBar selectedLabel={(count) => `${count} selected`} />
       )}
     </UiDataTable>
   )
@@ -539,3 +520,4 @@ const DataTableActions = ({ actions }: { actions: DataTableActionProps[] }) => {
     </div>
   )
 }
+

package/src/components/filtering/filter-group/filter-group.tsx

@@ -1,7 +1,6 @@
 import { Button, DropdownMenu } from "@medusajs/ui"
 import { ReactNode } from "react"
 import { useSearchParams } from "react-router-dom"
-import { useDocumentDirection } from "../../../hooks/use-document-direction"
 
 type FilterGroupProps = {
   filters: {
@@ -38,11 +37,8 @@ type AddFilterMenuProps = {
 }
 
 const AddFilterMenu = ({ availableKeys }: AddFilterMenuProps) => {
-  const direction = useDocumentDirection()
   return (
-    <DropdownMenu
-      dir={direction}
-    >
+    <DropdownMenu>
       <DropdownMenu.Trigger asChild>
         <Button variant="secondary" size="small">
           Add filter

package/src/components/filtering/order-by/order-by.tsx

@@ -4,8 +4,6 @@ import { useState } from "react"
 import { useTranslation } from "react-i18next"
 import { useSearchParams } from "react-router-dom"
 
-import { useDocumentDirection } from "../../../hooks/use-document-direction"
-
 type OrderByProps = {
   keys: string[]
 }
@@ -58,7 +56,6 @@ export const OrderBy = ({ keys }: OrderByProps) => {
   }>(initState(searchParams))
 
   const { t } = useTranslation()
-  const direction = useDocumentDirection()
 
   const handleDirChange = (dir: string) => {
     setState((prev) => ({
@@ -102,7 +99,7 @@ export const OrderBy = ({ keys }: OrderByProps) => {
   }
 
   return (
-    <DropdownMenu dir={direction}>
+    <DropdownMenu>
       <DropdownMenu.Trigger asChild>
         <IconButton size="small">
           <ArrowUpDown />

package/src/components/forms/address-form/address-form.tsx

@@ -7,7 +7,6 @@ import { Control } from "react-hook-form"
 import { AddressSchema } from "../../../lib/schemas"
 import { Form } from "../../common/form"
 import { CountrySelect } from "../../inputs/country-select"
-import { useDocumentDirection } from "../../../hooks/use-document-direction"
 
 type AddressFieldValues = z.infer<typeof AddressSchema>
 
@@ -23,7 +22,7 @@ export const AddressForm = ({
   layout,
 }: AddressFormProps) => {
   const { t } = useTranslation()
-  const direction = useDocumentDirection()
+
   const style = clx("gap-4", {
     "flex flex-col": layout === "stack",
     "grid grid-cols-2": layout === "grid",
@@ -183,11 +182,7 @@ export const AddressForm = ({
                   <Form.Label>{t("fields.country")}</Form.Label>
                   <Form.Control>
                     {countries ? (
-                      <Select
-                        dir={direction}
-                        {...field}
-                        onValueChange={onChange}
-                      >
+                      <Select {...field} onValueChange={onChange}>
                         <Select.Trigger ref={ref}>
                           <Select.Value />
                         </Select.Trigger>

package/src/components/forms/metadata-form/metadata-form.tsx

@@ -25,7 +25,6 @@ import { Form } from "../../common/form"
 import { Skeleton } from "../../common/skeleton"
 import { RouteDrawer, useRouteModal } from "../../modals"
 import { KeyboundForm } from "../../utilities/keybound-form"
-import { useDocumentDirection } from "../../../hooks/use-document-direction"
 
 type MetaDataSubmitHook<TRes> = (
   params: { metadata?: Record<string, any> | null },
@@ -78,7 +77,7 @@ const InnerForm = <TRes,>({
 }: Omit<MetadataFormProps<TRes>, "isPending">) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-  const direction = useDocumentDirection()
+
   const hasUneditableRows = getHasUneditableRows(metadata)
 
   const form = useForm<z.infer<typeof MetadataSchema>>({
@@ -216,12 +215,10 @@ const InnerForm = <TRes,>({
                         }}
                       />
                     </div>
-                    <DropdownMenu
-                      dir={direction}
-                    >
+                    <DropdownMenu>
                       <DropdownMenu.Trigger
                         className={clx(
-                          "invisible absolute inset-y-0 -end-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
+                          "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
                           {
                             hidden: isDisabled,
                           }