@medusajs/dashboard 3.0.0-snapshot-20251216145629 → 3.0.0-snapshot-20260102134455

package/src/components/data-grid/hooks/use-data-grid-keydown-event.tsx

@@ -211,7 +211,22 @@ export const useDataGridKeydownEvent = <
     [rangeEnd, matrix, getSelectionValues, setSelectionValues, execute]
   )
 
-  const handleSpaceKeyTextOrNumber = useCallback(
+  const handleSpaceKeyText = useCallback(
+    (anchor: DataGridCoordinates) => {
+      const field = matrix.getCellField(anchor)
+      const input = queryTool?.getInput(anchor)
+
+      if (!field || !input) {
+        return
+      }
+
+      createSnapshot(anchor)
+      input.focus()
+    },
+    [matrix, queryTool, createSnapshot]
+  )
+
+  const handleSpaceKeyNumber = useCallback(
     (anchor: DataGridCoordinates) => {
       const field = matrix.getCellField(anchor)
       const input = queryTool?.getInput(anchor)
@@ -303,9 +318,12 @@ export const useDataGridKeydownEvent = <
         case "togglable-number":
           handleSpaceKeyTogglableNumber(anchor)
           break
-        case "number":
         case "text":
-          handleSpaceKeyTextOrNumber(anchor)
+        case "multiline-text":
+          handleSpaceKeyText(anchor)
+          break
+        case "number":
+          handleSpaceKeyNumber(anchor)
           break
       }
     },
@@ -314,7 +332,8 @@ export const useDataGridKeydownEvent = <
       isEditing,
       matrix,
       handleSpaceKeyBoolean,
-      handleSpaceKeyTextOrNumber,
+      handleSpaceKeyText,
+      handleSpaceKeyNumber,
       handleSpaceKeyTogglableNumber,
     ]
   )
@@ -384,6 +403,30 @@ export const useDataGridKeydownEvent = <
     [handleMoveOnEnter, handleEditOnEnter, isEditing]
   )
 
+  /**
+   * Handles the enter key for multiline-text cells.
+   *
+   * The behavior is as follows:
+   * - If Shift+Enter is pressed while editing, allow the newline (don't prevent default).
+   * - If Enter is pressed while editing (without Shift), move to the next cell.
+   * - If the cell is currently not being edited, start editing the cell.
+   */
+  const handleEnterKeyMultilineText = useCallback(
+    (e: KeyboardEvent, anchor: DataGridCoordinates) => {
+      if (isEditing) {
+        if (e.shiftKey) {
+          return
+        }
+
+        handleMoveOnEnter(e, anchor)
+        return
+      }
+
+      handleEditOnEnter(anchor)
+    },
+    [handleMoveOnEnter, handleEditOnEnter, isEditing]
+  )
+
   /**
    * Handles the enter key for boolean cells.
    *
@@ -432,11 +475,18 @@ export const useDataGridKeydownEvent = <
         return
       }
 
-      e.preventDefault()
-
       const type = matrix.getCellType(anchor)
 
+      if (type === "multiline-text" && isEditing && e.shiftKey) {
+        return
+      }
+
+      e.preventDefault()
+
       switch (type) {
+        case "multiline-text":
+          handleEnterKeyMultilineText(e, anchor)
+          break
         case "togglable-number":
         case "text":
         case "number":
@@ -448,7 +498,14 @@ export const useDataGridKeydownEvent = <
         }
       }
     },
-    [anchor, matrix, handleEnterKeyTextOrNumber, handleEnterKeyBoolean]
+    [
+      anchor,
+      matrix,
+      isEditing,
+      handleEnterKeyTextOrNumber,
+      handleEnterKeyBoolean,
+      handleEnterKeyMultilineText,
+    ]
   )
 
   const handleDeleteKeyTogglableNumber = useCallback(
@@ -526,6 +583,7 @@ export const useDataGridKeydownEvent = <
 
       switch (type) {
         case "text":
+        case "multiline-text":
         case "number":
           handleDeleteKeyTextOrNumber(anchor, rangeEnd)
           break

package/src/components/data-grid/types.ts

@@ -16,6 +16,7 @@ import {
 
 export type DataGridColumnType =
   | "text"
+  | "multiline-text"
   | "number"
   | "boolean"
   | "togglable-number"

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

@@ -15,7 +15,7 @@ import {
   TrianglesMini,
   XMarkMini,
 } from "@medusajs/icons"
-import { clx, Text } from "@medusajs/ui"
+import { Badge, clx, Text } from "@medusajs/ui"
 import { matchSorter } from "match-sorter"
 import {
   ComponentPropsWithoutRef,
@@ -59,6 +59,7 @@ 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>(
@@ -76,6 +77,7 @@ const ComboboxImpl = <T extends Value = string>(
     noResultsPlaceholder,
     allowClear,
     forceHideInput,
+    displayMode = "count",
     ...inputProps
   }: ComboboxProps<T>,
   ref: ForwardedRef<HTMLInputElement>
@@ -112,8 +114,9 @@ const ComboboxImpl = <T extends Value = string>(
     const exists = options
       .filter((o) => !o.disabled)
       .find((o) => {
-        if (isArrayValue) {
-          return newValues?.includes(o.value)
+        if (isArrayValue && newValues?.length) {
+          // only check if the last added value
+          return newValues[newValues.length - 1]?.includes(o.value)
         }
         return o.value === newValues
       })
@@ -143,6 +146,15 @@ 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.
@@ -229,115 +241,193 @@ const ComboboxImpl = <T extends Value = string>(
       open={open}
       setOpen={handleOpenChange}
       selectedValue={selectedValues}
-      setSelectedValue={(value) => handleValueChange(value as T)}
+      setSelectedValue={(value) => {
+        // TMP: fix issue where sometimes first element of the array is empty string
+        if (Array.isArray(value) && value[0] === "") {
+          value.shift()
+        }
+        handleValueChange(value as T)
+      }}
       value={uncontrolledSearchValue}
       setValue={(query) => {
         startTransition(() => handleSearchChange(query))
       }}
     >
-      <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
+      {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="transition-fg gap-x-0.5 pl-1.5 pr-1"
+                >
+                  {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 min-w-[120px] flex-1 items-center">
+            <PrimitiveCombobox
+              autoSelect
+              ref={comboboxRef}
+              onFocus={() => setOpen(true)}
               className={clx(
-                "pointer-events-none absolute inset-y-0 flex size-full items-center",
-                {
-                  "start-[calc(var(--tag-width)+8px)]": showTag,
-                  "start-2": !showTag,
-                }
+                "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"
               )}
+              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"
             >
-              <Text size="small" leading="compact">
-                {t("general.selected")}
-              </Text>
-            </div>
+              <span className="tabular-nums">{selectedValues.length}</span>
+              <XMarkMini className="text-ui-fg-muted" />
+            </button>
           )}
-          {hideInput && (
-            <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)}
               className={clx(
-                "pointer-events-none absolute inset-y-0 flex size-full items-center overflow-hidden",
+                "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",
                 {
-                  "start-[calc(var(--tag-width)+8px)]": showTag,
-                  "start-2": !showTag,
+                  "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"
             >
-              <Text size="small" leading="compact" className="truncate">
-                {selectedLabel}
-              </Text>
-            </div>
+              <XMarkMini className="text-ui-fg-muted" />
+            </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}
+          <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>
-        {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 {
-  BuildingStorefront,
   Buildings,
+  BuildingStorefront,
   ChevronDownMini,
   CogSixTooth,
   CurrencyDollar,
@@ -14,7 +14,7 @@ import {
   Tag,
   Users,
 } from "@medusajs/icons"
-import { Avatar, Divider, DropdownMenu, Text, clx } from "@medusajs/ui"
+import { Avatar, clx, Divider, DropdownMenu, Text } from "@medusajs/ui"
 import { Collapsible as RadixCollapsible } from "radix-ui"
 import { useTranslation } from "react-i18next"
 
@@ -107,8 +107,7 @@ const Header = () => {
 
   return (
     <div className="w-full p-3">
-    <DropdownMenu
-          dir={direction}>
+      <DropdownMenu dir={direction}>
         <DropdownMenu.Trigger
           disabled={!isLoaded}
           className={clx(
@@ -206,6 +205,10 @@ 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/table/table-cells/order/country-cell/country-cell.tsx

@@ -3,10 +3,14 @@ import ReactCountryFlag from "react-country-flag"
 import { PlaceholderCell } from "../../common/placeholder-cell"
 import { HttpTypes } from "@medusajs/types"
 
+type Country = Omit<HttpTypes.AdminRegionCountry, "id"> & {
+  id?: string
+}
+
 export const CountryCell = ({
   country,
 }: {
-  country?: HttpTypes.AdminRegionCountry | null
+  country?: Country | null
 }) => {
   if (!country) {
     return <PlaceholderCell />

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

@@ -136,18 +136,6 @@ 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: () =>
@@ -165,6 +153,13 @@ export function getRouteMap({
                           lazy: () =>
                             import("../../routes/products/product-metadata"),
                         },
+                        {
+                          path: "options/manage",
+                          lazy: () =>
+                            import(
+                              "../../routes/products/product-options-manage"
+                            ),
+                        },
                       ],
                     },
                     {
@@ -225,6 +220,63 @@ 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 />,
@@ -1857,6 +1909,10 @@ export function getRouteMap({
                   lazy: () =>
                     import("../../routes/translations/translations-edit"),
                 },
+                {
+                  path: "add-locales",
+                  lazy: () => import("../../routes/translations/add-locales"),
+                },
               ],
             },
             ...(settingsRoutes?.[0]?.children || []),

package/src/hooks/api/cloud.tsx

@@ -0,0 +1,41 @@
+import { FetchError } from "@medusajs/js-sdk"
+import {
+  UseMutationOptions,
+  UseQueryOptions,
+  useMutation,
+  useQuery,
+} from "@tanstack/react-query"
+import { sdk } from "../../lib/client"
+
+export const cloudQueryKeys = {
+  all: ["cloud"] as const,
+  auth: () => [...cloudQueryKeys.all, "auth"] as const,
+}
+
+export const useCloudAuthEnabled = (
+  options?: Omit<
+    UseQueryOptions<{ enabled: boolean }, FetchError>,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: cloudQueryKeys.auth(),
+    queryFn: async () => {
+      return await sdk.client.fetch<{ enabled: boolean }>("/cloud/auth")
+    },
+    ...options,
+  })
+}
+
+export const useCreateCloudAuthUser = (
+  options?: UseMutationOptions<void, FetchError>
+) => {
+  return useMutation({
+    mutationFn: async () => {
+      await sdk.client.fetch("/cloud/auth/users", {
+        method: "POST",
+      })
+    },
+    ...options,
+  })
+}