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.cjs
CHANGED
|
@@ -7896,11 +7896,15 @@ function Tooltip({
|
|
|
7896
7896
|
placement = "top",
|
|
7897
7897
|
delay = 120,
|
|
7898
7898
|
className = "",
|
|
7899
|
+
open: openProp,
|
|
7900
|
+
anchor,
|
|
7899
7901
|
...rest
|
|
7900
7902
|
}) {
|
|
7901
7903
|
const __twcStyles = useScopedStyles("twc-tooltip-styles", TOOLTIP_CSS);
|
|
7904
|
+
const anchored = anchor !== void 0;
|
|
7902
7905
|
const id = React51__namespace.default.useId();
|
|
7903
|
-
const [
|
|
7906
|
+
const [showU, setShowU] = React51__namespace.default.useState(false);
|
|
7907
|
+
const show = anchored ? !!openProp : showU;
|
|
7904
7908
|
const [coords, setCoords] = React51__namespace.default.useState(null);
|
|
7905
7909
|
const timer = React51__namespace.default.useRef(null);
|
|
7906
7910
|
const closeTimer = React51__namespace.default.useRef(null);
|
|
@@ -7909,12 +7913,12 @@ function Tooltip({
|
|
|
7909
7913
|
const open = () => {
|
|
7910
7914
|
clearTimeout(closeTimer.current);
|
|
7911
7915
|
clearTimeout(timer.current);
|
|
7912
|
-
timer.current = setTimeout(() =>
|
|
7916
|
+
timer.current = setTimeout(() => setShowU(true), delay);
|
|
7913
7917
|
};
|
|
7914
7918
|
const close = () => {
|
|
7915
7919
|
clearTimeout(timer.current);
|
|
7916
7920
|
clearTimeout(closeTimer.current);
|
|
7917
|
-
closeTimer.current = setTimeout(() =>
|
|
7921
|
+
closeTimer.current = setTimeout(() => setShowU(false), 120);
|
|
7918
7922
|
};
|
|
7919
7923
|
const cancelClose = () => {
|
|
7920
7924
|
clearTimeout(closeTimer.current);
|
|
@@ -7924,8 +7928,8 @@ function Tooltip({
|
|
|
7924
7928
|
clearTimeout(closeTimer.current);
|
|
7925
7929
|
}, []);
|
|
7926
7930
|
const place = React51__namespace.default.useCallback(() => {
|
|
7927
|
-
const el = wrapRef.current;
|
|
7928
|
-
if (!el) return;
|
|
7931
|
+
const el = anchored ? anchor : wrapRef.current;
|
|
7932
|
+
if (!el || !el.getBoundingClientRect) return;
|
|
7929
7933
|
const r2 = el.getBoundingClientRect();
|
|
7930
7934
|
const cx = Math.round(r2.left + r2.width / 2), cy = Math.round(r2.top + r2.height / 2);
|
|
7931
7935
|
const vw = window.innerWidth, vh = window.innerHeight, gap = 8, margin = 8;
|
|
@@ -7957,7 +7961,7 @@ function Tooltip({
|
|
|
7957
7961
|
const c = clampX(cx);
|
|
7958
7962
|
setCoords({ ...base, left: c, bottom: Math.round(vh - r2.top + gap), arrowX: arrowX(c) });
|
|
7959
7963
|
}
|
|
7960
|
-
}, [placement]);
|
|
7964
|
+
}, [placement, anchored, anchor]);
|
|
7961
7965
|
React51__namespace.default.useEffect(() => {
|
|
7962
7966
|
place();
|
|
7963
7967
|
}, [place]);
|
|
@@ -7973,16 +7977,50 @@ function Tooltip({
|
|
|
7973
7977
|
};
|
|
7974
7978
|
}, [show, place]);
|
|
7975
7979
|
React51__namespace.default.useEffect(() => {
|
|
7976
|
-
if (!show) return;
|
|
7980
|
+
if (!show || anchored) return;
|
|
7977
7981
|
const onKeyDown = (e) => {
|
|
7978
7982
|
if (e.key === "Escape") {
|
|
7979
7983
|
clearTimeout(timer.current);
|
|
7980
|
-
|
|
7984
|
+
setShowU(false);
|
|
7981
7985
|
}
|
|
7982
7986
|
};
|
|
7983
7987
|
document.addEventListener("keydown", onKeyDown);
|
|
7984
7988
|
return () => document.removeEventListener("keydown", onKeyDown);
|
|
7985
|
-
}, [show]);
|
|
7989
|
+
}, [show, anchored]);
|
|
7990
|
+
const bubble = coords && (!anchored || anchor) ? reactDom.createPortal(
|
|
7991
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
7992
|
+
"span",
|
|
7993
|
+
{
|
|
7994
|
+
ref: tipRef,
|
|
7995
|
+
id,
|
|
7996
|
+
className: "twc-tooltip",
|
|
7997
|
+
"data-place": coords.place || placement,
|
|
7998
|
+
"data-show": show || void 0,
|
|
7999
|
+
role: "tooltip",
|
|
8000
|
+
"aria-hidden": show ? void 0 : "true",
|
|
8001
|
+
onMouseEnter: anchored ? void 0 : cancelClose,
|
|
8002
|
+
onMouseLeave: anchored ? void 0 : close,
|
|
8003
|
+
style: {
|
|
8004
|
+
position: "fixed",
|
|
8005
|
+
left: coords.left,
|
|
8006
|
+
right: coords.right,
|
|
8007
|
+
top: coords.top,
|
|
8008
|
+
bottom: coords.bottom,
|
|
8009
|
+
"--_tw-arrow-x": coords.arrowX != null ? `${coords.arrowX}px` : void 0,
|
|
8010
|
+
"--_tw-arrow-y": coords.arrowY != null ? `${coords.arrowY}px` : void 0
|
|
8011
|
+
},
|
|
8012
|
+
children: [
|
|
8013
|
+
label,
|
|
8014
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-tooltip__arrow", "aria-hidden": "true" })
|
|
8015
|
+
]
|
|
8016
|
+
}
|
|
8017
|
+
),
|
|
8018
|
+
document.body
|
|
8019
|
+
) : null;
|
|
8020
|
+
if (anchored) return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
8021
|
+
__twcStyles,
|
|
8022
|
+
bubble
|
|
8023
|
+
] });
|
|
7986
8024
|
const describedBy = show ? id : void 0;
|
|
7987
8025
|
const trigger = React51__namespace.default.isValidElement(children) && children.type !== React51__namespace.default.Fragment ? React51__namespace.default.cloneElement(children, {
|
|
7988
8026
|
"aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0
|
|
@@ -8000,36 +8038,7 @@ function Tooltip({
|
|
|
8000
8038
|
children: [
|
|
8001
8039
|
__twcStyles,
|
|
8002
8040
|
trigger,
|
|
8003
|
-
|
|
8004
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
8005
|
-
"span",
|
|
8006
|
-
{
|
|
8007
|
-
ref: tipRef,
|
|
8008
|
-
id,
|
|
8009
|
-
className: "twc-tooltip",
|
|
8010
|
-
"data-place": coords.place || placement,
|
|
8011
|
-
"data-show": show || void 0,
|
|
8012
|
-
role: "tooltip",
|
|
8013
|
-
"aria-hidden": show ? void 0 : "true",
|
|
8014
|
-
onMouseEnter: cancelClose,
|
|
8015
|
-
onMouseLeave: close,
|
|
8016
|
-
style: {
|
|
8017
|
-
position: "fixed",
|
|
8018
|
-
left: coords.left,
|
|
8019
|
-
right: coords.right,
|
|
8020
|
-
top: coords.top,
|
|
8021
|
-
bottom: coords.bottom,
|
|
8022
|
-
"--_tw-arrow-x": coords.arrowX != null ? `${coords.arrowX}px` : void 0,
|
|
8023
|
-
"--_tw-arrow-y": coords.arrowY != null ? `${coords.arrowY}px` : void 0
|
|
8024
|
-
},
|
|
8025
|
-
children: [
|
|
8026
|
-
label,
|
|
8027
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-tooltip__arrow", "aria-hidden": "true" })
|
|
8028
|
-
]
|
|
8029
|
-
}
|
|
8030
|
-
),
|
|
8031
|
-
document.body
|
|
8032
|
-
) : null
|
|
8041
|
+
bubble
|
|
8033
8042
|
]
|
|
8034
8043
|
}
|
|
8035
8044
|
);
|
|
@@ -8214,14 +8223,16 @@ var DT_CSS = `
|
|
|
8214
8223
|
.twc-dt__resizer:focus-visible::after { background: var(--color-primary); }
|
|
8215
8224
|
.twc-dt[data-resizing="true"] { cursor: col-resize; user-select: none; }
|
|
8216
8225
|
|
|
8217
|
-
/* Column reorder (drag)
|
|
8218
|
-
|
|
8226
|
+
/* Column reorder (drag) \u2014 the grab affordance lives on the header grip only (#267, the column analog
|
|
8227
|
+
of #263), not the whole header, so a plain hover to read/sort/open the \u22EE menu isn't shown as
|
|
8228
|
+
draggable (the header stays a drag source for the mouse). */
|
|
8219
8229
|
.twc-dt__th[data-dragging="true"] { opacity: 0.45; }
|
|
8220
8230
|
.twc-dt__th[data-dropbefore="true"] .twc-dt__th-inner { box-shadow: inset 3px 0 0 var(--color-primary); }
|
|
8221
8231
|
.twc-dt__th[data-dropafter="true"] .twc-dt__th-inner { box-shadow: inset -3px 0 0 var(--color-primary); }
|
|
8222
|
-
.twc-dt__grip { display: inline-flex; color: var(--color-text-subtle); opacity: 0; margin-inline-end: -2px; transition: opacity var(--duration-fast); flex: none; }
|
|
8232
|
+
.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; }
|
|
8223
8233
|
.twc-dt__grip svg { width: 13px; height: 13px; }
|
|
8224
8234
|
.twc-dt__th:hover .twc-dt__grip { opacity: 0.5; }
|
|
8235
|
+
.twc-dt__grip:active, .twc-dt__th[data-dragging="true"] .twc-dt__grip { cursor: grabbing; }
|
|
8225
8236
|
|
|
8226
8237
|
/* Summary / aggregation footer row */
|
|
8227
8238
|
.twc-dt__table tfoot td { position: sticky; bottom: 0; z-index: 3; background: var(--color-surface-sunken);
|
|
@@ -9264,6 +9275,40 @@ function Datatable({
|
|
|
9264
9275
|
const scrollRef = React51__namespace.default.useRef(null);
|
|
9265
9276
|
const [scrollTop, setScrollTop] = React51__namespace.default.useState(0);
|
|
9266
9277
|
const [viewportH, setViewportH] = React51__namespace.default.useState(0);
|
|
9278
|
+
const [ovTip, setOvTip] = React51__namespace.default.useState(null);
|
|
9279
|
+
const ovTimer = React51__namespace.default.useRef(null);
|
|
9280
|
+
const hideOverflowTip = () => {
|
|
9281
|
+
clearTimeout(ovTimer.current);
|
|
9282
|
+
setOvTip((t) => t ? null : t);
|
|
9283
|
+
};
|
|
9284
|
+
const onOverflowOver = (e) => {
|
|
9285
|
+
const el = e.target.closest?.("[data-ovtext]");
|
|
9286
|
+
if (!el) return;
|
|
9287
|
+
if (ovTip && ovTip.anchor === el) return;
|
|
9288
|
+
clearTimeout(ovTimer.current);
|
|
9289
|
+
if (el.scrollWidth > el.clientWidth + 1) {
|
|
9290
|
+
const text = el.getAttribute("data-ovtext");
|
|
9291
|
+
ovTimer.current = setTimeout(() => setOvTip({ anchor: el, text }), 120);
|
|
9292
|
+
} else if (ovTip) setOvTip(null);
|
|
9293
|
+
};
|
|
9294
|
+
const onOverflowOut = (e) => {
|
|
9295
|
+
const el = e.target.closest?.("[data-ovtext]");
|
|
9296
|
+
if (el && !el.contains(e.relatedTarget)) hideOverflowTip();
|
|
9297
|
+
};
|
|
9298
|
+
const onOverflowFocus = (e) => {
|
|
9299
|
+
const el = e.target.closest?.("[data-ovtext]");
|
|
9300
|
+
if (el && el.scrollWidth > el.clientWidth + 1) setOvTip({ anchor: el, text: el.getAttribute("data-ovtext") });
|
|
9301
|
+
else hideOverflowTip();
|
|
9302
|
+
};
|
|
9303
|
+
React51__namespace.default.useEffect(() => () => clearTimeout(ovTimer.current), []);
|
|
9304
|
+
React51__namespace.default.useEffect(() => {
|
|
9305
|
+
if (!ovTip) return void 0;
|
|
9306
|
+
const onKey = (e) => {
|
|
9307
|
+
if (e.key === "Escape") setOvTip(null);
|
|
9308
|
+
};
|
|
9309
|
+
document.addEventListener("keydown", onKey);
|
|
9310
|
+
return () => document.removeEventListener("keydown", onKey);
|
|
9311
|
+
}, [ovTip]);
|
|
9267
9312
|
const [pivotOn, setPivotOn] = React51__namespace.default.useState(pivotMode);
|
|
9268
9313
|
const [aggConfig, setAggConfig] = React51__namespace.default.useState(() => {
|
|
9269
9314
|
const m = {};
|
|
@@ -10429,7 +10474,7 @@ function Datatable({
|
|
|
10429
10474
|
"data-pin": st.pin,
|
|
10430
10475
|
"data-pin-edge": st.edge,
|
|
10431
10476
|
style: { width: widthOf(c), ...st.style },
|
|
10432
|
-
|
|
10477
|
+
"data-ovtext": cellTitle,
|
|
10433
10478
|
onClick: selectionMode === "cell" ? (e) => handleCellClick(e, k, row, c) : void 0,
|
|
10434
10479
|
onFocus: () => setFocus((f) => f.r === ri && f.c === ci ? f : { r: ri, c: ci }),
|
|
10435
10480
|
onDoubleClick: editable ? () => beginEdit(k, c, row) : void 0,
|
|
@@ -10770,233 +10815,247 @@ function Datatable({
|
|
|
10770
10815
|
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__groupbar-clear", onClick: () => setGroupBy([]), children: "Clear all" })
|
|
10771
10816
|
] }) : null,
|
|
10772
10817
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__sr", role: "status", "aria-live": "polite", children: reorderMsg }),
|
|
10773
|
-
pivotActive ? renderPivot() : /* @__PURE__ */ jsxRuntime.jsx(
|
|
10774
|
-
"
|
|
10818
|
+
pivotActive ? renderPivot() : /* @__PURE__ */ jsxRuntime.jsx(
|
|
10819
|
+
"div",
|
|
10775
10820
|
{
|
|
10776
|
-
className: "twc-
|
|
10777
|
-
style: {
|
|
10778
|
-
ref:
|
|
10779
|
-
|
|
10780
|
-
|
|
10781
|
-
|
|
10782
|
-
|
|
10783
|
-
|
|
10784
|
-
|
|
10785
|
-
|
|
10786
|
-
|
|
10787
|
-
|
|
10788
|
-
|
|
10789
|
-
|
|
10790
|
-
|
|
10791
|
-
|
|
10792
|
-
|
|
10793
|
-
|
|
10794
|
-
|
|
10795
|
-
|
|
10796
|
-
|
|
10797
|
-
|
|
10798
|
-
|
|
10799
|
-
|
|
10800
|
-
|
|
10801
|
-
|
|
10821
|
+
className: "twc-dt__scroll",
|
|
10822
|
+
style: { maxHeight: height },
|
|
10823
|
+
ref: scrollRef,
|
|
10824
|
+
onScroll: virtualizing ? onScrollVirtual : void 0,
|
|
10825
|
+
onMouseOver: onOverflowOver,
|
|
10826
|
+
onMouseOut: onOverflowOut,
|
|
10827
|
+
onFocus: onOverflowFocus,
|
|
10828
|
+
onBlur: hideOverflowTip,
|
|
10829
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
10830
|
+
"table",
|
|
10831
|
+
{
|
|
10832
|
+
className: "twc-dt__table",
|
|
10833
|
+
style: { width: tableMinWidth, minWidth: "100%" },
|
|
10834
|
+
ref: gridRef,
|
|
10835
|
+
role: "grid",
|
|
10836
|
+
"aria-label": ariaLabelAttr || ariaLabel,
|
|
10837
|
+
"aria-rowcount": totalRows + 1,
|
|
10838
|
+
"aria-colcount": ordered.length + (checkboxSelection ? 1 : 0),
|
|
10839
|
+
"aria-busy": loading || void 0,
|
|
10840
|
+
onKeyDown: onGridKeyDown,
|
|
10841
|
+
children: [
|
|
10842
|
+
/* @__PURE__ */ jsxRuntime.jsx("thead", { ref: theadRef, children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { role: "row", "aria-rowindex": 1, children: [
|
|
10843
|
+
checkboxSelection ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "twc-dt__th-inner", style: { justifyContent: "center", padding: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
10844
|
+
"span",
|
|
10845
|
+
{
|
|
10846
|
+
className: "twc-dt__check",
|
|
10847
|
+
"data-checked": allSel || void 0,
|
|
10848
|
+
"data-indeterminate": !allSel && someSel || void 0,
|
|
10849
|
+
onClick: toggleAll,
|
|
10850
|
+
role: "checkbox",
|
|
10851
|
+
"aria-checked": allSel ? true : someSel ? "mixed" : false,
|
|
10852
|
+
"aria-label": "Select all rows",
|
|
10853
|
+
tabIndex: 0,
|
|
10854
|
+
onKeyDown: (e) => {
|
|
10855
|
+
if (e.key === " " || e.key === "Enter") {
|
|
10856
|
+
e.preventDefault();
|
|
10857
|
+
toggleAll();
|
|
10858
|
+
}
|
|
10859
|
+
},
|
|
10860
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: allSel ? I.check : I.minus })
|
|
10802
10861
|
}
|
|
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
|
-
|
|
10867
|
-
|
|
10868
|
-
|
|
10869
|
-
|
|
10870
|
-
|
|
10871
|
-
|
|
10872
|
-
|
|
10873
|
-
|
|
10874
|
-
|
|
10875
|
-
|
|
10876
|
-
|
|
10877
|
-
|
|
10878
|
-
|
|
10879
|
-
|
|
10880
|
-
|
|
10881
|
-
|
|
10882
|
-
|
|
10883
|
-
|
|
10884
|
-
|
|
10885
|
-
|
|
10886
|
-
|
|
10887
|
-
|
|
10862
|
+
) }) }) : null,
|
|
10863
|
+
showRowNum ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "twc-dt__th-inner", children: [
|
|
10864
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__th-label", style: { flex: "none", cursor: "default" }, children: "#" }),
|
|
10865
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10866
|
+
"button",
|
|
10867
|
+
{
|
|
10868
|
+
type: "button",
|
|
10869
|
+
className: "twc-dt__menu-btn",
|
|
10870
|
+
"aria-label": "Row number column menu",
|
|
10871
|
+
"aria-haspopup": "menu",
|
|
10872
|
+
"aria-expanded": colMenu?.field === "__rownum__" || void 0,
|
|
10873
|
+
onClick: (e) => {
|
|
10874
|
+
e.stopPropagation();
|
|
10875
|
+
menuTriggerRef.current = e.currentTarget;
|
|
10876
|
+
setPanel(null);
|
|
10877
|
+
closePanel();
|
|
10878
|
+
setRowMenu(null);
|
|
10879
|
+
closeRowMenu();
|
|
10880
|
+
setExportOpen(false);
|
|
10881
|
+
closeExport();
|
|
10882
|
+
setColMenu({ field: "__rownum__" });
|
|
10883
|
+
openMenu(e.currentTarget, "right", 180);
|
|
10884
|
+
},
|
|
10885
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.more })
|
|
10886
|
+
}
|
|
10887
|
+
)
|
|
10888
|
+
] }) }) : null,
|
|
10889
|
+
ordered.map((c) => {
|
|
10890
|
+
const st = stickyOf(c.field);
|
|
10891
|
+
const sorted = sort && sort.field === c.field ? sort.dir : void 0;
|
|
10892
|
+
const w = widthOf(c);
|
|
10893
|
+
const reorderable = !disableColumnReorder && st.pin == null && c.type !== "actions" && c.reorderable !== false;
|
|
10894
|
+
const resizable = !disableColumnResize && c.resizable !== false;
|
|
10895
|
+
const hasMenu = !c.disableColumnMenu && (c.sortable || c.filterable || c.pinnable || c.hideable);
|
|
10896
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
10897
|
+
"th",
|
|
10898
|
+
{
|
|
10899
|
+
className: "twc-dt__th",
|
|
10900
|
+
role: "columnheader",
|
|
10901
|
+
scope: "col",
|
|
10902
|
+
"aria-sort": sorted ? sorted === "asc" ? "ascending" : "descending" : c.sortable ? "none" : void 0,
|
|
10903
|
+
"data-num": c.type === "number" || void 0,
|
|
10904
|
+
"data-actions-col": c.type === "actions" || void 0,
|
|
10905
|
+
"data-sorted": sorted,
|
|
10906
|
+
"data-pin": st.pin,
|
|
10907
|
+
"data-pin-edge": st.edge,
|
|
10908
|
+
"data-dragging": drag.from === c.field || void 0,
|
|
10909
|
+
"data-dropbefore": drag.over === c.field && !drag.after || void 0,
|
|
10910
|
+
"data-dropafter": drag.over === c.field && drag.after || void 0,
|
|
10911
|
+
style: { width: w, minWidth: w, ...st.style },
|
|
10912
|
+
onDragOver: reorderable && drag.from ? (e) => {
|
|
10913
|
+
e.preventDefault();
|
|
10914
|
+
const r2 = e.currentTarget.getBoundingClientRect();
|
|
10915
|
+
const after = e.clientX > r2.left + r2.width / 2;
|
|
10916
|
+
setDrag((d) => d.over === c.field && d.after === after ? d : { ...d, over: c.field, after });
|
|
10917
|
+
} : void 0,
|
|
10918
|
+
onDrop: reorderable && drag.from ? (e) => {
|
|
10919
|
+
e.preventDefault();
|
|
10920
|
+
onColDrop(c.field);
|
|
10921
|
+
} : void 0,
|
|
10922
|
+
children: [
|
|
10923
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__th-inner", children: [
|
|
10924
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
10925
|
+
"span",
|
|
10926
|
+
{
|
|
10927
|
+
className: "twc-dt__th-label",
|
|
10928
|
+
role: c.sortable ? "button" : void 0,
|
|
10929
|
+
tabIndex: c.sortable ? 0 : void 0,
|
|
10930
|
+
"data-ovtext": typeof c.headerName === "string" ? c.headerName : void 0,
|
|
10931
|
+
"aria-label": c.sortable ? `${c.headerName}, sort` : void 0,
|
|
10932
|
+
draggable: reorderable || void 0,
|
|
10933
|
+
onDragStart: reorderable ? (e) => {
|
|
10934
|
+
setDrag({ from: c.field, over: null, after: false });
|
|
10935
|
+
e.dataTransfer.effectAllowed = "move";
|
|
10936
|
+
e.dataTransfer.setData("text/plain", c.field);
|
|
10937
|
+
} : void 0,
|
|
10938
|
+
onDragEnd: reorderable ? () => setDrag({ from: null, over: null, after: false }) : void 0,
|
|
10939
|
+
onClick: () => c.sortable && cycleSort(c.field),
|
|
10940
|
+
onKeyDown: c.sortable ? (e) => {
|
|
10941
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
10942
|
+
e.preventDefault();
|
|
10943
|
+
cycleSort(c.field);
|
|
10944
|
+
}
|
|
10945
|
+
} : void 0,
|
|
10946
|
+
children: [
|
|
10947
|
+
reorderable ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__grip", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.grip }) }) : null,
|
|
10948
|
+
filteredFields.has(c.field) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__filterdot" }) : null,
|
|
10949
|
+
c.headerName,
|
|
10950
|
+
c.sortable ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__sort", children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.arrow }) }) : null
|
|
10951
|
+
]
|
|
10888
10952
|
}
|
|
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
|
-
|
|
10925
|
-
|
|
10926
|
-
|
|
10927
|
-
|
|
10928
|
-
|
|
10929
|
-
|
|
10930
|
-
|
|
10931
|
-
|
|
10932
|
-
|
|
10933
|
-
|
|
10934
|
-
|
|
10935
|
-
|
|
10936
|
-
|
|
10937
|
-
|
|
10938
|
-
|
|
10939
|
-
|
|
10940
|
-
|
|
10941
|
-
|
|
10942
|
-
|
|
10943
|
-
|
|
10944
|
-
|
|
10945
|
-
|
|
10953
|
+
),
|
|
10954
|
+
hasMenu ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
10955
|
+
"button",
|
|
10956
|
+
{
|
|
10957
|
+
type: "button",
|
|
10958
|
+
className: "twc-dt__menu-btn",
|
|
10959
|
+
"aria-label": "Column menu",
|
|
10960
|
+
"aria-haspopup": "menu",
|
|
10961
|
+
"aria-expanded": colMenu?.field === c.field || void 0,
|
|
10962
|
+
onClick: (e) => {
|
|
10963
|
+
e.stopPropagation();
|
|
10964
|
+
menuTriggerRef.current = e.currentTarget;
|
|
10965
|
+
setPanel(null);
|
|
10966
|
+
closePanel();
|
|
10967
|
+
setRowMenu(null);
|
|
10968
|
+
closeRowMenu();
|
|
10969
|
+
setExportOpen(false);
|
|
10970
|
+
closeExport();
|
|
10971
|
+
setColMenu({ field: c.field });
|
|
10972
|
+
openMenu(e.currentTarget, "right", 230);
|
|
10973
|
+
},
|
|
10974
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.more })
|
|
10975
|
+
}
|
|
10976
|
+
) : null
|
|
10977
|
+
] }),
|
|
10978
|
+
resizable ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
10979
|
+
"span",
|
|
10980
|
+
{
|
|
10981
|
+
className: "twc-dt__resizer",
|
|
10982
|
+
"data-active": resizing || void 0,
|
|
10983
|
+
role: "separator",
|
|
10984
|
+
"aria-orientation": "vertical",
|
|
10985
|
+
"aria-label": `Resize ${c.headerName} column (double-click to fit content)`,
|
|
10986
|
+
"aria-valuenow": w,
|
|
10987
|
+
"aria-valuemin": 72,
|
|
10988
|
+
tabIndex: 0,
|
|
10989
|
+
onPointerDown: (e) => startResize(e, c.field),
|
|
10990
|
+
onClick: (e) => e.stopPropagation(),
|
|
10991
|
+
onDoubleClick: (e) => {
|
|
10992
|
+
e.preventDefault();
|
|
10993
|
+
e.stopPropagation();
|
|
10994
|
+
autoFitColumn(c.field, e.currentTarget.closest("th"));
|
|
10995
|
+
},
|
|
10996
|
+
onKeyDown: (e) => {
|
|
10997
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
10998
|
+
e.preventDefault();
|
|
10999
|
+
e.stopPropagation();
|
|
11000
|
+
autoFitColumn(c.field, e.currentTarget.closest("th"));
|
|
11001
|
+
return;
|
|
11002
|
+
}
|
|
11003
|
+
if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
|
|
11004
|
+
e.preventDefault();
|
|
11005
|
+
e.stopPropagation();
|
|
11006
|
+
const delta = e.key === "ArrowRight" ? 10 : -10;
|
|
11007
|
+
setWidths((m) => ({ ...m, [c.field]: Math.max(72, (m[c.field] ?? intrinsicWidth(c)) + delta) }));
|
|
11008
|
+
},
|
|
11009
|
+
title: "Drag to resize \xB7 double-click to fit content"
|
|
10946
11010
|
}
|
|
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
|
-
|
|
10972
|
-
|
|
10973
|
-
|
|
10974
|
-
|
|
10975
|
-
|
|
10976
|
-
|
|
10977
|
-
|
|
10978
|
-
|
|
10979
|
-
|
|
10980
|
-
|
|
10981
|
-
|
|
10982
|
-
|
|
10983
|
-
|
|
10984
|
-
|
|
10985
|
-
|
|
10986
|
-
|
|
10987
|
-
|
|
10988
|
-
|
|
10989
|
-
|
|
10990
|
-
|
|
10991
|
-
|
|
10992
|
-
typeof aggOf(c) === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__agg-label", children: aggLabels[aggOf(c)] }) : null,
|
|
10993
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__agg-val", children: display })
|
|
10994
|
-
] }) }, c.field);
|
|
10995
|
-
})
|
|
10996
|
-
] }) }) : null
|
|
10997
|
-
]
|
|
11011
|
+
) : null
|
|
11012
|
+
]
|
|
11013
|
+
},
|
|
11014
|
+
c.field
|
|
11015
|
+
);
|
|
11016
|
+
})
|
|
11017
|
+
] }) }),
|
|
11018
|
+
/* @__PURE__ */ jsxRuntime.jsx("tbody", { children: loading ? Array.from({ length: paginated ? Math.min(sizeVal, 8) : 8 }).map((_, ri) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "twc-dt__row", role: "row", children: [
|
|
11019
|
+
checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td", role: "gridcell", "data-pin": "left", style: { insetInlineStart: 0, width: CHK_W }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": "18px", height: 18, borderRadius: 4 } }) }) : null,
|
|
11020
|
+
showRowNum ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": "16px", height: 14, borderRadius: 4 } }) }) : null,
|
|
11021
|
+
ordered.map((c, ci) => {
|
|
11022
|
+
const st = stickyOf(c.field);
|
|
11023
|
+
return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": `${45 + (ri * 13 + ci * 29) % 45}%` } }) }, c.field);
|
|
11024
|
+
})
|
|
11025
|
+
] }, ri)) : (displayItems ? displayItems.length === 0 : paged.length === 0) ? (
|
|
11026
|
+
// #121: customizable, filter-aware empty state. #122: grid roles on the empty row.
|
|
11027
|
+
/* @__PURE__ */ jsxRuntime.jsx("tr", { role: "row", "aria-rowindex": 2, children: /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td", role: "gridcell", colSpan: totalCols, style: { maxWidth: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__empty", children: renderEmpty ? renderEmpty() : emptyMessage ?? (filters.length > 0 || quick.trim() !== "" ? "No rows match your filters" : "No rows") }) }) })
|
|
11028
|
+
) : displayItems ? (() => {
|
|
11029
|
+
let li = -1;
|
|
11030
|
+
return displayItems.map((item) => item.kind === "group" ? renderGroupRow(item) : renderLeaf(item.row, ++li));
|
|
11031
|
+
})() : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
11032
|
+
pinnedTopRows.map((row) => renderLeaf(row, keyIndex.get(keyOf(row)), "top")),
|
|
11033
|
+
vWindow ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
11034
|
+
vWindow.padTop > 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": "true", className: "twc-dt__vspacer", children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalCols, style: { height: vWindow.padTop, padding: 0, border: "none", maxWidth: "none" } }) }) : null,
|
|
11035
|
+
middleRows.slice(vWindow.start, vWindow.end).map((row, i) => renderLeaf(row, keyIndex.get(keyOf(row)), void 0, vWindow.start + i)),
|
|
11036
|
+
vWindow.padBottom > 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": "true", className: "twc-dt__vspacer", children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalCols, style: { height: vWindow.padBottom, padding: 0, border: "none", maxWidth: "none" } }) }) : null
|
|
11037
|
+
] }) : middleRows.map((row, i) => renderLeaf(row, keyIndex.get(keyOf(row)), void 0, i)),
|
|
11038
|
+
pinnedBottomRows.map((row) => renderLeaf(row, keyIndex.get(keyOf(row)), "bottom"))
|
|
11039
|
+
] }) }),
|
|
11040
|
+
hasAggregation && aggOn && !loading && paged.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("tfoot", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { role: "row", children: [
|
|
11041
|
+
checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { role: "gridcell", "data-pin": "left", "data-pin-edge": pins.left.length || showRowNum ? void 0 : "left", style: { insetInlineStart: 0, width: CHK_W } }) : null,
|
|
11042
|
+
showRowNum ? /* @__PURE__ */ jsxRuntime.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,
|
|
11043
|
+
ordered.map((c) => {
|
|
11044
|
+
const st = stickyOf(c.field);
|
|
11045
|
+
const v = aggregate(c);
|
|
11046
|
+
const display = v == null ? null : c.aggregationFormatter ? c.aggregationFormatter(v) : c.valueFormatter ? c.valueFormatter(v, null) : typeof v === "number" ? v.toLocaleString() : v;
|
|
11047
|
+
return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
11048
|
+
typeof aggOf(c) === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__agg-label", children: aggLabels[aggOf(c)] }) : null,
|
|
11049
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__agg-val", children: display })
|
|
11050
|
+
] }) }, c.field);
|
|
11051
|
+
})
|
|
11052
|
+
] }) }) : null
|
|
11053
|
+
]
|
|
11054
|
+
}
|
|
11055
|
+
)
|
|
10998
11056
|
}
|
|
10999
|
-
)
|
|
11057
|
+
),
|
|
11058
|
+
/* @__PURE__ */ jsxRuntime.jsx(Tooltip, { anchor: ovTip ? ovTip.anchor : null, open: !!ovTip, label: ovTip ? ovTip.text : null, placement: "top" }),
|
|
11000
11059
|
!pivotActive ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__footer", children: [
|
|
11001
11060
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__footer-row", "data-bottom": "true", children: [
|
|
11002
11061
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__status", children: loading ? "Loading\u2026" : (() => {
|