@oprt/react 0.2.0 → 0.3.0
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/README.md +2 -1
- package/dist/ActionStatus/ActionStatus.js +15 -4
- package/dist/Alert/Alert.js +21 -12
- package/dist/AttachmentPreview/AttachmentPreview.js +15 -12
- package/dist/Chart/Chart.js +9 -1
- package/dist/EventTimeline/EventTimeline.js +9 -1
- package/dist/Popover/Popover.js +6 -5
- package/dist/Tabs/useTabsIndicator.js +1 -1
- package/dist/Toast/Toast.js +1 -1
- package/dist/_internal/hydration.js +2 -2
- package/dist/_internal/liveRegion.js +27 -0
- package/dist/_internal/motion.js +2 -2
- package/dist/index.cjs +721 -661
- package/dist/version.js +1 -1
- package/package.json +5 -3
package/dist/index.cjs
CHANGED
|
@@ -218,7 +218,7 @@ module.exports = __toCommonJS(src_exports);
|
|
|
218
218
|
// src/Alert/Alert.tsx
|
|
219
219
|
var import_icons = require("@oprt/icons");
|
|
220
220
|
var import_class_variance_authority = require("class-variance-authority");
|
|
221
|
-
var
|
|
221
|
+
var import_react2 = require("react");
|
|
222
222
|
var import_clsx = __toESM(require("clsx"), 1);
|
|
223
223
|
|
|
224
224
|
// src/Alert/Alert.manifest.ts
|
|
@@ -320,6 +320,28 @@ function devValidate(component, manifestProps, received) {
|
|
|
320
320
|
}
|
|
321
321
|
}
|
|
322
322
|
|
|
323
|
+
// src/_internal/liveRegion.ts
|
|
324
|
+
var import_react = require("react");
|
|
325
|
+
var neverChanges = () => () => {
|
|
326
|
+
};
|
|
327
|
+
var LIVE_REGION_LEAD_MS = 100;
|
|
328
|
+
function useHoldBackNewText(enabled) {
|
|
329
|
+
const hydrating = (0, import_react.useSyncExternalStore)(
|
|
330
|
+
neverChanges,
|
|
331
|
+
() => false,
|
|
332
|
+
() => true
|
|
333
|
+
);
|
|
334
|
+
const lateArrival = (0, import_react.useRef)(null);
|
|
335
|
+
if (lateArrival.current === null) lateArrival.current = !hydrating;
|
|
336
|
+
const [held, setHeld] = (0, import_react.useState)(Boolean(lateArrival.current));
|
|
337
|
+
(0, import_react.useEffect)(() => {
|
|
338
|
+
if (!held) return;
|
|
339
|
+
const timer = window.setTimeout(() => setHeld(false), LIVE_REGION_LEAD_MS);
|
|
340
|
+
return () => window.clearTimeout(timer);
|
|
341
|
+
}, [held]);
|
|
342
|
+
return enabled && held;
|
|
343
|
+
}
|
|
344
|
+
|
|
323
345
|
// src/Alert/Alert.tsx
|
|
324
346
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
325
347
|
var ICONS = {
|
|
@@ -351,7 +373,7 @@ var accentStyles = (0, import_class_variance_authority.cva)("", {
|
|
|
351
373
|
}
|
|
352
374
|
}
|
|
353
375
|
});
|
|
354
|
-
var Alert = (0,
|
|
376
|
+
var Alert = (0, import_react2.forwardRef)((allProps, ref) => {
|
|
355
377
|
const {
|
|
356
378
|
className,
|
|
357
379
|
variant,
|
|
@@ -362,6 +384,7 @@ var Alert = (0, import_react.forwardRef)((allProps, ref) => {
|
|
|
362
384
|
...props
|
|
363
385
|
} = allProps;
|
|
364
386
|
const role = variant === "error" || variant === "warning" ? "alert" : "status";
|
|
387
|
+
const holdBack = useHoldBackNewText(role === "status");
|
|
365
388
|
const Icon = ICONS[variant];
|
|
366
389
|
const hasBody = children != null && typeof children !== "boolean" && children !== "";
|
|
367
390
|
if (process.env.NODE_ENV !== "production") {
|
|
@@ -369,19 +392,26 @@ var Alert = (0, import_react.forwardRef)((allProps, ref) => {
|
|
|
369
392
|
}
|
|
370
393
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, role, className: (0, import_clsx.default)(containerStyles({ variant }), className), ...props, children: [
|
|
371
394
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", className: (0, import_clsx.default)("shrink-0", accentStyles({ variant })), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: 16 }) }),
|
|
372
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
395
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
396
|
+
"div",
|
|
397
|
+
{
|
|
398
|
+
className: "flex min-w-0 flex-1 flex-col gap-1u oprt-wrap-anywhere",
|
|
399
|
+
...holdBack ? { "aria-hidden": true } : {},
|
|
400
|
+
children: [
|
|
401
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
402
|
+
"p",
|
|
403
|
+
{
|
|
404
|
+
className: (0, import_clsx.default)(
|
|
405
|
+
"m-0 text-oprt-sm uppercase tracking-oprt-sm",
|
|
406
|
+
accentStyles({ variant })
|
|
407
|
+
),
|
|
408
|
+
children: title
|
|
409
|
+
}
|
|
379
410
|
),
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
] }),
|
|
411
|
+
hasBody && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-oprt-base normal-case text-oprt-text", children })
|
|
412
|
+
]
|
|
413
|
+
}
|
|
414
|
+
),
|
|
385
415
|
dismissible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
386
416
|
"button",
|
|
387
417
|
{
|
|
@@ -398,7 +428,7 @@ Alert.displayName = "Alert";
|
|
|
398
428
|
|
|
399
429
|
// src/Avatar/Avatar.tsx
|
|
400
430
|
var import_class_variance_authority2 = require("class-variance-authority");
|
|
401
|
-
var
|
|
431
|
+
var import_react3 = require("react");
|
|
402
432
|
var import_clsx2 = __toESM(require("clsx"), 1);
|
|
403
433
|
var import_icons2 = require("@oprt/icons");
|
|
404
434
|
|
|
@@ -447,13 +477,13 @@ var firstCharacter = (word) => Array.from(word)[0] ?? "";
|
|
|
447
477
|
function getInitials(name) {
|
|
448
478
|
return name.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((word) => firstCharacter(firstCharacter(word).toUpperCase())).join("");
|
|
449
479
|
}
|
|
450
|
-
var Avatar = (0,
|
|
480
|
+
var Avatar = (0, import_react3.forwardRef)((allProps, ref) => {
|
|
451
481
|
const { className, size, name, src, alt, delayMs, ...props } = allProps;
|
|
452
482
|
const initials = getInitials(name);
|
|
453
|
-
const [load, setLoad] = (0,
|
|
483
|
+
const [load, setLoad] = (0, import_react3.useState)(null);
|
|
454
484
|
const status = load !== null && load.src === src ? load.status : "idle";
|
|
455
|
-
const [fallbackReady, setFallbackReady] = (0,
|
|
456
|
-
(0,
|
|
485
|
+
const [fallbackReady, setFallbackReady] = (0, import_react3.useState)(delayMs === void 0);
|
|
486
|
+
(0, import_react3.useEffect)(() => {
|
|
457
487
|
if (delayMs === void 0) {
|
|
458
488
|
setFallbackReady(true);
|
|
459
489
|
return;
|
|
@@ -462,7 +492,7 @@ var Avatar = (0, import_react2.forwardRef)((allProps, ref) => {
|
|
|
462
492
|
const t = setTimeout(() => setFallbackReady(true), delayMs);
|
|
463
493
|
return () => clearTimeout(t);
|
|
464
494
|
}, [delayMs, src]);
|
|
465
|
-
const imgRef = (0,
|
|
495
|
+
const imgRef = (0, import_react3.useCallback)(
|
|
466
496
|
(node) => {
|
|
467
497
|
if (node?.complete && node.naturalWidth > 0) setLoad({ src, status: "loaded" });
|
|
468
498
|
},
|
|
@@ -504,7 +534,7 @@ Avatar.displayName = "Avatar";
|
|
|
504
534
|
|
|
505
535
|
// src/Badge/Badge.tsx
|
|
506
536
|
var import_class_variance_authority3 = require("class-variance-authority");
|
|
507
|
-
var
|
|
537
|
+
var import_react4 = require("react");
|
|
508
538
|
var import_clsx3 = __toESM(require("clsx"), 1);
|
|
509
539
|
|
|
510
540
|
// src/Badge/Badge.manifest.ts
|
|
@@ -614,7 +644,7 @@ var iconBoxStyles = (0, import_class_variance_authority3.cva)("flex shrink-0 ite
|
|
|
614
644
|
},
|
|
615
645
|
defaultVariants: { size: "sm" }
|
|
616
646
|
});
|
|
617
|
-
var Badge = (0,
|
|
647
|
+
var Badge = (0, import_react4.forwardRef)((allProps, ref) => {
|
|
618
648
|
const {
|
|
619
649
|
className,
|
|
620
650
|
variant = "neutral",
|
|
@@ -633,7 +663,7 @@ var Badge = (0, import_react3.forwardRef)((allProps, ref) => {
|
|
|
633
663
|
appearance: appearance ?? void 0,
|
|
634
664
|
size: size ?? void 0
|
|
635
665
|
};
|
|
636
|
-
const composite =
|
|
666
|
+
const composite = import_react4.Children.toArray(children).some(
|
|
637
667
|
(child) => typeof child !== "string" && typeof child !== "number"
|
|
638
668
|
);
|
|
639
669
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
@@ -662,32 +692,32 @@ var Badge = (0, import_react3.forwardRef)((allProps, ref) => {
|
|
|
662
692
|
Badge.displayName = "Badge";
|
|
663
693
|
|
|
664
694
|
// src/TagGroup/TagGroup.tsx
|
|
665
|
-
var
|
|
695
|
+
var import_react7 = require("react");
|
|
666
696
|
var import_react_aria_components = require("react-aria-components");
|
|
667
697
|
var import_class_variance_authority4 = require("class-variance-authority");
|
|
668
698
|
var import_clsx4 = __toESM(require("clsx"), 1);
|
|
669
699
|
var import_icons3 = require("@oprt/icons");
|
|
670
700
|
|
|
671
701
|
// src/_internal/useRestoreFocusOnRemoval.ts
|
|
672
|
-
var
|
|
702
|
+
var import_react6 = require("react");
|
|
673
703
|
|
|
674
704
|
// src/_internal/useIsomorphicLayoutEffect.ts
|
|
675
|
-
var
|
|
676
|
-
var useIsomorphicLayoutEffect = typeof document === "undefined" ?
|
|
705
|
+
var import_react5 = require("react");
|
|
706
|
+
var useIsomorphicLayoutEffect = typeof document === "undefined" ? import_react5.useEffect : import_react5.useLayoutEffect;
|
|
677
707
|
|
|
678
708
|
// src/_internal/useRestoreFocusOnRemoval.ts
|
|
679
709
|
var goneByDefault = (element) => !element.isConnected || element.matches(":disabled");
|
|
680
710
|
function useRestoreFocusOnRemoval(root, options = {}) {
|
|
681
|
-
const tracked = (0,
|
|
682
|
-
const latest = (0,
|
|
711
|
+
const tracked = (0, import_react6.useRef)(null);
|
|
712
|
+
const latest = (0, import_react6.useRef)(options);
|
|
683
713
|
useIsomorphicLayoutEffect(() => {
|
|
684
714
|
latest.current = options;
|
|
685
715
|
});
|
|
686
|
-
const isGone = (0,
|
|
716
|
+
const isGone = (0, import_react6.useCallback)(
|
|
687
717
|
(element, state) => (latest.current.isGone ?? goneByDefault)(element, state),
|
|
688
718
|
[]
|
|
689
719
|
);
|
|
690
|
-
const onFocusCapture = (0,
|
|
720
|
+
const onFocusCapture = (0, import_react6.useCallback)(
|
|
691
721
|
(event) => {
|
|
692
722
|
const element = event.target;
|
|
693
723
|
const host = root.current;
|
|
@@ -701,7 +731,7 @@ function useRestoreFocusOnRemoval(root, options = {}) {
|
|
|
701
731
|
},
|
|
702
732
|
[root]
|
|
703
733
|
);
|
|
704
|
-
const onBlurCapture = (0,
|
|
734
|
+
const onBlurCapture = (0, import_react6.useCallback)(
|
|
705
735
|
(event) => {
|
|
706
736
|
const element = event.target;
|
|
707
737
|
if (tracked.current?.element !== element) return;
|
|
@@ -713,7 +743,7 @@ function useRestoreFocusOnRemoval(root, options = {}) {
|
|
|
713
743
|
},
|
|
714
744
|
[isGone]
|
|
715
745
|
);
|
|
716
|
-
(0,
|
|
746
|
+
(0, import_react6.useEffect)(() => {
|
|
717
747
|
const prior = tracked.current;
|
|
718
748
|
if (!prior || !isGone(prior.element, prior.state)) return;
|
|
719
749
|
tracked.current = null;
|
|
@@ -749,7 +779,7 @@ function reportNotApplied(prop) {
|
|
|
749
779
|
)
|
|
750
780
|
);
|
|
751
781
|
}
|
|
752
|
-
var TagGroup = (0,
|
|
782
|
+
var TagGroup = (0, import_react7.forwardRef)(
|
|
753
783
|
({
|
|
754
784
|
items,
|
|
755
785
|
label,
|
|
@@ -762,8 +792,8 @@ var TagGroup = (0, import_react6.forwardRef)(
|
|
|
762
792
|
dangerouslySetInnerHTML,
|
|
763
793
|
...props
|
|
764
794
|
}, ref) => {
|
|
765
|
-
const rootRef = (0,
|
|
766
|
-
(0,
|
|
795
|
+
const rootRef = (0, import_react7.useRef)(null);
|
|
796
|
+
(0, import_react7.useImperativeHandle)(ref, () => rootRef.current, []);
|
|
767
797
|
const { onFocusCapture, onBlurCapture } = useRestoreFocusOnRemoval(
|
|
768
798
|
rootRef,
|
|
769
799
|
{
|
|
@@ -779,7 +809,7 @@ var TagGroup = (0, import_react6.forwardRef)(
|
|
|
779
809
|
ariaLabel !== void 0 && "aria-label",
|
|
780
810
|
dangerouslySetInnerHTML !== void 0 && "dangerouslySetInnerHTML"
|
|
781
811
|
].filter(Boolean).join(" ");
|
|
782
|
-
(0,
|
|
812
|
+
(0, import_react7.useEffect)(() => {
|
|
783
813
|
if (process.env.NODE_ENV === "production") return;
|
|
784
814
|
for (const prop of notApplied ? notApplied.split(" ") : []) reportNotApplied(prop);
|
|
785
815
|
}, [notApplied]);
|
|
@@ -887,19 +917,19 @@ var TagGroupManifest = {
|
|
|
887
917
|
};
|
|
888
918
|
|
|
889
919
|
// src/PropertyFilter/PropertyFilter.tsx
|
|
890
|
-
var
|
|
920
|
+
var import_react20 = require("react");
|
|
891
921
|
var import_class_variance_authority9 = require("class-variance-authority");
|
|
892
922
|
var import_clsx10 = __toESM(require("clsx"), 1);
|
|
893
923
|
|
|
894
924
|
// src/Button/Button.tsx
|
|
895
925
|
var import_react_slot = require("@radix-ui/react-slot");
|
|
896
926
|
var import_class_variance_authority5 = require("class-variance-authority");
|
|
897
|
-
var
|
|
927
|
+
var import_react10 = require("react");
|
|
898
928
|
var import_clsx5 = __toESM(require("clsx"), 1);
|
|
899
929
|
|
|
900
930
|
// src/_internal/motion.ts
|
|
901
|
-
var
|
|
902
|
-
var MotionContext = (0,
|
|
931
|
+
var import_react8 = require("react");
|
|
932
|
+
var MotionContext = (0, import_react8.createContext)("auto");
|
|
903
933
|
var MOTION_VALUES = ["auto", "none"];
|
|
904
934
|
var MOTION_PROPS = {
|
|
905
935
|
motion: { type: "enum", values: MOTION_VALUES, default: "auto" }
|
|
@@ -910,20 +940,20 @@ function useMotion(mode = "auto", component) {
|
|
|
910
940
|
motion: mode
|
|
911
941
|
});
|
|
912
942
|
}
|
|
913
|
-
const inherited = (0,
|
|
914
|
-
const [ready, setReady] = (0,
|
|
915
|
-
const [keyboard, setKeyboard] = (0,
|
|
916
|
-
const pointer = (0,
|
|
917
|
-
const frame = (0,
|
|
918
|
-
const contactCleanup = (0,
|
|
919
|
-
const clearContact = (0,
|
|
943
|
+
const inherited = (0, import_react8.useContext)(MotionContext);
|
|
944
|
+
const [ready, setReady] = (0, import_react8.useState)(false);
|
|
945
|
+
const [keyboard, setKeyboard] = (0, import_react8.useState)(false);
|
|
946
|
+
const pointer = (0, import_react8.useRef)(false);
|
|
947
|
+
const frame = (0, import_react8.useRef)(void 0);
|
|
948
|
+
const contactCleanup = (0, import_react8.useRef)(void 0);
|
|
949
|
+
const clearContact = (0, import_react8.useCallback)(() => {
|
|
920
950
|
contactCleanup.current?.();
|
|
921
951
|
contactCleanup.current = void 0;
|
|
922
952
|
}, []);
|
|
923
|
-
const cancel = (0,
|
|
953
|
+
const cancel = (0, import_react8.useCallback)(() => {
|
|
924
954
|
if (frame.current !== void 0) cancelAnimationFrame(frame.current);
|
|
925
955
|
}, []);
|
|
926
|
-
const afterPaint = (0,
|
|
956
|
+
const afterPaint = (0, import_react8.useCallback)(
|
|
927
957
|
(callback) => {
|
|
928
958
|
cancel();
|
|
929
959
|
frame.current = requestAnimationFrame(() => {
|
|
@@ -935,14 +965,14 @@ function useMotion(mode = "auto", component) {
|
|
|
935
965
|
},
|
|
936
966
|
[cancel]
|
|
937
967
|
);
|
|
938
|
-
(0,
|
|
968
|
+
(0, import_react8.useEffect)(() => {
|
|
939
969
|
afterPaint(() => setReady(true));
|
|
940
970
|
return () => {
|
|
941
971
|
cancel();
|
|
942
972
|
clearContact();
|
|
943
973
|
};
|
|
944
974
|
}, [afterPaint, cancel, clearContact]);
|
|
945
|
-
const resume = (0,
|
|
975
|
+
const resume = (0, import_react8.useCallback)(
|
|
946
976
|
() => afterPaint(() => {
|
|
947
977
|
setReady(true);
|
|
948
978
|
setKeyboard(false);
|
|
@@ -1022,11 +1052,11 @@ function composeMotionHandlers(motion, consumer) {
|
|
|
1022
1052
|
}
|
|
1023
1053
|
|
|
1024
1054
|
// src/_internal/unavailable.ts
|
|
1025
|
-
var
|
|
1026
|
-
var FocusableWhenUnavailableContext = (0,
|
|
1055
|
+
var import_react9 = require("react");
|
|
1056
|
+
var FocusableWhenUnavailableContext = (0, import_react9.createContext)(false);
|
|
1027
1057
|
var FocusableWhenUnavailableProvider = FocusableWhenUnavailableContext.Provider;
|
|
1028
1058
|
function useFocusableWhenUnavailable() {
|
|
1029
|
-
return (0,
|
|
1059
|
+
return (0, import_react9.useContext)(FocusableWhenUnavailableContext);
|
|
1030
1060
|
}
|
|
1031
1061
|
|
|
1032
1062
|
// src/Button/Button.manifest.ts
|
|
@@ -1116,14 +1146,14 @@ var buttonStyles = (0, import_class_variance_authority5.cva)(
|
|
|
1116
1146
|
}
|
|
1117
1147
|
);
|
|
1118
1148
|
function flatten(children, prefix = "") {
|
|
1119
|
-
return
|
|
1120
|
-
if (!(0,
|
|
1121
|
-
if (child.type ===
|
|
1122
|
-
return [prefix ? (0,
|
|
1149
|
+
return import_react10.Children.toArray(children).flatMap((child) => {
|
|
1150
|
+
if (!(0, import_react10.isValidElement)(child)) return [child];
|
|
1151
|
+
if (child.type === import_react10.Fragment) return flatten(child.props.children, `${prefix}${child.key}/`);
|
|
1152
|
+
return [prefix ? (0, import_react10.cloneElement)(child, { key: `${prefix}${child.key}` }) : child];
|
|
1123
1153
|
});
|
|
1124
1154
|
}
|
|
1125
1155
|
function isIcon(node) {
|
|
1126
|
-
if (!(0,
|
|
1156
|
+
if (!(0, import_react10.isValidElement)(node)) return false;
|
|
1127
1157
|
const hidden = node.props["aria-hidden"];
|
|
1128
1158
|
return node.type === "svg" || hidden === true || hidden === "true" || typeof node.type !== "string" && node.props.children == null;
|
|
1129
1159
|
}
|
|
@@ -1160,7 +1190,7 @@ function stopActivation(event) {
|
|
|
1160
1190
|
event.preventDefault();
|
|
1161
1191
|
event.stopPropagation();
|
|
1162
1192
|
}
|
|
1163
|
-
var Button2 = (0,
|
|
1193
|
+
var Button2 = (0, import_react10.forwardRef)((allProps, ref) => {
|
|
1164
1194
|
const {
|
|
1165
1195
|
className,
|
|
1166
1196
|
variant,
|
|
@@ -1216,14 +1246,14 @@ var Button2 = (0, import_react9.forwardRef)((allProps, ref) => {
|
|
|
1216
1246
|
Button2.displayName = "Button";
|
|
1217
1247
|
|
|
1218
1248
|
// src/Field/Field.tsx
|
|
1219
|
-
var
|
|
1249
|
+
var import_react13 = require("react");
|
|
1220
1250
|
var import_clsx6 = __toESM(require("clsx"), 1);
|
|
1221
1251
|
|
|
1222
1252
|
// src/_internal/fieldIds.ts
|
|
1223
|
-
var
|
|
1253
|
+
var import_react12 = require("react");
|
|
1224
1254
|
|
|
1225
1255
|
// src/_internal/hydration.ts
|
|
1226
|
-
var
|
|
1256
|
+
var import_react11 = require("react");
|
|
1227
1257
|
function keyForIds(...forwardedIds) {
|
|
1228
1258
|
return forwardedIds.join(" ");
|
|
1229
1259
|
}
|
|
@@ -1254,13 +1284,13 @@ function warnProbeMissing(origin) {
|
|
|
1254
1284
|
);
|
|
1255
1285
|
}
|
|
1256
1286
|
function useHydrationRoot(...forwardedIds) {
|
|
1257
|
-
const probe = (0,
|
|
1258
|
-
const hydrated = (0,
|
|
1259
|
-
const hydratingMount = (0,
|
|
1287
|
+
const probe = (0, import_react11.useId)();
|
|
1288
|
+
const hydrated = (0, import_react11.useSyncExternalStore)(subscribeNoop, getClientSnapshot, getServerSnapshot);
|
|
1289
|
+
const hydratingMount = (0, import_react11.useRef)(void 0);
|
|
1260
1290
|
if (hydratingMount.current === void 0) hydratingMount.current = !hydrated;
|
|
1261
|
-
const [disagrees, setDisagrees] = (0,
|
|
1262
|
-
const clientOnly = (0,
|
|
1263
|
-
const origin = (0,
|
|
1291
|
+
const [disagrees, setDisagrees] = (0, import_react11.useState)(false);
|
|
1292
|
+
const clientOnly = (0, import_react11.useRef)(hydrated);
|
|
1293
|
+
const origin = (0, import_react11.useRef)(void 0);
|
|
1264
1294
|
if (process.env.NODE_ENV !== "production" && origin.current === void 0) {
|
|
1265
1295
|
origin.current = callerOfHook();
|
|
1266
1296
|
}
|
|
@@ -1279,9 +1309,9 @@ function useHydrationRoot(...forwardedIds) {
|
|
|
1279
1309
|
};
|
|
1280
1310
|
}
|
|
1281
1311
|
function useHydratedId(readRenderedId) {
|
|
1282
|
-
const reactId = (0,
|
|
1283
|
-
const [renderedId, setRenderedId] = (0,
|
|
1284
|
-
const read = (0,
|
|
1312
|
+
const reactId = (0, import_react11.useId)();
|
|
1313
|
+
const [renderedId, setRenderedId] = (0, import_react11.useState)();
|
|
1314
|
+
const read = (0, import_react11.useRef)(readRenderedId);
|
|
1285
1315
|
useIsomorphicLayoutEffect(() => {
|
|
1286
1316
|
const id = read.current();
|
|
1287
1317
|
if (id && id !== reactId) setRenderedId(id);
|
|
@@ -1290,7 +1320,7 @@ function useHydratedId(readRenderedId) {
|
|
|
1290
1320
|
}
|
|
1291
1321
|
|
|
1292
1322
|
// src/_internal/fieldIds.ts
|
|
1293
|
-
var FieldContext = (0,
|
|
1323
|
+
var FieldContext = (0, import_react12.createContext)(null);
|
|
1294
1324
|
function joinIds(...ids) {
|
|
1295
1325
|
const joined = /* @__PURE__ */ new Set();
|
|
1296
1326
|
for (const id of ids) {
|
|
@@ -1315,7 +1345,7 @@ function ariaInvalidToken(value) {
|
|
|
1315
1345
|
return typeof value === "string" && value !== "true" && value !== "false" ? value : void 0;
|
|
1316
1346
|
}
|
|
1317
1347
|
function useFieldWiring(own2, options) {
|
|
1318
|
-
const field = (0,
|
|
1348
|
+
const field = (0, import_react12.useContext)(FieldContext);
|
|
1319
1349
|
const namedByField = options.label === "labelledby" && !own2["aria-label"] && !options.ownLabel;
|
|
1320
1350
|
const invalid = own2.invalid ?? ariaInvalidValue(own2["aria-invalid"]) ?? field?.invalid ?? false;
|
|
1321
1351
|
return {
|
|
@@ -1333,18 +1363,18 @@ function useFieldWiring(own2, options) {
|
|
|
1333
1363
|
// src/Field/Field.tsx
|
|
1334
1364
|
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
1335
1365
|
function useFieldContext() {
|
|
1336
|
-
const ctx = (0,
|
|
1366
|
+
const ctx = (0, import_react13.useContext)(FieldContext);
|
|
1337
1367
|
if (!ctx) {
|
|
1338
1368
|
throw new Error("useFieldContext must be used inside a <Field>.");
|
|
1339
1369
|
}
|
|
1340
1370
|
return ctx;
|
|
1341
1371
|
}
|
|
1342
1372
|
function useOptionalFieldContext() {
|
|
1343
|
-
return (0,
|
|
1373
|
+
return (0, import_react13.useContext)(FieldContext);
|
|
1344
1374
|
}
|
|
1345
|
-
var Field = (0,
|
|
1375
|
+
var Field = (0, import_react13.forwardRef)(
|
|
1346
1376
|
({ controlId, label, help, error, required, children, className, ...props }, ref) => {
|
|
1347
|
-
const labelRef = (0,
|
|
1377
|
+
const labelRef = (0, import_react13.useRef)(null);
|
|
1348
1378
|
const ids = usePartIds(["label", "help", "error"], {
|
|
1349
1379
|
id: controlId,
|
|
1350
1380
|
readRendered: () => labelRef.current?.htmlFor
|
|
@@ -1404,7 +1434,7 @@ Field.displayName = "Field";
|
|
|
1404
1434
|
|
|
1405
1435
|
// src/Input/Input.tsx
|
|
1406
1436
|
var import_class_variance_authority7 = require("class-variance-authority");
|
|
1407
|
-
var
|
|
1437
|
+
var import_react15 = require("react");
|
|
1408
1438
|
var import_clsx7 = __toESM(require("clsx"), 1);
|
|
1409
1439
|
|
|
1410
1440
|
// src/Input/Input.manifest.ts
|
|
@@ -1456,7 +1486,7 @@ var InputManifest = {
|
|
|
1456
1486
|
|
|
1457
1487
|
// src/_internal/overlay.ts
|
|
1458
1488
|
var import_class_variance_authority6 = require("class-variance-authority");
|
|
1459
|
-
var
|
|
1489
|
+
var import_react14 = require("react");
|
|
1460
1490
|
function toPlacement(side, align) {
|
|
1461
1491
|
if (align === "center") return side;
|
|
1462
1492
|
if (side === "left" || side === "right") return `${side} ${align === "start" ? "top" : "bottom"}`;
|
|
@@ -1485,7 +1515,7 @@ var DESTRUCTIVE_ACTION = "Destructive action";
|
|
|
1485
1515
|
var MENU_ITEM_SHORTCUT = "shrink-0 font-mono text-oprt-sm normal-case tracking-normal text-oprt-text-dim forced-colors:[color:inherit]";
|
|
1486
1516
|
var MENU_EMPTY = "m-0 px-3u py-2u text-oprt-base normal-case text-oprt-text-dim";
|
|
1487
1517
|
function isSingleElement(node) {
|
|
1488
|
-
return (0,
|
|
1518
|
+
return (0, import_react14.isValidElement)(node) && node.type !== import_react14.Fragment;
|
|
1489
1519
|
}
|
|
1490
1520
|
|
|
1491
1521
|
// src/_internal/controlStyles.ts
|
|
@@ -1538,7 +1568,7 @@ var inputStyles = (0, import_class_variance_authority7.cva)(
|
|
|
1538
1568
|
// not the one line of text inside it (operations-map-R4); a text input centers its text itself.
|
|
1539
1569
|
"peer min-w-[min(10ch,100%)] flex-1 self-stretch bg-transparent border-0 outline-hidden font-sans font-medium text-oprt-md text-oprt-text placeholder:text-oprt-text-placeholder disabled:placeholder:text-oprt-text-dim disabled:cursor-not-allowed disabled:text-oprt-text-dim"
|
|
1540
1570
|
);
|
|
1541
|
-
var Input = (0,
|
|
1571
|
+
var Input = (0, import_react15.forwardRef)((allProps, ref) => {
|
|
1542
1572
|
const {
|
|
1543
1573
|
className,
|
|
1544
1574
|
size,
|
|
@@ -1619,7 +1649,7 @@ Input.displayName = "Input";
|
|
|
1619
1649
|
// src/Select/Select.tsx
|
|
1620
1650
|
var import_react_aria_components3 = require("react-aria-components");
|
|
1621
1651
|
var import_class_variance_authority8 = require("class-variance-authority");
|
|
1622
|
-
var
|
|
1652
|
+
var import_react19 = require("react");
|
|
1623
1653
|
var import_clsx9 = __toESM(require("clsx"), 1);
|
|
1624
1654
|
var import_icons5 = require("@oprt/icons");
|
|
1625
1655
|
|
|
@@ -1698,11 +1728,11 @@ var SelectCompositionRules = {
|
|
|
1698
1728
|
};
|
|
1699
1729
|
|
|
1700
1730
|
// src/_internal/aria.ts
|
|
1701
|
-
var
|
|
1731
|
+
var import_react17 = require("react");
|
|
1702
1732
|
|
|
1703
1733
|
// src/_internal/mergeRefs.ts
|
|
1704
|
-
var
|
|
1705
|
-
var supportsRefCleanup = Number.parseInt(
|
|
1734
|
+
var import_react16 = require("react");
|
|
1735
|
+
var supportsRefCleanup = Number.parseInt(import_react16.version, 10) >= 19;
|
|
1706
1736
|
function setRef(ref, node) {
|
|
1707
1737
|
if (typeof ref === "function") return ref(node);
|
|
1708
1738
|
if (ref !== null && typeof ref === "object") ref.current = node;
|
|
@@ -1728,12 +1758,12 @@ function mergeRefs(...refs) {
|
|
|
1728
1758
|
};
|
|
1729
1759
|
}
|
|
1730
1760
|
function useMergedRefs(...refs) {
|
|
1731
|
-
return (0,
|
|
1761
|
+
return (0, import_react16.useMemo)(() => mergeRefs(...refs), refs);
|
|
1732
1762
|
}
|
|
1733
1763
|
function useInputRefObject(setNode) {
|
|
1734
|
-
const node = (0,
|
|
1735
|
-
const cleanup = (0,
|
|
1736
|
-
return (0,
|
|
1764
|
+
const node = (0, import_react16.useRef)(null);
|
|
1765
|
+
const cleanup = (0, import_react16.useRef)(null);
|
|
1766
|
+
return (0, import_react16.useMemo)(
|
|
1737
1767
|
() => ({
|
|
1738
1768
|
get current() {
|
|
1739
1769
|
return node.current;
|
|
@@ -1764,7 +1794,7 @@ function definedOnly(props) {
|
|
|
1764
1794
|
return out;
|
|
1765
1795
|
}
|
|
1766
1796
|
function useAriaInvalidRef(forwarded, invalid) {
|
|
1767
|
-
const sync = (0,
|
|
1797
|
+
const sync = (0, import_react17.useCallback)(
|
|
1768
1798
|
(node) => {
|
|
1769
1799
|
if (!node) return;
|
|
1770
1800
|
if (invalid) node.setAttribute("aria-invalid", "true");
|
|
@@ -1775,7 +1805,7 @@ function useAriaInvalidRef(forwarded, invalid) {
|
|
|
1775
1805
|
return useMergedRefs(sync, forwarded);
|
|
1776
1806
|
}
|
|
1777
1807
|
function renderInvalidButton(invalid) {
|
|
1778
|
-
return (props) => (0,
|
|
1808
|
+
return (props) => (0, import_react17.createElement)("button", invalid ? { ...props, "aria-invalid": "true" } : props);
|
|
1779
1809
|
}
|
|
1780
1810
|
function switchValidationProps({
|
|
1781
1811
|
invalid,
|
|
@@ -1790,7 +1820,7 @@ function switchValidationProps({
|
|
|
1790
1820
|
|
|
1791
1821
|
// src/_internal/MotionPopover.tsx
|
|
1792
1822
|
var import_react_aria_components2 = require("react-aria-components");
|
|
1793
|
-
var
|
|
1823
|
+
var import_react18 = require("react");
|
|
1794
1824
|
var import_clsx8 = __toESM(require("clsx"), 1);
|
|
1795
1825
|
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
1796
1826
|
function canTakeFocus(element) {
|
|
@@ -1805,16 +1835,16 @@ function PopoverSurface({
|
|
|
1805
1835
|
placement,
|
|
1806
1836
|
focusManagement
|
|
1807
1837
|
}) {
|
|
1808
|
-
const surface = (0,
|
|
1838
|
+
const surface = (0, import_react18.useRef)(null);
|
|
1809
1839
|
const surfaceRef = useMergedRefs(
|
|
1810
1840
|
surface,
|
|
1811
1841
|
// RAC hands over a callback or an object ref; a legacy string ref is not one it uses.
|
|
1812
1842
|
domProps.ref
|
|
1813
1843
|
);
|
|
1814
|
-
const wasExiting = (0,
|
|
1815
|
-
const restoreFocus = (0,
|
|
1816
|
-
const previousPlacement = (0,
|
|
1817
|
-
(0,
|
|
1844
|
+
const wasExiting = (0, import_react18.useRef)(isExiting);
|
|
1845
|
+
const restoreFocus = (0, import_react18.useRef)(false);
|
|
1846
|
+
const previousPlacement = (0, import_react18.useRef)(placement);
|
|
1847
|
+
(0, import_react18.useLayoutEffect)(() => {
|
|
1818
1848
|
const node = surface.current;
|
|
1819
1849
|
if (!node) return;
|
|
1820
1850
|
if (previousPlacement.current && previousPlacement.current !== placement) {
|
|
@@ -1839,7 +1869,7 @@ function PopoverSurface({
|
|
|
1839
1869
|
}
|
|
1840
1870
|
wasExiting.current = isExiting;
|
|
1841
1871
|
}, [isExiting, trigger, triggerRef, placement, focusManagement]);
|
|
1842
|
-
(0,
|
|
1872
|
+
(0, import_react18.useEffect)(() => {
|
|
1843
1873
|
if (focusManagement === "automatic" && isExiting && restoreFocus.current) {
|
|
1844
1874
|
const active = document.activeElement;
|
|
1845
1875
|
if (active === document.body || surface.current?.contains(active)) {
|
|
@@ -1917,7 +1947,7 @@ var triggerStyles = (0, import_class_variance_authority8.cva)(
|
|
|
1917
1947
|
);
|
|
1918
1948
|
var contentStyles = LISTBOX_SURFACE;
|
|
1919
1949
|
var itemStyles = LISTBOX_ROW;
|
|
1920
|
-
var Select = (0,
|
|
1950
|
+
var Select = (0, import_react19.forwardRef)(
|
|
1921
1951
|
({
|
|
1922
1952
|
motion = "auto",
|
|
1923
1953
|
placeholder,
|
|
@@ -2051,7 +2081,7 @@ var Select = (0, import_react18.forwardRef)(
|
|
|
2051
2081
|
}
|
|
2052
2082
|
);
|
|
2053
2083
|
Select.displayName = "Select";
|
|
2054
|
-
var SelectOption = (0,
|
|
2084
|
+
var SelectOption = (0, import_react19.forwardRef)(
|
|
2055
2085
|
({ className, children, value, disabled, ...props }, ref) => {
|
|
2056
2086
|
const itemProps = {};
|
|
2057
2087
|
if (typeof children === "string") itemProps["textValue"] = children;
|
|
@@ -2110,7 +2140,7 @@ function tokenLabel(token, fields) {
|
|
|
2110
2140
|
const error = getPropertyFilterTokenError(token, fields);
|
|
2111
2141
|
return error ? `Invalid filter: ${label}. ${error}` : label;
|
|
2112
2142
|
}
|
|
2113
|
-
var PropertyFilter = (0,
|
|
2143
|
+
var PropertyFilter = (0, import_react20.forwardRef)(
|
|
2114
2144
|
({
|
|
2115
2145
|
fields,
|
|
2116
2146
|
value,
|
|
@@ -2124,29 +2154,29 @@ var PropertyFilter = (0, import_react19.forwardRef)(
|
|
|
2124
2154
|
"aria-labelledby": labelledBy,
|
|
2125
2155
|
...props
|
|
2126
2156
|
}, ref) => {
|
|
2127
|
-
const instanceId = (0,
|
|
2128
|
-
const root = (0,
|
|
2129
|
-
(0,
|
|
2157
|
+
const instanceId = (0, import_react20.useId)();
|
|
2158
|
+
const root = (0, import_react20.useRef)(null);
|
|
2159
|
+
(0, import_react20.useImperativeHandle)(ref, () => root.current, []);
|
|
2130
2160
|
const ids = usePartIds(["error"], {
|
|
2131
2161
|
id,
|
|
2132
2162
|
readRendered: () => root.current?.getAttribute("data-oprt-ids")
|
|
2133
2163
|
});
|
|
2134
|
-
const nextId = (0,
|
|
2135
|
-
const addRef = (0,
|
|
2136
|
-
const clearRef = (0,
|
|
2137
|
-
const composing = (0,
|
|
2138
|
-
const pendingAdd = (0,
|
|
2139
|
-
const [draft, setDraft] = (0,
|
|
2140
|
-
const [error, setError] = (0,
|
|
2164
|
+
const nextId = (0, import_react20.useRef)(0);
|
|
2165
|
+
const addRef = (0, import_react20.useRef)(null);
|
|
2166
|
+
const clearRef = (0, import_react20.useRef)(null);
|
|
2167
|
+
const composing = (0, import_react20.useRef)(false);
|
|
2168
|
+
const pendingAdd = (0, import_react20.useRef)(null);
|
|
2169
|
+
const [draft, setDraft] = (0, import_react20.useState)({ field: "", operator: "", value: "" });
|
|
2170
|
+
const [error, setError] = (0, import_react20.useState)(null);
|
|
2141
2171
|
const field = fields.find((candidate) => candidate.key === draft.field);
|
|
2142
2172
|
const operator = field?.operators.find((candidate) => candidate.key === draft.operator);
|
|
2143
2173
|
const fault = (control) => error?.control === control ? { invalid: true, "aria-describedby": ids.error } : {};
|
|
2144
|
-
const clearLeft = (0,
|
|
2174
|
+
const clearLeft = (0, import_react20.useRef)(false);
|
|
2145
2175
|
const restore = useRestoreFocusOnRemoval(root, {
|
|
2146
2176
|
track: (element) => element === clearRef.current ? void 0 : null,
|
|
2147
2177
|
findTarget: () => !clearLeft.current && !disabled && value.tokens.length === 0 ? addRef.current : null
|
|
2148
2178
|
});
|
|
2149
|
-
(0,
|
|
2179
|
+
(0, import_react20.useEffect)(() => {
|
|
2150
2180
|
const pending = pendingAdd.current;
|
|
2151
2181
|
if (pending && value.tokens.some(
|
|
2152
2182
|
(token) => token.id === pending.token.id && token.field === pending.token.field && token.operator === pending.token.operator && token.value === pending.token.value
|
|
@@ -2404,7 +2434,7 @@ var PropertyFilterManifest = {
|
|
|
2404
2434
|
};
|
|
2405
2435
|
|
|
2406
2436
|
// src/CollectionState/CollectionState.tsx
|
|
2407
|
-
var
|
|
2437
|
+
var import_react21 = require("react");
|
|
2408
2438
|
var import_class_variance_authority10 = require("class-variance-authority");
|
|
2409
2439
|
var import_clsx11 = __toESM(require("clsx"), 1);
|
|
2410
2440
|
|
|
@@ -2465,7 +2495,7 @@ var headingStyles = (0, import_class_variance_authority10.cva)(
|
|
|
2465
2495
|
}
|
|
2466
2496
|
}
|
|
2467
2497
|
);
|
|
2468
|
-
var CollectionState = (0,
|
|
2498
|
+
var CollectionState = (0, import_react21.forwardRef)((allProps, ref) => {
|
|
2469
2499
|
const {
|
|
2470
2500
|
variant,
|
|
2471
2501
|
title,
|
|
@@ -2477,7 +2507,7 @@ var CollectionState = (0, import_react20.forwardRef)((allProps, ref) => {
|
|
|
2477
2507
|
"aria-describedby": describedBy,
|
|
2478
2508
|
...props
|
|
2479
2509
|
} = allProps;
|
|
2480
|
-
const id = (0,
|
|
2510
|
+
const id = (0, import_react21.useId)();
|
|
2481
2511
|
const titleId = `${id}-title`;
|
|
2482
2512
|
const descriptionId = `${id}-description`;
|
|
2483
2513
|
const Heading5 = `h${headingLevel}`;
|
|
@@ -2511,7 +2541,7 @@ CollectionState.displayName = "CollectionState";
|
|
|
2511
2541
|
|
|
2512
2542
|
// src/Breadcrumb/Breadcrumb.tsx
|
|
2513
2543
|
var import_icons6 = require("@oprt/icons");
|
|
2514
|
-
var
|
|
2544
|
+
var import_react22 = require("react");
|
|
2515
2545
|
var import_clsx12 = __toESM(require("clsx"), 1);
|
|
2516
2546
|
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
2517
2547
|
function currentIndex(items) {
|
|
@@ -2520,7 +2550,7 @@ function currentIndex(items) {
|
|
|
2520
2550
|
const last = items.length - 1;
|
|
2521
2551
|
return items[last]?.current === false ? -1 : last;
|
|
2522
2552
|
}
|
|
2523
|
-
var Breadcrumb = (0,
|
|
2553
|
+
var Breadcrumb = (0, import_react22.forwardRef)(
|
|
2524
2554
|
({ items, separator = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons6.ChevronRight, { size: 12 }), className, ...props }, ref) => {
|
|
2525
2555
|
if (items.length === 0) return null;
|
|
2526
2556
|
const current = currentIndex(items);
|
|
@@ -2597,7 +2627,7 @@ var BreadcrumbManifest = {
|
|
|
2597
2627
|
|
|
2598
2628
|
// src/ButtonGroup/ButtonGroup.tsx
|
|
2599
2629
|
var import_class_variance_authority11 = require("class-variance-authority");
|
|
2600
|
-
var
|
|
2630
|
+
var import_react23 = require("react");
|
|
2601
2631
|
var import_clsx13 = __toESM(require("clsx"), 1);
|
|
2602
2632
|
|
|
2603
2633
|
// src/ButtonGroup/ButtonGroup.manifest.ts
|
|
@@ -2650,7 +2680,7 @@ var groupStyles2 = (0, import_class_variance_authority11.cva)("inline-flex max-w
|
|
|
2650
2680
|
],
|
|
2651
2681
|
defaultVariants: { orientation: "horizontal", attached: true }
|
|
2652
2682
|
});
|
|
2653
|
-
var ButtonGroup = (0,
|
|
2683
|
+
var ButtonGroup = (0, import_react23.forwardRef)((allProps, ref) => {
|
|
2654
2684
|
const { className, orientation = "horizontal", attached = true, ...props } = allProps;
|
|
2655
2685
|
if (process.env.NODE_ENV !== "production") {
|
|
2656
2686
|
devValidate("ButtonGroup", ButtonGroupManifest.ButtonGroup.props, { ...allProps });
|
|
@@ -2672,10 +2702,10 @@ var ButtonGroup = (0, import_react22.forwardRef)((allProps, ref) => {
|
|
|
2672
2702
|
ButtonGroup.displayName = "ButtonGroup";
|
|
2673
2703
|
|
|
2674
2704
|
// src/Card/Card.tsx
|
|
2675
|
-
var
|
|
2705
|
+
var import_react24 = require("react");
|
|
2676
2706
|
var import_clsx14 = __toESM(require("clsx"), 1);
|
|
2677
2707
|
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
2678
|
-
var Card = (0,
|
|
2708
|
+
var Card = (0, import_react24.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2679
2709
|
"div",
|
|
2680
2710
|
{
|
|
2681
2711
|
ref,
|
|
@@ -2687,7 +2717,7 @@ var Card = (0, import_react23.forwardRef)(({ className, ...props }, ref) => /* @
|
|
|
2687
2717
|
}
|
|
2688
2718
|
));
|
|
2689
2719
|
Card.displayName = "Card";
|
|
2690
|
-
var CardHeader = (0,
|
|
2720
|
+
var CardHeader = (0, import_react24.forwardRef)(
|
|
2691
2721
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2692
2722
|
"div",
|
|
2693
2723
|
{
|
|
@@ -2703,7 +2733,7 @@ var CardHeader = (0, import_react23.forwardRef)(
|
|
|
2703
2733
|
)
|
|
2704
2734
|
);
|
|
2705
2735
|
CardHeader.displayName = "CardHeader";
|
|
2706
|
-
var CardBody = (0,
|
|
2736
|
+
var CardBody = (0, import_react24.forwardRef)(
|
|
2707
2737
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2708
2738
|
"div",
|
|
2709
2739
|
{
|
|
@@ -2717,7 +2747,7 @@ var CardBody = (0, import_react23.forwardRef)(
|
|
|
2717
2747
|
)
|
|
2718
2748
|
);
|
|
2719
2749
|
CardBody.displayName = "CardBody";
|
|
2720
|
-
var CardFooter = (0,
|
|
2750
|
+
var CardFooter = (0, import_react24.forwardRef)(
|
|
2721
2751
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2722
2752
|
"div",
|
|
2723
2753
|
{
|
|
@@ -2791,7 +2821,7 @@ var CardCompositionRules = {
|
|
|
2791
2821
|
// src/Checkbox/Checkbox.tsx
|
|
2792
2822
|
var import_react_aria_components4 = require("react-aria-components");
|
|
2793
2823
|
var import_class_variance_authority12 = require("class-variance-authority");
|
|
2794
|
-
var
|
|
2824
|
+
var import_react25 = require("react");
|
|
2795
2825
|
var import_clsx15 = __toESM(require("clsx"), 1);
|
|
2796
2826
|
var import_icons7 = require("@oprt/icons");
|
|
2797
2827
|
|
|
@@ -2860,7 +2890,7 @@ var rootStyles2 = (0, import_class_variance_authority12.cva)(
|
|
|
2860
2890
|
defaultVariants: { size: "md" }
|
|
2861
2891
|
}
|
|
2862
2892
|
);
|
|
2863
|
-
var Checkbox = (0,
|
|
2893
|
+
var Checkbox = (0, import_react25.forwardRef)((props, ref) => {
|
|
2864
2894
|
const {
|
|
2865
2895
|
className,
|
|
2866
2896
|
motion = "auto",
|
|
@@ -2900,13 +2930,13 @@ var Checkbox = (0, import_react24.forwardRef)((props, ref) => {
|
|
|
2900
2930
|
devValidate("Checkbox", CheckboxManifest.Checkbox.props, { ...props });
|
|
2901
2931
|
}
|
|
2902
2932
|
const isControlled = checked !== void 0;
|
|
2903
|
-
const [uncontrolledIndeterminate, setUncontrolledIndeterminate] = (0,
|
|
2933
|
+
const [uncontrolledIndeterminate, setUncontrolledIndeterminate] = (0, import_react25.useState)(
|
|
2904
2934
|
defaultChecked === "indeterminate"
|
|
2905
2935
|
);
|
|
2906
2936
|
const isIndeterminate = isControlled ? checked === "indeterminate" : uncontrolledIndeterminate;
|
|
2907
2937
|
const setNode = useAriaInvalidRef(ref, isInvalid);
|
|
2908
2938
|
const inputRef = useInputRefObject(setNode);
|
|
2909
|
-
const deferredInputMotion = (0,
|
|
2939
|
+
const deferredInputMotion = (0, import_react25.useRef)(null);
|
|
2910
2940
|
const motionProps = {
|
|
2911
2941
|
...motionState.props,
|
|
2912
2942
|
onClickCapture: (event) => {
|
|
@@ -2983,7 +3013,7 @@ Checkbox.displayName = "Checkbox";
|
|
|
2983
3013
|
// src/Collapsible/Collapsible.tsx
|
|
2984
3014
|
var import_react_aria_components5 = require("react-aria-components");
|
|
2985
3015
|
var import_react_aria = require("react-aria");
|
|
2986
|
-
var
|
|
3016
|
+
var import_react26 = require("react");
|
|
2987
3017
|
var import_clsx16 = __toESM(require("clsx"), 1);
|
|
2988
3018
|
var import_icons8 = require("@oprt/icons");
|
|
2989
3019
|
|
|
@@ -3041,8 +3071,8 @@ var CollapsibleCompositionRules = {
|
|
|
3041
3071
|
// src/Collapsible/Collapsible.tsx
|
|
3042
3072
|
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
3043
3073
|
function CollapsiblePanel({ expanded, children }) {
|
|
3044
|
-
const panel = (0,
|
|
3045
|
-
const latestExpanded = (0,
|
|
3074
|
+
const panel = (0, import_react26.useRef)(null);
|
|
3075
|
+
const latestExpanded = (0, import_react26.useRef)(expanded);
|
|
3046
3076
|
latestExpanded.current = expanded;
|
|
3047
3077
|
useIsomorphicLayoutEffect(() => {
|
|
3048
3078
|
const node = panel.current;
|
|
@@ -3081,7 +3111,7 @@ function toKeySet(value) {
|
|
|
3081
3111
|
if (Array.isArray(value)) return new Set(value);
|
|
3082
3112
|
return new Set(value === "" ? [] : [value]);
|
|
3083
3113
|
}
|
|
3084
|
-
var Collapsible = (0,
|
|
3114
|
+
var Collapsible = (0, import_react26.forwardRef)(
|
|
3085
3115
|
({
|
|
3086
3116
|
type = "single",
|
|
3087
3117
|
motion = "auto",
|
|
@@ -3095,7 +3125,7 @@ var Collapsible = (0, import_react25.forwardRef)(
|
|
|
3095
3125
|
}, ref) => {
|
|
3096
3126
|
const motionState = useMotion(motion);
|
|
3097
3127
|
const isControlled = value !== void 0;
|
|
3098
|
-
const [uncontrolledKeys, setUncontrolledKeys] = (0,
|
|
3128
|
+
const [uncontrolledKeys, setUncontrolledKeys] = (0, import_react26.useState)(
|
|
3099
3129
|
() => toKeySet(defaultValue)
|
|
3100
3130
|
);
|
|
3101
3131
|
const expandedKeys = isControlled ? toKeySet(value) : uncontrolledKeys;
|
|
@@ -3138,7 +3168,7 @@ var Collapsible = (0, import_react25.forwardRef)(
|
|
|
3138
3168
|
}
|
|
3139
3169
|
);
|
|
3140
3170
|
Collapsible.displayName = "Collapsible";
|
|
3141
|
-
var CollapsibleItem = (0,
|
|
3171
|
+
var CollapsibleItem = (0, import_react26.forwardRef)(
|
|
3142
3172
|
({ value, title, disabled, className, children, ...props }, ref) => {
|
|
3143
3173
|
const itemProps = {
|
|
3144
3174
|
...props,
|
|
@@ -3194,7 +3224,7 @@ CollapsibleItem.displayName = "CollapsibleItem";
|
|
|
3194
3224
|
// src/CommandPalette/CommandPalette.tsx
|
|
3195
3225
|
var import_icons9 = require("@oprt/icons");
|
|
3196
3226
|
var import_react_aria_components6 = require("react-aria-components");
|
|
3197
|
-
var
|
|
3227
|
+
var import_react27 = require("react");
|
|
3198
3228
|
var import_clsx17 = __toESM(require("clsx"), 1);
|
|
3199
3229
|
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
3200
3230
|
var itemStyles2 = `m-0 ${MENU_ROW} text-oprt-base font-medium text-oprt-text cursor-pointer list-none outline-hidden data-[focused]:border-oprt-border-focus data-[focused]:shadow-oprt-focus data-[focused]:bg-oprt-surface-3 data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed ${FORCED_ACTIVE_ROW}`;
|
|
@@ -3210,17 +3240,17 @@ function reveal(list, row) {
|
|
|
3210
3240
|
else if (bottom > list.clientHeight) list.scrollTop += bottom - list.clientHeight;
|
|
3211
3241
|
}
|
|
3212
3242
|
function useSettled(value, delay) {
|
|
3213
|
-
const [settled, setSettled] = (0,
|
|
3214
|
-
(0,
|
|
3243
|
+
const [settled, setSettled] = (0, import_react27.useState)(value);
|
|
3244
|
+
(0, import_react27.useEffect)(() => {
|
|
3215
3245
|
const timer = setTimeout(() => setSettled(value), delay);
|
|
3216
3246
|
return () => clearTimeout(timer);
|
|
3217
3247
|
}, [value, delay]);
|
|
3218
3248
|
return settled;
|
|
3219
3249
|
}
|
|
3220
3250
|
function useReturnFocusToOpener(isOpen) {
|
|
3221
|
-
const clicked = (0,
|
|
3222
|
-
const opener = (0,
|
|
3223
|
-
(0,
|
|
3251
|
+
const clicked = (0, import_react27.useRef)(null);
|
|
3252
|
+
const opener = (0, import_react27.useRef)(null);
|
|
3253
|
+
(0, import_react27.useEffect)(() => {
|
|
3224
3254
|
const record = (event) => {
|
|
3225
3255
|
const target = event.target instanceof Element ? event.target.closest(FOCUSABLE) : null;
|
|
3226
3256
|
clicked.current = target;
|
|
@@ -3252,17 +3282,17 @@ function PaletteContent({
|
|
|
3252
3282
|
emptyMessage,
|
|
3253
3283
|
onRun
|
|
3254
3284
|
}) {
|
|
3255
|
-
const [query, setQuery] = (0,
|
|
3256
|
-
const byId = (0,
|
|
3285
|
+
const [query, setQuery] = (0, import_react27.useState)("");
|
|
3286
|
+
const byId = (0, import_react27.useMemo)(() => {
|
|
3257
3287
|
const map = /* @__PURE__ */ new Map();
|
|
3258
3288
|
for (const cmd of commands) map.set(cmd.id, cmd);
|
|
3259
3289
|
return map;
|
|
3260
3290
|
}, [commands]);
|
|
3261
|
-
const hasGroups = (0,
|
|
3291
|
+
const hasGroups = (0, import_react27.useMemo)(
|
|
3262
3292
|
() => commands.some((cmd) => cmd.group !== void 0 && cmd.group !== ""),
|
|
3263
3293
|
[commands]
|
|
3264
3294
|
);
|
|
3265
|
-
const runs = (0,
|
|
3295
|
+
const runs = (0, import_react27.useMemo)(() => {
|
|
3266
3296
|
const out = [];
|
|
3267
3297
|
for (const cmd of commands) {
|
|
3268
3298
|
const group = hasGroups && cmd.group !== void 0 && cmd.group !== "" ? cmd.group : void 0;
|
|
@@ -3272,12 +3302,12 @@ function PaletteContent({
|
|
|
3272
3302
|
}
|
|
3273
3303
|
return out;
|
|
3274
3304
|
}, [commands, hasGroups]);
|
|
3275
|
-
const disabledKeys = (0,
|
|
3305
|
+
const disabledKeys = (0, import_react27.useMemo)(
|
|
3276
3306
|
() => commands.filter((cmd) => cmd.disabled).map((cmd) => cmd.id),
|
|
3277
3307
|
[commands]
|
|
3278
3308
|
);
|
|
3279
3309
|
const { contains } = (0, import_react_aria_components6.useFilter)({ sensitivity: "base" });
|
|
3280
|
-
const filter = (0,
|
|
3310
|
+
const filter = (0, import_react27.useCallback)(
|
|
3281
3311
|
(textValue, inputValue, node) => {
|
|
3282
3312
|
if (inputValue === "") return true;
|
|
3283
3313
|
if (contains(textValue, inputValue)) return true;
|
|
@@ -3288,15 +3318,15 @@ function PaletteContent({
|
|
|
3288
3318
|
);
|
|
3289
3319
|
const noMatch = query !== "" && !commands.some((cmd) => filter(cmd.label, query, { key: cmd.id }));
|
|
3290
3320
|
const announcement = useSettled(noMatch ? emptyMessage : "", 300);
|
|
3291
|
-
const onAction = (0,
|
|
3321
|
+
const onAction = (0, import_react27.useCallback)(
|
|
3292
3322
|
(key) => {
|
|
3293
3323
|
const cmd = byId.get(String(key));
|
|
3294
3324
|
if (cmd && !cmd.disabled) onRun(cmd);
|
|
3295
3325
|
},
|
|
3296
3326
|
[byId, onRun]
|
|
3297
3327
|
);
|
|
3298
|
-
const listObserver = (0,
|
|
3299
|
-
const listRef = (0,
|
|
3328
|
+
const listObserver = (0, import_react27.useRef)(null);
|
|
3329
|
+
const listRef = (0, import_react27.useCallback)((list) => {
|
|
3300
3330
|
listObserver.current?.disconnect();
|
|
3301
3331
|
listObserver.current = null;
|
|
3302
3332
|
if (!list) return;
|
|
@@ -3365,7 +3395,7 @@ function PaletteContent({
|
|
|
3365
3395
|
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { role: "status", className: "sr-only", children: announcement })
|
|
3366
3396
|
] });
|
|
3367
3397
|
}
|
|
3368
|
-
var CommandPalette = (0,
|
|
3398
|
+
var CommandPalette = (0, import_react27.forwardRef)(
|
|
3369
3399
|
({
|
|
3370
3400
|
open,
|
|
3371
3401
|
defaultOpen,
|
|
@@ -3375,18 +3405,18 @@ var CommandPalette = (0, import_react26.forwardRef)(
|
|
|
3375
3405
|
emptyMessage = "No results",
|
|
3376
3406
|
className
|
|
3377
3407
|
}, ref) => {
|
|
3378
|
-
const [internalOpen, setInternalOpen] = (0,
|
|
3408
|
+
const [internalOpen, setInternalOpen] = (0, import_react27.useState)(defaultOpen ?? false);
|
|
3379
3409
|
const isControlled = open !== void 0;
|
|
3380
3410
|
const isOpen = isControlled ? open : internalOpen;
|
|
3381
3411
|
useReturnFocusToOpener(isOpen);
|
|
3382
|
-
const setOpen = (0,
|
|
3412
|
+
const setOpen = (0, import_react27.useCallback)(
|
|
3383
3413
|
(next) => {
|
|
3384
3414
|
if (!isControlled) setInternalOpen(next);
|
|
3385
3415
|
onOpenChange?.(next);
|
|
3386
3416
|
},
|
|
3387
3417
|
[isControlled, onOpenChange]
|
|
3388
3418
|
);
|
|
3389
|
-
const onRun = (0,
|
|
3419
|
+
const onRun = (0, import_react27.useCallback)(
|
|
3390
3420
|
(cmd) => {
|
|
3391
3421
|
cmd.onSelect();
|
|
3392
3422
|
setOpen(false);
|
|
@@ -3464,14 +3494,14 @@ var CommandPaletteManifest = {
|
|
|
3464
3494
|
};
|
|
3465
3495
|
|
|
3466
3496
|
// src/ConfirmDialog/ConfirmDialog.tsx
|
|
3467
|
-
var
|
|
3497
|
+
var import_react29 = require("react");
|
|
3468
3498
|
|
|
3469
3499
|
// src/Dialog/Dialog.tsx
|
|
3470
3500
|
var import_icons10 = require("@oprt/icons");
|
|
3471
3501
|
var import_react_aria_components7 = require("react-aria-components");
|
|
3472
3502
|
var import_react_aria2 = require("react-aria");
|
|
3473
3503
|
var import_class_variance_authority13 = require("class-variance-authority");
|
|
3474
|
-
var
|
|
3504
|
+
var import_react28 = require("react");
|
|
3475
3505
|
var import_clsx18 = __toESM(require("clsx"), 1);
|
|
3476
3506
|
|
|
3477
3507
|
// src/Dialog/Dialog.manifest.ts
|
|
@@ -3520,8 +3550,8 @@ function DialogReentryFocus({
|
|
|
3520
3550
|
dialog,
|
|
3521
3551
|
children
|
|
3522
3552
|
}) {
|
|
3523
|
-
const wasOpen = (0,
|
|
3524
|
-
(0,
|
|
3553
|
+
const wasOpen = (0, import_react28.useRef)(open);
|
|
3554
|
+
(0, import_react28.useLayoutEffect)(() => {
|
|
3525
3555
|
if (open && !wasOpen.current && !dialog.current?.contains(document.activeElement)) {
|
|
3526
3556
|
dialog.current?.focus({ preventScroll: true });
|
|
3527
3557
|
}
|
|
@@ -3530,8 +3560,8 @@ function DialogReentryFocus({
|
|
|
3530
3560
|
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children });
|
|
3531
3561
|
}
|
|
3532
3562
|
function useScrolls(element, content) {
|
|
3533
|
-
const [scrolls, setScrolls] = (0,
|
|
3534
|
-
(0,
|
|
3563
|
+
const [scrolls, setScrolls] = (0, import_react28.useState)(false);
|
|
3564
|
+
(0, import_react28.useEffect)(() => {
|
|
3535
3565
|
const box = element.current;
|
|
3536
3566
|
if (!box || typeof ResizeObserver === "undefined") return;
|
|
3537
3567
|
const measure = () => setScrolls(box.scrollHeight > box.clientHeight + 1);
|
|
@@ -3544,8 +3574,8 @@ function useScrolls(element, content) {
|
|
|
3544
3574
|
return scrolls;
|
|
3545
3575
|
}
|
|
3546
3576
|
function DialogBody({ title, children }) {
|
|
3547
|
-
const body = (0,
|
|
3548
|
-
const content = (0,
|
|
3577
|
+
const body = (0, import_react28.useRef)(null);
|
|
3578
|
+
const content = (0, import_react28.useRef)(null);
|
|
3549
3579
|
const scrolls = useScrolls(body, content);
|
|
3550
3580
|
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3551
3581
|
"div",
|
|
@@ -3567,7 +3597,7 @@ function withDroppedProps2(rendered, accepted) {
|
|
|
3567
3597
|
}
|
|
3568
3598
|
return (0, import_react_aria2.mergeProps)(rendered, dropped);
|
|
3569
3599
|
}
|
|
3570
|
-
var Dialog2 = (0,
|
|
3600
|
+
var Dialog2 = (0, import_react28.forwardRef)(
|
|
3571
3601
|
({
|
|
3572
3602
|
title,
|
|
3573
3603
|
motion = "auto",
|
|
@@ -3583,7 +3613,7 @@ var Dialog2 = (0, import_react27.forwardRef)(
|
|
|
3583
3613
|
...props
|
|
3584
3614
|
}, ref) => {
|
|
3585
3615
|
const motionState = useMotion(motion);
|
|
3586
|
-
const dialogRef = (0,
|
|
3616
|
+
const dialogRef = (0, import_react28.useRef)(null);
|
|
3587
3617
|
const setDialogRef = useMergedRefs(dialogRef, ref);
|
|
3588
3618
|
const rootProps = definedOnly({
|
|
3589
3619
|
isOpen: open,
|
|
@@ -3593,7 +3623,7 @@ var Dialog2 = (0, import_react27.forwardRef)(
|
|
|
3593
3623
|
if (process.env.NODE_ENV !== "production") {
|
|
3594
3624
|
devValidate("Dialog", DialogManifest.Dialog.props, { ...props, size });
|
|
3595
3625
|
}
|
|
3596
|
-
const generatedId = (0,
|
|
3626
|
+
const generatedId = (0, import_react28.useId)();
|
|
3597
3627
|
const describedBy = description ? `${generatedId}description` : void 0;
|
|
3598
3628
|
const naming = definedOnly({
|
|
3599
3629
|
id: props.id,
|
|
@@ -3669,7 +3699,7 @@ var Dialog2 = (0, import_react27.forwardRef)(
|
|
|
3669
3699
|
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MotionContext.Provider, { value: motionState.mode, children: overlay });
|
|
3670
3700
|
const triggerElement = isSingleElement(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button2, { children: trigger });
|
|
3671
3701
|
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MotionContext.Provider, { value: motionState.mode, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_aria_components7.DialogTrigger, { ...rootProps, children: [
|
|
3672
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components7.Pressable, { ...{ "aria-haspopup": "dialog" }, children: (0,
|
|
3702
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components7.Pressable, { ...{ "aria-haspopup": "dialog" }, children: (0, import_react28.cloneElement)(
|
|
3673
3703
|
triggerElement,
|
|
3674
3704
|
composeMotionHandlers(motionState.props, triggerElement.props)
|
|
3675
3705
|
) }),
|
|
@@ -3711,7 +3741,7 @@ var ConfirmDialogManifest = {
|
|
|
3711
3741
|
|
|
3712
3742
|
// src/ConfirmDialog/ConfirmDialog.tsx
|
|
3713
3743
|
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
3714
|
-
var ConfirmDialog = (0,
|
|
3744
|
+
var ConfirmDialog = (0, import_react29.forwardRef)((props, ref) => {
|
|
3715
3745
|
const {
|
|
3716
3746
|
trigger,
|
|
3717
3747
|
title,
|
|
@@ -3728,14 +3758,14 @@ var ConfirmDialog = (0, import_react28.forwardRef)((props, ref) => {
|
|
|
3728
3758
|
className
|
|
3729
3759
|
} = props;
|
|
3730
3760
|
const isControlled = open !== void 0;
|
|
3731
|
-
const [internalOpen, setInternalOpen] = (0,
|
|
3761
|
+
const [internalOpen, setInternalOpen] = (0, import_react29.useState)(defaultOpen ?? false);
|
|
3732
3762
|
const resolvedOpen = isControlled ? open : internalOpen;
|
|
3733
3763
|
const setOpen = (next) => {
|
|
3734
3764
|
if (!isControlled) setInternalOpen(next);
|
|
3735
3765
|
onOpenChange?.(next);
|
|
3736
3766
|
};
|
|
3737
|
-
const [phrase, setPhrase] = (0,
|
|
3738
|
-
(0,
|
|
3767
|
+
const [phrase, setPhrase] = (0, import_react29.useState)("");
|
|
3768
|
+
(0, import_react29.useEffect)(() => {
|
|
3739
3769
|
if (!resolvedOpen) setPhrase("");
|
|
3740
3770
|
}, [resolvedOpen]);
|
|
3741
3771
|
const confirmDisabled = confirmPhrase !== void 0 && phrase.trim() !== confirmPhrase;
|
|
@@ -3784,11 +3814,11 @@ ConfirmDialog.displayName = "ConfirmDialog";
|
|
|
3784
3814
|
|
|
3785
3815
|
// src/DataTable/DataTable.tsx
|
|
3786
3816
|
var import_icons11 = require("@oprt/icons");
|
|
3787
|
-
var
|
|
3817
|
+
var import_react34 = require("react");
|
|
3788
3818
|
var import_clsx20 = __toESM(require("clsx"), 1);
|
|
3789
3819
|
|
|
3790
3820
|
// src/_internal/numberText.tsx
|
|
3791
|
-
var
|
|
3821
|
+
var import_react30 = require("react");
|
|
3792
3822
|
var import_clsx19 = __toESM(require("clsx"), 1);
|
|
3793
3823
|
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
3794
3824
|
var DIGIT = "\\p{Nd}";
|
|
@@ -3944,7 +3974,7 @@ function numberText({ value, unit, className }) {
|
|
|
3944
3974
|
);
|
|
3945
3975
|
}
|
|
3946
3976
|
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { "data-oprt-number": "", className, children: [
|
|
3947
|
-
lead.map((piece, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
3977
|
+
lead.map((piece, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react30.Fragment, { children: [
|
|
3948
3978
|
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "whitespace-nowrap", children: piece }),
|
|
3949
3979
|
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("wbr", {})
|
|
3950
3980
|
] }, index)),
|
|
@@ -3996,21 +4026,21 @@ function sortedOrder(values, direction, compare) {
|
|
|
3996
4026
|
}
|
|
3997
4027
|
|
|
3998
4028
|
// src/DataTable/useScrollsSideways.ts
|
|
3999
|
-
var
|
|
4029
|
+
var import_react32 = require("react");
|
|
4000
4030
|
|
|
4001
4031
|
// src/_internal/useElementWidth.ts
|
|
4002
|
-
var
|
|
4032
|
+
var import_react31 = require("react");
|
|
4003
4033
|
function createResizeObserver(callback) {
|
|
4004
4034
|
return typeof ResizeObserver === "undefined" ? null : new ResizeObserver(callback);
|
|
4005
4035
|
}
|
|
4006
4036
|
function useElementWidth(ref, { initial, min = 0, select }) {
|
|
4007
|
-
const [value, setValue] = (0,
|
|
4008
|
-
const measured = (0,
|
|
4009
|
-
const latest = (0,
|
|
4037
|
+
const [value, setValue] = (0, import_react31.useState)(initial);
|
|
4038
|
+
const measured = (0, import_react31.useRef)(null);
|
|
4039
|
+
const latest = (0, import_react31.useRef)({ min, select });
|
|
4010
4040
|
useIsomorphicLayoutEffect(() => {
|
|
4011
4041
|
latest.current = { min, select };
|
|
4012
4042
|
});
|
|
4013
|
-
(0,
|
|
4043
|
+
(0, import_react31.useEffect)(() => {
|
|
4014
4044
|
const element = ref.current;
|
|
4015
4045
|
if (!element) return;
|
|
4016
4046
|
const observer = createResizeObserver((entries) => {
|
|
@@ -4023,7 +4053,7 @@ function useElementWidth(ref, { initial, min = 0, select }) {
|
|
|
4023
4053
|
observer?.observe(element);
|
|
4024
4054
|
return () => observer?.disconnect();
|
|
4025
4055
|
}, [ref]);
|
|
4026
|
-
(0,
|
|
4056
|
+
(0, import_react31.useEffect)(() => {
|
|
4027
4057
|
if (select && measured.current !== null) setValue(select(measured.current));
|
|
4028
4058
|
}, [select]);
|
|
4029
4059
|
return value;
|
|
@@ -4031,14 +4061,14 @@ function useElementWidth(ref, { initial, min = 0, select }) {
|
|
|
4031
4061
|
|
|
4032
4062
|
// src/DataTable/useScrollsSideways.ts
|
|
4033
4063
|
function useScrollsSideways(enabled = true) {
|
|
4034
|
-
const box = (0,
|
|
4035
|
-
const followed = (0,
|
|
4036
|
-
const [scrolling, setScrolling] = (0,
|
|
4037
|
-
const answered = (0,
|
|
4064
|
+
const box = (0, import_react32.useRef)(null);
|
|
4065
|
+
const followed = (0, import_react32.useRef)(null);
|
|
4066
|
+
const [scrolling, setScrolling] = (0, import_react32.useState)(null);
|
|
4067
|
+
const answered = (0, import_react32.useRef)(scrolling);
|
|
4038
4068
|
useIsomorphicLayoutEffect(() => {
|
|
4039
4069
|
answered.current = scrolling;
|
|
4040
4070
|
});
|
|
4041
|
-
const setBox = (0,
|
|
4071
|
+
const setBox = (0, import_react32.useCallback)((element) => {
|
|
4042
4072
|
box.current = element;
|
|
4043
4073
|
if (element !== null && answered.current !== null && answered.current !== element) {
|
|
4044
4074
|
setScrolling(null);
|
|
@@ -4073,7 +4103,7 @@ function useScrollsSideways(enabled = true) {
|
|
|
4073
4103
|
}
|
|
4074
4104
|
};
|
|
4075
4105
|
});
|
|
4076
|
-
(0,
|
|
4106
|
+
(0, import_react32.useEffect)(
|
|
4077
4107
|
() => () => {
|
|
4078
4108
|
followed.current?.stop();
|
|
4079
4109
|
followed.current = null;
|
|
@@ -4084,7 +4114,7 @@ function useScrollsSideways(enabled = true) {
|
|
|
4084
4114
|
}
|
|
4085
4115
|
|
|
4086
4116
|
// src/DataTable/useTableWindow.ts
|
|
4087
|
-
var
|
|
4117
|
+
var import_react33 = require("react");
|
|
4088
4118
|
var finite = (value, fallback, minimum) => value !== void 0 && Number.isFinite(value) ? Math.max(minimum, value) : fallback;
|
|
4089
4119
|
var NO_HEIGHTS = /* @__PURE__ */ new Map();
|
|
4090
4120
|
var MIN_ROW = 24;
|
|
@@ -4097,18 +4127,18 @@ function useTableWindow(rowKeys, options) {
|
|
|
4097
4127
|
const estimate = fixed ?? finite(options?.estimateRowHeight, 40, 24);
|
|
4098
4128
|
const overscan = Math.floor(finite(options?.overscan, 3, 1));
|
|
4099
4129
|
const measured = windowed && fixed === void 0;
|
|
4100
|
-
const viewport = (0,
|
|
4101
|
-
const [heights, setHeights] = (0,
|
|
4102
|
-
const [anchor, setAnchor] = (0,
|
|
4103
|
-
const [focusedKey, setFocusedKey] = (0,
|
|
4104
|
-
const offsets = (0,
|
|
4130
|
+
const viewport = (0, import_react33.useRef)(null);
|
|
4131
|
+
const [heights, setHeights] = (0, import_react33.useState)(NO_HEIGHTS);
|
|
4132
|
+
const [anchor, setAnchor] = (0, import_react33.useState)(0);
|
|
4133
|
+
const [focusedKey, setFocusedKey] = (0, import_react33.useState)(null);
|
|
4134
|
+
const offsets = (0, import_react33.useMemo)(() => {
|
|
4105
4135
|
if (!measured) return null;
|
|
4106
4136
|
const result = new Float64Array(keys.length + 1);
|
|
4107
4137
|
for (let row = 0; row < keys.length; row++)
|
|
4108
4138
|
result[row + 1] = result[row] + (heights.get(keys[row]) ?? estimate);
|
|
4109
4139
|
return result;
|
|
4110
4140
|
}, [measured, keys, heights, estimate]);
|
|
4111
|
-
const geometry = (0,
|
|
4141
|
+
const geometry = (0, import_react33.useMemo)(
|
|
4112
4142
|
() => ({ count: count2, offsets, estimate, height }),
|
|
4113
4143
|
[count2, offsets, estimate, height]
|
|
4114
4144
|
);
|
|
@@ -4134,11 +4164,11 @@ function useTableWindow(rowKeys, options) {
|
|
|
4134
4164
|
const [from, to] = mountedRange(geometry, element.scrollTop, overscan);
|
|
4135
4165
|
if (from !== start || to !== end) setAnchor(element.scrollTop);
|
|
4136
4166
|
}, [windowed, geometry, overscan, start, end]);
|
|
4137
|
-
const nodes = (0,
|
|
4138
|
-
const keyOf2 = (0,
|
|
4139
|
-
const observer = (0,
|
|
4140
|
-
const rowRefs = (0,
|
|
4141
|
-
(0,
|
|
4167
|
+
const nodes = (0, import_react33.useRef)(/* @__PURE__ */ new Map());
|
|
4168
|
+
const keyOf2 = (0, import_react33.useRef)(/* @__PURE__ */ new WeakMap());
|
|
4169
|
+
const observer = (0, import_react33.useRef)(null);
|
|
4170
|
+
const rowRefs = (0, import_react33.useRef)(/* @__PURE__ */ new Map());
|
|
4171
|
+
(0, import_react33.useEffect)(() => {
|
|
4142
4172
|
if (!measured || typeof ResizeObserver === "undefined") return;
|
|
4143
4173
|
const resizes = new ResizeObserver((entries) => {
|
|
4144
4174
|
const sizes = [];
|
|
@@ -4156,7 +4186,7 @@ function useTableWindow(rowKeys, options) {
|
|
|
4156
4186
|
observer.current = null;
|
|
4157
4187
|
};
|
|
4158
4188
|
}, [measured]);
|
|
4159
|
-
(0,
|
|
4189
|
+
(0, import_react33.useEffect)(() => {
|
|
4160
4190
|
if (!measured || typeof ResizeObserver !== "undefined") return;
|
|
4161
4191
|
const sizes = [];
|
|
4162
4192
|
for (const [key, node] of nodes.current) {
|
|
@@ -4165,7 +4195,7 @@ function useTableWindow(rowKeys, options) {
|
|
|
4165
4195
|
}
|
|
4166
4196
|
if (sizes.length > 0) setHeights((current) => withHeights(current, sizes));
|
|
4167
4197
|
}, [measured, start, end]);
|
|
4168
|
-
(0,
|
|
4198
|
+
(0, import_react33.useEffect)(() => {
|
|
4169
4199
|
if (!measured) return;
|
|
4170
4200
|
for (const key of rowRefs.current.keys())
|
|
4171
4201
|
if (!index.has(key) && !nodes.current.has(key)) rowRefs.current.delete(key);
|
|
@@ -4322,7 +4352,7 @@ function renderCell(column, value, fixedWidth) {
|
|
|
4322
4352
|
return value;
|
|
4323
4353
|
}
|
|
4324
4354
|
}
|
|
4325
|
-
var DataTable = (0,
|
|
4355
|
+
var DataTable = (0, import_react34.forwardRef)(
|
|
4326
4356
|
({
|
|
4327
4357
|
columns,
|
|
4328
4358
|
data,
|
|
@@ -4343,7 +4373,7 @@ var DataTable = (0, import_react33.forwardRef)(
|
|
|
4343
4373
|
onBlurCapture,
|
|
4344
4374
|
...props
|
|
4345
4375
|
}, ref) => {
|
|
4346
|
-
const [sort, setSort] = (0,
|
|
4376
|
+
const [sort, setSort] = (0, import_react34.useState)(null);
|
|
4347
4377
|
const externallySorted = sortDescriptor !== void 0;
|
|
4348
4378
|
const toggleSort = (key) => {
|
|
4349
4379
|
setSort((prev) => {
|
|
@@ -4353,21 +4383,21 @@ var DataTable = (0, import_react33.forwardRef)(
|
|
|
4353
4383
|
});
|
|
4354
4384
|
};
|
|
4355
4385
|
const columnSortable = (col) => !externallySorted && sortable && col.sortable !== false;
|
|
4356
|
-
const order = (0,
|
|
4386
|
+
const order = (0, import_react34.useMemo)(
|
|
4357
4387
|
() => !externallySorted && sort ? sortedOrder(
|
|
4358
4388
|
data.map((row) => row[sort.key]),
|
|
4359
4389
|
sort.dir === "asc" ? 1 : -1
|
|
4360
4390
|
) : null,
|
|
4361
4391
|
[data, externallySorted, sort]
|
|
4362
4392
|
);
|
|
4363
|
-
const rows = (0,
|
|
4393
|
+
const rows = (0, import_react34.useMemo)(
|
|
4364
4394
|
() => order ? order.map((position) => data[position]) : data,
|
|
4365
4395
|
[data, order]
|
|
4366
4396
|
);
|
|
4367
|
-
const latestGetRowId = (0,
|
|
4397
|
+
const latestGetRowId = (0, import_react34.useRef)(getRowId);
|
|
4368
4398
|
latestGetRowId.current = getRowId;
|
|
4369
4399
|
const withRowIds = getRowId !== void 0;
|
|
4370
|
-
const rowKeys = (0,
|
|
4400
|
+
const rowKeys = (0, import_react34.useMemo)(() => {
|
|
4371
4401
|
const read = withRowIds ? latestGetRowId.current : void 0;
|
|
4372
4402
|
const keys2 = rows.map((row, position) => read?.(row, position) ?? String(position));
|
|
4373
4403
|
const index = /* @__PURE__ */ new Map();
|
|
@@ -4378,8 +4408,8 @@ var DataTable = (0, import_react33.forwardRef)(
|
|
|
4378
4408
|
}, [rows, withRowIds]);
|
|
4379
4409
|
const sortsItself = !externallySorted && sortable && columns.some((column) => column.sortable !== false);
|
|
4380
4410
|
const outsideEnvelope = sortsItself && !virtualization && data.length > SORTABLE_ROWS_UNWINDOWED;
|
|
4381
|
-
const warned = (0,
|
|
4382
|
-
(0,
|
|
4411
|
+
const warned = (0, import_react34.useRef)(false);
|
|
4412
|
+
(0, import_react34.useEffect)(() => {
|
|
4383
4413
|
if (process.env.NODE_ENV === "production" || !outsideEnvelope || warned.current) return;
|
|
4384
4414
|
warned.current = true;
|
|
4385
4415
|
console.warn(
|
|
@@ -4705,7 +4735,7 @@ var DataTableManifest = {
|
|
|
4705
4735
|
|
|
4706
4736
|
// src/Divider/Divider.tsx
|
|
4707
4737
|
var import_react_aria_components8 = require("react-aria-components");
|
|
4708
|
-
var
|
|
4738
|
+
var import_react35 = require("react");
|
|
4709
4739
|
var import_clsx21 = __toESM(require("clsx"), 1);
|
|
4710
4740
|
|
|
4711
4741
|
// src/Divider/Divider.manifest.ts
|
|
@@ -4730,7 +4760,7 @@ var DividerManifest = {
|
|
|
4730
4760
|
// src/Divider/Divider.tsx
|
|
4731
4761
|
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
4732
4762
|
var lineStyles = "bg-oprt-border";
|
|
4733
|
-
var Divider = (0,
|
|
4763
|
+
var Divider = (0, import_react35.forwardRef)((allProps, ref) => {
|
|
4734
4764
|
const {
|
|
4735
4765
|
className,
|
|
4736
4766
|
orientation: requested = "horizontal",
|
|
@@ -4784,7 +4814,7 @@ Divider.displayName = "Divider";
|
|
|
4784
4814
|
|
|
4785
4815
|
// src/DropdownMenu/DropdownMenu.tsx
|
|
4786
4816
|
var import_react_aria_components9 = require("react-aria-components");
|
|
4787
|
-
var
|
|
4817
|
+
var import_react36 = require("react");
|
|
4788
4818
|
var import_clsx22 = __toESM(require("clsx"), 1);
|
|
4789
4819
|
|
|
4790
4820
|
// src/DropdownMenu/DropdownMenu.manifest.ts
|
|
@@ -4868,8 +4898,8 @@ var DropdownMenuCompositionRules = {
|
|
|
4868
4898
|
|
|
4869
4899
|
// src/DropdownMenu/DropdownMenu.tsx
|
|
4870
4900
|
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
4871
|
-
var KeepOpenContext = (0,
|
|
4872
|
-
var DropdownMenu = (0,
|
|
4901
|
+
var KeepOpenContext = (0, import_react36.createContext)(null);
|
|
4902
|
+
var DropdownMenu = (0, import_react36.forwardRef)((props, ref) => {
|
|
4873
4903
|
const {
|
|
4874
4904
|
motion = "auto",
|
|
4875
4905
|
trigger,
|
|
@@ -4882,10 +4912,10 @@ var DropdownMenu = (0, import_react35.forwardRef)((props, ref) => {
|
|
|
4882
4912
|
children
|
|
4883
4913
|
} = props;
|
|
4884
4914
|
const motionState = useMotion(motion);
|
|
4885
|
-
const [localOpen, setLocalOpen] = (0,
|
|
4915
|
+
const [localOpen, setLocalOpen] = (0, import_react36.useState)(defaultOpen);
|
|
4886
4916
|
const isOpen = open ?? localOpen;
|
|
4887
|
-
const keepOpen = (0,
|
|
4888
|
-
const requestOpen = (0,
|
|
4917
|
+
const keepOpen = (0, import_react36.useRef)(false);
|
|
4918
|
+
const requestOpen = (0, import_react36.useCallback)(
|
|
4889
4919
|
(next) => {
|
|
4890
4920
|
if (!next && keepOpen.current) {
|
|
4891
4921
|
keepOpen.current = false;
|
|
@@ -4920,9 +4950,9 @@ var DropdownMenu = (0, import_react35.forwardRef)((props, ref) => {
|
|
|
4920
4950
|
] }, hydration.key) }) });
|
|
4921
4951
|
});
|
|
4922
4952
|
DropdownMenu.displayName = "DropdownMenu";
|
|
4923
|
-
var DropdownMenuItem = (0,
|
|
4953
|
+
var DropdownMenuItem = (0, import_react36.forwardRef)(
|
|
4924
4954
|
({ className, shortcut, danger = false, disabled, textValue, onSelect, children, ...props }, ref) => {
|
|
4925
|
-
const keepOpen = (0,
|
|
4955
|
+
const keepOpen = (0, import_react36.useContext)(KeepOpenContext);
|
|
4926
4956
|
const itemProps = { ...definedOnly(props) };
|
|
4927
4957
|
if (textValue !== void 0) itemProps["textValue"] = textValue;
|
|
4928
4958
|
else if (typeof children === "string") itemProps["textValue"] = children;
|
|
@@ -4956,7 +4986,7 @@ var DropdownMenuItem = (0, import_react35.forwardRef)(
|
|
|
4956
4986
|
}
|
|
4957
4987
|
);
|
|
4958
4988
|
DropdownMenuItem.displayName = "DropdownMenuItem";
|
|
4959
|
-
var DropdownMenuSeparator = (0,
|
|
4989
|
+
var DropdownMenuSeparator = (0, import_react36.forwardRef)(
|
|
4960
4990
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
4961
4991
|
import_react_aria_components9.Separator,
|
|
4962
4992
|
{
|
|
@@ -4968,7 +4998,7 @@ var DropdownMenuSeparator = (0, import_react35.forwardRef)(
|
|
|
4968
4998
|
)
|
|
4969
4999
|
);
|
|
4970
5000
|
DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
|
|
4971
|
-
var DropdownMenuLabel = (0,
|
|
5001
|
+
var DropdownMenuLabel = (0, import_react36.forwardRef)(
|
|
4972
5002
|
({ className, ...props }, ref) => (
|
|
4973
5003
|
// RAC's Header is a valid collection leaf inside a Menu, but a bare
|
|
4974
5004
|
// <header> element maps to the `banner` landmark role, which is illegal
|
|
@@ -5024,7 +5054,7 @@ var FieldManifest = {
|
|
|
5024
5054
|
var import_react_aria_components10 = require("react-aria-components");
|
|
5025
5055
|
var import_react_aria3 = require("react-aria");
|
|
5026
5056
|
var import_filterDOMProps = require("react-aria/filterDOMProps");
|
|
5027
|
-
var
|
|
5057
|
+
var import_react37 = require("react");
|
|
5028
5058
|
var import_clsx23 = __toESM(require("clsx"), 1);
|
|
5029
5059
|
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
5030
5060
|
var itemStyles3 = [
|
|
@@ -5079,7 +5109,7 @@ function report(mistake, prop, received) {
|
|
|
5079
5109
|
}
|
|
5080
5110
|
var NOT_APPLIED = ["role", "aria-orientation", "dangerouslySetInnerHTML"];
|
|
5081
5111
|
var buttonsIn = (root) => root ? Array.from(root.querySelectorAll("button")) : [];
|
|
5082
|
-
var FilterBar = (0,
|
|
5112
|
+
var FilterBar = (0, import_react37.forwardRef)((componentProps, ref) => {
|
|
5083
5113
|
const {
|
|
5084
5114
|
className,
|
|
5085
5115
|
filters,
|
|
@@ -5091,9 +5121,9 @@ var FilterBar = (0, import_react36.forwardRef)((componentProps, ref) => {
|
|
|
5091
5121
|
disabled = false,
|
|
5092
5122
|
...props
|
|
5093
5123
|
} = componentProps;
|
|
5094
|
-
const root = (0,
|
|
5124
|
+
const root = (0, import_react37.useRef)(null);
|
|
5095
5125
|
const mergedRef = useMergedRefs(root, ref);
|
|
5096
|
-
const [ownSelection, setOwnSelection] = (0,
|
|
5126
|
+
const [ownSelection, setOwnSelection] = (0, import_react37.useState)(
|
|
5097
5127
|
() => toKeys(defaultValue ?? "")
|
|
5098
5128
|
);
|
|
5099
5129
|
const selected = value !== void 0 ? toKeys(value) : ownSelection;
|
|
@@ -5105,7 +5135,7 @@ var FilterBar = (0, import_react36.forwardRef)((componentProps, ref) => {
|
|
|
5105
5135
|
const sourceProp = value !== void 0 ? "value" : "defaultValue";
|
|
5106
5136
|
const unavailableKey = JSON.stringify(unavailable);
|
|
5107
5137
|
const duplicatesKey = JSON.stringify(duplicates);
|
|
5108
|
-
(0,
|
|
5138
|
+
(0, import_react37.useEffect)(() => {
|
|
5109
5139
|
if (process.env.NODE_ENV === "production") return;
|
|
5110
5140
|
for (const key of JSON.parse(unavailableKey))
|
|
5111
5141
|
report("unknown value", sourceProp, key);
|
|
@@ -5138,7 +5168,7 @@ var FilterBar = (0, import_react36.forwardRef)((componentProps, ref) => {
|
|
|
5138
5168
|
for (const name of [...Object.keys(forwarded), ...NOT_APPLIED])
|
|
5139
5169
|
delete dropped[name];
|
|
5140
5170
|
const notApplied = NOT_APPLIED.filter((name) => props[name] !== void 0).join(" ");
|
|
5141
|
-
(0,
|
|
5171
|
+
(0, import_react37.useEffect)(() => {
|
|
5142
5172
|
if (process.env.NODE_ENV === "production") return;
|
|
5143
5173
|
for (const name of notApplied ? notApplied.split(" ") : []) report("not applied", name, name);
|
|
5144
5174
|
}, [notApplied]);
|
|
@@ -5237,7 +5267,7 @@ var FilterBarManifest = {
|
|
|
5237
5267
|
// src/Progress/Progress.tsx
|
|
5238
5268
|
var import_react_aria_components11 = require("react-aria-components");
|
|
5239
5269
|
var import_class_variance_authority14 = require("class-variance-authority");
|
|
5240
|
-
var
|
|
5270
|
+
var import_react38 = require("react");
|
|
5241
5271
|
var import_clsx24 = __toESM(require("clsx"), 1);
|
|
5242
5272
|
|
|
5243
5273
|
// src/Progress/Progress.manifest.ts
|
|
@@ -5287,7 +5317,7 @@ var SOLID_FILL = "bg-oprt-accent forced-colors:bg-[CanvasText] forced-colors:[fo
|
|
|
5287
5317
|
var HATCH_FILL = "[--oprt-hatch:var(--oprt-accent)] forced-colors:[--oprt-hatch:CanvasText] forced-colors:[forced-color-adjust:none] [background-image:repeating-linear-gradient(135deg,var(--oprt-hatch)_0,var(--oprt-hatch)_var(--oprt-space-0-5),transparent_var(--oprt-space-0-5),transparent_var(--oprt-space-1))]";
|
|
5288
5318
|
var SLIDE_STILL = "motion-reduce:animate-none forced-colors:animate-none";
|
|
5289
5319
|
var BLOCK_HATCH = ["\u259A", "\u259E"];
|
|
5290
|
-
var Progress = (0,
|
|
5320
|
+
var Progress = (0, import_react38.forwardRef)((allProps, ref) => {
|
|
5291
5321
|
const {
|
|
5292
5322
|
className,
|
|
5293
5323
|
value,
|
|
@@ -5393,7 +5423,7 @@ Progress.displayName = "Progress";
|
|
|
5393
5423
|
// src/RadioGroup/RadioGroup.tsx
|
|
5394
5424
|
var import_react_aria_components12 = require("react-aria-components");
|
|
5395
5425
|
var import_class_variance_authority15 = require("class-variance-authority");
|
|
5396
|
-
var
|
|
5426
|
+
var import_react39 = require("react");
|
|
5397
5427
|
var import_clsx25 = __toESM(require("clsx"), 1);
|
|
5398
5428
|
var import_icons12 = require("@oprt/icons");
|
|
5399
5429
|
|
|
@@ -5440,7 +5470,7 @@ var RadioGroupCompositionRules = {
|
|
|
5440
5470
|
|
|
5441
5471
|
// src/RadioGroup/RadioGroup.tsx
|
|
5442
5472
|
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
5443
|
-
var SizeContext = (0,
|
|
5473
|
+
var SizeContext = (0, import_react39.createContext)("md");
|
|
5444
5474
|
var groupStyles3 = (0, import_class_variance_authority15.cva)("flex font-sans", {
|
|
5445
5475
|
variants: {
|
|
5446
5476
|
orientation: {
|
|
@@ -5466,7 +5496,7 @@ var radioBoxStyles = (0, import_class_variance_authority15.cva)(
|
|
|
5466
5496
|
defaultVariants: { size: "md" }
|
|
5467
5497
|
}
|
|
5468
5498
|
);
|
|
5469
|
-
var RadioGroup = (0,
|
|
5499
|
+
var RadioGroup = (0, import_react39.forwardRef)(
|
|
5470
5500
|
({
|
|
5471
5501
|
className,
|
|
5472
5502
|
orientation,
|
|
@@ -5534,9 +5564,9 @@ var RadioGroup = (0, import_react38.forwardRef)(
|
|
|
5534
5564
|
}
|
|
5535
5565
|
);
|
|
5536
5566
|
RadioGroup.displayName = "RadioGroup";
|
|
5537
|
-
var Radio = (0,
|
|
5567
|
+
var Radio = (0, import_react39.forwardRef)(
|
|
5538
5568
|
({ className, children, value, disabled, id, "aria-label": ariaLabel }, ref) => {
|
|
5539
|
-
const size = (0,
|
|
5569
|
+
const size = (0, import_react39.useContext)(SizeContext);
|
|
5540
5570
|
const setNode = useMergedRefs(ref);
|
|
5541
5571
|
const inputRef = useInputRefObject(setNode);
|
|
5542
5572
|
const itemProps = definedOnly({ id, "aria-label": ariaLabel });
|
|
@@ -5566,24 +5596,24 @@ Radio.displayName = "Radio";
|
|
|
5566
5596
|
|
|
5567
5597
|
// src/Sidebar/Sidebar.tsx
|
|
5568
5598
|
var import_react_slot2 = require("@radix-ui/react-slot");
|
|
5569
|
-
var
|
|
5599
|
+
var import_react41 = require("react");
|
|
5570
5600
|
var import_clsx26 = __toESM(require("clsx"), 1);
|
|
5571
5601
|
|
|
5572
5602
|
// src/_internal/navigationLandmark.ts
|
|
5573
|
-
var
|
|
5574
|
-
var InsideNavigationLandmarkContext = (0,
|
|
5603
|
+
var import_react40 = require("react");
|
|
5604
|
+
var InsideNavigationLandmarkContext = (0, import_react40.createContext)(false);
|
|
5575
5605
|
var InsideNavigationLandmarkProvider = InsideNavigationLandmarkContext.Provider;
|
|
5576
5606
|
function useInsideNavigationLandmark() {
|
|
5577
|
-
return (0,
|
|
5607
|
+
return (0, import_react40.useContext)(InsideNavigationLandmarkContext);
|
|
5578
5608
|
}
|
|
5579
5609
|
|
|
5580
5610
|
// src/Sidebar/Sidebar.tsx
|
|
5581
5611
|
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
5582
|
-
var Sidebar = (0,
|
|
5612
|
+
var Sidebar = (0, import_react41.forwardRef)(
|
|
5583
5613
|
({ className, children, ...props }, ref) => {
|
|
5584
5614
|
const insideLandmark = useInsideNavigationLandmark();
|
|
5585
5615
|
const Root2 = insideLandmark ? "div" : "nav";
|
|
5586
|
-
const parts =
|
|
5616
|
+
const parts = import_react41.Children.toArray(children);
|
|
5587
5617
|
let start = 0;
|
|
5588
5618
|
while (start < parts.length && isPart(parts[start], SidebarLogo)) start += 1;
|
|
5589
5619
|
let end = parts.length;
|
|
@@ -5618,9 +5648,9 @@ var Sidebar = (0, import_react40.forwardRef)(
|
|
|
5618
5648
|
);
|
|
5619
5649
|
Sidebar.displayName = "Sidebar";
|
|
5620
5650
|
function isPart(node, part) {
|
|
5621
|
-
return (0,
|
|
5651
|
+
return (0, import_react41.isValidElement)(node) && node.type === part;
|
|
5622
5652
|
}
|
|
5623
|
-
var SidebarLogo = (0,
|
|
5653
|
+
var SidebarLogo = (0, import_react41.forwardRef)(
|
|
5624
5654
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5625
5655
|
"div",
|
|
5626
5656
|
{
|
|
@@ -5637,9 +5667,9 @@ var SidebarLogo = (0, import_react40.forwardRef)(
|
|
|
5637
5667
|
)
|
|
5638
5668
|
);
|
|
5639
5669
|
SidebarLogo.displayName = "SidebarLogo";
|
|
5640
|
-
var SidebarSection = (0,
|
|
5670
|
+
var SidebarSection = (0, import_react41.forwardRef)(
|
|
5641
5671
|
({ className, label, children, ...props }, ref) => {
|
|
5642
|
-
const labelId = (0,
|
|
5672
|
+
const labelId = (0, import_react41.useId)();
|
|
5643
5673
|
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
5644
5674
|
"div",
|
|
5645
5675
|
{
|
|
@@ -5663,7 +5693,7 @@ var SidebarSection = (0, import_react40.forwardRef)(
|
|
|
5663
5693
|
}
|
|
5664
5694
|
);
|
|
5665
5695
|
SidebarSection.displayName = "SidebarSection";
|
|
5666
|
-
var SidebarItem = (0,
|
|
5696
|
+
var SidebarItem = (0, import_react41.forwardRef)(
|
|
5667
5697
|
({ className, icon, active = false, href, asChild = false, children, ...props }, ref) => {
|
|
5668
5698
|
const Comp = asChild ? import_react_slot2.Slot : href ? "a" : "button";
|
|
5669
5699
|
const sharedProps = {
|
|
@@ -5691,7 +5721,7 @@ var SidebarItem = (0, import_react40.forwardRef)(
|
|
|
5691
5721
|
}
|
|
5692
5722
|
);
|
|
5693
5723
|
SidebarItem.displayName = "SidebarItem";
|
|
5694
|
-
var SidebarFooter = (0,
|
|
5724
|
+
var SidebarFooter = (0, import_react41.forwardRef)(
|
|
5695
5725
|
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5696
5726
|
"div",
|
|
5697
5727
|
{
|
|
@@ -5777,7 +5807,7 @@ var SidebarCompositionRules = {
|
|
|
5777
5807
|
|
|
5778
5808
|
// src/Skeleton/Skeleton.tsx
|
|
5779
5809
|
var import_class_variance_authority16 = require("class-variance-authority");
|
|
5780
|
-
var
|
|
5810
|
+
var import_react42 = require("react");
|
|
5781
5811
|
var import_clsx27 = __toESM(require("clsx"), 1);
|
|
5782
5812
|
|
|
5783
5813
|
// src/Skeleton/Skeleton.manifest.ts
|
|
@@ -5822,7 +5852,7 @@ var barStyles = (0, import_class_variance_authority16.cva)(
|
|
|
5822
5852
|
defaultVariants: { variant: "block" }
|
|
5823
5853
|
}
|
|
5824
5854
|
);
|
|
5825
|
-
var Skeleton = (0,
|
|
5855
|
+
var Skeleton = (0, import_react42.forwardRef)((allProps, ref) => {
|
|
5826
5856
|
const { className, variant = "block", width, height, lines = 3, ...props } = allProps;
|
|
5827
5857
|
if (process.env.NODE_ENV !== "production") {
|
|
5828
5858
|
devValidate("Skeleton", SkeletonManifest.Skeleton.props, { ...allProps });
|
|
@@ -5879,7 +5909,7 @@ Skeleton.displayName = "Skeleton";
|
|
|
5879
5909
|
var import_react_aria_components13 = require("react-aria-components");
|
|
5880
5910
|
var import_react_aria4 = require("react-aria");
|
|
5881
5911
|
var import_class_variance_authority17 = require("class-variance-authority");
|
|
5882
|
-
var
|
|
5912
|
+
var import_react43 = require("react");
|
|
5883
5913
|
var import_clsx28 = __toESM(require("clsx"), 1);
|
|
5884
5914
|
|
|
5885
5915
|
// src/Slider/Slider.manifest.ts
|
|
@@ -5989,8 +6019,8 @@ function ValueThumb({
|
|
|
5989
6019
|
index = 0,
|
|
5990
6020
|
...props
|
|
5991
6021
|
}) {
|
|
5992
|
-
const inputRef = (0,
|
|
5993
|
-
const state = (0,
|
|
6022
|
+
const inputRef = (0, import_react43.useRef)(null);
|
|
6023
|
+
const state = (0, import_react43.useContext)(import_react_aria_components13.SliderStateContext);
|
|
5994
6024
|
useIsomorphicLayoutEffect(() => {
|
|
5995
6025
|
const input = inputRef.current;
|
|
5996
6026
|
if (!input) return;
|
|
@@ -6002,7 +6032,7 @@ function ValueThumb({
|
|
|
6002
6032
|
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_aria_components13.SliderThumb, { ...props, index, inputRef });
|
|
6003
6033
|
}
|
|
6004
6034
|
var ENDS = ["lower", "upper"];
|
|
6005
|
-
var Slider = (0,
|
|
6035
|
+
var Slider = (0, import_react43.forwardRef)((props, ref) => {
|
|
6006
6036
|
const {
|
|
6007
6037
|
className,
|
|
6008
6038
|
style,
|
|
@@ -6049,7 +6079,7 @@ var Slider = (0, import_react42.forwardRef)((props, ref) => {
|
|
|
6049
6079
|
},
|
|
6050
6080
|
{ label: "labelledby" }
|
|
6051
6081
|
);
|
|
6052
|
-
const wrapper = (0,
|
|
6082
|
+
const wrapper = (0, import_react43.useRef)(null);
|
|
6053
6083
|
const ends = usePartIds(ENDS, {
|
|
6054
6084
|
readRendered: () => wrapper.current?.getAttribute("data-oprt-ids")
|
|
6055
6085
|
});
|
|
@@ -6143,7 +6173,7 @@ var Slider = (0, import_react42.forwardRef)((props, ref) => {
|
|
|
6143
6173
|
i
|
|
6144
6174
|
))
|
|
6145
6175
|
] }),
|
|
6146
|
-
showValue && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: valueStyles, "aria-hidden": "true", children: state.values.map((current, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
6176
|
+
showValue && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: valueStyles, "aria-hidden": "true", children: state.values.map((current, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react43.Fragment, { children: [
|
|
6147
6177
|
index > 0 && " \u2013 ",
|
|
6148
6178
|
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(NumberText, { value: formatValue ? formatValue(current) : current })
|
|
6149
6179
|
] }, index)) })
|
|
@@ -6157,7 +6187,7 @@ Slider.displayName = "Slider";
|
|
|
6157
6187
|
|
|
6158
6188
|
// src/StatCard/StatCard.tsx
|
|
6159
6189
|
var import_icons13 = require("@oprt/icons");
|
|
6160
|
-
var
|
|
6190
|
+
var import_react44 = require("react");
|
|
6161
6191
|
var import_clsx29 = __toESM(require("clsx"), 1);
|
|
6162
6192
|
|
|
6163
6193
|
// src/StatCard/StatCard.manifest.ts
|
|
@@ -6260,7 +6290,7 @@ function StatValue({ value, unit }) {
|
|
|
6260
6290
|
};
|
|
6261
6291
|
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { "data-oprt-stat-value": "", className: VALUE_NUMBER, style, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { "data-oprt-stat-value-text": "", children: [
|
|
6262
6292
|
number.lead.length > 0 && // The groups before the last, each a run that cannot wrap, with a break after each.
|
|
6263
|
-
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: number.lead.map((piece, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
6293
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: number.lead.map((piece, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react44.Fragment, { children: [
|
|
6264
6294
|
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "whitespace-nowrap", children: piece }),
|
|
6265
6295
|
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("wbr", {})
|
|
6266
6296
|
] }, index)) }),
|
|
@@ -6281,7 +6311,7 @@ function StatValue({ value, unit }) {
|
|
|
6281
6311
|
unitRest
|
|
6282
6312
|
] }) : text }) });
|
|
6283
6313
|
}
|
|
6284
|
-
var StatCard = (0,
|
|
6314
|
+
var StatCard = (0, import_react44.forwardRef)((allProps, ref) => {
|
|
6285
6315
|
const {
|
|
6286
6316
|
className,
|
|
6287
6317
|
label,
|
|
@@ -6296,7 +6326,7 @@ var StatCard = (0, import_react43.forwardRef)((allProps, ref) => {
|
|
|
6296
6326
|
"aria-labelledby": ariaLabelledBy,
|
|
6297
6327
|
...props
|
|
6298
6328
|
} = allProps;
|
|
6299
|
-
const labelId = (0,
|
|
6329
|
+
const labelId = (0, import_react44.useId)();
|
|
6300
6330
|
const showTrend = delta !== void 0 || trend !== void 0;
|
|
6301
6331
|
const explicitTrend = has(TREND_ICONS, trend) ? trend : void 0;
|
|
6302
6332
|
const resolvedTrend = explicitTrend ?? (delta !== void 0 ? deriveTrend(delta) : "flat");
|
|
@@ -6358,7 +6388,7 @@ StatCard.displayName = "StatCard";
|
|
|
6358
6388
|
|
|
6359
6389
|
// src/Tabs/Tabs.tsx
|
|
6360
6390
|
var import_react_aria_components14 = require("react-aria-components");
|
|
6361
|
-
var
|
|
6391
|
+
var import_react47 = require("react");
|
|
6362
6392
|
var import_clsx30 = __toESM(require("clsx"), 1);
|
|
6363
6393
|
|
|
6364
6394
|
// src/Tabs/Tabs.manifest.ts
|
|
@@ -6431,10 +6461,10 @@ var TabsCompositionRules = {
|
|
|
6431
6461
|
};
|
|
6432
6462
|
|
|
6433
6463
|
// src/Tabs/useTabsIndicator.ts
|
|
6434
|
-
var
|
|
6464
|
+
var import_react45 = require("react");
|
|
6435
6465
|
function useTabsIndicator(list, vertical) {
|
|
6436
|
-
const [geometry, setGeometry] = (0,
|
|
6437
|
-
const selectedId = (0,
|
|
6466
|
+
const [geometry, setGeometry] = (0, import_react45.useState)();
|
|
6467
|
+
const selectedId = (0, import_react45.useRef)(void 0);
|
|
6438
6468
|
useIsomorphicLayoutEffect(() => {
|
|
6439
6469
|
const node = list.current;
|
|
6440
6470
|
if (!node) return;
|
|
@@ -6496,7 +6526,7 @@ function useTabsIndicator(list, vertical) {
|
|
|
6496
6526
|
}
|
|
6497
6527
|
|
|
6498
6528
|
// src/Tabs/useTabsScroll.ts
|
|
6499
|
-
var
|
|
6529
|
+
var import_react46 = require("react");
|
|
6500
6530
|
function hiddenSides(row) {
|
|
6501
6531
|
const range = row.scrollWidth - row.clientWidth;
|
|
6502
6532
|
if (range <= 1) return void 0;
|
|
@@ -6524,7 +6554,7 @@ function revealTab(row, tab) {
|
|
|
6524
6554
|
if (delta !== 0) row.scrollLeft += delta;
|
|
6525
6555
|
}
|
|
6526
6556
|
function useTabsScroll(list, vertical) {
|
|
6527
|
-
const [fade, setFade] = (0,
|
|
6557
|
+
const [fade, setFade] = (0, import_react46.useState)();
|
|
6528
6558
|
useIsomorphicLayoutEffect(() => {
|
|
6529
6559
|
const row = list.current;
|
|
6530
6560
|
if (!row || vertical) {
|
|
@@ -6612,8 +6642,8 @@ function useTabsScroll(list, vertical) {
|
|
|
6612
6642
|
|
|
6613
6643
|
// src/Tabs/Tabs.tsx
|
|
6614
6644
|
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
6615
|
-
var TabsOrientationContext = (0,
|
|
6616
|
-
var Tabs = (0,
|
|
6645
|
+
var TabsOrientationContext = (0, import_react47.createContext)("horizontal");
|
|
6646
|
+
var Tabs = (0, import_react47.forwardRef)(
|
|
6617
6647
|
({
|
|
6618
6648
|
className,
|
|
6619
6649
|
motion = "auto",
|
|
@@ -6661,10 +6691,10 @@ var scrollingRow = [
|
|
|
6661
6691
|
"data-[fade=right]:[mask-image:linear-gradient(to_left,transparent,var(--oprt-text)_var(--oprt-space-4))]",
|
|
6662
6692
|
"data-[fade=both]:[mask-image:linear-gradient(to_right,transparent,var(--oprt-text)_var(--oprt-space-4),var(--oprt-text)_calc(100%_-_var(--oprt-space-4)),transparent)]"
|
|
6663
6693
|
];
|
|
6664
|
-
var TabsList = (0,
|
|
6694
|
+
var TabsList = (0, import_react47.forwardRef)(
|
|
6665
6695
|
({ className, children, ...props }, ref) => {
|
|
6666
|
-
const orientation = (0,
|
|
6667
|
-
const list = (0,
|
|
6696
|
+
const orientation = (0, import_react47.useContext)(TabsOrientationContext);
|
|
6697
|
+
const list = (0, import_react47.useRef)(null);
|
|
6668
6698
|
const setNode = useMergedRefs(list, ref);
|
|
6669
6699
|
const vertical = orientation === "vertical";
|
|
6670
6700
|
const geometry = useTabsIndicator(list, vertical);
|
|
@@ -6716,7 +6746,7 @@ var TabsList = (0, import_react46.forwardRef)(
|
|
|
6716
6746
|
}
|
|
6717
6747
|
);
|
|
6718
6748
|
TabsList.displayName = "TabsList";
|
|
6719
|
-
var TabsTrigger = (0,
|
|
6749
|
+
var TabsTrigger = (0, import_react47.forwardRef)(
|
|
6720
6750
|
({ className, value, disabled, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
6721
6751
|
import_react_aria_components14.Tab,
|
|
6722
6752
|
{
|
|
@@ -6742,7 +6772,7 @@ var TabsTrigger = (0, import_react46.forwardRef)(
|
|
|
6742
6772
|
)
|
|
6743
6773
|
);
|
|
6744
6774
|
TabsTrigger.displayName = "TabsTrigger";
|
|
6745
|
-
var TabsContent = (0,
|
|
6775
|
+
var TabsContent = (0, import_react47.forwardRef)(
|
|
6746
6776
|
({ className, value, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
6747
6777
|
import_react_aria_components14.TabPanel,
|
|
6748
6778
|
{
|
|
@@ -6761,7 +6791,7 @@ var TabsContent = (0, import_react46.forwardRef)(
|
|
|
6761
6791
|
TabsContent.displayName = "TabsContent";
|
|
6762
6792
|
|
|
6763
6793
|
// src/Textarea/Textarea.tsx
|
|
6764
|
-
var
|
|
6794
|
+
var import_react48 = require("react");
|
|
6765
6795
|
var import_class_variance_authority18 = require("class-variance-authority");
|
|
6766
6796
|
var import_clsx31 = __toESM(require("clsx"), 1);
|
|
6767
6797
|
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
@@ -6781,7 +6811,7 @@ var wrapperStyles2 = (0, import_class_variance_authority18.cva)(
|
|
|
6781
6811
|
}
|
|
6782
6812
|
);
|
|
6783
6813
|
var textareaStyles = "w-full bg-transparent border-0 outline-hidden resize-none font-sans font-medium text-oprt-md text-oprt-text placeholder:text-oprt-text-placeholder disabled:placeholder:text-oprt-text-dim disabled:cursor-not-allowed disabled:text-oprt-text-dim";
|
|
6784
|
-
var Textarea = (0,
|
|
6814
|
+
var Textarea = (0, import_react48.forwardRef)(
|
|
6785
6815
|
({
|
|
6786
6816
|
className,
|
|
6787
6817
|
invalid,
|
|
@@ -6849,7 +6879,7 @@ var TextareaManifest = {
|
|
|
6849
6879
|
var import_icons14 = require("@oprt/icons");
|
|
6850
6880
|
var RadixToast = __toESM(require("@radix-ui/react-toast"), 1);
|
|
6851
6881
|
var import_class_variance_authority19 = require("class-variance-authority");
|
|
6852
|
-
var
|
|
6882
|
+
var import_react49 = require("react");
|
|
6853
6883
|
var import_clsx32 = __toESM(require("clsx"), 1);
|
|
6854
6884
|
|
|
6855
6885
|
// src/Toast/Toast.manifest.ts
|
|
@@ -6937,9 +6967,9 @@ var ICONS2 = {
|
|
|
6937
6967
|
function severityOf(variant) {
|
|
6938
6968
|
return typeof variant === "string" && Object.prototype.hasOwnProperty.call(ICONS2, variant) ? variant : "info";
|
|
6939
6969
|
}
|
|
6940
|
-
var SwipeDirectionContext = (0,
|
|
6970
|
+
var SwipeDirectionContext = (0, import_react49.createContext)("right");
|
|
6941
6971
|
function useNewestInView(region) {
|
|
6942
|
-
(0,
|
|
6972
|
+
(0, import_react49.useEffect)(() => {
|
|
6943
6973
|
const list = region.current;
|
|
6944
6974
|
if (!list) return;
|
|
6945
6975
|
const atEnd = () => list.scrollHeight - list.clientHeight - list.scrollTop <= 1;
|
|
@@ -6966,11 +6996,11 @@ function useNewestInView(region) {
|
|
|
6966
6996
|
};
|
|
6967
6997
|
}, [region]);
|
|
6968
6998
|
}
|
|
6969
|
-
var ToastProvider = (0,
|
|
6999
|
+
var ToastProvider = (0, import_react49.forwardRef)((props, ref) => {
|
|
6970
7000
|
const { children, label = "Notifications", swipeDirection = "right", duration } = props;
|
|
6971
7001
|
const providerProps = { label, swipeDirection };
|
|
6972
7002
|
if (duration !== void 0) providerProps["duration"] = duration;
|
|
6973
|
-
const region = (0,
|
|
7003
|
+
const region = (0, import_react49.useRef)(null);
|
|
6974
7004
|
const regionRef = useMergedRefs(ref, region);
|
|
6975
7005
|
useNewestInView(region);
|
|
6976
7006
|
if (process.env.NODE_ENV !== "production") {
|
|
@@ -7025,7 +7055,7 @@ var titleStyles = (0, import_class_variance_authority19.cva)("m-0 text-oprt-sm u
|
|
|
7025
7055
|
},
|
|
7026
7056
|
defaultVariants: { variant: "info" }
|
|
7027
7057
|
});
|
|
7028
|
-
var Toast = (0,
|
|
7058
|
+
var Toast = (0, import_react49.forwardRef)((allProps, ref) => {
|
|
7029
7059
|
const {
|
|
7030
7060
|
className,
|
|
7031
7061
|
variant,
|
|
@@ -7043,7 +7073,7 @@ var Toast = (0, import_react48.forwardRef)((allProps, ref) => {
|
|
|
7043
7073
|
} = allProps;
|
|
7044
7074
|
const severity = severityOf(variant);
|
|
7045
7075
|
const SeverityIcon = ICONS2[severity];
|
|
7046
|
-
const swipeDirection = (0,
|
|
7076
|
+
const swipeDirection = (0, import_react49.useContext)(SwipeDirectionContext);
|
|
7047
7077
|
if (process.env.NODE_ENV !== "production") {
|
|
7048
7078
|
devValidate("Toast", ToastManifest.Toast.props, allProps);
|
|
7049
7079
|
}
|
|
@@ -7077,7 +7107,7 @@ var Toast = (0, import_react48.forwardRef)((allProps, ref) => {
|
|
|
7077
7107
|
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex min-w-0 flex-1 select-text flex-col gap-1u oprt-wrap-anywhere", children: [
|
|
7078
7108
|
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(RadixToast.Title, { className: titleStyles({ variant: severity }), children: title }),
|
|
7079
7109
|
description && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(RadixToast.Description, { className: "m-0 text-oprt-base normal-case text-oprt-text", children: [
|
|
7080
|
-
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", {
|
|
7110
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { "data-radix-toast-announce-exclude": "", "data-radix-toast-announce-alt": ". " }),
|
|
7081
7111
|
description
|
|
7082
7112
|
] })
|
|
7083
7113
|
] }),
|
|
@@ -7098,7 +7128,7 @@ Toast.displayName = "Toast";
|
|
|
7098
7128
|
// src/Toggle/Toggle.tsx
|
|
7099
7129
|
var import_react_aria_components15 = require("react-aria-components");
|
|
7100
7130
|
var import_class_variance_authority20 = require("class-variance-authority");
|
|
7101
|
-
var
|
|
7131
|
+
var import_react50 = require("react");
|
|
7102
7132
|
var import_clsx33 = __toESM(require("clsx"), 1);
|
|
7103
7133
|
|
|
7104
7134
|
// src/Toggle/Toggle.manifest.ts
|
|
@@ -7207,7 +7237,7 @@ var thumbStyles2 = (0, import_class_variance_authority20.cva)(
|
|
|
7207
7237
|
defaultVariants: { size: "md" }
|
|
7208
7238
|
}
|
|
7209
7239
|
);
|
|
7210
|
-
var Toggle = (0,
|
|
7240
|
+
var Toggle = (0, import_react50.forwardRef)((allProps, ref) => {
|
|
7211
7241
|
const {
|
|
7212
7242
|
className,
|
|
7213
7243
|
motion = "auto",
|
|
@@ -7247,7 +7277,7 @@ var Toggle = (0, import_react49.forwardRef)((allProps, ref) => {
|
|
|
7247
7277
|
devValidate("Toggle", ToggleManifest.Toggle.props, { ...allProps });
|
|
7248
7278
|
}
|
|
7249
7279
|
const setInvalidNode = useAriaInvalidRef(ref, isInvalid);
|
|
7250
|
-
const setNode = (0,
|
|
7280
|
+
const setNode = (0, import_react50.useCallback)(
|
|
7251
7281
|
(node) => {
|
|
7252
7282
|
if (node) {
|
|
7253
7283
|
if (isRequired) node.setAttribute("aria-required", "true");
|
|
@@ -7295,7 +7325,7 @@ Toggle.displayName = "Toggle";
|
|
|
7295
7325
|
// src/Toolbar/Toolbar.tsx
|
|
7296
7326
|
var import_react_aria_components16 = require("react-aria-components");
|
|
7297
7327
|
var import_class_variance_authority21 = require("class-variance-authority");
|
|
7298
|
-
var
|
|
7328
|
+
var import_react51 = require("react");
|
|
7299
7329
|
var import_clsx34 = __toESM(require("clsx"), 1);
|
|
7300
7330
|
|
|
7301
7331
|
// src/Toolbar/Toolbar.manifest.ts
|
|
@@ -7376,8 +7406,8 @@ var toolbarStyles = (0, import_class_variance_authority21.cva)("flex bg-oprt-sur
|
|
|
7376
7406
|
},
|
|
7377
7407
|
defaultVariants: { orientation: "horizontal" }
|
|
7378
7408
|
});
|
|
7379
|
-
var ToolbarOrientationContext = (0,
|
|
7380
|
-
var Toolbar = (0,
|
|
7409
|
+
var ToolbarOrientationContext = (0, import_react51.createContext)(void 0);
|
|
7410
|
+
var Toolbar = (0, import_react51.forwardRef)((allProps, ref) => {
|
|
7381
7411
|
const {
|
|
7382
7412
|
className,
|
|
7383
7413
|
orientation = "horizontal",
|
|
@@ -7418,10 +7448,10 @@ var separatorStyles = (0, import_class_variance_authority21.cva)("bg-oprt-border
|
|
|
7418
7448
|
},
|
|
7419
7449
|
defaultVariants: { orientation: "horizontal" }
|
|
7420
7450
|
});
|
|
7421
|
-
var ToolbarSeparator = (0,
|
|
7451
|
+
var ToolbarSeparator = (0, import_react51.forwardRef)(
|
|
7422
7452
|
(allProps, ref) => {
|
|
7423
7453
|
const { className, orientation: given, ...props } = allProps;
|
|
7424
|
-
const inherited = (0,
|
|
7454
|
+
const inherited = (0, import_react51.useContext)(ToolbarOrientationContext);
|
|
7425
7455
|
const orientation = given ?? inherited ?? "horizontal";
|
|
7426
7456
|
if (process.env.NODE_ENV !== "production") {
|
|
7427
7457
|
devValidate("ToolbarSeparator", ToolbarManifest.ToolbarSeparator.props, { ...allProps });
|
|
@@ -7442,7 +7472,7 @@ ToolbarSeparator.displayName = "ToolbarSeparator";
|
|
|
7442
7472
|
|
|
7443
7473
|
// src/Tooltip/Tooltip.tsx
|
|
7444
7474
|
var import_react_aria_components17 = require("react-aria-components");
|
|
7445
|
-
var
|
|
7475
|
+
var import_react52 = require("react");
|
|
7446
7476
|
var import_clsx35 = __toESM(require("clsx"), 1);
|
|
7447
7477
|
|
|
7448
7478
|
// src/Tooltip/Tooltip.manifest.ts
|
|
@@ -7474,7 +7504,7 @@ var TooltipManifest = {
|
|
|
7474
7504
|
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
7475
7505
|
var PLAIN_TRIGGER = "inline-flex min-h-3u items-center border-0 bg-transparent p-0 [color:inherit] [font:inherit] [letter-spacing:inherit] underline decoration-dotted underline-offset-2 cursor-help outline-hidden focus-visible:shadow-oprt-focus";
|
|
7476
7506
|
var CLOSE_DELAY = 150;
|
|
7477
|
-
var Tooltip = (0,
|
|
7507
|
+
var Tooltip = (0, import_react52.forwardRef)(
|
|
7478
7508
|
({
|
|
7479
7509
|
content,
|
|
7480
7510
|
children,
|
|
@@ -7487,11 +7517,11 @@ var Tooltip = (0, import_react51.forwardRef)(
|
|
|
7487
7517
|
className,
|
|
7488
7518
|
...contentProps
|
|
7489
7519
|
}, ref) => {
|
|
7490
|
-
const [localOpen, setLocalOpen] = (0,
|
|
7520
|
+
const [localOpen, setLocalOpen] = (0, import_react52.useState)(defaultOpen ?? false);
|
|
7491
7521
|
const isOpen = open ?? localOpen;
|
|
7492
|
-
const tapped = (0,
|
|
7493
|
-
const [tapOpen, setTapOpen] = (0,
|
|
7494
|
-
const setOpen = (0,
|
|
7522
|
+
const tapped = (0, import_react52.useRef)(null);
|
|
7523
|
+
const [tapOpen, setTapOpen] = (0, import_react52.useState)(false);
|
|
7524
|
+
const setOpen = (0, import_react52.useCallback)(
|
|
7495
7525
|
(next) => {
|
|
7496
7526
|
if (!next) setTapOpen(false);
|
|
7497
7527
|
if (open === void 0) setLocalOpen(next);
|
|
@@ -7499,7 +7529,7 @@ var Tooltip = (0, import_react51.forwardRef)(
|
|
|
7499
7529
|
},
|
|
7500
7530
|
[open, onOpenChange]
|
|
7501
7531
|
);
|
|
7502
|
-
(0,
|
|
7532
|
+
(0, import_react52.useEffect)(() => {
|
|
7503
7533
|
if (!tapOpen || !isOpen) return;
|
|
7504
7534
|
const dismiss = (event) => {
|
|
7505
7535
|
if (!tapped.current?.contains(event.target)) setOpen(false);
|
|
@@ -7513,7 +7543,7 @@ var Tooltip = (0, import_react51.forwardRef)(
|
|
|
7513
7543
|
if (children === null || children === void 0 || typeof children === "boolean") return null;
|
|
7514
7544
|
const element = isSingleElement(children) ? children : null;
|
|
7515
7545
|
const unavailable = element !== null && (element.props.disabled === true || element.props.isDisabled === true);
|
|
7516
|
-
const trigger = !element ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("button", { type: "button", className: PLAIN_TRIGGER, children }) : unavailable ? (0,
|
|
7546
|
+
const trigger = !element ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("button", { type: "button", className: PLAIN_TRIGGER, children }) : unavailable ? (0, import_react52.cloneElement)(element, {
|
|
7517
7547
|
onPointerUp: (event) => {
|
|
7518
7548
|
element.props.onPointerUp?.(event);
|
|
7519
7549
|
if (event.pointerType === "mouse") return;
|
|
@@ -7570,7 +7600,7 @@ var Tooltip = (0, import_react51.forwardRef)(
|
|
|
7570
7600
|
Tooltip.displayName = "Tooltip";
|
|
7571
7601
|
|
|
7572
7602
|
// src/Chart/Chart.tsx
|
|
7573
|
-
var
|
|
7603
|
+
var import_react54 = require("react");
|
|
7574
7604
|
var import_react_aria5 = require("react-aria");
|
|
7575
7605
|
var import_class_variance_authority22 = require("class-variance-authority");
|
|
7576
7606
|
var import_clsx37 = __toESM(require("clsx"), 1);
|
|
@@ -7684,7 +7714,7 @@ var ChartManifest = {
|
|
|
7684
7714
|
};
|
|
7685
7715
|
|
|
7686
7716
|
// src/Chart/ChartControls.tsx
|
|
7687
|
-
var
|
|
7717
|
+
var import_react53 = require("react");
|
|
7688
7718
|
var import_react_aria_components18 = require("react-aria-components");
|
|
7689
7719
|
var import_clsx36 = __toESM(require("clsx"), 1);
|
|
7690
7720
|
|
|
@@ -7897,7 +7927,7 @@ function ChartInspection({
|
|
|
7897
7927
|
inputRef
|
|
7898
7928
|
}) {
|
|
7899
7929
|
const hydration = useHydrationRoot();
|
|
7900
|
-
(0,
|
|
7930
|
+
(0, import_react53.useEffect)(() => {
|
|
7901
7931
|
inputRef.current?.setAttribute("aria-valuetext", describe(index));
|
|
7902
7932
|
});
|
|
7903
7933
|
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
@@ -7915,7 +7945,7 @@ function ChartInspection({
|
|
|
7915
7945
|
hydration.key
|
|
7916
7946
|
);
|
|
7917
7947
|
}
|
|
7918
|
-
var ChartRangeSelector = (0,
|
|
7948
|
+
var ChartRangeSelector = (0, import_react53.memo)(function ChartRangeSelector2({
|
|
7919
7949
|
label,
|
|
7920
7950
|
series,
|
|
7921
7951
|
domain,
|
|
@@ -7926,15 +7956,15 @@ var ChartRangeSelector = (0, import_react52.memo)(function ChartRangeSelector2({
|
|
|
7926
7956
|
onChange
|
|
7927
7957
|
}) {
|
|
7928
7958
|
const hydration = useHydrationRoot();
|
|
7929
|
-
const startRef = (0,
|
|
7930
|
-
const endRef = (0,
|
|
7931
|
-
(0,
|
|
7959
|
+
const startRef = (0, import_react53.useRef)(null);
|
|
7960
|
+
const endRef = (0, import_react53.useRef)(null);
|
|
7961
|
+
(0, import_react53.useEffect)(() => {
|
|
7932
7962
|
startRef.current?.setAttribute("aria-valuetext", format(range.start));
|
|
7933
7963
|
endRef.current?.setAttribute("aria-valuetext", format(range.end));
|
|
7934
7964
|
});
|
|
7935
7965
|
const start = fraction(range.start, domain) * 1e3;
|
|
7936
7966
|
const end = fraction(range.end, domain) * 1e3;
|
|
7937
|
-
const overview = (0,
|
|
7967
|
+
const overview = (0, import_react53.useMemo)(() => {
|
|
7938
7968
|
const overviewSeries = series.map((item) => ({
|
|
7939
7969
|
...item,
|
|
7940
7970
|
data: item.data.filter(
|
|
@@ -8179,7 +8209,7 @@ function binLabel(data, index, formatNumber, separator) {
|
|
|
8179
8209
|
const end = formatNumber(withoutFloatNoise(data.edges[index + 1]));
|
|
8180
8210
|
return start === end ? start : `[${start}${separator}${end}${index === data.edges.length - 2 ? "]" : ")"}`;
|
|
8181
8211
|
}
|
|
8182
|
-
var DataView = (0,
|
|
8212
|
+
var DataView = (0, import_react54.memo)(function DataView2({
|
|
8183
8213
|
id,
|
|
8184
8214
|
label,
|
|
8185
8215
|
series,
|
|
@@ -8404,7 +8434,7 @@ function seriesMarks(item, seriesIndex, samples, context) {
|
|
|
8404
8434
|
) }, index))
|
|
8405
8435
|
] });
|
|
8406
8436
|
}
|
|
8407
|
-
var Chart = (0,
|
|
8437
|
+
var Chart = (0, import_react54.forwardRef)((allProps, ref) => {
|
|
8408
8438
|
const {
|
|
8409
8439
|
label,
|
|
8410
8440
|
series,
|
|
@@ -8433,43 +8463,43 @@ var Chart = (0, import_react53.forwardRef)((allProps, ref) => {
|
|
|
8433
8463
|
if (process.env.NODE_ENV !== "production") {
|
|
8434
8464
|
devValidate("Chart", ChartManifest.Chart.props, { ...allProps });
|
|
8435
8465
|
}
|
|
8436
|
-
const labelRef = (0,
|
|
8466
|
+
const labelRef = (0, import_react54.useRef)(null);
|
|
8437
8467
|
const { locale } = (0, import_react_aria5.useLocale)();
|
|
8438
8468
|
const numberFormat = (0, import_react_aria5.useNumberFormatter)(EXACT_NUMBER);
|
|
8439
|
-
const separator = (0,
|
|
8440
|
-
const formatNumber = (0,
|
|
8469
|
+
const separator = (0, import_react54.useMemo)(() => intervalSeparator(locale), [locale]);
|
|
8470
|
+
const formatNumber = (0, import_react54.useCallback)(
|
|
8441
8471
|
(value) => numberFormat.format(value + 0),
|
|
8442
8472
|
[numberFormat]
|
|
8443
8473
|
);
|
|
8444
8474
|
const cellFormat = (0, import_react_aria5.useNumberFormatter)(CELL_NUMBER);
|
|
8445
|
-
const formatCell = (0,
|
|
8475
|
+
const formatCell = (0, import_react54.useCallback)((value) => cellFormat.format(value + 0), [cellFormat]);
|
|
8446
8476
|
const ids = usePartIds(["label", "description", "hatch", "data"], {
|
|
8447
8477
|
readRendered: () => labelRef.current?.id.replace(/-label$/, "")
|
|
8448
8478
|
});
|
|
8449
|
-
const plotRef = (0,
|
|
8479
|
+
const plotRef = (0, import_react54.useRef)(null);
|
|
8450
8480
|
const plotWidth = useElementWidth(plotRef, { initial: 640, min: 0 });
|
|
8451
|
-
const [localHidden, setLocalHidden] = (0,
|
|
8452
|
-
const [showData, setShowData] = (0,
|
|
8453
|
-
const [localRange, setLocalRange] = (0,
|
|
8454
|
-
const [inspection, setInspection] = (0,
|
|
8455
|
-
const [pinned, setPinned] = (0,
|
|
8456
|
-
const [inspectionFocused, setInspectionFocused] = (0,
|
|
8457
|
-
const [emphasized, setEmphasized] = (0,
|
|
8458
|
-
const inspectionRef = (0,
|
|
8481
|
+
const [localHidden, setLocalHidden] = (0, import_react54.useState)([]);
|
|
8482
|
+
const [showData, setShowData] = (0, import_react54.useState)(false);
|
|
8483
|
+
const [localRange, setLocalRange] = (0, import_react54.useState)();
|
|
8484
|
+
const [inspection, setInspection] = (0, import_react54.useState)(null);
|
|
8485
|
+
const [pinned, setPinned] = (0, import_react54.useState)(false);
|
|
8486
|
+
const [inspectionFocused, setInspectionFocused] = (0, import_react54.useState)(false);
|
|
8487
|
+
const [emphasized, setEmphasized] = (0, import_react54.useState)(null);
|
|
8488
|
+
const inspectionRef = (0, import_react54.useRef)(null);
|
|
8459
8489
|
const hiddenKey = JSON.stringify(hiddenSeries ?? localHidden);
|
|
8460
|
-
const hidden = (0,
|
|
8490
|
+
const hidden = (0, import_react54.useMemo)(() => new Set(JSON.parse(hiddenKey)), [hiddenKey]);
|
|
8461
8491
|
const inspectable = variant === "line" || variant === "area" || variant === "bar";
|
|
8462
|
-
const fullVisible = (0,
|
|
8492
|
+
const fullVisible = (0, import_react54.useMemo)(
|
|
8463
8493
|
() => series.filter((item) => !hidden.has(item.id)),
|
|
8464
8494
|
[series, hidden]
|
|
8465
8495
|
);
|
|
8466
|
-
const dataDomain = (0,
|
|
8496
|
+
const dataDomain = (0, import_react54.useMemo)(
|
|
8467
8497
|
() => extent(series.flatMap((item) => item.data.map((point) => point.x))),
|
|
8468
8498
|
[series]
|
|
8469
8499
|
);
|
|
8470
8500
|
const suppliedStart = suppliedXDomain?.start;
|
|
8471
8501
|
const suppliedEnd = suppliedXDomain?.end;
|
|
8472
|
-
const fullDomain = (0,
|
|
8502
|
+
const fullDomain = (0, import_react54.useMemo)(
|
|
8473
8503
|
() => inspectable && suppliedStart !== void 0 && suppliedEnd !== void 0 && Number.isFinite(suppliedStart) && Number.isFinite(suppliedEnd) && suppliedStart < suppliedEnd ? { min: suppliedStart, max: suppliedEnd } : dataDomain,
|
|
8474
8504
|
[inspectable, suppliedStart, suppliedEnd, dataDomain]
|
|
8475
8505
|
);
|
|
@@ -8477,7 +8507,7 @@ var Chart = (0, import_react53.forwardRef)((allProps, ref) => {
|
|
|
8477
8507
|
const requestedStart = requested?.start;
|
|
8478
8508
|
const requestedEnd = requested?.end;
|
|
8479
8509
|
const controlledRange = range !== void 0;
|
|
8480
|
-
const view = (0,
|
|
8510
|
+
const view = (0, import_react54.useMemo)(() => {
|
|
8481
8511
|
const full = { start: fullDomain.min, end: fullDomain.max, valid: false };
|
|
8482
8512
|
if (!inspectable || requestedStart === void 0 || requestedEnd === void 0) return full;
|
|
8483
8513
|
if (!Number.isFinite(requestedStart) || !Number.isFinite(requestedEnd) || requestedStart >= requestedEnd)
|
|
@@ -8492,7 +8522,7 @@ var Chart = (0, import_react53.forwardRef)((allProps, ref) => {
|
|
|
8492
8522
|
return controlledRange ? { start: requestedStart, end: requestedEnd, valid: true } : { ...full, valid: true };
|
|
8493
8523
|
}, [inspectable, requestedStart, requestedEnd, controlledRange, fullDomain]);
|
|
8494
8524
|
const narrowed = inspectable && (view.start > dataDomain.min || view.end < dataDomain.max);
|
|
8495
|
-
const visible = (0,
|
|
8525
|
+
const visible = (0, import_react54.useMemo)(
|
|
8496
8526
|
() => narrowed ? fullVisible.map((item) => ({
|
|
8497
8527
|
...item,
|
|
8498
8528
|
data: item.data.filter(
|
|
@@ -8501,20 +8531,20 @@ var Chart = (0, import_react53.forwardRef)((allProps, ref) => {
|
|
|
8501
8531
|
})) : fullVisible,
|
|
8502
8532
|
[narrowed, fullVisible, view.start, view.end]
|
|
8503
8533
|
);
|
|
8504
|
-
const samplesAt = (0,
|
|
8534
|
+
const samplesAt = (0, import_react54.useMemo)(
|
|
8505
8535
|
() => new Map(visible.map((item) => [item, indexByX(item.data)])),
|
|
8506
8536
|
[visible]
|
|
8507
8537
|
);
|
|
8508
|
-
const finite2 = (0,
|
|
8538
|
+
const finite2 = (0, import_react54.useMemo)(
|
|
8509
8539
|
() => visible.flatMap((item) => item.data.filter(isFinitePoint)),
|
|
8510
8540
|
[visible]
|
|
8511
8541
|
);
|
|
8512
|
-
const distribution = (0,
|
|
8542
|
+
const distribution = (0, import_react54.useMemo)(
|
|
8513
8543
|
() => variant === "histogram" ? histogram(visible, bins) : void 0,
|
|
8514
8544
|
[variant, visible, bins]
|
|
8515
8545
|
);
|
|
8516
8546
|
const thresholdValue = variant !== "heatmap" && threshold && Number.isFinite(threshold.value) ? threshold.value : void 0;
|
|
8517
|
-
const yAxis = (0,
|
|
8547
|
+
const yAxis = (0, import_react54.useMemo)(() => {
|
|
8518
8548
|
const values = distribution ? [...distribution.counts.values()].flat() : finite2.map((point) => point.y);
|
|
8519
8549
|
if (thresholdValue !== void 0) values.push(thresholdValue);
|
|
8520
8550
|
return niceAxis(
|
|
@@ -8522,7 +8552,7 @@ var Chart = (0, import_react53.forwardRef)((allProps, ref) => {
|
|
|
8522
8552
|
variant === "histogram"
|
|
8523
8553
|
);
|
|
8524
8554
|
}, [distribution, finite2, thresholdValue, variant]);
|
|
8525
|
-
const xValues = (0,
|
|
8555
|
+
const xValues = (0, import_react54.useMemo)(
|
|
8526
8556
|
() => [
|
|
8527
8557
|
...new Set(
|
|
8528
8558
|
visible.flatMap((item) => item.data.map((point) => point.x)).filter(Number.isFinite)
|
|
@@ -8531,19 +8561,19 @@ var Chart = (0, import_react53.forwardRef)((allProps, ref) => {
|
|
|
8531
8561
|
[visible]
|
|
8532
8562
|
);
|
|
8533
8563
|
const windowedAxis = inspectable && (rangeSelection || view.valid || suppliedXDomain !== void 0);
|
|
8534
|
-
const xDomain = (0,
|
|
8564
|
+
const xDomain = (0, import_react54.useMemo)(
|
|
8535
8565
|
() => windowedAxis ? { min: view.start, max: view.end } : distribution?.domain ?? (xValues.length > 0 ? { min: xValues[0], max: xValues[xValues.length - 1] } : extent([])),
|
|
8536
8566
|
[windowedAxis, view.start, view.end, distribution, xValues]
|
|
8537
8567
|
);
|
|
8538
|
-
const heatDomain = (0,
|
|
8568
|
+
const heatDomain = (0, import_react54.useMemo)(
|
|
8539
8569
|
() => variant === "heatmap" ? extent(finite2.map((point) => point.y)) : dataDomain,
|
|
8540
8570
|
[variant, finite2, dataDomain]
|
|
8541
8571
|
);
|
|
8542
|
-
const anyFiniteX = (0,
|
|
8572
|
+
const anyFiniteX = (0, import_react54.useMemo)(
|
|
8543
8573
|
() => series.some((item) => item.data.some((point) => Number.isFinite(point.x))),
|
|
8544
8574
|
[series]
|
|
8545
8575
|
);
|
|
8546
|
-
const missing = (0,
|
|
8576
|
+
const missing = (0, import_react54.useMemo)(
|
|
8547
8577
|
() => visible.reduce(
|
|
8548
8578
|
(total, item) => total + item.data.filter((point) => !isFinitePoint(point)).length,
|
|
8549
8579
|
0
|
|
@@ -8551,22 +8581,22 @@ var Chart = (0, import_react53.forwardRef)((allProps, ref) => {
|
|
|
8551
8581
|
[visible]
|
|
8552
8582
|
);
|
|
8553
8583
|
const histogramView = distribution !== void 0;
|
|
8554
|
-
const xHeading = (0,
|
|
8584
|
+
const xHeading = (0, import_react54.useMemo)(
|
|
8555
8585
|
() => histogramView ? withUnit(xLabel ?? "Value", unit) : withUnit(xLabel ?? "Sample", xUnit),
|
|
8556
8586
|
[histogramView, xLabel, xUnit, unit]
|
|
8557
8587
|
);
|
|
8558
|
-
const yHeading = (0,
|
|
8588
|
+
const yHeading = (0, import_react54.useMemo)(
|
|
8559
8589
|
() => histogramView ? yLabel ?? "Count" : withUnit(yLabel ?? "Value", unit),
|
|
8560
8590
|
[histogramView, yLabel, unit]
|
|
8561
8591
|
);
|
|
8562
8592
|
const empty = series.length === 0 ? "No data to display." : visible.length === 0 ? "All series are hidden." : narrowed && xValues.length === 0 ? "No samples in this range." : finite2.length === 0 ? "No finite data to display." : void 0;
|
|
8563
|
-
const yLabels = (0,
|
|
8593
|
+
const yLabels = (0, import_react54.useMemo)(
|
|
8564
8594
|
() => variant === "heatmap" ? [] : tickLabels(yAxis.ticks, locale),
|
|
8565
8595
|
[variant, yAxis, locale]
|
|
8566
8596
|
);
|
|
8567
8597
|
const longestYLabel = Math.max(9, ...yLabels.map((label2) => label2.length));
|
|
8568
8598
|
const left = Math.max(LEFT, Math.ceil(8 + longestYLabel * Y_LABEL_CHARACTER_WIDTH));
|
|
8569
|
-
const geometry = (0,
|
|
8599
|
+
const geometry = (0, import_react54.useMemo)(() => {
|
|
8570
8600
|
const right = Math.max(left + 1, plotWidth - 24);
|
|
8571
8601
|
const width = right - left;
|
|
8572
8602
|
const initialX = scale(xDomain, left, right);
|
|
@@ -8586,7 +8616,7 @@ var Chart = (0, import_react53.forwardRef)((allProps, ref) => {
|
|
|
8586
8616
|
baseline: y2(0)
|
|
8587
8617
|
};
|
|
8588
8618
|
}, [left, plotWidth, xDomain, xValues, variant, yAxis]);
|
|
8589
|
-
const xTickLabels = (0,
|
|
8619
|
+
const xTickLabels = (0, import_react54.useMemo)(() => {
|
|
8590
8620
|
const { left: left2, width, x: x2 } = geometry;
|
|
8591
8621
|
const textFor = (value, interpolated) => formatX && !histogramView ? formatX(value) : formatNumber(interpolated ? withoutFloatNoise(value) : value);
|
|
8592
8622
|
const columnText = variant === "heatmap" && xValues.length <= 6 ? xValues.map((value) => textFor(value, false)) : [];
|
|
@@ -8624,7 +8654,7 @@ var Chart = (0, import_react53.forwardRef)((allProps, ref) => {
|
|
|
8624
8654
|
});
|
|
8625
8655
|
}, [geometry, histogramView, formatX, formatNumber, xValues, variant, xDomain, plotWidth]);
|
|
8626
8656
|
const hatchId = ids.hatch;
|
|
8627
|
-
const marksLayer = (0,
|
|
8657
|
+
const marksLayer = (0, import_react54.useMemo)(() => {
|
|
8628
8658
|
const context = {
|
|
8629
8659
|
variant,
|
|
8630
8660
|
fill,
|
|
@@ -8657,11 +8687,11 @@ var Chart = (0, import_react53.forwardRef)((allProps, ref) => {
|
|
|
8657
8687
|
separator,
|
|
8658
8688
|
samplesAt
|
|
8659
8689
|
]);
|
|
8660
|
-
const seriesNumber = (0,
|
|
8690
|
+
const seriesNumber = (0, import_react54.useMemo)(
|
|
8661
8691
|
() => new Map(series.map((item, index) => [item.id, index + 1])),
|
|
8662
8692
|
[series]
|
|
8663
8693
|
);
|
|
8664
|
-
const yAxisLayer = (0,
|
|
8694
|
+
const yAxisLayer = (0, import_react54.useMemo)(() => {
|
|
8665
8695
|
if (variant === "heatmap") {
|
|
8666
8696
|
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("g", { "aria-hidden": "true", children: visible.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8667
8697
|
"text",
|
|
@@ -8720,7 +8750,7 @@ var Chart = (0, import_react53.forwardRef)((allProps, ref) => {
|
|
|
8720
8750
|
)
|
|
8721
8751
|
] }, index)) });
|
|
8722
8752
|
}, [variant, visible, yAxis, yLabels, geometry, seriesNumber, formatNumber]);
|
|
8723
|
-
const xAxisLayer = (0,
|
|
8753
|
+
const xAxisLayer = (0, import_react54.useMemo)(
|
|
8724
8754
|
() => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("g", { "data-chart-x-axis": "", "aria-hidden": "true", children: xTickLabels.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
8725
8755
|
"text",
|
|
8726
8756
|
{
|
|
@@ -8737,14 +8767,14 @@ var Chart = (0, import_react53.forwardRef)((allProps, ref) => {
|
|
|
8737
8767
|
)) }),
|
|
8738
8768
|
[xTickLabels]
|
|
8739
8769
|
);
|
|
8740
|
-
const xIndex = (0,
|
|
8770
|
+
const xIndex = (0, import_react54.useMemo)(
|
|
8741
8771
|
() => new Map(xValues.map((value, index) => [value, index])),
|
|
8742
8772
|
[xValues]
|
|
8743
8773
|
);
|
|
8744
8774
|
const activeIndex = inspection === null ? void 0 : xIndex.get(inspection);
|
|
8745
8775
|
const activeX = activeIndex === void 0 ? null : inspection;
|
|
8746
8776
|
const reviewCursor = inspectable && cursor != null && Number.isFinite(cursor) && cursor >= xDomain.min && cursor <= xDomain.max ? cursor : null;
|
|
8747
|
-
(0,
|
|
8777
|
+
(0, import_react54.useEffect)(() => {
|
|
8748
8778
|
if (activeX === null || !inspectable) {
|
|
8749
8779
|
setInspection(null);
|
|
8750
8780
|
setPinned(false);
|
|
@@ -8752,7 +8782,7 @@ var Chart = (0, import_react53.forwardRef)((allProps, ref) => {
|
|
|
8752
8782
|
if (!inspectable || xValues.length === 0) setInspectionFocused(false);
|
|
8753
8783
|
}, [activeX, inspectable, xValues.length]);
|
|
8754
8784
|
const inspectIndex = activeIndex ?? Math.max(0, xValues.length - 1);
|
|
8755
|
-
const formatPosition = (0,
|
|
8785
|
+
const formatPosition = (0, import_react54.useCallback)(
|
|
8756
8786
|
(value) => valueWithUnit(formatX?.(value) ?? formatNumber(value), xUnit),
|
|
8757
8787
|
[formatX, formatNumber, xUnit]
|
|
8758
8788
|
);
|
|
@@ -8783,7 +8813,7 @@ var Chart = (0, import_react53.forwardRef)((allProps, ref) => {
|
|
|
8783
8813
|
if (px < geometry.left || px > geometry.right) return;
|
|
8784
8814
|
setInspection(xValues[nearestIndex(xValues, px, geometry.x)] ?? null);
|
|
8785
8815
|
}
|
|
8786
|
-
const changeRange = (0,
|
|
8816
|
+
const changeRange = (0, import_react54.useCallback)(
|
|
8787
8817
|
(next) => {
|
|
8788
8818
|
if (disabled) return;
|
|
8789
8819
|
if (!controlledRange) setLocalRange(next);
|
|
@@ -8804,7 +8834,7 @@ var Chart = (0, import_react53.forwardRef)((allProps, ref) => {
|
|
|
8804
8834
|
const firstX = xValues[0];
|
|
8805
8835
|
const lastX = xValues[xValues.length - 1];
|
|
8806
8836
|
const windowEnds = empty ? null : variant === "heatmap" ? firstX === void 0 || lastX === void 0 ? null : [firstX, lastX] : [xDomain.min, xDomain.max];
|
|
8807
|
-
const renderPosition = (0,
|
|
8837
|
+
const renderPosition = (0, import_react54.useCallback)(
|
|
8808
8838
|
(value) => histogramView ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(NumberText, { value: formatNumber(value), unit }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(NumberText, { value: formatX?.(value) ?? formatNumber(value), unit: xUnit }),
|
|
8809
8839
|
[histogramView, unit, formatX, formatNumber, xUnit]
|
|
8810
8840
|
);
|
|
@@ -8888,7 +8918,15 @@ var Chart = (0, import_react53.forwardRef)((allProps, ref) => {
|
|
|
8888
8918
|
onBlur: () => setInspectionFocused(false)
|
|
8889
8919
|
}
|
|
8890
8920
|
),
|
|
8891
|
-
|
|
8921
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
8922
|
+
"p",
|
|
8923
|
+
{
|
|
8924
|
+
role: "status",
|
|
8925
|
+
className: empty ? "m-0 py-6u text-oprt-base text-oprt-text-dim" : "sr-only",
|
|
8926
|
+
children: empty
|
|
8927
|
+
}
|
|
8928
|
+
),
|
|
8929
|
+
empty ? null : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
8892
8930
|
"svg",
|
|
8893
8931
|
{
|
|
8894
8932
|
role: "img",
|
|
@@ -9211,7 +9249,7 @@ var Chart = (0, import_react53.forwardRef)((allProps, ref) => {
|
|
|
9211
9249
|
Chart.displayName = "Chart";
|
|
9212
9250
|
|
|
9213
9251
|
// src/Sparkline/Sparkline.tsx
|
|
9214
|
-
var
|
|
9252
|
+
var import_react55 = require("react");
|
|
9215
9253
|
var import_class_variance_authority23 = require("class-variance-authority");
|
|
9216
9254
|
var import_clsx38 = __toESM(require("clsx"), 1);
|
|
9217
9255
|
|
|
@@ -9256,12 +9294,12 @@ var sparklineStyles = (0, import_class_variance_authority23.cva)("inline-block w
|
|
|
9256
9294
|
variants: { variant: { line: "", area: "" } },
|
|
9257
9295
|
defaultVariants: { variant: "line" }
|
|
9258
9296
|
});
|
|
9259
|
-
var Sparkline = (0,
|
|
9297
|
+
var Sparkline = (0, import_react55.forwardRef)((allProps, ref) => {
|
|
9260
9298
|
const { label, data, unit, seriesId, color, variant = "line", className, ...props } = allProps;
|
|
9261
9299
|
if (process.env.NODE_ENV !== "production") {
|
|
9262
9300
|
devValidate("Sparkline", SparklineManifest.Sparkline.props, { ...allProps });
|
|
9263
9301
|
}
|
|
9264
|
-
const id = (0,
|
|
9302
|
+
const id = (0, import_react55.useId)();
|
|
9265
9303
|
const points = data.map((y2, x2) => ({ x: x2, y: y2 }));
|
|
9266
9304
|
const finite2 = points.filter(isFinitePoint);
|
|
9267
9305
|
const x = scale(extent(points.map((point) => point.x)), 4, 124);
|
|
@@ -9369,7 +9407,7 @@ var Sparkline = (0, import_react54.forwardRef)((allProps, ref) => {
|
|
|
9369
9407
|
Sparkline.displayName = "Sparkline";
|
|
9370
9408
|
|
|
9371
9409
|
// src/DataGrid/DataGrid.tsx
|
|
9372
|
-
var
|
|
9410
|
+
var import_react56 = require("react");
|
|
9373
9411
|
var import_clsx39 = __toESM(require("clsx"), 1);
|
|
9374
9412
|
|
|
9375
9413
|
// src/DataGrid/DataGrid.manifest.ts
|
|
@@ -9553,8 +9591,8 @@ function ColumnWidthInput({
|
|
|
9553
9591
|
label,
|
|
9554
9592
|
onCommit
|
|
9555
9593
|
}) {
|
|
9556
|
-
const [draft, setDraft] = (0,
|
|
9557
|
-
(0,
|
|
9594
|
+
const [draft, setDraft] = (0, import_react56.useState)(null);
|
|
9595
|
+
(0, import_react56.useEffect)(() => setDraft(null), [value]);
|
|
9558
9596
|
const text = draft?.base === value ? draft.text : String(value);
|
|
9559
9597
|
const commit = (requested) => {
|
|
9560
9598
|
setDraft(null);
|
|
@@ -9595,7 +9633,7 @@ function withoutPage(selection, pageIds) {
|
|
|
9595
9633
|
const onPage = new Set(pageIds);
|
|
9596
9634
|
return selection.filter((id) => !onPage.has(id));
|
|
9597
9635
|
}
|
|
9598
|
-
var DataGrid = (0,
|
|
9636
|
+
var DataGrid = (0, import_react56.forwardRef)((allProps, ref) => {
|
|
9599
9637
|
const {
|
|
9600
9638
|
columns,
|
|
9601
9639
|
data,
|
|
@@ -9630,18 +9668,18 @@ var DataGrid = (0, import_react55.forwardRef)((allProps, ref) => {
|
|
|
9630
9668
|
if (process.env.NODE_ENV !== "production") {
|
|
9631
9669
|
devValidate("DataGrid", DataGridManifest.DataGrid.props, allProps);
|
|
9632
9670
|
}
|
|
9633
|
-
const [localSelection, setLocalSelection] = (0,
|
|
9634
|
-
const [localSort, setLocalSort] = (0,
|
|
9635
|
-
const [localPage, setLocalPage] = (0,
|
|
9636
|
-
const [hiddenColumns, setHiddenColumns] = (0,
|
|
9637
|
-
const [columnsOpen, setColumnsOpen] = (0,
|
|
9638
|
-
const [localWidths, setLocalWidths] = (0,
|
|
9639
|
-
const [localPinned, setLocalPinned] = (0,
|
|
9640
|
-
const [localView, setLocalView] = (0,
|
|
9641
|
-
const columnsId = (0,
|
|
9671
|
+
const [localSelection, setLocalSelection] = (0, import_react56.useState)([]);
|
|
9672
|
+
const [localSort, setLocalSort] = (0, import_react56.useState)(null);
|
|
9673
|
+
const [localPage, setLocalPage] = (0, import_react56.useState)(1);
|
|
9674
|
+
const [hiddenColumns, setHiddenColumns] = (0, import_react56.useState)([]);
|
|
9675
|
+
const [columnsOpen, setColumnsOpen] = (0, import_react56.useState)(false);
|
|
9676
|
+
const [localWidths, setLocalWidths] = (0, import_react56.useState)({});
|
|
9677
|
+
const [localPinned, setLocalPinned] = (0, import_react56.useState)([]);
|
|
9678
|
+
const [localView, setLocalView] = (0, import_react56.useState)("virtualized");
|
|
9679
|
+
const columnsId = (0, import_react56.useId)();
|
|
9642
9680
|
const blocked = disabled || loading;
|
|
9643
9681
|
const selection = selectedRowIds ?? localSelection;
|
|
9644
|
-
const selectionSet = (0,
|
|
9682
|
+
const selectionSet = (0, import_react56.useMemo)(() => new Set(selection), [selection]);
|
|
9645
9683
|
const selectionEnabled = selectedRowIds !== void 0 || Boolean(onSelectionChange);
|
|
9646
9684
|
const effectiveSort = sort === void 0 ? localSort : sort;
|
|
9647
9685
|
const visibleKeys = visibleColumnKeys ?? columns.filter((column) => !hiddenColumns.includes(column.key)).map((column) => column.key);
|
|
@@ -9681,8 +9719,8 @@ var DataGrid = (0, import_react55.forwardRef)((allProps, ref) => {
|
|
|
9681
9719
|
pageCount,
|
|
9682
9720
|
Math.max(1, Number.isFinite(requestedPage) ? Math.floor(requestedPage) : 1)
|
|
9683
9721
|
);
|
|
9684
|
-
const correction = (0,
|
|
9685
|
-
(0,
|
|
9722
|
+
const correction = (0, import_react56.useRef)(null);
|
|
9723
|
+
(0, import_react56.useEffect)(() => {
|
|
9686
9724
|
if (requestedPage === currentPage) {
|
|
9687
9725
|
correction.current = null;
|
|
9688
9726
|
return;
|
|
@@ -9714,7 +9752,7 @@ var DataGrid = (0, import_react55.forwardRef)((allProps, ref) => {
|
|
|
9714
9752
|
const sortKey = sortColumn?.key;
|
|
9715
9753
|
const sortCompare = sortColumn?.compare;
|
|
9716
9754
|
const direction = effectiveSort?.direction;
|
|
9717
|
-
const sorted = (0,
|
|
9755
|
+
const sorted = (0, import_react56.useMemo)(() => {
|
|
9718
9756
|
if (mode !== "client" || sortKey === void 0 || direction === void 0) return data;
|
|
9719
9757
|
return sortedOrder(
|
|
9720
9758
|
data.map((row) => row[sortKey]),
|
|
@@ -9724,17 +9762,17 @@ var DataGrid = (0, import_react55.forwardRef)((allProps, ref) => {
|
|
|
9724
9762
|
}, [data, mode, sortKey, direction, sortCompare]);
|
|
9725
9763
|
const pageStart = (currentPage - 1) * safePageSize;
|
|
9726
9764
|
const paged = mode === "client" && !virtual;
|
|
9727
|
-
const pageRows = (0,
|
|
9765
|
+
const pageRows = (0, import_react56.useMemo)(
|
|
9728
9766
|
() => paged ? sorted.slice(pageStart, pageStart + safePageSize) : sorted,
|
|
9729
9767
|
[sorted, paged, pageStart, safePageSize]
|
|
9730
9768
|
);
|
|
9731
|
-
const latestGetRowId = (0,
|
|
9769
|
+
const latestGetRowId = (0, import_react56.useRef)(getRowId);
|
|
9732
9770
|
latestGetRowId.current = getRowId;
|
|
9733
|
-
const pageIdsOf = (0,
|
|
9771
|
+
const pageIdsOf = (0, import_react56.useMemo)(() => {
|
|
9734
9772
|
let ids = null;
|
|
9735
9773
|
return () => ids ??= pageRows.map((row) => latestGetRowId.current(row));
|
|
9736
9774
|
}, [pageRows]);
|
|
9737
|
-
const { allSelected, someSelected } = (0,
|
|
9775
|
+
const { allSelected, someSelected } = (0, import_react56.useMemo)(() => {
|
|
9738
9776
|
if (selectionSet.size === 0) return { allSelected: false, someSelected: false };
|
|
9739
9777
|
const pageIds = pageIdsOf();
|
|
9740
9778
|
let selected = 0;
|
|
@@ -9980,7 +10018,7 @@ var DataGrid = (0, import_react55.forwardRef)((allProps, ref) => {
|
|
|
9980
10018
|
DataGrid.displayName = "DataGrid";
|
|
9981
10019
|
|
|
9982
10020
|
// src/ComboBox/ComboBox.tsx
|
|
9983
|
-
var
|
|
10021
|
+
var import_react57 = require("react");
|
|
9984
10022
|
var import_class_variance_authority24 = require("class-variance-authority");
|
|
9985
10023
|
var import_clsx40 = __toESM(require("clsx"), 1);
|
|
9986
10024
|
var import_react_aria_components19 = require("react-aria-components");
|
|
@@ -10106,7 +10144,7 @@ function reportUnknownValue(received, options) {
|
|
|
10106
10144
|
)
|
|
10107
10145
|
);
|
|
10108
10146
|
}
|
|
10109
|
-
var ComboBox = (0,
|
|
10147
|
+
var ComboBox = (0, import_react57.forwardRef)((props, ref) => {
|
|
10110
10148
|
const {
|
|
10111
10149
|
motion = "auto",
|
|
10112
10150
|
options,
|
|
@@ -10131,7 +10169,7 @@ var ComboBox = (0, import_react56.forwardRef)((props, ref) => {
|
|
|
10131
10169
|
className
|
|
10132
10170
|
} = props;
|
|
10133
10171
|
const motionState = useMotion(motion);
|
|
10134
|
-
const editing = (0,
|
|
10172
|
+
const editing = (0, import_react57.useRef)(false);
|
|
10135
10173
|
const {
|
|
10136
10174
|
id: inputId,
|
|
10137
10175
|
labelledBy,
|
|
@@ -10265,7 +10303,7 @@ ComboBox.displayName = "ComboBox";
|
|
|
10265
10303
|
var import_icons16 = require("@oprt/icons");
|
|
10266
10304
|
var import_class_variance_authority25 = require("class-variance-authority");
|
|
10267
10305
|
var import_clsx41 = __toESM(require("clsx"), 1);
|
|
10268
|
-
var
|
|
10306
|
+
var import_react58 = require("react");
|
|
10269
10307
|
|
|
10270
10308
|
// src/SplitPane/SplitPane.manifest.ts
|
|
10271
10309
|
var SplitPaneManifest = {
|
|
@@ -10371,8 +10409,8 @@ var paneStyles = "min-w-0 min-h-0 overflow-auto focus-visible:outline-hidden foc
|
|
|
10371
10409
|
var BUTTON_STEP = 10;
|
|
10372
10410
|
var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
|
|
10373
10411
|
function usePaneScrolls(pane) {
|
|
10374
|
-
const [scrolls, setScrolls] = (0,
|
|
10375
|
-
(0,
|
|
10412
|
+
const [scrolls, setScrolls] = (0, import_react58.useState)(false);
|
|
10413
|
+
(0, import_react58.useEffect)(() => {
|
|
10376
10414
|
const node = pane.current;
|
|
10377
10415
|
if (!node) return;
|
|
10378
10416
|
const measure = () => setScrolls(
|
|
@@ -10408,7 +10446,7 @@ function usePaneScrolls(pane) {
|
|
|
10408
10446
|
}, [pane]);
|
|
10409
10447
|
return scrolls;
|
|
10410
10448
|
}
|
|
10411
|
-
var SplitPane = (0,
|
|
10449
|
+
var SplitPane = (0, import_react58.forwardRef)(
|
|
10412
10450
|
({
|
|
10413
10451
|
primary,
|
|
10414
10452
|
secondary,
|
|
@@ -10434,15 +10472,15 @@ var SplitPane = (0, import_react57.forwardRef)(
|
|
|
10434
10472
|
}
|
|
10435
10473
|
const vertical = orientation === "vertical";
|
|
10436
10474
|
const axis = vertical ? "vertical" : "horizontal";
|
|
10437
|
-
const rootRef = (0,
|
|
10438
|
-
const primaryRef = (0,
|
|
10439
|
-
const secondaryRef = (0,
|
|
10440
|
-
const separatorRef = (0,
|
|
10475
|
+
const rootRef = (0, import_react58.useRef)(null);
|
|
10476
|
+
const primaryRef = (0, import_react58.useRef)(null);
|
|
10477
|
+
const secondaryRef = (0, import_react58.useRef)(null);
|
|
10478
|
+
const separatorRef = (0, import_react58.useRef)(null);
|
|
10441
10479
|
const ownChild = (selector) => () => Array.from(rootRef.current?.children ?? []).find((child) => child.matches(selector))?.id;
|
|
10442
10480
|
const primaryId = useHydratedId(ownChild('[data-pane="primary"]'));
|
|
10443
10481
|
const helpId = useHydratedId(ownChild("[data-oprt-split-help]"));
|
|
10444
|
-
const [internalSize, setInternalSize] = (0,
|
|
10445
|
-
const drag = (0,
|
|
10482
|
+
const [internalSize, setInternalSize] = (0, import_react58.useState)(defaultSize);
|
|
10483
|
+
const drag = (0, import_react58.useRef)(null);
|
|
10446
10484
|
const lower = clamp(Number.isFinite(minSize) ? minSize : 20, 0, 100);
|
|
10447
10485
|
const upper = clamp(Number.isFinite(maxSize) ? maxSize : 80, lower, 100);
|
|
10448
10486
|
const rawSize = size ?? internalSize;
|
|
@@ -10451,7 +10489,7 @@ var SplitPane = (0, import_react57.forwardRef)(
|
|
|
10451
10489
|
const buttonStep = Math.max(BUTTON_STEP, increment);
|
|
10452
10490
|
const threshold = Number.isFinite(stackBelow) ? Math.max(0, stackBelow) : 640;
|
|
10453
10491
|
const setRef2 = useMergedRefs(rootRef, forwardedRef);
|
|
10454
|
-
const isNarrow = (0,
|
|
10492
|
+
const isNarrow = (0, import_react58.useCallback)((width) => width < threshold, [threshold]);
|
|
10455
10493
|
const narrow = useElementWidth(rootRef, {
|
|
10456
10494
|
initial: false,
|
|
10457
10495
|
select: isNarrow
|
|
@@ -10463,7 +10501,7 @@ var SplitPane = (0, import_react57.forwardRef)(
|
|
|
10463
10501
|
track: (element) => element.closest("[data-oprt-split-divider]")?.parentElement === rootRef.current ? true : null,
|
|
10464
10502
|
findTarget: () => separatorRef.current?.isConnected ? separatorRef.current : primaryRef.current
|
|
10465
10503
|
});
|
|
10466
|
-
(0,
|
|
10504
|
+
(0, import_react58.useEffect)(() => {
|
|
10467
10505
|
drag.current = null;
|
|
10468
10506
|
}, [disabled, stacked, orientation]);
|
|
10469
10507
|
const resize = (next) => {
|
|
@@ -10643,7 +10681,7 @@ SplitPane.displayName = "SplitPane";
|
|
|
10643
10681
|
// src/TimeRange/TimeRange.tsx
|
|
10644
10682
|
var import_class_variance_authority26 = require("class-variance-authority");
|
|
10645
10683
|
var import_clsx42 = __toESM(require("clsx"), 1);
|
|
10646
|
-
var
|
|
10684
|
+
var import_react59 = require("react");
|
|
10647
10685
|
|
|
10648
10686
|
// src/_internal/timestamp.ts
|
|
10649
10687
|
var MAX_TIME = 864e13;
|
|
@@ -10713,7 +10751,7 @@ function describeRange(start, end) {
|
|
|
10713
10751
|
const sameDay = from.slice(0, 10) === to.slice(0, 10);
|
|
10714
10752
|
return `${from} to ${sameDay ? to.slice(11) : to}`;
|
|
10715
10753
|
}
|
|
10716
|
-
var TimeRange = (0,
|
|
10754
|
+
var TimeRange = (0, import_react59.forwardRef)(
|
|
10717
10755
|
({
|
|
10718
10756
|
value,
|
|
10719
10757
|
onValueChange,
|
|
@@ -10726,7 +10764,7 @@ var TimeRange = (0, import_react58.forwardRef)(
|
|
|
10726
10764
|
className,
|
|
10727
10765
|
...props
|
|
10728
10766
|
}, ref) => {
|
|
10729
|
-
const root = (0,
|
|
10767
|
+
const root = (0, import_react59.useRef)(null);
|
|
10730
10768
|
const setRoot = useMergedRefs(root, ref);
|
|
10731
10769
|
const ids = usePartIds(
|
|
10732
10770
|
["start-date", "start-time", "end-date", "end-time", "error", "range", "status"],
|
|
@@ -10734,15 +10772,15 @@ var TimeRange = (0, import_react58.forwardRef)(
|
|
|
10734
10772
|
);
|
|
10735
10773
|
const base = `${value.start}|${value.end}`;
|
|
10736
10774
|
const applied = draftOf(value);
|
|
10737
|
-
const [draft, setDraft] = (0,
|
|
10775
|
+
const [draft, setDraft] = (0, import_react59.useState)(() => ({ base, ...applied }));
|
|
10738
10776
|
const current = draft.base === base ? draft : applied;
|
|
10739
10777
|
const parsed = { start: parseEndpoint(current.start), end: parseEndpoint(current.end) };
|
|
10740
10778
|
const error = validate(parsed, min, max);
|
|
10741
10779
|
const pending = !(unchanged(current.start, parsed.start, applied.start, value.start) && unchanged(current.end, parsed.end, applied.end, value.end));
|
|
10742
10780
|
const valid = !error && !pending;
|
|
10743
|
-
const callback = (0,
|
|
10781
|
+
const callback = (0, import_react59.useRef)(onDraftValidityChange);
|
|
10744
10782
|
callback.current = onDraftValidityChange;
|
|
10745
|
-
(0,
|
|
10783
|
+
(0, import_react59.useEffect)(() => callback.current?.(valid, { pending }), [valid, pending]);
|
|
10746
10784
|
const readout = Number.isNaN(parsed.start) || Number.isNaN(parsed.end) ? null : describeRange(parsed.start, parsed.end);
|
|
10747
10785
|
const unapplied = !error && pending;
|
|
10748
10786
|
const edit = (part, field, next) => setDraft({ ...current, base, [part]: { ...current[part], [field]: next } });
|
|
@@ -10888,7 +10926,7 @@ var TimeRangeManifest = {
|
|
|
10888
10926
|
// src/EventTimeline/EventTimeline.tsx
|
|
10889
10927
|
var import_class_variance_authority27 = require("class-variance-authority");
|
|
10890
10928
|
var import_clsx43 = __toESM(require("clsx"), 1);
|
|
10891
|
-
var
|
|
10929
|
+
var import_react60 = require("react");
|
|
10892
10930
|
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
10893
10931
|
var timelineStyles = (0, import_class_variance_authority27.cva)("flex min-w-0 flex-col gap-2u font-sans text-oprt-text");
|
|
10894
10932
|
var markStyles = (0, import_class_variance_authority27.cva)("fill-current", {
|
|
@@ -10908,7 +10946,7 @@ var eventValid = (event) => isValidTimestamp(event.start) && (event.end === void
|
|
|
10908
10946
|
var laneOf = (event) => event.lane || "Events";
|
|
10909
10947
|
var DEFAULT_WIDTH = 1e3;
|
|
10910
10948
|
var MIN_WIDTH = 16;
|
|
10911
|
-
var Marker2 = (0,
|
|
10949
|
+
var Marker2 = (0, import_react60.memo)(function Marker3({ id, severity, x, width, selected }) {
|
|
10912
10950
|
const classes = (0, import_clsx43.default)(
|
|
10913
10951
|
markStyles({ severity: severity ?? "neutral" }),
|
|
10914
10952
|
selected && "stroke-oprt-text"
|
|
@@ -10934,7 +10972,7 @@ var Marker2 = (0, import_react59.memo)(function Marker3({ id, severity, x, width
|
|
|
10934
10972
|
}
|
|
10935
10973
|
);
|
|
10936
10974
|
});
|
|
10937
|
-
var TimelineRow = (0,
|
|
10975
|
+
var TimelineRow = (0, import_react60.memo)(function TimelineRow2({
|
|
10938
10976
|
event,
|
|
10939
10977
|
selected,
|
|
10940
10978
|
selectable,
|
|
@@ -10988,7 +11026,7 @@ var TimelineRow = (0, import_react59.memo)(function TimelineRow2({
|
|
|
10988
11026
|
}
|
|
10989
11027
|
);
|
|
10990
11028
|
});
|
|
10991
|
-
var EventTimeline = (0,
|
|
11029
|
+
var EventTimeline = (0, import_react60.forwardRef)(
|
|
10992
11030
|
({
|
|
10993
11031
|
events,
|
|
10994
11032
|
start,
|
|
@@ -11001,21 +11039,21 @@ var EventTimeline = (0, import_react59.forwardRef)(
|
|
|
11001
11039
|
className,
|
|
11002
11040
|
...props
|
|
11003
11041
|
}, forwardedRef) => {
|
|
11004
|
-
const id = (0,
|
|
11005
|
-
const rootRef = (0,
|
|
11042
|
+
const id = (0, import_react60.useId)();
|
|
11043
|
+
const rootRef = (0, import_react60.useRef)(null);
|
|
11006
11044
|
const setRef2 = useMergedRefs(rootRef, forwardedRef);
|
|
11007
11045
|
const observed = useElementWidth(rootRef, {
|
|
11008
11046
|
initial: null,
|
|
11009
11047
|
min: MIN_WIDTH
|
|
11010
11048
|
});
|
|
11011
|
-
const [firstWidth, setFirstWidth] = (0,
|
|
11049
|
+
const [firstWidth, setFirstWidth] = (0, import_react60.useState)(null);
|
|
11012
11050
|
useIsomorphicLayoutEffect(() => {
|
|
11013
11051
|
const width = rootRef.current?.getBoundingClientRect().width;
|
|
11014
11052
|
if (width !== void 0 && Number.isFinite(width) && width > MIN_WIDTH) setFirstWidth(width);
|
|
11015
11053
|
}, []);
|
|
11016
11054
|
const plotWidth = observed ?? firstWidth ?? DEFAULT_WIDTH;
|
|
11017
11055
|
const validRange = isValidTimestamp(start) && isValidTimestamp(end) && start < end;
|
|
11018
|
-
const { visible, omitted, lanes } = (0,
|
|
11056
|
+
const { visible, omitted, lanes } = (0, import_react60.useMemo)(() => {
|
|
11019
11057
|
const validEvents = events.filter(eventValid);
|
|
11020
11058
|
const inWindow = validRange ? validEvents.filter((event) => event.start <= end && (event.end ?? event.start) >= start).sort((a, b) => a.start - b.start) : [];
|
|
11021
11059
|
const byLane = /* @__PURE__ */ new Map();
|
|
@@ -11027,11 +11065,11 @@ var EventTimeline = (0, import_react59.forwardRef)(
|
|
|
11027
11065
|
}
|
|
11028
11066
|
return { visible: inWindow, omitted: events.length - validEvents.length, lanes: byLane };
|
|
11029
11067
|
}, [events, start, end, validRange]);
|
|
11030
|
-
const selectionRef = (0,
|
|
11068
|
+
const selectionRef = (0, import_react60.useRef)(onSelectionChange);
|
|
11031
11069
|
useIsomorphicLayoutEffect(() => {
|
|
11032
11070
|
selectionRef.current = onSelectionChange;
|
|
11033
11071
|
});
|
|
11034
|
-
const select = (0,
|
|
11072
|
+
const select = (0, import_react60.useCallback)((eventId) => selectionRef.current?.(eventId), []);
|
|
11035
11073
|
const extent2 = plotWidth - 16;
|
|
11036
11074
|
const position = (time) => 8 + Math.max(0, Math.min(extent2, (time - start) / (end - start) * extent2));
|
|
11037
11075
|
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
|
|
@@ -11043,7 +11081,15 @@ var EventTimeline = (0, import_react59.forwardRef)(
|
|
|
11043
11081
|
"aria-label": label,
|
|
11044
11082
|
className: (0, import_clsx43.default)(timelineStyles(), className),
|
|
11045
11083
|
children: [
|
|
11046
|
-
|
|
11084
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
11085
|
+
"p",
|
|
11086
|
+
{
|
|
11087
|
+
role: "status",
|
|
11088
|
+
className: !validRange ? "m-0 text-oprt-base text-oprt-text-dim" : "sr-only",
|
|
11089
|
+
children: !validRange ? "Choose a valid time range with start before end." : ""
|
|
11090
|
+
}
|
|
11091
|
+
),
|
|
11092
|
+
!validRange ? null : /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
|
|
11047
11093
|
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-wrap justify-between gap-1u font-mono text-oprt-base text-oprt-text-dim", children: [
|
|
11048
11094
|
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("time", { dateTime: new Date(start).toISOString(), children: utc(start) }),
|
|
11049
11095
|
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("time", { dateTime: new Date(end).toISOString(), children: utc(end) })
|
|
@@ -11172,7 +11218,7 @@ var EventTimelineManifest = {
|
|
|
11172
11218
|
};
|
|
11173
11219
|
|
|
11174
11220
|
// src/AppShell/AppShell.tsx
|
|
11175
|
-
var
|
|
11221
|
+
var import_react61 = require("react");
|
|
11176
11222
|
var import_class_variance_authority28 = require("class-variance-authority");
|
|
11177
11223
|
var import_clsx44 = __toESM(require("clsx"), 1);
|
|
11178
11224
|
|
|
@@ -11255,7 +11301,7 @@ var connectionVariants = {
|
|
|
11255
11301
|
function connectionVariant(connection) {
|
|
11256
11302
|
return Object.prototype.hasOwnProperty.call(connectionVariants, connection) ? connectionVariants[connection] : "neutral";
|
|
11257
11303
|
}
|
|
11258
|
-
var AppShell = (0,
|
|
11304
|
+
var AppShell = (0, import_react61.forwardRef)(
|
|
11259
11305
|
({
|
|
11260
11306
|
title = "Workspace",
|
|
11261
11307
|
identity,
|
|
@@ -11270,7 +11316,7 @@ var AppShell = (0, import_react60.forwardRef)(
|
|
|
11270
11316
|
className,
|
|
11271
11317
|
...props
|
|
11272
11318
|
}, ref) => {
|
|
11273
|
-
const id = (0,
|
|
11319
|
+
const id = (0, import_react61.useId)();
|
|
11274
11320
|
if (process.env.NODE_ENV !== "production") {
|
|
11275
11321
|
devValidate("AppShell", AppShellManifest.AppShell.props, { mode, connection });
|
|
11276
11322
|
}
|
|
@@ -11332,14 +11378,14 @@ var AppShell = (0, import_react60.forwardRef)(
|
|
|
11332
11378
|
AppShell.displayName = "AppShell";
|
|
11333
11379
|
|
|
11334
11380
|
// src/Inspector/Inspector.tsx
|
|
11335
|
-
var
|
|
11381
|
+
var import_react62 = require("react");
|
|
11336
11382
|
var import_class_variance_authority29 = require("class-variance-authority");
|
|
11337
11383
|
var import_clsx45 = __toESM(require("clsx"), 1);
|
|
11338
11384
|
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
11339
11385
|
var inspectorStyles = (0, import_class_variance_authority29.cva)(
|
|
11340
11386
|
"flex min-w-0 flex-col gap-2u break-words border border-oprt-border bg-oprt-surface-1 p-2u font-sans text-oprt-base normal-case text-oprt-text"
|
|
11341
11387
|
);
|
|
11342
|
-
var Inspector = (0,
|
|
11388
|
+
var Inspector = (0, import_react62.forwardRef)(
|
|
11343
11389
|
({
|
|
11344
11390
|
open = true,
|
|
11345
11391
|
title,
|
|
@@ -11351,7 +11397,7 @@ var Inspector = (0, import_react61.forwardRef)(
|
|
|
11351
11397
|
"aria-describedby": describedBy,
|
|
11352
11398
|
...props
|
|
11353
11399
|
}, ref) => {
|
|
11354
|
-
const root = (0,
|
|
11400
|
+
const root = (0, import_react62.useRef)(null);
|
|
11355
11401
|
const setRef2 = useMergedRefs(root, ref);
|
|
11356
11402
|
const ids = usePartIds(["title", "description"], {
|
|
11357
11403
|
readRendered: () => root.current?.getAttribute("data-oprt-ids")
|
|
@@ -11421,7 +11467,7 @@ var InspectorManifest = {
|
|
|
11421
11467
|
};
|
|
11422
11468
|
|
|
11423
11469
|
// src/TreeView/TreeView.tsx
|
|
11424
|
-
var
|
|
11470
|
+
var import_react63 = require("react");
|
|
11425
11471
|
var import_react_aria_components20 = require("react-aria-components");
|
|
11426
11472
|
var import_icons17 = require("@oprt/icons");
|
|
11427
11473
|
var import_class_variance_authority30 = require("class-variance-authority");
|
|
@@ -11450,7 +11496,7 @@ function aimAtLabel(tree, row) {
|
|
|
11450
11496
|
row.style.scrollMarginLeft = `${Math.min(0, box.left - left)}px`;
|
|
11451
11497
|
row.style.scrollMarginRight = `${Math.min(0, right - box.right)}px`;
|
|
11452
11498
|
}
|
|
11453
|
-
var TreeView = (0,
|
|
11499
|
+
var TreeView = (0, import_react63.forwardRef)(
|
|
11454
11500
|
({
|
|
11455
11501
|
items,
|
|
11456
11502
|
label = "Navigation",
|
|
@@ -11464,12 +11510,12 @@ var TreeView = (0, import_react62.forwardRef)(
|
|
|
11464
11510
|
className,
|
|
11465
11511
|
...attributes
|
|
11466
11512
|
}, ref) => {
|
|
11467
|
-
const [localSelection, setLocalSelection] = (0,
|
|
11468
|
-
const [localExpanded, setLocalExpanded] = (0,
|
|
11513
|
+
const [localSelection, setLocalSelection] = (0, import_react63.useState)(null);
|
|
11514
|
+
const [localExpanded, setLocalExpanded] = (0, import_react63.useState)(defaultExpandedIds);
|
|
11469
11515
|
const selection = selectedId === void 0 ? localSelection : selectedId;
|
|
11470
|
-
const treeRef = (0,
|
|
11516
|
+
const treeRef = (0, import_react63.useRef)(null);
|
|
11471
11517
|
const setRef2 = useMergedRefs(treeRef, ref);
|
|
11472
|
-
(0,
|
|
11518
|
+
(0, import_react63.useEffect)(() => {
|
|
11473
11519
|
const tree = treeRef.current;
|
|
11474
11520
|
if (!tree) return;
|
|
11475
11521
|
const aim = (event) => {
|
|
@@ -11594,14 +11640,14 @@ var TreeViewManifest = {
|
|
|
11594
11640
|
};
|
|
11595
11641
|
|
|
11596
11642
|
// src/OperationalStatus/OperationalStatus.tsx
|
|
11597
|
-
var
|
|
11643
|
+
var import_react65 = require("react");
|
|
11598
11644
|
var import_class_variance_authority32 = require("class-variance-authority");
|
|
11599
11645
|
var import_clsx48 = __toESM(require("clsx"), 1);
|
|
11600
11646
|
|
|
11601
11647
|
// src/DescriptionList/DescriptionList.tsx
|
|
11602
11648
|
var import_class_variance_authority31 = require("class-variance-authority");
|
|
11603
11649
|
var import_clsx47 = __toESM(require("clsx"), 1);
|
|
11604
|
-
var
|
|
11650
|
+
var import_react64 = require("react");
|
|
11605
11651
|
|
|
11606
11652
|
// src/DescriptionList/DescriptionList.manifest.ts
|
|
11607
11653
|
var DescriptionListManifest = {
|
|
@@ -11682,13 +11728,13 @@ var valueStyles2 = (0, import_class_variance_authority31.cva)(
|
|
|
11682
11728
|
}
|
|
11683
11729
|
);
|
|
11684
11730
|
var isMissing = (value) => value === null || value === void 0 || value === "";
|
|
11685
|
-
var DescriptionList = (0,
|
|
11731
|
+
var DescriptionList = (0, import_react64.forwardRef)(
|
|
11686
11732
|
({ items, layout = "stacked", className, ...props }, ref) => {
|
|
11687
11733
|
if (process.env.NODE_ENV !== "production") {
|
|
11688
11734
|
devValidate("DescriptionList", DescriptionListManifest.DescriptionList.props, { layout });
|
|
11689
11735
|
}
|
|
11690
|
-
const reported3 = (0,
|
|
11691
|
-
(0,
|
|
11736
|
+
const reported3 = (0, import_react64.useRef)(/* @__PURE__ */ new Set());
|
|
11737
|
+
(0, import_react64.useEffect)(() => {
|
|
11692
11738
|
if (process.env.NODE_ENV === "production") return;
|
|
11693
11739
|
const fresh = items.filter(({ id, value }) => isMissing(value) && !reported3.current.has(id)).map(({ id }) => id);
|
|
11694
11740
|
if (fresh.length === 0) return;
|
|
@@ -11773,10 +11819,10 @@ var variants = {
|
|
|
11773
11819
|
unavailable: "error",
|
|
11774
11820
|
unknown: "neutral"
|
|
11775
11821
|
};
|
|
11776
|
-
var OperationalStatus = (0,
|
|
11822
|
+
var OperationalStatus = (0, import_react65.forwardRef)(
|
|
11777
11823
|
(allProps, ref) => {
|
|
11778
11824
|
const { state = "unknown", source, updatedAt, detail, className, ...props } = allProps;
|
|
11779
|
-
const qualityId = `${(0,
|
|
11825
|
+
const qualityId = `${(0, import_react65.useId)()}-quality`;
|
|
11780
11826
|
if (process.env.NODE_ENV !== "production") {
|
|
11781
11827
|
devValidate("OperationalStatus", OperationalStatusManifest.OperationalStatus.props, {
|
|
11782
11828
|
...allProps
|
|
@@ -11839,15 +11885,15 @@ var OperationalStatus = (0, import_react64.forwardRef)(
|
|
|
11839
11885
|
OperationalStatus.displayName = "OperationalStatus";
|
|
11840
11886
|
|
|
11841
11887
|
// src/ActionStatus/ActionStatus.tsx
|
|
11842
|
-
var
|
|
11888
|
+
var import_react67 = require("react");
|
|
11843
11889
|
var import_class_variance_authority33 = require("class-variance-authority");
|
|
11844
11890
|
var import_clsx49 = __toESM(require("clsx"), 1);
|
|
11845
11891
|
|
|
11846
11892
|
// src/_internal/useActionFocus.ts
|
|
11847
|
-
var
|
|
11893
|
+
var import_react66 = require("react");
|
|
11848
11894
|
function useActionFocus(ref, { onFocusCapture, onBlurCapture } = {}) {
|
|
11849
|
-
const root = (0,
|
|
11850
|
-
(0,
|
|
11895
|
+
const root = (0, import_react66.useRef)(null);
|
|
11896
|
+
(0, import_react66.useImperativeHandle)(ref, () => root.current, []);
|
|
11851
11897
|
const restore = useRestoreFocusOnRemoval(root);
|
|
11852
11898
|
return {
|
|
11853
11899
|
ref: root,
|
|
@@ -11950,6 +11996,8 @@ function ActionStatusLine({
|
|
|
11950
11996
|
requestId,
|
|
11951
11997
|
children
|
|
11952
11998
|
}) {
|
|
11999
|
+
const spoken = [`${label}, ${state}.`, requestId && `Request: ${requestId}.`, message].filter(Boolean).join(" ");
|
|
12000
|
+
const holdBack = useHoldBackNewText(true);
|
|
11953
12001
|
return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
|
|
11954
12002
|
"div",
|
|
11955
12003
|
{
|
|
@@ -11958,19 +12006,27 @@ function ActionStatusLine({
|
|
|
11958
12006
|
"aria-atomic": "true",
|
|
11959
12007
|
className: "flex min-w-0 flex-col gap-1u",
|
|
11960
12008
|
children: [
|
|
11961
|
-
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "
|
|
11962
|
-
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
11963
|
-
|
|
12009
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "sr-only", children: holdBack ? null : spoken }),
|
|
12010
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
12011
|
+
"span",
|
|
12012
|
+
{
|
|
12013
|
+
"aria-hidden": "true",
|
|
12014
|
+
className: "min-w-0 oprt-wrap-anywhere font-medium uppercase tracking-oprt-caps",
|
|
12015
|
+
children: label
|
|
12016
|
+
}
|
|
12017
|
+
),
|
|
12018
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Badge, { variant: variants2[state], indicator: "dot", children: state }) }),
|
|
12019
|
+
requestId && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { "aria-hidden": "true", className: "min-w-0 oprt-wrap-anywhere font-mono", children: [
|
|
11964
12020
|
"Request: ",
|
|
11965
12021
|
requestId
|
|
11966
12022
|
] }),
|
|
11967
|
-
message && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "m-0 min-w-0 oprt-wrap-anywhere", children: message }),
|
|
12023
|
+
message && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { "aria-hidden": "true", className: "m-0 min-w-0 oprt-wrap-anywhere", children: message }),
|
|
11968
12024
|
children
|
|
11969
12025
|
]
|
|
11970
12026
|
}
|
|
11971
12027
|
);
|
|
11972
12028
|
}
|
|
11973
|
-
var ActionStatus = (0,
|
|
12029
|
+
var ActionStatus = (0, import_react67.forwardRef)((allProps, ref) => {
|
|
11974
12030
|
const {
|
|
11975
12031
|
state,
|
|
11976
12032
|
label,
|
|
@@ -12016,7 +12072,7 @@ var ActionStatus = (0, import_react66.forwardRef)((allProps, ref) => {
|
|
|
12016
12072
|
ActionStatus.displayName = "ActionStatus";
|
|
12017
12073
|
|
|
12018
12074
|
// src/MultiSelect/MultiSelect.tsx
|
|
12019
|
-
var
|
|
12075
|
+
var import_react68 = require("react");
|
|
12020
12076
|
var import_class_variance_authority34 = require("class-variance-authority");
|
|
12021
12077
|
var import_clsx50 = __toESM(require("clsx"), 1);
|
|
12022
12078
|
var import_icons18 = require("@oprt/icons");
|
|
@@ -12025,7 +12081,7 @@ var styles = (0, import_class_variance_authority34.cva)("m-0 min-w-0 border p-2u
|
|
|
12025
12081
|
variants: { invalid: { true: "border-oprt-error", false: "border-oprt-border" } },
|
|
12026
12082
|
defaultVariants: { invalid: false }
|
|
12027
12083
|
});
|
|
12028
|
-
var MultiSelect = (0,
|
|
12084
|
+
var MultiSelect = (0, import_react68.forwardRef)(
|
|
12029
12085
|
({
|
|
12030
12086
|
label,
|
|
12031
12087
|
options,
|
|
@@ -12040,12 +12096,12 @@ var MultiSelect = (0, import_react67.forwardRef)(
|
|
|
12040
12096
|
"aria-describedby": describedBy,
|
|
12041
12097
|
...props
|
|
12042
12098
|
}, ref) => {
|
|
12043
|
-
const fieldset = (0,
|
|
12099
|
+
const fieldset = (0, import_react68.useRef)(null);
|
|
12044
12100
|
const fieldsetRef = useMergedRefs(fieldset, ref);
|
|
12045
12101
|
const ids = usePartIds(["description", "error"], {
|
|
12046
12102
|
readRendered: () => fieldset.current?.getAttribute("data-oprt-ids")
|
|
12047
12103
|
});
|
|
12048
|
-
const [local, setLocal] = (0,
|
|
12104
|
+
const [local, setLocal] = (0, import_react68.useState)(defaultValue);
|
|
12049
12105
|
const selected = value ?? local;
|
|
12050
12106
|
const descriptions = joinIds(describedBy, description && ids.description, error && ids.error);
|
|
12051
12107
|
return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
|
|
@@ -12172,7 +12228,7 @@ var MultiSelectManifest = {
|
|
|
12172
12228
|
};
|
|
12173
12229
|
|
|
12174
12230
|
// src/NumberInput/NumberInput.tsx
|
|
12175
|
-
var
|
|
12231
|
+
var import_react69 = require("react");
|
|
12176
12232
|
var import_class_variance_authority35 = require("class-variance-authority");
|
|
12177
12233
|
var import_clsx51 = __toESM(require("clsx"), 1);
|
|
12178
12234
|
|
|
@@ -12278,7 +12334,7 @@ function validate2(text, unit, min, max, step, required) {
|
|
|
12278
12334
|
function plainDecimal(value) {
|
|
12279
12335
|
return value.toLocaleString("en-US", { useGrouping: false, maximumFractionDigits: 20 });
|
|
12280
12336
|
}
|
|
12281
|
-
var NumberInput = (0,
|
|
12337
|
+
var NumberInput = (0, import_react69.forwardRef)((allProps, ref) => {
|
|
12282
12338
|
const {
|
|
12283
12339
|
label,
|
|
12284
12340
|
unit,
|
|
@@ -12305,22 +12361,22 @@ var NumberInput = (0, import_react68.forwardRef)((allProps, ref) => {
|
|
|
12305
12361
|
if (process.env.NODE_ENV !== "production") {
|
|
12306
12362
|
devValidate("NumberInput", NumberInputManifest.NumberInput.props, { ...allProps });
|
|
12307
12363
|
}
|
|
12308
|
-
const labelRef = (0,
|
|
12364
|
+
const labelRef = (0, import_react69.useRef)(null);
|
|
12309
12365
|
const ids = usePartIds(["unit", "description", "error", "unknown"], {
|
|
12310
12366
|
id,
|
|
12311
12367
|
readRendered: () => labelRef.current?.htmlFor
|
|
12312
12368
|
});
|
|
12313
12369
|
const inputId = ids.base;
|
|
12314
|
-
const inputRef = (0,
|
|
12370
|
+
const inputRef = (0, import_react69.useRef)(null);
|
|
12315
12371
|
const mergedRef = useMergedRefs(inputRef, ref);
|
|
12316
|
-
const [local, setLocal] = (0,
|
|
12372
|
+
const [local, setLocal] = (0, import_react69.useState)(defaultValue);
|
|
12317
12373
|
const numeric = value === void 0 ? local : value;
|
|
12318
|
-
const [draft, setDraft] = (0,
|
|
12374
|
+
const [draft, setDraft] = (0, import_react69.useState)(null);
|
|
12319
12375
|
const text = draft && Object.is(draft.base, numeric) ? draft.text : numeric === null ? "" : String(numeric);
|
|
12320
12376
|
const validation = error || validate2(text, unit, min, max, step, required);
|
|
12321
|
-
const validationRef = (0,
|
|
12377
|
+
const validationRef = (0, import_react69.useRef)(onValidationChange);
|
|
12322
12378
|
validationRef.current = onValidationChange;
|
|
12323
|
-
(0,
|
|
12379
|
+
(0, import_react69.useEffect)(() => {
|
|
12324
12380
|
inputRef.current?.setCustomValidity(validation ?? "");
|
|
12325
12381
|
validationRef.current?.(validation ?? null);
|
|
12326
12382
|
}, [validation]);
|
|
@@ -12429,11 +12485,11 @@ var NumberInput = (0, import_react68.forwardRef)((allProps, ref) => {
|
|
|
12429
12485
|
NumberInput.displayName = "NumberInput";
|
|
12430
12486
|
|
|
12431
12487
|
// src/CoordinateInput/CoordinateInput.tsx
|
|
12432
|
-
var
|
|
12488
|
+
var import_react70 = require("react");
|
|
12433
12489
|
var import_clsx52 = __toESM(require("clsx"), 1);
|
|
12434
12490
|
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
12435
12491
|
var unknown = { latitude: null, longitude: null };
|
|
12436
|
-
var CoordinateInput = (0,
|
|
12492
|
+
var CoordinateInput = (0, import_react70.forwardRef)(
|
|
12437
12493
|
({
|
|
12438
12494
|
label = "Coordinates",
|
|
12439
12495
|
value,
|
|
@@ -12449,18 +12505,18 @@ var CoordinateInput = (0, import_react69.forwardRef)(
|
|
|
12449
12505
|
"aria-describedby": describedBy,
|
|
12450
12506
|
...props
|
|
12451
12507
|
}, ref) => {
|
|
12452
|
-
const fieldset = (0,
|
|
12508
|
+
const fieldset = (0, import_react70.useRef)(null);
|
|
12453
12509
|
const fieldsetRef = useMergedRefs(fieldset, ref);
|
|
12454
12510
|
const ids = usePartIds(["status", "description", "error"], {
|
|
12455
12511
|
readRendered: () => fieldset.current?.getAttribute("data-oprt-ids")
|
|
12456
12512
|
});
|
|
12457
|
-
const [local, setLocal] = (0,
|
|
12458
|
-
const [invalidAxes, setInvalidAxes] = (0,
|
|
12513
|
+
const [local, setLocal] = (0, import_react70.useState)(defaultValue);
|
|
12514
|
+
const [invalidAxes, setInvalidAxes] = (0, import_react70.useState)({ latitude: false, longitude: false });
|
|
12459
12515
|
const position = value ?? local;
|
|
12460
12516
|
const invalid = Boolean(error) || invalidAxes.latitude || invalidAxes.longitude || position.latitude !== null && (!Number.isFinite(position.latitude) || Math.abs(position.latitude) > 90) || position.longitude !== null && (!Number.isFinite(position.longitude) || Math.abs(position.longitude) > 180);
|
|
12461
|
-
const validationRef = (0,
|
|
12517
|
+
const validationRef = (0, import_react70.useRef)(onValidationChange);
|
|
12462
12518
|
validationRef.current = onValidationChange;
|
|
12463
|
-
(0,
|
|
12519
|
+
(0, import_react70.useEffect)(() => {
|
|
12464
12520
|
validationRef.current?.(invalid);
|
|
12465
12521
|
}, [invalid]);
|
|
12466
12522
|
const status = invalid ? "Position invalid" : position.latitude === null || position.longitude === null ? "Position unknown" : "Decimal degrees";
|
|
@@ -12599,7 +12655,7 @@ var CoordinateInputManifest = {
|
|
|
12599
12655
|
// src/Link/Link.tsx
|
|
12600
12656
|
var import_class_variance_authority36 = require("class-variance-authority");
|
|
12601
12657
|
var import_clsx53 = __toESM(require("clsx"), 1);
|
|
12602
|
-
var
|
|
12658
|
+
var import_react71 = require("react");
|
|
12603
12659
|
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
12604
12660
|
var linkStyles = (0, import_class_variance_authority36.cva)(
|
|
12605
12661
|
"min-h-oprt-sm min-w-oprt-sm border border-transparent py-[calc((var(--oprt-height-sm)-2px-var(--oprt-line-base))/2)] box-decoration-clone font-sans text-oprt-base font-medium text-oprt-accent underline underline-offset-2 oprt-wrap-anywhere [&_svg]:inline-block hover:text-oprt-accent-hover aria-disabled:text-[color:inherit] aria-disabled:hover:text-[color:inherit] aria-disabled:no-underline aria-disabled:cursor-default focus-visible:outline-hidden focus-visible:border-oprt-border-focus focus-visible:shadow-oprt-focus forced-colors:focus-visible:outline-solid forced-colors:focus-visible:outline-2 forced-colors:focus-visible:outline-[CanvasText]",
|
|
@@ -12612,11 +12668,11 @@ var linkStyles = (0, import_class_variance_authority36.cva)(
|
|
|
12612
12668
|
}
|
|
12613
12669
|
);
|
|
12614
12670
|
function isIconOnly(children) {
|
|
12615
|
-
const parts =
|
|
12671
|
+
const parts = import_react71.Children.toArray(children).filter(
|
|
12616
12672
|
(part) => !(typeof part === "string" && part.trim() === "")
|
|
12617
12673
|
);
|
|
12618
12674
|
const [only] = parts;
|
|
12619
|
-
if (parts.length !== 1 || !(0,
|
|
12675
|
+
if (parts.length !== 1 || !(0, import_react71.isValidElement)(only)) return false;
|
|
12620
12676
|
const hidden = only.props["aria-hidden"];
|
|
12621
12677
|
return only.type === "svg" || hidden === true || hidden === "true" || typeof only.type !== "string" && only.props.children == null;
|
|
12622
12678
|
}
|
|
@@ -12653,7 +12709,7 @@ function reportUnsafeHref(destination) {
|
|
|
12653
12709
|
)
|
|
12654
12710
|
);
|
|
12655
12711
|
}
|
|
12656
|
-
var Link = (0,
|
|
12712
|
+
var Link = (0, import_react71.forwardRef)(
|
|
12657
12713
|
({ className, href, children, ...props }, ref) => {
|
|
12658
12714
|
const safe = typeof href !== "string" || isSafeHref(href, props.download !== void 0 && props.download !== false);
|
|
12659
12715
|
if (!safe) reportUnsafeHref(href);
|
|
@@ -12707,7 +12763,7 @@ var LinkManifest = {
|
|
|
12707
12763
|
};
|
|
12708
12764
|
|
|
12709
12765
|
// src/CopyButton/CopyButton.tsx
|
|
12710
|
-
var
|
|
12766
|
+
var import_react73 = require("react");
|
|
12711
12767
|
var import_class_variance_authority37 = require("class-variance-authority");
|
|
12712
12768
|
var import_icons19 = require("@oprt/icons");
|
|
12713
12769
|
|
|
@@ -12745,16 +12801,16 @@ var CopyButtonManifest = {
|
|
|
12745
12801
|
};
|
|
12746
12802
|
|
|
12747
12803
|
// src/_internal/useIsMounted.ts
|
|
12748
|
-
var
|
|
12804
|
+
var import_react72 = require("react");
|
|
12749
12805
|
function useIsMounted() {
|
|
12750
|
-
const mounted = (0,
|
|
12806
|
+
const mounted = (0, import_react72.useRef)(false);
|
|
12751
12807
|
useIsomorphicLayoutEffect(() => {
|
|
12752
12808
|
mounted.current = true;
|
|
12753
12809
|
return () => {
|
|
12754
12810
|
mounted.current = false;
|
|
12755
12811
|
};
|
|
12756
12812
|
}, []);
|
|
12757
|
-
return (0,
|
|
12813
|
+
return (0, import_react72.useCallback)(() => mounted.current, []);
|
|
12758
12814
|
}
|
|
12759
12815
|
|
|
12760
12816
|
// src/CopyButton/CopyButton.tsx
|
|
@@ -12788,14 +12844,14 @@ function reportLabelWithoutVisibleText(label) {
|
|
|
12788
12844
|
)
|
|
12789
12845
|
);
|
|
12790
12846
|
}
|
|
12791
|
-
var CopyButton = (0,
|
|
12847
|
+
var CopyButton = (0, import_react73.forwardRef)((allProps, ref) => {
|
|
12792
12848
|
const { value, label, onCopy, onCopyError, disabled = false, size = "md", className } = allProps;
|
|
12793
|
-
const [pending, setPending] = (0,
|
|
12849
|
+
const [pending, setPending] = (0, import_react73.useState)(false);
|
|
12794
12850
|
if (!/copy/i.test(label)) reportLabelWithoutVisibleText(label);
|
|
12795
|
-
const [feedback, setFeedback] = (0,
|
|
12796
|
-
const pendingRef = (0,
|
|
12851
|
+
const [feedback, setFeedback] = (0, import_react73.useState)(null);
|
|
12852
|
+
const pendingRef = (0, import_react73.useRef)(false);
|
|
12797
12853
|
const isMounted = useIsMounted();
|
|
12798
|
-
const context = (0,
|
|
12854
|
+
const context = (0, import_react73.useRef)({ value, label, revision: 0 });
|
|
12799
12855
|
if (process.env.NODE_ENV !== "production") {
|
|
12800
12856
|
devValidate("CopyButton", CopyButtonManifest.CopyButton.props, { ...allProps });
|
|
12801
12857
|
}
|
|
@@ -12876,7 +12932,7 @@ CopyButton.displayName = "CopyButton";
|
|
|
12876
12932
|
|
|
12877
12933
|
// src/Popover/Popover.tsx
|
|
12878
12934
|
var import_react_aria_components21 = require("react-aria-components");
|
|
12879
|
-
var
|
|
12935
|
+
var import_react74 = require("react");
|
|
12880
12936
|
var import_class_variance_authority38 = require("class-variance-authority");
|
|
12881
12937
|
var import_clsx54 = __toESM(require("clsx"), 1);
|
|
12882
12938
|
|
|
@@ -12940,7 +12996,7 @@ function topSurface() {
|
|
|
12940
12996
|
);
|
|
12941
12997
|
return surfaces[surfaces.length - 1];
|
|
12942
12998
|
}
|
|
12943
|
-
var Popover2 = (0,
|
|
12999
|
+
var Popover2 = (0, import_react74.forwardRef)(
|
|
12944
13000
|
({
|
|
12945
13001
|
children,
|
|
12946
13002
|
content,
|
|
@@ -12960,37 +13016,38 @@ var Popover2 = (0, import_react73.forwardRef)(
|
|
|
12960
13016
|
id: suppliedId,
|
|
12961
13017
|
...dialogProps
|
|
12962
13018
|
}, ref) => {
|
|
12963
|
-
const [localOpen, setLocalOpen] = (0,
|
|
13019
|
+
const [localOpen, setLocalOpen] = (0, import_react74.useState)(defaultOpen);
|
|
12964
13020
|
const isOpen = open ?? localOpen;
|
|
12965
|
-
const [positioning, setPositioning] = (0,
|
|
12966
|
-
const [tooltipOpen, setTooltipOpen] = (0,
|
|
13021
|
+
const [positioning, setPositioning] = (0, import_react74.useState)(true);
|
|
13022
|
+
const [tooltipOpen, setTooltipOpen] = (0, import_react74.useState)(false);
|
|
12967
13023
|
const motionState = useMotion(motion);
|
|
12968
13024
|
if (process.env.NODE_ENV !== "production") {
|
|
12969
13025
|
devValidate("Popover", PopoverManifest.Popover.props, { ...dialogProps, side, align });
|
|
12970
13026
|
}
|
|
12971
|
-
const generatedId = (0,
|
|
13027
|
+
const generatedId = (0, import_react74.useId)();
|
|
12972
13028
|
const id = suppliedId ?? `oprt-popover-${generatedId}`;
|
|
12973
|
-
const trigger = (0,
|
|
12974
|
-
const lastTrigger = (0,
|
|
12975
|
-
const dialog = (0,
|
|
12976
|
-
const lastDialog = (0,
|
|
12977
|
-
const wasOpen = (0,
|
|
12978
|
-
const focusFrame = (0,
|
|
12979
|
-
const focusScrollClose = (0,
|
|
12980
|
-
const current = (0,
|
|
13029
|
+
const trigger = (0, import_react74.useRef)(null);
|
|
13030
|
+
const lastTrigger = (0, import_react74.useRef)(null);
|
|
13031
|
+
const dialog = (0, import_react74.useRef)(null);
|
|
13032
|
+
const lastDialog = (0, import_react74.useRef)(null);
|
|
13033
|
+
const wasOpen = (0, import_react74.useRef)(false);
|
|
13034
|
+
const focusFrame = (0, import_react74.useRef)(void 0);
|
|
13035
|
+
const focusScrollClose = (0, import_react74.useRef)(false);
|
|
13036
|
+
const current = (0, import_react74.useRef)({ isOpen, onCloseAutoFocus, returnFocusRef });
|
|
12981
13037
|
current.current = { isOpen, onCloseAutoFocus, returnFocusRef };
|
|
12982
|
-
const
|
|
12983
|
-
const
|
|
13038
|
+
const triggerChild = children;
|
|
13039
|
+
const childRef = parseInt(import_react74.version, 10) < 19 ? triggerChild.ref : triggerChild.props.ref;
|
|
13040
|
+
const rememberTrigger = (0, import_react74.useCallback)((node) => {
|
|
12984
13041
|
trigger.current = node;
|
|
12985
13042
|
if (node) lastTrigger.current = node;
|
|
12986
13043
|
}, []);
|
|
12987
13044
|
const setTrigger = useMergedRefs(rememberTrigger, childRef);
|
|
12988
|
-
const rememberDialog = (0,
|
|
13045
|
+
const rememberDialog = (0, import_react74.useCallback)((node) => {
|
|
12989
13046
|
dialog.current = node;
|
|
12990
13047
|
if (node) lastDialog.current = node;
|
|
12991
13048
|
}, []);
|
|
12992
13049
|
const setDialog = useMergedRefs(rememberDialog, ref);
|
|
12993
|
-
const restoreFocus = (0,
|
|
13050
|
+
const restoreFocus = (0, import_react74.useCallback)(() => {
|
|
12994
13051
|
const event = new Event("popovercloseautofocus", { cancelable: true });
|
|
12995
13052
|
current.current.onCloseAutoFocus?.(event);
|
|
12996
13053
|
if (event.defaultPrevented) return;
|
|
@@ -13005,7 +13062,7 @@ var Popover2 = (0, import_react73.forwardRef)(
|
|
|
13005
13062
|
if (target?.isConnected) target.focus({ preventScroll: true });
|
|
13006
13063
|
});
|
|
13007
13064
|
}, []);
|
|
13008
|
-
(0,
|
|
13065
|
+
(0, import_react74.useEffect)(() => {
|
|
13009
13066
|
if (isOpen && !wasOpen.current) {
|
|
13010
13067
|
if (focusFrame.current !== void 0) cancelAnimationFrame(focusFrame.current);
|
|
13011
13068
|
setTooltipOpen(false);
|
|
@@ -13014,13 +13071,13 @@ var Popover2 = (0, import_react73.forwardRef)(
|
|
|
13014
13071
|
if (!isOpen && wasOpen.current) restoreFocus();
|
|
13015
13072
|
wasOpen.current = isOpen;
|
|
13016
13073
|
}, [isOpen, restoreFocus]);
|
|
13017
|
-
(0,
|
|
13074
|
+
(0, import_react74.useEffect)(
|
|
13018
13075
|
() => () => {
|
|
13019
13076
|
if (wasOpen.current && !dialog.current?.isConnected) restoreFocus();
|
|
13020
13077
|
},
|
|
13021
13078
|
[restoreFocus]
|
|
13022
13079
|
);
|
|
13023
|
-
const requestOpen = (0,
|
|
13080
|
+
const requestOpen = (0, import_react74.useCallback)(
|
|
13024
13081
|
(next) => {
|
|
13025
13082
|
if (next && disabled) return;
|
|
13026
13083
|
if (!next && focusScrollClose.current) return;
|
|
@@ -13088,7 +13145,7 @@ var Popover2 = (0, import_react73.forwardRef)(
|
|
|
13088
13145
|
window.removeEventListener(event, interact, true);
|
|
13089
13146
|
};
|
|
13090
13147
|
}, [isOpen]);
|
|
13091
|
-
(0,
|
|
13148
|
+
(0, import_react74.useEffect)(() => {
|
|
13092
13149
|
if (!isOpen) return;
|
|
13093
13150
|
let startedOutside = false;
|
|
13094
13151
|
const start = (event) => {
|
|
@@ -13115,10 +13172,10 @@ var Popover2 = (0, import_react73.forwardRef)(
|
|
|
13115
13172
|
document.removeEventListener("pointercancel", cancel, true);
|
|
13116
13173
|
};
|
|
13117
13174
|
}, [isOpen, requestOpen]);
|
|
13118
|
-
const triggerElement = (0,
|
|
13175
|
+
const triggerElement = (0, import_react74.cloneElement)(triggerChild, {
|
|
13119
13176
|
ref: setTrigger,
|
|
13120
|
-
disabled: disabled ||
|
|
13121
|
-
"aria-disabled": disabled ||
|
|
13177
|
+
disabled: disabled || triggerChild.props.disabled,
|
|
13178
|
+
"aria-disabled": disabled || triggerChild.props["aria-disabled"],
|
|
13122
13179
|
"aria-controls": isOpen ? id : void 0
|
|
13123
13180
|
});
|
|
13124
13181
|
const pressable = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_aria_components21.Pressable, { isDisabled: disabled, children: triggerElement });
|
|
@@ -13205,16 +13262,16 @@ var Popover2 = (0, import_react73.forwardRef)(
|
|
|
13205
13262
|
Popover2.displayName = "Popover";
|
|
13206
13263
|
|
|
13207
13264
|
// src/EntityPreview/EntityPreview.tsx
|
|
13208
|
-
var
|
|
13265
|
+
var import_react75 = require("react");
|
|
13209
13266
|
var import_class_variance_authority39 = require("class-variance-authority");
|
|
13210
13267
|
var import_clsx55 = __toESM(require("clsx"), 1);
|
|
13211
13268
|
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
13212
13269
|
var previewStyles = (0, import_class_variance_authority39.cva)(
|
|
13213
13270
|
"flex min-w-0 flex-col gap-2u font-sans text-oprt-base normal-case tracking-normal text-oprt-text"
|
|
13214
13271
|
);
|
|
13215
|
-
var EntityPreview = (0,
|
|
13272
|
+
var EntityPreview = (0, import_react75.forwardRef)(
|
|
13216
13273
|
({ entity, media, actions: actions2, headingLevel = 3, className, ...props }, ref) => {
|
|
13217
|
-
const instanceId = (0,
|
|
13274
|
+
const instanceId = (0, import_react75.useId)();
|
|
13218
13275
|
const headingId = `${instanceId}-name`;
|
|
13219
13276
|
const conditionId = `${instanceId}-condition`;
|
|
13220
13277
|
const Heading5 = `h${headingLevel}`;
|
|
@@ -13319,16 +13376,16 @@ var EntityPreviewManifest = {
|
|
|
13319
13376
|
};
|
|
13320
13377
|
|
|
13321
13378
|
// src/FormSection/FormSection.tsx
|
|
13322
|
-
var
|
|
13379
|
+
var import_react76 = require("react");
|
|
13323
13380
|
var import_class_variance_authority40 = require("class-variance-authority");
|
|
13324
13381
|
var import_clsx56 = __toESM(require("clsx"), 1);
|
|
13325
13382
|
var import_jsx_runtime59 = require("react/jsx-runtime");
|
|
13326
13383
|
var sectionStyles = (0, import_class_variance_authority40.cva)(
|
|
13327
13384
|
"m-0 min-w-0 border border-oprt-border bg-oprt-surface-1 p-3u font-sans text-oprt-base normal-case tracking-normal text-oprt-text"
|
|
13328
13385
|
);
|
|
13329
|
-
var FormSection = (0,
|
|
13386
|
+
var FormSection = (0, import_react76.forwardRef)(
|
|
13330
13387
|
({ legend, description, children, className, "aria-describedby": describedBy, ...props }, ref) => {
|
|
13331
|
-
const root = (0,
|
|
13388
|
+
const root = (0, import_react76.useRef)(null);
|
|
13332
13389
|
const mergedRef = useMergedRefs(root, ref);
|
|
13333
13390
|
const ids = usePartIds(["description"], {
|
|
13334
13391
|
id: props.id,
|
|
@@ -13392,7 +13449,7 @@ var FormSectionManifest = {
|
|
|
13392
13449
|
};
|
|
13393
13450
|
|
|
13394
13451
|
// src/FormErrorSummary/FormErrorSummary.tsx
|
|
13395
|
-
var
|
|
13452
|
+
var import_react77 = require("react");
|
|
13396
13453
|
var import_class_variance_authority41 = require("class-variance-authority");
|
|
13397
13454
|
var import_clsx57 = __toESM(require("clsx"), 1);
|
|
13398
13455
|
var import_jsx_runtime60 = require("react/jsx-runtime");
|
|
@@ -13402,7 +13459,7 @@ var summaryStyles = (0, import_class_variance_authority41.cva)(
|
|
|
13402
13459
|
var errorStyles = (0, import_class_variance_authority41.cva)(
|
|
13403
13460
|
"inline-flex min-h-3u min-w-3u max-w-full items-center border border-transparent px-1u py-0.5u text-left text-oprt-base font-medium normal-case tracking-normal text-oprt-text underline underline-offset-2 hover:text-oprt-accent outline-hidden focus-visible:border-oprt-border-focus focus-visible:shadow-oprt-focus oprt-wrap-anywhere"
|
|
13404
13461
|
);
|
|
13405
|
-
var FormErrorSummary = (0,
|
|
13462
|
+
var FormErrorSummary = (0, import_react77.forwardRef)(
|
|
13406
13463
|
({
|
|
13407
13464
|
errors,
|
|
13408
13465
|
title = "Check these fields",
|
|
@@ -13412,7 +13469,7 @@ var FormErrorSummary = (0, import_react76.forwardRef)(
|
|
|
13412
13469
|
"aria-labelledby": labelledBy,
|
|
13413
13470
|
...props
|
|
13414
13471
|
}, ref) => {
|
|
13415
|
-
const root = (0,
|
|
13472
|
+
const root = (0, import_react77.useRef)(null);
|
|
13416
13473
|
const mergedRef = useMergedRefs(root, ref);
|
|
13417
13474
|
const ids = usePartIds(["title"], {
|
|
13418
13475
|
id: props.id,
|
|
@@ -13483,7 +13540,7 @@ var FormErrorSummaryManifest = {
|
|
|
13483
13540
|
};
|
|
13484
13541
|
|
|
13485
13542
|
// src/Calendar/Calendar.tsx
|
|
13486
|
-
var
|
|
13543
|
+
var import_react78 = require("react");
|
|
13487
13544
|
var import_date2 = require("@internationalized/date");
|
|
13488
13545
|
var import_react_aria_components22 = require("react-aria-components");
|
|
13489
13546
|
var import_class_variance_authority42 = require("class-variance-authority");
|
|
@@ -13669,7 +13726,7 @@ function CalendarContent() {
|
|
|
13669
13726
|
] })
|
|
13670
13727
|
] });
|
|
13671
13728
|
}
|
|
13672
|
-
var Calendar2 = (0,
|
|
13729
|
+
var Calendar2 = (0, import_react78.forwardRef)(
|
|
13673
13730
|
({
|
|
13674
13731
|
label,
|
|
13675
13732
|
value,
|
|
@@ -13682,10 +13739,10 @@ var Calendar2 = (0, import_react77.forwardRef)(
|
|
|
13682
13739
|
id,
|
|
13683
13740
|
className
|
|
13684
13741
|
}, ref) => {
|
|
13685
|
-
const generated = (0,
|
|
13742
|
+
const generated = (0, import_react78.useId)();
|
|
13686
13743
|
const errorId = `${id ?? generated}-error`;
|
|
13687
13744
|
const hydration = useHydrationRoot(id);
|
|
13688
|
-
const config = (0,
|
|
13745
|
+
const config = (0, import_react78.useMemo)(() => dateConfiguration(value, min, max), [value, min, max]);
|
|
13689
13746
|
const error = config.error ?? (required && value === null ? "A date is required." : null);
|
|
13690
13747
|
return (
|
|
13691
13748
|
// The key remounts the error with the calendar, so both take the client's ids when hydration
|
|
@@ -13760,7 +13817,7 @@ var CalendarManifest = {
|
|
|
13760
13817
|
};
|
|
13761
13818
|
|
|
13762
13819
|
// src/DatePicker/DatePicker.tsx
|
|
13763
|
-
var
|
|
13820
|
+
var import_react80 = require("react");
|
|
13764
13821
|
var import_react_aria_components23 = require("react-aria-components");
|
|
13765
13822
|
var import_date4 = require("@internationalized/date");
|
|
13766
13823
|
var import_icons21 = require("@oprt/icons");
|
|
@@ -13768,12 +13825,12 @@ var import_class_variance_authority43 = require("class-variance-authority");
|
|
|
13768
13825
|
var import_clsx59 = __toESM(require("clsx"), 1);
|
|
13769
13826
|
|
|
13770
13827
|
// src/_internal/segmentField.ts
|
|
13771
|
-
var
|
|
13828
|
+
var import_react79 = require("react");
|
|
13772
13829
|
function sameSnapshot(a, b) {
|
|
13773
13830
|
return a.value === b.value && a.empty === b.empty && a.valid === b.valid;
|
|
13774
13831
|
}
|
|
13775
13832
|
function useReportSegments(segments2, read, report2) {
|
|
13776
|
-
const last = (0,
|
|
13833
|
+
const last = (0, import_react79.useRef)(null);
|
|
13777
13834
|
useIsomorphicLayoutEffect(() => {
|
|
13778
13835
|
const snapshot = read(segments2);
|
|
13779
13836
|
const previous = last.current;
|
|
@@ -13820,11 +13877,11 @@ function useSegmentDraft({
|
|
|
13820
13877
|
rejected: false,
|
|
13821
13878
|
rejection: null
|
|
13822
13879
|
};
|
|
13823
|
-
const [draft, setDraft] = (0,
|
|
13880
|
+
const [draft, setDraft] = (0, import_react79.useState)(initial);
|
|
13824
13881
|
const current = draft.base === value ? draft : initial;
|
|
13825
|
-
const raw = (0,
|
|
13826
|
-
const rejectBlur = (0,
|
|
13827
|
-
const report2 = (0,
|
|
13882
|
+
const raw = (0, import_react79.useRef)(current.snapshot);
|
|
13883
|
+
const rejectBlur = (0, import_react79.useRef)(false);
|
|
13884
|
+
const report2 = (0, import_react79.useCallback)(
|
|
13828
13885
|
(snapshot) => {
|
|
13829
13886
|
raw.current = snapshot;
|
|
13830
13887
|
setDraft(
|
|
@@ -13871,7 +13928,7 @@ function useSegmentDraft({
|
|
|
13871
13928
|
accept: () => setDraft((previous) => ({ ...previous, rejected: false, rejection: null }))
|
|
13872
13929
|
};
|
|
13873
13930
|
}
|
|
13874
|
-
var SegmentGroupContext = (0,
|
|
13931
|
+
var SegmentGroupContext = (0, import_react79.createContext)(null);
|
|
13875
13932
|
|
|
13876
13933
|
// src/DatePicker/DatePicker.tsx
|
|
13877
13934
|
var import_jsx_runtime62 = require("react/jsx-runtime");
|
|
@@ -13880,11 +13937,11 @@ function ObservedYear({
|
|
|
13880
13937
|
segment,
|
|
13881
13938
|
report: report2
|
|
13882
13939
|
}) {
|
|
13883
|
-
const state = (0,
|
|
13940
|
+
const state = (0, import_react80.useContext)(import_react_aria_components23.DateFieldStateContext);
|
|
13884
13941
|
useReportSegments(state.segments, readDateSegments, report2);
|
|
13885
13942
|
return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react_aria_components23.DateSegment, { segment, className: SEGMENT_STYLES });
|
|
13886
13943
|
}
|
|
13887
|
-
var DatePicker = (0,
|
|
13944
|
+
var DatePicker = (0, import_react80.forwardRef)(
|
|
13888
13945
|
({
|
|
13889
13946
|
label,
|
|
13890
13947
|
value,
|
|
@@ -13899,19 +13956,19 @@ var DatePicker = (0, import_react79.forwardRef)(
|
|
|
13899
13956
|
className,
|
|
13900
13957
|
motion = "auto"
|
|
13901
13958
|
}, ref) => {
|
|
13902
|
-
const generated = (0,
|
|
13959
|
+
const generated = (0, import_react80.useId)();
|
|
13903
13960
|
const inputId = id ?? `oprt-date-${generated}`;
|
|
13904
13961
|
const hydration = useHydrationRoot(inputId);
|
|
13905
13962
|
const { locale } = (0, import_react_aria_components23.useLocale)();
|
|
13906
|
-
const gregorianLocale = (0,
|
|
13963
|
+
const gregorianLocale = (0, import_react80.useMemo)(
|
|
13907
13964
|
() => new Intl.Locale(locale, { calendar: "gregory" }).toString(),
|
|
13908
13965
|
[locale]
|
|
13909
13966
|
);
|
|
13910
|
-
const config = (0,
|
|
13967
|
+
const config = (0, import_react80.useMemo)(() => dateConfiguration(value, min, max), [value, min, max]);
|
|
13911
13968
|
const displayedValue = config.date?.toString() ?? null;
|
|
13912
13969
|
const motionState = useMotion(motion);
|
|
13913
|
-
const calendarButton = (0,
|
|
13914
|
-
const group = (0,
|
|
13970
|
+
const calendarButton = (0, import_react80.useRef)(null);
|
|
13971
|
+
const group = (0, import_react80.useContext)(SegmentGroupContext);
|
|
13915
13972
|
const calendarMin = parseDateOnly(group?.calendar?.min);
|
|
13916
13973
|
const calendarMax = parseDateOnly(group?.calendar?.max);
|
|
13917
13974
|
const minValue = calendarMin && calendarMin.compare(config.min) > 0 ? calendarMin : config.min;
|
|
@@ -13928,10 +13985,10 @@ var DatePicker = (0, import_react79.forwardRef)(
|
|
|
13928
13985
|
// The bound an edit crossed, named as for a supplied value (DatePicker-R6).
|
|
13929
13986
|
draft.rejection ?? "Enter a complete, valid date within the allowed bounds."
|
|
13930
13987
|
) : null);
|
|
13931
|
-
const validityCallback = (0,
|
|
13988
|
+
const validityCallback = (0, import_react80.useRef)(onDraftValidityChange);
|
|
13932
13989
|
validityCallback.current = onDraftValidityChange;
|
|
13933
13990
|
const pending = draft.pending;
|
|
13934
|
-
(0,
|
|
13991
|
+
(0, import_react80.useEffect)(() => validityCallback.current?.(!error, { pending }), [error, pending]);
|
|
13935
13992
|
return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react_aria_components23.I18nProvider, { locale: gregorianLocale, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
|
|
13936
13993
|
import_react_aria_components23.DatePicker,
|
|
13937
13994
|
{
|
|
@@ -14056,7 +14113,7 @@ var DatePickerManifest = {
|
|
|
14056
14113
|
};
|
|
14057
14114
|
|
|
14058
14115
|
// src/InlineEdit/InlineEdit.tsx
|
|
14059
|
-
var
|
|
14116
|
+
var import_react81 = require("react");
|
|
14060
14117
|
var import_class_variance_authority44 = require("class-variance-authority");
|
|
14061
14118
|
var import_clsx60 = __toESM(require("clsx"), 1);
|
|
14062
14119
|
var import_jsx_runtime63 = require("react/jsx-runtime");
|
|
@@ -14067,35 +14124,35 @@ function matchesAttempt(attempt, value, label) {
|
|
|
14067
14124
|
const acceptedReplacement = value === attempt.submitted && value !== attempt.session.baseline;
|
|
14068
14125
|
return (label === attempt.session.label || acceptedReplacement) && (value === attempt.session.baseline || value === attempt.submitted);
|
|
14069
14126
|
}
|
|
14070
|
-
var InlineEdit = (0,
|
|
14127
|
+
var InlineEdit = (0, import_react81.forwardRef)(
|
|
14071
14128
|
({ label, value, onSave, disabled = false, readOnly = false, validate: validate3, className, ...props }, ref) => {
|
|
14072
|
-
const [editing, setEditing] = (0,
|
|
14073
|
-
const [draft, setDraft] = (0,
|
|
14074
|
-
const [error, setError] = (0,
|
|
14075
|
-
const [pending, setPending] = (0,
|
|
14076
|
-
const [multiline, setMultiline] = (0,
|
|
14077
|
-
const [returnFocus, setReturnFocus] = (0,
|
|
14078
|
-
const [changedTo, setChangedTo] = (0,
|
|
14079
|
-
const rootRef = (0,
|
|
14129
|
+
const [editing, setEditing] = (0, import_react81.useState)(false);
|
|
14130
|
+
const [draft, setDraft] = (0, import_react81.useState)(value);
|
|
14131
|
+
const [error, setError] = (0, import_react81.useState)(null);
|
|
14132
|
+
const [pending, setPending] = (0, import_react81.useState)(false);
|
|
14133
|
+
const [multiline, setMultiline] = (0, import_react81.useState)(false);
|
|
14134
|
+
const [returnFocus, setReturnFocus] = (0, import_react81.useState)(null);
|
|
14135
|
+
const [changedTo, setChangedTo] = (0, import_react81.useState)(null);
|
|
14136
|
+
const rootRef = (0, import_react81.useRef)(null);
|
|
14080
14137
|
const mergedRef = useMergedRefs(rootRef, ref);
|
|
14081
|
-
const inputRef = (0,
|
|
14082
|
-
const editRef = (0,
|
|
14083
|
-
const refocusInput = (0,
|
|
14084
|
-
const session = (0,
|
|
14085
|
-
const request = (0,
|
|
14086
|
-
const composing = (0,
|
|
14138
|
+
const inputRef = (0, import_react81.useRef)(null);
|
|
14139
|
+
const editRef = (0, import_react81.useRef)(null);
|
|
14140
|
+
const refocusInput = (0, import_react81.useRef)(false);
|
|
14141
|
+
const session = (0, import_react81.useRef)(null);
|
|
14142
|
+
const request = (0, import_react81.useRef)(null);
|
|
14143
|
+
const composing = (0, import_react81.useRef)(false);
|
|
14087
14144
|
const isMounted = useIsMounted();
|
|
14088
|
-
const latest = (0,
|
|
14145
|
+
const latest = (0, import_react81.useRef)({ label, value, disabled, readOnly });
|
|
14089
14146
|
latest.current = { label, value, disabled, readOnly };
|
|
14090
14147
|
const ids = usePartIds(["error", "changed"]);
|
|
14091
|
-
(0,
|
|
14148
|
+
(0, import_react81.useEffect)(
|
|
14092
14149
|
() => () => {
|
|
14093
14150
|
session.current = null;
|
|
14094
14151
|
request.current = null;
|
|
14095
14152
|
},
|
|
14096
14153
|
[]
|
|
14097
14154
|
);
|
|
14098
|
-
(0,
|
|
14155
|
+
(0, import_react81.useEffect)(() => {
|
|
14099
14156
|
const current = session.current;
|
|
14100
14157
|
if (!current) return;
|
|
14101
14158
|
const attempt = request.current;
|
|
@@ -14113,17 +14170,17 @@ var InlineEdit = (0, import_react80.forwardRef)(
|
|
|
14113
14170
|
session.current = { baseline: value, label };
|
|
14114
14171
|
if (current.baseline !== value) setChangedTo(value);
|
|
14115
14172
|
}, [value, label, disabled, readOnly]);
|
|
14116
|
-
(0,
|
|
14173
|
+
(0, import_react81.useEffect)(() => {
|
|
14117
14174
|
if (editing) inputRef.current?.focus();
|
|
14118
14175
|
}, [editing]);
|
|
14119
|
-
(0,
|
|
14176
|
+
(0, import_react81.useEffect)(() => {
|
|
14120
14177
|
if (pending || !refocusInput.current) return;
|
|
14121
14178
|
refocusInput.current = false;
|
|
14122
14179
|
const active = document.activeElement;
|
|
14123
14180
|
if (active === null || active === document.body || rootRef.current?.contains(active))
|
|
14124
14181
|
inputRef.current?.focus();
|
|
14125
14182
|
}, [pending]);
|
|
14126
|
-
(0,
|
|
14183
|
+
(0, import_react81.useEffect)(() => {
|
|
14127
14184
|
if (!returnFocus || editing) return;
|
|
14128
14185
|
if (!disabled && !readOnly && matchesAttempt(returnFocus, value, label))
|
|
14129
14186
|
editRef.current?.focus();
|
|
@@ -14345,7 +14402,7 @@ var InlineEditManifest = {
|
|
|
14345
14402
|
};
|
|
14346
14403
|
|
|
14347
14404
|
// src/ContextMenu/ContextMenu.tsx
|
|
14348
|
-
var
|
|
14405
|
+
var import_react82 = require("react");
|
|
14349
14406
|
var import_react_aria_components24 = require("react-aria-components");
|
|
14350
14407
|
var import_react_aria6 = require("react-aria");
|
|
14351
14408
|
var import_class_variance_authority45 = require("class-variance-authority");
|
|
@@ -14364,7 +14421,7 @@ function ContextSurface({
|
|
|
14364
14421
|
disabled,
|
|
14365
14422
|
children
|
|
14366
14423
|
}) {
|
|
14367
|
-
const surfaceRef = (0,
|
|
14424
|
+
const surfaceRef = (0, import_react82.useRef)(null);
|
|
14368
14425
|
const { pressProps } = (0, import_react_aria6.usePress)({ ref: surfaceRef, isDisabled: disabled });
|
|
14369
14426
|
return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
|
|
14370
14427
|
"div",
|
|
@@ -14401,7 +14458,7 @@ function ContextSurface({
|
|
|
14401
14458
|
}
|
|
14402
14459
|
);
|
|
14403
14460
|
}
|
|
14404
|
-
var ContextMenu = (0,
|
|
14461
|
+
var ContextMenu = (0, import_react82.forwardRef)(
|
|
14405
14462
|
({
|
|
14406
14463
|
label,
|
|
14407
14464
|
items,
|
|
@@ -14412,10 +14469,10 @@ var ContextMenu = (0, import_react81.forwardRef)(
|
|
|
14412
14469
|
className,
|
|
14413
14470
|
...props
|
|
14414
14471
|
}, ref) => {
|
|
14415
|
-
const [open, setOpen] = (0,
|
|
14472
|
+
const [open, setOpen] = (0, import_react82.useState)(null);
|
|
14416
14473
|
const hydration = useHydrationRoot();
|
|
14417
14474
|
const motionState = useMotion("auto", "ContextMenu");
|
|
14418
|
-
(0,
|
|
14475
|
+
(0, import_react82.useEffect)(() => {
|
|
14419
14476
|
if (disabled) setOpen(null);
|
|
14420
14477
|
}, [disabled]);
|
|
14421
14478
|
const menu = () => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
|
|
@@ -14551,18 +14608,18 @@ var ContextMenuManifest = {
|
|
|
14551
14608
|
};
|
|
14552
14609
|
|
|
14553
14610
|
// src/TimeField/TimeField.tsx
|
|
14554
|
-
var
|
|
14611
|
+
var import_react83 = require("react");
|
|
14555
14612
|
var import_react_aria_components25 = require("react-aria-components");
|
|
14556
14613
|
var import_class_variance_authority46 = require("class-variance-authority");
|
|
14557
14614
|
var import_clsx62 = __toESM(require("clsx"), 1);
|
|
14558
14615
|
var import_jsx_runtime65 = require("react/jsx-runtime");
|
|
14559
14616
|
var fieldStyles3 = (0, import_class_variance_authority46.cva)("flex min-w-0 flex-col gap-1u font-sans text-oprt-base text-oprt-text");
|
|
14560
14617
|
function DraftObserver({ report: report2 }) {
|
|
14561
|
-
const state = (0,
|
|
14618
|
+
const state = (0, import_react83.useContext)(import_react_aria_components25.TimeFieldStateContext);
|
|
14562
14619
|
useReportSegments(state.segments, readTimeSegments, report2);
|
|
14563
14620
|
return null;
|
|
14564
14621
|
}
|
|
14565
|
-
var TimeField = (0,
|
|
14622
|
+
var TimeField = (0, import_react83.forwardRef)(
|
|
14566
14623
|
({
|
|
14567
14624
|
label,
|
|
14568
14625
|
value,
|
|
@@ -14576,12 +14633,12 @@ var TimeField = (0, import_react82.forwardRef)(
|
|
|
14576
14633
|
id,
|
|
14577
14634
|
className
|
|
14578
14635
|
}, ref) => {
|
|
14579
|
-
const generated = (0,
|
|
14636
|
+
const generated = (0, import_react83.useId)();
|
|
14580
14637
|
const inputId = id ?? `oprt-time-${generated}`;
|
|
14581
14638
|
const hydration = useHydrationRoot(inputId);
|
|
14582
|
-
const config = (0,
|
|
14639
|
+
const config = (0, import_react83.useMemo)(() => timeConfiguration(value, min, max), [value, min, max]);
|
|
14583
14640
|
const displayedValue = config.time ? formatTimeOnly(config.time) : null;
|
|
14584
|
-
const group = (0,
|
|
14641
|
+
const group = (0, import_react83.useContext)(SegmentGroupContext);
|
|
14585
14642
|
const draft = useSegmentDraft({
|
|
14586
14643
|
value,
|
|
14587
14644
|
displayed: displayedValue,
|
|
@@ -14594,10 +14651,10 @@ var TimeField = (0, import_react82.forwardRef)(
|
|
|
14594
14651
|
// The bound an edit crossed, named as for a supplied value (TimeField-R1).
|
|
14595
14652
|
draft.rejection ?? "Enter a complete, valid time within the allowed bounds."
|
|
14596
14653
|
) : null);
|
|
14597
|
-
const callback = (0,
|
|
14654
|
+
const callback = (0, import_react83.useRef)(onDraftValidityChange);
|
|
14598
14655
|
callback.current = onDraftValidityChange;
|
|
14599
14656
|
const pending = draft.pending;
|
|
14600
|
-
(0,
|
|
14657
|
+
(0, import_react83.useEffect)(() => callback.current?.(!error, { pending }), [error, pending]);
|
|
14601
14658
|
return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { ...draft.editProps, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
14602
14659
|
import_react_aria_components25.TimeField,
|
|
14603
14660
|
{
|
|
@@ -14682,14 +14739,14 @@ var TimeFieldManifest = {
|
|
|
14682
14739
|
};
|
|
14683
14740
|
|
|
14684
14741
|
// src/DateTimePicker/DateTimePicker.tsx
|
|
14685
|
-
var
|
|
14742
|
+
var import_react84 = require("react");
|
|
14686
14743
|
var import_class_variance_authority47 = require("class-variance-authority");
|
|
14687
14744
|
var import_clsx63 = __toESM(require("clsx"), 1);
|
|
14688
14745
|
var import_jsx_runtime66 = require("react/jsx-runtime");
|
|
14689
14746
|
var pickerStyles = (0, import_class_variance_authority47.cva)(
|
|
14690
14747
|
"flex min-w-0 flex-col gap-2u font-sans text-oprt-base text-oprt-text focus-visible:outline-hidden focus-visible:shadow-oprt-focus"
|
|
14691
14748
|
);
|
|
14692
|
-
var DateTimePicker = (0,
|
|
14749
|
+
var DateTimePicker = (0, import_react84.forwardRef)(
|
|
14693
14750
|
({
|
|
14694
14751
|
label,
|
|
14695
14752
|
value,
|
|
@@ -14704,7 +14761,7 @@ var DateTimePicker = (0, import_react83.forwardRef)(
|
|
|
14704
14761
|
id,
|
|
14705
14762
|
className
|
|
14706
14763
|
}, ref) => {
|
|
14707
|
-
const root = (0,
|
|
14764
|
+
const root = (0, import_react84.useRef)(null);
|
|
14708
14765
|
const setRoot = useMergedRefs(root, ref);
|
|
14709
14766
|
const ids = usePartIds(["label", "zone", "error", "status"], {
|
|
14710
14767
|
id,
|
|
@@ -14712,7 +14769,7 @@ var DateTimePicker = (0, import_react83.forwardRef)(
|
|
|
14712
14769
|
});
|
|
14713
14770
|
const zoneName = typeof timeZone === "string" ? timeZone : "invalid";
|
|
14714
14771
|
const base = `${String(value)}|${String(timeZone)}`;
|
|
14715
|
-
const wall = (0,
|
|
14772
|
+
const wall = (0, import_react84.useMemo)(() => instantWallTime(value, timeZone), [value, timeZone]);
|
|
14716
14773
|
const initial = {
|
|
14717
14774
|
base,
|
|
14718
14775
|
date: wall.date,
|
|
@@ -14722,7 +14779,7 @@ var DateTimePicker = (0, import_react83.forwardRef)(
|
|
|
14722
14779
|
timeValid: true,
|
|
14723
14780
|
dirty: false
|
|
14724
14781
|
};
|
|
14725
|
-
const [draft, setDraft] = (0,
|
|
14782
|
+
const [draft, setDraft] = (0, import_react84.useState)(initial);
|
|
14726
14783
|
const current = draft.base === base ? draft : initial;
|
|
14727
14784
|
const zoneValid = validTimeZone(timeZone);
|
|
14728
14785
|
const boundsValid = (min === void 0 || validInstant(min)) && (max === void 0 || validInstant(max)) && !(min !== void 0 && max !== void 0 && min > max);
|
|
@@ -14732,11 +14789,11 @@ var DateTimePicker = (0, import_react83.forwardRef)(
|
|
|
14732
14789
|
const empty = current.date === null && current.time === null;
|
|
14733
14790
|
const checkedInstant = current.dirty ? candidate : value;
|
|
14734
14791
|
const error = !zoneValid ? "Invalid time zone. Supply an IANA time zone." : !boundsValid ? "Invalid instant bounds. Supply finite epoch milliseconds in ascending order." : !current.dirty && wall.error ? wall.error : !current.dateValid || !current.timeValid ? "Complete the date and time before applying this change." : empty ? required ? "A date and time are required." : null : !current.date || !current.time ? "Enter both a date and a time." : resolution?.status === "invalid" ? resolution.error : ambiguous && current.occurrence === null ? "Choose the earlier or later occurrence of this repeated time." : checkedInstant !== null && min !== void 0 && checkedInstant < min ? `Choose an instant at or after ${formatUtcTimestamp(min)}.` : checkedInstant !== null && max !== void 0 && checkedInstant > max ? `Choose an instant at or before ${formatUtcTimestamp(max)}.` : null;
|
|
14735
|
-
const group = (0,
|
|
14792
|
+
const group = (0, import_react84.useMemo)(() => {
|
|
14736
14793
|
const dayOf = (bound) => bound !== void 0 && zoneValid && boundsValid ? instantWallTime(bound, timeZone).date ?? void 0 : void 0;
|
|
14737
14794
|
return { required, calendar: { min: dayOf(min), max: dayOf(max) } };
|
|
14738
14795
|
}, [required, min, max, timeZone, zoneValid, boundsValid]);
|
|
14739
|
-
const restoring = (0,
|
|
14796
|
+
const restoring = (0, import_react84.useRef)(false);
|
|
14740
14797
|
const restore = useRestoreFocusOnRemoval(root, {
|
|
14741
14798
|
findTarget: () => {
|
|
14742
14799
|
restoring.current = true;
|
|
@@ -14754,9 +14811,9 @@ var DateTimePicker = (0, import_react83.forwardRef)(
|
|
|
14754
14811
|
const from = event.relatedTarget;
|
|
14755
14812
|
return from instanceof Node && event.currentTarget.contains(from);
|
|
14756
14813
|
};
|
|
14757
|
-
const callback = (0,
|
|
14814
|
+
const callback = (0, import_react84.useRef)(onDraftValidityChange);
|
|
14758
14815
|
callback.current = onDraftValidityChange;
|
|
14759
|
-
(0,
|
|
14816
|
+
(0, import_react84.useEffect)(
|
|
14760
14817
|
() => callback.current?.(!error && !current.dirty, { pending: current.dirty }),
|
|
14761
14818
|
[error, current.dirty]
|
|
14762
14819
|
);
|
|
@@ -14918,7 +14975,7 @@ var DateTimePickerManifest = {
|
|
|
14918
14975
|
};
|
|
14919
14976
|
|
|
14920
14977
|
// src/DateRangePicker/DateRangePicker.tsx
|
|
14921
|
-
var
|
|
14978
|
+
var import_react85 = require("react");
|
|
14922
14979
|
var import_class_variance_authority48 = require("class-variance-authority");
|
|
14923
14980
|
var import_clsx64 = __toESM(require("clsx"), 1);
|
|
14924
14981
|
var import_jsx_runtime67 = require("react/jsx-runtime");
|
|
@@ -14927,7 +14984,7 @@ var rangeStyles3 = (0, import_class_variance_authority48.cva)(
|
|
|
14927
14984
|
);
|
|
14928
14985
|
var REQUIRED_GROUP = { required: true };
|
|
14929
14986
|
var keyOf = (value) => value === null ? "null" : JSON.stringify([value.start, value.end]);
|
|
14930
|
-
var DateRangePicker = (0,
|
|
14987
|
+
var DateRangePicker = (0, import_react85.forwardRef)(
|
|
14931
14988
|
({
|
|
14932
14989
|
label,
|
|
14933
14990
|
value,
|
|
@@ -14943,14 +15000,14 @@ var DateRangePicker = (0, import_react84.forwardRef)(
|
|
|
14943
15000
|
id,
|
|
14944
15001
|
className
|
|
14945
15002
|
}, ref) => {
|
|
14946
|
-
const root = (0,
|
|
15003
|
+
const root = (0, import_react85.useRef)(null);
|
|
14947
15004
|
const setRoot = useMergedRefs(root, ref);
|
|
14948
15005
|
const ids = usePartIds(["label", "error", "status"], {
|
|
14949
15006
|
id,
|
|
14950
15007
|
readRendered: () => root.current?.id
|
|
14951
15008
|
});
|
|
14952
15009
|
const base = keyOf(value);
|
|
14953
|
-
const [replacement, setReplacement] = (0,
|
|
15010
|
+
const [replacement, setReplacement] = (0, import_react85.useState)({ base, generation: 0, requested: null });
|
|
14954
15011
|
if (replacement.base !== base) {
|
|
14955
15012
|
setReplacement({
|
|
14956
15013
|
base,
|
|
@@ -14972,7 +15029,7 @@ var DateRangePicker = (0, import_react84.forwardRef)(
|
|
|
14972
15029
|
startPending: false,
|
|
14973
15030
|
endPending: false
|
|
14974
15031
|
};
|
|
14975
|
-
const [draft, setDraft] = (0,
|
|
15032
|
+
const [draft, setDraft] = (0, import_react85.useState)(initial);
|
|
14976
15033
|
const current = draft.base === base ? draft : initial;
|
|
14977
15034
|
const start = parseDateOnly(current.start);
|
|
14978
15035
|
const end = parseDateOnly(current.end);
|
|
@@ -14981,9 +15038,9 @@ var DateRangePicker = (0, import_react84.forwardRef)(
|
|
|
14981
15038
|
const empty = current.start === null && current.end === null;
|
|
14982
15039
|
const pending = current.startPending || current.endPending || current.start !== (value?.start ?? null) || current.end !== (value?.end ?? null);
|
|
14983
15040
|
const error = startConfig.error || endConfig.error || (!current.startValid || !current.endValid ? "Complete both date fields before continuing." : empty ? required ? "A date range is required." : null : !start || !end ? "Enter both a start date and an end date." : start.compare(end) > 0 ? "Start date must be on or before end date." : null);
|
|
14984
|
-
const callback = (0,
|
|
15041
|
+
const callback = (0, import_react85.useRef)(onDraftValidityChange);
|
|
14985
15042
|
callback.current = onDraftValidityChange;
|
|
14986
|
-
(0,
|
|
15043
|
+
(0, import_react85.useEffect)(() => callback.current?.(!error && !pending, { pending }), [error, pending]);
|
|
14987
15044
|
const setEndpoint = (part, next) => {
|
|
14988
15045
|
if (disabled || readOnly) return;
|
|
14989
15046
|
const nextDraft = { ...current, [part]: next };
|
|
@@ -15098,7 +15155,7 @@ var DateRangePickerManifest = {
|
|
|
15098
15155
|
};
|
|
15099
15156
|
|
|
15100
15157
|
// src/FileUpload/FileUpload.tsx
|
|
15101
|
-
var
|
|
15158
|
+
var import_react86 = require("react");
|
|
15102
15159
|
var import_react_aria_components26 = require("react-aria-components");
|
|
15103
15160
|
var import_class_variance_authority49 = require("class-variance-authority");
|
|
15104
15161
|
var import_clsx65 = __toESM(require("clsx"), 1);
|
|
@@ -15126,7 +15183,7 @@ var dropStyles = (0, import_class_variance_authority49.cva)(
|
|
|
15126
15183
|
"flex min-w-0 flex-col items-start gap-2u border border-dashed border-oprt-border bg-oprt-surface-1 p-3u data-[drop-target]:border-oprt-accent data-[focus-visible]:border-oprt-border-focus data-[focus-visible]:shadow-oprt-focus"
|
|
15127
15184
|
);
|
|
15128
15185
|
var validAccept = (token) => /^\.[a-z0-9][a-z0-9._+-]*$/i.test(token) || /^(?:[a-z0-9!#$&^_.+-]+\/(?:[a-z0-9!#$&^_.+-]+|\*)|\*\/\*)$/i.test(token);
|
|
15129
|
-
var FileUpload = (0,
|
|
15186
|
+
var FileUpload = (0, import_react86.forwardRef)(
|
|
15130
15187
|
({
|
|
15131
15188
|
label,
|
|
15132
15189
|
description,
|
|
@@ -15142,29 +15199,29 @@ var FileUpload = (0, import_react85.forwardRef)(
|
|
|
15142
15199
|
"aria-describedby": describedBy,
|
|
15143
15200
|
...props
|
|
15144
15201
|
}, ref) => {
|
|
15145
|
-
const root = (0,
|
|
15202
|
+
const root = (0, import_react86.useRef)(null);
|
|
15146
15203
|
const mergedRef = useMergedRefs(root, ref);
|
|
15147
15204
|
const ids = usePartIds(["label", "description", "configuration"], {
|
|
15148
15205
|
id: props.id,
|
|
15149
15206
|
readRendered: () => root.current?.getAttribute("data-oprt-ids")
|
|
15150
15207
|
});
|
|
15151
|
-
const [issues, setIssues] = (0,
|
|
15152
|
-
const [reading, setReading] = (0,
|
|
15153
|
-
const [feedback, setFeedback] = (0,
|
|
15208
|
+
const [issues, setIssues] = (0, import_react86.useState)([]);
|
|
15209
|
+
const [reading, setReading] = (0, import_react86.useState)(false);
|
|
15210
|
+
const [feedback, setFeedback] = (0, import_react86.useState)("");
|
|
15154
15211
|
const isMounted = useIsMounted();
|
|
15155
|
-
const generation = (0,
|
|
15212
|
+
const generation = (0, import_react86.useRef)(0);
|
|
15156
15213
|
const types = accept?.map((token) => token.trim().toLowerCase()) ?? [];
|
|
15157
15214
|
const configurationError = accept?.some((token) => !validAccept(token.trim())) ? "Invalid accept configuration. Use file extensions or MIME types." : maxFiles !== void 0 && (!Number.isSafeInteger(maxFiles) || maxFiles < 1) ? "Invalid maxFiles configuration. Supply a positive integer." : maxFileSizeBytes !== void 0 && (!Number.isSafeInteger(maxFileSizeBytes) || maxFileSizeBytes < 0) ? "Invalid maxFileSizeBytes configuration. Supply a nonnegative integer." : "";
|
|
15158
15215
|
const signature = JSON.stringify([types, multiple, String(maxFiles), String(maxFileSizeBytes)]);
|
|
15159
|
-
const latest = (0,
|
|
15216
|
+
const latest = (0, import_react86.useRef)({ disabled, configurationError, signature, onFiles, onReject });
|
|
15160
15217
|
latest.current = { disabled, configurationError, signature, onFiles, onReject };
|
|
15161
|
-
(0,
|
|
15218
|
+
(0, import_react86.useEffect)(() => {
|
|
15162
15219
|
const requests = generation;
|
|
15163
15220
|
return () => {
|
|
15164
15221
|
requests.current++;
|
|
15165
15222
|
};
|
|
15166
15223
|
}, []);
|
|
15167
|
-
(0,
|
|
15224
|
+
(0, import_react86.useEffect)(() => {
|
|
15168
15225
|
generation.current++;
|
|
15169
15226
|
setReading(false);
|
|
15170
15227
|
}, [signature, disabled]);
|
|
@@ -15361,7 +15418,7 @@ var FileUploadManifest = {
|
|
|
15361
15418
|
};
|
|
15362
15419
|
|
|
15363
15420
|
// src/UploadQueue/UploadQueue.tsx
|
|
15364
|
-
var
|
|
15421
|
+
var import_react87 = require("react");
|
|
15365
15422
|
var import_class_variance_authority50 = require("class-variance-authority");
|
|
15366
15423
|
var import_clsx66 = __toESM(require("clsx"), 1);
|
|
15367
15424
|
var import_jsx_runtime70 = require("react/jsx-runtime");
|
|
@@ -15443,7 +15500,7 @@ function describeChanges(before, after) {
|
|
|
15443
15500
|
if (after.length === 0 && before.length > 0) parts.push("No files selected.");
|
|
15444
15501
|
return parts.join(" ");
|
|
15445
15502
|
}
|
|
15446
|
-
var UploadQueue = (0,
|
|
15503
|
+
var UploadQueue = (0, import_react87.forwardRef)(
|
|
15447
15504
|
({
|
|
15448
15505
|
label,
|
|
15449
15506
|
items,
|
|
@@ -15457,13 +15514,13 @@ var UploadQueue = (0, import_react86.forwardRef)(
|
|
|
15457
15514
|
"aria-labelledby": labelledBy,
|
|
15458
15515
|
...props
|
|
15459
15516
|
}, ref) => {
|
|
15460
|
-
const root = (0,
|
|
15517
|
+
const root = (0, import_react87.useRef)(null);
|
|
15461
15518
|
const ids = usePartIds(["label"], {
|
|
15462
15519
|
id: props.id,
|
|
15463
15520
|
readRendered: () => root.current?.getAttribute("data-oprt-ids")
|
|
15464
15521
|
});
|
|
15465
|
-
const rows = (0,
|
|
15466
|
-
(0,
|
|
15522
|
+
const rows = (0, import_react87.useRef)(/* @__PURE__ */ new Map());
|
|
15523
|
+
(0, import_react87.useImperativeHandle)(ref, () => root.current, []);
|
|
15467
15524
|
const invalidIdentity = hasInvalidIdentity(items);
|
|
15468
15525
|
const restoreFocus = useRestoreFocusOnRemoval(root, {
|
|
15469
15526
|
track: (element) => {
|
|
@@ -15478,17 +15535,17 @@ var UploadQueue = (0, import_react86.forwardRef)(
|
|
|
15478
15535
|
}
|
|
15479
15536
|
});
|
|
15480
15537
|
const signature = JSON.stringify(rowsOf(items));
|
|
15481
|
-
const announced = (0,
|
|
15482
|
-
const [announcement, setAnnouncement] = (0,
|
|
15483
|
-
const lastAnnouncement = (0,
|
|
15484
|
-
const repeatFrame = (0,
|
|
15485
|
-
(0,
|
|
15538
|
+
const announced = (0, import_react87.useRef)(null);
|
|
15539
|
+
const [announcement, setAnnouncement] = (0, import_react87.useState)("");
|
|
15540
|
+
const lastAnnouncement = (0, import_react87.useRef)("");
|
|
15541
|
+
const repeatFrame = (0, import_react87.useRef)(null);
|
|
15542
|
+
(0, import_react87.useEffect)(
|
|
15486
15543
|
() => () => {
|
|
15487
15544
|
if (repeatFrame.current !== null) cancelAnimationFrame(repeatFrame.current);
|
|
15488
15545
|
},
|
|
15489
15546
|
[]
|
|
15490
15547
|
);
|
|
15491
|
-
(0,
|
|
15548
|
+
(0, import_react87.useEffect)(() => {
|
|
15492
15549
|
const after = JSON.parse(signature);
|
|
15493
15550
|
const before = announced.current;
|
|
15494
15551
|
announced.current = after;
|
|
@@ -15512,7 +15569,7 @@ var UploadQueue = (0, import_react86.forwardRef)(
|
|
|
15512
15569
|
}, [signature]);
|
|
15513
15570
|
const unknownStates = items.filter((item) => !isKnownState(item.state)).map((item) => item.state);
|
|
15514
15571
|
const unknownKey = JSON.stringify(unknownStates);
|
|
15515
|
-
(0,
|
|
15572
|
+
(0, import_react87.useEffect)(() => {
|
|
15516
15573
|
if (process.env.NODE_ENV === "production") return;
|
|
15517
15574
|
for (const state of JSON.parse(unknownKey)) reportUnknownState(state);
|
|
15518
15575
|
}, [unknownKey]);
|
|
@@ -15673,7 +15730,7 @@ var UploadQueueManifest = {
|
|
|
15673
15730
|
};
|
|
15674
15731
|
|
|
15675
15732
|
// src/AttachmentPreview/AttachmentPreview.tsx
|
|
15676
|
-
var
|
|
15733
|
+
var import_react88 = require("react");
|
|
15677
15734
|
var import_class_variance_authority51 = require("class-variance-authority");
|
|
15678
15735
|
var import_clsx67 = __toESM(require("clsx"), 1);
|
|
15679
15736
|
var import_jsx_runtime71 = require("react/jsx-runtime");
|
|
@@ -15696,7 +15753,7 @@ function safeImageSource(src) {
|
|
|
15696
15753
|
return false;
|
|
15697
15754
|
}
|
|
15698
15755
|
}
|
|
15699
|
-
var AttachmentPreview = (0,
|
|
15756
|
+
var AttachmentPreview = (0, import_react88.forwardRef)(
|
|
15700
15757
|
({
|
|
15701
15758
|
label,
|
|
15702
15759
|
attachment,
|
|
@@ -15708,14 +15765,14 @@ var AttachmentPreview = (0, import_react87.forwardRef)(
|
|
|
15708
15765
|
"aria-labelledby": labelledBy,
|
|
15709
15766
|
...props
|
|
15710
15767
|
}, ref) => {
|
|
15711
|
-
const root = (0,
|
|
15768
|
+
const root = (0, import_react88.useRef)(null);
|
|
15712
15769
|
const mergedRef = useMergedRefs(root, ref);
|
|
15713
15770
|
const ids = usePartIds(["label"], {
|
|
15714
15771
|
id: props.id,
|
|
15715
15772
|
readRendered: () => root.current?.getAttribute("data-oprt-ids")
|
|
15716
15773
|
});
|
|
15717
15774
|
const imageKey = `${attachment.id}\0${preview.kind === "image" ? preview.src : ""}`;
|
|
15718
|
-
const [imageState, setImageState] = (0,
|
|
15775
|
+
const [imageState, setImageState] = (0, import_react88.useState)({ key: imageKey, failed: false });
|
|
15719
15776
|
if (imageState.key !== imageKey) setImageState({ key: imageKey, failed: false });
|
|
15720
15777
|
const imageError = preview.kind === "image" ? !safeImageSource(preview.src) ? "Image preview source is not supported." : imageState.key === imageKey && imageState.failed ? "Image preview could not be loaded." : null : null;
|
|
15721
15778
|
return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
@@ -15745,18 +15802,21 @@ var AttachmentPreview = (0, import_react87.forwardRef)(
|
|
|
15745
15802
|
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "oprt-wrap-anywhere", children: attachment.mediaType })
|
|
15746
15803
|
] })
|
|
15747
15804
|
] }),
|
|
15748
|
-
preview.kind === "image" &&
|
|
15749
|
-
"
|
|
15750
|
-
|
|
15751
|
-
|
|
15752
|
-
|
|
15753
|
-
|
|
15754
|
-
|
|
15755
|
-
|
|
15756
|
-
|
|
15757
|
-
|
|
15758
|
-
|
|
15759
|
-
|
|
15805
|
+
preview.kind === "image" && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
|
|
15806
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { role: "status", className: imageError ? "m-0 text-oprt-error" : "sr-only", children: imageError }),
|
|
15807
|
+
!imageError && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
15808
|
+
"img",
|
|
15809
|
+
{
|
|
15810
|
+
src: preview.src,
|
|
15811
|
+
alt: preview.alt,
|
|
15812
|
+
onError: () => setImageState(
|
|
15813
|
+
(current) => current.key === imageKey ? { key: imageKey, failed: true } : current
|
|
15814
|
+
),
|
|
15815
|
+
className: (0, import_clsx67.default)(PREVIEW_HEIGHT, "max-w-full self-start object-contain")
|
|
15816
|
+
},
|
|
15817
|
+
imageKey
|
|
15818
|
+
)
|
|
15819
|
+
] }),
|
|
15760
15820
|
preview.kind === "text" && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
|
|
15761
15821
|
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
15762
15822
|
"pre",
|
|
@@ -15850,7 +15910,7 @@ var AttachmentPreviewManifest = {
|
|
|
15850
15910
|
};
|
|
15851
15911
|
|
|
15852
15912
|
// src/JobStatus/JobStatus.tsx
|
|
15853
|
-
var
|
|
15913
|
+
var import_react89 = require("react");
|
|
15854
15914
|
var import_class_variance_authority52 = require("class-variance-authority");
|
|
15855
15915
|
var import_clsx68 = __toESM(require("clsx"), 1);
|
|
15856
15916
|
|
|
@@ -15910,7 +15970,7 @@ var import_jsx_runtime72 = require("react/jsx-runtime");
|
|
|
15910
15970
|
var jobStyles = (0, import_class_variance_authority52.cva)(
|
|
15911
15971
|
"flex min-w-0 flex-col gap-2u border border-oprt-border p-2u font-sans text-oprt-base normal-case text-oprt-text outline-hidden focus-visible:shadow-oprt-focus"
|
|
15912
15972
|
);
|
|
15913
|
-
var JobStatus = (0,
|
|
15973
|
+
var JobStatus = (0, import_react89.forwardRef)((allProps, ref) => {
|
|
15914
15974
|
const {
|
|
15915
15975
|
jobId,
|
|
15916
15976
|
label,
|
|
@@ -15936,8 +15996,8 @@ var JobStatus = (0, import_react88.forwardRef)((allProps, ref) => {
|
|
|
15936
15996
|
const canRetry = !!onRetryRequest && ["failed", "partial", "canceled"].includes(state);
|
|
15937
15997
|
const blocked = disabled || requestPending !== null;
|
|
15938
15998
|
const pendingText = requestPending ? `${requestPending === "cancel" ? "Cancellation" : "Retry"} request pending. Awaiting an application update.` : "";
|
|
15939
|
-
const [spokenText, setSpokenText] = (0,
|
|
15940
|
-
(0,
|
|
15999
|
+
const [spokenText, setSpokenText] = (0, import_react89.useState)(pendingText);
|
|
16000
|
+
(0, import_react89.useEffect)(() => {
|
|
15941
16001
|
let second = 0;
|
|
15942
16002
|
const first = requestAnimationFrame(() => {
|
|
15943
16003
|
second = requestAnimationFrame(() => setSpokenText(pendingText));
|
|
@@ -16011,7 +16071,7 @@ var JobStatus = (0, import_react88.forwardRef)((allProps, ref) => {
|
|
|
16011
16071
|
JobStatus.displayName = "JobStatus";
|
|
16012
16072
|
|
|
16013
16073
|
// src/BulkActionBar/BulkActionBar.tsx
|
|
16014
|
-
var
|
|
16074
|
+
var import_react90 = require("react");
|
|
16015
16075
|
var import_class_variance_authority53 = require("class-variance-authority");
|
|
16016
16076
|
var import_clsx69 = __toESM(require("clsx"), 1);
|
|
16017
16077
|
|
|
@@ -16058,7 +16118,7 @@ var import_jsx_runtime73 = require("react/jsx-runtime");
|
|
|
16058
16118
|
var barStyles2 = (0, import_class_variance_authority53.cva)(
|
|
16059
16119
|
"flex min-w-0 flex-col gap-2u border border-oprt-border bg-oprt-surface-1 p-2u font-sans text-oprt-base text-oprt-text outline-hidden focus-visible:shadow-oprt-focus"
|
|
16060
16120
|
);
|
|
16061
|
-
var BulkActionBar = (0,
|
|
16121
|
+
var BulkActionBar = (0, import_react90.forwardRef)(
|
|
16062
16122
|
({
|
|
16063
16123
|
label,
|
|
16064
16124
|
selection,
|
|
@@ -16070,7 +16130,7 @@ var BulkActionBar = (0, import_react89.forwardRef)(
|
|
|
16070
16130
|
headingLevel = 3,
|
|
16071
16131
|
className
|
|
16072
16132
|
}, ref) => {
|
|
16073
|
-
const id = (0,
|
|
16133
|
+
const id = (0, import_react90.useId)();
|
|
16074
16134
|
const focus = useActionFocus(ref);
|
|
16075
16135
|
const Heading5 = `h${headingLevel}`;
|
|
16076
16136
|
const invalidSelection = selectionError(selection);
|
|
@@ -16231,7 +16291,7 @@ var BulkActionBarManifest = {
|
|
|
16231
16291
|
};
|
|
16232
16292
|
|
|
16233
16293
|
// src/BulkResults/BulkResults.tsx
|
|
16234
|
-
var
|
|
16294
|
+
var import_react91 = require("react");
|
|
16235
16295
|
var import_class_variance_authority54 = require("class-variance-authority");
|
|
16236
16296
|
var import_clsx70 = __toESM(require("clsx"), 1);
|
|
16237
16297
|
var import_jsx_runtime74 = require("react/jsx-runtime");
|
|
@@ -16254,7 +16314,7 @@ var COLUMNS = [
|
|
|
16254
16314
|
{ heading: "Details", width: "min-w-16u" },
|
|
16255
16315
|
{ heading: "Actions", width: "" }
|
|
16256
16316
|
];
|
|
16257
|
-
var BulkResults = (0,
|
|
16317
|
+
var BulkResults = (0, import_react91.forwardRef)(
|
|
16258
16318
|
({
|
|
16259
16319
|
label,
|
|
16260
16320
|
selection,
|
|
@@ -16267,10 +16327,10 @@ var BulkResults = (0, import_react90.forwardRef)(
|
|
|
16267
16327
|
className
|
|
16268
16328
|
}, ref) => {
|
|
16269
16329
|
const Heading5 = `h${headingLevel}`;
|
|
16270
|
-
const root = (0,
|
|
16271
|
-
(0,
|
|
16330
|
+
const root = (0, import_react91.useRef)(null);
|
|
16331
|
+
(0, import_react91.useImperativeHandle)(ref, () => root.current, []);
|
|
16272
16332
|
const [box, scrolls] = useScrollsSideways();
|
|
16273
|
-
const rows = (0,
|
|
16333
|
+
const rows = (0, import_react91.useRef)(/* @__PURE__ */ new Map());
|
|
16274
16334
|
const invalidSelection = selectionError(selection);
|
|
16275
16335
|
const selected = new Set(invalidSelection ? [] : selection.ids);
|
|
16276
16336
|
const invalidResults = idsError(items.map((item) => item.id)) || (items.some((item) => !selected.has(item.id)) ? "A result ID is outside the selection snapshot." : null) || (items.some(
|
|
@@ -16278,13 +16338,13 @@ var BulkResults = (0, import_react90.forwardRef)(
|
|
|
16278
16338
|
) ? "Every result needs a valid state, label, and message." : null);
|
|
16279
16339
|
const invalidRetries = idsError(pendingRetryIds) || (pendingRetryIds.some((item) => !selected.has(item)) ? "A pending retry ID is outside the selection snapshot." : null);
|
|
16280
16340
|
const resultMap = new Map((invalidResults ? [] : items).map((item) => [item.id, item]));
|
|
16281
|
-
const pending = (0,
|
|
16341
|
+
const pending = (0, import_react91.useMemo)(() => new Set(pendingRetryIds), [pendingRetryIds]);
|
|
16282
16342
|
const missing = invalidSelection ? 0 : selection.ids.filter((item) => !resultMap.has(item)).length;
|
|
16283
16343
|
const succeeded = invalidResults ? 0 : items.filter((item) => item.state === "succeeded").length;
|
|
16284
16344
|
const ids = invalidSelection ? NO_IDS : selection.ids;
|
|
16285
16345
|
const size = Number.isFinite(pageSize) && pageSize >= 1 ? Math.floor(pageSize) : DEFAULT_PAGE_SIZE;
|
|
16286
16346
|
const pageCount = Math.max(1, Math.ceil(ids.length / size));
|
|
16287
|
-
const [paging, setPaging] = (0,
|
|
16347
|
+
const [paging, setPaging] = (0, import_react91.useState)({ snapshot: selection.id, page: 1 });
|
|
16288
16348
|
const requestedPage = paging.snapshot === selection.id ? paging.page : 1;
|
|
16289
16349
|
const page = Math.min(pageCount, Math.max(1, requestedPage));
|
|
16290
16350
|
const pageIds = ids.length > size ? ids.slice((page - 1) * size, page * size) : ids;
|
|
@@ -16302,14 +16362,14 @@ var BulkResults = (0, import_react90.forwardRef)(
|
|
|
16302
16362
|
return next?.querySelector("button:not(:disabled)") ?? next?.querySelector("th") ?? root.current;
|
|
16303
16363
|
}
|
|
16304
16364
|
});
|
|
16305
|
-
const [spoken, setSpoken] = (0,
|
|
16306
|
-
const announced = (0,
|
|
16307
|
-
const latest = (0,
|
|
16365
|
+
const [spoken, setSpoken] = (0, import_react91.useState)("");
|
|
16366
|
+
const announced = (0, import_react91.useRef)(new Set(invalidRetries ? [] : pendingRetryIds));
|
|
16367
|
+
const latest = (0, import_react91.useRef)({ results: resultMap, pending: pendingRetryIds });
|
|
16308
16368
|
useIsomorphicLayoutEffect(() => {
|
|
16309
16369
|
latest.current = { results: resultMap, pending: pendingRetryIds };
|
|
16310
16370
|
});
|
|
16311
16371
|
const pendingKey = JSON.stringify(pendingRetryIds);
|
|
16312
|
-
(0,
|
|
16372
|
+
(0, import_react91.useEffect)(() => {
|
|
16313
16373
|
const current = invalidRetries ? [] : latest.current.pending;
|
|
16314
16374
|
for (const itemId of [...announced.current])
|
|
16315
16375
|
if (!current.includes(itemId)) announced.current.delete(itemId);
|
|
@@ -16531,7 +16591,7 @@ var BulkResultsManifest = {
|
|
|
16531
16591
|
};
|
|
16532
16592
|
|
|
16533
16593
|
// src/MapControls/MapControls.tsx
|
|
16534
|
-
var
|
|
16594
|
+
var import_react92 = require("react");
|
|
16535
16595
|
var import_react_aria7 = require("react-aria");
|
|
16536
16596
|
var import_class_variance_authority55 = require("class-variance-authority");
|
|
16537
16597
|
var import_clsx71 = __toESM(require("clsx"), 1);
|
|
@@ -16551,7 +16611,7 @@ var actions = [
|
|
|
16551
16611
|
{ id: "reset-north", label: "Reset north" },
|
|
16552
16612
|
{ id: "fit", label: "Fit map" }
|
|
16553
16613
|
];
|
|
16554
|
-
var MapControls = (0,
|
|
16614
|
+
var MapControls = (0, import_react92.forwardRef)(
|
|
16555
16615
|
({
|
|
16556
16616
|
label = "Map controls",
|
|
16557
16617
|
zoom = null,
|
|
@@ -16567,15 +16627,15 @@ var MapControls = (0, import_react91.forwardRef)(
|
|
|
16567
16627
|
onBlurCapture,
|
|
16568
16628
|
...props
|
|
16569
16629
|
}, ref) => {
|
|
16570
|
-
const root = (0,
|
|
16571
|
-
(0,
|
|
16572
|
-
const labelRef = (0,
|
|
16630
|
+
const root = (0, import_react92.useRef)(null);
|
|
16631
|
+
(0, import_react92.useImperativeHandle)(ref, () => root.current, []);
|
|
16632
|
+
const labelRef = (0, import_react92.useRef)(null);
|
|
16573
16633
|
const ids = usePartIds(["label"], {
|
|
16574
16634
|
id,
|
|
16575
16635
|
readRendered: () => labelRef.current?.id.replace(/-label$/, "")
|
|
16576
16636
|
});
|
|
16577
16637
|
const readout = (0, import_react_aria7.useNumberFormatter)(READOUT);
|
|
16578
|
-
const buttons = (0,
|
|
16638
|
+
const buttons = (0, import_react92.useRef)(/* @__PURE__ */ new Map());
|
|
16579
16639
|
const limitsValid = Number.isFinite(minZoom) && Number.isFinite(maxZoom) && minZoom <= maxZoom;
|
|
16580
16640
|
const validZoom = typeof zoom === "number" && Number.isFinite(zoom) && limitsValid && zoom >= minZoom && zoom <= maxZoom;
|
|
16581
16641
|
const validBearing = typeof bearing === "number" && Number.isFinite(bearing) && bearing >= 0 && bearing < 360;
|
|
@@ -16675,7 +16735,7 @@ var MapControlsManifest = {
|
|
|
16675
16735
|
};
|
|
16676
16736
|
|
|
16677
16737
|
// src/LayerControl/LayerControl.tsx
|
|
16678
|
-
var
|
|
16738
|
+
var import_react93 = require("react");
|
|
16679
16739
|
var import_class_variance_authority56 = require("class-variance-authority");
|
|
16680
16740
|
var import_clsx72 = __toESM(require("clsx"), 1);
|
|
16681
16741
|
var import_jsx_runtime76 = require("react/jsx-runtime");
|
|
@@ -16685,7 +16745,7 @@ var controlStyles3 = (0, import_class_variance_authority56.cva)(
|
|
|
16685
16745
|
var rowStyles = (0, import_class_variance_authority56.cva)(
|
|
16686
16746
|
"flex min-w-0 flex-col gap-2u border border-oprt-border p-2u outline-hidden focus-visible:shadow-oprt-focus"
|
|
16687
16747
|
);
|
|
16688
|
-
var LayerControl = (0,
|
|
16748
|
+
var LayerControl = (0, import_react93.forwardRef)(
|
|
16689
16749
|
({
|
|
16690
16750
|
label = "Map layers",
|
|
16691
16751
|
layers,
|
|
@@ -16698,14 +16758,14 @@ var LayerControl = (0, import_react92.forwardRef)(
|
|
|
16698
16758
|
"aria-labelledby": labelledBy,
|
|
16699
16759
|
...props
|
|
16700
16760
|
}, ref) => {
|
|
16701
|
-
const root = (0,
|
|
16702
|
-
const labelRef = (0,
|
|
16761
|
+
const root = (0, import_react93.useRef)(null);
|
|
16762
|
+
const labelRef = (0, import_react93.useRef)(null);
|
|
16703
16763
|
const ids = usePartIds(["label"], {
|
|
16704
16764
|
id,
|
|
16705
16765
|
readRendered: () => labelRef.current?.id.replace(/-label$/, "")
|
|
16706
16766
|
});
|
|
16707
|
-
const rows = (0,
|
|
16708
|
-
(0,
|
|
16767
|
+
const rows = (0, import_react93.useRef)(/* @__PURE__ */ new Map());
|
|
16768
|
+
(0, import_react93.useImperativeHandle)(ref, () => root.current, []);
|
|
16709
16769
|
const invalidIds = layers.some(
|
|
16710
16770
|
(item, index) => !item.id.trim() || layers.findIndex((other) => other.id === item.id) !== index
|
|
16711
16771
|
);
|
|
@@ -16896,7 +16956,7 @@ var LayerControlManifest = {
|
|
|
16896
16956
|
};
|
|
16897
16957
|
|
|
16898
16958
|
// src/MapLegend/MapLegend.tsx
|
|
16899
|
-
var
|
|
16959
|
+
var import_react94 = require("react");
|
|
16900
16960
|
var import_class_variance_authority57 = require("class-variance-authority");
|
|
16901
16961
|
var import_clsx73 = __toESM(require("clsx"), 1);
|
|
16902
16962
|
var import_jsx_runtime77 = require("react/jsx-runtime");
|
|
@@ -16921,9 +16981,9 @@ var symbolStyles = (0, import_class_variance_authority57.cva)("block shrink-0 fo
|
|
|
16921
16981
|
defaultVariants: { variant: "neutral", pattern: "solid" }
|
|
16922
16982
|
});
|
|
16923
16983
|
var kinds = { point: "Point", line: "Line", area: "Area" };
|
|
16924
|
-
var MapLegend = (0,
|
|
16984
|
+
var MapLegend = (0, import_react94.forwardRef)(
|
|
16925
16985
|
({ label = "Map legend", items, className, id, "aria-labelledby": labelledBy, ...props }, ref) => {
|
|
16926
|
-
const labelRef = (0,
|
|
16986
|
+
const labelRef = (0, import_react94.useRef)(null);
|
|
16927
16987
|
const ids = usePartIds(["label"], {
|
|
16928
16988
|
id,
|
|
16929
16989
|
readRendered: () => labelRef.current?.id.replace(/-label$/, "")
|
|
@@ -17007,7 +17067,7 @@ var MapLegendManifest = {
|
|
|
17007
17067
|
};
|
|
17008
17068
|
|
|
17009
17069
|
// src/MapScale/MapScale.tsx
|
|
17010
|
-
var
|
|
17070
|
+
var import_react95 = require("react");
|
|
17011
17071
|
var import_react_aria8 = require("react-aria");
|
|
17012
17072
|
var import_class_variance_authority58 = require("class-variance-authority");
|
|
17013
17073
|
var import_clsx74 = __toESM(require("clsx"), 1);
|
|
@@ -17058,7 +17118,7 @@ function scale2(metersPerPixel, width, units) {
|
|
|
17058
17118
|
if (!Number.isFinite(pixels) || pixels <= 0 || pixels > width) return null;
|
|
17059
17119
|
return { pixels, distance, unit };
|
|
17060
17120
|
}
|
|
17061
|
-
var MapScale = (0,
|
|
17121
|
+
var MapScale = (0, import_react95.forwardRef)((allProps, ref) => {
|
|
17062
17122
|
const {
|
|
17063
17123
|
label = "Map scale",
|
|
17064
17124
|
metersPerPixel = null,
|
|
@@ -17072,13 +17132,13 @@ var MapScale = (0, import_react94.forwardRef)((allProps, ref) => {
|
|
|
17072
17132
|
if (process.env.NODE_ENV !== "production") {
|
|
17073
17133
|
devValidate("MapScale", MapScaleManifest.MapScale.props, { ...allProps });
|
|
17074
17134
|
}
|
|
17075
|
-
const labelRef = (0,
|
|
17135
|
+
const labelRef = (0, import_react95.useRef)(null);
|
|
17076
17136
|
const ids = usePartIds(["label"], {
|
|
17077
17137
|
id,
|
|
17078
17138
|
readRendered: () => labelRef.current?.id.replace(/-label$/, "")
|
|
17079
17139
|
});
|
|
17080
17140
|
const format = (0, import_react_aria8.useNumberFormatter)(DISTANCE);
|
|
17081
|
-
const available = (0,
|
|
17141
|
+
const available = (0, import_react95.useRef)(null);
|
|
17082
17142
|
const measuredWidth = useElementWidth(available, {
|
|
17083
17143
|
initial: null
|
|
17084
17144
|
});
|
|
@@ -17125,7 +17185,7 @@ var MapScale = (0, import_react94.forwardRef)((allProps, ref) => {
|
|
|
17125
17185
|
MapScale.displayName = "MapScale";
|
|
17126
17186
|
|
|
17127
17187
|
// src/MediaFrame/MediaFrame.tsx
|
|
17128
|
-
var
|
|
17188
|
+
var import_react96 = require("react");
|
|
17129
17189
|
var import_react_aria9 = require("react-aria");
|
|
17130
17190
|
var import_class_variance_authority59 = require("class-variance-authority");
|
|
17131
17191
|
var import_clsx75 = __toESM(require("clsx"), 1);
|
|
@@ -17191,7 +17251,7 @@ var EXACT_NUMBER2 = { maximumSignificantDigits: 21 };
|
|
|
17191
17251
|
var frameStyles = (0, import_class_variance_authority59.cva)(
|
|
17192
17252
|
"flex min-w-0 flex-col border border-oprt-border bg-oprt-surface-1 font-sans text-oprt-base normal-case text-oprt-text"
|
|
17193
17253
|
);
|
|
17194
|
-
var MediaFrame = (0,
|
|
17254
|
+
var MediaFrame = (0, import_react96.forwardRef)((allProps, ref) => {
|
|
17195
17255
|
const {
|
|
17196
17256
|
label,
|
|
17197
17257
|
state,
|
|
@@ -17211,7 +17271,7 @@ var MediaFrame = (0, import_react95.forwardRef)((allProps, ref) => {
|
|
|
17211
17271
|
if (process.env.NODE_ENV !== "production") {
|
|
17212
17272
|
devValidate("MediaFrame", MediaFrameManifest.MediaFrame.props, { ...allProps });
|
|
17213
17273
|
}
|
|
17214
|
-
const labelRef = (0,
|
|
17274
|
+
const labelRef = (0, import_react96.useRef)(null);
|
|
17215
17275
|
const ids = usePartIds(["label"], {
|
|
17216
17276
|
id,
|
|
17217
17277
|
readRendered: () => labelRef.current?.id.replace(/-label$/, "")
|
|
@@ -17287,7 +17347,7 @@ MediaFrame.displayName = "MediaFrame";
|
|
|
17287
17347
|
// src/PlaybackControls/PlaybackControls.tsx
|
|
17288
17348
|
var import_class_variance_authority60 = require("class-variance-authority");
|
|
17289
17349
|
var import_clsx76 = __toESM(require("clsx"), 1);
|
|
17290
|
-
var
|
|
17350
|
+
var import_react97 = require("react");
|
|
17291
17351
|
var import_react_aria_components27 = require("react-aria-components");
|
|
17292
17352
|
var import_jsx_runtime80 = require("react/jsx-runtime");
|
|
17293
17353
|
var rootStyles8 = (0, import_class_variance_authority60.cva)(
|
|
@@ -17342,7 +17402,7 @@ function arrowDirection(key, rightToLeft) {
|
|
|
17342
17402
|
if (key === "ArrowLeft" || key === "Left") return rightToLeft ? 1 : -1;
|
|
17343
17403
|
return 0;
|
|
17344
17404
|
}
|
|
17345
|
-
var PlaybackControls = (0,
|
|
17405
|
+
var PlaybackControls = (0, import_react97.forwardRef)(
|
|
17346
17406
|
({
|
|
17347
17407
|
start,
|
|
17348
17408
|
end,
|
|
@@ -17366,12 +17426,12 @@ var PlaybackControls = (0, import_react96.forwardRef)(
|
|
|
17366
17426
|
onBlurCapture,
|
|
17367
17427
|
...props
|
|
17368
17428
|
}, ref) => {
|
|
17369
|
-
const descriptionId = (0,
|
|
17370
|
-
const root = (0,
|
|
17371
|
-
(0,
|
|
17372
|
-
const previousRef = (0,
|
|
17373
|
-
const playRef = (0,
|
|
17374
|
-
const nextRef = (0,
|
|
17429
|
+
const descriptionId = (0, import_react97.useId)();
|
|
17430
|
+
const root = (0, import_react97.useRef)(null);
|
|
17431
|
+
(0, import_react97.useImperativeHandle)(ref, () => root.current, []);
|
|
17432
|
+
const previousRef = (0, import_react97.useRef)(null);
|
|
17433
|
+
const playRef = (0, import_react97.useRef)(null);
|
|
17434
|
+
const nextRef = (0, import_react97.useRef)(null);
|
|
17375
17435
|
const { direction } = (0, import_react_aria_components27.useLocale)();
|
|
17376
17436
|
const validBounds = validTime(start) && validTime(end);
|
|
17377
17437
|
const validRange = validBounds && start < end;
|
|
@@ -17383,7 +17443,7 @@ var PlaybackControls = (0, import_react96.forwardRef)(
|
|
|
17383
17443
|
const sliderEnd = validRange ? end : 1;
|
|
17384
17444
|
const displayValue = validRange && validCursor ? Math.min(end, Math.max(start, value)) : sliderStart;
|
|
17385
17445
|
const positionText = validRange && validCursor ? formatTime(displayValue) : validBounds && start === end ? formatTime(start) : "Unknown playback position";
|
|
17386
|
-
const events = (0,
|
|
17446
|
+
const events = (0, import_react97.useMemo)(
|
|
17387
17447
|
() => [
|
|
17388
17448
|
...new Set(
|
|
17389
17449
|
(eventTimes ?? []).filter((time) => validTime(time) && time >= start && time <= end)
|
|
@@ -17641,7 +17701,7 @@ var PlaybackControlsManifest = {
|
|
|
17641
17701
|
};
|
|
17642
17702
|
|
|
17643
17703
|
// package.json
|
|
17644
|
-
var version3 = "0.
|
|
17704
|
+
var version3 = "0.3.0";
|
|
17645
17705
|
|
|
17646
17706
|
// src/version.ts
|
|
17647
17707
|
var VERSION = version3;
|