twico-ui 1.18.2 → 1.19.1
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/CHANGELOG.md +14 -0
- package/dist/index.cjs +324 -265
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +12 -3
- package/dist/index.d.ts +12 -3
- package/dist/index.mjs +324 -265
- package/dist/index.mjs.map +1 -1
- package/llms.txt +3 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -7875,11 +7875,15 @@ function Tooltip({
|
|
|
7875
7875
|
placement = "top",
|
|
7876
7876
|
delay = 120,
|
|
7877
7877
|
className = "",
|
|
7878
|
+
open: openProp,
|
|
7879
|
+
anchor,
|
|
7878
7880
|
...rest
|
|
7879
7881
|
}) {
|
|
7880
7882
|
const __twcStyles = useScopedStyles("twc-tooltip-styles", TOOLTIP_CSS);
|
|
7883
|
+
const anchored = anchor !== void 0;
|
|
7881
7884
|
const id = React51__default.useId();
|
|
7882
|
-
const [
|
|
7885
|
+
const [showU, setShowU] = React51__default.useState(false);
|
|
7886
|
+
const show = anchored ? !!openProp : showU;
|
|
7883
7887
|
const [coords, setCoords] = React51__default.useState(null);
|
|
7884
7888
|
const timer = React51__default.useRef(null);
|
|
7885
7889
|
const closeTimer = React51__default.useRef(null);
|
|
@@ -7888,12 +7892,12 @@ function Tooltip({
|
|
|
7888
7892
|
const open = () => {
|
|
7889
7893
|
clearTimeout(closeTimer.current);
|
|
7890
7894
|
clearTimeout(timer.current);
|
|
7891
|
-
timer.current = setTimeout(() =>
|
|
7895
|
+
timer.current = setTimeout(() => setShowU(true), delay);
|
|
7892
7896
|
};
|
|
7893
7897
|
const close = () => {
|
|
7894
7898
|
clearTimeout(timer.current);
|
|
7895
7899
|
clearTimeout(closeTimer.current);
|
|
7896
|
-
closeTimer.current = setTimeout(() =>
|
|
7900
|
+
closeTimer.current = setTimeout(() => setShowU(false), 120);
|
|
7897
7901
|
};
|
|
7898
7902
|
const cancelClose = () => {
|
|
7899
7903
|
clearTimeout(closeTimer.current);
|
|
@@ -7903,8 +7907,8 @@ function Tooltip({
|
|
|
7903
7907
|
clearTimeout(closeTimer.current);
|
|
7904
7908
|
}, []);
|
|
7905
7909
|
const place = React51__default.useCallback(() => {
|
|
7906
|
-
const el = wrapRef.current;
|
|
7907
|
-
if (!el) return;
|
|
7910
|
+
const el = anchored ? anchor : wrapRef.current;
|
|
7911
|
+
if (!el || !el.getBoundingClientRect) return;
|
|
7908
7912
|
const r2 = el.getBoundingClientRect();
|
|
7909
7913
|
const cx = Math.round(r2.left + r2.width / 2), cy = Math.round(r2.top + r2.height / 2);
|
|
7910
7914
|
const vw = window.innerWidth, vh = window.innerHeight, gap = 8, margin = 8;
|
|
@@ -7936,7 +7940,7 @@ function Tooltip({
|
|
|
7936
7940
|
const c = clampX(cx);
|
|
7937
7941
|
setCoords({ ...base, left: c, bottom: Math.round(vh - r2.top + gap), arrowX: arrowX(c) });
|
|
7938
7942
|
}
|
|
7939
|
-
}, [placement]);
|
|
7943
|
+
}, [placement, anchored, anchor]);
|
|
7940
7944
|
React51__default.useEffect(() => {
|
|
7941
7945
|
place();
|
|
7942
7946
|
}, [place]);
|
|
@@ -7952,16 +7956,50 @@ function Tooltip({
|
|
|
7952
7956
|
};
|
|
7953
7957
|
}, [show, place]);
|
|
7954
7958
|
React51__default.useEffect(() => {
|
|
7955
|
-
if (!show) return;
|
|
7959
|
+
if (!show || anchored) return;
|
|
7956
7960
|
const onKeyDown = (e) => {
|
|
7957
7961
|
if (e.key === "Escape") {
|
|
7958
7962
|
clearTimeout(timer.current);
|
|
7959
|
-
|
|
7963
|
+
setShowU(false);
|
|
7960
7964
|
}
|
|
7961
7965
|
};
|
|
7962
7966
|
document.addEventListener("keydown", onKeyDown);
|
|
7963
7967
|
return () => document.removeEventListener("keydown", onKeyDown);
|
|
7964
|
-
}, [show]);
|
|
7968
|
+
}, [show, anchored]);
|
|
7969
|
+
const bubble = coords && (!anchored || anchor) ? createPortal(
|
|
7970
|
+
/* @__PURE__ */ jsxs(
|
|
7971
|
+
"span",
|
|
7972
|
+
{
|
|
7973
|
+
ref: tipRef,
|
|
7974
|
+
id,
|
|
7975
|
+
className: "twc-tooltip",
|
|
7976
|
+
"data-place": coords.place || placement,
|
|
7977
|
+
"data-show": show || void 0,
|
|
7978
|
+
role: "tooltip",
|
|
7979
|
+
"aria-hidden": show ? void 0 : "true",
|
|
7980
|
+
onMouseEnter: anchored ? void 0 : cancelClose,
|
|
7981
|
+
onMouseLeave: anchored ? void 0 : close,
|
|
7982
|
+
style: {
|
|
7983
|
+
position: "fixed",
|
|
7984
|
+
left: coords.left,
|
|
7985
|
+
right: coords.right,
|
|
7986
|
+
top: coords.top,
|
|
7987
|
+
bottom: coords.bottom,
|
|
7988
|
+
"--_tw-arrow-x": coords.arrowX != null ? `${coords.arrowX}px` : void 0,
|
|
7989
|
+
"--_tw-arrow-y": coords.arrowY != null ? `${coords.arrowY}px` : void 0
|
|
7990
|
+
},
|
|
7991
|
+
children: [
|
|
7992
|
+
label,
|
|
7993
|
+
/* @__PURE__ */ jsx("span", { className: "twc-tooltip__arrow", "aria-hidden": "true" })
|
|
7994
|
+
]
|
|
7995
|
+
}
|
|
7996
|
+
),
|
|
7997
|
+
document.body
|
|
7998
|
+
) : null;
|
|
7999
|
+
if (anchored) return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
8000
|
+
__twcStyles,
|
|
8001
|
+
bubble
|
|
8002
|
+
] });
|
|
7965
8003
|
const describedBy = show ? id : void 0;
|
|
7966
8004
|
const trigger = React51__default.isValidElement(children) && children.type !== React51__default.Fragment ? React51__default.cloneElement(children, {
|
|
7967
8005
|
"aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0
|
|
@@ -7979,36 +8017,7 @@ function Tooltip({
|
|
|
7979
8017
|
children: [
|
|
7980
8018
|
__twcStyles,
|
|
7981
8019
|
trigger,
|
|
7982
|
-
|
|
7983
|
-
/* @__PURE__ */ jsxs(
|
|
7984
|
-
"span",
|
|
7985
|
-
{
|
|
7986
|
-
ref: tipRef,
|
|
7987
|
-
id,
|
|
7988
|
-
className: "twc-tooltip",
|
|
7989
|
-
"data-place": coords.place || placement,
|
|
7990
|
-
"data-show": show || void 0,
|
|
7991
|
-
role: "tooltip",
|
|
7992
|
-
"aria-hidden": show ? void 0 : "true",
|
|
7993
|
-
onMouseEnter: cancelClose,
|
|
7994
|
-
onMouseLeave: close,
|
|
7995
|
-
style: {
|
|
7996
|
-
position: "fixed",
|
|
7997
|
-
left: coords.left,
|
|
7998
|
-
right: coords.right,
|
|
7999
|
-
top: coords.top,
|
|
8000
|
-
bottom: coords.bottom,
|
|
8001
|
-
"--_tw-arrow-x": coords.arrowX != null ? `${coords.arrowX}px` : void 0,
|
|
8002
|
-
"--_tw-arrow-y": coords.arrowY != null ? `${coords.arrowY}px` : void 0
|
|
8003
|
-
},
|
|
8004
|
-
children: [
|
|
8005
|
-
label,
|
|
8006
|
-
/* @__PURE__ */ jsx("span", { className: "twc-tooltip__arrow", "aria-hidden": "true" })
|
|
8007
|
-
]
|
|
8008
|
-
}
|
|
8009
|
-
),
|
|
8010
|
-
document.body
|
|
8011
|
-
) : null
|
|
8020
|
+
bubble
|
|
8012
8021
|
]
|
|
8013
8022
|
}
|
|
8014
8023
|
);
|
|
@@ -8193,14 +8202,16 @@ var DT_CSS = `
|
|
|
8193
8202
|
.twc-dt__resizer:focus-visible::after { background: var(--color-primary); }
|
|
8194
8203
|
.twc-dt[data-resizing="true"] { cursor: col-resize; user-select: none; }
|
|
8195
8204
|
|
|
8196
|
-
/* Column reorder (drag)
|
|
8197
|
-
|
|
8205
|
+
/* Column reorder (drag) \u2014 the grab affordance lives on the header grip only (#267, the column analog
|
|
8206
|
+
of #263), not the whole header, so a plain hover to read/sort/open the \u22EE menu isn't shown as
|
|
8207
|
+
draggable (the header stays a drag source for the mouse). */
|
|
8198
8208
|
.twc-dt__th[data-dragging="true"] { opacity: 0.45; }
|
|
8199
8209
|
.twc-dt__th[data-dropbefore="true"] .twc-dt__th-inner { box-shadow: inset 3px 0 0 var(--color-primary); }
|
|
8200
8210
|
.twc-dt__th[data-dropafter="true"] .twc-dt__th-inner { box-shadow: inset -3px 0 0 var(--color-primary); }
|
|
8201
|
-
.twc-dt__grip { display: inline-flex; color: var(--color-text-subtle); opacity: 0; margin-inline-end: -2px; transition: opacity var(--duration-fast); flex: none; }
|
|
8211
|
+
.twc-dt__grip { display: inline-flex; color: var(--color-text-subtle); opacity: 0; margin-inline-end: -2px; transition: opacity var(--duration-fast); flex: none; cursor: grab; }
|
|
8202
8212
|
.twc-dt__grip svg { width: 13px; height: 13px; }
|
|
8203
8213
|
.twc-dt__th:hover .twc-dt__grip { opacity: 0.5; }
|
|
8214
|
+
.twc-dt__grip:active, .twc-dt__th[data-dragging="true"] .twc-dt__grip { cursor: grabbing; }
|
|
8204
8215
|
|
|
8205
8216
|
/* Summary / aggregation footer row */
|
|
8206
8217
|
.twc-dt__table tfoot td { position: sticky; bottom: 0; z-index: 3; background: var(--color-surface-sunken);
|
|
@@ -9243,6 +9254,40 @@ function Datatable({
|
|
|
9243
9254
|
const scrollRef = React51__default.useRef(null);
|
|
9244
9255
|
const [scrollTop, setScrollTop] = React51__default.useState(0);
|
|
9245
9256
|
const [viewportH, setViewportH] = React51__default.useState(0);
|
|
9257
|
+
const [ovTip, setOvTip] = React51__default.useState(null);
|
|
9258
|
+
const ovTimer = React51__default.useRef(null);
|
|
9259
|
+
const hideOverflowTip = () => {
|
|
9260
|
+
clearTimeout(ovTimer.current);
|
|
9261
|
+
setOvTip((t) => t ? null : t);
|
|
9262
|
+
};
|
|
9263
|
+
const onOverflowOver = (e) => {
|
|
9264
|
+
const el = e.target.closest?.("[data-ovtext]");
|
|
9265
|
+
if (!el) return;
|
|
9266
|
+
if (ovTip && ovTip.anchor === el) return;
|
|
9267
|
+
clearTimeout(ovTimer.current);
|
|
9268
|
+
if (el.scrollWidth > el.clientWidth + 1) {
|
|
9269
|
+
const text = el.getAttribute("data-ovtext");
|
|
9270
|
+
ovTimer.current = setTimeout(() => setOvTip({ anchor: el, text }), 120);
|
|
9271
|
+
} else if (ovTip) setOvTip(null);
|
|
9272
|
+
};
|
|
9273
|
+
const onOverflowOut = (e) => {
|
|
9274
|
+
const el = e.target.closest?.("[data-ovtext]");
|
|
9275
|
+
if (el && !el.contains(e.relatedTarget)) hideOverflowTip();
|
|
9276
|
+
};
|
|
9277
|
+
const onOverflowFocus = (e) => {
|
|
9278
|
+
const el = e.target.closest?.("[data-ovtext]");
|
|
9279
|
+
if (el && el.scrollWidth > el.clientWidth + 1) setOvTip({ anchor: el, text: el.getAttribute("data-ovtext") });
|
|
9280
|
+
else hideOverflowTip();
|
|
9281
|
+
};
|
|
9282
|
+
React51__default.useEffect(() => () => clearTimeout(ovTimer.current), []);
|
|
9283
|
+
React51__default.useEffect(() => {
|
|
9284
|
+
if (!ovTip) return void 0;
|
|
9285
|
+
const onKey = (e) => {
|
|
9286
|
+
if (e.key === "Escape") setOvTip(null);
|
|
9287
|
+
};
|
|
9288
|
+
document.addEventListener("keydown", onKey);
|
|
9289
|
+
return () => document.removeEventListener("keydown", onKey);
|
|
9290
|
+
}, [ovTip]);
|
|
9246
9291
|
const [pivotOn, setPivotOn] = React51__default.useState(pivotMode);
|
|
9247
9292
|
const [aggConfig, setAggConfig] = React51__default.useState(() => {
|
|
9248
9293
|
const m = {};
|
|
@@ -10408,7 +10453,7 @@ function Datatable({
|
|
|
10408
10453
|
"data-pin": st.pin,
|
|
10409
10454
|
"data-pin-edge": st.edge,
|
|
10410
10455
|
style: { width: widthOf(c), ...st.style },
|
|
10411
|
-
|
|
10456
|
+
"data-ovtext": cellTitle,
|
|
10412
10457
|
onClick: selectionMode === "cell" ? (e) => handleCellClick(e, k, row, c) : void 0,
|
|
10413
10458
|
onFocus: () => setFocus((f) => f.r === ri && f.c === ci ? f : { r: ri, c: ci }),
|
|
10414
10459
|
onDoubleClick: editable ? () => beginEdit(k, c, row) : void 0,
|
|
@@ -10749,233 +10794,247 @@ function Datatable({
|
|
|
10749
10794
|
/* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__groupbar-clear", onClick: () => setGroupBy([]), children: "Clear all" })
|
|
10750
10795
|
] }) : null,
|
|
10751
10796
|
/* @__PURE__ */ jsx("div", { className: "twc-dt__sr", role: "status", "aria-live": "polite", children: reorderMsg }),
|
|
10752
|
-
pivotActive ? renderPivot() : /* @__PURE__ */ jsx(
|
|
10753
|
-
"
|
|
10797
|
+
pivotActive ? renderPivot() : /* @__PURE__ */ jsx(
|
|
10798
|
+
"div",
|
|
10754
10799
|
{
|
|
10755
|
-
className: "twc-
|
|
10756
|
-
style: {
|
|
10757
|
-
ref:
|
|
10758
|
-
|
|
10759
|
-
|
|
10760
|
-
|
|
10761
|
-
|
|
10762
|
-
|
|
10763
|
-
|
|
10764
|
-
|
|
10765
|
-
|
|
10766
|
-
|
|
10767
|
-
|
|
10768
|
-
|
|
10769
|
-
|
|
10770
|
-
|
|
10771
|
-
|
|
10772
|
-
|
|
10773
|
-
|
|
10774
|
-
|
|
10775
|
-
|
|
10776
|
-
|
|
10777
|
-
|
|
10778
|
-
|
|
10779
|
-
|
|
10780
|
-
|
|
10800
|
+
className: "twc-dt__scroll",
|
|
10801
|
+
style: { maxHeight: height },
|
|
10802
|
+
ref: scrollRef,
|
|
10803
|
+
onScroll: virtualizing ? onScrollVirtual : void 0,
|
|
10804
|
+
onMouseOver: onOverflowOver,
|
|
10805
|
+
onMouseOut: onOverflowOut,
|
|
10806
|
+
onFocus: onOverflowFocus,
|
|
10807
|
+
onBlur: hideOverflowTip,
|
|
10808
|
+
children: /* @__PURE__ */ jsxs(
|
|
10809
|
+
"table",
|
|
10810
|
+
{
|
|
10811
|
+
className: "twc-dt__table",
|
|
10812
|
+
style: { width: tableMinWidth, minWidth: "100%" },
|
|
10813
|
+
ref: gridRef,
|
|
10814
|
+
role: "grid",
|
|
10815
|
+
"aria-label": ariaLabelAttr || ariaLabel,
|
|
10816
|
+
"aria-rowcount": totalRows + 1,
|
|
10817
|
+
"aria-colcount": ordered.length + (checkboxSelection ? 1 : 0),
|
|
10818
|
+
"aria-busy": loading || void 0,
|
|
10819
|
+
onKeyDown: onGridKeyDown,
|
|
10820
|
+
children: [
|
|
10821
|
+
/* @__PURE__ */ jsx("thead", { ref: theadRef, children: /* @__PURE__ */ jsxs("tr", { role: "row", "aria-rowindex": 1, children: [
|
|
10822
|
+
checkboxSelection ? /* @__PURE__ */ jsx("th", { className: "twc-dt__th", role: "columnheader", "aria-label": "Select", "data-pin": "left", "data-pin-edge": pins.left.length || showRowNum ? void 0 : "left", style: { insetInlineStart: 0, width: CHK_W, minWidth: CHK_W }, children: /* @__PURE__ */ jsx("div", { className: "twc-dt__th-inner", style: { justifyContent: "center", padding: 0 }, children: /* @__PURE__ */ jsx(
|
|
10823
|
+
"span",
|
|
10824
|
+
{
|
|
10825
|
+
className: "twc-dt__check",
|
|
10826
|
+
"data-checked": allSel || void 0,
|
|
10827
|
+
"data-indeterminate": !allSel && someSel || void 0,
|
|
10828
|
+
onClick: toggleAll,
|
|
10829
|
+
role: "checkbox",
|
|
10830
|
+
"aria-checked": allSel ? true : someSel ? "mixed" : false,
|
|
10831
|
+
"aria-label": "Select all rows",
|
|
10832
|
+
tabIndex: 0,
|
|
10833
|
+
onKeyDown: (e) => {
|
|
10834
|
+
if (e.key === " " || e.key === "Enter") {
|
|
10835
|
+
e.preventDefault();
|
|
10836
|
+
toggleAll();
|
|
10837
|
+
}
|
|
10838
|
+
},
|
|
10839
|
+
children: /* @__PURE__ */ jsx(Svg, { d: allSel ? I.check : I.minus })
|
|
10781
10840
|
}
|
|
10782
|
-
},
|
|
10783
|
-
|
|
10784
|
-
|
|
10785
|
-
|
|
10786
|
-
|
|
10787
|
-
|
|
10788
|
-
|
|
10789
|
-
|
|
10790
|
-
|
|
10791
|
-
|
|
10792
|
-
|
|
10793
|
-
|
|
10794
|
-
|
|
10795
|
-
|
|
10796
|
-
|
|
10797
|
-
|
|
10798
|
-
|
|
10799
|
-
|
|
10800
|
-
|
|
10801
|
-
|
|
10802
|
-
|
|
10803
|
-
|
|
10804
|
-
|
|
10805
|
-
|
|
10806
|
-
|
|
10807
|
-
|
|
10808
|
-
|
|
10809
|
-
|
|
10810
|
-
|
|
10811
|
-
|
|
10812
|
-
|
|
10813
|
-
|
|
10814
|
-
|
|
10815
|
-
|
|
10816
|
-
|
|
10817
|
-
|
|
10818
|
-
|
|
10819
|
-
|
|
10820
|
-
|
|
10821
|
-
|
|
10822
|
-
|
|
10823
|
-
|
|
10824
|
-
|
|
10825
|
-
|
|
10826
|
-
|
|
10827
|
-
|
|
10828
|
-
|
|
10829
|
-
|
|
10830
|
-
|
|
10831
|
-
|
|
10832
|
-
|
|
10833
|
-
|
|
10834
|
-
|
|
10835
|
-
|
|
10836
|
-
|
|
10837
|
-
|
|
10838
|
-
|
|
10839
|
-
|
|
10840
|
-
|
|
10841
|
-
|
|
10842
|
-
|
|
10843
|
-
|
|
10844
|
-
|
|
10845
|
-
|
|
10846
|
-
|
|
10847
|
-
|
|
10848
|
-
|
|
10849
|
-
|
|
10850
|
-
|
|
10851
|
-
|
|
10852
|
-
|
|
10853
|
-
|
|
10854
|
-
|
|
10855
|
-
|
|
10856
|
-
|
|
10857
|
-
|
|
10858
|
-
|
|
10859
|
-
|
|
10860
|
-
|
|
10861
|
-
|
|
10862
|
-
|
|
10863
|
-
|
|
10864
|
-
|
|
10865
|
-
|
|
10866
|
-
|
|
10841
|
+
) }) }) : null,
|
|
10842
|
+
showRowNum ? /* @__PURE__ */ jsx("th", { className: "twc-dt__th twc-dt__rownum", role: "columnheader", "aria-label": "Row number", "data-pin": "left", "data-pin-edge": pins.left.length ? void 0 : "left", style: { insetInlineStart: numLeft, width: NUM_W, minWidth: NUM_W }, children: /* @__PURE__ */ jsxs("div", { className: "twc-dt__th-inner", children: [
|
|
10843
|
+
/* @__PURE__ */ jsx("span", { className: "twc-dt__th-label", style: { flex: "none", cursor: "default" }, children: "#" }),
|
|
10844
|
+
/* @__PURE__ */ jsx(
|
|
10845
|
+
"button",
|
|
10846
|
+
{
|
|
10847
|
+
type: "button",
|
|
10848
|
+
className: "twc-dt__menu-btn",
|
|
10849
|
+
"aria-label": "Row number column menu",
|
|
10850
|
+
"aria-haspopup": "menu",
|
|
10851
|
+
"aria-expanded": colMenu?.field === "__rownum__" || void 0,
|
|
10852
|
+
onClick: (e) => {
|
|
10853
|
+
e.stopPropagation();
|
|
10854
|
+
menuTriggerRef.current = e.currentTarget;
|
|
10855
|
+
setPanel(null);
|
|
10856
|
+
closePanel();
|
|
10857
|
+
setRowMenu(null);
|
|
10858
|
+
closeRowMenu();
|
|
10859
|
+
setExportOpen(false);
|
|
10860
|
+
closeExport();
|
|
10861
|
+
setColMenu({ field: "__rownum__" });
|
|
10862
|
+
openMenu(e.currentTarget, "right", 180);
|
|
10863
|
+
},
|
|
10864
|
+
children: /* @__PURE__ */ jsx(Svg, { d: I.more })
|
|
10865
|
+
}
|
|
10866
|
+
)
|
|
10867
|
+
] }) }) : null,
|
|
10868
|
+
ordered.map((c) => {
|
|
10869
|
+
const st = stickyOf(c.field);
|
|
10870
|
+
const sorted = sort && sort.field === c.field ? sort.dir : void 0;
|
|
10871
|
+
const w = widthOf(c);
|
|
10872
|
+
const reorderable = !disableColumnReorder && st.pin == null && c.type !== "actions" && c.reorderable !== false;
|
|
10873
|
+
const resizable = !disableColumnResize && c.resizable !== false;
|
|
10874
|
+
const hasMenu = !c.disableColumnMenu && (c.sortable || c.filterable || c.pinnable || c.hideable);
|
|
10875
|
+
return /* @__PURE__ */ jsxs(
|
|
10876
|
+
"th",
|
|
10877
|
+
{
|
|
10878
|
+
className: "twc-dt__th",
|
|
10879
|
+
role: "columnheader",
|
|
10880
|
+
scope: "col",
|
|
10881
|
+
"aria-sort": sorted ? sorted === "asc" ? "ascending" : "descending" : c.sortable ? "none" : void 0,
|
|
10882
|
+
"data-num": c.type === "number" || void 0,
|
|
10883
|
+
"data-actions-col": c.type === "actions" || void 0,
|
|
10884
|
+
"data-sorted": sorted,
|
|
10885
|
+
"data-pin": st.pin,
|
|
10886
|
+
"data-pin-edge": st.edge,
|
|
10887
|
+
"data-dragging": drag.from === c.field || void 0,
|
|
10888
|
+
"data-dropbefore": drag.over === c.field && !drag.after || void 0,
|
|
10889
|
+
"data-dropafter": drag.over === c.field && drag.after || void 0,
|
|
10890
|
+
style: { width: w, minWidth: w, ...st.style },
|
|
10891
|
+
onDragOver: reorderable && drag.from ? (e) => {
|
|
10892
|
+
e.preventDefault();
|
|
10893
|
+
const r2 = e.currentTarget.getBoundingClientRect();
|
|
10894
|
+
const after = e.clientX > r2.left + r2.width / 2;
|
|
10895
|
+
setDrag((d) => d.over === c.field && d.after === after ? d : { ...d, over: c.field, after });
|
|
10896
|
+
} : void 0,
|
|
10897
|
+
onDrop: reorderable && drag.from ? (e) => {
|
|
10898
|
+
e.preventDefault();
|
|
10899
|
+
onColDrop(c.field);
|
|
10900
|
+
} : void 0,
|
|
10901
|
+
children: [
|
|
10902
|
+
/* @__PURE__ */ jsxs("div", { className: "twc-dt__th-inner", children: [
|
|
10903
|
+
/* @__PURE__ */ jsxs(
|
|
10904
|
+
"span",
|
|
10905
|
+
{
|
|
10906
|
+
className: "twc-dt__th-label",
|
|
10907
|
+
role: c.sortable ? "button" : void 0,
|
|
10908
|
+
tabIndex: c.sortable ? 0 : void 0,
|
|
10909
|
+
"data-ovtext": typeof c.headerName === "string" ? c.headerName : void 0,
|
|
10910
|
+
"aria-label": c.sortable ? `${c.headerName}, sort` : void 0,
|
|
10911
|
+
draggable: reorderable || void 0,
|
|
10912
|
+
onDragStart: reorderable ? (e) => {
|
|
10913
|
+
setDrag({ from: c.field, over: null, after: false });
|
|
10914
|
+
e.dataTransfer.effectAllowed = "move";
|
|
10915
|
+
e.dataTransfer.setData("text/plain", c.field);
|
|
10916
|
+
} : void 0,
|
|
10917
|
+
onDragEnd: reorderable ? () => setDrag({ from: null, over: null, after: false }) : void 0,
|
|
10918
|
+
onClick: () => c.sortable && cycleSort(c.field),
|
|
10919
|
+
onKeyDown: c.sortable ? (e) => {
|
|
10920
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
10921
|
+
e.preventDefault();
|
|
10922
|
+
cycleSort(c.field);
|
|
10923
|
+
}
|
|
10924
|
+
} : void 0,
|
|
10925
|
+
children: [
|
|
10926
|
+
reorderable ? /* @__PURE__ */ jsx("span", { className: "twc-dt__grip", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Svg, { d: I.grip }) }) : null,
|
|
10927
|
+
filteredFields.has(c.field) ? /* @__PURE__ */ jsx("span", { className: "twc-dt__filterdot" }) : null,
|
|
10928
|
+
c.headerName,
|
|
10929
|
+
c.sortable ? /* @__PURE__ */ jsx("span", { className: "twc-dt__sort", children: /* @__PURE__ */ jsx(Svg, { d: I.arrow }) }) : null
|
|
10930
|
+
]
|
|
10867
10931
|
}
|
|
10868
|
-
|
|
10869
|
-
|
|
10870
|
-
|
|
10871
|
-
|
|
10872
|
-
|
|
10873
|
-
|
|
10874
|
-
|
|
10875
|
-
|
|
10876
|
-
|
|
10877
|
-
|
|
10878
|
-
|
|
10879
|
-
|
|
10880
|
-
|
|
10881
|
-
|
|
10882
|
-
|
|
10883
|
-
|
|
10884
|
-
|
|
10885
|
-
|
|
10886
|
-
|
|
10887
|
-
|
|
10888
|
-
|
|
10889
|
-
|
|
10890
|
-
|
|
10891
|
-
|
|
10892
|
-
|
|
10893
|
-
|
|
10894
|
-
|
|
10895
|
-
|
|
10896
|
-
|
|
10897
|
-
|
|
10898
|
-
|
|
10899
|
-
|
|
10900
|
-
|
|
10901
|
-
|
|
10902
|
-
|
|
10903
|
-
|
|
10904
|
-
|
|
10905
|
-
|
|
10906
|
-
|
|
10907
|
-
|
|
10908
|
-
|
|
10909
|
-
|
|
10910
|
-
|
|
10911
|
-
|
|
10912
|
-
|
|
10913
|
-
|
|
10914
|
-
|
|
10915
|
-
|
|
10916
|
-
|
|
10917
|
-
|
|
10918
|
-
|
|
10919
|
-
|
|
10920
|
-
|
|
10921
|
-
|
|
10922
|
-
|
|
10923
|
-
|
|
10924
|
-
|
|
10932
|
+
),
|
|
10933
|
+
hasMenu ? /* @__PURE__ */ jsx(
|
|
10934
|
+
"button",
|
|
10935
|
+
{
|
|
10936
|
+
type: "button",
|
|
10937
|
+
className: "twc-dt__menu-btn",
|
|
10938
|
+
"aria-label": "Column menu",
|
|
10939
|
+
"aria-haspopup": "menu",
|
|
10940
|
+
"aria-expanded": colMenu?.field === c.field || void 0,
|
|
10941
|
+
onClick: (e) => {
|
|
10942
|
+
e.stopPropagation();
|
|
10943
|
+
menuTriggerRef.current = e.currentTarget;
|
|
10944
|
+
setPanel(null);
|
|
10945
|
+
closePanel();
|
|
10946
|
+
setRowMenu(null);
|
|
10947
|
+
closeRowMenu();
|
|
10948
|
+
setExportOpen(false);
|
|
10949
|
+
closeExport();
|
|
10950
|
+
setColMenu({ field: c.field });
|
|
10951
|
+
openMenu(e.currentTarget, "right", 230);
|
|
10952
|
+
},
|
|
10953
|
+
children: /* @__PURE__ */ jsx(Svg, { d: I.more })
|
|
10954
|
+
}
|
|
10955
|
+
) : null
|
|
10956
|
+
] }),
|
|
10957
|
+
resizable ? /* @__PURE__ */ jsx(
|
|
10958
|
+
"span",
|
|
10959
|
+
{
|
|
10960
|
+
className: "twc-dt__resizer",
|
|
10961
|
+
"data-active": resizing || void 0,
|
|
10962
|
+
role: "separator",
|
|
10963
|
+
"aria-orientation": "vertical",
|
|
10964
|
+
"aria-label": `Resize ${c.headerName} column (double-click to fit content)`,
|
|
10965
|
+
"aria-valuenow": w,
|
|
10966
|
+
"aria-valuemin": 72,
|
|
10967
|
+
tabIndex: 0,
|
|
10968
|
+
onPointerDown: (e) => startResize(e, c.field),
|
|
10969
|
+
onClick: (e) => e.stopPropagation(),
|
|
10970
|
+
onDoubleClick: (e) => {
|
|
10971
|
+
e.preventDefault();
|
|
10972
|
+
e.stopPropagation();
|
|
10973
|
+
autoFitColumn(c.field, e.currentTarget.closest("th"));
|
|
10974
|
+
},
|
|
10975
|
+
onKeyDown: (e) => {
|
|
10976
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
10977
|
+
e.preventDefault();
|
|
10978
|
+
e.stopPropagation();
|
|
10979
|
+
autoFitColumn(c.field, e.currentTarget.closest("th"));
|
|
10980
|
+
return;
|
|
10981
|
+
}
|
|
10982
|
+
if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
|
|
10983
|
+
e.preventDefault();
|
|
10984
|
+
e.stopPropagation();
|
|
10985
|
+
const delta = e.key === "ArrowRight" ? 10 : -10;
|
|
10986
|
+
setWidths((m) => ({ ...m, [c.field]: Math.max(72, (m[c.field] ?? intrinsicWidth(c)) + delta) }));
|
|
10987
|
+
},
|
|
10988
|
+
title: "Drag to resize \xB7 double-click to fit content"
|
|
10925
10989
|
}
|
|
10926
|
-
|
|
10927
|
-
|
|
10928
|
-
|
|
10929
|
-
|
|
10930
|
-
|
|
10931
|
-
|
|
10932
|
-
|
|
10933
|
-
|
|
10934
|
-
|
|
10935
|
-
|
|
10936
|
-
|
|
10937
|
-
|
|
10938
|
-
|
|
10939
|
-
|
|
10940
|
-
|
|
10941
|
-
|
|
10942
|
-
|
|
10943
|
-
|
|
10944
|
-
|
|
10945
|
-
|
|
10946
|
-
|
|
10947
|
-
|
|
10948
|
-
|
|
10949
|
-
|
|
10950
|
-
|
|
10951
|
-
|
|
10952
|
-
|
|
10953
|
-
|
|
10954
|
-
|
|
10955
|
-
|
|
10956
|
-
|
|
10957
|
-
|
|
10958
|
-
|
|
10959
|
-
|
|
10960
|
-
|
|
10961
|
-
|
|
10962
|
-
|
|
10963
|
-
|
|
10964
|
-
|
|
10965
|
-
|
|
10966
|
-
|
|
10967
|
-
|
|
10968
|
-
|
|
10969
|
-
|
|
10970
|
-
|
|
10971
|
-
typeof aggOf(c) === "string" ? /* @__PURE__ */ jsx("span", { className: "twc-dt__agg-label", children: aggLabels[aggOf(c)] }) : null,
|
|
10972
|
-
/* @__PURE__ */ jsx("span", { className: "twc-dt__agg-val", children: display })
|
|
10973
|
-
] }) }, c.field);
|
|
10974
|
-
})
|
|
10975
|
-
] }) }) : null
|
|
10976
|
-
]
|
|
10990
|
+
) : null
|
|
10991
|
+
]
|
|
10992
|
+
},
|
|
10993
|
+
c.field
|
|
10994
|
+
);
|
|
10995
|
+
})
|
|
10996
|
+
] }) }),
|
|
10997
|
+
/* @__PURE__ */ jsx("tbody", { children: loading ? Array.from({ length: paginated ? Math.min(sizeVal, 8) : 8 }).map((_, ri) => /* @__PURE__ */ jsxs("tr", { className: "twc-dt__row", role: "row", children: [
|
|
10998
|
+
checkboxSelection ? /* @__PURE__ */ jsx("td", { className: "twc-dt__td", role: "gridcell", "data-pin": "left", style: { insetInlineStart: 0, width: CHK_W }, children: /* @__PURE__ */ jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": "18px", height: 18, borderRadius: 4 } }) }) : null,
|
|
10999
|
+
showRowNum ? /* @__PURE__ */ jsx("td", { className: "twc-dt__td twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", style: { insetInlineStart: numLeft, width: NUM_W }, children: /* @__PURE__ */ jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": "16px", height: 14, borderRadius: 4 } }) }) : null,
|
|
11000
|
+
ordered.map((c, ci) => {
|
|
11001
|
+
const st = stickyOf(c.field);
|
|
11002
|
+
return /* @__PURE__ */ jsx("td", { className: "twc-dt__td", role: "gridcell", "data-num": c.type === "number" || void 0, "data-pin": st.pin, "data-pin-edge": st.edge, style: { width: widthOf(c), ...st.style }, children: /* @__PURE__ */ jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": `${45 + (ri * 13 + ci * 29) % 45}%` } }) }, c.field);
|
|
11003
|
+
})
|
|
11004
|
+
] }, ri)) : (displayItems ? displayItems.length === 0 : paged.length === 0) ? (
|
|
11005
|
+
// #121: customizable, filter-aware empty state. #122: grid roles on the empty row.
|
|
11006
|
+
/* @__PURE__ */ jsx("tr", { role: "row", "aria-rowindex": 2, children: /* @__PURE__ */ jsx("td", { className: "twc-dt__td", role: "gridcell", colSpan: totalCols, style: { maxWidth: "none" }, children: /* @__PURE__ */ jsx("div", { className: "twc-dt__empty", children: renderEmpty ? renderEmpty() : emptyMessage ?? (filters.length > 0 || quick.trim() !== "" ? "No rows match your filters" : "No rows") }) }) })
|
|
11007
|
+
) : displayItems ? (() => {
|
|
11008
|
+
let li = -1;
|
|
11009
|
+
return displayItems.map((item) => item.kind === "group" ? renderGroupRow(item) : renderLeaf(item.row, ++li));
|
|
11010
|
+
})() : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
11011
|
+
pinnedTopRows.map((row) => renderLeaf(row, keyIndex.get(keyOf(row)), "top")),
|
|
11012
|
+
vWindow ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
11013
|
+
vWindow.padTop > 0 ? /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", className: "twc-dt__vspacer", children: /* @__PURE__ */ jsx("td", { colSpan: totalCols, style: { height: vWindow.padTop, padding: 0, border: "none", maxWidth: "none" } }) }) : null,
|
|
11014
|
+
middleRows.slice(vWindow.start, vWindow.end).map((row, i) => renderLeaf(row, keyIndex.get(keyOf(row)), void 0, vWindow.start + i)),
|
|
11015
|
+
vWindow.padBottom > 0 ? /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", className: "twc-dt__vspacer", children: /* @__PURE__ */ jsx("td", { colSpan: totalCols, style: { height: vWindow.padBottom, padding: 0, border: "none", maxWidth: "none" } }) }) : null
|
|
11016
|
+
] }) : middleRows.map((row, i) => renderLeaf(row, keyIndex.get(keyOf(row)), void 0, i)),
|
|
11017
|
+
pinnedBottomRows.map((row) => renderLeaf(row, keyIndex.get(keyOf(row)), "bottom"))
|
|
11018
|
+
] }) }),
|
|
11019
|
+
hasAggregation && aggOn && !loading && paged.length > 0 ? /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsxs("tr", { role: "row", children: [
|
|
11020
|
+
checkboxSelection ? /* @__PURE__ */ jsx("td", { role: "gridcell", "data-pin": "left", "data-pin-edge": pins.left.length || showRowNum ? void 0 : "left", style: { insetInlineStart: 0, width: CHK_W } }) : null,
|
|
11021
|
+
showRowNum ? /* @__PURE__ */ jsx("td", { className: "twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", "data-pin-edge": pins.left.length ? void 0 : "left", style: { insetInlineStart: numLeft, width: NUM_W } }) : null,
|
|
11022
|
+
ordered.map((c) => {
|
|
11023
|
+
const st = stickyOf(c.field);
|
|
11024
|
+
const v = aggregate(c);
|
|
11025
|
+
const display = v == null ? null : c.aggregationFormatter ? c.aggregationFormatter(v) : c.valueFormatter ? c.valueFormatter(v, null) : typeof v === "number" ? v.toLocaleString() : v;
|
|
11026
|
+
return /* @__PURE__ */ jsx("td", { role: "gridcell", "data-num": c.type === "number" || void 0, "data-pin": st.pin, "data-pin-edge": st.edge, style: { width: widthOf(c), ...st.style }, children: v == null ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
11027
|
+
typeof aggOf(c) === "string" ? /* @__PURE__ */ jsx("span", { className: "twc-dt__agg-label", children: aggLabels[aggOf(c)] }) : null,
|
|
11028
|
+
/* @__PURE__ */ jsx("span", { className: "twc-dt__agg-val", children: display })
|
|
11029
|
+
] }) }, c.field);
|
|
11030
|
+
})
|
|
11031
|
+
] }) }) : null
|
|
11032
|
+
]
|
|
11033
|
+
}
|
|
11034
|
+
)
|
|
10977
11035
|
}
|
|
10978
|
-
)
|
|
11036
|
+
),
|
|
11037
|
+
/* @__PURE__ */ jsx(Tooltip, { anchor: ovTip ? ovTip.anchor : null, open: !!ovTip, label: ovTip ? ovTip.text : null, placement: "top" }),
|
|
10979
11038
|
!pivotActive ? /* @__PURE__ */ jsxs("div", { className: "twc-dt__footer", children: [
|
|
10980
11039
|
/* @__PURE__ */ jsxs("div", { className: "twc-dt__footer-row", "data-bottom": "true", children: [
|
|
10981
11040
|
/* @__PURE__ */ jsx("span", { className: "twc-dt__status", children: loading ? "Loading\u2026" : (() => {
|