@alaarab/ogrid-core 1.8.2 → 1.9.0

package/dist/esm/hooks/useClipboard.js

@@ -2,26 +2,41 @@ import { useCallback, useRef, useState } from 'react';
 import { getCellValue } from '../utils';
 import { parseValue } from '../utils/valueParsers';
 import { normalizeSelectionRange } from '../types';
+import { useLatestRef } from './useLatestRef';
+/**
+ * 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 function useClipboard(params) {
-    const { items, visibleCols, colOffset, selectionRange, activeCell, editable, onCellValueChanged, beginBatch, endBatch, } = params;
+    const { colOffset, beginBatch, endBatch, } = params;
+    // Volatile values accessed via refs — keeps callbacks stable
+    const itemsRef = useLatestRef(params.items);
+    const visibleColsRef = useLatestRef(params.visibleCols);
+    const selectionRangeRef = useLatestRef(params.selectionRange);
+    const activeCellRef = useLatestRef(params.activeCell);
+    const editableRef = useLatestRef(params.editable);
+    const onCellValueChangedRef = useLatestRef(params.onCellValueChanged);
     const cutRangeRef = useRef(null);
     const [cutRange, setCutRange] = useState(null);
     const [copyRange, setCopyRange] = useState(null);
     /** In-page clipboard fallback when system clipboard is unavailable. */
     const internalClipboardRef = useRef(null);
+    /** Resolve current effective range from selection or active cell. */
+    const getEffectiveRange = useCallback(() => {
+        const sel = selectionRangeRef.current;
+        const ac = activeCellRef.current;
+        return sel ?? (ac != null
+            ? { startRow: ac.rowIndex, startCol: ac.columnIndex - colOffset, endRow: ac.rowIndex, endCol: ac.columnIndex - colOffset }
+            : null);
+    }, [colOffset, selectionRangeRef, activeCellRef]);
     const handleCopy = useCallback(() => {
-        const range = selectionRange ??
-            (activeCell != null
-                ? {
-                    startRow: activeCell.rowIndex,
-                    startCol: activeCell.columnIndex - colOffset,
-                    endRow: activeCell.rowIndex,
-                    endCol: activeCell.columnIndex - colOffset,
-                }
-                : null);
+        const range = getEffectiveRange();
         if (range == null)
             return;
         const norm = normalizeSelectionRange(range);
+        const items = itemsRef.current;
+        const visibleCols = visibleColsRef.current;
         const rows = [];
         for (let r = norm.startRow; r <= norm.endRow; r++) {
             const cells = [];
@@ -40,20 +55,12 @@ export function useClipboard(params) {
         internalClipboardRef.current = tsv;
         setCopyRange(norm);
         void navigator.clipboard.writeText(tsv).catch(() => { });
-    }, [selectionRange, activeCell, colOffset, items, visibleCols]);
+    }, [getEffectiveRange, itemsRef, visibleColsRef]);
     const handleCut = useCallback(() => {
-        if (editable === false)
+        if (editableRef.current === false)
             return;
-        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)
+        const range = getEffectiveRange();
+        if (range == null || onCellValueChangedRef.current == null)
             return;
         const norm = normalizeSelectionRange(range);
         cutRangeRef.current = norm;
@@ -62,10 +69,11 @@ export function useClipboard(params) {
         handleCopy();
         // handleCopy sets copyRange — override it back since this is a cut
         setCopyRange(null);
-    }, [selectionRange, activeCell, colOffset, handleCopy, editable, onCellValueChanged]);
+    }, [getEffectiveRange, handleCopy, editableRef, onCellValueChangedRef]);
     const handlePaste = useCallback(async () => {
-        if (editable === false)
+        if (editableRef.current === false)
             return;
+        const onCellValueChanged = onCellValueChangedRef.current;
         if (onCellValueChanged == null)
             return;
         let text;
@@ -80,17 +88,11 @@ export function useClipboard(params) {
         }
         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 norm = getEffectiveRange();
         const anchorRow = norm ? norm.startRow : 0;
         const anchorCol = norm ? norm.startCol : 0;
+        const items = itemsRef.current;
+        const visibleCols = visibleColsRef.current;
         const lines = text.split(/\r?\n/).filter((l) => l.length > 0);
         beginBatch?.();
         for (let r = 0; r < lines.length; r++) {
@@ -114,7 +116,6 @@ export function useClipboard(params) {
                 onCellValueChanged({
                     item,
                     columnId: col.columnId,
-                    field: col.columnId,
                     oldValue,
                     newValue: result.value,
                     rowIndex: targetRow,
@@ -140,7 +141,6 @@ export function useClipboard(params) {
                     onCellValueChanged({
                         item,
                         columnId: col.columnId,
-                        field: col.columnId,
                         oldValue,
                         newValue: result.value,
                         rowIndex: r,
@@ -152,7 +152,7 @@ export function useClipboard(params) {
         }
         endBatch?.();
         setCopyRange(null);
-    }, [selectionRange, activeCell, colOffset, items, visibleCols, editable, onCellValueChanged, beginBatch, endBatch]);
+    }, [getEffectiveRange, itemsRef, visibleColsRef, editableRef, onCellValueChangedRef, beginBatch, endBatch]);
     const clearClipboardRanges = useCallback(() => {
         setCopyRange(null);
         setCutRange(null);

package/dist/esm/hooks/useColumnHeaderFilterState.js

@@ -1,48 +1,52 @@
 /**
  * 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 { useState, useCallback, useRef, useEffect, useMemo, } from 'react';
-import { useDebounce } from './useDebounce';
-const SEARCH_DEBOUNCE_MS = 150;
+import { useTextFilterState } from './useTextFilterState';
+import { useMultiSelectFilterState } from './useMultiSelectFilterState';
+import { usePeopleFilterState } from './usePeopleFilterState';
+import { useDateFilterState } from './useDateFilterState';
 const EMPTY_OPTIONS = [];
 export function useColumnHeaderFilterState(params) {
     const { filterType, onSort, selectedValues, onFilterChange, options, textValue = '', onTextChange, selectedUser, onUserChange, peopleSearch, dateValue, onDateChange, } = params;
     const safeSelectedValues = selectedValues ?? EMPTY_OPTIONS;
-    const safeOptions = options ?? EMPTY_OPTIONS;
+    // Shared state
     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 [tempDateFrom, setTempDateFrom] = useState(dateValue?.from ?? '');
-    const [tempDateTo, setTempDateTo] = useState(dateValue?.to ?? '');
     const [popoverPosition, setPopoverPosition] = useState(null);
-    // Sync temp state when popover opens
+    // Compose sub-hooks for each filter type
+    const textFilterState = useTextFilterState({
+        textValue,
+        onTextChange,
+        isFilterOpen,
+    });
+    const multiSelectFilterState = useMultiSelectFilterState({
+        selectedValues,
+        onFilterChange,
+        options,
+        isFilterOpen,
+    });
+    const peopleFilterState = usePeopleFilterState({
+        selectedUser,
+        onUserChange,
+        peopleSearch,
+        isFilterOpen,
+        filterType,
+    });
+    const dateFilterState = useDateFilterState({
+        dateValue,
+        onDateChange,
+        isFilterOpen,
+    });
+    // Close popover resets position
     useEffect(() => {
-        if (isFilterOpen) {
-            setTempSelected(new Set(safeSelectedValues));
-            setTempTextValue(textValue);
-            setTempDateFrom(dateValue?.from ?? '');
-            setTempDateTo(dateValue?.to ?? '');
-            setSearchText('');
-            setPeopleSearchText('');
-            setPeopleSuggestions([]);
-            if (filterType === 'people') {
-                setTimeout(() => peopleInputRef.current?.focus(), 50);
-            }
-        }
-        else {
+        if (!isFilterOpen) {
             setPopoverPosition(null);
         }
-    }, [isFilterOpen, filterType, safeSelectedValues, textValue, dateValue]);
+    }, [isFilterOpen]);
     // Click outside and Escape to close
     useEffect(() => {
         if (!isFilterOpen)
@@ -71,41 +75,7 @@ export function useColumnHeaderFilterState(params) {
             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]);
+    // Shared handlers
     const handleFilterIconClick = useCallback((e) => {
         e.stopPropagation();
         e.preventDefault();
@@ -121,47 +91,28 @@ export function useColumnHeaderFilterState(params) {
         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()), []);
+    // Wrap sub-hook handlers to close popover
     const handleApplyMultiSelect = useCallback(() => {
-        onFilterChange?.(Array.from(tempSelected));
+        multiSelectFilterState.handleApplyMultiSelect();
         setFilterOpen(false);
-    }, [onFilterChange, tempSelected]);
+    }, [multiSelectFilterState]);
     const handleTextApply = useCallback(() => {
-        onTextChange?.(tempTextValue.trim());
+        textFilterState.handleTextApply();
         setFilterOpen(false);
-    }, [onTextChange, tempTextValue]);
-    const handleTextClear = useCallback(() => setTempTextValue(''), []);
+    }, [textFilterState]);
     const handleUserSelect = useCallback((user) => {
-        onUserChange?.(user);
+        peopleFilterState.handleUserSelect(user);
         setFilterOpen(false);
-    }, [onUserChange]);
-    const handleDateApply = useCallback(() => {
-        const from = tempDateFrom || undefined;
-        const to = tempDateTo || undefined;
-        onDateChange?.(from || to ? { from, to } : undefined);
-        setFilterOpen(false);
-    }, [onDateChange, tempDateFrom, tempDateTo]);
-    const handleDateClear = useCallback(() => {
-        setTempDateFrom('');
-        setTempDateTo('');
-    }, []);
+    }, [peopleFilterState]);
     const handleClearUser = useCallback(() => {
-        onUserChange?.(undefined);
+        peopleFilterState.handleClearUser();
+        setFilterOpen(false);
+    }, [peopleFilterState]);
+    const handleDateApply = useCallback(() => {
+        dateFilterState.handleDateApply();
         setFilterOpen(false);
-    }, [onUserChange]);
+    }, [dateFilterState]);
+    // Event propagation stoppers
     const handlePopoverClick = useCallback((e) => e.stopPropagation(), []);
     const handleInputFocus = useCallback((e) => e.stopPropagation(), []);
     const handleInputMouseDown = useCallback((e) => e.stopPropagation(), []);
@@ -170,6 +121,7 @@ export function useColumnHeaderFilterState(params) {
         if (e.key !== 'Escape' && e.key !== 'Esc')
             e.stopPropagation();
     }, []);
+    // Compute hasActiveFilter from all sub-hooks
     const hasActiveFilter = useMemo(() => {
         if (filterType === 'multiSelect')
             return safeSelectedValues.length > 0;
@@ -184,39 +136,39 @@ export function useColumnHeaderFilterState(params) {
     return {
         headerRef,
         popoverRef,
-        peopleInputRef,
+        peopleInputRef: peopleFilterState.peopleInputRef,
         isFilterOpen,
         setFilterOpen,
-        tempSelected,
-        setTempSelected,
-        tempTextValue,
-        setTempTextValue,
-        searchText,
-        setSearchText,
-        debouncedSearchText,
-        filteredOptions,
-        peopleSuggestions,
-        isPeopleLoading,
-        peopleSearchText,
-        setPeopleSearchText,
-        tempDateFrom,
-        setTempDateFrom,
-        tempDateTo,
-        setTempDateTo,
+        tempSelected: multiSelectFilterState.tempSelected,
+        setTempSelected: multiSelectFilterState.setTempSelected,
+        tempTextValue: textFilterState.tempTextValue,
+        setTempTextValue: textFilterState.setTempTextValue,
+        searchText: multiSelectFilterState.searchText,
+        setSearchText: multiSelectFilterState.setSearchText,
+        debouncedSearchText: multiSelectFilterState.debouncedSearchText,
+        filteredOptions: multiSelectFilterState.filteredOptions,
+        peopleSuggestions: peopleFilterState.peopleSuggestions,
+        isPeopleLoading: peopleFilterState.isPeopleLoading,
+        peopleSearchText: peopleFilterState.peopleSearchText,
+        setPeopleSearchText: peopleFilterState.setPeopleSearchText,
+        tempDateFrom: dateFilterState.tempDateFrom,
+        setTempDateFrom: dateFilterState.setTempDateFrom,
+        tempDateTo: dateFilterState.tempDateTo,
+        setTempDateTo: dateFilterState.setTempDateTo,
         hasActiveFilter,
         popoverPosition,
         handlers: {
             handleFilterIconClick,
             handleApplyMultiSelect,
             handleTextApply,
-            handleTextClear,
+            handleTextClear: textFilterState.handleTextClear,
             handleUserSelect,
             handleClearUser,
             handleDateApply,
-            handleDateClear,
-            handleCheckboxChange,
-            handleSelectAll,
-            handleClearSelection,
+            handleDateClear: dateFilterState.handleDateClear,
+            handleCheckboxChange: multiSelectFilterState.handleCheckboxChange,
+            handleSelectAll: multiSelectFilterState.handleSelectAll,
+            handleClearSelection: multiSelectFilterState.handleClearSelection,
             handlePopoverClick,
             handleInputFocus,
             handleInputMouseDown,

package/dist/esm/hooks/useColumnResize.js

@@ -1,8 +1,25 @@
-import { useCallback, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+import { useLatestRef } from './useLatestRef';
+/**
+ * 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 function useColumnResize({ columnSizingOverrides, setColumnSizingOverrides, minWidth = 80, defaultWidth = 120, onColumnResized, }) {
     const rafRef = useRef(0);
     const onColumnResizedRef = useRef(onColumnResized);
     onColumnResizedRef.current = onColumnResized;
+    const columnSizingOverridesRef = useLatestRef(columnSizingOverrides);
+    // Track active drag listeners so we can clean up on unmount
+    const cleanupRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (cleanupRef.current) {
+                cleanupRef.current();
+                cleanupRef.current = null;
+            }
+        };
+    }, []);
     const handleResizeStart = useCallback((e, col) => {
         e.preventDefault();
         e.stopPropagation();
@@ -14,7 +31,7 @@ export function useColumnResize({ columnSizingOverrides, setColumnSizingOverride
         const thEl = e.currentTarget.parentElement;
         const startWidth = thEl
             ? thEl.getBoundingClientRect().width
-            : columnSizingOverrides[columnId]?.widthPx
+            : columnSizingOverridesRef.current[columnId]?.widthPx
                 ?? col.idealWidth
                 ?? col.defaultWidth
                 ?? defaultWidth;
@@ -40,9 +57,10 @@ export function useColumnResize({ columnSizingOverrides, setColumnSizingOverride
                 });
             }
         };
-        const onUp = () => {
+        const cleanup = () => {
             document.removeEventListener('mousemove', onMove);
             document.removeEventListener('mouseup', onUp);
+            cleanupRef.current = null;
             // Restore cursor and user-select
             document.body.style.cursor = prevCursor;
             document.body.style.userSelect = prevUserSelect;
@@ -51,6 +69,9 @@ export function useColumnResize({ columnSizingOverrides, setColumnSizingOverride
                 cancelAnimationFrame(rafRef.current);
                 rafRef.current = 0;
             }
+        };
+        const onUp = () => {
+            cleanup();
             flushWidth();
             if (onColumnResizedRef.current) {
                 onColumnResizedRef.current(columnId, latestWidth);
@@ -58,7 +79,9 @@ export function useColumnResize({ columnSizingOverrides, setColumnSizingOverride
         };
         document.addEventListener('mousemove', onMove);
         document.addEventListener('mouseup', onUp);
-    }, [columnSizingOverrides, defaultWidth, minWidth, setColumnSizingOverrides]);
+        cleanupRef.current = cleanup;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [defaultWidth, minWidth, setColumnSizingOverrides]); // columnSizingOverrides read via ref
     const getColumnWidth = useCallback((col) => {
         return columnSizingOverrides[col.columnId]?.widthPx
             ?? col.idealWidth

package/dist/esm/hooks/useContextMenu.js

@@ -1,16 +1,20 @@
 import { useState, useCallback } from 'react';
+/**
+ * Manages context menu position state for right-click menus.
+ * @returns Menu position, setter, right-click handler, and close handler.
+ */
 export function useContextMenu() {
-    const [contextMenu, setContextMenu] = useState(null);
+    const [contextMenuPosition, setContextMenuPosition] = useState(null);
     const handleCellContextMenu = useCallback((e) => {
         e.preventDefault?.();
-        setContextMenu({ x: e.clientX, y: e.clientY });
+        setContextMenuPosition({ x: e.clientX, y: e.clientY });
     }, []);
     const closeContextMenu = useCallback(() => {
-        setContextMenu(null);
+        setContextMenuPosition(null);
     }, []);
     return {
-        contextMenu,
-        setContextMenu,
+        contextMenuPosition,
+        setContextMenuPosition,
         handleCellContextMenu,
         closeContextMenu,
     };