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

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

@@ -1,19 +1,18 @@
 import {
-  Button,
-  clx,
+  DataTable as UiDataTable,
+  useDataTable,
   DataTableColumnDef,
   DataTableCommand,
   DataTableEmptyStateProps,
   DataTableFilter,
-  DataTableFilteringState,
-  DataTablePaginationState,
   DataTableRow,
   DataTableRowSelectionState,
-  DataTableSortingState,
   Heading,
-  DataTable as Primitive,
   Text,
-  useDataTable,
+  Button,
+  DataTableFilteringState,
+  DataTablePaginationState,
+  DataTableSortingState,
 } from "@medusajs/ui"
 import React, { ReactNode, useCallback, useMemo } from "react"
 import { useTranslation } from "react-i18next"
@@ -21,6 +20,12 @@ import { Link, useNavigate, useSearchParams } from "react-router-dom"
 
 import { useQueryParams } from "../../hooks/use-query-params"
 import { ActionMenu } from "../common/action-menu"
+import { ViewPills } from "../table/view-selector"
+import { useFeatureFlag } from "../../providers/feature-flag-provider"
+
+// Types for column visibility and ordering
+type VisibilityState = Record<string, boolean>
+type ColumnOrderState = string[]
 
 type DataTableActionProps = {
   label: string
@@ -61,15 +66,18 @@ interface DataTableProps<TData> {
   filters?: DataTableFilter[]
   commands?: DataTableCommand[]
   action?: DataTableActionProps
+  actions?: DataTableActionProps[]
   actionMenu?: DataTableActionMenuProps
   rowCount?: number
   getRowId: (row: TData) => string
   enablePagination?: boolean
   enableSearch?: boolean
   autoFocusSearch?: boolean
+  enableFilterMenu?: boolean
   rowHref?: (row: TData) => string
   emptyState?: DataTableEmptyStateProps
   heading?: string
+  headingLevel?: "h1" | "h2" | "h3"
   subHeading?: string
   prefix?: string
   pageSize?: number
@@ -80,6 +88,18 @@ interface DataTableProps<TData> {
     enableRowSelection?: boolean | ((row: DataTableRow<TData>) => boolean)
   }
   layout?: "fill" | "auto"
+  enableColumnVisibility?: boolean
+  initialColumnVisibility?: VisibilityState
+  onColumnVisibilityChange?: (visibility: VisibilityState) => void
+  columnOrder?: ColumnOrderState
+  onColumnOrderChange?: (order: ColumnOrderState) => void
+  enableViewSelector?: boolean
+  entity?: string
+  currentColumns?: {
+    visible: string[]
+    order: string[]
+  }
+  filterBarContent?: React.ReactNode
 }
 
 export const DataTable = <TData,>({
@@ -88,14 +108,17 @@ export const DataTable = <TData,>({
   filters,
   commands,
   action,
+  actions,
   actionMenu,
   getRowId,
   rowCount = 0,
   enablePagination = true,
   enableSearch = true,
   autoFocusSearch = false,
+  enableFilterMenu,
   rowHref,
   heading,
+  headingLevel = "h1",
   subHeading,
   prefix,
   pageSize = 10,
@@ -103,13 +126,61 @@ export const DataTable = <TData,>({
   rowSelection,
   isLoading = false,
   layout = "auto",
+  enableColumnVisibility = false,
+  initialColumnVisibility = {},
+  onColumnVisibilityChange,
+  columnOrder,
+  onColumnOrderChange,
+  enableViewSelector = false,
+  entity,
+  currentColumns,
+  filterBarContent,
 }: DataTableProps<TData>) => {
   const { t } = useTranslation()
+  const isViewConfigEnabled = useFeatureFlag("view_configurations")
+
+  // If view config is disabled, don't use column visibility features
+  const effectiveEnableColumnVisibility =
+    isViewConfigEnabled && enableColumnVisibility
+  const effectiveEnableViewSelector = isViewConfigEnabled && enableViewSelector
 
   const enableFiltering = filters && filters.length > 0
+  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)
+
+  // Update column visibility when initial visibility changes
+  React.useEffect(() => {
+    // Deep compare to check if the visibility has actually changed
+    const currentKeys = Object.keys(columnVisibility).sort()
+    const newKeys = Object.keys(initialColumnVisibility).sort()
+
+    const hasChanged =
+      currentKeys.length !== newKeys.length ||
+      currentKeys.some((key, index) => key !== newKeys[index]) ||
+      Object.entries(initialColumnVisibility).some(
+        ([key, value]) => columnVisibility[key] !== value
+      )
+
+    if (hasChanged) {
+      setColumnVisibility(initialColumnVisibility)
+    }
+  }, [initialColumnVisibility])
+
+  // Wrapper function to handle column visibility changes
+  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])
   const prefixedFilterIds = filterIds.map((id) => getQueryParamKey(id, prefix))
 
@@ -167,18 +238,24 @@ export const DataTable = <TData,>({
 
   const handleFilteringChange = (value: DataTableFilteringState) => {
     setSearchParams((prev) => {
+      // Remove filters that are no longer in the state
       Array.from(prev.keys()).forEach((key) => {
-        if (prefixedFilterIds.includes(key) && !(key in value)) {
-          prev.delete(key)
+        if (prefixedFilterIds.includes(key)) {
+          // Extract the unprefixed key
+          const unprefixedKey = prefix ? key.replace(`${prefix}_`, "") : key
+          if (!(unprefixedKey in value)) {
+            prev.delete(key)
+          }
         }
       })
 
+      // Add or update filters in the state
       Object.entries(value).forEach(([key, filter]) => {
-        if (
-          prefixedFilterIds.includes(getQueryParamKey(key, prefix)) &&
-          filter
-        ) {
-          prev.set(getQueryParamKey(key, prefix), JSON.stringify(filter))
+        const prefixedKey = getQueryParamKey(key, prefix)
+        if (filter !== undefined) {
+          prev.set(prefixedKey, JSON.stringify(filter))
+        } else {
+          prev.delete(prefixedKey)
         }
       })
 
@@ -190,6 +267,16 @@ export const DataTable = <TData,>({
     return order ? parseSortingState(order) : null
   }, [order])
 
+  // Memoize current configuration to prevent infinite loops
+  const currentConfiguration = useMemo(
+    () => ({
+      filters: filtering,
+      sorting: sorting,
+      search: search,
+    }),
+    [filtering, sorting, search]
+  )
+
   const handleSortingChange = (value: DataTableSortingState) => {
     setSearchParams((prev) => {
       if (value) {
@@ -266,68 +353,84 @@ export const DataTable = <TData,>({
       : undefined,
     rowSelection,
     isLoading,
+    columnVisibility: effectiveEnableColumnVisibility
+      ? {
+          state: columnVisibility,
+          onColumnVisibilityChange: handleColumnVisibilityChange,
+        }
+      : undefined,
+    columnOrder:
+      effectiveEnableColumnVisibility && columnOrder && onColumnOrderChange
+        ? {
+            state: columnOrder,
+            onColumnOrderChange: onColumnOrderChange,
+          }
+        : undefined,
   })
 
   const shouldRenderHeading = heading || subHeading
 
   return (
-    <Primitive
+    <UiDataTable
       instance={instance}
-      className={clx({
-        "h-full [&_tr]:last-of-type:!border-b": layout === "fill",
-      })}
+      className={
+        layout === "fill" ? "h-full [&_tr]:last-of-type:!border-b" : undefined
+      }
     >
-      <Primitive.Toolbar
+      <UiDataTable.Toolbar
         className="flex flex-col items-start justify-between gap-2 md:flex-row md:items-center"
         translations={toolbarTranslations}
+        filterBarContent={filterBarContent}
       >
         <div className="flex w-full items-center justify-between gap-2">
-          {shouldRenderHeading && (
-            <div>
-              {heading && <Heading>{heading}</Heading>}
-              {subHeading && (
-                <Text size="small" className="text-ui-fg-subtle">
-                  {subHeading}
-                </Text>
-              )}
-            </div>
-          )}
-          <div className="flex items-center justify-end gap-x-2 md:hidden">
-            {enableFiltering && (
-              <Primitive.FilterMenu tooltip={t("filters.filterLabel")} />
+          <div className="flex items-center gap-x-4">
+            {shouldRenderHeading && (
+              <div>
+                {heading && <Heading level={headingLevel}>{heading}</Heading>}
+                {subHeading && (
+                  <Text size="small" className="text-ui-fg-subtle">
+                    {subHeading}
+                  </Text>
+                )}
+              </div>
             )}
-            <Primitive.SortingMenu tooltip={t("filters.sortLabel")} />
-            {actionMenu && <ActionMenu variant="primary" {...actionMenu} />}
-            {action && <DataTableAction {...action} />}
-          </div>
-        </div>
-        <div className="flex w-full items-center gap-2 md:justify-end">
-          {enableSearch && (
-            <div className="w-full md:w-auto">
-              <Primitive.Search
-                placeholder={t("filters.searchLabel")}
-                autoFocus={autoFocusSearch}
+            {effectiveEnableViewSelector && entity && (
+              <ViewPills
+                entity={entity}
+                currentColumns={currentColumns}
+                currentConfiguration={currentConfiguration}
               />
-            </div>
-          )}
-          <div className="hidden items-center gap-x-2 md:flex">
-            {enableFiltering && (
-              <Primitive.FilterMenu tooltip={t("filters.filterLabel")} />
             )}
-            <Primitive.SortingMenu tooltip={t("filters.sortLabel")} />
+          </div>
+          <div className="flex items-center gap-x-2">
+            {showFilterMenu && <UiDataTable.FilterMenu />}
+            {enableSorting && <UiDataTable.SortingMenu />}
+            {enableSearch && (
+              <div className="w-full md:w-auto">
+                <UiDataTable.Search
+                  placeholder={t("filters.searchLabel")}
+                  autoFocus={autoFocusSearch}
+                />
+              </div>
+            )}
             {actionMenu && <ActionMenu variant="primary" {...actionMenu} />}
-            {action && <DataTableAction {...action} />}
+            {actions && actions.length > 0 && (
+              <DataTableActions actions={actions} />
+            )}
+            {!actions && action && <DataTableAction {...action} />}
           </div>
         </div>
-      </Primitive.Toolbar>
-      <Primitive.Table emptyState={emptyState} />
+      </UiDataTable.Toolbar>
+      <UiDataTable.Table emptyState={emptyState} />
       {enablePagination && (
-        <Primitive.Pagination translations={paginationTranslations} />
+        <UiDataTable.Pagination translations={paginationTranslations} />
       )}
       {enableCommands && (
-        <Primitive.CommandBar selectedLabel={(count) => `${count} selected`} />
+        <UiDataTable.CommandBar
+          selectedLabel={(count) => `${count} selected`}
+        />
       )}
-    </Primitive>
+    </UiDataTable>
   )
 }
 
@@ -367,7 +470,7 @@ function parseFilterState(
   for (const id of filterIds) {
     const filterValue = value[id]
 
-    if (filterValue) {
+    if (filterValue !== undefined) {
       filters[id] = JSON.parse(filterValue)
     }
   }
@@ -392,6 +495,8 @@ const useDataTableTranslations = () => {
 
   const toolbarTranslations = {
     clearAll: t("actions.clearAll"),
+    sort: t("filters.sortLabel"),
+    columns: "Columns",
   }
 
   return {
@@ -426,3 +531,13 @@ const DataTableAction = ({
     </Button>
   )
 }
+
+const DataTableActions = ({ actions }: { actions: DataTableActionProps[] }) => {
+  return (
+    <div className="flex items-center gap-x-2">
+      {actions.map((action, index) => (
+        <DataTableAction key={index} {...action} />
+      ))}
+    </div>
+  )
+}

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

@@ -1,6 +1,7 @@
 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: {
@@ -37,8 +38,11 @@ type AddFilterMenuProps = {
 }
 
 const AddFilterMenu = ({ availableKeys }: AddFilterMenuProps) => {
+  const direction = useDocumentDirection()
   return (
-    <DropdownMenu>
+    <DropdownMenu
+      dir={direction}
+    >
       <DropdownMenu.Trigger asChild>
         <Button variant="secondary" size="small">
           Add filter

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

@@ -4,6 +4,8 @@ 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[]
 }
@@ -56,6 +58,7 @@ export const OrderBy = ({ keys }: OrderByProps) => {
   }>(initState(searchParams))
 
   const { t } = useTranslation()
+  const direction = useDocumentDirection()
 
   const handleDirChange = (dir: string) => {
     setState((prev) => ({
@@ -99,7 +102,7 @@ export const OrderBy = ({ keys }: OrderByProps) => {
   }
 
   return (
-    <DropdownMenu>
+    <DropdownMenu dir={direction}>
       <DropdownMenu.Trigger asChild>
         <IconButton size="small">
           <ArrowUpDown />

package/src/components/filtering/query/query.tsx

@@ -1,5 +1,5 @@
 import { Input } from "@medusajs/ui"
-import { debounce } from "lodash"
+import debounce from "lodash.debounce"
 import { ChangeEvent, useCallback, useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { useSearchParams } from "react-router-dom"

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

@@ -7,6 +7,7 @@ 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>
 
@@ -22,7 +23,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",
@@ -182,7 +183,11 @@ export const AddressForm = ({
                   <Form.Label>{t("fields.country")}</Form.Label>
                   <Form.Control>
                     {countries ? (
-                      <Select {...field} onValueChange={onChange}>
+                      <Select
+                        dir={direction}
+                        {...field}
+                        onValueChange={onChange}
+                      >
                         <Select.Trigger ref={ref}>
                           <Select.Value />
                         </Select.Trigger>

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

@@ -25,6 +25,7 @@ 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 },
@@ -77,7 +78,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>>({
@@ -215,10 +216,12 @@ const InnerForm = <TRes,>({
                         }}
                       />
                     </div>
-                    <DropdownMenu>
+                    <DropdownMenu
+                      dir={direction}
+                    >
                       <DropdownMenu.Trigger
                         className={clx(
-                          "invisible absolute inset-y-0 -right-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
+                          "invisible absolute inset-y-0 -end-2.5 my-auto group-hover/table:visible data-[state='open']:visible",
                           {
                             hidden: isDisabled,
                           }

package/src/components/inputs/combobox/combobox.tsx

@@ -58,6 +58,7 @@ interface ComboboxProps<T extends Value = Value>
   onCreateOption?: (value: string) => void
   noResultsPlaceholder?: ReactNode
   allowClear?: boolean
+  forceHideInput?: boolean // always hide input -> used for singe value select that don't have query/filter
 }
 
 const ComboboxImpl = <T extends Value = string>(
@@ -74,6 +75,7 @@ const ComboboxImpl = <T extends Value = string>(
     onCreateOption,
     noResultsPlaceholder,
     allowClear,
+    forceHideInput,
     ...inputProps
   }: ComboboxProps<T>,
   ref: ForwardedRef<HTMLInputElement>
@@ -152,10 +154,15 @@ const ComboboxImpl = <T extends Value = string>(
       return []
     }
 
+    // do not use `matcher` if the input is hidden
+    if (forceHideInput) {
+      return options
+    }
+
     return matchSorter(options, defferedSearchValue, {
       keys: ["label"],
     })
-  }, [options, defferedSearchValue, isSearchControlled])
+  }, [options, defferedSearchValue, isSearchControlled, forceHideInput])
 
   const observer = useRef(
     new IntersectionObserver(
@@ -197,7 +204,7 @@ const ComboboxImpl = <T extends Value = string>(
   const showTag = hasValue && isArrayValue
   const showSelected = showTag && !searchValue && !open
 
-  const hideInput = !isArrayValue && hasValue && !open
+  const hideInput = forceHideInput || (!isArrayValue && hasValue && !open)
   const selectedLabel = options.find((o) => o.value === selectedValues)?.label
 
   const hidePlaceholder = showSelected || open
@@ -249,9 +256,9 @@ const ComboboxImpl = <T extends Value = string>(
             type="button"
             onClick={(e) => {
               e.preventDefault()
-              handleValueChange(undefined)
+              handleValueChange(isArrayValue ? ([] as unknown as T) : undefined)
             }}
-            className="bg-ui-bg-base hover:bg-ui-bg-base-hover txt-compact-small-plus text-ui-fg-subtle focus-within:border-ui-fg-interactive transition-fg absolute left-0.5 top-0.5 z-[1] flex h-[28px] items-center rounded-[4px] border py-[3px] pl-1.5 pr-1 outline-none"
+            className="bg-ui-bg-base hover:bg-ui-bg-base-hover txt-compact-small-plus text-ui-fg-subtle focus-within:border-ui-fg-interactive transition-fg absolute start-0.5 top-0.5 z-[1] flex h-[28px] items-center rounded-[4px] border py-[3px] pe-1 ps-1.5 outline-none"
           >
             <span className="tabular-nums">{selectedValues.length}</span>
             <XMarkMini className="text-ui-fg-muted" />
@@ -263,8 +270,8 @@ const ComboboxImpl = <T extends Value = string>(
               className={clx(
                 "pointer-events-none absolute inset-y-0 flex size-full items-center",
                 {
-                  "left-[calc(var(--tag-width)+8px)]": showTag,
-                  "left-2": !showTag,
+                  "start-[calc(var(--tag-width)+8px)]": showTag,
+                  "start-2": !showTag,
                 }
               )}
             >
@@ -278,8 +285,8 @@ const ComboboxImpl = <T extends Value = string>(
               className={clx(
                 "pointer-events-none absolute inset-y-0 flex size-full items-center overflow-hidden",
                 {
-                  "left-[calc(var(--tag-width)+8px)]": showTag,
-                  "left-2": !showTag,
+                  "start-[calc(var(--tag-width)+8px)]": showTag,
+                  "start-2": !showTag,
                 }
               )}
             >
@@ -293,12 +300,12 @@ const ComboboxImpl = <T extends Value = string>(
             ref={comboboxRef}
             onFocus={() => setOpen(true)}
             className={clx(
-              "txt-compact-small text-ui-fg-base !placeholder:text-ui-fg-muted transition-fg size-full cursor-pointer bg-transparent pl-2 pr-8 outline-none focus:cursor-text",
+              "txt-compact-small text-ui-fg-base !placeholder:text-ui-fg-muted transition-fg size-full cursor-pointer bg-transparent pe-8 ps-2 outline-none focus:cursor-text",
               "hover:bg-ui-bg-field-hover",
               {
                 "opacity-0": hideInput,
-                "pl-2": !showTag,
-                "pl-[calc(var(--tag-width)+8px)]": showTag,
+                "ps-2": !showTag,
+                "ps-[calc(var(--tag-width)+8px)]": showTag,
               }
             )}
             placeholder={hidePlaceholder ? undefined : placeholder}
@@ -312,7 +319,7 @@ const ComboboxImpl = <T extends Value = string>(
               e.preventDefault()
               handleValueChange(undefined)
             }}
-            className="bg-ui-bg-base hover:bg-ui-bg-base-hover txt-compact-small-plus text-ui-fg-subtle focus-within:border-ui-fg-interactive transition-fg absolute right-[28px] top-0.5 z-[1] flex h-[28px] items-center rounded-[4px] border px-1.5 py-[2px] outline-none"
+            className="bg-ui-bg-base hover:bg-ui-bg-base-hover txt-compact-small-plus text-ui-fg-subtle focus-within:border-ui-fg-interactive transition-fg absolute end-[28px] top-0.5 z-[1] flex h-[28px] items-center rounded-[4px] border px-1.5 py-[2px] outline-none"
           >
             <XMarkMini className="text-ui-fg-muted" />
           </button>
@@ -323,7 +330,7 @@ const ComboboxImpl = <T extends Value = string>(
               <button
                 {...props}
                 type="button"
-                className="text-ui-fg-muted transition-fg hover:bg-ui-bg-field-hover absolute right-0 flex size-8 items-center justify-center rounded-r outline-none"
+                className="text-ui-fg-muted transition-fg hover:bg-ui-bg-field-hover absolute end-0 flex size-8 items-center justify-center rounded-r outline-none"
               >
                 <TrianglesMini />
               </button>
@@ -341,7 +348,7 @@ const ComboboxImpl = <T extends Value = string>(
           "max-h-[200px] overflow-y-auto",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=start]:slide-in-from-end-2 data-[side=end]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2"
         )}
         style={{
           pointerEvents: open ? "auto" : "none",