@alaarab/ogrid-react 2.1.2 → 2.1.4

package/dist/esm/hooks/useCellSelection.js

@@ -1,389 +0,0 @@
-import { useState, useCallback, useRef, useEffect } from 'react';
-import { normalizeSelectionRange } from '../types';
-import { rangesEqual, computeAutoScrollSpeed } from '../utils';
-import { useLatestRef } from './useLatestRef';
-/** DOM attribute names used for drag-range highlighting (bypasses React). */
-const DRAG_ATTR = 'data-drag-range';
-const DRAG_ANCHOR_ATTR = 'data-drag-anchor';
-/** Auto-scroll config */
-const AUTO_SCROLL_EDGE = 40; // px from wrapper edge to trigger
-const AUTO_SCROLL_INTERVAL = 16; // ~60fps
-/**
- * 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;
-    // Use ref for colOffset to prevent drag restart mid-drag when colOffset changes
-    const colOffsetRef = useLatestRef(colOffset);
-    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;
-        const colOff = colOffsetRef.current;
-        if (globalColIndex < colOff)
-            return;
-        // Prevent native text selection during cell drag
-        e.preventDefault();
-        const dataColIndex = globalColIndex - colOff;
-        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;
-            // Apply drag attrs immediately for the initial cell so the anchor styling shows
-            // even before the first mousemove. This ensures instant visual feedback.
-            setTimeout(() => applyDragAttrsRef.current?.(initial), 0);
-        }
-    }, [setActiveCell, colOffsetRef, setSelectionRange]);
-    const handleSelectAllCells = useCallback(() => {
-        if (rowCount === 0 || visibleColCount === 0)
-            return;
-        setSelectionRange({
-            startRow: 0,
-            startCol: 0,
-            endRow: rowCount - 1,
-            endCol: visibleColCount - 1,
-        });
-        setActiveCell({ rowIndex: 0, columnIndex: colOffsetRef.current });
-    }, [rowCount, visibleColCount, setActiveCell, colOffsetRef, setSelectionRange]);
-    /** Last known mouse position during drag — used by mouseUp to flush pending RAF work. */
-    const lastMousePosRef = useRef(null);
-    // Ref to expose applyDragAttrs outside useEffect so it can be called from mouseDown
-    const applyDragAttrsRef = 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(() => {
-        /** Set of currently drag-marked HTMLElements — avoids O(n) full DOM scan on each frame. */
-        const markedCells = new Set();
-        /** Cell lookup index built on drag start — O(1) lookups per frame instead of querySelectorAll. */
-        let cellIndex = null;
-        /** Build cell lookup index from a single querySelectorAll scan. */
-        const buildCellIndex = () => {
-            const wrapper = wrapperRef.current;
-            if (!wrapper)
-                return;
-            cellIndex = new Map();
-            const cells = wrapper.querySelectorAll('[data-row-index][data-col-index]');
-            for (let i = 0; i < cells.length; i++) {
-                const el = cells[i];
-                const r = el.getAttribute('data-row-index') ?? '';
-                const c = el.getAttribute('data-col-index') ?? '';
-                cellIndex.set(`${r},${c}`, el);
-            }
-        };
-        /** Apply styling to a single in-range cell (attrs + box-shadow). */
-        const styleCellInRange = (el, r, c, minR, maxR, minC, maxC, anchor) => {
-            if (!el.hasAttribute(DRAG_ATTR))
-                el.setAttribute(DRAG_ATTR, '');
-            const isAnchor = anchor && r === anchor.row && c === anchor.col;
-            if (isAnchor) {
-                if (!el.hasAttribute(DRAG_ANCHOR_ATTR))
-                    el.setAttribute(DRAG_ANCHOR_ATTR, '');
-            }
-            else {
-                if (el.hasAttribute(DRAG_ANCHOR_ATTR))
-                    el.removeAttribute(DRAG_ANCHOR_ATTR);
-            }
-            const shadows = [];
-            if (r === minR)
-                shadows.push('inset 0 2px 0 0 var(--ogrid-selection, #217346)');
-            if (r === maxR)
-                shadows.push('inset 0 -2px 0 0 var(--ogrid-selection, #217346)');
-            if (c === minC)
-                shadows.push('inset 2px 0 0 0 var(--ogrid-selection, #217346)');
-            if (c === maxC)
-                shadows.push('inset -2px 0 0 0 var(--ogrid-selection, #217346)');
-            el.style.boxShadow = shadows.length > 0 ? shadows.join(', ') : '';
-            markedCells.add(el);
-        };
-        /** Remove drag styling from a single cell. */
-        const unstyleCell = (el) => {
-            el.removeAttribute(DRAG_ATTR);
-            el.removeAttribute(DRAG_ANCHOR_ATTR);
-            el.style.boxShadow = '';
-        };
-        /** Toggle DRAG_ATTR on cells to show the range highlight via CSS.
-         *  Uses a cell index Map for O(1) lookups per cell in the range instead of scanning all cells.
-         *  Also sets edge box-shadows for a green border around the selection range,
-         *  and marks the anchor cell with DRAG_ANCHOR_ATTR (white background). */
-        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 anchor = dragStartRef.current;
-            const colOff = colOffsetRef.current;
-            // 1. Un-mark cells that are no longer in the new range (iterate the small set, not all DOM)
-            for (const el of markedCells) {
-                const r = parseInt(el.getAttribute('data-row-index') ?? '', 10);
-                const c = parseInt(el.getAttribute('data-col-index') ?? '', 10) - colOff;
-                const stillInRange = r >= minR && r <= maxR && c >= minC && c <= maxC;
-                if (!stillInRange) {
-                    unstyleCell(el);
-                    markedCells.delete(el);
-                }
-            }
-            // Build index on first call if not yet initialized
-            if (!cellIndex)
-                buildCellIndex();
-            // 2. Look up only the cells in the new range — O(range size) via Map lookup.
-            for (let r = minR; r <= maxR; r++) {
-                for (let c = minC; c <= maxC; c++) {
-                    const key = `${r},${c + colOff}`;
-                    let el = cellIndex?.get(key);
-                    // Handle virtual scroll recycling — if element is stale, rebuild index once
-                    if (el && !el.isConnected) {
-                        buildCellIndex();
-                        el = cellIndex?.get(key);
-                    }
-                    if (el) {
-                        styleCellInRange(el, r, c, minR, maxR, minC, maxC, anchor);
-                    }
-                }
-            }
-        };
-        // Expose applyDragAttrs via ref so mouseDown can access it
-        applyDragAttrsRef.current = applyDragAttrs;
-        /** Clear all drag styling using the tracked set — O(marked) not O(all cells). */
-        const clearDragAttrs = () => {
-            for (const el of markedCells) {
-                unstyleCell(el);
-            }
-            markedCells.clear();
-            cellIndex = null;
-        };
-        /** 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);
-            const colOff = colOffsetRef.current;
-            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 = -computeAutoScrollSpeed(rect.top + AUTO_SCROLL_EDGE - pos.cy);
-            }
-            else if (pos.cy > rect.bottom - AUTO_SCROLL_EDGE) {
-                dy = computeAutoScrollSpeed(pos.cy - (rect.bottom - AUTO_SCROLL_EDGE));
-            }
-            if (pos.cx < rect.left + AUTO_SCROLL_EDGE) {
-                dx = -computeAutoScrollSpeed(rect.left + AUTO_SCROLL_EDGE - pos.cx);
-            }
-            else if (pos.cx > rect.right - AUTO_SCROLL_EDGE) {
-                dx = computeAutoScrollSpeed(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 = -computeAutoScrollSpeed(r.top + AUTO_SCROLL_EDGE - p.cy);
-                    else if (p.cy > r.bottom - AUTO_SCROLL_EDGE)
-                        sdy = computeAutoScrollSpeed(p.cy - (r.bottom - AUTO_SCROLL_EDGE));
-                    if (p.cx < r.left + AUTO_SCROLL_EDGE)
-                        sdx = -computeAutoScrollSpeed(r.left + AUTO_SCROLL_EDGE - p.cx);
-                    else if (p.cx > r.right - AUTO_SCROLL_EDGE)
-                        sdx = computeAutoScrollSpeed(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);
-                // Build cell index once at drag start for O(1) lookups during drag
-                buildCellIndex();
-            }
-            // 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 + colOffsetRef.current,
-                    });
-                }
-            }
-            // 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();
-        };
-    }, [setActiveCell, colOffsetRef, setSelectionRange, wrapperRef]);
-    return {
-        selectionRange,
-        setSelectionRange,
-        handleCellMouseDown,
-        handleSelectAllCells,
-        isDragging,
-    };
-}

package/dist/esm/hooks/useClipboard.js

@@ -1,106 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { formatSelectionAsTsv, parseTsvClipboard, applyPastedValues, applyCutClear } 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);
-    /** Guard against async clipboard reads completing after unmount. */
-    const isMountedRef = useRef(true);
-    useEffect(() => () => { isMountedRef.current = false; }, []);
-    /** 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 tsv = formatSelectionAsTsv(itemsRef.current, visibleColsRef.current, norm);
-        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 = '';
-        }
-        // Bail out if component unmounted during async clipboard read
-        if (!isMountedRef.current)
-            return;
-        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 parsedRows = parseTsvClipboard(text);
-        beginBatch?.();
-        const pasteEvents = applyPastedValues(parsedRows, anchorRow, anchorCol, items, visibleCols);
-        for (const evt of pasteEvents)
-            onCellValueChanged(evt);
-        if (cutRangeRef.current) {
-            const cutEvents = applyCutClear(cutRangeRef.current, items, visibleCols);
-            for (const evt of cutEvents)
-                onCellValueChanged(evt);
-            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, cutRange, copyRange, clearClipboardRanges };
-}

package/dist/esm/hooks/useColumnChooserState.js

@@ -1,74 +0,0 @@
-/**
- * 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, onSetVisibleColumns } = 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(() => {
-        if (onSetVisibleColumns) {
-            onSetVisibleColumns(new Set(columns.map((col) => col.columnId)));
-        }
-        else {
-            columns.forEach((col) => {
-                if (!visibleColumns.has(col.columnId)) {
-                    onVisibilityChange(col.columnId, true);
-                }
-            });
-        }
-    }, [columns, visibleColumns, onVisibilityChange, onSetVisibleColumns]);
-    const handleClearAll = useCallback(() => {
-        if (onSetVisibleColumns) {
-            // Keep required columns visible
-            const required = new Set(columns.filter((col) => col.required).map((col) => col.columnId));
-            onSetVisibleColumns(required);
-        }
-        else {
-            columns.forEach((col) => {
-                if (!col.required && visibleColumns.has(col.columnId)) {
-                    onVisibilityChange(col.columnId, false);
-                }
-            });
-        }
-    }, [columns, visibleColumns, onVisibilityChange, onSetVisibleColumns]);
-    const visibleCount = visibleColumns.size;
-    const totalCount = columns.length;
-    return {
-        open,
-        setOpen,
-        handleToggle,
-        handleClose,
-        handleCheckboxChange,
-        handleSelectAll,
-        handleClearAll,
-        visibleCount,
-        totalCount,
-    };
-}