@alaarab/ogrid-react-fluent 2.1.2 → 2.1.4

package/dist/esm/index.js

@@ -1,11 +1,1166 @@
-// Components
-export { OGrid } from './OGrid';
-export { DataGridTable } from './DataGridTable/DataGridTable';
-export { ColumnChooser } from './ColumnChooser/ColumnChooser';
-export { ColumnHeaderFilter } from './ColumnHeaderFilter/ColumnHeaderFilter';
-export { ColumnHeaderMenu } from './ColumnHeaderMenu/ColumnHeaderMenu';
-export { PaginationControls } from './PaginationControls/PaginationControls';
-// 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 { useColumnHeaderFilterState, getColumnHeaderFilterStateParams, DateFilterContent, renderFilterContent, areGridRowPropsEqual, usePaginationControls, createOGrid, useListVirtualizer, STOP_PROPAGATION, useDataGridTableOrchestration, useColumnMeta, getCellRenderDescriptor, buildInlineEditorProps, buildPopoverEditorProps, POPOVER_ANCHOR_STYLE, resolveCellDisplayContent, resolveCellStyle, getCellInteractionProps, CURSOR_CELL_STYLE, CellErrorBoundary, GRID_ROOT_STYLE, PREVENT_DEFAULT, getHeaderFilterConfig, MarchingAntsOverlay, NOOP, useColumnChooserState, BaseInlineCellEditor, BaseDropIndicator, BaseEmptyState, GridContextMenu as GridContextMenu$1, BaseColumnHeaderMenu, StatusBar as StatusBar$1, BaseLoadingOverlay } 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 * as React from 'react';
+import { useCallback, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Popover, PopoverSurface, Button, Select, TableRow, TableCell, Checkbox, Table, TableHeader, TableHeaderCell, TableBody } from '@fluentui/react-components';
+import { FilterRegular, ChevronDoubleLeftRegular, ChevronLeftRegular, ChevronRightRegular, ChevronDoubleRightRegular, SearchRegular, ChevronUpRegular, ChevronDownRegular, TableSettingsRegular } from '@fluentui/react-icons';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/OGrid/OGrid.tsx
+
+// src/ColumnHeaderFilter/ColumnHeaderFilter.module.scss
+var ColumnHeaderFilter_module_default = {
+  columnHeader: "ColumnHeaderFilter_module_columnHeader",
+  headerContent: "ColumnHeaderFilter_module_headerContent",
+  columnName: "ColumnHeaderFilter_module_columnName",
+  headerActions: "ColumnHeaderFilter_module_headerActions",
+  filterIcon: "ColumnHeaderFilter_module_filterIcon",
+  filterActive: "ColumnHeaderFilter_module_filterActive",
+  filterOpen: "ColumnHeaderFilter_module_filterOpen",
+  filterBadge: "ColumnHeaderFilter_module_filterBadge",
+  filterPopover: "ColumnHeaderFilter_module_filterPopover",
+  popoverHeader: "ColumnHeaderFilter_module_popoverHeader",
+  popoverSearch: "ColumnHeaderFilter_module_popoverSearch",
+  nativeInputWrapper: "ColumnHeaderFilter_module_nativeInputWrapper",
+  nativeInputIcon: "ColumnHeaderFilter_module_nativeInputIcon",
+  nativeInput: "ColumnHeaderFilter_module_nativeInput",
+  resultCount: "ColumnHeaderFilter_module_resultCount",
+  selectAllRow: "ColumnHeaderFilter_module_selectAllRow",
+  selectAllButton: "ColumnHeaderFilter_module_selectAllButton",
+  popoverOptions: "ColumnHeaderFilter_module_popoverOptions",
+  popoverOption: "ColumnHeaderFilter_module_popoverOption",
+  nativeCheckbox: "ColumnHeaderFilter_module_nativeCheckbox",
+  checkboxLabel: "ColumnHeaderFilter_module_checkboxLabel",
+  personOption: "ColumnHeaderFilter_module_personOption",
+  loadingContainer: "ColumnHeaderFilter_module_loadingContainer",
+  filterSpinner: "ColumnHeaderFilter_module_filterSpinner",
+  noResults: "ColumnHeaderFilter_module_noResults",
+  selectedUserSection: "ColumnHeaderFilter_module_selectedUserSection",
+  selectedUserLabel: "ColumnHeaderFilter_module_selectedUserLabel",
+  selectedUser: "ColumnHeaderFilter_module_selectedUser",
+  userInfo: "ColumnHeaderFilter_module_userInfo",
+  avatar: "ColumnHeaderFilter_module_avatar",
+  avatarImg: "ColumnHeaderFilter_module_avatarImg",
+  avatarInitials: "ColumnHeaderFilter_module_avatarInitials",
+  userText: "ColumnHeaderFilter_module_userText",
+  userSecondary: "ColumnHeaderFilter_module_userSecondary",
+  removeUserButton: "ColumnHeaderFilter_module_removeUserButton",
+  popoverActions: "ColumnHeaderFilter_module_popoverActions",
+  clearButton: "ColumnHeaderFilter_module_clearButton",
+  applyButton: "ColumnHeaderFilter_module_applyButton"
+};
+var TextFilterPopover = ({
+  value,
+  onValueChange,
+  onApply,
+  onClear,
+  onPopoverClick,
+  onInputFocus,
+  onInputMouseDown,
+  onInputClick,
+  onInputKeyDown
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.popoverSearch, onClick: onPopoverClick, children: /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.nativeInputWrapper, children: [
+    /* @__PURE__ */ jsx(SearchRegular, { className: ColumnHeaderFilter_module_default.nativeInputIcon }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        placeholder: "Enter search term...",
+        value,
+        onChange: (e) => onValueChange(e.target.value),
+        onKeyDown: (e) => {
+          onInputKeyDown(e);
+          if (e.key === "Enter") {
+            e.preventDefault();
+            onApply();
+          }
+        },
+        onFocus: onInputFocus,
+        onMouseDown: onInputMouseDown,
+        onClick: onInputClick,
+        autoComplete: "off",
+        className: ColumnHeaderFilter_module_default.nativeInput
+      }
+    )
+  ] }) }),
+  /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.popoverActions, onClick: onPopoverClick, children: [
+    /* @__PURE__ */ jsx("button", { type: "button", className: ColumnHeaderFilter_module_default.clearButton, onClick: onClear, disabled: !value, children: "Clear" }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: ColumnHeaderFilter_module_default.applyButton, onClick: onApply, children: "Apply" })
+  ] })
+] });
+TextFilterPopover.displayName = "TextFilterPopover";
+var ITEM_HEIGHT = 40;
+var MultiSelectFilterPopover = ({
+  searchText,
+  onSearchChange,
+  options,
+  filteredOptions,
+  selected,
+  onOptionToggle,
+  onSelectAll,
+  onClearSelection,
+  onApply,
+  isLoading,
+  onPopoverClick,
+  onInputFocus,
+  onInputMouseDown,
+  onInputClick,
+  onInputKeyDown
+}) => {
+  const virt = useListVirtualizer({ count: filteredOptions.length, itemHeight: ITEM_HEIGHT });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.popoverSearch, onClick: onPopoverClick, children: [
+      /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.nativeInputWrapper, children: [
+        /* @__PURE__ */ jsx(SearchRegular, { className: ColumnHeaderFilter_module_default.nativeInputIcon }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "Search...",
+            value: searchText,
+            onChange: (e) => onSearchChange(e.target.value),
+            onFocus: onInputFocus,
+            onMouseDown: onInputMouseDown,
+            onClick: onInputClick,
+            onKeyDown: onInputKeyDown,
+            autoComplete: "off",
+            className: ColumnHeaderFilter_module_default.nativeInput
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.resultCount, children: [
+        filteredOptions.length,
+        " of ",
+        options.length,
+        " options"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.selectAllRow, onClick: onPopoverClick, children: [
+      /* @__PURE__ */ jsxs("button", { type: "button", className: ColumnHeaderFilter_module_default.selectAllButton, onClick: onSelectAll, children: [
+        "Select All (",
+        filteredOptions.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: ColumnHeaderFilter_module_default.selectAllButton, onClick: onClearSelection, children: "Clear" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: virt.containerRef,
+        onScroll: virt.onScroll,
+        className: ColumnHeaderFilter_module_default.popoverOptions,
+        onClick: onPopoverClick,
+        children: isLoading ? /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.loadingContainer, children: [
+          /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.filterSpinner }),
+          /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--colorNeutralForeground2, #616161)" }, children: "Loading..." })
+        ] }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.noResults, children: "No options found" }) : /* @__PURE__ */ jsx("div", { style: { height: virt.totalHeight, position: "relative" }, children: virt.visibleItems.map(({ index, offsetTop }) => {
+          const option = filteredOptions[index];
+          const isChecked = selected.has(option);
+          return /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: ColumnHeaderFilter_module_default.popoverOption,
+              style: { position: "absolute", top: offsetTop, width: "100%", height: ITEM_HEIGHT, boxSizing: "border-box", display: "flex", alignItems: "center" },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: isChecked,
+                    onChange: (ev) => {
+                      ev.stopPropagation();
+                      onOptionToggle(option, ev.target.checked);
+                    },
+                    className: ColumnHeaderFilter_module_default.nativeCheckbox
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: ColumnHeaderFilter_module_default.checkboxLabel, children: option })
+              ]
+            },
+            option
+          );
+        }) })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.popoverActions, onClick: onPopoverClick, children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: ColumnHeaderFilter_module_default.clearButton, onClick: onClearSelection, children: "Clear" }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: ColumnHeaderFilter_module_default.applyButton, onClick: onApply, children: "Apply" })
+    ] })
+  ] });
+};
+MultiSelectFilterPopover.displayName = "MultiSelectFilterPopover";
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  return (parts[0]?.[0] ?? "").toUpperCase();
+}
+var PeopleFilterPopover = ({
+  selectedUser,
+  searchText,
+  onSearchChange,
+  suggestions,
+  isLoading,
+  onUserSelect,
+  onClearUser,
+  onPopoverClick,
+  inputRef
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  selectedUser && /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.selectedUserSection, onClick: onPopoverClick, children: [
+    /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.selectedUserLabel, children: "Currently filtered by:" }),
+    /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.selectedUser, children: [
+      /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.userInfo, children: [
+        /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.avatar, children: selectedUser.photo ? /* @__PURE__ */ jsx("img", { src: selectedUser.photo, alt: "", className: ColumnHeaderFilter_module_default.avatarImg }) : /* @__PURE__ */ jsx("span", { className: ColumnHeaderFilter_module_default.avatarInitials, children: getInitials(selectedUser.displayName) }) }),
+        /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.userText, children: [
+          /* @__PURE__ */ jsx("div", { children: selectedUser.displayName }),
+          /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.userSecondary, children: selectedUser.email })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: ColumnHeaderFilter_module_default.removeUserButton, onClick: onClearUser, "aria-label": "Remove filter", children: /* @__PURE__ */ jsx(FilterRegular, {}) })
+    ] })
+  ] }),
+  /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.popoverSearch, onClick: onPopoverClick, children: /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.nativeInputWrapper, children: [
+    /* @__PURE__ */ jsx(SearchRegular, { className: ColumnHeaderFilter_module_default.nativeInputIcon }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        placeholder: "Search for a person...",
+        value: searchText,
+        onChange: (e) => onSearchChange(e.target.value),
+        onFocus: (e) => e.stopPropagation(),
+        onMouseDown: (e) => e.stopPropagation(),
+        onClick: (e) => e.stopPropagation(),
+        onKeyDown: (e) => e.stopPropagation(),
+        autoComplete: "off",
+        className: ColumnHeaderFilter_module_default.nativeInput
+      }
+    )
+  ] }) }),
+  /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.popoverOptions, onClick: onPopoverClick, children: isLoading && searchText.trim() ? /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.loadingContainer, children: [
+    /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.filterSpinner }),
+    /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--colorNeutralForeground2, #616161)" }, children: "Searching..." })
+  ] }) : suggestions.length === 0 && searchText.trim() ? /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.noResults, children: "No results found" }) : searchText.trim() ? suggestions.map((user) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: ColumnHeaderFilter_module_default.personOption,
+      onClick: (e) => {
+        e.stopPropagation();
+        onUserSelect(user);
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.userInfo, children: [
+        /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.avatar, children: user.photo ? /* @__PURE__ */ jsx("img", { src: user.photo, alt: "", className: ColumnHeaderFilter_module_default.avatarImg }) : /* @__PURE__ */ jsx("span", { className: ColumnHeaderFilter_module_default.avatarInitials, children: getInitials(user.displayName) }) }),
+        /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.userText, children: [
+          /* @__PURE__ */ jsx("div", { children: user.displayName }),
+          /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.userSecondary, children: user.email })
+        ] })
+      ] })
+    },
+    user.id ?? user.email ?? user.displayName
+  )) : /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.noResults, children: "Type to search..." }) }),
+  selectedUser && /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.popoverActions, onClick: onPopoverClick, children: /* @__PURE__ */ jsx("button", { type: "button", className: ColumnHeaderFilter_module_default.clearButton, onClick: onClearUser, children: "Clear Filter" }) })
+] });
+PeopleFilterPopover.displayName = "PeopleFilterPopover";
+var ColumnHeaderFilter = React.memo((props) => {
+  const {
+    columnName,
+    filterType,
+    options,
+    isLoadingOptions = false,
+    selectedUser
+  } = props;
+  const state = useColumnHeaderFilterState(getColumnHeaderFilterStateParams(props));
+  const {
+    headerRef,
+    popoverRef,
+    isFilterOpen,
+    setFilterOpen,
+    hasActiveFilter,
+    handlers
+  } = state;
+  const {
+    handlePopoverClick,
+    handleInputFocus,
+    handleInputMouseDown,
+    handleInputClick,
+    handleInputKeyDown
+  } = handlers;
+  const filterBtnRef = React.useRef(null);
+  const fluentRenderers = React.useMemo(() => ({
+    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,
+        onPopoverClick: handlePopoverClick,
+        onInputFocus: handleInputFocus,
+        onInputMouseDown: handleInputMouseDown,
+        onInputClick: handleInputClick,
+        onInputKeyDown: handleInputKeyDown
+      }
+    ),
+    renderText: (p) => /* @__PURE__ */ jsx(
+      TextFilterPopover,
+      {
+        value: p.value,
+        onValueChange: p.onValueChange,
+        onApply: p.onApply,
+        onClear: p.onClear,
+        onPopoverClick: handlePopoverClick,
+        onInputFocus: handleInputFocus,
+        onInputMouseDown: handleInputMouseDown,
+        onInputClick: handleInputClick,
+        onInputKeyDown: handleInputKeyDown
+      }
+    ),
+    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,
+        onPopoverClick: handlePopoverClick,
+        inputRef: p.inputRef
+      }
+    ),
+    renderDate: (p) => /* @__PURE__ */ jsx("div", { onClick: handlePopoverClick, children: /* @__PURE__ */ jsx(
+      DateFilterContent,
+      {
+        tempDateFrom: p.tempDateFrom,
+        setTempDateFrom: p.setTempDateFrom,
+        tempDateTo: p.tempDateTo,
+        setTempDateTo: p.setTempDateTo,
+        onApply: p.onApply,
+        onClear: p.onClear,
+        classNames: {
+          popoverActions: ColumnHeaderFilter_module_default.popoverActions,
+          clearButton: ColumnHeaderFilter_module_default.clearButton,
+          applyButton: ColumnHeaderFilter_module_default.applyButton
+        }
+      }
+    ) })
+  }), [handlePopoverClick, handleInputFocus, handleInputMouseDown, handleInputClick, handleInputKeyDown]);
+  return /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.columnHeader, ref: headerRef, children: [
+    /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.headerContent, children: /* @__PURE__ */ jsx("span", { className: ColumnHeaderFilter_module_default.columnName, title: columnName, "data-header-label": true, children: columnName }) }),
+    /* @__PURE__ */ jsx("div", { className: ColumnHeaderFilter_module_default.headerActions, children: filterType !== "none" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: filterBtnRef,
+          type: "button",
+          className: `${ColumnHeaderFilter_module_default.filterIcon} ${hasActiveFilter ? ColumnHeaderFilter_module_default.filterActive : ""} ${isFilterOpen ? ColumnHeaderFilter_module_default.filterOpen : ""}`,
+          onClick: handlers.handleFilterIconClick,
+          "aria-label": `Filter ${columnName}`,
+          title: `Filter ${columnName}`,
+          children: [
+            /* @__PURE__ */ jsx(FilterRegular, {}),
+            hasActiveFilter && /* @__PURE__ */ jsx("span", { className: ColumnHeaderFilter_module_default.filterBadge })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Popover,
+        {
+          open: isFilterOpen,
+          onOpenChange: (_, data) => {
+            if (!data.open) setFilterOpen(false);
+          },
+          positioning: { target: filterBtnRef.current ?? void 0, position: "below", align: "start", offset: 4 },
+          trapFocus: false,
+          children: /* @__PURE__ */ jsxs(
+            PopoverSurface,
+            {
+              ref: popoverRef,
+              className: ColumnHeaderFilter_module_default.filterPopover,
+              onClick: handlers.handlePopoverClick,
+              style: { padding: 0 },
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: ColumnHeaderFilter_module_default.popoverHeader, children: [
+                  "Filter: ",
+                  columnName
+                ] }),
+                renderFilterContent(filterType, state, options ?? [], isLoadingOptions, selectedUser, fluentRenderers)
+              ]
+            }
+          )
+        }
+      )
+    ] }) })
+  ] });
+});
+ColumnHeaderFilter.displayName = "ColumnHeaderFilter";
+
+// src/ColumnHeaderMenu/ColumnHeaderMenu.module.scss
+var ColumnHeaderMenu_module_default = {
+  content: "ColumnHeaderMenu_module_content",
+  item: "ColumnHeaderMenu_module_item",
+  separator: "ColumnHeaderMenu_module_separator"
+};
+var getFluentPortalTarget = (anchorElement) => anchorElement.closest(".fui-FluentProvider") ?? document.body;
+function ColumnHeaderMenu(props) {
+  return /* @__PURE__ */ jsx(
+    BaseColumnHeaderMenu,
+    {
+      ...props,
+      classNames: ColumnHeaderMenu_module_default,
+      getPortalTarget: getFluentPortalTarget
+    }
+  );
+}
+function InlineCellEditor(props) {
+  return /* @__PURE__ */ jsx(
+    BaseInlineCellEditor,
+    {
+      ...props,
+      renderCheckbox: (checked, onCommit, onCancel) => /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked,
+          onChange: (_, data) => onCommit(!!data.checked),
+          onKeyDown: (e) => e.key === "Escape" && (e.preventDefault(), onCancel())
+        }
+      )
+    }
+  );
+}
+
+// src/DataGridTable/DataGridTable.module.scss
+var DataGridTable_module_default = {
+  tableScrollContent: "DataGridTable_module_tableScrollContent",
+  tableWidthAnchor: "DataGridTable_module_tableWidthAnchor",
+  tableWrapper: "DataGridTable_module_tableWrapper",
+  dataTable: "DataGridTable_module_dataTable",
+  groupHeaderCell: "DataGridTable_module_groupHeaderCell",
+  headerCellContent: "DataGridTable_module_headerCellContent",
+  headerMenuTrigger: "DataGridTable_module_headerMenuTrigger",
+  dropIndicator: "DataGridTable_module_dropIndicator",
+  resizeHandle: "DataGridTable_module_resizeHandle",
+  pinnedColLeft: "DataGridTable_module_pinnedColLeft",
+  pinnedColRight: "DataGridTable_module_pinnedColRight",
+  cellContent: "DataGridTable_module_cellContent",
+  activeCellContent: "DataGridTable_module_activeCellContent",
+  editingCellContent: "DataGridTable_module_editingCellContent",
+  cellInRange: "DataGridTable_module_cellInRange",
+  cellCut: "DataGridTable_module_cellCut",
+  fillHandle: "DataGridTable_module_fillHandle",
+  selectionHeaderCellInner: "DataGridTable_module_selectionHeaderCellInner",
+  selectionCellInner: "DataGridTable_module_selectionCellInner",
+  rowNumberHeaderCellInner: "DataGridTable_module_rowNumberHeaderCellInner",
+  rowNumberCellInner: "DataGridTable_module_rowNumberCellInner",
+  statusBar: "DataGridTable_module_statusBar",
+  statusBarItem: "DataGridTable_module_statusBarItem",
+  statusBarLabel: "DataGridTable_module_statusBarLabel",
+  statusBarValue: "DataGridTable_module_statusBarValue",
+  contextMenu: "DataGridTable_module_contextMenu",
+  contextMenuItem: "DataGridTable_module_contextMenuItem",
+  contextMenuItemLabel: "DataGridTable_module_contextMenuItemLabel",
+  contextMenuItemShortcut: "DataGridTable_module_contextMenuItemShortcut",
+  contextMenuDivider: "DataGridTable_module_contextMenuDivider",
+  loadingOverlay: "DataGridTable_module_loadingOverlay",
+  loadingOverlayContent: "DataGridTable_module_loadingOverlayContent",
+  loadingOverlayText: "DataGridTable_module_loadingOverlayText",
+  loadingDimmed: "DataGridTable_module_loadingDimmed",
+  emptyStateInGrid: "DataGridTable_module_emptyStateInGrid",
+  emptyStateInGridTitle: "DataGridTable_module_emptyStateInGridTitle",
+  emptyStateInGridMessage: "DataGridTable_module_emptyStateInGridMessage",
+  emptyStateInGridLink: "DataGridTable_module_emptyStateInGridLink",
+  spinner: "DataGridTable_module_spinner",
+  "ogrid-spin": "DataGridTable_module_ogrid-spin",
+  leafHeaderCellSpan: "DataGridTable_module_leafHeaderCellSpan",
+  selectionHeaderCellWrapper: "DataGridTable_module_selectionHeaderCellWrapper",
+  selectionCellWrapper: "DataGridTable_module_selectionCellWrapper",
+  rowNumberHeaderCellWrapper: "DataGridTable_module_rowNumberHeaderCellWrapper",
+  rowNumberCellWrapper: "DataGridTable_module_rowNumberCellWrapper",
+  selectedRow: "DataGridTable_module_selectedRow",
+  selectableGrid: "DataGridTable_module_selectableGrid",
+  stickyHeader: "DataGridTable_module_stickyHeader",
+  emptyStateInGridMessageSticky: "DataGridTable_module_emptyStateInGridMessageSticky",
+  emptyStateInGridIcon: "DataGridTable_module_emptyStateInGridIcon",
+  "density-compact": "DataGridTable_module_density-compact",
+  "density-comfortable": "DataGridTable_module_density-comfortable"
+};
+var statusBarClassNames = {
+  statusBar: DataGridTable_module_default.statusBar,
+  statusBarItem: DataGridTable_module_default.statusBarItem,
+  statusBarLabel: DataGridTable_module_default.statusBarLabel,
+  statusBarValue: DataGridTable_module_default.statusBarValue
+};
+function StatusBar(props) {
+  return /* @__PURE__ */ jsx(StatusBar$1, { ...props, classNames: statusBarClassNames });
+}
+var classNames = {
+  contextMenu: DataGridTable_module_default.contextMenu,
+  contextMenuItem: DataGridTable_module_default.contextMenuItem,
+  contextMenuItemLabel: DataGridTable_module_default.contextMenuItemLabel,
+  contextMenuItemShortcut: DataGridTable_module_default.contextMenuItemShortcut,
+  contextMenuDivider: DataGridTable_module_default.contextMenuDivider
+};
+function GridContextMenu(props) {
+  return /* @__PURE__ */ jsx(GridContextMenu$1, { ...props, classNames });
+}
+var classNames2 = {
+  emptyStateInGrid: DataGridTable_module_default.emptyStateInGrid,
+  emptyStateInGridInner: DataGridTable_module_default.emptyStateInGridMessageSticky,
+  emptyStateInGridIcon: DataGridTable_module_default.emptyStateInGridIcon,
+  emptyStateInGridTitle: DataGridTable_module_default.emptyStateInGridTitle,
+  emptyStateInGridMessage: DataGridTable_module_default.emptyStateInGridMessage,
+  emptyStateInGridLink: DataGridTable_module_default.emptyStateInGridLink
+};
+function EmptyState({ emptyState }) {
+  return /* @__PURE__ */ jsx(BaseEmptyState, { emptyState, classNames: classNames2, icon: "\u{1F4CB}" });
+}
+var classNames3 = {
+  loadingOverlay: DataGridTable_module_default.loadingOverlay,
+  loadingOverlayContent: DataGridTable_module_default.loadingOverlayContent,
+  spinner: DataGridTable_module_default.spinner,
+  loadingOverlayText: DataGridTable_module_default.loadingOverlayText
+};
+function LoadingOverlay({ message }) {
+  return /* @__PURE__ */ jsx(BaseLoadingOverlay, { message, classNames: classNames3 });
+}
+function DropIndicator({ dropIndicatorX, wrapperLeft }) {
+  return /* @__PURE__ */ jsx(BaseDropIndicator, { dropIndicatorX, wrapperLeft, className: DataGridTable_module_default.dropIndicator });
+}
+function GridRowInner(props) {
+  const {
+    item,
+    rowIndex,
+    rowId,
+    isSelected,
+    visibleCols,
+    columnMeta,
+    renderCellContent,
+    handleSingleRowClick,
+    handleRowCheckboxChange,
+    lastMouseShiftRef,
+    hasCheckboxCol,
+    hasRowNumbersCol,
+    rowNumberOffset
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    TableRow,
+    {
+      className: isSelected ? DataGridTable_module_default.selectedRow : void 0,
+      "data-row-id": rowId,
+      onClick: handleSingleRowClick,
+      children: [
+        hasCheckboxCol && /* @__PURE__ */ jsx(TableCell, { className: DataGridTable_module_default.selectionCellWrapper, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: DataGridTable_module_default.selectionCellInner,
+            "data-row-index": rowIndex,
+            "data-col-index": 0,
+            onClick: STOP_PROPAGATION,
+            children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: isSelected,
+                onChange: (e, data) => {
+                  handleRowCheckboxChange(rowId, !!data.checked, rowIndex, lastMouseShiftRef.current);
+                },
+                "aria-label": `Select row ${rowIndex + 1}`
+              }
+            )
+          }
+        ) }),
+        hasRowNumbersCol && /* @__PURE__ */ jsx(TableCell, { className: DataGridTable_module_default.rowNumberCellWrapper, children: /* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.rowNumberCellInner, children: rowNumberOffset + rowIndex + 1 }) }),
+        visibleCols.map((col, colIdx) => /* @__PURE__ */ jsx(
+          TableCell,
+          {
+            "data-column-id": col.columnId,
+            className: columnMeta.cellClasses[col.columnId] || void 0,
+            style: columnMeta.cellStyles[col.columnId],
+            children: renderCellContent(item, col, rowIndex, colIdx)
+          },
+          col.columnId
+        ))
+      ]
+    }
+  );
+}
+var GridRow = React.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,
+    rowSelection,
+    isLoading,
+    loadingMessage,
+    ariaLabel,
+    ariaLabelledBy,
+    visibleColumns,
+    columnOrder,
+    columnReorder,
+    density,
+    rowHeight,
+    rowNumberOffset,
+    headerRows,
+    allowOverflowX,
+    fitToContent,
+    editCallbacks,
+    interactionHandlers,
+    cellDescriptorInputRef,
+    pendingEditorValueRef,
+    popoverAnchorElRef,
+    handleSingleRowClick,
+    handlePasteVoid,
+    visibleCols,
+    totalColCount,
+    hasCheckboxCol,
+    hasRowNumbersCol,
+    colOffset,
+    containerWidth,
+    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 columnMeta = useColumnMeta({
+    visibleCols,
+    getColumnWidth,
+    columnSizingOverrides,
+    measuredColumnWidths,
+    pinnedColumns: pinning.pinnedColumns,
+    leftOffsets: pinning.leftOffsets,
+    rightOffsets: pinning.rightOffsets,
+    pinnedColLeftClass: DataGridTable_module_default.pinnedColLeft,
+    pinnedColRightClass: DataGridTable_module_default.pinnedColRight,
+    addStickyPosition: true
+  });
+  const renderCellContent = useCallback(
+    (item, col, rowIndex, colIdx) => {
+      const descriptor = getCellRenderDescriptor(item, col, rowIndex, colIdx, cellDescriptorInputRef.current);
+      const rowId = getRowId(item);
+      let content;
+      if (descriptor.mode === "editing-inline") {
+        content = /* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.editingCellContent, 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;
+        content = /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: (el) => {
+                if (el) setPopoverAnchorEl(el);
+              },
+              style: POPOVER_ANCHOR_STYLE,
+              "aria-hidden": true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Popover,
+            {
+              open: !!popoverAnchorElRef.current,
+              onOpenChange: (_, data) => {
+                if (!data.open) cancelPopoverEdit();
+              },
+              positioning: { target: popoverAnchorElRef.current ?? void 0 },
+              children: /* @__PURE__ */ jsx(PopoverSurface, { children: /* @__PURE__ */ jsx(CustomEditor, { ...editorProps }) })
+            }
+          )
+        ] });
+      } else {
+        const displayContent = resolveCellDisplayContent(col, item, descriptor.displayValue);
+        const cellStyle = resolveCellStyle(col, item);
+        const styledContent = cellStyle ? /* @__PURE__ */ jsx("span", { style: cellStyle, children: displayContent }) : displayContent;
+        const cellClassNames = `${DataGridTable_module_default.cellContent}${descriptor.isActive && !descriptor.isInRange ? ` ${DataGridTable_module_default.activeCellContent}` : ""}${descriptor.isInRange ? ` ${DataGridTable_module_default.cellInRange}` : ""}${descriptor.isInCutRange ? ` ${DataGridTable_module_default.cellCut}` : ""}${descriptor.isInCopyRange ? ` ${DataGridTable_module_default.cellCopied}` : ""}`;
+        const interactionProps = getCellInteractionProps(descriptor, col.columnId, interactionHandlers);
+        content = /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cellClassNames,
+            ...interactionProps,
+            style: descriptor.canEditAny ? CURSOR_CELL_STYLE : void 0,
+            children: [
+              styledContent,
+              descriptor.canEditAny && descriptor.isSelectionEndCell && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: DataGridTable_module_default.fillHandle,
+                  onMouseDown: handleFillHandleMouseDown,
+                  "aria-label": "Fill handle"
+                }
+              )
+            ]
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(CellErrorBoundary, { onError: onCellError, children: content }, `${rowId}-${col.columnId}`);
+    },
+    [editCallbacks, interactionHandlers, handleFillHandleMouseDown, setPopoverAnchorEl, cancelPopoverEdit, getRowId, onCellError, cellDescriptorInputRef, pendingEditorValueRef, popoverAnchorElRef]
+  );
+  return /* @__PURE__ */ jsxs("div", { style: GRID_ROOT_STYLE, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: wrapperRef,
+        tabIndex: 0,
+        onMouseDown: (e) => {
+          lastMouseShiftRef.current = e.shiftKey;
+        },
+        className: `${DataGridTable_module_default.tableWrapper} ${rowSelection !== "none" ? DataGridTable_module_default.selectableGrid : ""} ${DataGridTable_module_default[`density-${density}`] || ""}`,
+        role: "region",
+        "aria-label": ariaLabel ?? (ariaLabelledBy ? void 0 : "Data grid"),
+        "aria-labelledby": ariaLabelledBy,
+        "data-empty": showEmptyInGrid ? "true" : void 0,
+        "data-loading": isLoading && items.length === 0 ? "true" : void 0,
+        "data-column-count": totalColCount,
+        "data-overflow-x": allowOverflowX ? "true" : "false",
+        "data-container-width": containerWidth,
+        "data-min-table-width": Math.round(minTableWidth),
+        "data-has-selection": rowSelection !== "none" ? "true" : void 0,
+        onContextMenu: PREVENT_DEFAULT,
+        onKeyDown: handleGridKeyDown,
+        style: {
+          ["--data-table-column-count"]: totalColCount,
+          ["--data-table-width"]: showEmptyInGrid ? "100%" : allowOverflowX ? "fit-content" : fitToContent ? "fit-content" : "100%",
+          ["--data-table-min-width"]: showEmptyInGrid ? "100%" : allowOverflowX ? "max-content" : fitToContent ? "max-content" : "100%",
+          ["--data-table-total-min-width"]: `${minTableWidth}px`,
+          ...rowHeight ? { ["--ogrid-row-height"]: `${rowHeight}px` } : {}
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.tableScrollContent, children: /* @__PURE__ */ jsx("div", { className: isLoading && items.length > 0 ? DataGridTable_module_default.loadingDimmed : void 0, children: /* @__PURE__ */ jsxs("div", { className: DataGridTable_module_default.tableWidthAnchor, ref: tableContainerRef, children: [
+            /* @__PURE__ */ jsxs(Table, { role: "grid", className: DataGridTable_module_default.dataTable, children: [
+              /* @__PURE__ */ jsx(
+                TableHeader,
+                {
+                  className: o.stickyHeader ? DataGridTable_module_default.stickyHeader : void 0,
+                  children: headerRows.map((row, rowIdx) => /* @__PURE__ */ jsxs(TableRow, { children: [
+                    rowIdx === headerRows.length - 1 && hasCheckboxCol && /* @__PURE__ */ jsx(TableHeaderCell, { className: DataGridTable_module_default.selectionHeaderCellWrapper, children: /* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.selectionHeaderCellInner, children: /* @__PURE__ */ jsx(
+                      Checkbox,
+                      {
+                        checked: allSelected ? true : someSelected ? "mixed" : false,
+                        onChange: (_, data) => handleSelectAll(!!data.checked),
+                        "aria-label": "Select all rows"
+                      }
+                    ) }) }, "__selection__"),
+                    rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol && /* @__PURE__ */ jsx("th", { rowSpan: headerRows.length - 1 }, "__selection_placeholder__"),
+                    rowIdx === headerRows.length - 1 && hasRowNumbersCol && /* @__PURE__ */ jsx(TableHeaderCell, { className: DataGridTable_module_default.rowNumberHeaderCellWrapper, children: /* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.rowNumberHeaderCellInner, children: "#" }) }, "__row_number__"),
+                    rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol && /* @__PURE__ */ jsx("th", { rowSpan: headerRows.length - 1 }, "__row_number_placeholder__"),
+                    row.map((cell, cellIdx) => {
+                      if (cell.isGroup) {
+                        return /* @__PURE__ */ jsx("th", { colSpan: cell.colSpan, className: DataGridTable_module_default.groupHeaderCell, scope: "colgroup", children: cell.label }, cellIdx);
+                      }
+                      if (!cell.columnDef) return null;
+                      const col = cell.columnDef;
+                      const isSorted = props.sortBy === col.columnId;
+                      const ariaSort = isSorted ? props.sortDirection === "asc" ? "ascending" : "descending" : void 0;
+                      return /* @__PURE__ */ jsxs(
+                        TableHeaderCell,
+                        {
+                          "data-column-id": col.columnId,
+                          className: columnMeta.hdrClasses[col.columnId] || void 0,
+                          style: {
+                            ...columnMeta.hdrStyles[col.columnId],
+                            ...columnReorder ? { cursor: isReorderDragging ? "grabbing" : "grab" } : void 0
+                          },
+                          "aria-sort": ariaSort,
+                          onMouseDown: columnReorder ? (e) => handleHeaderMouseDown(col.columnId, e) : void 0,
+                          children: [
+                            /* @__PURE__ */ jsxs("div", { className: DataGridTable_module_default.headerCellContent, children: [
+                              /* @__PURE__ */ jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInput) }),
+                              /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  className: DataGridTable_module_default.headerMenuTrigger,
+                                  onClick: (e) => {
+                                    e.stopPropagation();
+                                    headerMenu.open(col.columnId, e.currentTarget);
+                                  },
+                                  "aria-label": "Column options",
+                                  title: "Column options",
+                                  children: "\u22EE"
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                className: DataGridTable_module_default.resizeHandle,
+                                onMouseDown: (e) => {
+                                  setActiveCell(null);
+                                  interaction.setSelectionRange(null);
+                                  wrapperRef.current?.focus({ preventScroll: true });
+                                  handleResizeStart(e, col);
+                                },
+                                "aria-label": `Resize ${col.name}`
+                              }
+                            )
+                          ]
+                        },
+                        col.columnId
+                      );
+                    })
+                  ] }, rowIdx))
+                }
+              ),
+              !showEmptyInGrid && /* @__PURE__ */ jsxs(TableBody, { 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),
+                      visibleCols,
+                      columnMeta,
+                      renderCellContent,
+                      handleSingleRowClick,
+                      handleRowCheckboxChange,
+                      lastMouseShiftRef,
+                      hasCheckboxCol,
+                      hasRowNumbersCol,
+                      rowNumberOffset,
+                      selectionRange,
+                      activeCell: interaction.activeCell,
+                      cutRange,
+                      copyRange,
+                      isDragging,
+                      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),
+                      visibleCols,
+                      columnMeta,
+                      renderCellContent,
+                      handleSingleRowClick,
+                      handleRowCheckboxChange,
+                      lastMouseShiftRef,
+                      hasCheckboxCol,
+                      hasRowNumbersCol,
+                      rowNumberOffset,
+                      selectionRange,
+                      activeCell: interaction.activeCell,
+                      cutRange,
+                      copyRange,
+                      isDragging,
+                      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,
+                columnSizingOverrides,
+                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
+              }
+            ),
+            wrapperRef.current?.closest(".fui-FluentProvider") ?? 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 = React.memo(DataGridTableInner);
+
+// src/ColumnChooser/ColumnChooser.module.scss
+var ColumnChooser_module_default = {
+  container: "ColumnChooser_module_container",
+  dropdown: "ColumnChooser_module_dropdown",
+  header: "ColumnChooser_module_header",
+  optionsList: "ColumnChooser_module_optionsList",
+  optionItem: "ColumnChooser_module_optionItem",
+  actions: "ColumnChooser_module_actions"
+};
+var ColumnChooser = (props) => {
+  const { columns, visibleColumns, onVisibilityChange, onSetVisibleColumns, className } = props;
+  const buttonRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const {
+    open,
+    handleToggle,
+    handleClose,
+    handleCheckboxChange: setColumnVisible,
+    handleSelectAll,
+    handleClearAll,
+    visibleCount,
+    totalCount
+  } = useColumnChooserState({ columns, visibleColumns, onVisibilityChange, onSetVisibleColumns });
+  useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      if (dropdownRef.current && !dropdownRef.current.contains(target) && buttonRef.current && !buttonRef.current.contains(target)) {
+        handleClose();
+      }
+    };
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+    }, 0);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [open, handleClose]);
+  const handleCheckboxChange = (columnKey) => (_ev, data) => {
+    setColumnVisible(columnKey)(data.checked === true);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `${ColumnChooser_module_default.container} ${className || ""}`, children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref: buttonRef,
+        appearance: "outline",
+        icon: /* @__PURE__ */ jsx(TableSettingsRegular, {}),
+        onClick: handleToggle,
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        children: [
+          "Column Visibility (",
+          visibleCount,
+          " of ",
+          totalCount,
+          ")",
+          open ? /* @__PURE__ */ jsx(ChevronUpRegular, {}) : /* @__PURE__ */ jsx(ChevronDownRegular, {})
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs("div", { ref: dropdownRef, className: ColumnChooser_module_default.dropdown, children: [
+      /* @__PURE__ */ jsxs("div", { className: ColumnChooser_module_default.header, children: [
+        "Select Columns (",
+        visibleCount,
+        " of ",
+        totalCount,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: ColumnChooser_module_default.optionsList, children: columns.map((column) => /* @__PURE__ */ jsx("div", { className: ColumnChooser_module_default.optionItem, children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          label: column.name,
+          checked: visibleColumns.has(column.columnId),
+          onChange: handleCheckboxChange(column.columnId),
+          disabled: column.required === true
+        }
+      ) }, column.columnId)) }),
+      /* @__PURE__ */ jsxs("div", { className: ColumnChooser_module_default.actions, children: [
+        /* @__PURE__ */ jsx(Button, { appearance: "subtle", size: "small", onClick: handleClearAll, children: "Clear All" }),
+        /* @__PURE__ */ jsx(Button, { appearance: "primary", size: "small", onClick: handleSelectAll, children: "Select All" })
+      ] })
+    ] })
+  ] });
+};
+
+// src/PaginationControls/PaginationControls.module.scss
+var PaginationControls_module_default = {
+  pagination: "PaginationControls_module_pagination",
+  paginationInfo: "PaginationControls_module_paginationInfo",
+  paginationControls: "PaginationControls_module_paginationControls",
+  navBtn: "PaginationControls_module_navBtn",
+  pageNumbers: "PaginationControls_module_pageNumbers",
+  pageBtn: "PaginationControls_module_pageBtn",
+  ellipsis: "PaginationControls_module_ellipsis",
+  pageSizeSelector: "PaginationControls_module_pageSizeSelector",
+  pageSizeLabel: "PaginationControls_module_pageSizeLabel",
+  pageSizeSelect: "PaginationControls_module_pageSizeSelect"
+};
+var PaginationControls = React.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 = (_e, data) => {
+    handlePageSizeChange(Number(data.value));
+  };
+  if (!vm) {
+    return null;
+  }
+  const { pageNumbers, showStartEllipsis, showEndEllipsis, totalPages, startItem, endItem } = vm;
+  return /* @__PURE__ */ jsxs("div", { className: `${PaginationControls_module_default.pagination} ${className || ""}`, role: "navigation", "aria-label": "Pagination", children: [
+    /* @__PURE__ */ jsxs("div", { className: PaginationControls_module_default.paginationInfo, children: [
+      "Showing ",
+      startItem,
+      " to ",
+      endItem,
+      " of ",
+      totalCount.toLocaleString(),
+      " ",
+      labelPlural
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: PaginationControls_module_default.paginationControls, children: [
+      /* @__PURE__ */ jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: /* @__PURE__ */ jsx(ChevronDoubleLeftRegular, {}), onClick: () => onPageChange(1), disabled: currentPage === 1, "aria-label": "First page", className: PaginationControls_module_default.navBtn }),
+      /* @__PURE__ */ jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: /* @__PURE__ */ jsx(ChevronLeftRegular, {}), onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, "aria-label": "Previous page", className: PaginationControls_module_default.navBtn }),
+      /* @__PURE__ */ jsxs("div", { className: PaginationControls_module_default.pageNumbers, children: [
+        showStartEllipsis && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { appearance: "outline", size: "small", shape: "rounded", onClick: () => onPageChange(1), "aria-label": "Page 1", className: PaginationControls_module_default.pageBtn, children: "1" }),
+          /* @__PURE__ */ jsx("span", { className: PaginationControls_module_default.ellipsis, "aria-hidden": true, children: "\u2026" })
+        ] }),
+        pageNumbers.map((pageNum) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            appearance: currentPage === pageNum ? "primary" : "outline",
+            size: "small",
+            shape: "rounded",
+            onClick: () => onPageChange(pageNum),
+            "aria-label": `Page ${pageNum}`,
+            "aria-current": currentPage === pageNum ? "page" : void 0,
+            className: PaginationControls_module_default.pageBtn,
+            children: pageNum
+          },
+          pageNum
+        )),
+        showEndEllipsis && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: PaginationControls_module_default.ellipsis, "aria-hidden": true, children: "\u2026" }),
+          /* @__PURE__ */ jsx(Button, { appearance: "outline", size: "small", shape: "rounded", onClick: () => onPageChange(totalPages), "aria-label": `Page ${totalPages}`, className: PaginationControls_module_default.pageBtn, children: totalPages })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: /* @__PURE__ */ jsx(ChevronRightRegular, {}), onClick: () => onPageChange(currentPage + 1), disabled: currentPage >= totalPages, "aria-label": "Next page", className: PaginationControls_module_default.navBtn }),
+      /* @__PURE__ */ jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: /* @__PURE__ */ jsx(ChevronDoubleRightRegular, {}), onClick: () => onPageChange(totalPages), disabled: currentPage >= totalPages, "aria-label": "Last page", className: PaginationControls_module_default.navBtn })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: PaginationControls_module_default.pageSizeSelector, children: [
+      /* @__PURE__ */ jsx("span", { className: PaginationControls_module_default.pageSizeLabel, children: "Rows" }),
+      /* @__PURE__ */ jsx(Select, { value: String(pageSize), onChange: handlePageSizeChangeEvent, size: "small", appearance: "outline", "aria-label": "Rows per page", className: PaginationControls_module_default.pageSizeSelect, children: vm.pageSizeOptions.map((n) => /* @__PURE__ */ jsx("option", { value: n, children: n }, n)) })
+    ] })
+  ] });
+});
+
+// src/OGrid/OGrid.tsx
+var OGrid = createOGrid({
+  DataGridTable,
+  ColumnChooser,
+  PaginationControls
+});
+
+export { ColumnChooser, ColumnHeaderFilter, ColumnHeaderMenu, DataGridTable, OGrid, PaginationControls };