@alaarab/ogrid-react 2.1.2 → 2.1.4

package/dist/esm/hooks/useColumnHeaderFilterState.js

@@ -1,191 +0,0 @@
-/**
- * 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 { 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;
-    // Shared state
-    const headerRef = useRef(null);
-    const popoverRef = useRef(null);
-    const [isFilterOpen, setFilterOpen] = useState(false);
-    const [popoverPosition, setPopoverPosition] = useState(null);
-    // 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) {
-            setPopoverPosition(null);
-        }
-    }, [isFilterOpen]);
-    // 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]);
-    // Shared handlers
-    const handleFilterIconClick = useCallback((e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        setFilterOpen((prev) => {
-            if (!prev && headerRef.current) {
-                const rect = headerRef.current.getBoundingClientRect();
-                setPopoverPosition({ top: rect.bottom + 4, left: rect.left });
-            }
-            return !prev;
-        });
-    }, []);
-    const handleSortClick = useCallback((e) => {
-        e.stopPropagation();
-        onSort?.();
-    }, [onSort]);
-    // Destructure stable callbacks from sub-hooks before using as deps
-    const { handleApplyMultiSelect: _applyMultiSelect } = multiSelectFilterState;
-    const { handleTextApply: _textApply, handleTextClear: _textClear } = textFilterState;
-    const { handleUserSelect: _userSelect, handleClearUser: _clearUser } = peopleFilterState;
-    const { handleDateApply: _dateApply } = dateFilterState;
-    // Wrap sub-hook handlers to close popover
-    const handleApplyMultiSelect = useCallback(() => {
-        _applyMultiSelect();
-        setFilterOpen(false);
-    }, [_applyMultiSelect]);
-    const handleTextApply = useCallback(() => {
-        _textApply();
-        setFilterOpen(false);
-    }, [_textApply]);
-    // Clear immediately commits an empty value and closes the popover (no 2-step clear required)
-    const handleTextClear = useCallback(() => {
-        _textClear();
-        onTextChange?.('');
-        setFilterOpen(false);
-    }, [_textClear, onTextChange]);
-    const handleUserSelect = useCallback((user) => {
-        _userSelect(user);
-        setFilterOpen(false);
-    }, [_userSelect]);
-    const handleClearUser = useCallback(() => {
-        _clearUser();
-        setFilterOpen(false);
-    }, [_clearUser]);
-    const handleDateApply = useCallback(() => {
-        _dateApply();
-        setFilterOpen(false);
-    }, [_dateApply]);
-    // Event propagation stoppers
-    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();
-    }, []);
-    // Compute hasActiveFilter from all sub-hooks
-    const hasActiveFilter = useMemo(() => {
-        if (filterType === 'multiSelect')
-            return safeSelectedValues.length > 0;
-        if (filterType === 'text')
-            return !!textValue.trim();
-        if (filterType === 'people')
-            return !!selectedUser;
-        if (filterType === 'date')
-            return !!(dateValue?.from || dateValue?.to);
-        return false;
-    }, [filterType, safeSelectedValues, textValue, selectedUser, dateValue]);
-    return {
-        headerRef,
-        popoverRef,
-        peopleInputRef: peopleFilterState.peopleInputRef,
-        isFilterOpen,
-        setFilterOpen,
-        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,
-            handleUserSelect,
-            handleClearUser,
-            handleDateApply,
-            handleDateClear: dateFilterState.handleDateClear,
-            handleCheckboxChange: multiSelectFilterState.handleCheckboxChange,
-            handleSelectAll: multiSelectFilterState.handleSelectAll,
-            handleClearSelection: multiSelectFilterState.handleClearSelection,
-            handlePopoverClick,
-            handleInputFocus,
-            handleInputMouseDown,
-            handleInputClick,
-            handleInputKeyDown,
-            handleSortClick,
-        },
-    };
-}

package/dist/esm/hooks/useColumnHeaderMenuState.js

@@ -1,106 +0,0 @@
-import { useState, useCallback } from 'react';
-import { measureColumnContentWidth } from '../utils';
-/**
- * Manages state for the column header menu (pin, sort, autosize actions).
- * Tracks which column's menu is open, anchor element, and action handlers.
- */
-export function useColumnHeaderMenuState(params) {
-    const { pinnedColumns, onPinColumn, onUnpinColumn, sortBy, sortDirection, onColumnSort, onColumnResized, onAutosizeColumn, columns, } = params;
-    const [isOpen, setIsOpen] = useState(false);
-    const [openForColumn, setOpenForColumn] = useState(null);
-    const [anchorElement, setAnchorElement] = useState(null);
-    const open = useCallback((columnId, anchorEl) => {
-        setOpenForColumn(columnId);
-        setAnchorElement(anchorEl);
-        setIsOpen(true);
-    }, []);
-    const close = useCallback(() => {
-        setIsOpen(false);
-        setOpenForColumn(null);
-        setAnchorElement(null);
-    }, []);
-    const currentPinState = openForColumn ? pinnedColumns[openForColumn] : undefined;
-    const canPinLeft = currentPinState !== 'left';
-    const canPinRight = currentPinState !== 'right';
-    const canUnpin = !!currentPinState;
-    const currentColumn = columns.find((c) => c.columnId === openForColumn);
-    const currentSort = openForColumn === sortBy ? sortDirection : null;
-    const isSortable = currentColumn?.sortable !== false;
-    const isResizable = currentColumn?.resizable !== false;
-    const handlePinLeft = useCallback(() => {
-        if (openForColumn && canPinLeft) {
-            onPinColumn(openForColumn, 'left');
-            close();
-        }
-    }, [openForColumn, canPinLeft, onPinColumn, close]);
-    const handlePinRight = useCallback(() => {
-        if (openForColumn && canPinRight) {
-            onPinColumn(openForColumn, 'right');
-            close();
-        }
-    }, [openForColumn, canPinRight, onPinColumn, close]);
-    const handleUnpin = useCallback(() => {
-        if (openForColumn && canUnpin) {
-            onUnpinColumn(openForColumn);
-            close();
-        }
-    }, [openForColumn, canUnpin, onUnpinColumn, close]);
-    const handleSortAsc = useCallback(() => {
-        if (openForColumn && isSortable) {
-            onColumnSort(openForColumn, 'asc');
-            close();
-        }
-    }, [openForColumn, isSortable, onColumnSort, close]);
-    const handleSortDesc = useCallback(() => {
-        if (openForColumn && isSortable) {
-            onColumnSort(openForColumn, 'desc');
-            close();
-        }
-    }, [openForColumn, isSortable, onColumnSort, close]);
-    const handleClearSort = useCallback(() => {
-        if (openForColumn && isSortable) {
-            onColumnSort(openForColumn, null);
-            close();
-        }
-    }, [openForColumn, isSortable, onColumnSort, close]);
-    const handleAutosizeThis = useCallback(() => {
-        const resizer = onAutosizeColumn ?? onColumnResized;
-        if (!openForColumn || !resizer || !isResizable)
-            return;
-        const col = columns.find((c) => c.columnId === openForColumn);
-        resizer(openForColumn, measureColumnContentWidth(openForColumn, col?.minWidth));
-        close();
-    }, [openForColumn, onAutosizeColumn, onColumnResized, isResizable, columns, close]);
-    const handleAutosizeAll = useCallback(() => {
-        const resizer = onAutosizeColumn ?? onColumnResized;
-        if (!resizer)
-            return;
-        columns.forEach((col) => {
-            if (col.resizable === false)
-                return;
-            resizer(col.columnId, measureColumnContentWidth(col.columnId, col.minWidth));
-        });
-        close();
-    }, [columns, onAutosizeColumn, onColumnResized, close]);
-    return {
-        isOpen,
-        openForColumn,
-        anchorElement,
-        open,
-        close,
-        handlePinLeft,
-        handlePinRight,
-        handleUnpin,
-        handleSortAsc,
-        handleSortDesc,
-        handleClearSort,
-        handleAutosizeThis,
-        handleAutosizeAll,
-        canPinLeft,
-        canPinRight,
-        canUnpin,
-        currentSort,
-        isSortable,
-        isResizable,
-    };
-}

package/dist/esm/hooks/useColumnMeta.js

@@ -1,61 +0,0 @@
-/**
- * Shared hook that pre-computes per-column styles and class names for DataGridTable.
- * Extracted from Radix/Fluent/Material DataGridTable to avoid duplication.
- *
- * @param params.addStickyPosition - When true, adds `position: 'sticky'` inline for pinned columns.
- *   This is needed by Fluent UI whose `TableCell` injects atomic `position: relative` via CSS-in-JS,
- *   overriding the shared `.pinnedColLeft { position: sticky }` class. Radix/Material don't need it.
- */
-import { useMemo } from 'react';
-import { DEFAULT_MIN_COLUMN_WIDTH } from '@alaarab/ogrid-core';
-/**
- * Computes per-column styles and class names once per render, avoiding per-cell object creation.
- */
-export function useColumnMeta(params) {
-    const { visibleCols, getColumnWidth, columnSizingOverrides, measuredColumnWidths, pinnedColumns, leftOffsets, rightOffsets, pinnedColLeftClass, pinnedColRightClass, addStickyPosition = false, } = params;
-    return useMemo(() => {
-        const cellStyles = {};
-        const cellClasses = {};
-        const hdrStyles = {};
-        const hdrClasses = {};
-        for (let i = 0; i < visibleCols.length; i++) {
-            const col = visibleCols[i];
-            const columnWidth = getColumnWidth(col);
-            const hasExplicitWidth = !!(columnSizingOverrides[col.columnId] || col.idealWidth != null || col.defaultWidth != null);
-            const isPinnedLeft = pinnedColumns[col.columnId] === 'left';
-            const isPinnedRight = pinnedColumns[col.columnId] === 'right';
-            const isPinned = isPinnedLeft || isPinnedRight;
-            const hasResizeOverride = !!columnSizingOverrides[col.columnId];
-            const measuredW = measuredColumnWidths[col.columnId];
-            const baseMinWidth = col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
-            const effectiveMinWidth = hasResizeOverride ? columnWidth : Math.max(baseMinWidth, measuredW ?? 0);
-            const stickyOverride = addStickyPosition && isPinned ? { position: 'sticky' } : undefined;
-            cellStyles[col.columnId] = {
-                minWidth: effectiveMinWidth,
-                width: hasExplicitWidth ? columnWidth : undefined,
-                maxWidth: hasExplicitWidth ? columnWidth : undefined,
-                textAlign: col.type === 'numeric' ? 'right' : col.type === 'boolean' ? 'center' : undefined,
-                ...stickyOverride,
-                ...(isPinnedLeft && leftOffsets[col.columnId] != null ? { left: leftOffsets[col.columnId] } : undefined),
-                ...(isPinnedRight && rightOffsets[col.columnId] != null ? { right: rightOffsets[col.columnId] } : undefined),
-            };
-            hdrStyles[col.columnId] = {
-                minWidth: effectiveMinWidth,
-                width: hasExplicitWidth ? columnWidth : undefined,
-                maxWidth: hasExplicitWidth ? columnWidth : undefined,
-                ...stickyOverride,
-                ...(isPinnedLeft && leftOffsets[col.columnId] != null ? { left: leftOffsets[col.columnId] } : undefined),
-                ...(isPinnedRight && rightOffsets[col.columnId] != null ? { right: rightOffsets[col.columnId] } : undefined),
-            };
-            const parts = [];
-            if (isPinnedLeft)
-                parts.push(pinnedColLeftClass);
-            if (isPinnedRight)
-                parts.push(pinnedColRightClass);
-            const cn = parts.join(' ');
-            cellClasses[col.columnId] = cn;
-            hdrClasses[col.columnId] = cn;
-        }
-        return { cellStyles, cellClasses, hdrStyles, hdrClasses };
-    }, [visibleCols, getColumnWidth, columnSizingOverrides, measuredColumnWidths, pinnedColumns, leftOffsets, rightOffsets, pinnedColLeftClass, pinnedColRightClass, addStickyPosition]);
-}

package/dist/esm/hooks/useColumnPinning.js

@@ -1,67 +0,0 @@
-import { useState, useCallback } from 'react';
-/**
- * Manages column pinning state (left/right sticky positioning).
- * Supports controlled and uncontrolled modes.
- * Initializes from column.pinned definitions and pinnedColumns prop.
- */
-export function useColumnPinning(params) {
-    const { columns, pinnedColumns: controlledPinnedColumns, onColumnPinned } = params;
-    // Initialize internal state from column.pinned definitions (mount only)
-    const [internalPinnedColumns, setInternalPinnedColumns] = useState(() => {
-        const initial = {};
-        for (const col of columns) {
-            if (col.pinned) {
-                initial[col.columnId] = col.pinned;
-            }
-        }
-        return initial;
-    });
-    // Use controlled state if provided, otherwise internal
-    const pinnedColumns = controlledPinnedColumns ?? internalPinnedColumns;
-    const pinColumn = useCallback((columnId, side) => {
-        const next = { ...pinnedColumns, [columnId]: side };
-        if (!controlledPinnedColumns)
-            setInternalPinnedColumns(next);
-        onColumnPinned?.(columnId, side);
-    }, [pinnedColumns, controlledPinnedColumns, onColumnPinned]);
-    const unpinColumn = useCallback((columnId) => {
-        const { [columnId]: _, ...next } = pinnedColumns;
-        if (!controlledPinnedColumns)
-            setInternalPinnedColumns(next);
-        onColumnPinned?.(columnId, null);
-    }, [pinnedColumns, controlledPinnedColumns, onColumnPinned]);
-    const isPinned = useCallback((columnId) => {
-        return pinnedColumns[columnId];
-    }, [pinnedColumns]);
-    const computeLeftOffsets = useCallback((visibleCols, columnWidths, defaultWidth, hasCheckboxColumn, checkboxColumnWidth) => {
-        const offsets = {};
-        let left = hasCheckboxColumn ? checkboxColumnWidth : 0;
-        for (const col of visibleCols) {
-            if (pinnedColumns[col.columnId] === 'left') {
-                offsets[col.columnId] = left;
-                left += columnWidths[col.columnId] ?? defaultWidth;
-            }
-        }
-        return offsets;
-    }, [pinnedColumns]);
-    const computeRightOffsets = useCallback((visibleCols, columnWidths, defaultWidth) => {
-        const offsets = {};
-        let right = 0;
-        for (let i = visibleCols.length - 1; i >= 0; i--) {
-            const col = visibleCols[i];
-            if (pinnedColumns[col.columnId] === 'right') {
-                offsets[col.columnId] = right;
-                right += columnWidths[col.columnId] ?? defaultWidth;
-            }
-        }
-        return offsets;
-    }, [pinnedColumns]);
-    return {
-        pinnedColumns,
-        pinColumn,
-        unpinColumn,
-        isPinned,
-        computeLeftOffsets,
-        computeRightOffsets,
-    };
-}

package/dist/esm/hooks/useColumnReorder.js

@@ -1,143 +0,0 @@
-import { useState, useCallback, useRef, useEffect } from 'react';
-import { calculateDropTarget, reorderColumnArray, getPinStateForColumn, } from '@alaarab/ogrid-core';
-/** Width of the resize handle zone on the right edge of each header cell. */
-const RESIZE_HANDLE_ZONE = 8;
-/**
- * Convert Record<string, 'left' | 'right'> to the { left?, right? } shape core expects.
- */
-function toPinnedColumnsShape(pinned) {
-    if (!pinned)
-        return undefined;
-    const left = [];
-    const right = [];
-    for (const [id, side] of Object.entries(pinned)) {
-        if (side === 'left')
-            left.push(id);
-        else if (side === 'right')
-            right.push(id);
-    }
-    if (left.length === 0 && right.length === 0)
-        return undefined;
-    return {
-        ...(left.length > 0 ? { left } : {}),
-        ...(right.length > 0 ? { right } : {}),
-    };
-}
-/**
- * Manages column reorder drag interactions with RAF-throttled updates.
- * @param params - Columns, order, change callback, enabled flag, and wrapper ref.
- * @returns Drag state and mousedown handler for header cells.
- */
-export function useColumnReorder(params) {
-    const { columns, columnOrder, onColumnOrderChange, enabled = true, pinnedColumns, wrapperRef, } = params;
-    const [isDragging, setIsDragging] = useState(false);
-    const [dropIndicatorX, setDropIndicatorX] = useState(null);
-    const rafRef = useRef(0);
-    // Refs for latest values so the window listeners capture current state
-    const columnsRef = useRef(columns);
-    columnsRef.current = columns;
-    const columnOrderRef = useRef(columnOrder);
-    columnOrderRef.current = columnOrder;
-    const onColumnOrderChangeRef = useRef(onColumnOrderChange);
-    onColumnOrderChangeRef.current = onColumnOrderChange;
-    const pinnedColumnsRef = useRef(pinnedColumns);
-    pinnedColumnsRef.current = pinnedColumns;
-    // Track active drag state for cleanup on unmount
-    const cleanupRef = useRef(null);
-    useEffect(() => {
-        return () => {
-            if (cleanupRef.current) {
-                cleanupRef.current();
-                cleanupRef.current = null;
-            }
-        };
-    }, []);
-    const handleHeaderMouseDown = useCallback((columnId, event) => {
-        if (!enabled)
-            return;
-        if (!onColumnOrderChangeRef.current)
-            return;
-        // Gate on left-click only
-        if (event.button !== 0)
-            return;
-        // Skip if in resize handle zone (right 8px of the header cell)
-        const target = event.currentTarget;
-        const rect = target.getBoundingClientRect();
-        if (event.clientX > rect.right - RESIZE_HANDLE_ZONE)
-            return;
-        // Skip column groups — only reorder leaf columns
-        const cols = columnsRef.current;
-        const colIndex = cols.findIndex((c) => c.columnId === columnId);
-        if (colIndex === -1)
-            return;
-        event.preventDefault();
-        const startX = event.clientX;
-        let hasMoved = false;
-        let latestDropTargetIndex = null;
-        // Determine pin state of the dragged column
-        const pinnedShape = toPinnedColumnsShape(pinnedColumnsRef.current);
-        const draggedPinState = getPinStateForColumn(columnId, pinnedShape);
-        // Lock text selection and set grabbing cursor during drag
-        const prevUserSelect = document.body.style.userSelect;
-        const prevCursor = document.body.style.cursor;
-        document.body.style.userSelect = 'none';
-        document.body.style.cursor = 'grabbing';
-        const onMove = (moveEvent) => {
-            // Require a small minimum drag distance before activating
-            if (!hasMoved && Math.abs(moveEvent.clientX - startX) < 5)
-                return;
-            if (!hasMoved) {
-                hasMoved = true;
-                setIsDragging(true);
-            }
-            if (rafRef.current)
-                cancelAnimationFrame(rafRef.current);
-            rafRef.current = requestAnimationFrame(() => {
-                rafRef.current = 0;
-                const wrapper = wrapperRef.current;
-                if (!wrapper)
-                    return;
-                const currentOrder = columnOrderRef.current ?? columnsRef.current.map((c) => c.columnId);
-                const result = calculateDropTarget({
-                    mouseX: moveEvent.clientX,
-                    columnOrder: currentOrder,
-                    draggedColumnId: columnId,
-                    draggedPinState,
-                    tableElement: wrapper,
-                    pinnedColumns: pinnedShape,
-                });
-                if (result) {
-                    latestDropTargetIndex = result.targetIndex;
-                    setDropIndicatorX(result.indicatorX);
-                }
-            });
-        };
-        const cleanup = () => {
-            window.removeEventListener('mousemove', onMove, true);
-            window.removeEventListener('mouseup', onUp, true);
-            cleanupRef.current = null;
-            // Restore user-select and cursor
-            document.body.style.userSelect = prevUserSelect;
-            document.body.style.cursor = prevCursor;
-            // Cancel pending RAF
-            if (rafRef.current) {
-                cancelAnimationFrame(rafRef.current);
-                rafRef.current = 0;
-            }
-        };
-        const onUp = () => {
-            cleanup();
-            if (hasMoved && latestDropTargetIndex != null) {
-                const currentOrder = columnOrderRef.current ?? columnsRef.current.map((c) => c.columnId);
-                const newOrder = reorderColumnArray(currentOrder, columnId, latestDropTargetIndex);
-                onColumnOrderChangeRef.current?.(newOrder);
-            }
-            setIsDragging(false);
-            setDropIndicatorX(null);
-        };
-        window.addEventListener('mousemove', onMove, true);
-        window.addEventListener('mouseup', onUp, true);
-        cleanupRef.current = cleanup;
-    }, [enabled, wrapperRef]);
-    return { isDragging, dropIndicatorX, handleHeaderMouseDown };
-}