@alaarab/ogrid-react 2.0.0-beta

package/dist/esm/hooks/useActiveCell.js

@@ -0,0 +1,62 @@
+import { useState, useLayoutEffect, useCallback, useRef } 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);
+    const activeCellRef = useRef(activeCell);
+    activeCellRef.current = activeCell;
+    // Deduplicating setter — skips state update (and all downstream effects) when
+    // the cell coordinates haven't actually changed. This prevents re-renders when
+    // rapidly clicking the same cell.
+    const setActiveCell = useCallback((cell) => {
+        const prev = activeCellRef.current;
+        if (prev === cell)
+            return;
+        if (prev && cell && prev.rowIndex === cell.rowIndex && prev.columnIndex === cell.columnIndex)
+            return;
+        _setActiveCell(cell);
+    }, []);
+    // 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) {
+            // Scroll the cell into view within the table wrapper only — do NOT
+            // use native scrollIntoView() which scrolls all ancestor containers
+            // including the page, causing an unwanted viewport jump.
+            const wrapper = wrapperRef.current;
+            const thead = wrapper.querySelector('thead');
+            const headerHeight = thead ? thead.getBoundingClientRect().height : 0;
+            const wrapperRect = wrapper.getBoundingClientRect();
+            const cellRect = cell.getBoundingClientRect();
+            // Vertical scroll (account for sticky thead)
+            const visibleTop = wrapperRect.top + headerHeight;
+            if (cellRect.top < visibleTop) {
+                wrapper.scrollTop -= visibleTop - cellRect.top;
+            }
+            else if (cellRect.bottom > wrapperRect.bottom) {
+                wrapper.scrollTop += cellRect.bottom - wrapperRect.bottom;
+            }
+            // Horizontal scroll
+            if (cellRect.left < wrapperRect.left) {
+                wrapper.scrollLeft -= wrapperRect.left - cellRect.left;
+            }
+            else if (cellRect.right > wrapperRect.right) {
+                wrapper.scrollLeft += cellRect.right - wrapperRect.right;
+            }
+            if (document.activeElement !== cell && typeof cell.focus === 'function') {
+                cell.focus({ preventScroll: true });
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeCell, editingCell]); // wrapperRef excluded — refs are stable across renders
+    return { activeCell, setActiveCell };
+}

package/dist/esm/hooks/useCellEditing.js

@@ -0,0 +1,15 @@
+import { useState } from 'react';
+/**
+ * Manages cell editing state: which cell is being edited and its pending value.
+ * @returns Current editing cell, setter, pending editor value, and setter.
+ */
+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,327 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { normalizeSelectionRange } from '../types';
+/** Compares two selection ranges by value. */
+function rangesEqual(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return false;
+    return a.startRow === b.startRow && a.endRow === b.endRow &&
+        a.startCol === b.startCol && a.endCol === b.endCol;
+}
+/** DOM attribute name used for drag-range highlighting (bypasses React). */
+const DRAG_ATTR = 'data-drag-range';
+/** Auto-scroll config */
+const AUTO_SCROLL_EDGE = 40; // px from wrapper edge to trigger
+const AUTO_SCROLL_MIN_SPEED = 2;
+const AUTO_SCROLL_MAX_SPEED = 20;
+const AUTO_SCROLL_INTERVAL = 16; // ~60fps
+/** Compute scroll speed proportional to distance past the edge, capped. */
+function autoScrollSpeed(distance) {
+    const t = Math.min(distance / AUTO_SCROLL_EDGE, 1);
+    return AUTO_SCROLL_MIN_SPEED + t * (AUTO_SCROLL_MAX_SPEED - AUTO_SCROLL_MIN_SPEED);
+}
+/**
+ * Manages cell selection range with drag-to-select and select-all support.
+ * @param params - Row/col counts, active cell setter, and wrapper ref for auto-scroll.
+ * @returns Selection range, setters, mouse/keyboard handlers, and drag state.
+ */
+export function useCellSelection(params) {
+    const { colOffset, rowCount, visibleColCount, setActiveCell, wrapperRef } = params;
+    const [selectionRange, _setSelectionRange] = useState(null);
+    const isDraggingRef = useRef(false);
+    const [isDragging, setIsDragging] = useState(false);
+    /** True once a mousemove has been seen during the current drag gesture. */
+    const dragMovedRef = useRef(false);
+    const dragStartRef = useRef(null);
+    const rafRef = useRef(0);
+    /** Live drag range kept in a ref — only committed to React state on mouseup. */
+    const liveDragRangeRef = useRef(null);
+    /** Auto-scroll interval during drag. */
+    const autoScrollRef = useRef(null);
+    // Ref mirror of selectionRange — lets handleCellMouseDown read current value
+    // without adding selectionRange to its useCallback deps (keeps it stable).
+    const selectionRangeRef = useRef(selectionRange);
+    selectionRangeRef.current = selectionRange;
+    // Deduplicating setter — skips re-render when the range hasn't actually changed.
+    const setSelectionRange = useCallback((next) => {
+        if (rangesEqual(selectionRangeRef.current, next))
+            return;
+        _setSelectionRange(next);
+    }, []);
+    const handleCellMouseDown = useCallback((e, rowIndex, globalColIndex) => {
+        // Only handle primary (left) button — let middle-click scroll and right-click context menu work natively
+        if (e.button !== 0)
+            return;
+        if (globalColIndex < colOffset)
+            return;
+        // Prevent native text selection during cell drag
+        e.preventDefault();
+        const dataColIndex = globalColIndex - colOffset;
+        const currentRange = selectionRangeRef.current;
+        if (e.shiftKey && currentRange != null) {
+            setSelectionRange(normalizeSelectionRange({
+                startRow: currentRange.startRow,
+                startCol: currentRange.startCol,
+                endRow: rowIndex,
+                endCol: dataColIndex,
+            }));
+            setActiveCell({ rowIndex, columnIndex: globalColIndex });
+        }
+        else {
+            dragStartRef.current = { row: rowIndex, col: dataColIndex };
+            dragMovedRef.current = false;
+            const initial = {
+                startRow: rowIndex,
+                startCol: dataColIndex,
+                endRow: rowIndex,
+                endCol: dataColIndex,
+            };
+            setSelectionRange(initial);
+            liveDragRangeRef.current = initial;
+            setActiveCell({ rowIndex, columnIndex: globalColIndex });
+            // Mark drag as "started" but don't set isDragging state yet —
+            // setIsDragging(true) is deferred to the first mousemove to avoid
+            // a true→false toggle on simple clicks (which causes 2 extra renders).
+            isDraggingRef.current = true;
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- setSelectionRange is a stable callback
+    [colOffset, 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 });
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- setSelectionRange is a stable callback
+    }, [rowCount, visibleColCount, colOffset, setActiveCell]);
+    /** Last known mouse position during drag — used by mouseUp to flush pending RAF work. */
+    const lastMousePosRef = useRef(null);
+    // Window mouse move/up for drag selection.
+    // Performance: during drag, we update a ref + toggle DOM attributes via rAF.
+    // React state is only committed on mouseup (single re-render instead of 60-120/s).
+    useEffect(() => {
+        const colOff = colOffset; // capture for closure
+        /** Toggle DRAG_ATTR on cell-content divs to show the range highlight via CSS. */
+        const applyDragAttrs = (range) => {
+            const wrapper = wrapperRef.current;
+            if (!wrapper)
+                return;
+            const minR = Math.min(range.startRow, range.endRow);
+            const maxR = Math.max(range.startRow, range.endRow);
+            const minC = Math.min(range.startCol, range.endCol);
+            const maxC = Math.max(range.startCol, range.endCol);
+            const cells = wrapper.querySelectorAll('[data-row-index][data-col-index]');
+            for (let i = 0; i < cells.length; i++) {
+                const el = cells[i];
+                const r = parseInt(el.getAttribute('data-row-index'), 10);
+                const c = parseInt(el.getAttribute('data-col-index'), 10) - colOff;
+                const inRange = r >= minR && r <= maxR && c >= minC && c <= maxC;
+                if (inRange) {
+                    if (!el.hasAttribute(DRAG_ATTR))
+                        el.setAttribute(DRAG_ATTR, '');
+                }
+                else {
+                    if (el.hasAttribute(DRAG_ATTR))
+                        el.removeAttribute(DRAG_ATTR);
+                }
+            }
+        };
+        const clearDragAttrs = () => {
+            const wrapper = wrapperRef.current;
+            if (!wrapper)
+                return;
+            const marked = wrapper.querySelectorAll(`[${DRAG_ATTR}]`);
+            for (let i = 0; i < marked.length; i++)
+                marked[i].removeAttribute(DRAG_ATTR);
+        };
+        /** Resolve mouse coordinates to a cell range (shared by RAF callback and mouseUp flush). */
+        const resolveRange = (cx, cy) => {
+            if (!dragStartRef.current)
+                return null;
+            const target = document.elementFromPoint(cx, cy);
+            const cell = target?.closest?.('[data-row-index][data-col-index]');
+            if (!cell)
+                return null;
+            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 < colOff)
+                return null;
+            const dataCol = c - colOff;
+            const start = dragStartRef.current;
+            return normalizeSelectionRange({
+                startRow: start.row,
+                startCol: start.col,
+                endRow: r,
+                endCol: dataCol,
+            });
+        };
+        /** Start or update auto-scroll interval based on mouse position relative to wrapper edges. */
+        const updateAutoScroll = () => {
+            const wrapper = wrapperRef.current;
+            const pos = lastMousePosRef.current;
+            if (!wrapper || !pos || !isDraggingRef.current) {
+                stopAutoScroll();
+                return;
+            }
+            const rect = wrapper.getBoundingClientRect();
+            let dx = 0;
+            let dy = 0;
+            if (pos.cy < rect.top + AUTO_SCROLL_EDGE) {
+                dy = -autoScrollSpeed(rect.top + AUTO_SCROLL_EDGE - pos.cy);
+            }
+            else if (pos.cy > rect.bottom - AUTO_SCROLL_EDGE) {
+                dy = autoScrollSpeed(pos.cy - (rect.bottom - AUTO_SCROLL_EDGE));
+            }
+            if (pos.cx < rect.left + AUTO_SCROLL_EDGE) {
+                dx = -autoScrollSpeed(rect.left + AUTO_SCROLL_EDGE - pos.cx);
+            }
+            else if (pos.cx > rect.right - AUTO_SCROLL_EDGE) {
+                dx = autoScrollSpeed(pos.cx - (rect.right - AUTO_SCROLL_EDGE));
+            }
+            if (dx === 0 && dy === 0) {
+                stopAutoScroll();
+                return;
+            }
+            // Start interval if not already running
+            if (!autoScrollRef.current) {
+                autoScrollRef.current = setInterval(() => {
+                    const w = wrapperRef.current;
+                    const p = lastMousePosRef.current;
+                    if (!w || !p || !isDraggingRef.current) {
+                        stopAutoScroll();
+                        return;
+                    }
+                    const r = w.getBoundingClientRect();
+                    let sdx = 0;
+                    let sdy = 0;
+                    if (p.cy < r.top + AUTO_SCROLL_EDGE)
+                        sdy = -autoScrollSpeed(r.top + AUTO_SCROLL_EDGE - p.cy);
+                    else if (p.cy > r.bottom - AUTO_SCROLL_EDGE)
+                        sdy = autoScrollSpeed(p.cy - (r.bottom - AUTO_SCROLL_EDGE));
+                    if (p.cx < r.left + AUTO_SCROLL_EDGE)
+                        sdx = -autoScrollSpeed(r.left + AUTO_SCROLL_EDGE - p.cx);
+                    else if (p.cx > r.right - AUTO_SCROLL_EDGE)
+                        sdx = autoScrollSpeed(p.cx - (r.right - AUTO_SCROLL_EDGE));
+                    if (sdx === 0 && sdy === 0) {
+                        stopAutoScroll();
+                        return;
+                    }
+                    w.scrollTop += sdy;
+                    w.scrollLeft += sdx;
+                    // After scrolling, re-resolve the cell under the mouse and update drag range
+                    const newRange = resolveRange(p.cx, p.cy);
+                    if (newRange) {
+                        liveDragRangeRef.current = newRange;
+                        applyDragAttrs(newRange);
+                    }
+                }, AUTO_SCROLL_INTERVAL);
+            }
+        };
+        const stopAutoScroll = () => {
+            if (autoScrollRef.current) {
+                clearInterval(autoScrollRef.current);
+                autoScrollRef.current = null;
+            }
+        };
+        const onMove = (e) => {
+            if (!isDraggingRef.current || !dragStartRef.current)
+                return;
+            // Promote to a real drag on first mousemove (deferred from mouseDown
+            // to avoid a true→false toggle on simple clicks).
+            if (!dragMovedRef.current) {
+                dragMovedRef.current = true;
+                setIsDragging(true);
+            }
+            // Always store latest position so mouseUp can flush if RAF hasn't executed
+            lastMousePosRef.current = { cx: e.clientX, cy: e.clientY };
+            // Update auto-scroll based on mouse proximity to edges
+            updateAutoScroll();
+            // Cancel previous pending frame
+            if (rafRef.current)
+                cancelAnimationFrame(rafRef.current);
+            rafRef.current = requestAnimationFrame(() => {
+                rafRef.current = 0;
+                const pos = lastMousePosRef.current;
+                if (!pos)
+                    return;
+                const newRange = resolveRange(pos.cx, pos.cy);
+                if (!newRange)
+                    return;
+                // Skip if range unchanged
+                const prev = liveDragRangeRef.current;
+                if (prev &&
+                    prev.startRow === newRange.startRow &&
+                    prev.startCol === newRange.startCol &&
+                    prev.endRow === newRange.endRow &&
+                    prev.endCol === newRange.endCol) {
+                    return;
+                }
+                liveDragRangeRef.current = newRange;
+                // DOM-only highlighting — no React state update until mouseup
+                applyDragAttrs(newRange);
+            });
+        };
+        const onUp = () => {
+            if (!isDraggingRef.current)
+                return;
+            stopAutoScroll();
+            if (rafRef.current) {
+                cancelAnimationFrame(rafRef.current);
+                rafRef.current = 0;
+            }
+            isDraggingRef.current = false;
+            const wasDrag = dragMovedRef.current;
+            if (wasDrag) {
+                // Flush: if the last RAF hasn't executed yet, resolve the range now from the
+                // last known mouse position so the final committed range is always accurate.
+                const pos = lastMousePosRef.current;
+                if (pos) {
+                    const flushed = resolveRange(pos.cx, pos.cy);
+                    if (flushed)
+                        liveDragRangeRef.current = flushed;
+                }
+                // Commit final range to React state (triggers a single re-render)
+                const finalRange = liveDragRangeRef.current;
+                if (finalRange) {
+                    setSelectionRange(finalRange);
+                    setActiveCell({
+                        rowIndex: finalRange.endRow,
+                        columnIndex: finalRange.endCol + colOff,
+                    });
+                }
+            }
+            // For simple clicks (no drag movement), mouseDown already set
+            // selectionRange + activeCell — skip redundant state updates.
+            // Clean up DOM attributes — React will apply CSS-module classes on the same paint
+            clearDragAttrs();
+            liveDragRangeRef.current = null;
+            lastMousePosRef.current = null;
+            dragStartRef.current = null;
+            if (wasDrag)
+                setIsDragging(false);
+        };
+        window.addEventListener('mousemove', onMove, true);
+        window.addEventListener('mouseup', onUp, true);
+        return () => {
+            window.removeEventListener('mousemove', onMove, true);
+            window.removeEventListener('mouseup', onUp, true);
+            if (rafRef.current)
+                cancelAnimationFrame(rafRef.current);
+            stopAutoScroll();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [colOffset, setActiveCell]); // wrapperRef excluded — refs are stable across renders
+    return {
+        selectionRange,
+        setSelectionRange,
+        handleCellMouseDown,
+        handleSelectAllCells,
+        isDragging,
+    };
+}

package/dist/esm/hooks/useClipboard.js

@@ -0,0 +1,161 @@
+import { useCallback, useRef, useState } from 'react';
+import { getCellValue, parseValue } from '../utils';
+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 { 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 = 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 = [];
+            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 raw = getCellValue(item, col);
+                const val = col.valueFormatter ? col.valueFormatter(raw, item) : raw;
+                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;
+        setCopyRange(norm);
+        void navigator.clipboard.writeText(tsv).catch(() => { });
+    }, [getEffectiveRange, itemsRef, visibleColsRef]);
+    const handleCut = useCallback(() => {
+        if (editableRef.current === false)
+            return;
+        const range = getEffectiveRange();
+        if (range == null || onCellValueChangedRef.current == null)
+            return;
+        const norm = normalizeSelectionRange(range);
+        cutRangeRef.current = norm;
+        setCutRange(norm);
+        setCopyRange(null);
+        handleCopy();
+        // handleCopy sets copyRange — override it back since this is a cut
+        setCopyRange(null);
+    }, [getEffectiveRange, handleCopy, editableRef, onCellValueChangedRef]);
+    const handlePaste = useCallback(async () => {
+        if (editableRef.current === false)
+            return;
+        const onCellValueChanged = onCellValueChangedRef.current;
+        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 = 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++) {
+            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 colEditable = col.editable === true ||
+                    (typeof col.editable === 'function' && col.editable(item));
+                if (!colEditable)
+                    continue;
+                const rawValue = cells[c] ?? '';
+                const oldValue = getCellValue(item, col);
+                const result = parseValue(rawValue, oldValue, item, col);
+                if (!result.valid)
+                    continue;
+                onCellValueChanged({
+                    item,
+                    columnId: col.columnId,
+                    oldValue,
+                    newValue: result.value,
+                    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 colEditable = col.editable === true ||
+                        (typeof col.editable === 'function' && col.editable(item));
+                    if (!colEditable)
+                        continue;
+                    const oldValue = getCellValue(item, col);
+                    const result = parseValue('', oldValue, item, col);
+                    if (!result.valid)
+                        continue;
+                    onCellValueChanged({
+                        item,
+                        columnId: col.columnId,
+                        oldValue,
+                        newValue: result.value,
+                        rowIndex: r,
+                    });
+                }
+            }
+            cutRangeRef.current = null;
+            setCutRange(null);
+        }
+        endBatch?.();
+        setCopyRange(null);
+    }, [getEffectiveRange, itemsRef, visibleColsRef, editableRef, onCellValueChangedRef, beginBatch, endBatch]);
+    const clearClipboardRanges = useCallback(() => {
+        setCopyRange(null);
+        setCutRange(null);
+        cutRangeRef.current = null;
+    }, []);
+    return { handleCopy, handleCut, handlePaste, cutRangeRef, cutRange, copyRange, clearClipboardRanges };
+}

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,
+    };
+}