@alaarab/ogrid-react-fluent 2.3.0 → 2.4.0

package/dist/esm/index.js

@@ -1,11 +1,11 @@
 import './index.css';
-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, indexToColumnLetter, getHeaderFilterConfig, MarchingAntsOverlay, NOOP, useColumnChooserState, BaseInlineCellEditor, partitionColumnsForVirtualization, BaseDropIndicator, BaseEmptyState, GridContextMenu as GridContextMenu$1, BaseColumnHeaderMenu, StatusBar as StatusBar$1, BaseLoadingOverlay } from '@alaarab/ogrid-react';
+import { useColumnHeaderFilterState, getColumnHeaderFilterStateParams, DateFilterContent, renderFilterContent, areGridRowPropsEqual, PaginationControlsBase, createOGrid, useListVirtualizer, STOP_PROPAGATION, useDataGridTableOrchestration, useColumnMeta, getCellRenderDescriptor, buildInlineEditorProps, buildPopoverEditorProps, POPOVER_ANCHOR_STYLE, resolveCellDisplayContent, resolveCellStyle, getCellInteractionProps, CURSOR_CELL_STYLE, CellErrorBoundary, GRID_ROOT_STYLE, PREVENT_DEFAULT, indexToColumnLetter, getHeaderFilterConfig, MarchingAntsOverlay, FormulaRefOverlay, NOOP, getColumnHeaderMenuProps, useColumnChooserState, ColumnChooserContent, BaseInlineCellEditor, partitionColumnsForVirtualization, 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 React2 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 { Popover, PopoverSurface, TableRow, TableCell, Checkbox, Table, TableHeader, TableHeaderCell, Select, Button, TableBody } from '@fluentui/react-components';
+import { FilterRegular, SearchRegular, ChevronUpRegular, ChevronDownRegular, TableSettingsRegular, ChevronDoubleRightRegular, ChevronRightRegular, ChevronLeftRegular, ChevronDoubleLeftRegular } from '@fluentui/react-icons';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/ColumnHeaderFilter/ColumnHeaderFilter.module.scss
@@ -1020,6 +1020,14 @@ function DataGridTableInner(props) {
                 isDragging
               }
             ),
+            props.formulaReferences && props.formulaReferences.length > 0 && /* @__PURE__ */ jsx(
+              FormulaRefOverlay,
+              {
+                containerRef: tableContainerRef,
+                references: props.formulaReferences,
+                colOffset
+              }
+            ),
             showEmptyInGrid && emptyState && /* @__PURE__ */ jsx(EmptyState, { emptyState })
           ] }) }) }),
           menuPosition && createPortal(
@@ -1042,28 +1050,7 @@ function DataGridTableInner(props) {
             ),
             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
-            }
-          )
+          /* @__PURE__ */ jsx(ColumnHeaderMenu, { ...getColumnHeaderMenuProps(headerMenu) })
         ]
       }
     ),
@@ -1092,6 +1079,25 @@ var ColumnChooser_module_default = {
   "optionItem": "ogrid-fluent__ColumnChooser-module__optionItem",
   "actions": "ogrid-fluent__ColumnChooser-module__actions"
 };
+var CheckboxItem = ({ columnId, columnName, checked, disabled, onChange }) => /* @__PURE__ */ jsx(
+  Checkbox,
+  {
+    id: `col-${columnId}`,
+    label: columnName,
+    checked,
+    onChange: (_ev, data) => onChange(data.checked === true),
+    disabled
+  }
+);
+var Actions = ({ onClearAll, onSelectAll }) => /* @__PURE__ */ jsxs("div", { className: ColumnChooser_module_default.actions, children: [
+  /* @__PURE__ */ jsx(Button, { appearance: "subtle", size: "small", onClick: onClearAll, children: "Clear All" }),
+  /* @__PURE__ */ jsx(Button, { appearance: "primary", size: "small", onClick: onSelectAll, children: "Select All" })
+] });
+var CLASS_NAMES = {
+  header: ColumnChooser_module_default.header,
+  optionsList: ColumnChooser_module_default.optionsList,
+  optionItem: ColumnChooser_module_default.optionItem
+};
 var ColumnChooser = (props) => {
   const { columns, visibleColumns, onVisibilityChange, onSetVisibleColumns, className } = props;
   const buttonRef = useRef(null);
@@ -1122,9 +1128,7 @@ var ColumnChooser = (props) => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [open, handleClose]);
-  const handleCheckboxChange = (columnKey) => (_ev, data) => {
-    setColumnVisible(columnKey)(data.checked === true);
-  };
+  const handleCheckboxChange = (columnKey) => (checked) => setColumnVisible(columnKey)(checked);
   return /* @__PURE__ */ jsxs("div", { className: `${ColumnChooser_module_default.container} ${className || ""}`, children: [
     /* @__PURE__ */ jsxs(
       Button,
@@ -1145,28 +1149,21 @@ var ColumnChooser = (props) => {
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs("div", { ref: dropdownRef, className: ColumnChooser_module_default.dropdown, children: [
-      /* @__PURE__ */ jsxs("div", { className: ColumnChooser_module_default.header, children: [
-        "Select Columns (",
+    open && /* @__PURE__ */ jsx("div", { ref: dropdownRef, className: ColumnChooser_module_default.dropdown, children: /* @__PURE__ */ jsx(
+      ColumnChooserContent,
+      {
+        columns,
+        visibleColumns,
         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" })
-      ] })
-    ] })
+        handleSelectAll,
+        handleClearAll,
+        handleCheckboxChange,
+        CheckboxItem,
+        classNames: CLASS_NAMES,
+        Actions
+      }
+    ) })
   ] });
 };
 
@@ -1183,71 +1180,57 @@ var PaginationControls_module_default = {
   "pageSizeLabel": "ogrid-fluent__PaginationControls-module__pageSizeLabel",
   "pageSizeSelect": "ogrid-fluent__PaginationControls-module__pageSizeSelect"
 };
-var PaginationControls = React2.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;
+var FLUENT_NAV_ICONS = {
+  first: /* @__PURE__ */ jsx(ChevronDoubleLeftRegular, {}),
+  prev: /* @__PURE__ */ jsx(ChevronLeftRegular, {}),
+  next: /* @__PURE__ */ jsx(ChevronRightRegular, {}),
+  last: /* @__PURE__ */ jsx(ChevronDoubleRightRegular, {})
+};
+var NavButton = ({ variant, onClick, disabled, "aria-label": ariaLabel, className }) => /* @__PURE__ */ jsx(
+  Button,
+  {
+    appearance: "outline",
+    shape: "circular",
+    size: "small",
+    icon: FLUENT_NAV_ICONS[variant],
+    onClick,
+    disabled,
+    "aria-label": ariaLabel,
+    className
   }
-  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)) })
-    ] })
-  ] });
-});
+);
+var PageButton = ({ onClick, active, "aria-label": ariaLabel, "aria-current": ariaCurrent, children, className }) => /* @__PURE__ */ jsx(
+  Button,
+  {
+    appearance: active ? "primary" : "outline",
+    size: "small",
+    shape: "rounded",
+    onClick,
+    "aria-label": ariaLabel,
+    "aria-current": ariaCurrent,
+    className,
+    children
+  }
+);
+var PageSizeSelect = ({ value, options, onChange, "aria-label": ariaLabel, className }) => {
+  const handleChange = (_e, data) => onChange(Number(data.value));
+  return /* @__PURE__ */ jsx(Select, { value: String(value), onChange: handleChange, size: "small", appearance: "outline", "aria-label": ariaLabel, className, children: options.map((n) => /* @__PURE__ */ jsx("option", { value: n, children: n }, n)) });
+};
+var SLOTS = { NavButton, PageButton, PageSizeSelect };
+var CLASS_NAMES2 = {
+  pagination: PaginationControls_module_default.pagination,
+  paginationInfo: PaginationControls_module_default.paginationInfo,
+  paginationControls: PaginationControls_module_default.paginationControls,
+  pageNumbers: PaginationControls_module_default.pageNumbers,
+  ellipsis: PaginationControls_module_default.ellipsis,
+  navBtn: PaginationControls_module_default.navBtn,
+  pageBtn: PaginationControls_module_default.pageBtn,
+  pageSizeSelector: PaginationControls_module_default.pageSizeSelector,
+  pageSizeLabel: PaginationControls_module_default.pageSizeLabel,
+  pageSizeSelect: PaginationControls_module_default.pageSizeSelect
+};
+var PaginationControls = React2.memo((props) => /* @__PURE__ */ jsx(PaginationControlsBase, { ...props, slots: SLOTS, classNames: CLASS_NAMES2 }));
+PaginationControls.displayName = "PaginationControls";
 
 // src/OGrid/OGrid.tsx
 var OGrid = createOGrid({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react-fluent",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "OGrid React Fluent implementation – DataGrid-powered data table with sorting, filtering, pagination, column chooser, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -41,7 +41,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-react": "2.3.0"
+    "@alaarab/ogrid-react": "2.4.0"
   },
   "peerDependencies": {
     "@fluentui/react-components": "^9.0.0",