@alaarab/ogrid-react 2.3.0 → 2.4.1

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

@@ -0,0 +1,53 @@
+/**
+ * Shared inner content for ColumnChooser dropdowns across all React UI packages.
+ * Each UI package provides its own popover/dropdown wrapper and CheckboxItem slot.
+ * Optional Header, OptionsListContainer, OptionItemContainer, and Actions slots
+ * allow framework-specific wrappers (e.g. MUI Box/Typography) for Material.
+ */
+import * as React from 'react';
+import type { IColumnDefinition } from '../types/columnTypes';
+export interface IColumnChooserCheckboxItemProps {
+    columnId: string;
+    columnName: string;
+    checked: boolean;
+    disabled: boolean;
+    onChange: (checked: boolean) => void;
+}
+export interface IColumnChooserActionsProps {
+    onClearAll: () => void;
+    onSelectAll: () => void;
+}
+export interface IColumnChooserHeaderProps {
+    visibleCount: number;
+    totalCount: number;
+}
+export interface ColumnChooserContentClassNames {
+    header?: string;
+    optionsList?: string;
+    optionItem?: string;
+    actions?: string;
+    clearButton?: string;
+    selectAllButton?: string;
+}
+export interface ColumnChooserContentProps {
+    columns: IColumnDefinition[];
+    visibleColumns: Set<string>;
+    visibleCount: number;
+    totalCount: number;
+    handleSelectAll: () => void;
+    handleClearAll: () => void;
+    /** Curried handler: (columnId) => (checked: boolean) => void */
+    handleCheckboxChange: (columnId: string) => (checked: boolean) => void;
+    CheckboxItem: React.ComponentType<IColumnChooserCheckboxItemProps>;
+    classNames?: ColumnChooserContentClassNames;
+    Header?: React.ComponentType<IColumnChooserHeaderProps>;
+    OptionsListContainer?: React.ComponentType<{
+        children: React.ReactNode;
+    }>;
+    OptionItemContainer?: React.ComponentType<{
+        columnId: string;
+        children: React.ReactNode;
+    }>;
+    Actions?: React.ComponentType<IColumnChooserActionsProps>;
+}
+export declare const ColumnChooserContent: React.FC<ColumnChooserContentProps>;

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

@@ -6,10 +6,11 @@
  * 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 * as React from 'react';
 import type { ColumnFilterType } from '../types/columnTypes';
 import type { UserLike } from '../types/dataGridTypes';
 import type { UseColumnHeaderFilterStateResult } from '../hooks/useColumnHeaderFilterState';
+import { type DateFilterClassNames } from './ColumnHeaderFilterContent';
 /**
  * Framework-specific renderers for each filter type.
  * Each UI package maps its own sub-filter components to these slots.
@@ -69,3 +70,16 @@ export interface DateRendererProps {
  * @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;
+/**
+ * Factory that creates the standard FilterContentRenderers for packages that use
+ * the default prop-passthrough pattern (Radix, Material). Fluent keeps its own
+ * memoized renderers because it adds extra event-propagation handlers.
+ *
+ * @param components - The framework-specific sub-filter popover components
+ * @param dateClassNames - Optional CSS class names for the date filter buttons (used by packages with CSS modules)
+ */
+export declare function createBaseFilterRenderers(components: {
+    MultiSelectFilterPopover: React.ComponentType<MultiSelectRendererProps>;
+    TextFilterPopover: React.ComponentType<TextRendererProps>;
+    PeopleFilterPopover: React.ComponentType<PeopleRendererProps>;
+}, dateClassNames?: DateFilterClassNames): FilterContentRenderers;

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

@@ -0,0 +1,25 @@
+/**
+ * FormulaBar — Headless Excel-style formula bar component.
+ *
+ * Layout: [Name Box] [fx] [Formula Input]
+ *
+ * Uses --ogrid-* CSS variables for theming.
+ */
+import * as React from 'react';
+export interface FormulaBarProps {
+    /** Active cell reference (e.g. "A1"). */
+    cellRef: string | null;
+    /** Text displayed/edited in the formula input. */
+    formulaText: string;
+    /** Whether the input is in editing mode. */
+    isEditing: boolean;
+    /** Called when the user changes the input text. */
+    onInputChange: (text: string) => void;
+    /** Commit the formula bar value. */
+    onCommit: () => void;
+    /** Cancel editing. */
+    onCancel: () => void;
+    /** Start editing the formula bar. */
+    startEditing: () => void;
+}
+export declare function FormulaBar({ cellRef, formulaText, isEditing, onInputChange, onCommit, onCancel, startEditing, }: FormulaBarProps): React.ReactElement;

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

@@ -0,0 +1,19 @@
+/**
+ * FormulaRefOverlay — Renders colored border overlays on cells referenced by
+ * the active formula, like Excel's reference highlighting.
+ *
+ * Uses the same container measurement pattern as MarchingAntsOverlay.
+ */
+import * as React from 'react';
+import { type FormulaReference } from '@alaarab/ogrid-core';
+export interface FormulaRefOverlayProps {
+    /** Ref to the positioned container that wraps the table. */
+    containerRef: React.RefObject<HTMLElement | null>;
+    /** References to highlight. */
+    references: FormulaReference[];
+    /** Column offset (1 when checkbox/row-number columns are present). */
+    colOffset: number;
+}
+declare function FormulaRefOverlayInner({ containerRef, references, colOffset, }: FormulaRefOverlayProps): React.ReactElement | null;
+export declare const FormulaRefOverlay: React.MemoExoticComponent<typeof FormulaRefOverlayInner>;
+export {};

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

@@ -25,6 +25,10 @@ export interface OGridLayoutProps {
     sideBar?: SideBarProps | null;
     /** When true, render a fullscreen toggle button in the toolbar. */
     fullScreen?: boolean;
+    /** Formula bar element (rendered between toolbar and grid). */
+    formulaBar?: React.ReactNode;
+    /** Sheet tabs element (rendered between grid and footer). */
+    sheetTabs?: React.ReactNode;
 }
 /**
  * Renders OGrid layout as a unified bordered container:

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

@@ -0,0 +1,71 @@
+/**
+ * Shared base component for PaginationControls across all React UI packages.
+ * Handles hook call, null guard, vm destructure, and renders the full layout structure.
+ * Each UI package provides slots for framework-specific interactive elements.
+ */
+import * as React from 'react';
+import type { IPaginationControlsProps } from './PaginationControlsProps';
+export interface INavButtonSlotProps {
+    variant: 'first' | 'prev' | 'next' | 'last';
+    onClick: () => void;
+    disabled: boolean;
+    'aria-label': string;
+    className?: string;
+}
+export interface IPageButtonSlotProps {
+    onClick: () => void;
+    active: boolean;
+    'aria-label': string;
+    'aria-current'?: 'page';
+    children: React.ReactNode;
+    className?: string;
+}
+export interface IPageSizeSelectSlotProps {
+    value: number;
+    options: readonly number[];
+    onChange: (value: number) => void;
+    'aria-label': string;
+    className?: string;
+}
+export interface IOuterContainerSlotProps {
+    children: React.ReactNode;
+    className?: string;
+    role: string;
+    'aria-label': string;
+}
+export interface IPaginationControlsSlots {
+    NavButton: React.ComponentType<INavButtonSlotProps>;
+    PageButton: React.ComponentType<IPageButtonSlotProps>;
+    PageSizeSelect: React.ComponentType<IPageSizeSelectSlotProps>;
+    OuterContainer?: React.ComponentType<IOuterContainerSlotProps>;
+    InfoText?: React.ComponentType<{
+        children: React.ReactNode;
+    }>;
+    NavButtonsContainer?: React.ComponentType<{
+        children: React.ReactNode;
+        className?: string;
+    }>;
+    PageSizeContainer?: React.ComponentType<{
+        children: React.ReactNode;
+        className?: string;
+    }>;
+    PageSizeLabel?: React.ComponentType<Record<string, never>>;
+    Ellipsis?: React.ComponentType<Record<string, never>>;
+}
+export interface PaginationControlsBaseClassNames {
+    pagination?: string;
+    paginationInfo?: string;
+    paginationControls?: string;
+    pageNumbers?: string;
+    ellipsis?: string;
+    navBtn?: string;
+    pageBtn?: string;
+    pageSizeSelector?: string;
+    pageSizeLabel?: string;
+    pageSizeSelect?: string;
+}
+export interface PaginationControlsBaseProps extends IPaginationControlsProps {
+    slots: IPaginationControlsSlots;
+    classNames?: PaginationControlsBaseClassNames;
+}
+export declare const PaginationControlsBase: React.FC<PaginationControlsBaseProps>;

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

@@ -0,0 +1,14 @@
+/**
+ * SheetTabs — Excel-style sheet tab bar at the bottom of the grid.
+ *
+ * Layout: [+] [Sheet1] [Sheet2] [Sheet3]
+ */
+import * as React from 'react';
+import type { ISheetDef } from '@alaarab/ogrid-core';
+export interface SheetTabsProps {
+    sheets: ISheetDef[];
+    activeSheet: string;
+    onSheetChange: (sheetId: string) => void;
+    onSheetAdd?: () => void;
+}
+export declare function SheetTabs({ sheets, activeSheet, onSheetChange, onSheetAdd, }: SheetTabsProps): React.ReactElement;

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

@@ -57,7 +57,7 @@ export { useColumnResize } from './useColumnResize';
 export type { UseColumnResizeParams, UseColumnResizeResult, } from './useColumnResize';
 export { useColumnPinning } from './useColumnPinning';
 export type { UseColumnPinningParams, UseColumnPinningResult, } from './useColumnPinning';
-export { useColumnHeaderMenuState } from './useColumnHeaderMenuState';
+export { useColumnHeaderMenuState, getColumnHeaderMenuProps } from './useColumnHeaderMenuState';
 export type { UseColumnHeaderMenuStateParams, UseColumnHeaderMenuStateResult, } from './useColumnHeaderMenuState';
 export { useRichSelectState } from './useRichSelectState';
 export type { UseRichSelectStateParams, UseRichSelectStateResult } from './useRichSelectState';
@@ -83,3 +83,5 @@ export { useColumnMeta } from './useColumnMeta';
 export type { UseColumnMetaParams, ColumnMetaResult } from './useColumnMeta';
 export { useFormulaEngine } from './useFormulaEngine';
 export type { UseFormulaEngineParams, UseFormulaEngineResult } from './useFormulaEngine';
+export { useFormulaBar } from './useFormulaBar';
+export type { UseFormulaBarParams, UseFormulaBarResult } from './useFormulaBar';

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

@@ -41,3 +41,26 @@ export interface UseColumnHeaderMenuStateResult {
  * Tracks which column's menu is open, anchor element, and action handlers.
  */
 export declare function useColumnHeaderMenuState(params: UseColumnHeaderMenuStateParams): UseColumnHeaderMenuStateResult;
+/**
+ * Maps a UseColumnHeaderMenuStateResult to the flat ColumnHeaderMenuProps shape.
+ * Eliminates the 18-prop spread that each DataGridTable package repeats.
+ */
+export declare function getColumnHeaderMenuProps(headerMenu: UseColumnHeaderMenuStateResult): {
+    isOpen: boolean;
+    anchorElement: HTMLElement | null;
+    onClose: () => void;
+    onPinLeft: () => void;
+    onPinRight: () => void;
+    onUnpin: () => void;
+    onSortAsc: () => void;
+    onSortDesc: () => void;
+    onClearSort: () => void;
+    onAutosizeThis: () => void;
+    onAutosizeAll: () => void;
+    canPinLeft: boolean;
+    canPinRight: boolean;
+    canUnpin: boolean;
+    currentSort: "asc" | "desc" | null;
+    isSortable: boolean;
+    isResizable: boolean;
+};

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

@@ -0,0 +1,43 @@
+/**
+ * useFormulaBar — React hook for formula bar state.
+ *
+ * Manages the formula bar text, editing mode, and reference extraction.
+ */
+import { type FormulaReference } from '@alaarab/ogrid-core';
+export interface UseFormulaBarParams {
+    /** Active cell column index (0-based). */
+    activeCol: number | null;
+    /** Active cell row index (0-based). */
+    activeRow: number | null;
+    /** Active cell reference string (e.g. "A1"). */
+    activeCellRef: string | null;
+    /** Get formula string for a cell. */
+    getFormula?: (col: number, row: number) => string | undefined;
+    /** Get raw display value for a cell. */
+    getRawValue?: (col: number, row: number) => unknown;
+    /** Set formula for a cell. */
+    setFormula?: (col: number, row: number, formula: string | null) => void;
+    /** Commit a non-formula value change. */
+    onCellValueChanged?: (col: number, row: number, value: unknown) => void;
+}
+export interface UseFormulaBarResult {
+    /** Cell reference string (e.g. "A1"). */
+    cellRef: string | null;
+    /** Text shown in the formula bar input. */
+    formulaText: string;
+    /** Whether the formula bar input is being edited. */
+    isEditing: boolean;
+    /** Update the formula bar input text. */
+    onInputChange: (text: string) => void;
+    /** Commit the current edit. */
+    onCommit: () => void;
+    /** Cancel the current edit. */
+    onCancel: () => void;
+    /** Start editing the formula bar. */
+    startEditing: () => void;
+    /** References extracted from the current formula text (for highlighting). */
+    referencedCells: FormulaReference[];
+    /** Whether the formula bar is actively being edited (for click-to-insert-ref guards). */
+    isFormulaBarEditing: React.MutableRefObject<boolean>;
+}
+export declare function useFormulaBar(params: UseFormulaBarParams): UseFormulaBarResult;

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

@@ -32,6 +32,10 @@ export interface UseOGridLayout {
     };
     sideBarProps: SideBarProps | null;
     fullScreen?: boolean;
+    /** Formula bar element (rendered between toolbar and grid when formulas are enabled). */
+    formulaBar?: React.ReactNode;
+    /** Sheet tabs element (rendered between grid and footer when sheetDefs are provided). */
+    sheetTabs?: React.ReactNode;
 }
 /** Filter state. */
 export interface UseOGridFilters {

package/dist/types/index.d.ts

@@ -1,8 +1,8 @@
-export { CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, } from '@alaarab/ogrid-core';
-export type { ColumnFilterType, IColumnFilterDef, IColumnMeta, IColumnDef, IColumnGroupDef, IColumnDefinition, ICellValueChangedEvent, ICellEditorProps, CellEditorParams, IValueParserParams, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, IOGridApi, IOGridProps, IOGridDataGridProps, RowSelectionMode, RowId, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, HeaderCell, HeaderRow, SideBarPanelId, ISideBarDef, IDateFilterValue, IVirtualScrollConfig, IColumnReorderConfig, } from './types';
+export { CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, ROW_NUMBER_COLUMN_MIN_WIDTH, ROW_NUMBER_COLUMN_ID, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, } from '@alaarab/ogrid-core';
+export type { ColumnFilterType, IColumnFilterDef, IColumnMeta, IColumnDef, IColumnGroupDef, IColumnDefinition, ICellValueChangedEvent, ICellEditorProps, CellEditorParams, IValueParserParams, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, IOGridApi, IOGridProps, IOGridDataGridProps, RowSelectionMode, RowId, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, HeaderCell, HeaderRow, SideBarPanelId, ISideBarDef, IDateFilterValue, IVirtualScrollConfig, IColumnReorderConfig, ISheetDef, } from './types';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types';
-export { useFilterOptions, useOGrid, useActiveCell, useCellEditing, useContextMenu, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useUndoRedo, useDebounce, useFillHandle, useDataGridState, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useColumnResize, useRichSelectState, useSelectState, useSideBarState, useTableLayout, useColumnReorder, useVirtualScroll, useListVirtualizer, useLatestRef, usePaginationControls, useDataGridTableOrchestration, useColumnMeta, useFormulaEngine, } from './hooks';
-export type { UseFilterOptionsResult, UseOGridResult, UseOGridPagination, UseOGridColumnChooser, UseOGridLayout, UseOGridFilters, ColumnChooserPlacement, UseActiveCellResult, UseCellEditingResult, EditingCell, UseContextMenuResult, ContextMenuPosition, UseCellSelectionResult, UseCellSelectionParams, UseClipboardResult, UseClipboardParams, UseRowSelectionResult, UseRowSelectionParams, UseKeyboardNavigationResult, UseKeyboardNavigationParams, UseUndoRedoResult, UseUndoRedoParams, UseFillHandleResult, UseFillHandleParams, UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, DataGridPinningState, UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, UseTextFilterStateParams, UseTextFilterStateResult, UseMultiSelectFilterStateParams, UseMultiSelectFilterStateResult, UsePeopleFilterStateParams, UsePeopleFilterStateResult, UseDateFilterStateParams, UseDateFilterStateResult, UseColumnChooserStateParams, UseColumnChooserStateResult, UseInlineCellEditorStateParams, UseInlineCellEditorStateResult, InlineCellEditorType, UseColumnResizeParams, UseColumnResizeResult, UseRichSelectStateParams, UseRichSelectStateResult, UseSelectStateParams, UseSelectStateResult, UseSideBarStateParams, UseSideBarStateResult, UseTableLayoutParams, UseTableLayoutResult, UseColumnReorderParams, UseColumnReorderResult, UseVirtualScrollParams, UseVirtualScrollResult, UsePaginationControlsProps, UsePaginationControlsResult, UseDataGridTableOrchestrationParams, UseDataGridTableOrchestrationResult, UseColumnMetaParams, ColumnMetaResult, UseFormulaEngineParams, UseFormulaEngineResult, } 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, useSelectState, useSideBarState, useTableLayout, useColumnReorder, useVirtualScroll, useListVirtualizer, useLatestRef, usePaginationControls, useDataGridTableOrchestration, useColumnMeta, useFormulaEngine, useFormulaBar, getColumnHeaderMenuProps, } from './hooks';
+export type { UseFilterOptionsResult, UseOGridResult, UseOGridPagination, UseOGridColumnChooser, UseOGridLayout, UseOGridFilters, ColumnChooserPlacement, UseActiveCellResult, UseCellEditingResult, EditingCell, UseContextMenuResult, ContextMenuPosition, UseCellSelectionResult, UseCellSelectionParams, UseClipboardResult, UseClipboardParams, UseRowSelectionResult, UseRowSelectionParams, UseKeyboardNavigationResult, UseKeyboardNavigationParams, UseUndoRedoResult, UseUndoRedoParams, UseFillHandleResult, UseFillHandleParams, UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, DataGridPinningState, UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, UseTextFilterStateParams, UseTextFilterStateResult, UseMultiSelectFilterStateParams, UseMultiSelectFilterStateResult, UsePeopleFilterStateParams, UsePeopleFilterStateResult, UseDateFilterStateParams, UseDateFilterStateResult, UseColumnChooserStateParams, UseColumnChooserStateResult, UseInlineCellEditorStateParams, UseInlineCellEditorStateResult, InlineCellEditorType, UseColumnResizeParams, UseColumnResizeResult, UseRichSelectStateParams, UseRichSelectStateResult, UseSelectStateParams, UseSelectStateResult, UseSideBarStateParams, UseSideBarStateResult, UseTableLayoutParams, UseTableLayoutResult, UseColumnReorderParams, UseColumnReorderResult, UseVirtualScrollParams, UseVirtualScrollResult, UsePaginationControlsProps, UsePaginationControlsResult, UseDataGridTableOrchestrationParams, UseDataGridTableOrchestrationResult, UseColumnMetaParams, ColumnMetaResult, UseFormulaEngineParams, UseFormulaEngineResult, UseFormulaBarParams, UseFormulaBarResult, } from './hooks';
 export { GRID_ROOT_STYLE, CURSOR_CELL_STYLE, POPOVER_ANCHOR_STYLE, PREVENT_DEFAULT, NOOP, STOP_PROPAGATION, } from './constants/domHelpers';
 export { OGridLayout } from './components/OGridLayout';
 export type { OGridLayoutProps } from './components/OGridLayout';
@@ -14,10 +14,20 @@ export { GridContextMenu } from './components/GridContextMenu';
 export type { GridContextMenuProps, GridContextMenuClassNames } from './components/GridContextMenu';
 export { MarchingAntsOverlay } from './components/MarchingAntsOverlay';
 export type { MarchingAntsOverlayProps } from './components/MarchingAntsOverlay';
+export { FormulaBar } from './components/FormulaBar';
+export type { FormulaBarProps } from './components/FormulaBar';
+export { FormulaRefOverlay } from './components/FormulaRefOverlay';
+export type { FormulaRefOverlayProps } from './components/FormulaRefOverlay';
+export { SheetTabs } from './components/SheetTabs';
+export type { SheetTabsProps } from './components/SheetTabs';
 export { SideBar } from './components/SideBar';
 export type { SideBarProps, SideBarFilterColumn } from './components/SideBar';
 export { BaseColumnHeaderMenu } from './components/BaseColumnHeaderMenu';
 export type { BaseColumnHeaderMenuProps, ColumnHeaderMenuClassNames } from './components/BaseColumnHeaderMenu';
+export { PaginationControlsBase } from './components/PaginationControlsBase';
+export type { PaginationControlsBaseProps, PaginationControlsBaseClassNames, IPaginationControlsSlots, INavButtonSlotProps, IPageButtonSlotProps, IPageSizeSelectSlotProps, IOuterContainerSlotProps, } from './components/PaginationControlsBase';
+export { ColumnChooserContent } from './components/ColumnChooserContent';
+export type { ColumnChooserContentProps, ColumnChooserContentClassNames, IColumnChooserCheckboxItemProps, IColumnChooserActionsProps, IColumnChooserHeaderProps, } from './components/ColumnChooserContent';
 export { createOGrid } from './components/createOGrid';
 export type { CreateOGridComponents, GridRowProps, InlineCellEditorProps } from './components/createOGrid';
 export { CellErrorBoundary } from './components/CellErrorBoundary';
@@ -34,7 +44,7 @@ export { DateFilterContent, getColumnHeaderFilterStateParams, getDateFilterConte
 export type { IColumnHeaderFilterProps, DateFilterContentProps, DateFilterClassNames, } from './components/ColumnHeaderFilterContent';
 export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, GRID_CONTEXT_MENU_ITEMS, COLUMN_HEADER_MENU_ITEMS, getContextMenuHandlers, getColumnHeaderMenuItems, formatShortcut, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, getHeaderFilterConfig, getCellRenderDescriptor, CellDescriptorCache, isRowInRange, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, partitionColumnsForVirtualization, areGridRowPropsEqual, findCtrlArrowTarget, computeTabNavigation, rangesEqual, clampSelectionToBounds, computeAutoScrollSpeed, formatCellValueForTsv, formatSelectionAsTsv, parseTsvClipboard, UndoRedoStack, indexToColumnLetter, formatCellReference, } from './utils';
 export type { CsvColumn, StatusBarPart, StatusBarPartsInput, GridContextMenuItem, GridContextMenuHandlerProps, PaginationViewModel, HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, CellInteractionHandlers, ParseValueResult, AggregationResult, GridRowComparatorProps, IColumnHeaderMenuItem, ColumnHeaderMenuInput, ColumnHeaderMenuHandlers, } from './utils';
-export { renderFilterContent } from './components/ColumnHeaderFilterRenderers';
+export { renderFilterContent, createBaseFilterRenderers } from './components/ColumnHeaderFilterRenderers';
 export type { FilterContentRenderers, MultiSelectRendererProps, TextRendererProps, PeopleRendererProps, DateRendererProps, } from './components/ColumnHeaderFilterRenderers';
 export type { IColumnChooserProps } from './components/ColumnChooserProps';
 export type { IPaginationControlsProps } from './components/PaginationControlsProps';

package/dist/types/types/dataGridTypes.d.ts

@@ -1,9 +1,9 @@
 import type { ReactNode } from 'react';
 import type { IColumnDef, IColumnGroupDef, ICellValueChangedEvent } from './columnTypes';
 import type { IFormulaFunction, IRecalcResult, IGridDataAccessor, IAuditEntry, IAuditTrail } from '@alaarab/ogrid-core';
-export type { RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, IVirtualScrollConfig, IColumnReorderConfig, IOGridApi, } from '@alaarab/ogrid-core';
+export type { RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, ISheetDef, IVirtualScrollConfig, IColumnReorderConfig, IOGridApi, } from '@alaarab/ogrid-core';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from '@alaarab/ogrid-core';
-import type { RowId, UserLike, IFilters, FilterValue, RowSelectionMode, IRowSelectionChangeEvent, IStatusBarProps, IDataSource, ISideBarDef, IVirtualScrollConfig } from '@alaarab/ogrid-core';
+import type { RowId, UserLike, IFilters, FilterValue, RowSelectionMode, IRowSelectionChangeEvent, IStatusBarProps, IDataSource, ISideBarDef, ISheetDef, IVirtualScrollConfig } from '@alaarab/ogrid-core';
 /** Base props shared by both client-side and server-side OGrid modes. */
 interface IOGridBaseProps<T> {
     columns: (IColumnDef<T> | IColumnGroupDef<T>)[];
@@ -113,6 +113,14 @@ interface IOGridBaseProps<T> {
     namedRanges?: Record<string, string>;
     /** Sheet accessors for cross-sheet formula references (e.g. { Sheet2: accessor }). */
     sheets?: Record<string, IGridDataAccessor>;
+    /** Sheet definitions for bottom tab bar. When set, renders Excel-style sheet tabs. */
+    sheetDefs?: ISheetDef[];
+    /** Currently active sheet id. */
+    activeSheet?: string;
+    /** Called when the user switches sheets. */
+    onSheetChange?: (sheetId: string) => void;
+    /** Called when the user clicks the add-sheet button. */
+    onSheetAdd?: () => void;
     'aria-label'?: string;
     'aria-labelledby'?: string;
 }
@@ -228,4 +236,8 @@ export interface IOGridDataGridProps<T> {
     getDependents?: (col: number, row: number) => IAuditEntry[];
     /** Get full audit trail for a cell. */
     getAuditTrail?: (col: number, row: number) => IAuditTrail | null;
+    /** Monotonic counter incremented on each formula recalculation — used for cache invalidation. */
+    formulaVersion?: number;
+    /** Cell references to highlight (from active formula in formula bar). */
+    formulaReferences?: import('@alaarab/ogrid-core').FormulaReference[];
 }

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

@@ -1,3 +1,3 @@
 export type { ColumnFilterType, IColumnFilterDef, IColumnMeta, IColumnDef, IColumnGroupDef, IColumnDefinition, ICellValueChangedEvent, ICellEditorProps, CellEditorParams, IValueParserParams, IDateFilterValue, HeaderCell, HeaderRow, } from './columnTypes';
-export type { RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, IOGridApi, IOGridProps, IOGridClientProps, IOGridServerProps, IOGridDataGridProps, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, IVirtualScrollConfig, IColumnReorderConfig, } from './dataGridTypes';
+export type { RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, IOGridApi, IOGridProps, IOGridClientProps, IOGridServerProps, IOGridDataGridProps, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, IVirtualScrollConfig, IColumnReorderConfig, ISheetDef, } from './dataGridTypes';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './dataGridTypes';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "description": "OGrid React – React hooks, headless components, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -39,7 +39,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.3.0",
+    "@alaarab/ogrid-core": "2.4.1",
     "@tanstack/react-virtual": "^3.0.0"
   },
   "peerDependencies": {