m9-react-data-grid 7.0.0-beta.7.11

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/lib/bundle.cjs ADDED
@@ -0,0 +1,2637 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const react = require('react');
6
+ const clsx = require('clsx');
7
+ const jsxRuntime = require('react/jsx-runtime');
8
+
9
+ function styleInject(css, ref) {
10
+ if ( ref === void 0 ) ref = {};
11
+ var insertAt = ref.insertAt;
12
+
13
+ if (!css || typeof document === 'undefined') { return; }
14
+
15
+ var head = document.head || document.getElementsByTagName('head')[0];
16
+ var style = document.createElement('style');
17
+ style.type = 'text/css';
18
+
19
+ if (insertAt === 'top') {
20
+ if (head.firstChild) {
21
+ head.insertBefore(style, head.firstChild);
22
+ } else {
23
+ head.appendChild(style);
24
+ }
25
+ } else {
26
+ head.appendChild(style);
27
+ }
28
+
29
+ if (style.styleSheet) {
30
+ style.styleSheet.cssText = css;
31
+ } else {
32
+ style.appendChild(document.createTextNode(css));
33
+ }
34
+ }
35
+
36
+ var css_248z$e = ".cj343x0700-beta711{background-color:inherit;border-bottom:1px solid var(--border-color);border-right:1px solid var(--border-color);contain:strict;contain:size layout style paint;outline:none;overflow:hidden;overflow:clip;padding:0 8px;text-overflow:ellipsis;white-space:nowrap}.cj343x0700-beta711[aria-selected=true]{box-shadow:inset 0 0 0 2px var(--selection-color)}.csofj7r700-beta711{position:sticky;z-index:1}.ch2wcw8700-beta711{box-shadow:2px 0 5px -2px hsla(0,0%,53%,.3)}";
37
+ styleInject(css_248z$e,{"insertAt":"top"});
38
+
39
+ const cell = "cj343x0700-beta711";
40
+ const cellClassname = `rdg-cell ${cell}`;
41
+ const cellFrozen = "csofj7r700-beta711";
42
+ const cellFrozenClassname = `rdg-cell-frozen ${cellFrozen}`;
43
+ const cellFrozenLast = "ch2wcw8700-beta711";
44
+ const cellFrozenLastClassname = `rdg-cell-frozen-last ${cellFrozenLast}`;
45
+
46
+ var css_248z$d = ".rnvodz5700-beta711{--color:#000;--border-color:#ddd;--summary-border-color:#aaa;--background-color:#fff;--header-background-color:#f9f9f9;--row-hover-background-color:#f5f5f5;--row-selected-background-color:#dbecfa;--row-selected-hover-background-color:#c9e3f8;--checkbox-color:#005194;--checkbox-focus-color:#61b8ff;--checkbox-disabled-border-color:#ccc;--checkbox-disabled-background-color:#ddd;--selection-color:#66afe9;--font-size:14px;background-color:var(--background-color);border:1px solid var(--border-color);box-sizing:border-box;color:var(--color);color-scheme:var(--color-scheme,light dark);contain:strict;contain:size layout style paint;content-visibility:auto;direction:ltr;font-size:var(--font-size);height:350px;overflow:auto;user-select:none}@supports not (contain:strict){.rnvodz5700-beta711{position:relative;z-index:0}}.rnvodz5700-beta711 *,.rnvodz5700-beta711 :after,.rnvodz5700-beta711 :before{box-sizing:inherit}.rnvodz5700-beta711.rdg-dark{--color-scheme:dark;--color:#ddd;--border-color:#444;--summary-border-color:#555;--background-color:#212121;--header-background-color:#1b1b1b;--row-hover-background-color:#171717;--row-selected-background-color:#1a73bc;--row-selected-hover-background-color:#1768ab;--checkbox-color:#94cfff;--checkbox-focus-color:#c7e6ff;--checkbox-disabled-border-color:#000;--checkbox-disabled-background-color:#333}.rnvodz5700-beta711.rdg-light{--color-scheme:light}@media (prefers-color-scheme:dark){.rnvodz5700-beta711:not(.rdg-light){--color:#ddd;--border-color:#444;--summary-border-color:#555;--background-color:#212121;--header-background-color:#1b1b1b;--row-hover-background-color:#171717;--row-selected-background-color:#1a73bc;--row-selected-hover-background-color:#1768ab;--checkbox-color:#94cfff;--checkbox-focus-color:#c7e6ff;--checkbox-disabled-border-color:#000;--checkbox-disabled-background-color:#333}}.vlqv91k700-beta711.r1upfr80700-beta711{cursor:move}";
47
+ styleInject(css_248z$d,{"insertAt":"top"});
48
+
49
+ const root = "rnvodz5700-beta711";
50
+ const rootClassname = `rdg ${root}`;
51
+ const viewportDragging = "vlqv91k700-beta711";
52
+ const viewportDraggingClassname = `rdg-viewport-dragging ${viewportDragging}`;
53
+
54
+ var css_248z$c = ".r1upfr80700-beta711{background-color:var(--background-color);contain:strict;contain:size layout style paint;display:grid;grid-template-columns:var(--template-columns);grid-template-rows:var(--row-height);height:var(--row-height);left:0;line-height:var(--row-height);position:absolute;width:var(--row-width)}.r1upfr80700-beta711:hover{background-color:var(--row-hover-background-color)}.r1upfr80700-beta711[aria-selected=true]{background-color:var(--row-selected-background-color)}.r1upfr80700-beta711[aria-selected=true]:hover{background-color:var(--row-selected-hover-background-color)}";
55
+ styleInject(css_248z$c,{"insertAt":"top"});
56
+
57
+ const row = "r1upfr80700-beta711";
58
+ const rowClassname = `rdg-row ${row}`;
59
+
60
+ const useLayoutEffect = typeof window === 'undefined' ? react.useEffect : react.useLayoutEffect;
61
+
62
+ function useFocusRef(isSelected) {
63
+ const ref = react.useRef(null);
64
+ useLayoutEffect(() => {
65
+ if (!isSelected) return;
66
+ ref.current?.focus({
67
+ preventScroll: true
68
+ });
69
+ }, [isSelected]);
70
+ return {
71
+ ref,
72
+ tabIndex: isSelected ? 0 : -1
73
+ };
74
+ }
75
+
76
+ var css_248z$b = ".c4l3n6v700-beta711{align-items:center;cursor:pointer;display:flex;inset:0;justify-content:center;margin-right:1px;position:absolute}.c1bikpmb700-beta711{all:unset;margin:0;width:0}.c1eyot7g700-beta711{background-color:var(--background-color);border:2px solid var(--border-color);content:\"\";height:20px;width:20px}.c1bikpmb700-beta711:checked+.c1eyot7g700-beta711{background-color:var(--checkbox-color);box-shadow:inset 0 0 0 4px var(--background-color)}.c1bikpmb700-beta711:focus+.c1eyot7g700-beta711{border-color:var(--checkbox-focus-color)}.c1jlcvp4700-beta711{cursor:default}.c1jlcvp4700-beta711 .c1eyot7g700-beta711{background-color:var(--checkbox-disabled-background-color);border-color:var(--checkbox-disabled-border-color)}";
77
+ styleInject(css_248z$b,{"insertAt":"top"});
78
+
79
+ const checkboxLabel = "c4l3n6v700-beta711";
80
+ const checkboxLabelClassname = `rdg-checkbox-label ${checkboxLabel}`;
81
+ const checkboxInput = "c1bikpmb700-beta711";
82
+ const checkboxInputClassname = `rdg-checkbox-input ${checkboxInput}`;
83
+ const checkbox = "c1eyot7g700-beta711";
84
+ const checkboxClassname = `rdg-checkbox ${checkbox}`;
85
+ const checkboxLabelDisabled = "c1jlcvp4700-beta711";
86
+ const checkboxLabelDisabledClassname = `rdg-checkbox-label-disabled ${checkboxLabelDisabled}`;
87
+ function SelectCellFormatter({
88
+ value,
89
+ isCellSelected,
90
+ disabled,
91
+ onClick,
92
+ onChange,
93
+ 'aria-label': ariaLabel,
94
+ 'aria-labelledby': ariaLabelledBy
95
+ }) {
96
+ const {
97
+ ref,
98
+ tabIndex
99
+ } = useFocusRef(isCellSelected);
100
+ function handleChange(e) {
101
+ onChange(e.target.checked, e.nativeEvent.shiftKey);
102
+ }
103
+ return /*#__PURE__*/jsxRuntime.jsxs("label", {
104
+ className: clsx(checkboxLabelClassname, disabled && checkboxLabelDisabledClassname),
105
+ children: [/*#__PURE__*/jsxRuntime.jsx("input", {
106
+ "aria-label": ariaLabel,
107
+ "aria-labelledby": ariaLabelledBy,
108
+ ref: ref,
109
+ type: "checkbox",
110
+ tabIndex: tabIndex,
111
+ className: checkboxInputClassname,
112
+ disabled: disabled,
113
+ checked: value,
114
+ onChange: handleChange,
115
+ onClick: onClick
116
+ }), /*#__PURE__*/jsxRuntime.jsx("div", {
117
+ className: checkboxClassname
118
+ })]
119
+ });
120
+ }
121
+
122
+ function ValueFormatter(props) {
123
+ try {
124
+ return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
125
+ children: props.row[props.column.key]
126
+ });
127
+ } catch {
128
+ return null;
129
+ }
130
+ }
131
+
132
+ var css_248z$a = ".g1vzro7t700-beta711{outline:none}.c1fsqdic700-beta711{stroke:currentColor;stroke-width:1.5px;fill:transparent;margin-left:4px;vertical-align:middle}.c1fsqdic700-beta711>path{transition:d .1s}";
133
+ styleInject(css_248z$a,{"insertAt":"top"});
134
+
135
+ const groupCellContent = "g1vzro7t700-beta711";
136
+ const groupCellContentClassname = `rdg-group-cell-content ${groupCellContent}`;
137
+ const caret = "c1fsqdic700-beta711";
138
+ const caretClassname = `rdg-caret ${caret}`;
139
+ function ToggleGroupFormatter({
140
+ groupKey,
141
+ isExpanded,
142
+ isCellSelected,
143
+ toggleGroup
144
+ }) {
145
+ const {
146
+ ref,
147
+ tabIndex
148
+ } = useFocusRef(isCellSelected);
149
+ function handleKeyDown({
150
+ key
151
+ }) {
152
+ if (key === 'Enter') {
153
+ toggleGroup();
154
+ }
155
+ }
156
+ const d = isExpanded ? 'M1 1 L 7 7 L 13 1' : 'M1 7 L 7 1 L 13 7';
157
+ return /*#__PURE__*/jsxRuntime.jsxs("span", {
158
+ ref: ref,
159
+ className: groupCellContentClassname,
160
+ tabIndex: tabIndex,
161
+ onKeyDown: handleKeyDown,
162
+ children: [groupKey, /*#__PURE__*/jsxRuntime.jsx("svg", {
163
+ viewBox: "0 0 14 8",
164
+ width: "14",
165
+ height: "8",
166
+ className: caretClassname,
167
+ "aria-hidden": true,
168
+ children: /*#__PURE__*/jsxRuntime.jsx("path", {
169
+ d: d
170
+ })
171
+ })]
172
+ });
173
+ }
174
+
175
+ const RowSelectionContext = /*#__PURE__*/react.createContext(undefined);
176
+ const RowSelectionProvider = RowSelectionContext.Provider;
177
+ const RowSelectionChangeContext = /*#__PURE__*/react.createContext(undefined);
178
+ const RowSelectionChangeProvider = RowSelectionChangeContext.Provider;
179
+ function useRowSelection() {
180
+ const rowSelectionContext = react.useContext(RowSelectionContext);
181
+ const rowSelectionChangeContext = react.useContext(RowSelectionChangeContext);
182
+ if (rowSelectionContext === undefined || rowSelectionChangeContext === undefined) {
183
+ throw new Error('useRowSelection must be used within DataGrid cells');
184
+ }
185
+ return [rowSelectionContext, rowSelectionChangeContext];
186
+ }
187
+
188
+ function getColSpan(column, lastFrozenColumnIndex, args) {
189
+ const colSpan = typeof column.colSpan === 'function' ? column.colSpan(args) : 1;
190
+ if (Number.isInteger(colSpan) && colSpan > 1 && (!column.frozen || column.idx + colSpan - 1 <= lastFrozenColumnIndex)) {
191
+ return colSpan;
192
+ }
193
+ return undefined;
194
+ }
195
+
196
+ function stopPropagation(event) {
197
+ event.stopPropagation();
198
+ }
199
+
200
+ const nonInputKeys = new Set(['Unidentified', 'Alt', 'AltGraph', 'CapsLock', 'Control', 'Fn', 'FnLock', 'Meta', 'NumLock', 'ScrollLock', 'Shift', 'Tab', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'End', 'Home', 'PageDown', 'PageUp', 'Insert', 'ContextMenu', 'Escape', 'Pause', 'Play', 'PrintScreen', 'F1', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12']);
201
+ function isCtrlKeyHeldDown(e) {
202
+ return (e.ctrlKey || e.metaKey) && e.key !== 'Control';
203
+ }
204
+ function isDefaultCellInput(event) {
205
+ return !nonInputKeys.has(event.key);
206
+ }
207
+ function onEditorNavigation({
208
+ key,
209
+ target
210
+ }) {
211
+ if (key === 'Tab' && (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement)) {
212
+ return target.matches('.rdg-editor-container > :only-child, .rdg-editor-container > label:only-child > :only-child');
213
+ }
214
+ return false;
215
+ }
216
+
217
+ function isSelectedCellEditable({
218
+ selectedPosition,
219
+ columns,
220
+ rows,
221
+ isGroupRow
222
+ }) {
223
+ const column = columns[selectedPosition.idx];
224
+ const row = rows[selectedPosition.rowIdx];
225
+ return !isGroupRow(row) && isCellEditable(column, row);
226
+ }
227
+ function isCellEditable(column, row) {
228
+ return column.editor != null && !column.rowGroup && (typeof column.editable === 'function' ? column.editable(row) : column.editable) !== false;
229
+ }
230
+ function getSelectedCellColSpan({
231
+ rows,
232
+ summaryRows,
233
+ rowIdx,
234
+ lastFrozenColumnIndex,
235
+ column,
236
+ isGroupRow
237
+ }) {
238
+ if (rowIdx === -1) {
239
+ return getColSpan(column, lastFrozenColumnIndex, {
240
+ type: 'HEADER'
241
+ });
242
+ }
243
+ if (rowIdx >= 0 && rowIdx < rows.length) {
244
+ const row = rows[rowIdx];
245
+ if (!isGroupRow(row)) {
246
+ return getColSpan(column, lastFrozenColumnIndex, {
247
+ type: 'ROW',
248
+ row
249
+ });
250
+ }
251
+ return undefined;
252
+ }
253
+ if (summaryRows) {
254
+ return getColSpan(column, lastFrozenColumnIndex, {
255
+ type: 'SUMMARY',
256
+ row: summaryRows[rowIdx - rows.length]
257
+ });
258
+ }
259
+ return undefined;
260
+ }
261
+ function getNextSelectedCellPosition({
262
+ cellNavigationMode,
263
+ columns,
264
+ colSpanColumns,
265
+ rows,
266
+ summaryRows,
267
+ minRowIdx,
268
+ maxRowIdx,
269
+ currentPosition: {
270
+ idx: currentIdx
271
+ },
272
+ nextPosition,
273
+ lastFrozenColumnIndex,
274
+ isCellWithinBounds,
275
+ isGroupRow
276
+ }) {
277
+ let {
278
+ idx: nextIdx,
279
+ rowIdx: nextRowIdx
280
+ } = nextPosition;
281
+ const setColSpan = moveRight => {
282
+ if (nextRowIdx >= 0 && nextRowIdx < rows.length) {
283
+ const row = rows[nextRowIdx];
284
+ if (isGroupRow(row)) return;
285
+ }
286
+ for (const column of colSpanColumns) {
287
+ const colIdx = column.idx;
288
+ if (colIdx > nextIdx) break;
289
+ const colSpan = getSelectedCellColSpan({
290
+ rows,
291
+ summaryRows,
292
+ rowIdx: nextRowIdx,
293
+ lastFrozenColumnIndex,
294
+ column,
295
+ isGroupRow
296
+ });
297
+ if (colSpan && nextIdx > colIdx && nextIdx < colSpan + colIdx) {
298
+ nextIdx = colIdx + (moveRight ? colSpan : 0);
299
+ break;
300
+ }
301
+ }
302
+ };
303
+ if (isCellWithinBounds(nextPosition)) {
304
+ setColSpan(nextIdx - currentIdx > 0);
305
+ }
306
+ if (cellNavigationMode !== 'NONE') {
307
+ const columnsCount = columns.length;
308
+ const isAfterLastColumn = nextIdx === columnsCount;
309
+ const isBeforeFirstColumn = nextIdx === -1;
310
+ if (isAfterLastColumn) {
311
+ if (cellNavigationMode === 'CHANGE_ROW') {
312
+ const isLastRow = nextRowIdx === maxRowIdx;
313
+ if (!isLastRow) {
314
+ nextIdx = 0;
315
+ nextRowIdx += 1;
316
+ }
317
+ } else {
318
+ nextIdx = 0;
319
+ }
320
+ } else if (isBeforeFirstColumn) {
321
+ if (cellNavigationMode === 'CHANGE_ROW') {
322
+ const isFirstRow = nextRowIdx === minRowIdx;
323
+ if (!isFirstRow) {
324
+ nextRowIdx -= 1;
325
+ nextIdx = columnsCount - 1;
326
+ }
327
+ } else {
328
+ nextIdx = columnsCount - 1;
329
+ }
330
+ setColSpan(false);
331
+ }
332
+ }
333
+ return {
334
+ idx: nextIdx,
335
+ rowIdx: nextRowIdx
336
+ };
337
+ }
338
+ function canExitGrid({
339
+ cellNavigationMode,
340
+ maxColIdx,
341
+ minRowIdx,
342
+ maxRowIdx,
343
+ selectedPosition: {
344
+ rowIdx,
345
+ idx
346
+ },
347
+ shiftKey
348
+ }) {
349
+ if (cellNavigationMode === 'NONE' || cellNavigationMode === 'CHANGE_ROW') {
350
+ const atLastCellInRow = idx === maxColIdx;
351
+ const atFirstCellInRow = idx === 0;
352
+ const atLastRow = rowIdx === maxRowIdx;
353
+ const atFirstRow = rowIdx === minRowIdx;
354
+ return shiftKey ? atFirstCellInRow && atFirstRow : atLastCellInRow && atLastRow;
355
+ }
356
+ return false;
357
+ }
358
+
359
+ const {
360
+ min,
361
+ max,
362
+ floor,
363
+ sign
364
+ } = Math;
365
+ function assertIsValidKeyGetter(keyGetter) {
366
+ if (typeof keyGetter !== 'function') {
367
+ throw new Error('Please specify the rowKeyGetter prop to use selection');
368
+ }
369
+ }
370
+ function getCellStyle(column, colSpan) {
371
+ return {
372
+ gridColumnStart: column.idx + 1,
373
+ gridColumnEnd: colSpan !== undefined ? `span ${colSpan}` : undefined,
374
+ left: column.frozen ? `var(--frozen-left-${column.idx})` : undefined
375
+ };
376
+ }
377
+ function getCellClassname(column, ...extraClasses) {
378
+ return clsx(cellClassname, ...extraClasses, column.frozen && cellFrozenClassname, column.isLastFrozenColumn && cellFrozenLastClassname);
379
+ }
380
+
381
+ const SELECT_COLUMN_KEY = 'select-row';
382
+ function SelectFormatter(props) {
383
+ const [isRowSelected, onRowSelectionChange] = useRowSelection();
384
+ return /*#__PURE__*/jsxRuntime.jsx(SelectCellFormatter, {
385
+ "aria-label": "Select",
386
+ isCellSelected: props.isCellSelected,
387
+ value: isRowSelected,
388
+ onClick: stopPropagation,
389
+ onChange: (checked, isShiftClick) => {
390
+ onRowSelectionChange({
391
+ row: props.row,
392
+ checked,
393
+ isShiftClick
394
+ });
395
+ }
396
+ });
397
+ }
398
+ function SelectGroupFormatter(props) {
399
+ const [isRowSelected, onRowSelectionChange] = useRowSelection();
400
+ return /*#__PURE__*/jsxRuntime.jsx(SelectCellFormatter, {
401
+ "aria-label": "Select Group",
402
+ isCellSelected: props.isCellSelected,
403
+ value: isRowSelected,
404
+ onChange: checked => {
405
+ onRowSelectionChange({
406
+ row: props.row,
407
+ checked,
408
+ isShiftClick: false
409
+ });
410
+ },
411
+ onClick: stopPropagation
412
+ });
413
+ }
414
+ const SelectColumn = {
415
+ key: SELECT_COLUMN_KEY,
416
+ name: '',
417
+ width: 35,
418
+ maxWidth: 35,
419
+ resizable: false,
420
+ sortable: false,
421
+ frozen: true,
422
+ headerRenderer(props) {
423
+ return /*#__PURE__*/jsxRuntime.jsx(SelectCellFormatter, {
424
+ "aria-label": "Select All",
425
+ isCellSelected: props.isCellSelected,
426
+ value: props.allRowsSelected,
427
+ onChange: props.onAllRowsSelectionChange,
428
+ onClick: stopPropagation
429
+ });
430
+ },
431
+ formatter: SelectFormatter,
432
+ groupFormatter: SelectGroupFormatter
433
+ };
434
+
435
+ function useCalculatedColumns({
436
+ rawColumns,
437
+ columnWidths,
438
+ viewportWidth,
439
+ scrollLeft,
440
+ defaultColumnOptions,
441
+ rawGroupBy,
442
+ enableVirtualization
443
+ }) {
444
+ const minColumnWidth = defaultColumnOptions?.minWidth ?? 80;
445
+ const defaultFormatter = defaultColumnOptions?.formatter ?? ValueFormatter;
446
+ const defaultSortable = defaultColumnOptions?.sortable ?? false;
447
+ const defaultResizable = defaultColumnOptions?.resizable ?? false;
448
+ const {
449
+ columns,
450
+ colSpanColumns,
451
+ lastFrozenColumnIndex,
452
+ groupBy
453
+ } = react.useMemo(() => {
454
+ const groupBy = [];
455
+ let lastFrozenColumnIndex = -1;
456
+ const columns = rawColumns.map(rawColumn => {
457
+ const rowGroup = rawGroupBy?.includes(rawColumn.key) ?? false;
458
+ const frozen = rowGroup || rawColumn.frozen || false;
459
+ const column = {
460
+ ...rawColumn,
461
+ idx: 0,
462
+ frozen,
463
+ isLastFrozenColumn: false,
464
+ rowGroup,
465
+ sortable: rawColumn.sortable ?? defaultSortable,
466
+ resizable: rawColumn.resizable ?? defaultResizable,
467
+ formatter: rawColumn.formatter ?? defaultFormatter
468
+ };
469
+ if (rowGroup) {
470
+ column.groupFormatter ??= ToggleGroupFormatter;
471
+ }
472
+ if (frozen) {
473
+ lastFrozenColumnIndex++;
474
+ }
475
+ return column;
476
+ });
477
+ columns.sort(({
478
+ key: aKey,
479
+ frozen: frozenA
480
+ }, {
481
+ key: bKey,
482
+ frozen: frozenB
483
+ }) => {
484
+ if (aKey === SELECT_COLUMN_KEY) return -1;
485
+ if (bKey === SELECT_COLUMN_KEY) return 1;
486
+ if (rawGroupBy?.includes(aKey)) {
487
+ if (rawGroupBy.includes(bKey)) {
488
+ return rawGroupBy.indexOf(aKey) - rawGroupBy.indexOf(bKey);
489
+ }
490
+ return -1;
491
+ }
492
+ if (rawGroupBy?.includes(bKey)) return 1;
493
+ if (frozenA) {
494
+ if (frozenB) return 0;
495
+ return -1;
496
+ }
497
+ if (frozenB) return 1;
498
+ return 0;
499
+ });
500
+ const colSpanColumns = [];
501
+ columns.forEach((column, idx) => {
502
+ column.idx = idx;
503
+ if (column.rowGroup) {
504
+ groupBy.push(column.key);
505
+ }
506
+ if (column.colSpan != null) {
507
+ colSpanColumns.push(column);
508
+ }
509
+ });
510
+ if (lastFrozenColumnIndex !== -1) {
511
+ columns[lastFrozenColumnIndex].isLastFrozenColumn = true;
512
+ }
513
+ return {
514
+ columns,
515
+ colSpanColumns,
516
+ lastFrozenColumnIndex,
517
+ groupBy
518
+ };
519
+ }, [rawColumns, defaultFormatter, defaultResizable, defaultSortable, rawGroupBy]);
520
+ const {
521
+ layoutCssVars,
522
+ totalColumnWidth,
523
+ totalFrozenColumnWidth,
524
+ columnMetrics
525
+ } = react.useMemo(() => {
526
+ const columnMetrics = new Map();
527
+ let left = 0;
528
+ let totalColumnWidth = 0;
529
+ let totalFrozenColumnWidth = 0;
530
+ let templateColumns = '';
531
+ let allocatedWidth = 0;
532
+ let unassignedColumnsCount = 0;
533
+ for (const column of columns) {
534
+ let width = getSpecifiedWidth(column, columnWidths, viewportWidth);
535
+ if (width === undefined) {
536
+ unassignedColumnsCount++;
537
+ } else {
538
+ width = clampColumnWidth(width, column, minColumnWidth);
539
+ allocatedWidth += width;
540
+ columnMetrics.set(column, {
541
+ width,
542
+ left: 0
543
+ });
544
+ }
545
+ }
546
+ const unallocatedWidth = viewportWidth - allocatedWidth;
547
+ const unallocatedColumnWidth = unallocatedWidth / unassignedColumnsCount;
548
+ for (const column of columns) {
549
+ let width;
550
+ if (columnMetrics.has(column)) {
551
+ const columnMetric = columnMetrics.get(column);
552
+ columnMetric.left = left;
553
+ ({
554
+ width
555
+ } = columnMetric);
556
+ } else {
557
+ width = clampColumnWidth(unallocatedColumnWidth, column, minColumnWidth);
558
+ columnMetrics.set(column, {
559
+ width,
560
+ left
561
+ });
562
+ }
563
+ totalColumnWidth += width;
564
+ left += width;
565
+ templateColumns += `${width}px `;
566
+ }
567
+ if (lastFrozenColumnIndex !== -1) {
568
+ const columnMetric = columnMetrics.get(columns[lastFrozenColumnIndex]);
569
+ totalFrozenColumnWidth = columnMetric.left + columnMetric.width;
570
+ }
571
+ const layoutCssVars = {
572
+ '--template-columns': templateColumns
573
+ };
574
+ for (let i = 0; i <= lastFrozenColumnIndex; i++) {
575
+ const column = columns[i];
576
+ layoutCssVars[`--frozen-left-${column.idx}`] = `${columnMetrics.get(column).left}px`;
577
+ }
578
+ return {
579
+ layoutCssVars,
580
+ totalColumnWidth,
581
+ totalFrozenColumnWidth,
582
+ columnMetrics
583
+ };
584
+ }, [columnWidths, columns, viewportWidth, minColumnWidth, lastFrozenColumnIndex]);
585
+ const [colOverscanStartIdx, colOverscanEndIdx] = react.useMemo(() => {
586
+ if (!enableVirtualization) {
587
+ return [0, columns.length - 1];
588
+ }
589
+ const viewportLeft = scrollLeft + totalFrozenColumnWidth;
590
+ const viewportRight = scrollLeft + viewportWidth;
591
+ const lastColIdx = columns.length - 1;
592
+ const firstUnfrozenColumnIdx = min(lastFrozenColumnIndex + 1, lastColIdx);
593
+ if (viewportLeft >= viewportRight) {
594
+ return [firstUnfrozenColumnIdx, firstUnfrozenColumnIdx];
595
+ }
596
+ let colVisibleStartIdx = firstUnfrozenColumnIdx;
597
+ while (colVisibleStartIdx < lastColIdx) {
598
+ const {
599
+ left,
600
+ width
601
+ } = columnMetrics.get(columns[colVisibleStartIdx]);
602
+ if (left + width > viewportLeft) {
603
+ break;
604
+ }
605
+ colVisibleStartIdx++;
606
+ }
607
+ let colVisibleEndIdx = colVisibleStartIdx;
608
+ while (colVisibleEndIdx < lastColIdx) {
609
+ const {
610
+ left,
611
+ width
612
+ } = columnMetrics.get(columns[colVisibleEndIdx]);
613
+ if (left + width >= viewportRight) {
614
+ break;
615
+ }
616
+ colVisibleEndIdx++;
617
+ }
618
+ const colOverscanStartIdx = max(firstUnfrozenColumnIdx, colVisibleStartIdx - 1);
619
+ const colOverscanEndIdx = min(lastColIdx, colVisibleEndIdx + 1);
620
+ return [colOverscanStartIdx, colOverscanEndIdx];
621
+ }, [columnMetrics, columns, lastFrozenColumnIndex, scrollLeft, totalFrozenColumnWidth, viewportWidth, enableVirtualization]);
622
+ return {
623
+ columns,
624
+ colSpanColumns,
625
+ colOverscanStartIdx,
626
+ colOverscanEndIdx,
627
+ layoutCssVars,
628
+ columnMetrics,
629
+ totalColumnWidth,
630
+ lastFrozenColumnIndex,
631
+ totalFrozenColumnWidth,
632
+ groupBy
633
+ };
634
+ }
635
+ function getSpecifiedWidth({
636
+ key,
637
+ width
638
+ }, columnWidths, viewportWidth) {
639
+ if (columnWidths.has(key)) {
640
+ return columnWidths.get(key);
641
+ }
642
+ if (typeof width === 'number') {
643
+ return width;
644
+ }
645
+ if (typeof width === 'string' && /^\d+%$/.test(width)) {
646
+ return floor(viewportWidth * parseInt(width, 10) / 100);
647
+ }
648
+ return undefined;
649
+ }
650
+ function clampColumnWidth(width, {
651
+ minWidth,
652
+ maxWidth
653
+ }, minColumnWidth) {
654
+ width = max(width, minWidth ?? minColumnWidth);
655
+ if (typeof maxWidth === 'number') {
656
+ return min(width, maxWidth);
657
+ }
658
+ return width;
659
+ }
660
+
661
+ function useCombinedRefs(...refs) {
662
+ return react.useCallback(handle => {
663
+ for (const ref of refs) {
664
+ if (typeof ref === 'function') {
665
+ ref(handle);
666
+ } else if (ref !== null && 'current' in ref) {
667
+ ref.current = handle;
668
+ }
669
+ }
670
+ }, refs);
671
+ }
672
+
673
+ function useGridDimensions() {
674
+ const gridRef = react.useRef(null);
675
+ const [gridWidth, setGridWidth] = react.useState(1);
676
+ const [gridHeight, setGridHeight] = react.useState(1);
677
+ useLayoutEffect(() => {
678
+ const {
679
+ ResizeObserver
680
+ } = window;
681
+ if (ResizeObserver == null) return;
682
+ const resizeObserver = new ResizeObserver(() => {
683
+ const {
684
+ clientWidth,
685
+ clientHeight
686
+ } = gridRef.current;
687
+ setGridWidth(clientWidth - (devicePixelRatio % 1 === 0 ? 0 : 1));
688
+ setGridHeight(clientHeight);
689
+ });
690
+ resizeObserver.observe(gridRef.current);
691
+ return () => {
692
+ resizeObserver.disconnect();
693
+ };
694
+ }, []);
695
+ return [gridRef, gridWidth, gridHeight];
696
+ }
697
+
698
+ function useLatestFunc(fn) {
699
+ const ref = react.useRef(fn);
700
+ react.useEffect(() => {
701
+ ref.current = fn;
702
+ });
703
+ return react.useCallback((...args) => {
704
+ ref.current(...args);
705
+ }, []);
706
+ }
707
+
708
+ function useRovingCellRef(isSelected) {
709
+ const ref = react.useRef(null);
710
+ const isChildFocused = react.useRef(false);
711
+ const [, forceRender] = react.useState({});
712
+ useLayoutEffect(() => {
713
+ if (!isSelected) {
714
+ isChildFocused.current = false;
715
+ return;
716
+ }
717
+ if (isChildFocused.current) {
718
+ forceRender({});
719
+ return;
720
+ }
721
+ ref.current?.focus();
722
+ }, [isSelected]);
723
+ function onFocus(event) {
724
+ if (event.target !== ref.current) {
725
+ isChildFocused.current = true;
726
+ }
727
+ }
728
+ const isFocused = isSelected && !isChildFocused.current;
729
+ return {
730
+ ref,
731
+ tabIndex: isFocused ? 0 : -1,
732
+ onFocus
733
+ };
734
+ }
735
+
736
+ var css_248z$9 = ".r1v67ork700-beta711{outline:none}.r1v67ork700-beta711:after{box-shadow:inset 0 0 0 2px var(--selection-color);content:\"\";inset:0;pointer-events:none;position:absolute;z-index:2}.r1v67ork700-beta711>.cj343x0700-beta711:first-child{box-shadow:inset 2px 0 0 0 var(--selection-color)}";
737
+ styleInject(css_248z$9,{"insertAt":"top"});
738
+
739
+ const rowSelected = "r1v67ork700-beta711";
740
+ const rowSelectedClassname = `rdg-row-selected ${rowSelected}`;
741
+ function useRovingRowRef(selectedCellIdx) {
742
+ const isSelected = selectedCellIdx === -1;
743
+ const {
744
+ ref,
745
+ tabIndex
746
+ } = useFocusRef(isSelected);
747
+ return {
748
+ ref,
749
+ tabIndex,
750
+ className: isSelected ? rowSelectedClassname : undefined
751
+ };
752
+ }
753
+
754
+ function useViewportColumns({
755
+ columns,
756
+ colSpanColumns,
757
+ rows,
758
+ summaryRows,
759
+ colOverscanStartIdx,
760
+ colOverscanEndIdx,
761
+ lastFrozenColumnIndex,
762
+ rowOverscanStartIdx,
763
+ rowOverscanEndIdx,
764
+ isGroupRow
765
+ }) {
766
+ const startIdx = react.useMemo(() => {
767
+ if (colOverscanStartIdx === 0) return 0;
768
+ let startIdx = colOverscanStartIdx;
769
+ const updateStartIdx = (colIdx, colSpan) => {
770
+ if (colSpan !== undefined && colIdx + colSpan > colOverscanStartIdx) {
771
+ startIdx = colIdx;
772
+ return true;
773
+ }
774
+ return false;
775
+ };
776
+ for (const column of colSpanColumns) {
777
+ const colIdx = column.idx;
778
+ if (colIdx >= startIdx) break;
779
+ if (updateStartIdx(colIdx, getColSpan(column, lastFrozenColumnIndex, {
780
+ type: 'HEADER'
781
+ }))) {
782
+ break;
783
+ }
784
+ for (let rowIdx = rowOverscanStartIdx; rowIdx <= rowOverscanEndIdx; rowIdx++) {
785
+ const row = rows[rowIdx];
786
+ if (isGroupRow(row)) continue;
787
+ if (updateStartIdx(colIdx, getColSpan(column, lastFrozenColumnIndex, {
788
+ type: 'ROW',
789
+ row
790
+ }))) {
791
+ break;
792
+ }
793
+ }
794
+ if (summaryRows != null) {
795
+ for (const row of summaryRows) {
796
+ if (updateStartIdx(colIdx, getColSpan(column, lastFrozenColumnIndex, {
797
+ type: 'SUMMARY',
798
+ row
799
+ }))) {
800
+ break;
801
+ }
802
+ }
803
+ }
804
+ }
805
+ return startIdx;
806
+ }, [rowOverscanStartIdx, rowOverscanEndIdx, rows, summaryRows, colOverscanStartIdx, lastFrozenColumnIndex, colSpanColumns, isGroupRow]);
807
+ return react.useMemo(() => {
808
+ const viewportColumns = [];
809
+ for (let colIdx = 0; colIdx <= colOverscanEndIdx; colIdx++) {
810
+ const column = columns[colIdx];
811
+ if (colIdx < startIdx && !column.frozen) continue;
812
+ viewportColumns.push(column);
813
+ }
814
+ return viewportColumns;
815
+ }, [startIdx, colOverscanEndIdx, columns]);
816
+ }
817
+
818
+ function isReadonlyArray(arr) {
819
+ return Array.isArray(arr);
820
+ }
821
+ function useViewportRows({
822
+ rawRows,
823
+ rowHeight,
824
+ clientHeight,
825
+ scrollTop,
826
+ groupBy,
827
+ rowGrouper,
828
+ expandedGroupIds,
829
+ enableVirtualization
830
+ }) {
831
+ const [groupedRows, rowsCount] = react.useMemo(() => {
832
+ if (groupBy.length === 0 || rowGrouper == null) return [undefined, rawRows.length];
833
+ const groupRows = (rows, [groupByKey, ...remainingGroupByKeys], startRowIndex) => {
834
+ let groupRowsCount = 0;
835
+ const groups = {};
836
+ for (const [key, childRows] of Object.entries(rowGrouper(rows, groupByKey))) {
837
+ const [childGroups, childRowsCount] = remainingGroupByKeys.length === 0 ? [childRows, childRows.length] : groupRows(childRows, remainingGroupByKeys, startRowIndex + groupRowsCount + 1);
838
+ groups[key] = {
839
+ childRows,
840
+ childGroups,
841
+ startRowIndex: startRowIndex + groupRowsCount
842
+ };
843
+ groupRowsCount += childRowsCount + 1;
844
+ }
845
+ return [groups, groupRowsCount];
846
+ };
847
+ return groupRows(rawRows, groupBy, 0);
848
+ }, [groupBy, rowGrouper, rawRows]);
849
+ const [rows, isGroupRow] = react.useMemo(() => {
850
+ const allGroupRows = new Set();
851
+ if (!groupedRows) return [rawRows, isGroupRow];
852
+ const flattenedRows = [];
853
+ const expandGroup = (rows, parentId, level) => {
854
+ if (isReadonlyArray(rows)) {
855
+ flattenedRows.push(...rows);
856
+ return;
857
+ }
858
+ Object.keys(rows).forEach((groupKey, posInSet, keys) => {
859
+ const id = parentId !== undefined ? `${parentId}__${groupKey}` : groupKey;
860
+ const isExpanded = expandedGroupIds?.has(id) ?? false;
861
+ const {
862
+ childRows,
863
+ childGroups,
864
+ startRowIndex
865
+ } = rows[groupKey];
866
+ const groupRow = {
867
+ id,
868
+ parentId,
869
+ groupKey,
870
+ isExpanded,
871
+ childRows,
872
+ level,
873
+ posInSet,
874
+ startRowIndex,
875
+ setSize: keys.length
876
+ };
877
+ flattenedRows.push(groupRow);
878
+ allGroupRows.add(groupRow);
879
+ if (isExpanded) {
880
+ expandGroup(childGroups, id, level + 1);
881
+ }
882
+ });
883
+ };
884
+ expandGroup(groupedRows, undefined, 0);
885
+ return [flattenedRows, isGroupRow];
886
+ function isGroupRow(row) {
887
+ return allGroupRows.has(row);
888
+ }
889
+ }, [expandedGroupIds, groupedRows, rawRows]);
890
+ const {
891
+ totalRowHeight,
892
+ getRowTop,
893
+ getRowHeight,
894
+ findRowIdx
895
+ } = react.useMemo(() => {
896
+ if (typeof rowHeight === 'number') {
897
+ return {
898
+ totalRowHeight: rowHeight * rows.length,
899
+ getRowTop: rowIdx => rowIdx * rowHeight,
900
+ getRowHeight: () => rowHeight,
901
+ findRowIdx: offset => floor(offset / rowHeight)
902
+ };
903
+ }
904
+ let totalRowHeight = 0;
905
+ const rowPositions = rows.map(row => {
906
+ const currentRowHeight = isGroupRow(row) ? rowHeight({
907
+ type: 'GROUP',
908
+ row
909
+ }) : rowHeight({
910
+ type: 'ROW',
911
+ row
912
+ });
913
+ const position = {
914
+ top: totalRowHeight,
915
+ height: currentRowHeight
916
+ };
917
+ totalRowHeight += currentRowHeight;
918
+ return position;
919
+ });
920
+ const validateRowIdx = rowIdx => {
921
+ return max(0, min(rows.length - 1, rowIdx));
922
+ };
923
+ return {
924
+ totalRowHeight,
925
+ getRowTop: rowIdx => rowPositions[validateRowIdx(rowIdx)].top,
926
+ getRowHeight: rowIdx => rowPositions[validateRowIdx(rowIdx)].height,
927
+ findRowIdx(offset) {
928
+ let start = 0;
929
+ let end = rowPositions.length - 1;
930
+ while (start <= end) {
931
+ const middle = start + floor((end - start) / 2);
932
+ const currentOffset = rowPositions[middle].top;
933
+ if (currentOffset === offset) return middle;
934
+ if (currentOffset < offset) {
935
+ start = middle + 1;
936
+ } else if (currentOffset > offset) {
937
+ end = middle - 1;
938
+ }
939
+ if (start > end) return end;
940
+ }
941
+ return 0;
942
+ }
943
+ };
944
+ }, [isGroupRow, rowHeight, rows]);
945
+ let rowOverscanStartIdx = 0;
946
+ let rowOverscanEndIdx = rows.length - 1;
947
+ if (enableVirtualization) {
948
+ const overscanThreshold = 4;
949
+ const rowVisibleStartIdx = findRowIdx(scrollTop);
950
+ const rowVisibleEndIdx = findRowIdx(scrollTop + clientHeight);
951
+ rowOverscanStartIdx = max(0, rowVisibleStartIdx - overscanThreshold);
952
+ rowOverscanEndIdx = min(rows.length - 1, rowVisibleEndIdx + overscanThreshold);
953
+ }
954
+ return {
955
+ rowOverscanStartIdx,
956
+ rowOverscanEndIdx,
957
+ rows,
958
+ rowsCount,
959
+ totalRowHeight,
960
+ isGroupRow,
961
+ getRowTop,
962
+ getRowHeight,
963
+ findRowIdx
964
+ };
965
+ }
966
+
967
+ var css_248z$8 = ".h1j9yp5q700-beta711{cursor:pointer;display:flex}.h1j9yp5q700-beta711:focus{outline:none}.h1e6at1o700-beta711{flex-grow:1;overflow:hidden;overflow:clip;text-overflow:ellipsis}.a1t8izji700-beta711{fill:currentColor}.a1t8izji700-beta711>path{transition:d .1s}";
968
+ styleInject(css_248z$8,{"insertAt":"top"});
969
+
970
+ const headerSortCell = "h1j9yp5q700-beta711";
971
+ const headerSortCellClassname = `rdg-header-sort-cell ${headerSortCell}`;
972
+ const headerSortName = "h1e6at1o700-beta711";
973
+ const headerSortNameClassname = `rdg-header-sort-name ${headerSortName}`;
974
+ const arrow = "a1t8izji700-beta711";
975
+ const arrowClassname = `rdg-sort-arrow ${arrow}`;
976
+ function SortableHeaderCell({
977
+ onSort,
978
+ sortDirection,
979
+ priority,
980
+ children,
981
+ isCellSelected
982
+ }) {
983
+ const {
984
+ ref,
985
+ tabIndex
986
+ } = useFocusRef(isCellSelected);
987
+ function handleKeyDown(event) {
988
+ if (event.key === ' ' || event.key === 'Enter') {
989
+ event.preventDefault();
990
+ onSort(event.ctrlKey || event.metaKey);
991
+ }
992
+ }
993
+ function handleClick(event) {
994
+ onSort(event.ctrlKey || event.metaKey);
995
+ }
996
+ return /*#__PURE__*/jsxRuntime.jsxs("span", {
997
+ ref: ref,
998
+ tabIndex: tabIndex,
999
+ className: headerSortCellClassname,
1000
+ onMouseDown: handleClick,
1001
+ onKeyDown: handleKeyDown,
1002
+ children: [/*#__PURE__*/jsxRuntime.jsx("span", {
1003
+ className: headerSortNameClassname,
1004
+ children: children
1005
+ }), /*#__PURE__*/jsxRuntime.jsxs("span", {
1006
+ children: [sortDirection !== undefined && /*#__PURE__*/jsxRuntime.jsx("svg", {
1007
+ viewBox: "0 0 12 8",
1008
+ width: "12",
1009
+ height: "8",
1010
+ className: arrowClassname,
1011
+ "aria-hidden": true,
1012
+ children: /*#__PURE__*/jsxRuntime.jsx("path", {
1013
+ d: sortDirection === 'ASC' ? 'M0 8 6 0 12 8' : 'M0 0 6 8 12 0'
1014
+ })
1015
+ }), priority]
1016
+ })]
1017
+ });
1018
+ }
1019
+
1020
+ var css_248z$7 = ".c6l2wv1700-beta711{touch-action:none}.c6l2wv1700-beta711:after{bottom:0;content:\"\";cursor:col-resize;position:absolute;right:0;top:0;width:10px}";
1021
+ styleInject(css_248z$7,{"insertAt":"top"});
1022
+
1023
+ const cellResizable = "c6l2wv1700-beta711";
1024
+ const cellResizableClassname = `rdg-cell-resizable ${cellResizable}`;
1025
+ function HeaderCell({
1026
+ column,
1027
+ colSpan,
1028
+ isCellSelected,
1029
+ onColumnResize,
1030
+ allRowsSelected,
1031
+ onAllRowsSelectionChange,
1032
+ sortColumns,
1033
+ onSortColumnsChange,
1034
+ selectCell,
1035
+ shouldFocusGrid
1036
+ }) {
1037
+ const {
1038
+ ref,
1039
+ tabIndex,
1040
+ onFocus
1041
+ } = useRovingCellRef(isCellSelected);
1042
+ const sortIndex = sortColumns?.findIndex(sort => sort.columnKey === column.key);
1043
+ const sortColumn = sortIndex !== undefined && sortIndex > -1 ? sortColumns[sortIndex] : undefined;
1044
+ const sortDirection = sortColumn?.direction;
1045
+ const priority = sortColumn !== undefined && sortColumns.length > 1 ? sortIndex + 1 : undefined;
1046
+ const ariaSort = sortDirection && !priority ? sortDirection === 'ASC' ? 'ascending' : 'descending' : undefined;
1047
+ const className = getCellClassname(column, column.headerCellClass, column.resizable && cellResizableClassname);
1048
+ function onPointerDown(event) {
1049
+ if (event.pointerType === 'mouse' && event.buttons !== 1) {
1050
+ return;
1051
+ }
1052
+ const {
1053
+ currentTarget,
1054
+ pointerId
1055
+ } = event;
1056
+ const {
1057
+ right
1058
+ } = currentTarget.getBoundingClientRect();
1059
+ const offset = right - event.clientX;
1060
+ if (offset > 11) {
1061
+ return;
1062
+ }
1063
+ function onPointerMove(event) {
1064
+ const width = event.clientX + offset - currentTarget.getBoundingClientRect().left;
1065
+ if (width > 0) {
1066
+ onColumnResize(column, width);
1067
+ }
1068
+ }
1069
+ function onLostPointerCapture() {
1070
+ currentTarget.removeEventListener('pointermove', onPointerMove);
1071
+ currentTarget.removeEventListener('lostpointercapture', onLostPointerCapture);
1072
+ }
1073
+ currentTarget.setPointerCapture(pointerId);
1074
+ currentTarget.addEventListener('pointermove', onPointerMove);
1075
+ currentTarget.addEventListener('lostpointercapture', onLostPointerCapture);
1076
+ }
1077
+ function onSort(ctrlClick) {
1078
+ if (onSortColumnsChange == null) return;
1079
+ const {
1080
+ sortDescendingFirst
1081
+ } = column;
1082
+ if (sortColumn === undefined) {
1083
+ const nextSort = {
1084
+ columnKey: column.key,
1085
+ direction: sortDescendingFirst ? 'DESC' : 'ASC'
1086
+ };
1087
+ onSortColumnsChange(sortColumns && ctrlClick ? [...sortColumns, nextSort] : [nextSort]);
1088
+ } else {
1089
+ let nextSortColumn;
1090
+ if (sortDescendingFirst && sortDirection === 'DESC' || !sortDescendingFirst && sortDirection === 'ASC') {
1091
+ nextSortColumn = {
1092
+ columnKey: column.key,
1093
+ direction: sortDirection === 'ASC' ? 'DESC' : 'ASC'
1094
+ };
1095
+ }
1096
+ if (ctrlClick) {
1097
+ const nextSortColumns = [...sortColumns];
1098
+ if (nextSortColumn) {
1099
+ nextSortColumns[sortIndex] = nextSortColumn;
1100
+ } else {
1101
+ nextSortColumns.splice(sortIndex, 1);
1102
+ }
1103
+ onSortColumnsChange(nextSortColumns);
1104
+ } else {
1105
+ onSortColumnsChange(nextSortColumn ? [nextSortColumn] : []);
1106
+ }
1107
+ }
1108
+ }
1109
+ function onClick() {
1110
+ selectCell(column.idx);
1111
+ }
1112
+ function handleFocus(event) {
1113
+ onFocus(event);
1114
+ if (shouldFocusGrid) {
1115
+ selectCell(0);
1116
+ }
1117
+ }
1118
+ function getCell() {
1119
+ if (column.headerRenderer) {
1120
+ return /*#__PURE__*/jsxRuntime.jsx(column.headerRenderer, {
1121
+ column: column,
1122
+ sortDirection: sortDirection,
1123
+ priority: priority,
1124
+ onSort: onSort,
1125
+ allRowsSelected: allRowsSelected,
1126
+ onAllRowsSelectionChange: onAllRowsSelectionChange,
1127
+ isCellSelected: isCellSelected
1128
+ });
1129
+ }
1130
+ if (column.sortable) {
1131
+ return /*#__PURE__*/jsxRuntime.jsx(SortableHeaderCell, {
1132
+ onSort: onSort,
1133
+ sortDirection: sortDirection,
1134
+ priority: priority,
1135
+ isCellSelected: isCellSelected,
1136
+ children: column.name
1137
+ });
1138
+ }
1139
+ return column.name;
1140
+ }
1141
+ return /*#__PURE__*/jsxRuntime.jsx("div", {
1142
+ role: "columnheader",
1143
+ "aria-colindex": column.idx + 1,
1144
+ "aria-selected": isCellSelected,
1145
+ "aria-sort": ariaSort,
1146
+ "aria-colspan": colSpan,
1147
+ ref: ref,
1148
+ tabIndex: shouldFocusGrid ? 0 : tabIndex,
1149
+ className: className,
1150
+ style: getCellStyle(column, colSpan),
1151
+ onFocus: handleFocus,
1152
+ onClick: onClick,
1153
+ onPointerDown: column.resizable ? onPointerDown : undefined,
1154
+ children: getCell()
1155
+ });
1156
+ }
1157
+
1158
+ var css_248z$6 = ".h10tskcx700-beta711{background-color:var(--header-background-color);contain:strict;contain:size layout style paint;display:grid;font-weight:700;grid-template-columns:var(--template-columns);grid-template-rows:var(--header-row-height);height:var(--header-row-height);line-height:var(--header-row-height);outline:none;position:sticky;top:0;width:var(--row-width);z-index:3}.h10tskcx700-beta711[aria-selected=true]{box-shadow:inset 0 0 0 2px var(--selection-color)}";
1159
+ styleInject(css_248z$6,{"insertAt":"top"});
1160
+
1161
+ const headerRow = "h10tskcx700-beta711";
1162
+ const headerRowClassname = `rdg-header-row ${headerRow}`;
1163
+ function HeaderRow({
1164
+ columns,
1165
+ allRowsSelected,
1166
+ onAllRowsSelectionChange,
1167
+ onColumnResize,
1168
+ sortColumns,
1169
+ onSortColumnsChange,
1170
+ lastFrozenColumnIndex,
1171
+ selectedCellIdx,
1172
+ selectCell,
1173
+ shouldFocusGrid
1174
+ }) {
1175
+ const {
1176
+ ref,
1177
+ tabIndex,
1178
+ className
1179
+ } = useRovingRowRef(selectedCellIdx);
1180
+ const cells = [];
1181
+ for (let index = 0; index < columns.length; index++) {
1182
+ const column = columns[index];
1183
+ const colSpan = getColSpan(column, lastFrozenColumnIndex, {
1184
+ type: 'HEADER'
1185
+ });
1186
+ if (colSpan !== undefined) {
1187
+ index += colSpan - 1;
1188
+ }
1189
+ cells.push(/*#__PURE__*/jsxRuntime.jsx(HeaderCell, {
1190
+ column: column,
1191
+ colSpan: colSpan,
1192
+ isCellSelected: selectedCellIdx === column.idx,
1193
+ onColumnResize: onColumnResize,
1194
+ allRowsSelected: allRowsSelected,
1195
+ onAllRowsSelectionChange: onAllRowsSelectionChange,
1196
+ onSortColumnsChange: onSortColumnsChange,
1197
+ sortColumns: sortColumns,
1198
+ selectCell: selectCell,
1199
+ shouldFocusGrid: shouldFocusGrid && index === 0
1200
+ }, column.key));
1201
+ }
1202
+ return /*#__PURE__*/jsxRuntime.jsx("div", {
1203
+ role: "row",
1204
+ "aria-rowindex": 1,
1205
+ ref: ref,
1206
+ tabIndex: tabIndex,
1207
+ className: clsx(headerRowClassname, className),
1208
+ children: cells
1209
+ });
1210
+ }
1211
+ const HeaderRow$1 = /*#__PURE__*/react.memo(HeaderRow);
1212
+
1213
+ var css_248z$5 = ".c6ra8a3700-beta711,.cq910m0700-beta711{background-color:#ccf}.cq910m0700-beta711.c6ra8a3700-beta711{background-color:#99f}";
1214
+ styleInject(css_248z$5,{"insertAt":"top"});
1215
+
1216
+ const cellCopied = "c6ra8a3700-beta711";
1217
+ const cellCopiedClassname = `rdg-cell-copied ${cellCopied}`;
1218
+ const cellDraggedOver = "cq910m0700-beta711";
1219
+ const cellDraggedOverClassname = `rdg-cell-dragged-over ${cellDraggedOver}`;
1220
+ function Cell({
1221
+ column,
1222
+ colSpan,
1223
+ isCellSelected,
1224
+ isCopied,
1225
+ isDraggedOver,
1226
+ row,
1227
+ rowIdx,
1228
+ dragHandle,
1229
+ onRowClick,
1230
+ onRowDoubleClick,
1231
+ onRowChange,
1232
+ selectCell,
1233
+ ...props
1234
+ }) {
1235
+ const {
1236
+ ref,
1237
+ tabIndex,
1238
+ onFocus
1239
+ } = useRovingCellRef(isCellSelected);
1240
+ const {
1241
+ cellClass
1242
+ } = column;
1243
+ const className = getCellClassname(column, typeof cellClass === 'function' ? cellClass(row) : cellClass, isCopied && cellCopiedClassname, isDraggedOver && cellDraggedOverClassname);
1244
+ function selectCellWrapper(openEditor) {
1245
+ selectCell(row, column, openEditor);
1246
+ }
1247
+ function handleClick() {
1248
+ selectCellWrapper(column.editorOptions?.editOnClick);
1249
+ onRowClick?.(row, column);
1250
+ }
1251
+ function handleContextMenu() {
1252
+ selectCellWrapper();
1253
+ }
1254
+ function handleDoubleClick() {
1255
+ selectCellWrapper(true);
1256
+ onRowDoubleClick?.(row, column);
1257
+ }
1258
+ return /*#__PURE__*/jsxRuntime.jsx("div", {
1259
+ role: "gridcell",
1260
+ "aria-colindex": column.idx + 1,
1261
+ "aria-selected": isCellSelected,
1262
+ "aria-colspan": colSpan,
1263
+ "aria-readonly": !isCellEditable(column, row) || undefined,
1264
+ ref: ref,
1265
+ tabIndex: tabIndex,
1266
+ className: className,
1267
+ style: getCellStyle(column, colSpan),
1268
+ onClick: handleClick,
1269
+ onDoubleClick: handleDoubleClick,
1270
+ onContextMenu: handleContextMenu,
1271
+ onFocus: onFocus,
1272
+ ...props,
1273
+ children: !column.rowGroup && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
1274
+ children: [/*#__PURE__*/jsxRuntime.jsx(column.formatter, {
1275
+ column: column,
1276
+ row: row,
1277
+ rowIdx: rowIdx,
1278
+ isCellSelected: isCellSelected,
1279
+ onRowChange: onRowChange
1280
+ }), dragHandle]
1281
+ })
1282
+ });
1283
+ }
1284
+ const Cell$1 = /*#__PURE__*/react.memo(Cell);
1285
+
1286
+ function Row({
1287
+ className,
1288
+ rowIdx,
1289
+ selectedCellIdx,
1290
+ isRowSelected,
1291
+ copiedCellIdx,
1292
+ draggedOverCellIdx,
1293
+ lastFrozenColumnIndex,
1294
+ row,
1295
+ viewportColumns,
1296
+ selectedCellEditor,
1297
+ selectedCellDragHandle,
1298
+ onRowClick,
1299
+ onRowDoubleClick,
1300
+ rowClass,
1301
+ setDraggedOverRowIdx,
1302
+ onMouseEnter,
1303
+ top,
1304
+ height,
1305
+ onRowChange,
1306
+ selectCell,
1307
+ ...props
1308
+ }, ref) {
1309
+ const {
1310
+ ref: rowRef,
1311
+ tabIndex,
1312
+ className: rovingClassName
1313
+ } = useRovingRowRef(selectedCellIdx);
1314
+ const handleRowChange = useLatestFunc(newRow => {
1315
+ onRowChange(rowIdx, newRow);
1316
+ });
1317
+ function handleDragEnter(event) {
1318
+ setDraggedOverRowIdx?.(rowIdx);
1319
+ onMouseEnter?.(event);
1320
+ }
1321
+ className = clsx(rowClassname, `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`, rovingClassName, rowClass?.(row), className);
1322
+ const cells = [];
1323
+ for (let index = 0; index < viewportColumns.length; index++) {
1324
+ const column = viewportColumns[index];
1325
+ const {
1326
+ idx
1327
+ } = column;
1328
+ const colSpan = getColSpan(column, lastFrozenColumnIndex, {
1329
+ type: 'ROW',
1330
+ row
1331
+ });
1332
+ if (colSpan !== undefined) {
1333
+ index += colSpan - 1;
1334
+ }
1335
+ const isCellSelected = selectedCellIdx === idx;
1336
+ if (isCellSelected && selectedCellEditor) {
1337
+ cells.push(selectedCellEditor);
1338
+ } else {
1339
+ cells.push(/*#__PURE__*/jsxRuntime.jsx(Cell$1, {
1340
+ column: column,
1341
+ colSpan: colSpan,
1342
+ row: row,
1343
+ isCopied: copiedCellIdx === idx,
1344
+ isDraggedOver: draggedOverCellIdx === idx,
1345
+ isCellSelected: isCellSelected,
1346
+ dragHandle: isCellSelected ? selectedCellDragHandle : undefined,
1347
+ onRowClick: onRowClick,
1348
+ onRowDoubleClick: onRowDoubleClick,
1349
+ onRowChange: handleRowChange,
1350
+ selectCell: selectCell,
1351
+ rowIdx: rowIdx
1352
+ }, column.key));
1353
+ }
1354
+ }
1355
+ return /*#__PURE__*/jsxRuntime.jsx(RowSelectionProvider, {
1356
+ value: isRowSelected,
1357
+ children: /*#__PURE__*/jsxRuntime.jsx("div", {
1358
+ role: "row",
1359
+ ref: useCombinedRefs(ref, rowRef),
1360
+ tabIndex: tabIndex,
1361
+ className: className,
1362
+ onMouseEnter: handleDragEnter,
1363
+ style: {
1364
+ top,
1365
+ '--row-height': `${height}px`
1366
+ },
1367
+ ...props,
1368
+ children: cells
1369
+ })
1370
+ });
1371
+ }
1372
+ const Row$1 = /*#__PURE__*/react.memo(Row);
1373
+ const RowWithRef = /*#__PURE__*/react.memo(/*#__PURE__*/react.forwardRef(Row));
1374
+
1375
+ function GroupCell({
1376
+ id,
1377
+ groupKey,
1378
+ childRows,
1379
+ isExpanded,
1380
+ isCellSelected,
1381
+ column,
1382
+ row,
1383
+ groupColumnIndex,
1384
+ toggleGroup: toggleGroupWrapper
1385
+ }) {
1386
+ const {
1387
+ ref,
1388
+ tabIndex,
1389
+ onFocus
1390
+ } = useRovingCellRef(isCellSelected);
1391
+ function toggleGroup() {
1392
+ toggleGroupWrapper(id);
1393
+ }
1394
+ const isLevelMatching = column.rowGroup && groupColumnIndex === column.idx;
1395
+ return /*#__PURE__*/jsxRuntime.jsx("div", {
1396
+ role: "gridcell",
1397
+ "aria-colindex": column.idx + 1,
1398
+ "aria-selected": isCellSelected,
1399
+ ref: ref,
1400
+ tabIndex: tabIndex,
1401
+ className: getCellClassname(column),
1402
+ style: {
1403
+ ...getCellStyle(column),
1404
+ cursor: isLevelMatching ? 'pointer' : 'default'
1405
+ },
1406
+ onClick: isLevelMatching ? toggleGroup : undefined,
1407
+ onFocus: onFocus,
1408
+ children: (!column.rowGroup || groupColumnIndex === column.idx) && column.groupFormatter && /*#__PURE__*/jsxRuntime.jsx(column.groupFormatter, {
1409
+ groupKey: groupKey,
1410
+ childRows: childRows,
1411
+ column: column,
1412
+ row: row,
1413
+ isExpanded: isExpanded,
1414
+ isCellSelected: isCellSelected,
1415
+ toggleGroup: toggleGroup
1416
+ })
1417
+ }, column.key);
1418
+ }
1419
+ const GroupCell$1 = /*#__PURE__*/react.memo(GroupCell);
1420
+
1421
+ var css_248z$4 = ".g1yxluv3700-beta711:not([aria-selected=true]){background-color:var(--header-background-color)}.g1yxluv3700-beta711>.cj343x0700-beta711:not(:last-child):not(.ch2wcw8700-beta711){border-right:none}";
1422
+ styleInject(css_248z$4,{"insertAt":"top"});
1423
+
1424
+ const groupRow = "g1yxluv3700-beta711";
1425
+ const groupRowClassname = `rdg-group-row ${groupRow}`;
1426
+ function GroupedRow({
1427
+ id,
1428
+ groupKey,
1429
+ viewportColumns,
1430
+ childRows,
1431
+ rowIdx,
1432
+ row,
1433
+ top,
1434
+ height,
1435
+ level,
1436
+ isExpanded,
1437
+ selectedCellIdx,
1438
+ isRowSelected,
1439
+ selectGroup,
1440
+ toggleGroup,
1441
+ ...props
1442
+ }) {
1443
+ const {
1444
+ ref,
1445
+ tabIndex,
1446
+ className
1447
+ } = useRovingRowRef(selectedCellIdx);
1448
+ const idx = viewportColumns[0].key === SELECT_COLUMN_KEY ? level + 1 : level;
1449
+ function handleSelectGroup() {
1450
+ selectGroup(rowIdx);
1451
+ }
1452
+ return /*#__PURE__*/jsxRuntime.jsx(RowSelectionProvider, {
1453
+ value: isRowSelected,
1454
+ children: /*#__PURE__*/jsxRuntime.jsx("div", {
1455
+ role: "row",
1456
+ "aria-level": level,
1457
+ "aria-expanded": isExpanded,
1458
+ ref: ref,
1459
+ tabIndex: tabIndex,
1460
+ className: clsx(rowClassname, groupRowClassname, `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`, className),
1461
+ onClick: handleSelectGroup,
1462
+ style: {
1463
+ top,
1464
+ '--row-height': `${height}px`
1465
+ },
1466
+ ...props,
1467
+ children: viewportColumns.map(column => /*#__PURE__*/jsxRuntime.jsx(GroupCell$1, {
1468
+ id: id,
1469
+ groupKey: groupKey,
1470
+ childRows: childRows,
1471
+ isExpanded: isExpanded,
1472
+ isCellSelected: selectedCellIdx === column.idx,
1473
+ column: column,
1474
+ row: row,
1475
+ groupColumnIndex: idx,
1476
+ toggleGroup: toggleGroup
1477
+ }, column.key))
1478
+ })
1479
+ });
1480
+ }
1481
+ const GroupRowRenderer = /*#__PURE__*/react.memo(GroupedRow);
1482
+
1483
+ function SummaryCell({
1484
+ column,
1485
+ colSpan,
1486
+ row,
1487
+ isCellSelected,
1488
+ selectCell
1489
+ }) {
1490
+ const {
1491
+ ref,
1492
+ tabIndex,
1493
+ onFocus
1494
+ } = useRovingCellRef(isCellSelected);
1495
+ const {
1496
+ summaryFormatter: SummaryFormatter,
1497
+ summaryCellClass
1498
+ } = column;
1499
+ const className = getCellClassname(column, typeof summaryCellClass === 'function' ? summaryCellClass(row) : summaryCellClass);
1500
+ function onClick() {
1501
+ selectCell(row, column);
1502
+ }
1503
+ return /*#__PURE__*/jsxRuntime.jsx("div", {
1504
+ role: "gridcell",
1505
+ "aria-colindex": column.idx + 1,
1506
+ "aria-colspan": colSpan,
1507
+ "aria-selected": isCellSelected,
1508
+ ref: ref,
1509
+ tabIndex: tabIndex,
1510
+ className: className,
1511
+ style: getCellStyle(column, colSpan),
1512
+ onClick: onClick,
1513
+ onFocus: onFocus,
1514
+ children: SummaryFormatter && /*#__PURE__*/jsxRuntime.jsx(SummaryFormatter, {
1515
+ column: column,
1516
+ row: row,
1517
+ isCellSelected: isCellSelected
1518
+ })
1519
+ });
1520
+ }
1521
+ const SummaryCell$1 = /*#__PURE__*/react.memo(SummaryCell);
1522
+
1523
+ var css_248z$3 = ".skuhp55700-beta711.r1upfr80700-beta711{grid-template-rows:var(--summary-row-height);height:var(--summary-row-height);line-height:var(--summary-row-height);position:sticky;z-index:3}.sf8l5ub700-beta711>.cj343x0700-beta711{border-top:2px solid var(--summary-border-color)}";
1524
+ styleInject(css_248z$3,{"insertAt":"top"});
1525
+
1526
+ const summaryRow = "skuhp55700-beta711";
1527
+ const summaryRowBorderClassname = "sf8l5ub700-beta711";
1528
+ const summaryRowClassname = `rdg-summary-row ${summaryRow}`;
1529
+ function SummaryRow({
1530
+ rowIdx,
1531
+ row,
1532
+ viewportColumns,
1533
+ bottom,
1534
+ lastFrozenColumnIndex,
1535
+ selectedCellIdx,
1536
+ selectCell,
1537
+ 'aria-rowindex': ariaRowIndex
1538
+ }) {
1539
+ const {
1540
+ ref,
1541
+ tabIndex,
1542
+ className
1543
+ } = useRovingRowRef(selectedCellIdx);
1544
+ const cells = [];
1545
+ for (let index = 0; index < viewportColumns.length; index++) {
1546
+ const column = viewportColumns[index];
1547
+ const colSpan = getColSpan(column, lastFrozenColumnIndex, {
1548
+ type: 'SUMMARY',
1549
+ row
1550
+ });
1551
+ if (colSpan !== undefined) {
1552
+ index += colSpan - 1;
1553
+ }
1554
+ const isCellSelected = selectedCellIdx === column.idx;
1555
+ cells.push(/*#__PURE__*/jsxRuntime.jsx(SummaryCell$1, {
1556
+ column: column,
1557
+ colSpan: colSpan,
1558
+ row: row,
1559
+ isCellSelected: isCellSelected,
1560
+ selectCell: selectCell
1561
+ }, column.key));
1562
+ }
1563
+ return /*#__PURE__*/jsxRuntime.jsx("div", {
1564
+ role: "row",
1565
+ "aria-rowindex": ariaRowIndex,
1566
+ ref: ref,
1567
+ tabIndex: tabIndex,
1568
+ className: clsx(rowClassname, `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`, summaryRowClassname, className, rowIdx === 0 && summaryRowBorderClassname),
1569
+ style: {
1570
+ bottom
1571
+ },
1572
+ children: cells
1573
+ });
1574
+ }
1575
+ const SummaryRow$1 = /*#__PURE__*/react.memo(SummaryRow);
1576
+
1577
+ var css_248z$2 = ".cis5rrm700-beta711.rdg-cell{padding:0}";
1578
+ styleInject(css_248z$2,{"insertAt":"top"});
1579
+
1580
+ const cellEditing = "cis5rrm700-beta711";
1581
+ function EditCell({
1582
+ column,
1583
+ colSpan,
1584
+ row,
1585
+ rowIdx,
1586
+ onRowChange,
1587
+ onClose
1588
+ }) {
1589
+ const frameRequestRef = react.useRef();
1590
+ const commitOnOutsideClick = column.editorOptions?.commitOnOutsideClick !== false;
1591
+ const commitOnOutsideMouseDown = useLatestFunc(() => {
1592
+ onRowChange(row, true);
1593
+ });
1594
+ function cancelFrameRequest() {
1595
+ cancelAnimationFrame(frameRequestRef.current);
1596
+ }
1597
+ react.useEffect(() => {
1598
+ if (!commitOnOutsideClick) return;
1599
+ function onWindowCaptureMouseDown() {
1600
+ frameRequestRef.current = requestAnimationFrame(commitOnOutsideMouseDown);
1601
+ }
1602
+ addEventListener('mousedown', onWindowCaptureMouseDown, {
1603
+ capture: true
1604
+ });
1605
+ return () => {
1606
+ removeEventListener('mousedown', onWindowCaptureMouseDown, {
1607
+ capture: true
1608
+ });
1609
+ cancelFrameRequest();
1610
+ };
1611
+ }, [commitOnOutsideClick, commitOnOutsideMouseDown]);
1612
+ const {
1613
+ cellClass
1614
+ } = column;
1615
+ const className = getCellClassname(column, 'rdg-editor-container', typeof cellClass === 'function' ? cellClass(row) : cellClass, !column.editorOptions?.renderFormatter && cellEditing);
1616
+ return /*#__PURE__*/jsxRuntime.jsx("div", {
1617
+ role: "gridcell",
1618
+ "aria-colindex": column.idx + 1,
1619
+ "aria-colspan": colSpan,
1620
+ "aria-selected": true,
1621
+ className: className,
1622
+ style: getCellStyle(column, colSpan),
1623
+ onMouseDownCapture: commitOnOutsideClick ? cancelFrameRequest : undefined,
1624
+ children: column.editor != null && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
1625
+ children: [/*#__PURE__*/jsxRuntime.jsx(column.editor, {
1626
+ column: column,
1627
+ row: row,
1628
+ onRowChange: onRowChange,
1629
+ onClose: onClose
1630
+ }), column.editorOptions?.renderFormatter && /*#__PURE__*/jsxRuntime.jsx(column.formatter, {
1631
+ column: column,
1632
+ row: row,
1633
+ rowIdx: rowIdx,
1634
+ isCellSelected: true,
1635
+ onRowChange: onRowChange
1636
+ })]
1637
+ })
1638
+ });
1639
+ }
1640
+
1641
+ var css_248z$1 = ".c1w9bbhr700-beta711{background-color:var(--selection-color);bottom:0;cursor:move;height:8px;position:absolute;right:0;width:8px}.c1w9bbhr700-beta711:hover{background-color:var(--background-color);border:2px solid var(--selection-color);height:16px;width:16px}";
1642
+ styleInject(css_248z$1,{"insertAt":"top"});
1643
+
1644
+ const cellDragHandle = "c1w9bbhr700-beta711";
1645
+ const cellDragHandleClassname = `rdg-cell-drag-handle ${cellDragHandle}`;
1646
+ function DragHandle({
1647
+ rows,
1648
+ columns,
1649
+ selectedPosition,
1650
+ latestDraggedOverRowIdx,
1651
+ isCellEditable,
1652
+ onRowsChange,
1653
+ onFill,
1654
+ setDragging,
1655
+ setDraggedOverRowIdx
1656
+ }) {
1657
+ function handleMouseDown(event) {
1658
+ if (event.buttons !== 1) return;
1659
+ setDragging(true);
1660
+ window.addEventListener('mouseover', onMouseOver);
1661
+ window.addEventListener('mouseup', onMouseUp);
1662
+ function onMouseOver(event) {
1663
+ if (event.buttons !== 1) onMouseUp();
1664
+ }
1665
+ function onMouseUp() {
1666
+ window.removeEventListener('mouseover', onMouseOver);
1667
+ window.removeEventListener('mouseup', onMouseUp);
1668
+ setDragging(false);
1669
+ handleDragEnd();
1670
+ }
1671
+ }
1672
+ function handleDragEnd() {
1673
+ const overRowIdx = latestDraggedOverRowIdx.current;
1674
+ if (overRowIdx === undefined) return;
1675
+ const {
1676
+ rowIdx
1677
+ } = selectedPosition;
1678
+ const startRowIndex = rowIdx < overRowIdx ? rowIdx + 1 : overRowIdx;
1679
+ const endRowIndex = rowIdx < overRowIdx ? overRowIdx + 1 : rowIdx;
1680
+ updateRows(startRowIndex, endRowIndex);
1681
+ setDraggedOverRowIdx(undefined);
1682
+ }
1683
+ function handleDoubleClick(event) {
1684
+ event.stopPropagation();
1685
+ updateRows(selectedPosition.rowIdx + 1, rows.length);
1686
+ }
1687
+ function updateRows(startRowIdx, endRowIdx) {
1688
+ const {
1689
+ idx,
1690
+ rowIdx
1691
+ } = selectedPosition;
1692
+ const column = columns[idx];
1693
+ const sourceRow = rows[rowIdx];
1694
+ const updatedRows = [...rows];
1695
+ const indexes = [];
1696
+ for (let i = startRowIdx; i < endRowIdx; i++) {
1697
+ if (isCellEditable({
1698
+ rowIdx: i,
1699
+ idx
1700
+ })) {
1701
+ const updatedRow = onFill({
1702
+ columnKey: column.key,
1703
+ sourceRow,
1704
+ targetRow: rows[i]
1705
+ });
1706
+ if (updatedRow !== rows[i]) {
1707
+ updatedRows[i] = updatedRow;
1708
+ indexes.push(i);
1709
+ }
1710
+ }
1711
+ }
1712
+ if (indexes.length > 0) {
1713
+ onRowsChange?.(updatedRows, {
1714
+ indexes,
1715
+ column
1716
+ });
1717
+ }
1718
+ }
1719
+ return /*#__PURE__*/jsxRuntime.jsx("div", {
1720
+ className: cellDragHandleClassname,
1721
+ onMouseDown: handleMouseDown,
1722
+ onDoubleClick: handleDoubleClick
1723
+ });
1724
+ }
1725
+
1726
+ const initialPosition = {
1727
+ idx: -1,
1728
+ rowIdx: -2,
1729
+ mode: 'SELECT'
1730
+ };
1731
+ function DataGrid({
1732
+ columns: rawColumns,
1733
+ rows: rawRows,
1734
+ summaryRows,
1735
+ rowKeyGetter,
1736
+ onRowsChange,
1737
+ rowHeight,
1738
+ headerRowHeight: rawHeaderRowHeight,
1739
+ summaryRowHeight: rawSummaryRowHeight,
1740
+ selectedRows,
1741
+ onSelectedRowsChange,
1742
+ sortColumns,
1743
+ onSortColumnsChange,
1744
+ defaultColumnOptions,
1745
+ groupBy: rawGroupBy,
1746
+ rowGrouper,
1747
+ expandedGroupIds,
1748
+ onExpandedGroupIdsChange,
1749
+ onRowClick,
1750
+ onRowDoubleClick,
1751
+ onScroll,
1752
+ onColumnResize,
1753
+ onFill,
1754
+ onPaste,
1755
+ cellNavigationMode: rawCellNavigationMode,
1756
+ enableVirtualization,
1757
+ rowRenderer,
1758
+ noRowsFallback,
1759
+ className,
1760
+ style,
1761
+ rowClass,
1762
+ 'aria-label': ariaLabel,
1763
+ 'aria-labelledby': ariaLabelledBy,
1764
+ 'aria-describedby': ariaDescribedBy,
1765
+ 'data-testid': testId,
1766
+ editableRowIdxs
1767
+ }, ref) {
1768
+ rowHeight ??= 35;
1769
+ const headerRowHeight = rawHeaderRowHeight ?? (typeof rowHeight === 'number' ? rowHeight : 35);
1770
+ const summaryRowHeight = rawSummaryRowHeight ?? (typeof rowHeight === 'number' ? rowHeight : 35);
1771
+ const RowRenderer = rowRenderer ?? Row$1;
1772
+ const cellNavigationMode = rawCellNavigationMode ?? 'NONE';
1773
+ enableVirtualization ??= true;
1774
+ const [scrollTop, setScrollTop] = react.useState(0);
1775
+ const [scrollLeft, setScrollLeft] = react.useState(0);
1776
+ const [columnWidths, setColumnWidths] = react.useState(() => new Map());
1777
+ const [selectedPosition, setSelectedPosition] = react.useState(initialPosition);
1778
+ const [copiedCell, setCopiedCell] = react.useState(null);
1779
+ const [isDragging, setDragging] = react.useState(false);
1780
+ const [draggedOverRowIdx, setOverRowIdx] = react.useState(undefined);
1781
+ const prevSelectedPosition = react.useRef(selectedPosition);
1782
+ const latestDraggedOverRowIdx = react.useRef(draggedOverRowIdx);
1783
+ const lastSelectedRowIdx = react.useRef(-1);
1784
+ const [gridRef, gridWidth, gridHeight] = useGridDimensions();
1785
+ const headerRowsCount = 1;
1786
+ const summaryRowsCount = summaryRows?.length ?? 0;
1787
+ const clientHeight = gridHeight - headerRowHeight - summaryRowsCount * summaryRowHeight;
1788
+ const isSelectable = selectedRows != null && onSelectedRowsChange != null;
1789
+ const isHeaderRowSelected = selectedPosition.rowIdx === -1;
1790
+ const allRowsSelected = react.useMemo(() => {
1791
+ const {
1792
+ length
1793
+ } = rawRows;
1794
+ return length !== 0 && selectedRows != null && rowKeyGetter != null && selectedRows.size >= length && rawRows.every(row => selectedRows.has(rowKeyGetter(row)));
1795
+ }, [rawRows, selectedRows, rowKeyGetter]);
1796
+ const {
1797
+ columns,
1798
+ colSpanColumns,
1799
+ colOverscanStartIdx,
1800
+ colOverscanEndIdx,
1801
+ layoutCssVars,
1802
+ columnMetrics,
1803
+ totalColumnWidth,
1804
+ lastFrozenColumnIndex,
1805
+ totalFrozenColumnWidth,
1806
+ groupBy
1807
+ } = useCalculatedColumns({
1808
+ rawColumns,
1809
+ columnWidths,
1810
+ scrollLeft,
1811
+ viewportWidth: gridWidth,
1812
+ defaultColumnOptions,
1813
+ rawGroupBy: rowGrouper ? rawGroupBy : undefined,
1814
+ enableVirtualization
1815
+ });
1816
+ const {
1817
+ rowOverscanStartIdx,
1818
+ rowOverscanEndIdx,
1819
+ rows,
1820
+ rowsCount,
1821
+ totalRowHeight,
1822
+ isGroupRow,
1823
+ getRowTop,
1824
+ getRowHeight,
1825
+ findRowIdx
1826
+ } = useViewportRows({
1827
+ rawRows,
1828
+ groupBy,
1829
+ rowGrouper,
1830
+ rowHeight,
1831
+ clientHeight,
1832
+ scrollTop,
1833
+ expandedGroupIds,
1834
+ enableVirtualization
1835
+ });
1836
+ const viewportColumns = useViewportColumns({
1837
+ columns,
1838
+ colSpanColumns,
1839
+ colOverscanStartIdx,
1840
+ colOverscanEndIdx,
1841
+ lastFrozenColumnIndex,
1842
+ rowOverscanStartIdx,
1843
+ rowOverscanEndIdx,
1844
+ rows,
1845
+ summaryRows,
1846
+ isGroupRow
1847
+ });
1848
+ const hasGroups = groupBy.length > 0 && typeof rowGrouper === 'function';
1849
+ const minColIdx = hasGroups ? -1 : 0;
1850
+ const maxColIdx = columns.length - 1;
1851
+ const minRowIdx = -1;
1852
+ const maxRowIdx = headerRowsCount + rows.length + summaryRowsCount - 2;
1853
+ const selectedCellIsWithinSelectionBounds = isCellWithinSelectionBounds(selectedPosition);
1854
+ const selectedCellIsWithinViewportBounds = isCellWithinViewportBounds(selectedPosition);
1855
+ const selectRowLatest = useLatestFunc(selectRow);
1856
+ const selectAllRowsLatest = useLatestFunc(selectAllRows);
1857
+ const handleFormatterRowChangeLatest = useLatestFunc(updateRow);
1858
+ const selectViewportCellLatest = useLatestFunc((row, column, enableEditor) => {
1859
+ const rowIdx = rows.indexOf(row);
1860
+ selectCell({
1861
+ rowIdx,
1862
+ idx: column.idx
1863
+ }, enableEditor);
1864
+ });
1865
+ const selectGroupLatest = useLatestFunc(rowIdx => {
1866
+ selectCell({
1867
+ rowIdx,
1868
+ idx: -1
1869
+ });
1870
+ });
1871
+ const selectHeaderCellLatest = useLatestFunc(idx => {
1872
+ selectCell({
1873
+ rowIdx: -1,
1874
+ idx
1875
+ });
1876
+ });
1877
+ const selectSummaryCellLatest = useLatestFunc((summaryRow, column) => {
1878
+ const rowIdx = summaryRows.indexOf(summaryRow) + headerRowsCount + rows.length - 1;
1879
+ selectCell({
1880
+ rowIdx,
1881
+ idx: column.idx
1882
+ });
1883
+ });
1884
+ const toggleGroupLatest = useLatestFunc(toggleGroup);
1885
+ useLayoutEffect(() => {
1886
+ if (!selectedCellIsWithinSelectionBounds || selectedPosition.idx === prevSelectedPosition.current.idx && selectedPosition.rowIdx === prevSelectedPosition.current.rowIdx || selectedPosition.mode === 'EDIT') {
1887
+ prevSelectedPosition.current = selectedPosition;
1888
+ return;
1889
+ }
1890
+ prevSelectedPosition.current = selectedPosition;
1891
+ scrollToCell(selectedPosition);
1892
+ });
1893
+ react.useImperativeHandle(ref, () => ({
1894
+ element: gridRef.current,
1895
+ scrollToColumn(idx) {
1896
+ scrollToCell({
1897
+ idx
1898
+ });
1899
+ },
1900
+ scrollToRow(rowIdx) {
1901
+ const {
1902
+ current
1903
+ } = gridRef;
1904
+ if (!current) return;
1905
+ current.scrollTo({
1906
+ top: getRowTop(rowIdx),
1907
+ behavior: 'smooth'
1908
+ });
1909
+ },
1910
+ selectCell,
1911
+ reInitSelectPosition() {
1912
+ setSelectedPosition(initialPosition);
1913
+ }
1914
+ }));
1915
+ const handleColumnResize = react.useCallback((column, width) => {
1916
+ setColumnWidths(columnWidths => {
1917
+ const newColumnWidths = new Map(columnWidths);
1918
+ newColumnWidths.set(column.key, width);
1919
+ return newColumnWidths;
1920
+ });
1921
+ onColumnResize?.(column.idx, width);
1922
+ }, [onColumnResize]);
1923
+ const setDraggedOverRowIdx = react.useCallback(rowIdx => {
1924
+ setOverRowIdx(rowIdx);
1925
+ latestDraggedOverRowIdx.current = rowIdx;
1926
+ }, []);
1927
+ function selectRow({
1928
+ row,
1929
+ checked,
1930
+ isShiftClick
1931
+ }) {
1932
+ if (!onSelectedRowsChange) return;
1933
+ assertIsValidKeyGetter(rowKeyGetter);
1934
+ const newSelectedRows = new Set(selectedRows);
1935
+ if (isGroupRow(row)) {
1936
+ for (const childRow of row.childRows) {
1937
+ const rowKey = rowKeyGetter(childRow);
1938
+ if (checked) {
1939
+ newSelectedRows.add(rowKey);
1940
+ } else {
1941
+ newSelectedRows.delete(rowKey);
1942
+ }
1943
+ }
1944
+ onSelectedRowsChange(newSelectedRows);
1945
+ return;
1946
+ }
1947
+ const rowKey = rowKeyGetter(row);
1948
+ if (checked) {
1949
+ newSelectedRows.add(rowKey);
1950
+ const previousRowIdx = lastSelectedRowIdx.current;
1951
+ const rowIdx = rows.indexOf(row);
1952
+ lastSelectedRowIdx.current = rowIdx;
1953
+ if (isShiftClick && previousRowIdx !== -1 && previousRowIdx !== rowIdx) {
1954
+ const step = sign(rowIdx - previousRowIdx);
1955
+ for (let i = previousRowIdx + step; i !== rowIdx; i += step) {
1956
+ const row = rows[i];
1957
+ if (isGroupRow(row)) continue;
1958
+ newSelectedRows.add(rowKeyGetter(row));
1959
+ }
1960
+ }
1961
+ } else {
1962
+ newSelectedRows.delete(rowKey);
1963
+ lastSelectedRowIdx.current = -1;
1964
+ }
1965
+ onSelectedRowsChange(newSelectedRows);
1966
+ }
1967
+ function selectAllRows(checked) {
1968
+ if (!onSelectedRowsChange) return;
1969
+ assertIsValidKeyGetter(rowKeyGetter);
1970
+ const newSelectedRows = new Set(selectedRows);
1971
+ for (const row of rawRows) {
1972
+ const rowKey = rowKeyGetter(row);
1973
+ if (checked) {
1974
+ newSelectedRows.add(rowKey);
1975
+ } else {
1976
+ newSelectedRows.delete(rowKey);
1977
+ }
1978
+ }
1979
+ onSelectedRowsChange(newSelectedRows);
1980
+ }
1981
+ function toggleGroup(expandedGroupId) {
1982
+ if (!onExpandedGroupIdsChange) return;
1983
+ const newExpandedGroupIds = new Set(expandedGroupIds);
1984
+ if (newExpandedGroupIds.has(expandedGroupId)) {
1985
+ newExpandedGroupIds.delete(expandedGroupId);
1986
+ } else {
1987
+ newExpandedGroupIds.add(expandedGroupId);
1988
+ }
1989
+ onExpandedGroupIdsChange(newExpandedGroupIds);
1990
+ }
1991
+ function handleKeyDown(event) {
1992
+ if (!(event.target instanceof Element)) return;
1993
+ const isCellEvent = event.target.closest('.rdg-cell') !== null;
1994
+ const isRowEvent = hasGroups && event.target.matches('.rdg-row, .rdg-header-row');
1995
+ if (!isCellEvent && !isRowEvent) return;
1996
+ const {
1997
+ key,
1998
+ keyCode
1999
+ } = event;
2000
+ const {
2001
+ rowIdx
2002
+ } = selectedPosition;
2003
+ if (selectedCellIsWithinViewportBounds && onPaste != null && isCtrlKeyHeldDown(event) && !isGroupRow(rows[rowIdx]) && selectedPosition.mode === 'SELECT') {
2004
+ const cKey = 67;
2005
+ const vKey = 86;
2006
+ if (keyCode === cKey) {
2007
+ handleCopy();
2008
+ return;
2009
+ }
2010
+ if (keyCode === vKey) {
2011
+ handlePaste();
2012
+ return;
2013
+ }
2014
+ }
2015
+ if (isRowIdxWithinViewportBounds(rowIdx)) {
2016
+ const row = rows[rowIdx];
2017
+ if (isGroupRow(row) && selectedPosition.idx === -1 && (key === 'ArrowLeft' && row.isExpanded || key === 'ArrowRight' && !row.isExpanded)) {
2018
+ event.preventDefault();
2019
+ toggleGroup(row.id);
2020
+ return;
2021
+ }
2022
+ }
2023
+ switch (event.key) {
2024
+ case 'Escape':
2025
+ setCopiedCell(null);
2026
+ closeEditor();
2027
+ return;
2028
+ case 'ArrowUp':
2029
+ case 'ArrowDown':
2030
+ case 'ArrowLeft':
2031
+ case 'ArrowRight':
2032
+ case 'Tab':
2033
+ case 'Home':
2034
+ case 'End':
2035
+ case 'PageUp':
2036
+ case 'PageDown':
2037
+ navigate(event);
2038
+ break;
2039
+ default:
2040
+ handleCellInput(event);
2041
+ break;
2042
+ }
2043
+ }
2044
+ function handleScroll(event) {
2045
+ const {
2046
+ scrollTop,
2047
+ scrollLeft
2048
+ } = event.currentTarget;
2049
+ setScrollTop(scrollTop);
2050
+ setScrollLeft(scrollLeft);
2051
+ onScroll?.(event);
2052
+ }
2053
+ function getRawRowIdx(rowIdx) {
2054
+ return hasGroups ? rawRows.indexOf(rows[rowIdx]) : rowIdx;
2055
+ }
2056
+ function updateRow(rowIdx, row) {
2057
+ if (typeof onRowsChange !== 'function') return;
2058
+ const rawRowIdx = getRawRowIdx(rowIdx);
2059
+ if (row === rawRows[rawRowIdx]) return;
2060
+ const updatedRows = [...rawRows];
2061
+ updatedRows[rawRowIdx] = row;
2062
+ onRowsChange(updatedRows, {
2063
+ indexes: [rawRowIdx],
2064
+ column: columns[selectedPosition.idx]
2065
+ });
2066
+ }
2067
+ function commitEditorChanges() {
2068
+ if (columns[selectedPosition.idx]?.editor == null || selectedPosition.mode === 'SELECT' || selectedPosition.row === selectedPosition.originalRow) {
2069
+ return;
2070
+ }
2071
+ updateRow(selectedPosition.rowIdx, selectedPosition.row);
2072
+ }
2073
+ function handleCopy() {
2074
+ const {
2075
+ idx,
2076
+ rowIdx
2077
+ } = selectedPosition;
2078
+ setCopiedCell({
2079
+ row: rawRows[getRawRowIdx(rowIdx)],
2080
+ columnKey: columns[idx].key
2081
+ });
2082
+ }
2083
+ function handlePaste() {
2084
+ if (!onPaste || !onRowsChange || copiedCell === null || !isCellEditable(selectedPosition)) {
2085
+ return;
2086
+ }
2087
+ const {
2088
+ idx,
2089
+ rowIdx
2090
+ } = selectedPosition;
2091
+ const targetRow = rawRows[getRawRowIdx(rowIdx)];
2092
+ const updatedTargetRow = onPaste({
2093
+ sourceRow: copiedCell.row,
2094
+ sourceColumnKey: copiedCell.columnKey,
2095
+ targetRow,
2096
+ targetColumnKey: columns[idx].key
2097
+ });
2098
+ updateRow(rowIdx, updatedTargetRow);
2099
+ }
2100
+ function handleCellInput(event) {
2101
+ if (!selectedCellIsWithinViewportBounds) return;
2102
+ const row = rows[selectedPosition.rowIdx];
2103
+ if (isGroupRow(row)) return;
2104
+ const {
2105
+ key,
2106
+ shiftKey
2107
+ } = event;
2108
+ if (selectedPosition.mode === 'EDIT') {
2109
+ if (key === 'Enter') {
2110
+ commitEditorChanges();
2111
+ closeEditor();
2112
+ }
2113
+ return;
2114
+ }
2115
+ if (isSelectable && shiftKey && key === ' ') {
2116
+ assertIsValidKeyGetter(rowKeyGetter);
2117
+ const rowKey = rowKeyGetter(row);
2118
+ selectRow({
2119
+ row,
2120
+ checked: !selectedRows.has(rowKey),
2121
+ isShiftClick: false
2122
+ });
2123
+ event.preventDefault();
2124
+ return;
2125
+ }
2126
+ const column = columns[selectedPosition.idx];
2127
+ column.editorOptions?.onCellKeyDown?.(event);
2128
+ if (event.isDefaultPrevented()) return;
2129
+ if (isCellEditable(selectedPosition) && isDefaultCellInput(event)) {
2130
+ setSelectedPosition(({
2131
+ idx,
2132
+ rowIdx
2133
+ }) => ({
2134
+ idx,
2135
+ rowIdx,
2136
+ mode: 'EDIT',
2137
+ row,
2138
+ originalRow: row
2139
+ }));
2140
+ }
2141
+ }
2142
+ function handleEditorRowChange(row, commitChanges) {
2143
+ if (selectedPosition.mode === 'SELECT') return;
2144
+ if (commitChanges) {
2145
+ updateRow(selectedPosition.rowIdx, row);
2146
+ closeEditor();
2147
+ } else {
2148
+ setSelectedPosition(position => ({
2149
+ ...position,
2150
+ row
2151
+ }));
2152
+ }
2153
+ }
2154
+ function handleOnClose(commitChanges) {
2155
+ if (commitChanges) {
2156
+ commitEditorChanges();
2157
+ }
2158
+ closeEditor();
2159
+ }
2160
+ function isColIdxWithinSelectionBounds(idx) {
2161
+ return idx >= minColIdx && idx <= maxColIdx;
2162
+ }
2163
+ function isRowIdxWithinViewportBounds(rowIdx) {
2164
+ return rowIdx >= 0 && rowIdx < rows.length;
2165
+ }
2166
+ function isCellWithinSelectionBounds({
2167
+ idx,
2168
+ rowIdx
2169
+ }) {
2170
+ return rowIdx >= minRowIdx && rowIdx <= maxRowIdx && isColIdxWithinSelectionBounds(idx);
2171
+ }
2172
+ function isCellWithinViewportBounds({
2173
+ idx,
2174
+ rowIdx
2175
+ }) {
2176
+ return isRowIdxWithinViewportBounds(rowIdx) && isColIdxWithinSelectionBounds(idx);
2177
+ }
2178
+ function isCellEditable(position) {
2179
+ return isCellWithinViewportBounds(position) && isSelectedCellEditable({
2180
+ columns,
2181
+ rows,
2182
+ selectedPosition: position,
2183
+ isGroupRow
2184
+ });
2185
+ }
2186
+ function selectCell(position, enableEditor) {
2187
+ if (!isCellWithinSelectionBounds(position)) return;
2188
+ commitEditorChanges();
2189
+ if (enableEditor && isCellEditable(position)) {
2190
+ const row = rows[position.rowIdx];
2191
+ setSelectedPosition({
2192
+ ...position,
2193
+ mode: 'EDIT',
2194
+ row,
2195
+ originalRow: row
2196
+ });
2197
+ } else if (selectedPosition.mode !== 'SELECT' || selectedPosition.idx !== position.idx || selectedPosition.rowIdx !== position.rowIdx) {
2198
+ setSelectedPosition({
2199
+ ...position,
2200
+ mode: 'SELECT'
2201
+ });
2202
+ }
2203
+ }
2204
+ function closeEditor() {
2205
+ if (selectedPosition.mode === 'SELECT') return;
2206
+ setSelectedPosition(({
2207
+ idx,
2208
+ rowIdx
2209
+ }) => ({
2210
+ idx,
2211
+ rowIdx,
2212
+ mode: 'SELECT'
2213
+ }));
2214
+ }
2215
+ function scrollToCell({
2216
+ idx,
2217
+ rowIdx
2218
+ }) {
2219
+ const {
2220
+ current
2221
+ } = gridRef;
2222
+ if (!current) return;
2223
+ if (typeof idx === 'number' && idx > lastFrozenColumnIndex) {
2224
+ rowIdx ??= selectedPosition.rowIdx;
2225
+ if (!isCellWithinSelectionBounds({
2226
+ rowIdx,
2227
+ idx
2228
+ })) return;
2229
+ const {
2230
+ clientWidth
2231
+ } = current;
2232
+ const column = columns[idx];
2233
+ const {
2234
+ left,
2235
+ width
2236
+ } = columnMetrics.get(column);
2237
+ let right = left + width;
2238
+ const colSpan = getSelectedCellColSpan({
2239
+ rows,
2240
+ summaryRows,
2241
+ rowIdx,
2242
+ lastFrozenColumnIndex,
2243
+ column,
2244
+ isGroupRow
2245
+ });
2246
+ if (colSpan !== undefined) {
2247
+ const {
2248
+ left,
2249
+ width
2250
+ } = columnMetrics.get(columns[column.idx + colSpan - 1]);
2251
+ right = left + width;
2252
+ }
2253
+ const isCellAtLeftBoundary = left < scrollLeft + totalFrozenColumnWidth;
2254
+ const isCellAtRightBoundary = right > clientWidth + scrollLeft;
2255
+ if (isCellAtLeftBoundary) {
2256
+ current.scrollLeft = left - totalFrozenColumnWidth;
2257
+ } else if (isCellAtRightBoundary) {
2258
+ current.scrollLeft = right - clientWidth;
2259
+ }
2260
+ }
2261
+ if (typeof rowIdx === 'number' && isRowIdxWithinViewportBounds(rowIdx)) {
2262
+ const rowTop = getRowTop(rowIdx);
2263
+ const rowHeight = getRowHeight(rowIdx);
2264
+ if (rowTop < scrollTop) {
2265
+ current.scrollTop = rowTop;
2266
+ } else if (rowTop + rowHeight > scrollTop + clientHeight) {
2267
+ current.scrollTop = rowTop + rowHeight - clientHeight;
2268
+ }
2269
+ }
2270
+ }
2271
+ function getNextPosition(key, ctrlKey, shiftKey) {
2272
+ const {
2273
+ idx,
2274
+ rowIdx
2275
+ } = selectedPosition;
2276
+ const row = rows[rowIdx];
2277
+ const isRowSelected = selectedCellIsWithinSelectionBounds && idx === -1;
2278
+ if (key === 'ArrowLeft' && isRowSelected && isGroupRow(row) && !row.isExpanded && row.level !== 0) {
2279
+ let parentRowIdx = -1;
2280
+ for (let i = selectedPosition.rowIdx - 1; i >= 0; i--) {
2281
+ const parentRow = rows[i];
2282
+ if (isGroupRow(parentRow) && parentRow.id === row.parentId) {
2283
+ parentRowIdx = i;
2284
+ break;
2285
+ }
2286
+ }
2287
+ if (parentRowIdx !== -1) {
2288
+ return {
2289
+ idx,
2290
+ rowIdx: parentRowIdx
2291
+ };
2292
+ }
2293
+ }
2294
+ switch (key) {
2295
+ case 'ArrowUp':
2296
+ return {
2297
+ idx,
2298
+ rowIdx: rowIdx - 1
2299
+ };
2300
+ case 'ArrowDown':
2301
+ return {
2302
+ idx,
2303
+ rowIdx: rowIdx + 1
2304
+ };
2305
+ case 'ArrowLeft':
2306
+ return {
2307
+ idx: idx - 1,
2308
+ rowIdx
2309
+ };
2310
+ case 'ArrowRight':
2311
+ return {
2312
+ idx: idx + 1,
2313
+ rowIdx
2314
+ };
2315
+ case 'Tab':
2316
+ return {
2317
+ idx: idx + (shiftKey ? -1 : 1),
2318
+ rowIdx
2319
+ };
2320
+ case 'Home':
2321
+ if (isRowSelected) return {
2322
+ idx,
2323
+ rowIdx: 0
2324
+ };
2325
+ return {
2326
+ idx: 0,
2327
+ rowIdx: ctrlKey ? minRowIdx : rowIdx
2328
+ };
2329
+ case 'End':
2330
+ if (isRowSelected) return {
2331
+ idx,
2332
+ rowIdx: rows.length - 1
2333
+ };
2334
+ return {
2335
+ idx: maxColIdx,
2336
+ rowIdx: ctrlKey ? maxRowIdx : rowIdx
2337
+ };
2338
+ case 'PageUp':
2339
+ {
2340
+ if (selectedPosition.rowIdx === minRowIdx) return selectedPosition;
2341
+ const nextRowY = getRowTop(rowIdx) + getRowHeight(rowIdx) - clientHeight;
2342
+ return {
2343
+ idx,
2344
+ rowIdx: nextRowY > 0 ? findRowIdx(nextRowY) : 0
2345
+ };
2346
+ }
2347
+ case 'PageDown':
2348
+ {
2349
+ if (selectedPosition.rowIdx >= rows.length) return selectedPosition;
2350
+ const nextRowY = getRowTop(rowIdx) + clientHeight;
2351
+ return {
2352
+ idx,
2353
+ rowIdx: nextRowY < totalRowHeight ? findRowIdx(nextRowY) : rows.length - 1
2354
+ };
2355
+ }
2356
+ default:
2357
+ return selectedPosition;
2358
+ }
2359
+ }
2360
+ function navigate(event) {
2361
+ if (selectedPosition.mode === 'EDIT') {
2362
+ const onNavigation = columns[selectedPosition.idx].editorOptions?.onNavigation ?? onEditorNavigation;
2363
+ if (!onNavigation(event)) return;
2364
+ }
2365
+ const {
2366
+ key,
2367
+ shiftKey
2368
+ } = event;
2369
+ let mode = cellNavigationMode;
2370
+ if (key === 'Tab') {
2371
+ if (canExitGrid({
2372
+ shiftKey,
2373
+ cellNavigationMode,
2374
+ maxColIdx,
2375
+ minRowIdx,
2376
+ maxRowIdx,
2377
+ selectedPosition
2378
+ })) {
2379
+ commitEditorChanges();
2380
+ return;
2381
+ }
2382
+ mode = cellNavigationMode === 'NONE' ? 'CHANGE_ROW' : cellNavigationMode;
2383
+ }
2384
+ event.preventDefault();
2385
+ const ctrlKey = isCtrlKeyHeldDown(event);
2386
+ const nextPosition = getNextPosition(key, ctrlKey, shiftKey);
2387
+ if (nextPosition.rowIdx === selectedPosition.rowIdx && nextPosition.idx === selectedPosition.idx) {
2388
+ return;
2389
+ }
2390
+ const nextSelectedCellPosition = getNextSelectedCellPosition({
2391
+ columns,
2392
+ colSpanColumns,
2393
+ rows,
2394
+ summaryRows,
2395
+ minRowIdx,
2396
+ maxRowIdx,
2397
+ lastFrozenColumnIndex,
2398
+ cellNavigationMode: mode,
2399
+ currentPosition: selectedPosition,
2400
+ nextPosition,
2401
+ isCellWithinBounds: isCellWithinSelectionBounds,
2402
+ isGroupRow
2403
+ });
2404
+ selectCell(nextSelectedCellPosition);
2405
+ }
2406
+ function getDraggedOverCellIdx(currentRowIdx) {
2407
+ if (draggedOverRowIdx === undefined) return;
2408
+ const {
2409
+ rowIdx
2410
+ } = selectedPosition;
2411
+ const isDraggedOver = rowIdx < draggedOverRowIdx ? rowIdx < currentRowIdx && currentRowIdx <= draggedOverRowIdx : rowIdx > currentRowIdx && currentRowIdx >= draggedOverRowIdx;
2412
+ return isDraggedOver ? selectedPosition.idx : undefined;
2413
+ }
2414
+ function getDragHandle(rowIdx) {
2415
+ if (selectedPosition.rowIdx !== rowIdx || selectedPosition.mode === 'EDIT' || hasGroups || onFill == null) {
2416
+ return;
2417
+ }
2418
+ return /*#__PURE__*/jsxRuntime.jsx(DragHandle, {
2419
+ rows: rawRows,
2420
+ columns: columns,
2421
+ selectedPosition: selectedPosition,
2422
+ isCellEditable: isCellEditable,
2423
+ latestDraggedOverRowIdx: latestDraggedOverRowIdx,
2424
+ onRowsChange: onRowsChange,
2425
+ onFill: onFill,
2426
+ setDragging: setDragging,
2427
+ setDraggedOverRowIdx: setDraggedOverRowIdx
2428
+ });
2429
+ }
2430
+ function getCellEditor(rowIdx) {
2431
+ const isOutsideEditableRows = Array.isArray(editableRowIdxs) ? !editableRowIdxs.includes(selectedPosition.rowIdx) : selectedPosition.rowIdx !== rowIdx;
2432
+ if (isOutsideEditableRows || selectedPosition.mode === 'SELECT') return;
2433
+ const {
2434
+ idx,
2435
+ row
2436
+ } = selectedPosition;
2437
+ const column = columns[idx];
2438
+ const colSpan = getColSpan(column, lastFrozenColumnIndex, {
2439
+ type: 'ROW',
2440
+ row
2441
+ });
2442
+ return /*#__PURE__*/jsxRuntime.jsx(EditCell, {
2443
+ column: column,
2444
+ colSpan: colSpan,
2445
+ row: row,
2446
+ rowIdx: selectedPosition.rowIdx,
2447
+ onRowChange: handleEditorRowChange,
2448
+ onClose: handleOnClose
2449
+ }, column.key);
2450
+ }
2451
+ function getViewportRows() {
2452
+ const rowElements = [];
2453
+ let startRowIndex = 0;
2454
+ const {
2455
+ idx: selectedIdx,
2456
+ rowIdx: selectedRowIdx
2457
+ } = selectedPosition;
2458
+ const startRowIdx = selectedCellIsWithinViewportBounds && selectedRowIdx < rowOverscanStartIdx ? rowOverscanStartIdx - 1 : rowOverscanStartIdx;
2459
+ const endRowIdx = selectedCellIsWithinViewportBounds && selectedRowIdx > rowOverscanEndIdx ? rowOverscanEndIdx + 1 : rowOverscanEndIdx;
2460
+ for (let viewportRowIdx = startRowIdx; viewportRowIdx <= endRowIdx; viewportRowIdx++) {
2461
+ const isRowOutsideViewport = viewportRowIdx === rowOverscanStartIdx - 1 || viewportRowIdx === rowOverscanEndIdx + 1;
2462
+ const rowIdx = isRowOutsideViewport ? selectedRowIdx : viewportRowIdx;
2463
+ let rowColumns = viewportColumns;
2464
+ const selectedColumn = columns[selectedIdx];
2465
+ if (selectedColumn !== undefined) {
2466
+ if (isRowOutsideViewport) {
2467
+ rowColumns = [selectedColumn];
2468
+ } else if (selectedRowIdx === rowIdx && !viewportColumns.includes(selectedColumn)) {
2469
+ rowColumns = selectedIdx > viewportColumns[viewportColumns.length - 1].idx ? [...viewportColumns, selectedColumn] : [...viewportColumns.slice(0, lastFrozenColumnIndex + 1), selectedColumn, ...viewportColumns.slice(lastFrozenColumnIndex + 1)];
2470
+ }
2471
+ }
2472
+ const row = rows[rowIdx];
2473
+ const top = getRowTop(rowIdx) + headerRowHeight;
2474
+ if (isGroupRow(row)) {
2475
+ ({
2476
+ startRowIndex
2477
+ } = row);
2478
+ const isGroupRowSelected = isSelectable && row.childRows.every(cr => selectedRows.has(rowKeyGetter(cr)));
2479
+ rowElements.push(/*#__PURE__*/jsxRuntime.jsx(GroupRowRenderer, {
2480
+ "aria-level": row.level + 1,
2481
+ "aria-setsize": row.setSize,
2482
+ "aria-posinset": row.posInSet + 1,
2483
+ "aria-rowindex": headerRowsCount + startRowIndex + 1,
2484
+ "aria-selected": isSelectable ? isGroupRowSelected : undefined,
2485
+ id: row.id,
2486
+ groupKey: row.groupKey,
2487
+ viewportColumns: rowColumns,
2488
+ childRows: row.childRows,
2489
+ rowIdx: rowIdx,
2490
+ row: row,
2491
+ top: top,
2492
+ height: getRowHeight(rowIdx),
2493
+ level: row.level,
2494
+ isExpanded: row.isExpanded,
2495
+ selectedCellIdx: selectedRowIdx === rowIdx ? selectedIdx : undefined,
2496
+ isRowSelected: isGroupRowSelected,
2497
+ selectGroup: selectGroupLatest,
2498
+ toggleGroup: toggleGroupLatest
2499
+ }, row.id));
2500
+ continue;
2501
+ }
2502
+ startRowIndex++;
2503
+ let key;
2504
+ let isRowSelected = false;
2505
+ if (typeof rowKeyGetter === 'function') {
2506
+ key = rowKeyGetter(row);
2507
+ isRowSelected = selectedRows?.has(key) ?? false;
2508
+ } else {
2509
+ key = hasGroups ? startRowIndex : rowIdx;
2510
+ }
2511
+ rowElements.push(/*#__PURE__*/jsxRuntime.jsx(RowRenderer, {
2512
+ "aria-rowindex": headerRowsCount + (hasGroups ? startRowIndex : rowIdx) + 1,
2513
+ "aria-selected": isSelectable ? isRowSelected : undefined,
2514
+ rowIdx: rowIdx,
2515
+ row: row,
2516
+ viewportColumns: rowColumns,
2517
+ isRowSelected: isRowSelected,
2518
+ onRowClick: onRowClick,
2519
+ onRowDoubleClick: onRowDoubleClick,
2520
+ rowClass: rowClass,
2521
+ top: top,
2522
+ height: getRowHeight(rowIdx),
2523
+ copiedCellIdx: copiedCell !== null && copiedCell.row === row ? columns.findIndex(c => c.key === copiedCell.columnKey) : undefined,
2524
+ selectedCellIdx: selectedRowIdx === rowIdx ? selectedIdx : undefined,
2525
+ draggedOverCellIdx: getDraggedOverCellIdx(rowIdx),
2526
+ setDraggedOverRowIdx: isDragging ? setDraggedOverRowIdx : undefined,
2527
+ lastFrozenColumnIndex: lastFrozenColumnIndex,
2528
+ onRowChange: handleFormatterRowChangeLatest,
2529
+ selectCell: selectViewportCellLatest,
2530
+ selectedCellDragHandle: getDragHandle(rowIdx),
2531
+ selectedCellEditor: getCellEditor(rowIdx)
2532
+ }, key));
2533
+ }
2534
+ return rowElements;
2535
+ }
2536
+ if (selectedPosition.idx > maxColIdx || selectedPosition.rowIdx > maxRowIdx) {
2537
+ setSelectedPosition(initialPosition);
2538
+ setDraggedOverRowIdx(undefined);
2539
+ }
2540
+ if (selectedPosition.mode === 'EDIT' && rows[selectedPosition.rowIdx] !== selectedPosition.originalRow) {
2541
+ closeEditor();
2542
+ }
2543
+ return /*#__PURE__*/jsxRuntime.jsxs("div", {
2544
+ role: hasGroups ? 'treegrid' : 'grid',
2545
+ "aria-label": ariaLabel,
2546
+ "aria-labelledby": ariaLabelledBy,
2547
+ "aria-describedby": ariaDescribedBy,
2548
+ "aria-multiselectable": isSelectable ? true : undefined,
2549
+ "aria-colcount": columns.length,
2550
+ "aria-rowcount": headerRowsCount + rowsCount + summaryRowsCount,
2551
+ className: clsx(rootClassname, className, isDragging && viewportDraggingClassname),
2552
+ style: {
2553
+ ...style,
2554
+ '--header-row-height': `${headerRowHeight}px`,
2555
+ '--row-width': `${totalColumnWidth}px`,
2556
+ '--summary-row-height': `${summaryRowHeight}px`,
2557
+ ...layoutCssVars
2558
+ },
2559
+ ref: gridRef,
2560
+ onScroll: handleScroll,
2561
+ onKeyDown: handleKeyDown,
2562
+ "data-testid": testId,
2563
+ children: [/*#__PURE__*/jsxRuntime.jsx(HeaderRow$1, {
2564
+ columns: viewportColumns,
2565
+ onColumnResize: handleColumnResize,
2566
+ allRowsSelected: allRowsSelected,
2567
+ onAllRowsSelectionChange: selectAllRowsLatest,
2568
+ sortColumns: sortColumns,
2569
+ onSortColumnsChange: onSortColumnsChange,
2570
+ lastFrozenColumnIndex: lastFrozenColumnIndex,
2571
+ selectedCellIdx: isHeaderRowSelected ? selectedPosition.idx : undefined,
2572
+ selectCell: selectHeaderCellLatest,
2573
+ shouldFocusGrid: !selectedCellIsWithinSelectionBounds
2574
+ }), rows.length === 0 && noRowsFallback ? noRowsFallback : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
2575
+ children: [/*#__PURE__*/jsxRuntime.jsx("div", {
2576
+ style: {
2577
+ height: max(totalRowHeight, clientHeight)
2578
+ }
2579
+ }), /*#__PURE__*/jsxRuntime.jsx(RowSelectionChangeProvider, {
2580
+ value: selectRowLatest,
2581
+ children: getViewportRows()
2582
+ }), summaryRows?.map((row, rowIdx) => {
2583
+ const isSummaryRowSelected = selectedPosition.rowIdx === headerRowsCount + rows.length + rowIdx - 1;
2584
+ return /*#__PURE__*/jsxRuntime.jsx(SummaryRow$1, {
2585
+ "aria-rowindex": headerRowsCount + rowsCount + rowIdx + 1,
2586
+ rowIdx: rowIdx,
2587
+ row: row,
2588
+ bottom: summaryRowHeight * (summaryRows.length - 1 - rowIdx),
2589
+ viewportColumns: viewportColumns,
2590
+ lastFrozenColumnIndex: lastFrozenColumnIndex,
2591
+ selectedCellIdx: isSummaryRowSelected ? selectedPosition.idx : undefined,
2592
+ selectCell: selectSummaryCellLatest
2593
+ }, rowIdx);
2594
+ })]
2595
+ })]
2596
+ });
2597
+ }
2598
+ const DataGrid$1 = /*#__PURE__*/react.forwardRef(DataGrid);
2599
+
2600
+ var css_248z = ".t1u15qzo700-beta711{appearance:none;background-color:var(--background-color);border:2px solid #ccc;box-sizing:border-box;color:var(--color);font-family:inherit;font-size:var(--font-size);height:100%;padding:0 6px;vertical-align:top;width:100%}.t1u15qzo700-beta711:focus{border-color:var(--selection-color);outline:none}.t1u15qzo700-beta711::placeholder{color:#999;opacity:1}";
2601
+ styleInject(css_248z,{"insertAt":"top"});
2602
+
2603
+ const textEditor = "t1u15qzo700-beta711";
2604
+ const textEditorClassname = `rdg-text-editor ${textEditor}`;
2605
+ function autoFocusAndSelect(input) {
2606
+ input?.focus();
2607
+ input?.select();
2608
+ }
2609
+ function TextEditor({
2610
+ row,
2611
+ column,
2612
+ onRowChange,
2613
+ onClose
2614
+ }) {
2615
+ return /*#__PURE__*/jsxRuntime.jsx("input", {
2616
+ className: textEditorClassname,
2617
+ ref: autoFocusAndSelect,
2618
+ value: row[column.key],
2619
+ onChange: event => onRowChange({
2620
+ ...row,
2621
+ [column.key]: event.target.value
2622
+ }),
2623
+ onBlur: () => onClose(true)
2624
+ });
2625
+ }
2626
+
2627
+ exports.Row = RowWithRef;
2628
+ exports.SELECT_COLUMN_KEY = SELECT_COLUMN_KEY;
2629
+ exports.SelectCellFormatter = SelectCellFormatter;
2630
+ exports.SelectColumn = SelectColumn;
2631
+ exports.SortableHeaderCell = SortableHeaderCell;
2632
+ exports.TextEditor = TextEditor;
2633
+ exports.ToggleGroupFormatter = ToggleGroupFormatter;
2634
+ exports.ValueFormatter = ValueFormatter;
2635
+ exports["default"] = DataGrid$1;
2636
+ exports.useRowSelection = useRowSelection;
2637
+ //# sourceMappingURL=bundle.cjs.map