@medusajs/dashboard 3.0.0-snapshot-20251211173847 → 3.0.0-snapshot-20251211181725

package/src/components/data-grid/components/data-grid-textarea-modal-cell.tsx

@@ -0,0 +1,233 @@
+import { clx, Textarea } from "@medusajs/ui"
+import { Popover as RadixPopover } from "radix-ui"
+import { useCallback, useEffect, useRef, useState } from "react"
+import { Controller, ControllerRenderProps } from "react-hook-form"
+
+import { useCombinedRefs } from "../../../hooks/use-combined-refs"
+import { useDataGridCell, useDataGridCellError } from "../hooks"
+import { useDataGridContext } from "../context"
+import { DataGridCellProps, InputProps, DataGridCellContext } from "../types"
+import { DataGridCellContainer } from "./data-grid-cell-container"
+
+type DataGridExpandableTextCellProps<TData, TValue = any> = DataGridCellProps<
+  TData,
+  TValue
+> & {
+  fieldLabel?: string
+}
+
+export const DataGridExpandableTextCell = <TData, TValue = any>({
+  context,
+  fieldLabel,
+}: DataGridExpandableTextCellProps<TData, TValue>) => {
+  const { field, control, renderProps } = useDataGridCell({
+    context,
+  })
+  const errorProps = useDataGridCellError({ context })
+
+  const { container, input } = renderProps
+
+  return (
+    <Controller
+      control={control}
+      name={field}
+      render={({ field }) => {
+        return (
+          <Inner
+            field={field}
+            inputProps={input}
+            fieldLabel={fieldLabel}
+            container={container}
+            errorProps={errorProps}
+          />
+        )
+      }}
+    />
+  )
+}
+
+const Inner = ({
+  field,
+  inputProps,
+  fieldLabel: _fieldLabel,
+  container,
+  errorProps,
+}: {
+  field: ControllerRenderProps<any, string>
+  inputProps: InputProps
+  fieldLabel?: string
+  container: any
+  errorProps: any
+}) => {
+  const { onChange: _, onBlur, ref, value, ...rest } = field
+  const { ref: inputRef, onBlur: onInputBlur, onChange, ...input } = inputProps
+  const { setSingleRange, anchor } = useDataGridContext()
+  const { row, col } = anchor || { row: 0, col: 0 }
+
+  const [localValue, setLocalValue] = useState(value || "")
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+  const [popoverValue, setPopoverValue] = useState(value || "")
+  const popoverContentRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    setLocalValue(value || "")
+  }, [value])
+
+  useEffect(() => {
+    if (isPopoverOpen) {
+      setPopoverValue(value || "")
+    }
+  }, [isPopoverOpen, value])
+
+  // Prevent DataGrid keyboard handlers from intercepting keys when popover is open
+  useEffect(() => {
+    if (!isPopoverOpen || !popoverContentRef.current) {
+      return
+    }
+
+    const handleKeyDownCapture = (e: KeyboardEvent) => {
+      const target = e.target as HTMLElement
+      const isTextarea = target.tagName === "TEXTAREA"
+      const isInPopover =
+        popoverContentRef.current && popoverContentRef.current.contains(target)
+
+      if (isTextarea || isInPopover) {
+        const dataGridKeys = [
+          "Enter",
+          "Delete",
+          "Backspace",
+          "ArrowUp",
+          "ArrowDown",
+          "ArrowLeft",
+          "ArrowRight",
+          "Tab",
+          " ",
+        ]
+
+        // Stop the keys from reaching DataGrid, so the textarea can handle them
+        if (dataGridKeys.includes(e.key) && e.key !== "Escape") {
+          e.stopImmediatePropagation()
+        }
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDownCapture, true)
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDownCapture, true)
+    }
+  }, [isPopoverOpen])
+
+  const combinedRefs = useCombinedRefs(inputRef, ref)
+
+  const handleOverlayMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.detail === 2) {
+        e.preventDefault()
+        e.stopPropagation()
+        setSingleRange({ row, col })
+        setIsPopoverOpen(true)
+        return
+      }
+      // For single clicks, use the normal handler which sets anchor and focuses container
+      container.overlayProps.onMouseDown?.(e)
+    },
+    [container.overlayProps, setSingleRange, row, col]
+  )
+
+  const customContainer = {
+    ...container,
+    overlayProps: {
+      ...container.overlayProps,
+      onMouseDown: handleOverlayMouseDown,
+    },
+  }
+
+  const handlePopoverSave = () => {
+    onChange(popoverValue, value)
+    setLocalValue(popoverValue)
+    setIsPopoverOpen(false)
+    onBlur()
+    onInputBlur()
+  }
+
+  const handlePopoverKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key !== "Escape") {
+      e.stopPropagation()
+    }
+  }, [])
+
+  const displayValue = localValue || ""
+  const truncatedValue =
+    displayValue.length > 50
+      ? `${displayValue.substring(0, 50)}...`
+      : displayValue
+
+  return (
+    <RadixPopover.Root
+      open={isPopoverOpen}
+      onOpenChange={(open) => {
+        if (!open) {
+          handlePopoverSave()
+        } else {
+          setIsPopoverOpen(true)
+        }
+      }}
+    >
+      <DataGridCellContainer {...customContainer} {...errorProps}>
+        <RadixPopover.Anchor asChild>
+          <div
+            className={clx(
+              "txt-compact-small text-ui-fg-subtle flex size-full cursor-pointer items-center justify-center bg-transparent outline-none",
+              "focus:cursor-text"
+            )}
+          >
+            <span className="w-full truncate text-center">
+              {truncatedValue}
+            </span>
+          </div>
+        </RadixPopover.Anchor>
+        <input
+          className="sr-only"
+          autoComplete="off"
+          tabIndex={-1}
+          value={localValue}
+          onChange={(e) => setLocalValue(e.target.value)}
+          ref={combinedRefs}
+          onBlur={() => {
+            onBlur()
+            onInputBlur()
+            onChange(localValue, value)
+          }}
+          {...input}
+          {...rest}
+        />
+      </DataGridCellContainer>
+      <RadixPopover.Portal>
+        <RadixPopover.Content
+          className={clx(
+            "bg-ui-bg-base shadow-elevation-flyout flex max-h-[80vh] w-[600px] overflow-hidden p-0 outline-none"
+          )}
+          align="start"
+          side="bottom"
+          sideOffset={-29}
+          alignOffset={-16}
+          collisionPadding={24}
+          onEscapeKeyDown={handlePopoverSave}
+          onKeyDown={handlePopoverKeyDown}
+        >
+          <div ref={popoverContentRef} className="h-full w-full">
+            <Textarea
+              value={popoverValue}
+              onChange={(e) => setPopoverValue(e.target.value)}
+              onKeyDown={(e) => {
+                e.stopPropagation()
+              }}
+              className="!bg-ui-bg-base h-full min-h-[300px] w-full resize-none border-0 p-4 !shadow-none focus-visible:!shadow-none"
+            />
+          </div>
+        </RadixPopover.Content>
+      </RadixPopover.Portal>
+    </RadixPopover.Root>
+  )
+}

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

@@ -5,3 +5,4 @@ export { DataGridReadonlyCell as DataGridReadOnlyCell } from "./data-grid-readon
 export { DataGridRoot, type DataGridRootProps } from "./data-grid-root"
 export { DataGridSkeleton } from "./data-grid-skeleton"
 export { DataGridTextCell } from "./data-grid-text-cell"
+export { DataGridExpandableTextCell } from "./data-grid-textarea-modal-cell"

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

@@ -8,6 +8,7 @@ import {
   DataGridRoot,
   DataGridSkeleton,
   DataGridTextCell,
+  DataGridExpandableTextCell,
   type DataGridRootProps,
 } from "./components"
 
@@ -35,6 +36,7 @@ const _DataGrid = <TData, TFieldValues extends FieldValues = FieldValues>({
 export const DataGrid = Object.assign(_DataGrid, {
   BooleanCell: DataGridBooleanCell,
   TextCell: DataGridTextCell,
+  ExpandableTextCell: DataGridExpandableTextCell,
   NumberCell: DataGridNumberCell,
   CurrencyCell: DataGridCurrencyCell,
   ReadonlyCell: DataGridReadOnlyCell,

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/dashboard-app/routes/get-route.map.tsx

@@ -300,12 +300,6 @@ export function getRouteMap({
                 {
                   path: "",
                   lazy: () => import("../../routes/orders/order-list"),
-                  children: [
-                    {
-                      path: "export",
-                      lazy: () => import("../../routes/orders/order-export"),
-                    },
-                  ],
                 },
                 {
                   path: ":id",
@@ -945,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 />,

package/src/hooks/api/index.ts

@@ -34,6 +34,7 @@ export * from "./store"
 export * from "./tags"
 export * from "./tax-rates"
 export * from "./tax-regions"
+export * from "./translations"
 export * from "./users"
 export * from "./views"
 export * from "./workflow-executions"

package/src/hooks/api/orders.tsx

@@ -10,8 +10,8 @@ import {
 import { sdk } from "../../lib/client"
 import { queryClient } from "../../lib/query-client"
 import { queryKeysFactory, TQueryKey } from "../../lib/query-key-factory"
-import { inventoryItemsQueryKeys } from "./inventory"
 import { reservationItemsQueryKeys } from "./reservations"
+import { inventoryItemsQueryKeys } from "./inventory"
 
 const ORDERS_QUERY_KEY = "orders" as const
 const _orderKeys = queryKeysFactory(ORDERS_QUERY_KEY) as TQueryKey<"orders"> & {
@@ -438,20 +438,3 @@ export const useUpdateOrderChange = (
     ...options,
   })
 }
-
-export const useExportOrders = (
-  query?: HttpTypes.AdminOrderFilters,
-  options?: UseMutationOptions<
-    { transaction_id: string },
-    FetchError,
-    HttpTypes.AdminOrderFilters
-  >
-) => {
-  return useMutation({
-    mutationFn: () => sdk.admin.order.export(query),
-    onSuccess: (data, variables, context) => {
-      options?.onSuccess?.(data, variables, context)
-    },
-    ...options,
-  })
-}

package/src/hooks/api/product-variants.tsx

@@ -2,6 +2,7 @@ import { QueryKey, useQuery, UseQueryOptions } from "@tanstack/react-query"
 import { sdk } from "../../lib/client"
 import { queryKeysFactory } from "../../lib/query-key-factory"
 import { FetchError } from "@medusajs/js-sdk"
+import { HttpTypes } from "@medusajs/types"
 
 const PRODUCT_VARIANT_QUERY_KEY = "product_variant" as const
 export const productVariantQueryKeys = queryKeysFactory(
@@ -11,7 +12,12 @@ export const productVariantQueryKeys = queryKeysFactory(
 export const useVariants = (
   query?: Record<string, any>,
   options?: Omit<
-    UseQueryOptions<any, FetchError, any, QueryKey>,
+    UseQueryOptions<
+      HttpTypes.AdminProductVariantListResponse,
+      FetchError,
+      HttpTypes.AdminProductVariantListResponse,
+      QueryKey
+    >,
     "queryFn" | "queryKey"
   >
 ) => {