@alaarab/ogrid-core 1.9.0 → 2.0.0

package/dist/esm/hooks/useFillHandle.js

@@ -1,196 +0,0 @@
-import { useState, useCallback, useRef, useEffect } from 'react';
-import { normalizeSelectionRange } from '../types';
-import { getCellValue } from '../utils';
-import { parseValue } from '../utils/valueParsers';
-/** DOM attribute name for fill-drag range highlighting (same as cell selection drag). */
-const DRAG_ATTR = 'data-drag-range';
-/**
- * Manages Excel-style fill handle drag-to-fill for cell ranges.
- * @param params - Items, columns, selection range, editability, and value change callback.
- * @returns Fill drag state, setter, and mousedown handler for the fill handle.
- */
-export function useFillHandle(params) {
-    const { items, visibleCols, editable, onCellValueChanged, selectionRange, setSelectionRange, setActiveCell, colOffset, wrapperRef, beginBatch, endBatch, } = params;
-    const [fillDrag, setFillDrag] = useState(null);
-    const fillDragEndRef = useRef({ endRow: 0, endCol: 0 });
-    const rafRef = useRef(0);
-    const liveFillRangeRef = useRef(null);
-    useEffect(() => {
-        if (!fillDrag || editable === false || !onCellValueChanged || !wrapperRef.current)
-            return;
-        fillDragEndRef.current = { endRow: fillDrag.startRow, endCol: fillDrag.startCol };
-        liveFillRangeRef.current = null;
-        const colOff = colOffset;
-        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);
-        };
-        let lastFillMousePos = null;
-        const resolveRange = (cx, cy) => {
-            const target = document.elementFromPoint(cx, cy);
-            const cell = target?.closest?.('[data-row-index][data-col-index]');
-            if (!cell || !wrapperRef.current?.contains(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;
-            return normalizeSelectionRange({
-                startRow: fillDrag.startRow,
-                startCol: fillDrag.startCol,
-                endRow: r,
-                endCol: dataCol,
-            });
-        };
-        const onMove = (e) => {
-            lastFillMousePos = { cx: e.clientX, cy: e.clientY };
-            if (rafRef.current)
-                cancelAnimationFrame(rafRef.current);
-            rafRef.current = requestAnimationFrame(() => {
-                rafRef.current = 0;
-                if (!lastFillMousePos)
-                    return;
-                const newRange = resolveRange(lastFillMousePos.cx, lastFillMousePos.cy);
-                if (!newRange)
-                    return;
-                // Skip if unchanged
-                const prev = liveFillRangeRef.current;
-                if (prev &&
-                    prev.startRow === newRange.startRow &&
-                    prev.startCol === newRange.startCol &&
-                    prev.endRow === newRange.endRow &&
-                    prev.endCol === newRange.endCol) {
-                    return;
-                }
-                liveFillRangeRef.current = newRange;
-                fillDragEndRef.current = { endRow: newRange.endRow, endCol: newRange.endCol };
-                applyDragAttrs(newRange);
-            });
-        };
-        const onUp = () => {
-            if (rafRef.current) {
-                cancelAnimationFrame(rafRef.current);
-                rafRef.current = 0;
-            }
-            // Flush: resolve final position if RAF hasn't executed yet
-            if (lastFillMousePos) {
-                const flushed = resolveRange(lastFillMousePos.cx, lastFillMousePos.cy);
-                if (flushed) {
-                    liveFillRangeRef.current = flushed;
-                    fillDragEndRef.current = { endRow: flushed.endRow, endCol: flushed.endCol };
-                }
-            }
-            clearDragAttrs();
-            const end = fillDragEndRef.current;
-            const norm = normalizeSelectionRange({
-                startRow: fillDrag.startRow,
-                startCol: fillDrag.startCol,
-                endRow: end.endRow,
-                endCol: end.endCol,
-            });
-            // Commit range to React state
-            setSelectionRange(norm);
-            setActiveCell({ rowIndex: end.endRow, columnIndex: end.endCol + colOff });
-            // Apply fill values
-            const startItem = items[norm.startRow];
-            const startColDef = visibleCols[norm.startCol];
-            if (startItem && startColDef) {
-                const startValue = getCellValue(startItem, startColDef);
-                beginBatch?.();
-                for (let row = norm.startRow; row <= norm.endRow; row++) {
-                    for (let col = norm.startCol; col <= norm.endCol; col++) {
-                        if (row === fillDrag.startRow && col === fillDrag.startCol)
-                            continue;
-                        if (row >= items.length || col >= visibleCols.length)
-                            continue;
-                        const item = items[row];
-                        const colDef = visibleCols[col];
-                        const colEditable = colDef.editable === true ||
-                            (typeof colDef.editable === 'function' && colDef.editable(item));
-                        if (!colEditable)
-                            continue;
-                        const oldValue = getCellValue(item, colDef);
-                        const result = parseValue(startValue, oldValue, item, colDef);
-                        if (!result.valid)
-                            continue;
-                        onCellValueChanged({
-                            item,
-                            columnId: colDef.columnId,
-                            oldValue,
-                            newValue: result.value,
-                            rowIndex: row,
-                        });
-                    }
-                }
-                endBatch?.();
-            }
-            setFillDrag(null);
-            liveFillRangeRef.current = null;
-        };
-        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);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        fillDrag,
-        editable,
-        colOffset,
-        items,
-        visibleCols,
-        setSelectionRange,
-        setActiveCell,
-        onCellValueChanged,
-        // wrapperRef excluded — refs are stable across renders
-        beginBatch,
-        endBatch,
-    ]);
-    // Ref mirror — keeps handleFillHandleMouseDown stable across selection changes
-    const selectionRangeRef = useRef(selectionRange);
-    selectionRangeRef.current = selectionRange;
-    const handleFillHandleMouseDown = useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const range = selectionRangeRef.current;
-        if (!range)
-            return;
-        setFillDrag({
-            startRow: range.startRow,
-            startCol: range.startCol,
-        });
-    }, []);
-    return { fillDrag, setFillDrag, handleFillHandleMouseDown };
-}

package/dist/esm/hooks/useFilterOptions.js

@@ -1,40 +0,0 @@
-import { useState, useEffect, useCallback, useMemo } from 'react';
-/**
- * Load filter options for the given fields from a data source.
- *
- * Accepts `IDataSource<T>` or a plain `{ fetchFilterOptions }` object.
- */
-export function useFilterOptions(dataSource, fields) {
-    const [filterOptions, setFilterOptions] = useState({});
-    const [loadingOptions, setLoadingOptions] = useState({});
-    const fieldsKey = useMemo(() => [...fields].sort().join(','), [fields]);
-    const load = useCallback(async () => {
-        const fetcher = 'fetchFilterOptions' in dataSource && typeof dataSource.fetchFilterOptions === 'function'
-            ? dataSource.fetchFilterOptions.bind(dataSource)
-            : undefined;
-        if (!fetcher) {
-            setFilterOptions({});
-            setLoadingOptions({});
-            return;
-        }
-        const loading = {};
-        fields.forEach((f) => { loading[f] = true; });
-        setLoadingOptions(loading);
-        const results = {};
-        await Promise.all(fields.map(async (field) => {
-            try {
-                results[field] = await fetcher(field);
-            }
-            catch {
-                results[field] = [];
-            }
-        }));
-        setFilterOptions(results);
-        setLoadingOptions({});
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [dataSource, fieldsKey]);
-    useEffect(() => {
-        load().catch(() => { });
-    }, [load]);
-    return { filterOptions, loadingOptions };
-}

package/dist/esm/hooks/useInlineCellEditorState.js

@@ -1,44 +0,0 @@
-/**
- * Headless inline cell editor state for Fluent, Material, and Radix InlineCellEditor.
- * UI packages use this hook and render only the framework input (Input, TextField, select, Checkbox).
- */
-import { useState, useCallback } from 'react';
-/**
- * Returns localValue/setLocalValue (for text), handleKeyDown (Escape cancel, Enter commit for text),
- * handleBlur (commit on blur for text), commit(value), cancel(). UI renders only the input.
- */
-export function useInlineCellEditorState(params) {
-    const { value, editorType, onCommit, onCancel } = params;
-    const [localValue, setLocalValue] = useState(value !== null && value !== undefined ? String(value) : '');
-    const commit = useCallback((v) => {
-        onCommit(v);
-    }, [onCommit]);
-    const cancel = useCallback(() => {
-        onCancel();
-    }, [onCancel]);
-    const handleKeyDown = useCallback((e) => {
-        if (e.key === 'Escape') {
-            e.preventDefault();
-            e.stopPropagation(); // Don't let the grid handler clear selection on Escape
-            cancel();
-        }
-        if (e.key === 'Enter' && editorType === 'text') {
-            e.preventDefault();
-            e.stopPropagation(); // Don't let the grid handler re-open an editor
-            commit(localValue);
-        }
-    }, [cancel, commit, localValue, editorType]);
-    const handleBlur = useCallback(() => {
-        if (editorType === 'text') {
-            commit(localValue);
-        }
-    }, [editorType, localValue, commit]);
-    return {
-        localValue,
-        setLocalValue,
-        handleKeyDown,
-        handleBlur,
-        commit,
-        cancel,
-    };
-}