@medusajs/dashboard 2.12.3-preview-20251217090412 → 2.12.3-preview-20251217123836

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

@@ -1,7 +1,9 @@
 export { DataGridBooleanCell } from "./data-grid-boolean-cell"
 export { DataGridCurrencyCell } from "./data-grid-currency-cell"
+export { DataGridMultilineCell } from "./data-grid-multiline-cell"
 export { DataGridNumberCell } from "./data-grid-number-cell"
 export { DataGridReadonlyCell as DataGridReadOnlyCell } from "./data-grid-readonly-cell"
 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

@@ -3,11 +3,13 @@ import { FieldValues } from "react-hook-form"
 import {
   DataGridBooleanCell,
   DataGridCurrencyCell,
+  DataGridMultilineCell,
   DataGridNumberCell,
   DataGridReadOnlyCell,
   DataGridRoot,
   DataGridSkeleton,
   DataGridTextCell,
+  DataGridExpandableTextCell,
   type DataGridRootProps,
 } from "./components"
 
@@ -18,6 +20,11 @@ interface DataGridProps<TData, TFieldValues extends FieldValues = FieldValues>
 
 const _DataGrid = <TData, TFieldValues extends FieldValues = FieldValues>({
   isLoading,
+  // Lazy loading props - passed through to DataGridRoot
+  totalRowCount,
+  onFetchMore,
+  isFetchingMore,
+  hasNextPage,
   ...props
 }: DataGridProps<TData, TFieldValues>) => {
   return isLoading ? (
@@ -28,13 +35,21 @@ const _DataGrid = <TData, TFieldValues extends FieldValues = FieldValues>({
       }
     />
   ) : (
-    <DataGridRoot {...props} />
+    <DataGridRoot
+      {...props}
+      totalRowCount={totalRowCount}
+      onFetchMore={onFetchMore}
+      isFetchingMore={isFetchingMore}
+      hasNextPage={hasNextPage}
+    />
   )
 }
 
 export const DataGrid = Object.assign(_DataGrid, {
   BooleanCell: DataGridBooleanCell,
   TextCell: DataGridTextCell,
+  MultilineCell: DataGridMultilineCell,
+  ExpandableTextCell: DataGridExpandableTextCell,
   NumberCell: DataGridNumberCell,
   CurrencyCell: DataGridCurrencyCell,
   ReadonlyCell: DataGridReadOnlyCell,

package/src/components/data-grid/helpers/create-data-grid-column-helper.ts

@@ -36,6 +36,18 @@ type DataGridHelperColumnsProps<TData, TFieldValues extends FieldValues> = {
    * @default false
    */
   disableHiding?: boolean
+  /**
+   * The size of the column in pixels.
+   */
+  size?: number
+  /**
+   * The minimum size of the column in pixels.
+   */
+  minSize?: number
+  /**
+   * The maximum size of the column in pixels.
+   */
+  maxSize?: number
 } & (
   | {
       field: FieldFunction<TData, TFieldValues>
@@ -59,12 +71,18 @@ export function createDataGridHelper<
       disableHiding = false,
       field,
       type,
+      size,
+      minSize,
+      maxSize,
     }: DataGridHelperColumnsProps<TData, TFieldValues>) =>
       columnHelper.display({
         id,
         header,
         cell,
         enableHiding: !disableHiding,
+        size,
+        minSize,
+        maxSize,
         meta: {
           name,
           field,

package/src/components/data-grid/hooks/use-data-grid-cell.tsx

@@ -128,6 +128,7 @@ export const useDataGridCell = <TData, TValue>({
         case "number":
           return numberCharacterRegex.test(key)
         case "text":
+        case "multiline-text":
           return textCharacterRegex.test(key)
         default:
           // KeyboardEvents should not be forwareded to other types of cells
@@ -180,6 +181,17 @@ export const useDataGridCell = <TData, TValue>({
         )?.set
         nativeInputValueSetter?.call(inputRef.current, e.key)
 
+        const event = new Event("input", { bubbles: true })
+        inputRef.current.dispatchEvent(event)
+      } else if (inputRef.current instanceof HTMLTextAreaElement) {
+        inputRef.current.value = ""
+
+        const nativeTextAreaValueSetter = Object.getOwnPropertyDescriptor(
+          window.HTMLTextAreaElement.prototype,
+          "value"
+        )?.set
+        nativeTextAreaValueSetter?.call(inputRef.current, e.key)
+
         // Trigger input event to notify react-hook-form
         const event = new Event("input", { bubbles: true })
         inputRef.current.dispatchEvent(event)
@@ -202,7 +214,7 @@ export const useDataGridCell = <TData, TValue>({
 
   useEffect(() => {
     if (isAnchor && !containerRef.current?.contains(document.activeElement)) {
-      containerRef.current?.focus()
+      containerRef.current?.focus({ preventScroll: true })
     }
   }, [isAnchor])
 

package/src/components/data-grid/hooks/use-data-grid-form-handlers.tsx

@@ -228,6 +228,7 @@ export function convertArrayToPrimitive(
     case "boolean":
       return values.map(convertToBoolean)
     case "text":
+    case "multiline-text":
       return values.map(covertToString)
     default:
       throw new Error(`Unsupported target type "${type}".`)

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/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,6 +20,7 @@ export const SettingsLayout = () => {
 }
 
 const useSettingRoutes = (): INavItem[] => {
+  const isTranslationsEnabled = useFeatureFlag("translation")
   const { t } = useTranslation()
 
   return useMemo(
@@ -63,8 +65,16 @@ const useSettingRoutes = (): INavItem[] => {
         label: t("stockLocations.domain"),
         to: "/settings/locations",
       },
+      ...(isTranslationsEnabled
+        ? [
+            {
+              label: t("translations.domain"),
+              to: "/settings/translations",
+            },
+          ]
+        : []),
     ],
-    [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

@@ -1840,6 +1840,29 @@ export function getRouteMap({
                 },
               ],
             },
+            {
+              path: "translations",
+              errorElement: <ErrorBoundary />,
+              handle: {
+                breadcrumb: () => t("translations.domain"),
+              },
+              children: [
+                {
+                  path: "",
+                  lazy: () =>
+                    import("../../routes/translations/translation-list"),
+                },
+                {
+                  path: "edit",
+                  lazy: () =>
+                    import("../../routes/translations/translations-edit"),
+                },
+                {
+                  path: "add-locales",
+                  lazy: () => import("../../routes/translations/add-locales"),
+                },
+              ],
+            },
             ...(settingsRoutes?.[0]?.children || []),
           ],
         },