@alaarab/ogrid-react 2.1.2 → 2.1.4

package/dist/esm/components/OGridLayout.js

@@ -1,136 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useEffect } from 'react';
-import { SideBar } from './SideBar';
-import { GRID_BORDER_RADIUS } from '@alaarab/ogrid-core';
-// Stable style objects (avoid re-creating on every render)
-const borderedContainerStyle = {
-    border: '1px solid var(--ogrid-border, #e0e0e0)',
-    borderRadius: GRID_BORDER_RADIUS,
-    overflow: 'hidden',
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    minHeight: 0,
-    background: 'var(--ogrid-bg, #fff)',
-};
-const fullscreenContainerStyle = {
-    ...borderedContainerStyle,
-    borderRadius: 0,
-    border: 'none',
-};
-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',
-};
-const rootStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-};
-const fullscreenRootStyle = {
-    position: 'fixed',
-    inset: 0,
-    zIndex: 9999,
-    display: 'flex',
-    flexDirection: 'column',
-    background: 'var(--ogrid-bg, #fff)',
-};
-const fullscreenBtnStyle = {
-    background: 'none',
-    border: '1px solid var(--ogrid-border, #e0e0e0)',
-    borderRadius: 4,
-    padding: '4px 6px',
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    color: 'var(--ogrid-fg, #242424)',
-};
-// SVG expand icon (enter fullscreen)
-const ExpandIcon = () => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("polyline", { points: "10 2 14 2 14 6" }), _jsx("polyline", { points: "6 14 2 14 2 10" }), _jsx("line", { x1: "14", y1: "2", x2: "10", y2: "6" }), _jsx("line", { x1: "2", y1: "14", x2: "6", y2: "10" })] }));
-// SVG collapse icon (exit fullscreen)
-const CollapseIcon = () => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("polyline", { points: "4 10 0 10 0 14" }), _jsx("polyline", { points: "12 6 16 6 16 2" }), _jsx("line", { x1: "0", y1: "10", x2: "4", y2: "6" }), _jsx("line", { x1: "16", y1: "6", x2: "12", y2: "10" })] }));
-/**
- * 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, fullScreen, } = props;
-    const [isFullScreen, setIsFullScreen] = useState(false);
-    const toggleFullScreen = useCallback(() => {
-        setIsFullScreen((prev) => !prev);
-    }, []);
-    // ESC key to exit fullscreen
-    useEffect(() => {
-        if (!isFullScreen)
-            return;
-        const handleKeyDown = (e) => {
-            if (e.key === 'Escape')
-                setIsFullScreen(false);
-        };
-        document.addEventListener('keydown', handleKeyDown);
-        return () => document.removeEventListener('keydown', handleKeyDown);
-    }, [isFullScreen]);
-    const hasSideBar = sideBar != null;
-    const sideBarPosition = sideBar?.position ?? 'right';
-    const hasToolbar = toolbar != null || toolbarEnd != null || fullScreen;
-    const fullscreenButton = fullScreen ? (_jsx("button", { type: "button", style: fullscreenBtnStyle, onClick: toggleFullScreen, title: isFullScreen ? 'Exit fullscreen' : 'Fullscreen', "aria-label": isFullScreen ? 'Exit fullscreen' : 'Fullscreen', children: isFullScreen ? _jsx(CollapseIcon, {}) : _jsx(ExpandIcon, {}) })) : null;
-    return (_jsx(Container, { className: className, style: isFullScreen ? fullscreenRootStyle : rootStyle, ...containerProps, children: _jsxs("div", { style: isFullScreen ? fullscreenContainerStyle : borderedContainerStyle, children: [hasToolbar && (_jsxs("div", { style: toolbarBelow ? toolbarStripNoBorderStyle : toolbarStripStyle, children: [_jsx("div", { style: toolbarSectionStyle, children: toolbar }), _jsxs("div", { style: toolbarSectionStyle, children: [toolbarEnd, fullscreenButton] })] })), 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/PaginationControlsProps.js

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

package/dist/esm/components/SideBar.js

@@ -1,123 +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',
-};
-// --- Stable style objects (avoid re-creating on every render) ---
-const tabStripBaseStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    width: TAB_WIDTH,
-    background: 'var(--ogrid-header-bg, #f5f5f5)',
-};
-const tabStripBorderLeft = { ...tabStripBaseStyle, borderLeft: '1px solid var(--ogrid-border, #e0e0e0)' };
-const tabStripBorderRight = { ...tabStripBaseStyle, borderRight: '1px solid var(--ogrid-border, #e0e0e0)' };
-const tabButtonBase = {
-    width: TAB_WIDTH,
-    height: TAB_WIDTH,
-    border: 'none',
-    cursor: 'pointer',
-    color: 'var(--ogrid-fg, #242424)',
-    fontSize: 14,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-};
-const tabButtonActive = { ...tabButtonBase, background: 'var(--ogrid-bg, #fff)', fontWeight: 'bold' };
-const tabButtonInactive = { ...tabButtonBase, background: 'transparent', fontWeight: 'normal' };
-const panelContainerBase = {
-    width: PANEL_WIDTH,
-    display: 'flex',
-    flexDirection: 'column',
-    overflow: 'hidden',
-    background: 'var(--ogrid-bg, #fff)',
-    color: 'var(--ogrid-fg, #242424)',
-};
-const panelContainerBorderLeft = { ...panelContainerBase, borderLeft: '1px solid var(--ogrid-border, #e0e0e0)' };
-const panelContainerBorderRight = { ...panelContainerBase, borderRight: '1px solid var(--ogrid-border, #e0e0e0)' };
-const panelHeaderStyle = {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: '8px 12px',
-    borderBottom: '1px solid var(--ogrid-border, #e0e0e0)',
-    fontWeight: 600,
-};
-const closeButtonStyle = { border: 'none', background: 'transparent', cursor: 'pointer', fontSize: 16, color: 'var(--ogrid-fg, #242424)' };
-const panelBodyStyle = { flex: 1, overflowY: 'auto', padding: '8px 12px' };
-const sideBarRootStyle = { display: 'flex', flexDirection: 'row', flexShrink: 0 };
-const buttonRowStyle = { display: 'flex', gap: 8, marginBottom: 8 };
-const actionButtonStyle = { 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' };
-const checkboxLabelStyle = { display: 'flex', alignItems: 'center', gap: 6, padding: '2px 0', cursor: 'pointer' };
-const noFilterStyle = { color: 'var(--ogrid-muted, #999)', fontStyle: 'italic' };
-const filterGroupStyle = { marginBottom: 12 };
-const filterLabelStyle = { fontWeight: 500, marginBottom: 4, fontSize: 13 };
-const textInputStyle = { 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 };
-const dateContainerStyle = { display: 'flex', flexDirection: 'column', gap: 4 };
-const dateLabelStyle = { display: 'flex', alignItems: 'center', gap: 4, fontSize: 12 };
-const dateInputStyle = { flex: 1, padding: '2px 4px', background: 'var(--ogrid-bg, #fff)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: 4 };
-const multiSelectContainerStyle = { maxHeight: 120, overflowY: 'auto' };
-const multiSelectLabelStyle = { display: 'flex', alignItems: 'center', gap: 4, padding: '1px 0', cursor: 'pointer', fontSize: 13 };
-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 tabStripStyle = position === 'right' ? tabStripBorderLeft : tabStripBorderRight;
-    const panelContainerStyle = position === 'right' ? panelContainerBorderLeft : panelContainerBorderRight;
-    const tabStrip = (_jsx("div", { style: tabStripStyle, 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: activePanel === panel ? tabButtonActive : tabButtonInactive, children: panel === 'columns' ? '\u2261' : '\u2A65' }, panel))) }));
-    const panelContent = isOpen && activePanel ? (_jsxs("div", { role: "tabpanel", "aria-label": PANEL_LABELS[activePanel], style: panelContainerStyle, children: [_jsxs("div", { style: panelHeaderStyle, children: [_jsx("span", { children: PANEL_LABELS[activePanel] }), _jsx("button", { onClick: () => onPanelChange(null), style: closeButtonStyle, "aria-label": "Close panel", children: "\u00D7" })] }), _jsxs("div", { style: panelBodyStyle, 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: sideBarRootStyle, 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: buttonRowStyle, children: [_jsx("button", { onClick: handleSelectAll, disabled: allVisible, style: actionButtonStyle, children: "Select All" }), _jsx("button", { onClick: handleClearAll, style: actionButtonStyle, children: "Clear All" })] }), columns.map((col) => (_jsxs("label", { style: checkboxLabelStyle, 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: noFilterStyle, children: "No filterable columns" });
-    }
-    return (_jsx(_Fragment, { children: filterableColumns.map((col) => {
-            const filterKey = col.filterField;
-            const fv = filters[filterKey];
-            return (_jsxs("div", { style: filterGroupStyle, children: [_jsx("div", { style: filterLabelStyle, children: col.name }), col.filterType === 'text' && (_jsx("input", { type: "text", value: fv?.type === 'text' ? fv.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: textInputStyle })), col.filterType === 'date' && (_jsxs("div", { style: dateContainerStyle, children: [_jsxs("label", { style: dateLabelStyle, children: ["From:", _jsx("input", { type: "date", value: fv?.type === 'date' ? (fv.value.from ?? '') : '', onChange: (e) => {
-                                            const from = e.target.value || undefined;
-                                            const existingValue = fv?.type === 'date' ? fv.value : {};
-                                            const to = existingValue.to;
-                                            onFilterChange(filterKey, from || to ? { type: 'date', value: { from, to } } : undefined);
-                                        }, "aria-label": `${col.name} from date`, style: dateInputStyle })] }), _jsxs("label", { style: dateLabelStyle, children: ["To:", _jsx("input", { type: "date", value: fv?.type === 'date' ? (fv.value.to ?? '') : '', onChange: (e) => {
-                                            const to = e.target.value || undefined;
-                                            const existingValue = fv?.type === 'date' ? fv.value : {};
-                                            const from = existingValue.from;
-                                            onFilterChange(filterKey, from || to ? { type: 'date', value: { from, to } } : undefined);
-                                        }, "aria-label": `${col.name} to date`, style: dateInputStyle })] })] })), col.filterType === 'multiSelect' && (_jsx("div", { style: multiSelectContainerStyle, role: "group", "aria-label": `${col.name} options`, children: (filterOptions[filterKey] ?? []).map((opt) => {
-                            const selected = fv?.type === 'multiSelect' ? fv.value.includes(opt) : false;
-                            return (_jsxs("label", { style: multiSelectLabelStyle, children: [_jsx("input", { type: "checkbox", checked: selected, onChange: (e) => {
-                                            const current = fv?.type === 'multiSelect' ? fv.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';
-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/components/createOGrid.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { forwardRef } from 'react';
-import { useOGrid } from '../hooks';
-import { OGridLayout } from './OGridLayout';
-/**
- * Factory that creates a memoized, forwardRef OGrid component.
- * Used by Radix and Fluent to avoid duplicating the same wiring code.
- * Material uses its own OGrid because it adds MUI theme bridging (containerSx).
- */
-export function createOGrid(components) {
-    const { DataGridTable, ColumnChooser, PaginationControls, containerComponent, containerProps, } = components;
-    const OGridInner = forwardRef(function OGridInner(props, ref) {
-        const { dataGridProps, pagination, columnChooser, layout } = useOGrid(props, ref);
-        return (_jsx(OGridLayout, { containerComponent: containerComponent, containerProps: containerProps, className: layout.className, sideBar: layout.sideBarProps, toolbar: layout.toolbar, toolbarBelow: layout.toolbarBelow, fullScreen: layout.fullScreen, toolbarEnd: columnChooser.placement === 'toolbar' ? (_jsx(ColumnChooser, { columns: columnChooser.columns, visibleColumns: columnChooser.visibleColumns, onVisibilityChange: columnChooser.onVisibilityChange, onSetVisibleColumns: columnChooser.onSetVisibleColumns })) : undefined, pagination: _jsx(PaginationControls, { currentPage: pagination.page, pageSize: pagination.pageSize, totalCount: pagination.displayTotalCount, onPageChange: pagination.setPage, onPageSizeChange: pagination.setPageSize, pageSizeOptions: pagination.pageSizeOptions, entityLabelPlural: pagination.entityLabelPlural }), children: _jsx(DataGridTable, { ...dataGridProps }) }));
-    });
-    OGridInner.displayName = 'OGrid';
-    return React.memo(OGridInner);
-}

package/dist/esm/constants/domHelpers.js

@@ -1,16 +0,0 @@
-/**
- * Module-scope stable constants shared across all React UI DataGridTable implementations.
- * Avoid per-render allocations by keeping these at module scope.
- */
-/** Root container style for the DataGridTable (flex column layout). */
-export const GRID_ROOT_STYLE = { position: 'relative', flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' };
-/** Applied to cells that support editing — shows the cell cursor. */
-export const CURSOR_CELL_STYLE = { cursor: 'cell' };
-/** Minimum size for popover anchor elements. */
-export const POPOVER_ANCHOR_STYLE = { minHeight: '100%', minWidth: 40 };
-/** Prevents the default browser action for mouse events. */
-export const PREVENT_DEFAULT = (e) => { e.preventDefault(); };
-/** No-operation function. */
-export const NOOP = () => { };
-/** Stops event propagation (e.g. click on checkbox inside a row). */
-export const STOP_PROPAGATION = (e) => { e.stopPropagation(); };

package/dist/esm/hooks/index.js

@@ -1,43 +0,0 @@
-export { useFilterOptions } from './useFilterOptions';
-export { useOGrid } from './useOGrid';
-export { useOGridPagination } from './useOGridPagination';
-export { useOGridSorting } from './useOGridSorting';
-export { useOGridFilters as useOGridFiltersState } from './useOGridFilters';
-export { useOGridDataFetching } from './useOGridDataFetching';
-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 { useDataGridLayout } from './useDataGridLayout';
-export { useDataGridEditing } from './useDataGridEditing';
-export { useDataGridInteraction } from './useDataGridInteraction';
-export { useDataGridContextMenu } from './useDataGridContextMenu';
-export { useColumnHeaderFilterState } from './useColumnHeaderFilterState';
-export { useTextFilterState } from './useTextFilterState';
-export { useMultiSelectFilterState } from './useMultiSelectFilterState';
-export { usePeopleFilterState } from './usePeopleFilterState';
-export { useDateFilterState } from './useDateFilterState';
-export { useColumnChooserState } from './useColumnChooserState';
-export { useInlineCellEditorState } from './useInlineCellEditorState';
-export { useColumnResize } from './useColumnResize';
-export { useColumnPinning } from './useColumnPinning';
-export { useColumnHeaderMenuState } from './useColumnHeaderMenuState';
-export { useRichSelectState } from './useRichSelectState';
-export { useSelectState } from './useSelectState';
-export { useSideBarState } from './useSideBarState';
-export { useTableLayout } from './useTableLayout';
-export { useColumnReorder } from './useColumnReorder';
-export { useVirtualScroll } from './useVirtualScroll';
-export { useListVirtualizer } from './useListVirtualizer';
-export { useLatestRef } from './useLatestRef';
-export { useShallowEqualMemo } from './useShallowEqualMemo';
-export { usePaginationControls } from './usePaginationControls';
-export { useDataGridTableOrchestration } from './useDataGridTableOrchestration';
-export { useColumnMeta } from './useColumnMeta';

package/dist/esm/hooks/useActiveCell.js

@@ -1,75 +0,0 @@
-import { useState, useLayoutEffect, useEffect, 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);
-    }, []);
-    // RAF ref for batching scroll-into-view during rapid keyboard navigation
-    const scrollRafRef = useRef(0);
-    // Synchronously focus the cell to prevent the browser from resetting
-    // focus to body between arrow presses.
-    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 && document.activeElement !== cell && typeof cell.focus === 'function') {
-            cell.focus({ preventScroll: true });
-        }
-    }, [activeCell, editingCell, wrapperRef]);
-    // Batch scroll-into-view via RAF so rapid keyboard navigation only scrolls once
-    useEffect(() => {
-        if (activeCell == null || wrapperRef?.current == null || editingCell != null)
-            return;
-        cancelAnimationFrame(scrollRafRef.current);
-        scrollRafRef.current = requestAnimationFrame(() => {
-            const wrapper = wrapperRef?.current;
-            if (!wrapper)
-                return;
-            const { rowIndex, columnIndex } = activeCell;
-            const selector = `[data-row-index="${rowIndex}"][data-col-index="${columnIndex}"]`;
-            const cell = wrapper.querySelector(selector);
-            if (cell) {
-                const thead = wrapper.querySelector('thead');
-                const headerHeight = thead ? thead.getBoundingClientRect().height : 0;
-                const wrapperRect = wrapper.getBoundingClientRect();
-                const cellRect = cell.getBoundingClientRect();
-                // Vertical scroll (account for sticky thead)
-                const visibleTop = wrapperRect.top + headerHeight;
-                if (cellRect.top < visibleTop) {
-                    wrapper.scrollTop -= visibleTop - cellRect.top;
-                }
-                else if (cellRect.bottom > wrapperRect.bottom) {
-                    wrapper.scrollTop += cellRect.bottom - wrapperRect.bottom;
-                }
-                // Horizontal scroll
-                if (cellRect.left < wrapperRect.left) {
-                    wrapper.scrollLeft -= wrapperRect.left - cellRect.left;
-                }
-                else if (cellRect.right > wrapperRect.right) {
-                    wrapper.scrollLeft += cellRect.right - wrapperRect.right;
-                }
-            }
-        });
-    }, [activeCell, editingCell, wrapperRef]);
-    // Clean up pending RAF on unmount
-    useEffect(() => {
-        return () => cancelAnimationFrame(scrollRafRef.current);
-    }, []);
-    return { activeCell, setActiveCell };
-}

package/dist/esm/hooks/useCellEditing.js

@@ -1,15 +0,0 @@
-import { useState } from 'react';
-/**
- * Manages cell editing state: which cell is being edited and its pending value.
- * @returns Current editing cell, setter, pending editor value, and setter.
- */
-export function useCellEditing() {
-    const [editingCell, setEditingCell] = useState(null);
-    const [pendingEditorValue, setPendingEditorValue] = useState(undefined);
-    return {
-        editingCell,
-        setEditingCell,
-        pendingEditorValue,
-        setPendingEditorValue,
-    };
-}