@alaarab/ogrid-react 2.1.3 → 2.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "description": "OGrid React – React hooks, headless components, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -9,11 +9,14 @@
     ".": {
       "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.js",
-      "require": "./dist/esm/index.js"
+      "default": "./dist/esm/index.js"
+    },
+    "./testing": {
+      "types": "./dist/types/testing/index.d.ts"
     }
   },
   "scripts": {
-    "build": "rimraf dist && tsc -p tsconfig.build.json",
+    "build": "rimraf dist && tsup && tsc -p tsconfig.build.json",
     "test": "jest"
   },
   "keywords": [
@@ -36,7 +39,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.1.3",
+    "@alaarab/ogrid-core": "2.1.5",
     "@tanstack/react-virtual": "^3.0.0"
   },
   "peerDependencies": {

package/dist/esm/components/BaseColumnHeaderMenu.js

@@ -1,78 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { createPortal } from 'react-dom';
-import { getColumnHeaderMenuItems } from '../utils';
-/**
- * Base column header dropdown menu for pin/sort/autosize actions.
- * Uses positioned div with portal rendering.
- * Shared by Radix and Fluent UI packages (Material uses MUI Menu instead).
- */
-export function BaseColumnHeaderMenu(props) {
-    const { isOpen, anchorElement, onClose, onPinLeft, onPinRight, onUnpin, onSortAsc, onSortDesc, onClearSort, onAutosizeThis, onAutosizeAll, canPinLeft, canPinRight, canUnpin, currentSort, isSortable, isResizable, classNames, getPortalTarget, } = props;
-    const [position, setPosition] = React.useState(null);
-    const menuRef = React.useRef(null);
-    React.useEffect(() => {
-        if (!isOpen || !anchorElement) {
-            setPosition(null);
-            return;
-        }
-        const rect = anchorElement.getBoundingClientRect();
-        setPosition({
-            top: rect.bottom + 4,
-            left: rect.left,
-        });
-        const handleClickOutside = (e) => {
-            const target = e.target;
-            // Don't close if clicking inside the menu itself (portal) — let onClick fire first
-            if (menuRef.current && menuRef.current.contains(target))
-                return;
-            if (anchorElement && !anchorElement.contains(target)) {
-                onClose();
-            }
-        };
-        const handleEscape = (e) => {
-            if (e.key === 'Escape') {
-                onClose();
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        document.addEventListener('keydown', handleEscape);
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-            document.removeEventListener('keydown', handleEscape);
-        };
-    }, [isOpen, anchorElement, onClose]);
-    const menuInput = React.useMemo(() => ({
-        canPinLeft,
-        canPinRight,
-        canUnpin,
-        currentSort,
-        isSortable,
-        isResizable,
-    }), [canPinLeft, canPinRight, canUnpin, currentSort, isSortable, isResizable]);
-    const items = React.useMemo(() => getColumnHeaderMenuItems(menuInput), [menuInput]);
-    const handlers = React.useMemo(() => ({
-        pinLeft: onPinLeft,
-        pinRight: onPinRight,
-        unpin: onUnpin,
-        sortAsc: onSortAsc,
-        sortDesc: onSortDesc,
-        clearSort: onClearSort,
-        autosizeThis: onAutosizeThis,
-        autosizeAll: onAutosizeAll,
-    }), [onPinLeft, onPinRight, onUnpin, onSortAsc, onSortDesc, onClearSort, onAutosizeThis, onAutosizeAll]);
-    if (!isOpen || !position)
-        return null;
-    const portalTarget = anchorElement && getPortalTarget
-        ? getPortalTarget(anchorElement)
-        : document.body;
-    return createPortal(_jsx("div", { ref: menuRef, className: classNames?.content, style: {
-            position: 'fixed',
-            top: position.top,
-            left: position.left,
-            zIndex: 1000,
-        }, children: items.map((item, idx) => (_jsxs(React.Fragment, { children: [_jsx("button", { className: classNames?.item, disabled: item.disabled, onClick: () => {
-                        handlers[item.id]();
-                        onClose();
-                    }, children: item.label }), item.divider && idx < items.length - 1 && (_jsx("div", { className: classNames?.separator }))] }, item.id))) }), portalTarget);
-}

package/dist/esm/components/BaseDropIndicator.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export function BaseDropIndicator({ dropIndicatorX, wrapperLeft, className }) {
-    return (_jsx("div", { className: className, style: { left: dropIndicatorX - wrapperLeft } }));
-}

package/dist/esm/components/BaseEmptyState.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export function BaseEmptyState({ emptyState, classNames, icon }) {
-    return (_jsx("div", { className: classNames.emptyStateInGrid, children: _jsx("div", { className: classNames.emptyStateInGridInner, children: emptyState.render ? (emptyState.render()) : (_jsxs(_Fragment, { children: [icon != null && (_jsx("span", { className: classNames.emptyStateInGridIcon, "aria-hidden": true, children: icon })), _jsx("div", { className: classNames.emptyStateInGridTitle, children: "No results found" }), _jsx("div", { className: classNames.emptyStateInGridMessage, children: emptyState.message != null ? (emptyState.message) : emptyState.hasActiveFilters ? (_jsxs(_Fragment, { children: ["No items match your current filters. Try adjusting your search or", ' ', _jsx("button", { type: "button", className: classNames.emptyStateInGridLink, onClick: emptyState.onClearAll, children: "clear all filters" }), ' ', "to see all items."] })) : ('There are no items available at this time.') })] })) }) }));
-}

package/dist/esm/components/BaseInlineCellEditor.js

@@ -1,167 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from 'react';
-import { useInlineCellEditorState, useRichSelectState, useSelectState } from '../hooks';
-// ── Shared editor style constants (used across all 3 UI packages) ──
-export const editorWrapperStyle = {
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    padding: '6px 10px',
-    boxSizing: 'border-box',
-    overflow: 'hidden',
-    minWidth: 0,
-};
-export const editorInputStyle = {
-    width: '100%',
-    padding: 0,
-    border: 'none',
-    background: 'transparent',
-    color: 'inherit',
-    font: 'inherit',
-    fontSize: '13px',
-    outline: 'none',
-    minWidth: 0,
-};
-export const richSelectWrapperStyle = {
-    ...editorWrapperStyle,
-    position: 'relative',
-};
-export const richSelectDropdownStyle = {
-    position: 'absolute',
-    top: '100%',
-    left: 0,
-    right: 0,
-    maxHeight: 200,
-    overflowY: 'auto',
-    background: 'var(--ogrid-bg, #fff)',
-    border: '1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))',
-    zIndex: 10,
-    boxShadow: 'var(--ogrid-shadow, 0 4px 16px rgba(0,0,0,0.2))',
-};
-export const richSelectOptionStyle = {
-    padding: '6px 8px',
-    cursor: 'pointer',
-    color: 'var(--ogrid-fg, #242424)',
-};
-export const richSelectOptionHighlightedStyle = {
-    ...richSelectOptionStyle,
-    background: 'var(--ogrid-bg-hover, #e8f0fe)',
-};
-export const richSelectNoMatchesStyle = {
-    padding: '6px 8px',
-    color: 'var(--ogrid-muted, #999)',
-};
-export const selectEditorStyle = {
-    width: '100%',
-    padding: 0,
-    border: 'none',
-    background: 'transparent',
-    color: 'inherit',
-    font: 'inherit',
-    fontSize: '13px',
-    cursor: 'pointer',
-    outline: 'none',
-};
-export const selectDisplayStyle = {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    width: '100%',
-    cursor: 'pointer',
-    fontSize: '13px',
-    color: 'inherit',
-};
-export const selectChevronStyle = {
-    marginLeft: 4,
-    fontSize: '10px',
-    opacity: 0.5,
-};
-/**
- * Base inline cell editor with shared logic for all editor types except checkbox
- * (which is framework-specific). Used by all 3 UI packages to avoid duplication.
- *
- * Text, date, select, and richSelect editors are fully shared.
- * Checkbox is delegated via renderCheckbox render prop.
- */
-export function BaseInlineCellEditor(props) {
-    const { value, column, editorType, onCommit, onCancel, renderCheckbox } = props;
-    const wrapperRef = React.useRef(null);
-    const { localValue, setLocalValue, handleKeyDown, handleBlur, commit, cancel } = useInlineCellEditorState({ value, editorType, onCommit, onCancel });
-    const editorValues = column.cellEditorParams?.values ?? [];
-    const editorFormatValue = column.cellEditorParams?.formatValue;
-    const richSelect = useRichSelectState({
-        values: editorValues,
-        formatValue: editorFormatValue,
-        initialValue: value,
-        onCommit,
-        onCancel,
-    });
-    const selectState = useSelectState({
-        values: editorValues,
-        formatValue: editorFormatValue,
-        initialValue: value,
-        onCommit,
-        onCancel,
-    });
-    // Fixed dropdown positioning to escape ancestor overflow clipping (.tableWrapper)
-    const [fixedDropdownStyle, setFixedDropdownStyle] = React.useState(null);
-    React.useLayoutEffect(() => {
-        if (editorType !== 'select' && editorType !== 'richSelect')
-            return;
-        const wrapper = wrapperRef.current;
-        if (!wrapper)
-            return;
-        const rect = wrapper.getBoundingClientRect();
-        const maxH = 200;
-        const spaceBelow = window.innerHeight - rect.bottom;
-        const flipUp = spaceBelow < maxH && rect.top > spaceBelow;
-        setFixedDropdownStyle({
-            position: 'fixed',
-            ...(flipUp ? { bottom: window.innerHeight - rect.top } : { top: rect.bottom }),
-            left: rect.left,
-            width: rect.width,
-            maxHeight: maxH,
-            overflowY: 'auto',
-            background: 'var(--ogrid-bg, #fff)',
-            border: '1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))',
-            zIndex: 9999,
-            boxShadow: 'var(--ogrid-shadow, 0 4px 16px rgba(0,0,0,0.2))',
-        });
-    }, [editorType]);
-    const computedDropdownStyle = fixedDropdownStyle ?? richSelectDropdownStyle;
-    React.useEffect(() => {
-        const wrapper = wrapperRef.current;
-        if (!wrapper)
-            return;
-        const input = wrapper.querySelector('input');
-        if (input) {
-            input.focus();
-            // Select all text for easy replacement (like Excel)
-            input.select();
-        }
-        else {
-            // Focus the wrapper for keyboard events (select editor has no input)
-            wrapper.focus();
-        }
-    }, []);
-    // Rich select (shared across all frameworks)
-    if (editorType === 'richSelect') {
-        return (_jsxs("div", { ref: wrapperRef, style: richSelectWrapperStyle, children: [_jsx("input", { type: "text", value: richSelect.searchText, onChange: (e) => richSelect.setSearchText(e.target.value), onKeyDown: richSelect.handleKeyDown, placeholder: "Search...", autoFocus: true, style: editorInputStyle }), _jsxs("div", { style: computedDropdownStyle, role: "listbox", children: [richSelect.filteredValues.map((v, i) => (_jsx("div", { role: "option", "aria-selected": i === richSelect.highlightedIndex, onClick: () => richSelect.selectValue(v), style: i === richSelect.highlightedIndex ? richSelectOptionHighlightedStyle : richSelectOptionStyle, children: richSelect.getDisplayText(v) }, String(v)))), richSelect.filteredValues.length === 0 && (_jsx("div", { style: richSelectNoMatchesStyle, children: "No matches" }))] })] }));
-    }
-    // Checkbox (framework-specific)
-    if (editorType === 'checkbox') {
-        const checked = value === true;
-        return _jsx(_Fragment, { children: renderCheckbox(checked, (val) => commit(val), cancel) });
-    }
-    // Select (custom dropdown, shared across all frameworks)
-    if (editorType === 'select') {
-        return (_jsxs("div", { ref: wrapperRef, style: richSelectWrapperStyle, onKeyDown: selectState.handleKeyDown, tabIndex: 0, children: [_jsxs("div", { style: selectDisplayStyle, children: [_jsx("span", { children: selectState.getDisplayText(value) }), _jsx("span", { style: selectChevronStyle, children: "\u25BE" })] }), _jsx("div", { style: computedDropdownStyle, ref: selectState.dropdownRef, role: "listbox", children: editorValues.map((v, i) => (_jsx("div", { role: "option", "aria-selected": i === selectState.highlightedIndex, onClick: () => selectState.selectValue(v), style: i === selectState.highlightedIndex ? richSelectOptionHighlightedStyle : richSelectOptionStyle, children: selectState.getDisplayText(v) }, String(v)))) })] }));
-    }
-    // Date editor (shared across all frameworks)
-    if (editorType === 'date') {
-        return (_jsx("div", { ref: wrapperRef, style: editorWrapperStyle, children: _jsx("input", { type: "date", value: localValue, onChange: (e) => setLocalValue(e.target.value), onBlur: handleBlur, onKeyDown: handleKeyDown, style: editorInputStyle, autoFocus: true }) }));
-    }
-    // Text editor (default, shared across all frameworks)
-    return (_jsx("div", { ref: wrapperRef, style: editorWrapperStyle, children: _jsx("input", { type: "text", value: localValue, onChange: (e) => setLocalValue(e.target.value), onBlur: handleBlur, onKeyDown: handleKeyDown, style: editorInputStyle, autoFocus: true }) }));
-}

package/dist/esm/components/BaseLoadingOverlay.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function BaseLoadingOverlay({ message, classNames }) {
-    return (_jsx("div", { className: classNames.loadingOverlay, "aria-live": "polite", children: _jsxs("div", { className: classNames.loadingOverlayContent, children: [_jsx("div", { className: classNames.spinner }), _jsx("span", { className: classNames.loadingOverlayText, children: message })] }) }));
-}

package/dist/esm/components/CellErrorBoundary.js

@@ -1,43 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-const DEFAULT_FALLBACK_STYLE = {
-    color: 'var(--ogrid-error, #d32f2f)',
-    fontSize: '0.75rem',
-    padding: '2px 4px',
-};
-/**
- * Error boundary for cell renderers and custom editors.
- * Prevents a runtime error in a cell from crashing the entire grid.
- */
-export class CellErrorBoundary extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = { hasError: false };
-    }
-    static getDerivedStateFromError() {
-        return { hasError: true };
-    }
-    componentDidCatch(error, errorInfo) {
-        if (this.props.onError) {
-            this.props.onError(error, errorInfo);
-        }
-    }
-    componentDidUpdate(prevProps) {
-        // Reset error state when children change (e.g., navigating to a different cell)
-        if (prevProps.children !== this.props.children && this.state.hasError) {
-            this.setState({ hasError: false });
-        }
-    }
-    resetErrorBoundary() {
-        this.setState({ hasError: false });
-    }
-    render() {
-        if (this.state.hasError) {
-            if (this.props.fallback !== undefined) {
-                return this.props.fallback;
-            }
-            return _jsx("span", { style: DEFAULT_FALLBACK_STYLE, children: "\u26A0 Error" });
-        }
-        return this.props.children;
-    }
-}

package/dist/esm/components/ColumnChooserProps.js

@@ -1,6 +0,0 @@
-/**
- * Shared props interface for ColumnChooser across all React UI packages.
- * Each UI package renders its own framework-specific trigger, popover, and checkboxes
- * but shares this common prop shape.
- */
-export {};

package/dist/esm/components/ColumnHeaderFilterContent.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export const DateFilterContent = ({ tempDateFrom, setTempDateFrom, tempDateTo, setTempDateTo, onApply, onClear, classNames, }) => (_jsxs(_Fragment, { children: [_jsxs("div", { style: { padding: '8px 12px', display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }, children: ["From:", _jsx("input", { type: "date", value: tempDateFrom, onChange: (e) => setTempDateFrom(e.target.value), style: { flex: 1 } })] }), _jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }, children: ["To:", _jsx("input", { type: "date", value: tempDateTo, onChange: (e) => setTempDateTo(e.target.value), style: { flex: 1 } })] })] }), _jsxs("div", { className: classNames?.popoverActions, children: [_jsx("button", { className: classNames?.clearButton, onClick: onClear, disabled: !tempDateFrom && !tempDateTo, children: "Clear" }), _jsx("button", { className: classNames?.applyButton, onClick: onApply, children: "Apply" })] })] }));
-DateFilterContent.displayName = 'DateFilterContent';
-// ---- Utility to extract useColumnHeaderFilterState params from props ----
-export function getColumnHeaderFilterStateParams(props) {
-    return {
-        filterType: props.filterType,
-        onSort: props.onSort,
-        selectedValues: props.selectedValues,
-        onFilterChange: props.onFilterChange,
-        options: props.options,
-        isLoadingOptions: props.isLoadingOptions ?? false,
-        textValue: props.textValue ?? '',
-        onTextChange: props.onTextChange,
-        selectedUser: props.selectedUser,
-        onUserChange: props.onUserChange,
-        peopleSearch: props.peopleSearch,
-        dateValue: props.dateValue,
-        onDateChange: props.onDateChange,
-    };
-}
-// ---- Helper to build date filter props from state ----
-export function getDateFilterContentProps(state, classNames) {
-    return {
-        tempDateFrom: state.tempDateFrom,
-        setTempDateFrom: state.setTempDateFrom,
-        tempDateTo: state.tempDateTo,
-        setTempDateTo: state.setTempDateTo,
-        onApply: state.handlers.handleDateApply,
-        onClear: state.handlers.handleDateClear,
-        classNames,
-    };
-}

package/dist/esm/components/ColumnHeaderFilterRenderers.js

@@ -1,67 +0,0 @@
-/**
- * Shared filter content dispatching for ColumnHeaderFilter across all React UI packages.
- *
- * Each UI package provides framework-specific sub-filter components (TextFilterPopover,
- * MultiSelectFilterPopover, PeopleFilterPopover, date content). This utility dispatches
- * to the correct renderer based on filterType, eliminating the duplicated if/switch chain
- * that was previously in each UI package's ColumnHeaderFilter component.
- */
-/**
- * Dispatches to the appropriate filter content renderer based on filterType.
- * Eliminates the duplicated if/switch chain in each UI package's ColumnHeaderFilter.
- *
- * @param filterType - The column's filter type
- * @param state - The result from useColumnHeaderFilterState
- * @param options - The filter options array (for multiSelect)
- * @param isLoadingOptions - Whether options are loading
- * @param selectedUser - The currently selected user (for people filter)
- * @param renderers - Framework-specific renderer functions
- * @returns The rendered filter content, or null for unsupported filter types
- */
-export function renderFilterContent(filterType, state, options, isLoadingOptions, selectedUser, renderers) {
-    if (filterType === 'multiSelect') {
-        return renderers.renderMultiSelect({
-            searchText: state.searchText,
-            onSearchChange: state.setSearchText,
-            options,
-            filteredOptions: state.filteredOptions,
-            selected: state.tempSelected,
-            onOptionToggle: state.handlers.handleCheckboxChange,
-            onSelectAll: state.handlers.handleSelectAll,
-            onClearSelection: state.handlers.handleClearSelection,
-            onApply: state.handlers.handleApplyMultiSelect,
-            isLoading: isLoadingOptions,
-        });
-    }
-    if (filterType === 'text') {
-        return renderers.renderText({
-            value: state.tempTextValue,
-            onValueChange: state.setTempTextValue,
-            onApply: state.handlers.handleTextApply,
-            onClear: state.handlers.handleTextClear,
-        });
-    }
-    if (filterType === 'people') {
-        return renderers.renderPeople({
-            selectedUser,
-            searchText: state.peopleSearchText,
-            onSearchChange: state.setPeopleSearchText,
-            suggestions: state.peopleSuggestions,
-            isLoading: state.isPeopleLoading,
-            onUserSelect: state.handlers.handleUserSelect,
-            onClearUser: state.handlers.handleClearUser,
-            inputRef: state.peopleInputRef,
-        });
-    }
-    if (filterType === 'date') {
-        return renderers.renderDate({
-            tempDateFrom: state.tempDateFrom,
-            setTempDateFrom: state.setTempDateFrom,
-            tempDateTo: state.tempDateTo,
-            setTempDateTo: state.setTempDateTo,
-            onApply: state.handlers.handleDateApply,
-            onClear: state.handlers.handleDateClear,
-        });
-    }
-    return null;
-}

package/dist/esm/components/EmptyState.js

@@ -1,19 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const clearButtonStyle = { background: 'none', border: 'none', color: 'inherit', textDecoration: 'underline', cursor: 'pointer', padding: 0, font: 'inherit' };
-/**
- * Headless empty state component with default rendering logic.
- * Framework-specific wrappers provide styling.
- *
- * Default behavior:
- * - Shows "No results found" title
- * - If hasActiveFilters=true: shows "clear all filters" link
- * - If message provided: shows custom message
- * - If render provided: uses custom renderer
- */
-export function EmptyState(props) {
-    const { message, hasActiveFilters, onClearAll, render } = props;
-    if (render) {
-        return _jsx(_Fragment, { children: render() });
-    }
-    return (_jsx(_Fragment, { children: message != null ? (message) : hasActiveFilters ? (_jsxs(_Fragment, { children: ["No items match your current filters. Try adjusting your search or", ' ', _jsx("button", { type: "button", onClick: onClearAll, style: clearButtonStyle, children: "clear all filters" }), ' ', "to see all items."] })) : ('There are no items available at this time.') }));
-}

package/dist/esm/components/GridContextMenu.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut } from '../utils';
-const menuPositionStyle = (x, y) => ({ left: x, top: y });
-export function GridContextMenu(props) {
-    const { x, y, hasSelection, canUndo, canRedo, onClose, onCopy, onCut, onPaste, onSelectAll, onUndo, onRedo, classNames } = props;
-    const ref = React.useRef(null);
-    const handlers = React.useMemo(() => getContextMenuHandlers({ onCopy, onCut, onPaste, onSelectAll, onUndo, onRedo, onClose }), [onCopy, onCut, onPaste, onSelectAll, onUndo, onRedo, onClose]);
-    const isDisabled = React.useCallback((item) => {
-        if (item.disabledWhenNoSelection && !hasSelection)
-            return true;
-        if (item.id === 'undo' && !canUndo)
-            return true;
-        if (item.id === 'redo' && !canRedo)
-            return true;
-        return false;
-    }, [hasSelection, canUndo, canRedo]);
-    React.useEffect(() => {
-        const handleClickOutside = (e) => {
-            if (ref.current && !ref.current.contains(e.target))
-                onClose();
-        };
-        const handleKeyDown = (e) => {
-            if (e.key === 'Escape')
-                onClose();
-        };
-        document.addEventListener('mousedown', handleClickOutside, true);
-        document.addEventListener('keydown', handleKeyDown, true);
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside, true);
-            document.removeEventListener('keydown', handleKeyDown, true);
-        };
-    }, [onClose]);
-    return (_jsx("div", { ref: ref, className: classNames?.contextMenu, role: "menu", style: menuPositionStyle(x, y), "aria-label": "Grid context menu", children: GRID_CONTEXT_MENU_ITEMS.map((item) => (_jsxs(React.Fragment, { children: [item.dividerBefore && _jsx("div", { className: classNames?.contextMenuDivider }), _jsxs("button", { type: "button", className: classNames?.contextMenuItem, onClick: handlers[item.id], disabled: isDisabled(item), children: [_jsx("span", { className: classNames?.contextMenuItemLabel, children: item.label }), item.shortcut && (_jsx("span", { className: classNames?.contextMenuItemShortcut, children: formatShortcut(item.shortcut) }))] })] }, item.id))) }));
-}

package/dist/esm/components/MarchingAntsOverlay.js

@@ -1,90 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * MarchingAntsOverlay — Renders range overlays on top of the grid:
- *
- * 1. **Selection range**: solid green border around the current selection
- * 2. **Copy/Cut range**: animated dashed border (marching ants) like Excel
- *
- * Uses SVG rects positioned via cell data-attribute measurements.
- */
-import { useEffect, useRef, useState, useCallback } from 'react';
-import { measureRange, injectGlobalStyles } from '@alaarab/ogrid-core';
-const MARCHING_ANTS_ANIMATION = { animation: 'ogrid-marching-ants 0.5s linear infinite' };
-export function MarchingAntsOverlay({ containerRef, selectionRange, copyRange, cutRange, colOffset, items, visibleColumns, columnSizingOverrides, columnOrder, }) {
-    const [selRect, setSelRect] = useState(null);
-    const [clipRect, setClipRect] = useState(null);
-    const rafRef = useRef(0);
-    const clipRange = copyRange ?? cutRange;
-    const measureAll = useCallback(() => {
-        const container = containerRef.current;
-        if (!container) {
-            setSelRect(null);
-            setClipRect(null);
-            return;
-        }
-        setSelRect(selectionRange ? measureRange(container, selectionRange, colOffset) : null);
-        setClipRect(clipRange ? measureRange(container, clipRange, colOffset) : null);
-    }, [selectionRange, clipRange, containerRef, colOffset]);
-    // Inject keyframes on mount
-    useEffect(() => {
-        injectGlobalStyles('ogrid-marching-ants-keyframes', '@keyframes ogrid-marching-ants{to{stroke-dashoffset:-8}}');
-    }, []);
-    // Measure when any range changes; re-measure on resize
-    useEffect(() => {
-        if (!selectionRange && !clipRange) {
-            setSelRect(null);
-            setClipRect(null);
-            return;
-        }
-        // Delay one frame so cells are rendered
-        rafRef.current = requestAnimationFrame(measureAll);
-        const container = containerRef.current;
-        let ro;
-        if (container) {
-            ro = new ResizeObserver(measureAll);
-            ro.observe(container);
-        }
-        return () => {
-            cancelAnimationFrame(rafRef.current);
-            ro?.disconnect();
-        };
-    }, [selectionRange, clipRange, measureAll, containerRef, items, visibleColumns, columnSizingOverrides, columnOrder]);
-    if (!selRect && !clipRect)
-        return null;
-    // When clipboard range matches the selection range, hide the solid selection border
-    // so the marching ants animation is clearly visible (not obscured by solid stroke underneath).
-    const clipRangeMatchesSel = selectionRange != null &&
-        clipRange != null &&
-        selectionRange.startRow === clipRange.startRow &&
-        selectionRange.startCol === clipRange.startCol &&
-        selectionRange.endRow === clipRange.endRow &&
-        selectionRange.endCol === clipRange.endCol;
-    // Round to integer pixels so the stroke aligns to the pixel grid and corners connect cleanly
-    const roundRect = (r) => ({
-        top: Math.round(r.top),
-        left: Math.round(r.left),
-        width: Math.round(r.width),
-        height: Math.round(r.height),
-    });
-    const selR = selRect ? roundRect(selRect) : null;
-    const clipR = clipRect ? roundRect(clipRect) : null;
-    return (_jsxs(_Fragment, { children: [selR && !clipRangeMatchesSel && (_jsx("svg", { style: {
-                    position: 'absolute',
-                    top: selR.top,
-                    left: selR.left,
-                    width: selR.width,
-                    height: selR.height,
-                    pointerEvents: 'none',
-                    zIndex: 4,
-                    overflow: 'visible',
-                }, "aria-hidden": "true", children: _jsx("rect", { x: "1", y: "1", width: Math.max(0, selR.width - 2), height: Math.max(0, selR.height - 2), fill: "none", stroke: "var(--ogrid-selection, #217346)", strokeWidth: "2", style: { shapeRendering: 'crispEdges' } }) })), clipR && (_jsx("svg", { style: {
-                    position: 'absolute',
-                    top: clipR.top,
-                    left: clipR.left,
-                    width: clipR.width,
-                    height: clipR.height,
-                    pointerEvents: 'none',
-                    zIndex: 5,
-                    overflow: 'visible',
-                }, "aria-hidden": "true", children: _jsx("rect", { x: "1", y: "1", width: Math.max(0, clipR.width - 2), height: Math.max(0, clipR.height - 2), fill: "none", stroke: "var(--ogrid-selection, #217346)", strokeWidth: "2", strokeDasharray: "4 4", style: { ...MARCHING_ANTS_ANIMATION, shapeRendering: 'crispEdges' } }) }))] }));
-}