@medusajs/dashboard 3.0.0-snapshot-20251208164410 → 3.0.0-snapshot-20251211180009

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

@@ -15,7 +15,7 @@ import {
   TrianglesMini,
   XMarkMini,
 } from "@medusajs/icons"
-import { Badge, clx, Text } from "@medusajs/ui"
+import { clx, Text } from "@medusajs/ui"
 import { matchSorter } from "match-sorter"
 import {
   ComponentPropsWithoutRef,
@@ -59,7 +59,6 @@ interface ComboboxProps<T extends Value = Value>
   noResultsPlaceholder?: ReactNode
   allowClear?: boolean
   forceHideInput?: boolean // always hide input -> used for singe value select that don't have query/filter
-  displayMode?: "count" | "chips" // how to display multiple selected values
 }
 
 const ComboboxImpl = <T extends Value = string>(
@@ -77,7 +76,6 @@ const ComboboxImpl = <T extends Value = string>(
     noResultsPlaceholder,
     allowClear,
     forceHideInput,
-    displayMode = "count",
     ...inputProps
   }: ComboboxProps<T>,
   ref: ForwardedRef<HTMLInputElement>
@@ -145,15 +143,6 @@ const ComboboxImpl = <T extends Value = string>(
     }
   }
 
-  const handleRemoveValue = (valueToRemove: string) => {
-    if (!isArrayValue || !Array.isArray(selectedValues)) {
-      return
-    }
-
-    const newValues = selectedValues.filter((v) => v !== valueToRemove) as T
-    handleValueChange(newValues)
-  }
-
   /**
    * Filter and sort the options based on the search value,
    * and whether the value is already selected.
@@ -246,179 +235,109 @@ const ComboboxImpl = <T extends Value = string>(
         startTransition(() => handleSearchChange(query))
       }}
     >
-      {displayMode === "chips" && isArrayValue ? (
-        <div
-          className={clx(
-            "relative flex cursor-pointer flex-wrap items-center gap-1.5",
-            "min-h-8 w-full rounded-md",
-            "bg-ui-bg-field transition-fg shadow-borders-base",
-            "has-[input:focus]:shadow-borders-interactive-with-active",
-            "has-[:invalid]:shadow-borders-error has-[[aria-invalid=true]]:shadow-borders-error",
-            "has-[:disabled]:bg-ui-bg-disabled has-[:disabled]:text-ui-fg-disabled has-[:disabled]:cursor-not-allowed",
-            "p-1",
-            className
-          )}
-        >
-          {Array.isArray(selectedValues) &&
-            selectedValues.map((value) => {
-              const option = options.find((o) => o.value === value)
-              if (!option) return null
-
-              return (
-                <Badge
-                  key={value}
-                  size="2xsmall"
-                  className="gap-x-0.5 pl-1.5 pr-1 transition-fg"
-                >
-                  {option.label}
-                  <button
-                    tabIndex={-1}
-                    type="button"
-                    onClick={(e) => {
-                      e.preventDefault()
-                      handleRemoveValue(value)
-                    }}
-                    className="text-ui-fg-subtle transition-fg outline-none"
-                  >
-                    <XMarkMini />
-                  </button>
-                </Badge>
-              )
-            })}
-          <div className="relative flex flex-1 items-center min-w-[120px]">
-            <PrimitiveCombobox
-              autoSelect
-              ref={comboboxRef}
-              onFocus={() => setOpen(true)}
+      <div
+        className={clx(
+          "relative flex cursor-pointer items-center gap-x-2 overflow-hidden",
+          "h-8 w-full rounded-md",
+          "bg-ui-bg-field transition-fg shadow-borders-base",
+          "has-[input:focus]:shadow-borders-interactive-with-active",
+          "has-[:invalid]:shadow-borders-error has-[[aria-invalid=true]]:shadow-borders-error",
+          "has-[:disabled]:bg-ui-bg-disabled has-[:disabled]:text-ui-fg-disabled has-[:disabled]:cursor-not-allowed",
+          className
+        )}
+        style={
+          {
+            "--tag-width": `${tagWidth}px`,
+          } as CSSProperties
+        }
+      >
+        {showTag && (
+          <button
+            type="button"
+            onClick={(e) => {
+              e.preventDefault()
+              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 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" />
+          </button>
+        )}
+        <div className="relative flex size-full items-center">
+          {showSelected && (
+            <div
               className={clx(
-                "txt-compact-small text-ui-fg-base !placeholder:text-ui-fg-muted transition-fg size-full cursor-pointer bg-transparent pe-8 ps-1 outline-none focus:cursor-text"
+                "pointer-events-none absolute inset-y-0 flex size-full items-center",
+                {
+                  "start-[calc(var(--tag-width)+8px)]": showTag,
+                  "start-2": !showTag,
+                }
               )}
-              placeholder={
-                Array.isArray(selectedValues) && selectedValues.length > 0
-                  ? undefined
-                  : placeholder
-              }
-              {...inputProps}
-            />
-          </div>
-          <PrimitiveComboboxDisclosure
-            render={(props) => {
-              return (
-                <button
-                  {...props}
-                  type="button"
-                  className="text-ui-fg-muted transition-fg hover:bg-ui-bg-field-hover absolute end-0 top-0 flex h-8 w-8 items-center justify-center rounded-r outline-none"
-                >
-                  <TrianglesMini />
-                </button>
-              )
-            }}
-          />
-        </div>
-      ) : (
-        <div
-          className={clx(
-            "relative flex cursor-pointer items-center gap-x-2 overflow-hidden",
-            "h-8 w-full rounded-md",
-            "bg-ui-bg-field transition-fg shadow-borders-base",
-            "has-[input:focus]:shadow-borders-interactive-with-active",
-            "has-[:invalid]:shadow-borders-error has-[[aria-invalid=true]]:shadow-borders-error",
-            "has-[:disabled]:bg-ui-bg-disabled has-[:disabled]:text-ui-fg-disabled has-[:disabled]:cursor-not-allowed",
-            className
-          )}
-          style={
-            {
-              "--tag-width": `${tagWidth}px`,
-            } as CSSProperties
-          }
-        >
-          {showTag && (
-            <button
-              type="button"
-              onClick={(e) => {
-                e.preventDefault()
-                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 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" />
-            </button>
+              <Text size="small" leading="compact">
+                {t("general.selected")}
+              </Text>
+            </div>
           )}
-          <div className="relative flex size-full items-center">
-            {showSelected && (
-              <div
-                className={clx(
-                  "pointer-events-none absolute inset-y-0 flex size-full items-center",
-                  {
-                    "start-[calc(var(--tag-width)+8px)]": showTag,
-                    "start-2": !showTag,
-                  }
-                )}
-              >
-                <Text size="small" leading="compact">
-                  {t("general.selected")}
-                </Text>
-              </div>
-            )}
-            {hideInput && (
-              <div
-                className={clx(
-                  "pointer-events-none absolute inset-y-0 flex size-full items-center overflow-hidden",
-                  {
-                    "start-[calc(var(--tag-width)+8px)]": showTag,
-                    "start-2": !showTag,
-                  }
-                )}
-              >
-                <Text size="small" leading="compact" className="truncate">
-                  {selectedLabel}
-                </Text>
-              </div>
-            )}
-            <PrimitiveCombobox
-              autoSelect
-              ref={comboboxRef}
-              onFocus={() => setOpen(true)}
+          {hideInput && (
+            <div
               className={clx(
-                "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",
+                "pointer-events-none absolute inset-y-0 flex size-full items-center overflow-hidden",
                 {
-                  "opacity-0": hideInput,
-                  "ps-2": !showTag,
-                  "ps-[calc(var(--tag-width)+8px)]": showTag,
+                  "start-[calc(var(--tag-width)+8px)]": showTag,
+                  "start-2": !showTag,
                 }
               )}
-              placeholder={hidePlaceholder ? undefined : placeholder}
-              {...inputProps}
-            />
-          </div>
-          {allowClear && controlledValue && (
-            <button
-              type="button"
-              onClick={(e) => {
-                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 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>
+              <Text size="small" leading="compact" className="truncate">
+                {selectedLabel}
+              </Text>
+            </div>
           )}
-          <PrimitiveComboboxDisclosure
-            render={(props) => {
-              return (
-                <button
-                  {...props}
-                  type="button"
-                  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>
-              )
-            }}
+          <PrimitiveCombobox
+            autoSelect
+            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 pe-8 ps-2 outline-none focus:cursor-text",
+              "hover:bg-ui-bg-field-hover",
+              {
+                "opacity-0": hideInput,
+                "ps-2": !showTag,
+                "ps-[calc(var(--tag-width)+8px)]": showTag,
+              }
+            )}
+            placeholder={hidePlaceholder ? undefined : placeholder}
+            {...inputProps}
           />
         </div>
-      )}
+        {allowClear && controlledValue && (
+          <button
+            type="button"
+            onClick={(e) => {
+              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 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>
+        )}
+        <PrimitiveComboboxDisclosure
+          render={(props) => {
+            return (
+              <button
+                {...props}
+                type="button"
+                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>
+            )
+          }}
+        />
+      </div>
       <PrimitiveComboboxPopover
         gutter={4}
         sameWidth

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

@@ -1,6 +1,6 @@
 import {
-  Buildings,
   BuildingStorefront,
+  Buildings,
   ChevronDownMini,
   CogSixTooth,
   CurrencyDollar,
@@ -14,7 +14,7 @@ import {
   Tag,
   Users,
 } from "@medusajs/icons"
-import { Avatar, clx, Divider, DropdownMenu, Text } from "@medusajs/ui"
+import { Avatar, Divider, DropdownMenu, Text, clx } from "@medusajs/ui"
 import { Collapsible as RadixCollapsible } from "radix-ui"
 import { useTranslation } from "react-i18next"
 
@@ -107,7 +107,8 @@ const Header = () => {
 
   return (
     <div className="w-full p-3">
-      <DropdownMenu dir={direction}>
+    <DropdownMenu
+          dir={direction}>
         <DropdownMenu.Trigger
           disabled={!isLoaded}
           className={clx(
@@ -205,10 +206,6 @@ const useCoreRoutes = (): Omit<INavItem, "pathname">[] => {
           label: t("categories.domain"),
           to: "/categories",
         },
-        {
-          label: t("productOptions.domain"),
-          to: "/product-options",
-        },
         // TODO: Enable when domin is introduced
         // {
         //   label: t("giftCards.domain"),

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

@@ -9,6 +9,7 @@ import { useExtension } from "../../../providers/extension-provider"
 import { INavItem, NavItem } from "../nav-item"
 import { Shell } from "../shell"
 import { UserMenu } from "../user-menu"
+import { useFeatureFlag } from "../../../providers/feature-flag-provider"
 
 export const SettingsLayout = () => {
   return (
@@ -19,10 +20,19 @@ export const SettingsLayout = () => {
 }
 
 const useSettingRoutes = (): INavItem[] => {
+  const isTranslationsEnabled = useFeatureFlag("translation")
   const { t } = useTranslation()
 
   return useMemo(
     () => [
+      ...(isTranslationsEnabled
+        ? [
+            {
+              label: t("translations.domain"),
+              to: "/settings/translations",
+            },
+          ]
+        : []),
       {
         label: t("store.domain"),
         to: "/settings/store",
@@ -64,7 +74,7 @@ const useSettingRoutes = (): INavItem[] => {
         to: "/settings/locations",
       },
     ],
-    [t]
+    [t, isTranslationsEnabled]
   )
 }
 

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

@@ -8,7 +8,7 @@ import { RouteModalProvider } from "../route-modal-provider/route-provider"
 import { StackedModalProvider } from "../stacked-modal-provider"
 
 type RouteFocusModalProps = PropsWithChildren<{
-  prev?: string | Partial<Path>
+  prev?: string | Partial<Path> | number
 }>
 
 const Root = ({ prev = "..", children }: RouteFocusModalProps) => {
@@ -16,7 +16,8 @@ const Root = ({ prev = "..", children }: RouteFocusModalProps) => {
   const [open, setOpen] = useState(false)
   const [stackedModalOpen, onStackedModalOpen] = useState(false)
 
-  const to = useStateAwareTo(prev)
+  const to: string | Partial<Path> | number =
+    typeof prev === "number" ? prev : useStateAwareTo(prev)
 
   /**
    * Open the modal when the component mounts. This
@@ -34,7 +35,11 @@ const Root = ({ prev = "..", children }: RouteFocusModalProps) => {
   const handleOpenChange = (open: boolean) => {
     if (!open) {
       document.body.style.pointerEvents = "auto"
-      navigate(to, { replace: true })
+      if (typeof to === "number") {
+        navigate(to)
+      } else {
+        navigate(to, { replace: true })
+      }
       return
     }
 

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

@@ -24,7 +24,12 @@ export const RouteModalForm = <TFieldValues extends FieldValues = any>({
   } = form
 
   const blocker = useBlocker(({ currentLocation, nextLocation }) => {
-    const { isSubmitSuccessful } = nextLocation.state || {}
+    // Check both nextLocation and currentLocation state for successful submission
+    // This handles browser history navigation (-1) where we set state on current location
+    const { isSubmitSuccessful: nextIsSuccessful } = nextLocation.state || {}
+    const { isSubmitSuccessful: currentIsSuccessful } =
+      currentLocation.state || {}
+    const isSubmitSuccessful = nextIsSuccessful || currentIsSuccessful
 
     if (isSubmitSuccessful) {
       onClose?.(true)

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

@@ -1,9 +1,9 @@
 import { PropsWithChildren, useCallback, useMemo, useState } from "react"
-import { Path, useNavigate } from "react-router-dom"
+import { Path, useLocation, useNavigate } from "react-router-dom"
 import { RouteModalProviderContext } from "./route-modal-context"
 
 type RouteModalProviderProps = PropsWithChildren<{
-  prev: string | Partial<Path>
+  prev: string | Partial<Path> | number
 }>
 
 export const RouteModalProvider = ({
@@ -11,15 +11,27 @@ export const RouteModalProvider = ({
   children,
 }: RouteModalProviderProps) => {
   const navigate = useNavigate()
+  const location = useLocation()
 
   const [closeOnEscape, setCloseOnEscape] = useState(true)
 
   const handleSuccess = useCallback(
     (path?: string) => {
       const to = path || prev
-      navigate(to, { replace: true, state: { isSubmitSuccessful: true } })
+      if (typeof to === "number") {
+        // Replace current location with success state, then navigate back
+        navigate(location.pathname + location.search, {
+          replace: true,
+          state: { ...location.state, isSubmitSuccessful: true },
+        })
+        setTimeout(() => {
+          navigate(to)
+        }, 0)
+      } else {
+        navigate(to, { replace: true, state: { isSubmitSuccessful: true } })
+      }
     },
-    [navigate, prev]
+    [navigate, prev, location]
   )
 
   const value = useMemo(

package/src/components/search/use-search-results.tsx

@@ -117,7 +117,9 @@ const useDynamicSearchResults = (
     {
       q: debouncedSearch,
       limit,
-      fields: "id,title,thumbnail",
+      // TODO: Remove exclusion once we avoid including unnecessary relations by default in the query config
+      fields:
+        "id,title,thumbnail,-type,-collection,-options,-tags,-images,-variants,-sales_channels",
     },
     {
       enabled: isAreaEnabled(currentArea, "product"),

package/src/components/table/table-cells/order/total-cell/total-cell.tsx

@@ -5,15 +5,16 @@ import { PlaceholderCell } from "../../common/placeholder-cell"
 type TotalCellProps = {
   currencyCode: string
   total: number | null
+  className?: string
 }
 
-export const TotalCell = ({ currencyCode, total }: TotalCellProps) => {
+export const TotalCell = ({ currencyCode, total, className }: TotalCellProps) => {
   if (!total) {
     return <PlaceholderCell />
   }
 
   return (
-    <MoneyAmountCell currencyCode={currencyCode} amount={total} align="right" />
+    <MoneyAmountCell currencyCode={currencyCode} amount={total} className={className} align="right" />
   )
 }
 

package/src/dashboard-app/routes/get-route.map.tsx

@@ -136,6 +136,18 @@ export function getRouteMap({
                           lazy: () =>
                             import("../../routes/products/product-prices"),
                         },
+                        {
+                          path: "options/create",
+                          lazy: () =>
+                            import(
+                              "../../routes/products/product-create-option"
+                            ),
+                        },
+                        {
+                          path: "options/:option_id/edit",
+                          lazy: () =>
+                            import("../../routes/products/product-edit-option"),
+                        },
                         {
                           path: "variants/create",
                           lazy: () =>
@@ -153,13 +165,6 @@ export function getRouteMap({
                           lazy: () =>
                             import("../../routes/products/product-metadata"),
                         },
-                        {
-                          path: "options/manage",
-                          lazy: () =>
-                            import(
-                              "../../routes/products/product-options-manage"
-                            ),
-                        },
                       ],
                     },
                     {
@@ -220,63 +225,6 @@ export function getRouteMap({
                 },
               ],
             },
-            {
-              path: "/product-options",
-              errorElement: <ErrorBoundary />,
-              handle: {
-                breadcrumb: () => t("productOptions.domain"),
-              },
-              children: [
-                {
-                  path: "",
-                  lazy: () =>
-                    import("../../routes/product-options/product-option-list"),
-                  children: [
-                    {
-                      path: "create",
-                      lazy: () =>
-                        import(
-                          "../../routes/product-options/product-option-create"
-                        ),
-                    },
-                  ],
-                },
-                {
-                  path: ":id",
-                  lazy: async () => {
-                    const { Component, Breadcrumb, loader } = await import(
-                      "../../routes/product-options/product-option-detail"
-                    )
-
-                    return {
-                      Component,
-                      loader,
-                      handle: {
-                        breadcrumb: (match: UIMatch<any>) => (
-                          <Breadcrumb {...match} />
-                        ),
-                      },
-                    }
-                  },
-                  children: [
-                    {
-                      path: "edit",
-                      lazy: () =>
-                        import(
-                          "../../routes/product-options/product-option-edit"
-                        ),
-                    },
-                    {
-                      path: "metadata/edit",
-                      lazy: () =>
-                        import(
-                          "../../routes/product-options/product-option-metadata"
-                        ),
-                    },
-                  ],
-                },
-              ],
-            },
             {
               path: "/categories",
               errorElement: <ErrorBoundary />,
@@ -991,6 +939,26 @@ export function getRouteMap({
                 },
               ],
             },
+            {
+              path: "translations",
+              errorElement: <ErrorBoundary />,
+              element: <Outlet />,
+              handle: {
+                breadcrumb: () => t("translations.domain"),
+              },
+              children: [
+                {
+                  path: "",
+                  lazy: () =>
+                    import("../../routes/translations/translation-list"),
+                },
+                {
+                  path: "edit",
+                  lazy: () =>
+                    import("../../routes/translations/translations-edit"),
+                },
+              ],
+            },
             {
               path: "regions",
               errorElement: <ErrorBoundary />,
@@ -1061,6 +1029,10 @@ export function getRouteMap({
                   path: "currencies",
                   lazy: () => import("../../routes/store/store-add-currencies"),
                 },
+                {
+                  path: "locales",
+                  lazy: () => import("../../routes/store/store-add-locales"),
+                },
                 {
                   path: "metadata/edit",
                   lazy: () => import("../../routes/store/store-metadata"),

package/src/hooks/api/feature-flags.tsx

@@ -3,6 +3,7 @@ import { sdk } from "../../lib/client"
 
 export type FeatureFlags = {
   view_configurations?: boolean
+  translation?: boolean
   [key: string]: boolean | undefined
 }
 
@@ -10,13 +11,16 @@ export const useFeatureFlags = () => {
   return useQuery<FeatureFlags>({
     queryKey: ["admin", "feature-flags"],
     queryFn: async () => {
-      const response = await sdk.client.fetch<{ feature_flags: FeatureFlags }>("/admin/feature-flags", {
-        method: "GET",
-      })
-      
+      const response = await sdk.client.fetch<{ feature_flags: FeatureFlags }>(
+        "/admin/feature-flags",
+        {
+          method: "GET",
+        }
+      )
+
       return response.feature_flags
     },
     staleTime: 5 * 60 * 1000, // Cache for 5 minutes
     cacheTime: 10 * 60 * 1000, // Keep in cache for 10 minutes
   })
-}
+}