@alaarab/ogrid-core 1.8.2 → 2.0.0-beta

package/dist/types/utils/index.d.ts

@@ -7,8 +7,6 @@ export { getDataGridStatusBarConfig } from './dataGridStatusBar';
 export { getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, } from './paginationHelpers';
 export type { PaginationViewModel } from './paginationHelpers';
 export { GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut } from './gridContextMenuHelpers';
-export { getHeaderFilterConfig, getCellRenderDescriptor, isRowInRange, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from './dataGridViewModel';
-export type { HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, CellInteractionHandlers, } from './dataGridViewModel';
 export type { CsvColumn } from './exportToCsv';
 export type { StatusBarPart, StatusBarPartsInput } from './statusBarHelpers';
 export type { GridContextMenuItem, GridContextMenuHandlerProps } from './gridContextMenuHelpers';
@@ -17,3 +15,5 @@ export type { ParseValueResult } from './valueParsers';
 export { computeAggregations } from './aggregationUtils';
 export type { AggregationResult } from './aggregationUtils';
 export { processClientSideData } from './clientSideData';
+export { areGridRowPropsEqual, isRowInRange } from './gridRowComparator';
+export type { GridRowComparatorProps } from './gridRowComparator';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@alaarab/ogrid-core",
-  "version": "1.8.2",
-  "description": "OGrid core – framework-agnostic types, hooks, and utilities for OGrid data tables.",
+  "version": "2.0.0-beta",
+  "description": "OGrid core – framework-agnostic types, algorithms, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -16,28 +16,10 @@
     "build": "rimraf dist && tsc -p tsconfig.build.json",
     "test": "jest"
   },
-  "keywords": [
-    "ogrid",
-    "datatable",
-    "react",
-    "typescript",
-    "grid",
-    "core"
-  ],
+  "keywords": ["ogrid", "datatable", "typescript", "grid", "core"],
   "author": "Ala Arab",
   "license": "MIT",
-  "files": [
-    "dist",
-    "README.md",
-    "LICENSE"
-  ],
-  "engines": {
-    "node": ">=18"
-  },
-  "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
+  "files": ["dist", "README.md", "LICENSE"],
+  "engines": { "node": ">=18" },
+  "publishConfig": { "access": "public" }
 }

package/dist/esm/components/GridContextMenu.js

@@ -1,34 +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/gridContextMenuHelpers';
-export function GridContextMenu(props) {
-    const { x, y, hasSelection, canUndo, canRedo, onClose, classNames } = props;
-    const ref = React.useRef(null);
-    const handlers = React.useMemo(() => getContextMenuHandlers(props), [props]);
-    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: { left: x, top: 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,109 +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';
-// Inject the @keyframes rule once into <head>
-let styleInjected = false;
-function ensureKeyframes() {
-    if (styleInjected || typeof document === 'undefined')
-        return;
-    const style = document.createElement('style');
-    style.id = 'ogrid-marching-ants-keyframes';
-    style.textContent =
-        '@keyframes ogrid-marching-ants{to{stroke-dashoffset:-8}}';
-    document.head.appendChild(style);
-    styleInjected = true;
-}
-/** Measure the bounding rect of a range within a container. */
-function measureRange(container, range, colOffset) {
-    const startGlobalCol = range.startCol + colOffset;
-    const endGlobalCol = range.endCol + colOffset;
-    const topLeft = container.querySelector(`[data-row-index="${range.startRow}"][data-col-index="${startGlobalCol}"]`);
-    const bottomRight = container.querySelector(`[data-row-index="${range.endRow}"][data-col-index="${endGlobalCol}"]`);
-    if (!topLeft || !bottomRight)
-        return null;
-    const cRect = container.getBoundingClientRect();
-    const tlRect = topLeft.getBoundingClientRect();
-    const brRect = bottomRight.getBoundingClientRect();
-    return {
-        top: tlRect.top - cRect.top,
-        left: tlRect.left - cRect.left,
-        width: brRect.right - tlRect.left,
-        height: brRect.bottom - tlRect.top,
-    };
-}
-export function MarchingAntsOverlay({ containerRef, selectionRange, copyRange, cutRange, colOffset, }) {
-    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(() => {
-        ensureKeyframes();
-    }, []);
-    // 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]);
-    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;
-    return (_jsxs(_Fragment, { children: [selRect && !clipRangeMatchesSel && (_jsx("svg", { style: {
-                    position: 'absolute',
-                    top: selRect.top,
-                    left: selRect.left,
-                    width: selRect.width,
-                    height: selRect.height,
-                    pointerEvents: 'none',
-                    zIndex: 4,
-                    overflow: 'visible',
-                }, "aria-hidden": "true", children: _jsx("rect", { x: "1", y: "1", width: Math.max(0, selRect.width - 2), height: Math.max(0, selRect.height - 2), fill: "none", stroke: "var(--ogrid-selection, #217346)", strokeWidth: "2" }) })), clipRect && (_jsx("svg", { style: {
-                    position: 'absolute',
-                    top: clipRect.top,
-                    left: clipRect.left,
-                    width: clipRect.width,
-                    height: clipRect.height,
-                    pointerEvents: 'none',
-                    zIndex: 5,
-                    overflow: 'visible',
-                }, "aria-hidden": "true", children: _jsx("rect", { x: "1", y: "1", width: Math.max(0, clipRect.width - 2), height: Math.max(0, clipRect.height - 2), fill: "none", stroke: "var(--ogrid-selection, #217346)", strokeWidth: "2", strokeDasharray: "4 4", style: { animation: 'ogrid-marching-ants 0.5s linear infinite' } }) }))] }));
-}

package/dist/esm/components/OGridLayout.js

@@ -1,90 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SideBar } from './SideBar';
-// Stable style objects (avoid re-creating on every render)
-const borderedContainerStyle = {
-    border: '1px solid var(--ogrid-border, #e0e0e0)',
-    borderRadius: 6,
-    overflow: 'hidden',
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    minHeight: 0,
-    background: 'var(--ogrid-bg, #fff)',
-};
-const toolbarStripBase = {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: '6px 12px',
-    background: 'var(--ogrid-header-bg, #f5f5f5)',
-    gap: 8,
-    flexWrap: 'wrap',
-    minHeight: 0,
-};
-/** Toolbar strip with border-bottom (when it's the only toolbar row). */
-const toolbarStripStyle = {
-    ...toolbarStripBase,
-    borderBottom: '1px solid var(--ogrid-border, #e0e0e0)',
-};
-/** Toolbar strip without border-bottom (when toolbarBelow follows — it owns the border). */
-const toolbarStripNoBorderStyle = toolbarStripBase;
-const toolbarSectionStyle = {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 8,
-};
-/** Secondary toolbar row (e.g. active filter chips). Matches toolbar strip styling. */
-const toolbarBelowStyle = {
-    borderBottom: '1px solid var(--ogrid-border, #e0e0e0)',
-    padding: '6px 12px',
-    background: 'var(--ogrid-header-bg, #f5f5f5)',
-};
-const footerStripStyle = {
-    borderTop: '1px solid var(--ogrid-border, #e0e0e0)',
-    background: 'var(--ogrid-header-bg, #f5f5f5)',
-    padding: '6px 12px',
-};
-const gridAreaFlexStyle = {
-    width: '100%',
-    minWidth: 0,
-    minHeight: 0,
-    flex: 1,
-    display: 'flex',
-};
-const gridAreaSoloStyle = {
-    width: '100%',
-    minWidth: 0,
-    minHeight: 0,
-    flex: 1,
-    display: 'flex',
-    flexDirection: 'column',
-};
-const gridChildStyle = {
-    flex: 1,
-    minWidth: 0,
-    minHeight: 0,
-    display: 'flex',
-    flexDirection: 'column',
-};
-/**
- * Renders OGrid layout as a unified bordered container:
- *   ┌────────────────────────────────────┐
- *   │ [toolbar strip]                    │
- *   ├────────────────────────────────────┤
- *   │ [sidebar]? [grid]                  │
- *   ├────────────────────────────────────┤
- *   │ [footer strip / pagination]        │
- *   └────────────────────────────────────┘
- */
-export function OGridLayout(props) {
-    const { containerComponent: Container = 'div', containerProps = {}, className, toolbar, toolbarEnd, toolbarBelow, children, pagination, sideBar, } = props;
-    const hasSideBar = sideBar != null;
-    const sideBarPosition = sideBar?.position ?? 'right';
-    const hasToolbar = toolbar != null || toolbarEnd != null;
-    const rootStyle = {
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100%',
-    };
-    return (_jsx(Container, { className: className, style: rootStyle, ...containerProps, children: _jsxs("div", { style: borderedContainerStyle, children: [hasToolbar && (_jsxs("div", { style: toolbarBelow ? toolbarStripNoBorderStyle : toolbarStripStyle, children: [_jsx("div", { style: toolbarSectionStyle, children: toolbar }), _jsx("div", { style: toolbarSectionStyle, children: toolbarEnd })] })), toolbarBelow && (_jsx("div", { style: toolbarBelowStyle, children: toolbarBelow })), hasSideBar ? (_jsxs("div", { style: gridAreaFlexStyle, children: [sideBarPosition === 'left' && _jsx(SideBar, { ...sideBar }), _jsx("div", { style: gridChildStyle, children: children }), sideBarPosition !== 'left' && _jsx(SideBar, { ...sideBar })] })) : (_jsx("div", { style: gridAreaSoloStyle, children: children })), pagination && (_jsx("div", { style: footerStripStyle, children: pagination }))] }) }));
-}

package/dist/esm/components/SideBar.js

@@ -1,100 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const PANEL_WIDTH = 240;
-const TAB_WIDTH = 36;
-const PANEL_LABELS = {
-    columns: 'Columns',
-    filters: 'Filters',
-};
-export function SideBar(props) {
-    const { activePanel, onPanelChange, panels, position, columns, visibleColumns, onVisibilityChange, onSetVisibleColumns, filterableColumns, filters, onFilterChange, filterOptions, } = props;
-    const isOpen = activePanel !== null;
-    const handleTabClick = (panel) => {
-        onPanelChange(activePanel === panel ? null : panel);
-    };
-    const tabStrip = (_jsx("div", { style: {
-            display: 'flex',
-            flexDirection: 'column',
-            width: TAB_WIDTH,
-            borderLeft: position === 'right' ? '1px solid var(--ogrid-border, #e0e0e0)' : undefined,
-            borderRight: position === 'left' ? '1px solid var(--ogrid-border, #e0e0e0)' : undefined,
-            background: 'var(--ogrid-header-bg, #f5f5f5)',
-        }, role: "tablist", "aria-label": "Side bar tabs", children: panels.map((panel) => (_jsx("button", { role: "tab", "aria-selected": activePanel === panel, "aria-label": PANEL_LABELS[panel], onClick: () => handleTabClick(panel), title: PANEL_LABELS[panel], style: {
-                width: TAB_WIDTH,
-                height: TAB_WIDTH,
-                border: 'none',
-                cursor: 'pointer',
-                background: activePanel === panel ? 'var(--ogrid-bg, #fff)' : 'transparent',
-                color: 'var(--ogrid-fg, #242424)',
-                fontWeight: activePanel === panel ? 'bold' : 'normal',
-                fontSize: 14,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-            }, children: panel === 'columns' ? '\u2261' : '\u2A65' }, panel))) }));
-    const panelContent = isOpen ? (_jsxs("div", { role: "tabpanel", "aria-label": PANEL_LABELS[activePanel], style: {
-            width: PANEL_WIDTH,
-            display: 'flex',
-            flexDirection: 'column',
-            borderLeft: position === 'right' ? '1px solid var(--ogrid-border, #e0e0e0)' : undefined,
-            borderRight: position === 'left' ? '1px solid var(--ogrid-border, #e0e0e0)' : undefined,
-            overflow: 'hidden',
-            background: 'var(--ogrid-bg, #fff)',
-            color: 'var(--ogrid-fg, #242424)',
-        }, children: [_jsxs("div", { style: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    padding: '8px 12px',
-                    borderBottom: '1px solid var(--ogrid-border, #e0e0e0)',
-                    fontWeight: 600,
-                }, children: [_jsx("span", { children: PANEL_LABELS[activePanel] }), _jsx("button", { onClick: () => onPanelChange(null), style: { border: 'none', background: 'transparent', cursor: 'pointer', fontSize: 16, color: 'var(--ogrid-fg, #242424)' }, "aria-label": "Close panel", children: "\u00D7" })] }), _jsxs("div", { style: { flex: 1, overflowY: 'auto', padding: '8px 12px' }, children: [activePanel === 'columns' && (_jsx(ColumnsPanel, { columns: columns, visibleColumns: visibleColumns, onVisibilityChange: onVisibilityChange, onSetVisibleColumns: onSetVisibleColumns })), activePanel === 'filters' && (_jsx(FiltersPanel, { filterableColumns: filterableColumns, filters: filters, onFilterChange: onFilterChange, filterOptions: filterOptions }))] })] })) : null;
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', flexShrink: 0 }, role: "complementary", "aria-label": "Side bar", children: [position === 'left' && tabStrip, position === 'left' && panelContent, position === 'right' && panelContent, position === 'right' && tabStrip] }));
-}
-// --- Internal sub-components ---
-function ColumnsPanel(props) {
-    const { columns, visibleColumns, onVisibilityChange, onSetVisibleColumns } = props;
-    const allVisible = columns.every((c) => visibleColumns.has(c.columnId));
-    const handleSelectAll = () => {
-        const next = new Set(visibleColumns);
-        columns.forEach((c) => next.add(c.columnId));
-        onSetVisibleColumns(next);
-    };
-    const handleClearAll = () => {
-        const next = new Set();
-        columns.forEach((c) => {
-            if (c.required && visibleColumns.has(c.columnId))
-                next.add(c.columnId);
-        });
-        onSetVisibleColumns(next);
-    };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: 'flex', gap: 8, marginBottom: 8 }, children: [_jsx("button", { onClick: handleSelectAll, disabled: allVisible, style: { flex: 1, cursor: 'pointer', background: 'var(--ogrid-bg-subtle, #f3f2f1)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: 4, padding: '4px 8px' }, children: "Select All" }), _jsx("button", { onClick: handleClearAll, style: { flex: 1, cursor: 'pointer', background: 'var(--ogrid-bg-subtle, #f3f2f1)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: 4, padding: '4px 8px' }, children: "Clear All" })] }), columns.map((col) => (_jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6, padding: '2px 0', cursor: 'pointer' }, children: [_jsx("input", { type: "checkbox", checked: visibleColumns.has(col.columnId), onChange: (e) => onVisibilityChange(col.columnId, e.target.checked), disabled: col.required }), _jsx("span", { children: col.name })] }, col.columnId)))] }));
-}
-function FiltersPanel(props) {
-    const { filterableColumns, filters, onFilterChange, filterOptions } = props;
-    if (filterableColumns.length === 0) {
-        return _jsx("div", { style: { color: 'var(--ogrid-muted, #999)', fontStyle: 'italic' }, children: "No filterable columns" });
-    }
-    return (_jsx(_Fragment, { children: filterableColumns.map((col) => {
-            const filterKey = col.filterField;
-            return (_jsxs("div", { style: { marginBottom: 12 }, children: [_jsx("div", { style: { fontWeight: 500, marginBottom: 4, fontSize: 13 }, children: col.name }), col.filterType === 'text' && (_jsx("input", { type: "text", value: filters[filterKey]?.type === 'text' ? filters[filterKey].value : '', onChange: (e) => onFilterChange(filterKey, e.target.value ? { type: 'text', value: e.target.value } : undefined), placeholder: `Filter ${col.name}...`, "aria-label": `Filter ${col.name}`, style: { width: '100%', boxSizing: 'border-box', padding: '4px 6px', background: 'var(--ogrid-bg, #fff)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: 4 } })), col.filterType === 'date' && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 4, fontSize: 12 }, children: ["From:", _jsx("input", { type: "date", value: filters[filterKey]?.type === 'date' ? (filters[filterKey].value.from ?? '') : '', onChange: (e) => {
-                                            const from = e.target.value || undefined;
-                                            const existingValue = filters[filterKey]?.type === 'date' ? filters[filterKey].value : {};
-                                            const to = existingValue.to;
-                                            onFilterChange(filterKey, from || to ? { type: 'date', value: { from, to } } : undefined);
-                                        }, "aria-label": `${col.name} from date`, style: { flex: 1, padding: '2px 4px', background: 'var(--ogrid-bg, #fff)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: 4 } })] }), _jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 4, fontSize: 12 }, children: ["To:", _jsx("input", { type: "date", value: filters[filterKey]?.type === 'date' ? (filters[filterKey].value.to ?? '') : '', onChange: (e) => {
-                                            const to = e.target.value || undefined;
-                                            const existingValue = filters[filterKey]?.type === 'date' ? filters[filterKey].value : {};
-                                            const from = existingValue.from;
-                                            onFilterChange(filterKey, from || to ? { type: 'date', value: { from, to } } : undefined);
-                                        }, "aria-label": `${col.name} to date`, style: { flex: 1, padding: '2px 4px', background: 'var(--ogrid-bg, #fff)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: 4 } })] })] })), col.filterType === 'multiSelect' && (_jsx("div", { style: { maxHeight: 120, overflowY: 'auto' }, role: "group", "aria-label": `${col.name} options`, children: (filterOptions[filterKey] ?? []).map((opt) => {
-                            const selected = filters[filterKey]?.type === 'multiSelect' ? filters[filterKey].value.includes(opt) : false;
-                            return (_jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 4, padding: '1px 0', cursor: 'pointer', fontSize: 13 }, children: [_jsx("input", { type: "checkbox", checked: selected, onChange: (e) => {
-                                            const current = filters[filterKey]?.type === 'multiSelect' ? filters[filterKey].value : [];
-                                            const next = e.target.checked
-                                                ? [...current, opt]
-                                                : current.filter((v) => v !== opt);
-                                            onFilterChange(filterKey, next.length > 0 ? { type: 'multiSelect', value: next } : undefined);
-                                        } }), _jsx("span", { children: opt })] }, opt));
-                        }) }))] }, col.columnId));
-        }) }));
-}

package/dist/esm/components/StatusBar.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getStatusBarParts } from '../utils/statusBarHelpers';
-export function StatusBar({ classNames, ...rest }) {
-    const parts = getStatusBarParts(rest);
-    return (_jsx("div", { className: classNames?.statusBar, role: "status", "aria-live": "polite", children: parts.map((p) => (_jsxs("span", { className: classNames?.statusBarItem, children: [_jsx("span", { className: classNames?.statusBarLabel, children: p.label }), _jsx("span", { className: classNames?.statusBarValue, children: p.value.toLocaleString() })] }, p.key))) }));
-}

package/dist/esm/hooks/index.js

@@ -1,19 +0,0 @@
-export { useFilterOptions } from './useFilterOptions';
-export { useOGrid } from './useOGrid';
-export { useActiveCell } from './useActiveCell';
-export { useCellEditing } from './useCellEditing';
-export { useContextMenu } from './useContextMenu';
-export { useCellSelection } from './useCellSelection';
-export { useClipboard } from './useClipboard';
-export { useRowSelection } from './useRowSelection';
-export { useKeyboardNavigation } from './useKeyboardNavigation';
-export { useUndoRedo } from './useUndoRedo';
-export { useDebounce } from './useDebounce';
-export { useFillHandle } from './useFillHandle';
-export { useDataGridState } from './useDataGridState';
-export { useColumnHeaderFilterState } from './useColumnHeaderFilterState';
-export { useColumnChooserState } from './useColumnChooserState';
-export { useInlineCellEditorState } from './useInlineCellEditorState';
-export { useColumnResize } from './useColumnResize';
-export { useRichSelectState } from './useRichSelectState';
-export { useSideBarState } from './useSideBarState';

package/dist/esm/hooks/useActiveCell.js

@@ -1,46 +0,0 @@
-import { useState, useLayoutEffect, useCallback, useRef } from 'react';
-/**
- * Tracks the active cell for keyboard navigation.
- * When wrapperRef and editingCell are provided, scrolls the active cell into view when it changes (and not editing).
- */
-export function useActiveCell(wrapperRef, editingCell) {
-    const [activeCell, _setActiveCell] = useState(null);
-    const activeCellRef = useRef(activeCell);
-    activeCellRef.current = activeCell;
-    // Deduplicating setter — skips state update (and all downstream effects) when
-    // the cell coordinates haven't actually changed. This prevents re-renders when
-    // rapidly clicking the same cell.
-    const setActiveCell = useCallback((cell) => {
-        const prev = activeCellRef.current;
-        if (prev === cell)
-            return;
-        if (prev && cell && prev.rowIndex === cell.rowIndex && prev.columnIndex === cell.columnIndex)
-            return;
-        _setActiveCell(cell);
-    }, []);
-    // useLayoutEffect ensures focus moves synchronously before the browser can
-    // reset focus to body (fixes left/right arrow navigation losing focus)
-    useLayoutEffect(() => {
-        if (activeCell == null ||
-            wrapperRef?.current == null ||
-            editingCell != null)
-            return;
-        const { rowIndex, columnIndex } = activeCell;
-        const selector = `[data-row-index="${rowIndex}"][data-col-index="${columnIndex}"]`;
-        const cell = wrapperRef.current.querySelector(selector);
-        if (cell) {
-            if (typeof cell.scrollIntoView === 'function') {
-                // Account for sticky <thead> so scrollIntoView doesn't leave
-                // the cell hidden behind the header.
-                const thead = wrapperRef.current.querySelector('thead');
-                const headerHeight = thead ? thead.getBoundingClientRect().height : 0;
-                cell.style.scrollMarginTop = `${headerHeight}px`;
-                cell.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-            }
-            if (document.activeElement !== cell && typeof cell.focus === 'function') {
-                cell.focus();
-            }
-        }
-    }, [activeCell, editingCell, wrapperRef]);
-    return { activeCell, setActiveCell };
-}

package/dist/esm/hooks/useCellEditing.js

@@ -1,11 +0,0 @@
-import { useState } from 'react';
-export function useCellEditing() {
-    const [editingCell, setEditingCell] = useState(null);
-    const [pendingEditorValue, setPendingEditorValue] = useState(undefined);
-    return {
-        editingCell,
-        setEditingCell,
-        pendingEditorValue,
-        setPendingEditorValue,
-    };
-}