@alaarab/ogrid-core 1.9.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -20
- package/dist/esm/index.js +5 -15
- package/dist/esm/types/index.js +2 -1
- package/dist/esm/utils/clientSideData.js +1 -1
- package/dist/esm/utils/gridRowComparator.js +11 -1
- package/dist/esm/utils/index.js +1 -2
- package/dist/types/index.d.ts +3 -23
- package/dist/types/types/columnTypes.d.ts +3 -6
- package/dist/types/types/dataGridTypes.d.ts +1 -150
- package/dist/types/types/index.d.ts +3 -3
- package/dist/types/utils/gridRowComparator.d.ts +8 -0
- package/dist/types/utils/index.d.ts +1 -3
- package/package.json +6 -24
- package/dist/esm/components/BaseInlineCellEditor.js +0 -112
- package/dist/esm/components/CellErrorBoundary.js +0 -43
- package/dist/esm/components/EmptyState.js +0 -19
- package/dist/esm/components/GridContextMenu.js +0 -35
- package/dist/esm/components/MarchingAntsOverlay.js +0 -110
- package/dist/esm/components/OGridLayout.js +0 -91
- package/dist/esm/components/SideBar.js +0 -122
- package/dist/esm/components/StatusBar.js +0 -6
- package/dist/esm/hooks/index.js +0 -25
- package/dist/esm/hooks/useActiveCell.js +0 -62
- package/dist/esm/hooks/useCellEditing.js +0 -15
- package/dist/esm/hooks/useCellSelection.js +0 -324
- package/dist/esm/hooks/useClipboard.js +0 -162
- package/dist/esm/hooks/useColumnChooserState.js +0 -62
- package/dist/esm/hooks/useColumnHeaderFilterState.js +0 -180
- package/dist/esm/hooks/useColumnResize.js +0 -92
- package/dist/esm/hooks/useContextMenu.js +0 -21
- package/dist/esm/hooks/useDataGridState.js +0 -314
- package/dist/esm/hooks/useDateFilterState.js +0 -34
- package/dist/esm/hooks/useDebounce.js +0 -35
- package/dist/esm/hooks/useFillHandle.js +0 -196
- package/dist/esm/hooks/useFilterOptions.js +0 -40
- package/dist/esm/hooks/useInlineCellEditorState.js +0 -44
- package/dist/esm/hooks/useKeyboardNavigation.js +0 -420
- package/dist/esm/hooks/useLatestRef.js +0 -11
- package/dist/esm/hooks/useMultiSelectFilterState.js +0 -59
- package/dist/esm/hooks/useOGrid.js +0 -467
- package/dist/esm/hooks/usePeopleFilterState.js +0 -68
- package/dist/esm/hooks/useRichSelectState.js +0 -58
- package/dist/esm/hooks/useRowSelection.js +0 -78
- package/dist/esm/hooks/useSideBarState.js +0 -39
- package/dist/esm/hooks/useTableLayout.js +0 -77
- package/dist/esm/hooks/useTextFilterState.js +0 -25
- package/dist/esm/hooks/useUndoRedo.js +0 -83
- package/dist/esm/storybook/index.js +0 -1
- package/dist/esm/storybook/mockData.js +0 -73
- package/dist/esm/utils/dataGridViewModel.js +0 -233
- package/dist/types/components/BaseInlineCellEditor.d.ts +0 -33
- package/dist/types/components/CellErrorBoundary.d.ts +0 -25
- package/dist/types/components/EmptyState.d.ts +0 -26
- package/dist/types/components/GridContextMenu.d.ts +0 -18
- package/dist/types/components/MarchingAntsOverlay.d.ts +0 -15
- package/dist/types/components/OGridLayout.d.ts +0 -37
- package/dist/types/components/SideBar.d.ts +0 -30
- package/dist/types/components/StatusBar.d.ts +0 -24
- package/dist/types/hooks/index.d.ts +0 -48
- package/dist/types/hooks/useActiveCell.d.ts +0 -13
- package/dist/types/hooks/useCellEditing.d.ts +0 -16
- package/dist/types/hooks/useCellSelection.d.ts +0 -22
- package/dist/types/hooks/useClipboard.d.ts +0 -30
- package/dist/types/hooks/useColumnChooserState.d.ts +0 -27
- package/dist/types/hooks/useColumnHeaderFilterState.d.ts +0 -73
- package/dist/types/hooks/useColumnResize.d.ts +0 -23
- package/dist/types/hooks/useContextMenu.d.ts +0 -19
- package/dist/types/hooks/useDataGridState.d.ts +0 -137
- package/dist/types/hooks/useDateFilterState.d.ts +0 -19
- package/dist/types/hooks/useDebounce.d.ts +0 -9
- package/dist/types/hooks/useFillHandle.d.ts +0 -33
- package/dist/types/hooks/useFilterOptions.d.ts +0 -16
- package/dist/types/hooks/useInlineCellEditorState.d.ts +0 -24
- package/dist/types/hooks/useKeyboardNavigation.d.ts +0 -47
- package/dist/types/hooks/useLatestRef.d.ts +0 -6
- package/dist/types/hooks/useMultiSelectFilterState.d.ts +0 -24
- package/dist/types/hooks/useOGrid.d.ts +0 -52
- package/dist/types/hooks/usePeopleFilterState.d.ts +0 -25
- package/dist/types/hooks/useRichSelectState.d.ts +0 -22
- package/dist/types/hooks/useRowSelection.d.ts +0 -22
- package/dist/types/hooks/useSideBarState.d.ts +0 -20
- package/dist/types/hooks/useTableLayout.d.ts +0 -27
- package/dist/types/hooks/useTextFilterState.d.ts +0 -16
- package/dist/types/hooks/useUndoRedo.d.ts +0 -23
- package/dist/types/storybook/index.d.ts +0 -2
- package/dist/types/storybook/mockData.d.ts +0 -37
- package/dist/types/utils/dataGridViewModel.d.ts +0 -169
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
/**
|
|
3
|
-
* MarchingAntsOverlay — Renders range overlays on top of the grid:
|
|
4
|
-
*
|
|
5
|
-
* 1. **Selection range**: solid green border around the current selection
|
|
6
|
-
* 2. **Copy/Cut range**: animated dashed border (marching ants) like Excel
|
|
7
|
-
*
|
|
8
|
-
* Uses SVG rects positioned via cell data-attribute measurements.
|
|
9
|
-
*/
|
|
10
|
-
import { useEffect, useRef, useState, useCallback } from 'react';
|
|
11
|
-
const MARCHING_ANTS_ANIMATION = { animation: 'ogrid-marching-ants 0.5s linear infinite' };
|
|
12
|
-
// Inject the @keyframes rule once into <head> (deduplicates across multiple OGrid instances / module copies)
|
|
13
|
-
function ensureKeyframes() {
|
|
14
|
-
if (typeof document === 'undefined')
|
|
15
|
-
return;
|
|
16
|
-
if (document.getElementById('ogrid-marching-ants-keyframes'))
|
|
17
|
-
return;
|
|
18
|
-
const style = document.createElement('style');
|
|
19
|
-
style.id = 'ogrid-marching-ants-keyframes';
|
|
20
|
-
style.textContent =
|
|
21
|
-
'@keyframes ogrid-marching-ants{to{stroke-dashoffset:-8}}';
|
|
22
|
-
document.head.appendChild(style);
|
|
23
|
-
}
|
|
24
|
-
/** Measure the bounding rect of a range within a container. */
|
|
25
|
-
function measureRange(container, range, colOffset) {
|
|
26
|
-
const startGlobalCol = range.startCol + colOffset;
|
|
27
|
-
const endGlobalCol = range.endCol + colOffset;
|
|
28
|
-
const topLeft = container.querySelector(`[data-row-index="${range.startRow}"][data-col-index="${startGlobalCol}"]`);
|
|
29
|
-
const bottomRight = container.querySelector(`[data-row-index="${range.endRow}"][data-col-index="${endGlobalCol}"]`);
|
|
30
|
-
if (!topLeft || !bottomRight)
|
|
31
|
-
return null;
|
|
32
|
-
const cRect = container.getBoundingClientRect();
|
|
33
|
-
const tlRect = topLeft.getBoundingClientRect();
|
|
34
|
-
const brRect = bottomRight.getBoundingClientRect();
|
|
35
|
-
return {
|
|
36
|
-
top: tlRect.top - cRect.top,
|
|
37
|
-
left: tlRect.left - cRect.left,
|
|
38
|
-
width: brRect.right - tlRect.left,
|
|
39
|
-
height: brRect.bottom - tlRect.top,
|
|
40
|
-
};
|
|
41
|
-
}
|
|
42
|
-
export function MarchingAntsOverlay({ containerRef, selectionRange, copyRange, cutRange, colOffset, }) {
|
|
43
|
-
const [selRect, setSelRect] = useState(null);
|
|
44
|
-
const [clipRect, setClipRect] = useState(null);
|
|
45
|
-
const rafRef = useRef(0);
|
|
46
|
-
const clipRange = copyRange ?? cutRange;
|
|
47
|
-
const measureAll = useCallback(() => {
|
|
48
|
-
const container = containerRef.current;
|
|
49
|
-
if (!container) {
|
|
50
|
-
setSelRect(null);
|
|
51
|
-
setClipRect(null);
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
setSelRect(selectionRange ? measureRange(container, selectionRange, colOffset) : null);
|
|
55
|
-
setClipRect(clipRange ? measureRange(container, clipRange, colOffset) : null);
|
|
56
|
-
}, [selectionRange, clipRange, containerRef, colOffset]);
|
|
57
|
-
// Inject keyframes on mount
|
|
58
|
-
useEffect(() => {
|
|
59
|
-
ensureKeyframes();
|
|
60
|
-
}, []);
|
|
61
|
-
// Measure when any range changes; re-measure on resize
|
|
62
|
-
useEffect(() => {
|
|
63
|
-
if (!selectionRange && !clipRange) {
|
|
64
|
-
setSelRect(null);
|
|
65
|
-
setClipRect(null);
|
|
66
|
-
return;
|
|
67
|
-
}
|
|
68
|
-
// Delay one frame so cells are rendered
|
|
69
|
-
rafRef.current = requestAnimationFrame(measureAll);
|
|
70
|
-
const container = containerRef.current;
|
|
71
|
-
let ro;
|
|
72
|
-
if (container) {
|
|
73
|
-
ro = new ResizeObserver(measureAll);
|
|
74
|
-
ro.observe(container);
|
|
75
|
-
}
|
|
76
|
-
return () => {
|
|
77
|
-
cancelAnimationFrame(rafRef.current);
|
|
78
|
-
ro?.disconnect();
|
|
79
|
-
};
|
|
80
|
-
}, [selectionRange, clipRange, measureAll, containerRef]);
|
|
81
|
-
if (!selRect && !clipRect)
|
|
82
|
-
return null;
|
|
83
|
-
// When clipboard range matches the selection range, hide the solid selection border
|
|
84
|
-
// so the marching ants animation is clearly visible (not obscured by solid stroke underneath).
|
|
85
|
-
const clipRangeMatchesSel = selectionRange != null &&
|
|
86
|
-
clipRange != null &&
|
|
87
|
-
selectionRange.startRow === clipRange.startRow &&
|
|
88
|
-
selectionRange.startCol === clipRange.startCol &&
|
|
89
|
-
selectionRange.endRow === clipRange.endRow &&
|
|
90
|
-
selectionRange.endCol === clipRange.endCol;
|
|
91
|
-
return (_jsxs(_Fragment, { children: [selRect && !clipRangeMatchesSel && (_jsx("svg", { style: {
|
|
92
|
-
position: 'absolute',
|
|
93
|
-
top: selRect.top,
|
|
94
|
-
left: selRect.left,
|
|
95
|
-
width: selRect.width,
|
|
96
|
-
height: selRect.height,
|
|
97
|
-
pointerEvents: 'none',
|
|
98
|
-
zIndex: 4,
|
|
99
|
-
overflow: 'visible',
|
|
100
|
-
}, "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: {
|
|
101
|
-
position: 'absolute',
|
|
102
|
-
top: clipRect.top,
|
|
103
|
-
left: clipRect.left,
|
|
104
|
-
width: clipRect.width,
|
|
105
|
-
height: clipRect.height,
|
|
106
|
-
pointerEvents: 'none',
|
|
107
|
-
zIndex: 5,
|
|
108
|
-
overflow: 'visible',
|
|
109
|
-
}, "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: MARCHING_ANTS_ANIMATION }) }))] }));
|
|
110
|
-
}
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { SideBar } from './SideBar';
|
|
3
|
-
import { GRID_BORDER_RADIUS } from '../constants';
|
|
4
|
-
// Stable style objects (avoid re-creating on every render)
|
|
5
|
-
const borderedContainerStyle = {
|
|
6
|
-
border: '1px solid var(--ogrid-border, #e0e0e0)',
|
|
7
|
-
borderRadius: GRID_BORDER_RADIUS,
|
|
8
|
-
overflow: 'hidden',
|
|
9
|
-
display: 'flex',
|
|
10
|
-
flexDirection: 'column',
|
|
11
|
-
flex: 1,
|
|
12
|
-
minHeight: 0,
|
|
13
|
-
background: 'var(--ogrid-bg, #fff)',
|
|
14
|
-
};
|
|
15
|
-
const toolbarStripBase = {
|
|
16
|
-
display: 'flex',
|
|
17
|
-
justifyContent: 'space-between',
|
|
18
|
-
alignItems: 'center',
|
|
19
|
-
padding: '6px 12px',
|
|
20
|
-
background: 'var(--ogrid-header-bg, #f5f5f5)',
|
|
21
|
-
gap: 8,
|
|
22
|
-
flexWrap: 'wrap',
|
|
23
|
-
minHeight: 0,
|
|
24
|
-
};
|
|
25
|
-
/** Toolbar strip with border-bottom (when it's the only toolbar row). */
|
|
26
|
-
const toolbarStripStyle = {
|
|
27
|
-
...toolbarStripBase,
|
|
28
|
-
borderBottom: '1px solid var(--ogrid-border, #e0e0e0)',
|
|
29
|
-
};
|
|
30
|
-
/** Toolbar strip without border-bottom (when toolbarBelow follows — it owns the border). */
|
|
31
|
-
const toolbarStripNoBorderStyle = toolbarStripBase;
|
|
32
|
-
const toolbarSectionStyle = {
|
|
33
|
-
display: 'flex',
|
|
34
|
-
alignItems: 'center',
|
|
35
|
-
gap: 8,
|
|
36
|
-
};
|
|
37
|
-
/** Secondary toolbar row (e.g. active filter chips). Matches toolbar strip styling. */
|
|
38
|
-
const toolbarBelowStyle = {
|
|
39
|
-
borderBottom: '1px solid var(--ogrid-border, #e0e0e0)',
|
|
40
|
-
padding: '6px 12px',
|
|
41
|
-
background: 'var(--ogrid-header-bg, #f5f5f5)',
|
|
42
|
-
};
|
|
43
|
-
const footerStripStyle = {
|
|
44
|
-
borderTop: '1px solid var(--ogrid-border, #e0e0e0)',
|
|
45
|
-
background: 'var(--ogrid-header-bg, #f5f5f5)',
|
|
46
|
-
padding: '6px 12px',
|
|
47
|
-
};
|
|
48
|
-
const gridAreaFlexStyle = {
|
|
49
|
-
width: '100%',
|
|
50
|
-
minWidth: 0,
|
|
51
|
-
minHeight: 0,
|
|
52
|
-
flex: 1,
|
|
53
|
-
display: 'flex',
|
|
54
|
-
};
|
|
55
|
-
const gridAreaSoloStyle = {
|
|
56
|
-
width: '100%',
|
|
57
|
-
minWidth: 0,
|
|
58
|
-
minHeight: 0,
|
|
59
|
-
flex: 1,
|
|
60
|
-
display: 'flex',
|
|
61
|
-
flexDirection: 'column',
|
|
62
|
-
};
|
|
63
|
-
const gridChildStyle = {
|
|
64
|
-
flex: 1,
|
|
65
|
-
minWidth: 0,
|
|
66
|
-
minHeight: 0,
|
|
67
|
-
display: 'flex',
|
|
68
|
-
flexDirection: 'column',
|
|
69
|
-
};
|
|
70
|
-
const rootStyle = {
|
|
71
|
-
display: 'flex',
|
|
72
|
-
flexDirection: 'column',
|
|
73
|
-
height: '100%',
|
|
74
|
-
};
|
|
75
|
-
/**
|
|
76
|
-
* Renders OGrid layout as a unified bordered container:
|
|
77
|
-
* ┌────────────────────────────────────┐
|
|
78
|
-
* │ [toolbar strip] │
|
|
79
|
-
* ├────────────────────────────────────┤
|
|
80
|
-
* │ [sidebar]? [grid] │
|
|
81
|
-
* ├────────────────────────────────────┤
|
|
82
|
-
* │ [footer strip / pagination] │
|
|
83
|
-
* └────────────────────────────────────┘
|
|
84
|
-
*/
|
|
85
|
-
export function OGridLayout(props) {
|
|
86
|
-
const { containerComponent: Container = 'div', containerProps = {}, className, toolbar, toolbarEnd, toolbarBelow, children, pagination, sideBar, } = props;
|
|
87
|
-
const hasSideBar = sideBar != null;
|
|
88
|
-
const sideBarPosition = sideBar?.position ?? 'right';
|
|
89
|
-
const hasToolbar = toolbar != null || toolbarEnd != null;
|
|
90
|
-
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 }))] }) }));
|
|
91
|
-
}
|
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
const PANEL_WIDTH = 240;
|
|
3
|
-
const TAB_WIDTH = 36;
|
|
4
|
-
const PANEL_LABELS = {
|
|
5
|
-
columns: 'Columns',
|
|
6
|
-
filters: 'Filters',
|
|
7
|
-
};
|
|
8
|
-
// --- Stable style objects (avoid re-creating on every render) ---
|
|
9
|
-
const tabStripBaseStyle = {
|
|
10
|
-
display: 'flex',
|
|
11
|
-
flexDirection: 'column',
|
|
12
|
-
width: TAB_WIDTH,
|
|
13
|
-
background: 'var(--ogrid-header-bg, #f5f5f5)',
|
|
14
|
-
};
|
|
15
|
-
const tabStripBorderLeft = { ...tabStripBaseStyle, borderLeft: '1px solid var(--ogrid-border, #e0e0e0)' };
|
|
16
|
-
const tabStripBorderRight = { ...tabStripBaseStyle, borderRight: '1px solid var(--ogrid-border, #e0e0e0)' };
|
|
17
|
-
const tabButtonBase = {
|
|
18
|
-
width: TAB_WIDTH,
|
|
19
|
-
height: TAB_WIDTH,
|
|
20
|
-
border: 'none',
|
|
21
|
-
cursor: 'pointer',
|
|
22
|
-
color: 'var(--ogrid-fg, #242424)',
|
|
23
|
-
fontSize: 14,
|
|
24
|
-
display: 'flex',
|
|
25
|
-
alignItems: 'center',
|
|
26
|
-
justifyContent: 'center',
|
|
27
|
-
};
|
|
28
|
-
const tabButtonActive = { ...tabButtonBase, background: 'var(--ogrid-bg, #fff)', fontWeight: 'bold' };
|
|
29
|
-
const tabButtonInactive = { ...tabButtonBase, background: 'transparent', fontWeight: 'normal' };
|
|
30
|
-
const panelContainerBase = {
|
|
31
|
-
width: PANEL_WIDTH,
|
|
32
|
-
display: 'flex',
|
|
33
|
-
flexDirection: 'column',
|
|
34
|
-
overflow: 'hidden',
|
|
35
|
-
background: 'var(--ogrid-bg, #fff)',
|
|
36
|
-
color: 'var(--ogrid-fg, #242424)',
|
|
37
|
-
};
|
|
38
|
-
const panelContainerBorderLeft = { ...panelContainerBase, borderLeft: '1px solid var(--ogrid-border, #e0e0e0)' };
|
|
39
|
-
const panelContainerBorderRight = { ...panelContainerBase, borderRight: '1px solid var(--ogrid-border, #e0e0e0)' };
|
|
40
|
-
const panelHeaderStyle = {
|
|
41
|
-
display: 'flex',
|
|
42
|
-
justifyContent: 'space-between',
|
|
43
|
-
alignItems: 'center',
|
|
44
|
-
padding: '8px 12px',
|
|
45
|
-
borderBottom: '1px solid var(--ogrid-border, #e0e0e0)',
|
|
46
|
-
fontWeight: 600,
|
|
47
|
-
};
|
|
48
|
-
const closeButtonStyle = { border: 'none', background: 'transparent', cursor: 'pointer', fontSize: 16, color: 'var(--ogrid-fg, #242424)' };
|
|
49
|
-
const panelBodyStyle = { flex: 1, overflowY: 'auto', padding: '8px 12px' };
|
|
50
|
-
const sideBarRootStyle = { display: 'flex', flexDirection: 'row', flexShrink: 0 };
|
|
51
|
-
const buttonRowStyle = { display: 'flex', gap: 8, marginBottom: 8 };
|
|
52
|
-
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' };
|
|
53
|
-
const checkboxLabelStyle = { display: 'flex', alignItems: 'center', gap: 6, padding: '2px 0', cursor: 'pointer' };
|
|
54
|
-
const noFilterStyle = { color: 'var(--ogrid-muted, #999)', fontStyle: 'italic' };
|
|
55
|
-
const filterGroupStyle = { marginBottom: 12 };
|
|
56
|
-
const filterLabelStyle = { fontWeight: 500, marginBottom: 4, fontSize: 13 };
|
|
57
|
-
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 };
|
|
58
|
-
const dateContainerStyle = { display: 'flex', flexDirection: 'column', gap: 4 };
|
|
59
|
-
const dateLabelStyle = { display: 'flex', alignItems: 'center', gap: 4, fontSize: 12 };
|
|
60
|
-
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 };
|
|
61
|
-
const multiSelectContainerStyle = { maxHeight: 120, overflowY: 'auto' };
|
|
62
|
-
const multiSelectLabelStyle = { display: 'flex', alignItems: 'center', gap: 4, padding: '1px 0', cursor: 'pointer', fontSize: 13 };
|
|
63
|
-
export function SideBar(props) {
|
|
64
|
-
const { activePanel, onPanelChange, panels, position, columns, visibleColumns, onVisibilityChange, onSetVisibleColumns, filterableColumns, filters, onFilterChange, filterOptions, } = props;
|
|
65
|
-
const isOpen = activePanel !== null;
|
|
66
|
-
const handleTabClick = (panel) => {
|
|
67
|
-
onPanelChange(activePanel === panel ? null : panel);
|
|
68
|
-
};
|
|
69
|
-
const tabStripStyle = position === 'right' ? tabStripBorderLeft : tabStripBorderRight;
|
|
70
|
-
const panelContainerStyle = position === 'right' ? panelContainerBorderLeft : panelContainerBorderRight;
|
|
71
|
-
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))) }));
|
|
72
|
-
const panelContent = isOpen ? (_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;
|
|
73
|
-
return (_jsxs("div", { style: sideBarRootStyle, role: "complementary", "aria-label": "Side bar", children: [position === 'left' && tabStrip, position === 'left' && panelContent, position === 'right' && panelContent, position === 'right' && tabStrip] }));
|
|
74
|
-
}
|
|
75
|
-
// --- Internal sub-components ---
|
|
76
|
-
function ColumnsPanel(props) {
|
|
77
|
-
const { columns, visibleColumns, onVisibilityChange, onSetVisibleColumns } = props;
|
|
78
|
-
const allVisible = columns.every((c) => visibleColumns.has(c.columnId));
|
|
79
|
-
const handleSelectAll = () => {
|
|
80
|
-
const next = new Set(visibleColumns);
|
|
81
|
-
columns.forEach((c) => next.add(c.columnId));
|
|
82
|
-
onSetVisibleColumns(next);
|
|
83
|
-
};
|
|
84
|
-
const handleClearAll = () => {
|
|
85
|
-
const next = new Set();
|
|
86
|
-
columns.forEach((c) => {
|
|
87
|
-
if (c.required && visibleColumns.has(c.columnId))
|
|
88
|
-
next.add(c.columnId);
|
|
89
|
-
});
|
|
90
|
-
onSetVisibleColumns(next);
|
|
91
|
-
};
|
|
92
|
-
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)))] }));
|
|
93
|
-
}
|
|
94
|
-
function FiltersPanel(props) {
|
|
95
|
-
const { filterableColumns, filters, onFilterChange, filterOptions } = props;
|
|
96
|
-
if (filterableColumns.length === 0) {
|
|
97
|
-
return _jsx("div", { style: noFilterStyle, children: "No filterable columns" });
|
|
98
|
-
}
|
|
99
|
-
return (_jsx(_Fragment, { children: filterableColumns.map((col) => {
|
|
100
|
-
const filterKey = col.filterField;
|
|
101
|
-
return (_jsxs("div", { style: filterGroupStyle, children: [_jsx("div", { style: filterLabelStyle, 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: textInputStyle })), col.filterType === 'date' && (_jsxs("div", { style: dateContainerStyle, children: [_jsxs("label", { style: dateLabelStyle, children: ["From:", _jsx("input", { type: "date", value: filters[filterKey]?.type === 'date' ? (filters[filterKey].value.from ?? '') : '', onChange: (e) => {
|
|
102
|
-
const from = e.target.value || undefined;
|
|
103
|
-
const existingValue = filters[filterKey]?.type === 'date' ? filters[filterKey].value : {};
|
|
104
|
-
const to = existingValue.to;
|
|
105
|
-
onFilterChange(filterKey, from || to ? { type: 'date', value: { from, to } } : undefined);
|
|
106
|
-
}, "aria-label": `${col.name} from date`, style: dateInputStyle })] }), _jsxs("label", { style: dateLabelStyle, children: ["To:", _jsx("input", { type: "date", value: filters[filterKey]?.type === 'date' ? (filters[filterKey].value.to ?? '') : '', onChange: (e) => {
|
|
107
|
-
const to = e.target.value || undefined;
|
|
108
|
-
const existingValue = filters[filterKey]?.type === 'date' ? filters[filterKey].value : {};
|
|
109
|
-
const from = existingValue.from;
|
|
110
|
-
onFilterChange(filterKey, from || to ? { type: 'date', value: { from, to } } : undefined);
|
|
111
|
-
}, "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) => {
|
|
112
|
-
const selected = filters[filterKey]?.type === 'multiSelect' ? filters[filterKey].value.includes(opt) : false;
|
|
113
|
-
return (_jsxs("label", { style: multiSelectLabelStyle, children: [_jsx("input", { type: "checkbox", checked: selected, onChange: (e) => {
|
|
114
|
-
const current = filters[filterKey]?.type === 'multiSelect' ? filters[filterKey].value : [];
|
|
115
|
-
const next = e.target.checked
|
|
116
|
-
? [...current, opt]
|
|
117
|
-
: current.filter((v) => v !== opt);
|
|
118
|
-
onFilterChange(filterKey, next.length > 0 ? { type: 'multiSelect', value: next } : undefined);
|
|
119
|
-
} }), _jsx("span", { children: opt })] }, opt));
|
|
120
|
-
}) }))] }, col.columnId));
|
|
121
|
-
}) }));
|
|
122
|
-
}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { getStatusBarParts } from '../utils/statusBarHelpers';
|
|
3
|
-
export function StatusBar({ classNames, ...rest }) {
|
|
4
|
-
const parts = getStatusBarParts(rest);
|
|
5
|
-
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))) }));
|
|
6
|
-
}
|
package/dist/esm/hooks/index.js
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
export { useFilterOptions } from './useFilterOptions';
|
|
2
|
-
export { useOGrid } from './useOGrid';
|
|
3
|
-
export { useActiveCell } from './useActiveCell';
|
|
4
|
-
export { useCellEditing } from './useCellEditing';
|
|
5
|
-
export { useContextMenu } from './useContextMenu';
|
|
6
|
-
export { useCellSelection } from './useCellSelection';
|
|
7
|
-
export { useClipboard } from './useClipboard';
|
|
8
|
-
export { useRowSelection } from './useRowSelection';
|
|
9
|
-
export { useKeyboardNavigation } from './useKeyboardNavigation';
|
|
10
|
-
export { useUndoRedo } from './useUndoRedo';
|
|
11
|
-
export { useDebounce } from './useDebounce';
|
|
12
|
-
export { useFillHandle } from './useFillHandle';
|
|
13
|
-
export { useDataGridState } from './useDataGridState';
|
|
14
|
-
export { useColumnHeaderFilterState } from './useColumnHeaderFilterState';
|
|
15
|
-
export { useTextFilterState } from './useTextFilterState';
|
|
16
|
-
export { useMultiSelectFilterState } from './useMultiSelectFilterState';
|
|
17
|
-
export { usePeopleFilterState } from './usePeopleFilterState';
|
|
18
|
-
export { useDateFilterState } from './useDateFilterState';
|
|
19
|
-
export { useColumnChooserState } from './useColumnChooserState';
|
|
20
|
-
export { useInlineCellEditorState } from './useInlineCellEditorState';
|
|
21
|
-
export { useColumnResize } from './useColumnResize';
|
|
22
|
-
export { useRichSelectState } from './useRichSelectState';
|
|
23
|
-
export { useSideBarState } from './useSideBarState';
|
|
24
|
-
export { useTableLayout } from './useTableLayout';
|
|
25
|
-
export { useLatestRef } from './useLatestRef';
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import { useState, useLayoutEffect, useCallback, useRef } from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* Tracks the active cell for keyboard navigation.
|
|
4
|
-
* When wrapperRef and editingCell are provided, scrolls the active cell into view when it changes (and not editing).
|
|
5
|
-
*/
|
|
6
|
-
export function useActiveCell(wrapperRef, editingCell) {
|
|
7
|
-
const [activeCell, _setActiveCell] = useState(null);
|
|
8
|
-
const activeCellRef = useRef(activeCell);
|
|
9
|
-
activeCellRef.current = activeCell;
|
|
10
|
-
// Deduplicating setter — skips state update (and all downstream effects) when
|
|
11
|
-
// the cell coordinates haven't actually changed. This prevents re-renders when
|
|
12
|
-
// rapidly clicking the same cell.
|
|
13
|
-
const setActiveCell = useCallback((cell) => {
|
|
14
|
-
const prev = activeCellRef.current;
|
|
15
|
-
if (prev === cell)
|
|
16
|
-
return;
|
|
17
|
-
if (prev && cell && prev.rowIndex === cell.rowIndex && prev.columnIndex === cell.columnIndex)
|
|
18
|
-
return;
|
|
19
|
-
_setActiveCell(cell);
|
|
20
|
-
}, []);
|
|
21
|
-
// useLayoutEffect ensures focus moves synchronously before the browser can
|
|
22
|
-
// reset focus to body (fixes left/right arrow navigation losing focus)
|
|
23
|
-
useLayoutEffect(() => {
|
|
24
|
-
if (activeCell == null ||
|
|
25
|
-
wrapperRef?.current == null ||
|
|
26
|
-
editingCell != null)
|
|
27
|
-
return;
|
|
28
|
-
const { rowIndex, columnIndex } = activeCell;
|
|
29
|
-
const selector = `[data-row-index="${rowIndex}"][data-col-index="${columnIndex}"]`;
|
|
30
|
-
const cell = wrapperRef.current.querySelector(selector);
|
|
31
|
-
if (cell) {
|
|
32
|
-
// Scroll the cell into view within the table wrapper only — do NOT
|
|
33
|
-
// use native scrollIntoView() which scrolls all ancestor containers
|
|
34
|
-
// including the page, causing an unwanted viewport jump.
|
|
35
|
-
const wrapper = wrapperRef.current;
|
|
36
|
-
const thead = wrapper.querySelector('thead');
|
|
37
|
-
const headerHeight = thead ? thead.getBoundingClientRect().height : 0;
|
|
38
|
-
const wrapperRect = wrapper.getBoundingClientRect();
|
|
39
|
-
const cellRect = cell.getBoundingClientRect();
|
|
40
|
-
// Vertical scroll (account for sticky thead)
|
|
41
|
-
const visibleTop = wrapperRect.top + headerHeight;
|
|
42
|
-
if (cellRect.top < visibleTop) {
|
|
43
|
-
wrapper.scrollTop -= visibleTop - cellRect.top;
|
|
44
|
-
}
|
|
45
|
-
else if (cellRect.bottom > wrapperRect.bottom) {
|
|
46
|
-
wrapper.scrollTop += cellRect.bottom - wrapperRect.bottom;
|
|
47
|
-
}
|
|
48
|
-
// Horizontal scroll
|
|
49
|
-
if (cellRect.left < wrapperRect.left) {
|
|
50
|
-
wrapper.scrollLeft -= wrapperRect.left - cellRect.left;
|
|
51
|
-
}
|
|
52
|
-
else if (cellRect.right > wrapperRect.right) {
|
|
53
|
-
wrapper.scrollLeft += cellRect.right - wrapperRect.right;
|
|
54
|
-
}
|
|
55
|
-
if (document.activeElement !== cell && typeof cell.focus === 'function') {
|
|
56
|
-
cell.focus({ preventScroll: true });
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
60
|
-
}, [activeCell, editingCell]); // wrapperRef excluded — refs are stable across renders
|
|
61
|
-
return { activeCell, setActiveCell };
|
|
62
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { useState } from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* Manages cell editing state: which cell is being edited and its pending value.
|
|
4
|
-
* @returns Current editing cell, setter, pending editor value, and setter.
|
|
5
|
-
*/
|
|
6
|
-
export function useCellEditing() {
|
|
7
|
-
const [editingCell, setEditingCell] = useState(null);
|
|
8
|
-
const [pendingEditorValue, setPendingEditorValue] = useState(undefined);
|
|
9
|
-
return {
|
|
10
|
-
editingCell,
|
|
11
|
-
setEditingCell,
|
|
12
|
-
pendingEditorValue,
|
|
13
|
-
setPendingEditorValue,
|
|
14
|
-
};
|
|
15
|
-
}
|