@medusajs/dashboard 3.0.0-snapshot-20251106181920 → 3.0.0-snapshot-20251114155958

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>
@@ -143,6 +145,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.
@@ -235,109 +246,179 @@ const ComboboxImpl = <T extends Value = string>(
         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="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)}
               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

@@ -351,6 +351,7 @@ const ExtensionRouteSection = () => {
                     label={item.label}
                     icon={item.icon ? item.icon : <SquaresPlus />}
                     items={item.items}
+                    translationNs={item.translationNs}
                     type="extension"
                   />
                 )

package/src/components/layout/nav-item/nav-item.tsx

@@ -17,6 +17,7 @@ type ItemType = "core" | "extension" | "setting"
 type NestedItemProps = {
   label: string
   to: string
+  translationNs?: string
 }
 
 export type INavItem = {
@@ -27,6 +28,7 @@ export type INavItem = {
   type?: ItemType
   from?: string
   nested?: string
+  translationNs?: string
 }
 
 const BASE_NAV_LINK_CLASSES =
@@ -90,10 +92,15 @@ export const NavItem = ({
   items,
   type = "core",
   from,
+  translationNs,
 }: INavItem) => {
+  const { t } = useTranslation(translationNs as any)
   const { pathname } = useLocation()
   const [open, setOpen] = useState(getIsOpen(to, items, pathname))
 
+  // Use translation if translationNs is provided, otherwise use label as-is
+  const displayLabel: string = translationNs ? t(label) : label
+
   useEffect(() => {
     setOpen(getIsOpen(to, items, pathname))
   }, [pathname, to, items])
@@ -150,7 +157,7 @@ export const NavItem = ({
             </div>
           )}
           <Text size="small" weight="plus" leading="compact">
-            {label}
+            {displayLabel}
           </Text>
         </NavLink>
       </NavItemTooltip>
@@ -166,7 +173,7 @@ export const NavItem = ({
               <Icon icon={icon} type={type} />
             </div>
             <Text size="small" weight="plus" leading="compact">
-              {label}
+              {displayLabel}
             </Text>
           </RadixCollapsible.Trigger>
           <RadixCollapsible.Content>
@@ -189,12 +196,15 @@ export const NavItem = ({
                       }}
                     >
                       <Text size="small" weight="plus" leading="compact">
-                        {label}
+                        {displayLabel}
                       </Text>
                     </NavLink>
                   </NavItemTooltip>
                 </li>
                 {items.map((item) => {
+                  const { t: itemT } = useTranslation(item.translationNs as any)
+                  const itemLabel: string = item.translationNs ? itemT(item.label) : item.label
+
                   return (
                     <li key={item.to} className="flex h-7 items-center">
                       <NavItemTooltip to={item.to}>
@@ -213,7 +223,7 @@ export const NavItem = ({
                           }}
                         >
                           <Text size="small" weight="plus" leading="compact">
-                            {item.label}
+                            {itemLabel}
                           </Text>
                         </NavLink>
                       </NavItemTooltip>

package/src/dashboard-app/__tests__/sort-menu-items-by-rank.spec.ts

@@ -0,0 +1,169 @@
+import { describe, expect, it } from "vitest"
+import { sortMenuItemsByRank } from "../utils/sort-menu-items-by-rank"
+import { INavItem } from "../../components/layout/nav-item"
+
+describe("sortMenuItemsByRank", () => {
+  it("should sort items by rank in ascending order", () => {
+    const items: INavItem[] = [
+      { label: "Third", to: "/third", rank: 3 },
+      { label: "First", to: "/first", rank: 1 },
+      { label: "Second", to: "/second", rank: 2 },
+    ]
+
+    const sorted = sortMenuItemsByRank(items)
+
+    expect(sorted[0].label).toBe("First")
+    expect(sorted[1].label).toBe("Second")
+    expect(sorted[2].label).toBe("Third")
+  })
+
+  it("should place items with rank before items without rank", () => {
+    const items: INavItem[] = [
+      { label: "No Rank", to: "/no-rank" },
+      { label: "Ranked 2", to: "/ranked-2", rank: 2 },
+      { label: "Ranked 1", to: "/ranked-1", rank: 1 },
+      { label: "Also No Rank", to: "/also-no-rank" },
+    ]
+
+    const sorted = sortMenuItemsByRank(items)
+
+    expect(sorted[0].label).toBe("Ranked 1")
+    expect(sorted[1].label).toBe("Ranked 2")
+    expect(sorted[2].label).toBe("No Rank")
+    expect(sorted[3].label).toBe("Also No Rank")
+  })
+
+  it("should handle items with rank 0", () => {
+    const items: INavItem[] = [
+      { label: "Rank 2", to: "/rank-2", rank: 2 },
+      { label: "Rank 0", to: "/rank-0", rank: 0 },
+      { label: "Rank 1", to: "/rank-1", rank: 1 },
+    ]
+
+    const sorted = sortMenuItemsByRank(items)
+
+    expect(sorted[0].label).toBe("Rank 0")
+    expect(sorted[1].label).toBe("Rank 1")
+    expect(sorted[2].label).toBe("Rank 2")
+  })
+
+  it("should handle negative ranks", () => {
+    const items: INavItem[] = [
+      { label: "Rank 1", to: "/rank-1", rank: 1 },
+      { label: "Rank -1", to: "/rank-minus-1", rank: -1 },
+      { label: "Rank 0", to: "/rank-0", rank: 0 },
+    ]
+
+    const sorted = sortMenuItemsByRank(items)
+
+    expect(sorted[0].label).toBe("Rank -1")
+    expect(sorted[1].label).toBe("Rank 0")
+    expect(sorted[2].label).toBe("Rank 1")
+  })
+
+  it("should sort nested items independently", () => {
+    const items: INavItem[] = [
+      {
+        label: "Parent 2",
+        to: "/parent-2",
+        rank: 2,
+        items: [
+          { label: "Child 2B", to: "/child-2b", rank: 2 },
+          { label: "Child 2A", to: "/child-2a", rank: 1 },
+        ],
+      },
+      {
+        label: "Parent 1",
+        to: "/parent-1",
+        rank: 1,
+        items: [
+          { label: "Child 1C", to: "/child-1c", rank: 3 },
+          { label: "Child 1A", to: "/child-1a", rank: 1 },
+          { label: "Child 1B", to: "/child-1b", rank: 2 },
+        ],
+      },
+    ]
+
+    const sorted = sortMenuItemsByRank(items)
+
+    // Parents should be sorted
+    expect(sorted[0].label).toBe("Parent 1")
+    expect(sorted[1].label).toBe("Parent 2")
+
+    // Parent 1's children should be sorted
+    expect(sorted[0].items![0].label).toBe("Child 1A")
+    expect(sorted[0].items![1].label).toBe("Child 1B")
+    expect(sorted[0].items![2].label).toBe("Child 1C")
+
+    // Parent 2's children should be sorted
+    expect(sorted[1].items![0].label).toBe("Child 2A")
+    expect(sorted[1].items![1].label).toBe("Child 2B")
+  })
+
+  it("should handle nested items with mixed ranked and unranked", () => {
+    const items: INavItem[] = [
+      {
+        label: "Parent",
+        to: "/parent",
+        rank: 1,
+        items: [
+          { label: "No Rank Child", to: "/no-rank" },
+          { label: "Rank 1 Child", to: "/rank-1", rank: 1 },
+          { label: "Rank 2 Child", to: "/rank-2", rank: 2 },
+        ],
+      },
+    ]
+
+    const sorted = sortMenuItemsByRank(items)
+
+    expect(sorted[0].items![0].label).toBe("Rank 1 Child")
+    expect(sorted[0].items![1].label).toBe("Rank 2 Child")
+    expect(sorted[0].items![2].label).toBe("No Rank Child")
+  })
+
+  it("should handle empty items array", () => {
+    const items: INavItem[] = []
+
+    const sorted = sortMenuItemsByRank(items)
+
+    expect(sorted).toEqual([])
+  })
+
+  it("should handle single item", () => {
+    const items: INavItem[] = [{ label: "Only Item", to: "/only", rank: 1 }]
+
+    const sorted = sortMenuItemsByRank(items)
+
+    expect(sorted).toHaveLength(1)
+    expect(sorted[0].label).toBe("Only Item")
+  })
+
+  it("should preserve items without nested arrays", () => {
+    const items: INavItem[] = [
+      { label: "Item 1", to: "/item-1", rank: 2 },
+      { label: "Item 2", to: "/item-2", rank: 1 },
+    ]
+
+    const sorted = sortMenuItemsByRank(items)
+
+    expect(sorted[0].items).toBeUndefined()
+    expect(sorted[1].items).toBeUndefined()
+  })
+
+  it("should handle duplicate rank values", () => {
+    const items: INavItem[] = [
+      { label: "Item C", to: "/item-c", rank: 1 },
+      { label: "Item A", to: "/item-a", rank: 1 },
+      { label: "Item B", to: "/item-b", rank: 1 },
+    ]
+
+    const sorted = sortMenuItemsByRank(items)
+
+    // All should have rank 1, order should be stable
+    expect(sorted[0].rank).toBe(1)
+    expect(sorted[1].rank).toBe(1)
+    expect(sorted[2].rank).toBe(1)
+    expect(sorted).toHaveLength(3)
+  })
+})
+

package/src/dashboard-app/dashboard-app.tsx

@@ -18,6 +18,7 @@ import { Providers } from "../providers"
 import coreTranslations from "../i18n/translations"
 import { getRouteMap } from "./routes/get-route.map"
 import { createRouteMap, getRouteExtensions } from "./routes/utils"
+import { sortMenuItemsByRank } from "./utils/sort-menu-items-by-rank"
 import {
   ConfigExtension,
   ConfigField,
@@ -181,12 +182,14 @@ export class DashboardApp {
         return
       }
 
-      const navItem: INavItem = {
+      const navItem: INavItem & { rank?: number } = {
         label: item.label,
         to: item.path,
         icon: item.icon ? <item.icon /> : undefined,
         items: [],
         nested: item.nested,
+        rank: item.rank,
+        translationNs: item.translationNs,
       }
 
       if (parentPath !== "/" && tempRegistry[parentPath]) {
@@ -204,6 +207,12 @@ export class DashboardApp {
       tempRegistry[item.path] = navItem
     })
 
+    // Sort menu items by rank (ascending order, undefined ranks come last)
+    registry.forEach((items, key) => {
+      const sorted = sortMenuItemsByRank(items)
+      registry.set(key, sorted)
+    })
+
     return registry
   }
 

package/src/dashboard-app/types.ts

@@ -24,6 +24,8 @@ export type MenuItemExtension = {
   path: string
   icon?: ComponentType
   nested?: NestedRoutePosition
+  rank?: number
+  translationNs?: string
 }
 
 export type WidgetExtension = {

package/src/dashboard-app/utils/sort-menu-items-by-rank.ts

@@ -0,0 +1,43 @@
+import { INavItem } from "../../components/layout/nav-item"
+
+/**
+ * Sort menu items by rank in ascending order.
+ * Items with rank come first, sorted by rank value.
+ * Items without rank come last, maintaining their original order.
+ * Recursively sorts nested items independently.
+ */
+export function sortMenuItemsByRank(
+  items: (INavItem & { rank?: number })[]
+): INavItem[] {
+  // Sort items by rank (ascending order)
+  // Items with rank come first, sorted by rank value
+  // Items without rank come last, maintaining their original order
+  const sortedItems = items.sort((a, b) => {
+    // If both have rank, sort by rank value
+    if (a.rank !== undefined && b.rank !== undefined) {
+      return a.rank - b.rank
+    }
+    // If only a has rank, it comes first
+    if (a.rank !== undefined) {
+      return -1
+    }
+    // If only b has rank, it comes first
+    if (b.rank !== undefined) {
+      return 1
+    }
+    // If neither has rank, maintain original order
+    return 0
+  })
+
+  // Recursively sort nested items
+  sortedItems.forEach((item) => {
+    if (item.items && item.items.length > 0) {
+      item.items = sortMenuItemsByRank(
+        item.items as (INavItem & { rank?: number })[]
+      )
+    }
+  })
+
+  return sortedItems
+}
+