@alaarab/ogrid-react-material 2.1.3 → 2.1.4

package/dist/esm/index.js

@@ -1,11 +1,1577 @@
-// Components
-export { OGrid } from './OGrid';
-export { DataGridTable } from './DataGridTable/DataGridTable';
-export { ColumnChooser } from './ColumnChooser/ColumnChooser';
-export { ColumnHeaderFilter } from './ColumnHeaderFilter/ColumnHeaderFilter';
-export { PaginationControls } from './PaginationControls/PaginationControls';
-export { ColumnHeaderMenu } from './ColumnHeaderMenu/ColumnHeaderMenu';
-// Re-export all from base package for consumer convenience.
-// Note: This prevents tree-shaking of unused utilities.
-// Consider explicit named exports in a future major version.
-export * from '@alaarab/ogrid-react';
+import * as React3 from 'react';
+import { useMemo, useCallback, useState, useRef, useEffect } from 'react';
+import { Box, Tooltip, Typography, IconButton, Popover, Button, Select, MenuItem, useTheme, Checkbox, Table, TableHead, TableRow, TableCell, FormControlLabel, Avatar, TextField, InputAdornment, CircularProgress, Menu, Divider } from '@mui/material';
+import { useColumnHeaderFilterState, getColumnHeaderFilterStateParams, renderFilterContent, areGridRowPropsEqual, usePaginationControls, createOGrid, CHECKBOX_COLUMN_WIDTH, STOP_PROPAGATION, ROW_NUMBER_COLUMN_WIDTH, useDataGridTableOrchestration, useColumnMeta, getCellRenderDescriptor, buildInlineEditorProps, buildPopoverEditorProps, resolveCellDisplayContent, resolveCellStyle, getCellInteractionProps, CellErrorBoundary, PREVENT_DEFAULT, getHeaderFilterConfig, MarchingAntsOverlay, NOOP, useColumnChooserState, useListVirtualizer, BaseInlineCellEditor, getContextMenuHandlers, GRID_CONTEXT_MENU_ITEMS, formatShortcut, getColumnHeaderMenuItems, getStatusBarParts } from '@alaarab/ogrid-react';
+export { BaseColumnHeaderMenu, BaseDropIndicator, BaseEmptyState, BaseInlineCellEditor, BaseLoadingOverlay, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, COLUMN_HEADER_MENU_ITEMS, CURSOR_CELL_STYLE, CellErrorBoundary, DEFAULT_MIN_COLUMN_WIDTH, DateFilterContent, EmptyState, GRID_BORDER_RADIUS, GRID_CONTEXT_MENU_ITEMS, GRID_ROOT_STYLE, GridContextMenu, MAX_PAGE_BUTTONS, MarchingAntsOverlay, NOOP, OGridLayout, PAGE_SIZE_OPTIONS, POPOVER_ANCHOR_STYLE, PREVENT_DEFAULT, ROW_NUMBER_COLUMN_WIDTH, STOP_PROPAGATION, SideBar, StatusBar, UndoRedoStack, areGridRowPropsEqual, booleanParser, buildCsvHeader, buildCsvRows, buildHeaderRows, buildInlineEditorProps, buildPopoverEditorProps, clampSelectionToBounds, computeAggregations, computeAutoScrollSpeed, computeTabNavigation, createOGrid, currencyParser, dateParser, deriveFilterOptionsFromData, editorInputStyle, editorWrapperStyle, emailParser, escapeCsvValue, exportToCsv, findCtrlArrowTarget, flattenColumns, formatCellValueForTsv, formatSelectionAsTsv, formatShortcut, getCellInteractionProps, getCellRenderDescriptor, getCellValue, getColumnHeaderFilterStateParams, getColumnHeaderMenuItems, getContextMenuHandlers, getDataGridStatusBarConfig, getDateFilterContentProps, getFilterField, getHeaderFilterConfig, getMultiSelectFilterFields, getPaginationViewModel, getStatusBarParts, isInSelectionRange, isRowInRange, mergeFilter, normalizeSelectionRange, numberParser, parseTsvClipboard, parseValue, processClientSideData, rangesEqual, renderFilterContent, resolveCellDisplayContent, resolveCellStyle, richSelectDropdownStyle, richSelectNoMatchesStyle, richSelectOptionHighlightedStyle, richSelectOptionStyle, richSelectWrapperStyle, selectChevronStyle, selectDisplayStyle, selectEditorStyle, toUserLike, triggerCsvDownload, useActiveCell, useCellEditing, useCellSelection, useClipboard, useColumnChooserState, useColumnHeaderFilterState, useColumnMeta, useColumnReorder, useColumnResize, useContextMenu, useDataGridState, useDataGridTableOrchestration, useDateFilterState, useDebounce, useFillHandle, useFilterOptions, useInlineCellEditorState, useKeyboardNavigation, useLatestRef, useListVirtualizer, useMultiSelectFilterState, useOGrid, usePaginationControls, usePeopleFilterState, useRichSelectState, useRowSelection, useSelectState, useSideBarState, useTableLayout, useTextFilterState, useUndoRedo, useVirtualScroll } from '@alaarab/ogrid-react';
+import { createPortal } from 'react-dom';
+import { FilterList, FirstPage, ChevronLeft, ChevronRight, LastPage, ExpandLess, ExpandMore, ViewColumn, Clear, Search } from '@mui/icons-material';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/OGrid/OGrid.tsx
+var TextFilterPopover = ({
+  value,
+  onValueChange,
+  onApply,
+  onClear
+}) => /* @__PURE__ */ jsxs(Box, { sx: { width: 260 }, children: [
+  /* @__PURE__ */ jsx(Box, { sx: { p: 1.5 }, children: /* @__PURE__ */ jsx(
+    TextField,
+    {
+      placeholder: "Enter search term...",
+      value,
+      onChange: (e) => onValueChange(e.target.value),
+      onKeyDown: (e) => {
+        e.stopPropagation();
+        if (e.key === "Enter") {
+          e.preventDefault();
+          onApply();
+        }
+      },
+      autoComplete: "off",
+      size: "small",
+      fullWidth: true,
+      slotProps: {
+        input: {
+          startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(Search, { fontSize: "small" }) })
+        }
+      }
+    }
+  ) }),
+  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "flex-end", gap: 1, p: 1.5, pt: 0 }, children: [
+    /* @__PURE__ */ jsx(Button, { size: "small", disabled: !value, onClick: onClear, children: "Clear" }),
+    /* @__PURE__ */ jsx(Button, { size: "small", variant: "contained", onClick: onApply, children: "Apply" })
+  ] })
+] });
+TextFilterPopover.displayName = "TextFilterPopover";
+var ITEM_HEIGHT = 40;
+var MultiSelectFilterPopover = ({
+  searchText,
+  onSearchChange,
+  options,
+  filteredOptions,
+  selected,
+  onOptionToggle,
+  onSelectAll,
+  onClearSelection,
+  onApply,
+  isLoading
+}) => {
+  const virt = useListVirtualizer({ count: filteredOptions.length, itemHeight: ITEM_HEIGHT, containerHeight: 240 });
+  return /* @__PURE__ */ jsxs(Box, { sx: { width: 280 }, children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { p: 1.5, pb: 0.5 }, children: [
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          placeholder: "Search...",
+          value: searchText,
+          onChange: (e) => onSearchChange(e.target.value),
+          onKeyDown: (e) => e.stopPropagation(),
+          autoComplete: "off",
+          size: "small",
+          fullWidth: true,
+          slotProps: {
+            input: {
+              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(Search, { fontSize: "small" }) })
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", sx: { mt: 0.5, display: "block" }, children: [
+        filteredOptions.length,
+        " of ",
+        options.length,
+        " options"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", px: 1.5, py: 0.5 }, children: [
+      /* @__PURE__ */ jsxs(Button, { size: "small", onClick: onSelectAll, children: [
+        "Select All (",
+        filteredOptions.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx(Button, { size: "small", onClick: onClearSelection, children: "Clear" })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { ref: virt.containerRef, onScroll: virt.onScroll, sx: { maxHeight: 240, overflowY: "auto", px: 0.5 }, children: isLoading ? /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center", py: 2 }, children: /* @__PURE__ */ jsx(CircularProgress, { size: 24 }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { py: 2, textAlign: "center" }, children: "No options found" }) : /* @__PURE__ */ jsx(Box, { sx: { height: virt.totalHeight, position: "relative" }, children: virt.visibleItems.map(({ index, offsetTop }) => {
+      const option = filteredOptions[index];
+      return /* @__PURE__ */ jsx(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              size: "small",
+              checked: selected.has(option),
+              onChange: (e) => onOptionToggle(option, e.target.checked)
+            }
+          ),
+          label: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: option }),
+          sx: { position: "absolute", top: offsetTop, width: "100%", height: ITEM_HEIGHT, boxSizing: "border-box", display: "flex", alignItems: "center", mx: 0, "& .MuiFormControlLabel-label": { flex: 1, minWidth: 0 } }
+        },
+        option
+      );
+    }) }) }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "flex-end", gap: 1, p: 1.5, pt: 1, borderTop: 1, borderColor: "divider" }, children: [
+      /* @__PURE__ */ jsx(Button, { size: "small", onClick: onClearSelection, children: "Clear" }),
+      /* @__PURE__ */ jsx(Button, { size: "small", variant: "contained", onClick: onApply, children: "Apply" })
+    ] })
+  ] });
+};
+MultiSelectFilterPopover.displayName = "MultiSelectFilterPopover";
+var PeopleFilterPopover = ({
+  selectedUser,
+  searchText,
+  onSearchChange,
+  suggestions,
+  isLoading,
+  onUserSelect,
+  onClearUser,
+  inputRef
+}) => /* @__PURE__ */ jsxs(Box, { sx: { width: 300 }, children: [
+  selectedUser && /* @__PURE__ */ jsxs(Box, { sx: { p: 1.5, pb: 1, borderBottom: 1, borderColor: "divider" }, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Currently filtered by:" }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, mt: 0.5 }, children: [
+      /* @__PURE__ */ jsx(Avatar, { src: selectedUser.photo, alt: selectedUser.displayName, sx: { width: 32, height: 32 }, children: selectedUser.displayName?.[0] }),
+      /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", noWrap: true, children: selectedUser.displayName }),
+        /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", noWrap: true, children: selectedUser.email })
+      ] }),
+      /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: onClearUser, "aria-label": "Remove filter", children: /* @__PURE__ */ jsx(Clear, { fontSize: "small" }) })
+    ] })
+  ] }),
+  /* @__PURE__ */ jsx(Box, { sx: { p: 1.5, pb: 0.5 }, children: /* @__PURE__ */ jsx(
+    TextField,
+    {
+      inputRef,
+      placeholder: "Search for a person...",
+      value: searchText,
+      onChange: (e) => onSearchChange(e.target.value),
+      onKeyDown: (e) => e.stopPropagation(),
+      autoComplete: "off",
+      size: "small",
+      fullWidth: true,
+      slotProps: {
+        input: {
+          startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(Search, { fontSize: "small" }) })
+        }
+      }
+    }
+  ) }),
+  /* @__PURE__ */ jsx(Box, { sx: { maxHeight: 240, overflowY: "auto" }, children: isLoading && searchText.trim() ? /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center", py: 2 }, children: /* @__PURE__ */ jsx(CircularProgress, { size: 24 }) }) : suggestions.length === 0 && searchText.trim() ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { py: 2, textAlign: "center" }, children: "No results found" }) : searchText.trim() ? suggestions.map((user) => /* @__PURE__ */ jsxs(
+    Box,
+    {
+      onClick: () => onUserSelect(user),
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        px: 1.5,
+        py: 1,
+        cursor: "pointer",
+        "&:hover": { bgcolor: "action.hover" }
+      },
+      children: [
+        /* @__PURE__ */ jsx(Avatar, { src: user.photo, alt: user.displayName, sx: { width: 32, height: 32 }, children: user.displayName?.[0] }),
+        /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", noWrap: true, children: user.displayName }),
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", noWrap: true, children: user.email })
+        ] })
+      ]
+    },
+    user.id || user.email || user.displayName
+  )) : /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { py: 2, textAlign: "center" }, children: "Type to search..." }) }),
+  selectedUser && /* @__PURE__ */ jsx(Box, { sx: { p: 1.5, pt: 1, borderTop: 1, borderColor: "divider" }, children: /* @__PURE__ */ jsx(Button, { size: "small", fullWidth: true, onClick: onClearUser, children: "Clear Filter" }) })
+] });
+PeopleFilterPopover.displayName = "PeopleFilterPopover";
+var materialRenderers = {
+  renderMultiSelect: (p) => /* @__PURE__ */ jsx(
+    MultiSelectFilterPopover,
+    {
+      searchText: p.searchText,
+      onSearchChange: p.onSearchChange,
+      options: p.options,
+      filteredOptions: p.filteredOptions,
+      selected: p.selected,
+      onOptionToggle: p.onOptionToggle,
+      onSelectAll: p.onSelectAll,
+      onClearSelection: p.onClearSelection,
+      onApply: p.onApply,
+      isLoading: p.isLoading
+    }
+  ),
+  renderText: (p) => /* @__PURE__ */ jsx(
+    TextFilterPopover,
+    {
+      value: p.value,
+      onValueChange: p.onValueChange,
+      onApply: p.onApply,
+      onClear: p.onClear
+    }
+  ),
+  renderPeople: (p) => /* @__PURE__ */ jsx(
+    PeopleFilterPopover,
+    {
+      selectedUser: p.selectedUser,
+      searchText: p.searchText,
+      onSearchChange: p.onSearchChange,
+      suggestions: p.suggestions,
+      isLoading: p.isLoading,
+      onUserSelect: p.onUserSelect,
+      onClearUser: p.onClearUser,
+      inputRef: p.inputRef
+    }
+  ),
+  renderDate: (p) => /* @__PURE__ */ jsxs(Box, { sx: { p: 1.5, display: "flex", flexDirection: "column", gap: 1 }, children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { minWidth: 36 }, children: "From:" }),
+      /* @__PURE__ */ jsx("input", { type: "date", value: p.tempDateFrom, onChange: (e) => p.setTempDateFrom(e.target.value), style: { flex: 1, padding: "4px 6px" } })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { minWidth: 36 }, children: "To:" }),
+      /* @__PURE__ */ jsx("input", { type: "date", value: p.tempDateTo, onChange: (e) => p.setTempDateTo(e.target.value), style: { flex: 1, padding: "4px 6px" } })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "flex-end", gap: 1, mt: 0.5 }, children: [
+      /* @__PURE__ */ jsx("button", { onClick: p.onClear, disabled: !p.tempDateFrom && !p.tempDateTo, style: { padding: "4px 12px", cursor: "pointer" }, children: "Clear" }),
+      /* @__PURE__ */ jsx("button", { onClick: p.onApply, style: { padding: "4px 12px", cursor: "pointer" }, children: "Apply" })
+    ] })
+  ] })
+};
+var ColumnHeaderFilter = React3.memo((props) => {
+  const {
+    columnName,
+    filterType,
+    options = [],
+    isLoadingOptions = false,
+    selectedUser
+  } = props;
+  const state = useColumnHeaderFilterState(getColumnHeaderFilterStateParams(props));
+  const {
+    headerRef,
+    isFilterOpen,
+    setFilterOpen,
+    hasActiveFilter,
+    popoverPosition,
+    handlers
+  } = state;
+  return /* @__PURE__ */ jsxs(Box, { ref: headerRef, sx: { display: "flex", alignItems: "center", width: "100%", minWidth: 0 }, children: [
+    /* @__PURE__ */ jsx(Box, { sx: { flex: 1, minWidth: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx(Tooltip, { title: columnName, arrow: true, children: /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "body2",
+        fontWeight: 600,
+        noWrap: true,
+        "data-header-label": true,
+        sx: { lineHeight: 1.4 },
+        children: columnName
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", ml: 0.5, flexShrink: 0 }, children: filterType !== "none" && /* @__PURE__ */ jsxs(
+      IconButton,
+      {
+        size: "small",
+        onClick: handlers.handleFilterIconClick,
+        "aria-label": `Filter ${columnName}`,
+        title: `Filter ${columnName}`,
+        color: hasActiveFilter || isFilterOpen ? "primary" : "default",
+        sx: { p: 0.25, position: "relative" },
+        children: [
+          /* @__PURE__ */ jsx(FilterList, { sx: { fontSize: 16 } }),
+          hasActiveFilter && /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                position: "absolute",
+                top: 2,
+                right: 2,
+                width: 6,
+                height: 6,
+                borderRadius: "50%",
+                bgcolor: "primary.main"
+              }
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        open: isFilterOpen && filterType !== "none",
+        onClose: () => setFilterOpen(false),
+        anchorReference: "anchorPosition",
+        anchorPosition: popoverPosition ?? { top: 0, left: 0 },
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        transformOrigin: { vertical: "top", horizontal: "left" },
+        slotProps: {
+          paper: {
+            sx: { mt: 0.5, overflow: "visible" },
+            onClick: (e) => e.stopPropagation()
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(Box, { sx: { borderBottom: 1, borderColor: "divider", px: 1.5, py: 1 }, children: /* @__PURE__ */ jsxs(Typography, { variant: "subtitle2", children: [
+            "Filter: ",
+            columnName
+          ] }) }),
+          renderFilterContent(filterType, state, options ?? [], isLoadingOptions, selectedUser, materialRenderers)
+        ]
+      }
+    )
+  ] });
+});
+ColumnHeaderFilter.displayName = "ColumnHeaderFilter";
+function ColumnHeaderMenu(props) {
+  const {
+    isOpen,
+    anchorElement,
+    onClose,
+    onPinLeft,
+    onPinRight,
+    onUnpin,
+    onSortAsc,
+    onSortDesc,
+    onClearSort,
+    onAutosizeThis,
+    onAutosizeAll,
+    canPinLeft,
+    canPinRight,
+    canUnpin,
+    currentSort,
+    isSortable,
+    isResizable
+  } = props;
+  const [anchorPosition, setAnchorPosition] = useState(void 0);
+  useEffect(() => {
+    if (isOpen && anchorElement) {
+      const rect = anchorElement.getBoundingClientRect();
+      setAnchorPosition({
+        top: rect.bottom + 4,
+        left: rect.left
+      });
+    } else {
+      setAnchorPosition(void 0);
+    }
+  }, [isOpen, anchorElement]);
+  const menuInput = useMemo(
+    () => ({
+      canPinLeft,
+      canPinRight,
+      canUnpin,
+      currentSort,
+      isSortable,
+      isResizable
+    }),
+    [canPinLeft, canPinRight, canUnpin, currentSort, isSortable, isResizable]
+  );
+  const items = useMemo(() => getColumnHeaderMenuItems(menuInput), [menuInput]);
+  const handlers = useMemo(
+    () => ({
+      pinLeft: onPinLeft,
+      pinRight: onPinRight,
+      unpin: onUnpin,
+      sortAsc: onSortAsc,
+      sortDesc: onSortDesc,
+      clearSort: onClearSort,
+      autosizeThis: onAutosizeThis,
+      autosizeAll: onAutosizeAll
+    }),
+    [onPinLeft, onPinRight, onUnpin, onSortAsc, onSortDesc, onClearSort, onAutosizeThis, onAutosizeAll]
+  );
+  return /* @__PURE__ */ jsx(
+    Menu,
+    {
+      open: isOpen && !!anchorPosition,
+      onClose,
+      anchorReference: "anchorPosition",
+      anchorPosition,
+      slotProps: {
+        paper: {
+          sx: {
+            minWidth: 140
+          }
+        }
+      },
+      children: items.flatMap((item, idx) => {
+        const elements = [
+          /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              disabled: item.disabled,
+              onClick: () => {
+                handlers[item.id]();
+                onClose();
+              },
+              children: item.label
+            },
+            item.id
+          )
+        ];
+        if (item.divider && idx < items.length - 1) {
+          elements.push(/* @__PURE__ */ jsx(Divider, {}, `${item.id}-divider`));
+        }
+        return elements;
+      })
+    }
+  );
+}
+function InlineCellEditor(props) {
+  return /* @__PURE__ */ jsx(
+    BaseInlineCellEditor,
+    {
+      ...props,
+      renderCheckbox: (checked, onCommit, onCancel) => /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked,
+          onChange: (_, c) => onCommit(c),
+          onKeyDown: (e) => e.key === "Escape" && (e.preventDefault(), onCancel()),
+          size: "small"
+        }
+      )
+    }
+  );
+}
+var partSx = (isLast) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 0.5,
+  ...isLast ? {} : { mr: 2, "&::after": { content: '"|"', ml: 2, color: "divider" } }
+});
+function StatusBar(props) {
+  const parts = getStatusBarParts(props);
+  return /* @__PURE__ */ jsx(Box, { role: "status", "aria-live": "polite", sx: { mt: "auto", px: 1.5, py: 0.75, borderTop: 1, borderColor: "divider", bgcolor: "action.hover" }, children: parts.map((p, i) => /* @__PURE__ */ jsxs(Typography, { component: "span", variant: "body2", sx: partSx(i === parts.length - 1), children: [
+    /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", children: p.label }),
+    /* @__PURE__ */ jsx(Typography, { component: "span", fontWeight: 600, children: p.value.toLocaleString() })
+  ] }, p.key)) });
+}
+function GridContextMenu(props) {
+  const { x, y, hasSelection, canUndo, canRedo, onClose } = props;
+  const handlers = React3.useMemo(() => getContextMenuHandlers(props), [props]);
+  const isDisabled = React3.useCallback(
+    (item) => {
+      if (item.disabledWhenNoSelection && !hasSelection) return true;
+      if (item.id === "undo" && !canUndo) return true;
+      if (item.id === "redo" && !canRedo) return true;
+      return false;
+    },
+    [hasSelection, canUndo, canRedo]
+  );
+  return /* @__PURE__ */ jsx(
+    Menu,
+    {
+      open: true,
+      onClose,
+      anchorReference: "anchorPosition",
+      anchorPosition: { top: y, left: x },
+      MenuListProps: { dense: true, "aria-label": "Grid context menu" },
+      children: GRID_CONTEXT_MENU_ITEMS.flatMap((item) => {
+        const elements = [];
+        if (item.dividerBefore) {
+          elements.push(/* @__PURE__ */ jsx(Divider, {}, `${item.id}-divider`));
+        }
+        elements.push(
+          /* @__PURE__ */ jsxs(
+            MenuItem,
+            {
+              onClick: handlers[item.id],
+              disabled: isDisabled(item),
+              children: [
+                /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: item.label }),
+                item.shortcut && /* @__PURE__ */ jsx("span", { style: { marginLeft: 24, color: "var(--ogrid-fg-muted, rgba(0,0,0,0.4))", fontSize: "0.8em" }, children: formatShortcut(item.shortcut) })
+              ]
+            },
+            item.id
+          )
+        );
+        return elements;
+      })
+    }
+  );
+}
+var EMPTY_STATE_SX = { py: 4, px: 2, textAlign: "center", borderTop: 1, borderColor: "divider", bgcolor: "action.hover" };
+function EmptyState({ emptyState }) {
+  return /* @__PURE__ */ jsx(Box, { sx: EMPTY_STATE_SX, children: emptyState.render ? emptyState.render() : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: "No results found" }),
+    /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: emptyState.message != null ? emptyState.message : emptyState.hasActiveFilters ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      "No items match your current filters. Try adjusting your search or",
+      " ",
+      /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", onClick: emptyState.onClearAll, children: "clear all filters" }),
+      " ",
+      "to see all items."
+    ] }) : "There are no items available at this time." })
+  ] }) });
+}
+var LOADING_OVERLAY_SX = {
+  position: "absolute",
+  inset: 0,
+  zIndex: 2,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: "var(--ogrid-loading-bg, rgba(255,255,255,0.7))"
+};
+var LOADING_INNER_SX = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: 1,
+  p: 2,
+  bgcolor: "background.paper",
+  border: 1,
+  borderColor: "divider",
+  borderRadius: 1
+};
+function LoadingOverlay({ message }) {
+  return /* @__PURE__ */ jsx(Box, { sx: LOADING_OVERLAY_SX, children: /* @__PURE__ */ jsxs(Box, { sx: LOADING_INNER_SX, children: [
+    /* @__PURE__ */ jsx(CircularProgress, { size: 24 }),
+    /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: message })
+  ] }) });
+}
+function DropIndicator({ dropIndicatorX, wrapperLeft }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        width: 3,
+        bgcolor: "var(--ogrid-primary, #217346)",
+        pointerEvents: "none",
+        zIndex: 100,
+        transition: "left 0.05s",
+        left: dropIndicatorX - wrapperLeft
+      }
+    }
+  );
+}
+var gridRootSx = { position: "relative", flex: 1, minHeight: 0, display: "flex", flexDirection: "column" };
+var EDITING_CELL_STYLE = {
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  boxSizing: "border-box",
+  outline: "2px solid var(--ogrid-selection-color, #217346)",
+  outlineOffset: "-1px",
+  zIndex: 2,
+  position: "relative",
+  background: "var(--ogrid-bg, #fff)",
+  overflow: "visible",
+  padding: 0
+};
+var CHECKBOX_CELL_SX = { width: CHECKBOX_COLUMN_WIDTH, minWidth: CHECKBOX_COLUMN_WIDTH, maxWidth: CHECKBOX_COLUMN_WIDTH, textAlign: "center" };
+var CHECKBOX_PLACEHOLDER_SX = { width: CHECKBOX_COLUMN_WIDTH, minWidth: CHECKBOX_COLUMN_WIDTH, p: 0 };
+var CHECKBOX_TD_STYLE = {
+  width: CHECKBOX_COLUMN_WIDTH,
+  minWidth: CHECKBOX_COLUMN_WIDTH,
+  maxWidth: CHECKBOX_COLUMN_WIDTH,
+  textAlign: "center",
+  padding: 0,
+  position: "relative",
+  height: "1px",
+  borderBottom: "1px solid var(--ogrid-border, rgba(224,224,224,1))"
+};
+var HEADER_BG = "var(--ogrid-header-bg, #f5f5f5)";
+var STICKY_HEADER_SX = {
+  /* Removed position: 'sticky', top: 0 - breaks horizontal sticky on pinned columns.
+     Instead, apply sticky to individual header cells (HEADER_BASE_SX). */
+  zIndex: 8,
+  bgcolor: HEADER_BG,
+  "& th": { bgcolor: HEADER_BG }
+};
+var HEADER_ROW_SX = { bgcolor: HEADER_BG };
+var GROUP_HEADER_CELL_SX = { textAlign: "center", fontWeight: 600, borderBottom: 2, borderColor: "divider", py: 0.75 };
+function getDensityPadding(density) {
+  switch (density) {
+    case "compact":
+      return { px: "8px", py: "4px" };
+    case "comfortable":
+      return { px: "16px", py: "12px" };
+    default:
+      return { px: "10px", py: "6px" };
+  }
+}
+var DENSITY_CELL_STYLES = {
+  compact: { padding: "4px 8px" },
+  normal: { padding: "6px 10px" },
+  comfortable: { padding: "12px 16px" }
+};
+var HEADER_BASE_SX = {
+  fontWeight: 600,
+  position: "sticky",
+  /* Enables vertical sticky for all headers */
+  top: 0,
+  /* Sticky vertically */
+  zIndex: 8,
+  /* Stack above body cells */
+  bgcolor: HEADER_BG
+  /* Opaque — required for sticky overlap */
+};
+var HEADER_PINNED_LEFT_SX = {
+  ...HEADER_BASE_SX,
+  position: "sticky",
+  left: 0,
+  top: 0,
+  zIndex: 10,
+  bgcolor: HEADER_BG,
+  willChange: "transform",
+  borderRight: "1px solid",
+  borderRightColor: "divider",
+  boxShadow: "2px 0 4px -1px rgba(0,0,0,0.1)"
+};
+var HEADER_PINNED_RIGHT_SX = {
+  ...HEADER_BASE_SX,
+  position: "sticky",
+  right: 0,
+  top: 0,
+  zIndex: 10,
+  bgcolor: HEADER_BG,
+  willChange: "transform",
+  borderLeft: "1px solid",
+  borderLeftColor: "divider",
+  boxShadow: "-2px 0 4px -1px rgba(0,0,0,0.1)"
+};
+var HEADER_BASE_NO_STICKY_SX = {
+  fontWeight: 600,
+  zIndex: 8,
+  bgcolor: HEADER_BG
+};
+var HEADER_PINNED_LEFT_NO_STICKY_SX = {
+  ...HEADER_BASE_NO_STICKY_SX,
+  position: "sticky",
+  left: 0,
+  zIndex: 10,
+  bgcolor: HEADER_BG,
+  willChange: "transform",
+  borderRight: "1px solid",
+  borderRightColor: "divider",
+  boxShadow: "2px 0 4px -1px rgba(0,0,0,0.1)"
+};
+var HEADER_PINNED_RIGHT_NO_STICKY_SX = {
+  ...HEADER_BASE_NO_STICKY_SX,
+  position: "sticky",
+  right: 0,
+  zIndex: 10,
+  bgcolor: HEADER_BG,
+  willChange: "transform",
+  borderLeft: "1px solid",
+  borderLeftColor: "divider",
+  boxShadow: "-2px 0 4px -1px rgba(0,0,0,0.1)"
+};
+var RESIZE_HANDLE_SX = {
+  position: "absolute",
+  top: 0,
+  right: "-3px",
+  bottom: 0,
+  width: "8px",
+  cursor: "col-resize",
+  userSelect: "none",
+  "&::after": { content: '""', position: "absolute", top: 0, right: "3px", bottom: 0, width: "2px" },
+  "&:hover::after": { bgcolor: "primary.main" },
+  "&:active::after": { bgcolor: "primary.dark" }
+};
+var POPOVER_ANCHOR_SX = { minHeight: "100%", minWidth: 40 };
+var POPOVER_CONTENT_SX = { p: 1 };
+var WRAPPER_SCROLL_SX = { display: "flex", flexDirection: "column", minHeight: "100%" };
+var HEADER_CONTENT_FLEX_SX = { display: "flex", alignItems: "center", gap: 0.5 };
+var COLUMN_OPTIONS_BUTTON_SX = {
+  background: "transparent",
+  border: "none",
+  cursor: "pointer",
+  padding: "2px 4px",
+  fontSize: "16px",
+  lineHeight: 1,
+  color: "text.secondary",
+  opacity: 1,
+  transition: "background-color 0.15s",
+  borderRadius: "3px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  minWidth: "20px",
+  height: "20px",
+  "&:hover": {
+    bgcolor: "action.hover"
+  }
+};
+var TABLE_WRAPPER_SX = { position: "relative", opacity: 1 };
+var TABLE_WRAPPER_LOADING_SX = { position: "relative", opacity: 0.6 };
+function GridRowInner(props) {
+  const {
+    item,
+    rowIndex,
+    rowId,
+    isSelected,
+    columnLayouts,
+    renderCellContent,
+    handleSingleRowClick,
+    handleRowCheckboxChange,
+    lastMouseShiftRef,
+    hasCheckboxCol,
+    hasRowNumbersCol,
+    rowNumberOffset,
+    rowHeight
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    "tr",
+    {
+      "data-row-id": rowId,
+      onClick: handleSingleRowClick,
+      "aria-selected": isSelected || void 0,
+      className: `ogrid-mat-row${isSelected ? " ogrid-mat-row--selected" : ""}`,
+      style: rowHeight ? { height: rowHeight } : void 0,
+      children: [
+        hasCheckboxCol && /* @__PURE__ */ jsx("td", { style: CHECKBOX_TD_STYLE, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-row-index": rowIndex,
+            "data-col-index": 0,
+            onClick: STOP_PROPAGATION,
+            className: "ogrid-mat-checkbox-wrapper",
+            children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: isSelected,
+                onChange: (_, checked) => handleRowCheckboxChange(rowId, checked, rowIndex, lastMouseShiftRef.current),
+                size: "small",
+                "aria-label": `Select row ${rowIndex + 1}`
+              }
+            )
+          }
+        ) }),
+        hasRowNumbersCol && /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: "ogrid-mat-td ogrid-mat-row-number",
+            style: {
+              width: ROW_NUMBER_COLUMN_WIDTH,
+              minWidth: ROW_NUMBER_COLUMN_WIDTH,
+              maxWidth: ROW_NUMBER_COLUMN_WIDTH,
+              left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
+              borderBottom: "1px solid var(--ogrid-border, rgba(224,224,224,1))"
+            },
+            children: rowNumberOffset + rowIndex + 1
+          }
+        ),
+        columnLayouts.map((cl, colIdx) => /* @__PURE__ */ jsx(
+          "td",
+          {
+            "data-column-id": cl.col.columnId,
+            className: cl.tdClassName,
+            style: { ...cl.tdStyle, minWidth: cl.minWidth, width: cl.width, maxWidth: cl.maxWidth },
+            children: renderCellContent(item, cl.col, rowIndex, colIdx)
+          },
+          cl.col.columnId
+        ))
+      ]
+    }
+  );
+}
+var GridRow = React3.memo(GridRowInner, areGridRowPropsEqual);
+function DataGridTableInner(props) {
+  const o = useDataGridTableOrchestration({ props });
+  const {
+    wrapperRef,
+    tableContainerRef,
+    lastMouseShiftRef,
+    interaction,
+    pinning,
+    handleResizeStart,
+    getColumnWidth,
+    isReorderDragging,
+    dropIndicatorX,
+    handleHeaderMouseDown,
+    virtualScrollEnabled,
+    visibleRange,
+    items,
+    getRowId,
+    emptyState,
+    suppressHorizontalScroll,
+    isLoading,
+    loadingMessage,
+    ariaLabel,
+    ariaLabelledBy,
+    columnReorder,
+    density,
+    rowHeight,
+    rowNumberOffset,
+    headerRows,
+    allowOverflowX,
+    fitToContent,
+    editCallbacks,
+    interactionHandlers,
+    cellDescriptorInputRef,
+    pendingEditorValueRef,
+    popoverAnchorElRef,
+    handleSingleRowClick,
+    handlePasteVoid,
+    visibleCols,
+    hasCheckboxCol,
+    hasRowNumbersCol,
+    colOffset,
+    minTableWidth,
+    columnSizingOverrides,
+    measuredColumnWidths,
+    selectedRowIds,
+    handleRowCheckboxChange,
+    handleSelectAll,
+    allSelected,
+    someSelected,
+    editingCell,
+    setPopoverAnchorEl,
+    cancelPopoverEdit,
+    setActiveCell,
+    selectionRange,
+    hasCellSelection,
+    handleGridKeyDown,
+    handleFillHandleMouseDown,
+    handleCopy,
+    handleCut,
+    cutRange,
+    copyRange,
+    canUndo,
+    canRedo,
+    onUndo,
+    onRedo,
+    isDragging,
+    menuPosition,
+    closeContextMenu,
+    headerFilterInput,
+    statusBarConfig,
+    showEmptyInGrid,
+    onCellError,
+    headerMenu
+  } = o;
+  const densityPadding = useMemo(() => getDensityPadding(density), [density]);
+  const headerCellSx = useMemo(() => ({ px: densityPadding.px, py: densityPadding.py }), [densityPadding]);
+  const columnMeta = useColumnMeta({
+    visibleCols,
+    getColumnWidth,
+    columnSizingOverrides,
+    measuredColumnWidths,
+    pinnedColumns: pinning.pinnedColumns,
+    leftOffsets: pinning.leftOffsets,
+    rightOffsets: pinning.rightOffsets,
+    pinnedColLeftClass: "",
+    pinnedColRightClass: ""
+  });
+  const columnLayouts = useMemo(
+    () => visibleCols.map((col) => {
+      const isPinnedLeft = pinning.pinnedColumns[col.columnId] === "left";
+      const isPinnedRight = pinning.pinnedColumns[col.columnId] === "right";
+      let tdClassName = "ogrid-mat-td";
+      const tdStyle = {};
+      if (isPinnedLeft) {
+        tdClassName += " ogrid-mat-td--pinned-left";
+        if (pinning.leftOffsets[col.columnId] != null) tdStyle.left = pinning.leftOffsets[col.columnId];
+      } else if (isPinnedRight) {
+        tdClassName += " ogrid-mat-td--pinned-right";
+        if (pinning.rightOffsets[col.columnId] != null) tdStyle.right = pinning.rightOffsets[col.columnId];
+      }
+      const cellMeta = columnMeta.cellStyles[col.columnId];
+      return {
+        col,
+        tdClassName,
+        tdStyle,
+        minWidth: cellMeta?.minWidth ?? 0,
+        width: cellMeta?.width ?? getColumnWidth(col),
+        maxWidth: cellMeta?.maxWidth ?? getColumnWidth(col)
+      };
+    }),
+    [visibleCols, columnMeta, pinning.pinnedColumns, pinning.leftOffsets, pinning.rightOffsets, getColumnWidth]
+  );
+  const wrapperSx = useMemo(() => ({
+    position: "relative",
+    flex: 1,
+    minHeight: isLoading && items.length === 0 ? 200 : 0,
+    width: fitToContent ? "fit-content" : "100%",
+    maxWidth: "100%",
+    overflowX: suppressHorizontalScroll ? "hidden" : allowOverflowX ? "auto" : "hidden",
+    overflowY: "auto",
+    bgcolor: "background.paper",
+    willChange: "scroll-position"
+  }), [fitToContent, suppressHorizontalScroll, allowOverflowX, isLoading, items.length]);
+  const cellDensityStyle = DENSITY_CELL_STYLES[density] ?? DENSITY_CELL_STYLES.normal;
+  const renderCellContent = useCallback(
+    (item, col, rowIndex, colIdx) => {
+      const descriptor = getCellRenderDescriptor(item, col, rowIndex, colIdx, cellDescriptorInputRef.current);
+      const rowId = getRowId(item);
+      let cellContent;
+      if (descriptor.mode === "editing-inline") {
+        cellContent = /* @__PURE__ */ jsx("div", { style: EDITING_CELL_STYLE, children: /* @__PURE__ */ jsx(InlineCellEditor, { ...buildInlineEditorProps(item, col, descriptor, editCallbacks) }) });
+      } else if (descriptor.mode === "editing-popover" && typeof col.cellEditor === "function") {
+        const editorProps = buildPopoverEditorProps(item, col, descriptor, pendingEditorValueRef.current, editCallbacks);
+        const CustomEditor = col.cellEditor;
+        cellContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Box, { ref: (el) => {
+            if (el) setPopoverAnchorEl(el);
+          }, sx: POPOVER_ANCHOR_SX, "aria-hidden": true }),
+          /* @__PURE__ */ jsx(
+            Popover,
+            {
+              open: !!popoverAnchorElRef.current,
+              anchorEl: popoverAnchorElRef.current,
+              onClose: cancelPopoverEdit,
+              anchorOrigin: { vertical: "bottom", horizontal: "left" },
+              transformOrigin: { vertical: "top", horizontal: "left" },
+              children: /* @__PURE__ */ jsx(Box, { sx: POPOVER_CONTENT_SX, children: /* @__PURE__ */ jsx(CustomEditor, { ...editorProps }) })
+            }
+          )
+        ] });
+      } else {
+        const content = resolveCellDisplayContent(col, item, descriptor.displayValue);
+        const cellStyle = resolveCellStyle(col, item);
+        const styledContent = cellStyle ? /* @__PURE__ */ jsx("span", { style: cellStyle, children: content }) : content;
+        let cls = "ogrid-mat-cell";
+        if (col.type === "numeric") cls += " ogrid-mat-cell--numeric";
+        else if (col.type === "boolean") cls += " ogrid-mat-cell--boolean";
+        if (descriptor.canEditAny) cls += " ogrid-mat-cell--editable";
+        if (descriptor.isActive && !descriptor.isInRange) cls += " ogrid-mat-cell--active";
+        if (descriptor.isInRange) cls += " ogrid-mat-cell--range";
+        if (descriptor.isInCutRange) cls += " ogrid-mat-cell--cut";
+        const interactionProps = getCellInteractionProps(descriptor, col.columnId, interactionHandlers);
+        cellContent = /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cls,
+            ...interactionProps,
+            style: cellDensityStyle,
+            children: [
+              styledContent,
+              descriptor.canEditAny && descriptor.isSelectionEndCell && /* @__PURE__ */ jsx("div", { className: "ogrid-mat-fill-handle", onMouseDown: handleFillHandleMouseDown, "aria-label": "Fill handle" })
+            ]
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(CellErrorBoundary, { onError: onCellError, children: cellContent }, `${rowId}-${col.columnId}`);
+    },
+    [editCallbacks, interactionHandlers, handleFillHandleMouseDown, setPopoverAnchorEl, cancelPopoverEdit, getRowId, onCellError, cellDescriptorInputRef, cellDensityStyle, pendingEditorValueRef, popoverAnchorElRef]
+  );
+  return /* @__PURE__ */ jsxs(Box, { sx: gridRootSx, children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ref: wrapperRef,
+        tabIndex: 0,
+        role: "region",
+        "aria-label": ariaLabel ?? (ariaLabelledBy ? void 0 : "Data grid"),
+        "aria-labelledby": ariaLabelledBy,
+        onMouseDown: (e) => {
+          lastMouseShiftRef.current = e.shiftKey;
+        },
+        onKeyDown: handleGridKeyDown,
+        onContextMenu: PREVENT_DEFAULT,
+        "data-overflow-x": allowOverflowX ? "true" : "false",
+        "data-density": density,
+        className: "ogrid-mat-wrapper",
+        sx: wrapperSx,
+        children: [
+          /* @__PURE__ */ jsx(Box, { sx: WRAPPER_SCROLL_SX, children: /* @__PURE__ */ jsx("div", { style: { minWidth: allowOverflowX ? minTableWidth : void 0 }, children: /* @__PURE__ */ jsxs(Box, { ref: tableContainerRef, sx: isLoading && items.length > 0 ? TABLE_WRAPPER_LOADING_SX : TABLE_WRAPPER_SX, children: [
+            /* @__PURE__ */ jsxs(
+              Table,
+              {
+                size: "small",
+                sx: { minWidth: minTableWidth, borderCollapse: "separate", borderSpacing: 0 },
+                children: [
+                  /* @__PURE__ */ jsx(TableHead, { sx: STICKY_HEADER_SX, children: headerRows.map((row, rowIdx) => /* @__PURE__ */ jsxs(TableRow, { sx: HEADER_ROW_SX, children: [
+                    rowIdx === headerRows.length - 1 && hasCheckboxCol && /* @__PURE__ */ jsx(
+                      TableCell,
+                      {
+                        ...{ padding: "checkbox", rowSpan: headerRows.length > 1 ? 1 : void 0, sx: CHECKBOX_CELL_SX },
+                        children: /* @__PURE__ */ jsx(
+                          Checkbox,
+                          {
+                            checked: allSelected,
+                            indeterminate: someSelected,
+                            onChange: (_, c) => handleSelectAll(!!c),
+                            size: "small",
+                            "aria-label": "Select all rows"
+                          }
+                        )
+                      }
+                    ),
+                    rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol && /* @__PURE__ */ jsx(TableCell, { ...{ rowSpan: headerRows.length - 1, sx: CHECKBOX_PLACEHOLDER_SX } }),
+                    rowIdx === headerRows.length - 1 && hasRowNumbersCol && /* @__PURE__ */ jsx(
+                      TableCell,
+                      {
+                        ...{
+                          component: "th",
+                          scope: "col",
+                          rowSpan: headerRows.length > 1 ? 1 : void 0,
+                          sx: {
+                            width: ROW_NUMBER_COLUMN_WIDTH,
+                            minWidth: ROW_NUMBER_COLUMN_WIDTH,
+                            maxWidth: ROW_NUMBER_COLUMN_WIDTH,
+                            textAlign: "center",
+                            fontWeight: 600,
+                            backgroundColor: HEADER_BG,
+                            position: "sticky",
+                            left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
+                            zIndex: 4,
+                            ...headerCellSx
+                          }
+                        },
+                        children: "#"
+                      }
+                    ),
+                    rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol && /* @__PURE__ */ jsx(
+                      TableCell,
+                      {
+                        ...{
+                          rowSpan: headerRows.length - 1,
+                          sx: {
+                            width: ROW_NUMBER_COLUMN_WIDTH,
+                            minWidth: ROW_NUMBER_COLUMN_WIDTH,
+                            position: "sticky",
+                            left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
+                            zIndex: 4,
+                            backgroundColor: "background.paper"
+                          }
+                        }
+                      }
+                    ),
+                    row.map((cell, cellIdx) => {
+                      if (cell.isGroup) {
+                        return /* @__PURE__ */ jsx(
+                          TableCell,
+                          {
+                            ...{
+                              colSpan: cell.colSpan,
+                              component: "th",
+                              scope: "colgroup",
+                              sx: GROUP_HEADER_CELL_SX
+                            },
+                            children: cell.label
+                          },
+                          cellIdx
+                        );
+                      }
+                      if (!cell.columnDef) return null;
+                      const col = cell.columnDef;
+                      const isPinnedLeft = pinning.pinnedColumns[col.columnId] === "left";
+                      const isPinnedRight = pinning.pinnedColumns[col.columnId] === "right";
+                      const baseHeaderSx = o.stickyHeader ? isPinnedLeft ? HEADER_PINNED_LEFT_SX : isPinnedRight ? HEADER_PINNED_RIGHT_SX : HEADER_BASE_SX : isPinnedLeft ? HEADER_PINNED_LEFT_NO_STICKY_SX : isPinnedRight ? HEADER_PINNED_RIGHT_NO_STICKY_SX : HEADER_BASE_NO_STICKY_SX;
+                      const headerSx = isPinnedLeft && pinning.leftOffsets[col.columnId] != null ? { ...baseHeaderSx, left: pinning.leftOffsets[col.columnId] } : isPinnedRight && pinning.rightOffsets[col.columnId] != null ? { ...baseHeaderSx, right: pinning.rightOffsets[col.columnId] } : baseHeaderSx;
+                      const hdrStyle = columnMeta.hdrStyles[col.columnId];
+                      const isSorted = props.sortBy === col.columnId;
+                      const ariaSort = isSorted ? props.sortDirection === "asc" ? "ascending" : "descending" : void 0;
+                      return /* @__PURE__ */ jsxs(
+                        TableCell,
+                        {
+                          ...{
+                            component: "th",
+                            scope: "col",
+                            "data-column-id": col.columnId,
+                            rowSpan: headerRows.length > 1 ? headerRows.length - rowIdx : void 0,
+                            "aria-sort": ariaSort,
+                            sx: {
+                              ...headerSx,
+                              ...headerCellSx,
+                              minWidth: hdrStyle?.minWidth,
+                              width: hdrStyle?.width,
+                              maxWidth: hdrStyle?.maxWidth,
+                              ...columnReorder ? { cursor: isReorderDragging ? "grabbing" : "grab" } : {},
+                              "&:focus-visible": {
+                                outline: "2px solid",
+                                outlineColor: "primary.main",
+                                outlineOffset: "-2px",
+                                zIndex: 11
+                              }
+                            },
+                            onMouseDown: columnReorder ? (e) => handleHeaderMouseDown(col.columnId, e) : void 0
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxs(Box, { sx: HEADER_CONTENT_FLEX_SX, children: [
+                              /* @__PURE__ */ jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInput) }),
+                              /* @__PURE__ */ jsx(
+                                Box,
+                                {
+                                  component: "button",
+                                  onClick: (e) => {
+                                    e.stopPropagation();
+                                    headerMenu.open(col.columnId, e.currentTarget);
+                                  },
+                                  "aria-label": "Column options",
+                                  title: "Column options",
+                                  sx: COLUMN_OPTIONS_BUTTON_SX,
+                                  children: "\u22EE"
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsx(Box, { onMouseDown: (e) => {
+                              setActiveCell(null);
+                              interaction.setSelectionRange(null);
+                              wrapperRef.current?.focus({ preventScroll: true });
+                              handleResizeStart(e, col);
+                            }, sx: RESIZE_HANDLE_SX })
+                          ]
+                        },
+                        col.columnId
+                      );
+                    })
+                  ] }, rowIdx)) }),
+                  !showEmptyInGrid && /* @__PURE__ */ jsxs("tbody", { className: "ogrid-mat-tbody", children: [
+                    virtualScrollEnabled && visibleRange.offsetTop > 0 && /* @__PURE__ */ jsx("tr", { style: { height: visibleRange.offsetTop }, "aria-hidden": true }),
+                    virtualScrollEnabled ? items.slice(visibleRange.startIndex, visibleRange.endIndex + 1).map((item, i) => {
+                      const rowIndex = visibleRange.startIndex + i;
+                      const rowIdStr = getRowId(item);
+                      return /* @__PURE__ */ jsx(
+                        GridRow,
+                        {
+                          item,
+                          rowIndex,
+                          rowId: rowIdStr,
+                          isSelected: selectedRowIds.has(rowIdStr),
+                          columnLayouts,
+                          renderCellContent,
+                          handleSingleRowClick,
+                          handleRowCheckboxChange,
+                          lastMouseShiftRef,
+                          hasCheckboxCol,
+                          hasRowNumbersCol,
+                          rowNumberOffset,
+                          selectionRange,
+                          activeCell: interaction.activeCell,
+                          cutRange,
+                          copyRange,
+                          isDragging,
+                          rowHeight,
+                          editingRowId: editingCell?.rowId ?? null
+                        },
+                        rowIdStr
+                      );
+                    }) : items.map((item, rowIndex) => {
+                      const rowIdStr = getRowId(item);
+                      return /* @__PURE__ */ jsx(
+                        GridRow,
+                        {
+                          item,
+                          rowIndex,
+                          rowId: rowIdStr,
+                          isSelected: selectedRowIds.has(rowIdStr),
+                          columnLayouts,
+                          renderCellContent,
+                          handleSingleRowClick,
+                          handleRowCheckboxChange,
+                          lastMouseShiftRef,
+                          hasCheckboxCol,
+                          hasRowNumbersCol,
+                          rowNumberOffset,
+                          selectionRange,
+                          activeCell: interaction.activeCell,
+                          cutRange,
+                          copyRange,
+                          isDragging,
+                          rowHeight,
+                          editingRowId: editingCell?.rowId ?? null
+                        },
+                        rowIdStr
+                      );
+                    }),
+                    virtualScrollEnabled && visibleRange.offsetBottom > 0 && /* @__PURE__ */ jsx("tr", { style: { height: visibleRange.offsetBottom }, "aria-hidden": true })
+                  ] })
+                ]
+              }
+            ),
+            isReorderDragging && dropIndicatorX != null && /* @__PURE__ */ jsx(DropIndicator, { dropIndicatorX, wrapperLeft: wrapperRef.current?.getBoundingClientRect().left ?? 0 }),
+            /* @__PURE__ */ jsx(
+              MarchingAntsOverlay,
+              {
+                containerRef: tableContainerRef,
+                selectionRange,
+                copyRange,
+                cutRange,
+                colOffset,
+                items,
+                visibleColumns: props.visibleColumns,
+                columnSizingOverrides,
+                columnOrder: props.columnOrder
+              }
+            ),
+            showEmptyInGrid && emptyState && /* @__PURE__ */ jsx(EmptyState, { emptyState })
+          ] }) }) }),
+          menuPosition && createPortal(
+            /* @__PURE__ */ jsx(
+              GridContextMenu,
+              {
+                x: menuPosition.x,
+                y: menuPosition.y,
+                hasSelection: hasCellSelection,
+                canUndo,
+                canRedo,
+                onUndo: onUndo ?? NOOP,
+                onRedo: onRedo ?? NOOP,
+                onCopy: handleCopy,
+                onCut: handleCut,
+                onPaste: handlePasteVoid,
+                onSelectAll: o.interaction.handleSelectAllCells,
+                onClose: closeContextMenu
+              }
+            ),
+            document.body
+          ),
+          /* @__PURE__ */ jsx(
+            ColumnHeaderMenu,
+            {
+              isOpen: headerMenu.isOpen,
+              anchorElement: headerMenu.anchorElement,
+              onClose: headerMenu.close,
+              onPinLeft: headerMenu.handlePinLeft,
+              onPinRight: headerMenu.handlePinRight,
+              onUnpin: headerMenu.handleUnpin,
+              onSortAsc: headerMenu.handleSortAsc,
+              onSortDesc: headerMenu.handleSortDesc,
+              onClearSort: headerMenu.handleClearSort,
+              onAutosizeThis: headerMenu.handleAutosizeThis,
+              onAutosizeAll: headerMenu.handleAutosizeAll,
+              canPinLeft: headerMenu.canPinLeft,
+              canPinRight: headerMenu.canPinRight,
+              canUnpin: headerMenu.canUnpin,
+              currentSort: headerMenu.currentSort,
+              isSortable: headerMenu.isSortable,
+              isResizable: headerMenu.isResizable
+            }
+          )
+        ]
+      }
+    ),
+    statusBarConfig && /* @__PURE__ */ jsx(
+      StatusBar,
+      {
+        totalCount: statusBarConfig.totalCount,
+        filteredCount: statusBarConfig.filteredCount,
+        selectedCount: statusBarConfig.selectedCount ?? selectedRowIds.size,
+        selectedCellCount: selectionRange ? (Math.abs(selectionRange.endRow - selectionRange.startRow) + 1) * (Math.abs(selectionRange.endCol - selectionRange.startCol) + 1) : void 0,
+        aggregation: statusBarConfig.aggregation,
+        suppressRowCount: statusBarConfig.suppressRowCount
+      }
+    ),
+    isLoading && /* @__PURE__ */ jsx(LoadingOverlay, { message: loadingMessage })
+  ] });
+}
+var DataGridTable = React3.memo(DataGridTableInner);
+var ColumnChooser = (props) => {
+  const { columns, visibleColumns, onVisibilityChange, onSetVisibleColumns, className } = props;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const buttonRef = useRef(null);
+  const {
+    open: isOpen,
+    setOpen,
+    handleClose,
+    handleCheckboxChange: setColumnVisible,
+    handleSelectAll,
+    handleClearAll,
+    visibleCount,
+    totalCount
+  } = useColumnChooserState({ columns, visibleColumns, onVisibilityChange, onSetVisibleColumns });
+  const handleToggle = (e) => {
+    if (isOpen) {
+      handleClose();
+      setAnchorEl(null);
+    } else {
+      setAnchorEl(e.currentTarget);
+      setOpen(true);
+    }
+  };
+  const handlePopoverClose = () => {
+    handleClose();
+    setAnchorEl(null);
+  };
+  const handleCheckboxChange = (columnKey) => (ev) => {
+    ev.stopPropagation();
+    setColumnVisible(columnKey)(ev.target.checked);
+  };
+  return /* @__PURE__ */ jsxs(Box, { className, sx: { display: "inline-flex" }, children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref: buttonRef,
+        variant: "outlined",
+        size: "small",
+        color: "inherit",
+        startIcon: /* @__PURE__ */ jsx(ViewColumn, {}),
+        endIcon: isOpen ? /* @__PURE__ */ jsx(ExpandLess, {}) : /* @__PURE__ */ jsx(ExpandMore, {}),
+        onClick: handleToggle,
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        sx: {
+          textTransform: "none",
+          fontWeight: 600,
+          borderColor: isOpen ? "primary.main" : "divider"
+        },
+        children: [
+          "Column Visibility (",
+          visibleCount,
+          " of ",
+          totalCount,
+          ")"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        open: isOpen,
+        anchorEl,
+        onClose: handlePopoverClose,
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        slotProps: {
+          paper: {
+            sx: { mt: 0.5, minWidth: 220 }
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                px: 1.5,
+                py: 1,
+                borderBottom: 1,
+                borderColor: "divider",
+                bgcolor: "action.hover"
+              },
+              children: /* @__PURE__ */ jsxs(Typography, { variant: "subtitle2", fontWeight: 600, children: [
+                "Select Columns (",
+                visibleCount,
+                " of ",
+                totalCount,
+                ")"
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { sx: { maxHeight: 320, overflowY: "auto", py: 0.5 }, children: columns.map((column) => /* @__PURE__ */ jsx(Box, { sx: { px: 1.5, minHeight: 32, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
+            FormControlLabel,
+            {
+              control: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  size: "small",
+                  checked: visibleColumns.has(column.columnId),
+                  onChange: handleCheckboxChange(column.columnId),
+                  disabled: column.required === true
+                }
+              ),
+              label: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: column.name }),
+              sx: { m: 0 }
+            }
+          ) }, column.columnId)) }),
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "flex-end",
+                gap: 1,
+                px: 1.5,
+                py: 1,
+                borderTop: 1,
+                borderColor: "divider",
+                bgcolor: "action.hover"
+              },
+              children: [
+                /* @__PURE__ */ jsx(Button, { size: "small", onClick: handleClearAll, sx: { textTransform: "none" }, children: "Clear All" }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "small",
+                    variant: "contained",
+                    onClick: handleSelectAll,
+                    sx: { textTransform: "none" },
+                    children: "Select All"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+var PaginationControls = React3.memo((props) => {
+  const {
+    currentPage,
+    pageSize,
+    totalCount,
+    onPageChange,
+    onPageSizeChange,
+    pageSizeOptions,
+    entityLabelPlural,
+    className
+  } = props;
+  const { labelPlural, vm, handlePageSizeChange } = usePaginationControls({
+    currentPage,
+    pageSize,
+    totalCount,
+    onPageChange,
+    onPageSizeChange,
+    pageSizeOptions,
+    entityLabelPlural
+  });
+  const handlePageSizeChangeEvent = (event) => {
+    handlePageSizeChange(Number(event.target.value));
+  };
+  if (!vm) {
+    return null;
+  }
+  const { pageNumbers, showStartEllipsis, showEndEllipsis, totalPages, startItem, endItem } = vm;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      role: "navigation",
+      "aria-label": "Pagination",
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        flexWrap: "wrap",
+        gap: 2,
+        px: 1.5,
+        width: "100%",
+        minWidth: 0,
+        boxSizing: "border-box"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.secondary", children: [
+          "Showing ",
+          startItem,
+          " to ",
+          endItem,
+          " of ",
+          totalCount.toLocaleString(),
+          " ",
+          labelPlural
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: () => onPageChange(1),
+              disabled: currentPage === 1,
+              "aria-label": "First page",
+              children: /* @__PURE__ */ jsx(FirstPage, { fontSize: "small" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: () => onPageChange(currentPage - 1),
+              disabled: currentPage === 1,
+              "aria-label": "Previous page",
+              children: /* @__PURE__ */ jsx(ChevronLeft, { fontSize: "small" })
+            }
+          ),
+          showStartEllipsis && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outlined",
+                size: "small",
+                onClick: () => onPageChange(1),
+                "aria-label": "Page 1",
+                sx: { minWidth: 32, px: 0.5 },
+                children: "1"
+              }
+            ),
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mx: 0.5 }, "aria-hidden": true, children: "\u2026" })
+          ] }),
+          pageNumbers.map((pageNum) => /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: currentPage === pageNum ? "contained" : "outlined",
+              size: "small",
+              onClick: () => onPageChange(pageNum),
+              "aria-label": `Page ${pageNum}`,
+              "aria-current": currentPage === pageNum ? "page" : void 0,
+              sx: { minWidth: 32, px: 0.5 },
+              children: pageNum
+            },
+            pageNum
+          )),
+          showEndEllipsis && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mx: 0.5 }, "aria-hidden": true, children: "\u2026" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outlined",
+                size: "small",
+                onClick: () => onPageChange(totalPages),
+                "aria-label": `Page ${totalPages}`,
+                sx: { minWidth: 32, px: 0.5 },
+                children: totalPages
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: () => onPageChange(currentPage + 1),
+              disabled: currentPage >= totalPages,
+              "aria-label": "Next page",
+              children: /* @__PURE__ */ jsx(ChevronRight, { fontSize: "small" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: () => onPageChange(totalPages),
+              disabled: currentPage >= totalPages,
+              "aria-label": "Last page",
+              children: /* @__PURE__ */ jsx(LastPage, { fontSize: "small" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "Rows" }),
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              value: pageSize,
+              onChange: handlePageSizeChangeEvent,
+              size: "small",
+              "aria-label": "Rows per page",
+              sx: { minWidth: 70 },
+              children: vm.pageSizeOptions.map((n) => /* @__PURE__ */ jsx(MenuItem, { value: n, children: n }, n))
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+var MuiThemeContainer = React3.forwardRef(
+  function MuiThemeContainer2(props, ref) {
+    const theme = useTheme();
+    const sx = React3.useMemo(() => ({
+      display: "flex",
+      flexDirection: "column",
+      gap: 1,
+      "--ogrid-bg": theme.palette.background.default,
+      "--ogrid-border": theme.palette.divider,
+      "--ogrid-header-bg": theme.palette.mode === "dark" ? theme.palette.grey[800] : theme.palette.grey[100],
+      "--ogrid-fg": theme.palette.text.primary,
+      "--ogrid-fg-secondary": theme.palette.text.secondary,
+      "--ogrid-fg-muted": theme.palette.text.disabled,
+      "--ogrid-hover-bg": theme.palette.action.hover,
+      "--ogrid-paper-bg": theme.palette.background.paper,
+      "--ogrid-primary": theme.palette.primary.main,
+      "--ogrid-selection-bg": theme.palette.action.selected
+    }), [theme]);
+    return /* @__PURE__ */ jsx(Box, { ref, sx, ...props });
+  }
+);
+var OGrid = createOGrid({
+  DataGridTable,
+  ColumnChooser,
+  PaginationControls,
+  containerComponent: MuiThemeContainer
+});
+
+export { ColumnChooser, ColumnHeaderFilter, ColumnHeaderMenu, DataGridTable, OGrid, PaginationControls };