twico-ui 1.8.0 → 1.8.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 +8 -0
- package/dist/index.cjs +522 -519
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +522 -519
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import * as
|
|
3
|
-
import
|
|
2
|
+
import * as React36 from 'react';
|
|
3
|
+
import React36__default from 'react';
|
|
4
4
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
5
5
|
import { createPortal } from 'react-dom';
|
|
6
6
|
|
|
7
7
|
// components/TwicoProvider.jsx
|
|
8
|
-
var SUPPORTS_STYLE_HOIST = parseInt(String(
|
|
9
|
-
var NonceContext =
|
|
8
|
+
var SUPPORTS_STYLE_HOIST = parseInt(String(React36.version), 10) >= 19;
|
|
9
|
+
var NonceContext = React36.createContext(void 0);
|
|
10
10
|
function useScopedStyles(id, css) {
|
|
11
|
-
const nonce =
|
|
12
|
-
|
|
11
|
+
const nonce = React36.useContext(NonceContext);
|
|
12
|
+
React36.useInsertionEffect(() => {
|
|
13
13
|
if (SUPPORTS_STYLE_HOIST) return;
|
|
14
14
|
if (typeof document === "undefined") return;
|
|
15
15
|
if (!css) return;
|
|
@@ -25,12 +25,12 @@ function useScopedStyles(id, css) {
|
|
|
25
25
|
}
|
|
26
26
|
if (el.textContent !== css) el.textContent = css;
|
|
27
27
|
}, [id, css, nonce]);
|
|
28
|
-
return SUPPORTS_STYLE_HOIST && css ?
|
|
28
|
+
return SUPPORTS_STYLE_HOIST && css ? React36.createElement("style", { href: id, precedence: "twc-ui", nonce }, css) : null;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
// components/TwicoProvider.jsx
|
|
32
32
|
function TwicoProvider({ nonce, children }) {
|
|
33
|
-
return
|
|
33
|
+
return React36__default.createElement(NonceContext.Provider, { value: nonce }, children);
|
|
34
34
|
}
|
|
35
35
|
var GROUPS = { colors: "color", space: "space", radius: "radius", font: "font", shadow: "shadow", motion: "" };
|
|
36
36
|
function createTheme(partial = {}) {
|
|
@@ -50,8 +50,8 @@ function toVars(theme) {
|
|
|
50
50
|
return Object.keys(theme).some((k) => k.startsWith("--")) ? theme : createTheme(theme);
|
|
51
51
|
}
|
|
52
52
|
function ThemeProvider({ theme, mode = "inline", className = "", style, children, ...rest }) {
|
|
53
|
-
const vars =
|
|
54
|
-
const uid =
|
|
53
|
+
const vars = React36__default.useMemo(() => toVars(theme), [theme]);
|
|
54
|
+
const uid = React36__default.useId();
|
|
55
55
|
const scopeId = `twc-theme-${uid.replace(/[^a-zA-Z0-9]/g, "")}`;
|
|
56
56
|
const css = mode === "stylesheet" ? `[data-twc-theme="${scopeId}"] { ${Object.entries(vars).map(([k, v]) => `${k}: ${v};`).join(" ")} }` : "";
|
|
57
57
|
const __twcStyles = useScopedStyles(mode === "stylesheet" ? scopeId : "twc-theme-noop", css);
|
|
@@ -73,7 +73,7 @@ var FORM_CSS = `
|
|
|
73
73
|
.twc-form { display: flex; flex-direction: column; gap: var(--space-4); font-family: var(--font-sans); }
|
|
74
74
|
.twc-form__fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: inherit; }
|
|
75
75
|
`;
|
|
76
|
-
var Form =
|
|
76
|
+
var Form = React36__default.forwardRef(function Form2({
|
|
77
77
|
onSubmit,
|
|
78
78
|
preventDefault = true,
|
|
79
79
|
loading = false,
|
|
@@ -108,7 +108,7 @@ Form.displayName = "Form";
|
|
|
108
108
|
var VH_CSS = `
|
|
109
109
|
.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; }
|
|
110
110
|
`;
|
|
111
|
-
var VisuallyHidden =
|
|
111
|
+
var VisuallyHidden = React36__default.forwardRef(function VisuallyHidden2({ as: Tag2 = "span", className = "", children, ...rest }, ref) {
|
|
112
112
|
const __twcStyles = useScopedStyles("twc-visually-hidden-styles", VH_CSS);
|
|
113
113
|
return /* @__PURE__ */ jsxs(Tag2, { ref, className: `twc-visually-hidden ${className}`.trim(), ...rest, children: [
|
|
114
114
|
__twcStyles,
|
|
@@ -117,10 +117,10 @@ var VisuallyHidden = React37__default.forwardRef(function VisuallyHidden2({ as:
|
|
|
117
117
|
});
|
|
118
118
|
VisuallyHidden.displayName = "VisuallyHidden";
|
|
119
119
|
var canUseDOM = typeof window !== "undefined" && typeof document !== "undefined";
|
|
120
|
-
var useIsoLayoutEffect = canUseDOM ?
|
|
120
|
+
var useIsoLayoutEffect = canUseDOM ? React36__default.useLayoutEffect : React36__default.useEffect;
|
|
121
121
|
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"])';
|
|
122
122
|
function useFocusTrap(ref, active = true, { restoreFocus = true, initialFocus } = {}) {
|
|
123
|
-
|
|
123
|
+
React36__default.useEffect(() => {
|
|
124
124
|
if (!active || !canUseDOM) return void 0;
|
|
125
125
|
const node = ref.current;
|
|
126
126
|
if (!node) return void 0;
|
|
@@ -131,7 +131,7 @@ function useFocusTrap(ref, active = true, { restoreFocus = true, initialFocus }
|
|
|
131
131
|
if (restoreFocus && prevFocused && typeof prevFocused.focus === "function") prevFocused.focus();
|
|
132
132
|
};
|
|
133
133
|
}, [active]);
|
|
134
|
-
|
|
134
|
+
React36__default.useEffect(() => {
|
|
135
135
|
if (!active || !canUseDOM) return void 0;
|
|
136
136
|
const node = ref.current;
|
|
137
137
|
const onKey = (e) => {
|
|
@@ -158,7 +158,7 @@ function useFocusTrap(ref, active = true, { restoreFocus = true, initialFocus }
|
|
|
158
158
|
}, [active]);
|
|
159
159
|
}
|
|
160
160
|
function usePortal() {
|
|
161
|
-
return
|
|
161
|
+
return React36__default.useCallback((node) => {
|
|
162
162
|
if (typeof document === "undefined") return null;
|
|
163
163
|
return typeof createPortal === "function" ? createPortal(node, document.body) : node;
|
|
164
164
|
}, []);
|
|
@@ -186,7 +186,7 @@ function useScrollLock(locked = true) {
|
|
|
186
186
|
}, [locked]);
|
|
187
187
|
}
|
|
188
188
|
function useInertBackground(ref, active) {
|
|
189
|
-
|
|
189
|
+
React36__default.useEffect(() => {
|
|
190
190
|
if (!active || !canUseDOM) return void 0;
|
|
191
191
|
const node = ref.current;
|
|
192
192
|
if (!node) return void 0;
|
|
@@ -211,14 +211,17 @@ function Portal({ children }) {
|
|
|
211
211
|
const render = usePortal();
|
|
212
212
|
return render(children);
|
|
213
213
|
}
|
|
214
|
+
function encodeScriptLiteral(value) {
|
|
215
|
+
return JSON.stringify(value).replace(/[<>&\u2028\u2029]/g, (c) => "\\u" + c.charCodeAt(0).toString(16).padStart(4, "0"));
|
|
216
|
+
}
|
|
214
217
|
function getColorSchemeScript({ storageKey = "twico-theme", attribute = "class", defaultScheme } = {}) {
|
|
215
|
-
const k =
|
|
216
|
-
const a =
|
|
217
|
-
const d = defaultScheme === "dark" || defaultScheme === "light" ?
|
|
218
|
+
const k = encodeScriptLiteral(storageKey);
|
|
219
|
+
const a = encodeScriptLiteral(attribute);
|
|
220
|
+
const d = defaultScheme === "dark" || defaultScheme === "light" ? encodeScriptLiteral(defaultScheme) : "null";
|
|
218
221
|
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){}})();`;
|
|
219
222
|
}
|
|
220
223
|
function ColorSchemeScript({ storageKey = "twico-theme", attribute = "class", nonce, defaultScheme }) {
|
|
221
|
-
return
|
|
224
|
+
return React36__default.createElement("script", { nonce }, getColorSchemeScript({ storageKey, attribute, defaultScheme }));
|
|
222
225
|
}
|
|
223
226
|
var KBD_CSS = `
|
|
224
227
|
.twc-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 2px 6px;
|
|
@@ -226,7 +229,7 @@ var KBD_CSS = `
|
|
|
226
229
|
background: var(--color-surface-sunken); border: var(--border-thin) solid var(--color-border);
|
|
227
230
|
border-bottom-width: 2px; border-radius: var(--radius-sm); }
|
|
228
231
|
`;
|
|
229
|
-
var Kbd =
|
|
232
|
+
var Kbd = React36__default.forwardRef(function Kbd2({ className = "", children, ...rest }, ref) {
|
|
230
233
|
const __twcStyles = useScopedStyles("twc-kbd-styles", KBD_CSS);
|
|
231
234
|
return /* @__PURE__ */ jsxs("kbd", { ref, className: `twc-kbd ${className}`.trim(), ...rest, children: [
|
|
232
235
|
__twcStyles,
|
|
@@ -241,7 +244,7 @@ var PRE_CSS = `
|
|
|
241
244
|
border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg);
|
|
242
245
|
white-space: pre; -webkit-overflow-scrolling: touch; }
|
|
243
246
|
`;
|
|
244
|
-
var Pre =
|
|
247
|
+
var Pre = React36__default.forwardRef(function Pre2({ className = "", children, ...rest }, ref) {
|
|
245
248
|
const __twcStyles = useScopedStyles("twc-pre-styles", PRE_CSS);
|
|
246
249
|
return /* @__PURE__ */ jsxs("pre", { ref, className: `twc-pre ${className}`.trim(), ...rest, children: [
|
|
247
250
|
__twcStyles,
|
|
@@ -261,7 +264,7 @@ function safeHref(url) {
|
|
|
261
264
|
const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
|
|
262
265
|
return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
|
|
263
266
|
}
|
|
264
|
-
var Anchor =
|
|
267
|
+
var Anchor = React36__default.forwardRef(function Anchor2({ as: Tag2 = "a", href, external = false, className = "", children, ...rest }, ref) {
|
|
265
268
|
const __twcStyles = useScopedStyles("twc-anchor-styles", ANCHOR_CSS);
|
|
266
269
|
const extra = external ? { target: "_blank", rel: "noopener noreferrer" } : {};
|
|
267
270
|
return /* @__PURE__ */ jsxs(Tag2, { ref, className: `twc-anchor ${className}`.trim(), href: Tag2 === "a" ? safeHref(href) : href, ...extra, ...rest, children: [
|
|
@@ -277,7 +280,7 @@ var LABEL_CSS = `
|
|
|
277
280
|
.twc-label[data-size="lg"] { font-size: var(--text-base); }
|
|
278
281
|
.twc-label__req { color: var(--color-danger); }
|
|
279
282
|
`;
|
|
280
|
-
var Label =
|
|
283
|
+
var Label = React36__default.forwardRef(function Label2({ htmlFor, required = false, size = "md", className = "", children, ...rest }, ref) {
|
|
281
284
|
const __twcStyles = useScopedStyles("twc-label-styles", LABEL_CSS);
|
|
282
285
|
return /* @__PURE__ */ jsxs("label", { ref, htmlFor, className: `twc-label ${className}`.trim(), "data-size": size, ...rest, children: [
|
|
283
286
|
__twcStyles,
|
|
@@ -290,7 +293,7 @@ var IMAGE_CSS = `
|
|
|
290
293
|
.twc-image { display: block; max-width: 100%; }
|
|
291
294
|
.twc-image[data-fit] { width: 100%; height: 100%; }
|
|
292
295
|
`;
|
|
293
|
-
var Image =
|
|
296
|
+
var Image = React36__default.forwardRef(function Image2({
|
|
294
297
|
src,
|
|
295
298
|
alt,
|
|
296
299
|
fit,
|
|
@@ -304,7 +307,7 @@ var Image = React37__default.forwardRef(function Image2({
|
|
|
304
307
|
...rest
|
|
305
308
|
}, ref) {
|
|
306
309
|
const __twcStyles = useScopedStyles("twc-image-styles", IMAGE_CSS);
|
|
307
|
-
const [failed, setFailed] =
|
|
310
|
+
const [failed, setFailed] = React36__default.useState(false);
|
|
308
311
|
const shownSrc = failed && fallback ? fallback : src;
|
|
309
312
|
const s = {
|
|
310
313
|
objectFit: fit,
|
|
@@ -373,10 +376,10 @@ function Accordion({
|
|
|
373
376
|
...rest
|
|
374
377
|
}) {
|
|
375
378
|
const __twcStyles = useScopedStyles("twc-accordion-styles", ACCORDION_CSS);
|
|
376
|
-
const rootRef =
|
|
377
|
-
const [internal, setInternal] =
|
|
379
|
+
const rootRef = React36__default.useRef(null);
|
|
380
|
+
const [internal, setInternal] = React36__default.useState(() => new Set(defaultOpen));
|
|
378
381
|
const open = openProp !== void 0 ? new Set(openProp) : internal;
|
|
379
|
-
const baseId =
|
|
382
|
+
const baseId = React36__default.useId();
|
|
380
383
|
function toggle(val) {
|
|
381
384
|
const item = items.find((x) => x.value === val);
|
|
382
385
|
if (item?.disabled) return;
|
|
@@ -562,7 +565,7 @@ function Avatar({
|
|
|
562
565
|
...rest
|
|
563
566
|
}) {
|
|
564
567
|
const __twcStyles = useScopedStyles("twc-avatar-styles", AVATAR_CSS);
|
|
565
|
-
const [errored, setErrored] =
|
|
568
|
+
const [errored, setErrored] = React36__default.useState(false);
|
|
566
569
|
const cleanSrc = safeSrc(src);
|
|
567
570
|
const showImg = cleanSrc && !errored;
|
|
568
571
|
const _statusLabel = status ? statusLabel ?? statusLabels?.[status] ?? STATUS_LABELS[status] : void 0;
|
|
@@ -640,25 +643,25 @@ function Menu({
|
|
|
640
643
|
...rest
|
|
641
644
|
}) {
|
|
642
645
|
const __twcStyles = useScopedStyles("twc-menu-styles", MENU_CSS);
|
|
643
|
-
const [openState, setOpenState] =
|
|
644
|
-
const [render, setRender] =
|
|
645
|
-
const [pos, setPos] =
|
|
646
|
-
const [active, setActive] =
|
|
647
|
-
const wrapRef =
|
|
648
|
-
const menuRef =
|
|
649
|
-
const typeBufRef =
|
|
650
|
-
const typeTimerRef =
|
|
651
|
-
const menuId =
|
|
646
|
+
const [openState, setOpenState] = React36__default.useState(defaultOpen);
|
|
647
|
+
const [render, setRender] = React36__default.useState(false);
|
|
648
|
+
const [pos, setPos] = React36__default.useState(null);
|
|
649
|
+
const [active, setActive] = React36__default.useState(-1);
|
|
650
|
+
const wrapRef = React36__default.useRef(null);
|
|
651
|
+
const menuRef = React36__default.useRef(null);
|
|
652
|
+
const typeBufRef = React36__default.useRef("");
|
|
653
|
+
const typeTimerRef = React36__default.useRef(null);
|
|
654
|
+
const menuId = React36__default.useId();
|
|
652
655
|
const headerId = `${menuId}-header`;
|
|
653
656
|
const controlled = openProp !== void 0;
|
|
654
657
|
const open = controlled ? !!openProp : openState;
|
|
655
|
-
const openRef =
|
|
658
|
+
const openRef = React36__default.useRef(open);
|
|
656
659
|
openRef.current = open;
|
|
657
|
-
const controlledRef =
|
|
660
|
+
const controlledRef = React36__default.useRef(controlled);
|
|
658
661
|
controlledRef.current = controlled;
|
|
659
|
-
const onOpenChangeRef =
|
|
662
|
+
const onOpenChangeRef = React36__default.useRef(onOpenChange);
|
|
660
663
|
onOpenChangeRef.current = onOpenChange;
|
|
661
|
-
const setOpen =
|
|
664
|
+
const setOpen = React36__default.useCallback((next) => {
|
|
662
665
|
const value = typeof next === "function" ? next(openRef.current) : next;
|
|
663
666
|
if (value === openRef.current) return;
|
|
664
667
|
if (!controlledRef.current) setOpenState(value);
|
|
@@ -666,7 +669,7 @@ function Menu({
|
|
|
666
669
|
}, []);
|
|
667
670
|
const RD = { createPortal: typeof createPortal === "function" ? createPortal : typeof window !== "undefined" && window.ReactDOM && window.ReactDOM.createPortal };
|
|
668
671
|
const interactiveIdx = items.map((it, i) => !it.separator && !it.heading ? i : -1).filter((i) => i >= 0);
|
|
669
|
-
const place =
|
|
672
|
+
const place = React36__default.useCallback(() => {
|
|
670
673
|
const t = wrapRef.current;
|
|
671
674
|
if (!t) return;
|
|
672
675
|
const r = t.getBoundingClientRect();
|
|
@@ -681,7 +684,7 @@ function Menu({
|
|
|
681
684
|
const avail = (flip ? r.top : vh - r.bottom) - gap - M;
|
|
682
685
|
setPos({ top, bottom, left, width: w, flip, maxHeight: Math.max(120, avail) });
|
|
683
686
|
}, [align, width]);
|
|
684
|
-
|
|
687
|
+
React36__default.useEffect(() => {
|
|
685
688
|
if (!open) return;
|
|
686
689
|
place();
|
|
687
690
|
const onMove = () => place();
|
|
@@ -699,7 +702,7 @@ function Menu({
|
|
|
699
702
|
document.removeEventListener("mousedown", onDown);
|
|
700
703
|
};
|
|
701
704
|
}, [open, place]);
|
|
702
|
-
|
|
705
|
+
React36__default.useEffect(() => {
|
|
703
706
|
if (open) {
|
|
704
707
|
setRender(true);
|
|
705
708
|
return;
|
|
@@ -822,7 +825,7 @@ function Menu({
|
|
|
822
825
|
}
|
|
823
826
|
) : null;
|
|
824
827
|
const activeDescId = open && active >= 0 ? `${menuId}-item-${active}` : void 0;
|
|
825
|
-
const triggerEl =
|
|
828
|
+
const triggerEl = React36__default.isValidElement(trigger) ? React36__default.cloneElement(trigger, {
|
|
826
829
|
onClick: (e) => {
|
|
827
830
|
trigger.props.onClick?.(e);
|
|
828
831
|
toggle();
|
|
@@ -987,7 +990,7 @@ function Breadcrumb({
|
|
|
987
990
|
...rest
|
|
988
991
|
}) {
|
|
989
992
|
const __twcStyles = useScopedStyles("twc-breadcrumb-styles", BREADCRUMB_CSS);
|
|
990
|
-
const [expanded, setExpanded] =
|
|
993
|
+
const [expanded, setExpanded] = React36__default.useState(false);
|
|
991
994
|
const sep = separator || /* @__PURE__ */ jsx(ChevronSep, {});
|
|
992
995
|
let display = items;
|
|
993
996
|
if (maxItems > 0 && items.length > maxItems && !expanded) {
|
|
@@ -1000,7 +1003,7 @@ function Breadcrumb({
|
|
|
1000
1003
|
__twcStyles,
|
|
1001
1004
|
display.map((it, i) => {
|
|
1002
1005
|
const last = i === display.length - 1;
|
|
1003
|
-
return /* @__PURE__ */ jsxs(
|
|
1006
|
+
return /* @__PURE__ */ jsxs(React36__default.Fragment, { children: [
|
|
1004
1007
|
it.ellipsis ? /* @__PURE__ */ jsx("button", { className: "twc-breadcrumb__ellipsis", "aria-label": "Show more", onClick: () => setExpanded(true), children: "\u2026" }) : last ? /* @__PURE__ */ jsxs(
|
|
1005
1008
|
"span",
|
|
1006
1009
|
{
|
|
@@ -1142,7 +1145,7 @@ function Button({
|
|
|
1142
1145
|
...rest
|
|
1143
1146
|
}) {
|
|
1144
1147
|
const __twcStyles = useScopedStyles("twc-btn-styles", CSS2);
|
|
1145
|
-
const [ripples, setRipples] =
|
|
1148
|
+
const [ripples, setRipples] = React36__default.useState([]);
|
|
1146
1149
|
const Tag2 = as;
|
|
1147
1150
|
const inert = Tag2 === "a" && (disabled || loading);
|
|
1148
1151
|
function handleClick(e) {
|
|
@@ -1307,9 +1310,9 @@ function buildSx(sx, uid) {
|
|
|
1307
1310
|
return { flatStyle, css };
|
|
1308
1311
|
}
|
|
1309
1312
|
function useSx(sx) {
|
|
1310
|
-
const rawId =
|
|
1313
|
+
const rawId = React36__default.useId();
|
|
1311
1314
|
const uid = `sx${rawId.replace(/[^a-zA-Z0-9]/g, "")}`;
|
|
1312
|
-
const { flatStyle, css } =
|
|
1315
|
+
const { flatStyle, css } = React36__default.useMemo(() => buildSx(sx, uid), [sx, uid]);
|
|
1313
1316
|
const styleNode = useScopedStyles(`twc-sx-${uid}`, css);
|
|
1314
1317
|
return { flatStyle, styleNode, sxAttr: css ? uid : void 0 };
|
|
1315
1318
|
}
|
|
@@ -1438,14 +1441,14 @@ function Carousel({
|
|
|
1438
1441
|
...rest
|
|
1439
1442
|
}) {
|
|
1440
1443
|
const __twcStyles = useScopedStyles("twc-carousel-styles", CAROUSEL_CSS);
|
|
1441
|
-
const slides =
|
|
1444
|
+
const slides = React36__default.Children.toArray(children);
|
|
1442
1445
|
const count = slides.length;
|
|
1443
|
-
const [internal, setInternal] =
|
|
1446
|
+
const [internal, setInternal] = React36__default.useState(defaultIndex);
|
|
1444
1447
|
const index = indexProp !== void 0 ? indexProp : internal;
|
|
1445
|
-
const [paused, setPaused] =
|
|
1446
|
-
const [userPaused, setUserPaused] =
|
|
1447
|
-
const [prefersReduced, setPrefersReduced] =
|
|
1448
|
-
|
|
1448
|
+
const [paused, setPaused] = React36__default.useState(false);
|
|
1449
|
+
const [userPaused, setUserPaused] = React36__default.useState(false);
|
|
1450
|
+
const [prefersReduced, setPrefersReduced] = React36__default.useState(false);
|
|
1451
|
+
React36__default.useEffect(() => {
|
|
1449
1452
|
if (typeof window === "undefined" || !window.matchMedia) return void 0;
|
|
1450
1453
|
const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
1451
1454
|
const on = () => setPrefersReduced(mql.matches);
|
|
@@ -1453,15 +1456,15 @@ function Carousel({
|
|
|
1453
1456
|
mql.addEventListener("change", on);
|
|
1454
1457
|
return () => mql.removeEventListener("change", on);
|
|
1455
1458
|
}, []);
|
|
1456
|
-
const setIndex =
|
|
1459
|
+
const setIndex = React36__default.useCallback((i) => {
|
|
1457
1460
|
if (indexProp === void 0) setInternal(i);
|
|
1458
1461
|
onIndexChange?.(i);
|
|
1459
1462
|
}, [indexProp, onIndexChange]);
|
|
1460
|
-
const go =
|
|
1463
|
+
const go = React36__default.useCallback((i) => {
|
|
1461
1464
|
setIndex(loop ? (i + count) % count : Math.min(Math.max(i, 0), count - 1));
|
|
1462
1465
|
}, [count, loop, setIndex]);
|
|
1463
1466
|
const autoRotating = autoPlay && !paused && !userPaused && !prefersReduced && count > 1;
|
|
1464
|
-
|
|
1467
|
+
React36__default.useEffect(() => {
|
|
1465
1468
|
if (!autoRotating) return void 0;
|
|
1466
1469
|
const t = setInterval(() => {
|
|
1467
1470
|
const next = loop ? (index + 1) % count : index + 1 >= count ? index : index + 1;
|
|
@@ -1556,7 +1559,7 @@ function Chart({
|
|
|
1556
1559
|
...rest
|
|
1557
1560
|
}) {
|
|
1558
1561
|
const __twcStyles = useScopedStyles("twc-chart-styles", CHART_CSS);
|
|
1559
|
-
const uid =
|
|
1562
|
+
const uid = React36__default.useId();
|
|
1560
1563
|
const tableId = tableFallback ? `${uid}-table` : void 0;
|
|
1561
1564
|
const keys = series || ["value"];
|
|
1562
1565
|
const palette = colors && colors.length ? colors : SERIES_COLORS;
|
|
@@ -1712,13 +1715,13 @@ function Checkbox({
|
|
|
1712
1715
|
.twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
|
|
1713
1716
|
.twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
|
|
1714
1717
|
`);
|
|
1715
|
-
const autoId =
|
|
1718
|
+
const autoId = React36__default.useId();
|
|
1716
1719
|
const fieldId = id || autoId;
|
|
1717
1720
|
const errId = `${fieldId}-error`;
|
|
1718
1721
|
const invalid = Boolean(error);
|
|
1719
|
-
const ref =
|
|
1722
|
+
const ref = React36__default.useRef(null);
|
|
1720
1723
|
const mixed = indeterminate && !checked;
|
|
1721
|
-
|
|
1724
|
+
React36__default.useEffect(() => {
|
|
1722
1725
|
if (ref.current) ref.current.indeterminate = mixed;
|
|
1723
1726
|
}, [mixed]);
|
|
1724
1727
|
if (process.env.NODE_ENV !== "production" && !label && !description && !rest["aria-label"] && !rest["aria-labelledby"]) {
|
|
@@ -1872,22 +1875,22 @@ function ColorPicker({
|
|
|
1872
1875
|
}) {
|
|
1873
1876
|
const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS);
|
|
1874
1877
|
const __twcStyles1 = useScopedStyles("twc-colorpicker-styles", COLORPICKER_CSS);
|
|
1875
|
-
const [internal, setInternal] =
|
|
1878
|
+
const [internal, setInternal] = React36__default.useState(defaultValue);
|
|
1876
1879
|
const hex = (value !== void 0 ? value : internal) || "#000000";
|
|
1877
1880
|
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;
|
|
1878
|
-
const lastValidRef =
|
|
1881
|
+
const lastValidRef = React36__default.useRef(hex);
|
|
1879
1882
|
if (hexRe.test(hex)) lastValidRef.current = hex;
|
|
1880
|
-
const [open, setOpen] =
|
|
1881
|
-
const [hsv, setHsv] =
|
|
1882
|
-
const [coords, setCoords] =
|
|
1883
|
-
const wrapRef =
|
|
1884
|
-
const triggerRef =
|
|
1885
|
-
const popRef =
|
|
1886
|
-
const areaRef =
|
|
1887
|
-
const hueRef =
|
|
1888
|
-
const alphaRef =
|
|
1883
|
+
const [open, setOpen] = React36__default.useState(false);
|
|
1884
|
+
const [hsv, setHsv] = React36__default.useState(() => hexToHsv(hex) || { h: 239, s: 60, v: 94, a: 1 });
|
|
1885
|
+
const [coords, setCoords] = React36__default.useState(null);
|
|
1886
|
+
const wrapRef = React36__default.useRef(null);
|
|
1887
|
+
const triggerRef = React36__default.useRef(null);
|
|
1888
|
+
const popRef = React36__default.useRef(null);
|
|
1889
|
+
const areaRef = React36__default.useRef(null);
|
|
1890
|
+
const hueRef = React36__default.useRef(null);
|
|
1891
|
+
const alphaRef = React36__default.useRef(null);
|
|
1889
1892
|
const POP_W = 240;
|
|
1890
|
-
const place =
|
|
1893
|
+
const place = React36__default.useCallback(() => {
|
|
1891
1894
|
const el = triggerRef.current;
|
|
1892
1895
|
if (!el) return;
|
|
1893
1896
|
const r = el.getBoundingClientRect();
|
|
@@ -1898,7 +1901,7 @@ function ColorPicker({
|
|
|
1898
1901
|
left = Math.max(8, left);
|
|
1899
1902
|
setCoords({ left, top: flip ? void 0 : Math.round(r.bottom + 6), bottom: flip ? Math.round(vh - r.top + 6) : void 0 });
|
|
1900
1903
|
}, []);
|
|
1901
|
-
|
|
1904
|
+
React36__default.useEffect(() => {
|
|
1902
1905
|
if (!open) return void 0;
|
|
1903
1906
|
place();
|
|
1904
1907
|
const onMove = () => place();
|
|
@@ -1909,17 +1912,17 @@ function ColorPicker({
|
|
|
1909
1912
|
window.removeEventListener("resize", onMove);
|
|
1910
1913
|
};
|
|
1911
1914
|
}, [open, place]);
|
|
1912
|
-
const labelId =
|
|
1915
|
+
const labelId = React36__default.useId();
|
|
1913
1916
|
const descId = `${labelId}-desc`;
|
|
1914
1917
|
const invalid = Boolean(error);
|
|
1915
|
-
|
|
1918
|
+
React36__default.useEffect(() => {
|
|
1916
1919
|
if (disabled) setOpen(false);
|
|
1917
1920
|
}, [disabled]);
|
|
1918
|
-
|
|
1921
|
+
React36__default.useEffect(() => {
|
|
1919
1922
|
const v = hexToHsv(hex);
|
|
1920
1923
|
if (v && hsvToHex(v.h, v.s, v.v).toLowerCase() !== hsvToHex(hsv.h, hsv.s, hsv.v).toLowerCase()) setHsv(v);
|
|
1921
1924
|
}, [hex]);
|
|
1922
|
-
|
|
1925
|
+
React36__default.useEffect(() => {
|
|
1923
1926
|
if (!open) return;
|
|
1924
1927
|
const onDown = (e) => {
|
|
1925
1928
|
if (wrapRef.current && wrapRef.current.contains(e.target)) return;
|
|
@@ -2291,34 +2294,34 @@ function Combobox({
|
|
|
2291
2294
|
...rest
|
|
2292
2295
|
}) {
|
|
2293
2296
|
const __twcStyles = useScopedStyles("twc-combo-styles", COMBO_CSS);
|
|
2294
|
-
const groups =
|
|
2295
|
-
const flat =
|
|
2296
|
-
const autoId =
|
|
2297
|
+
const groups = React36__default.useMemo(() => normalizeGroups(options), [options]);
|
|
2298
|
+
const flat = React36__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
|
|
2299
|
+
const autoId = React36__default.useId();
|
|
2297
2300
|
const fieldId = id || autoId;
|
|
2298
|
-
const [internal, setInternal] =
|
|
2301
|
+
const [internal, setInternal] = React36__default.useState(defaultValue);
|
|
2299
2302
|
const current = value !== void 0 ? value : internal;
|
|
2300
2303
|
const selected = flat.find((o) => o.value === current);
|
|
2301
|
-
const [open, setOpen] =
|
|
2302
|
-
const [query, setQuery] =
|
|
2303
|
-
const [active, setActive] =
|
|
2304
|
-
const [coords, setCoords] =
|
|
2305
|
-
const [scrollTop, setScrollTop] =
|
|
2306
|
-
const [listH, setListH] =
|
|
2307
|
-
const wrapRef =
|
|
2308
|
-
const controlRef =
|
|
2309
|
-
const inputRef =
|
|
2310
|
-
const popRef =
|
|
2311
|
-
const listRef =
|
|
2312
|
-
const activeRef =
|
|
2313
|
-
const fGroups =
|
|
2304
|
+
const [open, setOpen] = React36__default.useState(false);
|
|
2305
|
+
const [query, setQuery] = React36__default.useState("");
|
|
2306
|
+
const [active, setActive] = React36__default.useState(0);
|
|
2307
|
+
const [coords, setCoords] = React36__default.useState(null);
|
|
2308
|
+
const [scrollTop, setScrollTop] = React36__default.useState(0);
|
|
2309
|
+
const [listH, setListH] = React36__default.useState(260);
|
|
2310
|
+
const wrapRef = React36__default.useRef(null);
|
|
2311
|
+
const controlRef = React36__default.useRef(null);
|
|
2312
|
+
const inputRef = React36__default.useRef(null);
|
|
2313
|
+
const popRef = React36__default.useRef(null);
|
|
2314
|
+
const listRef = React36__default.useRef(null);
|
|
2315
|
+
const activeRef = React36__default.useRef(null);
|
|
2316
|
+
const fGroups = React36__default.useMemo(() => {
|
|
2314
2317
|
const q = query.trim();
|
|
2315
2318
|
const fn = filter === false ? null : typeof filter === "function" ? filter : matches;
|
|
2316
2319
|
return groups.map((g) => ({ group: g.group, options: fn ? g.options.filter((o) => fn(o, q)) : g.options })).filter((g) => g.options.length);
|
|
2317
2320
|
}, [groups, query, filter]);
|
|
2318
|
-
const visible =
|
|
2319
|
-
const rowH =
|
|
2321
|
+
const visible = React36__default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
|
|
2322
|
+
const rowH = React36__default.useMemo(() => visible.some((o) => o.description) ? 48 : 36, [visible]);
|
|
2320
2323
|
const GROUP_H = 30;
|
|
2321
|
-
const { rows, totalH } =
|
|
2324
|
+
const { rows, totalH } = React36__default.useMemo(() => {
|
|
2322
2325
|
if (!virtualized) return { rows: [], totalH: 0 };
|
|
2323
2326
|
const rows2 = [];
|
|
2324
2327
|
let off = 0;
|
|
@@ -2344,7 +2347,7 @@ function Combobox({
|
|
|
2344
2347
|
}
|
|
2345
2348
|
return from;
|
|
2346
2349
|
};
|
|
2347
|
-
const place =
|
|
2350
|
+
const place = React36__default.useCallback(() => {
|
|
2348
2351
|
const el = controlRef.current;
|
|
2349
2352
|
if (!el) return;
|
|
2350
2353
|
const r = el.getBoundingClientRect();
|
|
@@ -2359,7 +2362,7 @@ function Combobox({
|
|
|
2359
2362
|
flip
|
|
2360
2363
|
});
|
|
2361
2364
|
}, [placement, minWidth]);
|
|
2362
|
-
|
|
2365
|
+
React36__default.useEffect(() => {
|
|
2363
2366
|
if (!open || !portal) return;
|
|
2364
2367
|
place();
|
|
2365
2368
|
const onMove = () => place();
|
|
@@ -2370,7 +2373,7 @@ function Combobox({
|
|
|
2370
2373
|
window.removeEventListener("resize", onMove);
|
|
2371
2374
|
};
|
|
2372
2375
|
}, [open, portal, place]);
|
|
2373
|
-
|
|
2376
|
+
React36__default.useEffect(() => {
|
|
2374
2377
|
if (!open) return;
|
|
2375
2378
|
const onDown = (e) => {
|
|
2376
2379
|
if (wrapRef.current && wrapRef.current.contains(e.target)) return;
|
|
@@ -2380,20 +2383,20 @@ function Combobox({
|
|
|
2380
2383
|
document.addEventListener("mousedown", onDown);
|
|
2381
2384
|
return () => document.removeEventListener("mousedown", onDown);
|
|
2382
2385
|
}, [open]);
|
|
2383
|
-
|
|
2386
|
+
React36__default.useEffect(() => {
|
|
2384
2387
|
setActive(0);
|
|
2385
2388
|
}, [query]);
|
|
2386
|
-
|
|
2389
|
+
React36__default.useEffect(() => {
|
|
2387
2390
|
if (!open) return;
|
|
2388
2391
|
const idx = flat.findIndex((o) => o.value === current);
|
|
2389
2392
|
setActive(idx >= 0 ? idx : 0);
|
|
2390
2393
|
}, [open]);
|
|
2391
|
-
|
|
2394
|
+
React36__default.useEffect(() => {
|
|
2392
2395
|
if (!open || !virtualized) return;
|
|
2393
2396
|
const el = listRef.current;
|
|
2394
2397
|
if (el && el.clientHeight) setListH(el.clientHeight);
|
|
2395
2398
|
}, [open, virtualized]);
|
|
2396
|
-
|
|
2399
|
+
React36__default.useEffect(() => {
|
|
2397
2400
|
if (!open) return;
|
|
2398
2401
|
if (!virtualized) {
|
|
2399
2402
|
ensureVisible(listRef.current, activeRef.current);
|
|
@@ -2502,7 +2505,7 @@ function Combobox({
|
|
|
2502
2505
|
vTop > 0 ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { height: vTop } }) : null,
|
|
2503
2506
|
vShown.map((r) => r.kind === "group" ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: r.label }, `g${r.gi}`) : renderOption(r.o, r.idx)),
|
|
2504
2507
|
vBottom > 0 ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
|
|
2505
|
-
] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(
|
|
2508
|
+
] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React36__default.Fragment, { children: [
|
|
2506
2509
|
g.group ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: g.group }) : null,
|
|
2507
2510
|
g.options.map((o) => {
|
|
2508
2511
|
counter += 1;
|
|
@@ -2665,14 +2668,14 @@ function CommandPalette({
|
|
|
2665
2668
|
}) {
|
|
2666
2669
|
const __twcStyles = useScopedStyles("twc-cmdk-styles", COMMAND_CSS);
|
|
2667
2670
|
const renderPortal = usePortal();
|
|
2668
|
-
const [query, setQuery] =
|
|
2669
|
-
const [active, setActive] =
|
|
2670
|
-
const inputRef =
|
|
2671
|
-
const listRef =
|
|
2672
|
-
const paletteRef =
|
|
2673
|
-
const baseId =
|
|
2674
|
-
const [mounted, setMounted] =
|
|
2675
|
-
|
|
2671
|
+
const [query, setQuery] = React36__default.useState("");
|
|
2672
|
+
const [active, setActive] = React36__default.useState(0);
|
|
2673
|
+
const inputRef = React36__default.useRef(null);
|
|
2674
|
+
const listRef = React36__default.useRef(null);
|
|
2675
|
+
const paletteRef = React36__default.useRef(null);
|
|
2676
|
+
const baseId = React36__default.useId();
|
|
2677
|
+
const [mounted, setMounted] = React36__default.useState(open);
|
|
2678
|
+
React36__default.useEffect(() => {
|
|
2676
2679
|
if (open) {
|
|
2677
2680
|
setMounted(true);
|
|
2678
2681
|
return;
|
|
@@ -2681,14 +2684,14 @@ function CommandPalette({
|
|
|
2681
2684
|
return () => clearTimeout(t);
|
|
2682
2685
|
}, [open]);
|
|
2683
2686
|
useScrollLock(open);
|
|
2684
|
-
|
|
2687
|
+
React36__default.useEffect(() => {
|
|
2685
2688
|
if (open) {
|
|
2686
2689
|
setQuery("");
|
|
2687
2690
|
setActive(0);
|
|
2688
2691
|
}
|
|
2689
2692
|
}, [open]);
|
|
2690
2693
|
useFocusTrap(paletteRef, open && mounted);
|
|
2691
|
-
|
|
2694
|
+
React36__default.useEffect(() => {
|
|
2692
2695
|
if (!open) return void 0;
|
|
2693
2696
|
const onKey = (e) => {
|
|
2694
2697
|
if (e.key === "Escape") {
|
|
@@ -2700,7 +2703,7 @@ function CommandPalette({
|
|
|
2700
2703
|
return () => document.removeEventListener("keydown", onKey);
|
|
2701
2704
|
}, [open, onClose]);
|
|
2702
2705
|
const q = query.trim().toLowerCase();
|
|
2703
|
-
const filtered =
|
|
2706
|
+
const filtered = React36__default.useMemo(() => commands.filter(
|
|
2704
2707
|
(c) => !q || c.label.toLowerCase().includes(q) || (c.keywords || "").toLowerCase().includes(q) || (c.group || "").toLowerCase().includes(q)
|
|
2705
2708
|
), [commands, q]);
|
|
2706
2709
|
const groups = [];
|
|
@@ -2715,7 +2718,7 @@ function CommandPalette({
|
|
|
2715
2718
|
g.items.push(c);
|
|
2716
2719
|
flat.push(c);
|
|
2717
2720
|
});
|
|
2718
|
-
|
|
2721
|
+
React36__default.useEffect(() => {
|
|
2719
2722
|
setActive(0);
|
|
2720
2723
|
}, [query]);
|
|
2721
2724
|
const run = (cmd) => {
|
|
@@ -2735,7 +2738,7 @@ function CommandPalette({
|
|
|
2735
2738
|
if (cmd) run(cmd);
|
|
2736
2739
|
}
|
|
2737
2740
|
}
|
|
2738
|
-
|
|
2741
|
+
React36__default.useEffect(() => {
|
|
2739
2742
|
const node = listRef.current?.querySelector('[data-active="true"]');
|
|
2740
2743
|
if (node) node.scrollIntoView({ block: "nearest" });
|
|
2741
2744
|
}, [active]);
|
|
@@ -2911,13 +2914,13 @@ function Currency({
|
|
|
2911
2914
|
const prec = precision != null ? precision : meta.precision;
|
|
2912
2915
|
const sym = symbol != null ? symbol : meta.symbol;
|
|
2913
2916
|
const cur = code != null ? code : meta.code;
|
|
2914
|
-
const autoId =
|
|
2917
|
+
const autoId = React36__default.useId();
|
|
2915
2918
|
const fieldId = id || autoId;
|
|
2916
2919
|
const invalid = Boolean(error);
|
|
2917
2920
|
const controlled = value !== void 0;
|
|
2918
|
-
const [internal, setInternal] =
|
|
2921
|
+
const [internal, setInternal] = React36__default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
|
|
2919
2922
|
const shown = controlled ? clampPrecision(String(value ?? ""), prec) : internal;
|
|
2920
|
-
|
|
2923
|
+
React36__default.useEffect(() => {
|
|
2921
2924
|
if (!controlled) return;
|
|
2922
2925
|
const raw = String(value ?? "");
|
|
2923
2926
|
if (shown !== raw) {
|
|
@@ -3113,37 +3116,37 @@ function Select({
|
|
|
3113
3116
|
...rest
|
|
3114
3117
|
}) {
|
|
3115
3118
|
const __twcStyles = useScopedStyles("twc-select-styles", SELECT_CSS);
|
|
3116
|
-
const bufferRef =
|
|
3117
|
-
const bufferTimerRef =
|
|
3118
|
-
const groups =
|
|
3119
|
-
const flat =
|
|
3120
|
-
const autoId =
|
|
3119
|
+
const bufferRef = React36__default.useRef("");
|
|
3120
|
+
const bufferTimerRef = React36__default.useRef(null);
|
|
3121
|
+
const groups = React36__default.useMemo(() => normalizeGroups2(options), [options]);
|
|
3122
|
+
const flat = React36__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
|
|
3123
|
+
const autoId = React36__default.useId();
|
|
3121
3124
|
const fieldId = id || autoId;
|
|
3122
|
-
const [internal, setInternal] =
|
|
3125
|
+
const [internal, setInternal] = React36__default.useState(defaultValue);
|
|
3123
3126
|
const current = value !== void 0 ? value : internal;
|
|
3124
|
-
const [open, setOpen] =
|
|
3125
|
-
const [render, setRender] =
|
|
3126
|
-
const [active, setActive] =
|
|
3127
|
-
const [coords, setCoords] =
|
|
3128
|
-
const [query, setQuery] =
|
|
3129
|
-
const [scrollTop, setScrollTop] =
|
|
3130
|
-
const [listH, setListH] =
|
|
3131
|
-
const wrapRef =
|
|
3132
|
-
const triggerRef =
|
|
3133
|
-
const popRef =
|
|
3134
|
-
const listRef =
|
|
3135
|
-
const activeRef =
|
|
3136
|
-
const searchRef =
|
|
3127
|
+
const [open, setOpen] = React36__default.useState(false);
|
|
3128
|
+
const [render, setRender] = React36__default.useState(false);
|
|
3129
|
+
const [active, setActive] = React36__default.useState(0);
|
|
3130
|
+
const [coords, setCoords] = React36__default.useState(null);
|
|
3131
|
+
const [query, setQuery] = React36__default.useState("");
|
|
3132
|
+
const [scrollTop, setScrollTop] = React36__default.useState(0);
|
|
3133
|
+
const [listH, setListH] = React36__default.useState(260);
|
|
3134
|
+
const wrapRef = React36__default.useRef(null);
|
|
3135
|
+
const triggerRef = React36__default.useRef(null);
|
|
3136
|
+
const popRef = React36__default.useRef(null);
|
|
3137
|
+
const listRef = React36__default.useRef(null);
|
|
3138
|
+
const activeRef = React36__default.useRef(null);
|
|
3139
|
+
const searchRef = React36__default.useRef(null);
|
|
3137
3140
|
const showSearch = searchable === void 0 ? flat.length > 5 : searchable;
|
|
3138
|
-
const fGroups =
|
|
3141
|
+
const fGroups = React36__default.useMemo(() => {
|
|
3139
3142
|
const q = query.trim().toLowerCase();
|
|
3140
3143
|
if (!q) return groups;
|
|
3141
3144
|
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);
|
|
3142
3145
|
}, [groups, query]);
|
|
3143
|
-
const visible =
|
|
3144
|
-
const rowH =
|
|
3146
|
+
const visible = React36__default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
|
|
3147
|
+
const rowH = React36__default.useMemo(() => visible.some((o) => o.description) ? 48 : 36, [visible]);
|
|
3145
3148
|
const GROUP_H = 30;
|
|
3146
|
-
const { rows, totalH } =
|
|
3149
|
+
const { rows, totalH } = React36__default.useMemo(() => {
|
|
3147
3150
|
if (!virtualized) return { rows: [], totalH: 0 };
|
|
3148
3151
|
const rows2 = [];
|
|
3149
3152
|
let off = 0;
|
|
@@ -3170,7 +3173,7 @@ function Select({
|
|
|
3170
3173
|
}
|
|
3171
3174
|
return from;
|
|
3172
3175
|
};
|
|
3173
|
-
const place =
|
|
3176
|
+
const place = React36__default.useCallback(() => {
|
|
3174
3177
|
const el = triggerRef.current;
|
|
3175
3178
|
if (!el) return;
|
|
3176
3179
|
const r = el.getBoundingClientRect();
|
|
@@ -3186,7 +3189,7 @@ function Select({
|
|
|
3186
3189
|
flip
|
|
3187
3190
|
});
|
|
3188
3191
|
}, [placement, minWidth, matchTriggerWidth]);
|
|
3189
|
-
|
|
3192
|
+
React36__default.useEffect(() => {
|
|
3190
3193
|
if (!open || !portal) return;
|
|
3191
3194
|
place();
|
|
3192
3195
|
const onMove = () => place();
|
|
@@ -3197,7 +3200,7 @@ function Select({
|
|
|
3197
3200
|
window.removeEventListener("resize", onMove);
|
|
3198
3201
|
};
|
|
3199
3202
|
}, [open, portal, place]);
|
|
3200
|
-
|
|
3203
|
+
React36__default.useEffect(() => {
|
|
3201
3204
|
if (!open) return;
|
|
3202
3205
|
const idx = flat.findIndex((o) => o.value === current);
|
|
3203
3206
|
setActive(idx >= 0 ? idx : 0);
|
|
@@ -3213,15 +3216,15 @@ function Select({
|
|
|
3213
3216
|
document.addEventListener("mousedown", onDown);
|
|
3214
3217
|
return () => document.removeEventListener("mousedown", onDown);
|
|
3215
3218
|
}, [open]);
|
|
3216
|
-
|
|
3219
|
+
React36__default.useEffect(() => {
|
|
3217
3220
|
setActive(0);
|
|
3218
3221
|
}, [query]);
|
|
3219
|
-
|
|
3222
|
+
React36__default.useEffect(() => {
|
|
3220
3223
|
if (!open || !virtualized) return;
|
|
3221
3224
|
const el = listRef.current;
|
|
3222
3225
|
if (el && el.clientHeight) setListH(el.clientHeight);
|
|
3223
3226
|
}, [open, virtualized, render]);
|
|
3224
|
-
|
|
3227
|
+
React36__default.useEffect(() => {
|
|
3225
3228
|
if (!open) return;
|
|
3226
3229
|
if (!virtualized) {
|
|
3227
3230
|
ensureVisible2(listRef.current, activeRef.current);
|
|
@@ -3238,7 +3241,7 @@ function Select({
|
|
|
3238
3241
|
if (next !== el.scrollTop) el.scrollTop = next;
|
|
3239
3242
|
setScrollTop(next);
|
|
3240
3243
|
}, [active, open, virtualized, rows, listH]);
|
|
3241
|
-
|
|
3244
|
+
React36__default.useEffect(() => {
|
|
3242
3245
|
if (open) {
|
|
3243
3246
|
setRender(true);
|
|
3244
3247
|
return;
|
|
@@ -3246,8 +3249,8 @@ function Select({
|
|
|
3246
3249
|
const t = setTimeout(() => setRender(false), 170);
|
|
3247
3250
|
return () => clearTimeout(t);
|
|
3248
3251
|
}, [open]);
|
|
3249
|
-
const prevOpen =
|
|
3250
|
-
|
|
3252
|
+
const prevOpen = React36__default.useRef(false);
|
|
3253
|
+
React36__default.useEffect(() => {
|
|
3251
3254
|
if (prevOpen.current && !open) {
|
|
3252
3255
|
const ae = typeof document !== "undefined" ? document.activeElement : null;
|
|
3253
3256
|
if (popRef.current && ae && popRef.current.contains(ae)) triggerRef.current?.focus();
|
|
@@ -3384,7 +3387,7 @@ function Select({
|
|
|
3384
3387
|
vTop > 0 ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { height: vTop } }) : null,
|
|
3385
3388
|
vShown.map((r) => r.kind === "group" ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: r.label }, `g${r.gi}`) : renderOption(r.o, r.idx)),
|
|
3386
3389
|
vBottom > 0 ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
|
|
3387
|
-
] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(
|
|
3390
|
+
] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React36__default.Fragment, { children: [
|
|
3388
3391
|
g.group ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: g.group }) : null,
|
|
3389
3392
|
g.options.map((o) => {
|
|
3390
3393
|
counter += 1;
|
|
@@ -3539,21 +3542,21 @@ function CurrencyField({
|
|
|
3539
3542
|
...rest
|
|
3540
3543
|
}) {
|
|
3541
3544
|
const __twcStyles = useScopedStyles("twc-curf-styles", CURF_CSS);
|
|
3542
|
-
const autoId =
|
|
3545
|
+
const autoId = React36__default.useId();
|
|
3543
3546
|
const fieldId = id || autoId;
|
|
3544
3547
|
const invalid = Boolean(error);
|
|
3545
3548
|
const curControlled = currency !== void 0;
|
|
3546
|
-
const [curInternal, setCurInternal] =
|
|
3549
|
+
const [curInternal, setCurInternal] = React36__default.useState(defaultCurrency);
|
|
3547
3550
|
const cur = curControlled ? currency : curInternal;
|
|
3548
3551
|
const meta = CURRENCIES[cur] || CURRENCIES.USD;
|
|
3549
3552
|
const prec = meta.precision;
|
|
3550
3553
|
const valControlled = value !== void 0;
|
|
3551
|
-
const [valInternal, setValInternal] =
|
|
3554
|
+
const [valInternal, setValInternal] = React36__default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
|
|
3552
3555
|
const shown = valControlled ? clampPrecision(String(value ?? ""), prec) : valInternal;
|
|
3553
3556
|
const descId = `${fieldId}-desc`;
|
|
3554
3557
|
const describedBy = [error || hint ? descId : null, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
|
|
3555
3558
|
const ariaInvalid = invalid ? true : rest["aria-invalid"] ?? void 0;
|
|
3556
|
-
|
|
3559
|
+
React36__default.useEffect(() => {
|
|
3557
3560
|
if (!valControlled) {
|
|
3558
3561
|
const clamped = clampPrecision(valInternal, prec);
|
|
3559
3562
|
if (clamped !== valInternal) {
|
|
@@ -3569,7 +3572,7 @@ function CurrencyField({
|
|
|
3569
3572
|
}
|
|
3570
3573
|
}
|
|
3571
3574
|
}, [prec, cur, shown, value, valControlled, valInternal]);
|
|
3572
|
-
const options =
|
|
3575
|
+
const options = React36__default.useMemo(() => {
|
|
3573
3576
|
if (!currencies) return CURRENCY_OPTIONS;
|
|
3574
3577
|
return currencies.map((c) => typeof c === "string" ? { value: c, label: `${c} \u2014 ${(CURRENCIES[c] || {}).label || c}` } : c);
|
|
3575
3578
|
}, [currencies]);
|
|
@@ -3723,13 +3726,13 @@ function Input({
|
|
|
3723
3726
|
}) {
|
|
3724
3727
|
const __twcStyles = useScopedStyles("twc-field-styles", FIELD_CSS2);
|
|
3725
3728
|
const __twcExtra = useScopedStyles("twc-input-extra-styles", INPUT_EXTRA_CSS);
|
|
3726
|
-
const autoId =
|
|
3729
|
+
const autoId = React36__default.useId();
|
|
3727
3730
|
const fieldId = id || autoId;
|
|
3728
3731
|
const descId = `${fieldId}-desc`;
|
|
3729
3732
|
const countId = `${fieldId}-count`;
|
|
3730
3733
|
const invalid = Boolean(error);
|
|
3731
3734
|
const countControlled = rest.value !== void 0;
|
|
3732
|
-
const [len2, setLen] =
|
|
3735
|
+
const [len2, setLen] = React36__default.useState(() => String(rest.defaultValue ?? "").length);
|
|
3733
3736
|
const count = countControlled ? String(rest.value ?? "").length : len2;
|
|
3734
3737
|
const max = rest.maxLength;
|
|
3735
3738
|
const showCounter = showCount && max != null;
|
|
@@ -3741,7 +3744,7 @@ function Input({
|
|
|
3741
3744
|
const ariaInvalid = invalid ? true : rest["aria-invalid"] ?? void 0;
|
|
3742
3745
|
const describedBy = [error || hint ? descId : null, showCounter ? countId : null, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
|
|
3743
3746
|
const isPassword = type === "password";
|
|
3744
|
-
const [revealed, setRevealed] =
|
|
3747
|
+
const [revealed, setRevealed] = React36__default.useState(false);
|
|
3745
3748
|
const effectiveType = isPassword && revealed ? "text" : type;
|
|
3746
3749
|
const suffix = rightIcon ? /* @__PURE__ */ jsx("span", { className: "twc-input__affix", children: rightIcon }) : isPassword ? /* @__PURE__ */ jsx(
|
|
3747
3750
|
"button",
|
|
@@ -3944,32 +3947,32 @@ function MultiSelect({
|
|
|
3944
3947
|
...rest
|
|
3945
3948
|
}) {
|
|
3946
3949
|
const __twcStyles = useScopedStyles("twc-ms-styles", MULTI_CSS);
|
|
3947
|
-
const groups =
|
|
3948
|
-
const flat =
|
|
3949
|
-
const autoId =
|
|
3950
|
+
const groups = React36__default.useMemo(() => normalizeGroups3(options), [options]);
|
|
3951
|
+
const flat = React36__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
|
|
3952
|
+
const autoId = React36__default.useId();
|
|
3950
3953
|
const fieldId = id || autoId;
|
|
3951
|
-
const [internal, setInternal] =
|
|
3954
|
+
const [internal, setInternal] = React36__default.useState(defaultValue);
|
|
3952
3955
|
const selected = value !== void 0 ? value : internal;
|
|
3953
|
-
const [open, setOpen] =
|
|
3954
|
-
const [query, setQuery] =
|
|
3955
|
-
const [active, setActive] =
|
|
3956
|
-
const [coords, setCoords] =
|
|
3957
|
-
const [scrollTop, setScrollTop] =
|
|
3958
|
-
const [listH, setListH] =
|
|
3959
|
-
const wrapRef =
|
|
3960
|
-
const controlRef =
|
|
3961
|
-
const inputRef =
|
|
3962
|
-
const popRef =
|
|
3963
|
-
const listRef =
|
|
3964
|
-
const activeRef =
|
|
3965
|
-
const fGroups =
|
|
3956
|
+
const [open, setOpen] = React36__default.useState(false);
|
|
3957
|
+
const [query, setQuery] = React36__default.useState("");
|
|
3958
|
+
const [active, setActive] = React36__default.useState(0);
|
|
3959
|
+
const [coords, setCoords] = React36__default.useState(null);
|
|
3960
|
+
const [scrollTop, setScrollTop] = React36__default.useState(0);
|
|
3961
|
+
const [listH, setListH] = React36__default.useState(260);
|
|
3962
|
+
const wrapRef = React36__default.useRef(null);
|
|
3963
|
+
const controlRef = React36__default.useRef(null);
|
|
3964
|
+
const inputRef = React36__default.useRef(null);
|
|
3965
|
+
const popRef = React36__default.useRef(null);
|
|
3966
|
+
const listRef = React36__default.useRef(null);
|
|
3967
|
+
const activeRef = React36__default.useRef(null);
|
|
3968
|
+
const fGroups = React36__default.useMemo(
|
|
3966
3969
|
() => groups.map((g) => ({ group: g.group, options: g.options.filter((o) => matches2(o, query.trim())) })).filter((g) => g.options.length),
|
|
3967
3970
|
[groups, query]
|
|
3968
3971
|
);
|
|
3969
|
-
const visible =
|
|
3970
|
-
const rowH =
|
|
3972
|
+
const visible = React36__default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
|
|
3973
|
+
const rowH = React36__default.useMemo(() => visible.some((o) => o.description) ? 48 : 36, [visible]);
|
|
3971
3974
|
const GROUP_H = 30;
|
|
3972
|
-
const { rows, totalH } =
|
|
3975
|
+
const { rows, totalH } = React36__default.useMemo(() => {
|
|
3973
3976
|
if (!virtualized) return { rows: [], totalH: 0 };
|
|
3974
3977
|
const rows2 = [];
|
|
3975
3978
|
let off = 0;
|
|
@@ -3997,7 +4000,7 @@ function MultiSelect({
|
|
|
3997
4000
|
}
|
|
3998
4001
|
return from;
|
|
3999
4002
|
};
|
|
4000
|
-
const place =
|
|
4003
|
+
const place = React36__default.useCallback(() => {
|
|
4001
4004
|
const el = controlRef.current;
|
|
4002
4005
|
if (!el) return;
|
|
4003
4006
|
const r = el.getBoundingClientRect();
|
|
@@ -4012,7 +4015,7 @@ function MultiSelect({
|
|
|
4012
4015
|
flip
|
|
4013
4016
|
});
|
|
4014
4017
|
}, [placement, minWidth]);
|
|
4015
|
-
|
|
4018
|
+
React36__default.useEffect(() => {
|
|
4016
4019
|
if (!open || !portal) return;
|
|
4017
4020
|
place();
|
|
4018
4021
|
const onMove = () => place();
|
|
@@ -4023,7 +4026,7 @@ function MultiSelect({
|
|
|
4023
4026
|
window.removeEventListener("resize", onMove);
|
|
4024
4027
|
};
|
|
4025
4028
|
}, [open, portal, place]);
|
|
4026
|
-
|
|
4029
|
+
React36__default.useEffect(() => {
|
|
4027
4030
|
if (!open) return;
|
|
4028
4031
|
const onDown = (e) => {
|
|
4029
4032
|
if (wrapRef.current && wrapRef.current.contains(e.target)) return;
|
|
@@ -4034,15 +4037,15 @@ function MultiSelect({
|
|
|
4034
4037
|
document.addEventListener("mousedown", onDown);
|
|
4035
4038
|
return () => document.removeEventListener("mousedown", onDown);
|
|
4036
4039
|
}, [open]);
|
|
4037
|
-
|
|
4040
|
+
React36__default.useEffect(() => {
|
|
4038
4041
|
setActive(0);
|
|
4039
4042
|
}, [query]);
|
|
4040
|
-
|
|
4043
|
+
React36__default.useEffect(() => {
|
|
4041
4044
|
if (!open || !virtualized) return;
|
|
4042
4045
|
const el = listRef.current;
|
|
4043
4046
|
if (el && el.clientHeight) setListH(el.clientHeight);
|
|
4044
4047
|
}, [open, virtualized]);
|
|
4045
|
-
|
|
4048
|
+
React36__default.useEffect(() => {
|
|
4046
4049
|
if (!open) return;
|
|
4047
4050
|
if (!virtualized) {
|
|
4048
4051
|
ensureVisible3(listRef.current, activeRef.current);
|
|
@@ -4153,7 +4156,7 @@ function MultiSelect({
|
|
|
4153
4156
|
vTop > 0 ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { height: vTop } }) : null,
|
|
4154
4157
|
vShown.map((r) => r.kind === "group" ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: r.label }, `g${r.gi}`) : renderOption(r.o, r.idx)),
|
|
4155
4158
|
vBottom > 0 ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
|
|
4156
|
-
] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(
|
|
4159
|
+
] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React36__default.Fragment, { children: [
|
|
4157
4160
|
g.group ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: g.group }) : null,
|
|
4158
4161
|
g.options.map((o) => {
|
|
4159
4162
|
counter += 1;
|
|
@@ -4355,7 +4358,7 @@ function Pagination({
|
|
|
4355
4358
|
}
|
|
4356
4359
|
const jumperEnabled = showPageJumper ?? showJumper;
|
|
4357
4360
|
const __twcStyles = useScopedStyles("twc-pagination-styles", PAGINATION_CSS);
|
|
4358
|
-
const [internal, setInternal] =
|
|
4361
|
+
const [internal, setInternal] = React36__default.useState(defaultPage);
|
|
4359
4362
|
const page = pageProp !== void 0 ? pageProp : internal;
|
|
4360
4363
|
const pages = buildPages(page, total, siblings, boundaries);
|
|
4361
4364
|
const go = (p) => {
|
|
@@ -4363,7 +4366,7 @@ function Pagination({
|
|
|
4363
4366
|
if (pageProp === void 0) setInternal(p);
|
|
4364
4367
|
onChange?.(p);
|
|
4365
4368
|
};
|
|
4366
|
-
const [jump, setJump] =
|
|
4369
|
+
const [jump, setJump] = React36__default.useState("");
|
|
4367
4370
|
const submitJump = () => {
|
|
4368
4371
|
const n = parseInt(jump, 10);
|
|
4369
4372
|
if (!Number.isNaN(n)) go(Math.min(Math.max(n, 1), total));
|
|
@@ -4446,13 +4449,13 @@ function Tooltip({
|
|
|
4446
4449
|
...rest
|
|
4447
4450
|
}) {
|
|
4448
4451
|
const __twcStyles = useScopedStyles("twc-tooltip-styles", TOOLTIP_CSS);
|
|
4449
|
-
const id =
|
|
4450
|
-
const [show, setShow] =
|
|
4451
|
-
const [coords, setCoords] =
|
|
4452
|
-
const timer =
|
|
4453
|
-
const closeTimer =
|
|
4454
|
-
const wrapRef =
|
|
4455
|
-
const tipRef =
|
|
4452
|
+
const id = React36__default.useId();
|
|
4453
|
+
const [show, setShow] = React36__default.useState(false);
|
|
4454
|
+
const [coords, setCoords] = React36__default.useState(null);
|
|
4455
|
+
const timer = React36__default.useRef(null);
|
|
4456
|
+
const closeTimer = React36__default.useRef(null);
|
|
4457
|
+
const wrapRef = React36__default.useRef(null);
|
|
4458
|
+
const tipRef = React36__default.useRef(null);
|
|
4456
4459
|
const open = () => {
|
|
4457
4460
|
clearTimeout(closeTimer.current);
|
|
4458
4461
|
clearTimeout(timer.current);
|
|
@@ -4466,11 +4469,11 @@ function Tooltip({
|
|
|
4466
4469
|
const cancelClose = () => {
|
|
4467
4470
|
clearTimeout(closeTimer.current);
|
|
4468
4471
|
};
|
|
4469
|
-
|
|
4472
|
+
React36__default.useEffect(() => () => {
|
|
4470
4473
|
clearTimeout(timer.current);
|
|
4471
4474
|
clearTimeout(closeTimer.current);
|
|
4472
4475
|
}, []);
|
|
4473
|
-
const place =
|
|
4476
|
+
const place = React36__default.useCallback(() => {
|
|
4474
4477
|
const el = wrapRef.current;
|
|
4475
4478
|
if (!el) return;
|
|
4476
4479
|
const r = el.getBoundingClientRect();
|
|
@@ -4493,10 +4496,10 @@ function Tooltip({
|
|
|
4493
4496
|
else if (side === "right") setCoords({ ...base, top: clampY(cy), left: Math.round(r.right + gap) });
|
|
4494
4497
|
else setCoords({ ...base, left: clampX(cx), bottom: Math.round(vh - r.top + gap) });
|
|
4495
4498
|
}, [placement]);
|
|
4496
|
-
|
|
4499
|
+
React36__default.useEffect(() => {
|
|
4497
4500
|
place();
|
|
4498
4501
|
}, [place]);
|
|
4499
|
-
|
|
4502
|
+
React36__default.useEffect(() => {
|
|
4500
4503
|
if (!show) return void 0;
|
|
4501
4504
|
place();
|
|
4502
4505
|
const onMove = () => place();
|
|
@@ -4507,7 +4510,7 @@ function Tooltip({
|
|
|
4507
4510
|
window.removeEventListener("resize", onMove);
|
|
4508
4511
|
};
|
|
4509
4512
|
}, [show, place]);
|
|
4510
|
-
|
|
4513
|
+
React36__default.useEffect(() => {
|
|
4511
4514
|
if (!show) return;
|
|
4512
4515
|
const onKeyDown = (e) => {
|
|
4513
4516
|
if (e.key === "Escape") {
|
|
@@ -4519,7 +4522,7 @@ function Tooltip({
|
|
|
4519
4522
|
return () => document.removeEventListener("keydown", onKeyDown);
|
|
4520
4523
|
}, [show]);
|
|
4521
4524
|
const describedBy = show ? id : void 0;
|
|
4522
|
-
const trigger =
|
|
4525
|
+
const trigger = React36__default.isValidElement(children) && children.type !== React36__default.Fragment ? React36__default.cloneElement(children, {
|
|
4523
4526
|
"aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0
|
|
4524
4527
|
}) : /* @__PURE__ */ jsx("span", { "aria-describedby": describedBy, children });
|
|
4525
4528
|
return /* @__PURE__ */ jsxs(
|
|
@@ -5123,9 +5126,9 @@ function runDatatableQuery(rows, query, options = {}) {
|
|
|
5123
5126
|
return { rows: page, total, filtered: out };
|
|
5124
5127
|
}
|
|
5125
5128
|
function useFloating() {
|
|
5126
|
-
const [pos, setPos] =
|
|
5127
|
-
const cfg =
|
|
5128
|
-
const place =
|
|
5129
|
+
const [pos, setPos] = React36__default.useState(null);
|
|
5130
|
+
const cfg = React36__default.useRef(null);
|
|
5131
|
+
const place = React36__default.useCallback(() => {
|
|
5129
5132
|
const c = cfg.current;
|
|
5130
5133
|
if (!c || !c.el || !c.el.isConnected) return null;
|
|
5131
5134
|
const r = c.el.getBoundingClientRect();
|
|
@@ -5136,17 +5139,17 @@ function useFloating() {
|
|
|
5136
5139
|
const top = r.bottom + 6;
|
|
5137
5140
|
return { top, left, width: c.width, anchorX: r.left + r.width / 2, maxHeight: Math.max(180, vh - top - M) };
|
|
5138
5141
|
}, []);
|
|
5139
|
-
const open =
|
|
5142
|
+
const open = React36__default.useCallback((el, align = "left", width = 220) => {
|
|
5140
5143
|
cfg.current = { el, align, width };
|
|
5141
5144
|
const p = place();
|
|
5142
5145
|
if (p) setPos(p);
|
|
5143
5146
|
}, [place]);
|
|
5144
|
-
const close =
|
|
5147
|
+
const close = React36__default.useCallback(() => {
|
|
5145
5148
|
cfg.current = null;
|
|
5146
5149
|
setPos(null);
|
|
5147
5150
|
}, []);
|
|
5148
5151
|
const isOpen = pos != null;
|
|
5149
|
-
|
|
5152
|
+
React36__default.useEffect(() => {
|
|
5150
5153
|
if (!isOpen) return void 0;
|
|
5151
5154
|
const update = () => {
|
|
5152
5155
|
const p = place();
|
|
@@ -5170,9 +5173,9 @@ function Caret({ pos }) {
|
|
|
5170
5173
|
return /* @__PURE__ */ jsx("span", { className: "twc-dt__caret", style: { left } });
|
|
5171
5174
|
}
|
|
5172
5175
|
function EditCell({ col, value, options, onChange, onCommit, onCommitValue, onCancel, onKeyDown }) {
|
|
5173
|
-
const ref =
|
|
5176
|
+
const ref = React36__default.useRef(null);
|
|
5174
5177
|
const isSelect = col.editType === "select" || options && col.editType !== "text";
|
|
5175
|
-
|
|
5178
|
+
React36__default.useEffect(() => {
|
|
5176
5179
|
if (isSelect) {
|
|
5177
5180
|
const t = setTimeout(() => ref.current?.querySelector(".twc-sel__trigger")?.click(), 0);
|
|
5178
5181
|
return () => clearTimeout(t);
|
|
@@ -5380,7 +5383,7 @@ function Datatable({
|
|
|
5380
5383
|
...rest
|
|
5381
5384
|
}) {
|
|
5382
5385
|
const __twcStyles = useScopedStyles("twc-dt-styles", DT_CSS);
|
|
5383
|
-
const cols =
|
|
5386
|
+
const cols = React36__default.useMemo(() => {
|
|
5384
5387
|
const out = columns.map((c) => {
|
|
5385
5388
|
const isActions = c.type === "actions";
|
|
5386
5389
|
return {
|
|
@@ -5415,7 +5418,7 @@ function Datatable({
|
|
|
5415
5418
|
}
|
|
5416
5419
|
return out;
|
|
5417
5420
|
}, [columns, rowPinning]);
|
|
5418
|
-
const _autoKey =
|
|
5421
|
+
const _autoKey = React36__default.useRef();
|
|
5419
5422
|
if (!_autoKey.current) _autoKey.current = { map: /* @__PURE__ */ new WeakMap(), n: 0 };
|
|
5420
5423
|
const keyOf = rowKey || ((r, i) => {
|
|
5421
5424
|
if (r != null && r.id != null) return r.id;
|
|
@@ -5430,17 +5433,17 @@ function Datatable({
|
|
|
5430
5433
|
}
|
|
5431
5434
|
return i;
|
|
5432
5435
|
});
|
|
5433
|
-
const [sort, setSort] =
|
|
5434
|
-
const [filters, setFilters] =
|
|
5435
|
-
const [hidden, setHidden] =
|
|
5436
|
-
const [showRowNum, setShowRowNum] =
|
|
5437
|
-
const [wrapped, setWrapped] =
|
|
5436
|
+
const [sort, setSort] = React36__default.useState(null);
|
|
5437
|
+
const [filters, setFilters] = React36__default.useState([]);
|
|
5438
|
+
const [hidden, setHidden] = React36__default.useState(() => /* @__PURE__ */ new Set());
|
|
5439
|
+
const [showRowNum, setShowRowNum] = React36__default.useState(rowNumbers);
|
|
5440
|
+
const [wrapped, setWrapped] = React36__default.useState(() => new Set((columns || []).filter((c) => c.wrapText).map((c) => c.field)));
|
|
5438
5441
|
const toggleWrap = (field) => setWrapped((w) => {
|
|
5439
5442
|
const n = new Set(w);
|
|
5440
5443
|
n.has(field) ? n.delete(field) : n.add(field);
|
|
5441
5444
|
return n;
|
|
5442
5445
|
});
|
|
5443
|
-
const [pins, setPins] =
|
|
5446
|
+
const [pins, setPins] = React36__default.useState(() => {
|
|
5444
5447
|
const left = [], right = [];
|
|
5445
5448
|
columns.forEach((c) => {
|
|
5446
5449
|
if (c.pinned === "left") left.push(c.field);
|
|
@@ -5448,13 +5451,13 @@ function Datatable({
|
|
|
5448
5451
|
});
|
|
5449
5452
|
return { left, right };
|
|
5450
5453
|
});
|
|
5451
|
-
const [density, setDensity] =
|
|
5452
|
-
const [quick, setQuick] =
|
|
5453
|
-
const [selected, setSelected] =
|
|
5454
|
-
const [activeRow, setActiveRow] =
|
|
5455
|
-
const [activeCell, setActiveCell] =
|
|
5456
|
-
const [internalPage, setInternalPage] =
|
|
5457
|
-
const [internalRpp, setInternalRpp] =
|
|
5454
|
+
const [density, setDensity] = React36__default.useState(densityProp);
|
|
5455
|
+
const [quick, setQuick] = React36__default.useState("");
|
|
5456
|
+
const [selected, setSelected] = React36__default.useState(() => /* @__PURE__ */ new Set());
|
|
5457
|
+
const [activeRow, setActiveRow] = React36__default.useState(null);
|
|
5458
|
+
const [activeCell, setActiveCell] = React36__default.useState(null);
|
|
5459
|
+
const [internalPage, setInternalPage] = React36__default.useState(0);
|
|
5460
|
+
const [internalRpp, setInternalRpp] = React36__default.useState(pageSize > 0 ? pageSize : 10);
|
|
5458
5461
|
const pageControlled = page !== void 0;
|
|
5459
5462
|
const pageSizeControlled = onPageSizeChange !== void 0;
|
|
5460
5463
|
const pageVal = pageControlled ? page : internalPage;
|
|
@@ -5468,27 +5471,27 @@ function Datatable({
|
|
|
5468
5471
|
if (!pageSizeControlled) setInternalRpp(next);
|
|
5469
5472
|
commitPage(0);
|
|
5470
5473
|
};
|
|
5471
|
-
const [colQuery, setColQuery] =
|
|
5472
|
-
const [widths, setWidths] =
|
|
5473
|
-
const [order, setOrder] =
|
|
5474
|
-
const [drag, setDrag] =
|
|
5475
|
-
const [aggOn, setAggOn] =
|
|
5476
|
-
const [focus, setFocus] =
|
|
5477
|
-
const gridRef =
|
|
5478
|
-
const [groupBy, setGroupBy] =
|
|
5479
|
-
const [collapsed, setCollapsed] =
|
|
5480
|
-
const [pinnedRows, setPinnedRows] =
|
|
5481
|
-
const [headH, setHeadH] =
|
|
5482
|
-
const theadRef =
|
|
5483
|
-
const [rowOrder, setRowOrder] =
|
|
5484
|
-
const [rowHeights, setRowHeights] =
|
|
5485
|
-
const [rowDrag, setRowDrag] =
|
|
5486
|
-
const [rowGrab, setRowGrab] =
|
|
5487
|
-
const [reorderMsg, setReorderMsg] =
|
|
5488
|
-
const rowFocusRef =
|
|
5489
|
-
const rootRef =
|
|
5490
|
-
const [compact, setCompact] =
|
|
5491
|
-
|
|
5474
|
+
const [colQuery, setColQuery] = React36__default.useState("");
|
|
5475
|
+
const [widths, setWidths] = React36__default.useState({});
|
|
5476
|
+
const [order, setOrder] = React36__default.useState(() => columns.map((c) => c.field));
|
|
5477
|
+
const [drag, setDrag] = React36__default.useState({ from: null, over: null, after: false });
|
|
5478
|
+
const [aggOn, setAggOn] = React36__default.useState(showAggregation);
|
|
5479
|
+
const [focus, setFocus] = React36__default.useState({ r: 0, c: 0 });
|
|
5480
|
+
const gridRef = React36__default.useRef(null);
|
|
5481
|
+
const [groupBy, setGroupBy] = React36__default.useState(rowGrouping || []);
|
|
5482
|
+
const [collapsed, setCollapsed] = React36__default.useState(() => /* @__PURE__ */ new Set());
|
|
5483
|
+
const [pinnedRows, setPinnedRows] = React36__default.useState({ top: [], bottom: [] });
|
|
5484
|
+
const [headH, setHeadH] = React36__default.useState(41);
|
|
5485
|
+
const theadRef = React36__default.useRef(null);
|
|
5486
|
+
const [rowOrder, setRowOrder] = React36__default.useState(null);
|
|
5487
|
+
const [rowHeights, setRowHeights] = React36__default.useState({});
|
|
5488
|
+
const [rowDrag, setRowDrag] = React36__default.useState({ from: null, over: null, after: false });
|
|
5489
|
+
const [rowGrab, setRowGrab] = React36__default.useState(null);
|
|
5490
|
+
const [reorderMsg, setReorderMsg] = React36__default.useState("");
|
|
5491
|
+
const rowFocusRef = React36__default.useRef(null);
|
|
5492
|
+
const rootRef = React36__default.useRef(null);
|
|
5493
|
+
const [compact, setCompact] = React36__default.useState(false);
|
|
5494
|
+
React36__default.useEffect(() => {
|
|
5492
5495
|
const el = rootRef.current;
|
|
5493
5496
|
if (!el) return void 0;
|
|
5494
5497
|
const measure = () => setCompact((el.clientWidth || 0) < 720);
|
|
@@ -5501,11 +5504,11 @@ function Datatable({
|
|
|
5501
5504
|
else if (typeof window !== "undefined") window.removeEventListener("resize", measure);
|
|
5502
5505
|
};
|
|
5503
5506
|
}, []);
|
|
5504
|
-
const scrollRef =
|
|
5505
|
-
const [scrollTop, setScrollTop] =
|
|
5506
|
-
const [viewportH, setViewportH] =
|
|
5507
|
-
const [pivotOn, setPivotOn] =
|
|
5508
|
-
const [aggConfig, setAggConfig] =
|
|
5507
|
+
const scrollRef = React36__default.useRef(null);
|
|
5508
|
+
const [scrollTop, setScrollTop] = React36__default.useState(0);
|
|
5509
|
+
const [viewportH, setViewportH] = React36__default.useState(0);
|
|
5510
|
+
const [pivotOn, setPivotOn] = React36__default.useState(pivotMode);
|
|
5511
|
+
const [aggConfig, setAggConfig] = React36__default.useState(() => {
|
|
5509
5512
|
const m = {};
|
|
5510
5513
|
(columns || []).forEach((c) => {
|
|
5511
5514
|
if (typeof c.aggregation === "string") m[c.field] = c.aggregation;
|
|
@@ -5513,13 +5516,13 @@ function Datatable({
|
|
|
5513
5516
|
return m;
|
|
5514
5517
|
});
|
|
5515
5518
|
const aggOf = (c) => aggConfig[c.field] || (typeof c.aggregation === "function" ? c.aggregation : null);
|
|
5516
|
-
const [pivotConfig, setPivotConfig] =
|
|
5519
|
+
const [pivotConfig, setPivotConfig] = React36__default.useState(() => ({
|
|
5517
5520
|
rows: pivot && pivot.rows || [],
|
|
5518
5521
|
columns: pivot && pivot.columns || [],
|
|
5519
5522
|
values: pivot && pivot.values || []
|
|
5520
5523
|
}));
|
|
5521
5524
|
const pivotActive = pivotOn && pivotConfig.rows.length > 0 && pivotConfig.values.length > 0;
|
|
5522
|
-
|
|
5525
|
+
React36__default.useEffect(() => {
|
|
5523
5526
|
setOrder((prev) => {
|
|
5524
5527
|
const fields = columns.map((c) => c.field);
|
|
5525
5528
|
const kept = prev.filter((f) => fields.includes(f));
|
|
@@ -5527,37 +5530,37 @@ function Datatable({
|
|
|
5527
5530
|
return [...kept, ...added];
|
|
5528
5531
|
});
|
|
5529
5532
|
}, [columns]);
|
|
5530
|
-
|
|
5533
|
+
React36__default.useEffect(() => {
|
|
5531
5534
|
setDensity(densityProp);
|
|
5532
5535
|
}, [densityProp]);
|
|
5533
|
-
|
|
5536
|
+
React36__default.useEffect(() => {
|
|
5534
5537
|
setAggOn(showAggregation);
|
|
5535
5538
|
}, [showAggregation]);
|
|
5536
|
-
|
|
5539
|
+
React36__default.useEffect(() => {
|
|
5537
5540
|
if (pageSizeControlled) return;
|
|
5538
5541
|
setInternalRpp(pageSize > 0 ? pageSize : 10);
|
|
5539
5542
|
setInternalPage(0);
|
|
5540
5543
|
}, [pageSize]);
|
|
5541
5544
|
const rowGroupingKey = (rowGrouping || []).join("\0");
|
|
5542
|
-
const rowGroupingKeyRef =
|
|
5543
|
-
|
|
5545
|
+
const rowGroupingKeyRef = React36__default.useRef(rowGroupingKey);
|
|
5546
|
+
React36__default.useEffect(() => {
|
|
5544
5547
|
if (rowGroupingKeyRef.current === rowGroupingKey) return;
|
|
5545
5548
|
rowGroupingKeyRef.current = rowGroupingKey;
|
|
5546
5549
|
setGroupBy(rowGrouping || []);
|
|
5547
5550
|
}, [rowGroupingKey]);
|
|
5548
5551
|
const widthOf = (c) => widths[c.field] ?? c.width ?? 160;
|
|
5549
|
-
const [colMenu, setColMenu] =
|
|
5552
|
+
const [colMenu, setColMenu] = React36__default.useState(null);
|
|
5550
5553
|
const [menuPos, openMenu, closeMenu] = useFloating();
|
|
5551
|
-
const [panel, setPanel] =
|
|
5554
|
+
const [panel, setPanel] = React36__default.useState(null);
|
|
5552
5555
|
const [panelPos, openPanel, closePanel] = useFloating();
|
|
5553
|
-
const [rowMenu, setRowMenu] =
|
|
5556
|
+
const [rowMenu, setRowMenu] = React36__default.useState(null);
|
|
5554
5557
|
const [rowMenuPos, openRowMenu, closeRowMenu] = useFloating();
|
|
5555
|
-
const [exportOpen, setExportOpen] =
|
|
5558
|
+
const [exportOpen, setExportOpen] = React36__default.useState(false);
|
|
5556
5559
|
const [exportPos, openExport, closeExport] = useFloating();
|
|
5557
|
-
const menuTriggerRef =
|
|
5558
|
-
const colMenuRef =
|
|
5559
|
-
const rowMenuRef =
|
|
5560
|
-
const exportMenuRef =
|
|
5560
|
+
const menuTriggerRef = React36__default.useRef(null);
|
|
5561
|
+
const colMenuRef = React36__default.useRef(null);
|
|
5562
|
+
const rowMenuRef = React36__default.useRef(null);
|
|
5563
|
+
const exportMenuRef = React36__default.useRef(null);
|
|
5561
5564
|
function focusFirstItem(container) {
|
|
5562
5565
|
if (!container) return;
|
|
5563
5566
|
const first = container.querySelector('[role="menuitem"]:not([disabled])');
|
|
@@ -5596,16 +5599,16 @@ function Datatable({
|
|
|
5596
5599
|
restoreTriggerFocus();
|
|
5597
5600
|
}
|
|
5598
5601
|
}
|
|
5599
|
-
|
|
5602
|
+
React36__default.useEffect(() => {
|
|
5600
5603
|
if (colMenu) focusFirstItem(colMenuRef.current);
|
|
5601
5604
|
}, [colMenu]);
|
|
5602
|
-
|
|
5605
|
+
React36__default.useEffect(() => {
|
|
5603
5606
|
if (rowMenu) focusFirstItem(rowMenuRef.current);
|
|
5604
5607
|
}, [rowMenu]);
|
|
5605
|
-
|
|
5608
|
+
React36__default.useEffect(() => {
|
|
5606
5609
|
if (exportOpen) focusFirstItem(exportMenuRef.current);
|
|
5607
5610
|
}, [exportOpen]);
|
|
5608
|
-
|
|
5611
|
+
React36__default.useEffect(() => {
|
|
5609
5612
|
if (!colMenu && !panel && !rowMenu) return;
|
|
5610
5613
|
const closeAll = () => {
|
|
5611
5614
|
setColMenu(null);
|
|
@@ -5628,7 +5631,7 @@ function Datatable({
|
|
|
5628
5631
|
document.removeEventListener("keydown", onKey);
|
|
5629
5632
|
};
|
|
5630
5633
|
}, [colMenu, panel, rowMenu]);
|
|
5631
|
-
|
|
5634
|
+
React36__default.useEffect(() => {
|
|
5632
5635
|
if (!exportOpen) return;
|
|
5633
5636
|
const close = () => {
|
|
5634
5637
|
setExportOpen(false);
|
|
@@ -5647,9 +5650,9 @@ function Datatable({
|
|
|
5647
5650
|
document.removeEventListener("keydown", onKey);
|
|
5648
5651
|
};
|
|
5649
5652
|
}, [exportOpen]);
|
|
5650
|
-
const colByField =
|
|
5653
|
+
const colByField = React36__default.useMemo(() => Object.fromEntries(cols.map((c) => [c.field, c])), [cols]);
|
|
5651
5654
|
const visibleCols = cols.filter((c) => !hidden.has(c.field));
|
|
5652
|
-
const ordered =
|
|
5655
|
+
const ordered = React36__default.useMemo(() => {
|
|
5653
5656
|
const orderIdx = (f) => {
|
|
5654
5657
|
const i = order.indexOf(f);
|
|
5655
5658
|
return i === -1 ? 9999 : i;
|
|
@@ -5684,7 +5687,7 @@ function Datatable({
|
|
|
5684
5687
|
}
|
|
5685
5688
|
return {};
|
|
5686
5689
|
};
|
|
5687
|
-
const processed =
|
|
5690
|
+
const processed = React36__default.useMemo(() => {
|
|
5688
5691
|
if (serverMode) {
|
|
5689
5692
|
if (rowOrder) {
|
|
5690
5693
|
const idx = new Map(rowOrder.map((k, i) => [k, i]));
|
|
@@ -5723,10 +5726,10 @@ function Datatable({
|
|
|
5723
5726
|
const totalRows = serverMode ? serverTotal : processed.length;
|
|
5724
5727
|
const totalPages = paginated ? Math.max(1, Math.ceil(totalRows / sizeVal)) : 1;
|
|
5725
5728
|
const paged = !paginated || serverMode ? processed : processed.slice(pageVal * sizeVal, pageVal * sizeVal + sizeVal);
|
|
5726
|
-
|
|
5729
|
+
React36__default.useEffect(() => {
|
|
5727
5730
|
if (pageVal > totalPages - 1) commitPage(0);
|
|
5728
5731
|
}, [totalPages]);
|
|
5729
|
-
const activeGroupBy =
|
|
5732
|
+
const activeGroupBy = React36__default.useMemo(() => groupBy.filter((f) => colByField[f]), [groupBy, colByField]);
|
|
5730
5733
|
function subtotalText(rowsIn) {
|
|
5731
5734
|
const parts = [];
|
|
5732
5735
|
for (const c of ordered) {
|
|
@@ -5753,7 +5756,7 @@ function Datatable({
|
|
|
5753
5756
|
if (agg === "max") return Math.max(...nums);
|
|
5754
5757
|
return null;
|
|
5755
5758
|
}
|
|
5756
|
-
const displayItems =
|
|
5759
|
+
const displayItems = React36__default.useMemo(() => {
|
|
5757
5760
|
if (!activeGroupBy.length) return null;
|
|
5758
5761
|
const build = (rowsIn, depth, prefix) => {
|
|
5759
5762
|
if (depth >= activeGroupBy.length) return rowsIn.map((row) => ({ kind: "leaf", row }));
|
|
@@ -5795,7 +5798,7 @@ function Datatable({
|
|
|
5795
5798
|
return { top, bottom };
|
|
5796
5799
|
});
|
|
5797
5800
|
}
|
|
5798
|
-
|
|
5801
|
+
React36__default.useEffect(() => {
|
|
5799
5802
|
if (!rowPinning) return;
|
|
5800
5803
|
const measure = () => {
|
|
5801
5804
|
if (theadRef.current) setHeadH(theadRef.current.offsetHeight || 41);
|
|
@@ -5809,12 +5812,12 @@ function Datatable({
|
|
|
5809
5812
|
const pinnedTopRows = canPinRows ? pinnedRows.top.map((k) => leafRows.find((r, i) => keyOf(r, i) === k)).filter(Boolean) : [];
|
|
5810
5813
|
const pinnedBottomRows = canPinRows ? pinnedRows.bottom.map((k) => leafRows.find((r, i) => keyOf(r, i) === k)).filter(Boolean) : [];
|
|
5811
5814
|
const middleRows = canPinRows ? leafRows.filter((r, i) => !pinSideOf(keyOf(r, i))) : leafRows;
|
|
5812
|
-
const keyIndex =
|
|
5815
|
+
const keyIndex = React36__default.useMemo(() => {
|
|
5813
5816
|
const m = /* @__PURE__ */ new Map();
|
|
5814
5817
|
leafRows.forEach((r, i) => m.set(keyOf(r, i), i));
|
|
5815
5818
|
return m;
|
|
5816
5819
|
}, [leafRows]);
|
|
5817
|
-
const keyIndexMid =
|
|
5820
|
+
const keyIndexMid = React36__default.useMemo(() => {
|
|
5818
5821
|
const m = /* @__PURE__ */ new Map();
|
|
5819
5822
|
middleRows.forEach((r, i) => m.set(keyOf(r, keyIndex.get(keyOf(r)) ?? i), i));
|
|
5820
5823
|
return m;
|
|
@@ -5899,7 +5902,7 @@ function Datatable({
|
|
|
5899
5902
|
setReorderMsg("Reorder cancelled.");
|
|
5900
5903
|
}
|
|
5901
5904
|
}
|
|
5902
|
-
|
|
5905
|
+
React36__default.useEffect(() => {
|
|
5903
5906
|
if (rowFocusRef.current == null) return;
|
|
5904
5907
|
const key = rowFocusRef.current;
|
|
5905
5908
|
rowFocusRef.current = null;
|
|
@@ -5911,7 +5914,7 @@ function Datatable({
|
|
|
5911
5914
|
});
|
|
5912
5915
|
const estRowH = rowHeight ?? (density === "compact" ? 36 : density === "comfortable" ? 56 : 44);
|
|
5913
5916
|
const virtualizing = virtualized && !paginated && !activeGroupBy.length && !loading;
|
|
5914
|
-
|
|
5917
|
+
React36__default.useEffect(() => {
|
|
5915
5918
|
if (!virtualizing) return;
|
|
5916
5919
|
const el = scrollRef.current;
|
|
5917
5920
|
if (!el) return;
|
|
@@ -5921,13 +5924,13 @@ function Datatable({
|
|
|
5921
5924
|
if (ro) ro.observe(el);
|
|
5922
5925
|
return () => ro && ro.disconnect();
|
|
5923
5926
|
}, [virtualizing, height]);
|
|
5924
|
-
const onScrollVirtual =
|
|
5927
|
+
const onScrollVirtual = React36__default.useCallback((e) => {
|
|
5925
5928
|
setScrollTop(e.currentTarget.scrollTop);
|
|
5926
5929
|
}, []);
|
|
5927
5930
|
const vh = viewportH || (typeof height === "number" ? height : 440);
|
|
5928
|
-
const rowHRef =
|
|
5929
|
-
const [measureTick, setMeasureTick] =
|
|
5930
|
-
const offsets =
|
|
5931
|
+
const rowHRef = React36__default.useRef(/* @__PURE__ */ new Map());
|
|
5932
|
+
const [measureTick, setMeasureTick] = React36__default.useState(0);
|
|
5933
|
+
const offsets = React36__default.useMemo(() => {
|
|
5931
5934
|
if (!virtualizing) return null;
|
|
5932
5935
|
const total = middleRows.length;
|
|
5933
5936
|
const arr = new Float64Array(total + 1);
|
|
@@ -5937,7 +5940,7 @@ function Datatable({
|
|
|
5937
5940
|
}
|
|
5938
5941
|
return arr;
|
|
5939
5942
|
}, [virtualizing, middleRows, estRowH, measureTick]);
|
|
5940
|
-
const vWindow =
|
|
5943
|
+
const vWindow = React36__default.useMemo(() => {
|
|
5941
5944
|
if (!virtualizing || !offsets) return null;
|
|
5942
5945
|
const total = middleRows.length;
|
|
5943
5946
|
const totalH = offsets[total];
|
|
@@ -5966,7 +5969,7 @@ function Datatable({
|
|
|
5966
5969
|
if (start > end) start = end;
|
|
5967
5970
|
return { start, end, padTop: offsets[start], padBottom: Math.max(0, totalH - offsets[end]) };
|
|
5968
5971
|
}, [virtualizing, offsets, middleRows.length, vh, scrollTop, overscan]);
|
|
5969
|
-
|
|
5972
|
+
React36__default.useLayoutEffect(() => {
|
|
5970
5973
|
if (!virtualizing) return;
|
|
5971
5974
|
const el = scrollRef.current;
|
|
5972
5975
|
if (!el) return;
|
|
@@ -5981,9 +5984,9 @@ function Datatable({
|
|
|
5981
5984
|
}
|
|
5982
5985
|
if (changed) setMeasureTick((t) => t + 1);
|
|
5983
5986
|
});
|
|
5984
|
-
const onServerChangeRef =
|
|
5987
|
+
const onServerChangeRef = React36__default.useRef(onServerChange);
|
|
5985
5988
|
onServerChangeRef.current = onServerChange;
|
|
5986
|
-
|
|
5989
|
+
React36__default.useEffect(() => {
|
|
5987
5990
|
if (!serverMode) return;
|
|
5988
5991
|
const t = setTimeout(() => {
|
|
5989
5992
|
onServerChangeRef.current?.({
|
|
@@ -6018,7 +6021,7 @@ function Datatable({
|
|
|
6018
6021
|
return n;
|
|
6019
6022
|
});
|
|
6020
6023
|
}
|
|
6021
|
-
const movableMidFields =
|
|
6024
|
+
const movableMidFields = React36__default.useMemo(
|
|
6022
6025
|
() => ordered.filter((c) => !pins.left.includes(c.field) && !pins.right.includes(c.field) && c.reorderable !== false).map((c) => c.field),
|
|
6023
6026
|
[ordered, pins]
|
|
6024
6027
|
);
|
|
@@ -6049,7 +6052,7 @@ function Datatable({
|
|
|
6049
6052
|
}
|
|
6050
6053
|
return [...set].sort((a, b) => a.localeCompare(b)).map((v) => ({ value: v, label: v }));
|
|
6051
6054
|
}
|
|
6052
|
-
const [resizing, setResizing] =
|
|
6055
|
+
const [resizing, setResizing] = React36__default.useState(false);
|
|
6053
6056
|
function startResize(e, field) {
|
|
6054
6057
|
e.preventDefault();
|
|
6055
6058
|
e.stopPropagation();
|
|
@@ -6156,7 +6159,7 @@ function Datatable({
|
|
|
6156
6159
|
if (!agg) return null;
|
|
6157
6160
|
if (aggregationValues && col.field in aggregationValues) {
|
|
6158
6161
|
const pre = aggregationValues[col.field];
|
|
6159
|
-
if (pre && typeof pre === "object" && !
|
|
6162
|
+
if (pre && typeof pre === "object" && !React36__default.isValidElement(pre)) {
|
|
6160
6163
|
if (typeof agg === "string" && agg in pre) return pre[agg];
|
|
6161
6164
|
} else {
|
|
6162
6165
|
return pre;
|
|
@@ -6274,14 +6277,14 @@ function Datatable({
|
|
|
6274
6277
|
focusCell(r, c);
|
|
6275
6278
|
}
|
|
6276
6279
|
}
|
|
6277
|
-
|
|
6280
|
+
React36__default.useEffect(() => {
|
|
6278
6281
|
setFocus((f) => ({ r: Math.min(f.r, Math.max(0, leafRows.length - 1)), c: Math.min(f.c, Math.max(0, ordered.length - 1)) }));
|
|
6279
6282
|
}, [leafRows.length, ordered.length, pageVal]);
|
|
6280
|
-
const selectedRows =
|
|
6283
|
+
const selectedRows = React36__default.useMemo(() => rows.filter((r, i) => selected.has(keyOf(r, i))), [rows, selected]);
|
|
6281
6284
|
function clearSelection() {
|
|
6282
6285
|
setSelected(/* @__PURE__ */ new Set());
|
|
6283
6286
|
}
|
|
6284
|
-
const [editing, setEditing] =
|
|
6287
|
+
const [editing, setEditing] = React36__default.useState(null);
|
|
6285
6288
|
const isColEditable = (c) => c.type !== "actions" && (c.editable ?? (editMode && c.editable !== false));
|
|
6286
6289
|
function beginEdit(rowK, col, row) {
|
|
6287
6290
|
if (!isColEditable(col)) return;
|
|
@@ -6316,17 +6319,17 @@ function Datatable({
|
|
|
6316
6319
|
cancelEdit();
|
|
6317
6320
|
}
|
|
6318
6321
|
}
|
|
6319
|
-
const batchEditableCols =
|
|
6322
|
+
const batchEditableCols = React36__default.useMemo(
|
|
6320
6323
|
() => cols.filter((c) => c.type !== "actions" && (c.editable ?? (editMode && c.editable !== false))),
|
|
6321
6324
|
[cols, editMode]
|
|
6322
6325
|
);
|
|
6323
|
-
const [batchEdit, setBatchEdit] =
|
|
6326
|
+
const [batchEdit, setBatchEdit] = React36__default.useState(null);
|
|
6324
6327
|
const [batchEditPos, openBatchEdit, closeBatchEdit] = useFloating();
|
|
6325
6328
|
function openBatchEditor(el) {
|
|
6326
6329
|
setBatchEdit({ fields: {}, values: {} });
|
|
6327
6330
|
openBatchEdit(el, "left", 320);
|
|
6328
6331
|
}
|
|
6329
|
-
|
|
6332
|
+
React36__default.useEffect(() => {
|
|
6330
6333
|
if (!batchEdit) return;
|
|
6331
6334
|
const close = () => {
|
|
6332
6335
|
setBatchEdit(null);
|
|
@@ -6345,7 +6348,7 @@ function Datatable({
|
|
|
6345
6348
|
document.removeEventListener("keydown", onKey);
|
|
6346
6349
|
};
|
|
6347
6350
|
}, [batchEdit]);
|
|
6348
|
-
|
|
6351
|
+
React36__default.useEffect(() => {
|
|
6349
6352
|
if (batchEdit && selected.size === 0) {
|
|
6350
6353
|
setBatchEdit(null);
|
|
6351
6354
|
closeBatchEdit();
|
|
@@ -6382,7 +6385,7 @@ function Datatable({
|
|
|
6382
6385
|
setBatchEdit(null);
|
|
6383
6386
|
closeBatchEdit();
|
|
6384
6387
|
}
|
|
6385
|
-
|
|
6388
|
+
React36__default.useEffect(() => {
|
|
6386
6389
|
if (!editing) return;
|
|
6387
6390
|
const onDown = (e) => {
|
|
6388
6391
|
if (e.target.closest(".twc-dt__editor-wrap") || e.target.closest(".twc-pop")) return;
|
|
@@ -7916,25 +7919,25 @@ function DatePicker({
|
|
|
7916
7919
|
}) {
|
|
7917
7920
|
const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS3);
|
|
7918
7921
|
const __twcStyles1 = useScopedStyles("twc-datepicker-styles", DATEPICKER_CSS);
|
|
7919
|
-
const autoId =
|
|
7922
|
+
const autoId = React36__default.useId();
|
|
7920
7923
|
const fieldId = id || autoId;
|
|
7921
7924
|
const descId = `${fieldId}-desc`;
|
|
7922
7925
|
const invalid = Boolean(error);
|
|
7923
|
-
const [internal, setInternal] =
|
|
7926
|
+
const [internal, setInternal] = React36__default.useState(defaultValue);
|
|
7924
7927
|
const selected = value !== void 0 ? value : internal;
|
|
7925
|
-
const [open, setOpen] =
|
|
7926
|
-
const [view, setView] =
|
|
7927
|
-
const [mode, setMode] =
|
|
7928
|
-
const [focusDate, setFocusDate] =
|
|
7929
|
-
const [focusMonth, setFocusMonth] =
|
|
7930
|
-
const [editText, setEditText] =
|
|
7931
|
-
const [coords, setCoords] =
|
|
7932
|
-
const wrapRef =
|
|
7933
|
-
const triggerRef =
|
|
7934
|
-
const popRef =
|
|
7935
|
-
const gridRef =
|
|
7928
|
+
const [open, setOpen] = React36__default.useState(false);
|
|
7929
|
+
const [view, setView] = React36__default.useState(selected || /* @__PURE__ */ new Date());
|
|
7930
|
+
const [mode, setMode] = React36__default.useState("days");
|
|
7931
|
+
const [focusDate, setFocusDate] = React36__default.useState(null);
|
|
7932
|
+
const [focusMonth, setFocusMonth] = React36__default.useState(null);
|
|
7933
|
+
const [editText, setEditText] = React36__default.useState(null);
|
|
7934
|
+
const [coords, setCoords] = React36__default.useState(null);
|
|
7935
|
+
const wrapRef = React36__default.useRef(null);
|
|
7936
|
+
const triggerRef = React36__default.useRef(null);
|
|
7937
|
+
const popRef = React36__default.useRef(null);
|
|
7938
|
+
const gridRef = React36__default.useRef(null);
|
|
7936
7939
|
const POP_W = 280;
|
|
7937
|
-
const place =
|
|
7940
|
+
const place = React36__default.useCallback(() => {
|
|
7938
7941
|
const el = triggerRef.current;
|
|
7939
7942
|
if (!el) return;
|
|
7940
7943
|
const r = el.getBoundingClientRect();
|
|
@@ -7945,7 +7948,7 @@ function DatePicker({
|
|
|
7945
7948
|
left = Math.max(8, left);
|
|
7946
7949
|
setCoords({ left, top: flip ? void 0 : Math.round(r.bottom + 6), bottom: flip ? Math.round(vh - r.top + 6) : void 0 });
|
|
7947
7950
|
}, []);
|
|
7948
|
-
|
|
7951
|
+
React36__default.useEffect(() => {
|
|
7949
7952
|
if (!open) return void 0;
|
|
7950
7953
|
place();
|
|
7951
7954
|
const onMove = () => place();
|
|
@@ -7956,7 +7959,7 @@ function DatePicker({
|
|
|
7956
7959
|
window.removeEventListener("resize", onMove);
|
|
7957
7960
|
};
|
|
7958
7961
|
}, [open, place]);
|
|
7959
|
-
|
|
7962
|
+
React36__default.useEffect(() => {
|
|
7960
7963
|
if (!open) return;
|
|
7961
7964
|
setView(selected || /* @__PURE__ */ new Date());
|
|
7962
7965
|
setMode("days");
|
|
@@ -7977,9 +7980,9 @@ function DatePicker({
|
|
|
7977
7980
|
};
|
|
7978
7981
|
}, [open]);
|
|
7979
7982
|
useFocusTrap(popRef, open && !!coords, { initialFocus: () => gridRef.current?.querySelector('[tabindex="0"]') });
|
|
7980
|
-
const months =
|
|
7981
|
-
const monthsShort =
|
|
7982
|
-
const dows =
|
|
7983
|
+
const months = React36__default.useMemo(() => locale === void 0 ? MONTHS : monthNames(locale), [locale]);
|
|
7984
|
+
const monthsShort = React36__default.useMemo(() => locale === void 0 ? MONTHS.map((n) => n.slice(0, 3)) : monthShortNames(locale), [locale]);
|
|
7985
|
+
const dows = React36__default.useMemo(
|
|
7983
7986
|
() => locale === void 0 ? Array.from({ length: 7 }, (_, i) => DOW[(i + weekStartsOn) % 7]) : weekdayNames(locale, weekStartsOn),
|
|
7984
7987
|
[locale, weekStartsOn]
|
|
7985
7988
|
);
|
|
@@ -8032,11 +8035,11 @@ function DatePicker({
|
|
|
8032
8035
|
};
|
|
8033
8036
|
const cells = Array.from({ length: 42 }, (_, i) => new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + i));
|
|
8034
8037
|
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);
|
|
8035
|
-
|
|
8038
|
+
React36__default.useEffect(() => {
|
|
8036
8039
|
if (!open || mode !== "days" || !focusDate) return;
|
|
8037
8040
|
gridRef.current?.querySelector(`[data-key="${keyOf(focusDate)}"]`)?.focus();
|
|
8038
8041
|
}, [focusDate, open, mode]);
|
|
8039
|
-
|
|
8042
|
+
React36__default.useEffect(() => {
|
|
8040
8043
|
if (!open || mode !== "months" || focusMonth == null) return;
|
|
8041
8044
|
gridRef.current?.querySelector(`[data-mo="${focusMonth}"]`)?.focus();
|
|
8042
8045
|
}, [focusMonth, open, mode]);
|
|
@@ -8379,26 +8382,26 @@ function DateRangePicker({
|
|
|
8379
8382
|
}) {
|
|
8380
8383
|
const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS4);
|
|
8381
8384
|
const __twcStyles1 = useScopedStyles("twc-drp-styles", RANGE_CSS);
|
|
8382
|
-
const [internal, setInternal] =
|
|
8385
|
+
const [internal, setInternal] = React36__default.useState(defaultValue);
|
|
8383
8386
|
const range = value !== void 0 ? value : internal;
|
|
8384
|
-
const [open, setOpen] =
|
|
8385
|
-
const [view, setView] =
|
|
8386
|
-
const [hover, setHover] =
|
|
8387
|
-
const [focusDate, setFocusDate] =
|
|
8388
|
-
const [editText, setEditText] =
|
|
8389
|
-
const [coords, setCoords] =
|
|
8390
|
-
const wrapRef =
|
|
8391
|
-
const triggerRef =
|
|
8392
|
-
const popRef =
|
|
8393
|
-
const gridRef =
|
|
8394
|
-
const labelId =
|
|
8387
|
+
const [open, setOpen] = React36__default.useState(false);
|
|
8388
|
+
const [view, setView] = React36__default.useState(range.start || /* @__PURE__ */ new Date());
|
|
8389
|
+
const [hover, setHover] = React36__default.useState(null);
|
|
8390
|
+
const [focusDate, setFocusDate] = React36__default.useState(null);
|
|
8391
|
+
const [editText, setEditText] = React36__default.useState(null);
|
|
8392
|
+
const [coords, setCoords] = React36__default.useState(null);
|
|
8393
|
+
const wrapRef = React36__default.useRef(null);
|
|
8394
|
+
const triggerRef = React36__default.useRef(null);
|
|
8395
|
+
const popRef = React36__default.useRef(null);
|
|
8396
|
+
const gridRef = React36__default.useRef(null);
|
|
8397
|
+
const labelId = React36__default.useId();
|
|
8395
8398
|
const descId = `${labelId}-desc`;
|
|
8396
8399
|
const invalid = Boolean(error);
|
|
8397
|
-
|
|
8400
|
+
React36__default.useEffect(() => {
|
|
8398
8401
|
if (disabled) setOpen(false);
|
|
8399
8402
|
}, [disabled]);
|
|
8400
8403
|
const POP_W = 420;
|
|
8401
|
-
const place =
|
|
8404
|
+
const place = React36__default.useCallback(() => {
|
|
8402
8405
|
const el = triggerRef.current;
|
|
8403
8406
|
if (!el) return;
|
|
8404
8407
|
const r = el.getBoundingClientRect();
|
|
@@ -8409,7 +8412,7 @@ function DateRangePicker({
|
|
|
8409
8412
|
left = Math.max(8, left);
|
|
8410
8413
|
setCoords({ left, top: flip ? void 0 : Math.round(r.bottom + 6), bottom: flip ? Math.round(vh - r.top + 6) : void 0 });
|
|
8411
8414
|
}, []);
|
|
8412
|
-
|
|
8415
|
+
React36__default.useEffect(() => {
|
|
8413
8416
|
if (!open) return void 0;
|
|
8414
8417
|
place();
|
|
8415
8418
|
const onMove = () => place();
|
|
@@ -8420,7 +8423,7 @@ function DateRangePicker({
|
|
|
8420
8423
|
window.removeEventListener("resize", onMove);
|
|
8421
8424
|
};
|
|
8422
8425
|
}, [open, place]);
|
|
8423
|
-
|
|
8426
|
+
React36__default.useEffect(() => {
|
|
8424
8427
|
if (!open) return;
|
|
8425
8428
|
const onDown = (e) => {
|
|
8426
8429
|
if (wrapRef.current && wrapRef.current.contains(e.target)) return;
|
|
@@ -8484,13 +8487,13 @@ function DateRangePicker({
|
|
|
8484
8487
|
const last = new Date(d.getFullYear(), d.getMonth() + n + 1, 0);
|
|
8485
8488
|
return new Date(last.getFullYear(), last.getMonth(), Math.min(d.getDate(), last.getDate()));
|
|
8486
8489
|
};
|
|
8487
|
-
|
|
8490
|
+
React36__default.useEffect(() => {
|
|
8488
8491
|
if (!open) {
|
|
8489
8492
|
setFocusDate(null);
|
|
8490
8493
|
setHover(null);
|
|
8491
8494
|
}
|
|
8492
8495
|
}, [open]);
|
|
8493
|
-
|
|
8496
|
+
React36__default.useEffect(() => {
|
|
8494
8497
|
if (!open || !focusDate) return;
|
|
8495
8498
|
gridRef.current?.querySelector(`[data-key="${keyOf(focusDate)}"]`)?.focus();
|
|
8496
8499
|
}, [focusDate, open]);
|
|
@@ -8539,8 +8542,8 @@ function DateRangePicker({
|
|
|
8539
8542
|
setView(start);
|
|
8540
8543
|
setOpen(false);
|
|
8541
8544
|
};
|
|
8542
|
-
const months =
|
|
8543
|
-
const dows =
|
|
8545
|
+
const months = React36__default.useMemo(() => locale === void 0 ? MONTHS2 : monthNames2(locale), [locale]);
|
|
8546
|
+
const dows = React36__default.useMemo(
|
|
8544
8547
|
() => locale === void 0 ? Array.from({ length: 7 }, (_, i) => DOW2[(i + weekStartsOn) % 7]) : weekdayNames2(locale, weekStartsOn),
|
|
8545
8548
|
[locale, weekStartsOn]
|
|
8546
8549
|
);
|
|
@@ -8780,14 +8783,14 @@ function Dialog({
|
|
|
8780
8783
|
className = "",
|
|
8781
8784
|
...rest
|
|
8782
8785
|
}) {
|
|
8783
|
-
const autoId =
|
|
8786
|
+
const autoId = React36__default.useId();
|
|
8784
8787
|
const titleId = `${autoId}-title`;
|
|
8785
8788
|
const descId = `${autoId}-desc`;
|
|
8786
|
-
const dialogRef =
|
|
8789
|
+
const dialogRef = React36__default.useRef(null);
|
|
8787
8790
|
const __twcStyles = useScopedStyles("twc-dialog-styles", DIALOG_CSS);
|
|
8788
8791
|
const renderPortal = usePortal();
|
|
8789
|
-
const [mounted, setMounted] =
|
|
8790
|
-
|
|
8792
|
+
const [mounted, setMounted] = React36__default.useState(open);
|
|
8793
|
+
React36__default.useEffect(() => {
|
|
8791
8794
|
if (open) {
|
|
8792
8795
|
setMounted(true);
|
|
8793
8796
|
return;
|
|
@@ -8798,7 +8801,7 @@ function Dialog({
|
|
|
8798
8801
|
useScrollLock(open);
|
|
8799
8802
|
useInertBackground(dialogRef, open && mounted);
|
|
8800
8803
|
useFocusTrap(dialogRef, open && mounted);
|
|
8801
|
-
|
|
8804
|
+
React36__default.useEffect(() => {
|
|
8802
8805
|
if (!open) return void 0;
|
|
8803
8806
|
const onKey = (e) => {
|
|
8804
8807
|
if (e.key === "Escape") {
|
|
@@ -8945,14 +8948,14 @@ function Drawer({
|
|
|
8945
8948
|
style,
|
|
8946
8949
|
...rest
|
|
8947
8950
|
}) {
|
|
8948
|
-
const autoId =
|
|
8951
|
+
const autoId = React36__default.useId();
|
|
8949
8952
|
const titleId = `${autoId}-title`;
|
|
8950
8953
|
const descId = `${autoId}-desc`;
|
|
8951
|
-
const panelRef =
|
|
8954
|
+
const panelRef = React36__default.useRef(null);
|
|
8952
8955
|
const __twcStyles = useScopedStyles("twc-drawer-styles", DRAWER_CSS);
|
|
8953
8956
|
const renderPortal = usePortal();
|
|
8954
|
-
const [mounted, setMounted] =
|
|
8955
|
-
|
|
8957
|
+
const [mounted, setMounted] = React36__default.useState(open);
|
|
8958
|
+
React36__default.useEffect(() => {
|
|
8956
8959
|
if (open) {
|
|
8957
8960
|
setMounted(true);
|
|
8958
8961
|
return;
|
|
@@ -8963,7 +8966,7 @@ function Drawer({
|
|
|
8963
8966
|
useScrollLock(open);
|
|
8964
8967
|
useInertBackground(panelRef, open && mounted);
|
|
8965
8968
|
useFocusTrap(panelRef, open && mounted);
|
|
8966
|
-
|
|
8969
|
+
React36__default.useEffect(() => {
|
|
8967
8970
|
if (!open) return void 0;
|
|
8968
8971
|
const onKey = (e) => {
|
|
8969
8972
|
if (e.key === "Escape") {
|
|
@@ -9052,11 +9055,11 @@ function Field({
|
|
|
9052
9055
|
...rest
|
|
9053
9056
|
}) {
|
|
9054
9057
|
const __twcStyles = useScopedStyles("twc-field-styles", FIELD_CSS5);
|
|
9055
|
-
const autoId =
|
|
9058
|
+
const autoId = React36__default.useId();
|
|
9056
9059
|
const fieldId = id || autoId;
|
|
9057
9060
|
const descId = `${fieldId}-desc`;
|
|
9058
9061
|
const hasMsg = Boolean(error || hint);
|
|
9059
|
-
const control =
|
|
9062
|
+
const control = React36__default.isValidElement(children) ? React36__default.cloneElement(children, {
|
|
9060
9063
|
"aria-describedby": [children.props["aria-describedby"], hasMsg ? descId : null].filter(Boolean).join(" ") || void 0,
|
|
9061
9064
|
"aria-invalid": children.props["aria-invalid"] !== void 0 ? children.props["aria-invalid"] : error ? true : void 0
|
|
9062
9065
|
}) : children;
|
|
@@ -9148,11 +9151,11 @@ function FileUpload({
|
|
|
9148
9151
|
...rest
|
|
9149
9152
|
}) {
|
|
9150
9153
|
const __twcStyles = useScopedStyles("twc-upload-styles", UPLOAD_CSS);
|
|
9151
|
-
const [internal, setInternal] =
|
|
9154
|
+
const [internal, setInternal] = React36__default.useState(defaultValue);
|
|
9152
9155
|
const files = value !== void 0 ? value : internal;
|
|
9153
|
-
const [drag, setDrag] =
|
|
9154
|
-
const inputRef =
|
|
9155
|
-
const autoId =
|
|
9156
|
+
const [drag, setDrag] = React36__default.useState(false);
|
|
9157
|
+
const inputRef = React36__default.useRef(null);
|
|
9158
|
+
const autoId = React36__default.useId();
|
|
9156
9159
|
const fieldId = id || autoId;
|
|
9157
9160
|
const descId = `${fieldId}-desc`;
|
|
9158
9161
|
const invalid = Boolean(error);
|
|
@@ -9375,15 +9378,15 @@ function Kanban({
|
|
|
9375
9378
|
...rest
|
|
9376
9379
|
}) {
|
|
9377
9380
|
const __twcStyles = useScopedStyles("twc-kanban-styles", KANBAN_CSS);
|
|
9378
|
-
const [internal, setInternal] =
|
|
9381
|
+
const [internal, setInternal] = React36__default.useState(cards ?? defaultCards ?? []);
|
|
9379
9382
|
const items = cards !== void 0 ? cards : internal;
|
|
9380
|
-
const [drag, setDrag] =
|
|
9381
|
-
const [overCol, setOverCol] =
|
|
9382
|
-
const [grab, setGrab] =
|
|
9383
|
-
const [announce, setAnnounce] =
|
|
9384
|
-
const rootRef =
|
|
9385
|
-
const focusIdRef =
|
|
9386
|
-
|
|
9383
|
+
const [drag, setDrag] = React36__default.useState(null);
|
|
9384
|
+
const [overCol, setOverCol] = React36__default.useState(null);
|
|
9385
|
+
const [grab, setGrab] = React36__default.useState(null);
|
|
9386
|
+
const [announce, setAnnounce] = React36__default.useState("");
|
|
9387
|
+
const rootRef = React36__default.useRef(null);
|
|
9388
|
+
const focusIdRef = React36__default.useRef(null);
|
|
9389
|
+
React36__default.useEffect(() => {
|
|
9387
9390
|
if (focusIdRef.current == null) return void 0;
|
|
9388
9391
|
const raf = requestAnimationFrame(() => {
|
|
9389
9392
|
const id = focusIdRef.current;
|
|
@@ -9693,21 +9696,21 @@ function Popover({
|
|
|
9693
9696
|
...rest
|
|
9694
9697
|
}) {
|
|
9695
9698
|
const __twcStyles = useScopedStyles("twc-popover-styles", POPOVER_CSS);
|
|
9696
|
-
const [openState, setOpenState] =
|
|
9697
|
-
const [render, setRender] =
|
|
9698
|
-
const [pos, setPos] =
|
|
9699
|
-
const wrapRef =
|
|
9700
|
-
const popRef =
|
|
9701
|
-
const popId =
|
|
9699
|
+
const [openState, setOpenState] = React36__default.useState(defaultOpen);
|
|
9700
|
+
const [render, setRender] = React36__default.useState(false);
|
|
9701
|
+
const [pos, setPos] = React36__default.useState(null);
|
|
9702
|
+
const wrapRef = React36__default.useRef(null);
|
|
9703
|
+
const popRef = React36__default.useRef(null);
|
|
9704
|
+
const popId = React36__default.useId();
|
|
9702
9705
|
const controlled = openProp !== void 0;
|
|
9703
9706
|
const open = controlled ? !!openProp : openState;
|
|
9704
|
-
const openRef =
|
|
9707
|
+
const openRef = React36__default.useRef(open);
|
|
9705
9708
|
openRef.current = open;
|
|
9706
|
-
const controlledRef =
|
|
9709
|
+
const controlledRef = React36__default.useRef(controlled);
|
|
9707
9710
|
controlledRef.current = controlled;
|
|
9708
|
-
const onOpenChangeRef =
|
|
9711
|
+
const onOpenChangeRef = React36__default.useRef(onOpenChange);
|
|
9709
9712
|
onOpenChangeRef.current = onOpenChange;
|
|
9710
|
-
const setOpen =
|
|
9713
|
+
const setOpen = React36__default.useCallback((next) => {
|
|
9711
9714
|
const value = typeof next === "function" ? next(openRef.current) : next;
|
|
9712
9715
|
if (value === openRef.current) return;
|
|
9713
9716
|
if (!controlledRef.current) setOpenState(value);
|
|
@@ -9715,7 +9718,7 @@ function Popover({
|
|
|
9715
9718
|
}, []);
|
|
9716
9719
|
const toggle = () => setOpen((o) => !o);
|
|
9717
9720
|
const RD = { createPortal: typeof createPortal === "function" ? createPortal : typeof window !== "undefined" && window.ReactDOM && window.ReactDOM.createPortal };
|
|
9718
|
-
const place =
|
|
9721
|
+
const place = React36__default.useCallback(() => {
|
|
9719
9722
|
const t = wrapRef.current;
|
|
9720
9723
|
if (!t) return;
|
|
9721
9724
|
const r = t.getBoundingClientRect();
|
|
@@ -9752,7 +9755,7 @@ function Popover({
|
|
|
9752
9755
|
arrow = { top: Math.min(Math.max(cy - top - 5.5, 8), ph - 18), [onRight ? "left" : "right"]: -6 };
|
|
9753
9756
|
setPos({ top, left, width: w, flip: false, arrow });
|
|
9754
9757
|
}, [placement, align, width]);
|
|
9755
|
-
|
|
9758
|
+
React36__default.useEffect(() => {
|
|
9756
9759
|
if (!open) return;
|
|
9757
9760
|
place();
|
|
9758
9761
|
const onMove = () => place();
|
|
@@ -9775,7 +9778,7 @@ function Popover({
|
|
|
9775
9778
|
document.removeEventListener("keydown", onKey);
|
|
9776
9779
|
};
|
|
9777
9780
|
}, [open, place]);
|
|
9778
|
-
|
|
9781
|
+
React36__default.useEffect(() => {
|
|
9779
9782
|
if (open) {
|
|
9780
9783
|
setRender(true);
|
|
9781
9784
|
return;
|
|
@@ -9783,12 +9786,12 @@ function Popover({
|
|
|
9783
9786
|
const t = setTimeout(() => setRender(false), 170);
|
|
9784
9787
|
return () => clearTimeout(t);
|
|
9785
9788
|
}, [open]);
|
|
9786
|
-
|
|
9789
|
+
React36__default.useEffect(() => {
|
|
9787
9790
|
if (render && open) place();
|
|
9788
9791
|
}, [render, place]);
|
|
9789
|
-
const restoreRef =
|
|
9790
|
-
const needFocusRef =
|
|
9791
|
-
|
|
9792
|
+
const restoreRef = React36__default.useRef(null);
|
|
9793
|
+
const needFocusRef = React36__default.useRef(false);
|
|
9794
|
+
React36__default.useEffect(() => {
|
|
9792
9795
|
if (open) {
|
|
9793
9796
|
restoreRef.current = document.activeElement;
|
|
9794
9797
|
needFocusRef.current = true;
|
|
@@ -9823,7 +9826,7 @@ function Popover({
|
|
|
9823
9826
|
]
|
|
9824
9827
|
}
|
|
9825
9828
|
) : null;
|
|
9826
|
-
const triggerEl =
|
|
9829
|
+
const triggerEl = React36__default.isValidElement(trigger) ? React36__default.cloneElement(trigger, {
|
|
9827
9830
|
onClick: (e) => {
|
|
9828
9831
|
trigger.props.onClick?.(e);
|
|
9829
9832
|
toggle();
|
|
@@ -9866,7 +9869,7 @@ function Progress({
|
|
|
9866
9869
|
className = "",
|
|
9867
9870
|
...rest
|
|
9868
9871
|
}) {
|
|
9869
|
-
const labelId =
|
|
9872
|
+
const labelId = React36__default.useId();
|
|
9870
9873
|
const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restProps } = rest;
|
|
9871
9874
|
const __twcStyles = useScopedStyles("twc-progress-styles", `
|
|
9872
9875
|
.twc-progress-wrap { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); }
|
|
@@ -9989,7 +9992,7 @@ function Radio({
|
|
|
9989
9992
|
.twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
|
|
9990
9993
|
.twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
|
|
9991
9994
|
`);
|
|
9992
|
-
const autoId =
|
|
9995
|
+
const autoId = React36__default.useId();
|
|
9993
9996
|
const fieldId = id || autoId;
|
|
9994
9997
|
const errId = `${fieldId}-error`;
|
|
9995
9998
|
const invalid = Boolean(error);
|
|
@@ -10059,13 +10062,13 @@ function RadioGroup({
|
|
|
10059
10062
|
...rest
|
|
10060
10063
|
}) {
|
|
10061
10064
|
const __twcStyles = useScopedStyles("twc-radio-group-styles", RADIO_GROUP_CSS);
|
|
10062
|
-
const autoId =
|
|
10065
|
+
const autoId = React36__default.useId();
|
|
10063
10066
|
const fieldId = id || autoId;
|
|
10064
10067
|
const labelId = `${fieldId}-label`;
|
|
10065
10068
|
const descId = `${fieldId}-desc`;
|
|
10066
10069
|
const groupName = name || `${fieldId}-name`;
|
|
10067
10070
|
const invalid = Boolean(error);
|
|
10068
|
-
const [internal, setInternal] =
|
|
10071
|
+
const [internal, setInternal] = React36__default.useState(defaultValue);
|
|
10069
10072
|
const current = value !== void 0 ? value : internal;
|
|
10070
10073
|
const select = (v) => {
|
|
10071
10074
|
if (value === void 0) setInternal(v);
|
|
@@ -10086,10 +10089,10 @@ function RadioGroup({
|
|
|
10086
10089
|
tone
|
|
10087
10090
|
},
|
|
10088
10091
|
o.value
|
|
10089
|
-
)) :
|
|
10090
|
-
if (!
|
|
10092
|
+
)) : React36__default.Children.map(children, (child) => {
|
|
10093
|
+
if (!React36__default.isValidElement(child)) return child;
|
|
10091
10094
|
const v = child.props.value;
|
|
10092
|
-
return
|
|
10095
|
+
return React36__default.cloneElement(child, {
|
|
10093
10096
|
name: child.props.name ?? groupName,
|
|
10094
10097
|
checked: child.props.checked ?? current === v,
|
|
10095
10098
|
onChange: child.props.onChange ?? (() => select(v)),
|
|
@@ -10169,12 +10172,12 @@ function Rating({
|
|
|
10169
10172
|
...rest
|
|
10170
10173
|
}) {
|
|
10171
10174
|
const __twcStyles = useScopedStyles("twc-rating-styles", RATING_CSS);
|
|
10172
|
-
const [internal, setInternal] =
|
|
10173
|
-
const [hover, setHover] =
|
|
10175
|
+
const [internal, setInternal] = React36__default.useState(defaultValue);
|
|
10176
|
+
const [hover, setHover] = React36__default.useState(0);
|
|
10174
10177
|
const val = value !== void 0 ? value : internal;
|
|
10175
10178
|
const shown = hover || val;
|
|
10176
10179
|
const interactive = !readOnly && !disabled;
|
|
10177
|
-
const btnRefs =
|
|
10180
|
+
const btnRefs = React36__default.useRef([]);
|
|
10178
10181
|
const tabStar = Math.min(count, Math.max(1, Math.round(val) || 1));
|
|
10179
10182
|
const fmt = (v) => format ? format(v) : Number.isInteger(v) ? String(v) : v.toFixed(1);
|
|
10180
10183
|
if (process.env.NODE_ENV !== "production" && interactive && !Number.isInteger(val)) {
|
|
@@ -10361,24 +10364,24 @@ function Sidebar({
|
|
|
10361
10364
|
...rest
|
|
10362
10365
|
}) {
|
|
10363
10366
|
const __twcStyles = useScopedStyles("twc-sidebar-styles", SIDEBAR_CSS);
|
|
10364
|
-
const navId =
|
|
10365
|
-
const panelRef =
|
|
10367
|
+
const navId = React36__default.useId();
|
|
10368
|
+
const panelRef = React36__default.useRef(null);
|
|
10366
10369
|
const renderPortal = usePortal();
|
|
10367
|
-
const [internal, setInternal] =
|
|
10370
|
+
const [internal, setInternal] = React36__default.useState(defaultCollapsed);
|
|
10368
10371
|
const collapsed = collapsedProp !== void 0 ? collapsedProp : internal;
|
|
10369
10372
|
const toggle = () => {
|
|
10370
10373
|
const next = !collapsed;
|
|
10371
10374
|
if (collapsedProp === void 0) setInternal(next);
|
|
10372
10375
|
onCollapsedChange?.(next);
|
|
10373
10376
|
};
|
|
10374
|
-
const [openInternal, setOpenInternal] =
|
|
10377
|
+
const [openInternal, setOpenInternal] = React36__default.useState(defaultOpen);
|
|
10375
10378
|
const open = openProp !== void 0 ? openProp : openInternal;
|
|
10376
10379
|
const setOpen = (next) => {
|
|
10377
10380
|
if (openProp === void 0) setOpenInternal(next);
|
|
10378
10381
|
onOpenChange?.(next);
|
|
10379
10382
|
};
|
|
10380
|
-
const [mounted, setMounted] =
|
|
10381
|
-
|
|
10383
|
+
const [mounted, setMounted] = React36__default.useState(open);
|
|
10384
|
+
React36__default.useEffect(() => {
|
|
10382
10385
|
if (!overlay) return void 0;
|
|
10383
10386
|
if (open) {
|
|
10384
10387
|
setMounted(true);
|
|
@@ -10387,7 +10390,7 @@ function Sidebar({
|
|
|
10387
10390
|
const t = setTimeout(() => setMounted(false), 170);
|
|
10388
10391
|
return () => clearTimeout(t);
|
|
10389
10392
|
}, [overlay, open]);
|
|
10390
|
-
|
|
10393
|
+
React36__default.useEffect(() => {
|
|
10391
10394
|
if (!overlay || !open) return void 0;
|
|
10392
10395
|
const prev = document.body.style.overflow;
|
|
10393
10396
|
document.body.style.overflow = "hidden";
|
|
@@ -10396,7 +10399,7 @@ function Sidebar({
|
|
|
10396
10399
|
};
|
|
10397
10400
|
}, [overlay, open]);
|
|
10398
10401
|
useFocusTrap(panelRef, overlay && open && mounted);
|
|
10399
|
-
|
|
10402
|
+
React36__default.useEffect(() => {
|
|
10400
10403
|
if (!overlay || !open) return void 0;
|
|
10401
10404
|
const onKey = (e) => {
|
|
10402
10405
|
if (e.key === "Escape") {
|
|
@@ -10448,7 +10451,7 @@ function Sidebar({
|
|
|
10448
10451
|
const body = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
10449
10452
|
__twcStyles,
|
|
10450
10453
|
brand ? /* @__PURE__ */ jsx("div", { className: "twc-sidebar__head", children: /* @__PURE__ */ jsx("span", { className: "twc-sidebar__brand", children: brand }) }) : null,
|
|
10451
|
-
/* @__PURE__ */ jsx("nav", { id: navId, className: "twc-sidebar__nav", "aria-label": navLabel, children: groups.map((g, gi) => /* @__PURE__ */ jsxs(
|
|
10454
|
+
/* @__PURE__ */ jsx("nav", { id: navId, className: "twc-sidebar__nav", "aria-label": navLabel, children: groups.map((g, gi) => /* @__PURE__ */ jsxs(React36__default.Fragment, { children: [
|
|
10452
10455
|
g.section != null ? /* @__PURE__ */ jsx("div", { className: "twc-sidebar__section", id: g.sid, children: g.section }) : null,
|
|
10453
10456
|
/* @__PURE__ */ jsx("ul", { className: "twc-sidebar__list", ...g.section != null ? { "aria-labelledby": g.sid } : {}, children: g.entries.map(({ it, i }) => /* @__PURE__ */ jsx("li", { children: renderItem(it) }, i)) })
|
|
10454
10457
|
] }, gi)) }),
|
|
@@ -10617,10 +10620,10 @@ function Slider({
|
|
|
10617
10620
|
return Math.min(max, Math.max(min, Math.round(stepped * 1e6) / 1e6));
|
|
10618
10621
|
};
|
|
10619
10622
|
const __twcStyles = useScopedStyles("twc-slider-styles", SLIDER_CSS);
|
|
10620
|
-
const autoId =
|
|
10623
|
+
const autoId = React36__default.useId();
|
|
10621
10624
|
const fieldId = id || autoId;
|
|
10622
10625
|
const isRange = range || Array.isArray(value) || Array.isArray(defaultValue);
|
|
10623
|
-
const [internal, setInternal] =
|
|
10626
|
+
const [internal, setInternal] = React36__default.useState(() => {
|
|
10624
10627
|
if (isRange) {
|
|
10625
10628
|
const dv = Array.isArray(defaultValue) ? defaultValue : [min, max];
|
|
10626
10629
|
return [clampSnap(dv[0]), clampSnap(dv[1])];
|
|
@@ -10630,8 +10633,8 @@ function Slider({
|
|
|
10630
10633
|
const rawVal = value !== void 0 ? value : internal;
|
|
10631
10634
|
const clampedVals = (isRange ? [Number(rawVal[0]), Number(rawVal[1])] : [Number(rawVal)]).map((v) => Math.min(max, Math.max(min, Number.isFinite(v) ? v : min)));
|
|
10632
10635
|
const indices = isRange ? [0, 1] : [0];
|
|
10633
|
-
const trackRef =
|
|
10634
|
-
const [dragging, setDragging] =
|
|
10636
|
+
const trackRef = React36__default.useRef(null);
|
|
10637
|
+
const [dragging, setDragging] = React36__default.useState(false);
|
|
10635
10638
|
const fmt = (v) => formatValue ? formatValue(v) : v.toFixed(decimals);
|
|
10636
10639
|
const valueTextFor = (v) => {
|
|
10637
10640
|
if (getAriaValueText) return getAriaValueText(v);
|
|
@@ -10662,8 +10665,8 @@ function Slider({
|
|
|
10662
10665
|
const ratio = Math.min(1, Math.max(0, (clientX - r.left) / r.width));
|
|
10663
10666
|
return clampSnap(min + ratio * (max - min));
|
|
10664
10667
|
};
|
|
10665
|
-
const dragCleanupRef =
|
|
10666
|
-
|
|
10668
|
+
const dragCleanupRef = React36__default.useRef(null);
|
|
10669
|
+
React36__default.useEffect(() => () => dragCleanupRef.current?.(), []);
|
|
10667
10670
|
function onPointerDown(e) {
|
|
10668
10671
|
if (disabled) return;
|
|
10669
10672
|
e.preventDefault();
|
|
@@ -10894,7 +10897,7 @@ function Stepper({
|
|
|
10894
10897
|
...rest
|
|
10895
10898
|
}) {
|
|
10896
10899
|
const __twcStyles = useScopedStyles("twc-stepper-styles", STEPPER_CSS);
|
|
10897
|
-
const [activeInternal, setActiveInternal] =
|
|
10900
|
+
const [activeInternal, setActiveInternal] = React36__default.useState(defaultActive);
|
|
10898
10901
|
const active = activeProp !== void 0 ? activeProp : activeInternal;
|
|
10899
10902
|
const handleStep = (i) => {
|
|
10900
10903
|
if (activeProp === void 0) setActiveInternal(i);
|
|
@@ -11026,7 +11029,7 @@ function Switch({
|
|
|
11026
11029
|
.twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
|
|
11027
11030
|
.twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
|
|
11028
11031
|
`);
|
|
11029
|
-
const autoId =
|
|
11032
|
+
const autoId = React36__default.useId();
|
|
11030
11033
|
const fieldId = id || autoId;
|
|
11031
11034
|
const errId = `${fieldId}-error`;
|
|
11032
11035
|
const invalid = Boolean(error);
|
|
@@ -11129,14 +11132,14 @@ function Table({
|
|
|
11129
11132
|
...rest
|
|
11130
11133
|
}) {
|
|
11131
11134
|
const __twcStyles = useScopedStyles("twc-table-styles", TABLE_CSS);
|
|
11132
|
-
const cols =
|
|
11135
|
+
const cols = React36__default.useMemo(
|
|
11133
11136
|
() => (columns || []).map((c) => ({ ...c, header: c.headerName, render: c.renderCell })),
|
|
11134
11137
|
[columns]
|
|
11135
11138
|
);
|
|
11136
11139
|
const dataRows = rowsProp || [];
|
|
11137
|
-
const [internalSort, setInternalSort] =
|
|
11140
|
+
const [internalSort, setInternalSort] = React36__default.useState(defaultSort || { field: null, dir: "asc" });
|
|
11138
11141
|
const sort = (sortProp !== void 0 ? sortProp : internalSort) || { field: null, dir: "asc" };
|
|
11139
|
-
const rows =
|
|
11142
|
+
const rows = React36__default.useMemo(() => {
|
|
11140
11143
|
if (!sortable || !sort.field) return dataRows;
|
|
11141
11144
|
const col = cols.find((c) => c.field === sort.field);
|
|
11142
11145
|
if (!col) return dataRows;
|
|
@@ -11283,15 +11286,15 @@ function Tabs({
|
|
|
11283
11286
|
}) {
|
|
11284
11287
|
const vertical = orientation === "vertical";
|
|
11285
11288
|
const __twcStyles = useScopedStyles("twc-tabs-styles", TABS_CSS);
|
|
11286
|
-
const [internal, setInternal] =
|
|
11289
|
+
const [internal, setInternal] = React36__default.useState(defaultValue ?? items[0]?.value);
|
|
11287
11290
|
const active = value ?? internal;
|
|
11288
|
-
const listRef =
|
|
11289
|
-
const [ind, setInd] =
|
|
11290
|
-
const baseId =
|
|
11291
|
+
const listRef = React36__default.useRef(null);
|
|
11292
|
+
const [ind, setInd] = React36__default.useState({ left: 0, width: 0, top: 0, height: 0 });
|
|
11293
|
+
const baseId = React36__default.useId();
|
|
11291
11294
|
const tabIdAt = (i) => `${baseId}-tab-${i}`;
|
|
11292
11295
|
const panelId = `${baseId}-panel`;
|
|
11293
11296
|
const activeIndex = items.findIndex((it) => it.value === active);
|
|
11294
|
-
const updateIndicator =
|
|
11297
|
+
const updateIndicator = React36__default.useCallback(() => {
|
|
11295
11298
|
const list = listRef.current;
|
|
11296
11299
|
if (!list) return;
|
|
11297
11300
|
const el = list.querySelector('[data-active="true"]');
|
|
@@ -11300,10 +11303,10 @@ function Tabs({
|
|
|
11300
11303
|
if (!vertical) el.scrollIntoView?.({ inline: "nearest", block: "nearest" });
|
|
11301
11304
|
}
|
|
11302
11305
|
}, [vertical]);
|
|
11303
|
-
|
|
11306
|
+
React36__default.useEffect(() => {
|
|
11304
11307
|
updateIndicator();
|
|
11305
11308
|
}, [active, updateIndicator, items, orientation]);
|
|
11306
|
-
|
|
11309
|
+
React36__default.useEffect(() => {
|
|
11307
11310
|
const r = () => updateIndicator();
|
|
11308
11311
|
window.addEventListener("resize", r);
|
|
11309
11312
|
if (typeof document !== "undefined" && document.fonts && document.fonts.ready) {
|
|
@@ -11448,7 +11451,7 @@ function Tag({
|
|
|
11448
11451
|
}, "aria-label": _removeLabel, type: "button", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
|
|
11449
11452
|
] });
|
|
11450
11453
|
}
|
|
11451
|
-
var useIso = typeof document !== "undefined" ?
|
|
11454
|
+
var useIso = typeof document !== "undefined" ? React36__default.useLayoutEffect : React36__default.useEffect;
|
|
11452
11455
|
var TEXTAREA_CSS = `
|
|
11453
11456
|
.twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
|
|
11454
11457
|
.twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
|
|
@@ -11484,7 +11487,7 @@ var TEXTAREA_CSS = `
|
|
|
11484
11487
|
.twc-field__count { margin-inline-start: auto; font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; flex: none; }
|
|
11485
11488
|
.twc-field__count[data-danger="true"] { color: var(--color-danger-subtle-fg); }
|
|
11486
11489
|
`;
|
|
11487
|
-
var Textarea =
|
|
11490
|
+
var Textarea = React36__default.forwardRef(function Textarea2({
|
|
11488
11491
|
label,
|
|
11489
11492
|
hint,
|
|
11490
11493
|
error,
|
|
@@ -11502,19 +11505,19 @@ var Textarea = React37__default.forwardRef(function Textarea2({
|
|
|
11502
11505
|
...rest
|
|
11503
11506
|
}, ref) {
|
|
11504
11507
|
const __twcStyles = useScopedStyles("twc-textarea-styles", TEXTAREA_CSS);
|
|
11505
|
-
const autoId =
|
|
11508
|
+
const autoId = React36__default.useId();
|
|
11506
11509
|
const fieldId = id || autoId;
|
|
11507
11510
|
const descId = `${fieldId}-desc`;
|
|
11508
11511
|
const countId = `${fieldId}-count`;
|
|
11509
11512
|
const invalid = Boolean(error);
|
|
11510
|
-
const innerRef =
|
|
11513
|
+
const innerRef = React36__default.useRef(null);
|
|
11511
11514
|
const setRef = (el) => {
|
|
11512
11515
|
innerRef.current = el;
|
|
11513
11516
|
if (typeof ref === "function") ref(el);
|
|
11514
11517
|
else if (ref) ref.current = el;
|
|
11515
11518
|
};
|
|
11516
11519
|
const countControlled = rest.value !== void 0;
|
|
11517
|
-
const [len2, setLen] =
|
|
11520
|
+
const [len2, setLen] = React36__default.useState(() => String(rest.defaultValue ?? "").length);
|
|
11518
11521
|
const count = countControlled ? String(rest.value ?? "").length : len2;
|
|
11519
11522
|
const max = rest.maxLength;
|
|
11520
11523
|
const showCounter = showCount && max != null;
|
|
@@ -11692,19 +11695,19 @@ function Toast({
|
|
|
11692
11695
|
}) {
|
|
11693
11696
|
const resolvedTone = tone === "neutral" ? "default" : tone;
|
|
11694
11697
|
const __twcStyles = useScopedStyles("twc-toast-styles", TOAST_CSS);
|
|
11695
|
-
const onCloseRef =
|
|
11696
|
-
|
|
11698
|
+
const onCloseRef = React36__default.useRef(onClose);
|
|
11699
|
+
React36__default.useEffect(() => {
|
|
11697
11700
|
onCloseRef.current = onClose;
|
|
11698
11701
|
}, [onClose]);
|
|
11699
|
-
const timer =
|
|
11700
|
-
const stop =
|
|
11701
|
-
const start =
|
|
11702
|
+
const timer = React36__default.useRef();
|
|
11703
|
+
const stop = React36__default.useCallback(() => clearTimeout(timer.current), []);
|
|
11704
|
+
const start = React36__default.useCallback(() => {
|
|
11702
11705
|
stop();
|
|
11703
11706
|
if (duration && duration !== Infinity && onCloseRef.current) {
|
|
11704
11707
|
timer.current = setTimeout(() => onCloseRef.current && onCloseRef.current(), duration);
|
|
11705
11708
|
}
|
|
11706
11709
|
}, [duration, stop]);
|
|
11707
|
-
|
|
11710
|
+
React36__default.useEffect(() => {
|
|
11708
11711
|
start();
|
|
11709
11712
|
return stop;
|
|
11710
11713
|
}, [start, stop]);
|
|
@@ -11749,30 +11752,30 @@ function Toast({
|
|
|
11749
11752
|
}
|
|
11750
11753
|
function ToastViewport({ children, limit, className = "", ...rest }) {
|
|
11751
11754
|
const __twcStyles = useScopedStyles("twc-toast-styles", TOAST_CSS);
|
|
11752
|
-
const shown = limit && limit > 0 ?
|
|
11755
|
+
const shown = limit && limit > 0 ? React36__default.Children.toArray(children).slice(-limit) : children;
|
|
11753
11756
|
return /* @__PURE__ */ jsxs("div", { className: `twc-toast-viewport ${className}`, role: "region", "aria-label": "Notifications", ...rest, children: [
|
|
11754
11757
|
__twcStyles,
|
|
11755
11758
|
shown
|
|
11756
11759
|
] });
|
|
11757
11760
|
}
|
|
11758
|
-
var ToastContext =
|
|
11761
|
+
var ToastContext = React36__default.createContext(null);
|
|
11759
11762
|
function useToast() {
|
|
11760
|
-
const ctx =
|
|
11763
|
+
const ctx = React36__default.useContext(ToastContext);
|
|
11761
11764
|
if (!ctx) throw new Error("useToast must be used within a <ToastProvider>.");
|
|
11762
11765
|
return ctx;
|
|
11763
11766
|
}
|
|
11764
11767
|
function ToastProvider({ children, limit = 4, duration = 4500, ...viewportProps }) {
|
|
11765
|
-
const [toasts, setToasts] =
|
|
11766
|
-
const idRef =
|
|
11767
|
-
const limitRef =
|
|
11768
|
-
|
|
11768
|
+
const [toasts, setToasts] = React36__default.useState([]);
|
|
11769
|
+
const idRef = React36__default.useRef(0);
|
|
11770
|
+
const limitRef = React36__default.useRef(limit);
|
|
11771
|
+
React36__default.useEffect(() => {
|
|
11769
11772
|
limitRef.current = limit;
|
|
11770
11773
|
}, [limit]);
|
|
11771
|
-
const dismiss =
|
|
11774
|
+
const dismiss = React36__default.useCallback((id) => {
|
|
11772
11775
|
setToasts((s) => s.filter((t) => t.id !== id));
|
|
11773
11776
|
}, []);
|
|
11774
|
-
const clear =
|
|
11775
|
-
const api =
|
|
11777
|
+
const clear = React36__default.useCallback(() => setToasts([]), []);
|
|
11778
|
+
const api = React36__default.useMemo(() => {
|
|
11776
11779
|
const push = (opts) => {
|
|
11777
11780
|
const id = idRef.current += 1;
|
|
11778
11781
|
const next = typeof opts === "string" ? { title: opts } : opts && typeof opts === "object" ? opts : {};
|
|
@@ -11793,7 +11796,7 @@ function ToastProvider({ children, limit = 4, duration = 4500, ...viewportProps
|
|
|
11793
11796
|
toast.show = withTone("default");
|
|
11794
11797
|
return { toast, dismiss, clear };
|
|
11795
11798
|
}, [dismiss, clear]);
|
|
11796
|
-
const value =
|
|
11799
|
+
const value = React36__default.useMemo(() => ({ ...api, toasts }), [api, toasts]);
|
|
11797
11800
|
return /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
|
|
11798
11801
|
children,
|
|
11799
11802
|
/* @__PURE__ */ jsx(ToastViewport, { limit, ...viewportProps, children: toasts.map((t) => /* @__PURE__ */ jsx(
|
|
@@ -11901,13 +11904,13 @@ function TreeView({
|
|
|
11901
11904
|
}) {
|
|
11902
11905
|
const nodes = items;
|
|
11903
11906
|
const __twcStyles = useScopedStyles("twc-tree-styles", TREE_CSS);
|
|
11904
|
-
const [expInternal, setExpInternal] =
|
|
11907
|
+
const [expInternal, setExpInternal] = React36__default.useState(() => new Set(defaultExpanded));
|
|
11905
11908
|
const expanded = expandedProp !== void 0 ? new Set(expandedProp) : expInternal;
|
|
11906
|
-
const [selInternal, setSelInternal] =
|
|
11909
|
+
const [selInternal, setSelInternal] = React36__default.useState(defaultSelectedId);
|
|
11907
11910
|
const selectedId = selectedProp !== void 0 ? selectedProp : selInternal;
|
|
11908
|
-
const [focusId, setFocusId] =
|
|
11909
|
-
const rowRefs =
|
|
11910
|
-
const taRef =
|
|
11911
|
+
const [focusId, setFocusId] = React36__default.useState(null);
|
|
11912
|
+
const rowRefs = React36__default.useRef(/* @__PURE__ */ new Map());
|
|
11913
|
+
const taRef = React36__default.useRef({ str: "", t: 0 });
|
|
11911
11914
|
const toggle = (id) => {
|
|
11912
11915
|
const n = new Set(expanded);
|
|
11913
11916
|
n.has(id) ? n.delete(id) : n.add(id);
|
|
@@ -12039,7 +12042,7 @@ function AppShell({
|
|
|
12039
12042
|
...rest
|
|
12040
12043
|
}) {
|
|
12041
12044
|
const __twcStyles = useScopedStyles("twc-shell-styles", SHELL_CSS);
|
|
12042
|
-
const wiredSidebar =
|
|
12045
|
+
const wiredSidebar = React36__default.isValidElement(sidebar) && (sidebarOpen !== void 0 || onSidebarOpenChange !== void 0) ? React36__default.cloneElement(sidebar, {
|
|
12043
12046
|
overlay: sidebar.props.overlay !== void 0 ? sidebar.props.overlay : true,
|
|
12044
12047
|
open: sidebar.props.open !== void 0 ? sidebar.props.open : sidebarOpen,
|
|
12045
12048
|
onOpenChange: sidebar.props.onOpenChange !== void 0 ? sidebar.props.onOpenChange : onSidebarOpenChange
|
|
@@ -12074,7 +12077,7 @@ function safeHref6(url) {
|
|
|
12074
12077
|
const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
|
|
12075
12078
|
return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
|
|
12076
12079
|
}
|
|
12077
|
-
var Box =
|
|
12080
|
+
var Box = React36__default.forwardRef(function Box2({
|
|
12078
12081
|
as: Tag2 = "div",
|
|
12079
12082
|
p,
|
|
12080
12083
|
px,
|
|
@@ -12130,7 +12133,7 @@ function safeHref7(url) {
|
|
|
12130
12133
|
const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
|
|
12131
12134
|
return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
|
|
12132
12135
|
}
|
|
12133
|
-
var Container =
|
|
12136
|
+
var Container = React36__default.forwardRef(function Container2({
|
|
12134
12137
|
as: Tag2 = "div",
|
|
12135
12138
|
size = "lg",
|
|
12136
12139
|
padded = true,
|
|
@@ -12180,7 +12183,7 @@ function safeHref8(url) {
|
|
|
12180
12183
|
const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
|
|
12181
12184
|
return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
|
|
12182
12185
|
}
|
|
12183
|
-
var Grid =
|
|
12186
|
+
var Grid = React36__default.forwardRef(function Grid2({
|
|
12184
12187
|
as: Tag2 = "div",
|
|
12185
12188
|
columns,
|
|
12186
12189
|
minChildWidth,
|
|
@@ -12199,7 +12202,7 @@ var Grid = React37__default.forwardRef(function Grid2({
|
|
|
12199
12202
|
}, ref) {
|
|
12200
12203
|
const { flatStyle, styleNode, sxAttr } = useSx(sx);
|
|
12201
12204
|
const responsive = columns != null && typeof columns === "object";
|
|
12202
|
-
const uid =
|
|
12205
|
+
const uid = React36__default.useId();
|
|
12203
12206
|
const gridId = responsive ? `g${uid.replace(/[^a-zA-Z0-9]/g, "")}` : null;
|
|
12204
12207
|
let css = "";
|
|
12205
12208
|
if (responsive) {
|
|
@@ -12253,7 +12256,7 @@ function safeHref9(url) {
|
|
|
12253
12256
|
const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
|
|
12254
12257
|
return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
|
|
12255
12258
|
}
|
|
12256
|
-
var Stack =
|
|
12259
|
+
var Stack = React36__default.forwardRef(function Stack2({
|
|
12257
12260
|
as: Tag2 = "div",
|
|
12258
12261
|
direction = "column",
|
|
12259
12262
|
gap = 4,
|
|
@@ -12277,7 +12280,7 @@ var Stack = React37__default.forwardRef(function Stack2({
|
|
|
12277
12280
|
}, ref) {
|
|
12278
12281
|
const { flatStyle, styleNode, sxAttr } = useSx(sx);
|
|
12279
12282
|
if (Tag2 === "a" && rest.href != null) rest.href = safeHref9(rest.href);
|
|
12280
|
-
const kids = divider != null ?
|
|
12283
|
+
const kids = divider != null ? React36__default.Children.toArray(children).flatMap((child, i, arr) => i < arr.length - 1 ? [child, /* @__PURE__ */ jsx(React36__default.Fragment, { children: divider }, `twc-stack-div-${i}`)] : [child]) : children;
|
|
12281
12284
|
return /* @__PURE__ */ jsxs(
|
|
12282
12285
|
Tag2,
|
|
12283
12286
|
{
|
|
@@ -12349,10 +12352,10 @@ function Code({
|
|
|
12349
12352
|
const __twcStyles = useScopedStyles("twc-code-styles", CODE_CSS);
|
|
12350
12353
|
const Tag2 = as ?? (block ? "pre" : "code");
|
|
12351
12354
|
if (Tag2 === "a" && rest.href != null) rest.href = safeHref10(rest.href);
|
|
12352
|
-
const rootRef =
|
|
12353
|
-
const [copied, setCopied] =
|
|
12354
|
-
const timerRef =
|
|
12355
|
-
|
|
12355
|
+
const rootRef = React36__default.useRef(null);
|
|
12356
|
+
const [copied, setCopied] = React36__default.useState(false);
|
|
12357
|
+
const timerRef = React36__default.useRef(null);
|
|
12358
|
+
React36__default.useEffect(() => () => clearTimeout(timerRef.current), []);
|
|
12356
12359
|
const doCopy = () => {
|
|
12357
12360
|
if (typeof navigator === "undefined" || !navigator.clipboard) return;
|
|
12358
12361
|
const text = typeof children === "string" ? children : rootRef.current?.textContent ?? "";
|
|
@@ -12378,7 +12381,7 @@ function safeHref11(url) {
|
|
|
12378
12381
|
const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
|
|
12379
12382
|
return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
|
|
12380
12383
|
}
|
|
12381
|
-
var Heading =
|
|
12384
|
+
var Heading = React36__default.forwardRef(function Heading2({
|
|
12382
12385
|
as,
|
|
12383
12386
|
level = 2,
|
|
12384
12387
|
size,
|
|
@@ -12444,7 +12447,7 @@ function safeHref12(url) {
|
|
|
12444
12447
|
const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
|
|
12445
12448
|
return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
|
|
12446
12449
|
}
|
|
12447
|
-
var Text =
|
|
12450
|
+
var Text = React36__default.forwardRef(function Text2({
|
|
12448
12451
|
as: Tag2 = "p",
|
|
12449
12452
|
size = "base",
|
|
12450
12453
|
tone = "default",
|
|
@@ -12489,45 +12492,45 @@ var Text = React37__default.forwardRef(function Text2({
|
|
|
12489
12492
|
});
|
|
12490
12493
|
Text.displayName = "Text";
|
|
12491
12494
|
var canUseDOM2 = typeof window !== "undefined" && typeof document !== "undefined";
|
|
12492
|
-
var useIsomorphicLayoutEffect = canUseDOM2 ?
|
|
12495
|
+
var useIsomorphicLayoutEffect = canUseDOM2 ? React36__default.useLayoutEffect : React36__default.useEffect;
|
|
12493
12496
|
function useMounted() {
|
|
12494
|
-
const [mounted, setMounted] =
|
|
12495
|
-
|
|
12497
|
+
const [mounted, setMounted] = React36__default.useState(false);
|
|
12498
|
+
React36__default.useEffect(() => {
|
|
12496
12499
|
setMounted(true);
|
|
12497
12500
|
}, []);
|
|
12498
12501
|
return mounted;
|
|
12499
12502
|
}
|
|
12500
12503
|
function usePrevious(value) {
|
|
12501
|
-
const ref =
|
|
12502
|
-
|
|
12504
|
+
const ref = React36__default.useRef(void 0);
|
|
12505
|
+
React36__default.useEffect(() => {
|
|
12503
12506
|
ref.current = value;
|
|
12504
12507
|
}, [value]);
|
|
12505
12508
|
return ref.current;
|
|
12506
12509
|
}
|
|
12507
12510
|
function useToggle(initial = false) {
|
|
12508
|
-
const [on, setOn] =
|
|
12509
|
-
const toggle =
|
|
12511
|
+
const [on, setOn] = React36__default.useState(initial);
|
|
12512
|
+
const toggle = React36__default.useCallback((next) => {
|
|
12510
12513
|
setOn((prev) => typeof next === "boolean" ? next : !prev);
|
|
12511
12514
|
}, []);
|
|
12512
12515
|
return [on, toggle, setOn];
|
|
12513
12516
|
}
|
|
12514
12517
|
function useDisclosure(initial = false) {
|
|
12515
|
-
const [open, setOpen] =
|
|
12516
|
-
const onOpen =
|
|
12517
|
-
const onClose =
|
|
12518
|
-
const onToggle =
|
|
12518
|
+
const [open, setOpen] = React36__default.useState(initial);
|
|
12519
|
+
const onOpen = React36__default.useCallback(() => setOpen(true), []);
|
|
12520
|
+
const onClose = React36__default.useCallback(() => setOpen(false), []);
|
|
12521
|
+
const onToggle = React36__default.useCallback(() => setOpen((p) => !p), []);
|
|
12519
12522
|
return { open, onOpen, onClose, onToggle, setOpen };
|
|
12520
12523
|
}
|
|
12521
12524
|
function useControllableState({ value, defaultValue, onChange } = {}) {
|
|
12522
12525
|
const isControlled = value !== void 0;
|
|
12523
|
-
const [uncontrolled, setUncontrolled] =
|
|
12526
|
+
const [uncontrolled, setUncontrolled] = React36__default.useState(defaultValue);
|
|
12524
12527
|
const current = isControlled ? value : uncontrolled;
|
|
12525
|
-
const ref =
|
|
12528
|
+
const ref = React36__default.useRef({ current, isControlled, onChange });
|
|
12526
12529
|
useIsomorphicLayoutEffect(() => {
|
|
12527
12530
|
ref.current = { current, isControlled, onChange };
|
|
12528
12531
|
});
|
|
12529
|
-
const wasControlled =
|
|
12530
|
-
|
|
12532
|
+
const wasControlled = React36__default.useRef(isControlled);
|
|
12533
|
+
React36__default.useEffect(() => {
|
|
12531
12534
|
if (wasControlled.current !== isControlled) {
|
|
12532
12535
|
warnOnce(
|
|
12533
12536
|
"useControllableState:switch",
|
|
@@ -12536,7 +12539,7 @@ function useControllableState({ value, defaultValue, onChange } = {}) {
|
|
|
12536
12539
|
wasControlled.current = isControlled;
|
|
12537
12540
|
}
|
|
12538
12541
|
});
|
|
12539
|
-
const setValue =
|
|
12542
|
+
const setValue = React36__default.useCallback((next) => {
|
|
12540
12543
|
const { current: cur, isControlled: ctrl, onChange: cb } = ref.current;
|
|
12541
12544
|
const resolved = typeof next === "function" ? next(cur) : next;
|
|
12542
12545
|
if (resolved === cur) return;
|
|
@@ -12547,7 +12550,7 @@ function useControllableState({ value, defaultValue, onChange } = {}) {
|
|
|
12547
12550
|
}
|
|
12548
12551
|
function useMediaQuery(query, { defaultValue = false, initializeWithValue = false } = {}) {
|
|
12549
12552
|
const get = () => canUseDOM2 ? window.matchMedia(query).matches : defaultValue;
|
|
12550
|
-
const [matches3, setMatches] =
|
|
12553
|
+
const [matches3, setMatches] = React36__default.useState(initializeWithValue ? get : defaultValue);
|
|
12551
12554
|
useIsomorphicLayoutEffect(() => {
|
|
12552
12555
|
if (!canUseDOM2) return void 0;
|
|
12553
12556
|
const mql = window.matchMedia(query);
|
|
@@ -12563,7 +12566,7 @@ function usePrefersReducedMotion() {
|
|
|
12563
12566
|
}
|
|
12564
12567
|
function useColorScheme({ storageKey = "twico-theme", attribute = "class", element, disableTransitionsOnChange = true } = {}) {
|
|
12565
12568
|
const getTarget = () => element || (canUseDOM2 ? document.documentElement : null);
|
|
12566
|
-
const firstApply =
|
|
12569
|
+
const firstApply = React36__default.useRef(true);
|
|
12567
12570
|
const read = () => {
|
|
12568
12571
|
if (!canUseDOM2) return "light";
|
|
12569
12572
|
try {
|
|
@@ -12573,8 +12576,8 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
|
|
|
12573
12576
|
}
|
|
12574
12577
|
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
12575
12578
|
};
|
|
12576
|
-
const [theme, setThemeState] =
|
|
12577
|
-
const apply =
|
|
12579
|
+
const [theme, setThemeState] = React36__default.useState(read);
|
|
12580
|
+
const apply = React36__default.useCallback(
|
|
12578
12581
|
(t) => {
|
|
12579
12582
|
const target = getTarget();
|
|
12580
12583
|
if (!target) return;
|
|
@@ -12600,11 +12603,11 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
|
|
|
12600
12603
|
useIsomorphicLayoutEffect(() => {
|
|
12601
12604
|
apply(theme);
|
|
12602
12605
|
}, [theme, apply]);
|
|
12603
|
-
const themeRef =
|
|
12606
|
+
const themeRef = React36__default.useRef(theme);
|
|
12604
12607
|
useIsomorphicLayoutEffect(() => {
|
|
12605
12608
|
themeRef.current = theme;
|
|
12606
12609
|
}, [theme]);
|
|
12607
|
-
const setTheme =
|
|
12610
|
+
const setTheme = React36__default.useCallback(
|
|
12608
12611
|
(t) => {
|
|
12609
12612
|
setThemeState(t);
|
|
12610
12613
|
try {
|
|
@@ -12615,10 +12618,10 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
|
|
|
12615
12618
|
},
|
|
12616
12619
|
[storageKey]
|
|
12617
12620
|
);
|
|
12618
|
-
const toggle =
|
|
12621
|
+
const toggle = React36__default.useCallback(() => {
|
|
12619
12622
|
setTheme(themeRef.current === "dark" ? "light" : "dark");
|
|
12620
12623
|
}, [setTheme]);
|
|
12621
|
-
|
|
12624
|
+
React36__default.useEffect(() => {
|
|
12622
12625
|
if (!canUseDOM2) return void 0;
|
|
12623
12626
|
const sync = () => setThemeState(read());
|
|
12624
12627
|
const onStorage = (e) => {
|
|
@@ -12634,14 +12637,14 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
|
|
|
12634
12637
|
return { theme, setTheme, toggle, isDark: theme === "dark" };
|
|
12635
12638
|
}
|
|
12636
12639
|
function useEventListener(eventName, handler, element, options) {
|
|
12637
|
-
const saved =
|
|
12640
|
+
const saved = React36__default.useRef(handler);
|
|
12638
12641
|
useIsomorphicLayoutEffect(() => {
|
|
12639
12642
|
saved.current = handler;
|
|
12640
12643
|
}, [handler]);
|
|
12641
12644
|
const capture = typeof options === "boolean" ? options : options && options.capture;
|
|
12642
12645
|
const passive = typeof options === "object" && options ? options.passive : void 0;
|
|
12643
12646
|
const once = typeof options === "object" && options ? options.once : void 0;
|
|
12644
|
-
|
|
12647
|
+
React36__default.useEffect(() => {
|
|
12645
12648
|
const target = element && element.current || element || (canUseDOM2 ? window : null);
|
|
12646
12649
|
if (!target || !target.addEventListener) return void 0;
|
|
12647
12650
|
const opts = typeof options === "boolean" ? options : { capture, passive, once };
|
|
@@ -12651,11 +12654,11 @@ function useEventListener(eventName, handler, element, options) {
|
|
|
12651
12654
|
}, [eventName, element, capture, passive, once]);
|
|
12652
12655
|
}
|
|
12653
12656
|
function useClickOutside(ref, handler, events = ["mousedown", "touchstart"]) {
|
|
12654
|
-
const saved =
|
|
12657
|
+
const saved = React36__default.useRef(handler);
|
|
12655
12658
|
useIsomorphicLayoutEffect(() => {
|
|
12656
12659
|
saved.current = handler;
|
|
12657
12660
|
}, [handler]);
|
|
12658
|
-
|
|
12661
|
+
React36__default.useEffect(() => {
|
|
12659
12662
|
if (!canUseDOM2) return void 0;
|
|
12660
12663
|
const listener = (e) => {
|
|
12661
12664
|
const el = ref && ref.current;
|
|
@@ -12690,8 +12693,8 @@ function useLocalStorage(key, initialValue) {
|
|
|
12690
12693
|
return initialValue;
|
|
12691
12694
|
}
|
|
12692
12695
|
};
|
|
12693
|
-
const [stored, setStored] =
|
|
12694
|
-
const setValue =
|
|
12696
|
+
const [stored, setStored] = React36__default.useState(read);
|
|
12697
|
+
const setValue = React36__default.useCallback(
|
|
12695
12698
|
(value) => {
|
|
12696
12699
|
setStored((prev) => {
|
|
12697
12700
|
const next = typeof value === "function" ? value(prev) : value;
|
|
@@ -12707,8 +12710,8 @@ function useLocalStorage(key, initialValue) {
|
|
|
12707
12710
|
return [stored, setValue];
|
|
12708
12711
|
}
|
|
12709
12712
|
function useCopyToClipboard(timeout = 1500) {
|
|
12710
|
-
const [copied, setCopied] =
|
|
12711
|
-
const copy =
|
|
12713
|
+
const [copied, setCopied] = React36__default.useState(false);
|
|
12714
|
+
const copy = React36__default.useCallback(async (text) => {
|
|
12712
12715
|
if (!canUseDOM2 || !navigator.clipboard) {
|
|
12713
12716
|
setCopied(false);
|
|
12714
12717
|
return false;
|
|
@@ -12722,7 +12725,7 @@ function useCopyToClipboard(timeout = 1500) {
|
|
|
12722
12725
|
return false;
|
|
12723
12726
|
}
|
|
12724
12727
|
}, []);
|
|
12725
|
-
|
|
12728
|
+
React36__default.useEffect(() => {
|
|
12726
12729
|
if (!copied) return void 0;
|
|
12727
12730
|
const t = setTimeout(() => setCopied(false), timeout);
|
|
12728
12731
|
return () => clearTimeout(t);
|
|
@@ -12730,23 +12733,23 @@ function useCopyToClipboard(timeout = 1500) {
|
|
|
12730
12733
|
return { copied, copy };
|
|
12731
12734
|
}
|
|
12732
12735
|
function useDebouncedValue(value, delay = 200) {
|
|
12733
|
-
const [debounced, setDebounced] =
|
|
12734
|
-
|
|
12736
|
+
const [debounced, setDebounced] = React36__default.useState(value);
|
|
12737
|
+
React36__default.useEffect(() => {
|
|
12735
12738
|
const t = setTimeout(() => setDebounced(value), delay);
|
|
12736
12739
|
return () => clearTimeout(t);
|
|
12737
12740
|
}, [value, delay]);
|
|
12738
12741
|
return debounced;
|
|
12739
12742
|
}
|
|
12740
12743
|
function useDebouncedCallback(callback, delay = 200) {
|
|
12741
|
-
const saved =
|
|
12742
|
-
const timer =
|
|
12744
|
+
const saved = React36__default.useRef(callback);
|
|
12745
|
+
const timer = React36__default.useRef(null);
|
|
12743
12746
|
useIsomorphicLayoutEffect(() => {
|
|
12744
12747
|
saved.current = callback;
|
|
12745
12748
|
}, [callback]);
|
|
12746
|
-
|
|
12749
|
+
React36__default.useEffect(() => () => {
|
|
12747
12750
|
if (timer.current) clearTimeout(timer.current);
|
|
12748
12751
|
}, []);
|
|
12749
|
-
return
|
|
12752
|
+
return React36__default.useCallback(
|
|
12750
12753
|
(...args) => {
|
|
12751
12754
|
if (timer.current) clearTimeout(timer.current);
|
|
12752
12755
|
timer.current = setTimeout(() => saved.current(...args), delay);
|
|
@@ -12755,33 +12758,33 @@ function useDebouncedCallback(callback, delay = 200) {
|
|
|
12755
12758
|
);
|
|
12756
12759
|
}
|
|
12757
12760
|
function useInterval(callback, delay) {
|
|
12758
|
-
const saved =
|
|
12761
|
+
const saved = React36__default.useRef(callback);
|
|
12759
12762
|
useIsomorphicLayoutEffect(() => {
|
|
12760
12763
|
saved.current = callback;
|
|
12761
12764
|
}, [callback]);
|
|
12762
|
-
|
|
12765
|
+
React36__default.useEffect(() => {
|
|
12763
12766
|
if (delay == null) return void 0;
|
|
12764
12767
|
const id = setInterval(() => saved.current(), delay);
|
|
12765
12768
|
return () => clearInterval(id);
|
|
12766
12769
|
}, [delay]);
|
|
12767
12770
|
}
|
|
12768
12771
|
function useTimeout(callback, delay) {
|
|
12769
|
-
const saved =
|
|
12772
|
+
const saved = React36__default.useRef(callback);
|
|
12770
12773
|
useIsomorphicLayoutEffect(() => {
|
|
12771
12774
|
saved.current = callback;
|
|
12772
12775
|
}, [callback]);
|
|
12773
|
-
|
|
12776
|
+
React36__default.useEffect(() => {
|
|
12774
12777
|
if (delay == null) return void 0;
|
|
12775
12778
|
const id = setTimeout(() => saved.current(), delay);
|
|
12776
12779
|
return () => clearTimeout(id);
|
|
12777
12780
|
}, [delay]);
|
|
12778
12781
|
}
|
|
12779
12782
|
function useWindowSize() {
|
|
12780
|
-
const [size, setSize] =
|
|
12783
|
+
const [size, setSize] = React36__default.useState(() => ({
|
|
12781
12784
|
width: canUseDOM2 ? window.innerWidth : 0,
|
|
12782
12785
|
height: canUseDOM2 ? window.innerHeight : 0
|
|
12783
12786
|
}));
|
|
12784
|
-
|
|
12787
|
+
React36__default.useEffect(() => {
|
|
12785
12788
|
if (!canUseDOM2) return void 0;
|
|
12786
12789
|
const onResize = () => setSize({ width: window.innerWidth, height: window.innerHeight });
|
|
12787
12790
|
onResize();
|
|
@@ -12791,8 +12794,8 @@ function useWindowSize() {
|
|
|
12791
12794
|
return size;
|
|
12792
12795
|
}
|
|
12793
12796
|
function useHover(ref) {
|
|
12794
|
-
const [hovered, setHovered] =
|
|
12795
|
-
|
|
12797
|
+
const [hovered, setHovered] = React36__default.useState(false);
|
|
12798
|
+
React36__default.useEffect(() => {
|
|
12796
12799
|
const el = ref && ref.current;
|
|
12797
12800
|
if (!el) return void 0;
|
|
12798
12801
|
const on = () => setHovered(true);
|
|
@@ -12808,8 +12811,8 @@ function useHover(ref) {
|
|
|
12808
12811
|
}
|
|
12809
12812
|
function useIntersectionObserver(ref, options = {}) {
|
|
12810
12813
|
const { root = null, rootMargin = "0px", threshold = 0 } = options;
|
|
12811
|
-
const [entry, setEntry] =
|
|
12812
|
-
|
|
12814
|
+
const [entry, setEntry] = React36__default.useState(null);
|
|
12815
|
+
React36__default.useEffect(() => {
|
|
12813
12816
|
const el = ref && ref.current;
|
|
12814
12817
|
if (!canUseDOM2 || !el || typeof IntersectionObserver === "undefined") return void 0;
|
|
12815
12818
|
const obs = new IntersectionObserver(([e]) => setEntry(e), { root, rootMargin, threshold });
|
|
@@ -12819,7 +12822,7 @@ function useIntersectionObserver(ref, options = {}) {
|
|
|
12819
12822
|
return entry;
|
|
12820
12823
|
}
|
|
12821
12824
|
function useId(prefix = "twc") {
|
|
12822
|
-
const raw =
|
|
12825
|
+
const raw = React36__default.useId();
|
|
12823
12826
|
return prefix ? `${prefix}-${raw.replace(/:/g, "")}` : raw;
|
|
12824
12827
|
}
|
|
12825
12828
|
var useFocusTrap2 = useFocusTrap;
|