@alaarab/ogrid-react 2.0.0-beta

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { GridContextMenuHandlerProps } from '../utils';
+export interface GridContextMenuClassNames {
+    contextMenu?: string;
+    contextMenuItem?: string;
+    contextMenuItemLabel?: string;
+    contextMenuItemShortcut?: string;
+    contextMenuDivider?: string;
+}
+export interface GridContextMenuProps extends GridContextMenuHandlerProps {
+    x: number;
+    y: number;
+    hasSelection: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
+    classNames?: GridContextMenuClassNames;
+}
+export declare function GridContextMenu(props: GridContextMenuProps): React.ReactElement;

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { ISelectionRange } from '../types';
+export interface MarchingAntsOverlayProps {
+    /** Ref to the positioned container that wraps the table (must have position: relative) */
+    containerRef: React.RefObject<HTMLElement | null>;
+    /** Current selection range — solid green border */
+    selectionRange: ISelectionRange | null;
+    /** Copy range — animated dashed border */
+    copyRange: ISelectionRange | null;
+    /** Cut range — animated dashed border */
+    cutRange: ISelectionRange | null;
+    /** Column offset — 1 when checkbox column is present, else 0 */
+    colOffset: number;
+}
+export declare function MarchingAntsOverlay({ containerRef, selectionRange, copyRange, cutRange, colOffset, }: MarchingAntsOverlayProps): React.ReactElement | null;

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

@@ -0,0 +1,37 @@
+/**
+ * Single layout structure for OGrid: unified bordered container with
+ * toolbar strip, grid area (optionally with sidebar), and footer strip.
+ * UI packages supply Container (Fluent/Radix: div, Material: Box).
+ */
+import * as React from 'react';
+import type { SideBarProps } from './SideBar';
+export interface OGridLayoutProps {
+    /** Root container element (default: 'div'). Material can pass Box. */
+    containerComponent?: React.ElementType;
+    /** Extra props for the root container (e.g. sx for MUI Box). */
+    containerProps?: Record<string, unknown>;
+    className?: string;
+    /** Custom toolbar content (left-aligned in toolbar strip). */
+    toolbar?: React.ReactNode;
+    /** Built-in toolbar items rendered on the right side (column chooser, etc.). */
+    toolbarEnd?: React.ReactNode;
+    /** Secondary toolbar row below the primary toolbar (e.g. active filter chips). Full width. */
+    toolbarBelow?: React.ReactNode;
+    /** Grid content (DataGridTable). */
+    children: React.ReactNode;
+    /** Pagination controls (rendered in footer strip inside the bordered container). */
+    pagination?: React.ReactNode;
+    /** Side bar props. When provided, renders SideBar alongside the grid. */
+    sideBar?: SideBarProps | null;
+}
+/**
+ * Renders OGrid layout as a unified bordered container:
+ *   ┌────────────────────────────────────┐
+ *   │ [toolbar strip]                    │
+ *   ├────────────────────────────────────┤
+ *   │ [sidebar]? [grid]                  │
+ *   ├────────────────────────────────────┤
+ *   │ [footer strip / pagination]        │
+ *   └────────────────────────────────────┘
+ */
+export declare function OGridLayout(props: OGridLayoutProps): React.ReactElement;

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

@@ -0,0 +1,30 @@
+/**
+ * Headless SideBar component rendered by OGridLayout.
+ * Contains a tab strip (toggle buttons) and a panel area (columns or filters).
+ * Uses inline styles for framework-agnostic rendering.
+ */
+import * as React from 'react';
+import type { IColumnDefinition, SideBarPanelId, IFilters, FilterValue } from '../types';
+/** Describes a filterable column for the sidebar filters panel. */
+export interface SideBarFilterColumn {
+    columnId: string;
+    name: string;
+    filterField: string;
+    filterType: 'text' | 'multiSelect' | 'people' | 'date';
+}
+export interface SideBarProps {
+    activePanel: SideBarPanelId | null;
+    onPanelChange: (panel: SideBarPanelId | null) => void;
+    panels: SideBarPanelId[];
+    position: 'left' | 'right';
+    columns: IColumnDefinition[];
+    visibleColumns: Set<string>;
+    onVisibilityChange: (columnKey: string, visible: boolean) => void;
+    /** Batch-set all visible columns at once (used by Select All / Clear All). */
+    onSetVisibleColumns: (columns: Set<string>) => void;
+    filterableColumns: SideBarFilterColumn[];
+    filters: IFilters;
+    onFilterChange: (key: string, value: FilterValue | undefined) => void;
+    filterOptions: Record<string, string[]>;
+}
+export declare function SideBar(props: SideBarProps): React.ReactElement;

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+export interface StatusBarClassNames {
+    statusBar?: string;
+    statusBarItem?: string;
+    statusBarLabel?: string;
+    statusBarValue?: string;
+}
+export interface StatusBarProps {
+    totalCount: number;
+    filteredCount?: number;
+    selectedCount?: number;
+    selectedCellCount?: number;
+    /** Aggregation values for selected numeric cells. */
+    aggregation?: {
+        sum: number;
+        avg: number;
+        min: number;
+        max: number;
+        count: number;
+    } | null;
+    suppressRowCount?: boolean;
+    classNames?: StatusBarClassNames;
+}
+export declare function StatusBar({ classNames, ...rest }: StatusBarProps): React.ReactElement;

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

@@ -0,0 +1,48 @@
+export { useFilterOptions } from './useFilterOptions';
+export type { UseFilterOptionsResult } from './useFilterOptions';
+export { useOGrid } from './useOGrid';
+export type { UseOGridResult, UseOGridPagination, UseOGridColumnChooser, UseOGridLayout, UseOGridFilters, ColumnChooserPlacement, } from './useOGrid';
+export { useActiveCell } from './useActiveCell';
+export type { UseActiveCellResult } from './useActiveCell';
+export { useCellEditing } from './useCellEditing';
+export type { UseCellEditingResult, EditingCell } from './useCellEditing';
+export { useContextMenu } from './useContextMenu';
+export type { UseContextMenuResult, ContextMenuPosition } from './useContextMenu';
+export { useCellSelection } from './useCellSelection';
+export type { UseCellSelectionResult, UseCellSelectionParams } from './useCellSelection';
+export { useClipboard } from './useClipboard';
+export type { UseClipboardResult, UseClipboardParams } from './useClipboard';
+export { useRowSelection } from './useRowSelection';
+export type { UseRowSelectionResult, UseRowSelectionParams } from './useRowSelection';
+export { useKeyboardNavigation } from './useKeyboardNavigation';
+export type { UseKeyboardNavigationResult, UseKeyboardNavigationParams, } from './useKeyboardNavigation';
+export { useUndoRedo } from './useUndoRedo';
+export type { UseUndoRedoResult, UseUndoRedoParams } from './useUndoRedo';
+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 { useColumnHeaderFilterState } from './useColumnHeaderFilterState';
+export type { UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, } from './useColumnHeaderFilterState';
+export { useTextFilterState } from './useTextFilterState';
+export type { UseTextFilterStateParams, UseTextFilterStateResult, } from './useTextFilterState';
+export { useMultiSelectFilterState } from './useMultiSelectFilterState';
+export type { UseMultiSelectFilterStateParams, UseMultiSelectFilterStateResult, } from './useMultiSelectFilterState';
+export { usePeopleFilterState } from './usePeopleFilterState';
+export type { UsePeopleFilterStateParams, UsePeopleFilterStateResult, } from './usePeopleFilterState';
+export { useDateFilterState } from './useDateFilterState';
+export type { UseDateFilterStateParams, UseDateFilterStateResult, } from './useDateFilterState';
+export { useColumnChooserState } from './useColumnChooserState';
+export type { UseColumnChooserStateParams, UseColumnChooserStateResult, } from './useColumnChooserState';
+export { useInlineCellEditorState } from './useInlineCellEditorState';
+export type { UseInlineCellEditorStateParams, UseInlineCellEditorStateResult, InlineCellEditorType, } from './useInlineCellEditorState';
+export { useColumnResize } from './useColumnResize';
+export type { UseColumnResizeParams, UseColumnResizeResult, } from './useColumnResize';
+export { useRichSelectState } from './useRichSelectState';
+export type { UseRichSelectStateParams, UseRichSelectStateResult } from './useRichSelectState';
+export { useSideBarState } from './useSideBarState';
+export type { UseSideBarStateParams, UseSideBarStateResult } from './useSideBarState';
+export { useTableLayout } from './useTableLayout';
+export type { UseTableLayoutParams, UseTableLayoutResult } from './useTableLayout';
+export { useLatestRef } from './useLatestRef';

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

@@ -0,0 +1,13 @@
+import type { IActiveCell, RowId } from '../types';
+export interface UseActiveCellResult {
+    activeCell: IActiveCell | null;
+    setActiveCell: (cell: IActiveCell | null) => void;
+}
+/**
+ * Tracks the active cell for keyboard navigation.
+ * When wrapperRef and editingCell are provided, scrolls the active cell into view when it changes (and not editing).
+ */
+export declare function useActiveCell(wrapperRef?: React.RefObject<HTMLElement | null>, editingCell?: {
+    rowId: RowId;
+    columnId: string;
+} | null): UseActiveCellResult;

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

@@ -0,0 +1,16 @@
+import type { RowId } from '../types';
+export interface EditingCell {
+    rowId: RowId;
+    columnId: string;
+}
+export interface UseCellEditingResult {
+    editingCell: EditingCell | null;
+    setEditingCell: (cell: EditingCell | null) => void;
+    pendingEditorValue: unknown;
+    setPendingEditorValue: (value: unknown) => void;
+}
+/**
+ * Manages cell editing state: which cell is being edited and its pending value.
+ * @returns Current editing cell, setter, pending editor value, and setter.
+ */
+export declare function useCellEditing(): UseCellEditingResult;

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

@@ -0,0 +1,22 @@
+import type { ISelectionRange, IActiveCell } from '../types';
+export interface UseCellSelectionParams {
+    colOffset: number;
+    rowCount: number;
+    visibleColCount: number;
+    setActiveCell: (cell: IActiveCell | null) => void;
+    wrapperRef: React.RefObject<HTMLElement | null>;
+}
+export interface UseCellSelectionResult {
+    selectionRange: ISelectionRange | null;
+    setSelectionRange: (range: ISelectionRange | null) => void;
+    handleCellMouseDown: (e: React.MouseEvent, rowIndex: number, globalColIndex: number) => void;
+    handleSelectAllCells: () => void;
+    /** True while the user is drag-selecting cells (mousedown → mousemove → mouseup). */
+    isDragging: boolean;
+}
+/**
+ * Manages cell selection range with drag-to-select and select-all support.
+ * @param params - Row/col counts, active cell setter, and wrapper ref for auto-scroll.
+ * @returns Selection range, setters, mouse/keyboard handlers, and drag state.
+ */
+export declare function useCellSelection(params: UseCellSelectionParams): UseCellSelectionResult;

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

@@ -0,0 +1,30 @@
+import type { ISelectionRange, IActiveCell, ICellValueChangedEvent, IColumnDef } from '../types';
+export interface UseClipboardParams<T> {
+    items: T[];
+    visibleCols: IColumnDef<T>[];
+    colOffset: number;
+    selectionRange: ISelectionRange | null;
+    activeCell: IActiveCell | null;
+    editable?: boolean;
+    onCellValueChanged: ((event: ICellValueChangedEvent<T>) => void) | undefined;
+    beginBatch?: () => void;
+    endBatch?: () => void;
+}
+export interface UseClipboardResult {
+    handleCopy: () => void;
+    handleCut: () => void;
+    handlePaste: () => Promise<void>;
+    cutRangeRef: React.MutableRefObject<ISelectionRange | null>;
+    /** Current cut range for UI (marching ants). Null when no cut or after paste. */
+    cutRange: ISelectionRange | null;
+    /** Current copy range for UI (marching ants). Null when no copy or after paste/cut. */
+    copyRange: ISelectionRange | null;
+    /** Clear both copy and cut ranges (dismisses marching ants). Called on Escape. */
+    clearClipboardRanges: () => void;
+}
+/**
+ * Manages copy, cut, and paste operations for cell ranges with TSV clipboard format.
+ * @param params - Items, columns, selection, editability, and value change callback.
+ * @returns Copy/cut/paste handlers, cut/copy ranges, and range clear function.
+ */
+export declare function useClipboard<T>(params: UseClipboardParams<T>): UseClipboardResult;

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

@@ -0,0 +1,27 @@
+/**
+ * Headless column chooser state and handlers for Fluent, Material, and Radix.
+ * UI packages use this hook and render only trigger + popover (checkboxes, Select All, Clear All).
+ */
+import type { IColumnDefinition } from '../types/columnTypes';
+export interface UseColumnChooserStateParams {
+    columns: IColumnDefinition[];
+    visibleColumns: Set<string>;
+    onVisibilityChange: (columnKey: string, visible: boolean) => void;
+}
+export interface UseColumnChooserStateResult {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    handleToggle: () => void;
+    handleClose: () => void;
+    handleCheckboxChange: (columnKey: string) => (visible: boolean) => void;
+    handleSelectAll: () => void;
+    handleClearAll: () => void;
+    visibleCount: number;
+    totalCount: number;
+}
+/**
+ * Returns open/setOpen, handleToggle, handleClose (Escape handled in hook),
+ * handleCheckboxChange(columnKey)(visible), handleSelectAll, handleClearAll,
+ * visibleCount, totalCount. UI renders trigger + popover and wires handlers.
+ */
+export declare function useColumnChooserState(params: UseColumnChooserStateParams): UseColumnChooserStateResult;

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

@@ -0,0 +1,73 @@
+/**
+ * Headless column header filter state and handlers for Fluent, Material, and Radix.
+ * UI packages use this hook and render only presentation (popover, inputs, buttons).
+ * Composes 4 sub-hooks for each filter type's state management.
+ */
+import { type RefObject, type Dispatch, type SetStateAction } from 'react';
+import type { ColumnFilterType, IDateFilterValue } from '../types/columnTypes';
+import type { UserLike } from '../types/dataGridTypes';
+export interface UseColumnHeaderFilterStateParams {
+    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 UseColumnHeaderFilterStateResult {
+    headerRef: RefObject<HTMLDivElement | null>;
+    popoverRef: RefObject<HTMLDivElement | null>;
+    peopleInputRef: RefObject<HTMLInputElement | null>;
+    isFilterOpen: boolean;
+    setFilterOpen: (open: boolean) => void;
+    tempSelected: Set<string>;
+    setTempSelected: Dispatch<SetStateAction<Set<string>>>;
+    tempTextValue: string;
+    setTempTextValue: (v: string) => void;
+    searchText: string;
+    setSearchText: (v: string) => void;
+    debouncedSearchText: string;
+    filteredOptions: string[];
+    peopleSuggestions: UserLike[];
+    isPeopleLoading: boolean;
+    peopleSearchText: string;
+    setPeopleSearchText: (v: string) => void;
+    tempDateFrom: string;
+    setTempDateFrom: (v: string) => void;
+    tempDateTo: string;
+    setTempDateTo: (v: string) => void;
+    hasActiveFilter: boolean;
+    popoverPosition: {
+        top: number;
+        left: number;
+    } | null;
+    handlers: {
+        handleFilterIconClick: (e: React.MouseEvent) => void;
+        handleApplyMultiSelect: () => void;
+        handleTextApply: () => void;
+        handleTextClear: () => void;
+        handleUserSelect: (user: UserLike) => void;
+        handleClearUser: () => void;
+        handleCheckboxChange: (option: string, checked: boolean) => void;
+        handleSelectAll: () => void;
+        handleClearSelection: () => void;
+        handlePopoverClick: (e: React.MouseEvent) => void;
+        handleInputFocus: (e: React.FocusEvent) => void;
+        handleInputMouseDown: (e: React.MouseEvent) => void;
+        handleInputClick: (e: React.MouseEvent) => void;
+        handleInputKeyDown: (e: React.KeyboardEvent) => void;
+        handleDateApply: () => void;
+        handleDateClear: () => void;
+        handleSortClick: (e: React.MouseEvent) => void;
+    };
+}
+export declare function useColumnHeaderFilterState(params: UseColumnHeaderFilterStateParams): UseColumnHeaderFilterStateResult;

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

@@ -0,0 +1,23 @@
+import type { IColumnDef } from '../types';
+export interface UseColumnResizeParams {
+    columnSizingOverrides: Record<string, {
+        widthPx: number;
+    }>;
+    setColumnSizingOverrides: React.Dispatch<React.SetStateAction<Record<string, {
+        widthPx: number;
+    }>>>;
+    minWidth?: number;
+    defaultWidth?: number;
+    /** Called when a column resize completes (mouseup). */
+    onColumnResized?: (columnId: string, width: number) => void;
+}
+export interface UseColumnResizeResult<T> {
+    handleResizeStart: (e: React.MouseEvent, col: IColumnDef<T>) => void;
+    getColumnWidth: (col: IColumnDef<T>) => number;
+}
+/**
+ * Manages column resize drag interactions with RAF-throttled state updates.
+ * @param params - Sizing overrides, setter, min/default widths, and resize callback.
+ * @returns Resize start handler and column width getter.
+ */
+export declare function useColumnResize<T>({ columnSizingOverrides, setColumnSizingOverrides, minWidth, defaultWidth, onColumnResized, }: UseColumnResizeParams): UseColumnResizeResult<T>;

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

@@ -0,0 +1,19 @@
+export interface ContextMenuPosition {
+    x: number;
+    y: number;
+}
+export interface UseContextMenuResult {
+    contextMenuPosition: ContextMenuPosition | null;
+    setContextMenuPosition: (pos: ContextMenuPosition | null) => void;
+    handleCellContextMenu: (e: {
+        clientX: number;
+        clientY: number;
+        preventDefault?: () => void;
+    }) => void;
+    closeContextMenu: () => void;
+}
+/**
+ * Manages context menu position state for right-click menus.
+ * @returns Menu position, setter, right-click handler, and close handler.
+ */
+export declare function useContextMenu(): UseContextMenuResult;

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

@@ -0,0 +1,137 @@
+import type { RefObject } from 'react';
+import type { HeaderFilterConfigInput, CellRenderDescriptorInput } from '../utils';
+import type { RowId, IOGridDataGridProps, IStatusBarProps, IColumnDef } from '../types';
+export interface UseDataGridStateParams<T> {
+    props: IOGridDataGridProps<T>;
+    wrapperRef: RefObject<HTMLDivElement | null>;
+}
+/** Column layout, visibility, and sizing state. */
+export interface DataGridLayoutState<T> {
+    flatColumns: IColumnDef<T>[];
+    visibleCols: IColumnDef<T>[];
+    visibleColumnCount: number;
+    totalColCount: number;
+    colOffset: number;
+    hasCheckboxCol: boolean;
+    rowIndexByRowId: Map<RowId, number>;
+    containerWidth: number;
+    minTableWidth: number;
+    desiredTableWidth: number;
+    columnSizingOverrides: Record<string, {
+        widthPx: number;
+    }>;
+    setColumnSizingOverrides: React.Dispatch<React.SetStateAction<Record<string, {
+        widthPx: number;
+    }>>>;
+    onColumnResized?: (columnId: string, width: number) => void;
+}
+/** Row selection (checkboxes, single-row click). */
+export interface DataGridRowSelectionState {
+    selectedRowIds: Set<RowId>;
+    updateSelection: (newSelectedIds: Set<RowId>) => void;
+    handleRowCheckboxChange: (rowId: RowId, checked: boolean, rowIndex: number, shiftKey: boolean) => void;
+    handleSelectAll: (checked: boolean) => void;
+    allSelected: boolean;
+    someSelected: boolean;
+}
+/** Cell editing, popover editor, and commit/cancel helpers. */
+export interface DataGridEditingState<T> {
+    editingCell: {
+        rowId: RowId;
+        columnId: string;
+    } | null;
+    setEditingCell: (cell: {
+        rowId: RowId;
+        columnId: string;
+    } | null) => void;
+    pendingEditorValue: unknown;
+    setPendingEditorValue: (value: unknown) => void;
+    commitCellEdit: (item: T, columnId: string, oldValue: unknown, newValue: unknown, rowIndex: number, globalColIndex: number) => void;
+    cancelPopoverEdit: () => void;
+    popoverAnchorEl: HTMLElement | null;
+    setPopoverAnchorEl: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+}
+/** Cell selection, active cell, keyboard, clipboard, fill handle, undo/redo. */
+export interface DataGridCellInteractionState {
+    activeCell: {
+        rowIndex: number;
+        columnIndex: number;
+    } | null;
+    setActiveCell: (cell: {
+        rowIndex: number;
+        columnIndex: number;
+    } | null) => void;
+    selectionRange: {
+        startRow: number;
+        startCol: number;
+        endRow: number;
+        endCol: number;
+    } | null;
+    setSelectionRange: (range: DataGridCellInteractionState['selectionRange']) => void;
+    handleCellMouseDown: (e: React.MouseEvent, rowIndex: number, globalColIndex: number) => void;
+    handleSelectAllCells: () => void;
+    hasCellSelection: boolean;
+    handleGridKeyDown: (e: React.KeyboardEvent) => void;
+    handleFillHandleMouseDown: (e: React.MouseEvent) => void;
+    handleCopy: () => void;
+    handleCut: () => void;
+    handlePaste: () => Promise<void>;
+    cutRange: {
+        startRow: number;
+        startCol: number;
+        endRow: number;
+        endCol: number;
+    } | null;
+    copyRange: {
+        startRow: number;
+        startCol: number;
+        endRow: number;
+        endCol: number;
+    } | null;
+    clearClipboardRanges: () => void;
+    canUndo: boolean;
+    canRedo: boolean;
+    onUndo?: () => void;
+    onRedo?: () => void;
+    /** True while user is drag-selecting cells (mousedown → mouseup). */
+    isDragging: boolean;
+}
+/** Context menu position and handlers. */
+export interface DataGridContextMenuState {
+    menuPosition: {
+        x: number;
+        y: number;
+    } | null;
+    setMenuPosition: (pos: {
+        x: number;
+        y: number;
+    } | null) => void;
+    handleCellContextMenu: (e: {
+        clientX: number;
+        clientY: number;
+        preventDefault?: () => void;
+    }) => void;
+    closeContextMenu: () => void;
+}
+/** View model inputs and derived display state. */
+export interface DataGridViewModelState<T> {
+    headerFilterInput: HeaderFilterConfigInput;
+    cellDescriptorInput: CellRenderDescriptorInput<T>;
+    statusBarConfig: IStatusBarProps | null;
+    showEmptyInGrid: boolean;
+    onCellError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+/** Grouped result from useDataGridState. */
+export interface UseDataGridStateResult<T> {
+    layout: DataGridLayoutState<T>;
+    rowSelection: DataGridRowSelectionState;
+    editing: DataGridEditingState<T>;
+    interaction: DataGridCellInteractionState;
+    contextMenu: DataGridContextMenuState;
+    viewModels: DataGridViewModelState<T>;
+}
+/**
+ * Single orchestration hook for DataGridTable. Takes grid props and wrapper ref,
+ * returns all derived state and handlers so Fluent/Material/Radix can be thin view layers.
+ */
+export declare function useDataGridState<T>(params: UseDataGridStateParams<T>): UseDataGridStateResult<T>;

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

@@ -0,0 +1,19 @@
+/**
+ * Date filter state sub-hook for column header filters.
+ * Manages temporary date from/to values and apply/clear handlers.
+ */
+import type { IDateFilterValue } from '../types/columnTypes';
+export interface UseDateFilterStateParams {
+    dateValue?: IDateFilterValue;
+    onDateChange?: (value: IDateFilterValue | undefined) => void;
+    isFilterOpen: boolean;
+}
+export interface UseDateFilterStateResult {
+    tempDateFrom: string;
+    setTempDateFrom: (v: string) => void;
+    tempDateTo: string;
+    setTempDateTo: (v: string) => void;
+    handleDateApply: () => void;
+    handleDateClear: () => void;
+}
+export declare function useDateFilterState(params: UseDateFilterStateParams): UseDateFilterStateResult;

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

@@ -0,0 +1,9 @@
+/**
+ * Returns a debounced value that updates after the specified delay when the source value changes.
+ */
+export declare function useDebounce<T>(value: T, delayMs: number): T;
+/**
+ * Returns a stable callback that invokes the given function after the specified delay.
+ * Each new call resets the timer.
+ */
+export declare function useDebouncedCallback<T extends (...args: unknown[]) => void>(fn: T, delayMs: number): T;

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

@@ -0,0 +1,33 @@
+import type { RefObject } from 'react';
+import type { ISelectionRange, IActiveCell } from '../types';
+import type { IColumnDef, ICellValueChangedEvent } from '../types/columnTypes';
+export interface UseFillHandleParams<T> {
+    items: T[];
+    visibleCols: IColumnDef<T>[];
+    editable?: boolean;
+    onCellValueChanged?: (event: ICellValueChangedEvent<T>) => void;
+    selectionRange: ISelectionRange | null;
+    setSelectionRange: (range: ISelectionRange | null) => void;
+    setActiveCell: (cell: IActiveCell | null) => void;
+    colOffset: number;
+    wrapperRef: RefObject<HTMLDivElement | null>;
+    beginBatch?: () => void;
+    endBatch?: () => void;
+}
+export interface UseFillHandleResult {
+    fillDrag: {
+        startRow: number;
+        startCol: number;
+    } | null;
+    setFillDrag: (value: {
+        startRow: number;
+        startCol: number;
+    } | null) => void;
+    handleFillHandleMouseDown: (e: React.MouseEvent) => void;
+}
+/**
+ * Manages Excel-style fill handle drag-to-fill for cell ranges.
+ * @param params - Items, columns, selection range, editability, and value change callback.
+ * @returns Fill drag state, setter, and mousedown handler for the fill handle.
+ */
+export declare function useFillHandle<T>(params: UseFillHandleParams<T>): UseFillHandleResult;

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

@@ -0,0 +1,16 @@
+import type { IDataSource } from '../types/dataGridTypes';
+export interface UseFilterOptionsResult {
+    filterOptions: Record<string, string[]>;
+    loadingOptions: Record<string, boolean>;
+}
+/** Accepted data source shapes for useFilterOptions. */
+type FilterOptionsSource = IDataSource<unknown> | {
+    fetchFilterOptions?: (field: string) => Promise<string[]>;
+};
+/**
+ * Load filter options for the given fields from a data source.
+ *
+ * Accepts `IDataSource<T>` or a plain `{ fetchFilterOptions }` object.
+ */
+export declare function useFilterOptions(dataSource: FilterOptionsSource, fields: string[]): UseFilterOptionsResult;
+export {};

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

@@ -0,0 +1,24 @@
+/**
+ * Headless inline cell editor state for Fluent, Material, and Radix InlineCellEditor.
+ * UI packages use this hook and render only the framework input (Input, TextField, select, Checkbox).
+ */
+export type InlineCellEditorType = 'text' | 'select' | 'checkbox' | 'richSelect' | 'date';
+export interface UseInlineCellEditorStateParams {
+    value: unknown;
+    editorType: InlineCellEditorType;
+    onCommit: (value: unknown) => void;
+    onCancel: () => void;
+}
+export interface UseInlineCellEditorStateResult {
+    localValue: string;
+    setLocalValue: (value: string) => void;
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+    handleBlur: () => void;
+    commit: (value: unknown) => void;
+    cancel: () => void;
+}
+/**
+ * Returns localValue/setLocalValue (for text), handleKeyDown (Escape cancel, Enter commit for text),
+ * handleBlur (commit on blur for text), commit(value), cancel(). UI renders only the input.
+ */
+export declare function useInlineCellEditorState(params: UseInlineCellEditorStateParams): UseInlineCellEditorStateResult;