@lensui/lens-table 0.1.64 → 0.1.66
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/dist/index.cjs +633 -410
- package/dist/index.css +151 -0
- package/dist/index.d.cts +24 -3
- package/dist/index.d.ts +24 -3
- package/dist/index.js +554 -331
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// src/Table.tsx
|
|
2
|
-
import { forwardRef, useImperativeHandle, Fragment as Fragment2, useCallback as useCallback2, useEffect as
|
|
2
|
+
import { forwardRef, useImperativeHandle, Fragment as Fragment2, useCallback as useCallback2, useEffect as useEffect3, useLayoutEffect as useLayoutEffect3, useMemo as useMemo2, useRef as useRef4, useState as useState6 } from "react";
|
|
3
3
|
import { flushSync } from "react-dom";
|
|
4
4
|
|
|
5
5
|
// src/components/EmptyState.tsx
|
|
@@ -199,6 +199,7 @@ function DefaultEmptyState({ label = ZH_CN_GRID_LABELS.empty }) {
|
|
|
199
199
|
// src/components/editors/ChoiceEditor.tsx
|
|
200
200
|
import { Portal } from "@ark-ui/react/portal";
|
|
201
201
|
import { Select, createListCollection } from "@ark-ui/react/select";
|
|
202
|
+
import { useEffect, useId as useId2, useLayoutEffect, useMemo, useRef, useState } from "react";
|
|
202
203
|
|
|
203
204
|
// src/icons/gridIcons.tsx
|
|
204
205
|
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
@@ -231,6 +232,13 @@ function ChoiceChevronIcon() {
|
|
|
231
232
|
function ChoiceCheckIcon() {
|
|
232
233
|
return /* @__PURE__ */ jsx2("svg", { className: "rvg-choice-check", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "m3.5 8 2.6 2.6L12.5 4" }) });
|
|
233
234
|
}
|
|
235
|
+
function MultilineEditorIcon() {
|
|
236
|
+
return /* @__PURE__ */ jsxs2("svg", { className: "rvg-multiline-icon", viewBox: "0 0 16 16", "aria-hidden": "true", children: [
|
|
237
|
+
/* @__PURE__ */ jsx2("circle", { cx: "3.5", cy: "8", r: "1" }),
|
|
238
|
+
/* @__PURE__ */ jsx2("circle", { cx: "8", cy: "8", r: "1" }),
|
|
239
|
+
/* @__PURE__ */ jsx2("circle", { cx: "12.5", cy: "8", r: "1" })
|
|
240
|
+
] });
|
|
241
|
+
}
|
|
234
242
|
function HeaderDragIcon({ className, style }) {
|
|
235
243
|
return /* @__PURE__ */ jsxs2("svg", { className, style, viewBox: "0 0 14 14", "aria-hidden": "true", children: [
|
|
236
244
|
/* @__PURE__ */ jsx2("circle", { cx: "7", cy: "2.5", r: "1.25" }),
|
|
@@ -294,12 +302,126 @@ function LoadingSpinnerIcon() {
|
|
|
294
302
|
|
|
295
303
|
// src/components/editors/ChoiceEditor.tsx
|
|
296
304
|
import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
297
|
-
function
|
|
298
|
-
const
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
305
|
+
function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownHeight, style, labels, onChange, onCommit, onCancel }) {
|
|
306
|
+
const editorRef = useRef(null);
|
|
307
|
+
const popupRef = useRef(null);
|
|
308
|
+
const originalValueRef = useRef(value);
|
|
309
|
+
const listboxId = useId2();
|
|
310
|
+
const originalValue = originalValueRef.current;
|
|
311
|
+
const [inputValue, setInputValue] = useState(value);
|
|
312
|
+
const [activeIndex, setActiveIndex] = useState(0);
|
|
313
|
+
const [popupStyle, setPopupStyle] = useState({});
|
|
314
|
+
const filteredOptions = useMemo(() => {
|
|
315
|
+
const query = inputValue.trim().toLocaleLowerCase();
|
|
316
|
+
if (!query || query === originalValue.toLocaleLowerCase()) return options;
|
|
317
|
+
return options.filter((option) => option.label.toLocaleLowerCase().includes(query) || option.value.toLocaleLowerCase().includes(query));
|
|
318
|
+
}, [inputValue, options, originalValue]);
|
|
319
|
+
useLayoutEffect(() => {
|
|
320
|
+
const positionPopup = () => {
|
|
321
|
+
const rect = editorRef.current?.getBoundingClientRect();
|
|
322
|
+
if (!rect) return;
|
|
323
|
+
const availableBelow = window.innerHeight - rect.bottom - 8;
|
|
324
|
+
const availableAbove = rect.top - 8;
|
|
325
|
+
if (availableBelow < 120 && availableAbove > availableBelow) {
|
|
326
|
+
setPopupStyle({
|
|
327
|
+
position: "fixed",
|
|
328
|
+
bottom: window.innerHeight - rect.top + 4,
|
|
329
|
+
left: rect.left,
|
|
330
|
+
width: rect.width,
|
|
331
|
+
maxHeight: Math.min(maxDropdownHeight, availableAbove)
|
|
332
|
+
});
|
|
333
|
+
return;
|
|
334
|
+
}
|
|
335
|
+
setPopupStyle({
|
|
336
|
+
position: "fixed",
|
|
337
|
+
top: rect.bottom + 4,
|
|
338
|
+
left: rect.left,
|
|
339
|
+
width: rect.width,
|
|
340
|
+
maxHeight: Math.min(maxDropdownHeight, Math.max(80, availableBelow))
|
|
341
|
+
});
|
|
342
|
+
};
|
|
343
|
+
positionPopup();
|
|
344
|
+
window.addEventListener("resize", positionPopup);
|
|
345
|
+
window.addEventListener("scroll", positionPopup, true);
|
|
346
|
+
return () => {
|
|
347
|
+
window.removeEventListener("resize", positionPopup);
|
|
348
|
+
window.removeEventListener("scroll", positionPopup, true);
|
|
349
|
+
};
|
|
350
|
+
}, [maxDropdownHeight]);
|
|
351
|
+
useEffect(() => {
|
|
352
|
+
const handleOutsidePointer = (event) => {
|
|
353
|
+
const target = event.target;
|
|
354
|
+
if (!(target instanceof Node)) return;
|
|
355
|
+
if (editorRef.current?.contains(target) || popupRef.current?.contains(target)) return;
|
|
356
|
+
onCommit(allowCustomValue ? inputValue || originalValue : originalValue);
|
|
357
|
+
};
|
|
358
|
+
document.addEventListener("pointerdown", handleOutsidePointer, true);
|
|
359
|
+
return () => document.removeEventListener("pointerdown", handleOutsidePointer, true);
|
|
360
|
+
}, [allowCustomValue, inputValue, onCommit, originalValue]);
|
|
361
|
+
const selectOption = (option) => {
|
|
362
|
+
onChange(option.value);
|
|
363
|
+
onCommit(option.value);
|
|
364
|
+
};
|
|
365
|
+
const handleKeyDown = (event) => {
|
|
366
|
+
event.stopPropagation();
|
|
367
|
+
if (event.key === "Escape") onCancel();
|
|
368
|
+
if (event.key === "ArrowDown") {
|
|
369
|
+
event.preventDefault();
|
|
370
|
+
setActiveIndex((index) => Math.min(filteredOptions.length - 1, index + 1));
|
|
371
|
+
}
|
|
372
|
+
if (event.key === "ArrowUp") {
|
|
373
|
+
event.preventDefault();
|
|
374
|
+
setActiveIndex((index) => Math.max(0, index - 1));
|
|
375
|
+
}
|
|
376
|
+
if (event.key === "Enter") {
|
|
377
|
+
event.preventDefault();
|
|
378
|
+
const option = filteredOptions[activeIndex];
|
|
379
|
+
if (option) selectOption(option);
|
|
380
|
+
else if (allowCustomValue) onCommit(inputValue || originalValue);
|
|
381
|
+
}
|
|
382
|
+
};
|
|
383
|
+
return /* @__PURE__ */ jsxs3("div", { ref: editorRef, className: "rvg-choice-editor rvg-searchable-choice-editor", style, children: [
|
|
384
|
+
/* @__PURE__ */ jsx3(
|
|
385
|
+
"input",
|
|
386
|
+
{
|
|
387
|
+
className: inputValue === originalValue ? "is-pristine" : void 0,
|
|
388
|
+
value: inputValue,
|
|
389
|
+
autoFocus: true,
|
|
390
|
+
"aria-label": labels.search,
|
|
391
|
+
"aria-controls": listboxId,
|
|
392
|
+
onFocus: (event) => event.currentTarget.select(),
|
|
393
|
+
onChange: (event) => {
|
|
394
|
+
setInputValue(event.target.value);
|
|
395
|
+
onChange(event.target.value);
|
|
396
|
+
setActiveIndex(0);
|
|
397
|
+
},
|
|
398
|
+
onKeyDown: handleKeyDown
|
|
399
|
+
}
|
|
400
|
+
),
|
|
401
|
+
/* @__PURE__ */ jsx3("span", { className: "rvg-searchable-choice-indicator", children: /* @__PURE__ */ jsx3(ChoiceChevronIcon, {}) }),
|
|
402
|
+
/* @__PURE__ */ jsx3(Portal, { children: /* @__PURE__ */ jsx3("div", { ref: popupRef, id: listboxId, role: "listbox", className: "rvg-choice-content rvg-searchable-choice-content", style: popupStyle, children: filteredOptions.map((option, index) => /* @__PURE__ */ jsxs3(
|
|
403
|
+
"button",
|
|
404
|
+
{
|
|
405
|
+
type: "button",
|
|
406
|
+
role: "option",
|
|
407
|
+
"aria-selected": option.value === originalValue,
|
|
408
|
+
className: `rvg-choice-item${index === activeIndex ? " is-active" : ""}${option.value === originalValue ? " is-selected" : ""}`,
|
|
409
|
+
onPointerDown: (event) => event.preventDefault(),
|
|
410
|
+
onMouseEnter: () => setActiveIndex(index),
|
|
411
|
+
onClick: () => selectOption(option),
|
|
412
|
+
children: [
|
|
413
|
+
/* @__PURE__ */ jsx3("span", { children: option.label }),
|
|
414
|
+
option.value === originalValue && /* @__PURE__ */ jsx3(ChoiceCheckIcon, {})
|
|
415
|
+
]
|
|
416
|
+
},
|
|
417
|
+
option.value
|
|
418
|
+
)) }) })
|
|
419
|
+
] });
|
|
420
|
+
}
|
|
421
|
+
function ChoiceEditor(props) {
|
|
422
|
+
const { value, options, searchable = false, maxDropdownHeight = 240, style, labels, onChange, onCommit, onCancel } = props;
|
|
423
|
+
if (searchable) return /* @__PURE__ */ jsx3(SearchableChoiceEditor, { ...props, maxDropdownHeight });
|
|
424
|
+
const collection = createListCollection({ items: options, itemToValue: (item) => item.value, itemToString: (item) => item.label });
|
|
303
425
|
return /* @__PURE__ */ jsxs3(
|
|
304
426
|
Select.Root,
|
|
305
427
|
{
|
|
@@ -330,7 +452,7 @@ function ChoiceEditor({ value, options, style, labels, onChange, onCommit, onCan
|
|
|
330
452
|
/* @__PURE__ */ jsx3(Select.ValueText, { placeholder: labels.choose }),
|
|
331
453
|
/* @__PURE__ */ jsx3(Select.Indicator, { children: /* @__PURE__ */ jsx3(ChoiceChevronIcon, {}) })
|
|
332
454
|
] }) }),
|
|
333
|
-
/* @__PURE__ */ jsx3(Portal, { children: /* @__PURE__ */ jsx3(Select.Positioner, { children: /* @__PURE__ */ jsx3(Select.Content, { className: "rvg-choice-content", children: options.map((option) => /* @__PURE__ */ jsxs3(Select.Item, { className: "rvg-choice-item", item: option, children: [
|
|
455
|
+
/* @__PURE__ */ jsx3(Portal, { children: /* @__PURE__ */ jsx3(Select.Positioner, { children: /* @__PURE__ */ jsx3(Select.Content, { className: "rvg-choice-content", style: { maxHeight: maxDropdownHeight, overflowY: "auto" }, children: options.map((option) => /* @__PURE__ */ jsxs3(Select.Item, { className: "rvg-choice-item", item: option, children: [
|
|
334
456
|
/* @__PURE__ */ jsx3(Select.ItemText, { children: option.label }),
|
|
335
457
|
/* @__PURE__ */ jsx3(Select.ItemIndicator, { children: /* @__PURE__ */ jsx3(ChoiceCheckIcon, {}) })
|
|
336
458
|
] }, option.value)) }) }) }),
|
|
@@ -341,7 +463,7 @@ function ChoiceEditor({ value, options, style, labels, onChange, onCommit, onCan
|
|
|
341
463
|
}
|
|
342
464
|
|
|
343
465
|
// src/components/editors/DateEditor.tsx
|
|
344
|
-
import { useState as
|
|
466
|
+
import { useState as useState3 } from "react";
|
|
345
467
|
import { DatePicker } from "@ark-ui/react/date-picker";
|
|
346
468
|
import { Portal as Portal2 } from "@ark-ui/react/portal";
|
|
347
469
|
import { parseDate as parseDate2 } from "@internationalized/date";
|
|
@@ -388,22 +510,22 @@ function timeFormatHasSeconds(format, value) {
|
|
|
388
510
|
}
|
|
389
511
|
|
|
390
512
|
// src/components/editors/TimeEditors.tsx
|
|
391
|
-
import { useEffect, useLayoutEffect, useRef, useState } from "react";
|
|
513
|
+
import { useEffect as useEffect2, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState2 } from "react";
|
|
392
514
|
import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
393
515
|
function CompactTimeEditor({ value, range, showSeconds, style, labels, onChange, onCommit, onCancel }) {
|
|
394
516
|
const values = range ? value.split(" ~ ") : [value];
|
|
395
|
-
const [dropdownOpen, setDropdownOpen] =
|
|
396
|
-
const optionRefs =
|
|
397
|
-
const editorRef =
|
|
398
|
-
const hasPositionedTimeRef =
|
|
399
|
-
|
|
517
|
+
const [dropdownOpen, setDropdownOpen] = useState2(true);
|
|
518
|
+
const optionRefs = useRef2([[], []]);
|
|
519
|
+
const editorRef = useRef2(null);
|
|
520
|
+
const hasPositionedTimeRef = useRef2(false);
|
|
521
|
+
useEffect2(() => {
|
|
400
522
|
const closeOnOutsidePointer = (event) => {
|
|
401
523
|
if (!editorRef.current?.contains(event.target)) setDropdownOpen(false);
|
|
402
524
|
};
|
|
403
525
|
document.addEventListener("pointerdown", closeOnOutsidePointer, true);
|
|
404
526
|
return () => document.removeEventListener("pointerdown", closeOnOutsidePointer, true);
|
|
405
527
|
}, []);
|
|
406
|
-
|
|
528
|
+
useLayoutEffect2(() => {
|
|
407
529
|
if (!dropdownOpen) return;
|
|
408
530
|
const behavior = hasPositionedTimeRef.current ? "smooth" : "auto";
|
|
409
531
|
values.forEach((time, index) => {
|
|
@@ -478,14 +600,14 @@ function CompactTimeEditor({ value, range, showSeconds, style, labels, onChange,
|
|
|
478
600
|
] });
|
|
479
601
|
}
|
|
480
602
|
function DateTimePanel({ values, labels, showSeconds, onChange }) {
|
|
481
|
-
const [activeIndex, setActiveIndex] =
|
|
603
|
+
const [activeIndex, setActiveIndex] = useState2(0);
|
|
482
604
|
const activeValue = values[activeIndex] ?? "";
|
|
483
605
|
const [, hour = "00", minute = "00", second = "00"] = activeValue.match(/[T ](\d{2}):(\d{2})(?::(\d{2}))?/) ?? [];
|
|
484
|
-
const hoursRef =
|
|
485
|
-
const minutesRef =
|
|
486
|
-
const secondsRef =
|
|
487
|
-
const positionedRef =
|
|
488
|
-
|
|
606
|
+
const hoursRef = useRef2(null);
|
|
607
|
+
const minutesRef = useRef2(null);
|
|
608
|
+
const secondsRef = useRef2(null);
|
|
609
|
+
const positionedRef = useRef2(false);
|
|
610
|
+
useLayoutEffect2(() => {
|
|
489
611
|
const behavior = positionedRef.current ? "smooth" : "auto";
|
|
490
612
|
hoursRef.current?.scrollTo({ top: Number(hour) * 28, behavior });
|
|
491
613
|
minutesRef.current?.scrollTo({ top: Number(minute) * 28, behavior });
|
|
@@ -520,7 +642,7 @@ function DateTimePanel({ values, labels, showSeconds, onChange }) {
|
|
|
520
642
|
// src/components/editors/DateEditor.tsx
|
|
521
643
|
import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
522
644
|
function DateEditor({ editor, value: draft, style, locale, labels, onChange, onCommit, onCancel }) {
|
|
523
|
-
const [rangeHoverValue, setRangeHoverValue] =
|
|
645
|
+
const [rangeHoverValue, setRangeHoverValue] = useState3();
|
|
524
646
|
const editorType = editor.type;
|
|
525
647
|
const isRange = editorType === "date-range" || editorType === "date-time-range";
|
|
526
648
|
const isYear = editorType === "year";
|
|
@@ -663,11 +785,21 @@ function DateEditor({ editor, value: draft, style, locale, labels, onChange, onC
|
|
|
663
785
|
}
|
|
664
786
|
|
|
665
787
|
// src/components/editors/TextEditor.tsx
|
|
788
|
+
import { useRef as useRef3 } from "react";
|
|
666
789
|
import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
667
|
-
function TextEditor({ value, type, style, labels, onChange, onCommit, onCancel }) {
|
|
790
|
+
function TextEditor({ value, type, min, max, integer = false, style, labels, onChange, onCommit, onCancel }) {
|
|
791
|
+
const originalValueRef = useRef3(value);
|
|
792
|
+
const normalizeNumber = (draft) => {
|
|
793
|
+
if (draft.trim() === "") return "";
|
|
794
|
+
const parsed = Number(draft);
|
|
795
|
+
if (!Number.isFinite(parsed)) return originalValueRef.current;
|
|
796
|
+
const integral = integer ? Math.trunc(parsed) : parsed;
|
|
797
|
+
return String(Math.min(max ?? Infinity, Math.max(min ?? -Infinity, integral)));
|
|
798
|
+
};
|
|
799
|
+
const commitValue = () => onCommit(type === "number" ? normalizeNumber(value) : value);
|
|
668
800
|
const handleKeyDown = (event) => {
|
|
669
801
|
event.stopPropagation();
|
|
670
|
-
if (event.key === "Enter")
|
|
802
|
+
if (event.key === "Enter") commitValue();
|
|
671
803
|
if (event.key === "Escape") onCancel();
|
|
672
804
|
};
|
|
673
805
|
return /* @__PURE__ */ jsxs6("div", { className: "rvg-native-editor has-clear", style, children: [
|
|
@@ -675,11 +807,19 @@ function TextEditor({ value, type, style, labels, onChange, onCommit, onCancel }
|
|
|
675
807
|
"input",
|
|
676
808
|
{
|
|
677
809
|
type,
|
|
810
|
+
min: type === "number" ? min : void 0,
|
|
811
|
+
max: type === "number" ? max : void 0,
|
|
812
|
+
step: type === "number" && integer ? 1 : void 0,
|
|
813
|
+
inputMode: type === "number" ? "numeric" : void 0,
|
|
678
814
|
style: { font: "var(--rvg-font-size-body) Inter, ui-sans-serif, system-ui, sans-serif", textAlign: style.textAlign },
|
|
679
815
|
value,
|
|
680
816
|
autoFocus: true,
|
|
681
|
-
onChange: (event) =>
|
|
682
|
-
|
|
817
|
+
onChange: (event) => {
|
|
818
|
+
const next = event.target.value;
|
|
819
|
+
if (type === "number" && integer && next !== "" && !/^-?\d+$/.test(next)) return;
|
|
820
|
+
onChange(next);
|
|
821
|
+
},
|
|
822
|
+
onBlur: commitValue,
|
|
683
823
|
onKeyDown: handleKeyDown
|
|
684
824
|
}
|
|
685
825
|
),
|
|
@@ -703,6 +843,66 @@ function TextEditor({ value, type, style, labels, onChange, onCommit, onCancel }
|
|
|
703
843
|
] });
|
|
704
844
|
}
|
|
705
845
|
|
|
846
|
+
// src/components/editors/TextAreaEditor.tsx
|
|
847
|
+
import { useState as useState4 } from "react";
|
|
848
|
+
import { createPortal } from "react-dom";
|
|
849
|
+
import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
850
|
+
function TextAreaEditor({ value, title, maxLength, style, labels, onChange, onCommit, onCancel }) {
|
|
851
|
+
const [open, setOpen] = useState4(false);
|
|
852
|
+
const handleKeyDown = (event) => {
|
|
853
|
+
event.stopPropagation();
|
|
854
|
+
if (event.key === "Enter") onCommit(value);
|
|
855
|
+
if (event.key === "Escape") onCancel();
|
|
856
|
+
};
|
|
857
|
+
return /* @__PURE__ */ jsxs7("div", { className: "rvg-native-editor rvg-textarea-editor", style, children: [
|
|
858
|
+
/* @__PURE__ */ jsx7(
|
|
859
|
+
"input",
|
|
860
|
+
{
|
|
861
|
+
value,
|
|
862
|
+
autoFocus: true,
|
|
863
|
+
maxLength,
|
|
864
|
+
onChange: (event) => onChange(event.target.value),
|
|
865
|
+
onKeyDown: handleKeyDown
|
|
866
|
+
}
|
|
867
|
+
),
|
|
868
|
+
/* @__PURE__ */ jsx7(
|
|
869
|
+
"button",
|
|
870
|
+
{
|
|
871
|
+
type: "button",
|
|
872
|
+
className: "rvg-textarea-trigger",
|
|
873
|
+
"aria-label": title,
|
|
874
|
+
onPointerDown: (event) => {
|
|
875
|
+
event.preventDefault();
|
|
876
|
+
event.stopPropagation();
|
|
877
|
+
},
|
|
878
|
+
onClick: () => setOpen(true),
|
|
879
|
+
children: /* @__PURE__ */ jsx7(MultilineEditorIcon, {})
|
|
880
|
+
}
|
|
881
|
+
),
|
|
882
|
+
open && createPortal(
|
|
883
|
+
/* @__PURE__ */ jsx7("div", { className: "rvg-textarea-backdrop", role: "presentation", children: /* @__PURE__ */ jsxs7("section", { className: "rvg-textarea-dialog", role: "dialog", "aria-modal": "true", "aria-label": title, children: [
|
|
884
|
+
/* @__PURE__ */ jsx7("header", { children: title }),
|
|
885
|
+
/* @__PURE__ */ jsx7(
|
|
886
|
+
"textarea",
|
|
887
|
+
{
|
|
888
|
+
value,
|
|
889
|
+
autoFocus: true,
|
|
890
|
+
maxLength,
|
|
891
|
+
onChange: (event) => onChange(event.target.value),
|
|
892
|
+
onKeyDown: (event) => {
|
|
893
|
+
event.stopPropagation();
|
|
894
|
+
if ((event.metaKey || event.ctrlKey) && event.key === "Enter") onCommit(value);
|
|
895
|
+
if (event.key === "Escape") setOpen(false);
|
|
896
|
+
}
|
|
897
|
+
}
|
|
898
|
+
),
|
|
899
|
+
/* @__PURE__ */ jsx7("footer", { children: /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => onCommit(value), children: labels.confirm }) })
|
|
900
|
+
] }) }),
|
|
901
|
+
document.body
|
|
902
|
+
)
|
|
903
|
+
] });
|
|
904
|
+
}
|
|
905
|
+
|
|
706
906
|
// src/icons/domIcons.ts
|
|
707
907
|
function createRowDragHandleSvg() {
|
|
708
908
|
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
@@ -998,7 +1198,7 @@ function paintGrid(options) {
|
|
|
998
1198
|
ctx.fillStyle = colors.insertedFill;
|
|
999
1199
|
ctx.fillRect(x, y, cellWidth, cellHeight);
|
|
1000
1200
|
}
|
|
1001
|
-
const isSelectedCell = !column.rowDragHandle && !column.rowSelection && !column.rowNumber && selection?.rowIndex === rowIndex && selection.columnIndex === columnIndex && selection.rowKey === rowKey && selection.columnKey === column.key;
|
|
1201
|
+
const isSelectedCell = !column.rowDragHandle && !column.rowSelection && !column.rowNumber && column.suppressSelectionStyle !== true && selection?.rowIndex === rowIndex && selection.columnIndex === columnIndex && selection.rowKey === rowKey && selection.columnKey === column.key;
|
|
1002
1202
|
const annotation = cellAnnotations.get(`${typeof rowKey}:${String(rowKey)}\0${column.key}`);
|
|
1003
1203
|
const rawValue = column.dataIndex === void 0 ? void 0 : row[column.dataIndex];
|
|
1004
1204
|
const cellStyle = column.cellStyle?.(rawValue, row, rowIndex);
|
|
@@ -1330,7 +1530,7 @@ function paintGrid(options) {
|
|
|
1330
1530
|
}
|
|
1331
1531
|
const selectedRow = selection ? rows[selection.rowIndex] : void 0;
|
|
1332
1532
|
const hasValidSelection = Boolean(selection && selectedRow && getRowKey(selectedRow, selection.rowIndex) === selection.rowKey);
|
|
1333
|
-
if (selection && hasValidSelection && !selectionRange && !rowDragPreview) {
|
|
1533
|
+
if (selection && hasValidSelection && !selectionRange && !rowDragPreview && columns[selection.columnIndex]?.suppressSelectionStyle !== true) {
|
|
1334
1534
|
const metric = metrics[selection.columnIndex];
|
|
1335
1535
|
if (metric) {
|
|
1336
1536
|
const fixedSide = columns[selection.columnIndex].fixed;
|
|
@@ -1402,9 +1602,9 @@ function paintGrid(options) {
|
|
|
1402
1602
|
}
|
|
1403
1603
|
|
|
1404
1604
|
// src/hooks/useControllable.ts
|
|
1405
|
-
import { useCallback, useState as
|
|
1605
|
+
import { useCallback, useState as useState5 } from "react";
|
|
1406
1606
|
function useControllableKeys(value, defaultValue, onChange) {
|
|
1407
|
-
const [internal, setInternal] =
|
|
1607
|
+
const [internal, setInternal] = useState5(defaultValue ?? []);
|
|
1408
1608
|
const keys = value === void 0 ? internal : value;
|
|
1409
1609
|
const setKeys = useCallback((next) => {
|
|
1410
1610
|
if (value === void 0) setInternal(next);
|
|
@@ -1413,7 +1613,7 @@ function useControllableKeys(value, defaultValue, onChange) {
|
|
|
1413
1613
|
return [keys, setKeys];
|
|
1414
1614
|
}
|
|
1415
1615
|
function useControllableValue(value, defaultValue, onChange) {
|
|
1416
|
-
const [internal, setInternal] =
|
|
1616
|
+
const [internal, setInternal] = useState5(defaultValue ?? null);
|
|
1417
1617
|
const selected = value === void 0 ? internal : value;
|
|
1418
1618
|
const setSelected = useCallback((next) => {
|
|
1419
1619
|
if (value === void 0) setInternal(next);
|
|
@@ -1423,7 +1623,7 @@ function useControllableValue(value, defaultValue, onChange) {
|
|
|
1423
1623
|
}
|
|
1424
1624
|
|
|
1425
1625
|
// src/Table.tsx
|
|
1426
|
-
import { Fragment as Fragment3, jsx as
|
|
1626
|
+
import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
1427
1627
|
function resolveColumnDropIndex(sourceIndex, targetIndex, edge, columnCount) {
|
|
1428
1628
|
const insertionIndex = targetIndex + (edge === "right" ? 1 : 0) - (sourceIndex < targetIndex ? 1 : 0);
|
|
1429
1629
|
return Math.max(0, Math.min(columnCount - 1, insertionIndex));
|
|
@@ -1644,6 +1844,7 @@ function TableInner({
|
|
|
1644
1844
|
onColumnsReorder,
|
|
1645
1845
|
onColumnResize,
|
|
1646
1846
|
rowDraggable = false,
|
|
1847
|
+
utilityColumnOrder = ["drag", "selection", "rowNumber"],
|
|
1647
1848
|
onRowsReorder,
|
|
1648
1849
|
onInsertRows,
|
|
1649
1850
|
onDeleteRows,
|
|
@@ -1660,21 +1861,21 @@ function TableInner({
|
|
|
1660
1861
|
style,
|
|
1661
1862
|
ariaLabel = "Data grid"
|
|
1662
1863
|
}, ref) {
|
|
1663
|
-
const [sourceColumns, setSourceColumns] =
|
|
1664
|
-
|
|
1864
|
+
const [sourceColumns, setSourceColumns] = useState6(columnProps);
|
|
1865
|
+
useEffect3(() => {
|
|
1665
1866
|
setSourceColumns((current) => reconcileColumns(current, columnProps));
|
|
1666
1867
|
}, [columnProps]);
|
|
1667
1868
|
const rowHeight = layout?.rowHeight ?? rowHeightProp ?? 36;
|
|
1668
1869
|
const headerActionSize = Math.max(8, layout?.headerActionSize ?? 14);
|
|
1669
1870
|
const headerActionSlotWidth = headerActionSize + 2;
|
|
1670
1871
|
const baseHeaderHeight = layout?.headerHeight ?? headerHeightProp ?? 40;
|
|
1671
|
-
const headerDepth =
|
|
1672
|
-
const { language, labels } =
|
|
1673
|
-
const customHeaderContentRefs =
|
|
1674
|
-
const customHeaderMeasurementsRef =
|
|
1675
|
-
const [measuredHeaderRowHeights, setMeasuredHeaderRowHeights] =
|
|
1676
|
-
const headerRowHeights =
|
|
1677
|
-
const headerRowOffsets =
|
|
1872
|
+
const headerDepth = useMemo2(() => Math.max(1, ...sourceColumns.map(getColumnDepth)), [sourceColumns]);
|
|
1873
|
+
const { language, labels } = useMemo2(() => resolveGridLocale(locale), [locale]);
|
|
1874
|
+
const customHeaderContentRefs = useRef4(/* @__PURE__ */ new Map());
|
|
1875
|
+
const customHeaderMeasurementsRef = useRef4(/* @__PURE__ */ new Map());
|
|
1876
|
+
const [measuredHeaderRowHeights, setMeasuredHeaderRowHeights] = useState6([]);
|
|
1877
|
+
const headerRowHeights = useMemo2(() => Array.from({ length: headerDepth }, (_, level) => Math.max(baseHeaderHeight, measuredHeaderRowHeights[level] ?? 0)), [baseHeaderHeight, headerDepth, measuredHeaderRowHeights]);
|
|
1878
|
+
const headerRowOffsets = useMemo2(() => {
|
|
1678
1879
|
const offsets = [];
|
|
1679
1880
|
let top = 0;
|
|
1680
1881
|
headerRowHeights.forEach((height2) => {
|
|
@@ -1705,37 +1906,37 @@ function TableInner({
|
|
|
1705
1906
|
const summaryEmptyValue = typeof summary === "object" ? summary.emptyValue ?? "" : "";
|
|
1706
1907
|
const contextMenuEnabled = contextMenuConfig !== false;
|
|
1707
1908
|
const customContextMenuConfig = typeof contextMenuConfig === "object" ? contextMenuConfig : void 0;
|
|
1708
|
-
const [resizedColumnWidths, setResizedColumnWidths] =
|
|
1709
|
-
const leafSourceColumns =
|
|
1710
|
-
const sourceColumnWidthsRef =
|
|
1909
|
+
const [resizedColumnWidths, setResizedColumnWidths] = useState6({});
|
|
1910
|
+
const leafSourceColumns = useMemo2(() => flattenDataColumns(sourceColumns), [sourceColumns]);
|
|
1911
|
+
const sourceColumnWidthsRef = useRef4(new Map(leafSourceColumns.map((column) => [column.key, column.width])));
|
|
1711
1912
|
const showRowCheckbox = Boolean(rowSelection) && (typeof rowSelection !== "object" || rowSelection.showCheckbox !== false);
|
|
1712
1913
|
const rowSelectionIndicator = typeof rowSelection === "object" ? rowSelection.indicator ?? "checkbox" : "checkbox";
|
|
1713
1914
|
const rowSelectionColumnWidth = typeof rowSelection === "object" ? Math.max(24, rowSelection.columnWidth ?? 44) : 44;
|
|
1714
|
-
|
|
1915
|
+
useEffect3(() => {
|
|
1715
1916
|
if (!isProductionRuntime() && hasNestedFixedColumns(sourceColumns)) {
|
|
1716
1917
|
console.warn("[Table] Multi-level headers only support fixed columns on top-level columns. Nested fixed values are ignored.");
|
|
1717
1918
|
}
|
|
1718
1919
|
}, [sourceColumns]);
|
|
1719
|
-
const columns =
|
|
1920
|
+
const columns = useMemo2(() => {
|
|
1720
1921
|
const utilityColumns = [];
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
}
|
|
1922
|
+
utilityColumnOrder.forEach((utilityColumn) => {
|
|
1923
|
+
if (utilityColumn === "drag" && rowDraggable) {
|
|
1924
|
+
utilityColumns.push({ key: "__rvg_row_drag__", title: "", width: 36, align: "center", fixed: "left", rowDragHandle: true });
|
|
1925
|
+
} else if (utilityColumn === "selection" && showRowCheckbox) {
|
|
1926
|
+
utilityColumns.push({ key: "__rvg_row_selection__", title: "", width: rowSelectionColumnWidth, align: "center", fixed: "left", rowSelection: true, rowSelectionIndicator });
|
|
1927
|
+
} else if (utilityColumn === "rowNumber" && rowNumber) {
|
|
1928
|
+
utilityColumns.push({ key: "__rvg_row_number__", title: "#", width: getRowNumberColumnWidth(sourceRows.length), align: "center", fixed: typeof rowNumber === "object" && rowNumber.fixed === false ? void 0 : "left", rowNumber: true });
|
|
1929
|
+
}
|
|
1930
|
+
});
|
|
1730
1931
|
const dataColumns = leafSourceColumns.map((column) => {
|
|
1731
1932
|
const resizedWidth = resizedColumnWidths[column.key];
|
|
1732
1933
|
return resizedWidth === void 0 ? column : { ...column, width: resizedWidth };
|
|
1733
1934
|
});
|
|
1734
1935
|
return [...utilityColumns, ...dataColumns];
|
|
1735
|
-
}, [leafSourceColumns, resizedColumnWidths, rowDraggable, rowNumber, rowSelectionColumnWidth, rowSelectionIndicator, showRowCheckbox, sourceRows.length]);
|
|
1936
|
+
}, [leafSourceColumns, resizedColumnWidths, rowDraggable, rowNumber, rowSelectionColumnWidth, rowSelectionIndicator, showRowCheckbox, sourceRows.length, utilityColumnOrder]);
|
|
1736
1937
|
const utilityColumnCount = (rowDraggable ? 1 : 0) + (showRowCheckbox ? 1 : 0) + (rowNumber ? 1 : 0);
|
|
1737
|
-
const headerCells =
|
|
1738
|
-
const activeCustomHeaderLevels =
|
|
1938
|
+
const headerCells = useMemo2(() => buildHeaderCells(sourceColumns, utilityColumnCount, headerDepth), [headerDepth, sourceColumns, utilityColumnCount]);
|
|
1939
|
+
const activeCustomHeaderLevels = useMemo2(() => {
|
|
1739
1940
|
const levels = /* @__PURE__ */ new Map();
|
|
1740
1941
|
columns.forEach((column) => {
|
|
1741
1942
|
if (column.renderHeader) levels.set(column.key, headerDepth - 1);
|
|
@@ -1745,52 +1946,52 @@ function TableInner({
|
|
|
1745
1946
|
});
|
|
1746
1947
|
return levels;
|
|
1747
1948
|
}, [columns, headerCells, headerDepth]);
|
|
1748
|
-
const canvasRef =
|
|
1749
|
-
const scrollerRef =
|
|
1750
|
-
const rootRef =
|
|
1751
|
-
const frameRef =
|
|
1752
|
-
const textFrameRef =
|
|
1753
|
-
const toastTimerRef =
|
|
1754
|
-
const headerTooltipTimerRef =
|
|
1755
|
-
const cellTooltipTimerRef =
|
|
1756
|
-
const pendingHeaderTooltipKeyRef =
|
|
1757
|
-
const pendingCellTooltipKeyRef =
|
|
1758
|
-
const clickedCellRef =
|
|
1759
|
-
const rowAnchorRef =
|
|
1760
|
-
const columnAnchorRef =
|
|
1761
|
-
const columnDragRef =
|
|
1762
|
-
const columnOrderDragRef =
|
|
1763
|
-
const columnOrderLongPressTimerRef =
|
|
1764
|
-
const dragGuideRef =
|
|
1765
|
-
const rowDragGuideRef =
|
|
1766
|
-
const selectionFocusRef =
|
|
1767
|
-
const selectionEdgeTargetRef =
|
|
1768
|
-
const verticalScrollbarRef =
|
|
1769
|
-
const verticalScrollbarThumbRef =
|
|
1770
|
-
const verticalScrollbarDragRef =
|
|
1771
|
-
const horizontalScrollbarRef =
|
|
1772
|
-
const horizontalScrollbarThumbRef =
|
|
1773
|
-
const horizontalScrollbarDragRef =
|
|
1774
|
-
const verticalScrollbarVisibilityTimerRef =
|
|
1775
|
-
const horizontalScrollbarVisibilityTimerRef =
|
|
1776
|
-
const rowByKeyRef =
|
|
1777
|
-
const rowIndexByKeyRef =
|
|
1778
|
-
const headerIconsRef =
|
|
1779
|
-
const scrollingHeaderIconsRef =
|
|
1780
|
-
const scrollingTextRef =
|
|
1781
|
-
const filterRef =
|
|
1782
|
-
const contextMenuRef =
|
|
1783
|
-
const suppressClickRef =
|
|
1784
|
-
const hasCompletedLoadRef =
|
|
1785
|
-
const validColumnDropRef =
|
|
1786
|
-
const hoveredHeaderActionRef =
|
|
1787
|
-
const hoveredRowIndexRef =
|
|
1788
|
-
const [viewport, setViewport] =
|
|
1789
|
-
const [horizontalScrollbarHeight, setHorizontalScrollbarHeight] =
|
|
1790
|
-
const [availableHeight, setAvailableHeight] =
|
|
1949
|
+
const canvasRef = useRef4(null);
|
|
1950
|
+
const scrollerRef = useRef4(null);
|
|
1951
|
+
const rootRef = useRef4(null);
|
|
1952
|
+
const frameRef = useRef4(null);
|
|
1953
|
+
const textFrameRef = useRef4(null);
|
|
1954
|
+
const toastTimerRef = useRef4(null);
|
|
1955
|
+
const headerTooltipTimerRef = useRef4(null);
|
|
1956
|
+
const cellTooltipTimerRef = useRef4(null);
|
|
1957
|
+
const pendingHeaderTooltipKeyRef = useRef4("");
|
|
1958
|
+
const pendingCellTooltipKeyRef = useRef4("");
|
|
1959
|
+
const clickedCellRef = useRef4(null);
|
|
1960
|
+
const rowAnchorRef = useRef4(null);
|
|
1961
|
+
const columnAnchorRef = useRef4(null);
|
|
1962
|
+
const columnDragRef = useRef4(null);
|
|
1963
|
+
const columnOrderDragRef = useRef4(null);
|
|
1964
|
+
const columnOrderLongPressTimerRef = useRef4(null);
|
|
1965
|
+
const dragGuideRef = useRef4(null);
|
|
1966
|
+
const rowDragGuideRef = useRef4(null);
|
|
1967
|
+
const selectionFocusRef = useRef4(null);
|
|
1968
|
+
const selectionEdgeTargetRef = useRef4(null);
|
|
1969
|
+
const verticalScrollbarRef = useRef4(null);
|
|
1970
|
+
const verticalScrollbarThumbRef = useRef4(null);
|
|
1971
|
+
const verticalScrollbarDragRef = useRef4(null);
|
|
1972
|
+
const horizontalScrollbarRef = useRef4(null);
|
|
1973
|
+
const horizontalScrollbarThumbRef = useRef4(null);
|
|
1974
|
+
const horizontalScrollbarDragRef = useRef4(null);
|
|
1975
|
+
const verticalScrollbarVisibilityTimerRef = useRef4(null);
|
|
1976
|
+
const horizontalScrollbarVisibilityTimerRef = useRef4(null);
|
|
1977
|
+
const rowByKeyRef = useRef4(/* @__PURE__ */ new Map());
|
|
1978
|
+
const rowIndexByKeyRef = useRef4(/* @__PURE__ */ new Map());
|
|
1979
|
+
const headerIconsRef = useRef4(null);
|
|
1980
|
+
const scrollingHeaderIconsRef = useRef4(null);
|
|
1981
|
+
const scrollingTextRef = useRef4(null);
|
|
1982
|
+
const filterRef = useRef4(null);
|
|
1983
|
+
const contextMenuRef = useRef4(null);
|
|
1984
|
+
const suppressClickRef = useRef4(false);
|
|
1985
|
+
const hasCompletedLoadRef = useRef4(!loading);
|
|
1986
|
+
const validColumnDropRef = useRef4(null);
|
|
1987
|
+
const hoveredHeaderActionRef = useRef4(null);
|
|
1988
|
+
const hoveredRowIndexRef = useRef4(null);
|
|
1989
|
+
const [viewport, setViewport] = useState6({ width: 0, height: typeof height === "number" ? height : FALLBACK_HEIGHT });
|
|
1990
|
+
const [horizontalScrollbarHeight, setHorizontalScrollbarHeight] = useState6(0);
|
|
1991
|
+
const [availableHeight, setAvailableHeight] = useState6(FALLBACK_HEIGHT);
|
|
1791
1992
|
const resolvedHeight = typeof height === "number" ? height : availableHeight;
|
|
1792
|
-
const [scrollPosition, setScrollPosition] =
|
|
1793
|
-
const scrollRef =
|
|
1993
|
+
const [scrollPosition, setScrollPosition] = useState6({ left: 0, top: 0 });
|
|
1994
|
+
const scrollRef = useRef4({ left: 0, top: 0 });
|
|
1794
1995
|
const [rowKeys, setRowKeys] = useControllableKeys(selectedRowKeys, defaultSelectedRowKeys, (keys) => {
|
|
1795
1996
|
if (!onSelectedRowChange) return;
|
|
1796
1997
|
const missing = new Set(keys.filter((key) => !rowByKeyRef.current.has(key)));
|
|
@@ -1812,20 +2013,20 @@ function TableInner({
|
|
|
1812
2013
|
onSelectedRowChange(keys, entries.map(({ row }) => row), entries.map(({ index }) => index));
|
|
1813
2014
|
});
|
|
1814
2015
|
const [columnKeys, setColumnKeys] = useControllableKeys(selectedColumnKeys, defaultSelectedColumnKeys, onSelectedColumnChange);
|
|
1815
|
-
const [editing, setEditing] =
|
|
1816
|
-
const [draft, setDraft] =
|
|
1817
|
-
const [rowDragPreview, setRowDragPreview] =
|
|
1818
|
-
const [columnDragPreview, setColumnDragPreview] =
|
|
1819
|
-
const [columnDropTarget, setColumnDropTarget] =
|
|
1820
|
-
|
|
2016
|
+
const [editing, setEditing] = useState6(null);
|
|
2017
|
+
const [draft, setDraft] = useState6("");
|
|
2018
|
+
const [rowDragPreview, setRowDragPreview] = useState6(null);
|
|
2019
|
+
const [columnDragPreview, setColumnDragPreview] = useState6(null);
|
|
2020
|
+
const [columnDropTarget, setColumnDropTarget] = useState6(null);
|
|
2021
|
+
useEffect3(() => {
|
|
1821
2022
|
if (!loading) hasCompletedLoadRef.current = true;
|
|
1822
2023
|
}, [loading]);
|
|
1823
|
-
|
|
2024
|
+
useEffect3(() => {
|
|
1824
2025
|
if (rangeSelection) return;
|
|
1825
2026
|
rangeDragRef.current = null;
|
|
1826
2027
|
setSelectionRange(null);
|
|
1827
2028
|
}, [rangeSelection]);
|
|
1828
|
-
|
|
2029
|
+
useEffect3(() => {
|
|
1829
2030
|
const previousSourceWidths = sourceColumnWidthsRef.current;
|
|
1830
2031
|
const nextSourceWidths = new Map(leafSourceColumns.map((column) => [column.key, column.width]));
|
|
1831
2032
|
sourceColumnWidthsRef.current = nextSourceWidths;
|
|
@@ -1849,7 +2050,7 @@ function TableInner({
|
|
|
1849
2050
|
return changed ? next : current;
|
|
1850
2051
|
});
|
|
1851
2052
|
}, [leafSourceColumns]);
|
|
1852
|
-
|
|
2053
|
+
useEffect3(() => () => {
|
|
1853
2054
|
if (headerTooltipTimerRef.current !== null) clearTimeout(headerTooltipTimerRef.current);
|
|
1854
2055
|
if (cellTooltipTimerRef.current !== null) clearTimeout(cellTooltipTimerRef.current);
|
|
1855
2056
|
}, []);
|
|
@@ -1871,7 +2072,7 @@ function TableInner({
|
|
|
1871
2072
|
return changed ? nextHeights : current;
|
|
1872
2073
|
});
|
|
1873
2074
|
}, [activeCustomHeaderLevels, baseHeaderHeight, headerDepth]);
|
|
1874
|
-
|
|
2075
|
+
useLayoutEffect3(() => {
|
|
1875
2076
|
customHeaderContentRefs.current.forEach((_, key) => {
|
|
1876
2077
|
if (!activeCustomHeaderLevels.has(key)) customHeaderContentRefs.current.delete(key);
|
|
1877
2078
|
});
|
|
@@ -1879,7 +2080,7 @@ function TableInner({
|
|
|
1879
2080
|
if (!activeCustomHeaderLevels.has(key)) customHeaderMeasurementsRef.current.delete(key);
|
|
1880
2081
|
});
|
|
1881
2082
|
if (activeCustomHeaderLevels.size === 0) {
|
|
1882
|
-
setMeasuredHeaderRowHeights([]);
|
|
2083
|
+
setMeasuredHeaderRowHeights((current) => current.length === 0 ? current : []);
|
|
1883
2084
|
return;
|
|
1884
2085
|
}
|
|
1885
2086
|
measureCustomHeaderHeight();
|
|
@@ -1888,22 +2089,22 @@ function TableInner({
|
|
|
1888
2089
|
customHeaderContentRefs.current.forEach((node) => observer.observe(node));
|
|
1889
2090
|
return () => observer.disconnect();
|
|
1890
2091
|
}, [activeCustomHeaderLevels, measureCustomHeaderHeight, viewport.width]);
|
|
1891
|
-
const [filterEditor, setFilterEditor] =
|
|
1892
|
-
const [filterValues, setFilterValues] =
|
|
1893
|
-
const [sortState, setSortState] =
|
|
1894
|
-
const [contextMenu, setContextMenu] =
|
|
1895
|
-
const [insertCounts, setInsertCounts] =
|
|
1896
|
-
const [confirmAction, setConfirmAction] =
|
|
1897
|
-
const [confirmLoading, setConfirmLoading] =
|
|
1898
|
-
const [insertBusy, setInsertBusy] =
|
|
1899
|
-
const [deleteBusy, setDeleteBusy] =
|
|
1900
|
-
const [toast, setToast] =
|
|
1901
|
-
const [resizeGuideX, setResizeGuideX] =
|
|
1902
|
-
const [resizeGuideTop, setResizeGuideTop] =
|
|
1903
|
-
const [hoveredHeaderColumnIndex, setHoveredHeaderColumnIndex] =
|
|
1904
|
-
const [hoveredHeaderAction, setHoveredHeaderAction] =
|
|
1905
|
-
const [visibleHeaderTooltip, setVisibleHeaderTooltip] =
|
|
1906
|
-
const [hoveredCellTooltip, setHoveredCellTooltip] =
|
|
2092
|
+
const [filterEditor, setFilterEditor] = useState6(null);
|
|
2093
|
+
const [filterValues, setFilterValues] = useState6({});
|
|
2094
|
+
const [sortState, setSortState] = useState6(null);
|
|
2095
|
+
const [contextMenu, setContextMenu] = useState6(null);
|
|
2096
|
+
const [insertCounts, setInsertCounts] = useState6({ before: 1, after: 1 });
|
|
2097
|
+
const [confirmAction, setConfirmAction] = useState6(null);
|
|
2098
|
+
const [confirmLoading, setConfirmLoading] = useState6(false);
|
|
2099
|
+
const [insertBusy, setInsertBusy] = useState6(false);
|
|
2100
|
+
const [deleteBusy, setDeleteBusy] = useState6(false);
|
|
2101
|
+
const [toast, setToast] = useState6(null);
|
|
2102
|
+
const [resizeGuideX, setResizeGuideX] = useState6(null);
|
|
2103
|
+
const [resizeGuideTop, setResizeGuideTop] = useState6(0);
|
|
2104
|
+
const [hoveredHeaderColumnIndex, setHoveredHeaderColumnIndex] = useState6(null);
|
|
2105
|
+
const [hoveredHeaderAction, setHoveredHeaderAction] = useState6(null);
|
|
2106
|
+
const [visibleHeaderTooltip, setVisibleHeaderTooltip] = useState6(null);
|
|
2107
|
+
const [hoveredCellTooltip, setHoveredCellTooltip] = useState6(null);
|
|
1907
2108
|
const hideDragTooltips = useCallback2(() => {
|
|
1908
2109
|
if (headerTooltipTimerRef.current !== null) {
|
|
1909
2110
|
clearTimeout(headerTooltipTimerRef.current);
|
|
@@ -1918,19 +2119,19 @@ function TableInner({
|
|
|
1918
2119
|
setVisibleHeaderTooltip(null);
|
|
1919
2120
|
setHoveredCellTooltip(null);
|
|
1920
2121
|
}, []);
|
|
1921
|
-
const [editedCellKeys, setEditedCellKeys] =
|
|
1922
|
-
const [cellAnnotations, setCellAnnotations] =
|
|
1923
|
-
const [annotationType, setAnnotationType] =
|
|
1924
|
-
const [annotationColor, setAnnotationColor] =
|
|
1925
|
-
const [annotationContent, setAnnotationContent] =
|
|
1926
|
-
const [annotationOpen, setAnnotationOpen] =
|
|
1927
|
-
const [annotationPlacement, setAnnotationPlacement] =
|
|
1928
|
-
const originalCellValuesRef =
|
|
1929
|
-
const [pendingDeletedRowKeys, setPendingDeletedRowKeys] =
|
|
1930
|
-
const [pendingInserts, setPendingInserts] =
|
|
1931
|
-
const [insertedRowKeys, setInsertedRowKeys] =
|
|
1932
|
-
const [rowOrderKeys, setRowOrderKeys] =
|
|
1933
|
-
const settledPendingInsertIdsRef =
|
|
2122
|
+
const [editedCellKeys, setEditedCellKeys] = useState6(() => /* @__PURE__ */ new Set());
|
|
2123
|
+
const [cellAnnotations, setCellAnnotations] = useState6(() => /* @__PURE__ */ new Map());
|
|
2124
|
+
const [annotationType, setAnnotationType] = useState6("corner");
|
|
2125
|
+
const [annotationColor, setAnnotationColor] = useState6(ANNOTATION_COLORS[0]);
|
|
2126
|
+
const [annotationContent, setAnnotationContent] = useState6("");
|
|
2127
|
+
const [annotationOpen, setAnnotationOpen] = useState6(false);
|
|
2128
|
+
const [annotationPlacement, setAnnotationPlacement] = useState6("right-down");
|
|
2129
|
+
const originalCellValuesRef = useRef4(/* @__PURE__ */ new Map());
|
|
2130
|
+
const [pendingDeletedRowKeys, setPendingDeletedRowKeys] = useState6(() => /* @__PURE__ */ new Set());
|
|
2131
|
+
const [pendingInserts, setPendingInserts] = useState6(() => []);
|
|
2132
|
+
const [insertedRowKeys, setInsertedRowKeys] = useState6(() => /* @__PURE__ */ new Set());
|
|
2133
|
+
const [rowOrderKeys, setRowOrderKeys] = useState6(null);
|
|
2134
|
+
const settledPendingInsertIdsRef = useRef4(/* @__PURE__ */ new Set());
|
|
1934
2135
|
const getDataRowKey = useCallback2((row, index) => {
|
|
1935
2136
|
return typeof rowKey === "function" ? rowKey(row, index) : rowKey ? row[rowKey] : getDefaultRowKey(row, index);
|
|
1936
2137
|
}, [rowKey]);
|
|
@@ -1944,7 +2145,7 @@ function TableInner({
|
|
|
1944
2145
|
}
|
|
1945
2146
|
return sourceRows.findIndex((sourceRow, index) => getDataRowKey(sourceRow, index) === key);
|
|
1946
2147
|
}, [getDataRowKey, sourceRows]);
|
|
1947
|
-
const orderedRows =
|
|
2148
|
+
const orderedRows = useMemo2(() => {
|
|
1948
2149
|
let next = sourceRows;
|
|
1949
2150
|
if (pendingInserts.length > 0) {
|
|
1950
2151
|
const activeInserts = pendingInserts.filter((insert) => {
|
|
@@ -1980,10 +2181,10 @@ function TableInner({
|
|
|
1980
2181
|
});
|
|
1981
2182
|
return ordered;
|
|
1982
2183
|
}, [getDataRowKey, pendingDeletedRowKeys, pendingInserts, rowOrderKeys, sourceRows]);
|
|
1983
|
-
const activeFilterValues =
|
|
2184
|
+
const activeFilterValues = useMemo2(() => Object.fromEntries(
|
|
1984
2185
|
Object.entries(filterValues).filter(([, value]) => value.trim() !== "")
|
|
1985
2186
|
), [filterValues]);
|
|
1986
|
-
const filteredRows =
|
|
2187
|
+
const filteredRows = useMemo2(() => {
|
|
1987
2188
|
if (Object.keys(activeFilterValues).length === 0) return orderedRows;
|
|
1988
2189
|
if (onFilterChange) return onFilterChange(orderedRows, activeFilterValues);
|
|
1989
2190
|
return orderedRows.filter((row, rowIndex) => Object.entries(activeFilterValues).every(([columnKey, query]) => {
|
|
@@ -1992,7 +2193,7 @@ function TableInner({
|
|
|
1992
2193
|
return getDisplayLabel(column, row, rowIndex).toLocaleLowerCase().includes(query.trim().toLocaleLowerCase());
|
|
1993
2194
|
}));
|
|
1994
2195
|
}, [activeFilterValues, columns, onFilterChange, orderedRows]);
|
|
1995
|
-
const rows =
|
|
2196
|
+
const rows = useMemo2(() => {
|
|
1996
2197
|
if (!sortState) return filteredRows;
|
|
1997
2198
|
if (onSortChange) return onSortChange(filteredRows, sortState);
|
|
1998
2199
|
const column = columns.find((candidate) => candidate.key === sortState.columnKey);
|
|
@@ -2018,8 +2219,8 @@ function TableInner({
|
|
|
2018
2219
|
columnKey: target.columnKey
|
|
2019
2220
|
};
|
|
2020
2221
|
}, [columns, getDataRowKey, rows]);
|
|
2021
|
-
const resolvedSelectedCell =
|
|
2022
|
-
const resolvedDefaultSelectedCell =
|
|
2222
|
+
const resolvedSelectedCell = useMemo2(() => resolveSelectionTarget(selectedCell), [resolveSelectionTarget, selectedCell]);
|
|
2223
|
+
const resolvedDefaultSelectedCell = useMemo2(() => resolveSelectionTarget(defaultSelectedCell), [defaultSelectedCell, resolveSelectionTarget]);
|
|
2023
2224
|
const handleSelectedCellChange = useCallback2((next) => {
|
|
2024
2225
|
if (!onSelectedCellChange) return;
|
|
2025
2226
|
if (!next) {
|
|
@@ -2032,15 +2233,16 @@ function TableInner({
|
|
|
2032
2233
|
onSelectedCellChange({ ...next, value });
|
|
2033
2234
|
}, [columns, onSelectedCellChange, rows]);
|
|
2034
2235
|
const [selection, setSelection] = useControllableValue(resolvedSelectedCell, resolvedDefaultSelectedCell, handleSelectedCellChange);
|
|
2035
|
-
const [selectionRange, setSelectionRange] =
|
|
2036
|
-
const rangeDragRef =
|
|
2037
|
-
|
|
2236
|
+
const [selectionRange, setSelectionRange] = useState6(null);
|
|
2237
|
+
const rangeDragRef = useRef4(null);
|
|
2238
|
+
useEffect3(() => {
|
|
2038
2239
|
if (!selection) return void 0;
|
|
2039
2240
|
const handleOutsidePointerDown = (event) => {
|
|
2040
2241
|
const target = event.target;
|
|
2041
2242
|
if (!(target instanceof Node)) return;
|
|
2042
2243
|
if (rootRef.current?.contains(target)) return;
|
|
2043
2244
|
if (target instanceof Element && target.closest(".rvg-choice-content, .rvg-date-content, .rvg-time-dropdown")) return;
|
|
2245
|
+
if (target instanceof Element && target.closest(".rvg-textarea-dialog")) return;
|
|
2044
2246
|
clickedCellRef.current = null;
|
|
2045
2247
|
setSelectionRange(null);
|
|
2046
2248
|
setSelection(null);
|
|
@@ -2062,7 +2264,7 @@ function TableInner({
|
|
|
2062
2264
|
setSourceColumns(nextColumns);
|
|
2063
2265
|
onColumnsReorder?.(nextColumns, { sourceIndex, targetIndex, ...detail });
|
|
2064
2266
|
}, [onColumnsReorder, sourceColumns]);
|
|
2065
|
-
|
|
2267
|
+
useEffect3(() => {
|
|
2066
2268
|
if (insertBusy || settledPendingInsertIdsRef.current.size === 0) return;
|
|
2067
2269
|
setPendingInserts((current) => {
|
|
2068
2270
|
const next = current.filter((insert) => !settledPendingInsertIdsRef.current.has(insert.id));
|
|
@@ -2073,7 +2275,7 @@ function TableInner({
|
|
|
2073
2275
|
return next;
|
|
2074
2276
|
});
|
|
2075
2277
|
}, [insertBusy, pendingInserts]);
|
|
2076
|
-
|
|
2278
|
+
useEffect3(() => {
|
|
2077
2279
|
if (pendingDeletedRowKeys.size === 0) return;
|
|
2078
2280
|
setPendingDeletedRowKeys((current) => {
|
|
2079
2281
|
if (current.size === 0) return current;
|
|
@@ -2087,20 +2289,20 @@ function TableInner({
|
|
|
2087
2289
|
return changed ? next : current;
|
|
2088
2290
|
});
|
|
2089
2291
|
}, [getDataRowKey, pendingDeletedRowKeys.size, sourceRows]);
|
|
2090
|
-
|
|
2292
|
+
useLayoutEffect3(() => {
|
|
2091
2293
|
if (!editing) return;
|
|
2092
2294
|
if (selection?.rowKey === editing.rowKey && selection.columnKey === editing.columnKey) return;
|
|
2093
2295
|
setEditing(null);
|
|
2094
2296
|
}, [editing, selection]);
|
|
2095
2297
|
const hasManualColumnWidths = Object.keys(resizedColumnWidths).length > 0;
|
|
2096
|
-
const metrics =
|
|
2298
|
+
const metrics = useMemo2(() => buildColumnMetrics(columns, {
|
|
2097
2299
|
columnDraggable,
|
|
2098
2300
|
viewportWidth: !stretchColumns || hasManualColumnWidths ? 0 : viewport.width
|
|
2099
2301
|
}), [columnDraggable, columns, hasManualColumnWidths, stretchColumns, viewport.width]);
|
|
2100
2302
|
const contentWidth = metrics.length > 0 ? metrics[metrics.length - 1].right : 0;
|
|
2101
2303
|
const contentHeight = rows.length * rowHeight;
|
|
2102
|
-
const fixedWidth =
|
|
2103
|
-
const leftFixedOffsets =
|
|
2304
|
+
const fixedWidth = useMemo2(() => columns.reduce((width2, column, index) => column.fixed === "left" ? width2 + metrics[index].width : width2, 0), [columns, metrics]);
|
|
2305
|
+
const leftFixedOffsets = useMemo2(() => {
|
|
2104
2306
|
const offsets = /* @__PURE__ */ new Map();
|
|
2105
2307
|
let offset = 0;
|
|
2106
2308
|
for (let index = 0; index < columns.length; index += 1) {
|
|
@@ -2110,8 +2312,8 @@ function TableInner({
|
|
|
2110
2312
|
}
|
|
2111
2313
|
return offsets;
|
|
2112
2314
|
}, [columns, metrics]);
|
|
2113
|
-
const rightFixedWidth =
|
|
2114
|
-
const rightFixedOffsets =
|
|
2315
|
+
const rightFixedWidth = useMemo2(() => columns.reduce((width2, column, index) => column.fixed === "right" ? width2 + metrics[index].width : width2, 0), [columns, metrics]);
|
|
2316
|
+
const rightFixedOffsets = useMemo2(() => {
|
|
2115
2317
|
const offsets = /* @__PURE__ */ new Map();
|
|
2116
2318
|
let offset = 0;
|
|
2117
2319
|
for (let index = columns.length - 1; index >= 0; index -= 1) {
|
|
@@ -2121,7 +2323,7 @@ function TableInner({
|
|
|
2121
2323
|
}
|
|
2122
2324
|
return offsets;
|
|
2123
2325
|
}, [columns, metrics]);
|
|
2124
|
-
const scrollableColumnLefts =
|
|
2326
|
+
const scrollableColumnLefts = useMemo2(() => {
|
|
2125
2327
|
const lefts = [];
|
|
2126
2328
|
let width2 = fixedWidth;
|
|
2127
2329
|
for (let index = 0; index < columns.length; index += 1) {
|
|
@@ -2131,9 +2333,9 @@ function TableInner({
|
|
|
2131
2333
|
return lefts;
|
|
2132
2334
|
}, [columns, fixedWidth, metrics]);
|
|
2133
2335
|
const getScrollableColumnLeft = useCallback2((columnIndex) => scrollableColumnLefts[columnIndex] ?? fixedWidth, [fixedWidth, scrollableColumnLefts]);
|
|
2134
|
-
const hasRowSelectionColumn =
|
|
2336
|
+
const hasRowSelectionColumn = useMemo2(() => columns.some((column) => column.rowSelection), [columns]);
|
|
2135
2337
|
const rowSelectionMode = typeof rowSelection === "object" ? rowSelection.mode ?? "multiple" : "multiple";
|
|
2136
|
-
const summarySignature =
|
|
2338
|
+
const summarySignature = useMemo2(() => getSummarySignature(columns), [columns]);
|
|
2137
2339
|
const hasSummaryRow = rows.length > 0 && summaryEnabled && summarySignature.length > 0;
|
|
2138
2340
|
const topSummaryHeight = hasSummaryRow && summaryPosition === "top" ? rowHeight : 0;
|
|
2139
2341
|
const bottomSummaryHeight = hasSummaryRow && summaryPosition === "bottom" ? rowHeight : 0;
|
|
@@ -2143,10 +2345,10 @@ function TableInner({
|
|
|
2143
2345
|
const effectiveHeight = autoHeight ? Math.max(bodyTop + bottomSummaryHeight, Math.min(resolvedHeight, realContentHeight)) : resolvedHeight;
|
|
2144
2346
|
const renderHeight = Math.max(0, effectiveHeight - bottomSummaryHeight);
|
|
2145
2347
|
const bodyViewportHeight = Math.max(0, renderHeight - (fixedHeader ? headerHeight + topSummaryHeight : 0));
|
|
2146
|
-
const [summaryState, setSummaryState] =
|
|
2348
|
+
const [summaryState, setSummaryState] = useState6(() => ({ signature: "", rows: null, values: /* @__PURE__ */ new Map(), pending: false }));
|
|
2147
2349
|
const summaryPending = hasSummaryRow && (loading || summaryState.pending || summaryState.signature !== summarySignature || summaryState.rows !== rows);
|
|
2148
2350
|
const summaryValues = hasSummaryRow && summaryState.signature === summarySignature && summaryState.rows === rows ? summaryState.values : /* @__PURE__ */ new Map();
|
|
2149
|
-
|
|
2351
|
+
useEffect3(() => {
|
|
2150
2352
|
let cancelled = false;
|
|
2151
2353
|
if (!hasSummaryRow) {
|
|
2152
2354
|
setSummaryState((current) => current.signature === "" && current.rows === null && current.values.size === 0 && !current.pending ? current : { signature: "", rows: null, values: /* @__PURE__ */ new Map(), pending: false });
|
|
@@ -2177,7 +2379,7 @@ function TableInner({
|
|
|
2177
2379
|
cancelled = true;
|
|
2178
2380
|
};
|
|
2179
2381
|
}, [hasSummaryRow, loading, rows, summarySignature]);
|
|
2180
|
-
const domRange =
|
|
2382
|
+
const domRange = useMemo2(() => {
|
|
2181
2383
|
if (!isVirtualized) return { rowStart: 0, rowEnd: rows.length, columnStart: 0, columnEnd: columns.length };
|
|
2182
2384
|
const currentScroll2 = scrollRef.current;
|
|
2183
2385
|
const rowScrollTop = fixedHeader ? currentScroll2.top : Math.max(0, currentScroll2.top - bodyTop);
|
|
@@ -2189,7 +2391,7 @@ function TableInner({
|
|
|
2189
2391
|
rowIndexByKeyRef.current.set(key, index);
|
|
2190
2392
|
return key;
|
|
2191
2393
|
}, [getDataRowKey]);
|
|
2192
|
-
const resolvedCellSpans =
|
|
2394
|
+
const resolvedCellSpans = useMemo2(() => {
|
|
2193
2395
|
if (Array.isArray(cellSpans)) return cellSpans;
|
|
2194
2396
|
const spans = [];
|
|
2195
2397
|
rows.forEach((row, rowIndex) => {
|
|
@@ -2205,7 +2407,7 @@ function TableInner({
|
|
|
2205
2407
|
});
|
|
2206
2408
|
return spans;
|
|
2207
2409
|
}, [cellSpans, columns, rows]);
|
|
2208
|
-
const cellSpanLookup =
|
|
2410
|
+
const cellSpanLookup = useMemo2(() => {
|
|
2209
2411
|
if (resolvedCellSpans.length === 0) return createEmptyCellSpanLookup();
|
|
2210
2412
|
const rowIndexByKey = /* @__PURE__ */ new Map();
|
|
2211
2413
|
rows.forEach((row, index) => rowIndexByKey.set(getRowKey(row, index), index));
|
|
@@ -2249,9 +2451,9 @@ function TableInner({
|
|
|
2249
2451
|
}
|
|
2250
2452
|
return lookup;
|
|
2251
2453
|
}, [columns, getRowKey, resolvedCellSpans, rows]);
|
|
2252
|
-
const selectedRowKeySet =
|
|
2253
|
-
const selectedColumnKeySet =
|
|
2254
|
-
const insertedRowKeySet =
|
|
2454
|
+
const selectedRowKeySet = useMemo2(() => new Set(rowKeys), [rowKeys]);
|
|
2455
|
+
const selectedColumnKeySet = useMemo2(() => new Set(columnKeys), [columnKeys]);
|
|
2456
|
+
const insertedRowKeySet = useMemo2(() => insertedRowKeys, [insertedRowKeys]);
|
|
2255
2457
|
const measureHeaderTitleWidth = useCallback2((columnIndex) => {
|
|
2256
2458
|
const title = columns[columnIndex]?.title ?? "";
|
|
2257
2459
|
const context = canvasRef.current?.getContext("2d");
|
|
@@ -2281,7 +2483,7 @@ function TableInner({
|
|
|
2281
2483
|
}
|
|
2282
2484
|
return width2;
|
|
2283
2485
|
}, [columns.length, metrics]);
|
|
2284
|
-
|
|
2486
|
+
useEffect3(() => {
|
|
2285
2487
|
if (!selection) return;
|
|
2286
2488
|
const nextRowIndex = rows.findIndex((row, index) => getRowKey(row, index) === selection.rowKey);
|
|
2287
2489
|
const nextColumnIndex = columns.findIndex((column) => column.key === selection.columnKey);
|
|
@@ -2490,7 +2692,7 @@ function TableInner({
|
|
|
2490
2692
|
target.classList.remove("is-shape-syncing");
|
|
2491
2693
|
}
|
|
2492
2694
|
}, [getSelectionEdgeIndicator]);
|
|
2493
|
-
|
|
2695
|
+
useLayoutEffect3(() => {
|
|
2494
2696
|
const element = scrollerRef.current;
|
|
2495
2697
|
if (!element) return;
|
|
2496
2698
|
const root = element.parentElement;
|
|
@@ -2516,7 +2718,7 @@ function TableInner({
|
|
|
2516
2718
|
if (root?.parentElement) observer.observe(root.parentElement);
|
|
2517
2719
|
return () => observer.disconnect();
|
|
2518
2720
|
}, [height]);
|
|
2519
|
-
|
|
2721
|
+
useEffect3(() => {
|
|
2520
2722
|
scheduleDraw();
|
|
2521
2723
|
return () => {
|
|
2522
2724
|
if (frameRef.current !== null) {
|
|
@@ -2525,13 +2727,13 @@ function TableInner({
|
|
|
2525
2727
|
}
|
|
2526
2728
|
};
|
|
2527
2729
|
}, [scheduleDraw]);
|
|
2528
|
-
|
|
2730
|
+
useEffect3(() => () => {
|
|
2529
2731
|
if (textFrameRef.current !== null) cancelAnimationFrame(textFrameRef.current);
|
|
2530
2732
|
if (toastTimerRef.current !== null) clearTimeout(toastTimerRef.current);
|
|
2531
2733
|
if (verticalScrollbarVisibilityTimerRef.current !== null) clearTimeout(verticalScrollbarVisibilityTimerRef.current);
|
|
2532
2734
|
if (horizontalScrollbarVisibilityTimerRef.current !== null) clearTimeout(horizontalScrollbarVisibilityTimerRef.current);
|
|
2533
2735
|
}, []);
|
|
2534
|
-
|
|
2736
|
+
useEffect3(() => {
|
|
2535
2737
|
const scroller = scrollerRef.current;
|
|
2536
2738
|
if (!scroller) return;
|
|
2537
2739
|
const containHorizontalOverscroll = (event) => {
|
|
@@ -2543,7 +2745,7 @@ function TableInner({
|
|
|
2543
2745
|
scroller.addEventListener("wheel", containHorizontalOverscroll, { passive: false });
|
|
2544
2746
|
return () => scroller.removeEventListener("wheel", containHorizontalOverscroll);
|
|
2545
2747
|
}, []);
|
|
2546
|
-
|
|
2748
|
+
useEffect3(() => {
|
|
2547
2749
|
if (!filterEditor) return;
|
|
2548
2750
|
const closeOnOutsidePointer = (event) => {
|
|
2549
2751
|
if (!filterRef.current?.contains(event.target)) setFilterEditor(null);
|
|
@@ -2551,7 +2753,7 @@ function TableInner({
|
|
|
2551
2753
|
document.addEventListener("pointerdown", closeOnOutsidePointer);
|
|
2552
2754
|
return () => document.removeEventListener("pointerdown", closeOnOutsidePointer);
|
|
2553
2755
|
}, [filterEditor]);
|
|
2554
|
-
|
|
2756
|
+
useEffect3(() => {
|
|
2555
2757
|
if (!contextMenu) return;
|
|
2556
2758
|
const close = (event) => {
|
|
2557
2759
|
if (!contextMenuRef.current?.contains(event.target)) setContextMenu(null);
|
|
@@ -2566,10 +2768,10 @@ function TableInner({
|
|
|
2566
2768
|
document.removeEventListener("keydown", closeOnEscape);
|
|
2567
2769
|
};
|
|
2568
2770
|
}, [contextMenu]);
|
|
2569
|
-
|
|
2771
|
+
useEffect3(() => {
|
|
2570
2772
|
if (!confirmAction) setConfirmLoading(false);
|
|
2571
2773
|
}, [confirmAction]);
|
|
2572
|
-
|
|
2774
|
+
useEffect3(() => {
|
|
2573
2775
|
const scroller = scrollerRef.current;
|
|
2574
2776
|
if (!scroller || !insertBusy) return;
|
|
2575
2777
|
const left = scroller.scrollLeft;
|
|
@@ -2663,7 +2865,7 @@ function TableInner({
|
|
|
2663
2865
|
horizontalThumb.style.width = `${Math.min(trackWidth, thumbWidth)}px`;
|
|
2664
2866
|
horizontalThumb.style.transform = `translateX(${thumbLeft}px)`;
|
|
2665
2867
|
}, [autoHeight, bodyTop, bottomSummaryHeight, effectiveHeight, fixedHeader, fixedWidth, realContentHeight, renderHeight, rightFixedWidth, viewport.width]);
|
|
2666
|
-
|
|
2868
|
+
useLayoutEffect3(() => {
|
|
2667
2869
|
updateCustomScrollbars();
|
|
2668
2870
|
}, [contentHeight, contentWidth, updateCustomScrollbars, viewport.height, viewport.width]);
|
|
2669
2871
|
const handleVerticalScrollbarPointerDown = useCallback2((event) => {
|
|
@@ -2882,7 +3084,7 @@ function TableInner({
|
|
|
2882
3084
|
if (columns[columnIndex].fixed === "right") return viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metric.width;
|
|
2883
3085
|
return getScrollableColumnLeft(columnIndex) - scrollRef.current.left;
|
|
2884
3086
|
}, [columns, getScrollableColumnLeft, leftFixedOffsets, metrics, rightFixedOffsets, viewport.width]);
|
|
2885
|
-
const trailingColumnBorderLeft =
|
|
3087
|
+
const trailingColumnBorderLeft = useMemo2(() => {
|
|
2886
3088
|
const displayedContentRight = columns.reduce((right, _column, columnIndex) => Math.max(right, getDisplayedColumnLeft(columnIndex) + metrics[columnIndex].width), 0);
|
|
2887
3089
|
return displayedContentRight > 0 && displayedContentRight < viewport.width ? Math.round(displayedContentRight) - 1 : null;
|
|
2888
3090
|
}, [columns, getDisplayedColumnLeft, metrics, scrollPosition.left, viewport.width]);
|
|
@@ -3047,7 +3249,7 @@ function TableInner({
|
|
|
3047
3249
|
const rowIndex = Math.floor((localY - bodyTop + scrollRef.current.top) / rowHeight);
|
|
3048
3250
|
return rowIndex >= 0 && rowIndex < rows.length ? rowIndex : -1;
|
|
3049
3251
|
}, [bodyTop, rowHeight, rows.length]);
|
|
3050
|
-
|
|
3252
|
+
useEffect3(() => {
|
|
3051
3253
|
const canvas = canvasRef.current;
|
|
3052
3254
|
if (!canvas || !rowDraggable) return;
|
|
3053
3255
|
const cleanupDrag = draggable({
|
|
@@ -3402,11 +3604,29 @@ function TableInner({
|
|
|
3402
3604
|
if (!editing || !editorStyle) return null;
|
|
3403
3605
|
const column = columns[editing.columnIndex];
|
|
3404
3606
|
if (column.editor?.type === "select") {
|
|
3405
|
-
return /* @__PURE__ */
|
|
3607
|
+
return /* @__PURE__ */ jsx8(
|
|
3406
3608
|
ChoiceEditor,
|
|
3407
3609
|
{
|
|
3408
3610
|
value: draft,
|
|
3409
3611
|
options: column.editor.options,
|
|
3612
|
+
searchable: column.editor.searchable,
|
|
3613
|
+
allowCustomValue: column.editor.allowCustomValue,
|
|
3614
|
+
maxDropdownHeight: column.editor.maxDropdownHeight,
|
|
3615
|
+
style: editorStyle,
|
|
3616
|
+
labels,
|
|
3617
|
+
onChange: setDraft,
|
|
3618
|
+
onCommit: (next) => commitEdit(next),
|
|
3619
|
+
onCancel: () => setEditing(null)
|
|
3620
|
+
}
|
|
3621
|
+
);
|
|
3622
|
+
}
|
|
3623
|
+
if (column.editor?.type === "textarea") {
|
|
3624
|
+
return /* @__PURE__ */ jsx8(
|
|
3625
|
+
TextAreaEditor,
|
|
3626
|
+
{
|
|
3627
|
+
value: draft,
|
|
3628
|
+
title: column.editor.title ?? column.title,
|
|
3629
|
+
maxLength: column.editor.maxLength,
|
|
3410
3630
|
style: editorStyle,
|
|
3411
3631
|
labels,
|
|
3412
3632
|
onChange: setDraft,
|
|
@@ -3416,7 +3636,7 @@ function TableInner({
|
|
|
3416
3636
|
);
|
|
3417
3637
|
}
|
|
3418
3638
|
if (column.editor?.type === "time" || column.editor?.type === "time-range") {
|
|
3419
|
-
return /* @__PURE__ */
|
|
3639
|
+
return /* @__PURE__ */ jsx8(
|
|
3420
3640
|
CompactTimeEditor,
|
|
3421
3641
|
{
|
|
3422
3642
|
value: draft,
|
|
@@ -3431,7 +3651,7 @@ function TableInner({
|
|
|
3431
3651
|
);
|
|
3432
3652
|
}
|
|
3433
3653
|
if (column.editor && ["date", "date-range", "date-time", "date-time-range", "year", "month"].includes(column.editor.type)) {
|
|
3434
|
-
return /* @__PURE__ */
|
|
3654
|
+
return /* @__PURE__ */ jsx8(
|
|
3435
3655
|
DateEditor,
|
|
3436
3656
|
{
|
|
3437
3657
|
editor: column.editor,
|
|
@@ -3447,11 +3667,14 @@ function TableInner({
|
|
|
3447
3667
|
}
|
|
3448
3668
|
const row = rows[editing.rowIndex];
|
|
3449
3669
|
const cellValue = column.dataIndex === void 0 ? void 0 : row?.[column.dataIndex];
|
|
3450
|
-
return /* @__PURE__ */
|
|
3670
|
+
return /* @__PURE__ */ jsx8(
|
|
3451
3671
|
TextEditor,
|
|
3452
3672
|
{
|
|
3453
3673
|
value: draft,
|
|
3454
|
-
type: typeof cellValue === "number" ? "number" : "text",
|
|
3674
|
+
type: column.editor?.type === "number" || typeof cellValue === "number" ? "number" : "text",
|
|
3675
|
+
min: column.editor?.type === "number" ? column.editor.min : void 0,
|
|
3676
|
+
max: column.editor?.type === "number" ? column.editor.max : void 0,
|
|
3677
|
+
integer: column.editor?.type === "number" ? column.editor.integer : void 0,
|
|
3455
3678
|
style: editorStyle,
|
|
3456
3679
|
labels,
|
|
3457
3680
|
onChange: setDraft,
|
|
@@ -3493,7 +3716,7 @@ function TableInner({
|
|
|
3493
3716
|
}
|
|
3494
3717
|
}
|
|
3495
3718
|
}, [beginEdit, bodyTop, columns, editing, renderHeight, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, metrics, rightFixedWidth, rowHeight, rows, selection, setSelection, viewport.width]);
|
|
3496
|
-
const editorStyle =
|
|
3719
|
+
const editorStyle = useMemo2(() => {
|
|
3497
3720
|
if (!editing) return void 0;
|
|
3498
3721
|
const metric = metrics[editing.columnIndex];
|
|
3499
3722
|
const column = columns[editing.columnIndex];
|
|
@@ -3792,21 +4015,21 @@ function TableInner({
|
|
|
3792
4015
|
if (visibleActions.drag) {
|
|
3793
4016
|
const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "drag";
|
|
3794
4017
|
icons.push(
|
|
3795
|
-
/* @__PURE__ */
|
|
4018
|
+
/* @__PURE__ */ jsx8(HeaderDragIcon, { className: `rvg-header-icon rvg-header-drag-icon${selectedClassName}${hoveredColumnClassName}${hovered ? " is-hovered" : ""}`, style: { left: left + metrics[columnIndex].width - headerActionSlotWidth, top } }, "drag")
|
|
3796
4019
|
);
|
|
3797
4020
|
}
|
|
3798
4021
|
if (visibleActions.sort) {
|
|
3799
4022
|
const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "sort";
|
|
3800
4023
|
const direction = sortState?.columnKey === column.key ? sortState.direction : null;
|
|
3801
4024
|
icons.push(
|
|
3802
|
-
/* @__PURE__ */
|
|
4025
|
+
/* @__PURE__ */ jsx8(HeaderSortIcon, { className: `rvg-header-icon${selectedClassName}${hoveredColumnClassName}${direction ? " is-active" : ""}${hovered ? " is-hovered" : ""}`, style: { left: right - headerActionSlotWidth, top }, direction }, "sort")
|
|
3803
4026
|
);
|
|
3804
4027
|
right -= headerActionSlotWidth;
|
|
3805
4028
|
}
|
|
3806
4029
|
if (visibleActions.filter) {
|
|
3807
4030
|
const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "filter";
|
|
3808
4031
|
icons.push(
|
|
3809
|
-
/* @__PURE__ */
|
|
4032
|
+
/* @__PURE__ */ jsx8(HeaderSearchIcon, { className: `rvg-header-icon rvg-header-search-icon${selectedClassName}${hoveredColumnClassName}${hovered ? " is-hovered" : ""}${filterValues[column.key] ? " is-active" : ""}`, style: { left: right - headerActionSlotWidth, top: top + 1 } }, "filter")
|
|
3810
4033
|
);
|
|
3811
4034
|
}
|
|
3812
4035
|
return icons;
|
|
@@ -4095,20 +4318,20 @@ function TableInner({
|
|
|
4095
4318
|
setAnnotationOpen(false);
|
|
4096
4319
|
setContextMenu(null);
|
|
4097
4320
|
};
|
|
4098
|
-
return /* @__PURE__ */
|
|
4099
|
-
/* @__PURE__ */
|
|
4100
|
-
/* @__PURE__ */
|
|
4101
|
-
/* @__PURE__ */
|
|
4102
|
-
/* @__PURE__ */
|
|
4103
|
-
/* @__PURE__ */
|
|
4321
|
+
return /* @__PURE__ */ jsxs8(Fragment3, { children: [
|
|
4322
|
+
/* @__PURE__ */ jsxs8("div", { className: `rvg-annotation-submenu is-${annotationPlacement}`, onMouseEnter: openAnnotation, onMouseLeave: () => setAnnotationOpen(false), children: [
|
|
4323
|
+
/* @__PURE__ */ jsxs8("button", { type: "button", role: "menuitem", className: "rvg-context-annotation-trigger", "aria-expanded": annotationOpen, children: [
|
|
4324
|
+
/* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-icon", children: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "annotation" }) }),
|
|
4325
|
+
/* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-label", children: labels.annotation }),
|
|
4326
|
+
/* @__PURE__ */ jsx8(SubmenuArrowIcon, {})
|
|
4104
4327
|
] }),
|
|
4105
|
-
annotationOpen && /* @__PURE__ */
|
|
4106
|
-
/* @__PURE__ */
|
|
4107
|
-
/* @__PURE__ */
|
|
4108
|
-
/* @__PURE__ */
|
|
4328
|
+
annotationOpen && /* @__PURE__ */ jsxs8("div", { className: `rvg-annotation-panel is-${annotationPlacement}`, role: "menu", children: [
|
|
4329
|
+
/* @__PURE__ */ jsxs8("div", { className: `rvg-annotation-types${annotationType === "corner" ? " is-corner" : ""}`, role: "group", "aria-label": labels.annotationMode, children: [
|
|
4330
|
+
/* @__PURE__ */ jsx8("button", { type: "button", className: annotationType === "background" ? "is-active" : "", onClick: () => setAnnotationType("background"), children: labels.annotationBackground }),
|
|
4331
|
+
/* @__PURE__ */ jsx8("button", { type: "button", className: annotationType === "corner" ? "is-active" : "", onClick: () => setAnnotationType("corner"), children: labels.annotationCorner })
|
|
4109
4332
|
] }),
|
|
4110
|
-
/* @__PURE__ */
|
|
4111
|
-
/* @__PURE__ */
|
|
4333
|
+
/* @__PURE__ */ jsx8("div", { className: "rvg-annotation-colors", children: ANNOTATION_COLORS.map((color, index) => /* @__PURE__ */ jsx8("button", { type: "button", className: annotationColor === color ? "is-active" : "", "aria-label": labels.annotationColor(index + 1), title: labels.annotationColor(index + 1), style: { backgroundColor: color, "--annotation-color": color }, onClick: () => setAnnotationColor(color) }, color)) }),
|
|
4334
|
+
/* @__PURE__ */ jsx8(
|
|
4112
4335
|
"textarea",
|
|
4113
4336
|
{
|
|
4114
4337
|
className: "rvg-annotation-content",
|
|
@@ -4120,16 +4343,16 @@ function TableInner({
|
|
|
4120
4343
|
onChange: (event) => setAnnotationContent(event.target.value)
|
|
4121
4344
|
}
|
|
4122
4345
|
),
|
|
4123
|
-
/* @__PURE__ */
|
|
4124
|
-
/* @__PURE__ */
|
|
4346
|
+
/* @__PURE__ */ jsxs8("div", { className: "rvg-annotation-actions", children: [
|
|
4347
|
+
/* @__PURE__ */ jsxs8("span", { children: [
|
|
4125
4348
|
annotationContent.length,
|
|
4126
4349
|
"/100"
|
|
4127
4350
|
] }),
|
|
4128
|
-
/* @__PURE__ */
|
|
4351
|
+
/* @__PURE__ */ jsx8("button", { type: "button", onClick: saveAnnotation, children: labels.confirm })
|
|
4129
4352
|
] })
|
|
4130
4353
|
] })
|
|
4131
4354
|
] }),
|
|
4132
|
-
hasAnnotation && /* @__PURE__ */
|
|
4355
|
+
hasAnnotation && /* @__PURE__ */ jsxs8("button", { type: "button", role: "menuitem", onClick: () => {
|
|
4133
4356
|
setCellAnnotations((current) => {
|
|
4134
4357
|
const next = new Map(current);
|
|
4135
4358
|
targetCells.forEach((cell) => next.delete(getKey(cell)));
|
|
@@ -4137,8 +4360,8 @@ function TableInner({
|
|
|
4137
4360
|
});
|
|
4138
4361
|
setContextMenu(null);
|
|
4139
4362
|
}, children: [
|
|
4140
|
-
/* @__PURE__ */
|
|
4141
|
-
/* @__PURE__ */
|
|
4363
|
+
/* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-icon", children: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "remove-annotation" }) }),
|
|
4364
|
+
/* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-label", children: labels.removeAnnotation })
|
|
4142
4365
|
] })
|
|
4143
4366
|
] });
|
|
4144
4367
|
};
|
|
@@ -4210,7 +4433,7 @@ function TableInner({
|
|
|
4210
4433
|
if (column.renderCell && !(editing?.rowIndex === rowIndex && editing.columnIndex === columnIndex)) {
|
|
4211
4434
|
const row = rows[rowIndex];
|
|
4212
4435
|
const value = column.dataIndex === void 0 ? void 0 : row[column.dataIndex];
|
|
4213
|
-
return /* @__PURE__ */
|
|
4436
|
+
return /* @__PURE__ */ jsx8(
|
|
4214
4437
|
"div",
|
|
4215
4438
|
{
|
|
4216
4439
|
className: `rvg-cell-render${selectedRowKeySet.has(getRowKey(row, rowIndex)) || selectedColumnKeySet.has(column.key) ? " is-axis-selected" : ""}`,
|
|
@@ -4238,12 +4461,12 @@ function TableInner({
|
|
|
4238
4461
|
const headerTop = fixedHeader ? 0 : -currentScrollTop;
|
|
4239
4462
|
const leafTop = headerTop + headerLeafTop;
|
|
4240
4463
|
if (column.rowNumber) {
|
|
4241
|
-
return /* @__PURE__ */
|
|
4464
|
+
return /* @__PURE__ */ jsx8(
|
|
4242
4465
|
"div",
|
|
4243
4466
|
{
|
|
4244
4467
|
className: `rvg-header-title${isDropTarget ? " is-drop-target" : ""}`,
|
|
4245
4468
|
style: { left, top: headerTop, width: metrics[columnIndex].width, height: headerHeight, justifyContent: "center", padding: 0, textAlign: "center" },
|
|
4246
|
-
children: /* @__PURE__ */
|
|
4469
|
+
children: /* @__PURE__ */ jsx8("span", { children: column.title })
|
|
4247
4470
|
},
|
|
4248
4471
|
column.key
|
|
4249
4472
|
);
|
|
@@ -4252,12 +4475,12 @@ function TableInner({
|
|
|
4252
4475
|
if (rowSelectionMode === "single" || column.rowSelectionIndicator === "arrow" || column.rowSelectionIndicator === "none") return null;
|
|
4253
4476
|
const allSelected = rows.length > 0 && selectedRowKeySet.size === rows.length;
|
|
4254
4477
|
const indeterminate = selectedRowKeySet.size > 0 && !allSelected;
|
|
4255
|
-
return /* @__PURE__ */
|
|
4478
|
+
return /* @__PURE__ */ jsx8(
|
|
4256
4479
|
"div",
|
|
4257
4480
|
{
|
|
4258
4481
|
className: "rvg-header-selection-icon",
|
|
4259
4482
|
style: { left, top: headerTop, width: metrics[columnIndex].width, height: headerHeight },
|
|
4260
|
-
children: /* @__PURE__ */
|
|
4483
|
+
children: /* @__PURE__ */ jsx8(SelectionIcon, { checked: allSelected, indeterminate })
|
|
4261
4484
|
},
|
|
4262
4485
|
column.key
|
|
4263
4486
|
);
|
|
@@ -4266,7 +4489,7 @@ function TableInner({
|
|
|
4266
4489
|
const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex), headerActionSlotWidth);
|
|
4267
4490
|
const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth;
|
|
4268
4491
|
const isHeaderHovered = hoveredHeaderColumnIndex === columnIndex;
|
|
4269
|
-
return /* @__PURE__ */
|
|
4492
|
+
return /* @__PURE__ */ jsx8(
|
|
4270
4493
|
"div",
|
|
4271
4494
|
{
|
|
4272
4495
|
className: `rvg-header-title is-custom${isHeaderHovered ? " is-header-hovered" : ""}${isAxisSelected ? " is-axis-selected" : ""}${isDropTarget ? " is-drop-target" : ""}`,
|
|
@@ -4281,7 +4504,7 @@ function TableInner({
|
|
|
4281
4504
|
justifyContent: column.align === "right" ? "flex-end" : column.align === "center" ? "center" : "flex-start",
|
|
4282
4505
|
textAlign: column.align === "right" ? "right" : column.align === "center" ? "center" : "left"
|
|
4283
4506
|
},
|
|
4284
|
-
children: /* @__PURE__ */
|
|
4507
|
+
children: /* @__PURE__ */ jsx8(
|
|
4285
4508
|
"span",
|
|
4286
4509
|
{
|
|
4287
4510
|
style: { width: "100%" },
|
|
@@ -4315,7 +4538,7 @@ function TableInner({
|
|
|
4315
4538
|
const actionWidth = visibleActions ? (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth : columnDraggable && !cell.leaf ? headerActionSlotWidth : 0;
|
|
4316
4539
|
const isDropTarget = Boolean(columnDropTarget && cell.endIndex >= columnDropTarget.startIndex && cell.startIndex <= columnDropTarget.endIndex);
|
|
4317
4540
|
const isAxisSelected = cell.leaf && selectedColumnKeySet.has(column.key);
|
|
4318
|
-
return /* @__PURE__ */
|
|
4541
|
+
return /* @__PURE__ */ jsxs8(
|
|
4319
4542
|
"div",
|
|
4320
4543
|
{
|
|
4321
4544
|
className: `rvg-header-title rvg-header-group${column.renderHeader ? " is-custom" : ""}${cell.leaf ? " is-leaf" : ""}${isAxisSelected ? " is-axis-selected" : ""}${cell.endIndex === columns.length - 1 ? " is-frame-right" : ""}${isDropTarget ? " is-drop-target" : ""}`,
|
|
@@ -4334,7 +4557,7 @@ function TableInner({
|
|
|
4334
4557
|
textAlign: column.align === "right" ? "right" : column.align === "center" ? "center" : "left"
|
|
4335
4558
|
},
|
|
4336
4559
|
children: [
|
|
4337
|
-
/* @__PURE__ */
|
|
4560
|
+
/* @__PURE__ */ jsx8(
|
|
4338
4561
|
"span",
|
|
4339
4562
|
{
|
|
4340
4563
|
ref: (node) => {
|
|
@@ -4348,7 +4571,7 @@ function TableInner({
|
|
|
4348
4571
|
children: column.renderHeader ? column.renderHeader(column) : column.title
|
|
4349
4572
|
}
|
|
4350
4573
|
),
|
|
4351
|
-
!cell.leaf && columnDraggable && /* @__PURE__ */
|
|
4574
|
+
!cell.leaf && columnDraggable && /* @__PURE__ */ jsx8(
|
|
4352
4575
|
HeaderDragIcon,
|
|
4353
4576
|
{
|
|
4354
4577
|
className: `rvg-header-icon rvg-header-drag-icon${hoveredHeaderAction?.columnIndex === cell.startIndex && hoveredHeaderAction.action === "drag" ? " is-hovered" : ""}`,
|
|
@@ -4415,7 +4638,7 @@ function TableInner({
|
|
|
4415
4638
|
"--rvg-corner-hover-height-extension": "4px"
|
|
4416
4639
|
} : null
|
|
4417
4640
|
} : void 0;
|
|
4418
|
-
|
|
4641
|
+
useLayoutEffect3(() => {
|
|
4419
4642
|
syncSelectionEdgeTarget(scrollPosition.left, scrollPosition.top);
|
|
4420
4643
|
}, [scrollPosition.left, scrollPosition.top, syncSelectionEdgeTarget]);
|
|
4421
4644
|
const handleContextMenu = (event) => {
|
|
@@ -4450,7 +4673,7 @@ function TableInner({
|
|
|
4450
4673
|
if (override?.render !== void 0 || override?.childrens !== void 0) {
|
|
4451
4674
|
return renderContextMenuSubmenu(key, context, override?.label ?? label, override, icon, disabled, danger);
|
|
4452
4675
|
}
|
|
4453
|
-
return /* @__PURE__ */
|
|
4676
|
+
return /* @__PURE__ */ jsxs8(
|
|
4454
4677
|
"button",
|
|
4455
4678
|
{
|
|
4456
4679
|
type: "button",
|
|
@@ -4464,9 +4687,9 @@ function TableInner({
|
|
|
4464
4687
|
setContextMenu(null);
|
|
4465
4688
|
},
|
|
4466
4689
|
children: [
|
|
4467
|
-
icon && /* @__PURE__ */
|
|
4468
|
-
/* @__PURE__ */
|
|
4469
|
-
override?.shortcut && /* @__PURE__ */
|
|
4690
|
+
icon && /* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-icon", children: icon }),
|
|
4691
|
+
/* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-label", children: override?.label ?? label }),
|
|
4692
|
+
override?.shortcut && /* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-shortcut", children: override.shortcut })
|
|
4470
4693
|
]
|
|
4471
4694
|
},
|
|
4472
4695
|
key
|
|
@@ -4485,20 +4708,20 @@ function TableInner({
|
|
|
4485
4708
|
}
|
|
4486
4709
|
const node = renderCustomContextMenuItem(child, context);
|
|
4487
4710
|
if (!node) return null;
|
|
4488
|
-
const wrapped = /* @__PURE__ */
|
|
4489
|
-
separatorPending && /* @__PURE__ */
|
|
4711
|
+
const wrapped = /* @__PURE__ */ jsxs8(Fragment2, { children: [
|
|
4712
|
+
separatorPending && /* @__PURE__ */ jsx8("div", { className: "rvg-context-separator" }),
|
|
4490
4713
|
node
|
|
4491
4714
|
] }, child.key);
|
|
4492
4715
|
separatorPending = false;
|
|
4493
4716
|
return wrapped;
|
|
4494
4717
|
});
|
|
4495
|
-
return /* @__PURE__ */
|
|
4496
|
-
/* @__PURE__ */
|
|
4497
|
-
icon && /* @__PURE__ */
|
|
4498
|
-
/* @__PURE__ */
|
|
4499
|
-
/* @__PURE__ */
|
|
4718
|
+
return /* @__PURE__ */ jsxs8("div", { className: "rvg-context-submenu", children: [
|
|
4719
|
+
/* @__PURE__ */ jsxs8("button", { type: "button", role: "menuitem", className: danger ? "rvg-context-danger" : void 0, disabled, "aria-haspopup": "menu", children: [
|
|
4720
|
+
icon && /* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-icon", children: icon }),
|
|
4721
|
+
/* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-label", children: label }),
|
|
4722
|
+
/* @__PURE__ */ jsx8(SubmenuArrowIcon, {})
|
|
4500
4723
|
] }),
|
|
4501
|
-
/* @__PURE__ */
|
|
4724
|
+
/* @__PURE__ */ jsx8("div", { className: "rvg-context-submenu-panel", role: "menu", children: content })
|
|
4502
4725
|
] }, key);
|
|
4503
4726
|
};
|
|
4504
4727
|
const renderConfiguredContextMenu = (items, context, renderBuiltin) => {
|
|
@@ -4515,10 +4738,10 @@ function TableInner({
|
|
|
4515
4738
|
const node = renderBuiltin(key, override) ?? (override ? renderCustomContextMenuItem(override, context) : null);
|
|
4516
4739
|
if (!node) return;
|
|
4517
4740
|
if (separatorPending) {
|
|
4518
|
-
nodes.push(/* @__PURE__ */
|
|
4741
|
+
nodes.push(/* @__PURE__ */ jsx8("div", { className: "rvg-context-separator" }, `separator:${index}`));
|
|
4519
4742
|
separatorPending = false;
|
|
4520
4743
|
}
|
|
4521
|
-
nodes.push(/* @__PURE__ */
|
|
4744
|
+
nodes.push(/* @__PURE__ */ jsx8(Fragment2, { children: node }, typeof item === "string" ? `${item}:${index}` : item.key));
|
|
4522
4745
|
});
|
|
4523
4746
|
return nodes;
|
|
4524
4747
|
};
|
|
@@ -4528,8 +4751,8 @@ function TableInner({
|
|
|
4528
4751
|
const hasSummaryValue = summaryValues.has(column.key);
|
|
4529
4752
|
const summaryContent = hasSummaryValue ? summaryValues.get(column.key) : summaryEmptyValue;
|
|
4530
4753
|
const showSummarySkeleton = Boolean(column.summary) && summaryPending;
|
|
4531
|
-
const content = columnIndex === 0 ? language === "zh-CN" ? "\u5408\u8BA1" : "Total" : showSummarySkeleton ? /* @__PURE__ */
|
|
4532
|
-
return /* @__PURE__ */
|
|
4754
|
+
const content = columnIndex === 0 ? language === "zh-CN" ? "\u5408\u8BA1" : "Total" : showSummarySkeleton ? /* @__PURE__ */ jsx8("span", { className: "rvg-summary-skeleton" }) : summaryContent;
|
|
4755
|
+
return /* @__PURE__ */ jsx8(
|
|
4533
4756
|
"div",
|
|
4534
4757
|
{
|
|
4535
4758
|
className: `rvg-summary-cell${isUtility ? " is-utility" : ""}${column.summary ? " is-summary" : ""}${summaryVerticalBordered ? "" : " is-borderless"}`,
|
|
@@ -4631,9 +4854,9 @@ function TableInner({
|
|
|
4631
4854
|
const draggingSelectedColumn = Boolean(
|
|
4632
4855
|
columnDragPreview && selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key)
|
|
4633
4856
|
);
|
|
4634
|
-
return /* @__PURE__ */
|
|
4635
|
-
/* @__PURE__ */
|
|
4636
|
-
/* @__PURE__ */
|
|
4857
|
+
return /* @__PURE__ */ jsxs8("div", { ref: rootRef, className: `rvg-root${!hasVerticalBorders ? " is-vertical-borderless" : ""}${horizontalBorderless ? " is-horizontal-borderless" : ""}${frameBorderless ? " is-frame-borderless" : ""}${hasStripedRows ? " is-striped" : ""}${insertBusy ? " is-inserting" : ""}${deleteBusy ? " is-deleting" : ""}${draggingSelectedColumn ? " is-dragging-selected-column" : ""} ${loading && !hasCompletedLoadRef.current && !hasCustomLoading ? "is-initial-loading" : ""} ${className}`, style: rootStyle, children: [
|
|
4858
|
+
/* @__PURE__ */ jsxs8("div", { ref: scrollerRef, className: `rvg-scroller${contextMenu ? " is-context-menu-open" : ""}`, style: { bottom: scrollerBottom }, onScroll: handleScroll, onCopy: handleCopy, onContextMenu: handleContextMenu, tabIndex: 0, role: "grid", "aria-label": ariaLabel, "aria-rowcount": rows.length, "aria-colcount": columns.length, onKeyDown: handleKeyDown, children: [
|
|
4859
|
+
/* @__PURE__ */ jsx8(
|
|
4637
4860
|
"canvas",
|
|
4638
4861
|
{
|
|
4639
4862
|
ref: canvasRef,
|
|
@@ -4871,48 +5094,48 @@ function TableInner({
|
|
|
4871
5094
|
onContextMenu: handleContextMenu
|
|
4872
5095
|
}
|
|
4873
5096
|
),
|
|
4874
|
-
/* @__PURE__ */
|
|
4875
|
-
/* @__PURE__ */
|
|
5097
|
+
/* @__PURE__ */ jsxs8("div", { className: "rvg-text-layer", style: { width: viewport.width, height: renderHeight, marginTop: -renderHeight }, onContextMenu: handleContextMenu, children: [
|
|
5098
|
+
/* @__PURE__ */ jsx8("div", { className: "rvg-text-scroll-clip", style: { left: fixedWidth, right: rightFixedWidth }, children: /* @__PURE__ */ jsxs8(
|
|
4876
5099
|
"div",
|
|
4877
5100
|
{
|
|
4878
5101
|
ref: scrollingTextRef,
|
|
4879
5102
|
className: "rvg-text-scroll-content",
|
|
4880
5103
|
style: { left: -fixedWidth, width: contentWidth, transform: `translateX(${-currentScroll.left}px)` },
|
|
4881
5104
|
children: [
|
|
4882
|
-
columns.map((column, columnIndex) => column.fixed || columnIndex >= utilityColumnCount && headerDepth > 1 ? null : columnIndex >= domRange.columnStart && columnIndex < domRange.columnEnd ? /* @__PURE__ */
|
|
5105
|
+
columns.map((column, columnIndex) => column.fixed || columnIndex >= utilityColumnCount && headerDepth > 1 ? null : columnIndex >= domRange.columnStart && columnIndex < domRange.columnEnd ? /* @__PURE__ */ jsx8("span", { children: renderHeaderTitle(columnIndex, getScrollableColumnLeft(columnIndex)) }, column.key) : null),
|
|
4883
5106
|
headerCells.map((cell) => {
|
|
4884
5107
|
if (columns[cell.startIndex]?.fixed) return null;
|
|
4885
5108
|
if (cell.endIndex < domRange.columnStart || cell.startIndex >= domRange.columnEnd) return null;
|
|
4886
5109
|
return renderGroupedHeaderCell(cell);
|
|
4887
5110
|
}),
|
|
4888
|
-
/* @__PURE__ */
|
|
5111
|
+
/* @__PURE__ */ jsx8("div", { className: "rvg-body-text-clip", style: { top: fixedHeader ? bodyTop : 0, bottom: 0 }, children: Array.from({ length: domRange.rowEnd - domRange.rowStart }, (_, offset) => domRange.rowStart + offset).flatMap((rowIndex) => columns.map((column, columnIndex) => {
|
|
4889
5112
|
if (column.fixed || columnIndex < domRange.columnStart || columnIndex >= domRange.columnEnd) return null;
|
|
4890
5113
|
return renderCellText(rowIndex, columnIndex, getScrollableColumnLeft(columnIndex));
|
|
4891
5114
|
})) })
|
|
4892
5115
|
]
|
|
4893
5116
|
}
|
|
4894
5117
|
) }),
|
|
4895
|
-
/* @__PURE__ */
|
|
5118
|
+
/* @__PURE__ */ jsx8("div", { className: "rvg-body-text-clip", style: { top: fixedHeader ? bodyTop : 0, bottom: 0 }, children: Array.from({ length: domRange.rowEnd - domRange.rowStart }, (_, offset) => domRange.rowStart + offset).flatMap((rowIndex) => columns.map((column, columnIndex) => {
|
|
4896
5119
|
if (!column.fixed) return null;
|
|
4897
5120
|
const left = column.fixed === "left" ? leftFixedOffsets.get(columnIndex) ?? 0 : viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metrics[columnIndex].width;
|
|
4898
5121
|
return renderCellText(rowIndex, columnIndex, left);
|
|
4899
5122
|
})) }),
|
|
4900
5123
|
columns.map((column, columnIndex) => column.fixed && (columnIndex < utilityColumnCount || headerDepth === 1) ? renderHeaderTitle(columnIndex, column.fixed === "right" ? viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metrics[columnIndex].width : column.fixed === "left" ? leftFixedOffsets.get(columnIndex) ?? 0 : getScrollableColumnLeft(columnIndex)) : null),
|
|
4901
5124
|
headerCells.map((cell) => columns[cell.startIndex]?.fixed ? renderGroupedHeaderCell(cell) : null),
|
|
4902
|
-
fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */
|
|
4903
|
-
rightFixedWidth > 0 && currentScroll.left < contentWidth - viewport.width && /* @__PURE__ */
|
|
4904
|
-
hasVerticalBorders && fixedWidth > 0 && /* @__PURE__ */
|
|
4905
|
-
hasVerticalBorders && rightFixedWidth > 0 && /* @__PURE__ */
|
|
5125
|
+
fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */ jsx8("div", { className: "rvg-text-fixed-shadow is-left", style: { left: fixedWidth } }),
|
|
5126
|
+
rightFixedWidth > 0 && currentScroll.left < contentWidth - viewport.width && /* @__PURE__ */ jsx8("div", { className: "rvg-text-fixed-shadow is-right", style: { right: rightFixedWidth } }),
|
|
5127
|
+
hasVerticalBorders && fixedWidth > 0 && /* @__PURE__ */ jsx8("div", { className: "rvg-text-fixed-border is-left", style: { left: fixedWidth - 1 } }),
|
|
5128
|
+
hasVerticalBorders && rightFixedWidth > 0 && /* @__PURE__ */ jsx8("div", { className: "rvg-text-fixed-border is-right", style: { right: rightFixedWidth } })
|
|
4906
5129
|
] }),
|
|
4907
|
-
/* @__PURE__ */
|
|
5130
|
+
/* @__PURE__ */ jsx8("div", { className: "rvg-spacer", style: { width: contentWidth, height: contentHeight + bodyTop, marginTop: -renderHeight } })
|
|
4908
5131
|
] }),
|
|
4909
|
-
hasSummaryRow && /* @__PURE__ */
|
|
5132
|
+
hasSummaryRow && /* @__PURE__ */ jsxs8(
|
|
4910
5133
|
"div",
|
|
4911
5134
|
{
|
|
4912
5135
|
className: `rvg-summary-row is-${summaryPosition}${hasVerticalBorders ? "" : " is-vertical-borderless"}`,
|
|
4913
5136
|
style: { height: rowHeight, top: summaryPosition === "top" ? fixedHeader ? headerHeight : headerHeight - currentScroll.top : void 0 },
|
|
4914
5137
|
children: [
|
|
4915
|
-
/* @__PURE__ */
|
|
5138
|
+
/* @__PURE__ */ jsx8("div", { className: "rvg-summary-scroll-clip", style: { left: fixedWidth, right: rightFixedWidth }, children: /* @__PURE__ */ jsx8(
|
|
4916
5139
|
"div",
|
|
4917
5140
|
{
|
|
4918
5141
|
className: "rvg-summary-scroll-content",
|
|
@@ -4920,41 +5143,41 @@ function TableInner({
|
|
|
4920
5143
|
children: columns.map((column, columnIndex) => column.fixed ? null : renderSummaryCell(columnIndex, getScrollableColumnLeft(columnIndex)))
|
|
4921
5144
|
}
|
|
4922
5145
|
) }),
|
|
4923
|
-
/* @__PURE__ */
|
|
5146
|
+
/* @__PURE__ */ jsxs8("div", { className: "rvg-summary-fixed-layer", children: [
|
|
4924
5147
|
columns.map((column, columnIndex) => column.fixed === "left" ? renderSummaryCell(columnIndex, leftFixedOffsets.get(columnIndex) ?? 0) : null),
|
|
4925
5148
|
columns.map((column, columnIndex) => column.fixed === "right" ? renderSummaryCell(columnIndex, viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metrics[columnIndex].width) : null)
|
|
4926
5149
|
] }),
|
|
4927
|
-
fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */
|
|
4928
|
-
rightFixedWidth > 0 && currentScroll.left < contentWidth - viewport.width && /* @__PURE__ */
|
|
4929
|
-
summaryVerticalBordered && fixedWidth > 0 && /* @__PURE__ */
|
|
4930
|
-
summaryVerticalBordered && rightFixedWidth > 0 && /* @__PURE__ */
|
|
5150
|
+
fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */ jsx8("div", { className: "rvg-summary-fixed-shadow is-left", style: { left: fixedWidth } }),
|
|
5151
|
+
rightFixedWidth > 0 && currentScroll.left < contentWidth - viewport.width && /* @__PURE__ */ jsx8("div", { className: "rvg-summary-fixed-shadow is-right", style: { right: rightFixedWidth } }),
|
|
5152
|
+
summaryVerticalBordered && fixedWidth > 0 && /* @__PURE__ */ jsx8("div", { className: "rvg-summary-fixed-border is-left", style: { left: fixedWidth - 1 } }),
|
|
5153
|
+
summaryVerticalBordered && rightFixedWidth > 0 && /* @__PURE__ */ jsx8("div", { className: "rvg-summary-fixed-border is-right", style: { right: rightFixedWidth } })
|
|
4931
5154
|
]
|
|
4932
5155
|
}
|
|
4933
5156
|
),
|
|
4934
|
-
/* @__PURE__ */
|
|
4935
|
-
/* @__PURE__ */
|
|
5157
|
+
/* @__PURE__ */ jsxs8("div", { ref: headerIconsRef, className: "rvg-header-icons", style: { height: headerHeight, transform: `translateY(${fixedHeader ? 0 : -scrollRef.current.top}px)` }, children: [
|
|
5158
|
+
/* @__PURE__ */ jsx8("div", { className: "rvg-header-scroll-clip", style: { left: fixedWidth, right: rightFixedWidth }, children: /* @__PURE__ */ jsx8(
|
|
4936
5159
|
"div",
|
|
4937
5160
|
{
|
|
4938
5161
|
ref: scrollingHeaderIconsRef,
|
|
4939
5162
|
className: "rvg-header-icon-layer rvg-header-icon-layer-scroll",
|
|
4940
5163
|
style: { left: -fixedWidth, width: contentWidth, transform: `translateX(${-scrollRef.current.left}px)` },
|
|
4941
|
-
children: columns.map((column, index) => column.fixed ? null : /* @__PURE__ */
|
|
5164
|
+
children: columns.map((column, index) => column.fixed ? null : /* @__PURE__ */ jsx8("span", { children: renderHeaderIcons(index, getScrollableColumnLeft(index)) }, column.key))
|
|
4942
5165
|
}
|
|
4943
5166
|
) }),
|
|
4944
|
-
/* @__PURE__ */
|
|
4945
|
-
columns.map((column, index) => column.fixed === "left" ? /* @__PURE__ */
|
|
4946
|
-
columns.map((column, index) => column.fixed === "right" ? /* @__PURE__ */
|
|
5167
|
+
/* @__PURE__ */ jsxs8("div", { className: "rvg-header-icon-layer", children: [
|
|
5168
|
+
columns.map((column, index) => column.fixed === "left" ? /* @__PURE__ */ jsx8("span", { children: renderHeaderIcons(index, leftFixedOffsets.get(index) ?? 0) }, column.key) : null),
|
|
5169
|
+
columns.map((column, index) => column.fixed === "right" ? /* @__PURE__ */ jsx8("span", { children: renderHeaderIcons(index, viewport.width - (rightFixedOffsets.get(index) ?? 0) - metrics[index].width) }, column.key) : null)
|
|
4947
5170
|
] })
|
|
4948
5171
|
] }),
|
|
4949
|
-
hasVerticalBorders && trailingColumnBorderLeft !== null && /* @__PURE__ */
|
|
5172
|
+
hasVerticalBorders && trailingColumnBorderLeft !== null && /* @__PURE__ */ jsx8(
|
|
4950
5173
|
"div",
|
|
4951
5174
|
{
|
|
4952
5175
|
className: "rvg-trailing-column-border",
|
|
4953
5176
|
style: { left: trailingColumnBorderLeft, height: renderHeight }
|
|
4954
5177
|
}
|
|
4955
5178
|
),
|
|
4956
|
-
headerTooltip && /* @__PURE__ */
|
|
4957
|
-
hoveredCellTooltip && /* @__PURE__ */
|
|
5179
|
+
headerTooltip && /* @__PURE__ */ jsx8("div", { className: `rvg-header-tooltip is-${headerTooltip.placement}`, role: "tooltip", style: { left: headerTooltip.left, top: headerTooltip.top }, children: headerTooltip.label }),
|
|
5180
|
+
hoveredCellTooltip && /* @__PURE__ */ jsx8(
|
|
4958
5181
|
"div",
|
|
4959
5182
|
{
|
|
4960
5183
|
className: `rvg-cell-tooltip${hoveredCellTooltip.annotation ? " is-annotation" : ` is-${hoveredCellTooltip.placement ?? "right"}`}`,
|
|
@@ -4976,7 +5199,7 @@ function TableInner({
|
|
|
4976
5199
|
children: hoveredCellTooltip.label
|
|
4977
5200
|
}
|
|
4978
5201
|
),
|
|
4979
|
-
rangeHandlePosition && /* @__PURE__ */
|
|
5202
|
+
rangeHandlePosition && /* @__PURE__ */ jsx8(
|
|
4980
5203
|
"div",
|
|
4981
5204
|
{
|
|
4982
5205
|
className: "rvg-range-handle",
|
|
@@ -5000,8 +5223,8 @@ function TableInner({
|
|
|
5000
5223
|
}
|
|
5001
5224
|
}
|
|
5002
5225
|
),
|
|
5003
|
-
selectionOutlineStyle && /* @__PURE__ */
|
|
5004
|
-
selectionEdgeIndicator && selection && /* @__PURE__ */
|
|
5226
|
+
selectionOutlineStyle && /* @__PURE__ */ jsx8("div", { ref: selectionFocusRef, className: "rvg-selection-focus", style: selectionOutlineStyle, "aria-hidden": "true" }),
|
|
5227
|
+
selectionEdgeIndicator && selection && /* @__PURE__ */ jsx8(
|
|
5005
5228
|
"button",
|
|
5006
5229
|
{
|
|
5007
5230
|
ref: selectionEdgeTargetRef,
|
|
@@ -5019,10 +5242,10 @@ function TableInner({
|
|
|
5019
5242
|
scrollerRef.current?.focus({ preventScroll: true });
|
|
5020
5243
|
revealCell(selection);
|
|
5021
5244
|
},
|
|
5022
|
-
children: /* @__PURE__ */
|
|
5245
|
+
children: /* @__PURE__ */ jsx8("span", { className: "rvg-selection-edge-halo", "aria-hidden": "true", children: /* @__PURE__ */ jsx8("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", children: /* @__PURE__ */ jsx8("path", { d: "M 0 100 L 0 0 L 100 0" }) }) })
|
|
5023
5246
|
}
|
|
5024
5247
|
),
|
|
5025
|
-
contextMenu && /* @__PURE__ */
|
|
5248
|
+
contextMenu && /* @__PURE__ */ jsx8("div", { ref: contextMenuRef, className: "rvg-context-menu", role: "menu", style: { left: contextMenu.left, top: contextMenu.top }, children: contextMenu.type === "header" ? (() => {
|
|
5026
5249
|
const column = columns[contextMenu.columnIndex];
|
|
5027
5250
|
const headerContext = { column, columnIndex: contextMenu.columnIndex };
|
|
5028
5251
|
return renderConfiguredContextMenu(resolveContextMenuSection(customContextMenuConfig?.header, DEFAULT_HEADER_CONTEXT_MENU), headerContext, (item, override) => {
|
|
@@ -5033,12 +5256,12 @@ function TableInner({
|
|
|
5033
5256
|
} catch {
|
|
5034
5257
|
showToast("error", labels.copyError);
|
|
5035
5258
|
}
|
|
5036
|
-
}, override, { icon: /* @__PURE__ */
|
|
5259
|
+
}, override, { icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "copy" }) });
|
|
5037
5260
|
if (item === "select-column") {
|
|
5038
5261
|
if (!columnSelection) return null;
|
|
5039
5262
|
return renderContextMenuButton("header-select-column", headerContext, selectedColumnKeySet.has(column.key) ? labels.deselectColumn : labels.selectColumn, () => {
|
|
5040
5263
|
toggleColumnFromMenu(contextMenu.columnIndex);
|
|
5041
|
-
}, override, { icon: /* @__PURE__ */
|
|
5264
|
+
}, override, { icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "select-column" }) });
|
|
5042
5265
|
}
|
|
5043
5266
|
return null;
|
|
5044
5267
|
});
|
|
@@ -5059,7 +5282,7 @@ function TableInner({
|
|
|
5059
5282
|
} catch {
|
|
5060
5283
|
showToast("error", labels.copyError);
|
|
5061
5284
|
}
|
|
5062
|
-
}, override, { icon: /* @__PURE__ */
|
|
5285
|
+
}, override, { icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "copy" }) });
|
|
5063
5286
|
if (item === "annotation") return renderAnnotationControls(rangeCells);
|
|
5064
5287
|
if (item === "undo") {
|
|
5065
5288
|
const changedCells = rangeCells.flatMap((cell) => {
|
|
@@ -5086,7 +5309,7 @@ function TableInner({
|
|
|
5086
5309
|
});
|
|
5087
5310
|
onCellChange?.({ ...cell, row, previousValue, value });
|
|
5088
5311
|
});
|
|
5089
|
-
}, override, { disabled: !onCellChange, icon: /* @__PURE__ */
|
|
5312
|
+
}, override, { disabled: !onCellChange, icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "undo" }) });
|
|
5090
5313
|
}
|
|
5091
5314
|
if (item === "clear") {
|
|
5092
5315
|
const hasClearableCell = rangeCells.some((cell) => {
|
|
@@ -5103,7 +5326,7 @@ function TableInner({
|
|
|
5103
5326
|
markCellEdited(cell, row[column.dataIndex], "");
|
|
5104
5327
|
onCellChange?.({ ...cell, row, previousValue: row[column.dataIndex], value: "" });
|
|
5105
5328
|
});
|
|
5106
|
-
}, override, { disabled: !onCellChange, icon: /* @__PURE__ */
|
|
5329
|
+
}, override, { disabled: !onCellChange, icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "clear" }) });
|
|
5107
5330
|
}
|
|
5108
5331
|
return null;
|
|
5109
5332
|
});
|
|
@@ -5121,7 +5344,7 @@ function TableInner({
|
|
|
5121
5344
|
const affectedRows = selectedIndices.includes(cell.rowIndex) ? selectedIndices : [cell.rowIndex];
|
|
5122
5345
|
const cellContext = { ...cell, row, column, value: dataIndex === void 0 ? void 0 : row[dataIndex] };
|
|
5123
5346
|
return renderConfiguredContextMenu(resolveContextMenuSection(customContextMenuConfig?.cell, DEFAULT_CELL_CONTEXT_MENU), cellContext, (item, override) => {
|
|
5124
|
-
if (item === "edit") return renderContextMenuButton("cell-edit", cellContext, labels.edit, () => beginEdit(cell), override, { disabled: !isCellEditable(cell), icon: /* @__PURE__ */
|
|
5347
|
+
if (item === "edit") return renderContextMenuButton("cell-edit", cellContext, labels.edit, () => beginEdit(cell), override, { disabled: !isCellEditable(cell), icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "edit" }) });
|
|
5125
5348
|
if (item === "copy") return renderContextMenuButton("cell-copy", cellContext, labels.copyContent, async () => {
|
|
5126
5349
|
try {
|
|
5127
5350
|
await navigator.clipboard.writeText(getCellLabel(cell.rowIndex, cell.columnIndex));
|
|
@@ -5129,20 +5352,20 @@ function TableInner({
|
|
|
5129
5352
|
} catch {
|
|
5130
5353
|
showToast("error", labels.copyError);
|
|
5131
5354
|
}
|
|
5132
|
-
}, override, { icon: /* @__PURE__ */
|
|
5355
|
+
}, override, { icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "copy" }) });
|
|
5133
5356
|
if (item === "undo") return renderContextMenuButton("cell-undo", cellContext, labels.undoChange, () => {
|
|
5134
5357
|
if (dataIndex === void 0 || originalValue === void 0) return;
|
|
5135
5358
|
const previousValue = row[dataIndex];
|
|
5136
5359
|
const value = typeof previousValue === "number" && originalValue !== "" ? Number(originalValue) : originalValue;
|
|
5137
5360
|
setConfirmAction({ type: "undo", cell, row, dataIndex, previousValue, value });
|
|
5138
|
-
}, override, { disabled: !onCellChange || dataIndex === void 0 || originalValue === void 0, icon: /* @__PURE__ */
|
|
5361
|
+
}, override, { disabled: !onCellChange || dataIndex === void 0 || originalValue === void 0, icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "undo" }) });
|
|
5139
5362
|
if (item === "clear") {
|
|
5140
5363
|
if (dataIndex === void 0 || isEmptyCellValue(row[dataIndex])) return null;
|
|
5141
5364
|
return renderContextMenuButton("cell-clear", cellContext, labels.clearContent, () => {
|
|
5142
5365
|
if (dataIndex === void 0) return;
|
|
5143
5366
|
const previousValue = row[dataIndex];
|
|
5144
5367
|
setConfirmAction({ type: "clear", cell, row, dataIndex, previousValue });
|
|
5145
|
-
}, override, { disabled: !onCellChange || dataIndex === void 0, danger: true, icon: /* @__PURE__ */
|
|
5368
|
+
}, override, { disabled: !onCellChange || dataIndex === void 0, danger: true, icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "clear" }) });
|
|
5146
5369
|
}
|
|
5147
5370
|
if (item === "annotation") return renderAnnotationControls([cell]);
|
|
5148
5371
|
if (item === "select-row") {
|
|
@@ -5152,54 +5375,54 @@ function TableInner({
|
|
|
5152
5375
|
setSelection(null);
|
|
5153
5376
|
if (selectedRowKeySet.has(cell.rowKey)) setRowKeys(rowKeys.filter((key) => key !== cell.rowKey));
|
|
5154
5377
|
else setRowKeys(rowSelectionMode === "single" ? [cell.rowKey] : [...rowKeys, cell.rowKey]);
|
|
5155
|
-
}, override, { icon: /* @__PURE__ */
|
|
5378
|
+
}, override, { icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "select-row" }) });
|
|
5156
5379
|
}
|
|
5157
5380
|
if (item === "select-column") {
|
|
5158
5381
|
if (!columnSelection) return null;
|
|
5159
5382
|
return renderContextMenuButton("cell-select-column", cellContext, selectedColumnKeySet.has(cell.columnKey) ? labels.deselectColumn : labels.selectColumn, () => {
|
|
5160
5383
|
toggleColumnFromMenu(cell.columnIndex);
|
|
5161
|
-
}, override, { icon: /* @__PURE__ */
|
|
5384
|
+
}, override, { icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "select-column" }) });
|
|
5162
5385
|
}
|
|
5163
|
-
if (item === "insert-above") return /* @__PURE__ */
|
|
5164
|
-
/* @__PURE__ */
|
|
5386
|
+
if (item === "insert-above") return /* @__PURE__ */ jsxs8("div", { className: "rvg-context-insert", children: [
|
|
5387
|
+
/* @__PURE__ */ jsxs8("button", { type: "button", role: "menuitem", disabled: !onInsertRows, onClick: () => {
|
|
5165
5388
|
void insertRowsOptimistically(cell, "before", insertCounts.before);
|
|
5166
5389
|
}, children: [
|
|
5167
|
-
/* @__PURE__ */
|
|
5168
|
-
/* @__PURE__ */
|
|
5390
|
+
/* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-icon", children: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "insert-above" }) }),
|
|
5391
|
+
/* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-label", children: labels.insertAbove })
|
|
5169
5392
|
] }),
|
|
5170
|
-
/* @__PURE__ */
|
|
5171
|
-
/* @__PURE__ */
|
|
5393
|
+
/* @__PURE__ */ jsx8("input", { "aria-label": labels.insertAboveCount, type: "number", min: 1, max: 5, step: 1, value: insertCounts.before, onChange: (event) => setInsertCounts((current) => ({ ...current, before: Math.max(1, Math.min(5, Math.floor(Number(event.target.value) || 1))) })) }),
|
|
5394
|
+
/* @__PURE__ */ jsx8("span", { children: labels.rowUnit })
|
|
5172
5395
|
] });
|
|
5173
|
-
if (item === "insert-below") return /* @__PURE__ */
|
|
5174
|
-
/* @__PURE__ */
|
|
5396
|
+
if (item === "insert-below") return /* @__PURE__ */ jsxs8("div", { className: "rvg-context-insert", children: [
|
|
5397
|
+
/* @__PURE__ */ jsxs8("button", { type: "button", role: "menuitem", disabled: !onInsertRows, onClick: () => {
|
|
5175
5398
|
void insertRowsOptimistically(cell, "after", insertCounts.after);
|
|
5176
5399
|
}, children: [
|
|
5177
|
-
/* @__PURE__ */
|
|
5178
|
-
/* @__PURE__ */
|
|
5400
|
+
/* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-icon", children: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "insert-below" }) }),
|
|
5401
|
+
/* @__PURE__ */ jsx8("span", { className: "rvg-context-menu-label", children: labels.insertBelow })
|
|
5179
5402
|
] }),
|
|
5180
|
-
/* @__PURE__ */
|
|
5181
|
-
/* @__PURE__ */
|
|
5403
|
+
/* @__PURE__ */ jsx8("input", { "aria-label": labels.insertBelowCount, type: "number", min: 1, max: 5, step: 1, value: insertCounts.after, onChange: (event) => setInsertCounts((current) => ({ ...current, after: Math.max(1, Math.min(5, Math.floor(Number(event.target.value) || 1))) })) }),
|
|
5404
|
+
/* @__PURE__ */ jsx8("span", { children: labels.rowUnit })
|
|
5182
5405
|
] });
|
|
5183
5406
|
if (item === "move-up") {
|
|
5184
5407
|
if (!rowDraggable) return null;
|
|
5185
|
-
return renderContextMenuButton("cell-move-up", cellContext, labels.moveUp, () => applyRowOrder(cell.rowIndex, cell.rowIndex - 1), override, { disabled: cell.rowIndex === 0, icon: /* @__PURE__ */
|
|
5408
|
+
return renderContextMenuButton("cell-move-up", cellContext, labels.moveUp, () => applyRowOrder(cell.rowIndex, cell.rowIndex - 1), override, { disabled: cell.rowIndex === 0, icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "move-up" }) });
|
|
5186
5409
|
}
|
|
5187
5410
|
if (item === "move-down") {
|
|
5188
5411
|
if (!rowDraggable) return null;
|
|
5189
|
-
return renderContextMenuButton("cell-move-down", cellContext, labels.moveDown, () => applyRowOrder(cell.rowIndex, cell.rowIndex + 1), override, { disabled: cell.rowIndex === rows.length - 1, icon: /* @__PURE__ */
|
|
5412
|
+
return renderContextMenuButton("cell-move-down", cellContext, labels.moveDown, () => applyRowOrder(cell.rowIndex, cell.rowIndex + 1), override, { disabled: cell.rowIndex === rows.length - 1, icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "move-down" }) });
|
|
5190
5413
|
}
|
|
5191
|
-
if (item === "delete-row") return renderContextMenuButton("cell-delete-row", cellContext, labels.deleteRow, () => setConfirmAction({ type: "delete-row", rows: affectedRows.map((rowIndex) => ({ rowIndex, row: rows[rowIndex] })) }), override, { disabled: !onDeleteRows, danger: true, icon: /* @__PURE__ */
|
|
5414
|
+
if (item === "delete-row") return renderContextMenuButton("cell-delete-row", cellContext, labels.deleteRow, () => setConfirmAction({ type: "delete-row", rows: affectedRows.map((rowIndex) => ({ rowIndex, row: rows[rowIndex] })) }), override, { disabled: !onDeleteRows, danger: true, icon: /* @__PURE__ */ jsx8(ContextMenuIcon, { type: "delete" }) });
|
|
5192
5415
|
return null;
|
|
5193
5416
|
});
|
|
5194
5417
|
})() }),
|
|
5195
|
-
confirmAction && /* @__PURE__ */
|
|
5418
|
+
confirmAction && /* @__PURE__ */ jsx8("div", { className: "rvg-confirm-backdrop", role: "presentation", onMouseDown: (event) => {
|
|
5196
5419
|
if (!confirmLoading && event.target === event.currentTarget) setConfirmAction(null);
|
|
5197
|
-
}, children: /* @__PURE__ */
|
|
5198
|
-
/* @__PURE__ */
|
|
5199
|
-
/* @__PURE__ */
|
|
5200
|
-
/* @__PURE__ */
|
|
5201
|
-
/* @__PURE__ */
|
|
5202
|
-
/* @__PURE__ */
|
|
5420
|
+
}, children: /* @__PURE__ */ jsxs8("div", { className: "rvg-confirm", role: "alertdialog", "aria-modal": "true", "aria-labelledby": "rvg-delete-title", children: [
|
|
5421
|
+
/* @__PURE__ */ jsx8("strong", { id: "rvg-delete-title", children: confirmAction.type === "undo" ? labels.undoConfirmTitle : confirmAction.type === "clear" ? labels.clearConfirmTitle : labels.deleteConfirmTitle }),
|
|
5422
|
+
/* @__PURE__ */ jsx8("p", { children: confirmAction.type === "undo" ? labels.undoConfirmDescription : confirmAction.type === "clear" ? labels.clearConfirmDescription : labels.deleteConfirmDescription(confirmAction.rows.length) }),
|
|
5423
|
+
/* @__PURE__ */ jsxs8("div", { className: "rvg-confirm-actions", children: [
|
|
5424
|
+
/* @__PURE__ */ jsx8("button", { type: "button", disabled: confirmLoading, onClick: () => setConfirmAction(null), children: labels.cancel }),
|
|
5425
|
+
/* @__PURE__ */ jsxs8("button", { type: "button", className: "rvg-confirm-danger", disabled: confirmLoading, autoFocus: true, onClick: () => {
|
|
5203
5426
|
if (confirmLoading) return;
|
|
5204
5427
|
flushSync(() => setConfirmLoading(true));
|
|
5205
5428
|
window.requestAnimationFrame(async () => {
|
|
@@ -5252,13 +5475,13 @@ function TableInner({
|
|
|
5252
5475
|
}
|
|
5253
5476
|
});
|
|
5254
5477
|
}, children: [
|
|
5255
|
-
confirmLoading && /* @__PURE__ */
|
|
5478
|
+
confirmLoading && /* @__PURE__ */ jsx8(LoadingSpinnerIcon, {}),
|
|
5256
5479
|
confirmAction.type === "undo" ? labels.undoChange : confirmAction.type === "clear" ? labels.clear : labels.delete
|
|
5257
5480
|
] })
|
|
5258
5481
|
] })
|
|
5259
5482
|
] }) }),
|
|
5260
|
-
toast && /* @__PURE__ */
|
|
5261
|
-
/* @__PURE__ */
|
|
5483
|
+
toast && /* @__PURE__ */ jsx8("div", { className: `rvg-toast is-${toast.type}`, role: "status", children: toast.message }),
|
|
5484
|
+
/* @__PURE__ */ jsx8(
|
|
5262
5485
|
"div",
|
|
5263
5486
|
{
|
|
5264
5487
|
ref: verticalScrollbarRef,
|
|
@@ -5269,10 +5492,10 @@ function TableInner({
|
|
|
5269
5492
|
onPointerMove: handleVerticalScrollbarPointerMove,
|
|
5270
5493
|
onPointerUp: handleVerticalScrollbarPointerUp,
|
|
5271
5494
|
onPointerCancel: handleVerticalScrollbarPointerUp,
|
|
5272
|
-
children: /* @__PURE__ */
|
|
5495
|
+
children: /* @__PURE__ */ jsx8("div", { ref: verticalScrollbarThumbRef, className: "rvg-vertical-scrollbar-thumb" })
|
|
5273
5496
|
}
|
|
5274
5497
|
),
|
|
5275
|
-
/* @__PURE__ */
|
|
5498
|
+
/* @__PURE__ */ jsx8(
|
|
5276
5499
|
"div",
|
|
5277
5500
|
{
|
|
5278
5501
|
ref: horizontalScrollbarRef,
|
|
@@ -5283,11 +5506,11 @@ function TableInner({
|
|
|
5283
5506
|
onPointerMove: handleHorizontalScrollbarPointerMove,
|
|
5284
5507
|
onPointerUp: handleHorizontalScrollbarPointerUp,
|
|
5285
5508
|
onPointerCancel: handleHorizontalScrollbarPointerUp,
|
|
5286
|
-
children: /* @__PURE__ */
|
|
5509
|
+
children: /* @__PURE__ */ jsx8("div", { ref: horizontalScrollbarThumbRef, className: "rvg-horizontal-scrollbar-thumb" })
|
|
5287
5510
|
}
|
|
5288
5511
|
),
|
|
5289
|
-
/* @__PURE__ */
|
|
5290
|
-
columnDragPreview && /* @__PURE__ */
|
|
5512
|
+
/* @__PURE__ */ jsx8("div", { ref: dragGuideRef, className: "rvg-column-guide" }),
|
|
5513
|
+
columnDragPreview && /* @__PURE__ */ jsxs8(
|
|
5291
5514
|
"div",
|
|
5292
5515
|
{
|
|
5293
5516
|
"aria-hidden": "true",
|
|
@@ -5303,7 +5526,7 @@ function TableInner({
|
|
|
5303
5526
|
backgroundSize: `${viewport.width}px ${renderHeight}px`
|
|
5304
5527
|
},
|
|
5305
5528
|
children: [
|
|
5306
|
-
/* @__PURE__ */
|
|
5529
|
+
/* @__PURE__ */ jsxs8(
|
|
5307
5530
|
"div",
|
|
5308
5531
|
{
|
|
5309
5532
|
className: `rvg-column-drag-preview-header${selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key) ? " is-axis-selected" : ""}`,
|
|
@@ -5316,7 +5539,7 @@ function TableInner({
|
|
|
5316
5539
|
),
|
|
5317
5540
|
rows.slice(domRange.rowStart, domRange.rowEnd).map((_row, visibleRowOffset) => {
|
|
5318
5541
|
const rowIndex = domRange.rowStart + visibleRowOffset;
|
|
5319
|
-
return /* @__PURE__ */
|
|
5542
|
+
return /* @__PURE__ */ jsx8(
|
|
5320
5543
|
"div",
|
|
5321
5544
|
{
|
|
5322
5545
|
className: `rvg-column-drag-preview-cell${selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key) ? " is-axis-selected" : ""}${hasStripedRows && rowIndex % 2 === 1 ? " is-striped" : ""}`,
|
|
@@ -5329,16 +5552,16 @@ function TableInner({
|
|
|
5329
5552
|
]
|
|
5330
5553
|
}
|
|
5331
5554
|
),
|
|
5332
|
-
resizeGuideX !== null && /* @__PURE__ */
|
|
5555
|
+
resizeGuideX !== null && /* @__PURE__ */ jsx8(
|
|
5333
5556
|
"div",
|
|
5334
5557
|
{
|
|
5335
5558
|
className: "rvg-column-guide is-resizing",
|
|
5336
5559
|
style: { display: "block", top: resizeGuideTop, transform: `translateX(${Math.round(resizeGuideX)}px)` }
|
|
5337
5560
|
}
|
|
5338
5561
|
),
|
|
5339
|
-
/* @__PURE__ */
|
|
5340
|
-
filterEditor && /* @__PURE__ */
|
|
5341
|
-
/* @__PURE__ */
|
|
5562
|
+
/* @__PURE__ */ jsx8("div", { ref: rowDragGuideRef, className: "rvg-row-guide" }),
|
|
5563
|
+
filterEditor && /* @__PURE__ */ jsxs8("div", { ref: filterRef, className: "rvg-filter", style: { left: filterEditor.left, top: filterEditor.top }, children: [
|
|
5564
|
+
/* @__PURE__ */ jsx8(
|
|
5342
5565
|
"input",
|
|
5343
5566
|
{
|
|
5344
5567
|
autoFocus: true,
|
|
@@ -5362,15 +5585,15 @@ function TableInner({
|
|
|
5362
5585
|
}
|
|
5363
5586
|
}
|
|
5364
5587
|
),
|
|
5365
|
-
/* @__PURE__ */
|
|
5366
|
-
/* @__PURE__ */
|
|
5588
|
+
/* @__PURE__ */ jsxs8("div", { className: "rvg-filter-actions", children: [
|
|
5589
|
+
/* @__PURE__ */ jsx8("button", { type: "button", onClick: () => {
|
|
5367
5590
|
const key = columns[filterEditor.columnIndex].key;
|
|
5368
5591
|
const next = { ...filterValues };
|
|
5369
5592
|
delete next[key];
|
|
5370
5593
|
setFilterValues(next);
|
|
5371
5594
|
setFilterEditor(null);
|
|
5372
5595
|
}, children: labels.reset }),
|
|
5373
|
-
/* @__PURE__ */
|
|
5596
|
+
/* @__PURE__ */ jsx8("button", { type: "button", className: "rvg-filter-confirm", onClick: () => {
|
|
5374
5597
|
const key = columns[filterEditor.columnIndex].key;
|
|
5375
5598
|
const next = { ...filterValues };
|
|
5376
5599
|
if (filterEditor.draft) next[key] = filterEditor.draft;
|
|
@@ -5381,28 +5604,28 @@ function TableInner({
|
|
|
5381
5604
|
] })
|
|
5382
5605
|
] }),
|
|
5383
5606
|
renderEditor(),
|
|
5384
|
-
rows.length === 0 && !loading && /* @__PURE__ */
|
|
5385
|
-
loading && hasCustomLoading && /* @__PURE__ */
|
|
5386
|
-
loading && !hasCustomLoading && !hasCompletedLoadRef.current && /* @__PURE__ */
|
|
5387
|
-
Array.from({ length: Math.ceil((renderHeight - headerHeight) / rowHeight) }, (_, rowIndex) => /* @__PURE__ */
|
|
5607
|
+
rows.length === 0 && !loading && /* @__PURE__ */ jsx8("div", { className: "rvg-empty", style: { top: bodyTop }, children: emptyContent ?? /* @__PURE__ */ jsx8(DefaultEmptyState, { label: labels.empty }) }),
|
|
5608
|
+
loading && hasCustomLoading && /* @__PURE__ */ jsx8("div", { className: "rvg-custom-loading", "aria-label": labels.refreshing, children: loadingContent }),
|
|
5609
|
+
loading && !hasCustomLoading && !hasCompletedLoadRef.current && /* @__PURE__ */ jsxs8("div", { className: "rvg-initial-loading", style: { top: headerHeight }, "aria-label": labels.initialLoading, children: [
|
|
5610
|
+
Array.from({ length: Math.ceil((renderHeight - headerHeight) / rowHeight) }, (_, rowIndex) => /* @__PURE__ */ jsx8("div", { className: "rvg-loading-row", style: { height: rowHeight }, children: columns.map((column, columnIndex) => {
|
|
5388
5611
|
const left = getDisplayedColumnLeft(columnIndex);
|
|
5389
5612
|
const columnWidth = metrics[columnIndex].width;
|
|
5390
5613
|
if (left + columnWidth <= 0 || left >= viewport.width) return null;
|
|
5391
5614
|
const isUtility = column.rowSelection || column.rowDragHandle || column.rowNumber;
|
|
5392
|
-
return /* @__PURE__ */
|
|
5615
|
+
return /* @__PURE__ */ jsx8(
|
|
5393
5616
|
"span",
|
|
5394
5617
|
{
|
|
5395
5618
|
className: column.rowDragHandle ? "is-utility is-drag" : column.rowSelection ? "is-utility is-selection" : void 0,
|
|
5396
5619
|
style: { left, width: columnWidth, zIndex: column.fixed ? 1 : 0, background: column.fixed ? "#fff" : void 0, justifyContent: column.align === "right" ? "flex-end" : column.align === "center" || isUtility ? "center" : "flex-start" },
|
|
5397
|
-
children: /* @__PURE__ */
|
|
5620
|
+
children: /* @__PURE__ */ jsx8("i", { style: { width: isUtility ? 14 : `${38 + (rowIndex * 17 + columnIndex * 13) % 43}%`, animationDelay: `${(rowIndex * columns.length + columnIndex) * 24}ms` } })
|
|
5398
5621
|
},
|
|
5399
5622
|
column.key
|
|
5400
5623
|
);
|
|
5401
5624
|
}) }, rowIndex)),
|
|
5402
|
-
fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */
|
|
5403
|
-
rightFixedWidth > 0 && currentScroll.left < contentWidth - viewport.width && /* @__PURE__ */
|
|
5625
|
+
fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */ jsx8("div", { className: "rvg-loading-fixed-shadow is-left", style: { left: fixedWidth } }),
|
|
5626
|
+
rightFixedWidth > 0 && currentScroll.left < contentWidth - viewport.width && /* @__PURE__ */ jsx8("div", { className: "rvg-loading-fixed-shadow is-right", style: { right: rightFixedWidth } })
|
|
5404
5627
|
] }),
|
|
5405
|
-
loading && !hasCustomLoading && hasCompletedLoadRef.current && /* @__PURE__ */
|
|
5628
|
+
loading && !hasCustomLoading && hasCompletedLoadRef.current && /* @__PURE__ */ jsx8("div", { className: "rvg-refresh-loading", "aria-label": labels.refreshing, children: /* @__PURE__ */ jsx8(LoadingSpinnerIcon, {}) })
|
|
5406
5629
|
] });
|
|
5407
5630
|
}
|
|
5408
5631
|
var Table = forwardRef(TableInner);
|