@medusajs/dashboard 3.0.0-snapshot-20251216135612 → 3.0.0-snapshot-20260102125810

package/dist/{user-detail-BJUXLZZQ.mjs → user-detail-VMOJFHIJ.mjs}

@@ -18,8 +18,8 @@ import {
 } from "./chunk-5BQQRHQS.mjs";
 import {
   productsQueryKeys
-} from "./chunk-Z6BFNHEO.mjs";
-import "./chunk-HGRIOEAR.mjs";
+} from "./chunk-UCYUWNJL.mjs";
+import "./chunk-7AXHHXCX.mjs";
 import {
   queryClient
 } from "./chunk-FXYH54JP.mjs";

package/dist/{user-metadata-2WPJOEJA.mjs → user-metadata-UOPVFX2L.mjs}

@@ -12,37 +12,37 @@ import "./chunk-LPEUYMRK.mjs";
 import "./chunk-OC7BQLYI.mjs";
 import "./chunk-S4DMV3ZT.mjs";
 import "./chunk-OBQI23QM.mjs";
-import "./chunk-GRZSG4EP.mjs";
+import "./chunk-74WPAWMW.mjs";
 import "./chunk-I4OBEAOJ.mjs";
 import "./chunk-HI6URQ7H.mjs";
 import "./chunk-6CLQKVAU.mjs";
+import "./chunk-ML7BA2NY.mjs";
 import "./chunk-KI7TOXBR.mjs";
-import "./chunk-UJ2TMPV4.mjs";
-import "./chunk-23GTCEOV.mjs";
+import "./chunk-QBIQEVTU.mjs";
 import "./chunk-WAXMT4IY.mjs";
 import "./chunk-DYDGGABK.mjs";
-import "./chunk-LGNTHZ5Y.mjs";
 import "./chunk-CN7JXSGW.mjs";
+import "./chunk-LGNTHZ5Y.mjs";
 import {
   useUpdateUser,
   useUser
 } from "./chunk-5BQQRHQS.mjs";
-import "./chunk-HTCYX4VD.mjs";
+import "./chunk-G35UUG2P.mjs";
 import "./chunk-5AFMB7XQ.mjs";
-import "./chunk-UWY5ZV66.mjs";
+import "./chunk-VQ73B7ZZ.mjs";
 import "./chunk-A63RZVX6.mjs";
 import "./chunk-HBXV7ENS.mjs";
 import "./chunk-CDORR33H.mjs";
-import "./chunk-4JQR6QNW.mjs";
-import "./chunk-FYWHE3W5.mjs";
-import "./chunk-OSHH5GAS.mjs";
-import "./chunk-2XTBDCGE.mjs";
+import "./chunk-333HK6Y6.mjs";
+import "./chunk-GJN5SXGZ.mjs";
+import "./chunk-Q34TRFIW.mjs";
 import "./chunk-3BF5SC66.mjs";
+import "./chunk-DWH2OQFK.mjs";
 import "./chunk-VCSSQVPD.mjs";
 import "./chunk-HP2JH45P.mjs";
 import "./chunk-SQDIZZDW.mjs";
-import "./chunk-Z6BFNHEO.mjs";
-import "./chunk-HGRIOEAR.mjs";
+import "./chunk-UCYUWNJL.mjs";
+import "./chunk-7AXHHXCX.mjs";
 import "./chunk-FXYH54JP.mjs";
 import "./chunk-774WSTCC.mjs";
 import "./chunk-NFEK63OE.mjs";

package/dist/{workflow-execution-detail-H2AKEZJX.mjs → workflow-execution-detail-WAQ7IG4T.mjs}

@@ -20,37 +20,37 @@ import {
 import {
   useDocumentDirection
 } from "./chunk-S4DMV3ZT.mjs";
-import "./chunk-GRZSG4EP.mjs";
+import "./chunk-74WPAWMW.mjs";
 import "./chunk-I4OBEAOJ.mjs";
 import "./chunk-HI6URQ7H.mjs";
 import "./chunk-6CLQKVAU.mjs";
+import "./chunk-ML7BA2NY.mjs";
 import {
   useWorkflowExecution,
   workflowExecutionsQueryKeys
 } from "./chunk-KI7TOXBR.mjs";
-import "./chunk-UJ2TMPV4.mjs";
-import "./chunk-23GTCEOV.mjs";
+import "./chunk-QBIQEVTU.mjs";
 import "./chunk-WAXMT4IY.mjs";
 import "./chunk-DYDGGABK.mjs";
-import "./chunk-LGNTHZ5Y.mjs";
 import "./chunk-CN7JXSGW.mjs";
+import "./chunk-LGNTHZ5Y.mjs";
 import "./chunk-5BQQRHQS.mjs";
-import "./chunk-HTCYX4VD.mjs";
+import "./chunk-G35UUG2P.mjs";
 import "./chunk-5AFMB7XQ.mjs";
-import "./chunk-UWY5ZV66.mjs";
+import "./chunk-VQ73B7ZZ.mjs";
 import "./chunk-A63RZVX6.mjs";
 import "./chunk-HBXV7ENS.mjs";
 import "./chunk-CDORR33H.mjs";
-import "./chunk-4JQR6QNW.mjs";
-import "./chunk-FYWHE3W5.mjs";
-import "./chunk-OSHH5GAS.mjs";
-import "./chunk-2XTBDCGE.mjs";
+import "./chunk-333HK6Y6.mjs";
+import "./chunk-GJN5SXGZ.mjs";
+import "./chunk-Q34TRFIW.mjs";
 import "./chunk-3BF5SC66.mjs";
+import "./chunk-DWH2OQFK.mjs";
 import "./chunk-VCSSQVPD.mjs";
 import "./chunk-HP2JH45P.mjs";
 import "./chunk-SQDIZZDW.mjs";
-import "./chunk-Z6BFNHEO.mjs";
-import "./chunk-HGRIOEAR.mjs";
+import "./chunk-UCYUWNJL.mjs";
+import "./chunk-7AXHHXCX.mjs";
 import {
   queryClient
 } from "./chunk-FXYH54JP.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medusajs/dashboard",
-  "version": "3.0.0-snapshot-20251216135612",
+  "version": "3.0.0-snapshot-20260102125810",
   "scripts": {
     "generate:static": "node ./scripts/generate-currencies.js && prettier --write ./src/lib/currencies.ts",
     "dev": "../../../node_modules/.bin/vite",
@@ -46,10 +46,10 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "3.4.2",
-    "@medusajs/admin-shared": "3.0.0-snapshot-20251216135612",
-    "@medusajs/icons": "3.0.0-snapshot-20251216135612",
-    "@medusajs/js-sdk": "3.0.0-snapshot-20251216135612",
-    "@medusajs/ui": "4.0.31-snapshot-20251216135612",
+    "@medusajs/admin-shared": "3.0.0-snapshot-20260102125810",
+    "@medusajs/icons": "3.0.0-snapshot-20260102125810",
+    "@medusajs/js-sdk": "3.0.0-snapshot-20260102125810",
+    "@medusajs/ui": "4.0.32-snapshot-20260102125810",
     "@radix-ui/react-dialog": "1.1.4",
     "@radix-ui/react-dismissable-layer": "1.1.4",
     "@tanstack/react-query": "5.64.2",
@@ -80,10 +80,10 @@
     "zod": "3.25.76"
   },
   "devDependencies": {
-    "@medusajs/admin-shared": "3.0.0-snapshot-20251216135612",
-    "@medusajs/admin-vite-plugin": "3.0.0-snapshot-20251216135612",
-    "@medusajs/types": "3.0.0-snapshot-20251216135612",
-    "@medusajs/ui-preset": "3.0.0-snapshot-20251216135612"
+    "@medusajs/admin-shared": "3.0.0-snapshot-20260102125810",
+    "@medusajs/admin-vite-plugin": "3.0.0-snapshot-20260102125810",
+    "@medusajs/types": "3.0.0-snapshot-20260102125810",
+    "@medusajs/ui-preset": "3.0.0-snapshot-20260102125810"
   },
   "packageManager": "yarn@3.2.1"
 }

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

@@ -21,21 +21,18 @@ export const DataGridCellContainer = ({
   rowErrors,
   outerComponent,
   isMultiLine,
-}: DataGridCellContainerProps & DataGridErrorRenderProps<any> & { isMultiLine?: boolean }) => {
+}: DataGridCellContainerProps &
+  DataGridErrorRenderProps<any> & { isMultiLine?: boolean }) => {
   const error = get(errors, field)
   const hasError = !!error
 
   return (
-    <div
-      className={clx("group/container relative w-full", {
-        "h-full": !isMultiLine,
-      })}
-    >
+    <div className={clx("group/container relative h-full w-full")}>
       <div
         className={clx(
-          "bg-ui-bg-base group/cell relative flex w-full gap-x-2 px-4 py-2.5 outline-none",
+          "bg-ui-bg-base group/cell relative flex h-full w-full gap-x-2 px-4 py-2.5 outline-none",
           {
-            "h-full items-center": !isMultiLine,
+            "items-center": !isMultiLine,
             "items-start": isMultiLine,
             "bg-ui-tag-red-bg text-ui-tag-red-text":
               hasError && !isAnchor && !isSelected && !isDragSelected,
@@ -62,8 +59,8 @@ export const DataGridCellContainer = ({
           }}
         />
         <div
-          className={clx("relative z-[1] flex w-full", {
-            "h-full items-center justify-center": !isMultiLine,
+          className={clx("relative z-[1] flex h-full w-full", {
+            "items-center justify-center": !isMultiLine,
             "items-start": isMultiLine,
           })}
         >

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

@@ -0,0 +1,103 @@
+import { clx } from "@medusajs/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 { DataGridCellProps, InputProps } from "../types"
+import { DataGridCellContainer } from "./data-grid-cell-container"
+
+export const DataGridMultilineCell = <TData, TValue = any>({
+  context,
+}: DataGridCellProps<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 (
+          <DataGridCellContainer {...container} {...errorProps} isMultiLine>
+            <Inner field={field} inputProps={input} />
+          </DataGridCellContainer>
+        )
+      }}
+    />
+  )
+}
+
+const Inner = ({
+  field,
+  inputProps,
+}: {
+  field: ControllerRenderProps<any, string>
+  inputProps: InputProps
+}) => {
+  const { onChange: _, onBlur, ref, value, ...rest } = field
+  const { ref: inputRef, onBlur: onInputBlur, onChange, ...input } = inputProps
+
+  const [localValue, setLocalValue] = useState(value)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  useEffect(() => {
+    setLocalValue(value)
+  }, [value])
+
+  const combinedRefs = useCombinedRefs(inputRef, ref, textareaRef)
+
+  const adjustTextareaHeight = useCallback(() => {
+    const textarea = textareaRef.current
+    if (textarea) {
+      // Reset height to 0 to get accurate scrollHeight
+      textarea.style.height = "0px"
+      // Set the height to match content (minimum 24px for min visible height)
+      const newHeight = Math.max(textarea.scrollHeight, 24)
+      textarea.style.height = `${newHeight}px`
+    }
+  }, [])
+
+  // Adjust height when value changes
+  useEffect(() => {
+    adjustTextareaHeight()
+  }, [localValue, adjustTextareaHeight])
+
+  useEffect(() => {
+    // Immediate adjustment
+    adjustTextareaHeight()
+    // Delayed adjustment to handle any layout shifts
+    const timeoutId = setTimeout(adjustTextareaHeight, 50)
+    return () => clearTimeout(timeoutId)
+  }, [adjustTextareaHeight])
+
+  return (
+    <textarea
+      className={clx(
+        "txt-compact-small text-ui-fg-subtle flex w-full cursor-pointer bg-transparent outline-none",
+        "focus:cursor-text",
+        "resize-none overflow-hidden py-2"
+      )}
+      autoComplete="off"
+      tabIndex={-1}
+      value={localValue ?? ""}
+      onChange={(e) => {
+        setLocalValue(e.target.value)
+        adjustTextareaHeight()
+      }}
+      ref={combinedRefs}
+      onBlur={() => {
+        onBlur()
+        onInputBlur()
+        onChange(localValue, value)
+      }}
+      {...input}
+      {...rest}
+    />
+  )
+}
+

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

@@ -26,10 +26,7 @@ export const DataGridReadonlyCell = <TData, TValue = any>({
         "txt-compact-small text-ui-fg-subtle flex w-full cursor-not-allowed justify-between overflow-hidden px-4 py-2.5 outline-none",
         color === "muted" && "bg-ui-bg-subtle",
         color === "normal" && "bg-ui-bg-base",
-        {
-          "h-full items-center": !isMultiLine,
-          "items-start": isMultiLine,
-        }
+        "h-full items-center"
       )}
     >
       <div

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

@@ -64,6 +64,12 @@ export interface DataGridRootProps<
   onEditingChange?: (isEditing: boolean) => void
   disableInteractions?: boolean
   multiColumnSelection?: boolean
+  showColumnsDropdown?: boolean
+  /**
+   * Custom content to render in the header, positioned between the column visibility
+   * controls and the error/shortcuts section.
+   */
+  headerContent?: ReactNode
   /**
    * Lazy loading props - when totalRowCount is provided, the grid enters lazy loading mode.
    * In this mode, the virtualizer will size based on totalRowCount and trigger onFetchMore
@@ -123,10 +129,12 @@ export const DataGridRoot = <
   onEditingChange,
   disableInteractions,
   multiColumnSelection = false,
+  showColumnsDropdown = true,
   totalRowCount,
   onFetchMore,
   isFetchingMore,
   hasNextPage,
+  headerContent,
 }: DataGridRootProps<TData, TFieldValues>) => {
   // TODO: remove once everything is lazy loaded
   const isLazyMode = totalRowCount !== undefined
@@ -653,6 +661,7 @@ export const DataGridRoot = <
     <DataGridContext.Provider value={values}>
       <div className="bg-ui-bg-subtle flex size-full flex-col">
         <DataGridHeader
+          showColumnsDropdown={showColumnsDropdown}
           columnOptions={columnOptions}
           isDisabled={isColumsDisabled}
           onToggleColumn={handleToggleColumnVisibility}
@@ -661,6 +670,7 @@ export const DataGridRoot = <
           onResetColumns={handleResetColumns}
           isHighlighted={isHighlighted}
           onHeaderInteractionChange={handleHeaderInteractionChange}
+          headerContent={headerContent}
         />
         <div className="size-full overflow-hidden">
           <div
@@ -796,12 +806,14 @@ export const DataGridRoot = <
 type DataGridHeaderProps = {
   columnOptions: GridColumnOption[]
   isDisabled: boolean
+  showColumnsDropdown: boolean
   onToggleColumn: (index: number) => (value: boolean) => void
   onResetColumns: () => void
   isHighlighted: boolean
   errorCount: number
   onToggleErrorHighlighting: () => void
   onHeaderInteractionChange: (isActive: boolean) => void
+  headerContent?: ReactNode
 }
 
 const DataGridHeader = ({
@@ -813,6 +825,8 @@ const DataGridHeader = ({
   errorCount,
   onToggleErrorHighlighting,
   onHeaderInteractionChange,
+  showColumnsDropdown,
+  headerContent,
 }: DataGridHeaderProps) => {
   const [shortcutsOpen, setShortcutsOpen] = useState(false)
   const [columnsOpen, setColumnsOpen] = useState(false)
@@ -833,58 +847,61 @@ const DataGridHeader = ({
   }
   return (
     <div className="bg-ui-bg-base flex items-center justify-between border-b p-4">
-      <div className="flex items-center gap-x-2">
-        <DropdownMenu
-          dir={direction}
-          open={columnsOpen}
-          onOpenChange={handleColumnsOpenChange}
-        >
-          <ConditionalTooltip
-            showTooltip={isDisabled}
-            content={t("dataGrid.columns.disabled")}
-          >
-            <DropdownMenu.Trigger asChild disabled={isDisabled}>
-              <Button size="small" variant="secondary">
-                {hasChanged ? <AdjustmentsDone /> : <Adjustments />}
-                {t("dataGrid.columns.view")}
-              </Button>
-            </DropdownMenu.Trigger>
-          </ConditionalTooltip>
-          <DropdownMenu.Content>
-            {columnOptions.map((column, index) => {
-              const { checked, disabled, id, name } = column
-
-              if (disabled) {
-                return null
-              }
-
-              return (
-                <DropdownMenu.CheckboxItem
-                  key={id}
-                  checked={checked}
-                  onCheckedChange={onToggleColumn(index)}
-                  onSelect={(e) => e.preventDefault()}
-                >
-                  {name}
-                </DropdownMenu.CheckboxItem>
-              )
-            })}
-          </DropdownMenu.Content>
-        </DropdownMenu>
-        {hasChanged && (
-          <Button
-            size="small"
-            variant="transparent"
-            type="button"
-            onClick={onResetColumns}
-            className="text-ui-fg-muted hover:text-ui-fg-subtle"
-            data-id="reset-columns"
+      {showColumnsDropdown && (
+        <div className="flex items-center gap-x-2">
+          <DropdownMenu
+            dir={direction}
+            open={columnsOpen}
+            onOpenChange={handleColumnsOpenChange}
           >
-            {t("dataGrid.columns.resetToDefault")}
-          </Button>
-        )}
-      </div>
-      <div className="flex items-center gap-x-2">
+            <ConditionalTooltip
+              showTooltip={isDisabled}
+              content={t("dataGrid.columns.disabled")}
+            >
+              <DropdownMenu.Trigger asChild disabled={isDisabled}>
+                <Button size="small" variant="secondary">
+                  {hasChanged ? <AdjustmentsDone /> : <Adjustments />}
+                  {t("dataGrid.columns.view")}
+                </Button>
+              </DropdownMenu.Trigger>
+            </ConditionalTooltip>
+            <DropdownMenu.Content>
+              {columnOptions.map((column, index) => {
+                const { checked, disabled, id, name } = column
+
+                if (disabled) {
+                  return null
+                }
+
+                return (
+                  <DropdownMenu.CheckboxItem
+                    key={id}
+                    checked={checked}
+                    onCheckedChange={onToggleColumn(index)}
+                    onSelect={(e) => e.preventDefault()}
+                  >
+                    {name}
+                  </DropdownMenu.CheckboxItem>
+                )
+              })}
+            </DropdownMenu.Content>
+          </DropdownMenu>
+          {hasChanged && (
+            <Button
+              size="small"
+              variant="transparent"
+              type="button"
+              onClick={onResetColumns}
+              className="text-ui-fg-muted hover:text-ui-fg-subtle"
+              data-id="reset-columns"
+            >
+              {t("dataGrid.columns.resetToDefault")}
+            </Button>
+          )}
+        </div>
+      )}
+      {headerContent}
+      <div className="ml-auto flex items-center gap-x-2">
         {errorCount > 0 && (
           <Button
             size="small"

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

@@ -1,5 +1,5 @@
 import { clx } from "@medusajs/ui"
-import { useCallback, useEffect, useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { Controller, ControllerRenderProps } from "react-hook-form"
 
 import { useCombinedRefs } from "../../../hooks/use-combined-refs"
@@ -7,17 +7,9 @@ import { useDataGridCell, useDataGridCellError } from "../hooks"
 import { DataGridCellProps, InputProps } from "../types"
 import { DataGridCellContainer } from "./data-grid-cell-container"
 
-type DataGridTextCellProps<TData, TValue = any> = DataGridCellProps<
-  TData,
-  TValue
-> & {
-  isMultiLine?: boolean
-}
-
 export const DataGridTextCell = <TData, TValue = any>({
   context,
-  isMultiLine = false,
-}: DataGridTextCellProps<TData, TValue>) => {
+}: DataGridCellProps<TData, TValue>) => {
   const { field, control, renderProps } = useDataGridCell({
     context,
   })
@@ -31,12 +23,8 @@ export const DataGridTextCell = <TData, TValue = any>({
       name={field}
       render={({ field }) => {
         return (
-          <DataGridCellContainer
-            {...container}
-            {...errorProps}
-            isMultiLine={isMultiLine}
-          >
-            <Inner field={field} inputProps={input} isMultiLine={isMultiLine} />
+          <DataGridCellContainer {...container} {...errorProps}>
+            <Inner field={field} inputProps={input} />
           </DataGridCellContainer>
         )
       }}
@@ -47,79 +35,21 @@ export const DataGridTextCell = <TData, TValue = any>({
 const Inner = ({
   field,
   inputProps,
-  isMultiLine,
 }: {
   field: ControllerRenderProps<any, string>
   inputProps: InputProps
-  isMultiLine: boolean
 }) => {
   const { onChange: _, onBlur, ref, value, ...rest } = field
   const { ref: inputRef, onBlur: onInputBlur, onChange, ...input } = inputProps
 
   const [localValue, setLocalValue] = useState(value)
-  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const inputElRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
     setLocalValue(value)
   }, [value])
 
-  const combinedRefs = useCombinedRefs(inputRef, ref)
-  const textareaCombinedRefs = useCombinedRefs(inputRef, ref, textareaRef)
-
-  const adjustTextareaHeight = useCallback(() => {
-    const textarea = textareaRef.current
-    if (textarea) {
-      // Reset height to 0 to get accurate scrollHeight
-      textarea.style.height = "0px"
-      // Set the height to match content (minimum 24px for min visible height)
-      const newHeight = Math.max(textarea.scrollHeight, 24)
-      textarea.style.height = `${newHeight}px`
-    }
-  }, [])
-
-  // Adjust height when value changes
-  useEffect(() => {
-    if (isMultiLine) {
-      adjustTextareaHeight()
-    }
-  }, [localValue, isMultiLine, adjustTextareaHeight])
-
-  useEffect(() => {
-    if (isMultiLine) {
-      // Immediate adjustment
-      adjustTextareaHeight()
-      // Delayed adjustment to handle any layout shifts
-      const timeoutId = setTimeout(adjustTextareaHeight, 50)
-      return () => clearTimeout(timeoutId)
-    }
-  }, [isMultiLine, adjustTextareaHeight])
-
-  if (isMultiLine) {
-    return (
-      <textarea
-        className={clx(
-          "txt-compact-small text-ui-fg-subtle flex w-full cursor-pointer bg-transparent outline-none",
-          "focus:cursor-text",
-          "resize-none overflow-hidden py-2"
-        )}
-        autoComplete="off"
-        tabIndex={-1}
-        value={localValue ?? ""}
-        onChange={(e) => {
-          setLocalValue(e.target.value)
-          adjustTextareaHeight()
-        }}
-        ref={textareaCombinedRefs}
-        onBlur={() => {
-          onBlur()
-          onInputBlur()
-          onChange(localValue, value)
-        }}
-        {...input}
-        {...rest}
-      />
-    )
-  }
+  const combinedRefs = useCombinedRefs(inputRef, ref, inputElRef)
 
   return (
     <input

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

@@ -1,5 +1,6 @@
 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"

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

@@ -3,6 +3,7 @@ import { FieldValues } from "react-hook-form"
 import {
   DataGridBooleanCell,
   DataGridCurrencyCell,
+  DataGridMultilineCell,
   DataGridNumberCell,
   DataGridReadOnlyCell,
   DataGridRoot,
@@ -47,6 +48,7 @@ const _DataGrid = <TData, TFieldValues extends FieldValues = FieldValues>({
 export const DataGrid = Object.assign(_DataGrid, {
   BooleanCell: DataGridBooleanCell,
   TextCell: DataGridTextCell,
+  MultilineCell: DataGridMultilineCell,
   ExpandableTextCell: DataGridExpandableTextCell,
   NumberCell: DataGridNumberCell,
   CurrencyCell: DataGridCurrencyCell,

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)

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}".`)