twico-ui 1.44.0 → 1.45.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 +25 -0
- package/dist/index.cjs +914 -868
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +155 -10
- package/dist/index.d.ts +155 -10
- package/dist/index.mjs +914 -868
- package/dist/index.mjs.map +1 -1
- package/llms.txt +2 -0
- package/package.json +3 -3
package/dist/index.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var React55 = require('react');
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var reactDom = require('react-dom');
|
|
7
7
|
|
|
@@ -23,14 +23,14 @@ function _interopNamespace(e) {
|
|
|
23
23
|
return Object.freeze(n);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
var
|
|
26
|
+
var React55__namespace = /*#__PURE__*/_interopNamespace(React55);
|
|
27
27
|
|
|
28
28
|
// components/TwicoProvider.jsx
|
|
29
|
-
var SUPPORTS_STYLE_HOIST = parseInt(String(
|
|
30
|
-
var NonceContext =
|
|
29
|
+
var SUPPORTS_STYLE_HOIST = parseInt(String(React55__namespace.version), 10) >= 19;
|
|
30
|
+
var NonceContext = React55__namespace.createContext(void 0);
|
|
31
31
|
function useScopedStyles(id, css) {
|
|
32
|
-
const nonce =
|
|
33
|
-
|
|
32
|
+
const nonce = React55__namespace.useContext(NonceContext);
|
|
33
|
+
React55__namespace.useInsertionEffect(() => {
|
|
34
34
|
if (SUPPORTS_STYLE_HOIST) return;
|
|
35
35
|
if (typeof document === "undefined") return;
|
|
36
36
|
if (!css) return;
|
|
@@ -46,12 +46,12 @@ function useScopedStyles(id, css) {
|
|
|
46
46
|
}
|
|
47
47
|
if (el.textContent !== css) el.textContent = css;
|
|
48
48
|
}, [id, css, nonce]);
|
|
49
|
-
return SUPPORTS_STYLE_HOIST && css ?
|
|
49
|
+
return SUPPORTS_STYLE_HOIST && css ? React55__namespace.createElement("style", { href: id, precedence: "twc-ui" }, css) : null;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
// components/TwicoProvider.jsx
|
|
53
53
|
function TwicoProvider({ nonce, children }) {
|
|
54
|
-
return
|
|
54
|
+
return React55__namespace.default.createElement(NonceContext.Provider, { value: nonce }, children);
|
|
55
55
|
}
|
|
56
56
|
var GROUPS = { colors: "color", space: "space", radius: "radius", font: "font", shadow: "shadow", motion: "" };
|
|
57
57
|
function createTheme(partial = {}) {
|
|
@@ -71,8 +71,8 @@ function toVars(theme) {
|
|
|
71
71
|
return Object.keys(theme).some((k) => k.startsWith("--")) ? theme : createTheme(theme);
|
|
72
72
|
}
|
|
73
73
|
function ThemeProvider({ theme, mode = "inline", className = "", style, children, ...rest }) {
|
|
74
|
-
const vars =
|
|
75
|
-
const uid =
|
|
74
|
+
const vars = React55__namespace.default.useMemo(() => toVars(theme), [theme]);
|
|
75
|
+
const uid = React55__namespace.default.useId();
|
|
76
76
|
const scopeId = `twc-theme-${uid.replace(/[^a-zA-Z0-9]/g, "")}`;
|
|
77
77
|
const css = mode === "stylesheet" ? `[data-twc-theme="${scopeId}"] { ${Object.entries(vars).map(([k, v]) => `${k}: ${v};`).join(" ")} }` : "";
|
|
78
78
|
const __twcStyles = useScopedStyles(mode === "stylesheet" ? scopeId : "twc-theme-noop", css);
|
|
@@ -94,7 +94,7 @@ var FORM_CSS = `
|
|
|
94
94
|
.twc-form { display: flex; flex-direction: column; gap: var(--space-4); font-family: var(--font-sans); }
|
|
95
95
|
.twc-form__fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: inherit; }
|
|
96
96
|
`;
|
|
97
|
-
var Form =
|
|
97
|
+
var Form = /* @__PURE__ */ React55__namespace.default.forwardRef(function Form2({
|
|
98
98
|
onSubmit,
|
|
99
99
|
preventDefault = true,
|
|
100
100
|
loading = false,
|
|
@@ -125,18 +125,16 @@ var Form = React54__namespace.default.forwardRef(function Form2({
|
|
|
125
125
|
}
|
|
126
126
|
);
|
|
127
127
|
});
|
|
128
|
-
Form.displayName = "Form";
|
|
129
128
|
var VH_CSS = `
|
|
130
129
|
.twc-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
|
|
131
130
|
`;
|
|
132
|
-
var VisuallyHidden =
|
|
131
|
+
var VisuallyHidden = /* @__PURE__ */ React55__namespace.default.forwardRef(function VisuallyHidden2({ as: Tag2 = "span", className = "", children, ...rest }, ref) {
|
|
133
132
|
const __twcStyles = useScopedStyles("twc-visually-hidden-styles", VH_CSS);
|
|
134
133
|
return /* @__PURE__ */ jsxRuntime.jsxs(Tag2, { ref, className: `twc-visually-hidden ${className}`.trim(), ...rest, children: [
|
|
135
134
|
__twcStyles,
|
|
136
135
|
children
|
|
137
136
|
] });
|
|
138
137
|
});
|
|
139
|
-
VisuallyHidden.displayName = "VisuallyHidden";
|
|
140
138
|
|
|
141
139
|
// components/_warn.js
|
|
142
140
|
var seen = /* @__PURE__ */ new Set();
|
|
@@ -149,7 +147,7 @@ function warnOnce(key, message) {
|
|
|
149
147
|
|
|
150
148
|
// components/_overlay.js
|
|
151
149
|
var canUseDOM = typeof window !== "undefined" && typeof document !== "undefined";
|
|
152
|
-
var useIsoLayoutEffect = canUseDOM ?
|
|
150
|
+
var useIsoLayoutEffect = canUseDOM ? React55__namespace.default.useLayoutEffect : React55__namespace.default.useEffect;
|
|
153
151
|
var FOCUSABLE = 'a[href]:not([tabindex="-1"]), button:not([disabled]):not([tabindex="-1"]), textarea:not([disabled]):not([tabindex="-1"]), input:not([disabled]):not([tabindex="-1"]), select:not([disabled]):not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])';
|
|
154
152
|
var CONTROL_TAGS = "|button|input|select|textarea|";
|
|
155
153
|
var ROLE_OK = "|button|link|menuitem|menuitemcheckbox|menuitemradio|combobox|tab|treeitem|checkbox|switch|option|";
|
|
@@ -163,7 +161,7 @@ function triggerIsControl(el) {
|
|
|
163
161
|
}
|
|
164
162
|
var NATIVE_CONTROL = "button,a[href],summary,input,select,textarea";
|
|
165
163
|
function useTriggerAudit(ref, name) {
|
|
166
|
-
|
|
164
|
+
React55__namespace.default.useEffect(() => {
|
|
167
165
|
const el = ref.current && ref.current.firstElementChild;
|
|
168
166
|
if (!el) return;
|
|
169
167
|
if (el.classList.contains("twc-tooltip-wrap")) {
|
|
@@ -178,7 +176,7 @@ function useTriggerAudit(ref, name) {
|
|
|
178
176
|
}, []);
|
|
179
177
|
}
|
|
180
178
|
function useFocusTrap(ref, active = true, { restoreFocus = true, initialFocus } = {}) {
|
|
181
|
-
|
|
179
|
+
React55__namespace.default.useEffect(() => {
|
|
182
180
|
if (!active || !canUseDOM) return void 0;
|
|
183
181
|
const node = ref.current;
|
|
184
182
|
if (!node) return void 0;
|
|
@@ -189,7 +187,7 @@ function useFocusTrap(ref, active = true, { restoreFocus = true, initialFocus }
|
|
|
189
187
|
if (restoreFocus && prevFocused && typeof prevFocused.focus === "function") prevFocused.focus();
|
|
190
188
|
};
|
|
191
189
|
}, [active]);
|
|
192
|
-
|
|
190
|
+
React55__namespace.default.useEffect(() => {
|
|
193
191
|
if (!active || !canUseDOM) return void 0;
|
|
194
192
|
const node = ref.current;
|
|
195
193
|
const onKey = (e) => {
|
|
@@ -216,7 +214,7 @@ function useFocusTrap(ref, active = true, { restoreFocus = true, initialFocus }
|
|
|
216
214
|
}, [active]);
|
|
217
215
|
}
|
|
218
216
|
function usePortal() {
|
|
219
|
-
return
|
|
217
|
+
return React55__namespace.default.useCallback((node) => {
|
|
220
218
|
if (typeof document === "undefined") return null;
|
|
221
219
|
return typeof reactDom.createPortal === "function" ? reactDom.createPortal(node, document.body) : node;
|
|
222
220
|
}, []);
|
|
@@ -246,8 +244,8 @@ function useScrollLock(locked = true) {
|
|
|
246
244
|
var __layerSeq = 0;
|
|
247
245
|
var __openLayers = /* @__PURE__ */ new Set();
|
|
248
246
|
function useLayer(active) {
|
|
249
|
-
const depth =
|
|
250
|
-
|
|
247
|
+
const depth = React55__namespace.default.useRef(0);
|
|
248
|
+
React55__namespace.default.useEffect(() => {
|
|
251
249
|
if (!active) return void 0;
|
|
252
250
|
const d = ++__layerSeq;
|
|
253
251
|
depth.current = d;
|
|
@@ -256,10 +254,10 @@ function useLayer(active) {
|
|
|
256
254
|
__openLayers.delete(d);
|
|
257
255
|
};
|
|
258
256
|
}, [active]);
|
|
259
|
-
return
|
|
257
|
+
return React55__namespace.default.useCallback(() => __openLayers.size === 0 || depth.current === Math.max(...__openLayers), []);
|
|
260
258
|
}
|
|
261
259
|
function useInertBackground(ref, active) {
|
|
262
|
-
|
|
260
|
+
React55__namespace.default.useEffect(() => {
|
|
263
261
|
if (!active || !canUseDOM) return void 0;
|
|
264
262
|
const node = ref.current;
|
|
265
263
|
if (!node) return void 0;
|
|
@@ -294,7 +292,7 @@ function getColorSchemeScript({ storageKey = "twico-theme", attribute = "class",
|
|
|
294
292
|
return `(function(){try{var k=${k},a=${a},d=${d},t=localStorage.getItem(k);if(t!=='light'){if(t!=='dark'){t=d?d:(window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light');}}if(a==='class'){document.documentElement.classList.toggle('dark',t==='dark');}else{document.documentElement.setAttribute(a,t);}}catch(e){}})();`;
|
|
295
293
|
}
|
|
296
294
|
function ColorSchemeScript({ storageKey = "twico-theme", attribute = "class", nonce, defaultScheme }) {
|
|
297
|
-
return
|
|
295
|
+
return React55__namespace.default.createElement("script", { nonce }, getColorSchemeScript({ storageKey, attribute, defaultScheme }));
|
|
298
296
|
}
|
|
299
297
|
var KBD_CSS = `
|
|
300
298
|
.twc-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 2px 6px;
|
|
@@ -302,14 +300,13 @@ var KBD_CSS = `
|
|
|
302
300
|
background: var(--color-surface-sunken); border: var(--border-thin) solid var(--color-border);
|
|
303
301
|
border-bottom-width: 2px; border-radius: var(--radius-sm); }
|
|
304
302
|
`;
|
|
305
|
-
var Kbd =
|
|
303
|
+
var Kbd = /* @__PURE__ */ React55__namespace.default.forwardRef(function Kbd2({ className = "", children, ...rest }, ref) {
|
|
306
304
|
const __twcStyles = useScopedStyles("twc-kbd-styles", KBD_CSS);
|
|
307
305
|
return /* @__PURE__ */ jsxRuntime.jsxs("kbd", { ref, className: `twc-kbd ${className}`.trim(), ...rest, children: [
|
|
308
306
|
__twcStyles,
|
|
309
307
|
children
|
|
310
308
|
] });
|
|
311
309
|
});
|
|
312
|
-
Kbd.displayName = "Kbd";
|
|
313
310
|
var PRE_CSS = `
|
|
314
311
|
.twc-pre { margin: 0; padding: var(--space-4); overflow-x: auto; max-width: 100%;
|
|
315
312
|
font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-normal);
|
|
@@ -317,14 +314,13 @@ var PRE_CSS = `
|
|
|
317
314
|
border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg);
|
|
318
315
|
white-space: pre; -webkit-overflow-scrolling: touch; }
|
|
319
316
|
`;
|
|
320
|
-
var Pre =
|
|
317
|
+
var Pre = /* @__PURE__ */ React55__namespace.default.forwardRef(function Pre2({ className = "", children, ...rest }, ref) {
|
|
321
318
|
const __twcStyles = useScopedStyles("twc-pre-styles", PRE_CSS);
|
|
322
319
|
return /* @__PURE__ */ jsxRuntime.jsxs("pre", { ref, className: `twc-pre ${className}`.trim(), ...rest, children: [
|
|
323
320
|
__twcStyles,
|
|
324
321
|
children
|
|
325
322
|
] });
|
|
326
323
|
});
|
|
327
|
-
Pre.displayName = "Pre";
|
|
328
324
|
var ANCHOR_CSS = `
|
|
329
325
|
.twc-anchor { color: var(--color-primary-subtle-fg); text-decoration: none; border-radius: var(--radius-sm);
|
|
330
326
|
transition: color var(--duration-fast) var(--ease-standard); }
|
|
@@ -337,7 +333,7 @@ function safeHref(url) {
|
|
|
337
333
|
const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
|
|
338
334
|
return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
|
|
339
335
|
}
|
|
340
|
-
var Anchor =
|
|
336
|
+
var Anchor = /* @__PURE__ */ React55__namespace.default.forwardRef(function Anchor2({ as: Tag2 = "a", href, external = false, className = "", children, ...rest }, ref) {
|
|
341
337
|
const __twcStyles = useScopedStyles("twc-anchor-styles", ANCHOR_CSS);
|
|
342
338
|
const extra = external ? { target: "_blank", rel: "noopener noreferrer" } : {};
|
|
343
339
|
return /* @__PURE__ */ jsxRuntime.jsxs(Tag2, { ref, className: `twc-anchor ${className}`.trim(), href: Tag2 === "a" ? safeHref(href) : href, ...extra, ...rest, children: [
|
|
@@ -346,14 +342,13 @@ var Anchor = React54__namespace.default.forwardRef(function Anchor2({ as: Tag2 =
|
|
|
346
342
|
external ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-anchor__ext", "aria-hidden": "true", children: "\u2197" }) : null
|
|
347
343
|
] });
|
|
348
344
|
});
|
|
349
|
-
Anchor.displayName = "Anchor";
|
|
350
345
|
var LABEL_CSS = `
|
|
351
346
|
.twc-label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: inline-flex; gap: 4px; align-items: center; }
|
|
352
347
|
.twc-label[data-size="sm"] { font-size: var(--text-xs); }
|
|
353
348
|
.twc-label[data-size="lg"] { font-size: var(--text-base); }
|
|
354
349
|
.twc-label__req { color: var(--color-danger); }
|
|
355
350
|
`;
|
|
356
|
-
var Label =
|
|
351
|
+
var Label = /* @__PURE__ */ React55__namespace.default.forwardRef(function Label2({ htmlFor, required = false, size = "md", className = "", children, ...rest }, ref) {
|
|
357
352
|
const __twcStyles = useScopedStyles("twc-label-styles", LABEL_CSS);
|
|
358
353
|
return /* @__PURE__ */ jsxRuntime.jsxs("label", { ref, htmlFor, className: `twc-label ${className}`.trim(), "data-size": size, ...rest, children: [
|
|
359
354
|
__twcStyles,
|
|
@@ -361,12 +356,11 @@ var Label = React54__namespace.default.forwardRef(function Label2({ htmlFor, req
|
|
|
361
356
|
required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-label__req", "aria-hidden": "true", children: "*" }) : null
|
|
362
357
|
] });
|
|
363
358
|
});
|
|
364
|
-
Label.displayName = "Label";
|
|
365
359
|
var IMAGE_CSS = `
|
|
366
360
|
.twc-image { display: block; max-width: 100%; }
|
|
367
361
|
.twc-image[data-fit] { width: 100%; height: 100%; }
|
|
368
362
|
`;
|
|
369
|
-
var Image =
|
|
363
|
+
var Image = /* @__PURE__ */ React55__namespace.default.forwardRef(function Image2({
|
|
370
364
|
src,
|
|
371
365
|
alt,
|
|
372
366
|
fit,
|
|
@@ -382,7 +376,7 @@ var Image = React54__namespace.default.forwardRef(function Image2({
|
|
|
382
376
|
...rest
|
|
383
377
|
}, ref) {
|
|
384
378
|
const __twcStyles = useScopedStyles("twc-image-styles", IMAGE_CSS);
|
|
385
|
-
const [failed, setFailed] =
|
|
379
|
+
const [failed, setFailed] = React55__namespace.default.useState(false);
|
|
386
380
|
const shownSrc = failed && fallback ? fallback : src;
|
|
387
381
|
const s = {
|
|
388
382
|
objectFit: fit,
|
|
@@ -421,7 +415,6 @@ var Image = React54__namespace.default.forwardRef(function Image2({
|
|
|
421
415
|
)
|
|
422
416
|
] });
|
|
423
417
|
});
|
|
424
|
-
Image.displayName = "Image";
|
|
425
418
|
var ICONBTN_CSS = `
|
|
426
419
|
.twc-iconbtn {
|
|
427
420
|
--_sz: var(--control-h-md);
|
|
@@ -491,7 +484,7 @@ function safeHref2(url) {
|
|
|
491
484
|
const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
|
|
492
485
|
return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
|
|
493
486
|
}
|
|
494
|
-
|
|
487
|
+
var IconButton = /* @__PURE__ */ React55__namespace.default.forwardRef(function IconButton2({
|
|
495
488
|
children,
|
|
496
489
|
icon,
|
|
497
490
|
variant = "ghost",
|
|
@@ -508,7 +501,7 @@ function IconButton({
|
|
|
508
501
|
"aria-label": ariaLabel,
|
|
509
502
|
onClick,
|
|
510
503
|
...rest
|
|
511
|
-
}) {
|
|
504
|
+
}, ref) {
|
|
512
505
|
const __twcStyles = useScopedStyles("twc-iconbtn-styles", ICONBTN_CSS);
|
|
513
506
|
const Tag2 = as;
|
|
514
507
|
const inert = Tag2 === "a" && disabled;
|
|
@@ -516,6 +509,7 @@ function IconButton({
|
|
|
516
509
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
517
510
|
Tag2,
|
|
518
511
|
{
|
|
512
|
+
ref,
|
|
519
513
|
className: `twc-iconbtn ${className}`,
|
|
520
514
|
"data-variant": variant,
|
|
521
515
|
"data-tone": tone,
|
|
@@ -537,7 +531,7 @@ function IconButton({
|
|
|
537
531
|
]
|
|
538
532
|
}
|
|
539
533
|
);
|
|
540
|
-
}
|
|
534
|
+
});
|
|
541
535
|
|
|
542
536
|
// components/_compose.js
|
|
543
537
|
function compose(theirs, ours) {
|
|
@@ -613,14 +607,14 @@ function Tooltip({
|
|
|
613
607
|
}) {
|
|
614
608
|
const __twcStyles = useScopedStyles("twc-tooltip-styles", TOOLTIP_CSS);
|
|
615
609
|
const anchored = anchor !== void 0;
|
|
616
|
-
const id =
|
|
617
|
-
const [showU, setShowU] =
|
|
610
|
+
const id = React55__namespace.default.useId();
|
|
611
|
+
const [showU, setShowU] = React55__namespace.default.useState(false);
|
|
618
612
|
const show = anchored ? !!openProp : showU;
|
|
619
|
-
const [coords, setCoords] =
|
|
620
|
-
const timer =
|
|
621
|
-
const closeTimer =
|
|
622
|
-
const wrapRef =
|
|
623
|
-
const tipRef =
|
|
613
|
+
const [coords, setCoords] = React55__namespace.default.useState(null);
|
|
614
|
+
const timer = React55__namespace.default.useRef(null);
|
|
615
|
+
const closeTimer = React55__namespace.default.useRef(null);
|
|
616
|
+
const wrapRef = React55__namespace.default.useRef(null);
|
|
617
|
+
const tipRef = React55__namespace.default.useRef(null);
|
|
624
618
|
const open = () => {
|
|
625
619
|
clearTimeout(closeTimer.current);
|
|
626
620
|
clearTimeout(timer.current);
|
|
@@ -631,11 +625,11 @@ function Tooltip({
|
|
|
631
625
|
clearTimeout(closeTimer.current);
|
|
632
626
|
closeTimer.current = setTimeout(() => setShowU(false), 120);
|
|
633
627
|
};
|
|
634
|
-
|
|
628
|
+
React55__namespace.default.useEffect(() => () => {
|
|
635
629
|
clearTimeout(timer.current);
|
|
636
630
|
clearTimeout(closeTimer.current);
|
|
637
631
|
}, []);
|
|
638
|
-
const place =
|
|
632
|
+
const place = React55__namespace.default.useCallback(() => {
|
|
639
633
|
const el = anchored ? anchor : wrapRef.current;
|
|
640
634
|
if (!el || !el.getBoundingClientRect) return;
|
|
641
635
|
const r2 = el.getBoundingClientRect();
|
|
@@ -670,10 +664,10 @@ function Tooltip({
|
|
|
670
664
|
setCoords({ ...base, left: c, bottom: Math.round(vh - r2.top + gap), arrowX: arrowX(c) });
|
|
671
665
|
}
|
|
672
666
|
}, [placement, anchored, anchor]);
|
|
673
|
-
|
|
667
|
+
React55__namespace.default.useEffect(() => {
|
|
674
668
|
place();
|
|
675
669
|
}, [place]);
|
|
676
|
-
|
|
670
|
+
React55__namespace.default.useEffect(() => {
|
|
677
671
|
if (!show) return void 0;
|
|
678
672
|
place();
|
|
679
673
|
const onMove = () => place();
|
|
@@ -684,7 +678,7 @@ function Tooltip({
|
|
|
684
678
|
window.removeEventListener("resize", onMove);
|
|
685
679
|
};
|
|
686
680
|
}, [show, place]);
|
|
687
|
-
|
|
681
|
+
React55__namespace.default.useEffect(() => {
|
|
688
682
|
if (!show || anchored) return;
|
|
689
683
|
const onKeyDown = (e) => {
|
|
690
684
|
if (e.key === "Escape") {
|
|
@@ -728,7 +722,7 @@ function Tooltip({
|
|
|
728
722
|
bubble
|
|
729
723
|
] });
|
|
730
724
|
const describedBy = show ? id : void 0;
|
|
731
|
-
const trigger =
|
|
725
|
+
const trigger = React55__namespace.default.isValidElement(children) && children.type !== React55__namespace.default.Fragment ? React55__namespace.default.cloneElement(children, {
|
|
732
726
|
"aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0
|
|
733
727
|
}) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-describedby": describedBy, children });
|
|
734
728
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -777,7 +771,7 @@ var IcoReset = /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fi
|
|
|
777
771
|
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9 9 0 0 0-6.3 2.6L3 8" }),
|
|
778
772
|
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 3v5h5" })
|
|
779
773
|
] });
|
|
780
|
-
var ImageViewer = /* @__PURE__ */
|
|
774
|
+
var ImageViewer = /* @__PURE__ */ React55__namespace.default.forwardRef(function ImageViewer2({
|
|
781
775
|
src,
|
|
782
776
|
alt,
|
|
783
777
|
minZoom = 1,
|
|
@@ -796,16 +790,16 @@ var ImageViewer = /* @__PURE__ */ React54__namespace.default.forwardRef(function
|
|
|
796
790
|
...rest
|
|
797
791
|
}, ref) {
|
|
798
792
|
const __twcStyles = useScopedStyles("twc-imageviewer-styles", IV_CSS);
|
|
799
|
-
const stageRef =
|
|
800
|
-
const natRef =
|
|
801
|
-
const [internalZoom, setInternalZoom] =
|
|
793
|
+
const stageRef = React55__namespace.default.useRef(null);
|
|
794
|
+
const natRef = React55__namespace.default.useRef({ w: 0, h: 0 });
|
|
795
|
+
const [internalZoom, setInternalZoom] = React55__namespace.default.useState(clamp(defaultZoom, minZoom, maxZoom));
|
|
802
796
|
const zoomControlled = zoomProp !== void 0;
|
|
803
797
|
const zoom = clamp(zoomControlled ? zoomProp : internalZoom, minZoom, maxZoom);
|
|
804
|
-
const [offset, setOffset] =
|
|
805
|
-
const [dragging, setDragging] =
|
|
806
|
-
const zoomRef =
|
|
798
|
+
const [offset, setOffset] = React55__namespace.default.useState({ x: 0, y: 0 });
|
|
799
|
+
const [dragging, setDragging] = React55__namespace.default.useState(false);
|
|
800
|
+
const zoomRef = React55__namespace.default.useRef(zoom);
|
|
807
801
|
zoomRef.current = zoom;
|
|
808
|
-
const offsetRef =
|
|
802
|
+
const offsetRef = React55__namespace.default.useRef(offset);
|
|
809
803
|
offsetRef.current = offset;
|
|
810
804
|
const applyZoom = (next) => {
|
|
811
805
|
const z = clamp(next, minZoom, maxZoom);
|
|
@@ -855,12 +849,12 @@ var ImageViewer = /* @__PURE__ */ React54__namespace.default.forwardRef(function
|
|
|
855
849
|
if (r2) zoomAt(r2.left + r2.width / 2, r2.top + r2.height / 2, next);
|
|
856
850
|
else if (applyZoom(next) <= minZoom) setOffset({ x: 0, y: 0 });
|
|
857
851
|
};
|
|
858
|
-
const mountedRef =
|
|
859
|
-
|
|
852
|
+
const mountedRef = React55__namespace.default.useRef(false);
|
|
853
|
+
React55__namespace.default.useEffect(() => {
|
|
860
854
|
if (mountedRef.current) reset();
|
|
861
855
|
else mountedRef.current = true;
|
|
862
856
|
}, [src]);
|
|
863
|
-
|
|
857
|
+
React55__namespace.default.useEffect(() => {
|
|
864
858
|
const stage = stageRef.current;
|
|
865
859
|
if (!stage) return void 0;
|
|
866
860
|
const onWheel = (e) => {
|
|
@@ -871,9 +865,9 @@ var ImageViewer = /* @__PURE__ */ React54__namespace.default.forwardRef(function
|
|
|
871
865
|
stage.addEventListener("wheel", onWheel, { passive: false });
|
|
872
866
|
return () => stage.removeEventListener("wheel", onWheel);
|
|
873
867
|
}, [step, minZoom, maxZoom, fit]);
|
|
874
|
-
const pointers =
|
|
875
|
-
const pinchRef =
|
|
876
|
-
const panRef =
|
|
868
|
+
const pointers = React55__namespace.default.useRef(/* @__PURE__ */ new Map());
|
|
869
|
+
const pinchRef = React55__namespace.default.useRef(null);
|
|
870
|
+
const panRef = React55__namespace.default.useRef(null);
|
|
877
871
|
const onPointerDown = (e) => {
|
|
878
872
|
pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
|
|
879
873
|
e.currentTarget.setPointerCapture?.(e.pointerId);
|
|
@@ -925,13 +919,13 @@ var ImageViewer = /* @__PURE__ */ React54__namespace.default.forwardRef(function
|
|
|
925
919
|
};
|
|
926
920
|
const canZoomIn = zoom < maxZoom, canZoomOut = zoom > minZoom;
|
|
927
921
|
const api = { zoom, zoomIn: () => zoomFromCenter(zoom + step), zoomOut: () => zoomFromCenter(zoom - step), reset, canZoomIn, canZoomOut };
|
|
928
|
-
|
|
929
|
-
const onStateChangeRef =
|
|
922
|
+
React55__namespace.default.useImperativeHandle(ref, () => api);
|
|
923
|
+
const onStateChangeRef = React55__namespace.default.useRef(onStateChange);
|
|
930
924
|
onStateChangeRef.current = onStateChange;
|
|
931
|
-
|
|
925
|
+
React55__namespace.default.useEffect(() => {
|
|
932
926
|
onStateChangeRef.current?.({ zoom, canZoomIn, canZoomOut });
|
|
933
927
|
}, [zoom, canZoomIn, canZoomOut]);
|
|
934
|
-
|
|
928
|
+
React55__namespace.default.useEffect(() => {
|
|
935
929
|
setOffset((o) => clampOffset(o, zoomRef.current));
|
|
936
930
|
}, [fit]);
|
|
937
931
|
const defaultControls = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-iv__controls", children: [
|
|
@@ -1025,11 +1019,11 @@ function Accordion({
|
|
|
1025
1019
|
...rest
|
|
1026
1020
|
}) {
|
|
1027
1021
|
const __twcStyles = useScopedStyles("twc-accordion-styles", ACCORDION_CSS);
|
|
1028
|
-
const rootRef =
|
|
1029
|
-
const [internal, setInternal] =
|
|
1022
|
+
const rootRef = React55__namespace.default.useRef(null);
|
|
1023
|
+
const [internal, setInternal] = React55__namespace.default.useState(() => new Set(defaultOpen));
|
|
1030
1024
|
const open = openProp !== void 0 ? new Set(openProp) : internal;
|
|
1031
|
-
const baseId =
|
|
1032
|
-
const [ever, setEver] =
|
|
1025
|
+
const baseId = React55__namespace.default.useId();
|
|
1026
|
+
const [ever, setEver] = React55__namespace.default.useState(() => new Set(open));
|
|
1033
1027
|
const defer = mountOnOpen || unmountOnClose;
|
|
1034
1028
|
let mounted = ever;
|
|
1035
1029
|
if (defer) {
|
|
@@ -1041,7 +1035,7 @@ function Accordion({
|
|
|
1041
1035
|
}
|
|
1042
1036
|
}
|
|
1043
1037
|
const openKey = defer ? JSON.stringify([...open].sort()) : "";
|
|
1044
|
-
|
|
1038
|
+
React55__namespace.default.useEffect(() => {
|
|
1045
1039
|
if (!unmountOnClose) return void 0;
|
|
1046
1040
|
const drop = [...ever].filter((v) => !open.has(v));
|
|
1047
1041
|
if (!drop.length) return void 0;
|
|
@@ -1246,7 +1240,7 @@ function Avatar({
|
|
|
1246
1240
|
...rest
|
|
1247
1241
|
}) {
|
|
1248
1242
|
const __twcStyles = useScopedStyles("twc-avatar-styles", AVATAR_CSS);
|
|
1249
|
-
const [errored, setErrored] =
|
|
1243
|
+
const [errored, setErrored] = React55__namespace.default.useState(false);
|
|
1250
1244
|
const cleanSrc = safeSrc(src);
|
|
1251
1245
|
const showImg = cleanSrc && !errored;
|
|
1252
1246
|
const _statusLabel = status ? statusLabel ?? statusLabels?.[status] ?? STATUS_LABELS[status] : void 0;
|
|
@@ -1328,28 +1322,28 @@ function Menu({
|
|
|
1328
1322
|
...rest
|
|
1329
1323
|
}) {
|
|
1330
1324
|
const __twcStyles = useScopedStyles("twc-menu-styles", MENU_CSS);
|
|
1331
|
-
const _tp =
|
|
1325
|
+
const _tp = React55__namespace.default.isValidElement(trigger) ? trigger.props : {};
|
|
1332
1326
|
const triggerDisabled = _tp.disabled === true || _tp["aria-disabled"] === true || _tp["aria-disabled"] === "true";
|
|
1333
|
-
const [openState, setOpenState] =
|
|
1334
|
-
const [render, setRender] =
|
|
1335
|
-
const [pos, setPos] =
|
|
1336
|
-
const [active, setActive] =
|
|
1337
|
-
const wrapRef =
|
|
1327
|
+
const [openState, setOpenState] = React55__namespace.default.useState(defaultOpen);
|
|
1328
|
+
const [render, setRender] = React55__namespace.default.useState(false);
|
|
1329
|
+
const [pos, setPos] = React55__namespace.default.useState(null);
|
|
1330
|
+
const [active, setActive] = React55__namespace.default.useState(-1);
|
|
1331
|
+
const wrapRef = React55__namespace.default.useRef(null);
|
|
1338
1332
|
useTriggerAudit(wrapRef, "Menu");
|
|
1339
|
-
const menuRef =
|
|
1340
|
-
const typeBufRef =
|
|
1341
|
-
const typeTimerRef =
|
|
1342
|
-
const menuId =
|
|
1333
|
+
const menuRef = React55__namespace.default.useRef(null);
|
|
1334
|
+
const typeBufRef = React55__namespace.default.useRef("");
|
|
1335
|
+
const typeTimerRef = React55__namespace.default.useRef(null);
|
|
1336
|
+
const menuId = React55__namespace.default.useId();
|
|
1343
1337
|
const headerId = `${menuId}-header`;
|
|
1344
1338
|
const controlled = openProp !== void 0;
|
|
1345
1339
|
const open = controlled ? !!openProp : openState;
|
|
1346
|
-
const openRef =
|
|
1340
|
+
const openRef = React55__namespace.default.useRef(open);
|
|
1347
1341
|
openRef.current = open;
|
|
1348
|
-
const controlledRef =
|
|
1342
|
+
const controlledRef = React55__namespace.default.useRef(controlled);
|
|
1349
1343
|
controlledRef.current = controlled;
|
|
1350
|
-
const onOpenChangeRef =
|
|
1344
|
+
const onOpenChangeRef = React55__namespace.default.useRef(onOpenChange);
|
|
1351
1345
|
onOpenChangeRef.current = onOpenChange;
|
|
1352
|
-
const setOpen =
|
|
1346
|
+
const setOpen = React55__namespace.default.useCallback((next) => {
|
|
1353
1347
|
const value = typeof next === "function" ? next(openRef.current) : next;
|
|
1354
1348
|
if (value === openRef.current) return;
|
|
1355
1349
|
if (!controlledRef.current) setOpenState(value);
|
|
@@ -1357,7 +1351,7 @@ function Menu({
|
|
|
1357
1351
|
}, []);
|
|
1358
1352
|
const RD = { createPortal: typeof reactDom.createPortal === "function" ? reactDom.createPortal : typeof window !== "undefined" && window.ReactDOM && window.ReactDOM.createPortal };
|
|
1359
1353
|
const interactiveIdx = items.map((it, i) => !it.separator && !it.heading ? i : -1).filter((i) => i >= 0);
|
|
1360
|
-
const place =
|
|
1354
|
+
const place = React55__namespace.default.useCallback(() => {
|
|
1361
1355
|
const t = wrapRef.current;
|
|
1362
1356
|
if (!t) return;
|
|
1363
1357
|
const r2 = t.getBoundingClientRect();
|
|
@@ -1373,7 +1367,7 @@ function Menu({
|
|
|
1373
1367
|
setPos({ top, bottom, left, width: w, flip, maxHeight: Math.max(120, avail) });
|
|
1374
1368
|
}, [align, width]);
|
|
1375
1369
|
const isTop = useLayer(open && render);
|
|
1376
|
-
|
|
1370
|
+
React55__namespace.default.useEffect(() => {
|
|
1377
1371
|
if (!open) return;
|
|
1378
1372
|
place();
|
|
1379
1373
|
const onMove = () => place();
|
|
@@ -1392,18 +1386,18 @@ function Menu({
|
|
|
1392
1386
|
document.removeEventListener("mousedown", onDown);
|
|
1393
1387
|
};
|
|
1394
1388
|
}, [open, place, isTop]);
|
|
1395
|
-
const kbdRef =
|
|
1396
|
-
|
|
1389
|
+
const kbdRef = React55__namespace.default.useRef(false);
|
|
1390
|
+
React55__namespace.default.useEffect(() => {
|
|
1397
1391
|
if (!open || !render || active < 0 || !kbdRef.current) return;
|
|
1398
1392
|
kbdRef.current = false;
|
|
1399
1393
|
const el = document.getElementById(`${menuId}-item-${active}`);
|
|
1400
1394
|
if (el) el.focus();
|
|
1401
1395
|
}, [open, render, active, menuId]);
|
|
1402
|
-
const focusTrigger =
|
|
1396
|
+
const focusTrigger = React55__namespace.default.useCallback(() => {
|
|
1403
1397
|
const t = wrapRef.current && wrapRef.current.querySelector('button, a[href], [role="button"], [tabindex]');
|
|
1404
1398
|
if (t) t.focus();
|
|
1405
1399
|
}, []);
|
|
1406
|
-
|
|
1400
|
+
React55__namespace.default.useEffect(() => {
|
|
1407
1401
|
if (open) return;
|
|
1408
1402
|
kbdRef.current = false;
|
|
1409
1403
|
setActive(-1);
|
|
@@ -1411,7 +1405,7 @@ function Menu({
|
|
|
1411
1405
|
if (!m || typeof document === "undefined" || !m.contains(document.activeElement)) return;
|
|
1412
1406
|
focusTrigger();
|
|
1413
1407
|
}, [open, focusTrigger]);
|
|
1414
|
-
|
|
1408
|
+
React55__namespace.default.useEffect(() => {
|
|
1415
1409
|
if (open) {
|
|
1416
1410
|
setRender(true);
|
|
1417
1411
|
return;
|
|
@@ -1544,8 +1538,8 @@ function Menu({
|
|
|
1544
1538
|
]
|
|
1545
1539
|
}
|
|
1546
1540
|
) : null;
|
|
1547
|
-
const fix =
|
|
1548
|
-
const triggerEl =
|
|
1541
|
+
const fix = React55__namespace.default.isValidElement(trigger) && !triggerIsControl(trigger) ? { role: "button" } : null;
|
|
1542
|
+
const triggerEl = React55__namespace.default.isValidElement(trigger) ? React55__namespace.default.cloneElement(trigger, {
|
|
1549
1543
|
onClick: (e) => {
|
|
1550
1544
|
trigger.props.onClick?.(e);
|
|
1551
1545
|
toggle();
|
|
@@ -1736,7 +1730,7 @@ function Breadcrumb({
|
|
|
1736
1730
|
...rest
|
|
1737
1731
|
}) {
|
|
1738
1732
|
const __twcStyles = useScopedStyles("twc-breadcrumb-styles", BREADCRUMB_CSS);
|
|
1739
|
-
const [expanded, setExpanded] =
|
|
1733
|
+
const [expanded, setExpanded] = React55__namespace.default.useState(false);
|
|
1740
1734
|
const sep = separator || /* @__PURE__ */ jsxRuntime.jsx(ChevronSep, {});
|
|
1741
1735
|
let display = items;
|
|
1742
1736
|
if (maxItems > 0 && items.length > maxItems && !expanded) {
|
|
@@ -1749,7 +1743,7 @@ function Breadcrumb({
|
|
|
1749
1743
|
__twcStyles,
|
|
1750
1744
|
display.map((it, i) => {
|
|
1751
1745
|
const last = i === display.length - 1;
|
|
1752
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1746
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(React55__namespace.default.Fragment, { children: [
|
|
1753
1747
|
it.ellipsis ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: "twc-breadcrumb__ellipsis", "aria-label": "Show more", onClick: () => setExpanded(true), children: "\u2026" }) : last ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1754
1748
|
"span",
|
|
1755
1749
|
{
|
|
@@ -1898,7 +1892,7 @@ function safeHref5(url) {
|
|
|
1898
1892
|
const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
|
|
1899
1893
|
return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
|
|
1900
1894
|
}
|
|
1901
|
-
|
|
1895
|
+
var Button = /* @__PURE__ */ React55__namespace.default.forwardRef(function Button2({
|
|
1902
1896
|
children,
|
|
1903
1897
|
variant = "solid",
|
|
1904
1898
|
tone = "primary",
|
|
@@ -1916,9 +1910,9 @@ function Button({
|
|
|
1916
1910
|
className = "",
|
|
1917
1911
|
onClick,
|
|
1918
1912
|
...rest
|
|
1919
|
-
}) {
|
|
1913
|
+
}, ref) {
|
|
1920
1914
|
const __twcStyles = useScopedStyles("twc-btn-styles", CSS2);
|
|
1921
|
-
const [ripples, setRipples] =
|
|
1915
|
+
const [ripples, setRipples] = React55__namespace.default.useState([]);
|
|
1922
1916
|
const Tag2 = as;
|
|
1923
1917
|
const inert = Tag2 === "a" && (disabled || loading);
|
|
1924
1918
|
const softDisabled = disabled && focusableWhenDisabled && !loading && Tag2 === "button";
|
|
@@ -1940,6 +1934,7 @@ function Button({
|
|
|
1940
1934
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1941
1935
|
Tag2,
|
|
1942
1936
|
{
|
|
1937
|
+
ref,
|
|
1943
1938
|
className: `twc-btn ${className}`,
|
|
1944
1939
|
"data-variant": variant,
|
|
1945
1940
|
"data-tone": tone,
|
|
@@ -1975,7 +1970,7 @@ function Button({
|
|
|
1975
1970
|
]
|
|
1976
1971
|
}
|
|
1977
1972
|
);
|
|
1978
|
-
}
|
|
1973
|
+
});
|
|
1979
1974
|
var UNITLESS = /* @__PURE__ */ new Set([
|
|
1980
1975
|
"animationIterationCount",
|
|
1981
1976
|
"aspectRatio",
|
|
@@ -2148,9 +2143,9 @@ function buildSx(sx, uid) {
|
|
|
2148
2143
|
return { flatStyle, css };
|
|
2149
2144
|
}
|
|
2150
2145
|
function useSx(sx) {
|
|
2151
|
-
const rawId =
|
|
2146
|
+
const rawId = React55__namespace.default.useId();
|
|
2152
2147
|
const uid = `sx${rawId.replace(/[^a-zA-Z0-9]/g, "")}`;
|
|
2153
|
-
const { flatStyle, css } =
|
|
2148
|
+
const { flatStyle, css } = React55__namespace.default.useMemo(() => buildSx(sx, uid), [sx, uid]);
|
|
2154
2149
|
const styleNode = useScopedStyles(`twc-sx-${uid}`, css);
|
|
2155
2150
|
return { flatStyle, styleNode, sxAttr: css ? uid : void 0 };
|
|
2156
2151
|
}
|
|
@@ -2286,14 +2281,14 @@ function Carousel({
|
|
|
2286
2281
|
...rest
|
|
2287
2282
|
}) {
|
|
2288
2283
|
const __twcStyles = useScopedStyles("twc-carousel-styles", CAROUSEL_CSS);
|
|
2289
|
-
const slides =
|
|
2284
|
+
const slides = React55__namespace.default.Children.toArray(children);
|
|
2290
2285
|
const count = slides.length;
|
|
2291
|
-
const [internal, setInternal] =
|
|
2286
|
+
const [internal, setInternal] = React55__namespace.default.useState(defaultIndex);
|
|
2292
2287
|
const index = indexProp !== void 0 ? indexProp : internal;
|
|
2293
|
-
const [paused, setPaused] =
|
|
2294
|
-
const [userPaused, setUserPaused] =
|
|
2295
|
-
const [prefersReduced, setPrefersReduced] =
|
|
2296
|
-
|
|
2288
|
+
const [paused, setPaused] = React55__namespace.default.useState(false);
|
|
2289
|
+
const [userPaused, setUserPaused] = React55__namespace.default.useState(false);
|
|
2290
|
+
const [prefersReduced, setPrefersReduced] = React55__namespace.default.useState(false);
|
|
2291
|
+
React55__namespace.default.useEffect(() => {
|
|
2297
2292
|
if (typeof window === "undefined" || !window.matchMedia) return void 0;
|
|
2298
2293
|
const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
2299
2294
|
const on = () => setPrefersReduced(mql.matches);
|
|
@@ -2301,16 +2296,16 @@ function Carousel({
|
|
|
2301
2296
|
mql.addEventListener("change", on);
|
|
2302
2297
|
return () => mql.removeEventListener("change", on);
|
|
2303
2298
|
}, []);
|
|
2304
|
-
const setIndex =
|
|
2299
|
+
const setIndex = React55__namespace.default.useCallback((i) => {
|
|
2305
2300
|
if (indexProp === void 0) setInternal(i);
|
|
2306
2301
|
onIndexChange?.(i);
|
|
2307
2302
|
}, [indexProp, onIndexChange]);
|
|
2308
|
-
const go =
|
|
2303
|
+
const go = React55__namespace.default.useCallback((i) => {
|
|
2309
2304
|
if (count <= 0) return;
|
|
2310
2305
|
setIndex(loop ? (i % count + count) % count : Math.min(Math.max(i, 0), count - 1));
|
|
2311
2306
|
}, [count, loop, setIndex]);
|
|
2312
2307
|
const autoRotating = autoPlay && !paused && !userPaused && !prefersReduced && count > 1;
|
|
2313
|
-
|
|
2308
|
+
React55__namespace.default.useEffect(() => {
|
|
2314
2309
|
if (!autoRotating) return void 0;
|
|
2315
2310
|
const t = setInterval(() => {
|
|
2316
2311
|
const next = loop ? (index + 1) % count : index + 1 >= count ? index : index + 1;
|
|
@@ -2570,7 +2565,7 @@ var CHART_BASE_CSS = `
|
|
|
2570
2565
|
}
|
|
2571
2566
|
`;
|
|
2572
2567
|
function ChartTable({ id, caption, columns, rows }) {
|
|
2573
|
-
const h =
|
|
2568
|
+
const h = React55__namespace.default.createElement;
|
|
2574
2569
|
return h(
|
|
2575
2570
|
"table",
|
|
2576
2571
|
{ className: "twc-chart__sr", id },
|
|
@@ -2600,7 +2595,7 @@ function ChartTable({ id, caption, columns, rows }) {
|
|
|
2600
2595
|
);
|
|
2601
2596
|
}
|
|
2602
2597
|
function ChartLegend({ items, onToggle, hidden, onFocus, onBlur }) {
|
|
2603
|
-
const h =
|
|
2598
|
+
const h = React55__namespace.default.createElement;
|
|
2604
2599
|
return h(
|
|
2605
2600
|
"div",
|
|
2606
2601
|
{ className: "twc-chart__legend" },
|
|
@@ -2631,23 +2626,23 @@ function ChartLegend({ items, onToggle, hidden, onFocus, onBlur }) {
|
|
|
2631
2626
|
);
|
|
2632
2627
|
}
|
|
2633
2628
|
function useChartTooltip() {
|
|
2634
|
-
const containerRef =
|
|
2635
|
-
const [tip, setTip] =
|
|
2636
|
-
const show =
|
|
2629
|
+
const containerRef = React55__namespace.default.useRef(null);
|
|
2630
|
+
const [tip, setTip] = React55__namespace.default.useState(null);
|
|
2631
|
+
const show = React55__namespace.default.useCallback((content, e) => {
|
|
2637
2632
|
const el = containerRef.current;
|
|
2638
2633
|
const rect = el && el.getBoundingClientRect ? el.getBoundingClientRect() : null;
|
|
2639
2634
|
const left = rect ? e.clientX - rect.left : 0;
|
|
2640
2635
|
const top = rect ? e.clientY - rect.top : 0;
|
|
2641
2636
|
setTip({ title: content.title, items: content.items || [], left, top });
|
|
2642
2637
|
}, []);
|
|
2643
|
-
const hide =
|
|
2638
|
+
const hide = React55__namespace.default.useCallback(() => setTip(null), []);
|
|
2644
2639
|
return { containerRef, tip, show, hide };
|
|
2645
2640
|
}
|
|
2646
2641
|
function ChartTooltip({ tip }) {
|
|
2647
|
-
const h =
|
|
2648
|
-
const ref =
|
|
2649
|
-
const [pos, setPos] =
|
|
2650
|
-
|
|
2642
|
+
const h = React55__namespace.default.createElement;
|
|
2643
|
+
const ref = React55__namespace.default.useRef(null);
|
|
2644
|
+
const [pos, setPos] = React55__namespace.default.useState({ dx: 0, below: false });
|
|
2645
|
+
React55__namespace.default.useLayoutEffect(() => {
|
|
2651
2646
|
const el = ref.current;
|
|
2652
2647
|
if (!tip || !el) return;
|
|
2653
2648
|
const parent = el.offsetParent;
|
|
@@ -2724,17 +2719,17 @@ function Chart({
|
|
|
2724
2719
|
}) {
|
|
2725
2720
|
const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
|
|
2726
2721
|
const styles = useScopedStyles("twc-chart-styles", CHART_CSS);
|
|
2727
|
-
const uid =
|
|
2722
|
+
const uid = React55__namespace.default.useId();
|
|
2728
2723
|
const gid = uid.replace(/[^a-zA-Z0-9]/g, "");
|
|
2729
2724
|
const tableId = tableFallback ? `${uid}-table` : void 0;
|
|
2730
2725
|
const { containerRef, tip, show, hide } = useChartTooltip();
|
|
2731
|
-
const [hidden, setHidden] =
|
|
2732
|
-
const [focusSeries, setFocusSeries] =
|
|
2733
|
-
const [selected, setSelected] =
|
|
2734
|
-
const [hoverIdx, setHoverIdx] =
|
|
2735
|
-
const [zoom, setZoom] =
|
|
2736
|
-
const [drag, setDrag] =
|
|
2737
|
-
const svgRef =
|
|
2726
|
+
const [hidden, setHidden] = React55__namespace.default.useState(() => /* @__PURE__ */ new Set());
|
|
2727
|
+
const [focusSeries, setFocusSeries] = React55__namespace.default.useState(null);
|
|
2728
|
+
const [selected, setSelected] = React55__namespace.default.useState(null);
|
|
2729
|
+
const [hoverIdx, setHoverIdx] = React55__namespace.default.useState(null);
|
|
2730
|
+
const [zoom, setZoom] = React55__namespace.default.useState(null);
|
|
2731
|
+
const [drag, setDrag] = React55__namespace.default.useState(null);
|
|
2732
|
+
const svgRef = React55__namespace.default.useRef(null);
|
|
2738
2733
|
const isBar = type === "bar" || type === "column";
|
|
2739
2734
|
const isArea = type === "area";
|
|
2740
2735
|
const crv = smooth ? "smooth" : curve;
|
|
@@ -2839,7 +2834,7 @@ function Chart({
|
|
|
2839
2834
|
onDataClick({ label: d.label, series: null, seriesIndex: -1, value: void 0, index: baseIdx + idx, row: d });
|
|
2840
2835
|
selectMark(`${idx}:*`);
|
|
2841
2836
|
};
|
|
2842
|
-
|
|
2837
|
+
React55__namespace.default.useEffect(() => {
|
|
2843
2838
|
if (!zoomable) return void 0;
|
|
2844
2839
|
const svg = svgRef.current;
|
|
2845
2840
|
if (!svg) return void 0;
|
|
@@ -3149,12 +3144,12 @@ function PieChart({
|
|
|
3149
3144
|
}) {
|
|
3150
3145
|
const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
|
|
3151
3146
|
const styles = useScopedStyles("twc-piechart-styles", CHART_CSS2);
|
|
3152
|
-
const uid =
|
|
3147
|
+
const uid = React55__namespace.default.useId();
|
|
3153
3148
|
const tableId = tableFallback ? `${uid}-table` : void 0;
|
|
3154
3149
|
const { containerRef, tip, show, hide } = useChartTooltip();
|
|
3155
|
-
const [active, setActive] =
|
|
3156
|
-
const [focus, setFocus] =
|
|
3157
|
-
const [selected, setSelected] =
|
|
3150
|
+
const [active, setActive] = React55__namespace.default.useState(null);
|
|
3151
|
+
const [focus, setFocus] = React55__namespace.default.useState(null);
|
|
3152
|
+
const [selected, setSelected] = React55__namespace.default.useState(null);
|
|
3158
3153
|
const clickable = !!onDataClick;
|
|
3159
3154
|
const rows = data || [];
|
|
3160
3155
|
const fmt = valueFormat || fmtNumber;
|
|
@@ -3303,11 +3298,11 @@ function Gauge({
|
|
|
3303
3298
|
}) {
|
|
3304
3299
|
const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
|
|
3305
3300
|
const styles = useScopedStyles("twc-gauge-styles", GAUGE_CSS);
|
|
3306
|
-
const uid =
|
|
3301
|
+
const uid = React55__namespace.default.useId();
|
|
3307
3302
|
const tableId = tableFallback ? `${uid}-table` : void 0;
|
|
3308
3303
|
const { containerRef, tip, show, hide } = useChartTooltip();
|
|
3309
|
-
const [selected, setSelected] =
|
|
3310
|
-
const [focus, setFocus] =
|
|
3304
|
+
const [selected, setSelected] = React55__namespace.default.useState(null);
|
|
3305
|
+
const [focus, setFocus] = React55__namespace.default.useState(null);
|
|
3311
3306
|
const fmt = valueFormat || ((n) => String(Math.round(Number(n) || 0)));
|
|
3312
3307
|
const cx = size / 2, cy = size / 2;
|
|
3313
3308
|
const span = endAngle - startAngle;
|
|
@@ -3468,11 +3463,11 @@ function Sparkline({
|
|
|
3468
3463
|
}) {
|
|
3469
3464
|
const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
|
|
3470
3465
|
const styles = useScopedStyles("twc-sparkline-styles", SPARK_CSS);
|
|
3471
|
-
const uid =
|
|
3466
|
+
const uid = React55__namespace.default.useId();
|
|
3472
3467
|
const tableId = tableFallback ? `${uid}-table` : void 0;
|
|
3473
3468
|
const { containerRef, tip, show, hide } = useChartTooltip();
|
|
3474
|
-
const [hover, setHover] =
|
|
3475
|
-
const [selected, setSelected] =
|
|
3469
|
+
const [hover, setHover] = React55__namespace.default.useState(null);
|
|
3470
|
+
const [selected, setSelected] = React55__namespace.default.useState(null);
|
|
3476
3471
|
const clickable = !!onDataClick;
|
|
3477
3472
|
const kind = area ? "area" : type;
|
|
3478
3473
|
const isBar = kind === "bar";
|
|
@@ -3672,17 +3667,17 @@ function ScatterChart({
|
|
|
3672
3667
|
}) {
|
|
3673
3668
|
const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
|
|
3674
3669
|
const styles = useScopedStyles("twc-scatter-styles", SCATTER_CSS);
|
|
3675
|
-
const uid =
|
|
3670
|
+
const uid = React55__namespace.default.useId();
|
|
3676
3671
|
const gid = uid.replace(/[^a-zA-Z0-9]/g, "");
|
|
3677
3672
|
const clipId = `twc-sc-clip-${gid}`;
|
|
3678
3673
|
const tableId = tableFallback ? `${uid}-table` : void 0;
|
|
3679
3674
|
const { containerRef, tip, show, hide } = useChartTooltip();
|
|
3680
|
-
const [focus, setFocus] =
|
|
3681
|
-
const [selected, setSelected] =
|
|
3682
|
-
const [zoom, setZoom] =
|
|
3683
|
-
const [drag, setDrag] =
|
|
3684
|
-
const svgRef =
|
|
3685
|
-
const movedRef =
|
|
3675
|
+
const [focus, setFocus] = React55__namespace.default.useState(null);
|
|
3676
|
+
const [selected, setSelected] = React55__namespace.default.useState(null);
|
|
3677
|
+
const [zoom, setZoom] = React55__namespace.default.useState(null);
|
|
3678
|
+
const [drag, setDrag] = React55__namespace.default.useState(null);
|
|
3679
|
+
const svgRef = React55__namespace.default.useRef(null);
|
|
3680
|
+
const movedRef = React55__namespace.default.useRef(false);
|
|
3686
3681
|
const list = Array.isArray(series) ? series : [];
|
|
3687
3682
|
const vFmt = valueFormat || fmtNumber;
|
|
3688
3683
|
const xFmt = xFormat || vFmt;
|
|
@@ -3855,7 +3850,7 @@ function ScatterChart({
|
|
|
3855
3850
|
selectPoint(hit.key);
|
|
3856
3851
|
}
|
|
3857
3852
|
};
|
|
3858
|
-
|
|
3853
|
+
React55__namespace.default.useEffect(() => {
|
|
3859
3854
|
if (!canZoom) return void 0;
|
|
3860
3855
|
const svg = svgRef.current;
|
|
3861
3856
|
if (!svg) return void 0;
|
|
@@ -4041,11 +4036,11 @@ function RadarChart({
|
|
|
4041
4036
|
}) {
|
|
4042
4037
|
const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
|
|
4043
4038
|
const styles = useScopedStyles("twc-radarchart-styles", CHART_CSS3);
|
|
4044
|
-
const uid =
|
|
4039
|
+
const uid = React55__namespace.default.useId();
|
|
4045
4040
|
const tableId = tableFallback ? `${uid}-table` : void 0;
|
|
4046
4041
|
const { containerRef, tip, show, hide } = useChartTooltip();
|
|
4047
|
-
const [focus, setFocus] =
|
|
4048
|
-
const [selected, setSelected] =
|
|
4042
|
+
const [focus, setFocus] = React55__namespace.default.useState(null);
|
|
4043
|
+
const [selected, setSelected] = React55__namespace.default.useState(null);
|
|
4049
4044
|
const rows = data || [];
|
|
4050
4045
|
const keys = series && series.length ? series : ["value"];
|
|
4051
4046
|
const fmt = valueFormat || fmtNumber;
|
|
@@ -4195,12 +4190,12 @@ function PolarAreaChart({
|
|
|
4195
4190
|
}) {
|
|
4196
4191
|
const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
|
|
4197
4192
|
const styles = useScopedStyles("twc-polar-styles", CHART_CSS4);
|
|
4198
|
-
const uid =
|
|
4193
|
+
const uid = React55__namespace.default.useId();
|
|
4199
4194
|
const tableId = tableFallback ? `${uid}-table` : void 0;
|
|
4200
4195
|
const { containerRef, tip, show, hide } = useChartTooltip();
|
|
4201
|
-
const [active, setActive] =
|
|
4202
|
-
const [focus, setFocus] =
|
|
4203
|
-
const [selected, setSelected] =
|
|
4196
|
+
const [active, setActive] = React55__namespace.default.useState(null);
|
|
4197
|
+
const [focus, setFocus] = React55__namespace.default.useState(null);
|
|
4198
|
+
const [selected, setSelected] = React55__namespace.default.useState(null);
|
|
4204
4199
|
const rows = data || [];
|
|
4205
4200
|
const n = rows.length;
|
|
4206
4201
|
const fmt = valueFormat || fmtNumber;
|
|
@@ -4350,15 +4345,15 @@ function Heatmap({
|
|
|
4350
4345
|
}) {
|
|
4351
4346
|
const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
|
|
4352
4347
|
const styles = useScopedStyles("twc-heatmap-styles", HEATMAP_CSS);
|
|
4353
|
-
const uid =
|
|
4348
|
+
const uid = React55__namespace.default.useId();
|
|
4354
4349
|
const tableId = tableFallback ? `${uid}-table` : void 0;
|
|
4355
4350
|
const { containerRef, tip, show, hide } = useChartTooltip();
|
|
4356
|
-
const [hovered, setHovered] =
|
|
4357
|
-
const [selected, setSelected] =
|
|
4358
|
-
const [zoom, setZoom] =
|
|
4359
|
-
const [drag, setDrag] =
|
|
4360
|
-
const svgRef =
|
|
4361
|
-
const movedRef =
|
|
4351
|
+
const [hovered, setHovered] = React55__namespace.default.useState(null);
|
|
4352
|
+
const [selected, setSelected] = React55__namespace.default.useState(null);
|
|
4353
|
+
const [zoom, setZoom] = React55__namespace.default.useState(null);
|
|
4354
|
+
const [drag, setDrag] = React55__namespace.default.useState(null);
|
|
4355
|
+
const svgRef = React55__namespace.default.useRef(null);
|
|
4356
|
+
const movedRef = React55__namespace.default.useRef(false);
|
|
4362
4357
|
const clickable = !!onDataClick;
|
|
4363
4358
|
const selectMark = (key) => setSelected((s) => s === key ? null : key);
|
|
4364
4359
|
const rows = Array.isArray(data) ? data : [];
|
|
@@ -4521,7 +4516,7 @@ function Heatmap({
|
|
|
4521
4516
|
selectMark(cell.key);
|
|
4522
4517
|
}
|
|
4523
4518
|
};
|
|
4524
|
-
|
|
4519
|
+
React55__namespace.default.useEffect(() => {
|
|
4525
4520
|
if (!canZoom) return void 0;
|
|
4526
4521
|
const svg = svgRef.current;
|
|
4527
4522
|
if (!svg) return void 0;
|
|
@@ -4691,11 +4686,11 @@ function FunnelChart({
|
|
|
4691
4686
|
}) {
|
|
4692
4687
|
const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
|
|
4693
4688
|
const styles = useScopedStyles("twc-funnel-styles", FUNNEL_CSS);
|
|
4694
|
-
const uid =
|
|
4689
|
+
const uid = React55__namespace.default.useId();
|
|
4695
4690
|
const tableId = tableFallback ? `${uid}-table` : void 0;
|
|
4696
4691
|
const { containerRef, tip, show, hide } = useChartTooltip();
|
|
4697
|
-
const [active, setActive] =
|
|
4698
|
-
const [selected, setSelected] =
|
|
4692
|
+
const [active, setActive] = React55__namespace.default.useState(null);
|
|
4693
|
+
const [selected, setSelected] = React55__namespace.default.useState(null);
|
|
4699
4694
|
const clickable = !!onDataClick;
|
|
4700
4695
|
const rows = data || [];
|
|
4701
4696
|
const n = rows.length;
|
|
@@ -4813,11 +4808,11 @@ function Treemap({
|
|
|
4813
4808
|
}) {
|
|
4814
4809
|
const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
|
|
4815
4810
|
const styles = useScopedStyles("twc-treemap-styles", TREEMAP_CSS);
|
|
4816
|
-
const uid =
|
|
4811
|
+
const uid = React55__namespace.default.useId();
|
|
4817
4812
|
const tableId = tableFallback ? `${uid}-table` : void 0;
|
|
4818
4813
|
const { containerRef, tip, show, hide } = useChartTooltip();
|
|
4819
|
-
const [hovered, setHovered] =
|
|
4820
|
-
const [selected, setSelected] =
|
|
4814
|
+
const [hovered, setHovered] = React55__namespace.default.useState(null);
|
|
4815
|
+
const [selected, setSelected] = React55__namespace.default.useState(null);
|
|
4821
4816
|
const rows = data || [];
|
|
4822
4817
|
const fmt = valueFormat || fmtNumber;
|
|
4823
4818
|
const svgAriaLabel = ariaLabelProp ?? ariaLabel ?? "treemap";
|
|
@@ -4975,13 +4970,13 @@ function Candlestick({
|
|
|
4975
4970
|
}) {
|
|
4976
4971
|
const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
|
|
4977
4972
|
const styles = useScopedStyles("twc-candlestick-styles", CANDLE_CSS);
|
|
4978
|
-
const uid =
|
|
4973
|
+
const uid = React55__namespace.default.useId();
|
|
4979
4974
|
const tableId = tableFallback ? `${uid}-table` : void 0;
|
|
4980
4975
|
const { containerRef, tip, show, hide } = useChartTooltip();
|
|
4981
|
-
const [selected, setSelected] =
|
|
4982
|
-
const [zoom, setZoom] =
|
|
4983
|
-
const [drag, setDrag] =
|
|
4984
|
-
const svgRef =
|
|
4976
|
+
const [selected, setSelected] = React55__namespace.default.useState(null);
|
|
4977
|
+
const [zoom, setZoom] = React55__namespace.default.useState(null);
|
|
4978
|
+
const [drag, setDrag] = React55__namespace.default.useState(null);
|
|
4979
|
+
const svgRef = React55__namespace.default.useRef(null);
|
|
4985
4980
|
const fmt = valueFormat || fmtNumber;
|
|
4986
4981
|
const clickable = !!onDataClick;
|
|
4987
4982
|
const allRows = data || [];
|
|
@@ -5082,7 +5077,7 @@ function Candlestick({
|
|
|
5082
5077
|
clickCandle(rows[idx], baseIdx + idx);
|
|
5083
5078
|
selectMark(baseIdx + idx);
|
|
5084
5079
|
};
|
|
5085
|
-
|
|
5080
|
+
React55__namespace.default.useEffect(() => {
|
|
5086
5081
|
if (!zoomable) return void 0;
|
|
5087
5082
|
const svg = svgRef.current;
|
|
5088
5083
|
if (!svg) return void 0;
|
|
@@ -5278,13 +5273,13 @@ function Boxplot({
|
|
|
5278
5273
|
}) {
|
|
5279
5274
|
const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
|
|
5280
5275
|
const styles = useScopedStyles("twc-boxplot-styles", CHART_CSS5);
|
|
5281
|
-
const uid =
|
|
5276
|
+
const uid = React55__namespace.default.useId();
|
|
5282
5277
|
const tableId = tableFallback ? `${uid}-table` : void 0;
|
|
5283
5278
|
const { containerRef, tip, show, hide } = useChartTooltip();
|
|
5284
|
-
const [selected, setSelected] =
|
|
5285
|
-
const [zoom, setZoom] =
|
|
5286
|
-
const [drag, setDrag] =
|
|
5287
|
-
const svgRef =
|
|
5279
|
+
const [selected, setSelected] = React55__namespace.default.useState(null);
|
|
5280
|
+
const [zoom, setZoom] = React55__namespace.default.useState(null);
|
|
5281
|
+
const [drag, setDrag] = React55__namespace.default.useState(null);
|
|
5282
|
+
const svgRef = React55__namespace.default.useRef(null);
|
|
5288
5283
|
const allRows = data || [];
|
|
5289
5284
|
const baseIdx = zoom ? zoom.s : 0;
|
|
5290
5285
|
const rows = zoom ? allRows.slice(zoom.s, zoom.e + 1) : allRows;
|
|
@@ -5384,7 +5379,7 @@ function Boxplot({
|
|
|
5384
5379
|
if (idx == null) return;
|
|
5385
5380
|
clickBox(rows[idx], idx);
|
|
5386
5381
|
};
|
|
5387
|
-
|
|
5382
|
+
React55__namespace.default.useEffect(() => {
|
|
5388
5383
|
if (!zoomable) return void 0;
|
|
5389
5384
|
const svg = svgRef.current;
|
|
5390
5385
|
if (!svg) return void 0;
|
|
@@ -5545,13 +5540,13 @@ function RangeChart({
|
|
|
5545
5540
|
}) {
|
|
5546
5541
|
const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
|
|
5547
5542
|
const styles = useScopedStyles("twc-rangechart-styles", RANGE_CSS);
|
|
5548
|
-
const uid =
|
|
5543
|
+
const uid = React55__namespace.default.useId();
|
|
5549
5544
|
const tableId = tableFallback ? `${uid}-table` : void 0;
|
|
5550
5545
|
const { containerRef, tip, show, hide } = useChartTooltip();
|
|
5551
|
-
const [selected, setSelected] =
|
|
5552
|
-
const [zoom, setZoom] =
|
|
5553
|
-
const [drag, setDrag] =
|
|
5554
|
-
const svgRef =
|
|
5546
|
+
const [selected, setSelected] = React55__namespace.default.useState(null);
|
|
5547
|
+
const [zoom, setZoom] = React55__namespace.default.useState(null);
|
|
5548
|
+
const [drag, setDrag] = React55__namespace.default.useState(null);
|
|
5549
|
+
const svgRef = React55__namespace.default.useRef(null);
|
|
5555
5550
|
const isArea = type === "area";
|
|
5556
5551
|
const clickable = !!onDataClick;
|
|
5557
5552
|
const fmt = valueFormat || fmtNumber;
|
|
@@ -5646,7 +5641,7 @@ function RangeChart({
|
|
|
5646
5641
|
if (idx == null) return;
|
|
5647
5642
|
clickAt(idx);
|
|
5648
5643
|
};
|
|
5649
|
-
|
|
5644
|
+
React55__namespace.default.useEffect(() => {
|
|
5650
5645
|
if (!zoomable) return void 0;
|
|
5651
5646
|
const svg = svgRef.current;
|
|
5652
5647
|
if (!svg) return void 0;
|
|
@@ -5834,7 +5829,25 @@ function RangeChart({
|
|
|
5834
5829
|
function labelText7(label) {
|
|
5835
5830
|
return typeof label === "string" || typeof label === "number" ? String(label) : "";
|
|
5836
5831
|
}
|
|
5837
|
-
function
|
|
5832
|
+
function useMergedRef(...refs) {
|
|
5833
|
+
return React55__namespace.useCallback((node) => {
|
|
5834
|
+
const cleanups = [];
|
|
5835
|
+
for (const r2 of refs) {
|
|
5836
|
+
if (typeof r2 === "function") {
|
|
5837
|
+
const cleanup = r2(node);
|
|
5838
|
+
if (typeof cleanup === "function") cleanups.push(cleanup);
|
|
5839
|
+
} else if (r2 && typeof r2 === "object") {
|
|
5840
|
+
r2.current = node;
|
|
5841
|
+
}
|
|
5842
|
+
}
|
|
5843
|
+
if (cleanups.length === 0) return void 0;
|
|
5844
|
+
return () => {
|
|
5845
|
+
for (const r2 of refs) if (r2 && typeof r2 === "object") r2.current = null;
|
|
5846
|
+
for (const cleanup of cleanups) cleanup();
|
|
5847
|
+
};
|
|
5848
|
+
}, refs);
|
|
5849
|
+
}
|
|
5850
|
+
var Checkbox = /* @__PURE__ */ React55__namespace.default.forwardRef(function Checkbox2({
|
|
5838
5851
|
label,
|
|
5839
5852
|
description,
|
|
5840
5853
|
error,
|
|
@@ -5849,7 +5862,7 @@ function Checkbox({
|
|
|
5849
5862
|
className = "",
|
|
5850
5863
|
onChange,
|
|
5851
5864
|
...rest
|
|
5852
|
-
}) {
|
|
5865
|
+
}, forwardedRef) {
|
|
5853
5866
|
const __twcStyles = useScopedStyles("twc-checkbox-styles", `
|
|
5854
5867
|
.twc-check { display: inline-flex; align-items: flex-start; gap: var(--space-2-5); cursor: pointer; font-family: var(--font-sans); }
|
|
5855
5868
|
/* tone \u2192 accent set (default primary). Mirrors Button's --_accent model; Badge's tone vocabulary. */
|
|
@@ -5890,13 +5903,14 @@ function Checkbox({
|
|
|
5890
5903
|
.twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
|
|
5891
5904
|
.twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
|
|
5892
5905
|
`);
|
|
5893
|
-
const autoId =
|
|
5906
|
+
const autoId = React55__namespace.default.useId();
|
|
5894
5907
|
const fieldId = id || autoId;
|
|
5895
5908
|
const errId = `${fieldId}-error`;
|
|
5896
5909
|
const invalid = Boolean(error);
|
|
5897
|
-
const ref =
|
|
5910
|
+
const ref = React55__namespace.default.useRef(null);
|
|
5911
|
+
const setRef = useMergedRef(ref, forwardedRef);
|
|
5898
5912
|
const mixed = indeterminate && !checked;
|
|
5899
|
-
|
|
5913
|
+
React55__namespace.default.useEffect(() => {
|
|
5900
5914
|
if (ref.current) ref.current.indeterminate = mixed;
|
|
5901
5915
|
}, [mixed]);
|
|
5902
5916
|
if (process.env.NODE_ENV !== "production" && !label && !description && !rest["aria-label"] && !rest["aria-labelledby"]) {
|
|
@@ -5908,7 +5922,7 @@ function Checkbox({
|
|
|
5908
5922
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5909
5923
|
"input",
|
|
5910
5924
|
{
|
|
5911
|
-
ref,
|
|
5925
|
+
ref: setRef,
|
|
5912
5926
|
id: fieldId,
|
|
5913
5927
|
type: "checkbox",
|
|
5914
5928
|
className: "twc-check__input",
|
|
@@ -5938,7 +5952,7 @@ function Checkbox({
|
|
|
5938
5952
|
control,
|
|
5939
5953
|
/* @__PURE__ */ jsxRuntime.jsx("span", { id: errId, className: "twc-field__error", children: error })
|
|
5940
5954
|
] });
|
|
5941
|
-
}
|
|
5955
|
+
});
|
|
5942
5956
|
var FIELD_CSS = `
|
|
5943
5957
|
.twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
|
|
5944
5958
|
.twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
|
|
@@ -6056,22 +6070,22 @@ function ColorPicker({
|
|
|
6056
6070
|
}) {
|
|
6057
6071
|
const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS);
|
|
6058
6072
|
const __twcStyles1 = useScopedStyles("twc-colorpicker-styles", COLORPICKER_CSS);
|
|
6059
|
-
const [internal, setInternal] =
|
|
6073
|
+
const [internal, setInternal] = React55__namespace.default.useState(defaultValue);
|
|
6060
6074
|
const hex = (value !== void 0 ? value : internal) || "#000000";
|
|
6061
6075
|
const hexRe = alpha ? /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i : /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
|
|
6062
|
-
const lastValidRef =
|
|
6076
|
+
const lastValidRef = React55__namespace.default.useRef(hex);
|
|
6063
6077
|
if (hexRe.test(hex)) lastValidRef.current = hex;
|
|
6064
|
-
const [open, setOpen] =
|
|
6065
|
-
const [hsv, setHsv] =
|
|
6066
|
-
const [coords, setCoords] =
|
|
6067
|
-
const wrapRef =
|
|
6068
|
-
const triggerRef =
|
|
6069
|
-
const popRef =
|
|
6070
|
-
const areaRef =
|
|
6071
|
-
const hueRef =
|
|
6072
|
-
const alphaRef =
|
|
6078
|
+
const [open, setOpen] = React55__namespace.default.useState(false);
|
|
6079
|
+
const [hsv, setHsv] = React55__namespace.default.useState(() => hexToHsv(hex) || { h: 239, s: 60, v: 94, a: 1 });
|
|
6080
|
+
const [coords, setCoords] = React55__namespace.default.useState(null);
|
|
6081
|
+
const wrapRef = React55__namespace.default.useRef(null);
|
|
6082
|
+
const triggerRef = React55__namespace.default.useRef(null);
|
|
6083
|
+
const popRef = React55__namespace.default.useRef(null);
|
|
6084
|
+
const areaRef = React55__namespace.default.useRef(null);
|
|
6085
|
+
const hueRef = React55__namespace.default.useRef(null);
|
|
6086
|
+
const alphaRef = React55__namespace.default.useRef(null);
|
|
6073
6087
|
const POP_W = 240;
|
|
6074
|
-
const place =
|
|
6088
|
+
const place = React55__namespace.default.useCallback(() => {
|
|
6075
6089
|
const el = triggerRef.current;
|
|
6076
6090
|
if (!el) return;
|
|
6077
6091
|
const r2 = el.getBoundingClientRect();
|
|
@@ -6082,7 +6096,7 @@ function ColorPicker({
|
|
|
6082
6096
|
left = Math.max(8, left);
|
|
6083
6097
|
setCoords({ left, top: flip ? void 0 : Math.round(r2.bottom + 6), bottom: flip ? Math.round(vh - r2.top + 6) : void 0 });
|
|
6084
6098
|
}, []);
|
|
6085
|
-
|
|
6099
|
+
React55__namespace.default.useEffect(() => {
|
|
6086
6100
|
if (!open) return void 0;
|
|
6087
6101
|
place();
|
|
6088
6102
|
const onMove = () => place();
|
|
@@ -6100,17 +6114,17 @@ function ColorPicker({
|
|
|
6100
6114
|
ro?.disconnect();
|
|
6101
6115
|
};
|
|
6102
6116
|
}, [open, place]);
|
|
6103
|
-
const labelId =
|
|
6117
|
+
const labelId = React55__namespace.default.useId();
|
|
6104
6118
|
const descId = `${labelId}-desc`;
|
|
6105
6119
|
const invalid = Boolean(error);
|
|
6106
|
-
|
|
6120
|
+
React55__namespace.default.useEffect(() => {
|
|
6107
6121
|
if (disabled) setOpen(false);
|
|
6108
6122
|
}, [disabled]);
|
|
6109
|
-
|
|
6123
|
+
React55__namespace.default.useEffect(() => {
|
|
6110
6124
|
const v = hexToHsv(hex);
|
|
6111
6125
|
if (v && hsvToHex(v.h, v.s, v.v).toLowerCase() !== hsvToHex(hsv.h, hsv.s, hsv.v).toLowerCase()) setHsv(v);
|
|
6112
6126
|
}, [hex]);
|
|
6113
|
-
|
|
6127
|
+
React55__namespace.default.useEffect(() => {
|
|
6114
6128
|
if (!open) return;
|
|
6115
6129
|
const onDown = (e) => {
|
|
6116
6130
|
if (wrapRef.current && wrapRef.current.contains(e.target)) return;
|
|
@@ -6460,7 +6474,7 @@ function ensureVisible(list, el) {
|
|
|
6460
6474
|
if (top < list.scrollTop) list.scrollTop = top - 4;
|
|
6461
6475
|
else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight + 4;
|
|
6462
6476
|
}
|
|
6463
|
-
|
|
6477
|
+
var Combobox = /* @__PURE__ */ React55__namespace.default.forwardRef(function Combobox2({
|
|
6464
6478
|
label,
|
|
6465
6479
|
hint,
|
|
6466
6480
|
error,
|
|
@@ -6493,38 +6507,39 @@ function Combobox({
|
|
|
6493
6507
|
onFocus,
|
|
6494
6508
|
onKeyDown,
|
|
6495
6509
|
...rest
|
|
6496
|
-
}) {
|
|
6510
|
+
}, ref) {
|
|
6497
6511
|
const __twcStyles = useScopedStyles("twc-combo-styles", COMBO_CSS);
|
|
6498
6512
|
if (virtualizedProp && (wrapOptions || renderOption)) warnOnce("combobox-var-height-virtualized", "twico-ui Combobox: `wrapOptions`/`renderOption` disable `virtualized` \u2014 those rows aren't a fixed height.");
|
|
6499
6513
|
const virtualized = virtualizedProp && !wrapOptions && !renderOption;
|
|
6500
|
-
const groups =
|
|
6501
|
-
const flat =
|
|
6502
|
-
const autoId =
|
|
6514
|
+
const groups = React55__namespace.default.useMemo(() => normalizeGroups(options), [options]);
|
|
6515
|
+
const flat = React55__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
|
|
6516
|
+
const autoId = React55__namespace.default.useId();
|
|
6503
6517
|
const fieldId = id || autoId;
|
|
6504
|
-
const [internal, setInternal] =
|
|
6518
|
+
const [internal, setInternal] = React55__namespace.default.useState(defaultValue);
|
|
6505
6519
|
const current = value !== void 0 ? value : internal;
|
|
6506
6520
|
const selected = flat.find((o) => o.value === current);
|
|
6507
|
-
const [open, setOpen] =
|
|
6508
|
-
const [query, setQuery] =
|
|
6509
|
-
const [active, setActive] =
|
|
6510
|
-
const [coords, setCoords] =
|
|
6511
|
-
const [scrollTop, setScrollTop] =
|
|
6512
|
-
const [listH, setListH] =
|
|
6513
|
-
const wrapRef =
|
|
6514
|
-
const controlRef =
|
|
6515
|
-
const inputRef =
|
|
6516
|
-
const
|
|
6517
|
-
const
|
|
6518
|
-
const
|
|
6519
|
-
const
|
|
6521
|
+
const [open, setOpen] = React55__namespace.default.useState(false);
|
|
6522
|
+
const [query, setQuery] = React55__namespace.default.useState("");
|
|
6523
|
+
const [active, setActive] = React55__namespace.default.useState(0);
|
|
6524
|
+
const [coords, setCoords] = React55__namespace.default.useState(null);
|
|
6525
|
+
const [scrollTop, setScrollTop] = React55__namespace.default.useState(0);
|
|
6526
|
+
const [listH, setListH] = React55__namespace.default.useState(260);
|
|
6527
|
+
const wrapRef = React55__namespace.default.useRef(null);
|
|
6528
|
+
const controlRef = React55__namespace.default.useRef(null);
|
|
6529
|
+
const inputRef = React55__namespace.default.useRef(null);
|
|
6530
|
+
const setInputRef = useMergedRef(inputRef, ref);
|
|
6531
|
+
const popRef = React55__namespace.default.useRef(null);
|
|
6532
|
+
const listRef = React55__namespace.default.useRef(null);
|
|
6533
|
+
const activeRef = React55__namespace.default.useRef(null);
|
|
6534
|
+
const fGroups = React55__namespace.default.useMemo(() => {
|
|
6520
6535
|
const q = query.trim();
|
|
6521
6536
|
const fn = filter === false ? null : typeof filter === "function" ? filter : matches;
|
|
6522
6537
|
return groups.map((g) => ({ group: g.group, options: fn ? g.options.filter((o) => fn(o, q)) : g.options })).filter((g) => g.options.length);
|
|
6523
6538
|
}, [groups, query, filter]);
|
|
6524
|
-
const visible =
|
|
6525
|
-
const rowH =
|
|
6539
|
+
const visible = React55__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
|
|
6540
|
+
const rowH = React55__namespace.default.useMemo(() => visible.some((o) => o.description) ? 48 : 36, [visible]);
|
|
6526
6541
|
const GROUP_H = 30;
|
|
6527
|
-
const { rows, totalH } =
|
|
6542
|
+
const { rows, totalH } = React55__namespace.default.useMemo(() => {
|
|
6528
6543
|
if (!virtualized) return { rows: [], totalH: 0 };
|
|
6529
6544
|
const rows2 = [];
|
|
6530
6545
|
let off = 0;
|
|
@@ -6550,7 +6565,7 @@ function Combobox({
|
|
|
6550
6565
|
}
|
|
6551
6566
|
return from;
|
|
6552
6567
|
};
|
|
6553
|
-
const place =
|
|
6568
|
+
const place = React55__namespace.default.useCallback(() => {
|
|
6554
6569
|
const el = controlRef.current;
|
|
6555
6570
|
if (!el) return;
|
|
6556
6571
|
const r2 = el.getBoundingClientRect();
|
|
@@ -6565,7 +6580,7 @@ function Combobox({
|
|
|
6565
6580
|
flip
|
|
6566
6581
|
});
|
|
6567
6582
|
}, [placement, minWidth]);
|
|
6568
|
-
|
|
6583
|
+
React55__namespace.default.useEffect(() => {
|
|
6569
6584
|
if (!open || !portal) return;
|
|
6570
6585
|
place();
|
|
6571
6586
|
const onMove = () => place();
|
|
@@ -6583,7 +6598,7 @@ function Combobox({
|
|
|
6583
6598
|
ro?.disconnect();
|
|
6584
6599
|
};
|
|
6585
6600
|
}, [open, portal, place]);
|
|
6586
|
-
|
|
6601
|
+
React55__namespace.default.useEffect(() => {
|
|
6587
6602
|
if (!open) return;
|
|
6588
6603
|
const onDown = (e) => {
|
|
6589
6604
|
if (wrapRef.current && wrapRef.current.contains(e.target)) return;
|
|
@@ -6593,33 +6608,33 @@ function Combobox({
|
|
|
6593
6608
|
document.addEventListener("mousedown", onDown);
|
|
6594
6609
|
return () => document.removeEventListener("mousedown", onDown);
|
|
6595
6610
|
}, [open]);
|
|
6596
|
-
|
|
6611
|
+
React55__namespace.default.useEffect(() => {
|
|
6597
6612
|
setActive(0);
|
|
6598
6613
|
}, [query]);
|
|
6599
|
-
|
|
6614
|
+
React55__namespace.default.useEffect(() => {
|
|
6600
6615
|
if (visible.length === 0) return;
|
|
6601
6616
|
setActive((a) => Math.min(a, visible.length - 1));
|
|
6602
6617
|
}, [visible.length]);
|
|
6603
|
-
const onOpenChangeRef =
|
|
6618
|
+
const onOpenChangeRef = React55__namespace.default.useRef(onOpenChange);
|
|
6604
6619
|
onOpenChangeRef.current = onOpenChange;
|
|
6605
|
-
const prevOpenRef =
|
|
6606
|
-
|
|
6620
|
+
const prevOpenRef = React55__namespace.default.useRef(open);
|
|
6621
|
+
React55__namespace.default.useEffect(() => {
|
|
6607
6622
|
if (prevOpenRef.current !== open) {
|
|
6608
6623
|
prevOpenRef.current = open;
|
|
6609
6624
|
onOpenChangeRef.current?.(open);
|
|
6610
6625
|
}
|
|
6611
6626
|
}, [open]);
|
|
6612
|
-
|
|
6627
|
+
React55__namespace.default.useEffect(() => {
|
|
6613
6628
|
if (!open) return;
|
|
6614
6629
|
const idx = visible.findIndex((o) => o.value === current);
|
|
6615
6630
|
setActive(idx >= 0 ? idx : 0);
|
|
6616
6631
|
}, [open]);
|
|
6617
|
-
|
|
6632
|
+
React55__namespace.default.useEffect(() => {
|
|
6618
6633
|
if (!open || !virtualized) return;
|
|
6619
6634
|
const el = listRef.current;
|
|
6620
6635
|
if (el && el.clientHeight) setListH(el.clientHeight);
|
|
6621
6636
|
}, [open, virtualized]);
|
|
6622
|
-
|
|
6637
|
+
React55__namespace.default.useEffect(() => {
|
|
6623
6638
|
if (!open) return;
|
|
6624
6639
|
if (!virtualized) {
|
|
6625
6640
|
ensureVisible(listRef.current, activeRef.current);
|
|
@@ -6748,7 +6763,7 @@ function Combobox({
|
|
|
6748
6763
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", role: "presentation", children: r2.label }, `g${r2.gi}`)
|
|
6749
6764
|
) : renderRow(r2.o, r2.idx)),
|
|
6750
6765
|
vBottom > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
|
|
6751
|
-
] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
6766
|
+
] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React55__namespace.default.Fragment, { children: [
|
|
6752
6767
|
g.group ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", role: "presentation", children: g.group }) : null,
|
|
6753
6768
|
g.options.map((o) => {
|
|
6754
6769
|
counter += 1;
|
|
@@ -6806,7 +6821,7 @@ function Combobox({
|
|
|
6806
6821
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6807
6822
|
"input",
|
|
6808
6823
|
{
|
|
6809
|
-
ref:
|
|
6824
|
+
ref: setInputRef,
|
|
6810
6825
|
id: fieldId,
|
|
6811
6826
|
className: "twc-cb__input",
|
|
6812
6827
|
role: "combobox",
|
|
@@ -6861,7 +6876,7 @@ function Combobox({
|
|
|
6861
6876
|
] }),
|
|
6862
6877
|
error ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: descId, className: "twc-field__error", children: error }) : hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: descId, className: "twc-field__hint", children: hint }) : null
|
|
6863
6878
|
] });
|
|
6864
|
-
}
|
|
6879
|
+
});
|
|
6865
6880
|
var COMMAND_CSS = `
|
|
6866
6881
|
.twc-cmdk__overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--color-overlay); backdrop-filter: blur(3px);
|
|
6867
6882
|
display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
|
|
@@ -6912,14 +6927,14 @@ function CommandPalette({
|
|
|
6912
6927
|
}) {
|
|
6913
6928
|
const __twcStyles = useScopedStyles("twc-cmdk-styles", COMMAND_CSS);
|
|
6914
6929
|
const renderPortal = usePortal();
|
|
6915
|
-
const [query, setQuery] =
|
|
6916
|
-
const [active, setActive] =
|
|
6917
|
-
const inputRef =
|
|
6918
|
-
const listRef =
|
|
6919
|
-
const paletteRef =
|
|
6920
|
-
const baseId =
|
|
6921
|
-
const [mounted, setMounted] =
|
|
6922
|
-
|
|
6930
|
+
const [query, setQuery] = React55__namespace.default.useState("");
|
|
6931
|
+
const [active, setActive] = React55__namespace.default.useState(0);
|
|
6932
|
+
const inputRef = React55__namespace.default.useRef(null);
|
|
6933
|
+
const listRef = React55__namespace.default.useRef(null);
|
|
6934
|
+
const paletteRef = React55__namespace.default.useRef(null);
|
|
6935
|
+
const baseId = React55__namespace.default.useId();
|
|
6936
|
+
const [mounted, setMounted] = React55__namespace.default.useState(open);
|
|
6937
|
+
React55__namespace.default.useEffect(() => {
|
|
6923
6938
|
if (open) {
|
|
6924
6939
|
setMounted(true);
|
|
6925
6940
|
return;
|
|
@@ -6928,7 +6943,7 @@ function CommandPalette({
|
|
|
6928
6943
|
return () => clearTimeout(t);
|
|
6929
6944
|
}, [open]);
|
|
6930
6945
|
useScrollLock(open);
|
|
6931
|
-
|
|
6946
|
+
React55__namespace.default.useEffect(() => {
|
|
6932
6947
|
if (open) {
|
|
6933
6948
|
setQuery("");
|
|
6934
6949
|
setActive(0);
|
|
@@ -6936,7 +6951,7 @@ function CommandPalette({
|
|
|
6936
6951
|
}, [open]);
|
|
6937
6952
|
useFocusTrap(paletteRef, open && mounted);
|
|
6938
6953
|
const isTop = useLayer(open && mounted);
|
|
6939
|
-
|
|
6954
|
+
React55__namespace.default.useEffect(() => {
|
|
6940
6955
|
if (!open) return void 0;
|
|
6941
6956
|
const onKey = (e) => {
|
|
6942
6957
|
if (e.defaultPrevented || !isTop()) return;
|
|
@@ -6949,7 +6964,7 @@ function CommandPalette({
|
|
|
6949
6964
|
return () => document.removeEventListener("keydown", onKey);
|
|
6950
6965
|
}, [open, onClose, isTop]);
|
|
6951
6966
|
const q = query.trim().toLowerCase();
|
|
6952
|
-
const filtered =
|
|
6967
|
+
const filtered = React55__namespace.default.useMemo(() => commands.filter(
|
|
6953
6968
|
(c) => !q || c.label.toLowerCase().includes(q) || (c.keywords || "").toLowerCase().includes(q) || (c.group || "").toLowerCase().includes(q)
|
|
6954
6969
|
), [commands, q]);
|
|
6955
6970
|
const groups = [];
|
|
@@ -6964,7 +6979,7 @@ function CommandPalette({
|
|
|
6964
6979
|
g.items.push(c);
|
|
6965
6980
|
flat.push(c);
|
|
6966
6981
|
});
|
|
6967
|
-
|
|
6982
|
+
React55__namespace.default.useEffect(() => {
|
|
6968
6983
|
setActive(0);
|
|
6969
6984
|
}, [query]);
|
|
6970
6985
|
const run = (cmd) => {
|
|
@@ -6984,7 +6999,7 @@ function CommandPalette({
|
|
|
6984
6999
|
if (cmd) run(cmd);
|
|
6985
7000
|
}
|
|
6986
7001
|
}
|
|
6987
|
-
|
|
7002
|
+
React55__namespace.default.useEffect(() => {
|
|
6988
7003
|
const node = listRef.current?.querySelector('[data-active="true"]');
|
|
6989
7004
|
if (node) node.scrollIntoView({ block: "nearest" });
|
|
6990
7005
|
}, [active]);
|
|
@@ -7174,13 +7189,13 @@ function Currency({
|
|
|
7174
7189
|
const prec = precision != null ? precision : meta.precision;
|
|
7175
7190
|
const sym = symbol != null ? symbol : meta.symbol;
|
|
7176
7191
|
const cur = code != null ? code : meta.code;
|
|
7177
|
-
const autoId =
|
|
7192
|
+
const autoId = React55__namespace.default.useId();
|
|
7178
7193
|
const fieldId = id || autoId;
|
|
7179
7194
|
const invalid = Boolean(error);
|
|
7180
7195
|
const controlled = value !== void 0;
|
|
7181
|
-
const [internal, setInternal] =
|
|
7196
|
+
const [internal, setInternal] = React55__namespace.default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
|
|
7182
7197
|
const shown = controlled ? clampPrecision(String(value ?? ""), prec) : internal;
|
|
7183
|
-
|
|
7198
|
+
React55__namespace.default.useEffect(() => {
|
|
7184
7199
|
if (!controlled) return;
|
|
7185
7200
|
const raw = String(value ?? "");
|
|
7186
7201
|
if (shown !== raw) {
|
|
@@ -7188,7 +7203,7 @@ function Currency({
|
|
|
7188
7203
|
onValueChange?.(shown === "" || Number.isNaN(n) ? null : n, shown);
|
|
7189
7204
|
}
|
|
7190
7205
|
}, [controlled, shown, value]);
|
|
7191
|
-
|
|
7206
|
+
React55__namespace.default.useEffect(() => {
|
|
7192
7207
|
if (controlled) return;
|
|
7193
7208
|
const next = clampPrecision(internal, prec);
|
|
7194
7209
|
if (next === internal) return;
|
|
@@ -7247,8 +7262,8 @@ function Currency({
|
|
|
7247
7262
|
] });
|
|
7248
7263
|
}
|
|
7249
7264
|
function useFallbackName(ref, hasOwnName) {
|
|
7250
|
-
const [needsFallback, setNeedsFallback] =
|
|
7251
|
-
const useIso2 = typeof document !== "undefined" ?
|
|
7265
|
+
const [needsFallback, setNeedsFallback] = React55__namespace.default.useState(false);
|
|
7266
|
+
const useIso2 = typeof document !== "undefined" ? React55__namespace.default.useLayoutEffect : React55__namespace.default.useEffect;
|
|
7252
7267
|
useIso2(() => {
|
|
7253
7268
|
if (hasOwnName) {
|
|
7254
7269
|
setNeedsFallback(false);
|
|
@@ -7375,7 +7390,7 @@ function ensureVisible2(list, el) {
|
|
|
7375
7390
|
if (top < list.scrollTop) list.scrollTop = top - 4;
|
|
7376
7391
|
else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight + 4;
|
|
7377
7392
|
}
|
|
7378
|
-
|
|
7393
|
+
var Select = /* @__PURE__ */ React55__namespace.default.forwardRef(function Select2({
|
|
7379
7394
|
label,
|
|
7380
7395
|
hint,
|
|
7381
7396
|
error,
|
|
@@ -7406,46 +7421,47 @@ function Select({
|
|
|
7406
7421
|
onClick,
|
|
7407
7422
|
onKeyDown,
|
|
7408
7423
|
...rest
|
|
7409
|
-
}) {
|
|
7424
|
+
}, ref) {
|
|
7410
7425
|
const __twcStyles = useScopedStyles("twc-select-styles", SELECT_CSS);
|
|
7411
7426
|
if (virtualizedProp && renderOption) warnOnce("select-renderoption-virtualized", "twico-ui Select: `renderOption` disables `virtualized` \u2014 custom rows aren't a fixed height.");
|
|
7412
7427
|
const virtualized = virtualizedProp && !renderOption;
|
|
7413
|
-
const bufferRef =
|
|
7414
|
-
const bufferTimerRef =
|
|
7415
|
-
const groups =
|
|
7416
|
-
const flat =
|
|
7417
|
-
const autoId =
|
|
7428
|
+
const bufferRef = React55__namespace.default.useRef("");
|
|
7429
|
+
const bufferTimerRef = React55__namespace.default.useRef(null);
|
|
7430
|
+
const groups = React55__namespace.default.useMemo(() => normalizeGroups2(options), [options]);
|
|
7431
|
+
const flat = React55__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
|
|
7432
|
+
const autoId = React55__namespace.default.useId();
|
|
7418
7433
|
const fieldId = id || autoId;
|
|
7419
|
-
const [internal, setInternal] =
|
|
7434
|
+
const [internal, setInternal] = React55__namespace.default.useState(defaultValue);
|
|
7420
7435
|
const current = value !== void 0 ? value : internal;
|
|
7421
|
-
const [open, setOpen] =
|
|
7422
|
-
const [render, setRender] =
|
|
7423
|
-
const [active, setActive] =
|
|
7424
|
-
const [coords, setCoords] =
|
|
7425
|
-
const [query, setQuery] =
|
|
7426
|
-
const [scrollTop, setScrollTop] =
|
|
7427
|
-
const [listH, setListH] =
|
|
7428
|
-
const wrapRef =
|
|
7429
|
-
const triggerRef =
|
|
7430
|
-
const
|
|
7431
|
-
const
|
|
7432
|
-
const
|
|
7433
|
-
const
|
|
7436
|
+
const [open, setOpen] = React55__namespace.default.useState(false);
|
|
7437
|
+
const [render, setRender] = React55__namespace.default.useState(false);
|
|
7438
|
+
const [active, setActive] = React55__namespace.default.useState(0);
|
|
7439
|
+
const [coords, setCoords] = React55__namespace.default.useState(null);
|
|
7440
|
+
const [query, setQuery] = React55__namespace.default.useState("");
|
|
7441
|
+
const [scrollTop, setScrollTop] = React55__namespace.default.useState(0);
|
|
7442
|
+
const [listH, setListH] = React55__namespace.default.useState(260);
|
|
7443
|
+
const wrapRef = React55__namespace.default.useRef(null);
|
|
7444
|
+
const triggerRef = React55__namespace.default.useRef(null);
|
|
7445
|
+
const setTriggerRef = useMergedRef(triggerRef, ref);
|
|
7446
|
+
const popRef = React55__namespace.default.useRef(null);
|
|
7447
|
+
const listRef = React55__namespace.default.useRef(null);
|
|
7448
|
+
const activeRef = React55__namespace.default.useRef(null);
|
|
7449
|
+
const searchRef = React55__namespace.default.useRef(null);
|
|
7434
7450
|
const showSearch = searchable === void 0 ? flat.length > 5 : searchable;
|
|
7435
|
-
const fGroupsLive =
|
|
7451
|
+
const fGroupsLive = React55__namespace.default.useMemo(() => {
|
|
7436
7452
|
const q = query.trim().toLowerCase();
|
|
7437
7453
|
if (!q) return groups;
|
|
7438
7454
|
return groups.map((g) => ({ group: g.group, options: g.options.filter((o) => o.label.toLowerCase().includes(q) || o.description && o.description.toLowerCase().includes(q)) })).filter((g) => g.options.length);
|
|
7439
7455
|
}, [groups, query]);
|
|
7440
|
-
const fGroupsFrozen =
|
|
7441
|
-
|
|
7456
|
+
const fGroupsFrozen = React55__namespace.default.useRef(fGroupsLive);
|
|
7457
|
+
React55__namespace.default.useEffect(() => {
|
|
7442
7458
|
if (open) fGroupsFrozen.current = fGroupsLive;
|
|
7443
7459
|
}, [open, fGroupsLive]);
|
|
7444
7460
|
const fGroups = open ? fGroupsLive : fGroupsFrozen.current;
|
|
7445
|
-
const visible =
|
|
7446
|
-
const rowH =
|
|
7461
|
+
const visible = React55__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
|
|
7462
|
+
const rowH = React55__namespace.default.useMemo(() => visible.some((o) => o.description) ? 48 : 36, [visible]);
|
|
7447
7463
|
const GROUP_H = 30;
|
|
7448
|
-
const { rows, totalH } =
|
|
7464
|
+
const { rows, totalH } = React55__namespace.default.useMemo(() => {
|
|
7449
7465
|
if (!virtualized) return { rows: [], totalH: 0 };
|
|
7450
7466
|
const rows2 = [];
|
|
7451
7467
|
let off = 0;
|
|
@@ -7472,7 +7488,7 @@ function Select({
|
|
|
7472
7488
|
}
|
|
7473
7489
|
return from;
|
|
7474
7490
|
};
|
|
7475
|
-
const place =
|
|
7491
|
+
const place = React55__namespace.default.useCallback(() => {
|
|
7476
7492
|
const el = triggerRef.current;
|
|
7477
7493
|
if (!el) return;
|
|
7478
7494
|
const r2 = el.getBoundingClientRect();
|
|
@@ -7488,7 +7504,7 @@ function Select({
|
|
|
7488
7504
|
flip
|
|
7489
7505
|
});
|
|
7490
7506
|
}, [placement, minWidth, matchTriggerWidth]);
|
|
7491
|
-
|
|
7507
|
+
React55__namespace.default.useEffect(() => {
|
|
7492
7508
|
if (!open || !portal) return;
|
|
7493
7509
|
place();
|
|
7494
7510
|
const onMove = () => place();
|
|
@@ -7506,7 +7522,7 @@ function Select({
|
|
|
7506
7522
|
ro?.disconnect();
|
|
7507
7523
|
};
|
|
7508
7524
|
}, [open, portal, place]);
|
|
7509
|
-
|
|
7525
|
+
React55__namespace.default.useEffect(() => {
|
|
7510
7526
|
if (!open) return;
|
|
7511
7527
|
const idx = flat.findIndex((o) => o.value === current);
|
|
7512
7528
|
setActive(idx >= 0 ? idx : 0);
|
|
@@ -7521,19 +7537,19 @@ function Select({
|
|
|
7521
7537
|
document.addEventListener("mousedown", onDown);
|
|
7522
7538
|
return () => document.removeEventListener("mousedown", onDown);
|
|
7523
7539
|
}, [open]);
|
|
7524
|
-
|
|
7540
|
+
React55__namespace.default.useEffect(() => {
|
|
7525
7541
|
setActive(0);
|
|
7526
7542
|
}, [query]);
|
|
7527
|
-
|
|
7543
|
+
React55__namespace.default.useEffect(() => {
|
|
7528
7544
|
if (visible.length === 0) return;
|
|
7529
7545
|
setActive((a) => Math.min(a, visible.length - 1));
|
|
7530
7546
|
}, [visible.length]);
|
|
7531
|
-
|
|
7547
|
+
React55__namespace.default.useEffect(() => {
|
|
7532
7548
|
if (!open || !virtualized) return;
|
|
7533
7549
|
const el = listRef.current;
|
|
7534
7550
|
if (el && el.clientHeight) setListH(el.clientHeight);
|
|
7535
7551
|
}, [open, virtualized, render]);
|
|
7536
|
-
|
|
7552
|
+
React55__namespace.default.useEffect(() => {
|
|
7537
7553
|
if (!open) return;
|
|
7538
7554
|
if (!virtualized) {
|
|
7539
7555
|
ensureVisible2(listRef.current, activeRef.current);
|
|
@@ -7550,7 +7566,7 @@ function Select({
|
|
|
7550
7566
|
if (next !== el.scrollTop) el.scrollTop = next;
|
|
7551
7567
|
setScrollTop(next);
|
|
7552
7568
|
}, [active, open, virtualized, rows, listH]);
|
|
7553
|
-
|
|
7569
|
+
React55__namespace.default.useEffect(() => {
|
|
7554
7570
|
if (open) {
|
|
7555
7571
|
setRender(true);
|
|
7556
7572
|
return;
|
|
@@ -7559,8 +7575,8 @@ function Select({
|
|
|
7559
7575
|
const t = setTimeout(() => setRender(false), 170);
|
|
7560
7576
|
return () => clearTimeout(t);
|
|
7561
7577
|
}, [open]);
|
|
7562
|
-
const prevOpen =
|
|
7563
|
-
|
|
7578
|
+
const prevOpen = React55__namespace.default.useRef(false);
|
|
7579
|
+
React55__namespace.default.useEffect(() => {
|
|
7564
7580
|
if (prevOpen.current && !open) {
|
|
7565
7581
|
const ae = typeof document !== "undefined" ? document.activeElement : null;
|
|
7566
7582
|
if (popRef.current && ae && popRef.current.contains(ae)) triggerRef.current?.focus();
|
|
@@ -7713,7 +7729,7 @@ function Select({
|
|
|
7713
7729
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", role: "presentation", children: r2.label }, `g${r2.gi}`)
|
|
7714
7730
|
) : renderRow(r2.o, r2.idx)),
|
|
7715
7731
|
vBottom > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
|
|
7716
|
-
] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
7732
|
+
] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React55__namespace.default.Fragment, { children: [
|
|
7717
7733
|
g.group ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", role: "presentation", children: g.group }) : null,
|
|
7718
7734
|
g.options.map((o) => {
|
|
7719
7735
|
counter += 1;
|
|
@@ -7760,7 +7776,7 @@ function Select({
|
|
|
7760
7776
|
{
|
|
7761
7777
|
type: "button",
|
|
7762
7778
|
id: fieldId,
|
|
7763
|
-
ref:
|
|
7779
|
+
ref: setTriggerRef,
|
|
7764
7780
|
className: "twc-sel__trigger",
|
|
7765
7781
|
"data-size": size,
|
|
7766
7782
|
"data-tone": tone,
|
|
@@ -7798,7 +7814,7 @@ function Select({
|
|
|
7798
7814
|
] }),
|
|
7799
7815
|
error ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: descId, className: "twc-field__error", children: error }) : hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: descId, className: "twc-field__hint", children: hint }) : null
|
|
7800
7816
|
] });
|
|
7801
|
-
}
|
|
7817
|
+
});
|
|
7802
7818
|
var CURF_CSS = `
|
|
7803
7819
|
/* Shared input shell (self-contained \u2014 CurrencyField must not depend on the
|
|
7804
7820
|
Currency component being rendered on the same page to get these styles). */
|
|
@@ -7875,21 +7891,21 @@ function CurrencyField({
|
|
|
7875
7891
|
...rest
|
|
7876
7892
|
}) {
|
|
7877
7893
|
const __twcStyles = useScopedStyles("twc-curf-styles", CURF_CSS);
|
|
7878
|
-
const autoId =
|
|
7894
|
+
const autoId = React55__namespace.default.useId();
|
|
7879
7895
|
const fieldId = id || autoId;
|
|
7880
7896
|
const invalid = Boolean(error);
|
|
7881
7897
|
const curControlled = currency !== void 0;
|
|
7882
|
-
const [curInternal, setCurInternal] =
|
|
7898
|
+
const [curInternal, setCurInternal] = React55__namespace.default.useState(defaultCurrency);
|
|
7883
7899
|
const cur = curControlled ? currency : curInternal;
|
|
7884
7900
|
const meta = CURRENCIES[cur] || CURRENCIES.USD;
|
|
7885
7901
|
const prec = meta.precision;
|
|
7886
7902
|
const valControlled = value !== void 0;
|
|
7887
|
-
const [valInternal, setValInternal] =
|
|
7903
|
+
const [valInternal, setValInternal] = React55__namespace.default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
|
|
7888
7904
|
const shown = valControlled ? clampPrecision(String(value ?? ""), prec) : valInternal;
|
|
7889
7905
|
const descId = `${fieldId}-desc`;
|
|
7890
7906
|
const describedBy = [error || hint ? descId : null, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
|
|
7891
7907
|
const ariaInvalid = invalid ? true : rest["aria-invalid"] ?? void 0;
|
|
7892
|
-
|
|
7908
|
+
React55__namespace.default.useEffect(() => {
|
|
7893
7909
|
if (!valControlled) {
|
|
7894
7910
|
const clamped = clampPrecision(valInternal, prec);
|
|
7895
7911
|
if (clamped !== valInternal) {
|
|
@@ -7905,7 +7921,7 @@ function CurrencyField({
|
|
|
7905
7921
|
}
|
|
7906
7922
|
}
|
|
7907
7923
|
}, [prec, cur, shown, value, valControlled, valInternal]);
|
|
7908
|
-
const options =
|
|
7924
|
+
const options = React55__namespace.default.useMemo(() => {
|
|
7909
7925
|
if (!currencies) return CURRENCY_OPTIONS;
|
|
7910
7926
|
return currencies.map((c) => typeof c === "string" ? { value: c, label: `${c} \u2014 ${(CURRENCIES[c] || {}).label || c}` } : c);
|
|
7911
7927
|
}, [currencies]);
|
|
@@ -8053,7 +8069,7 @@ var INPUT_EXTRA_CSS = `
|
|
|
8053
8069
|
.twc-field__count { margin-inline-start: auto; font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; flex: none; }
|
|
8054
8070
|
.twc-field__count[data-danger="true"] { color: var(--color-danger-subtle-fg); }
|
|
8055
8071
|
`;
|
|
8056
|
-
|
|
8072
|
+
var Input = /* @__PURE__ */ React55__namespace.default.forwardRef(function Input2({
|
|
8057
8073
|
label,
|
|
8058
8074
|
hint,
|
|
8059
8075
|
error,
|
|
@@ -8071,16 +8087,16 @@ function Input({
|
|
|
8071
8087
|
id,
|
|
8072
8088
|
className = "",
|
|
8073
8089
|
...rest
|
|
8074
|
-
}) {
|
|
8090
|
+
}, ref) {
|
|
8075
8091
|
const __twcStyles = useScopedStyles("twc-field-styles", FIELD_CSS2);
|
|
8076
8092
|
const __twcExtra = useScopedStyles("twc-input-extra-styles", INPUT_EXTRA_CSS);
|
|
8077
|
-
const autoId =
|
|
8093
|
+
const autoId = React55__namespace.default.useId();
|
|
8078
8094
|
const fieldId = id || autoId;
|
|
8079
8095
|
const descId = `${fieldId}-desc`;
|
|
8080
8096
|
const countId = `${fieldId}-count`;
|
|
8081
8097
|
const invalid = Boolean(error);
|
|
8082
8098
|
const countControlled = rest.value !== void 0;
|
|
8083
|
-
const [len2, setLen] =
|
|
8099
|
+
const [len2, setLen] = React55__namespace.default.useState(() => String(rest.defaultValue ?? "").length);
|
|
8084
8100
|
const count = countControlled ? String(rest.value ?? "").length : len2;
|
|
8085
8101
|
const max = rest.maxLength;
|
|
8086
8102
|
const showCounter = showCount && max != null;
|
|
@@ -8089,13 +8105,20 @@ function Input({
|
|
|
8089
8105
|
rest.onChange?.(e);
|
|
8090
8106
|
if ((showCount || clearable) && !countControlled) setLen(e.target.value.length);
|
|
8091
8107
|
};
|
|
8092
|
-
const inputRef =
|
|
8093
|
-
const
|
|
8094
|
-
const setRef = React54__namespace.default.useCallback((node) => {
|
|
8108
|
+
const inputRef = React55__namespace.default.useRef(null);
|
|
8109
|
+
const setRef = React55__namespace.default.useCallback((node) => {
|
|
8095
8110
|
inputRef.current = node;
|
|
8096
|
-
if (typeof
|
|
8097
|
-
|
|
8098
|
-
|
|
8111
|
+
if (typeof ref === "function") {
|
|
8112
|
+
const cleanup = ref(node);
|
|
8113
|
+
if (typeof cleanup === "function") return () => {
|
|
8114
|
+
inputRef.current = null;
|
|
8115
|
+
cleanup();
|
|
8116
|
+
};
|
|
8117
|
+
} else if (ref && typeof ref === "object") {
|
|
8118
|
+
ref.current = node;
|
|
8119
|
+
}
|
|
8120
|
+
return void 0;
|
|
8121
|
+
}, [ref]);
|
|
8099
8122
|
const clearField = () => {
|
|
8100
8123
|
const el = inputRef.current;
|
|
8101
8124
|
if (!el) return;
|
|
@@ -8109,7 +8132,7 @@ function Input({
|
|
|
8109
8132
|
const ariaInvalid = invalid ? true : rest["aria-invalid"] ?? void 0;
|
|
8110
8133
|
const describedBy = [error || hint ? descId : null, showCounter ? countId : null, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
|
|
8111
8134
|
const isPassword = type === "password";
|
|
8112
|
-
const [revealed, setRevealed] =
|
|
8135
|
+
const [revealed, setRevealed] = React55__namespace.default.useState(false);
|
|
8113
8136
|
const effectiveType = isPassword && revealed ? "text" : type;
|
|
8114
8137
|
const suffix = rightIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-input__affix", children: rightIcon }) : isPassword ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
8115
8138
|
"button",
|
|
@@ -8174,7 +8197,7 @@ function Input({
|
|
|
8174
8197
|
] }) : null
|
|
8175
8198
|
] }) : null
|
|
8176
8199
|
] });
|
|
8177
|
-
}
|
|
8200
|
+
});
|
|
8178
8201
|
var MULTI_CSS = `
|
|
8179
8202
|
.twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
|
|
8180
8203
|
.twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
|
|
@@ -8291,7 +8314,7 @@ function ensureVisible3(list, el) {
|
|
|
8291
8314
|
if (top < list.scrollTop) list.scrollTop = top - 4;
|
|
8292
8315
|
else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight + 4;
|
|
8293
8316
|
}
|
|
8294
|
-
|
|
8317
|
+
var MultiSelect = /* @__PURE__ */ React55__namespace.default.forwardRef(function MultiSelect2({
|
|
8295
8318
|
label,
|
|
8296
8319
|
hint,
|
|
8297
8320
|
error,
|
|
@@ -8323,37 +8346,38 @@ function MultiSelect({
|
|
|
8323
8346
|
onFocus,
|
|
8324
8347
|
onKeyDown,
|
|
8325
8348
|
...rest
|
|
8326
|
-
}) {
|
|
8349
|
+
}, ref) {
|
|
8327
8350
|
const __twcStyles = useScopedStyles("twc-ms-styles", MULTI_CSS);
|
|
8328
8351
|
if (virtualizedProp && renderOption) warnOnce("multiselect-renderoption-virtualized", "twico-ui MultiSelect: `renderOption` disables `virtualized` \u2014 custom rows aren't a fixed height.");
|
|
8329
8352
|
const virtualized = virtualizedProp && !renderOption;
|
|
8330
|
-
const groups =
|
|
8331
|
-
const flat =
|
|
8332
|
-
const autoId =
|
|
8353
|
+
const groups = React55__namespace.default.useMemo(() => normalizeGroups3(options), [options]);
|
|
8354
|
+
const flat = React55__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
|
|
8355
|
+
const autoId = React55__namespace.default.useId();
|
|
8333
8356
|
const fieldId = id || autoId;
|
|
8334
|
-
const [internal, setInternal] =
|
|
8357
|
+
const [internal, setInternal] = React55__namespace.default.useState(defaultValue);
|
|
8335
8358
|
const selected = value !== void 0 ? value : internal;
|
|
8336
|
-
const [open, setOpen] =
|
|
8337
|
-
const [query, setQuery] =
|
|
8338
|
-
const [active, setActive] =
|
|
8339
|
-
const [coords, setCoords] =
|
|
8340
|
-
const [scrollTop, setScrollTop] =
|
|
8341
|
-
const [listH, setListH] =
|
|
8342
|
-
const wrapRef =
|
|
8343
|
-
const controlRef =
|
|
8344
|
-
const inputRef =
|
|
8345
|
-
const
|
|
8346
|
-
const
|
|
8347
|
-
const
|
|
8348
|
-
const
|
|
8359
|
+
const [open, setOpen] = React55__namespace.default.useState(false);
|
|
8360
|
+
const [query, setQuery] = React55__namespace.default.useState("");
|
|
8361
|
+
const [active, setActive] = React55__namespace.default.useState(0);
|
|
8362
|
+
const [coords, setCoords] = React55__namespace.default.useState(null);
|
|
8363
|
+
const [scrollTop, setScrollTop] = React55__namespace.default.useState(0);
|
|
8364
|
+
const [listH, setListH] = React55__namespace.default.useState(260);
|
|
8365
|
+
const wrapRef = React55__namespace.default.useRef(null);
|
|
8366
|
+
const controlRef = React55__namespace.default.useRef(null);
|
|
8367
|
+
const inputRef = React55__namespace.default.useRef(null);
|
|
8368
|
+
const setInputRef = useMergedRef(inputRef, ref);
|
|
8369
|
+
const popRef = React55__namespace.default.useRef(null);
|
|
8370
|
+
const listRef = React55__namespace.default.useRef(null);
|
|
8371
|
+
const activeRef = React55__namespace.default.useRef(null);
|
|
8372
|
+
const fGroups = React55__namespace.default.useMemo(() => {
|
|
8349
8373
|
const q = query.trim();
|
|
8350
8374
|
const fn = filter === false ? null : typeof filter === "function" ? filter : matches2;
|
|
8351
8375
|
return groups.map((g) => ({ group: g.group, options: fn ? g.options.filter((o) => fn(o, q)) : g.options })).filter((g) => g.options.length);
|
|
8352
8376
|
}, [groups, query, filter]);
|
|
8353
|
-
const visible =
|
|
8354
|
-
const rowH =
|
|
8377
|
+
const visible = React55__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
|
|
8378
|
+
const rowH = React55__namespace.default.useMemo(() => visible.some((o) => o.description) ? 48 : 36, [visible]);
|
|
8355
8379
|
const GROUP_H = 30;
|
|
8356
|
-
const { rows, totalH } =
|
|
8380
|
+
const { rows, totalH } = React55__namespace.default.useMemo(() => {
|
|
8357
8381
|
if (!virtualized) return { rows: [], totalH: 0 };
|
|
8358
8382
|
const rows2 = [];
|
|
8359
8383
|
let off = 0;
|
|
@@ -8381,7 +8405,7 @@ function MultiSelect({
|
|
|
8381
8405
|
}
|
|
8382
8406
|
return from;
|
|
8383
8407
|
};
|
|
8384
|
-
const place =
|
|
8408
|
+
const place = React55__namespace.default.useCallback(() => {
|
|
8385
8409
|
const el = controlRef.current;
|
|
8386
8410
|
if (!el) return;
|
|
8387
8411
|
const r2 = el.getBoundingClientRect();
|
|
@@ -8396,7 +8420,7 @@ function MultiSelect({
|
|
|
8396
8420
|
flip
|
|
8397
8421
|
});
|
|
8398
8422
|
}, [placement, minWidth]);
|
|
8399
|
-
|
|
8423
|
+
React55__namespace.default.useEffect(() => {
|
|
8400
8424
|
if (!open || !portal) return;
|
|
8401
8425
|
place();
|
|
8402
8426
|
const onMove = () => place();
|
|
@@ -8414,7 +8438,7 @@ function MultiSelect({
|
|
|
8414
8438
|
ro?.disconnect();
|
|
8415
8439
|
};
|
|
8416
8440
|
}, [open, portal, place]);
|
|
8417
|
-
|
|
8441
|
+
React55__namespace.default.useEffect(() => {
|
|
8418
8442
|
if (!open) return;
|
|
8419
8443
|
const onDown = (e) => {
|
|
8420
8444
|
if (wrapRef.current && wrapRef.current.contains(e.target)) return;
|
|
@@ -8425,19 +8449,19 @@ function MultiSelect({
|
|
|
8425
8449
|
document.addEventListener("mousedown", onDown);
|
|
8426
8450
|
return () => document.removeEventListener("mousedown", onDown);
|
|
8427
8451
|
}, [open]);
|
|
8428
|
-
|
|
8452
|
+
React55__namespace.default.useEffect(() => {
|
|
8429
8453
|
setActive(0);
|
|
8430
8454
|
}, [query]);
|
|
8431
|
-
|
|
8455
|
+
React55__namespace.default.useEffect(() => {
|
|
8432
8456
|
if (visible.length === 0) return;
|
|
8433
8457
|
setActive((a) => Math.min(a, visible.length - 1));
|
|
8434
8458
|
}, [visible.length]);
|
|
8435
|
-
|
|
8459
|
+
React55__namespace.default.useEffect(() => {
|
|
8436
8460
|
if (!open || !virtualized) return;
|
|
8437
8461
|
const el = listRef.current;
|
|
8438
8462
|
if (el && el.clientHeight) setListH(el.clientHeight);
|
|
8439
8463
|
}, [open, virtualized]);
|
|
8440
|
-
|
|
8464
|
+
React55__namespace.default.useEffect(() => {
|
|
8441
8465
|
if (!open) return;
|
|
8442
8466
|
if (!virtualized) {
|
|
8443
8467
|
ensureVisible3(listRef.current, activeRef.current);
|
|
@@ -8561,7 +8585,7 @@ function MultiSelect({
|
|
|
8561
8585
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", role: "presentation", children: r2.label }, `g${r2.gi}`)
|
|
8562
8586
|
) : renderRow(r2.o, r2.idx)),
|
|
8563
8587
|
vBottom > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
|
|
8564
|
-
] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
8588
|
+
] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React55__namespace.default.Fragment, { children: [
|
|
8565
8589
|
g.group ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", role: "presentation", children: g.group }) : null,
|
|
8566
8590
|
g.options.map((o) => {
|
|
8567
8591
|
counter += 1;
|
|
@@ -8634,7 +8658,7 @@ function MultiSelect({
|
|
|
8634
8658
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
8635
8659
|
"input",
|
|
8636
8660
|
{
|
|
8637
|
-
ref:
|
|
8661
|
+
ref: setInputRef,
|
|
8638
8662
|
id: fieldId,
|
|
8639
8663
|
className: "twc-ms__input",
|
|
8640
8664
|
role: "combobox",
|
|
@@ -8693,7 +8717,7 @@ function MultiSelect({
|
|
|
8693
8717
|
] }),
|
|
8694
8718
|
error ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: descId, className: "twc-field__error", children: error }) : hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: descId, className: "twc-field__hint", children: hint }) : null
|
|
8695
8719
|
] });
|
|
8696
|
-
}
|
|
8720
|
+
});
|
|
8697
8721
|
var PAGINATION_CSS = `
|
|
8698
8722
|
.twc-pagination { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-sans); }
|
|
8699
8723
|
.twc-page {
|
|
@@ -8768,7 +8792,7 @@ function Pagination({
|
|
|
8768
8792
|
}
|
|
8769
8793
|
const jumperEnabled = showPageJumper ?? showJumper;
|
|
8770
8794
|
const __twcStyles = useScopedStyles("twc-pagination-styles", PAGINATION_CSS);
|
|
8771
|
-
const [internal, setInternal] =
|
|
8795
|
+
const [internal, setInternal] = React55__namespace.default.useState(defaultPage);
|
|
8772
8796
|
const page = pageProp !== void 0 ? pageProp : internal;
|
|
8773
8797
|
const pages = buildPages(page, total, siblings, boundaries);
|
|
8774
8798
|
const go = (p) => {
|
|
@@ -8776,7 +8800,7 @@ function Pagination({
|
|
|
8776
8800
|
if (pageProp === void 0) setInternal(p);
|
|
8777
8801
|
onChange?.(p);
|
|
8778
8802
|
};
|
|
8779
|
-
const [jump, setJump] =
|
|
8803
|
+
const [jump, setJump] = React55__namespace.default.useState("");
|
|
8780
8804
|
const submitJump = () => {
|
|
8781
8805
|
const n = parseInt(jump, 10);
|
|
8782
8806
|
if (!Number.isNaN(n)) go(Math.min(Math.max(n, 1), total));
|
|
@@ -9252,8 +9276,22 @@ var DT_CSS = `
|
|
|
9252
9276
|
.twc-dt__row:hover .twc-dt__row-resizer::after { background: var(--color-border-strong); }
|
|
9253
9277
|
.twc-dt__row-resizer:hover::after { background: var(--color-primary); }
|
|
9254
9278
|
|
|
9279
|
+
/* #481: the cell background reads --twc-dt-row-bg, which getRowStyle sets on the <tr>. It has to come
|
|
9280
|
+
through a custom property rather than straight off the row, because this rule paints an OPAQUE
|
|
9281
|
+
--color-surface on every cell: a background set on the <tr> would sit behind it and never show,
|
|
9282
|
+
which would make the commonest use of a row-style hook silently do nothing. Cells in a pinned
|
|
9283
|
+
COLUMN inherit it too, so a tinted row does not develop a hole where a sticky column scrolls over
|
|
9284
|
+
it.
|
|
9285
|
+
Layering: this rule is (0,1,0), the LOWEST specificity of any background in this sheet, so the
|
|
9286
|
+
row tint is the bottom layer above the plain surface and every built-in state covers it - hover,
|
|
9287
|
+
row selection, data-active, data-pinned-row, data-row-grabbed, the diff data-op washes, cell
|
|
9288
|
+
selection/active, inline editing (each (0,3,0), (0,4,0) for the pinned-column twins, or (0,2,0)
|
|
9289
|
+
for the cell-level ones) - and an inline per-cell cellStyle
|
|
9290
|
+
covers them all. That is the intended rule, not an accident of ordering: a row tint is a
|
|
9291
|
+
data-derived wash, and no data wash should be able to hide an interaction state. Consumers who
|
|
9292
|
+
need a tint that outranks those use getRowClassName and a rule of their own. */
|
|
9255
9293
|
.twc-dt__td { padding: 0 12px; height: var(--_rowh, 44px); border-bottom: var(--border-thin) solid var(--color-divider);
|
|
9256
|
-
font-size: var(--text-sm); color: var(--color-text); background: var(--color-surface);
|
|
9294
|
+
font-size: var(--text-sm); color: var(--color-text); background: var(--twc-dt-row-bg, var(--color-surface));
|
|
9257
9295
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
|
|
9258
9296
|
/* Wrap-text columns: content flows onto multiple lines (the row grows down) instead of
|
|
9259
9297
|
clipping to one line. height stays a per-row minimum, so single-line cells are unchanged. */
|
|
@@ -9639,27 +9677,27 @@ function renderCombined(srcCols, row, cfg) {
|
|
|
9639
9677
|
const v = getColVal(sc, row);
|
|
9640
9678
|
if (v == null || v === "") return;
|
|
9641
9679
|
const disp = sc.valueFormatter ? sc.valueFormatter(v, row) : v;
|
|
9642
|
-
const label = cfg.labels ?
|
|
9643
|
-
if (count > 0 && cfg.layout !== "stack") nodes.push(
|
|
9644
|
-
nodes.push(
|
|
9680
|
+
const label = cfg.labels ? React55__namespace.default.createElement("span", { className: "twc-dt__combine-label" }, colLabel(sc) + ": ") : null;
|
|
9681
|
+
if (count > 0 && cfg.layout !== "stack") nodes.push(React55__namespace.default.createElement("span", { key: "sep" + idx, className: "twc-dt__combine-sep", "aria-hidden": "true" }, cfg.separator));
|
|
9682
|
+
nodes.push(React55__namespace.default.createElement("span", { key: idx, className: "twc-dt__combine-item" }, label, disp));
|
|
9645
9683
|
count++;
|
|
9646
9684
|
});
|
|
9647
9685
|
if (!nodes.length) return "";
|
|
9648
|
-
return
|
|
9686
|
+
return React55__namespace.default.createElement("span", { className: cfg.layout === "stack" ? "twc-dt__combine twc-dt__combine--stack" : "twc-dt__combine" }, nodes);
|
|
9649
9687
|
}
|
|
9650
9688
|
var diffValueNode = (col, v, row) => col.renderCell ? col.renderCell(v, row) : col.valueFormatter ? col.valueFormatter(v, row) : v == null ? "" : v;
|
|
9651
9689
|
function renderDiffCell(col, val, row) {
|
|
9652
9690
|
const meta = row && row.__diffMeta;
|
|
9653
9691
|
if (!meta) return diffValueNode(col, val, row);
|
|
9654
|
-
if (meta.op === "removed") return
|
|
9655
|
-
if (meta.op === "added") return
|
|
9692
|
+
if (meta.op === "removed") return React55__namespace.default.createElement("span", { className: "twc-dt__diff-old" }, diffValueNode(col, getColVal(col, meta.from), meta.from));
|
|
9693
|
+
if (meta.op === "added") return React55__namespace.default.createElement("span", { className: "twc-dt__diff-new" }, diffValueNode(col, getColVal(col, meta.to), meta.to));
|
|
9656
9694
|
if (meta.op === "modified" && meta.changed.has(col.field)) {
|
|
9657
|
-
return
|
|
9695
|
+
return React55__namespace.default.createElement(
|
|
9658
9696
|
"span",
|
|
9659
9697
|
{ className: "twc-dt__diff-change" },
|
|
9660
|
-
|
|
9661
|
-
|
|
9662
|
-
|
|
9698
|
+
React55__namespace.default.createElement("span", { className: "twc-dt__diff-old" }, diffValueNode(col, getColVal(col, meta.from), meta.from)),
|
|
9699
|
+
React55__namespace.default.createElement("span", { className: "twc-dt__diff-arrow", "aria-hidden": "true" }, "\u2192"),
|
|
9700
|
+
React55__namespace.default.createElement("span", { className: "twc-dt__diff-new" }, diffValueNode(col, getColVal(col, meta.to), meta.to))
|
|
9663
9701
|
);
|
|
9664
9702
|
}
|
|
9665
9703
|
return diffValueNode(col, val, row);
|
|
@@ -9676,7 +9714,7 @@ var DIFF_OP_COLUMN = {
|
|
|
9676
9714
|
resizable: true,
|
|
9677
9715
|
wrappable: false,
|
|
9678
9716
|
hideable: false,
|
|
9679
|
-
renderCell: (v) => v && DIFF_OPS[v] ?
|
|
9717
|
+
renderCell: (v) => v && DIFF_OPS[v] ? React55__namespace.default.createElement(Badge, { size: "sm", variant: "soft", tone: DIFF_OPS[v].tone }, DIFF_OPS[v].label) : null,
|
|
9680
9718
|
exportValue: (v) => v && DIFF_OPS[v] ? DIFF_OPS[v].label : ""
|
|
9681
9719
|
};
|
|
9682
9720
|
function testFilter(raw, op, target, type) {
|
|
@@ -9749,9 +9787,9 @@ function runDatatableQuery(rows, query, options = {}) {
|
|
|
9749
9787
|
return { rows: page, total, filtered: out };
|
|
9750
9788
|
}
|
|
9751
9789
|
function useFloating() {
|
|
9752
|
-
const [pos, setPos] =
|
|
9753
|
-
const cfg =
|
|
9754
|
-
const place =
|
|
9790
|
+
const [pos, setPos] = React55__namespace.default.useState(null);
|
|
9791
|
+
const cfg = React55__namespace.default.useRef(null);
|
|
9792
|
+
const place = React55__namespace.default.useCallback(() => {
|
|
9755
9793
|
const c = cfg.current;
|
|
9756
9794
|
if (!c || !c.el || !c.el.isConnected) return null;
|
|
9757
9795
|
const r2 = c.el.getBoundingClientRect();
|
|
@@ -9762,17 +9800,17 @@ function useFloating() {
|
|
|
9762
9800
|
const top = r2.bottom + 6;
|
|
9763
9801
|
return { top, left, width: c.width, anchorX: r2.left + r2.width / 2, maxHeight: Math.max(180, vh - top - M) };
|
|
9764
9802
|
}, []);
|
|
9765
|
-
const open =
|
|
9803
|
+
const open = React55__namespace.default.useCallback((el, align = "left", width = 220) => {
|
|
9766
9804
|
cfg.current = { el, align, width };
|
|
9767
9805
|
const p = place();
|
|
9768
9806
|
if (p) setPos(p);
|
|
9769
9807
|
}, [place]);
|
|
9770
|
-
const close =
|
|
9808
|
+
const close = React55__namespace.default.useCallback(() => {
|
|
9771
9809
|
cfg.current = null;
|
|
9772
9810
|
setPos(null);
|
|
9773
9811
|
}, []);
|
|
9774
9812
|
const isOpen = pos != null;
|
|
9775
|
-
|
|
9813
|
+
React55__namespace.default.useEffect(() => {
|
|
9776
9814
|
if (!isOpen) return void 0;
|
|
9777
9815
|
const update = () => {
|
|
9778
9816
|
const p = place();
|
|
@@ -9796,11 +9834,11 @@ function Caret({ pos }) {
|
|
|
9796
9834
|
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__caret", style: { left } });
|
|
9797
9835
|
}
|
|
9798
9836
|
function AsyncFilterValue({ col, value, onChange }) {
|
|
9799
|
-
const [opts, setOpts] =
|
|
9800
|
-
const [loading, setLoading] =
|
|
9801
|
-
const reqRef =
|
|
9802
|
-
const debRef =
|
|
9803
|
-
const load =
|
|
9837
|
+
const [opts, setOpts] = React55__namespace.default.useState([]);
|
|
9838
|
+
const [loading, setLoading] = React55__namespace.default.useState(false);
|
|
9839
|
+
const reqRef = React55__namespace.default.useRef(0);
|
|
9840
|
+
const debRef = React55__namespace.default.useRef();
|
|
9841
|
+
const load = React55__namespace.default.useCallback((query) => {
|
|
9804
9842
|
const id = ++reqRef.current;
|
|
9805
9843
|
setLoading(true);
|
|
9806
9844
|
Promise.resolve(col.loadValueOptions(query)).then(
|
|
@@ -9815,16 +9853,16 @@ function AsyncFilterValue({ col, value, onChange }) {
|
|
|
9815
9853
|
}
|
|
9816
9854
|
);
|
|
9817
9855
|
}, [col]);
|
|
9818
|
-
|
|
9856
|
+
React55__namespace.default.useEffect(() => {
|
|
9819
9857
|
load("");
|
|
9820
9858
|
return () => clearTimeout(debRef.current);
|
|
9821
9859
|
}, [load]);
|
|
9822
|
-
const onInput =
|
|
9860
|
+
const onInput = React55__namespace.default.useCallback((q) => {
|
|
9823
9861
|
clearTimeout(debRef.current);
|
|
9824
9862
|
debRef.current = setTimeout(() => load(q), 250);
|
|
9825
9863
|
}, [load]);
|
|
9826
9864
|
const selected = Array.isArray(value) ? value : [];
|
|
9827
|
-
const merged =
|
|
9865
|
+
const merged = React55__namespace.default.useMemo(() => {
|
|
9828
9866
|
const seen2 = new Set(opts.map((o) => o.value));
|
|
9829
9867
|
return [...selected.filter((v) => !seen2.has(v)).map((v) => ({ value: v, label: String(v) })), ...opts];
|
|
9830
9868
|
}, [opts, selected]);
|
|
@@ -9843,9 +9881,9 @@ function AsyncFilterValue({ col, value, onChange }) {
|
|
|
9843
9881
|
);
|
|
9844
9882
|
}
|
|
9845
9883
|
function EditCell({ col, value, options, onChange, onCommit, onCommitValue, onCancel, onKeyDown }) {
|
|
9846
|
-
const ref =
|
|
9884
|
+
const ref = React55__namespace.default.useRef(null);
|
|
9847
9885
|
const isSelect = col.editType === "select" || options && col.editType !== "text";
|
|
9848
|
-
|
|
9886
|
+
React55__namespace.default.useEffect(() => {
|
|
9849
9887
|
if (isSelect) {
|
|
9850
9888
|
const t = setTimeout(() => ref.current?.querySelector(".twc-sel__trigger")?.click(), 0);
|
|
9851
9889
|
return () => clearTimeout(t);
|
|
@@ -10020,6 +10058,8 @@ function Datatable({
|
|
|
10020
10058
|
onColumnVisibilityChange,
|
|
10021
10059
|
batchActions = [],
|
|
10022
10060
|
onRowSelectionChange,
|
|
10061
|
+
getRowStyle,
|
|
10062
|
+
getRowClassName,
|
|
10023
10063
|
showExport = false,
|
|
10024
10064
|
showDensity = false,
|
|
10025
10065
|
showPivot = false,
|
|
@@ -10108,21 +10148,21 @@ function Datatable({
|
|
|
10108
10148
|
}) {
|
|
10109
10149
|
const __twcStyles = useScopedStyles("twc-dt-styles", DT_CSS);
|
|
10110
10150
|
const isDiff = !!diff;
|
|
10111
|
-
const [diffOnly, setDiffOnly] =
|
|
10151
|
+
const [diffOnly, setDiffOnly] = React55__namespace.default.useState(diff && diff.onlyChanged !== void 0 ? diff.onlyChanged : true);
|
|
10112
10152
|
const diffRowKey = diff && diff.rowKey || rowKeyProp || ((r2) => r2 == null ? r2 : r2.id);
|
|
10113
|
-
const diffData =
|
|
10153
|
+
const diffData = React55__namespace.default.useMemo(
|
|
10114
10154
|
() => isDiff ? classifyDiff(diff.from || [], diff.to || [], columnsProp, diffRowKey, { moveDetection: diff.moveDetection, compare: diff.compare }) : null,
|
|
10115
10155
|
[isDiff, diff, columnsProp]
|
|
10116
10156
|
// eslint-disable-line react-hooks/exhaustive-deps
|
|
10117
10157
|
);
|
|
10118
|
-
const onClassifiedRef =
|
|
10158
|
+
const onClassifiedRef = React55__namespace.default.useRef(diff && diff.onClassified);
|
|
10119
10159
|
onClassifiedRef.current = diff && diff.onClassified;
|
|
10120
|
-
|
|
10160
|
+
React55__namespace.default.useEffect(() => {
|
|
10121
10161
|
if (diffData && onClassifiedRef.current) onClassifiedRef.current(diffData.counts);
|
|
10122
10162
|
}, [diffData]);
|
|
10123
|
-
const diffRowKeyFn =
|
|
10124
|
-
const [userCombine, setUserCombine] =
|
|
10125
|
-
const columns =
|
|
10163
|
+
const diffRowKeyFn = React55__namespace.default.useCallback((r2) => r2.__diffKey, []);
|
|
10164
|
+
const [userCombine, setUserCombine] = React55__namespace.default.useState({});
|
|
10165
|
+
const columns = React55__namespace.default.useMemo(
|
|
10126
10166
|
() => {
|
|
10127
10167
|
if (!isDiff) return columnsProp;
|
|
10128
10168
|
const byField = {};
|
|
@@ -10135,12 +10175,12 @@ function Datatable({
|
|
|
10135
10175
|
},
|
|
10136
10176
|
[isDiff, columnsProp, userCombine]
|
|
10137
10177
|
);
|
|
10138
|
-
const rows =
|
|
10178
|
+
const rows = React55__namespace.default.useMemo(
|
|
10139
10179
|
() => isDiff ? diffData.rows.filter((r2) => !diffOnly || r2.op !== "unchanged").map((r2) => ({ ...r2.to || r2.from, __diffop: r2.op, __diffMeta: r2, __diffKey: r2.key })) : rowsProp,
|
|
10140
10180
|
[isDiff, diffData, diffOnly, rowsProp]
|
|
10141
10181
|
);
|
|
10142
10182
|
const rowKey = isDiff ? diffRowKeyFn : rowKeyProp;
|
|
10143
|
-
const cols =
|
|
10183
|
+
const cols = React55__namespace.default.useMemo(() => {
|
|
10144
10184
|
const seenFields = /* @__PURE__ */ new Map();
|
|
10145
10185
|
for (const c of columns) {
|
|
10146
10186
|
if (!c || c.field == null) continue;
|
|
@@ -10208,9 +10248,9 @@ function Datatable({
|
|
|
10208
10248
|
}
|
|
10209
10249
|
return out;
|
|
10210
10250
|
}, [columns, rowPinning, userCombine, defaultColumn]);
|
|
10211
|
-
const _autoKey =
|
|
10251
|
+
const _autoKey = React55__namespace.default.useRef();
|
|
10212
10252
|
if (!_autoKey.current) _autoKey.current = { map: /* @__PURE__ */ new WeakMap(), n: 0 };
|
|
10213
|
-
const keyOf =
|
|
10253
|
+
const keyOf = React55__namespace.default.useCallback(rowKey || ((r2, i) => {
|
|
10214
10254
|
if (r2 != null && r2.id != null) return r2.id;
|
|
10215
10255
|
if (r2 != null && typeof r2 === "object") {
|
|
10216
10256
|
const m = _autoKey.current.map;
|
|
@@ -10223,19 +10263,19 @@ function Datatable({
|
|
|
10223
10263
|
}
|
|
10224
10264
|
return i;
|
|
10225
10265
|
}), [rowKey]);
|
|
10226
|
-
const [sort, setSort] =
|
|
10227
|
-
const [filters, setFilters] =
|
|
10266
|
+
const [sort, setSort] = React55__namespace.default.useState(null);
|
|
10267
|
+
const [filters, setFilters] = React55__namespace.default.useState([]);
|
|
10228
10268
|
const filterLogicControlled = filterLogicProp !== void 0;
|
|
10229
|
-
const [filterLogicInternal, setFilterLogicInternal] =
|
|
10269
|
+
const [filterLogicInternal, setFilterLogicInternal] = React55__namespace.default.useState(defaultFilterLogic === "or" ? "or" : "and");
|
|
10230
10270
|
const filterLogic = filterLogicControlled ? filterLogicProp === "or" ? "or" : "and" : filterLogicInternal;
|
|
10231
10271
|
const setFilterLogic = (next) => {
|
|
10232
10272
|
const v = next === "or" ? "or" : "and";
|
|
10233
10273
|
if (!filterLogicControlled) setFilterLogicInternal(v);
|
|
10234
10274
|
onFilterLogicChange?.(v);
|
|
10235
10275
|
};
|
|
10236
|
-
const [hidden, setHidden] =
|
|
10237
|
-
const [showRowNum, setShowRowNum] =
|
|
10238
|
-
const [wrapped, setWrapped] =
|
|
10276
|
+
const [hidden, setHidden] = React55__namespace.default.useState(() => /* @__PURE__ */ new Set());
|
|
10277
|
+
const [showRowNum, setShowRowNum] = React55__namespace.default.useState(rowNumbers);
|
|
10278
|
+
const [wrapped, setWrapped] = React55__namespace.default.useState(() => new Set((columns || []).filter((c) => c.wrapText).map((c) => c.field)));
|
|
10239
10279
|
const toggleWrap = (field) => setWrapped((w) => {
|
|
10240
10280
|
const n = new Set(w);
|
|
10241
10281
|
n.has(field) ? n.delete(field) : n.add(field);
|
|
@@ -10277,7 +10317,7 @@ function Datatable({
|
|
|
10277
10317
|
});
|
|
10278
10318
|
closeCombineEditor();
|
|
10279
10319
|
};
|
|
10280
|
-
const [pins, setPins] =
|
|
10320
|
+
const [pins, setPins] = React55__namespace.default.useState(() => {
|
|
10281
10321
|
const left = [], right = [];
|
|
10282
10322
|
columns.forEach((c) => {
|
|
10283
10323
|
if (c.pinned === "left") left.push(c.field);
|
|
@@ -10285,23 +10325,23 @@ function Datatable({
|
|
|
10285
10325
|
});
|
|
10286
10326
|
return { left, right };
|
|
10287
10327
|
});
|
|
10288
|
-
const [density, setDensity] =
|
|
10289
|
-
const [internalQuick, setInternalQuick] =
|
|
10328
|
+
const [density, setDensity] = React55__namespace.default.useState(densityProp);
|
|
10329
|
+
const [internalQuick, setInternalQuick] = React55__namespace.default.useState("");
|
|
10290
10330
|
const quick = quickFilter !== void 0 ? quickFilter : internalQuick;
|
|
10291
10331
|
const commitQuick = (v) => {
|
|
10292
10332
|
onQuickFilterChange?.(v);
|
|
10293
10333
|
if (quickFilter === void 0) setInternalQuick(v);
|
|
10294
10334
|
commitPage(0);
|
|
10295
10335
|
};
|
|
10296
|
-
const [selected, setSelected] =
|
|
10297
|
-
const [activeRow, setActiveRow] =
|
|
10336
|
+
const [selected, setSelected] = React55__namespace.default.useState(() => /* @__PURE__ */ new Set());
|
|
10337
|
+
const [activeRow, setActiveRow] = React55__namespace.default.useState(null);
|
|
10298
10338
|
const activeRowControlled = activeRowId !== void 0;
|
|
10299
10339
|
const activeRowVal = activeRowControlled ? activeRowId : activeRow;
|
|
10300
|
-
const [internalActiveCell, setInternalActiveCell] =
|
|
10340
|
+
const [internalActiveCell, setInternalActiveCell] = React55__namespace.default.useState(null);
|
|
10301
10341
|
const activeCellControlled = activeCell !== void 0;
|
|
10302
10342
|
const activeCellVal = activeCellControlled ? activeCell : internalActiveCell;
|
|
10303
|
-
const selfCellSigRef =
|
|
10304
|
-
const jumpAppliedRef =
|
|
10343
|
+
const selfCellSigRef = React55__namespace.default.useRef(null);
|
|
10344
|
+
const jumpAppliedRef = React55__namespace.default.useRef(null);
|
|
10305
10345
|
const commitActiveCell = (next) => {
|
|
10306
10346
|
const sig = next ? next.key + "\0" + next.field : null;
|
|
10307
10347
|
selfCellSigRef.current = sig;
|
|
@@ -10309,10 +10349,10 @@ function Datatable({
|
|
|
10309
10349
|
onActiveCellChange?.(next);
|
|
10310
10350
|
if (!activeCellControlled) setInternalActiveCell(next);
|
|
10311
10351
|
};
|
|
10312
|
-
const [anchorCell, setAnchorCell] =
|
|
10313
|
-
const gridId =
|
|
10314
|
-
const [internalPage, setInternalPage] =
|
|
10315
|
-
const [internalRpp, setInternalRpp] =
|
|
10352
|
+
const [anchorCell, setAnchorCell] = React55__namespace.default.useState(null);
|
|
10353
|
+
const gridId = React55__namespace.default.useId();
|
|
10354
|
+
const [internalPage, setInternalPage] = React55__namespace.default.useState(0);
|
|
10355
|
+
const [internalRpp, setInternalRpp] = React55__namespace.default.useState(pageSize > 0 ? pageSize : 10);
|
|
10316
10356
|
const pageControlled = page !== void 0;
|
|
10317
10357
|
const pageSizeControlled = onPageSizeChange !== void 0;
|
|
10318
10358
|
const pageVal = pageControlled ? page : internalPage;
|
|
@@ -10326,42 +10366,42 @@ function Datatable({
|
|
|
10326
10366
|
if (!pageSizeControlled) setInternalRpp(next);
|
|
10327
10367
|
commitPage(0);
|
|
10328
10368
|
};
|
|
10329
|
-
const [colQuery, setColQuery] =
|
|
10330
|
-
const [widths, setWidths] =
|
|
10331
|
-
const [order, setOrder] =
|
|
10332
|
-
const [drag, setDrag] =
|
|
10333
|
-
const [aggOn, setAggOn] =
|
|
10334
|
-
const [focus, setFocus] =
|
|
10335
|
-
const [interacting, setInteracting] =
|
|
10336
|
-
const gridRef =
|
|
10337
|
-
const [groupBy, setGroupBy] =
|
|
10338
|
-
const [internalCollapsed, setInternalCollapsed] =
|
|
10369
|
+
const [colQuery, setColQuery] = React55__namespace.default.useState("");
|
|
10370
|
+
const [widths, setWidths] = React55__namespace.default.useState({});
|
|
10371
|
+
const [order, setOrder] = React55__namespace.default.useState(() => columns.map((c) => c.field));
|
|
10372
|
+
const [drag, setDrag] = React55__namespace.default.useState({ from: null, over: null, after: false });
|
|
10373
|
+
const [aggOn, setAggOn] = React55__namespace.default.useState(showAggregation);
|
|
10374
|
+
const [focus, setFocus] = React55__namespace.default.useState({ r: 0, c: 0 });
|
|
10375
|
+
const [interacting, setInteracting] = React55__namespace.default.useState(null);
|
|
10376
|
+
const gridRef = React55__namespace.default.useRef(null);
|
|
10377
|
+
const [groupBy, setGroupBy] = React55__namespace.default.useState(rowGrouping || []);
|
|
10378
|
+
const [internalCollapsed, setInternalCollapsed] = React55__namespace.default.useState(() => new Set(defaultCollapsedGroups));
|
|
10339
10379
|
const collapsedControlled = collapsedGroups !== void 0;
|
|
10340
|
-
const collapsedSet =
|
|
10341
|
-
const collapsedKey =
|
|
10342
|
-
const [internalExpanded, setInternalExpanded] =
|
|
10380
|
+
const collapsedSet = React55__namespace.default.useMemo(() => new Set(collapsedControlled ? collapsedGroups : internalCollapsed), [collapsedControlled, collapsedGroups, internalCollapsed]);
|
|
10381
|
+
const collapsedKey = React55__namespace.default.useMemo(() => [...collapsedSet].sort().join("\0"), [collapsedSet]);
|
|
10382
|
+
const [internalExpanded, setInternalExpanded] = React55__namespace.default.useState(() => /* @__PURE__ */ new Set());
|
|
10343
10383
|
const expandControlled = expandedRowIds !== void 0;
|
|
10344
|
-
const expandedSet =
|
|
10384
|
+
const expandedSet = React55__namespace.default.useMemo(
|
|
10345
10385
|
() => new Set(expandControlled ? expandedRowIds : internalExpanded),
|
|
10346
10386
|
[expandControlled, expandedRowIds, internalExpanded]
|
|
10347
10387
|
);
|
|
10348
|
-
const expandedKey =
|
|
10349
|
-
const [pinnedRows, setPinnedRows] =
|
|
10350
|
-
const [headH, setHeadH] =
|
|
10351
|
-
const theadRef =
|
|
10352
|
-
const [rowOrder, setRowOrder] =
|
|
10353
|
-
|
|
10388
|
+
const expandedKey = React55__namespace.default.useMemo(() => JSON.stringify([...expandedSet].sort()), [expandedSet]);
|
|
10389
|
+
const [pinnedRows, setPinnedRows] = React55__namespace.default.useState({ top: [], bottom: [] });
|
|
10390
|
+
const [headH, setHeadH] = React55__namespace.default.useState(41);
|
|
10391
|
+
const theadRef = React55__namespace.default.useRef(null);
|
|
10392
|
+
const [rowOrder, setRowOrder] = React55__namespace.default.useState(null);
|
|
10393
|
+
React55__namespace.default.useEffect(() => {
|
|
10354
10394
|
if (serverMode) setRowOrder(null);
|
|
10355
10395
|
}, [rows, serverMode]);
|
|
10356
|
-
const [rowHeights, setRowHeights] =
|
|
10357
|
-
const [rowDrag, setRowDrag] =
|
|
10358
|
-
const [rowGrab, setRowGrab] =
|
|
10359
|
-
const [reorderMsg, setReorderMsg] =
|
|
10360
|
-
const rowFocusRef =
|
|
10361
|
-
const [fWidths, setFWidths] =
|
|
10362
|
-
const [fPanelSize, setFPanelSize] =
|
|
10363
|
-
const [batchNameW, setBatchNameW] =
|
|
10364
|
-
const [popSizes, setPopSizes] =
|
|
10396
|
+
const [rowHeights, setRowHeights] = React55__namespace.default.useState({});
|
|
10397
|
+
const [rowDrag, setRowDrag] = React55__namespace.default.useState({ from: null, over: null, after: false });
|
|
10398
|
+
const [rowGrab, setRowGrab] = React55__namespace.default.useState(null);
|
|
10399
|
+
const [reorderMsg, setReorderMsg] = React55__namespace.default.useState("");
|
|
10400
|
+
const rowFocusRef = React55__namespace.default.useRef(null);
|
|
10401
|
+
const [fWidths, setFWidths] = React55__namespace.default.useState({});
|
|
10402
|
+
const [fPanelSize, setFPanelSize] = React55__namespace.default.useState(null);
|
|
10403
|
+
const [batchNameW, setBatchNameW] = React55__namespace.default.useState(null);
|
|
10404
|
+
const [popSizes, setPopSizes] = React55__namespace.default.useState({});
|
|
10365
10405
|
const serializeState = () => ({
|
|
10366
10406
|
filters: filters.map(({ id, ...f }) => f),
|
|
10367
10407
|
// strip the internal row id
|
|
@@ -10446,11 +10486,11 @@ function Datatable({
|
|
|
10446
10486
|
if (Array.isArray(s.grouping)) setGroupBy(s.grouping.filter((f) => known.has(f)));
|
|
10447
10487
|
if (Array.isArray(s.collapsedGroups) && !collapsedControlled) setInternalCollapsed(new Set(s.collapsedGroups.filter((k) => typeof k === "string")));
|
|
10448
10488
|
};
|
|
10449
|
-
const stateReadyRef =
|
|
10450
|
-
const stateRestoredRef =
|
|
10451
|
-
const onStateChangeRef =
|
|
10489
|
+
const stateReadyRef = React55__namespace.default.useRef(false);
|
|
10490
|
+
const stateRestoredRef = React55__namespace.default.useRef(false);
|
|
10491
|
+
const onStateChangeRef = React55__namespace.default.useRef(onStateChange);
|
|
10452
10492
|
onStateChangeRef.current = onStateChange;
|
|
10453
|
-
|
|
10493
|
+
React55__namespace.default.useEffect(() => {
|
|
10454
10494
|
if (!stateReadyRef.current) return void 0;
|
|
10455
10495
|
if (!stateKey && !onStateChange) return void 0;
|
|
10456
10496
|
const state = serializeState();
|
|
@@ -10476,7 +10516,7 @@ function Datatable({
|
|
|
10476
10516
|
if (saved) applyState(saved);
|
|
10477
10517
|
stateRestoredRef.current = true;
|
|
10478
10518
|
};
|
|
10479
|
-
|
|
10519
|
+
React55__namespace.default.useEffect(() => {
|
|
10480
10520
|
if (columns.length) {
|
|
10481
10521
|
restoreState();
|
|
10482
10522
|
stateReadyRef.current = true;
|
|
@@ -10485,14 +10525,14 @@ function Datatable({
|
|
|
10485
10525
|
stateReadyRef.current = false;
|
|
10486
10526
|
};
|
|
10487
10527
|
}, []);
|
|
10488
|
-
|
|
10528
|
+
React55__namespace.default.useEffect(() => {
|
|
10489
10529
|
if (stateRestoredRef.current || !columns.length) return;
|
|
10490
10530
|
restoreState();
|
|
10491
10531
|
stateReadyRef.current = true;
|
|
10492
10532
|
}, [columns.length]);
|
|
10493
|
-
const rootRef =
|
|
10494
|
-
const [compact, setCompact] =
|
|
10495
|
-
|
|
10533
|
+
const rootRef = React55__namespace.default.useRef(null);
|
|
10534
|
+
const [compact, setCompact] = React55__namespace.default.useState(false);
|
|
10535
|
+
React55__namespace.default.useEffect(() => {
|
|
10496
10536
|
const el = rootRef.current;
|
|
10497
10537
|
if (!el) return void 0;
|
|
10498
10538
|
const measure = () => setCompact((el.clientWidth || 0) < 720);
|
|
@@ -10505,13 +10545,13 @@ function Datatable({
|
|
|
10505
10545
|
else if (typeof window !== "undefined") window.removeEventListener("resize", measure);
|
|
10506
10546
|
};
|
|
10507
10547
|
}, []);
|
|
10508
|
-
const scrollRef =
|
|
10509
|
-
const filterPanelRef =
|
|
10510
|
-
const measureCanvas =
|
|
10511
|
-
const [scrollTop, setScrollTop] =
|
|
10512
|
-
const [viewportH, setViewportH] =
|
|
10513
|
-
const [ovTip, setOvTip] =
|
|
10514
|
-
const ovTimer =
|
|
10548
|
+
const scrollRef = React55__namespace.default.useRef(null);
|
|
10549
|
+
const filterPanelRef = React55__namespace.default.useRef(null);
|
|
10550
|
+
const measureCanvas = React55__namespace.default.useRef(null);
|
|
10551
|
+
const [scrollTop, setScrollTop] = React55__namespace.default.useState(0);
|
|
10552
|
+
const [viewportH, setViewportH] = React55__namespace.default.useState(0);
|
|
10553
|
+
const [ovTip, setOvTip] = React55__namespace.default.useState(null);
|
|
10554
|
+
const ovTimer = React55__namespace.default.useRef(null);
|
|
10515
10555
|
const hideOverflowTip = () => {
|
|
10516
10556
|
clearTimeout(ovTimer.current);
|
|
10517
10557
|
setOvTip((t) => t ? null : t);
|
|
@@ -10535,8 +10575,8 @@ function Datatable({
|
|
|
10535
10575
|
if (el && el.scrollWidth > el.clientWidth + 1) setOvTip({ anchor: el, text: el.getAttribute("data-ovtext") });
|
|
10536
10576
|
else hideOverflowTip();
|
|
10537
10577
|
};
|
|
10538
|
-
|
|
10539
|
-
|
|
10578
|
+
React55__namespace.default.useEffect(() => () => clearTimeout(ovTimer.current), []);
|
|
10579
|
+
React55__namespace.default.useEffect(() => {
|
|
10540
10580
|
if (!ovTip) return void 0;
|
|
10541
10581
|
const onKey = (e) => {
|
|
10542
10582
|
if (e.key === "Escape") setOvTip(null);
|
|
@@ -10544,8 +10584,8 @@ function Datatable({
|
|
|
10544
10584
|
document.addEventListener("keydown", onKey);
|
|
10545
10585
|
return () => document.removeEventListener("keydown", onKey);
|
|
10546
10586
|
}, [ovTip]);
|
|
10547
|
-
const [pivotOn, setPivotOn] =
|
|
10548
|
-
const [aggConfig, setAggConfig] =
|
|
10587
|
+
const [pivotOn, setPivotOn] = React55__namespace.default.useState(pivotMode);
|
|
10588
|
+
const [aggConfig, setAggConfig] = React55__namespace.default.useState(() => {
|
|
10549
10589
|
const m = {};
|
|
10550
10590
|
(columns || []).forEach((c) => {
|
|
10551
10591
|
if (typeof c.aggregation === "string") m[c.field] = c.aggregation;
|
|
@@ -10553,26 +10593,26 @@ function Datatable({
|
|
|
10553
10593
|
return m;
|
|
10554
10594
|
});
|
|
10555
10595
|
const aggOf = (c) => aggConfig[c.field] || (typeof c.aggregation === "function" ? c.aggregation : null);
|
|
10556
|
-
const [pivotConfig, setPivotConfig] =
|
|
10596
|
+
const [pivotConfig, setPivotConfig] = React55__namespace.default.useState(() => ({
|
|
10557
10597
|
rows: pivot && pivot.rows || [],
|
|
10558
10598
|
columns: pivot && pivot.columns || [],
|
|
10559
10599
|
values: pivot && pivot.values || []
|
|
10560
10600
|
}));
|
|
10561
10601
|
const pivotActive = pivotOn && pivotConfig.rows.length > 0 && pivotConfig.values.length > 0;
|
|
10562
|
-
|
|
10602
|
+
React55__namespace.default.useEffect(() => {
|
|
10563
10603
|
setOrder((prev) => mergeColOrder(prev, columns.map((c) => c.field).filter(Boolean)));
|
|
10564
10604
|
}, [columns]);
|
|
10565
|
-
const densityPropRef =
|
|
10566
|
-
|
|
10605
|
+
const densityPropRef = React55__namespace.default.useRef(densityProp);
|
|
10606
|
+
React55__namespace.default.useEffect(() => {
|
|
10567
10607
|
if (densityPropRef.current === densityProp) return;
|
|
10568
10608
|
densityPropRef.current = densityProp;
|
|
10569
10609
|
setDensity(densityProp);
|
|
10570
10610
|
}, [densityProp]);
|
|
10571
|
-
|
|
10611
|
+
React55__namespace.default.useEffect(() => {
|
|
10572
10612
|
setAggOn(showAggregation);
|
|
10573
10613
|
}, [showAggregation]);
|
|
10574
|
-
const pageSizePropRef =
|
|
10575
|
-
|
|
10614
|
+
const pageSizePropRef = React55__namespace.default.useRef(pageSize);
|
|
10615
|
+
React55__namespace.default.useEffect(() => {
|
|
10576
10616
|
if (pageSizePropRef.current === pageSize) return;
|
|
10577
10617
|
pageSizePropRef.current = pageSize;
|
|
10578
10618
|
if (pageSizeControlled) return;
|
|
@@ -10580,8 +10620,8 @@ function Datatable({
|
|
|
10580
10620
|
setInternalPage(0);
|
|
10581
10621
|
}, [pageSize]);
|
|
10582
10622
|
const rowGroupingKey = (rowGrouping || []).join("\0");
|
|
10583
|
-
const rowGroupingKeyRef =
|
|
10584
|
-
|
|
10623
|
+
const rowGroupingKeyRef = React55__namespace.default.useRef(rowGroupingKey);
|
|
10624
|
+
React55__namespace.default.useEffect(() => {
|
|
10585
10625
|
if (rowGroupingKeyRef.current === rowGroupingKey) return;
|
|
10586
10626
|
rowGroupingKeyRef.current = rowGroupingKey;
|
|
10587
10627
|
setGroupBy(rowGrouping || []);
|
|
@@ -10599,29 +10639,29 @@ function Datatable({
|
|
|
10599
10639
|
};
|
|
10600
10640
|
const intrinsicWidth = (c) => c.width === "auto" ? autoWidth(c) : typeof c.width === "number" ? c.width : 160;
|
|
10601
10641
|
const widthOf = (c) => clampWidth(widths[c.field] ?? intrinsicWidth(c), c);
|
|
10602
|
-
const [colMenu, setColMenu] =
|
|
10642
|
+
const [colMenu, setColMenu] = React55__namespace.default.useState(null);
|
|
10603
10643
|
const [menuPos, openMenu, closeMenu] = useFloating();
|
|
10604
|
-
const [panel, setPanel] =
|
|
10644
|
+
const [panel, setPanel] = React55__namespace.default.useState(null);
|
|
10605
10645
|
const [panelPos, openPanel, closePanel] = useFloating();
|
|
10606
|
-
const [combineTarget, setCombineTarget] =
|
|
10607
|
-
const [combineDraft, setCombineDraft] =
|
|
10608
|
-
const combinePanelRef =
|
|
10609
|
-
|
|
10646
|
+
const [combineTarget, setCombineTarget] = React55__namespace.default.useState(null);
|
|
10647
|
+
const [combineDraft, setCombineDraft] = React55__namespace.default.useState(null);
|
|
10648
|
+
const combinePanelRef = React55__namespace.default.useRef(null);
|
|
10649
|
+
React55__namespace.default.useEffect(() => {
|
|
10610
10650
|
if (panel === "combine" && combinePanelRef.current) {
|
|
10611
10651
|
const el = combinePanelRef.current.querySelector('[role="switch"], button, [tabindex]');
|
|
10612
10652
|
(el || combinePanelRef.current).focus?.();
|
|
10613
10653
|
}
|
|
10614
10654
|
}, [panel]);
|
|
10615
|
-
const [rowMenu, setRowMenu] =
|
|
10655
|
+
const [rowMenu, setRowMenu] = React55__namespace.default.useState(null);
|
|
10616
10656
|
const [rowMenuPos, openRowMenu, closeRowMenu] = useFloating();
|
|
10617
|
-
const [exportOpen, setExportOpen] =
|
|
10657
|
+
const [exportOpen, setExportOpen] = React55__namespace.default.useState(false);
|
|
10618
10658
|
const [exportPos, openExport, closeExport] = useFloating();
|
|
10619
|
-
const menuTriggerRef =
|
|
10620
|
-
const colMenuRef =
|
|
10621
|
-
const rowMenuRef =
|
|
10622
|
-
const exportMenuRef =
|
|
10623
|
-
const quickSearchRef =
|
|
10624
|
-
const colSearchRef =
|
|
10659
|
+
const menuTriggerRef = React55__namespace.default.useRef(null);
|
|
10660
|
+
const colMenuRef = React55__namespace.default.useRef(null);
|
|
10661
|
+
const rowMenuRef = React55__namespace.default.useRef(null);
|
|
10662
|
+
const exportMenuRef = React55__namespace.default.useRef(null);
|
|
10663
|
+
const quickSearchRef = React55__namespace.default.useRef(null);
|
|
10664
|
+
const colSearchRef = React55__namespace.default.useRef(null);
|
|
10625
10665
|
function focusFirstItem(container) {
|
|
10626
10666
|
if (!container) return;
|
|
10627
10667
|
const first = container.querySelector('[role="menuitem"]:not([disabled])');
|
|
@@ -10660,16 +10700,16 @@ function Datatable({
|
|
|
10660
10700
|
restoreTriggerFocus();
|
|
10661
10701
|
}
|
|
10662
10702
|
}
|
|
10663
|
-
|
|
10703
|
+
React55__namespace.default.useEffect(() => {
|
|
10664
10704
|
if (colMenu) focusFirstItem(colMenuRef.current);
|
|
10665
10705
|
}, [colMenu]);
|
|
10666
|
-
|
|
10706
|
+
React55__namespace.default.useEffect(() => {
|
|
10667
10707
|
if (rowMenu) focusFirstItem(rowMenuRef.current);
|
|
10668
10708
|
}, [rowMenu]);
|
|
10669
|
-
|
|
10709
|
+
React55__namespace.default.useEffect(() => {
|
|
10670
10710
|
if (exportOpen) focusFirstItem(exportMenuRef.current);
|
|
10671
10711
|
}, [exportOpen]);
|
|
10672
|
-
|
|
10712
|
+
React55__namespace.default.useEffect(() => {
|
|
10673
10713
|
if (!colMenu && !panel && !rowMenu) return;
|
|
10674
10714
|
const closeAll = () => {
|
|
10675
10715
|
setColMenu(null);
|
|
@@ -10692,7 +10732,7 @@ function Datatable({
|
|
|
10692
10732
|
document.removeEventListener("keydown", onKey);
|
|
10693
10733
|
};
|
|
10694
10734
|
}, [colMenu, panel, rowMenu]);
|
|
10695
|
-
|
|
10735
|
+
React55__namespace.default.useEffect(() => {
|
|
10696
10736
|
if (!exportOpen) return;
|
|
10697
10737
|
const close = () => {
|
|
10698
10738
|
setExportOpen(false);
|
|
@@ -10711,37 +10751,37 @@ function Datatable({
|
|
|
10711
10751
|
document.removeEventListener("keydown", onKey);
|
|
10712
10752
|
};
|
|
10713
10753
|
}, [exportOpen]);
|
|
10714
|
-
const colByField =
|
|
10754
|
+
const colByField = React55__namespace.default.useMemo(() => Object.fromEntries(cols.map((c) => [c.field, c])), [cols]);
|
|
10715
10755
|
const fieldLabel = (f) => colLabel(colByField[f] || { field: f });
|
|
10716
|
-
const combineSources =
|
|
10756
|
+
const combineSources = React55__namespace.default.useMemo(() => {
|
|
10717
10757
|
const s = /* @__PURE__ */ new Set();
|
|
10718
10758
|
for (const cfg of Object.values(userCombine)) (cfg && cfg.fields ? cfg.fields : []).slice(1).forEach((f) => s.add(f));
|
|
10719
10759
|
return s;
|
|
10720
10760
|
}, [userCombine]);
|
|
10721
|
-
const stackCombineTargets =
|
|
10761
|
+
const stackCombineTargets = React55__namespace.default.useMemo(
|
|
10722
10762
|
() => new Set(cols.filter((c) => {
|
|
10723
10763
|
const cfg = combineCfg(userCombine[c.field] || c.combine);
|
|
10724
10764
|
return cfg && cfg.layout === "stack";
|
|
10725
10765
|
}).map((c) => c.field)),
|
|
10726
10766
|
[cols, userCombine]
|
|
10727
10767
|
);
|
|
10728
|
-
const effectiveHidden =
|
|
10729
|
-
const effectiveWrapped =
|
|
10730
|
-
const visibleCols =
|
|
10768
|
+
const effectiveHidden = React55__namespace.default.useMemo(() => combineSources.size ? /* @__PURE__ */ new Set([...hidden, ...combineSources]) : hidden, [hidden, combineSources]);
|
|
10769
|
+
const effectiveWrapped = React55__namespace.default.useMemo(() => stackCombineTargets.size ? /* @__PURE__ */ new Set([...wrapped, ...stackCombineTargets]) : wrapped, [wrapped, stackCombineTargets]);
|
|
10770
|
+
const visibleCols = React55__namespace.default.useMemo(() => cols.filter((c) => !effectiveHidden.has(c.field)), [cols, effectiveHidden]);
|
|
10731
10771
|
const colFieldsKey = JSON.stringify(
|
|
10732
10772
|
cols.filter((c) => typeof c.field === "string" && c.type !== "actions").map((c) => c.field)
|
|
10733
10773
|
);
|
|
10734
|
-
const colFields =
|
|
10774
|
+
const colFields = React55__namespace.default.useMemo(() => JSON.parse(colFieldsKey), [colFieldsKey]);
|
|
10735
10775
|
const hiddenKey = JSON.stringify([...hidden].filter((f) => typeof f === "string").sort());
|
|
10736
|
-
const visibleColumns =
|
|
10776
|
+
const visibleColumns = React55__namespace.default.useMemo(() => {
|
|
10737
10777
|
const h = new Set(JSON.parse(hiddenKey));
|
|
10738
10778
|
return colFields.filter((f) => !h.has(f));
|
|
10739
10779
|
}, [colFields, hiddenKey]);
|
|
10740
|
-
const hiddenColumns =
|
|
10780
|
+
const hiddenColumns = React55__namespace.default.useMemo(() => {
|
|
10741
10781
|
const h = new Set(JSON.parse(hiddenKey));
|
|
10742
10782
|
return colFields.filter((f) => h.has(f));
|
|
10743
10783
|
}, [colFields, hiddenKey]);
|
|
10744
|
-
const ordered =
|
|
10784
|
+
const ordered = React55__namespace.default.useMemo(() => {
|
|
10745
10785
|
const orderIdx = (f) => {
|
|
10746
10786
|
const i = order.indexOf(f);
|
|
10747
10787
|
return i === -1 ? 9999 : i;
|
|
@@ -10760,8 +10800,8 @@ function Datatable({
|
|
|
10760
10800
|
const EXP_W = hasExpandCol ? 44 : 0;
|
|
10761
10801
|
const numLeft = EXP_W + CHK_W;
|
|
10762
10802
|
const leadW = numLeft + (showRowNum ? NUM_W : 0);
|
|
10763
|
-
const visLeft =
|
|
10764
|
-
const visRight =
|
|
10803
|
+
const visLeft = React55__namespace.default.useMemo(() => pins.left.filter((f) => colByField[f] && !effectiveHidden.has(f)), [pins.left, colByField, effectiveHidden]);
|
|
10804
|
+
const visRight = React55__namespace.default.useMemo(() => pins.right.filter((f) => colByField[f] && !effectiveHidden.has(f)), [pins.right, colByField, effectiveHidden]);
|
|
10765
10805
|
const stickyOf = (field) => {
|
|
10766
10806
|
if (visLeft.includes(field)) {
|
|
10767
10807
|
let off = leadW;
|
|
@@ -10784,7 +10824,7 @@ function Datatable({
|
|
|
10784
10824
|
}
|
|
10785
10825
|
return {};
|
|
10786
10826
|
};
|
|
10787
|
-
const processed =
|
|
10827
|
+
const processed = React55__namespace.default.useMemo(() => {
|
|
10788
10828
|
if (serverMode) {
|
|
10789
10829
|
if (rowOrder) {
|
|
10790
10830
|
const idx = new Map(rowOrder.map((k, i) => [k, i]));
|
|
@@ -10826,14 +10866,14 @@ function Datatable({
|
|
|
10826
10866
|
const serverTotal = rowCount == null ? processed.length : rowCount;
|
|
10827
10867
|
const totalRows = serverMode ? serverTotal : processed.length;
|
|
10828
10868
|
const totalPages = paginated ? Math.max(1, Math.ceil(totalRows / sizeVal)) : 1;
|
|
10829
|
-
const paged =
|
|
10869
|
+
const paged = React55__namespace.default.useMemo(
|
|
10830
10870
|
() => !paginated || serverMode ? processed : processed.slice(pageVal * sizeVal, pageVal * sizeVal + sizeVal),
|
|
10831
10871
|
[processed, paginated, serverMode, pageVal, sizeVal]
|
|
10832
10872
|
);
|
|
10833
|
-
|
|
10873
|
+
React55__namespace.default.useEffect(() => {
|
|
10834
10874
|
if (pageVal > totalPages - 1) commitPage(0);
|
|
10835
10875
|
}, [totalPages]);
|
|
10836
|
-
const treeRows =
|
|
10876
|
+
const treeRows = React55__namespace.default.useMemo(() => {
|
|
10837
10877
|
if (serverMode || typeof getSubRows !== "function") return null;
|
|
10838
10878
|
const out = [];
|
|
10839
10879
|
const seen2 = /* @__PURE__ */ new Set();
|
|
@@ -10847,12 +10887,12 @@ function Datatable({
|
|
|
10847
10887
|
for (const r2 of paged) walk(r2, 0);
|
|
10848
10888
|
return out;
|
|
10849
10889
|
}, [serverMode, getSubRows, paged, expandedSet, keyOf]);
|
|
10850
|
-
const depthByKey =
|
|
10890
|
+
const depthByKey = React55__namespace.default.useMemo(() => {
|
|
10851
10891
|
const m = /* @__PURE__ */ new Map();
|
|
10852
10892
|
if (treeRows) for (const t of treeRows) m.set(keyOf(t.row), t.depth);
|
|
10853
10893
|
return m;
|
|
10854
10894
|
}, [treeRows, keyOf]);
|
|
10855
|
-
const treeSeqByKey =
|
|
10895
|
+
const treeSeqByKey = React55__namespace.default.useMemo(() => {
|
|
10856
10896
|
if (!treeRows) return null;
|
|
10857
10897
|
const m = /* @__PURE__ */ new Map();
|
|
10858
10898
|
const seen2 = /* @__PURE__ */ new Set();
|
|
@@ -10867,7 +10907,7 @@ function Datatable({
|
|
|
10867
10907
|
for (const r2 of processed) walk(r2);
|
|
10868
10908
|
return m;
|
|
10869
10909
|
}, [treeRows, processed, expandedSet, getSubRows, keyOf]);
|
|
10870
|
-
const activeGroupBy =
|
|
10910
|
+
const activeGroupBy = React55__namespace.default.useMemo(() => groupBy.filter((f) => colByField[f]), [groupBy, colByField]);
|
|
10871
10911
|
function subtotalText(rowsIn) {
|
|
10872
10912
|
const parts = [];
|
|
10873
10913
|
for (const c of ordered) {
|
|
@@ -10894,7 +10934,7 @@ function Datatable({
|
|
|
10894
10934
|
if (agg === "max") return Math.max(...nums);
|
|
10895
10935
|
return null;
|
|
10896
10936
|
}
|
|
10897
|
-
const displayItems =
|
|
10937
|
+
const displayItems = React55__namespace.default.useMemo(() => {
|
|
10898
10938
|
if (!activeGroupBy.length) return null;
|
|
10899
10939
|
const build = (rowsIn, depth, prefix) => {
|
|
10900
10940
|
if (depth >= activeGroupBy.length) return rowsIn.map((row) => ({ kind: "leaf", row }));
|
|
@@ -10917,7 +10957,7 @@ function Datatable({
|
|
|
10917
10957
|
};
|
|
10918
10958
|
return build(paged, 0, "");
|
|
10919
10959
|
}, [activeGroupBy, collapsedSet, paged, ordered, aggOn]);
|
|
10920
|
-
const leafRows =
|
|
10960
|
+
const leafRows = React55__namespace.default.useMemo(
|
|
10921
10961
|
() => displayItems ? displayItems.filter((i) => i.kind === "leaf").map((i) => i.row) : treeRows ? treeRows.map((t) => t.row) : paged,
|
|
10922
10962
|
[displayItems, treeRows, paged]
|
|
10923
10963
|
);
|
|
@@ -10947,7 +10987,7 @@ function Datatable({
|
|
|
10947
10987
|
return { top, bottom };
|
|
10948
10988
|
});
|
|
10949
10989
|
}
|
|
10950
|
-
|
|
10990
|
+
React55__namespace.default.useEffect(() => {
|
|
10951
10991
|
if (!rowPinning) return;
|
|
10952
10992
|
const measure = () => {
|
|
10953
10993
|
if (theadRef.current) setHeadH(theadRef.current.offsetHeight || 41);
|
|
@@ -10961,18 +11001,18 @@ function Datatable({
|
|
|
10961
11001
|
const pinnedTopRows = canPinRows ? pinnedRows.top.map((k) => leafRows.find((r2, i) => keyOf(r2, i) === k)).filter(Boolean) : [];
|
|
10962
11002
|
const pinnedBottomRows = canPinRows ? pinnedRows.bottom.map((k) => leafRows.find((r2, i) => keyOf(r2, i) === k)).filter(Boolean) : [];
|
|
10963
11003
|
const middleRows = canPinRows ? leafRows.filter((r2, i) => !pinSideOf(keyOf(r2, i))) : leafRows;
|
|
10964
|
-
const keyIndex =
|
|
11004
|
+
const keyIndex = React55__namespace.default.useMemo(() => {
|
|
10965
11005
|
const m = /* @__PURE__ */ new Map();
|
|
10966
11006
|
leafRows.forEach((r2, i) => m.set(keyOf(r2, i), i));
|
|
10967
11007
|
return m;
|
|
10968
11008
|
}, [leafRows]);
|
|
10969
|
-
const keyIndexMid =
|
|
11009
|
+
const keyIndexMid = React55__namespace.default.useMemo(() => {
|
|
10970
11010
|
const m = /* @__PURE__ */ new Map();
|
|
10971
11011
|
middleRows.forEach((r2, i) => m.set(keyOf(r2, keyIndex.get(keyOf(r2)) ?? i), i));
|
|
10972
11012
|
return m;
|
|
10973
11013
|
}, [middleRows, keyIndex]);
|
|
10974
|
-
const cellColIndex =
|
|
10975
|
-
const cellRect =
|
|
11014
|
+
const cellColIndex = React55__namespace.default.useCallback((field) => ordered.findIndex((c) => c.field === field), [ordered]);
|
|
11015
|
+
const cellRect = React55__namespace.default.useMemo(() => {
|
|
10976
11016
|
if (selectionMode !== "cell" || !activeCellVal) return null;
|
|
10977
11017
|
const ar = keyIndex.get(activeCellVal.key), ac = cellColIndex(activeCellVal.field);
|
|
10978
11018
|
if (ar == null || ac < 0) return null;
|
|
@@ -10982,15 +11022,15 @@ function Datatable({
|
|
|
10982
11022
|
const c0 = nc < 0 ? ac : Math.min(ac, nc), c1 = nc < 0 ? ac : Math.max(ac, nc);
|
|
10983
11023
|
return { r0, r1, c0, c1 };
|
|
10984
11024
|
}, [selectionMode, activeCellVal, anchorCell, keyIndex, cellColIndex]);
|
|
10985
|
-
const activeCellId =
|
|
11025
|
+
const activeCellId = React55__namespace.default.useMemo(() => {
|
|
10986
11026
|
if (selectionMode !== "cell" || !activeCellVal) return void 0;
|
|
10987
11027
|
const ar = keyIndex.get(activeCellVal.key), ac = cellColIndex(activeCellVal.field);
|
|
10988
11028
|
return ar == null || ac < 0 ? void 0 : `${gridId}-${ar}-${ac}`;
|
|
10989
11029
|
}, [selectionMode, activeCellVal, keyIndex, cellColIndex, gridId]);
|
|
10990
|
-
const onCellSelRef =
|
|
11030
|
+
const onCellSelRef = React55__namespace.default.useRef(onCellSelectionChange);
|
|
10991
11031
|
onCellSelRef.current = onCellSelectionChange;
|
|
10992
|
-
const prevSelSigRef =
|
|
10993
|
-
|
|
11032
|
+
const prevSelSigRef = React55__namespace.default.useRef("");
|
|
11033
|
+
React55__namespace.default.useEffect(() => {
|
|
10994
11034
|
const cb = onCellSelRef.current;
|
|
10995
11035
|
if (selectionMode !== "cell" || !cb) return;
|
|
10996
11036
|
const cells = [];
|
|
@@ -11083,7 +11123,7 @@ function Datatable({
|
|
|
11083
11123
|
setReorderMsg("Reorder cancelled.");
|
|
11084
11124
|
}
|
|
11085
11125
|
}
|
|
11086
|
-
|
|
11126
|
+
React55__namespace.default.useEffect(() => {
|
|
11087
11127
|
if (rowFocusRef.current == null) return;
|
|
11088
11128
|
const key = rowFocusRef.current;
|
|
11089
11129
|
rowFocusRef.current = null;
|
|
@@ -11095,7 +11135,7 @@ function Datatable({
|
|
|
11095
11135
|
});
|
|
11096
11136
|
const estRowH = rowHeight ?? (density === "compact" ? 36 : density === "comfortable" ? 56 : 44);
|
|
11097
11137
|
const virtualizing = virtualized && !paginated && !activeGroupBy.length && !loading;
|
|
11098
|
-
|
|
11138
|
+
React55__namespace.default.useEffect(() => {
|
|
11099
11139
|
if (!virtualizing) return;
|
|
11100
11140
|
const el = scrollRef.current;
|
|
11101
11141
|
if (!el) return;
|
|
@@ -11105,13 +11145,13 @@ function Datatable({
|
|
|
11105
11145
|
if (ro) ro.observe(el);
|
|
11106
11146
|
return () => ro && ro.disconnect();
|
|
11107
11147
|
}, [virtualizing, height]);
|
|
11108
|
-
const onScrollVirtual =
|
|
11148
|
+
const onScrollVirtual = React55__namespace.default.useCallback((e) => {
|
|
11109
11149
|
setScrollTop(e.currentTarget.scrollTop);
|
|
11110
11150
|
}, []);
|
|
11111
11151
|
const vh = viewportH || (typeof height === "number" ? height : 440);
|
|
11112
|
-
const rowHRef =
|
|
11113
|
-
const [measureTick, setMeasureTick] =
|
|
11114
|
-
const offsets =
|
|
11152
|
+
const rowHRef = React55__namespace.default.useRef(/* @__PURE__ */ new Map());
|
|
11153
|
+
const [measureTick, setMeasureTick] = React55__namespace.default.useState(0);
|
|
11154
|
+
const offsets = React55__namespace.default.useMemo(() => {
|
|
11115
11155
|
if (!virtualizing) return null;
|
|
11116
11156
|
const total = middleRows.length;
|
|
11117
11157
|
const arr = new Float64Array(total + 1);
|
|
@@ -11121,7 +11161,7 @@ function Datatable({
|
|
|
11121
11161
|
}
|
|
11122
11162
|
return arr;
|
|
11123
11163
|
}, [virtualizing, middleRows, estRowH, measureTick]);
|
|
11124
|
-
const vWindow =
|
|
11164
|
+
const vWindow = React55__namespace.default.useMemo(() => {
|
|
11125
11165
|
if (!virtualizing || !offsets) return null;
|
|
11126
11166
|
const total = middleRows.length;
|
|
11127
11167
|
const totalH = offsets[total];
|
|
@@ -11150,7 +11190,7 @@ function Datatable({
|
|
|
11150
11190
|
if (start > end) start = end;
|
|
11151
11191
|
return { start, end, padTop: offsets[start], padBottom: Math.max(0, totalH - offsets[end]) };
|
|
11152
11192
|
}, [virtualizing, offsets, middleRows.length, vh, scrollTop, overscan]);
|
|
11153
|
-
|
|
11193
|
+
React55__namespace.default.useLayoutEffect(() => {
|
|
11154
11194
|
if (!virtualizing) return;
|
|
11155
11195
|
const el = scrollRef.current;
|
|
11156
11196
|
if (!el) return;
|
|
@@ -11165,9 +11205,9 @@ function Datatable({
|
|
|
11165
11205
|
}
|
|
11166
11206
|
if (changed) setMeasureTick((t) => t + 1);
|
|
11167
11207
|
});
|
|
11168
|
-
const onServerChangeRef =
|
|
11208
|
+
const onServerChangeRef = React55__namespace.default.useRef(onServerChange);
|
|
11169
11209
|
onServerChangeRef.current = onServerChange;
|
|
11170
|
-
|
|
11210
|
+
React55__namespace.default.useEffect(() => {
|
|
11171
11211
|
if (!serverMode) return;
|
|
11172
11212
|
const t = setTimeout(() => {
|
|
11173
11213
|
onServerChangeRef.current?.({
|
|
@@ -11187,10 +11227,10 @@ function Datatable({
|
|
|
11187
11227
|
}, 250);
|
|
11188
11228
|
return () => clearTimeout(t);
|
|
11189
11229
|
}, [serverMode, pageVal, sizeVal, sort, filters, filterLogic, quick, visibleColumns, hiddenColumns, treeExpandedKey]);
|
|
11190
|
-
const onColVisRef =
|
|
11230
|
+
const onColVisRef = React55__namespace.default.useRef(onColumnVisibilityChange);
|
|
11191
11231
|
onColVisRef.current = onColumnVisibilityChange;
|
|
11192
|
-
const lastVisibleKey =
|
|
11193
|
-
|
|
11232
|
+
const lastVisibleKey = React55__namespace.default.useRef(null);
|
|
11233
|
+
React55__namespace.default.useEffect(() => {
|
|
11194
11234
|
const key = JSON.stringify(visibleColumns);
|
|
11195
11235
|
if (lastVisibleKey.current === null) {
|
|
11196
11236
|
lastVisibleKey.current = key;
|
|
@@ -11222,7 +11262,7 @@ function Datatable({
|
|
|
11222
11262
|
return n;
|
|
11223
11263
|
});
|
|
11224
11264
|
}
|
|
11225
|
-
const movableMidFields =
|
|
11265
|
+
const movableMidFields = React55__namespace.default.useMemo(
|
|
11226
11266
|
() => ordered.filter((c) => !pins.left.includes(c.field) && !pins.right.includes(c.field) && c.reorderable !== false).map((c) => c.field),
|
|
11227
11267
|
[ordered, pins]
|
|
11228
11268
|
);
|
|
@@ -11257,7 +11297,7 @@ function Datatable({
|
|
|
11257
11297
|
}
|
|
11258
11298
|
return [...seen2.values()].sort((a, b) => String(a.label).localeCompare(String(b.label)));
|
|
11259
11299
|
}
|
|
11260
|
-
const [resizing, setResizing] =
|
|
11300
|
+
const [resizing, setResizing] = React55__namespace.default.useState(false);
|
|
11261
11301
|
function startResize(e, field) {
|
|
11262
11302
|
e.preventDefault();
|
|
11263
11303
|
e.stopPropagation();
|
|
@@ -11364,7 +11404,7 @@ function Datatable({
|
|
|
11364
11404
|
if (!agg) return null;
|
|
11365
11405
|
if (aggregationValues && col.field in aggregationValues) {
|
|
11366
11406
|
const pre = aggregationValues[col.field];
|
|
11367
|
-
if (pre && typeof pre === "object" && !
|
|
11407
|
+
if (pre && typeof pre === "object" && !React55__namespace.default.isValidElement(pre)) {
|
|
11368
11408
|
if (typeof agg === "string" && agg in pre) return pre[agg];
|
|
11369
11409
|
} else {
|
|
11370
11410
|
return pre;
|
|
@@ -11569,10 +11609,10 @@ function Datatable({
|
|
|
11569
11609
|
}
|
|
11570
11610
|
}
|
|
11571
11611
|
}
|
|
11572
|
-
|
|
11612
|
+
React55__namespace.default.useEffect(() => {
|
|
11573
11613
|
setFocus((f) => ({ r: Math.min(f.r, Math.max(0, leafRows.length - 1)), c: Math.min(f.c, Math.max(0, ordered.length - 1)) }));
|
|
11574
11614
|
}, [leafRows.length, ordered.length, pageVal]);
|
|
11575
|
-
|
|
11615
|
+
React55__namespace.default.useLayoutEffect(() => {
|
|
11576
11616
|
if (cellNavigation !== "widget") return;
|
|
11577
11617
|
const grid = gridRef.current;
|
|
11578
11618
|
if (!grid) return;
|
|
@@ -11587,12 +11627,12 @@ function Datatable({
|
|
|
11587
11627
|
td.tabIndex = active && ws.length === 0 ? 0 : -1;
|
|
11588
11628
|
});
|
|
11589
11629
|
}, [cellNavigation, focus.r, focus.c, leafRows, ordered, pageVal, interacting, hidden, pins, scrollTop, loading, measureTick, viewportH, pinnedRows]);
|
|
11590
|
-
const selectedRows =
|
|
11591
|
-
const selKeys =
|
|
11592
|
-
const onRowSelRef =
|
|
11630
|
+
const selectedRows = React55__namespace.default.useMemo(() => rows.filter((r2, i) => selected.has(keyOf(r2, i))), [rows, selected]);
|
|
11631
|
+
const selKeys = React55__namespace.default.useMemo(() => [...selected], [selected]);
|
|
11632
|
+
const onRowSelRef = React55__namespace.default.useRef(onRowSelectionChange);
|
|
11593
11633
|
onRowSelRef.current = onRowSelectionChange;
|
|
11594
|
-
const prevRowSelSigRef =
|
|
11595
|
-
|
|
11634
|
+
const prevRowSelSigRef = React55__namespace.default.useRef("");
|
|
11635
|
+
React55__namespace.default.useEffect(() => {
|
|
11596
11636
|
const cb = onRowSelRef.current;
|
|
11597
11637
|
if (!cb) return;
|
|
11598
11638
|
const sig = selKeys.join(",");
|
|
@@ -11601,7 +11641,7 @@ function Datatable({
|
|
|
11601
11641
|
cb(selKeys, selectedRows);
|
|
11602
11642
|
}, [selKeys, selectedRows]);
|
|
11603
11643
|
const revealRowRi = activeRowVal != null ? keyIndex.get(activeRowVal) : void 0;
|
|
11604
|
-
|
|
11644
|
+
React55__namespace.default.useEffect(() => {
|
|
11605
11645
|
if (!activeRowControlled || !scrollActiveRowIntoView || activeRowId == null) return;
|
|
11606
11646
|
const el = gridRef.current && gridRef.current.querySelector('.twc-dt__row[data-active="true"]');
|
|
11607
11647
|
if (el && el.scrollIntoView) el.scrollIntoView({ block: "nearest" });
|
|
@@ -11611,11 +11651,11 @@ function Datatable({
|
|
|
11611
11651
|
const revealInline = scrollActiveCellIntoView && typeof scrollActiveCellIntoView === "object" && scrollActiveCellIntoView.inline === "center" ? "center" : "nearest";
|
|
11612
11652
|
const revealRi = activeCellVal ? keyIndex.get(activeCellVal.key) : void 0;
|
|
11613
11653
|
const revealCi = activeCellVal ? cellColIndex(activeCellVal.field) : -1;
|
|
11614
|
-
const revealOffsetsRef =
|
|
11654
|
+
const revealOffsetsRef = React55__namespace.default.useRef(offsets);
|
|
11615
11655
|
revealOffsetsRef.current = offsets;
|
|
11616
|
-
const revealMidRef =
|
|
11656
|
+
const revealMidRef = React55__namespace.default.useRef(keyIndexMid);
|
|
11617
11657
|
revealMidRef.current = keyIndexMid;
|
|
11618
|
-
|
|
11658
|
+
React55__namespace.default.useEffect(() => {
|
|
11619
11659
|
if (!revealOn || !activeCellVal) return void 0;
|
|
11620
11660
|
const block = revealBlock, inline = revealInline;
|
|
11621
11661
|
const ri = revealRi, ci = revealCi;
|
|
@@ -11661,7 +11701,7 @@ function Datatable({
|
|
|
11661
11701
|
if (raf) cancelAnimationFrame(raf);
|
|
11662
11702
|
};
|
|
11663
11703
|
}, [activeCellVal?.key, activeCellVal?.field, revealOn, revealBlock, revealInline, revealRi, revealCi, virtualizing, headH, loading]);
|
|
11664
|
-
|
|
11704
|
+
React55__namespace.default.useEffect(() => {
|
|
11665
11705
|
if (!activeCellControlled || !activeCellVal) {
|
|
11666
11706
|
jumpAppliedRef.current = null;
|
|
11667
11707
|
return;
|
|
@@ -11679,11 +11719,11 @@ function Datatable({
|
|
|
11679
11719
|
function clearSelection() {
|
|
11680
11720
|
setSelected(/* @__PURE__ */ new Set());
|
|
11681
11721
|
}
|
|
11682
|
-
const [editing, setEditing] =
|
|
11683
|
-
const stagedEditRef =
|
|
11684
|
-
const onEditingChangeRef =
|
|
11722
|
+
const [editing, setEditing] = React55__namespace.default.useState(null);
|
|
11723
|
+
const stagedEditRef = React55__namespace.default.useRef(null);
|
|
11724
|
+
const onEditingChangeRef = React55__namespace.default.useRef(onEditingChange);
|
|
11685
11725
|
onEditingChangeRef.current = onEditingChange;
|
|
11686
|
-
const editStoppedRef =
|
|
11726
|
+
const editStoppedRef = React55__namespace.default.useRef(false);
|
|
11687
11727
|
const isColEditable = (c) => c.type !== "actions" && c.editable !== false && (c.editable === true || typeof c.editable === "function" || c.renderEditCell != null || editMode);
|
|
11688
11728
|
const isCellEditable = (c, row) => isColEditable(c) && (typeof c.editable !== "function" || !!c.editable(row, { field: c.field }));
|
|
11689
11729
|
function applyRowUpdate(rowKey2, updated, orig, field) {
|
|
@@ -11744,7 +11784,7 @@ function Datatable({
|
|
|
11744
11784
|
}
|
|
11745
11785
|
}
|
|
11746
11786
|
const batchEditKey = batchEditFields ? batchEditFields.join("\0") : "";
|
|
11747
|
-
const batchEditableCols =
|
|
11787
|
+
const batchEditableCols = React55__namespace.default.useMemo(
|
|
11748
11788
|
() => {
|
|
11749
11789
|
const base = cols.filter((c) => c.type !== "actions" && (c.editable ?? (editMode && c.editable !== false)));
|
|
11750
11790
|
return batchEditFields ? base.filter((c) => batchEditFields.includes(c.field)) : base;
|
|
@@ -11752,7 +11792,7 @@ function Datatable({
|
|
|
11752
11792
|
[cols, editMode, batchEditKey]
|
|
11753
11793
|
// eslint-disable-line react-hooks/exhaustive-deps
|
|
11754
11794
|
);
|
|
11755
|
-
const batchSel =
|
|
11795
|
+
const batchSel = React55__namespace.default.useMemo(() => {
|
|
11756
11796
|
if (!selected.size) return EMPTY_BATCH_SEL;
|
|
11757
11797
|
const testable = [], resolved = /* @__PURE__ */ new Set();
|
|
11758
11798
|
const take = (r2, i) => {
|
|
@@ -11773,18 +11813,18 @@ function Datatable({
|
|
|
11773
11813
|
}
|
|
11774
11814
|
return { testable, hasUntestable };
|
|
11775
11815
|
}, [rows, leafRows, selected, serverMode]);
|
|
11776
|
-
const batchEditableColsSel =
|
|
11816
|
+
const batchEditableColsSel = React55__namespace.default.useMemo(
|
|
11777
11817
|
() => batchEditableCols.filter((c) => typeof c.editable !== "function" || batchSel.hasUntestable || batchSel.testable.some((r2) => c.editable(r2, { field: c.field }))),
|
|
11778
11818
|
[batchEditableCols, batchSel]
|
|
11779
11819
|
);
|
|
11780
11820
|
const hasBatchEditor = showBatchEdit && batchEditableCols.length > 0;
|
|
11781
|
-
const [batchEdit, setBatchEdit] =
|
|
11821
|
+
const [batchEdit, setBatchEdit] = React55__namespace.default.useState(null);
|
|
11782
11822
|
const [batchEditPos, openBatchEdit, closeBatchEdit] = useFloating();
|
|
11783
11823
|
function openBatchEditor(el) {
|
|
11784
11824
|
setBatchEdit({ fields: {}, values: {} });
|
|
11785
11825
|
openBatchEdit(el, "left", 320);
|
|
11786
11826
|
}
|
|
11787
|
-
|
|
11827
|
+
React55__namespace.default.useEffect(() => {
|
|
11788
11828
|
if (!batchEdit) return;
|
|
11789
11829
|
const close = () => {
|
|
11790
11830
|
setBatchEdit(null);
|
|
@@ -11803,7 +11843,7 @@ function Datatable({
|
|
|
11803
11843
|
document.removeEventListener("keydown", onKey);
|
|
11804
11844
|
};
|
|
11805
11845
|
}, [batchEdit]);
|
|
11806
|
-
|
|
11846
|
+
React55__namespace.default.useEffect(() => {
|
|
11807
11847
|
if (batchEdit && selected.size === 0) {
|
|
11808
11848
|
setBatchEdit(null);
|
|
11809
11849
|
closeBatchEdit();
|
|
@@ -11873,17 +11913,17 @@ function Datatable({
|
|
|
11873
11913
|
setBatchEdit(null);
|
|
11874
11914
|
closeBatchEdit();
|
|
11875
11915
|
}
|
|
11876
|
-
const [clipboardMsg, setClipboardMsg] =
|
|
11877
|
-
const clipboardRef =
|
|
11878
|
-
const [clipFx, setClipFx] =
|
|
11879
|
-
const clipFxTimer =
|
|
11880
|
-
const onCellsCopyRef =
|
|
11916
|
+
const [clipboardMsg, setClipboardMsg] = React55__namespace.default.useState("");
|
|
11917
|
+
const clipboardRef = React55__namespace.default.useRef(null);
|
|
11918
|
+
const [clipFx, setClipFx] = React55__namespace.default.useState(null);
|
|
11919
|
+
const clipFxTimer = React55__namespace.default.useRef(null);
|
|
11920
|
+
const onCellsCopyRef = React55__namespace.default.useRef(onCellsCopy);
|
|
11881
11921
|
onCellsCopyRef.current = onCellsCopy;
|
|
11882
|
-
const onCellsPasteRef =
|
|
11922
|
+
const onCellsPasteRef = React55__namespace.default.useRef(onCellsPaste);
|
|
11883
11923
|
onCellsPasteRef.current = onCellsPaste;
|
|
11884
|
-
const onCellsCommitRef =
|
|
11924
|
+
const onCellsCommitRef = React55__namespace.default.useRef(onCellsCommit);
|
|
11885
11925
|
onCellsCommitRef.current = onCellsCommit;
|
|
11886
|
-
|
|
11926
|
+
React55__namespace.default.useEffect(() => () => {
|
|
11887
11927
|
if (clipFxTimer.current) clearTimeout(clipFxTimer.current);
|
|
11888
11928
|
}, []);
|
|
11889
11929
|
const announceClip = (msg, rect) => {
|
|
@@ -12052,7 +12092,7 @@ function Datatable({
|
|
|
12052
12092
|
e.preventDefault();
|
|
12053
12093
|
applyPastedText(text);
|
|
12054
12094
|
};
|
|
12055
|
-
|
|
12095
|
+
React55__namespace.default.useEffect(() => {
|
|
12056
12096
|
if (!editing) return;
|
|
12057
12097
|
const onDown = (e) => {
|
|
12058
12098
|
if (e.target.closest(".twc-dt__editor-wrap") || e.target.closest(".twc-pop")) return;
|
|
@@ -12144,10 +12184,10 @@ function Datatable({
|
|
|
12144
12184
|
] });
|
|
12145
12185
|
}
|
|
12146
12186
|
const tableMinWidth = leadW + ordered.reduce((a, c) => a + widthOf(c), 0);
|
|
12147
|
-
const filterableCols =
|
|
12187
|
+
const filterableCols = React55__namespace.default.useMemo(() => cols.filter((c) => c.filterable), [cols]);
|
|
12148
12188
|
const columnsShown = showColumns !== void 0 ? showColumns : cols.some((c) => c.hideable) || rowNumbers;
|
|
12149
12189
|
const filtersShown = showFilters !== void 0 ? showFilters : filterableCols.length > 0;
|
|
12150
|
-
|
|
12190
|
+
React55__namespace.default.useEffect(() => {
|
|
12151
12191
|
const el = filterPanelRef.current;
|
|
12152
12192
|
if (panel !== "filters" || !el || typeof document === "undefined") return void 0;
|
|
12153
12193
|
const measure = () => {
|
|
@@ -12595,15 +12635,25 @@ function Datatable({
|
|
|
12595
12635
|
const rowActive = selectionMode === "row" && activeRowVal === k;
|
|
12596
12636
|
const stickyStyle = pinSide === "top" ? { position: "sticky", top: headH, zIndex: 5 } : pinSide === "bottom" ? { position: "sticky", bottom: 0, zIndex: 5 } : void 0;
|
|
12597
12637
|
const h = rowHeights[k];
|
|
12598
|
-
const
|
|
12638
|
+
const userRowStyle = getRowStyle ? getRowStyle(row, ri) : void 0;
|
|
12639
|
+
const userRowClass = getRowClassName ? getRowClassName(row, ri) : void 0;
|
|
12640
|
+
const { background: _rowBgShorthand, backgroundColor: _rowBgColor, ...restRowStyle } = userRowStyle || {};
|
|
12641
|
+
const usable = (v) => typeof v === "string" && v.trim() !== "" ? v : void 0;
|
|
12642
|
+
const rowBg = usable(_rowBgShorthand) ?? usable(_rowBgColor);
|
|
12643
|
+
const rowStyle = {
|
|
12644
|
+
...restRowStyle,
|
|
12645
|
+
...rowBg != null ? { "--twc-dt-row-bg": rowBg } : {},
|
|
12646
|
+
...stickyStyle || {},
|
|
12647
|
+
...h ? { height: h } : {}
|
|
12648
|
+
};
|
|
12599
12649
|
const reorderable = canReorderRows && !pinSide;
|
|
12600
12650
|
const grabbed = rowGrab && rowGrab.key === k;
|
|
12601
12651
|
const grabTarget = rowGrab && !grabbed && midIdx != null && rowGrab.index === midIdx ? rowGrab.index >= keyIndexMid.get(rowGrab.key) ? "after" : "before" : void 0;
|
|
12602
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
12652
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(React55__namespace.default.Fragment, { children: [
|
|
12603
12653
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
12604
12654
|
"tr",
|
|
12605
12655
|
{
|
|
12606
|
-
className: "twc-dt__row",
|
|
12656
|
+
className: userRowClass ? `twc-dt__row ${userRowClass}` : "twc-dt__row",
|
|
12607
12657
|
role: "row",
|
|
12608
12658
|
"aria-rowindex": treeSeqByKey ? treeSeqByKey.get(k) + 2 : (paginated && !serverMode ? pageVal * sizeVal : 0) + ri + 2,
|
|
12609
12659
|
"aria-selected": (checkboxSelection ? sel : rowActive) || void 0,
|
|
@@ -14257,7 +14307,7 @@ function safeHref7(url) {
|
|
|
14257
14307
|
const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
|
|
14258
14308
|
return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
|
|
14259
14309
|
}
|
|
14260
|
-
var Grid =
|
|
14310
|
+
var Grid = /* @__PURE__ */ React55__namespace.default.forwardRef(function Grid2({
|
|
14261
14311
|
as: Tag2 = "div",
|
|
14262
14312
|
columns,
|
|
14263
14313
|
minChildWidth,
|
|
@@ -14277,7 +14327,7 @@ var Grid = React54__namespace.default.forwardRef(function Grid2({
|
|
|
14277
14327
|
}, ref) {
|
|
14278
14328
|
const { flatStyle, styleNode, sxAttr } = useSx(sx);
|
|
14279
14329
|
const responsive = columns != null && typeof columns === "object";
|
|
14280
|
-
const uid =
|
|
14330
|
+
const uid = React55__namespace.default.useId();
|
|
14281
14331
|
const gridId = responsive ? `g${uid.replace(/[^a-zA-Z0-9]/g, "")}` : null;
|
|
14282
14332
|
let css = "";
|
|
14283
14333
|
if (responsive) {
|
|
@@ -14323,7 +14373,6 @@ var Grid = React54__namespace.default.forwardRef(function Grid2({
|
|
|
14323
14373
|
}
|
|
14324
14374
|
);
|
|
14325
14375
|
});
|
|
14326
|
-
Grid.displayName = "Grid";
|
|
14327
14376
|
var CARDGRID_CSS = `
|
|
14328
14377
|
.twc-cardgrid { font-family: var(--font-sans); display: flex; flex-direction: column; gap: var(--space-3); }
|
|
14329
14378
|
.twc-cardgrid__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); }
|
|
@@ -14434,15 +14483,15 @@ function CardGrid({
|
|
|
14434
14483
|
...rest
|
|
14435
14484
|
}) {
|
|
14436
14485
|
const styles = useScopedStyles("twc-cardgrid-styles", CARDGRID_CSS);
|
|
14437
|
-
const autoId =
|
|
14486
|
+
const autoId = React55__namespace.default.useId();
|
|
14438
14487
|
const fieldId = id || autoId;
|
|
14439
|
-
const [internalPage, setInternalPage] =
|
|
14488
|
+
const [internalPage, setInternalPage] = React55__namespace.default.useState(defaultPage);
|
|
14440
14489
|
const pageVal = page !== void 0 ? page : internalPage;
|
|
14441
14490
|
const commitPage = (p) => {
|
|
14442
14491
|
onPageChange?.(p);
|
|
14443
14492
|
if (page === void 0) setInternalPage(p);
|
|
14444
14493
|
};
|
|
14445
|
-
const [internalSize, setInternalSize] =
|
|
14494
|
+
const [internalSize, setInternalSize] = React55__namespace.default.useState(pageSize > 0 ? pageSize : 12);
|
|
14446
14495
|
const sizeControlled = onPageSizeChange !== void 0;
|
|
14447
14496
|
const sizeVal = sizeControlled ? pageSize > 0 ? pageSize : 12 : internalSize;
|
|
14448
14497
|
const commitSize = (n) => {
|
|
@@ -14450,17 +14499,17 @@ function CardGrid({
|
|
|
14450
14499
|
if (!sizeControlled) setInternalSize(n);
|
|
14451
14500
|
commitPage(0);
|
|
14452
14501
|
};
|
|
14453
|
-
|
|
14502
|
+
React55__namespace.default.useEffect(() => {
|
|
14454
14503
|
if (!sizeControlled) setInternalSize(pageSize > 0 ? pageSize : 12);
|
|
14455
14504
|
}, [pageSize]);
|
|
14456
|
-
const [internalQuick, setInternalQuick] =
|
|
14505
|
+
const [internalQuick, setInternalQuick] = React55__namespace.default.useState(defaultQuickFilter);
|
|
14457
14506
|
const quickVal = quickFilter !== void 0 ? quickFilter : internalQuick;
|
|
14458
14507
|
const commitQuick = (q) => {
|
|
14459
14508
|
onQuickFilterChange?.(q);
|
|
14460
14509
|
if (quickFilter === void 0) setInternalQuick(q);
|
|
14461
14510
|
commitPage(0);
|
|
14462
14511
|
};
|
|
14463
|
-
const [internalSort, setInternalSort] =
|
|
14512
|
+
const [internalSort, setInternalSort] = React55__namespace.default.useState(defaultSort);
|
|
14464
14513
|
const sortVal = sort !== void 0 ? sort : internalSort;
|
|
14465
14514
|
const commitSort = (s) => {
|
|
14466
14515
|
onSortChange?.(s);
|
|
@@ -14468,8 +14517,8 @@ function CardGrid({
|
|
|
14468
14517
|
commitPage(0);
|
|
14469
14518
|
};
|
|
14470
14519
|
const filtersKey = JSON.stringify(filters);
|
|
14471
|
-
const mounted =
|
|
14472
|
-
|
|
14520
|
+
const mounted = React55__namespace.default.useRef(false);
|
|
14521
|
+
React55__namespace.default.useEffect(() => {
|
|
14473
14522
|
if (!mounted.current) {
|
|
14474
14523
|
mounted.current = true;
|
|
14475
14524
|
return;
|
|
@@ -14486,36 +14535,36 @@ function CardGrid({
|
|
|
14486
14535
|
const pageKnowable = !(serverMode && rowCount == null) && !loading;
|
|
14487
14536
|
const shownPage = pageKnowable ? Math.min(pageVal, lastPage) : pageVal;
|
|
14488
14537
|
const pageRows = serverMode ? rows : paginated && shownPage !== pageVal ? client.filtered.slice(shownPage * sizeVal, shownPage * sizeVal + sizeVal) : client.rows;
|
|
14489
|
-
const clampedFiltersKey =
|
|
14490
|
-
|
|
14538
|
+
const clampedFiltersKey = React55__namespace.default.useRef(filtersKey);
|
|
14539
|
+
React55__namespace.default.useEffect(() => {
|
|
14491
14540
|
if (clampedFiltersKey.current !== filtersKey) {
|
|
14492
14541
|
clampedFiltersKey.current = filtersKey;
|
|
14493
14542
|
return;
|
|
14494
14543
|
}
|
|
14495
14544
|
if (pageKnowable && pageVal > lastPage) commitPage(lastPage);
|
|
14496
14545
|
}, [lastPage, pageVal, pageKnowable, filtersKey]);
|
|
14497
|
-
const onServerChangeRef =
|
|
14546
|
+
const onServerChangeRef = React55__namespace.default.useRef(onServerChange);
|
|
14498
14547
|
onServerChangeRef.current = onServerChange;
|
|
14499
14548
|
const queryKey = JSON.stringify(query);
|
|
14500
|
-
|
|
14549
|
+
React55__namespace.default.useEffect(() => {
|
|
14501
14550
|
if (!serverMode) return void 0;
|
|
14502
14551
|
const t = setTimeout(() => onServerChangeRef.current?.(JSON.parse(queryKey)), 250);
|
|
14503
14552
|
return () => clearTimeout(t);
|
|
14504
14553
|
}, [serverMode, queryKey]);
|
|
14505
14554
|
const keyOf = typeof rowKey === "function" ? rowKey : (r2) => r2 && r2[rowKey];
|
|
14506
|
-
const [selected, setSelected] =
|
|
14555
|
+
const [selected, setSelected] = React55__namespace.default.useState(() => /* @__PURE__ */ new Set());
|
|
14507
14556
|
const retainCap = retainSelectedRows === true ? 1e3 : retainSelectedRows || 0;
|
|
14508
|
-
const retainedRef =
|
|
14509
|
-
const selKeys =
|
|
14510
|
-
const selectedRows =
|
|
14557
|
+
const retainedRef = React55__namespace.default.useRef(/* @__PURE__ */ new Map());
|
|
14558
|
+
const selKeys = React55__namespace.default.useMemo(() => [...selected], [selected]);
|
|
14559
|
+
const selectedRows = React55__namespace.default.useMemo(() => {
|
|
14511
14560
|
const onPage = new Map(pageRows.map((r2, i) => [keyOf(r2, i), r2]));
|
|
14512
14561
|
return selKeys.map((k) => onPage.get(k) ?? retainedRef.current.get(k)).filter((r2) => r2 !== void 0);
|
|
14513
14562
|
}, [selKeys, pageRows]);
|
|
14514
|
-
const clearSelection =
|
|
14563
|
+
const clearSelection = React55__namespace.default.useCallback(() => {
|
|
14515
14564
|
retainedRef.current.clear();
|
|
14516
14565
|
setSelected(/* @__PURE__ */ new Set());
|
|
14517
14566
|
}, []);
|
|
14518
|
-
const toggleKey =
|
|
14567
|
+
const toggleKey = React55__namespace.default.useCallback((key, row) => {
|
|
14519
14568
|
setSelected((prev) => {
|
|
14520
14569
|
const next = new Set(prev);
|
|
14521
14570
|
if (next.has(key)) {
|
|
@@ -14548,10 +14597,10 @@ function CardGrid({
|
|
|
14548
14597
|
return next;
|
|
14549
14598
|
});
|
|
14550
14599
|
};
|
|
14551
|
-
const onSelRef =
|
|
14600
|
+
const onSelRef = React55__namespace.default.useRef(onRowSelectionChange);
|
|
14552
14601
|
onSelRef.current = onRowSelectionChange;
|
|
14553
|
-
const prevSelSigRef =
|
|
14554
|
-
|
|
14602
|
+
const prevSelSigRef = React55__namespace.default.useRef(null);
|
|
14603
|
+
React55__namespace.default.useEffect(() => {
|
|
14555
14604
|
const cb = onSelRef.current;
|
|
14556
14605
|
if (!cb) return;
|
|
14557
14606
|
const sig = selKeys.join(",");
|
|
@@ -14764,8 +14813,8 @@ function DiffTable({
|
|
|
14764
14813
|
className = "",
|
|
14765
14814
|
...rest
|
|
14766
14815
|
}) {
|
|
14767
|
-
const dtColumns =
|
|
14768
|
-
const diff =
|
|
14816
|
+
const dtColumns = React55__namespace.default.useMemo(() => columns.map(toDatatableColumn), [columns]);
|
|
14817
|
+
const diff = React55__namespace.default.useMemo(
|
|
14769
14818
|
() => ({ from, to, rowKey, onlyChanged, showToggle, showSummary, moveDetection, compare, toggleLabel }),
|
|
14770
14819
|
[from, to, rowKey, onlyChanged, showToggle, showSummary, moveDetection, compare, toggleLabel]
|
|
14771
14820
|
);
|
|
@@ -14922,26 +14971,26 @@ function DatePicker({
|
|
|
14922
14971
|
}) {
|
|
14923
14972
|
const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS3);
|
|
14924
14973
|
const __twcStyles1 = useScopedStyles("twc-datepicker-styles", DATEPICKER_CSS);
|
|
14925
|
-
const autoId =
|
|
14974
|
+
const autoId = React55__namespace.default.useId();
|
|
14926
14975
|
const fieldId = id || autoId;
|
|
14927
14976
|
const descId = `${fieldId}-desc`;
|
|
14928
14977
|
const invalid = Boolean(error);
|
|
14929
|
-
const [internal, setInternal] =
|
|
14978
|
+
const [internal, setInternal] = React55__namespace.default.useState(defaultValue);
|
|
14930
14979
|
const selected = value !== void 0 ? value : internal;
|
|
14931
|
-
const [open, setOpen] =
|
|
14932
|
-
const [view, setView] =
|
|
14933
|
-
const [mode, setMode] =
|
|
14934
|
-
const [focusDate, setFocusDate] =
|
|
14935
|
-
const [focusMonth, setFocusMonth] =
|
|
14936
|
-
const [focusYear, setFocusYear] =
|
|
14937
|
-
const [editText, setEditText] =
|
|
14938
|
-
const [coords, setCoords] =
|
|
14939
|
-
const wrapRef =
|
|
14940
|
-
const triggerRef =
|
|
14941
|
-
const popRef =
|
|
14942
|
-
const gridRef =
|
|
14980
|
+
const [open, setOpen] = React55__namespace.default.useState(false);
|
|
14981
|
+
const [view, setView] = React55__namespace.default.useState(selected || /* @__PURE__ */ new Date());
|
|
14982
|
+
const [mode, setMode] = React55__namespace.default.useState("days");
|
|
14983
|
+
const [focusDate, setFocusDate] = React55__namespace.default.useState(null);
|
|
14984
|
+
const [focusMonth, setFocusMonth] = React55__namespace.default.useState(null);
|
|
14985
|
+
const [focusYear, setFocusYear] = React55__namespace.default.useState(null);
|
|
14986
|
+
const [editText, setEditText] = React55__namespace.default.useState(null);
|
|
14987
|
+
const [coords, setCoords] = React55__namespace.default.useState(null);
|
|
14988
|
+
const wrapRef = React55__namespace.default.useRef(null);
|
|
14989
|
+
const triggerRef = React55__namespace.default.useRef(null);
|
|
14990
|
+
const popRef = React55__namespace.default.useRef(null);
|
|
14991
|
+
const gridRef = React55__namespace.default.useRef(null);
|
|
14943
14992
|
const POP_W = 280;
|
|
14944
|
-
const place =
|
|
14993
|
+
const place = React55__namespace.default.useCallback(() => {
|
|
14945
14994
|
const el = triggerRef.current;
|
|
14946
14995
|
if (!el) return;
|
|
14947
14996
|
const r2 = el.getBoundingClientRect();
|
|
@@ -14952,7 +15001,7 @@ function DatePicker({
|
|
|
14952
15001
|
left = Math.max(8, left);
|
|
14953
15002
|
setCoords({ left, top: flip ? void 0 : Math.round(r2.bottom + 6), bottom: flip ? Math.round(vh - r2.top + 6) : void 0 });
|
|
14954
15003
|
}, []);
|
|
14955
|
-
|
|
15004
|
+
React55__namespace.default.useEffect(() => {
|
|
14956
15005
|
if (!open) return void 0;
|
|
14957
15006
|
place();
|
|
14958
15007
|
const onMove = () => place();
|
|
@@ -14970,7 +15019,7 @@ function DatePicker({
|
|
|
14970
15019
|
ro?.disconnect();
|
|
14971
15020
|
};
|
|
14972
15021
|
}, [open, place]);
|
|
14973
|
-
|
|
15022
|
+
React55__namespace.default.useEffect(() => {
|
|
14974
15023
|
if (!open) return;
|
|
14975
15024
|
setView(selected || /* @__PURE__ */ new Date());
|
|
14976
15025
|
setMode("days");
|
|
@@ -14991,9 +15040,9 @@ function DatePicker({
|
|
|
14991
15040
|
};
|
|
14992
15041
|
}, [open]);
|
|
14993
15042
|
useFocusTrap(popRef, open && !!coords, { initialFocus: () => gridRef.current?.querySelector('[tabindex="0"]') });
|
|
14994
|
-
const months =
|
|
14995
|
-
const monthsShort =
|
|
14996
|
-
const dows =
|
|
15043
|
+
const months = React55__namespace.default.useMemo(() => locale === void 0 ? MONTHS : monthNames(locale), [locale]);
|
|
15044
|
+
const monthsShort = React55__namespace.default.useMemo(() => locale === void 0 ? MONTHS.map((n) => n.slice(0, 3)) : monthShortNames(locale), [locale]);
|
|
15045
|
+
const dows = React55__namespace.default.useMemo(
|
|
14997
15046
|
() => locale === void 0 ? Array.from({ length: 7 }, (_, i) => DOW[(i + weekStartsOn) % 7]) : weekdayNames(locale, weekStartsOn),
|
|
14998
15047
|
[locale, weekStartsOn]
|
|
14999
15048
|
);
|
|
@@ -15048,11 +15097,11 @@ function DatePicker({
|
|
|
15048
15097
|
};
|
|
15049
15098
|
const cells = Array.from({ length: 42 }, (_, i) => new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + i));
|
|
15050
15099
|
const tabbableDate = (focusDate && cells.some((c) => sameDay(c, focusDate)) ? focusDate : null) || (selected && cells.some((c) => sameDay(c, selected)) ? selected : null) || (cells.some((c) => sameDay(c, today)) ? today : null) || new Date(y, m, 1);
|
|
15051
|
-
|
|
15100
|
+
React55__namespace.default.useEffect(() => {
|
|
15052
15101
|
if (!open || mode !== "days" || !focusDate) return;
|
|
15053
15102
|
gridRef.current?.querySelector(`[data-key="${keyOf(focusDate)}"]`)?.focus();
|
|
15054
15103
|
}, [focusDate, open, mode]);
|
|
15055
|
-
|
|
15104
|
+
React55__namespace.default.useEffect(() => {
|
|
15056
15105
|
if (!open || mode !== "months" || focusMonth == null) return;
|
|
15057
15106
|
gridRef.current?.querySelector(`[data-mo="${focusMonth}"]`)?.focus();
|
|
15058
15107
|
}, [focusMonth, open, mode]);
|
|
@@ -15076,7 +15125,7 @@ function DatePicker({
|
|
|
15076
15125
|
}
|
|
15077
15126
|
setFocusMonth(next);
|
|
15078
15127
|
};
|
|
15079
|
-
|
|
15128
|
+
React55__namespace.default.useEffect(() => {
|
|
15080
15129
|
if (!open || mode !== "years" || focusYear == null) return;
|
|
15081
15130
|
gridRef.current?.querySelector(`[data-yr="${focusYear}"]`)?.focus();
|
|
15082
15131
|
}, [focusYear, open, mode]);
|
|
@@ -15483,29 +15532,29 @@ function DateRangePicker({
|
|
|
15483
15532
|
}) {
|
|
15484
15533
|
const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS4);
|
|
15485
15534
|
const __twcStyles1 = useScopedStyles("twc-drp-styles", RANGE_CSS2);
|
|
15486
|
-
const [internal, setInternal] =
|
|
15535
|
+
const [internal, setInternal] = React55__namespace.default.useState(defaultValue);
|
|
15487
15536
|
const range2 = value !== void 0 ? value : internal;
|
|
15488
|
-
const [open, setOpen] =
|
|
15489
|
-
const [view, setView] =
|
|
15490
|
-
const [hover, setHover] =
|
|
15491
|
-
const [focusDate, setFocusDate] =
|
|
15492
|
-
const [mode, setMode] =
|
|
15493
|
-
const [focusMonth, setFocusMonth] =
|
|
15494
|
-
const [focusYear, setFocusYear] =
|
|
15495
|
-
const [editText, setEditText] =
|
|
15496
|
-
const [coords, setCoords] =
|
|
15497
|
-
const wrapRef =
|
|
15498
|
-
const triggerRef =
|
|
15499
|
-
const popRef =
|
|
15500
|
-
const gridRef =
|
|
15501
|
-
const labelId =
|
|
15537
|
+
const [open, setOpen] = React55__namespace.default.useState(false);
|
|
15538
|
+
const [view, setView] = React55__namespace.default.useState(range2.start || /* @__PURE__ */ new Date());
|
|
15539
|
+
const [hover, setHover] = React55__namespace.default.useState(null);
|
|
15540
|
+
const [focusDate, setFocusDate] = React55__namespace.default.useState(null);
|
|
15541
|
+
const [mode, setMode] = React55__namespace.default.useState("days");
|
|
15542
|
+
const [focusMonth, setFocusMonth] = React55__namespace.default.useState(null);
|
|
15543
|
+
const [focusYear, setFocusYear] = React55__namespace.default.useState(null);
|
|
15544
|
+
const [editText, setEditText] = React55__namespace.default.useState(null);
|
|
15545
|
+
const [coords, setCoords] = React55__namespace.default.useState(null);
|
|
15546
|
+
const wrapRef = React55__namespace.default.useRef(null);
|
|
15547
|
+
const triggerRef = React55__namespace.default.useRef(null);
|
|
15548
|
+
const popRef = React55__namespace.default.useRef(null);
|
|
15549
|
+
const gridRef = React55__namespace.default.useRef(null);
|
|
15550
|
+
const labelId = React55__namespace.default.useId();
|
|
15502
15551
|
const descId = `${labelId}-desc`;
|
|
15503
15552
|
const invalid = Boolean(error);
|
|
15504
|
-
|
|
15553
|
+
React55__namespace.default.useEffect(() => {
|
|
15505
15554
|
if (disabled) setOpen(false);
|
|
15506
15555
|
}, [disabled]);
|
|
15507
15556
|
const POP_W = 420;
|
|
15508
|
-
const place =
|
|
15557
|
+
const place = React55__namespace.default.useCallback(() => {
|
|
15509
15558
|
const el = triggerRef.current;
|
|
15510
15559
|
if (!el) return;
|
|
15511
15560
|
const r2 = el.getBoundingClientRect();
|
|
@@ -15516,7 +15565,7 @@ function DateRangePicker({
|
|
|
15516
15565
|
left = Math.max(8, left);
|
|
15517
15566
|
setCoords({ left, top: flip ? void 0 : Math.round(r2.bottom + 6), bottom: flip ? Math.round(vh - r2.top + 6) : void 0 });
|
|
15518
15567
|
}, []);
|
|
15519
|
-
|
|
15568
|
+
React55__namespace.default.useEffect(() => {
|
|
15520
15569
|
if (!open) return void 0;
|
|
15521
15570
|
place();
|
|
15522
15571
|
const onMove = () => place();
|
|
@@ -15534,7 +15583,7 @@ function DateRangePicker({
|
|
|
15534
15583
|
ro?.disconnect();
|
|
15535
15584
|
};
|
|
15536
15585
|
}, [open, place]);
|
|
15537
|
-
|
|
15586
|
+
React55__namespace.default.useEffect(() => {
|
|
15538
15587
|
if (!open) return;
|
|
15539
15588
|
const onDown = (e) => {
|
|
15540
15589
|
if (wrapRef.current && wrapRef.current.contains(e.target)) return;
|
|
@@ -15598,20 +15647,20 @@ function DateRangePicker({
|
|
|
15598
15647
|
const last = new Date(d.getFullYear(), d.getMonth() + n + 1, 0);
|
|
15599
15648
|
return new Date(last.getFullYear(), last.getMonth(), Math.min(d.getDate(), last.getDate()));
|
|
15600
15649
|
};
|
|
15601
|
-
|
|
15650
|
+
React55__namespace.default.useEffect(() => {
|
|
15602
15651
|
if (!open) {
|
|
15603
15652
|
setFocusDate(null);
|
|
15604
15653
|
setHover(null);
|
|
15605
15654
|
setMode("days");
|
|
15606
15655
|
}
|
|
15607
15656
|
}, [open]);
|
|
15608
|
-
|
|
15657
|
+
React55__namespace.default.useEffect(() => {
|
|
15609
15658
|
if (open && mode === "months" && focusMonth != null) gridRef.current?.querySelector(`[data-mo="${focusMonth}"]`)?.focus();
|
|
15610
15659
|
}, [focusMonth, open, mode]);
|
|
15611
|
-
|
|
15660
|
+
React55__namespace.default.useEffect(() => {
|
|
15612
15661
|
if (open && mode === "years" && focusYear != null) gridRef.current?.querySelector(`[data-yr="${focusYear}"]`)?.focus();
|
|
15613
15662
|
}, [focusYear, open, mode]);
|
|
15614
|
-
|
|
15663
|
+
React55__namespace.default.useEffect(() => {
|
|
15615
15664
|
if (!open || !focusDate) return;
|
|
15616
15665
|
gridRef.current?.querySelector(`[data-key="${keyOf(focusDate)}"]`)?.focus();
|
|
15617
15666
|
}, [focusDate, open]);
|
|
@@ -15696,9 +15745,9 @@ function DateRangePicker({
|
|
|
15696
15745
|
if (r2.start) setView(r2.start);
|
|
15697
15746
|
setOpen(false);
|
|
15698
15747
|
};
|
|
15699
|
-
const months =
|
|
15700
|
-
const monthsShort =
|
|
15701
|
-
const dows =
|
|
15748
|
+
const months = React55__namespace.default.useMemo(() => locale === void 0 ? MONTHS2 : monthNames2(locale), [locale]);
|
|
15749
|
+
const monthsShort = React55__namespace.default.useMemo(() => months.map((n) => n.slice(0, 3)), [months]);
|
|
15750
|
+
const dows = React55__namespace.default.useMemo(
|
|
15702
15751
|
() => locale === void 0 ? Array.from({ length: 7 }, (_, i) => DOW2[(i + weekStartsOn) % 7]) : weekdayNames2(locale, weekStartsOn),
|
|
15703
15752
|
[locale, weekStartsOn]
|
|
15704
15753
|
);
|
|
@@ -16053,19 +16102,19 @@ function TimePicker({
|
|
|
16053
16102
|
}) {
|
|
16054
16103
|
const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS5);
|
|
16055
16104
|
const __twcStyles1 = useScopedStyles("twc-timepicker-styles", TIMEPICKER_CSS);
|
|
16056
|
-
const autoId =
|
|
16105
|
+
const autoId = React55__namespace.default.useId();
|
|
16057
16106
|
const fieldId = id || autoId;
|
|
16058
16107
|
const descId = `${fieldId}-desc`;
|
|
16059
16108
|
const invalid = Boolean(error);
|
|
16060
|
-
const [internal, setInternal] =
|
|
16109
|
+
const [internal, setInternal] = React55__namespace.default.useState(defaultValue);
|
|
16061
16110
|
const selected = value !== void 0 ? value : internal;
|
|
16062
|
-
const [open, setOpen] =
|
|
16063
|
-
const [editText, setEditText] =
|
|
16064
|
-
const [coords, setCoords] =
|
|
16065
|
-
const wrapRef =
|
|
16066
|
-
const triggerRef =
|
|
16067
|
-
const popRef =
|
|
16068
|
-
const place =
|
|
16111
|
+
const [open, setOpen] = React55__namespace.default.useState(false);
|
|
16112
|
+
const [editText, setEditText] = React55__namespace.default.useState(null);
|
|
16113
|
+
const [coords, setCoords] = React55__namespace.default.useState(null);
|
|
16114
|
+
const wrapRef = React55__namespace.default.useRef(null);
|
|
16115
|
+
const triggerRef = React55__namespace.default.useRef(null);
|
|
16116
|
+
const popRef = React55__namespace.default.useRef(null);
|
|
16117
|
+
const place = React55__namespace.default.useCallback(() => {
|
|
16069
16118
|
const el = triggerRef.current;
|
|
16070
16119
|
if (!el) return;
|
|
16071
16120
|
const r2 = el.getBoundingClientRect();
|
|
@@ -16076,7 +16125,7 @@ function TimePicker({
|
|
|
16076
16125
|
left = Math.max(8, left);
|
|
16077
16126
|
setCoords({ left, top: flip ? void 0 : Math.round(r2.bottom + 6), bottom: flip ? Math.round(vh - r2.top + 6) : void 0 });
|
|
16078
16127
|
}, []);
|
|
16079
|
-
|
|
16128
|
+
React55__namespace.default.useEffect(() => {
|
|
16080
16129
|
if (!open) return void 0;
|
|
16081
16130
|
place();
|
|
16082
16131
|
const onMove = () => place();
|
|
@@ -16094,7 +16143,7 @@ function TimePicker({
|
|
|
16094
16143
|
ro?.disconnect();
|
|
16095
16144
|
};
|
|
16096
16145
|
}, [open, place]);
|
|
16097
|
-
|
|
16146
|
+
React55__namespace.default.useEffect(() => {
|
|
16098
16147
|
if (!open) return void 0;
|
|
16099
16148
|
const onDown = (e) => {
|
|
16100
16149
|
if (wrapRef.current && wrapRef.current.contains(e.target)) return;
|
|
@@ -16114,7 +16163,7 @@ function TimePicker({
|
|
|
16114
16163
|
useFocusTrap(popRef, open && !!coords, {
|
|
16115
16164
|
initialFocus: () => popRef.current?.querySelector('.twc-tp__opt[data-selected="true"]') || popRef.current?.querySelector('.twc-tp__opt[tabindex="0"]')
|
|
16116
16165
|
});
|
|
16117
|
-
|
|
16166
|
+
React55__namespace.default.useEffect(() => {
|
|
16118
16167
|
if (!open || !coords) return;
|
|
16119
16168
|
popRef.current?.querySelectorAll('.twc-tp__opt[data-selected="true"]').forEach((el) => el.scrollIntoView({ block: "center" }));
|
|
16120
16169
|
}, [open, coords]);
|
|
@@ -16462,10 +16511,10 @@ function DateTimePicker({
|
|
|
16462
16511
|
}) {
|
|
16463
16512
|
const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS6);
|
|
16464
16513
|
const __twcStyles1 = useScopedStyles("twc-datetimepicker-styles", DTP_CSS);
|
|
16465
|
-
const autoId =
|
|
16514
|
+
const autoId = React55__namespace.default.useId();
|
|
16466
16515
|
const fieldId = id || autoId;
|
|
16467
16516
|
const descId = `${fieldId}-desc`;
|
|
16468
|
-
const [internal, setInternal] =
|
|
16517
|
+
const [internal, setInternal] = React55__namespace.default.useState(defaultValue);
|
|
16469
16518
|
const selected = value !== void 0 ? value : internal;
|
|
16470
16519
|
const commitVal = (d) => {
|
|
16471
16520
|
if (value === void 0) setInternal(d);
|
|
@@ -16609,11 +16658,11 @@ function FilterBar({
|
|
|
16609
16658
|
...rest
|
|
16610
16659
|
}) {
|
|
16611
16660
|
const styles = useScopedStyles("twc-filterbar-styles", FILTERBAR_CSS);
|
|
16612
|
-
const autoId =
|
|
16661
|
+
const autoId = React55__namespace.default.useId();
|
|
16613
16662
|
const fieldId = id || autoId;
|
|
16614
|
-
const [internal, setInternal] =
|
|
16663
|
+
const [internal, setInternal] = React55__namespace.default.useState(defaultValue);
|
|
16615
16664
|
const clauses = value !== void 0 ? value : internal;
|
|
16616
|
-
const values =
|
|
16665
|
+
const values = React55__namespace.default.useMemo(() => clausesToValues(fields, clauses), [fields, clauses]);
|
|
16617
16666
|
const emit = (nextValues) => {
|
|
16618
16667
|
const next = valuesToClauses(fields, nextValues);
|
|
16619
16668
|
if (value === void 0) setInternal(next);
|
|
@@ -16797,14 +16846,14 @@ function Dialog({
|
|
|
16797
16846
|
className = "",
|
|
16798
16847
|
...rest
|
|
16799
16848
|
}) {
|
|
16800
|
-
const autoId =
|
|
16849
|
+
const autoId = React55__namespace.default.useId();
|
|
16801
16850
|
const titleId = `${autoId}-title`;
|
|
16802
16851
|
const descId = `${autoId}-desc`;
|
|
16803
|
-
const dialogRef =
|
|
16852
|
+
const dialogRef = React55__namespace.default.useRef(null);
|
|
16804
16853
|
const __twcStyles = useScopedStyles("twc-dialog-styles", DIALOG_CSS);
|
|
16805
16854
|
const renderPortal = usePortal();
|
|
16806
|
-
const [mounted, setMounted] =
|
|
16807
|
-
|
|
16855
|
+
const [mounted, setMounted] = React55__namespace.default.useState(open);
|
|
16856
|
+
React55__namespace.default.useEffect(() => {
|
|
16808
16857
|
if (open) {
|
|
16809
16858
|
setMounted(true);
|
|
16810
16859
|
return;
|
|
@@ -16816,7 +16865,7 @@ function Dialog({
|
|
|
16816
16865
|
useInertBackground(dialogRef, open && mounted);
|
|
16817
16866
|
useFocusTrap(dialogRef, open && mounted);
|
|
16818
16867
|
const isTop = useLayer(open && mounted);
|
|
16819
|
-
|
|
16868
|
+
React55__namespace.default.useEffect(() => {
|
|
16820
16869
|
if (!open) return void 0;
|
|
16821
16870
|
const onKey = (e) => {
|
|
16822
16871
|
if (e.defaultPrevented || !isTop()) return;
|
|
@@ -16969,14 +17018,14 @@ function Drawer({
|
|
|
16969
17018
|
style,
|
|
16970
17019
|
...rest
|
|
16971
17020
|
}) {
|
|
16972
|
-
const autoId =
|
|
17021
|
+
const autoId = React55__namespace.default.useId();
|
|
16973
17022
|
const titleId = `${autoId}-title`;
|
|
16974
17023
|
const descId = `${autoId}-desc`;
|
|
16975
|
-
const panelRef =
|
|
17024
|
+
const panelRef = React55__namespace.default.useRef(null);
|
|
16976
17025
|
const __twcStyles = useScopedStyles("twc-drawer-styles", DRAWER_CSS);
|
|
16977
17026
|
const renderPortal = usePortal();
|
|
16978
|
-
const [mounted, setMounted] =
|
|
16979
|
-
|
|
17027
|
+
const [mounted, setMounted] = React55__namespace.default.useState(open);
|
|
17028
|
+
React55__namespace.default.useEffect(() => {
|
|
16980
17029
|
if (open) {
|
|
16981
17030
|
setMounted(true);
|
|
16982
17031
|
return;
|
|
@@ -16988,7 +17037,7 @@ function Drawer({
|
|
|
16988
17037
|
useInertBackground(panelRef, open && mounted);
|
|
16989
17038
|
useFocusTrap(panelRef, open && mounted);
|
|
16990
17039
|
const isTop = useLayer(open && mounted);
|
|
16991
|
-
|
|
17040
|
+
React55__namespace.default.useEffect(() => {
|
|
16992
17041
|
if (!open) return void 0;
|
|
16993
17042
|
const onKey = (e) => {
|
|
16994
17043
|
if (e.defaultPrevented || !isTop()) return;
|
|
@@ -17078,11 +17127,11 @@ function Field({
|
|
|
17078
17127
|
...rest
|
|
17079
17128
|
}) {
|
|
17080
17129
|
const __twcStyles = useScopedStyles("twc-field-styles", FIELD_CSS7);
|
|
17081
|
-
const autoId =
|
|
17130
|
+
const autoId = React55__namespace.default.useId();
|
|
17082
17131
|
const fieldId = id || autoId;
|
|
17083
17132
|
const descId = `${fieldId}-desc`;
|
|
17084
17133
|
const hasMsg = Boolean(error || hint);
|
|
17085
|
-
const control =
|
|
17134
|
+
const control = React55__namespace.default.isValidElement(children) ? React55__namespace.default.cloneElement(children, {
|
|
17086
17135
|
"aria-describedby": [children.props["aria-describedby"], hasMsg ? descId : null].filter(Boolean).join(" ") || void 0,
|
|
17087
17136
|
"aria-invalid": children.props["aria-invalid"] !== void 0 ? children.props["aria-invalid"] : error ? true : void 0
|
|
17088
17137
|
}) : children;
|
|
@@ -17182,7 +17231,7 @@ function fmtSize(bytes) {
|
|
|
17182
17231
|
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
|
|
17183
17232
|
return (bytes / (1024 * 1024)).toFixed(1) + " MB";
|
|
17184
17233
|
}
|
|
17185
|
-
var FileUpload =
|
|
17234
|
+
var FileUpload = /* @__PURE__ */ React55__namespace.default.forwardRef(function FileUpload2({
|
|
17186
17235
|
accept,
|
|
17187
17236
|
multiple = false,
|
|
17188
17237
|
disabled = false,
|
|
@@ -17207,12 +17256,12 @@ var FileUpload = React54__namespace.default.forwardRef(function FileUpload2({
|
|
|
17207
17256
|
...rest
|
|
17208
17257
|
}, ref) {
|
|
17209
17258
|
const __twcStyles = useScopedStyles("twc-upload-styles", UPLOAD_CSS);
|
|
17210
|
-
const [internal, setInternal] =
|
|
17259
|
+
const [internal, setInternal] = React55__namespace.default.useState(defaultValue);
|
|
17211
17260
|
const files = value !== void 0 ? value : internal;
|
|
17212
|
-
const [drag, setDrag] =
|
|
17213
|
-
const inputRef =
|
|
17214
|
-
|
|
17215
|
-
const autoId =
|
|
17261
|
+
const [drag, setDrag] = React55__namespace.default.useState(false);
|
|
17262
|
+
const inputRef = React55__namespace.default.useRef(null);
|
|
17263
|
+
React55__namespace.default.useImperativeHandle(ref, () => ({ open: () => inputRef.current?.click() }), []);
|
|
17264
|
+
const autoId = React55__namespace.default.useId();
|
|
17216
17265
|
const fieldId = id || autoId;
|
|
17217
17266
|
const descId = `${fieldId}-desc`;
|
|
17218
17267
|
const labelId = `${fieldId}-label`;
|
|
@@ -17255,7 +17304,7 @@ var FileUpload = React54__namespace.default.forwardRef(function FileUpload2({
|
|
|
17255
17304
|
)
|
|
17256
17305
|
);
|
|
17257
17306
|
if (trigger) {
|
|
17258
|
-
const triggerEl =
|
|
17307
|
+
const triggerEl = React55__namespace.default.isValidElement(trigger) && error ? React55__namespace.default.cloneElement(trigger, {
|
|
17259
17308
|
"aria-describedby": [trigger.props["aria-describedby"], descId].filter(Boolean).join(" ") || void 0
|
|
17260
17309
|
}) : trigger;
|
|
17261
17310
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-upload ${className}`, "data-size": size, ...rest, children: [
|
|
@@ -17349,7 +17398,6 @@ var FileUpload = React54__namespace.default.forwardRef(function FileUpload2({
|
|
|
17349
17398
|
error ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: descId, className: "twc-field__error", children: error }) : null
|
|
17350
17399
|
] });
|
|
17351
17400
|
});
|
|
17352
|
-
FileUpload.displayName = "FileUpload";
|
|
17353
17401
|
var TOGGLEGROUP_CSS = `
|
|
17354
17402
|
.twc-togglegroup { display: inline-flex; gap: var(--space-1); }
|
|
17355
17403
|
.twc-togglegroup[data-orientation="vertical"] { flex-direction: column; align-items: stretch; }
|
|
@@ -17371,10 +17419,10 @@ function ToggleGroup({
|
|
|
17371
17419
|
...rest
|
|
17372
17420
|
}) {
|
|
17373
17421
|
const __twcStyles = useScopedStyles("twc-togglegroup-styles", TOGGLEGROUP_CSS);
|
|
17374
|
-
const groupRef =
|
|
17422
|
+
const groupRef = React55__namespace.default.useRef(null);
|
|
17375
17423
|
const multiple = type === "multiple";
|
|
17376
|
-
const [focusedIdx, setFocusedIdx] =
|
|
17377
|
-
const [internal, setInternal] =
|
|
17424
|
+
const [focusedIdx, setFocusedIdx] = React55__namespace.default.useState(null);
|
|
17425
|
+
const [internal, setInternal] = React55__namespace.default.useState(defaultValue !== void 0 ? defaultValue : multiple ? [] : null);
|
|
17378
17426
|
const current = value !== void 0 ? value : internal;
|
|
17379
17427
|
const isSelected = (v) => multiple ? Array.isArray(current) && current.includes(v) : current === v;
|
|
17380
17428
|
const commit = (next) => {
|
|
@@ -17495,15 +17543,15 @@ function Kanban({
|
|
|
17495
17543
|
...rest
|
|
17496
17544
|
}) {
|
|
17497
17545
|
const __twcStyles = useScopedStyles("twc-kanban-styles", KANBAN_CSS);
|
|
17498
|
-
const [internal, setInternal] =
|
|
17546
|
+
const [internal, setInternal] = React55__namespace.default.useState(cards ?? defaultCards ?? []);
|
|
17499
17547
|
const items = cards !== void 0 ? cards : internal;
|
|
17500
|
-
const [drag, setDrag] =
|
|
17501
|
-
const [overCol, setOverCol] =
|
|
17502
|
-
const [grab, setGrab] =
|
|
17503
|
-
const [announce, setAnnounce] =
|
|
17504
|
-
const rootRef =
|
|
17505
|
-
const focusIdRef =
|
|
17506
|
-
|
|
17548
|
+
const [drag, setDrag] = React55__namespace.default.useState(null);
|
|
17549
|
+
const [overCol, setOverCol] = React55__namespace.default.useState(null);
|
|
17550
|
+
const [grab, setGrab] = React55__namespace.default.useState(null);
|
|
17551
|
+
const [announce, setAnnounce] = React55__namespace.default.useState("");
|
|
17552
|
+
const rootRef = React55__namespace.default.useRef(null);
|
|
17553
|
+
const focusIdRef = React55__namespace.default.useRef(null);
|
|
17554
|
+
React55__namespace.default.useEffect(() => {
|
|
17507
17555
|
if (focusIdRef.current == null) return void 0;
|
|
17508
17556
|
const raf = requestAnimationFrame(() => {
|
|
17509
17557
|
const id = focusIdRef.current;
|
|
@@ -17822,22 +17870,22 @@ function Popover({
|
|
|
17822
17870
|
...rest
|
|
17823
17871
|
}) {
|
|
17824
17872
|
const __twcStyles = useScopedStyles("twc-popover-styles", POPOVER_CSS);
|
|
17825
|
-
const [openState, setOpenState] =
|
|
17826
|
-
const [render, setRender] =
|
|
17827
|
-
const [pos, setPos] =
|
|
17828
|
-
const wrapRef =
|
|
17873
|
+
const [openState, setOpenState] = React55__namespace.default.useState(defaultOpen);
|
|
17874
|
+
const [render, setRender] = React55__namespace.default.useState(false);
|
|
17875
|
+
const [pos, setPos] = React55__namespace.default.useState(null);
|
|
17876
|
+
const wrapRef = React55__namespace.default.useRef(null);
|
|
17829
17877
|
useTriggerAudit(wrapRef, "Popover");
|
|
17830
|
-
const popRef =
|
|
17831
|
-
const popId =
|
|
17878
|
+
const popRef = React55__namespace.default.useRef(null);
|
|
17879
|
+
const popId = React55__namespace.default.useId();
|
|
17832
17880
|
const controlled = openProp !== void 0;
|
|
17833
17881
|
const open = controlled ? !!openProp : openState;
|
|
17834
|
-
const openRef =
|
|
17882
|
+
const openRef = React55__namespace.default.useRef(open);
|
|
17835
17883
|
openRef.current = open;
|
|
17836
|
-
const controlledRef =
|
|
17884
|
+
const controlledRef = React55__namespace.default.useRef(controlled);
|
|
17837
17885
|
controlledRef.current = controlled;
|
|
17838
|
-
const onOpenChangeRef =
|
|
17886
|
+
const onOpenChangeRef = React55__namespace.default.useRef(onOpenChange);
|
|
17839
17887
|
onOpenChangeRef.current = onOpenChange;
|
|
17840
|
-
const setOpen =
|
|
17888
|
+
const setOpen = React55__namespace.default.useCallback((next) => {
|
|
17841
17889
|
const value = typeof next === "function" ? next(openRef.current) : next;
|
|
17842
17890
|
if (value === openRef.current) return;
|
|
17843
17891
|
if (!controlledRef.current) setOpenState(value);
|
|
@@ -17845,7 +17893,7 @@ function Popover({
|
|
|
17845
17893
|
}, []);
|
|
17846
17894
|
const toggle = () => setOpen((o) => !o);
|
|
17847
17895
|
const RD = { createPortal: typeof reactDom.createPortal === "function" ? reactDom.createPortal : typeof window !== "undefined" && window.ReactDOM && window.ReactDOM.createPortal };
|
|
17848
|
-
const place =
|
|
17896
|
+
const place = React55__namespace.default.useCallback(() => {
|
|
17849
17897
|
const t = wrapRef.current;
|
|
17850
17898
|
if (!t) return;
|
|
17851
17899
|
const r2 = t.getBoundingClientRect();
|
|
@@ -17883,7 +17931,7 @@ function Popover({
|
|
|
17883
17931
|
setPos({ top, left, width: w, flip: false, arrow, maxHeight: vh - 2 * M });
|
|
17884
17932
|
}, [placement, align, width]);
|
|
17885
17933
|
const isTop = useLayer(open && render);
|
|
17886
|
-
|
|
17934
|
+
React55__namespace.default.useEffect(() => {
|
|
17887
17935
|
if (!open) return;
|
|
17888
17936
|
place();
|
|
17889
17937
|
const onMove = () => place();
|
|
@@ -17910,7 +17958,7 @@ function Popover({
|
|
|
17910
17958
|
document.removeEventListener("keydown", onKey);
|
|
17911
17959
|
};
|
|
17912
17960
|
}, [open, place, isTop]);
|
|
17913
|
-
|
|
17961
|
+
React55__namespace.default.useEffect(() => {
|
|
17914
17962
|
if (open) {
|
|
17915
17963
|
setRender(true);
|
|
17916
17964
|
return;
|
|
@@ -17918,12 +17966,12 @@ function Popover({
|
|
|
17918
17966
|
const t = setTimeout(() => setRender(false), 170);
|
|
17919
17967
|
return () => clearTimeout(t);
|
|
17920
17968
|
}, [open]);
|
|
17921
|
-
|
|
17969
|
+
React55__namespace.default.useEffect(() => {
|
|
17922
17970
|
if (render && open) place();
|
|
17923
17971
|
}, [render, place]);
|
|
17924
|
-
const restoreRef =
|
|
17925
|
-
const needFocusRef =
|
|
17926
|
-
|
|
17972
|
+
const restoreRef = React55__namespace.default.useRef(null);
|
|
17973
|
+
const needFocusRef = React55__namespace.default.useRef(false);
|
|
17974
|
+
React55__namespace.default.useEffect(() => {
|
|
17927
17975
|
if (open) {
|
|
17928
17976
|
restoreRef.current = document.activeElement;
|
|
17929
17977
|
needFocusRef.current = true;
|
|
@@ -17959,7 +18007,7 @@ function Popover({
|
|
|
17959
18007
|
}
|
|
17960
18008
|
) : null;
|
|
17961
18009
|
const fix = {};
|
|
17962
|
-
if (
|
|
18010
|
+
if (React55__namespace.default.isValidElement(trigger)) {
|
|
17963
18011
|
if (!triggerIsControl(trigger)) fix.role = "button";
|
|
17964
18012
|
fix.onKeyDown = (e) => {
|
|
17965
18013
|
trigger.props.onKeyDown?.(e);
|
|
@@ -17971,7 +18019,7 @@ function Popover({
|
|
|
17971
18019
|
}
|
|
17972
18020
|
};
|
|
17973
18021
|
}
|
|
17974
|
-
const triggerEl =
|
|
18022
|
+
const triggerEl = React55__namespace.default.isValidElement(trigger) ? React55__namespace.default.cloneElement(trigger, {
|
|
17975
18023
|
onClick: (e) => {
|
|
17976
18024
|
trigger.props.onClick?.(e);
|
|
17977
18025
|
toggle();
|
|
@@ -18018,7 +18066,7 @@ function Progress({
|
|
|
18018
18066
|
className = "",
|
|
18019
18067
|
...rest
|
|
18020
18068
|
}) {
|
|
18021
|
-
const labelId =
|
|
18069
|
+
const labelId = React55__namespace.default.useId();
|
|
18022
18070
|
const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restProps } = rest;
|
|
18023
18071
|
const __twcStyles = useScopedStyles("twc-progress-styles", `
|
|
18024
18072
|
.twc-progress-wrap { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); }
|
|
@@ -18089,7 +18137,7 @@ function Progress({
|
|
|
18089
18137
|
] })
|
|
18090
18138
|
);
|
|
18091
18139
|
}
|
|
18092
|
-
|
|
18140
|
+
var Radio = /* @__PURE__ */ React55__namespace.default.forwardRef(function Radio2({
|
|
18093
18141
|
label,
|
|
18094
18142
|
description,
|
|
18095
18143
|
error,
|
|
@@ -18105,7 +18153,7 @@ function Radio({
|
|
|
18105
18153
|
className = "",
|
|
18106
18154
|
onChange,
|
|
18107
18155
|
...rest
|
|
18108
|
-
}) {
|
|
18156
|
+
}, ref) {
|
|
18109
18157
|
const __twcStyles = useScopedStyles("twc-radio-styles", `
|
|
18110
18158
|
.twc-radio { display: inline-flex; align-items: flex-start; gap: var(--space-2-5); cursor: pointer; font-family: var(--font-sans); }
|
|
18111
18159
|
/* tone \u2192 accent set (default primary). Mirrors Button's --_accent model; Badge's tone vocabulary. */
|
|
@@ -18145,7 +18193,7 @@ function Radio({
|
|
|
18145
18193
|
.twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
|
|
18146
18194
|
.twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
|
|
18147
18195
|
`);
|
|
18148
|
-
const autoId =
|
|
18196
|
+
const autoId = React55__namespace.default.useId();
|
|
18149
18197
|
const fieldId = id || autoId;
|
|
18150
18198
|
const errId = `${fieldId}-error`;
|
|
18151
18199
|
const invalid = Boolean(error);
|
|
@@ -18158,6 +18206,7 @@ function Radio({
|
|
|
18158
18206
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
18159
18207
|
"input",
|
|
18160
18208
|
{
|
|
18209
|
+
ref,
|
|
18161
18210
|
id: fieldId,
|
|
18162
18211
|
type: "radio",
|
|
18163
18212
|
className: "twc-radio__input",
|
|
@@ -18188,7 +18237,7 @@ function Radio({
|
|
|
18188
18237
|
control,
|
|
18189
18238
|
/* @__PURE__ */ jsxRuntime.jsx("span", { id: errId, className: "twc-field__error", children: error })
|
|
18190
18239
|
] });
|
|
18191
|
-
}
|
|
18240
|
+
});
|
|
18192
18241
|
var RADIO_GROUP_CSS = `
|
|
18193
18242
|
.twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
|
|
18194
18243
|
.twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
|
|
@@ -18218,13 +18267,13 @@ function RadioGroup({
|
|
|
18218
18267
|
...rest
|
|
18219
18268
|
}) {
|
|
18220
18269
|
const __twcStyles = useScopedStyles("twc-radio-group-styles", RADIO_GROUP_CSS);
|
|
18221
|
-
const autoId =
|
|
18270
|
+
const autoId = React55__namespace.default.useId();
|
|
18222
18271
|
const fieldId = id || autoId;
|
|
18223
18272
|
const labelId = `${fieldId}-label`;
|
|
18224
18273
|
const descId = `${fieldId}-desc`;
|
|
18225
18274
|
const groupName = name || `${fieldId}-name`;
|
|
18226
18275
|
const invalid = Boolean(error);
|
|
18227
|
-
const [internal, setInternal] =
|
|
18276
|
+
const [internal, setInternal] = React55__namespace.default.useState(defaultValue);
|
|
18228
18277
|
const current = value !== void 0 ? value : internal;
|
|
18229
18278
|
const select = (v) => {
|
|
18230
18279
|
if (value === void 0) setInternal(v);
|
|
@@ -18245,10 +18294,10 @@ function RadioGroup({
|
|
|
18245
18294
|
tone
|
|
18246
18295
|
},
|
|
18247
18296
|
o.value
|
|
18248
|
-
)) :
|
|
18249
|
-
if (!
|
|
18297
|
+
)) : React55__namespace.default.Children.map(children, (child) => {
|
|
18298
|
+
if (!React55__namespace.default.isValidElement(child)) return child;
|
|
18250
18299
|
const v = child.props.value;
|
|
18251
|
-
return
|
|
18300
|
+
return React55__namespace.default.cloneElement(child, {
|
|
18252
18301
|
name: child.props.name ?? groupName,
|
|
18253
18302
|
checked: child.props.checked ?? current === v,
|
|
18254
18303
|
onChange: child.props.onChange ?? (() => select(v)),
|
|
@@ -18328,12 +18377,12 @@ function Rating({
|
|
|
18328
18377
|
...rest
|
|
18329
18378
|
}) {
|
|
18330
18379
|
const __twcStyles = useScopedStyles("twc-rating-styles", RATING_CSS);
|
|
18331
|
-
const [internal, setInternal] =
|
|
18332
|
-
const [hover, setHover] =
|
|
18380
|
+
const [internal, setInternal] = React55__namespace.default.useState(defaultValue);
|
|
18381
|
+
const [hover, setHover] = React55__namespace.default.useState(0);
|
|
18333
18382
|
const val = value !== void 0 ? value : internal;
|
|
18334
18383
|
const shown = hover || val;
|
|
18335
18384
|
const interactive = !readOnly && !disabled;
|
|
18336
|
-
const btnRefs =
|
|
18385
|
+
const btnRefs = React55__namespace.default.useRef([]);
|
|
18337
18386
|
const tabStar = Math.min(count, Math.max(1, Math.round(val) || 1));
|
|
18338
18387
|
const fmt = (v) => format ? format(v) : Number.isInteger(v) ? String(v) : v.toFixed(1);
|
|
18339
18388
|
if (process.env.NODE_ENV !== "production" && interactive && !Number.isInteger(val)) {
|
|
@@ -18538,24 +18587,24 @@ function Sidebar({
|
|
|
18538
18587
|
...rest
|
|
18539
18588
|
}) {
|
|
18540
18589
|
const __twcStyles = useScopedStyles("twc-sidebar-styles", SIDEBAR_CSS);
|
|
18541
|
-
const navId =
|
|
18542
|
-
const panelRef =
|
|
18590
|
+
const navId = React55__namespace.default.useId();
|
|
18591
|
+
const panelRef = React55__namespace.default.useRef(null);
|
|
18543
18592
|
const renderPortal = usePortal();
|
|
18544
|
-
const [internal, setInternal] =
|
|
18593
|
+
const [internal, setInternal] = React55__namespace.default.useState(defaultCollapsed);
|
|
18545
18594
|
const collapsed = collapsedProp !== void 0 ? collapsedProp : internal;
|
|
18546
18595
|
const toggle = () => {
|
|
18547
18596
|
const next = !collapsed;
|
|
18548
18597
|
if (collapsedProp === void 0) setInternal(next);
|
|
18549
18598
|
onCollapsedChange?.(next);
|
|
18550
18599
|
};
|
|
18551
|
-
const [openInternal, setOpenInternal] =
|
|
18600
|
+
const [openInternal, setOpenInternal] = React55__namespace.default.useState(defaultOpen);
|
|
18552
18601
|
const open = openProp !== void 0 ? openProp : openInternal;
|
|
18553
18602
|
const setOpen = (next) => {
|
|
18554
18603
|
if (openProp === void 0) setOpenInternal(next);
|
|
18555
18604
|
onOpenChange?.(next);
|
|
18556
18605
|
};
|
|
18557
|
-
const [mounted, setMounted] =
|
|
18558
|
-
|
|
18606
|
+
const [mounted, setMounted] = React55__namespace.default.useState(open);
|
|
18607
|
+
React55__namespace.default.useEffect(() => {
|
|
18559
18608
|
if (!overlay) return void 0;
|
|
18560
18609
|
if (open) {
|
|
18561
18610
|
setMounted(true);
|
|
@@ -18564,7 +18613,7 @@ function Sidebar({
|
|
|
18564
18613
|
const t = setTimeout(() => setMounted(false), 170);
|
|
18565
18614
|
return () => clearTimeout(t);
|
|
18566
18615
|
}, [overlay, open]);
|
|
18567
|
-
|
|
18616
|
+
React55__namespace.default.useEffect(() => {
|
|
18568
18617
|
if (!overlay || !open) return void 0;
|
|
18569
18618
|
const prev = document.body.style.overflow;
|
|
18570
18619
|
document.body.style.overflow = "hidden";
|
|
@@ -18573,7 +18622,7 @@ function Sidebar({
|
|
|
18573
18622
|
};
|
|
18574
18623
|
}, [overlay, open]);
|
|
18575
18624
|
useFocusTrap(panelRef, overlay && open && mounted);
|
|
18576
|
-
|
|
18625
|
+
React55__namespace.default.useEffect(() => {
|
|
18577
18626
|
if (!overlay || !open) return void 0;
|
|
18578
18627
|
const onKey = (e) => {
|
|
18579
18628
|
if (e.key === "Escape") {
|
|
@@ -18625,7 +18674,7 @@ function Sidebar({
|
|
|
18625
18674
|
const body = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
18626
18675
|
__twcStyles,
|
|
18627
18676
|
brand ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-sidebar__head", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-sidebar__brand", children: brand }) }) : null,
|
|
18628
|
-
/* @__PURE__ */ jsxRuntime.jsx("nav", { id: navId, className: "twc-sidebar__nav", "aria-label": navLabel, children: groups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
18677
|
+
/* @__PURE__ */ jsxRuntime.jsx("nav", { id: navId, className: "twc-sidebar__nav", "aria-label": navLabel, children: groups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React55__namespace.default.Fragment, { children: [
|
|
18629
18678
|
g.section != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-sidebar__section", id: g.sid, children: g.section }) : null,
|
|
18630
18679
|
/* @__PURE__ */ jsxRuntime.jsx("ul", { className: "twc-sidebar__list", ...g.section != null ? { "aria-labelledby": g.sid } : {}, children: g.entries.map(({ it, i }) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: renderItem(it) }, i)) })
|
|
18631
18680
|
] }, gi)) }),
|
|
@@ -18811,10 +18860,10 @@ function Slider({
|
|
|
18811
18860
|
return Math.min(max, Math.max(min, Math.round(stepped * 1e6) / 1e6));
|
|
18812
18861
|
};
|
|
18813
18862
|
const __twcStyles = useScopedStyles("twc-slider-styles", SLIDER_CSS);
|
|
18814
|
-
const autoId =
|
|
18863
|
+
const autoId = React55__namespace.default.useId();
|
|
18815
18864
|
const fieldId = id || autoId;
|
|
18816
18865
|
const isRange = range2 || Array.isArray(value) || Array.isArray(defaultValue);
|
|
18817
|
-
const [internal, setInternal] =
|
|
18866
|
+
const [internal, setInternal] = React55__namespace.default.useState(() => {
|
|
18818
18867
|
if (isRange) {
|
|
18819
18868
|
const dv = Array.isArray(defaultValue) ? defaultValue : [min, max];
|
|
18820
18869
|
return [clampSnap(dv[0]), clampSnap(dv[1])];
|
|
@@ -18824,9 +18873,9 @@ function Slider({
|
|
|
18824
18873
|
const rawVal = value !== void 0 ? value : internal;
|
|
18825
18874
|
const clampedVals = (isRange ? [Number(rawVal[0]), Number(rawVal[1])] : [Number(rawVal)]).map((v) => Math.min(max, Math.max(min, Number.isFinite(v) ? v : min)));
|
|
18826
18875
|
const indices = isRange ? [0, 1] : [0];
|
|
18827
|
-
const trackRef =
|
|
18828
|
-
const [dragging, setDragging] =
|
|
18829
|
-
const [typed, setTyped] =
|
|
18876
|
+
const trackRef = React55__namespace.default.useRef(null);
|
|
18877
|
+
const [dragging, setDragging] = React55__namespace.default.useState(false);
|
|
18878
|
+
const [typed, setTyped] = React55__namespace.default.useState({});
|
|
18830
18879
|
const fmt = (v) => formatValue ? formatValue(v) : v.toFixed(decimals);
|
|
18831
18880
|
const valueTextFor = (v) => {
|
|
18832
18881
|
if (getAriaValueText) return getAriaValueText(v);
|
|
@@ -18878,8 +18927,8 @@ function Slider({
|
|
|
18878
18927
|
const ratio = Math.min(1, Math.max(0, (clientX - r2.left) / r2.width));
|
|
18879
18928
|
return clampSnap(min + ratio * (max - min));
|
|
18880
18929
|
};
|
|
18881
|
-
const dragCleanupRef =
|
|
18882
|
-
|
|
18930
|
+
const dragCleanupRef = React55__namespace.default.useRef(null);
|
|
18931
|
+
React55__namespace.default.useEffect(() => () => dragCleanupRef.current?.(), []);
|
|
18883
18932
|
function onPointerDown(e) {
|
|
18884
18933
|
if (disabled) return;
|
|
18885
18934
|
e.preventDefault();
|
|
@@ -18928,7 +18977,7 @@ function Slider({
|
|
|
18928
18977
|
name ? clampedVals.map((v, i) => /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: v, disabled: disabled || void 0 }, i)) : null,
|
|
18929
18978
|
label || showValue || editable ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-slider__head", children: [
|
|
18930
18979
|
label ? /* @__PURE__ */ jsxRuntime.jsx("label", { className: "twc-slider__label", id: labelId, children: label }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
|
|
18931
|
-
editable ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-slider__inputs", children: indices.map((i) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
18980
|
+
editable ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-slider__inputs", children: indices.map((i) => /* @__PURE__ */ jsxRuntime.jsxs(React55__namespace.default.Fragment, { children: [
|
|
18932
18981
|
i > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-slider__input-sep", "aria-hidden": "true", children: "\u2013" }) : null,
|
|
18933
18982
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
18934
18983
|
"input",
|
|
@@ -19141,7 +19190,7 @@ function Stepper({
|
|
|
19141
19190
|
...rest
|
|
19142
19191
|
}) {
|
|
19143
19192
|
const __twcStyles = useScopedStyles("twc-stepper-styles", STEPPER_CSS);
|
|
19144
|
-
const [activeInternal, setActiveInternal] =
|
|
19193
|
+
const [activeInternal, setActiveInternal] = React55__namespace.default.useState(defaultActive);
|
|
19145
19194
|
const active = activeProp !== void 0 ? activeProp : activeInternal;
|
|
19146
19195
|
const handleStep = (i) => {
|
|
19147
19196
|
if (activeProp === void 0) setActiveInternal(i);
|
|
@@ -19221,7 +19270,7 @@ function Stepper({
|
|
|
19221
19270
|
})
|
|
19222
19271
|
] });
|
|
19223
19272
|
}
|
|
19224
|
-
|
|
19273
|
+
var Switch = /* @__PURE__ */ React55__namespace.default.forwardRef(function Switch2({
|
|
19225
19274
|
label,
|
|
19226
19275
|
description,
|
|
19227
19276
|
error,
|
|
@@ -19235,7 +19284,7 @@ function Switch({
|
|
|
19235
19284
|
className = "",
|
|
19236
19285
|
onChange,
|
|
19237
19286
|
...rest
|
|
19238
|
-
}) {
|
|
19287
|
+
}, ref) {
|
|
19239
19288
|
const __twcStyles = useScopedStyles("twc-switch-styles", `
|
|
19240
19289
|
/* tone \u2192 accent set (default primary). Mirrors Button's --_accent model; Badge's tone vocabulary. */
|
|
19241
19290
|
.twc-switch { --_accent: var(--color-primary); --_accent-fg: var(--color-primary-fg); --_accent-subtle: var(--color-primary-subtle); --_accent-subtle-fg: var(--color-primary-subtle-fg); --_accent-border: var(--color-primary-border); }
|
|
@@ -19288,7 +19337,7 @@ function Switch({
|
|
|
19288
19337
|
.twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
|
|
19289
19338
|
.twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
|
|
19290
19339
|
`);
|
|
19291
|
-
const autoId =
|
|
19340
|
+
const autoId = React55__namespace.default.useId();
|
|
19292
19341
|
const fieldId = id || autoId;
|
|
19293
19342
|
const errId = `${fieldId}-error`;
|
|
19294
19343
|
const invalid = Boolean(error);
|
|
@@ -19301,6 +19350,7 @@ function Switch({
|
|
|
19301
19350
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
19302
19351
|
"input",
|
|
19303
19352
|
{
|
|
19353
|
+
ref,
|
|
19304
19354
|
id: fieldId,
|
|
19305
19355
|
type: "checkbox",
|
|
19306
19356
|
role: "switch",
|
|
@@ -19330,7 +19380,7 @@ function Switch({
|
|
|
19330
19380
|
control,
|
|
19331
19381
|
/* @__PURE__ */ jsxRuntime.jsx("span", { id: errId, className: "twc-field__error", children: error })
|
|
19332
19382
|
] });
|
|
19333
|
-
}
|
|
19383
|
+
});
|
|
19334
19384
|
var TABLE_CSS = `
|
|
19335
19385
|
.twc-table-wrap { width: 100%; overflow-x: auto; border-radius: var(--radius-lg); border: var(--border-thin) solid var(--color-border); background: var(--color-surface); }
|
|
19336
19386
|
.twc-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-text); }
|
|
@@ -19396,14 +19446,14 @@ function Table({
|
|
|
19396
19446
|
...rest
|
|
19397
19447
|
}) {
|
|
19398
19448
|
const __twcStyles = useScopedStyles("twc-table-styles", TABLE_CSS);
|
|
19399
|
-
const cols =
|
|
19449
|
+
const cols = React55__namespace.default.useMemo(
|
|
19400
19450
|
() => (columns || []).map((c) => ({ ...c, header: c.headerName, render: c.renderCell })),
|
|
19401
19451
|
[columns]
|
|
19402
19452
|
);
|
|
19403
19453
|
const dataRows = rowsProp || [];
|
|
19404
|
-
const [internalSort, setInternalSort] =
|
|
19454
|
+
const [internalSort, setInternalSort] = React55__namespace.default.useState(defaultSort || { field: null, dir: "asc" });
|
|
19405
19455
|
const sort = (sortProp !== void 0 ? sortProp : internalSort) || { field: null, dir: "asc" };
|
|
19406
|
-
const rows =
|
|
19456
|
+
const rows = React55__namespace.default.useMemo(() => {
|
|
19407
19457
|
if (!sortable || !sort.field) return dataRows;
|
|
19408
19458
|
const col = cols.find((c) => c.field === sort.field);
|
|
19409
19459
|
if (!col) return dataRows;
|
|
@@ -19555,15 +19605,15 @@ function Tabs({
|
|
|
19555
19605
|
}) {
|
|
19556
19606
|
const vertical = orientation === "vertical";
|
|
19557
19607
|
const __twcStyles = useScopedStyles("twc-tabs-styles", TABS_CSS);
|
|
19558
|
-
const [internal, setInternal] =
|
|
19608
|
+
const [internal, setInternal] = React55__namespace.default.useState(defaultValue ?? items[0]?.value);
|
|
19559
19609
|
const active = value ?? internal;
|
|
19560
|
-
const listRef =
|
|
19561
|
-
const [ind, setInd] =
|
|
19562
|
-
const baseId =
|
|
19610
|
+
const listRef = React55__namespace.default.useRef(null);
|
|
19611
|
+
const [ind, setInd] = React55__namespace.default.useState({ left: 0, width: 0, top: 0, height: 0 });
|
|
19612
|
+
const baseId = React55__namespace.default.useId();
|
|
19563
19613
|
const tabIdAt = (i) => `${baseId}-tab-${i}`;
|
|
19564
19614
|
const panelId = `${baseId}-panel`;
|
|
19565
19615
|
const activeIndex = items.findIndex((it) => it.value === active);
|
|
19566
|
-
const updateIndicator =
|
|
19616
|
+
const updateIndicator = React55__namespace.default.useCallback(() => {
|
|
19567
19617
|
const list = listRef.current;
|
|
19568
19618
|
if (!list) return;
|
|
19569
19619
|
const el = list.querySelector('[data-active="true"]');
|
|
@@ -19572,10 +19622,10 @@ function Tabs({
|
|
|
19572
19622
|
if (!vertical) el.scrollIntoView?.({ inline: "nearest", block: "nearest" });
|
|
19573
19623
|
}
|
|
19574
19624
|
}, [vertical]);
|
|
19575
|
-
|
|
19625
|
+
React55__namespace.default.useEffect(() => {
|
|
19576
19626
|
updateIndicator();
|
|
19577
19627
|
}, [active, updateIndicator, items, orientation]);
|
|
19578
|
-
|
|
19628
|
+
React55__namespace.default.useEffect(() => {
|
|
19579
19629
|
const r2 = () => updateIndicator();
|
|
19580
19630
|
window.addEventListener("resize", r2);
|
|
19581
19631
|
if (typeof document !== "undefined" && document.fonts && document.fonts.ready) {
|
|
@@ -19721,7 +19771,7 @@ function Tag({
|
|
|
19721
19771
|
}, "aria-label": _removeLabel, type: "button", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
|
|
19722
19772
|
] });
|
|
19723
19773
|
}
|
|
19724
|
-
var useIso = typeof document !== "undefined" ?
|
|
19774
|
+
var useIso = typeof document !== "undefined" ? React55__namespace.default.useLayoutEffect : React55__namespace.default.useEffect;
|
|
19725
19775
|
var TEXTAREA_CSS = `
|
|
19726
19776
|
.twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
|
|
19727
19777
|
.twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
|
|
@@ -19770,7 +19820,7 @@ var TEXTAREA_CSS = `
|
|
|
19770
19820
|
.twc-field__count { margin-inline-start: auto; font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; flex: none; }
|
|
19771
19821
|
.twc-field__count[data-danger="true"] { color: var(--color-danger-subtle-fg); }
|
|
19772
19822
|
`;
|
|
19773
|
-
var Textarea =
|
|
19823
|
+
var Textarea = /* @__PURE__ */ React55__namespace.default.forwardRef(function Textarea2({
|
|
19774
19824
|
label,
|
|
19775
19825
|
hint,
|
|
19776
19826
|
error,
|
|
@@ -19789,19 +19839,19 @@ var Textarea = React54__namespace.default.forwardRef(function Textarea2({
|
|
|
19789
19839
|
...rest
|
|
19790
19840
|
}, ref) {
|
|
19791
19841
|
const __twcStyles = useScopedStyles("twc-textarea-styles", TEXTAREA_CSS);
|
|
19792
|
-
const autoId =
|
|
19842
|
+
const autoId = React55__namespace.default.useId();
|
|
19793
19843
|
const fieldId = id || autoId;
|
|
19794
19844
|
const descId = `${fieldId}-desc`;
|
|
19795
19845
|
const countId = `${fieldId}-count`;
|
|
19796
19846
|
const invalid = Boolean(error);
|
|
19797
|
-
const innerRef =
|
|
19847
|
+
const innerRef = React55__namespace.default.useRef(null);
|
|
19798
19848
|
const setRef = (el) => {
|
|
19799
19849
|
innerRef.current = el;
|
|
19800
19850
|
if (typeof ref === "function") ref(el);
|
|
19801
19851
|
else if (ref) ref.current = el;
|
|
19802
19852
|
};
|
|
19803
19853
|
const countControlled = rest.value !== void 0;
|
|
19804
|
-
const [len2, setLen] =
|
|
19854
|
+
const [len2, setLen] = React55__namespace.default.useState(() => String(rest.defaultValue ?? "").length);
|
|
19805
19855
|
const count = countControlled ? String(rest.value ?? "").length : len2;
|
|
19806
19856
|
const max = rest.maxLength;
|
|
19807
19857
|
const showCounter = showCount && max != null;
|
|
@@ -20003,19 +20053,19 @@ function Toast({
|
|
|
20003
20053
|
}) {
|
|
20004
20054
|
const resolvedTone = tone === "neutral" ? "default" : tone;
|
|
20005
20055
|
const __twcStyles = useScopedStyles("twc-toast-styles", TOAST_CSS);
|
|
20006
|
-
const onCloseRef =
|
|
20007
|
-
|
|
20056
|
+
const onCloseRef = React55__namespace.default.useRef(onClose);
|
|
20057
|
+
React55__namespace.default.useEffect(() => {
|
|
20008
20058
|
onCloseRef.current = onClose;
|
|
20009
20059
|
}, [onClose]);
|
|
20010
|
-
const timer =
|
|
20011
|
-
const stop =
|
|
20012
|
-
const start =
|
|
20060
|
+
const timer = React55__namespace.default.useRef();
|
|
20061
|
+
const stop = React55__namespace.default.useCallback(() => clearTimeout(timer.current), []);
|
|
20062
|
+
const start = React55__namespace.default.useCallback(() => {
|
|
20013
20063
|
stop();
|
|
20014
20064
|
if (duration && duration !== Infinity && onCloseRef.current) {
|
|
20015
20065
|
timer.current = setTimeout(() => onCloseRef.current && onCloseRef.current(), duration);
|
|
20016
20066
|
}
|
|
20017
20067
|
}, [duration, stop]);
|
|
20018
|
-
|
|
20068
|
+
React55__namespace.default.useEffect(() => {
|
|
20019
20069
|
start();
|
|
20020
20070
|
return stop;
|
|
20021
20071
|
}, [start, stop]);
|
|
@@ -20060,32 +20110,32 @@ function Toast({
|
|
|
20060
20110
|
}
|
|
20061
20111
|
function ToastViewport({ children, limit, className = "", ...rest }) {
|
|
20062
20112
|
const __twcStyles = useScopedStyles("twc-toast-styles", TOAST_CSS);
|
|
20063
|
-
const shown = limit && limit > 0 ?
|
|
20113
|
+
const shown = limit && limit > 0 ? React55__namespace.default.Children.toArray(children).slice(-limit) : children;
|
|
20064
20114
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-toast-viewport ${className}`, role: "region", "aria-label": "Notifications", ...rest, children: [
|
|
20065
20115
|
__twcStyles,
|
|
20066
20116
|
shown
|
|
20067
20117
|
] });
|
|
20068
20118
|
}
|
|
20069
|
-
var ToastContext =
|
|
20119
|
+
var ToastContext = React55__namespace.default.createContext(null);
|
|
20070
20120
|
function useToast() {
|
|
20071
|
-
const ctx =
|
|
20121
|
+
const ctx = React55__namespace.default.useContext(ToastContext);
|
|
20072
20122
|
if (!ctx) throw new Error("useToast must be used within a <ToastProvider>.");
|
|
20073
20123
|
return ctx;
|
|
20074
20124
|
}
|
|
20075
20125
|
function ToastProvider({ children, limit = 4, duration = 4500, ...viewportProps }) {
|
|
20076
|
-
const [toasts, setToasts] =
|
|
20077
|
-
const [politeMsg, setPoliteMsg] =
|
|
20078
|
-
const [assertiveMsg, setAssertiveMsg] =
|
|
20079
|
-
const idRef =
|
|
20080
|
-
const limitRef =
|
|
20081
|
-
|
|
20126
|
+
const [toasts, setToasts] = React55__namespace.default.useState([]);
|
|
20127
|
+
const [politeMsg, setPoliteMsg] = React55__namespace.default.useState("");
|
|
20128
|
+
const [assertiveMsg, setAssertiveMsg] = React55__namespace.default.useState("");
|
|
20129
|
+
const idRef = React55__namespace.default.useRef(0);
|
|
20130
|
+
const limitRef = React55__namespace.default.useRef(limit);
|
|
20131
|
+
React55__namespace.default.useEffect(() => {
|
|
20082
20132
|
limitRef.current = limit;
|
|
20083
20133
|
}, [limit]);
|
|
20084
|
-
const dismiss =
|
|
20134
|
+
const dismiss = React55__namespace.default.useCallback((id) => {
|
|
20085
20135
|
setToasts((s) => s.filter((t) => t.id !== id));
|
|
20086
20136
|
}, []);
|
|
20087
|
-
const clear =
|
|
20088
|
-
const api =
|
|
20137
|
+
const clear = React55__namespace.default.useCallback(() => setToasts([]), []);
|
|
20138
|
+
const api = React55__namespace.default.useMemo(() => {
|
|
20089
20139
|
const push = (opts) => {
|
|
20090
20140
|
const id = idRef.current += 1;
|
|
20091
20141
|
const next = typeof opts === "string" ? { title: opts } : opts && typeof opts === "object" ? opts : {};
|
|
@@ -20112,7 +20162,7 @@ function ToastProvider({ children, limit = 4, duration = 4500, ...viewportProps
|
|
|
20112
20162
|
toast.show = withTone("default");
|
|
20113
20163
|
return { toast, dismiss, clear };
|
|
20114
20164
|
}, [dismiss, clear]);
|
|
20115
|
-
const value =
|
|
20165
|
+
const value = React55__namespace.default.useMemo(() => ({ ...api, toasts }), [api, toasts]);
|
|
20116
20166
|
return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value, children: [
|
|
20117
20167
|
children,
|
|
20118
20168
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-toast-sr", "aria-live": "polite", "aria-atomic": "true", children: politeMsg }),
|
|
@@ -20226,13 +20276,13 @@ function TreeView({
|
|
|
20226
20276
|
}) {
|
|
20227
20277
|
const nodes = items;
|
|
20228
20278
|
const __twcStyles = useScopedStyles("twc-tree-styles", TREE_CSS);
|
|
20229
|
-
const [expInternal, setExpInternal] =
|
|
20279
|
+
const [expInternal, setExpInternal] = React55__namespace.default.useState(() => new Set(defaultExpanded));
|
|
20230
20280
|
const expanded = expandedProp !== void 0 ? new Set(expandedProp) : expInternal;
|
|
20231
|
-
const [selInternal, setSelInternal] =
|
|
20281
|
+
const [selInternal, setSelInternal] = React55__namespace.default.useState(defaultSelectedId);
|
|
20232
20282
|
const selectedId = selectedProp !== void 0 ? selectedProp : selInternal;
|
|
20233
|
-
const [focusId, setFocusId] =
|
|
20234
|
-
const rowRefs =
|
|
20235
|
-
const taRef =
|
|
20283
|
+
const [focusId, setFocusId] = React55__namespace.default.useState(null);
|
|
20284
|
+
const rowRefs = React55__namespace.default.useRef(/* @__PURE__ */ new Map());
|
|
20285
|
+
const taRef = React55__namespace.default.useRef({ str: "", t: 0 });
|
|
20236
20286
|
const toggle = (id) => {
|
|
20237
20287
|
const n = new Set(expanded);
|
|
20238
20288
|
n.has(id) ? n.delete(id) : n.add(id);
|
|
@@ -20370,7 +20420,7 @@ function AppShell({
|
|
|
20370
20420
|
...rest
|
|
20371
20421
|
}) {
|
|
20372
20422
|
const __twcStyles = useScopedStyles("twc-shell-styles", SHELL_CSS);
|
|
20373
|
-
const wiredSidebar =
|
|
20423
|
+
const wiredSidebar = React55__namespace.default.isValidElement(sidebar) && (sidebarOpen !== void 0 || onSidebarOpenChange !== void 0) ? React55__namespace.default.cloneElement(sidebar, {
|
|
20374
20424
|
overlay: sidebar.props.overlay !== void 0 ? sidebar.props.overlay : true,
|
|
20375
20425
|
open: sidebar.props.open !== void 0 ? sidebar.props.open : sidebarOpen,
|
|
20376
20426
|
onOpenChange: sidebar.props.onOpenChange !== void 0 ? sidebar.props.onOpenChange : onSidebarOpenChange
|
|
@@ -20405,7 +20455,7 @@ function safeHref9(url) {
|
|
|
20405
20455
|
const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
|
|
20406
20456
|
return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
|
|
20407
20457
|
}
|
|
20408
|
-
var Box =
|
|
20458
|
+
var Box = /* @__PURE__ */ React55__namespace.default.forwardRef(function Box2({
|
|
20409
20459
|
as: Tag2 = "div",
|
|
20410
20460
|
p,
|
|
20411
20461
|
px,
|
|
@@ -20454,14 +20504,13 @@ var Box = React54__namespace.default.forwardRef(function Box2({
|
|
|
20454
20504
|
children
|
|
20455
20505
|
] });
|
|
20456
20506
|
});
|
|
20457
|
-
Box.displayName = "Box";
|
|
20458
20507
|
var SIZES = { sm: 640, md: 768, lg: 1024, xl: 1280, full: "100%" };
|
|
20459
20508
|
function safeHref10(url) {
|
|
20460
20509
|
if (url == null) return void 0;
|
|
20461
20510
|
const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
|
|
20462
20511
|
return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
|
|
20463
20512
|
}
|
|
20464
|
-
var Container =
|
|
20513
|
+
var Container = /* @__PURE__ */ React55__namespace.default.forwardRef(function Container2({
|
|
20465
20514
|
as: Tag2 = "div",
|
|
20466
20515
|
size = "lg",
|
|
20467
20516
|
padded = true,
|
|
@@ -20498,7 +20547,6 @@ var Container = React54__namespace.default.forwardRef(function Container2({
|
|
|
20498
20547
|
}
|
|
20499
20548
|
);
|
|
20500
20549
|
});
|
|
20501
|
-
Container.displayName = "Container";
|
|
20502
20550
|
function space2(v) {
|
|
20503
20551
|
if (v == null) return void 0;
|
|
20504
20552
|
if (typeof v === "number") return `var(--space-${String(v).replace(".", "-")})`;
|
|
@@ -20509,7 +20557,7 @@ function safeHref11(url) {
|
|
|
20509
20557
|
const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
|
|
20510
20558
|
return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
|
|
20511
20559
|
}
|
|
20512
|
-
var Stack =
|
|
20560
|
+
var Stack = /* @__PURE__ */ React55__namespace.default.forwardRef(function Stack2({
|
|
20513
20561
|
as: Tag2 = "div",
|
|
20514
20562
|
direction = "column",
|
|
20515
20563
|
gap = 4,
|
|
@@ -20533,7 +20581,7 @@ var Stack = React54__namespace.default.forwardRef(function Stack2({
|
|
|
20533
20581
|
}, ref) {
|
|
20534
20582
|
const { flatStyle, styleNode, sxAttr } = useSx(sx);
|
|
20535
20583
|
if (Tag2 === "a" && rest.href != null) rest.href = safeHref11(rest.href);
|
|
20536
|
-
const kids = divider != null ?
|
|
20584
|
+
const kids = divider != null ? React55__namespace.default.Children.toArray(children).flatMap((child, i, arr) => i < arr.length - 1 ? [child, /* @__PURE__ */ jsxRuntime.jsx(React55__namespace.default.Fragment, { children: divider }, `twc-stack-div-${i}`)] : [child]) : children;
|
|
20537
20585
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
20538
20586
|
Tag2,
|
|
20539
20587
|
{
|
|
@@ -20563,7 +20611,6 @@ var Stack = React54__namespace.default.forwardRef(function Stack2({
|
|
|
20563
20611
|
}
|
|
20564
20612
|
);
|
|
20565
20613
|
});
|
|
20566
|
-
Stack.displayName = "Stack";
|
|
20567
20614
|
var CODE_CSS = `
|
|
20568
20615
|
.twc-code {
|
|
20569
20616
|
font-family: var(--font-mono); font-size: 0.875em;
|
|
@@ -20592,7 +20639,7 @@ function safeHref12(url) {
|
|
|
20592
20639
|
const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
|
|
20593
20640
|
return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
|
|
20594
20641
|
}
|
|
20595
|
-
|
|
20642
|
+
var Code = /* @__PURE__ */ React55__namespace.default.forwardRef(function Code2({
|
|
20596
20643
|
as,
|
|
20597
20644
|
block = false,
|
|
20598
20645
|
copyable = false,
|
|
@@ -20601,14 +20648,15 @@ function Code({
|
|
|
20601
20648
|
className = "",
|
|
20602
20649
|
children,
|
|
20603
20650
|
...rest
|
|
20604
|
-
}) {
|
|
20651
|
+
}, ref) {
|
|
20605
20652
|
const __twcStyles = useScopedStyles("twc-code-styles", CODE_CSS);
|
|
20606
20653
|
const Tag2 = as ?? (block ? "pre" : "code");
|
|
20607
20654
|
if (Tag2 === "a" && rest.href != null) rest.href = safeHref12(rest.href);
|
|
20608
|
-
const rootRef =
|
|
20609
|
-
const
|
|
20610
|
-
const
|
|
20611
|
-
|
|
20655
|
+
const rootRef = React55__namespace.default.useRef(null);
|
|
20656
|
+
const setRootRef = useMergedRef(rootRef, ref);
|
|
20657
|
+
const [copied, setCopied] = React55__namespace.default.useState(false);
|
|
20658
|
+
const timerRef = React55__namespace.default.useRef(null);
|
|
20659
|
+
React55__namespace.default.useEffect(() => () => clearTimeout(timerRef.current), []);
|
|
20612
20660
|
const doCopy = () => {
|
|
20613
20661
|
const text = typeof children === "string" ? children : rootRef.current?.textContent ?? "";
|
|
20614
20662
|
const flash = () => {
|
|
@@ -20641,7 +20689,7 @@ function Code({
|
|
|
20641
20689
|
}
|
|
20642
20690
|
execFallback();
|
|
20643
20691
|
};
|
|
20644
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(Tag2, { ref:
|
|
20692
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(Tag2, { ref: setRootRef, className: `twc-code ${className}`.trim(), "data-block": block || void 0, ...rest, children: [
|
|
20645
20693
|
__twcStyles,
|
|
20646
20694
|
copyable ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-code__copy", "aria-label": copied ? copiedLabel : copyLabel, onClick: doCopy, children: copied ? /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m20 6-11 11-5-5" }) }) : /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
20647
20695
|
/* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
|
|
@@ -20649,14 +20697,14 @@ function Code({
|
|
|
20649
20697
|
] }) }) : null,
|
|
20650
20698
|
children
|
|
20651
20699
|
] });
|
|
20652
|
-
}
|
|
20700
|
+
});
|
|
20653
20701
|
var LEVEL_SIZE = { 1: "4xl", 2: "2xl", 3: "xl", 4: "lg", 5: "base", 6: "sm" };
|
|
20654
20702
|
function safeHref13(url) {
|
|
20655
20703
|
if (url == null) return void 0;
|
|
20656
20704
|
const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
|
|
20657
20705
|
return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
|
|
20658
20706
|
}
|
|
20659
|
-
var Heading =
|
|
20707
|
+
var Heading = /* @__PURE__ */ React55__namespace.default.forwardRef(function Heading2({
|
|
20660
20708
|
as,
|
|
20661
20709
|
level = 2,
|
|
20662
20710
|
size,
|
|
@@ -20704,7 +20752,6 @@ var Heading = React54__namespace.default.forwardRef(function Heading2({
|
|
|
20704
20752
|
}
|
|
20705
20753
|
);
|
|
20706
20754
|
});
|
|
20707
|
-
Heading.displayName = "Heading";
|
|
20708
20755
|
var TONE = {
|
|
20709
20756
|
default: "--color-text",
|
|
20710
20757
|
muted: "--color-text-muted",
|
|
@@ -20725,7 +20772,7 @@ function safeHref14(url) {
|
|
|
20725
20772
|
const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
|
|
20726
20773
|
return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
|
|
20727
20774
|
}
|
|
20728
|
-
var Text =
|
|
20775
|
+
var Text = /* @__PURE__ */ React55__namespace.default.forwardRef(function Text2({
|
|
20729
20776
|
as: Tag2 = "p",
|
|
20730
20777
|
size = "base",
|
|
20731
20778
|
tone = "default",
|
|
@@ -20771,47 +20818,46 @@ var Text = React54__namespace.default.forwardRef(function Text2({
|
|
|
20771
20818
|
}
|
|
20772
20819
|
);
|
|
20773
20820
|
});
|
|
20774
|
-
Text.displayName = "Text";
|
|
20775
20821
|
var canUseDOM2 = typeof window !== "undefined" && typeof document !== "undefined";
|
|
20776
|
-
var useIsomorphicLayoutEffect = canUseDOM2 ?
|
|
20822
|
+
var useIsomorphicLayoutEffect = canUseDOM2 ? React55__namespace.default.useLayoutEffect : React55__namespace.default.useEffect;
|
|
20777
20823
|
function useMounted() {
|
|
20778
|
-
const [mounted, setMounted] =
|
|
20779
|
-
|
|
20824
|
+
const [mounted, setMounted] = React55__namespace.default.useState(false);
|
|
20825
|
+
React55__namespace.default.useEffect(() => {
|
|
20780
20826
|
setMounted(true);
|
|
20781
20827
|
}, []);
|
|
20782
20828
|
return mounted;
|
|
20783
20829
|
}
|
|
20784
20830
|
function usePrevious(value) {
|
|
20785
|
-
const ref =
|
|
20786
|
-
|
|
20831
|
+
const ref = React55__namespace.default.useRef(void 0);
|
|
20832
|
+
React55__namespace.default.useEffect(() => {
|
|
20787
20833
|
ref.current = value;
|
|
20788
20834
|
}, [value]);
|
|
20789
20835
|
return ref.current;
|
|
20790
20836
|
}
|
|
20791
20837
|
function useToggle(initial = false) {
|
|
20792
|
-
const [on, setOn] =
|
|
20793
|
-
const toggle =
|
|
20838
|
+
const [on, setOn] = React55__namespace.default.useState(initial);
|
|
20839
|
+
const toggle = React55__namespace.default.useCallback((next) => {
|
|
20794
20840
|
setOn((prev) => typeof next === "boolean" ? next : !prev);
|
|
20795
20841
|
}, []);
|
|
20796
20842
|
return [on, toggle, setOn];
|
|
20797
20843
|
}
|
|
20798
20844
|
function useDisclosure(initial = false) {
|
|
20799
|
-
const [open, setOpen] =
|
|
20800
|
-
const onOpen =
|
|
20801
|
-
const onClose =
|
|
20802
|
-
const onToggle =
|
|
20845
|
+
const [open, setOpen] = React55__namespace.default.useState(initial);
|
|
20846
|
+
const onOpen = React55__namespace.default.useCallback(() => setOpen(true), []);
|
|
20847
|
+
const onClose = React55__namespace.default.useCallback(() => setOpen(false), []);
|
|
20848
|
+
const onToggle = React55__namespace.default.useCallback(() => setOpen((p) => !p), []);
|
|
20803
20849
|
return { open, onOpen, onClose, onToggle, setOpen };
|
|
20804
20850
|
}
|
|
20805
20851
|
function useControllableState({ value, defaultValue, onChange } = {}) {
|
|
20806
20852
|
const isControlled = value !== void 0;
|
|
20807
|
-
const [uncontrolled, setUncontrolled] =
|
|
20853
|
+
const [uncontrolled, setUncontrolled] = React55__namespace.default.useState(defaultValue);
|
|
20808
20854
|
const current = isControlled ? value : uncontrolled;
|
|
20809
|
-
const ref =
|
|
20855
|
+
const ref = React55__namespace.default.useRef({ current, isControlled, onChange });
|
|
20810
20856
|
useIsomorphicLayoutEffect(() => {
|
|
20811
20857
|
ref.current = { current, isControlled, onChange };
|
|
20812
20858
|
});
|
|
20813
|
-
const wasControlled =
|
|
20814
|
-
|
|
20859
|
+
const wasControlled = React55__namespace.default.useRef(isControlled);
|
|
20860
|
+
React55__namespace.default.useEffect(() => {
|
|
20815
20861
|
if (wasControlled.current !== isControlled) {
|
|
20816
20862
|
warnOnce(
|
|
20817
20863
|
"useControllableState:switch",
|
|
@@ -20820,7 +20866,7 @@ function useControllableState({ value, defaultValue, onChange } = {}) {
|
|
|
20820
20866
|
wasControlled.current = isControlled;
|
|
20821
20867
|
}
|
|
20822
20868
|
});
|
|
20823
|
-
const setValue =
|
|
20869
|
+
const setValue = React55__namespace.default.useCallback((next) => {
|
|
20824
20870
|
const { current: cur, isControlled: ctrl, onChange: cb } = ref.current;
|
|
20825
20871
|
const resolved = typeof next === "function" ? next(cur) : next;
|
|
20826
20872
|
if (resolved === cur) return;
|
|
@@ -20831,7 +20877,7 @@ function useControllableState({ value, defaultValue, onChange } = {}) {
|
|
|
20831
20877
|
}
|
|
20832
20878
|
function useMediaQuery(query, { defaultValue = false, initializeWithValue = false } = {}) {
|
|
20833
20879
|
const get = () => canUseDOM2 ? window.matchMedia(query).matches : defaultValue;
|
|
20834
|
-
const [matches3, setMatches] =
|
|
20880
|
+
const [matches3, setMatches] = React55__namespace.default.useState(initializeWithValue ? get : defaultValue);
|
|
20835
20881
|
useIsomorphicLayoutEffect(() => {
|
|
20836
20882
|
if (!canUseDOM2) return void 0;
|
|
20837
20883
|
const mql = window.matchMedia(query);
|
|
@@ -20847,7 +20893,7 @@ function usePrefersReducedMotion() {
|
|
|
20847
20893
|
}
|
|
20848
20894
|
function useColorScheme({ storageKey = "twico-theme", attribute = "class", element, disableTransitionsOnChange = true, initializeWithValue = false } = {}) {
|
|
20849
20895
|
const getTarget = () => element || (canUseDOM2 ? document.documentElement : null);
|
|
20850
|
-
const firstApply =
|
|
20896
|
+
const firstApply = React55__namespace.default.useRef(true);
|
|
20851
20897
|
const read = () => {
|
|
20852
20898
|
if (!canUseDOM2) return "light";
|
|
20853
20899
|
try {
|
|
@@ -20857,8 +20903,8 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
|
|
|
20857
20903
|
}
|
|
20858
20904
|
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
20859
20905
|
};
|
|
20860
|
-
const [theme, setThemeState] =
|
|
20861
|
-
const apply =
|
|
20906
|
+
const [theme, setThemeState] = React55__namespace.default.useState(initializeWithValue ? read : "light");
|
|
20907
|
+
const apply = React55__namespace.default.useCallback(
|
|
20862
20908
|
(t) => {
|
|
20863
20909
|
const target = getTarget();
|
|
20864
20910
|
if (!target) return;
|
|
@@ -20881,7 +20927,7 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
|
|
|
20881
20927
|
},
|
|
20882
20928
|
[attribute, element, disableTransitionsOnChange]
|
|
20883
20929
|
);
|
|
20884
|
-
const resolved =
|
|
20930
|
+
const resolved = React55__namespace.default.useRef(false);
|
|
20885
20931
|
useIsomorphicLayoutEffect(() => {
|
|
20886
20932
|
if (!resolved.current) {
|
|
20887
20933
|
resolved.current = true;
|
|
@@ -20894,11 +20940,11 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
|
|
|
20894
20940
|
}
|
|
20895
20941
|
apply(theme);
|
|
20896
20942
|
}, [theme, apply]);
|
|
20897
|
-
const themeRef =
|
|
20943
|
+
const themeRef = React55__namespace.default.useRef(theme);
|
|
20898
20944
|
useIsomorphicLayoutEffect(() => {
|
|
20899
20945
|
themeRef.current = theme;
|
|
20900
20946
|
}, [theme]);
|
|
20901
|
-
const setTheme =
|
|
20947
|
+
const setTheme = React55__namespace.default.useCallback(
|
|
20902
20948
|
(t) => {
|
|
20903
20949
|
setThemeState(t);
|
|
20904
20950
|
try {
|
|
@@ -20909,10 +20955,10 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
|
|
|
20909
20955
|
},
|
|
20910
20956
|
[storageKey]
|
|
20911
20957
|
);
|
|
20912
|
-
const toggle =
|
|
20958
|
+
const toggle = React55__namespace.default.useCallback(() => {
|
|
20913
20959
|
setTheme(themeRef.current === "dark" ? "light" : "dark");
|
|
20914
20960
|
}, [setTheme]);
|
|
20915
|
-
|
|
20961
|
+
React55__namespace.default.useEffect(() => {
|
|
20916
20962
|
if (!canUseDOM2) return void 0;
|
|
20917
20963
|
const sync = () => setThemeState(read());
|
|
20918
20964
|
const onStorage = (e) => {
|
|
@@ -20928,14 +20974,14 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
|
|
|
20928
20974
|
return { theme, setTheme, toggle, isDark: theme === "dark" };
|
|
20929
20975
|
}
|
|
20930
20976
|
function useEventListener(eventName, handler, element, options) {
|
|
20931
|
-
const saved =
|
|
20977
|
+
const saved = React55__namespace.default.useRef(handler);
|
|
20932
20978
|
useIsomorphicLayoutEffect(() => {
|
|
20933
20979
|
saved.current = handler;
|
|
20934
20980
|
}, [handler]);
|
|
20935
20981
|
const capture = typeof options === "boolean" ? options : options && options.capture;
|
|
20936
20982
|
const passive = typeof options === "object" && options ? options.passive : void 0;
|
|
20937
20983
|
const once = typeof options === "object" && options ? options.once : void 0;
|
|
20938
|
-
|
|
20984
|
+
React55__namespace.default.useEffect(() => {
|
|
20939
20985
|
const target = element && element.current || element || (canUseDOM2 ? window : null);
|
|
20940
20986
|
if (!target || !target.addEventListener) return void 0;
|
|
20941
20987
|
const opts = typeof options === "boolean" ? options : { capture, passive, once };
|
|
@@ -20945,11 +20991,11 @@ function useEventListener(eventName, handler, element, options) {
|
|
|
20945
20991
|
}, [eventName, element, capture, passive, once]);
|
|
20946
20992
|
}
|
|
20947
20993
|
function useClickOutside(ref, handler, events = ["mousedown", "touchstart"]) {
|
|
20948
|
-
const saved =
|
|
20994
|
+
const saved = React55__namespace.default.useRef(handler);
|
|
20949
20995
|
useIsomorphicLayoutEffect(() => {
|
|
20950
20996
|
saved.current = handler;
|
|
20951
20997
|
}, [handler]);
|
|
20952
|
-
|
|
20998
|
+
React55__namespace.default.useEffect(() => {
|
|
20953
20999
|
if (!canUseDOM2) return void 0;
|
|
20954
21000
|
const listener = (e) => {
|
|
20955
21001
|
const el = ref && ref.current;
|
|
@@ -20984,12 +21030,12 @@ function useLocalStorage(key, initialValue, { initializeWithValue = false } = {}
|
|
|
20984
21030
|
return initialValue;
|
|
20985
21031
|
}
|
|
20986
21032
|
};
|
|
20987
|
-
const [stored, setStored] =
|
|
21033
|
+
const [stored, setStored] = React55__namespace.default.useState(initializeWithValue ? read : initialValue);
|
|
20988
21034
|
useIsomorphicLayoutEffect(() => {
|
|
20989
21035
|
if (!canUseDOM2) return;
|
|
20990
21036
|
setStored(read());
|
|
20991
21037
|
}, [key]);
|
|
20992
|
-
const setValue =
|
|
21038
|
+
const setValue = React55__namespace.default.useCallback(
|
|
20993
21039
|
(value) => {
|
|
20994
21040
|
setStored((prev) => {
|
|
20995
21041
|
const next = typeof value === "function" ? value(prev) : value;
|
|
@@ -21028,9 +21074,9 @@ function legacyCopy(text) {
|
|
|
21028
21074
|
}
|
|
21029
21075
|
}
|
|
21030
21076
|
function useCopyToClipboard(timeout = 1500) {
|
|
21031
|
-
const [copied, setCopied] =
|
|
21032
|
-
const [copyTick, setCopyTick] =
|
|
21033
|
-
const copy =
|
|
21077
|
+
const [copied, setCopied] = React55__namespace.default.useState(false);
|
|
21078
|
+
const [copyTick, setCopyTick] = React55__namespace.default.useState(0);
|
|
21079
|
+
const copy = React55__namespace.default.useCallback(async (text) => {
|
|
21034
21080
|
if (!canUseDOM2) {
|
|
21035
21081
|
setCopied(false);
|
|
21036
21082
|
return false;
|
|
@@ -21049,7 +21095,7 @@ function useCopyToClipboard(timeout = 1500) {
|
|
|
21049
21095
|
if (ok) setCopyTick((t) => t + 1);
|
|
21050
21096
|
return ok;
|
|
21051
21097
|
}, []);
|
|
21052
|
-
|
|
21098
|
+
React55__namespace.default.useEffect(() => {
|
|
21053
21099
|
if (!copied) return void 0;
|
|
21054
21100
|
const t = setTimeout(() => setCopied(false), timeout);
|
|
21055
21101
|
return () => clearTimeout(t);
|
|
@@ -21057,23 +21103,23 @@ function useCopyToClipboard(timeout = 1500) {
|
|
|
21057
21103
|
return { copied, copy };
|
|
21058
21104
|
}
|
|
21059
21105
|
function useDebouncedValue(value, delay = 200) {
|
|
21060
|
-
const [debounced, setDebounced] =
|
|
21061
|
-
|
|
21106
|
+
const [debounced, setDebounced] = React55__namespace.default.useState(value);
|
|
21107
|
+
React55__namespace.default.useEffect(() => {
|
|
21062
21108
|
const t = setTimeout(() => setDebounced(value), delay);
|
|
21063
21109
|
return () => clearTimeout(t);
|
|
21064
21110
|
}, [value, delay]);
|
|
21065
21111
|
return debounced;
|
|
21066
21112
|
}
|
|
21067
21113
|
function useDebouncedCallback(callback, delay = 200) {
|
|
21068
|
-
const saved =
|
|
21069
|
-
const timer =
|
|
21114
|
+
const saved = React55__namespace.default.useRef(callback);
|
|
21115
|
+
const timer = React55__namespace.default.useRef(null);
|
|
21070
21116
|
useIsomorphicLayoutEffect(() => {
|
|
21071
21117
|
saved.current = callback;
|
|
21072
21118
|
}, [callback]);
|
|
21073
|
-
|
|
21119
|
+
React55__namespace.default.useEffect(() => () => {
|
|
21074
21120
|
if (timer.current) clearTimeout(timer.current);
|
|
21075
21121
|
}, []);
|
|
21076
|
-
return
|
|
21122
|
+
return React55__namespace.default.useCallback(
|
|
21077
21123
|
(...args) => {
|
|
21078
21124
|
if (timer.current) clearTimeout(timer.current);
|
|
21079
21125
|
timer.current = setTimeout(() => saved.current(...args), delay);
|
|
@@ -21082,22 +21128,22 @@ function useDebouncedCallback(callback, delay = 200) {
|
|
|
21082
21128
|
);
|
|
21083
21129
|
}
|
|
21084
21130
|
function useInterval(callback, delay) {
|
|
21085
|
-
const saved =
|
|
21131
|
+
const saved = React55__namespace.default.useRef(callback);
|
|
21086
21132
|
useIsomorphicLayoutEffect(() => {
|
|
21087
21133
|
saved.current = callback;
|
|
21088
21134
|
}, [callback]);
|
|
21089
|
-
|
|
21135
|
+
React55__namespace.default.useEffect(() => {
|
|
21090
21136
|
if (delay == null) return void 0;
|
|
21091
21137
|
const id = setInterval(() => saved.current(), delay);
|
|
21092
21138
|
return () => clearInterval(id);
|
|
21093
21139
|
}, [delay]);
|
|
21094
21140
|
}
|
|
21095
21141
|
function useTimeout(callback, delay) {
|
|
21096
|
-
const saved =
|
|
21142
|
+
const saved = React55__namespace.default.useRef(callback);
|
|
21097
21143
|
useIsomorphicLayoutEffect(() => {
|
|
21098
21144
|
saved.current = callback;
|
|
21099
21145
|
}, [callback]);
|
|
21100
|
-
|
|
21146
|
+
React55__namespace.default.useEffect(() => {
|
|
21101
21147
|
if (delay == null) return void 0;
|
|
21102
21148
|
const id = setTimeout(() => saved.current(), delay);
|
|
21103
21149
|
return () => clearTimeout(id);
|
|
@@ -21108,7 +21154,7 @@ function useWindowSize({ initializeWithValue = false } = {}) {
|
|
|
21108
21154
|
width: canUseDOM2 ? window.innerWidth : 0,
|
|
21109
21155
|
height: canUseDOM2 ? window.innerHeight : 0
|
|
21110
21156
|
});
|
|
21111
|
-
const [size, setSize] =
|
|
21157
|
+
const [size, setSize] = React55__namespace.default.useState(initializeWithValue ? get : { width: 0, height: 0 });
|
|
21112
21158
|
useIsomorphicLayoutEffect(() => {
|
|
21113
21159
|
if (!canUseDOM2) return void 0;
|
|
21114
21160
|
const onResize = () => setSize({ width: window.innerWidth, height: window.innerHeight });
|
|
@@ -21119,8 +21165,8 @@ function useWindowSize({ initializeWithValue = false } = {}) {
|
|
|
21119
21165
|
return size;
|
|
21120
21166
|
}
|
|
21121
21167
|
function useHover(ref) {
|
|
21122
|
-
const [hovered, setHovered] =
|
|
21123
|
-
|
|
21168
|
+
const [hovered, setHovered] = React55__namespace.default.useState(false);
|
|
21169
|
+
React55__namespace.default.useEffect(() => {
|
|
21124
21170
|
const el = ref && ref.current;
|
|
21125
21171
|
if (!el) return void 0;
|
|
21126
21172
|
const on = () => setHovered(true);
|
|
@@ -21136,8 +21182,8 @@ function useHover(ref) {
|
|
|
21136
21182
|
}
|
|
21137
21183
|
function useIntersectionObserver(ref, options = {}) {
|
|
21138
21184
|
const { root = null, rootMargin = "0px", threshold = 0 } = options;
|
|
21139
|
-
const [entry, setEntry] =
|
|
21140
|
-
|
|
21185
|
+
const [entry, setEntry] = React55__namespace.default.useState(null);
|
|
21186
|
+
React55__namespace.default.useEffect(() => {
|
|
21141
21187
|
const el = ref && ref.current;
|
|
21142
21188
|
if (!canUseDOM2 || !el || typeof IntersectionObserver === "undefined") return void 0;
|
|
21143
21189
|
const obs = new IntersectionObserver(([e]) => setEntry(e), { root, rootMargin, threshold });
|
|
@@ -21147,20 +21193,20 @@ function useIntersectionObserver(ref, options = {}) {
|
|
|
21147
21193
|
return entry;
|
|
21148
21194
|
}
|
|
21149
21195
|
function useId(prefix = "twc") {
|
|
21150
|
-
const raw =
|
|
21196
|
+
const raw = React55__namespace.default.useId();
|
|
21151
21197
|
return prefix ? `${prefix}-${raw.replace(/:/g, "")}` : raw;
|
|
21152
21198
|
}
|
|
21153
21199
|
var useFocusTrap2 = useFocusTrap;
|
|
21154
21200
|
var usePortal2 = usePortal;
|
|
21155
21201
|
var useScrollLock2 = useScrollLock;
|
|
21156
21202
|
function useFilePicker({ accept, multiple = false, maxSize, maxFiles, onFiles, onReject } = {}) {
|
|
21157
|
-
const inputRef =
|
|
21158
|
-
const cbRef =
|
|
21203
|
+
const inputRef = React55__namespace.default.useRef(null);
|
|
21204
|
+
const cbRef = React55__namespace.default.useRef({ onFiles, onReject });
|
|
21159
21205
|
cbRef.current = { onFiles, onReject };
|
|
21160
|
-
const open =
|
|
21206
|
+
const open = React55__namespace.default.useCallback(() => {
|
|
21161
21207
|
inputRef.current?.click();
|
|
21162
21208
|
}, []);
|
|
21163
|
-
const getInputProps =
|
|
21209
|
+
const getInputProps = React55__namespace.default.useCallback(() => ({
|
|
21164
21210
|
ref: inputRef,
|
|
21165
21211
|
type: "file",
|
|
21166
21212
|
accept,
|