@alaarab/ogrid-react 2.0.9 → 2.0.12

package/dist/esm/hooks/useDataGridTableOrchestration.js

@@ -0,0 +1,200 @@
+import { useCallback, useRef, useMemo } from 'react';
+import { useDataGridState } from './useDataGridState';
+import { useColumnResize } from './useColumnResize';
+import { useColumnReorder } from './useColumnReorder';
+import { useVirtualScroll } from './useVirtualScroll';
+import { useLatestRef } from './useLatestRef';
+import { buildHeaderRows } from '../utils';
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+/**
+ * Shared orchestration hook for DataGridTable.
+ *
+ * Encapsulates all state management and computation that is identical across
+ * Radix, Fluent, and Material DataGridTable implementations. Each UI package
+ * calls this hook, then renders its own framework-specific JSX using the
+ * returned values.
+ */
+export function useDataGridTableOrchestration(params) {
+    const { props } = params;
+    // ── Refs ────────────────────────────────────────────────────────────────
+    const wrapperRef = useRef(null);
+    const tableContainerRef = useRef(null);
+    const lastMouseShiftRef = useRef(false);
+    // ── Core state ──────────────────────────────────────────────────────────
+    const state = useDataGridState({ props, wrapperRef });
+    const { layout, rowSelection: rowSel, editing, interaction, contextMenu: ctxMenu, viewModels, pinning } = state;
+    const { visibleCols: visibleColsTyped, totalColCount, hasCheckboxCol, hasRowNumbersCol, colOffset, containerWidth, minTableWidth, desiredTableWidth, columnSizingOverrides, setColumnSizingOverrides, } = layout;
+    const visibleCols = visibleColsTyped;
+    const { selectedRowIds, updateSelection, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected } = rowSel;
+    const { editingCell, setEditingCell, pendingEditorValue, setPendingEditorValue, commitCellEdit, cancelPopoverEdit, popoverAnchorEl, setPopoverAnchorEl } = editing;
+    const { setActiveCell, handleCellMouseDown, selectionRange, hasCellSelection, handleGridKeyDown, handleFillHandleMouseDown, handleCopy, handleCut, handlePaste, cutRange, copyRange, canUndo, canRedo, onUndo, onRedo, isDragging } = interaction;
+    const { menuPosition, handleCellContextMenu, closeContextMenu } = ctxMenu;
+    const { headerFilterInput, cellDescriptorInput, statusBarConfig, showEmptyInGrid, onCellError } = viewModels;
+    const { headerMenu } = pinning;
+    const handlePasteVoid = useCallback(() => { void handlePaste(); }, [handlePaste]);
+    // ── Props destructuring ─────────────────────────────────────────────────
+    const { items, columns, getRowId, emptyState, layoutMode = 'fill', rowSelection = 'none', freezeRows, freezeCols, suppressHorizontalScroll, isLoading = false, loadingMessage = 'Loading\u2026', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, visibleColumns, columnOrder, onColumnOrderChange, columnReorder, virtualScroll, density = 'normal', pinnedColumns, currentPage = 1, pageSize: propPageSize = 25, } = props;
+    // ── Derived values ──────────────────────────────────────────────────────
+    const rowNumberOffset = hasRowNumbersCol ? (currentPage - 1) * propPageSize : 0;
+    const headerRows = useMemo(() => buildHeaderRows(columns, visibleColumns), [columns, visibleColumns]);
+    const allowOverflowX = !suppressHorizontalScroll && containerWidth > 0 && (minTableWidth > containerWidth || desiredTableWidth > containerWidth);
+    const fitToContent = layoutMode === 'content';
+    // ── Column resize ──────────────────────────────────────────────────────
+    const { handleResizeStart, getColumnWidth } = useColumnResize({
+        columnSizingOverrides,
+        setColumnSizingOverrides,
+    });
+    // ── Column reorder ─────────────────────────────────────────────────────
+    const { isDragging: isReorderDragging, dropIndicatorX, handleHeaderMouseDown } = useColumnReorder({
+        columns: visibleCols,
+        columnOrder,
+        onColumnOrderChange,
+        enabled: columnReorder === true,
+        pinnedColumns,
+        wrapperRef,
+    });
+    // ── Virtual scroll ─────────────────────────────────────────────────────
+    const virtualScrollEnabled = virtualScroll?.enabled === true;
+    const virtualRowHeight = virtualScroll?.rowHeight ?? 36;
+    const { visibleRange } = useVirtualScroll({
+        totalRows: items.length,
+        rowHeight: virtualRowHeight,
+        enabled: virtualScrollEnabled,
+        overscan: virtualScroll?.overscan,
+        containerRef: wrapperRef,
+    });
+    // ── Memoized callback groups ───────────────────────────────────────────
+    const editCallbacks = useMemo(() => ({ commitCellEdit, setEditingCell, setPendingEditorValue, cancelPopoverEdit }), [commitCellEdit, setEditingCell, setPendingEditorValue, cancelPopoverEdit]);
+    const interactionHandlers = useMemo(() => ({ handleCellMouseDown, setActiveCell, setEditingCell, handleCellContextMenu }), [handleCellMouseDown, setActiveCell, setEditingCell, handleCellContextMenu]);
+    // ── Stable refs for volatile state ─────────────────────────────────────
+    const cellDescriptorInputRef = useLatestRef(cellDescriptorInput);
+    const pendingEditorValueRef = useLatestRef(pendingEditorValue);
+    const popoverAnchorElRef = useLatestRef(popoverAnchorEl);
+    const selectedRowIdsRef = useLatestRef(selectedRowIds);
+    // ── Stable row-click handler ───────────────────────────────────────────
+    const handleSingleRowClick = useCallback((e) => {
+        if (rowSelection !== 'single')
+            return;
+        const rowId = e.currentTarget.dataset.rowId;
+        if (!rowId)
+            return;
+        const ids = selectedRowIdsRef.current;
+        updateSelection(ids.has(rowId) ? new Set() : new Set([rowId]));
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- selectedRowIdsRef is a stable ref
+    }, [rowSelection, updateSelection]);
+    // ── Return ─────────────────────────────────────────────────────────────
+    return {
+        // Refs
+        wrapperRef,
+        tableContainerRef,
+        lastMouseShiftRef,
+        // Full state sub-objects
+        state,
+        layout,
+        rowSel,
+        editing,
+        interaction,
+        ctxMenu,
+        viewModels,
+        pinning,
+        // Column resize
+        handleResizeStart,
+        getColumnWidth,
+        // Column reorder
+        isReorderDragging,
+        dropIndicatorX,
+        handleHeaderMouseDown,
+        // Virtual scroll
+        virtualScrollEnabled,
+        virtualRowHeight,
+        visibleRange,
+        // Derived from props
+        items,
+        columns,
+        getRowId,
+        emptyState,
+        layoutMode,
+        rowSelection,
+        freezeRows,
+        freezeCols,
+        suppressHorizontalScroll,
+        isLoading,
+        loadingMessage,
+        ariaLabel,
+        ariaLabelledBy,
+        visibleColumns,
+        columnOrder,
+        columnReorder,
+        density,
+        pinnedColumns,
+        currentPage,
+        propPageSize,
+        // Computed values
+        rowNumberOffset,
+        headerRows,
+        allowOverflowX,
+        fitToContent,
+        // Memoized callback groups
+        editCallbacks,
+        interactionHandlers,
+        // Stable refs for volatile state
+        cellDescriptorInputRef,
+        pendingEditorValueRef,
+        popoverAnchorElRef,
+        selectedRowIdsRef,
+        // Convenience handlers
+        handleSingleRowClick,
+        handlePasteVoid,
+        // Layout-derived references
+        visibleCols,
+        totalColCount,
+        hasCheckboxCol,
+        hasRowNumbersCol,
+        colOffset,
+        containerWidth,
+        minTableWidth,
+        desiredTableWidth,
+        columnSizingOverrides,
+        setColumnSizingOverrides,
+        // Row selection shortcuts
+        selectedRowIds,
+        updateSelection,
+        handleRowCheckboxChange,
+        handleSelectAll,
+        allSelected,
+        someSelected,
+        // Editing shortcuts
+        editingCell,
+        setPopoverAnchorEl,
+        cancelPopoverEdit,
+        // Interaction shortcuts
+        setActiveCell,
+        selectionRange,
+        hasCellSelection,
+        handleGridKeyDown,
+        handleFillHandleMouseDown,
+        handleCopy,
+        handleCut,
+        cutRange,
+        copyRange,
+        canUndo,
+        canRedo,
+        onUndo,
+        onRedo,
+        isDragging,
+        // Context menu shortcuts
+        menuPosition,
+        handleCellContextMenu,
+        closeContextMenu,
+        // ViewModel shortcuts
+        headerFilterInput,
+        cellDescriptorInput,
+        statusBarConfig,
+        showEmptyInGrid,
+        onCellError,
+        // Pinning shortcuts
+        headerMenu,
+    };
+}

package/dist/esm/hooks/useDebounce.js

@@ -17,7 +17,7 @@ export function useDebounce(value, delayMs) {
  * Each new call resets the timer.
  */
 export function useDebouncedCallback(fn, delayMs) {
-    const timeoutRef = useRef();
+    const timeoutRef = useRef(undefined);
     const fnRef = useRef(fn);
     fnRef.current = fn;
     const debounced = useCallback(((...args) => {

package/dist/esm/hooks/useOGrid.js

@@ -1,5 +1,5 @@
 import { useMemo, useCallback, useState, useEffect, useRef, useImperativeHandle, } from 'react';
-import { mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, flattenColumns, processClientSideData, } from '../utils';
+import { mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, flattenColumns, processClientSideData, computeNextSortState, } from '../utils';
 import { useFilterOptions } from './useFilterOptions';
 import { useSideBarState } from './useSideBarState';
 const DEFAULT_PAGE_SIZE = 25;
@@ -72,11 +72,8 @@ export function useOGrid(props, ref) {
             setInternalVisibleColumns(cols);
         onVisibleColumnsChange?.(cols);
     }, [controlledVisibleColumns, onVisibleColumnsChange]);
-    const handleSort = useCallback((columnKey) => {
-        setSort({
-            field: columnKey,
-            direction: sort.field === columnKey && sort.direction === 'asc' ? 'desc' : 'asc',
-        });
+    const handleSort = useCallback((columnKey, direction) => {
+        setSort(computeNextSortState(sort, columnKey, direction));
     }, [sort, setSort]);
     /** Single filter change handler — wraps discriminated FilterValue into mergeFilter. */
     const handleFilterChange = useCallback((key, value) => {

package/dist/esm/hooks/usePaginationControls.js

@@ -0,0 +1,19 @@
+import { useMemo, useCallback } from 'react';
+import { getPaginationViewModel } from '../utils';
+/**
+ * Shared pagination controls logic for React UI packages.
+ * Computes pagination view model and provides standardized handlers.
+ */
+export function usePaginationControls(props) {
+    const { currentPage, pageSize, totalCount, onPageSizeChange, pageSizeOptions, entityLabelPlural } = props;
+    const labelPlural = entityLabelPlural ?? 'items';
+    const vm = useMemo(() => getPaginationViewModel(currentPage, pageSize, totalCount, pageSizeOptions ? { pageSizeOptions } : undefined), [currentPage, pageSize, totalCount, pageSizeOptions]);
+    const handlePageSizeChange = useCallback((value) => {
+        onPageSizeChange(value);
+    }, [onPageSizeChange]);
+    return {
+        labelPlural,
+        vm,
+        handlePageSizeChange,
+    };
+}

package/dist/esm/index.js

@@ -2,7 +2,9 @@
 export { CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, } from '@alaarab/ogrid-core';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types';
 // Hooks
-export { useFilterOptions, useOGrid, useActiveCell, useCellEditing, useContextMenu, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useUndoRedo, useDebounce, useFillHandle, useDataGridState, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useColumnResize, useRichSelectState, useSideBarState, useTableLayout, useColumnReorder, useVirtualScroll, useLatestRef, } from './hooks';
+export { useFilterOptions, useOGrid, useActiveCell, useCellEditing, useContextMenu, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useUndoRedo, useDebounce, useFillHandle, useDataGridState, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useColumnResize, useRichSelectState, useSideBarState, useTableLayout, useColumnReorder, useVirtualScroll, useLatestRef, usePaginationControls, useDataGridTableOrchestration, } from './hooks';
+// Constants
+export { GRID_ROOT_STYLE, CURSOR_CELL_STYLE, POPOVER_ANCHOR_STYLE, PREVENT_DEFAULT, NOOP, STOP_PROPAGATION, } from './constants/domHelpers';
 // Components
 export { OGridLayout } from './components/OGridLayout';
 export { StatusBar } from './components/StatusBar';
@@ -12,5 +14,8 @@ export { MarchingAntsOverlay } from './components/MarchingAntsOverlay';
 export { SideBar } from './components/SideBar';
 export { CellErrorBoundary } from './components/CellErrorBoundary';
 export { EmptyState } from './components/EmptyState';
+export { DateFilterContent, getColumnHeaderFilterStateParams, getDateFilterContentProps, } from './components/ColumnHeaderFilterContent';
 // Utilities
 export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, getHeaderFilterConfig, getCellRenderDescriptor, isRowInRange, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, areGridRowPropsEqual, } from './utils';
+// Shared component props & renderers (for UI packages to consume)
+export { renderFilterContent } from './components/ColumnHeaderFilterRenderers';

package/dist/esm/utils/index.js

@@ -1,5 +1,5 @@
 // Shared utilities re-exported from core
-export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, } from '@alaarab/ogrid-core';
+export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, computeNextSortState, measureColumnContentWidth, AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, } from '@alaarab/ogrid-core';
 // View model utilities (re-exported from core + React-specific getCellInteractionProps)
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from './dataGridViewModel';
 export { areGridRowPropsEqual, isRowInRange } from './gridRowComparator';

package/dist/types/components/ColumnChooserProps.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared props interface for ColumnChooser across all React UI packages.
+ * Each UI package renders its own framework-specific trigger, popover, and checkboxes
+ * but shares this common prop shape.
+ */
+import type { IColumnDefinition } from '../types/columnTypes';
+export interface IColumnChooserProps {
+    columns: IColumnDefinition[];
+    visibleColumns: Set<string>;
+    onVisibilityChange: (columnKey: string, visible: boolean) => void;
+    className?: string;
+}

package/dist/types/components/ColumnHeaderFilterContent.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Shared filter content rendering for ColumnHeaderFilter across all React UI packages.
+ * Each UI package provides its own popover wrapper + trigger; this component renders
+ * the inner filter content (text, multiselect, people, date) given the shared state
+ * from useColumnHeaderFilterState.
+ */
+import * as React from 'react';
+import type { ColumnFilterType, IDateFilterValue } from '../types/columnTypes';
+import type { UserLike } from '../types/dataGridTypes';
+import type { UseColumnHeaderFilterStateResult } from '../hooks/useColumnHeaderFilterState';
+export interface IColumnHeaderFilterProps {
+    columnKey: string;
+    columnName: string;
+    filterType: ColumnFilterType;
+    isSorted?: boolean;
+    isSortedDescending?: boolean;
+    onSort?: () => void;
+    selectedValues?: string[];
+    onFilterChange?: (values: string[]) => void;
+    options?: string[];
+    isLoadingOptions?: boolean;
+    textValue?: string;
+    onTextChange?: (value: string) => void;
+    selectedUser?: UserLike;
+    onUserChange?: (user: UserLike | undefined) => void;
+    peopleSearch?: (query: string) => Promise<UserLike[]>;
+    dateValue?: IDateFilterValue;
+    onDateChange?: (value: IDateFilterValue | undefined) => void;
+}
+export interface DateFilterContentProps {
+    tempDateFrom: string;
+    setTempDateFrom: (v: string) => void;
+    tempDateTo: string;
+    setTempDateTo: (v: string) => void;
+    onApply: () => void;
+    onClear: () => void;
+    classNames?: DateFilterClassNames;
+}
+export interface DateFilterClassNames {
+    popoverActions?: string;
+    clearButton?: string;
+    applyButton?: string;
+}
+export declare const DateFilterContent: React.FC<DateFilterContentProps>;
+export declare function getColumnHeaderFilterStateParams(props: IColumnHeaderFilterProps): {
+    filterType: ColumnFilterType;
+    isSorted: boolean;
+    isSortedDescending: boolean;
+    onSort: (() => void) | undefined;
+    selectedValues: string[] | undefined;
+    onFilterChange: ((values: string[]) => void) | undefined;
+    options: string[] | undefined;
+    isLoadingOptions: boolean;
+    textValue: string;
+    onTextChange: ((value: string) => void) | undefined;
+    selectedUser: UserLike | undefined;
+    onUserChange: ((user: UserLike | undefined) => void) | undefined;
+    peopleSearch: ((query: string) => Promise<UserLike[]>) | undefined;
+    dateValue: IDateFilterValue | undefined;
+    onDateChange: ((value: IDateFilterValue | undefined) => void) | undefined;
+};
+export declare function getDateFilterContentProps(state: UseColumnHeaderFilterStateResult, classNames?: DateFilterClassNames): DateFilterContentProps;

package/dist/types/components/ColumnHeaderFilterRenderers.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Shared filter content dispatching for ColumnHeaderFilter across all React UI packages.
+ *
+ * Each UI package provides framework-specific sub-filter components (TextFilterPopover,
+ * MultiSelectFilterPopover, PeopleFilterPopover, date content). This utility dispatches
+ * to the correct renderer based on filterType, eliminating the duplicated if/switch chain
+ * that was previously in each UI package's ColumnHeaderFilter component.
+ */
+import type * as React from 'react';
+import type { ColumnFilterType } from '../types/columnTypes';
+import type { UserLike } from '../types/dataGridTypes';
+import type { UseColumnHeaderFilterStateResult } from '../hooks/useColumnHeaderFilterState';
+/**
+ * Framework-specific renderers for each filter type.
+ * Each UI package maps its own sub-filter components to these slots.
+ */
+export interface FilterContentRenderers {
+    renderMultiSelect: (props: MultiSelectRendererProps) => React.ReactNode;
+    renderText: (props: TextRendererProps) => React.ReactNode;
+    renderPeople: (props: PeopleRendererProps) => React.ReactNode;
+    renderDate: (props: DateRendererProps) => React.ReactNode;
+}
+export interface MultiSelectRendererProps {
+    searchText: string;
+    onSearchChange: (value: string) => void;
+    options: string[];
+    filteredOptions: string[];
+    selected: Set<string>;
+    onOptionToggle: (option: string, checked: boolean) => void;
+    onSelectAll: () => void;
+    onClearSelection: () => void;
+    onApply: () => void;
+    isLoading: boolean;
+}
+export interface TextRendererProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    onApply: () => void;
+    onClear: () => void;
+}
+export interface PeopleRendererProps {
+    selectedUser: UserLike | undefined;
+    searchText: string;
+    onSearchChange: (value: string) => void;
+    suggestions: UserLike[];
+    isLoading: boolean;
+    onUserSelect: (user: UserLike) => void;
+    onClearUser: () => void;
+    inputRef: React.RefObject<HTMLInputElement | null>;
+}
+export interface DateRendererProps {
+    tempDateFrom: string;
+    setTempDateFrom: (v: string) => void;
+    tempDateTo: string;
+    setTempDateTo: (v: string) => void;
+    onApply: () => void;
+    onClear: () => void;
+}
+/**
+ * Dispatches to the appropriate filter content renderer based on filterType.
+ * Eliminates the duplicated if/switch chain in each UI package's ColumnHeaderFilter.
+ *
+ * @param filterType - The column's filter type
+ * @param state - The result from useColumnHeaderFilterState
+ * @param options - The filter options array (for multiSelect)
+ * @param isLoadingOptions - Whether options are loading
+ * @param selectedUser - The currently selected user (for people filter)
+ * @param renderers - Framework-specific renderer functions
+ * @returns The rendered filter content, or null for unsupported filter types
+ */
+export declare function renderFilterContent(filterType: ColumnFilterType, state: UseColumnHeaderFilterStateResult, options: string[], isLoadingOptions: boolean, selectedUser: UserLike | undefined, renderers: FilterContentRenderers): React.ReactNode;

package/dist/types/components/MarchingAntsOverlay.d.ts

@@ -11,5 +11,15 @@ export interface MarchingAntsOverlayProps {
     cutRange: ISelectionRange | null;
     /** Column offset — 1 when checkbox column is present, else 0 */
     colOffset: number;
+    /** Items array — triggers re-measurement when data changes (e.g., sorting) */
+    items: readonly unknown[];
+    /** Visible columns — triggers re-measurement when columns are hidden/shown */
+    visibleColumns: Set<string> | undefined;
+    /** Column sizing overrides — triggers re-measurement when columns are resized */
+    columnSizingOverrides: Record<string, {
+        widthPx: number;
+    }>;
+    /** Column order — triggers re-measurement when columns are reordered */
+    columnOrder: readonly string[] | undefined;
 }
-export declare function MarchingAntsOverlay({ containerRef, selectionRange, copyRange, cutRange, colOffset, }: MarchingAntsOverlayProps): React.ReactElement | null;
+export declare function MarchingAntsOverlay({ containerRef, selectionRange, copyRange, cutRange, colOffset, items, visibleColumns, columnSizingOverrides, columnOrder, }: MarchingAntsOverlayProps): React.ReactElement | null;

package/dist/types/components/PaginationControlsProps.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Shared props interface for PaginationControls across all React UI packages.
+ * Each UI package renders its own framework-specific buttons, selects, and layout
+ * but shares this common prop shape.
+ */
+export interface IPaginationControlsProps {
+    currentPage: number;
+    pageSize: number;
+    totalCount: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+    pageSizeOptions?: number[];
+    entityLabelPlural?: string;
+    className?: string;
+}

package/dist/types/constants/domHelpers.d.ts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+/**
+ * Module-scope stable constants shared across all React UI DataGridTable implementations.
+ * Avoid per-render allocations by keeping these at module scope.
+ */
+/** Root container style for the DataGridTable (flex column layout). */
+export declare const GRID_ROOT_STYLE: React.CSSProperties;
+/** Applied to cells that support editing — shows the cell cursor. */
+export declare const CURSOR_CELL_STYLE: React.CSSProperties;
+/** Minimum size for popover anchor elements. */
+export declare const POPOVER_ANCHOR_STYLE: React.CSSProperties;
+/** Prevents the default browser action for mouse events. */
+export declare const PREVENT_DEFAULT: (e: React.MouseEvent) => void;
+/** No-operation function. */
+export declare const NOOP: () => void;
+/** Stops event propagation (e.g. click on checkbox inside a row). */
+export declare const STOP_PROPAGATION: (e: React.MouseEvent) => void;

package/dist/types/hooks/index.d.ts

@@ -22,7 +22,7 @@ export { useDebounce } from './useDebounce';
 export { useFillHandle } from './useFillHandle';
 export type { UseFillHandleResult, UseFillHandleParams } from './useFillHandle';
 export { useDataGridState } from './useDataGridState';
-export type { UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, } from './useDataGridState';
+export type { UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, DataGridPinningState, } from './useDataGridState';
 export { useColumnHeaderFilterState } from './useColumnHeaderFilterState';
 export type { UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, } from './useColumnHeaderFilterState';
 export { useTextFilterState } from './useTextFilterState';
@@ -54,3 +54,7 @@ export type { UseColumnReorderParams, UseColumnReorderResult, } from './useColum
 export { useVirtualScroll } from './useVirtualScroll';
 export type { IVirtualScrollConfig, UseVirtualScrollParams, UseVirtualScrollResult, } from './useVirtualScroll';
 export { useLatestRef } from './useLatestRef';
+export { usePaginationControls } from './usePaginationControls';
+export type { UsePaginationControlsProps, UsePaginationControlsResult, } from './usePaginationControls';
+export { useDataGridTableOrchestration } from './useDataGridTableOrchestration';
+export type { UseDataGridTableOrchestrationParams, UseDataGridTableOrchestrationResult, } from './useDataGridTableOrchestration';

package/dist/types/hooks/useColumnHeaderMenuState.d.ts

@@ -2,6 +2,20 @@ export interface UseColumnHeaderMenuStateParams {
     pinnedColumns: Record<string, 'left' | 'right'>;
     onPinColumn: (columnId: string, side: 'left' | 'right') => void;
     onUnpinColumn: (columnId: string) => void;
+    sortBy?: string;
+    sortDirection: 'asc' | 'desc';
+    onColumnSort: (columnKey: string, direction?: 'asc' | 'desc' | null) => void;
+    onColumnResized?: (columnId: string, width: number) => void;
+    onAutosizeColumn?: (columnId: string, width: number) => void;
+    columns: Array<{
+        columnId: string;
+        width?: number;
+        minWidth?: number;
+        sortable?: boolean;
+        resizable?: boolean;
+    }>;
+    data: unknown[];
+    getRowId: (item: unknown) => string | number;
 }
 export interface UseColumnHeaderMenuStateResult {
     isOpen: boolean;
@@ -12,12 +26,20 @@ export interface UseColumnHeaderMenuStateResult {
     handlePinLeft: () => void;
     handlePinRight: () => void;
     handleUnpin: () => void;
+    handleSortAsc: () => void;
+    handleSortDesc: () => void;
+    handleClearSort: () => void;
+    handleAutosizeThis: () => void;
+    handleAutosizeAll: () => void;
     canPinLeft: boolean;
     canPinRight: boolean;
     canUnpin: boolean;
+    currentSort: 'asc' | 'desc' | null;
+    isSortable: boolean;
+    isResizable: boolean;
 }
 /**
- * Manages state for the column header menu (pin left/right/unpin actions).
+ * Manages state for the column header menu (pin, sort, autosize actions).
  * Tracks which column's menu is open, anchor element, and action handlers.
  */
 export declare function useColumnHeaderMenuState(params: UseColumnHeaderMenuStateParams): UseColumnHeaderMenuStateResult;

package/dist/types/hooks/useDataGridState.d.ts

@@ -128,12 +128,8 @@ export interface DataGridPinningState {
     pinColumn: (columnId: string, side: 'left' | 'right') => void;
     unpinColumn: (columnId: string) => void;
     isPinned: (columnId: string) => 'left' | 'right' | undefined;
-    computeLeftOffsets: (visibleCols: {
-        columnId: string;
-    }[], columnWidths: Record<string, number>, defaultWidth: number, hasCheckboxColumn: boolean, checkboxColumnWidth: number) => Record<string, number>;
-    computeRightOffsets: (visibleCols: {
-        columnId: string;
-    }[], columnWidths: Record<string, number>, defaultWidth: number) => Record<string, number>;
+    leftOffsets: Record<string, number>;
+    rightOffsets: Record<string, number>;
     headerMenu: {
         isOpen: boolean;
         openForColumn: string | null;
@@ -143,9 +139,17 @@ export interface DataGridPinningState {
         handlePinLeft: () => void;
         handlePinRight: () => void;
         handleUnpin: () => void;
+        handleSortAsc: () => void;
+        handleSortDesc: () => void;
+        handleClearSort: () => void;
+        handleAutosizeThis: () => void;
+        handleAutosizeAll: () => void;
         canPinLeft: boolean;
         canPinRight: boolean;
         canUnpin: boolean;
+        currentSort: 'asc' | 'desc' | null;
+        isSortable: boolean;
+        isResizable: boolean;
     };
 }
 /** Grouped result from useDataGridState. */