@alaarab/ogrid-react 2.0.9 → 2.0.12

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

@@ -0,0 +1,131 @@
+import type { RefObject } from 'react';
+import type { IOGridDataGridProps, IColumnDef } from '../types';
+import type { UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, DataGridPinningState } from './useDataGridState';
+import type { UseColumnResizeResult } from './useColumnResize';
+import type { UseColumnReorderResult } from './useColumnReorder';
+import type { UseVirtualScrollResult } from './useVirtualScroll';
+import type { HeaderFilterConfigInput, CellRenderDescriptorInput } from '../utils';
+import type { IStatusBarProps, RowId, HeaderRow } from '../types';
+/** Parameters for the orchestration hook. */
+export interface UseDataGridTableOrchestrationParams<T> {
+    props: IOGridDataGridProps<T>;
+}
+/** Everything the framework-specific view layer needs to render. */
+export interface UseDataGridTableOrchestrationResult<T> {
+    wrapperRef: RefObject<HTMLDivElement | null>;
+    tableContainerRef: RefObject<HTMLDivElement | null>;
+    lastMouseShiftRef: React.MutableRefObject<boolean>;
+    state: UseDataGridStateResult<T>;
+    layout: DataGridLayoutState<T>;
+    rowSel: DataGridRowSelectionState;
+    editing: DataGridEditingState<T>;
+    interaction: DataGridCellInteractionState;
+    ctxMenu: DataGridContextMenuState;
+    viewModels: DataGridViewModelState<T>;
+    pinning: DataGridPinningState;
+    handleResizeStart: UseColumnResizeResult<T>['handleResizeStart'];
+    getColumnWidth: UseColumnResizeResult<T>['getColumnWidth'];
+    isReorderDragging: UseColumnReorderResult['isDragging'];
+    dropIndicatorX: UseColumnReorderResult['dropIndicatorX'];
+    handleHeaderMouseDown: UseColumnReorderResult['handleHeaderMouseDown'];
+    virtualScrollEnabled: boolean;
+    virtualRowHeight: number;
+    visibleRange: UseVirtualScrollResult['visibleRange'];
+    items: T[];
+    columns: IOGridDataGridProps<T>['columns'];
+    getRowId: IOGridDataGridProps<T>['getRowId'];
+    emptyState: IOGridDataGridProps<T>['emptyState'];
+    layoutMode: 'fill' | 'content';
+    rowSelection: IOGridDataGridProps<T>['rowSelection'];
+    freezeRows: IOGridDataGridProps<T>['freezeRows'];
+    freezeCols: IOGridDataGridProps<T>['freezeCols'];
+    suppressHorizontalScroll: IOGridDataGridProps<T>['suppressHorizontalScroll'];
+    isLoading: boolean;
+    loadingMessage: string;
+    ariaLabel: string | undefined;
+    ariaLabelledBy: string | undefined;
+    visibleColumns: IOGridDataGridProps<T>['visibleColumns'];
+    columnOrder: IOGridDataGridProps<T>['columnOrder'];
+    columnReorder: IOGridDataGridProps<T>['columnReorder'];
+    density: 'compact' | 'normal' | 'comfortable';
+    pinnedColumns: IOGridDataGridProps<T>['pinnedColumns'];
+    currentPage: number;
+    propPageSize: number;
+    rowNumberOffset: number;
+    headerRows: HeaderRow<T>[];
+    allowOverflowX: boolean;
+    fitToContent: boolean;
+    editCallbacks: {
+        commitCellEdit: DataGridEditingState<T>['commitCellEdit'];
+        setEditingCell: DataGridEditingState<T>['setEditingCell'];
+        setPendingEditorValue: DataGridEditingState<T>['setPendingEditorValue'];
+        cancelPopoverEdit: DataGridEditingState<T>['cancelPopoverEdit'];
+    };
+    interactionHandlers: {
+        handleCellMouseDown: DataGridCellInteractionState['handleCellMouseDown'];
+        setActiveCell: DataGridCellInteractionState['setActiveCell'];
+        setEditingCell: DataGridEditingState<T>['setEditingCell'];
+        handleCellContextMenu: DataGridContextMenuState['handleCellContextMenu'];
+    };
+    cellDescriptorInputRef: React.MutableRefObject<CellRenderDescriptorInput<T>>;
+    pendingEditorValueRef: React.MutableRefObject<unknown>;
+    popoverAnchorElRef: React.MutableRefObject<HTMLElement | null>;
+    selectedRowIdsRef: React.MutableRefObject<Set<RowId>>;
+    handleSingleRowClick: (e: React.MouseEvent<HTMLTableRowElement>) => void;
+    handlePasteVoid: () => void;
+    visibleCols: IColumnDef<T>[];
+    totalColCount: number;
+    hasCheckboxCol: boolean;
+    hasRowNumbersCol: boolean;
+    colOffset: number;
+    containerWidth: number;
+    minTableWidth: number;
+    desiredTableWidth: number;
+    columnSizingOverrides: Record<string, {
+        widthPx: number;
+    }>;
+    setColumnSizingOverrides: React.Dispatch<React.SetStateAction<Record<string, {
+        widthPx: number;
+    }>>>;
+    selectedRowIds: Set<RowId>;
+    updateSelection: DataGridRowSelectionState['updateSelection'];
+    handleRowCheckboxChange: DataGridRowSelectionState['handleRowCheckboxChange'];
+    handleSelectAll: DataGridRowSelectionState['handleSelectAll'];
+    allSelected: boolean;
+    someSelected: boolean;
+    editingCell: DataGridEditingState<T>['editingCell'];
+    setPopoverAnchorEl: DataGridEditingState<T>['setPopoverAnchorEl'];
+    cancelPopoverEdit: DataGridEditingState<T>['cancelPopoverEdit'];
+    setActiveCell: DataGridCellInteractionState['setActiveCell'];
+    selectionRange: DataGridCellInteractionState['selectionRange'];
+    hasCellSelection: boolean;
+    handleGridKeyDown: DataGridCellInteractionState['handleGridKeyDown'];
+    handleFillHandleMouseDown: DataGridCellInteractionState['handleFillHandleMouseDown'];
+    handleCopy: DataGridCellInteractionState['handleCopy'];
+    handleCut: DataGridCellInteractionState['handleCut'];
+    cutRange: DataGridCellInteractionState['cutRange'];
+    copyRange: DataGridCellInteractionState['copyRange'];
+    canUndo: boolean;
+    canRedo: boolean;
+    onUndo: DataGridCellInteractionState['onUndo'];
+    onRedo: DataGridCellInteractionState['onRedo'];
+    isDragging: boolean;
+    menuPosition: DataGridContextMenuState['menuPosition'];
+    handleCellContextMenu: DataGridContextMenuState['handleCellContextMenu'];
+    closeContextMenu: DataGridContextMenuState['closeContextMenu'];
+    headerFilterInput: HeaderFilterConfigInput;
+    cellDescriptorInput: CellRenderDescriptorInput<T>;
+    statusBarConfig: IStatusBarProps | null;
+    showEmptyInGrid: boolean;
+    onCellError: DataGridViewModelState<T>['onCellError'];
+    headerMenu: DataGridPinningState['headerMenu'];
+}
+/**
+ * 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 declare function useDataGridTableOrchestration<T>(params: UseDataGridTableOrchestrationParams<T>): UseDataGridTableOrchestrationResult<T>;

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

@@ -0,0 +1,20 @@
+import { getPaginationViewModel } from '../utils';
+export interface UsePaginationControlsProps {
+    currentPage: number;
+    pageSize: number;
+    totalCount: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+    pageSizeOptions?: number[];
+    entityLabelPlural?: string;
+}
+export interface UsePaginationControlsResult {
+    labelPlural: string;
+    vm: ReturnType<typeof getPaginationViewModel>;
+    handlePageSizeChange: (value: number) => void;
+}
+/**
+ * Shared pagination controls logic for React UI packages.
+ * Computes pagination view model and provides standardized handlers.
+ */
+export declare function usePaginationControls(props: UsePaginationControlsProps): UsePaginationControlsResult;

package/dist/types/index.d.ts

@@ -1,8 +1,9 @@
 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 { 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, useSideBarState, useTableLayout, useColumnReorder, useVirtualScroll, useLatestRef, } 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, UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, UseTextFilterStateParams, UseTextFilterStateResult, UseMultiSelectFilterStateParams, UseMultiSelectFilterStateResult, UsePeopleFilterStateParams, UsePeopleFilterStateResult, UseDateFilterStateParams, UseDateFilterStateResult, UseColumnChooserStateParams, UseColumnChooserStateResult, UseInlineCellEditorStateParams, UseInlineCellEditorStateResult, InlineCellEditorType, UseColumnResizeParams, UseColumnResizeResult, UseRichSelectStateParams, UseRichSelectStateResult, UseSideBarStateParams, UseSideBarStateResult, UseTableLayoutParams, UseTableLayoutResult, UseColumnReorderParams, UseColumnReorderResult, UseVirtualScrollParams, UseVirtualScrollResult, } 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';
+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, UseSideBarStateParams, UseSideBarStateResult, UseTableLayoutParams, UseTableLayoutResult, UseColumnReorderParams, UseColumnReorderResult, UseVirtualScrollParams, UseVirtualScrollResult, UsePaginationControlsProps, UsePaginationControlsResult, UseDataGridTableOrchestrationParams, UseDataGridTableOrchestrationResult, } 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';
 export { StatusBar } from './components/StatusBar';
@@ -19,5 +20,11 @@ export { CellErrorBoundary } from './components/CellErrorBoundary';
 export type { CellErrorBoundaryProps } from './components/CellErrorBoundary';
 export { EmptyState } from './components/EmptyState';
 export type { EmptyStateProps } from './components/EmptyState';
+export { DateFilterContent, getColumnHeaderFilterStateParams, getDateFilterContentProps, } from './components/ColumnHeaderFilterContent';
+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, 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';
 export type { CsvColumn, StatusBarPart, StatusBarPartsInput, GridContextMenuItem, GridContextMenuHandlerProps, PaginationViewModel, HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, CellInteractionHandlers, ParseValueResult, AggregationResult, GridRowComparatorProps, } from './utils';
+export { renderFilterContent } 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

@@ -105,7 +105,7 @@ export interface IOGridDataGridProps<T> {
     getRowId: (item: T) => RowId;
     sortBy?: string;
     sortDirection: 'asc' | 'desc';
-    onColumnSort: (columnKey: string) => void;
+    onColumnSort: (columnKey: string, direction?: 'asc' | 'desc' | null) => void;
     visibleColumns: Set<string>;
     /** Optional column display order (column ids). When set, visible columns are ordered by this array. */
     columnOrder?: string[];

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

@@ -1,4 +1,4 @@
-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';
 export type { CsvColumn, StatusBarPart, StatusBarPartsInput, GridContextMenuItem, GridContextMenuHandlerProps, PaginationViewModel, ParseValueResult, AggregationResult, } from '@alaarab/ogrid-core';
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from './dataGridViewModel';
 export type { HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, CellInteractionHandlers, } from './dataGridViewModel';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react",
-  "version": "2.0.9",
+  "version": "2.0.12",
   "description": "OGrid React – React hooks, headless components, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -36,7 +36,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.0.9"
+    "@alaarab/ogrid-core": "2.0.12"
   },
   "peerDependencies": {
     "@tanstack/react-virtual": "^3.0.0",
@@ -51,8 +51,8 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },