@medusajs/dashboard 2.12.3-preview-20251217120154 → 2.12.3-snapshot-20251216185234

package/dist/{chunk-W7SLPIO2.mjs → chunk-LZFWCKOF.mjs}

@@ -251,6 +251,15 @@ var useDataGridCell = ({
         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);
+        const event = new Event("input", { bubbles: true });
+        inputRef.current.dispatchEvent(event);
       }
       e.stopPropagation();
       e.preventDefault();
@@ -265,7 +274,7 @@ var useDataGridCell = ({
   }, [type]);
   useEffect(() => {
     if (isAnchor && !containerRef.current?.contains(document.activeElement)) {
-      containerRef.current?.focus();
+      containerRef.current?.focus({ preventScroll: true });
     }
   }, [isAnchor]);
   const renderProps = {
@@ -1510,6 +1519,7 @@ var useDataGridKeydownEvent = ({
           break;
         case "number":
         case "text":
+        case "multiline-text":
           handleSpaceKeyTextOrNumber(anchor);
           break;
       }
@@ -1570,6 +1580,19 @@ var useDataGridKeydownEvent = ({
     },
     [handleMoveOnEnter, handleEditOnEnter, isEditing]
   );
+  const handleEnterKeyMultilineText = useCallback9(
+    (e, anchor2) => {
+      if (isEditing) {
+        if (e.shiftKey) {
+          return;
+        }
+        handleMoveOnEnter(e, anchor2);
+        return;
+      }
+      handleEditOnEnter(anchor2);
+    },
+    [handleMoveOnEnter, handleEditOnEnter, isEditing]
+  );
   const handleEnterKeyBoolean = useCallback9(
     (e, anchor2) => {
       const field = matrix.getCellField(anchor2);
@@ -1603,9 +1626,15 @@ var useDataGridKeydownEvent = ({
       if (!anchor) {
         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":
@@ -1617,7 +1646,14 @@ var useDataGridKeydownEvent = ({
         }
       }
     },
-    [anchor, matrix, handleEnterKeyTextOrNumber, handleEnterKeyBoolean]
+    [
+      anchor,
+      matrix,
+      isEditing,
+      handleEnterKeyTextOrNumber,
+      handleEnterKeyBoolean,
+      handleEnterKeyMultilineText
+    ]
   );
   const handleDeleteKeyTogglableNumber = useCallback9(
     (anchor2, rangeEnd2) => {
@@ -1680,6 +1716,7 @@ var useDataGridKeydownEvent = ({
       }
       switch (type) {
         case "text":
+        case "multiline-text":
         case "number":
           handleDeleteKeyTextOrNumber(anchor, rangeEnd);
           break;
@@ -2015,17 +2052,20 @@ var DataGridCellContainer = ({
   children,
   errors,
   rowErrors,
-  outerComponent
+  outerComponent,
+  isMultiLine
 }) => {
   const error = get2(errors, field);
   const hasError = !!error;
-  return /* @__PURE__ */ jsxs3("div", { className: "group/container relative size-full", children: [
+  return /* @__PURE__ */ jsxs3("div", { className: clx("group/container relative h-full w-full"), children: [
     /* @__PURE__ */ jsxs3(
       "div",
       {
         className: clx(
-          "bg-ui-bg-base group/cell relative flex size-full items-center 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",
           {
+            "items-center": !isMultiLine,
+            "items-start": isMultiLine,
             "bg-ui-tag-red-bg text-ui-tag-red-text": hasError && !isAnchor && !isSelected && !isDragSelected,
             "ring-ui-bg-interactive ring-2 ring-inset": isAnchor,
             "bg-ui-bg-highlight [&:has([data-field]:focus)]:bg-ui-bg-base": isSelected || isAnchor,
@@ -2045,7 +2085,16 @@ var DataGridCellContainer = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx3("div", { className: "relative z-[1] flex size-full items-center justify-center", children: /* @__PURE__ */ jsx3(RenderChildren, { isAnchor, placeholder, children }) }),
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              className: clx("relative z-[1] flex h-full w-full", {
+                "items-center justify-center": !isMultiLine,
+                "items-start": isMultiLine
+              }),
+              children: /* @__PURE__ */ jsx3(RenderChildren, { isAnchor, placeholder, children })
+            }
+          ),
           /* @__PURE__ */ jsx3(DataGridRowErrorIndicator, { rowErrors }),
           showOverlay && /* @__PURE__ */ jsx3(
             "div",
@@ -2230,14 +2279,13 @@ var Inner2 = ({
   ] });
 };
 
-// src/components/data-grid/components/data-grid-number-cell.tsx
+// src/components/data-grid/components/data-grid-multiline-cell.tsx
 import { clx as clx2 } from "@medusajs/ui";
-import { useEffect as useEffect4, useState as useState5 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
 import { Controller as Controller3 } from "react-hook-form";
 import { jsx as jsx6 } from "react/jsx-runtime";
-var DataGridNumberCell = ({
-  context,
-  ...rest
+var DataGridMultilineCell = ({
+  context
 }) => {
   const { field, control, renderProps } = useDataGridCell({
     context
@@ -2250,12 +2298,92 @@ var DataGridNumberCell = ({
       control,
       name: field,
       render: ({ field: field2 }) => {
-        return /* @__PURE__ */ jsx6(DataGridCellContainer, { ...container, ...errorProps, children: /* @__PURE__ */ jsx6(Inner3, { field: field2, inputProps: input, ...rest }) });
+        return /* @__PURE__ */ jsx6(DataGridCellContainer, { ...container, ...errorProps, isMultiLine: true, children: /* @__PURE__ */ jsx6(Inner3, { field: field2, inputProps: input }) });
       }
     }
   );
 };
 var Inner3 = ({
+  field,
+  inputProps
+}) => {
+  const { onChange: _, onBlur, ref, value, ...rest } = field;
+  const { ref: inputRef, onBlur: onInputBlur, onChange, ...input } = inputProps;
+  const [localValue, setLocalValue] = useState5(value);
+  const textareaRef = useRef3(null);
+  useEffect4(() => {
+    setLocalValue(value);
+  }, [value]);
+  const combinedRefs = useCombinedRefs(inputRef, ref, textareaRef);
+  const adjustTextareaHeight = useCallback13(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = "0px";
+      const newHeight = Math.max(textarea.scrollHeight, 24);
+      textarea.style.height = `${newHeight}px`;
+    }
+  }, []);
+  useEffect4(() => {
+    adjustTextareaHeight();
+  }, [localValue, adjustTextareaHeight]);
+  useEffect4(() => {
+    adjustTextareaHeight();
+    const timeoutId = setTimeout(adjustTextareaHeight, 50);
+    return () => clearTimeout(timeoutId);
+  }, [adjustTextareaHeight]);
+  return /* @__PURE__ */ jsx6(
+    "textarea",
+    {
+      className: clx2(
+        "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
+    }
+  );
+};
+
+// src/components/data-grid/components/data-grid-number-cell.tsx
+import { clx as clx3 } from "@medusajs/ui";
+import { useEffect as useEffect5, useState as useState6 } from "react";
+import { Controller as Controller4 } from "react-hook-form";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var DataGridNumberCell = ({
+  context,
+  ...rest
+}) => {
+  const { field, control, renderProps } = useDataGridCell({
+    context
+  });
+  const errorProps = useDataGridCellError({ context });
+  const { container, input } = renderProps;
+  return /* @__PURE__ */ jsx7(
+    Controller4,
+    {
+      control,
+      name: field,
+      render: ({ field: field2 }) => {
+        return /* @__PURE__ */ jsx7(DataGridCellContainer, { ...container, ...errorProps, children: /* @__PURE__ */ jsx7(Inner4, { field: field2, inputProps: input, ...rest }) });
+      }
+    }
+  );
+};
+var Inner4 = ({
   field,
   inputProps,
   ...props
@@ -2268,12 +2396,12 @@ var Inner3 = ({
     onFocus,
     ...attributes
   } = inputProps;
-  const [localValue, setLocalValue] = useState5(value);
-  useEffect4(() => {
+  const [localValue, setLocalValue] = useState6(value);
+  useEffect5(() => {
     setLocalValue(value);
   }, [value]);
   const combinedRefs = useCombinedRefs(inputRef, ref);
-  return /* @__PURE__ */ jsx6("div", { className: "size-full", children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7("div", { className: "size-full", children: /* @__PURE__ */ jsx7(
     "input",
     {
       ref: combinedRefs,
@@ -2287,7 +2415,7 @@ var Inner3 = ({
       onFocus,
       type: "number",
       inputMode: "decimal",
-      className: clx2(
+      className: clx3(
         "txt-compact-small size-full bg-transparent outline-none",
         "placeholder:text-ui-fg-muted"
       ),
@@ -2300,25 +2428,36 @@ var Inner3 = ({
 };
 
 // src/components/data-grid/components/data-grid-readonly-cell.tsx
-import { clx as clx3 } from "@medusajs/ui";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { clx as clx4 } from "@medusajs/ui";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var DataGridReadonlyCell = ({
   context,
   color = "muted",
-  children
+  children,
+  isMultiLine = false
 }) => {
   const { rowErrors } = useDataGridCellError({ context });
   return /* @__PURE__ */ jsxs5(
     "div",
     {
-      className: clx3(
-        "txt-compact-small text-ui-fg-subtle flex size-full cursor-not-allowed items-center justify-between overflow-hidden px-4 py-2.5 outline-none",
+      className: clx4(
+        "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"
+        color === "normal" && "bg-ui-bg-base",
+        "h-full items-center"
       ),
       children: [
-        /* @__PURE__ */ jsx7("div", { className: "flex-1 truncate", children }),
-        /* @__PURE__ */ jsx7(DataGridRowErrorIndicator, { rowErrors })
+        /* @__PURE__ */ jsx8(
+          "div",
+          {
+            className: clx4("flex-1", {
+              truncate: !isMultiLine,
+              "whitespace-pre-wrap break-words": isMultiLine
+            }),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx8(DataGridRowErrorIndicator, { rowErrors })
       ]
     }
   );
@@ -2330,30 +2469,32 @@ import {
   AdjustmentsDone,
   ExclamationCircle as ExclamationCircle2
 } from "@medusajs/icons";
-import { Button as Button2, DropdownMenu, clx as clx5 } from "@medusajs/ui";
+import { Button as Button2, DropdownMenu, clx as clx6 } from "@medusajs/ui";
 import {
   flexRender,
   getCoreRowModel,
   useReactTable
 } from "@tanstack/react-table";
-import { useVirtualizer } from "@tanstack/react-virtual";
 import {
-  useCallback as useCallback14,
-  useEffect as useEffect5,
+  useVirtualizer
+} from "@tanstack/react-virtual";
+import {
+  useCallback as useCallback15,
+  useEffect as useEffect6,
   useMemo as useMemo5,
-  useRef as useRef3,
-  useState as useState8
+  useRef as useRef4,
+  useState as useState9
 } from "react";
 import { useTranslation as useTranslation3 } from "react-i18next";
 
 // src/hooks/use-command-history.tsx
-import { useCallback as useCallback13, useState as useState6 } from "react";
+import { useCallback as useCallback14, useState as useState7 } from "react";
 var useCommandHistory = (maxHistory = 20) => {
-  const [past, setPast] = useState6([]);
-  const [future, setFuture] = useState6([]);
+  const [past, setPast] = useState7([]);
+  const [future, setFuture] = useState7([]);
   const canUndo = past.length > 0;
   const canRedo = future.length > 0;
-  const undo = useCallback13(() => {
+  const undo = useCallback14(() => {
     if (!canUndo) {
       return;
     }
@@ -2363,7 +2504,7 @@ var useCommandHistory = (maxHistory = 20) => {
     setPast(newPast);
     setFuture([previous, ...future.slice(0, maxHistory - 1)]);
   }, [canUndo, future, past, maxHistory]);
-  const redo = useCallback13(() => {
+  const redo = useCallback14(() => {
     if (!canRedo) {
       return;
     }
@@ -2373,7 +2514,7 @@ var useCommandHistory = (maxHistory = 20) => {
     setPast([...past, next].slice(0, maxHistory - 1));
     setFuture(newFuture);
   }, [canRedo, future, past, maxHistory]);
-  const execute = useCallback13(
+  const execute = useCallback14(
     (command) => {
       command.execute();
       setPast((past2) => [...past2, command].slice(0, maxHistory - 1));
@@ -2394,7 +2535,7 @@ var useCommandHistory = (maxHistory = 20) => {
 import { XMark } from "@medusajs/icons";
 import {
   Button,
-  clx as clx4,
+  clx as clx5,
   Heading,
   IconButton,
   Input,
@@ -2402,9 +2543,9 @@ import {
   Text
 } from "@medusajs/ui";
 import { Dialog as RadixDialog } from "radix-ui";
-import { useMemo as useMemo4, useState as useState7 } from "react";
+import { useMemo as useMemo4, useState as useState8 } from "react";
 import { useTranslation as useTranslation2 } from "react-i18next";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var useDataGridShortcuts = () => {
   const { t } = useTranslation2();
   const shortcuts = useMemo4(
@@ -2552,7 +2693,7 @@ var DataGridKeyboardShortcutModal = ({
   onOpenChange
 }) => {
   const { t } = useTranslation2();
-  const [searchValue, onSearchValueChange] = useState7("");
+  const [searchValue, onSearchValueChange] = useState8("");
   const shortcuts = useDataGridShortcuts();
   const searchResults = useMemo4(() => {
     return shortcuts.filter(
@@ -2560,12 +2701,12 @@ var DataGridKeyboardShortcutModal = ({
     );
   }, [searchValue, shortcuts]);
   return /* @__PURE__ */ jsxs6(RadixDialog.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsx8(RadixDialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsx8(Button, { size: "small", variant: "secondary", children: t("dataGrid.shortcuts.label") }) }),
+    /* @__PURE__ */ jsx9(RadixDialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsx9(Button, { size: "small", variant: "secondary", children: t("dataGrid.shortcuts.label") }) }),
     /* @__PURE__ */ jsxs6(RadixDialog.Portal, { children: [
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(
         RadixDialog.Overlay,
         {
-          className: clx4(
+          className: clx5(
             "bg-ui-bg-overlay fixed inset-0",
             "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
           )
@@ -2575,15 +2716,15 @@ var DataGridKeyboardShortcutModal = ({
         /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-y-3 px-6 py-4", children: [
           /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ jsxs6("div", { children: [
-              /* @__PURE__ */ jsx8(RadixDialog.Title, { asChild: true, children: /* @__PURE__ */ jsx8(Heading, { children: t("app.menus.user.shortcuts") }) }),
-              /* @__PURE__ */ jsx8(RadixDialog.Description, { className: "sr-only" })
+              /* @__PURE__ */ jsx9(RadixDialog.Title, { asChild: true, children: /* @__PURE__ */ jsx9(Heading, { children: t("app.menus.user.shortcuts") }) }),
+              /* @__PURE__ */ jsx9(RadixDialog.Description, { className: "sr-only" })
             ] }),
             /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-x-2", children: [
-              /* @__PURE__ */ jsx8(Kbd, { children: "esc" }),
-              /* @__PURE__ */ jsx8(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx8(IconButton, { variant: "transparent", size: "small", children: /* @__PURE__ */ jsx8(XMark, {}) }) })
+              /* @__PURE__ */ jsx9(Kbd, { children: "esc" }),
+              /* @__PURE__ */ jsx9(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx9(IconButton, { variant: "transparent", size: "small", children: /* @__PURE__ */ jsx9(XMark, {}) }) })
             ] })
           ] }),
-          /* @__PURE__ */ jsx8("div", { children: /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9("div", { children: /* @__PURE__ */ jsx9(
             Input,
             {
               type: "search",
@@ -2593,15 +2734,15 @@ var DataGridKeyboardShortcutModal = ({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsx8("div", { className: "flex flex-col divide-y overflow-y-auto", children: searchResults.map((shortcut, index) => {
+        /* @__PURE__ */ jsx9("div", { className: "flex flex-col divide-y overflow-y-auto", children: searchResults.map((shortcut, index) => {
           return /* @__PURE__ */ jsxs6(
             "div",
             {
               className: "text-ui-fg-subtle flex items-center justify-between px-6 py-3",
               children: [
-                /* @__PURE__ */ jsx8(Text, { size: "small", children: shortcut.label }),
-                /* @__PURE__ */ jsx8("div", { className: "flex items-center gap-x-1", children: shortcut.keys.Mac?.map((key, index2) => {
-                  return /* @__PURE__ */ jsx8("div", { className: "flex items-center gap-x-1", children: /* @__PURE__ */ jsx8(Kbd, { children: key }) }, index2);
+                /* @__PURE__ */ jsx9(Text, { size: "small", children: shortcut.label }),
+                /* @__PURE__ */ jsx9("div", { className: "flex items-center gap-x-1", children: shortcut.keys.Mac?.map((key, index2) => {
+                  return /* @__PURE__ */ jsx9("div", { className: "flex items-center gap-x-1", children: /* @__PURE__ */ jsx9(Kbd, { children: key }) }, index2);
                 }) })
               ]
             },
@@ -2614,7 +2755,7 @@ var DataGridKeyboardShortcutModal = ({
 };
 
 // src/components/data-grid/components/data-grid-root.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var ROW_HEIGHT = 40;
 var getCommonPinningStyles = (column) => {
   const isPinned = column.getIsPinned();
@@ -2637,9 +2778,16 @@ var DataGridRoot = ({
   getSubRows,
   onEditingChange,
   disableInteractions,
-  multiColumnSelection = false
+  multiColumnSelection = false,
+  showColumnsDropdown = true,
+  totalRowCount,
+  onFetchMore,
+  isFetchingMore,
+  hasNextPage,
+  headerContent
 }) => {
-  const containerRef = useRef3(null);
+  const isLazyMode = totalRowCount !== void 0;
+  const containerRef = useRef4(null);
   const { redo, undo, execute } = useCommandHistory();
   const {
     register,
@@ -2648,16 +2796,16 @@ var DataGridRoot = ({
     setValue: setValue2,
     formState: { errors }
   } = state;
-  const [internalTrapActive, setTrapActive] = useState8(true);
+  const [internalTrapActive, setTrapActive] = useState9(true);
   const trapActive = !disableInteractions && internalTrapActive;
-  const [anchor, setAnchor] = useState8(null);
-  const [rangeEnd, setRangeEnd] = useState8(null);
-  const [dragEnd, setDragEnd] = useState8(null);
-  const [isSelecting, setIsSelecting] = useState8(false);
-  const [isDragging, setIsDragging] = useState8(false);
-  const [isEditing, setIsEditing] = useState8(false);
-  const [columnVisibility, setColumnVisibility] = useState8({});
-  const [rowVisibility, setRowVisibility] = useState8({});
+  const [anchor, setAnchor] = useState9(null);
+  const [rangeEnd, setRangeEnd] = useState9(null);
+  const [dragEnd, setDragEnd] = useState9(null);
+  const [isSelecting, setIsSelecting] = useState9(false);
+  const [isDragging, setIsDragging] = useState9(false);
+  const [isEditing, setIsEditing] = useState9(false);
+  const [columnVisibility, setColumnVisibility] = useState9({});
+  const [rowVisibility, setRowVisibility] = useState9({});
   const grid = useReactTable({
     data,
     columns,
@@ -2684,10 +2832,13 @@ var DataGridRoot = ({
     [flatRows, rowVisibility]
   );
   const visibleColumns = grid.getVisibleLeafColumns();
+  const effectiveRowCount = isLazyMode ? totalRowCount : visibleRows.length;
   const rowVirtualizer = useVirtualizer({
-    count: visibleRows.length,
+    count: effectiveRowCount,
     estimateSize: () => ROW_HEIGHT,
     getScrollElement: () => containerRef.current,
+    // Measure actual row heights for dynamic sizing (disabled in Firefox due to measurement issues). Taken from Tanstack
+    measureElement: typeof window !== "undefined" && navigator.userAgent.indexOf("Firefox") === -1 ? (element) => element?.getBoundingClientRect().height : void 0,
     overscan: 5,
     rangeExtractor: (range) => {
       const toRender = new Set(
@@ -2706,6 +2857,56 @@ var DataGridRoot = ({
     }
   });
   const virtualRows = rowVirtualizer.getVirtualItems();
+  const lazyLoadingRefs = useRef4({
+    onFetchMore,
+    hasNextPage,
+    isFetchingMore,
+    loadedRowCount: visibleRows.length
+  });
+  useEffect6(() => {
+    lazyLoadingRefs.current = {
+      onFetchMore,
+      hasNextPage,
+      isFetchingMore,
+      loadedRowCount: visibleRows.length
+    };
+  }, [onFetchMore, hasNextPage, isFetchingMore, visibleRows.length]);
+  const hasData = visibleRows.length > 0;
+  const handleScroll = useCallback15(() => {
+    const { onFetchMore: onFetchMore2, hasNextPage: hasNextPage2, isFetchingMore: isFetchingMore2, loadedRowCount } = lazyLoadingRefs.current;
+    if (!onFetchMore2 || !hasNextPage2 || isFetchingMore2) {
+      return;
+    }
+    const scrollElement = containerRef.current;
+    const { scrollTop, clientHeight } = scrollElement;
+    const loadedHeight = loadedRowCount * ROW_HEIGHT;
+    const viewportBottom = scrollTop + clientHeight;
+    const fetchThreshold = loadedHeight - ROW_HEIGHT * 10;
+    if (viewportBottom >= fetchThreshold) {
+      onFetchMore2();
+    }
+  }, [lazyLoadingRefs, containerRef]);
+  useEffect6(() => {
+    if (!isLazyMode || !hasData) {
+      return;
+    }
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const timeoutId = setTimeout(() => {
+      const scrollElement = containerRef.current;
+      if (!scrollElement) {
+        return;
+      }
+      scrollElement.addEventListener("scroll", handleScroll);
+    }, 100);
+    return () => {
+      clearTimeout(timeoutId);
+      const scrollElement = containerRef.current;
+      scrollElement?.removeEventListener("scroll", handleScroll);
+    };
+  }, [isLazyMode, hasData]);
   const columnVirtualizer = useVirtualizer({
     count: visibleColumns.length,
     estimateSize: (index) => visibleColumns[index].getSize(),
@@ -2747,7 +2948,7 @@ var DataGridRoot = ({
     [flatRows, columns, multiColumnSelection]
   );
   const queryTool = useDataGridQueryTool(containerRef);
-  const setSingleRange = useCallback14(
+  const setSingleRange = useCallback15(
     (coordinates) => {
       setAnchor(coordinates);
       setRangeEnd(coordinates);
@@ -2755,7 +2956,7 @@ var DataGridRoot = ({
     []
   );
   const { errorCount, isHighlighted, toggleErrorHighlighting } = useDataGridErrorHighlighting(matrix, grid, errors);
-  const handleToggleErrorHighlighting = useCallback14(() => {
+  const handleToggleErrorHighlighting = useCallback15(() => {
     toggleErrorHighlighting(
       rowVisibility,
       columnVisibility,
@@ -2769,7 +2970,7 @@ var DataGridRoot = ({
     handleResetColumns,
     isDisabled: isColumsDisabled
   } = useDataGridColumnVisibility(grid, matrix);
-  const handleToggleColumnVisibility = useCallback14(
+  const handleToggleColumnVisibility = useCallback15(
     (index) => {
       return handleToggleColumn(index);
     },
@@ -2791,7 +2992,7 @@ var DataGridRoot = ({
     matrix,
     form: state
   });
-  const onEditingChangeHandler = useCallback14(
+  const onEditingChangeHandler = useCallback15(
     (value) => {
       if (onEditingChange) {
         onEditingChange(value);
@@ -2879,7 +3080,7 @@ var DataGridRoot = ({
   const { getCellErrorMetadata, getCellMetadata } = useDataGridCellMetadata({
     matrix
   });
-  useEffect5(() => {
+  useEffect6(() => {
     if (!trapActive) {
       return;
     }
@@ -2900,7 +3101,7 @@ var DataGridRoot = ({
     handleCopyEvent,
     handlePasteEvent
   ]);
-  useEffect5(() => {
+  useEffect6(() => {
     const specialFocusHandler = (e) => {
       if (isSpecialFocusKey(e)) {
         handleSpecialFocusKeys(e);
@@ -2912,12 +3113,12 @@ var DataGridRoot = ({
       window.removeEventListener("keydown", specialFocusHandler);
     };
   }, [handleSpecialFocusKeys]);
-  const handleHeaderInteractionChange = useCallback14((isActive) => {
+  const handleHeaderInteractionChange = useCallback15((isActive) => {
     if (isActive) {
       setTrapActive(false);
     }
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!anchor) {
       return;
     }
@@ -2926,7 +3127,7 @@ var DataGridRoot = ({
     }
     setRangeEnd(anchor);
   }, [anchor, rangeEnd]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!anchor && matrix) {
       const coords = matrix.getFirstNavigableCell();
       if (coords) {
@@ -2978,7 +3179,7 @@ var DataGridRoot = ({
       navigateToField
     ]
   );
-  const handleRestoreGridFocus = useCallback14(() => {
+  const handleRestoreGridFocus = useCallback15(() => {
     if (anchor && !trapActive) {
       setTrapActive(true);
       setSingleRange(anchor);
@@ -2988,10 +3189,11 @@ var DataGridRoot = ({
       });
     }
   }, [anchor, trapActive, setSingleRange, scrollToCoordinates, queryTool]);
-  return /* @__PURE__ */ jsx9(DataGridContext.Provider, { value: values, children: /* @__PURE__ */ jsxs7("div", { className: "bg-ui-bg-subtle flex size-full flex-col", children: [
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(DataGridContext.Provider, { value: values, children: /* @__PURE__ */ jsxs7("div", { className: "bg-ui-bg-subtle flex size-full flex-col", children: [
+    /* @__PURE__ */ jsx10(
       DataGridHeader,
       {
+        showColumnsDropdown,
         columnOptions,
         isDisabled: isColumsDisabled,
         onToggleColumn: handleToggleColumnVisibility,
@@ -2999,10 +3201,11 @@ var DataGridRoot = ({
         onToggleErrorHighlighting: handleToggleErrorHighlighting,
         onResetColumns: handleResetColumns,
         isHighlighted,
-        onHeaderInteractionChange: handleHeaderInteractionChange
+        onHeaderInteractionChange: handleHeaderInteractionChange,
+        headerContent
       }
     ),
-    /* @__PURE__ */ jsx9("div", { className: "size-full overflow-hidden", children: /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10("div", { className: "size-full overflow-hidden", children: /* @__PURE__ */ jsx10(
       "div",
       {
         ref: containerRef,
@@ -3014,7 +3217,7 @@ var DataGridRoot = ({
         "data-container": true,
         role: "application",
         children: /* @__PURE__ */ jsxs7("div", { role: "grid", className: "text-ui-fg-subtle grid", children: [
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             "div",
             {
               role: "rowgroup",
@@ -3025,7 +3228,7 @@ var DataGridRoot = ({
                   role: "row",
                   className: "flex h-10 w-full",
                   children: [
-                    virtualPaddingLeft ? /* @__PURE__ */ jsx9(
+                    virtualPaddingLeft ? /* @__PURE__ */ jsx10(
                       "div",
                       {
                         role: "presentation",
@@ -3037,7 +3240,7 @@ var DataGridRoot = ({
                       const previousVC = array[index - 1];
                       if (previousVC && vc.index !== previousVC.index + 1) {
                         acc.push(
-                          /* @__PURE__ */ jsx9(
+                          /* @__PURE__ */ jsx10(
                             "div",
                             {
                               role: "presentation",
@@ -3051,7 +3254,7 @@ var DataGridRoot = ({
                         );
                       }
                       acc.push(
-                        /* @__PURE__ */ jsx9(
+                        /* @__PURE__ */ jsx10(
                           "div",
                           {
                             role: "columnheader",
@@ -3071,7 +3274,7 @@ var DataGridRoot = ({
                       );
                       return acc;
                     }, []),
-                    virtualPaddingRight ? /* @__PURE__ */ jsx9(
+                    virtualPaddingRight ? /* @__PURE__ */ jsx10(
                       "div",
                       {
                         role: "presentation",
@@ -3087,7 +3290,7 @@ var DataGridRoot = ({
               ))
             }
           ),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             "div",
             {
               role: "rowgroup",
@@ -3097,13 +3300,26 @@ var DataGridRoot = ({
               },
               children: virtualRows.map((virtualRow) => {
                 const row = visibleRows[virtualRow.index];
+                if (!row) {
+                  return /* @__PURE__ */ jsx10(
+                    DataGridRowSkeleton,
+                    {
+                      virtualRow,
+                      virtualColumns,
+                      virtualPaddingLeft,
+                      virtualPaddingRight
+                    },
+                    `skeleton-${virtualRow.index}`
+                  );
+                }
                 const rowIndex = flatRows.findIndex((r) => r.id === row.id);
-                return /* @__PURE__ */ jsx9(
+                return /* @__PURE__ */ jsx10(
                   DataGridRow,
                   {
                     row,
                     rowIndex,
                     virtualRow,
+                    rowVirtualizer,
                     flatColumns,
                     virtualColumns,
                     anchor,
@@ -3130,10 +3346,12 @@ var DataGridHeader = ({
   isHighlighted,
   errorCount,
   onToggleErrorHighlighting,
-  onHeaderInteractionChange
+  onHeaderInteractionChange,
+  showColumnsDropdown,
+  headerContent
 }) => {
-  const [shortcutsOpen, setShortcutsOpen] = useState8(false);
-  const [columnsOpen, setColumnsOpen] = useState8(false);
+  const [shortcutsOpen, setShortcutsOpen] = useState9(false);
+  const [columnsOpen, setColumnsOpen] = useState9(false);
   const { t } = useTranslation3();
   const direction = useDocumentDirection();
   const hasChanged = columnOptions.some((column) => !column.checked);
@@ -3146,7 +3364,7 @@ var DataGridHeader = ({
     setColumnsOpen(value);
   };
   return /* @__PURE__ */ jsxs7("div", { className: "bg-ui-bg-base flex items-center justify-between border-b p-4", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-x-2", children: [
+    showColumnsDropdown && /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsxs7(
         DropdownMenu,
         {
@@ -3154,23 +3372,23 @@ var DataGridHeader = ({
           open: columnsOpen,
           onOpenChange: handleColumnsOpenChange,
           children: [
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               ConditionalTooltip,
               {
                 showTooltip: isDisabled,
                 content: t("dataGrid.columns.disabled"),
-                children: /* @__PURE__ */ jsx9(DropdownMenu.Trigger, { asChild: true, disabled: isDisabled, children: /* @__PURE__ */ jsxs7(Button2, { size: "small", variant: "secondary", children: [
-                  hasChanged ? /* @__PURE__ */ jsx9(AdjustmentsDone, {}) : /* @__PURE__ */ jsx9(Adjustments, {}),
+                children: /* @__PURE__ */ jsx10(DropdownMenu.Trigger, { asChild: true, disabled: isDisabled, children: /* @__PURE__ */ jsxs7(Button2, { size: "small", variant: "secondary", children: [
+                  hasChanged ? /* @__PURE__ */ jsx10(AdjustmentsDone, {}) : /* @__PURE__ */ jsx10(Adjustments, {}),
                   t("dataGrid.columns.view")
                 ] }) })
               }
             ),
-            /* @__PURE__ */ jsx9(DropdownMenu.Content, { children: columnOptions.map((column, index) => {
+            /* @__PURE__ */ jsx10(DropdownMenu.Content, { children: columnOptions.map((column, index) => {
               const { checked, disabled, id, name } = column;
               if (disabled) {
                 return null;
               }
-              return /* @__PURE__ */ jsx9(
+              return /* @__PURE__ */ jsx10(
                 DropdownMenu.CheckboxItem,
                 {
                   checked,
@@ -3184,7 +3402,7 @@ var DataGridHeader = ({
           ]
         }
       ),
-      hasChanged && /* @__PURE__ */ jsx9(
+      hasChanged && /* @__PURE__ */ jsx10(
         Button2,
         {
           size: "small",
@@ -3197,7 +3415,8 @@ var DataGridHeader = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-x-2", children: [
+    headerContent,
+    /* @__PURE__ */ jsxs7("div", { className: "ml-auto flex items-center gap-x-2", children: [
       errorCount > 0 && /* @__PURE__ */ jsxs7(
         Button2,
         {
@@ -3205,18 +3424,18 @@ var DataGridHeader = ({
           variant: "secondary",
           type: "button",
           onClick: onToggleErrorHighlighting,
-          className: clx5({
+          className: clx6({
             "bg-ui-button-neutral-pressed": isHighlighted
           }),
           children: [
-            /* @__PURE__ */ jsx9(ExclamationCircle2, { className: "text-ui-fg-subtle" }),
-            /* @__PURE__ */ jsx9("span", { children: t("dataGrid.errors.count", {
+            /* @__PURE__ */ jsx10(ExclamationCircle2, { className: "text-ui-fg-subtle" }),
+            /* @__PURE__ */ jsx10("span", { children: t("dataGrid.errors.count", {
               count: errorCount
             }) })
           ]
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         DataGridKeyboardShortcutModal,
         {
           open: shortcutsOpen,
@@ -3239,7 +3458,7 @@ var DataGridCell = ({
     col: columnIndex
   };
   const isAnchor = isCellMatch(coords, anchor);
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       role: "gridcell",
@@ -3251,21 +3470,21 @@ var DataGridCell = ({
       },
       "data-row-index": rowIndex,
       "data-column-index": columnIndex,
-      className: clx5(
-        "relative flex items-center border-b border-r p-0 outline-none"
+      className: clx6(
+        "relative flex items-stretch border-b border-r p-0 outline-none"
       ),
       tabIndex: -1,
-      children: /* @__PURE__ */ jsxs7("div", { className: "relative h-full w-full", children: [
+      children: /* @__PURE__ */ jsxs7("div", { className: "relative w-full", children: [
         flexRender(cell.column.columnDef.cell, {
           ...cell.getContext(),
           columnIndex,
           rowIndex
         }),
-        isAnchor && /* @__PURE__ */ jsx9(
+        isAnchor && /* @__PURE__ */ jsx10(
           "div",
           {
             onMouseDown: onDragToFillStart,
-            className: clx5(
+            className: clx6(
               "bg-ui-fg-interactive absolute bottom-0 right-0 z-[3] size-1.5 cursor-ns-resize",
               {
                 "cursor-nwse-resize": multiColumnSelection
@@ -3281,6 +3500,7 @@ var DataGridRow = ({
   row,
   rowIndex,
   virtualRow,
+  rowVirtualizer,
   virtualPaddingLeft,
   virtualPaddingRight,
   virtualColumns,
@@ -3295,12 +3515,14 @@ var DataGridRow = ({
     {
       role: "row",
       "aria-rowindex": virtualRow.index,
+      "data-index": virtualRow.index,
+      ref: (node) => rowVirtualizer.measureElement(node),
       style: {
         transform: `translateY(${virtualRow.start}px)`
       },
-      className: "bg-ui-bg-subtle txt-compact-small absolute flex h-10 w-full",
+      className: "bg-ui-bg-subtle txt-compact-small absolute flex min-h-10 w-full",
       children: [
-        virtualPaddingLeft ? /* @__PURE__ */ jsx9(
+        virtualPaddingLeft ? /* @__PURE__ */ jsx10(
           "div",
           {
             role: "presentation",
@@ -3314,7 +3536,7 @@ var DataGridRow = ({
           const previousVC = array[index - 1];
           if (previousVC && vc.index !== previousVC.index + 1) {
             acc.push(
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10(
                 "div",
                 {
                   role: "presentation",
@@ -3328,7 +3550,7 @@ var DataGridRow = ({
             );
           }
           acc.push(
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               DataGridCell,
               {
                 cell,
@@ -3343,7 +3565,73 @@ var DataGridRow = ({
           );
           return acc;
         }, []),
-        virtualPaddingRight ? /* @__PURE__ */ jsx9(
+        virtualPaddingRight ? /* @__PURE__ */ jsx10(
+          "div",
+          {
+            role: "presentation",
+            style: { display: "flex", width: virtualPaddingRight }
+          }
+        ) : null
+      ]
+    }
+  );
+};
+var DataGridRowSkeleton = ({
+  virtualRow,
+  virtualPaddingLeft,
+  virtualPaddingRight,
+  virtualColumns
+}) => {
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      role: "row",
+      "aria-rowindex": virtualRow.index,
+      style: {
+        transform: `translateY(${virtualRow.start}px)`
+      },
+      className: "bg-ui-bg-subtle txt-compact-small absolute flex h-10 w-full",
+      children: [
+        virtualPaddingLeft ? /* @__PURE__ */ jsx10(
+          "div",
+          {
+            role: "presentation",
+            style: { display: "flex", width: virtualPaddingLeft }
+          }
+        ) : null,
+        virtualColumns.map((vc, index, array) => {
+          const previousVC = array[index - 1];
+          const elements = [];
+          if (previousVC && vc.index !== previousVC.index + 1) {
+            elements.push(
+              /* @__PURE__ */ jsx10(
+                "div",
+                {
+                  role: "presentation",
+                  style: {
+                    display: "flex",
+                    width: `${vc.start - previousVC.end}px`
+                  }
+                },
+                `padding-${previousVC.index}-${vc.index}`
+              )
+            );
+          }
+          elements.push(
+            /* @__PURE__ */ jsx10(
+              "div",
+              {
+                role: "gridcell",
+                style: { width: vc.size },
+                className: "relative flex items-center border-b border-r p-0 outline-none",
+                children: /* @__PURE__ */ jsx10("div", { className: "flex h-full w-full items-center px-4", children: /* @__PURE__ */ jsx10("div", { className: "bg-ui-bg-component h-4 w-3/4 animate-pulse rounded" }) })
+              },
+              `skeleton-cell-${vc.index}`
+            )
+          );
+          return elements;
+        }),
+        virtualPaddingRight ? /* @__PURE__ */ jsx10(
           "div",
           {
             role: "presentation",
@@ -3356,10 +3644,10 @@ var DataGridRow = ({
 };
 
 // src/components/data-grid/components/data-grid-text-cell.tsx
-import { clx as clx6 } from "@medusajs/ui";
-import { useEffect as useEffect6, useState as useState9 } from "react";
-import { Controller as Controller4 } from "react-hook-form";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { clx as clx7 } from "@medusajs/ui";
+import { useEffect as useEffect7, useRef as useRef5, useState as useState10 } from "react";
+import { Controller as Controller5 } from "react-hook-form";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var DataGridTextCell = ({
   context
 }) => {
@@ -3368,38 +3656,40 @@ var DataGridTextCell = ({
   });
   const errorProps = useDataGridCellError({ context });
   const { container, input } = renderProps;
-  return /* @__PURE__ */ jsx10(
-    Controller4,
+  return /* @__PURE__ */ jsx11(
+    Controller5,
     {
       control,
       name: field,
       render: ({ field: field2 }) => {
-        return /* @__PURE__ */ jsx10(DataGridCellContainer, { ...container, ...errorProps, children: /* @__PURE__ */ jsx10(Inner4, { field: field2, inputProps: input }) });
+        return /* @__PURE__ */ jsx11(DataGridCellContainer, { ...container, ...errorProps, children: /* @__PURE__ */ jsx11(Inner5, { field: field2, inputProps: input }) });
       }
     }
   );
 };
-var Inner4 = ({
+var Inner5 = ({
   field,
   inputProps
 }) => {
   const { onChange: _, onBlur, ref, value, ...rest } = field;
   const { ref: inputRef, onBlur: onInputBlur, onChange, ...input } = inputProps;
-  const [localValue, setLocalValue] = useState9(value);
-  useEffect6(() => {
+  const [localValue, setLocalValue] = useState10(value);
+  const inputElRef = useRef5(null);
+  useEffect7(() => {
     setLocalValue(value);
   }, [value]);
-  const combinedRefs = useCombinedRefs(inputRef, ref);
-  return /* @__PURE__ */ jsx10(
+  const combinedRefs = useCombinedRefs(inputRef, ref, inputElRef);
+  return /* @__PURE__ */ jsx11(
     "input",
     {
-      className: clx6(
-        "txt-compact-small text-ui-fg-subtle flex size-full cursor-pointer items-center justify-center bg-transparent outline-none",
-        "focus:cursor-text"
+      className: clx7(
+        "txt-compact-small text-ui-fg-subtle flex size-full cursor-pointer bg-transparent outline-none",
+        "focus:cursor-text",
+        "items-center justify-center"
       ),
       autoComplete: "off",
       tabIndex: -1,
-      value: localValue,
+      value: localValue ?? "",
       onChange: (e) => setLocalValue(e.target.value),
       ref: combinedRefs,
       onBlur: () => {
@@ -3413,23 +3703,235 @@ var Inner4 = ({
   );
 };
 
+// src/components/data-grid/components/data-grid-textarea-modal-cell.tsx
+import { clx as clx8, Textarea } from "@medusajs/ui";
+import { Popover as RadixPopover } from "radix-ui";
+import { useCallback as useCallback16, useEffect as useEffect8, useRef as useRef6, useState as useState11 } from "react";
+import { Controller as Controller6 } from "react-hook-form";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var DataGridExpandableTextCell = ({
+  context,
+  fieldLabel
+}) => {
+  const { field, control, renderProps } = useDataGridCell({
+    context
+  });
+  const errorProps = useDataGridCellError({ context });
+  const { container, input } = renderProps;
+  return /* @__PURE__ */ jsx12(
+    Controller6,
+    {
+      control,
+      name: field,
+      render: ({ field: field2 }) => {
+        return /* @__PURE__ */ jsx12(
+          Inner6,
+          {
+            field: field2,
+            inputProps: input,
+            fieldLabel,
+            container,
+            errorProps
+          }
+        );
+      }
+    }
+  );
+};
+var Inner6 = ({
+  field,
+  inputProps,
+  fieldLabel: _fieldLabel,
+  container,
+  errorProps
+}) => {
+  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] = useState11(value || "");
+  const [isPopoverOpen, setIsPopoverOpen] = useState11(false);
+  const [popoverValue, setPopoverValue] = useState11(value || "");
+  const popoverContentRef = useRef6(null);
+  useEffect8(() => {
+    setLocalValue(value || "");
+  }, [value]);
+  useEffect8(() => {
+    if (isPopoverOpen) {
+      setPopoverValue(value || "");
+    }
+  }, [isPopoverOpen, value]);
+  useEffect8(() => {
+    if (!isPopoverOpen || !popoverContentRef.current) {
+      return;
+    }
+    const handleKeyDownCapture = (e) => {
+      const target = e.target;
+      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",
+          " "
+        ];
+        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 = useCallback16(
+    (e) => {
+      if (e.detail === 2) {
+        e.preventDefault();
+        e.stopPropagation();
+        setSingleRange({ row, col });
+        setIsPopoverOpen(true);
+        return;
+      }
+      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 = useCallback16((e) => {
+    if (e.key !== "Escape") {
+      e.stopPropagation();
+    }
+  }, []);
+  const displayValue = localValue || "";
+  const truncatedValue = displayValue.length > 50 ? `${displayValue.substring(0, 50)}...` : displayValue;
+  return /* @__PURE__ */ jsxs8(
+    RadixPopover.Root,
+    {
+      open: isPopoverOpen,
+      onOpenChange: (open) => {
+        if (!open) {
+          handlePopoverSave();
+        } else {
+          setIsPopoverOpen(true);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs8(DataGridCellContainer, { ...customContainer, ...errorProps, children: [
+          /* @__PURE__ */ jsx12(RadixPopover.Anchor, { asChild: true, children: /* @__PURE__ */ jsx12(
+            "div",
+            {
+              className: clx8(
+                "txt-compact-small text-ui-fg-subtle flex size-full cursor-pointer items-center justify-center bg-transparent outline-none",
+                "focus:cursor-text"
+              ),
+              children: /* @__PURE__ */ jsx12("span", { className: "w-full truncate text-center", children: truncatedValue })
+            }
+          ) }),
+          /* @__PURE__ */ jsx12(
+            "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
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx12(RadixPopover.Portal, { children: /* @__PURE__ */ jsx12(
+          RadixPopover.Content,
+          {
+            className: clx8(
+              "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,
+            children: /* @__PURE__ */ jsx12("div", { ref: popoverContentRef, className: "h-full w-full", children: /* @__PURE__ */ jsx12(
+              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"
+              }
+            ) })
+          }
+        ) })
+      ]
+    }
+  );
+};
+
 // src/components/data-grid/data-grid.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var _DataGrid = ({
   isLoading,
+  // Lazy loading props - passed through to DataGridRoot
+  totalRowCount,
+  onFetchMore,
+  isFetchingMore,
+  hasNextPage,
   ...props
 }) => {
-  return isLoading ? /* @__PURE__ */ jsx11(
+  return isLoading ? /* @__PURE__ */ jsx13(
     DataGridSkeleton,
     {
       columns: props.columns,
       rows: props.data?.length && props.data.length > 0 ? props.data.length : 10
     }
-  ) : /* @__PURE__ */ jsx11(DataGridRoot, { ...props });
+  ) : /* @__PURE__ */ jsx13(
+    DataGridRoot,
+    {
+      ...props,
+      totalRowCount,
+      onFetchMore,
+      isFetchingMore,
+      hasNextPage
+    }
+  );
 };
 var DataGrid = Object.assign(_DataGrid, {
   BooleanCell: DataGridBooleanCell,
   TextCell: DataGridTextCell,
+  MultilineCell: DataGridMultilineCell,
+  ExpandableTextCell: DataGridExpandableTextCell,
   NumberCell: DataGridNumberCell,
   CurrencyCell: DataGridCurrencyCell,
   ReadonlyCell: DataGridReadonlyCell
@@ -3449,12 +3951,18 @@ function createDataGridHelper() {
       cell,
       disableHiding = false,
       field,
-      type
+      type,
+      size,
+      minSize,
+      maxSize
     }) => columnHelper.display({
       id,
       header,
       cell,
       enableHiding: !disableHiding,
+      size,
+      minSize,
+      maxSize,
       meta: {
         name,
         field,
@@ -3468,23 +3976,23 @@ function createDataGridHelper() {
 import { TaxExclusive, TaxInclusive } from "@medusajs/icons";
 import { Tooltip as Tooltip3 } from "@medusajs/ui";
 import { useTranslation as useTranslation4 } from "react-i18next";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var IncludesTaxTooltip = ({
   includesTax
 }) => {
   const { t } = useTranslation4();
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(
     Tooltip3,
     {
       maxWidth: 999,
       content: includesTax ? t("general.includesTaxTooltip") : t("general.excludesTaxTooltip"),
-      children: includesTax ? /* @__PURE__ */ jsx12(TaxInclusive, { className: "text-ui-fg-muted shrink-0" }) : /* @__PURE__ */ jsx12(TaxExclusive, { className: "text-ui-fg-muted shrink-0" })
+      children: includesTax ? /* @__PURE__ */ jsx14(TaxInclusive, { className: "text-ui-fg-muted shrink-0" }) : /* @__PURE__ */ jsx14(TaxExclusive, { className: "text-ui-fg-muted shrink-0" })
     }
   );
 };
 
 // src/components/data-grid/helpers/create-data-grid-price-columns.tsx
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 var createDataGridPriceColumns = ({
   currencies: currencies2,
   regions,
@@ -3515,15 +4023,15 @@ var createDataGridPriceColumns = ({
           return getFieldName(context, currency);
         },
         type: "number",
-        header: () => /* @__PURE__ */ jsxs8("div", { className: "flex w-full items-center justify-between gap-3", children: [
-          /* @__PURE__ */ jsx13("span", { className: "truncate", title: translatedCurrencyName, children: translatedCurrencyName }),
-          /* @__PURE__ */ jsx13(IncludesTaxTooltip, { includesTax: preference?.is_tax_inclusive })
+        header: () => /* @__PURE__ */ jsxs9("div", { className: "flex w-full items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsx15("span", { className: "truncate", title: translatedCurrencyName, children: translatedCurrencyName }),
+          /* @__PURE__ */ jsx15(IncludesTaxTooltip, { includesTax: preference?.is_tax_inclusive })
         ] }),
         cell: (context) => {
           if (isReadyOnly?.(context)) {
-            return /* @__PURE__ */ jsx13(DataGridReadonlyCell, { context });
+            return /* @__PURE__ */ jsx15(DataGridReadonlyCell, { context });
           }
-          return /* @__PURE__ */ jsx13(DataGridCurrencyCell, { code: currency, context });
+          return /* @__PURE__ */ jsx15(DataGridCurrencyCell, { code: currency, context });
         }
       });
     }) ?? [],
@@ -3547,19 +4055,19 @@ var createDataGridPriceColumns = ({
           return getFieldName(context, region.id);
         },
         type: "number",
-        header: () => /* @__PURE__ */ jsxs8("div", { className: "flex w-full items-center justify-between gap-3", children: [
-          /* @__PURE__ */ jsx13("span", { className: "truncate", title: translatedRegionName, children: translatedRegionName }),
-          /* @__PURE__ */ jsx13(IncludesTaxTooltip, { includesTax: preference?.is_tax_inclusive })
+        header: () => /* @__PURE__ */ jsxs9("div", { className: "flex w-full items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsx15("span", { className: "truncate", title: translatedRegionName, children: translatedRegionName }),
+          /* @__PURE__ */ jsx15(IncludesTaxTooltip, { includesTax: preference?.is_tax_inclusive })
         ] }),
         cell: (context) => {
           if (isReadyOnly?.(context)) {
-            return /* @__PURE__ */ jsx13(DataGridReadonlyCell, { context });
+            return /* @__PURE__ */ jsx15(DataGridReadonlyCell, { context });
           }
           const currency = currencies2?.find((c) => c === region.currency_code);
           if (!currency) {
             return null;
           }
-          return /* @__PURE__ */ jsx13(
+          return /* @__PURE__ */ jsx15(
             DataGridCurrencyCell,
             {
               code: region.currency_code,