@alaarab/ogrid-core 1.0.0 → 1.2.0

package/README.md

@@ -23,10 +23,22 @@ npm install @alaarab/ogrid-core
 
 ### Hooks
 
+- `useOGrid(props, ref)` -- Page/sort/filter/visibleColumns + `dataGridProps` for DataGridTable (used by OGrid wrappers)
+- `useDataGridState({ props, wrapperRef })` -- Orchestrator for grid state, selection, editing, clipboard, keyboard, fill handle, status bar
 - `useFilterOptions(dataSource, fields)` -- Loads filter options for multi-select columns
+- `useColumnHeaderFilterState(params)` -- Headless filter popover state (open, temp values, apply/clear, people search)
+- `useColumnChooserState({ columns, visibleColumns, onVisibilityChange })` -- Column visibility dropdown (open, Escape, select all/clear)
+- `useInlineCellEditorState({ value, editorType, onCommit, onCancel })` -- Inline cell editor (localValue, keydown, blur/commit)
+
+### Components
+
+- `OGridLayout` -- Layout structure for OGrid: toolbar row (title, toolbar, columnChooser), grid area, pagination. Accepts `containerComponent` and `gap` so Fluent/Material/Radix supply their Container (div or Box).
 
 ### Utilities
 
+- `getPaginationViewModel(...)` -- Page numbers, ellipsis, start/end item for PaginationControls
+- `getHeaderFilterConfig(col, input)` -- ColumnHeaderFilter props from column + filter/sort state
+- `getCellRenderDescriptor(item, col, rowIndex, colIdx, input)` -- Cell mode (editing-inline / editing-popover / display) and flags for DataGridTable
 - `toDataGridFilterProps(filters)` -- Splits `IFilters` into `multiSelectFilters`, `textFilters`, `peopleFilters`
 - `toUserLike(user)` -- Converts a user-like object to `UserLike`
 - `exportToCsv(items, columns, getValue, filename)` -- Full CSV export

package/dist/esm/components/GridContextMenu.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers } from '../utils/gridContextMenuHelpers';
+export function GridContextMenu(props) {
+    const { x, y, hasSelection, onClose, classNames } = props;
+    const ref = React.useRef(null);
+    const handlers = React.useMemo(() => getContextMenuHandlers(props), [props]);
+    React.useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (ref.current && !ref.current.contains(e.target))
+                onClose();
+        };
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        document.addEventListener('mousedown', handleClickOutside, true);
+        document.addEventListener('keydown', handleKeyDown, true);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside, true);
+            document.removeEventListener('keydown', handleKeyDown, true);
+        };
+    }, [onClose]);
+    return (_jsx("div", { ref: ref, className: classNames?.contextMenu, role: "menu", style: { left: x, top: y }, "aria-label": "Grid context menu", children: GRID_CONTEXT_MENU_ITEMS.map((item) => (_jsxs(React.Fragment, { children: [item.id === 'selectAll' && _jsx("div", { className: classNames?.contextMenuDivider }), _jsx("button", { type: "button", className: classNames?.contextMenuItem, onClick: handlers[item.id], disabled: item.disabledWhenNoSelection ? !hasSelection : false, children: item.label })] }, item.id))) }));
+}

package/dist/esm/components/OGridLayout.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const defaultGap = 16;
+/**
+ * Renders OGrid layout: [toolbar row | title, toolbar, columnChooser] [grid] [pagination].
+ * Inner structure uses divs; only the root uses Container so UIs can use Box/div and pass gap.
+ */
+export function OGridLayout(props) {
+    const { containerComponent: Container = 'div', containerProps = {}, gap = defaultGap, className, title, toolbar, columnChooser, children, pagination, } = props;
+    // Always apply flex layout; merge with any containerProps styles
+    const rootStyle = {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: typeof gap === 'number' ? `${gap}px` : gap,
+    };
+    return (_jsxs(Container, { className: className, style: rootStyle, ...containerProps, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8, minHeight: 40 }, children: [title != null ? _jsx("div", { style: { margin: 0 }, children: title }) : null, toolbar, columnChooser] }), _jsx("div", { style: { width: '100%', minWidth: 0, flex: 1 }, children: children }), pagination] }));
+}

package/dist/esm/components/StatusBar.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getStatusBarParts } from '../utils/statusBarHelpers';
+export function StatusBar({ classNames, ...rest }) {
+    const parts = getStatusBarParts(rest);
+    return (_jsx("div", { className: classNames?.statusBar, role: "status", "aria-live": "polite", children: parts.map((p) => (_jsxs("span", { className: classNames?.statusBarItem, children: [_jsx("span", { className: classNames?.statusBarLabel, children: p.label }), _jsx("span", { className: classNames?.statusBarValue, children: p.value.toLocaleString() })] }, p.key))) }));
+}

package/dist/esm/hooks/index.js

@@ -1 +1,17 @@
 export { useFilterOptions } from './useFilterOptions';
+export { useOGrid } from './useOGrid';
+export { useActiveCell } from './useActiveCell';
+export { useCellEditing } from './useCellEditing';
+export { useContextMenu } from './useContextMenu';
+export { useCellSelection } from './useCellSelection';
+export { useClipboard } from './useClipboard';
+export { useRowSelection } from './useRowSelection';
+export { useKeyboardNavigation } from './useKeyboardNavigation';
+export { useUndoRedo } from './useUndoRedo';
+export { useDebounce } from './useDebounce';
+export { useFillHandle } from './useFillHandle';
+export { useDataGridState } from './useDataGridState';
+export { useColumnHeaderFilterState } from './useColumnHeaderFilterState';
+export { useColumnChooserState } from './useColumnChooserState';
+export { useInlineCellEditorState } from './useInlineCellEditorState';
+export { useColumnResize } from './useColumnResize';

package/dist/esm/hooks/useActiveCell.js

@@ -0,0 +1,28 @@
+import { useState, useLayoutEffect } from 'react';
+/**
+ * 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 function useActiveCell(wrapperRef, editingCell) {
+    const [activeCell, setActiveCell] = useState(null);
+    // useLayoutEffect ensures focus moves synchronously before the browser can
+    // reset focus to body (fixes left/right arrow navigation losing focus)
+    useLayoutEffect(() => {
+        if (activeCell == null ||
+            wrapperRef?.current == null ||
+            editingCell != null)
+            return;
+        const { rowIndex, columnIndex } = activeCell;
+        const selector = `[data-row-index="${rowIndex}"][data-col-index="${columnIndex}"]`;
+        const cell = wrapperRef.current.querySelector(selector);
+        if (cell) {
+            if (typeof cell.scrollIntoView === 'function') {
+                cell.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            }
+            if (document.activeElement !== cell && typeof cell.focus === 'function') {
+                cell.focus();
+            }
+        }
+    }, [activeCell, editingCell, wrapperRef]);
+    return { activeCell, setActiveCell };
+}

package/dist/esm/hooks/useCellEditing.js

@@ -0,0 +1,11 @@
+import { useState } from 'react';
+export function useCellEditing() {
+    const [editingCell, setEditingCell] = useState(null);
+    const [pendingEditorValue, setPendingEditorValue] = useState(undefined);
+    return {
+        editingCell,
+        setEditingCell,
+        pendingEditorValue,
+        setPendingEditorValue,
+    };
+}

package/dist/esm/hooks/useCellSelection.js

@@ -0,0 +1,86 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { normalizeSelectionRange } from '../types';
+export function useCellSelection(params) {
+    const { colOffset, rowCount, visibleColCount, setActiveCell } = params;
+    const [selectionRange, setSelectionRange] = useState(null);
+    const isDraggingRef = useRef(false);
+    const dragStartRef = useRef(null);
+    const handleCellMouseDown = useCallback((e, rowIndex, globalColIndex) => {
+        if (globalColIndex < colOffset)
+            return;
+        // Prevent native text selection during cell drag
+        e.preventDefault();
+        const dataColIndex = globalColIndex - colOffset;
+        if (e.shiftKey && selectionRange != null) {
+            setSelectionRange(normalizeSelectionRange({
+                startRow: selectionRange.startRow,
+                startCol: selectionRange.startCol,
+                endRow: rowIndex,
+                endCol: dataColIndex,
+            }));
+            setActiveCell({ rowIndex, columnIndex: globalColIndex });
+        }
+        else {
+            dragStartRef.current = { row: rowIndex, col: dataColIndex };
+            setSelectionRange({
+                startRow: rowIndex,
+                startCol: dataColIndex,
+                endRow: rowIndex,
+                endCol: dataColIndex,
+            });
+            setActiveCell({ rowIndex, columnIndex: globalColIndex });
+            isDraggingRef.current = true;
+        }
+    }, [colOffset, selectionRange, setActiveCell]);
+    const handleSelectAllCells = useCallback(() => {
+        if (rowCount === 0 || visibleColCount === 0)
+            return;
+        setSelectionRange({
+            startRow: 0,
+            startCol: 0,
+            endRow: rowCount - 1,
+            endCol: visibleColCount - 1,
+        });
+        setActiveCell({ rowIndex: 0, columnIndex: colOffset });
+    }, [rowCount, visibleColCount, colOffset, setActiveCell]);
+    // Window mouse move/up for drag selection
+    useEffect(() => {
+        const onMove = (e) => {
+            if (!isDraggingRef.current || !dragStartRef.current)
+                return;
+            const target = document.elementFromPoint(e.clientX, e.clientY);
+            const cell = target?.closest?.('[data-row-index][data-col-index]');
+            if (!cell)
+                return;
+            const r = parseInt(cell.getAttribute('data-row-index') ?? '', 10);
+            const c = parseInt(cell.getAttribute('data-col-index') ?? '', 10);
+            if (Number.isNaN(r) || Number.isNaN(c) || c < colOffset)
+                return;
+            const dataCol = c - colOffset;
+            const start = dragStartRef.current;
+            setSelectionRange(normalizeSelectionRange({
+                startRow: start.row,
+                startCol: start.col,
+                endRow: r,
+                endCol: dataCol,
+            }));
+            setActiveCell({ rowIndex: r, columnIndex: c });
+        };
+        const onUp = () => {
+            isDraggingRef.current = false;
+            dragStartRef.current = null;
+        };
+        window.addEventListener('mousemove', onMove, true);
+        window.addEventListener('mouseup', onUp, true);
+        return () => {
+            window.removeEventListener('mousemove', onMove, true);
+            window.removeEventListener('mouseup', onUp, true);
+        };
+    }, [colOffset, setActiveCell]);
+    return {
+        selectionRange,
+        setSelectionRange,
+        handleCellMouseDown,
+        handleSelectAllCells,
+    };
+}

package/dist/esm/hooks/useClipboard.js

@@ -0,0 +1,129 @@
+import { useCallback, useRef, useState } from 'react';
+import { getCellValue } from '../utils';
+import { normalizeSelectionRange } from '../types';
+export function useClipboard(params) {
+    const { items, visibleCols, colOffset, selectionRange, activeCell, onCellValueChanged, } = params;
+    const cutRangeRef = useRef(null);
+    const [cutRange, setCutRange] = useState(null);
+    /** In-page clipboard fallback when system clipboard is unavailable. */
+    const internalClipboardRef = useRef(null);
+    const handleCopy = useCallback(() => {
+        const range = selectionRange ??
+            (activeCell != null
+                ? {
+                    startRow: activeCell.rowIndex,
+                    startCol: activeCell.columnIndex - colOffset,
+                    endRow: activeCell.rowIndex,
+                    endCol: activeCell.columnIndex - colOffset,
+                }
+                : null);
+        if (range == null)
+            return;
+        const norm = normalizeSelectionRange(range);
+        const rows = [];
+        for (let r = norm.startRow; r <= norm.endRow; r++) {
+            const cells = [];
+            for (let c = norm.startCol; c <= norm.endCol; c++) {
+                if (r >= items.length || c >= visibleCols.length)
+                    break;
+                const item = items[r];
+                const col = visibleCols[c];
+                const val = getCellValue(item, col);
+                cells.push(val != null && val !== '' ? String(val).replace(/\t/g, ' ').replace(/\n/g, ' ') : '');
+            }
+            rows.push(cells.join('\t'));
+        }
+        const tsv = rows.join('\r\n');
+        internalClipboardRef.current = tsv;
+        void navigator.clipboard.writeText(tsv).catch(() => { });
+    }, [selectionRange, activeCell, colOffset, items, visibleCols]);
+    const handleCut = useCallback(() => {
+        const range = selectionRange ??
+            (activeCell != null
+                ? {
+                    startRow: activeCell.rowIndex,
+                    startCol: activeCell.columnIndex - colOffset,
+                    endRow: activeCell.rowIndex,
+                    endCol: activeCell.columnIndex - colOffset,
+                }
+                : null);
+        if (range == null || onCellValueChanged == null)
+            return;
+        const norm = normalizeSelectionRange(range);
+        cutRangeRef.current = norm;
+        setCutRange(norm);
+        handleCopy();
+    }, [selectionRange, activeCell, colOffset, handleCopy, onCellValueChanged]);
+    const handlePaste = useCallback(async () => {
+        if (onCellValueChanged == null)
+            return;
+        let text;
+        try {
+            text = await navigator.clipboard.readText();
+        }
+        catch {
+            text = '';
+        }
+        if (!text.trim() && internalClipboardRef.current != null) {
+            text = internalClipboardRef.current;
+        }
+        if (!text.trim())
+            return;
+        const norm = selectionRange ??
+            (activeCell != null
+                ? {
+                    startRow: activeCell.rowIndex,
+                    startCol: activeCell.columnIndex - colOffset,
+                    endRow: activeCell.rowIndex,
+                    endCol: activeCell.columnIndex - colOffset,
+                }
+                : null);
+        const anchorRow = norm ? norm.startRow : 0;
+        const anchorCol = norm ? norm.startCol : 0;
+        const lines = text.split(/\r?\n/).filter((l) => l.length > 0);
+        for (let r = 0; r < lines.length; r++) {
+            const cells = lines[r].split('\t');
+            for (let c = 0; c < cells.length; c++) {
+                const targetRow = anchorRow + r;
+                const targetCol = anchorCol + c;
+                if (targetRow >= items.length || targetCol >= visibleCols.length)
+                    continue;
+                const item = items[targetRow];
+                const col = visibleCols[targetCol];
+                const newValue = cells[c] ?? '';
+                const oldValue = getCellValue(item, col);
+                onCellValueChanged({
+                    item,
+                    columnId: col.columnId,
+                    field: col.columnId,
+                    oldValue,
+                    newValue,
+                    rowIndex: targetRow,
+                });
+            }
+        }
+        if (cutRangeRef.current) {
+            const cut = cutRangeRef.current;
+            for (let r = cut.startRow; r <= cut.endRow; r++) {
+                for (let c = cut.startCol; c <= cut.endCol; c++) {
+                    if (r >= items.length || c >= visibleCols.length)
+                        continue;
+                    const item = items[r];
+                    const col = visibleCols[c];
+                    const oldValue = getCellValue(item, col);
+                    onCellValueChanged({
+                        item,
+                        columnId: col.columnId,
+                        field: col.columnId,
+                        oldValue,
+                        newValue: '',
+                        rowIndex: r,
+                    });
+                }
+            }
+            cutRangeRef.current = null;
+            setCutRange(null);
+        }
+    }, [selectionRange, activeCell, colOffset, items, visibleCols, onCellValueChanged]);
+    return { handleCopy, handleCut, handlePaste, cutRangeRef, cutRange };
+}

package/dist/esm/hooks/useColumnChooserState.js

@@ -0,0 +1,62 @@
+/**
+ * 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 { useState, useCallback, useEffect } from 'react';
+/**
+ * Returns open/setOpen, handleToggle, handleClose (Escape handled in hook),
+ * handleCheckboxChange(columnKey)(visible), handleSelectAll, handleClearAll,
+ * visibleCount, totalCount. UI renders trigger + popover and wires handlers.
+ */
+export function useColumnChooserState(params) {
+    const { columns, visibleColumns, onVisibilityChange } = params;
+    const [open, setOpen] = useState(false);
+    useEffect(() => {
+        if (!open)
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                setOpen(false);
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown, true);
+        return () => document.removeEventListener('keydown', handleKeyDown, true);
+    }, [open]);
+    const handleToggle = useCallback(() => {
+        setOpen((prev) => !prev);
+    }, []);
+    const handleClose = useCallback(() => {
+        setOpen(false);
+    }, []);
+    const handleCheckboxChange = useCallback((columnKey) => (visible) => {
+        onVisibilityChange(columnKey, visible);
+    }, [onVisibilityChange]);
+    const handleSelectAll = useCallback(() => {
+        columns.forEach((col) => {
+            if (!visibleColumns.has(col.columnId)) {
+                onVisibilityChange(col.columnId, true);
+            }
+        });
+    }, [columns, visibleColumns, onVisibilityChange]);
+    const handleClearAll = useCallback(() => {
+        columns.forEach((col) => {
+            if (!col.required && visibleColumns.has(col.columnId)) {
+                onVisibilityChange(col.columnId, false);
+            }
+        });
+    }, [columns, visibleColumns, onVisibilityChange]);
+    const visibleCount = visibleColumns.size;
+    const totalCount = columns.length;
+    return {
+        open,
+        setOpen,
+        handleToggle,
+        handleClose,
+        handleCheckboxChange,
+        handleSelectAll,
+        handleClearAll,
+        visibleCount,
+        totalCount,
+    };
+}

package/dist/esm/hooks/useColumnHeaderFilterState.js

@@ -0,0 +1,207 @@
+/**
+ * Headless column header filter state and handlers for Fluent, Material, and Radix.
+ * UI packages use this hook and render only presentation (popover, inputs, buttons).
+ */
+import { useState, useCallback, useRef, useEffect, useMemo, } from 'react';
+import { useDebounce } from './useDebounce';
+const SEARCH_DEBOUNCE_MS = 150;
+const EMPTY_OPTIONS = [];
+export function useColumnHeaderFilterState(params) {
+    const { filterType, onSort, selectedValues, onFilterChange, options, textValue = '', onTextChange, selectedUser, onUserChange, peopleSearch, } = params;
+    const safeSelectedValues = selectedValues ?? EMPTY_OPTIONS;
+    const safeOptions = options ?? EMPTY_OPTIONS;
+    const headerRef = useRef(null);
+    const popoverRef = useRef(null);
+    const peopleInputRef = useRef(null);
+    const peopleSearchTimeoutRef = useRef(undefined);
+    const [isFilterOpen, setFilterOpen] = useState(false);
+    const [tempSelected, setTempSelected] = useState(() => new Set(safeSelectedValues));
+    const [tempTextValue, setTempTextValue] = useState(textValue);
+    const [searchText, setSearchText] = useState('');
+    const debouncedSearchText = useDebounce(searchText, SEARCH_DEBOUNCE_MS);
+    const [peopleSuggestions, setPeopleSuggestions] = useState([]);
+    const [isPeopleLoading, setIsPeopleLoading] = useState(false);
+    const [peopleSearchText, setPeopleSearchText] = useState('');
+    const [popoverPosition, setPopoverPosition] = useState(null);
+    // Sync temp state when popover opens; compute position
+    useEffect(() => {
+        if (isFilterOpen) {
+            setTempSelected(new Set(safeSelectedValues));
+            setTempTextValue(textValue);
+            setSearchText('');
+            setPeopleSearchText('');
+            setPeopleSuggestions([]);
+            const t = setTimeout(() => {
+                if (headerRef.current) {
+                    const rect = headerRef.current.getBoundingClientRect();
+                    setPopoverPosition({ top: rect.bottom + 4, left: rect.left });
+                }
+                if (filterType === 'people') {
+                    setTimeout(() => peopleInputRef.current?.focus(), 50);
+                }
+            }, 0);
+            return () => clearTimeout(t);
+        }
+        else {
+            setPopoverPosition(null);
+        }
+    }, [isFilterOpen, filterType, safeSelectedValues, textValue]);
+    // Click outside and Escape to close
+    useEffect(() => {
+        if (!isFilterOpen)
+            return;
+        const handleClickOutside = (e) => {
+            const target = e.target;
+            if (popoverRef.current &&
+                !popoverRef.current.contains(target) &&
+                headerRef.current &&
+                !headerRef.current.contains(target)) {
+                setFilterOpen(false);
+            }
+        };
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape' || e.key === 'Esc') {
+                e.preventDefault();
+                e.stopPropagation();
+                setFilterOpen(false);
+            }
+        };
+        const timeoutId = setTimeout(() => document.addEventListener('mousedown', handleClickOutside), 0);
+        document.addEventListener('keydown', handleKeyDown, true);
+        return () => {
+            clearTimeout(timeoutId);
+            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('keydown', handleKeyDown, true);
+        };
+    }, [isFilterOpen]);
+    // Filtered options for multiSelect (search within options)
+    const filteredOptions = useMemo(() => {
+        if (!debouncedSearchText.trim())
+            return safeOptions;
+        const searchLower = debouncedSearchText.toLowerCase().trim();
+        return safeOptions.filter((opt) => opt.toLowerCase().includes(searchLower));
+    }, [safeOptions, debouncedSearchText]);
+    // People search
+    useEffect(() => {
+        if (!peopleSearch || !isFilterOpen || filterType !== 'people')
+            return;
+        if (peopleSearchTimeoutRef.current)
+            window.clearTimeout(peopleSearchTimeoutRef.current);
+        if (!peopleSearchText.trim()) {
+            setPeopleSuggestions([]);
+            return;
+        }
+        setIsPeopleLoading(true);
+        peopleSearchTimeoutRef.current = window.setTimeout(async () => {
+            try {
+                const results = await peopleSearch(peopleSearchText);
+                setPeopleSuggestions(results.slice(0, 10));
+            }
+            catch {
+                setPeopleSuggestions([]);
+            }
+            finally {
+                setIsPeopleLoading(false);
+            }
+        }, 300);
+        return () => {
+            if (peopleSearchTimeoutRef.current)
+                window.clearTimeout(peopleSearchTimeoutRef.current);
+        };
+    }, [peopleSearchText, peopleSearch, isFilterOpen, filterType]);
+    const handleFilterIconClick = useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        setFilterOpen((prev) => !prev);
+    }, []);
+    const handleSortClick = useCallback((e) => {
+        e.stopPropagation();
+        onSort?.();
+    }, [onSort]);
+    const handleCheckboxChange = useCallback((option, checked) => {
+        setTempSelected((prev) => {
+            const next = new Set(prev);
+            if (checked)
+                next.add(option);
+            else
+                next.delete(option);
+            return next;
+        });
+    }, []);
+    const handleSelectAll = useCallback(() => {
+        setTempSelected(new Set(filteredOptions));
+    }, [filteredOptions]);
+    const handleClearSelection = useCallback(() => setTempSelected(new Set()), []);
+    const handleApplyMultiSelect = useCallback(() => {
+        onFilterChange?.(Array.from(tempSelected));
+        setFilterOpen(false);
+    }, [onFilterChange, tempSelected]);
+    const handleTextApply = useCallback(() => {
+        onTextChange?.(tempTextValue.trim());
+        setFilterOpen(false);
+    }, [onTextChange, tempTextValue]);
+    const handleTextClear = useCallback(() => setTempTextValue(''), []);
+    const handleUserSelect = useCallback((user) => {
+        onUserChange?.(user);
+        setFilterOpen(false);
+    }, [onUserChange]);
+    const handleClearUser = useCallback(() => {
+        onUserChange?.(undefined);
+        setFilterOpen(false);
+    }, [onUserChange]);
+    const handlePopoverClick = useCallback((e) => e.stopPropagation(), []);
+    const handleInputFocus = useCallback((e) => e.stopPropagation(), []);
+    const handleInputMouseDown = useCallback((e) => e.stopPropagation(), []);
+    const handleInputClick = useCallback((e) => e.stopPropagation(), []);
+    const handleInputKeyDown = useCallback((e) => {
+        if (e.key !== 'Escape' && e.key !== 'Esc')
+            e.stopPropagation();
+    }, []);
+    const hasActiveFilter = useMemo(() => {
+        if (filterType === 'multiSelect')
+            return safeSelectedValues.length > 0;
+        if (filterType === 'text')
+            return !!textValue.trim();
+        if (filterType === 'people')
+            return !!selectedUser;
+        return false;
+    }, [filterType, safeSelectedValues, textValue, selectedUser]);
+    return {
+        headerRef,
+        popoverRef,
+        peopleInputRef,
+        isFilterOpen,
+        setFilterOpen,
+        tempSelected,
+        setTempSelected,
+        tempTextValue,
+        setTempTextValue,
+        searchText,
+        setSearchText,
+        debouncedSearchText,
+        filteredOptions,
+        peopleSuggestions,
+        isPeopleLoading,
+        peopleSearchText,
+        setPeopleSearchText,
+        hasActiveFilter,
+        popoverPosition,
+        handlers: {
+            handleFilterIconClick,
+            handleApplyMultiSelect,
+            handleTextApply,
+            handleTextClear,
+            handleUserSelect,
+            handleClearUser,
+            handleCheckboxChange,
+            handleSelectAll,
+            handleClearSelection,
+            handlePopoverClick,
+            handleInputFocus,
+            handleInputMouseDown,
+            handleInputClick,
+            handleInputKeyDown,
+            handleSortClick,
+        },
+    };
+}

package/dist/esm/hooks/useColumnResize.js

@@ -0,0 +1,48 @@
+import { useCallback, useRef, useEffect } from 'react';
+export function useColumnResize({ columnSizingOverrides, setColumnSizingOverrides, minWidth = 80, defaultWidth = 120, }) {
+    const resizingRef = useRef(null);
+    const handleResizeStart = useCallback((e, col) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const currentWidth = columnSizingOverrides[col.columnId]?.widthPx
+            ?? col.idealWidth
+            ?? col.defaultWidth
+            ?? defaultWidth;
+        resizingRef.current = {
+            columnId: col.columnId,
+            startX: e.clientX,
+            startWidth: currentWidth,
+        };
+    }, [columnSizingOverrides, defaultWidth]);
+    const handleResizeMove = useCallback((e) => {
+        if (!resizingRef.current)
+            return;
+        const { columnId, startX, startWidth } = resizingRef.current;
+        const deltaX = e.clientX - startX;
+        const newWidth = Math.max(minWidth, startWidth + deltaX);
+        setColumnSizingOverrides((prev) => ({
+            ...prev,
+            [columnId]: { widthPx: newWidth },
+        }));
+    }, [setColumnSizingOverrides, minWidth]);
+    const handleResizeEnd = useCallback(() => {
+        resizingRef.current = null;
+    }, []);
+    useEffect(() => {
+        const handleMouseMove = (e) => handleResizeMove(e);
+        const handleMouseUp = () => handleResizeEnd();
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [handleResizeMove, handleResizeEnd]);
+    const getColumnWidth = useCallback((col) => {
+        return columnSizingOverrides[col.columnId]?.widthPx
+            ?? col.idealWidth
+            ?? col.defaultWidth
+            ?? defaultWidth;
+    }, [columnSizingOverrides, defaultWidth]);
+    return { handleResizeStart, getColumnWidth };
+}