@medusajs/loyalty-plugin 0.0.1

package/.medusa/server/src/admin/components/data-grid/components/data-grid-root.js

@@ -0,0 +1,743 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AdjustmentsDone, Adjustments, ExclamationCircle } from "@medusajs/icons";
+import { DropdownMenu, Button, clx } from "@medusajs/ui";
+import { useReactTable, getCoreRowModel, flexRender } from "/Users/oliverjuhl/Desktop/medusa/loyalty-plugin/node_modules/@tanstack/react-table/build/lib/index.mjs";
+import { useVirtualizer } from "/Users/oliverjuhl/Desktop/medusa/loyalty-plugin/node_modules/@tanstack/react-virtual/dist/esm/index.js";
+import { useRef, useState, useMemo, useCallback, useEffect } from "react";
+import { useCommandHistory } from "../../../hooks/commands/use-command-history.js";
+import { ConditionalTooltip } from "../../conditional-tooltip.js";
+import { DataGridContext } from "../context/data-grid-context.js";
+import { isSpecialFocusKey, isCellMatch } from "../utils.js";
+import { useDataGridCellHandlers } from "../hooks/use-data-grid-cell-handlers.js";
+import { useDataGridCellMetadata } from "../hooks/use-data-grid-cell-metadata.js";
+import { useDataGridCellSnapshot } from "../hooks/use-data-grid-cell-snapshot.js";
+import { useDataGridClipboardEvents } from "../hooks/use-data-grid-clipboard-events.js";
+import { useDataGridColumnVisibility } from "../hooks/use-data-grid-column-visibility.js";
+import { useDataGridErrorHighlighting } from "../hooks/use-data-grid-error-highlighting.js";
+import { useDataGridFormHandlers } from "../hooks/use-data-grid-form-handlers.js";
+import { useDataGridKeydownEvent } from "../hooks/use-data-grid-keydown-event.js";
+import { useDataGridMouseUpEvent } from "../hooks/use-data-grid-mouse-up-event.js";
+import { useDataGridNavigation } from "../hooks/use-data-grid-navigation.js";
+import { useDataGridQueryTool } from "../hooks/use-data-grid-query-tool.js";
+import { DataGridMatrix } from "../models/data-grid-matrix.js";
+const ROW_HEIGHT = 40;
+const getCommonPinningStyles = (column) => {
+  const isPinned = column.getIsPinned();
+  const isDarkMode = document.documentElement.classList.contains("dark");
+  const BORDER_COLOR = isDarkMode ? "rgb(50,50,53)" : "rgb(228,228,231)";
+  return {
+    position: isPinned ? "sticky" : "relative",
+    width: column.getSize(),
+    zIndex: isPinned ? 1 : 0,
+    borderBottom: isPinned ? `1px solid ${BORDER_COLOR}` : void 0,
+    borderRight: isPinned ? `1px solid ${BORDER_COLOR}` : void 0,
+    left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
+    right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0
+  };
+};
+const DataGridRoot = ({
+  data = [],
+  columns,
+  state,
+  getSubRows,
+  onEditingChange,
+  disableInteractions,
+  multiColumnSelection = false
+}) => {
+  var _a, _b;
+  const containerRef = useRef(null);
+  const { redo, undo, execute } = useCommandHistory();
+  const {
+    register,
+    control,
+    getValues,
+    setValue,
+    formState: { errors }
+  } = state;
+  const [internalTrapActive, setTrapActive] = useState(true);
+  const trapActive = !disableInteractions && internalTrapActive;
+  const [anchor, setAnchor] = useState(null);
+  const [rangeEnd, setRangeEnd] = useState(null);
+  const [dragEnd, setDragEnd] = useState(null);
+  const [isSelecting, setIsSelecting] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [columnVisibility, setColumnVisibility] = useState({});
+  const [rowVisibility, setRowVisibility] = useState({});
+  const grid = useReactTable({
+    data,
+    columns,
+    initialState: {
+      columnPinning: {
+        left: [columns[0].id]
+      }
+    },
+    state: {
+      columnVisibility
+    },
+    onColumnVisibilityChange: setColumnVisibility,
+    getSubRows,
+    getCoreRowModel: getCoreRowModel(),
+    defaultColumn: {
+      size: 200,
+      maxSize: 400
+    }
+  });
+  const { flatRows } = grid.getRowModel();
+  const flatColumns = grid.getAllFlatColumns();
+  const visibleRows = useMemo(
+    () => flatRows.filter((_, index) => (rowVisibility == null ? void 0 : rowVisibility[index]) !== false),
+    [flatRows, rowVisibility]
+  );
+  const visibleColumns = grid.getVisibleLeafColumns();
+  const rowVirtualizer = useVirtualizer({
+    count: visibleRows.length,
+    estimateSize: () => ROW_HEIGHT,
+    getScrollElement: () => containerRef.current,
+    overscan: 5,
+    rangeExtractor: (range) => {
+      const toRender = new Set(
+        Array.from(
+          { length: range.endIndex - range.startIndex + 1 },
+          (_, i) => range.startIndex + i
+        )
+      );
+      if (anchor && visibleRows[anchor.row]) {
+        toRender.add(anchor.row);
+      }
+      if (rangeEnd && visibleRows[rangeEnd.row]) {
+        toRender.add(rangeEnd.row);
+      }
+      return Array.from(toRender).sort((a, b) => a - b);
+    }
+  });
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  const columnVirtualizer = useVirtualizer({
+    count: visibleColumns.length,
+    estimateSize: (index) => visibleColumns[index].getSize(),
+    getScrollElement: () => containerRef.current,
+    horizontal: true,
+    overscan: 3,
+    rangeExtractor: (range) => {
+      const startIndex = range.startIndex;
+      const endIndex = range.endIndex;
+      const toRender = new Set(
+        Array.from(
+          { length: endIndex - startIndex + 1 },
+          (_, i) => startIndex + i
+        )
+      );
+      if (anchor && visibleColumns[anchor.col]) {
+        toRender.add(anchor.col);
+      }
+      if (rangeEnd && visibleColumns[rangeEnd.col]) {
+        toRender.add(rangeEnd.col);
+      }
+      toRender.add(0);
+      return Array.from(toRender).sort((a, b) => a - b);
+    }
+  });
+  const virtualColumns = columnVirtualizer.getVirtualItems();
+  let virtualPaddingLeft;
+  let virtualPaddingRight;
+  if (columnVirtualizer && (virtualColumns == null ? void 0 : virtualColumns.length)) {
+    virtualPaddingLeft = ((_a = virtualColumns[0]) == null ? void 0 : _a.start) ?? 0;
+    virtualPaddingRight = columnVirtualizer.getTotalSize() - (((_b = virtualColumns[virtualColumns.length - 1]) == null ? void 0 : _b.end) ?? 0);
+  }
+  const matrix = useMemo(
+    () => new DataGridMatrix(
+      flatRows,
+      columns,
+      multiColumnSelection
+    ),
+    [flatRows, columns, multiColumnSelection]
+  );
+  const queryTool = useDataGridQueryTool(containerRef);
+  const setSingleRange = useCallback(
+    (coordinates) => {
+      setAnchor(coordinates);
+      setRangeEnd(coordinates);
+    },
+    []
+  );
+  const { errorCount, isHighlighted, toggleErrorHighlighting } = useDataGridErrorHighlighting(matrix, grid, errors);
+  const handleToggleErrorHighlighting = useCallback(() => {
+    toggleErrorHighlighting(
+      rowVisibility,
+      columnVisibility,
+      setRowVisibility,
+      setColumnVisibility
+    );
+  }, [toggleErrorHighlighting, rowVisibility, columnVisibility]);
+  const {
+    columnOptions,
+    handleToggleColumn,
+    handleResetColumns,
+    isDisabled: isColumsDisabled
+  } = useDataGridColumnVisibility(grid, matrix);
+  const handleToggleColumnVisibility = useCallback(
+    (index) => {
+      return handleToggleColumn(index);
+    },
+    [handleToggleColumn]
+  );
+  const { navigateToField, scrollToCoordinates } = useDataGridNavigation({
+    matrix,
+    queryTool,
+    anchor,
+    columnVirtualizer,
+    rowVirtualizer,
+    flatColumns,
+    setColumnVisibility,
+    setSingleRange,
+    visibleColumns,
+    visibleRows
+  });
+  const { createSnapshot, restoreSnapshot } = useDataGridCellSnapshot({
+    matrix,
+    form: state
+  });
+  const onEditingChangeHandler = useCallback(
+    (value) => {
+      if (onEditingChange) {
+        onEditingChange(value);
+      }
+      if (value) {
+        createSnapshot(anchor);
+      }
+      setIsEditing(value);
+    },
+    [anchor, createSnapshot, onEditingChange]
+  );
+  const { getSelectionValues, setSelectionValues } = useDataGridFormHandlers({
+    matrix,
+    form: state,
+    anchor
+  });
+  const { handleKeyDownEvent, handleSpecialFocusKeys } = useDataGridKeydownEvent({
+    containerRef,
+    matrix,
+    queryTool,
+    anchor,
+    rangeEnd,
+    isEditing,
+    setTrapActive,
+    setRangeEnd,
+    getSelectionValues,
+    getValues,
+    setSelectionValues,
+    onEditingChangeHandler,
+    restoreSnapshot,
+    createSnapshot,
+    setSingleRange,
+    scrollToCoordinates,
+    execute,
+    undo,
+    redo,
+    setValue
+  });
+  const { handleMouseUpEvent } = useDataGridMouseUpEvent({
+    matrix,
+    anchor,
+    dragEnd,
+    setDragEnd,
+    isDragging,
+    setIsDragging,
+    setRangeEnd,
+    setIsSelecting,
+    getSelectionValues,
+    setSelectionValues,
+    execute
+  });
+  const { handleCopyEvent, handlePasteEvent } = useDataGridClipboardEvents({
+    matrix,
+    isEditing,
+    anchor,
+    rangeEnd,
+    getSelectionValues,
+    setSelectionValues,
+    execute
+  });
+  const {
+    getWrapperFocusHandler,
+    getInputChangeHandler,
+    getOverlayMouseDownHandler,
+    getWrapperMouseOverHandler,
+    getIsCellDragSelected,
+    getIsCellSelected,
+    onDragToFillStart
+  } = useDataGridCellHandlers({
+    matrix,
+    anchor,
+    rangeEnd,
+    setRangeEnd,
+    isDragging,
+    setIsDragging,
+    isSelecting,
+    setIsSelecting,
+    setSingleRange,
+    dragEnd,
+    setDragEnd,
+    setValue,
+    execute,
+    multiColumnSelection
+  });
+  const { getCellErrorMetadata, getCellMetadata } = useDataGridCellMetadata({
+    matrix
+  });
+  useEffect(() => {
+    if (!trapActive) {
+      return;
+    }
+    window.addEventListener("keydown", handleKeyDownEvent);
+    window.addEventListener("mouseup", handleMouseUpEvent);
+    window.addEventListener("copy", handleCopyEvent);
+    window.addEventListener("paste", handlePasteEvent);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDownEvent);
+      window.removeEventListener("mouseup", handleMouseUpEvent);
+      window.removeEventListener("copy", handleCopyEvent);
+      window.removeEventListener("paste", handlePasteEvent);
+    };
+  }, [
+    trapActive,
+    handleKeyDownEvent,
+    handleMouseUpEvent,
+    handleCopyEvent,
+    handlePasteEvent
+  ]);
+  useEffect(() => {
+    const specialFocusHandler = (e) => {
+      if (isSpecialFocusKey(e)) {
+        handleSpecialFocusKeys(e);
+        return;
+      }
+    };
+    window.addEventListener("keydown", specialFocusHandler);
+    return () => {
+      window.removeEventListener("keydown", specialFocusHandler);
+    };
+  }, [handleSpecialFocusKeys]);
+  const handleHeaderInteractionChange = useCallback((isActive) => {
+    if (isActive) {
+      setTrapActive(false);
+    }
+  }, []);
+  useEffect(() => {
+    if (!anchor) {
+      return;
+    }
+    if (rangeEnd) {
+      return;
+    }
+    setRangeEnd(anchor);
+  }, [anchor, rangeEnd]);
+  useEffect(() => {
+    if (!anchor && matrix) {
+      const coords = matrix.getFirstNavigableCell();
+      if (coords) {
+        setSingleRange(coords);
+      }
+    }
+  }, [anchor, matrix, setSingleRange]);
+  const values = useMemo(
+    () => ({
+      anchor,
+      control,
+      trapActive,
+      errors,
+      setTrapActive,
+      setIsSelecting,
+      setIsEditing: onEditingChangeHandler,
+      setSingleRange,
+      setRangeEnd,
+      getWrapperFocusHandler,
+      getInputChangeHandler,
+      getOverlayMouseDownHandler,
+      getWrapperMouseOverHandler,
+      register,
+      getIsCellSelected,
+      getIsCellDragSelected,
+      getCellMetadata,
+      getCellErrorMetadata,
+      navigateToField
+    }),
+    [
+      anchor,
+      control,
+      trapActive,
+      errors,
+      setTrapActive,
+      setIsSelecting,
+      onEditingChangeHandler,
+      setSingleRange,
+      setRangeEnd,
+      getWrapperFocusHandler,
+      getInputChangeHandler,
+      getOverlayMouseDownHandler,
+      getWrapperMouseOverHandler,
+      register,
+      getIsCellSelected,
+      getIsCellDragSelected,
+      getCellMetadata,
+      getCellErrorMetadata,
+      navigateToField
+    ]
+  );
+  const handleRestoreGridFocus = useCallback(() => {
+    if (anchor && !trapActive) {
+      setTrapActive(true);
+      setSingleRange(anchor);
+      scrollToCoordinates(anchor, "both");
+      requestAnimationFrame(() => {
+        var _a2;
+        (_a2 = queryTool == null ? void 0 : queryTool.getContainer(anchor)) == null ? void 0 : _a2.focus();
+      });
+    }
+  }, [anchor, trapActive, setSingleRange, scrollToCoordinates, queryTool]);
+  return /* @__PURE__ */ jsx(DataGridContext.Provider, { value: values, children: /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle flex size-full flex-col", children: [
+    /* @__PURE__ */ jsx(
+      DataGridHeader,
+      {
+        columnOptions,
+        isDisabled: isColumsDisabled,
+        onToggleColumn: handleToggleColumnVisibility,
+        errorCount,
+        onToggleErrorHighlighting: handleToggleErrorHighlighting,
+        onResetColumns: handleResetColumns,
+        isHighlighted,
+        onHeaderInteractionChange: handleHeaderInteractionChange
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "size-full overflow-hidden", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        autoFocus: true,
+        tabIndex: 0,
+        className: "relative h-full select-none overflow-auto outline-none",
+        onFocus: handleRestoreGridFocus,
+        onClick: handleRestoreGridFocus,
+        "data-container": true,
+        role: "application",
+        children: /* @__PURE__ */ jsxs("div", { role: "grid", className: "text-ui-fg-subtle grid", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "rowgroup",
+              className: "txt-compact-small-plus bg-ui-bg-subtle sticky top-0 z-[1] grid",
+              children: grid.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "row",
+                  className: "flex h-10 w-full",
+                  children: [
+                    virtualPaddingLeft ? /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        role: "presentation",
+                        style: { display: "flex", width: virtualPaddingLeft }
+                      }
+                    ) : null,
+                    virtualColumns.reduce((acc, vc, index, array) => {
+                      const header = headerGroup.headers[vc.index];
+                      const previousVC = array[index - 1];
+                      if (previousVC && vc.index !== previousVC.index + 1) {
+                        acc.push(
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              role: "presentation",
+                              style: {
+                                display: "flex",
+                                width: `${vc.start - previousVC.end}px`
+                              }
+                            },
+                            `padding-${previousVC.index}-${vc.index}`
+                          )
+                        );
+                      }
+                      acc.push(
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            role: "columnheader",
+                            "data-column-index": vc.index,
+                            style: {
+                              width: header.getSize(),
+                              ...getCommonPinningStyles(header.column)
+                            },
+                            className: "bg-ui-bg-base txt-compact-small-plus flex items-center border-b border-r px-4 py-2.5",
+                            children: header.isPlaceholder ? null : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )
+                          },
+                          header.id
+                        )
+                      );
+                      return acc;
+                    }, []),
+                    virtualPaddingRight ? /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        role: "presentation",
+                        style: {
+                          display: "flex",
+                          width: virtualPaddingRight
+                        }
+                      }
+                    ) : null
+                  ]
+                },
+                headerGroup.id
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "rowgroup",
+              className: "relative grid",
+              style: {
+                height: `${rowVirtualizer.getTotalSize()}px`
+              },
+              children: virtualRows.map((virtualRow) => {
+                const row = visibleRows[virtualRow.index];
+                const rowIndex = flatRows.findIndex((r) => r.id === row.id);
+                return /* @__PURE__ */ jsx(
+                  DataGridRow,
+                  {
+                    row,
+                    rowIndex,
+                    virtualRow,
+                    flatColumns,
+                    virtualColumns,
+                    anchor,
+                    virtualPaddingLeft,
+                    virtualPaddingRight,
+                    onDragToFillStart,
+                    multiColumnSelection
+                  },
+                  row.id
+                );
+              })
+            }
+          )
+        ] })
+      }
+    ) })
+  ] }) });
+};
+const DataGridHeader = ({
+  columnOptions,
+  isDisabled,
+  onToggleColumn,
+  onResetColumns,
+  isHighlighted,
+  errorCount,
+  onToggleErrorHighlighting,
+  onHeaderInteractionChange
+}) => {
+  const [columnsOpen, setColumnsOpen] = useState(false);
+  const hasChanged = columnOptions.some((column) => !column.checked);
+  const handleColumnsOpenChange = (value) => {
+    onHeaderInteractionChange(value);
+    setColumnsOpen(value);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-base flex items-center justify-between border-b p-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ jsxs(DropdownMenu, { open: columnsOpen, onOpenChange: handleColumnsOpenChange, children: [
+        /* @__PURE__ */ jsx(
+          ConditionalTooltip,
+          {
+            showTooltip: isDisabled,
+            content: "Changing which columns are visible is disabled.",
+            children: /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, disabled: isDisabled, children: /* @__PURE__ */ jsxs(Button, { size: "small", variant: "secondary", children: [
+              hasChanged ? /* @__PURE__ */ jsx(AdjustmentsDone, {}) : /* @__PURE__ */ jsx(Adjustments, {}),
+              "View"
+            ] }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(DropdownMenu.Content, { children: columnOptions.map((column, index) => {
+          const { checked, disabled, id, name } = column;
+          if (disabled) {
+            return null;
+          }
+          return /* @__PURE__ */ jsx(
+            DropdownMenu.CheckboxItem,
+            {
+              checked,
+              onCheckedChange: onToggleColumn(index),
+              onSelect: (e) => e.preventDefault(),
+              children: name
+            },
+            id
+          );
+        }) })
+      ] }),
+      hasChanged && /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          variant: "transparent",
+          type: "button",
+          onClick: onResetColumns,
+          className: "text-ui-fg-muted hover:text-ui-fg-subtle",
+          "data-id": "reset-columns",
+          children: "Reset to default"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-2", children: errorCount > 0 && /* @__PURE__ */ jsxs(
+      Button,
+      {
+        size: "small",
+        variant: "secondary",
+        type: "button",
+        onClick: onToggleErrorHighlighting,
+        className: clx({
+          "bg-ui-button-neutral-pressed": isHighlighted
+        }),
+        children: [
+          /* @__PURE__ */ jsx(ExclamationCircle, { className: "text-ui-fg-subtle" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            errorCount,
+            " errors"
+          ] })
+        ]
+      }
+    ) })
+  ] });
+};
+const DataGridCell = ({
+  cell,
+  columnIndex,
+  rowIndex,
+  anchor,
+  onDragToFillStart,
+  multiColumnSelection
+}) => {
+  const coords = {
+    row: rowIndex,
+    col: columnIndex
+  };
+  const isAnchor = isCellMatch(coords, anchor);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "gridcell",
+      "aria-rowindex": rowIndex,
+      "aria-colindex": columnIndex,
+      style: {
+        width: cell.column.getSize(),
+        ...getCommonPinningStyles(cell.column)
+      },
+      "data-row-index": rowIndex,
+      "data-column-index": columnIndex,
+      className: clx(
+        "relative flex items-center border-b border-r p-0 outline-none"
+      ),
+      tabIndex: -1,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative h-full w-full", children: [
+        flexRender(cell.column.columnDef.cell, {
+          ...cell.getContext(),
+          columnIndex,
+          rowIndex
+        }),
+        isAnchor && /* @__PURE__ */ jsx(
+          "div",
+          {
+            onMouseDown: onDragToFillStart,
+            className: clx(
+              "bg-ui-fg-interactive absolute bottom-0 right-0 z-[3] size-1.5 cursor-ns-resize",
+              {
+                "cursor-nwse-resize": multiColumnSelection
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+};
+const DataGridRow = ({
+  row,
+  rowIndex,
+  virtualRow,
+  virtualPaddingLeft,
+  virtualPaddingRight,
+  virtualColumns,
+  flatColumns,
+  anchor,
+  onDragToFillStart,
+  multiColumnSelection
+}) => {
+  const visibleCells = row.getVisibleCells();
+  return /* @__PURE__ */ jsxs(
+    "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__ */ jsx(
+          "div",
+          {
+            role: "presentation",
+            style: { display: "flex", width: virtualPaddingLeft }
+          }
+        ) : null,
+        virtualColumns.reduce((acc, vc, index, array) => {
+          const cell = visibleCells[vc.index];
+          const column = cell.column;
+          const columnIndex = flatColumns.findIndex((c) => c.id === column.id);
+          const previousVC = array[index - 1];
+          if (previousVC && vc.index !== previousVC.index + 1) {
+            acc.push(
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "presentation",
+                  style: {
+                    display: "flex",
+                    width: `${vc.start - previousVC.end}px`
+                  }
+                },
+                `padding-${previousVC.index}-${vc.index}`
+              )
+            );
+          }
+          acc.push(
+            /* @__PURE__ */ jsx(
+              DataGridCell,
+              {
+                cell,
+                columnIndex,
+                rowIndex,
+                anchor,
+                onDragToFillStart,
+                multiColumnSelection
+              },
+              cell.id
+            )
+          );
+          return acc;
+        }, []),
+        virtualPaddingRight ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "presentation",
+            style: { display: "flex", width: virtualPaddingRight }
+          }
+        ) : null
+      ]
+    }
+  );
+};
+export {
+  DataGridRoot
+};