@medusajs/dashboard 3.0.0-preview-20250211091350 → 3.0.0-preview-20250406180144

package/dist/{workflow-execution-list-VEHTWIZD.mjs → workflow-execution-list-4QDXZ3N5.mjs}

@@ -9,31 +9,29 @@ import "./chunk-LQTHYS2Z.mjs";
 import {
   _DataTable,
   useDataTable
-} from "./chunk-RAKBTSZ7.mjs";
+} from "./chunk-GIQRSI5I.mjs";
 import "./chunk-YEDAFXMB.mjs";
 import "./chunk-AOFGTNG6.mjs";
-import "./chunk-WX2SMNCD.mjs";
-import "./chunk-JKKJMCX3.mjs";
+import "./chunk-EMIHDNB7.mjs";
+import "./chunk-PEGJVODH.mjs";
 import "./chunk-M3VFKDXJ.mjs";
 import {
   SingleColumnPage
 } from "./chunk-2RQLKDBF.mjs";
-import "./chunk-LPEUYMRK.mjs";
 import {
   useQueryParams
 } from "./chunk-C76H5USB.mjs";
-import "./chunk-BKWQ2FHJ.mjs";
-import "./chunk-YXEAWUSX.mjs";
+import "./chunk-WL7NJCWV.mjs";
 import {
-  useWorkflowExecutions
-} from "./chunk-SFPKA7H3.mjs";
+  useExtension
+} from "./chunk-C5P5PL3E.mjs";
+import "./chunk-LPEUYMRK.mjs";
+import "./chunk-3KLERXD7.mjs";
 import {
-  useDashboardExtension
-} from "./chunk-VIJAVLIU.mjs";
-import "./chunk-ONB3JEHR.mjs";
-import "./chunk-53IEL2PE.mjs";
+  useWorkflowExecutions
+} from "./chunk-QTCZFYFH.mjs";
 import "./chunk-774WSTCC.mjs";
-import "./chunk-WAYDNCEG.mjs";
+import "./chunk-DEQUVHHE.mjs";
 import "./chunk-GH77ZQI2.mjs";
 
 // src/routes/workflow-executions/workflow-execution-list/components/workflow-execution-list-table/workflow-execution-list-table.tsx
@@ -164,7 +162,7 @@ var WorkflowExecutionListTable = () => {
 // src/routes/workflow-executions/workflow-execution-list/workflow-execution-list.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 var WorkflowExcecutionList = () => {
-  const { getWidgets } = useDashboardExtension();
+  const { getWidgets } = useExtension();
   return /* @__PURE__ */ jsx3(
     SingleColumnPage,
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medusajs/dashboard",
-  "version": "3.0.0-preview-20250211091350",
+  "version": "3.0.0-preview-20250406180144",
   "scripts": {
     "generate:static": "node ./scripts/generate-currencies.js && prettier --write ./src/lib/currencies.ts",
     "dev": "vite",
@@ -36,7 +36,6 @@
   "files": [
     "package.json",
     "src",
-    "index.html",
     "dist"
   ],
   "dependencies": {
@@ -45,10 +44,10 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "3.4.2",
-    "@medusajs/admin-shared": "3.0.0-preview-20250211091350",
-    "@medusajs/icons": "3.0.0-preview-20250211091350",
-    "@medusajs/js-sdk": "3.0.0-preview-20250211091350",
-    "@medusajs/ui": "4.0.5-preview-20250211091350",
+    "@medusajs/admin-shared": "3.0.0-preview-20250406180144",
+    "@medusajs/icons": "3.0.0-preview-20250406180144",
+    "@medusajs/js-sdk": "3.0.0-preview-20250406180144",
+    "@medusajs/ui": "4.0.8-preview-20250406180144",
     "@tanstack/react-query": "5.64.2",
     "@tanstack/react-table": "8.20.5",
     "@tanstack/react-virtual": "^3.8.3",
@@ -75,10 +74,10 @@
     "zod": "3.22.4"
   },
   "devDependencies": {
-    "@medusajs/admin-shared": "3.0.0-preview-20250211091350",
-    "@medusajs/admin-vite-plugin": "3.0.0-preview-20250211091350",
-    "@medusajs/types": "3.0.0-preview-20250211091350",
-    "@medusajs/ui-preset": "3.0.0-preview-20250211091350",
+    "@medusajs/admin-shared": "3.0.0-preview-20250406180144",
+    "@medusajs/admin-vite-plugin": "3.0.0-preview-20250406180144",
+    "@medusajs/types": "3.0.0-preview-20250406180144",
+    "@medusajs/ui-preset": "3.0.0-preview-20250406180144",
     "@types/node": "^20.11.15",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
@@ -90,9 +89,9 @@
     "tailwindcss": "^3.4.1",
     "tsup": "^8.0.2",
     "typescript": "5.2.2",
-    "vite": "^5.2.11",
+    "vite": "^5.4.14",
     "vite-plugin-inspect": "^0.8.7",
-    "vitest": "^2.1.9"
+    "vitest": "^3.0.5"
   },
   "packageManager": "yarn@3.2.1"
 }

package/src/app.tsx

@@ -1,27 +1,32 @@
-import { DashboardExtensionManager } from "./extensions"
-import { Providers } from "./providers/providers"
-import { RouterProvider } from "./providers/router-provider"
+import { DashboardApp } from "./dashboard-app"
+import { DashboardPlugin } from "./dashboard-app/types"
 
 import displayModule from "virtual:medusa/displays"
 import formModule from "virtual:medusa/forms"
 import menuItemModule from "virtual:medusa/menu-items"
+import routeModule from "virtual:medusa/routes"
 import widgetModule from "virtual:medusa/widgets"
 
 import "./index.css"
 
-function App() {
-  const manager = new DashboardExtensionManager({
-    displayModule,
-    formModule,
-    menuItemModule,
-    widgetModule,
+const localPlugin = {
+  widgetModule,
+  routeModule,
+  displayModule,
+  formModule,
+  menuItemModule,
+}
+
+interface AppProps {
+  plugins?: DashboardPlugin[]
+}
+
+function App({ plugins = [] }: AppProps) {
+  const app = new DashboardApp({
+    plugins: [localPlugin, ...plugins],
   })
 
-  return (
-    <Providers api={manager.api}>
-      <RouterProvider />
-    </Providers>
-  )
+  return <div>{app.render()}</div>
 }
 
 export default App

package/src/components/common/empty-table-content/empty-table-content.tsx

@@ -1,5 +1,6 @@
 import { ExclamationCircle, MagnifyingGlass, PlusMini } from "@medusajs/icons"
 import { Button, Text, clx } from "@medusajs/ui"
+import React from "react"
 import { useTranslation } from "react-i18next"
 import { Link } from "react-router-dom"
 
@@ -44,6 +45,7 @@ type NoRecordsProps = {
   message?: string
   className?: string
   buttonVariant?: string
+  icon?: React.ReactNode
 } & ActionProps
 
 const DefaultButton = ({ action }: ActionProps) =>
@@ -70,18 +72,19 @@ export const NoRecords = ({
   action,
   className,
   buttonVariant = "default",
+  icon = <ExclamationCircle className="text-ui-fg-subtle" />,
 }: NoRecordsProps) => {
   const { t } = useTranslation()
 
   return (
     <div
       className={clx(
-        "flex h-[400px] w-full flex-col items-center justify-center gap-y-4",
+        "flex h-[150px] w-full flex-col items-center justify-center gap-y-4",
         className
       )}
     >
       <div className="flex flex-col items-center gap-y-3">
-        <ExclamationCircle className="text-ui-fg-subtle" />
+        {icon}
 
         <div className="flex flex-col items-center gap-y-1">
           <Text size="small" leading="compact" weight="plus">

package/src/components/common/infinite-list/infinite-list.tsx

@@ -74,17 +74,27 @@ export const InfiniteList = <
     // Define the new observers after we stop fetching
     if (!isFetching) {
       // Define the new observers after paginating
-      startObserver.current = new IntersectionObserver((entries) => {
-        if (entries[0].isIntersecting && hasPreviousPage) {
-          fetchPreviousPage()
+      startObserver.current = new IntersectionObserver(
+        (entries) => {
+          if (entries[0].isIntersecting && hasPreviousPage) {
+            fetchPreviousPage()
+          }
+        },
+        {
+          threshold: 0.5,
         }
-      })
+      )
 
-      endObserver.current = new IntersectionObserver((entries) => {
-        if (entries[0].isIntersecting && hasNextPage) {
-          fetchNextPage()
+      endObserver.current = new IntersectionObserver(
+        (entries) => {
+          if (entries[0].isIntersecting && hasNextPage) {
+            fetchNextPage()
+          }
+        },
+        {
+          threshold: 0.5,
         }
-      })
+      )
 
       // Register the new observers to observe the new first and last children
       startObserver.current?.observe(parentRef.current!.firstChild as Element)

package/src/components/common/listicle/index.ts

@@ -0,0 +1 @@
+export * from "./listicle"

package/src/components/common/listicle/listicle.tsx

@@ -0,0 +1,34 @@
+import { Text } from "@medusajs/ui"
+import { ReactNode } from "react"
+
+export interface ListicleProps {
+  labelKey: string
+  descriptionKey: string
+  children?: ReactNode
+}
+
+export const Listicle = ({
+  labelKey,
+  descriptionKey,
+  children,
+}: ListicleProps) => {
+  return (
+    <div className="flex flex-col gap-2 px-2 pb-2">
+      <div className="shadow-elevation-card-rest bg-ui-bg-component transition-fg hover:bg-ui-bg-component-hover active:bg-ui-bg-component-pressed group-focus-visible:shadow-borders-interactive-with-active rounded-md px-4 py-2">
+        <div className="flex items-center gap-4">
+          <div className="flex flex-1 flex-col">
+            <Text size="small" leading="compact" weight="plus">
+              {labelKey}
+            </Text>
+            <Text size="small" leading="compact" className="text-ui-fg-subtle">
+              {descriptionKey}
+            </Text>
+          </div>
+          <div className="flex size-7 items-center justify-center">
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -1,9 +1,9 @@
 import { ReactNode } from "react"
 import { Link } from "react-router-dom"
 
-import { IconAvatar } from "../icon-avatar"
-import { Text } from "@medusajs/ui"
 import { TriangleRightMini } from "@medusajs/icons"
+import { Text } from "@medusajs/ui"
+import { IconAvatar } from "../icon-avatar"
 
 export interface SidebarLinkProps {
   to: string

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

@@ -6,13 +6,13 @@ import { Form } from "../../common/form"
 
 interface HeadlessControllerProps<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
->  extends Omit<ControllerProps<TFieldValues, TName>, "render"> {}
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> extends Omit<ControllerProps<TFieldValues, TName>, "render"> {}
 
 interface SwitchBoxProps<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> extends HeadlessControllerProps<TFieldValues, TName>{
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> extends HeadlessControllerProps<TFieldValues, TName> {
   label: string
   description: string
   optional?: boolean
@@ -26,13 +26,13 @@ interface SwitchBoxProps<
 
 /**
  * Wrapper for the Switch component to be used with `react-hook-form`.
- * 
+ *
  * Use this component whenever a design calls for wrapping the Switch component
  * in a container with a label and description.
  */
 export const SwitchBox = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
   label,
   description,
@@ -49,10 +49,14 @@ export const SwitchBox = <
           <Form.Item>
             <div className="bg-ui-bg-component shadow-elevation-card-rest flex items-start gap-x-3 rounded-lg p-3">
               <Form.Control>
-                <Switch {...field} checked={value} onCheckedChange={(e) => {
-                  onCheckedChange?.(e)
-                  onChange(e)
-                }} />
+                <Switch
+                  {...field}
+                  checked={value}
+                  onCheckedChange={(e) => {
+                    onCheckedChange?.(e)
+                    onChange(e)
+                  }}
+                />
               </Form.Control>
               <div>
                 <Form.Label optional={optional} tooltip={tooltip}>
@@ -67,4 +71,4 @@ export const SwitchBox = <
       }}
     />
   )
-}
+}

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

@@ -15,7 +15,7 @@ import {
   Text,
   useDataTable,
 } from "@medusajs/ui"
-import React, { ReactNode, useCallback, useState } from "react"
+import React, { ReactNode, useCallback, useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { Link, useNavigate, useSearchParams } from "react-router-dom"
 
@@ -110,7 +110,7 @@ export const DataTable = <TData,>({
   const enableCommands = commands && commands.length > 0
   const enableSorting = columns.some((column) => column.enableSorting)
 
-  const filterIds = filters?.map((f) => f.id) ?? []
+  const filterIds = useMemo(() => filters?.map((f) => f.id) ?? [], [filters])
   const prefixedFilterIds = filterIds.map((id) => getQueryParamKey(id, prefix))
 
   const { offset, order, q, ...filterParams } = useQueryParams(
@@ -124,9 +124,11 @@ export const DataTable = <TData,>({
   )
   const [_, setSearchParams] = useSearchParams()
 
-  const [search, setSearch] = useState<string>(q ?? "")
+  const search = useMemo(() => {
+    return q ?? ""
+  }, [q])
+
   const handleSearchChange = (value: string) => {
-    setSearch(value)
     setSearchParams((prev) => {
       if (value) {
         prev.set(getQueryParamKey("q", prefix), value)
@@ -138,11 +140,13 @@ export const DataTable = <TData,>({
     })
   }
 
-  const [pagination, setPagination] = useState<DataTablePaginationState>(
-    offset ? parsePaginationState(offset, pageSize) : { pageIndex: 0, pageSize }
-  )
+  const pagination: DataTablePaginationState = useMemo(() => {
+    return offset
+      ? parsePaginationState(offset, pageSize)
+      : { pageIndex: 0, pageSize }
+  }, [offset, pageSize])
+
   const handlePaginationChange = (value: DataTablePaginationState) => {
-    setPagination(value)
     setSearchParams((prev) => {
       if (value.pageIndex === 0) {
         prev.delete(getQueryParamKey("offset", prefix))
@@ -152,18 +156,16 @@ export const DataTable = <TData,>({
           transformPaginationState(value).toString()
         )
       }
-
       return prev
     })
   }
 
-  const [filtering, setFiltering] = useState<DataTableFilteringState>(
-    parseFilterState(filterIds, filterParams)
+  const filtering: DataTableFilteringState = useMemo(
+    () => parseFilterState(filterIds, filterParams),
+    [filterIds, filterParams]
   )
 
   const handleFilteringChange = (value: DataTableFilteringState) => {
-    setFiltering(value)
-
     setSearchParams((prev) => {
       Array.from(prev.keys()).forEach((key) => {
         if (prefixedFilterIds.includes(key) && !(key in value)) {
@@ -184,11 +186,11 @@ export const DataTable = <TData,>({
     })
   }
 
-  const [sorting, setSorting] = useState<DataTableSortingState | null>(
-    order ? parseSortingState(order) : null
-  )
+  const sorting: DataTableSortingState | null = useMemo(() => {
+    return order ? parseSortingState(order) : null
+  }, [order])
+
   const handleSortingChange = (value: DataTableSortingState) => {
-    setSorting(value)
     setSearchParams((prev) => {
       if (value) {
         const valueToStore = transformSortingState(value)

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

@@ -4,6 +4,7 @@ import {
   DropdownMenu,
   Heading,
   IconButton,
+  InlineTip,
   clx,
   toast,
 } from "@medusajs/ui"
@@ -21,7 +22,6 @@ import { FetchError } from "@medusajs/js-sdk"
 import { ComponentPropsWithoutRef, forwardRef } from "react"
 import { ConditionalTooltip } from "../../common/conditional-tooltip"
 import { Form } from "../../common/form"
-import { InlineTip } from "../../common/inline-tip"
 import { Skeleton } from "../../common/skeleton"
 import { RouteDrawer, useRouteModal } from "../../modals"
 import { KeyboundForm } from "../../utilities/keybound-form"
@@ -88,7 +88,7 @@ const InnerForm = <TRes,>({
   })
 
   const handleSubmit = form.handleSubmit(async (data) => {
-    const parsedData = parseValues(data)
+    const parsedData = parseValues(data, metadata)
 
     await hook(
       {
@@ -364,7 +364,8 @@ function getDefaultValues(
 }
 
 function parseValues(
-  values: z.infer<typeof MetadataSchema>
+  values: z.infer<typeof MetadataSchema>,
+  original?: Record<string, any> | null
 ): Record<string, any> | null {
   const metadata = values.metadata
 
@@ -378,12 +379,22 @@ function parseValues(
 
   const update: Record<string, any> = {}
 
+  // First, handle removed keys from original
+  if (original) {
+    Object.keys(original).forEach((originalKey) => {
+      const exists = metadata.some((field) => field.key === originalKey)
+      if (!exists) {
+        update[originalKey] = ""
+      }
+    })
+  }
+
   metadata.forEach((field) => {
     let key = field.key
     let value = field.value
     const disabled = field.disabled
 
-    if (!key || !value) {
+    if (!key) {
       return
     }
 
@@ -393,7 +404,7 @@ function parseValues(
     }
 
     key = key.trim()
-    value = value.trim()
+    value = value?.trim() ?? ""
 
     // We try to cast the value to a boolean or number if possible
     if (value === "true") {
@@ -401,9 +412,9 @@ function parseValues(
     } else if (value === "false") {
       update[key] = false
     } else {
-      const parsedNumber = parseFloat(value)
-      if (!isNaN(parsedNumber)) {
-        update[key] = parsedNumber
+      const isNumeric = /^-?\d*\.?\d+$/.test(value)
+      if (isNumeric) {
+        update[key] = parseFloat(value)
       } else {
         update[key] = value
       }

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

@@ -57,6 +57,7 @@ interface ComboboxProps<T extends Value = Value>
   isFetchingNextPage?: boolean
   onCreateOption?: (value: string) => void
   noResultsPlaceholder?: ReactNode
+  allowClear?: boolean
 }
 
 const ComboboxImpl = <T extends Value = string>(
@@ -72,6 +73,7 @@ const ComboboxImpl = <T extends Value = string>(
     isFetchingNextPage,
     onCreateOption,
     noResultsPlaceholder,
+    allowClear,
     ...inputProps
   }: ComboboxProps<T>,
   ref: ForwardedRef<HTMLInputElement>
@@ -195,7 +197,7 @@ const ComboboxImpl = <T extends Value = string>(
   const showTag = hasValue && isArrayValue
   const showSelected = showTag && !searchValue && !open
 
-  const hideInput = !isArrayValue && !open
+  const hideInput = !isArrayValue && hasValue && !open
   const selectedLabel = options.find((o) => o.value === selectedValues)?.label
 
   const hidePlaceholder = showSelected || open
@@ -303,6 +305,18 @@ const ComboboxImpl = <T extends Value = string>(
             {...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 right-[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 (

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

@@ -24,9 +24,9 @@ import { INavItem, NavItem } from "../../layout/nav-item"
 import { Shell } from "../../layout/shell"
 
 import { Link, useLocation, useNavigate } from "react-router-dom"
-import { useDashboardExtension } from "../../../extensions"
 import { useLogout } from "../../../hooks/api"
 import { queryClient } from "../../../lib/query-client"
+import { useExtension } from "../../../providers/extension-provider"
 import { useSearch } from "../../../providers/search-provider"
 import { UserMenu } from "../user-menu"
 
@@ -283,7 +283,7 @@ const Searchbar = () => {
 const CoreRouteSection = () => {
   const coreRoutes = useCoreRoutes()
 
-  const { getMenu } = useDashboardExtension()
+  const { getMenu } = useExtension()
 
   const menuItems = getMenu("coreExtensions")
 
@@ -308,7 +308,7 @@ const CoreRouteSection = () => {
 
 const ExtensionRouteSection = () => {
   const { t } = useTranslation()
-  const { getMenu } = useDashboardExtension()
+  const { getMenu } = useExtension()
 
   const menuItems = getMenu("coreExtensions").filter((item) => !item.nested)
 

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

@@ -130,7 +130,7 @@ export const NavItem = ({
       <NavItemTooltip to={to}>
         <NavLink
           to={to}
-          end
+          end={items?.some((i) => i.to === pathname)}
           state={
             from
               ? {

package/src/components/layout/notifications/notifications.tsx

@@ -66,6 +66,7 @@ export const Notifications = () => {
       <Drawer.Trigger asChild>
         <IconButton
           variant="transparent"
+          size="small"
           className="text-ui-fg-muted hover:text-ui-fg-subtle"
         >
           {hasUnread ? <BellAlertDone /> : <BellAlert />}

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

@@ -5,10 +5,9 @@ import { Fragment, useEffect, useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { Link, useLocation } from "react-router-dom"
 
+import { useExtension } from "../../../providers/extension-provider"
 import { INavItem, NavItem } from "../nav-item"
 import { Shell } from "../shell"
-
-import { useDashboardExtension } from "../../../extensions"
 import { UserMenu } from "../user-menu"
 
 export const SettingsLayout = () => {
@@ -114,7 +113,7 @@ const getSafeFromValue = (from: string) => {
 }
 
 const SettingsSidebar = () => {
-  const { getMenu } = useDashboardExtension()
+  const { getMenu } = useExtension()
 
   const routes = useSettingRoutes()
   const developerRoutes = useDeveloperRoutes()

package/src/components/modals/hooks/use-state-aware-to.tsx

@@ -0,0 +1,26 @@
+import { useMemo } from "react"
+import { Path, useLocation } from "react-router-dom"
+
+/**
+ * Checks if the current location has a restore_params property.
+ * If it does, it will return a new path with the params added to it.
+ * Otherwise, it will return the previous path.
+ *
+ * This is useful if the modal needs to return to the original path, with
+ * the params that were present when the modal was opened.
+ */
+export const useStateAwareTo = (prev: string | Partial<Path>) => {
+  const location = useLocation()
+
+  const to = useMemo(() => {
+    const params = location.state?.restore_params
+
+    if (!params) {
+      return prev
+    }
+
+    return `${prev}?${params.toString()}`
+  }, [location.state, prev])
+
+  return to
+}