@dbcdk/react-components 0.0.98 → 0.0.101
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/dist/components/page-layout/components/{layout-footer/LayoutFooter.d.ts → footer/Footer.d.ts} +5 -4
- package/dist/index.cjs +524 -517
- package/dist/index.css +18 -16
- package/dist/index.d.ts +1 -1
- package/dist/index.js +74 -67
- package/dist/tanstack.cjs +110 -110
- package/dist/tanstack.js +30 -30
- package/package.json +1 -1
- package/dist/components/page-layout/components/page-layout-hero/PageLayoutHero.d.ts +0 -1
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var React19 = require('react');
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
var lucideReact = require('lucide-react');
|
|
6
6
|
var reactDom = require('react-dom');
|
|
@@ -23,7 +23,7 @@ function _interopNamespace(e) {
|
|
|
23
23
|
return Object.freeze(n);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
var
|
|
26
|
+
var React19__namespace = /*#__PURE__*/_interopNamespace(React19);
|
|
27
27
|
|
|
28
28
|
// src/components/stack/Stack.module.css
|
|
29
29
|
var Stack_default = {
|
|
@@ -43,7 +43,7 @@ var Stack_default = {
|
|
|
43
43
|
mobileJustifyBetween: "Stack_mobileJustifyBetween",
|
|
44
44
|
mobileWrap: "Stack_mobileWrap"
|
|
45
45
|
};
|
|
46
|
-
var Stack =
|
|
46
|
+
var Stack = React19.forwardRef(function Stack2({
|
|
47
47
|
as,
|
|
48
48
|
direction,
|
|
49
49
|
gap,
|
|
@@ -82,7 +82,7 @@ var Stack = React20.forwardRef(function Stack2({
|
|
|
82
82
|
var Tooltip_default = {
|
|
83
83
|
bubble: "Tooltip_bubble"
|
|
84
84
|
};
|
|
85
|
-
var TooltipContext =
|
|
85
|
+
var TooltipContext = React19.createContext(null);
|
|
86
86
|
var VIEWPORT_PADDING = 8;
|
|
87
87
|
var SHOW_DELAY_MS = 500;
|
|
88
88
|
function clamp(n, min, max) {
|
|
@@ -134,9 +134,9 @@ function shallowEqualActive(a, b) {
|
|
|
134
134
|
return a.id === b.id && a.open === b.open && a.content === b.content && a.placement === b.placement && a.offset === b.offset && a.triggerEl === b.triggerEl;
|
|
135
135
|
}
|
|
136
136
|
function TooltipProvider({ children }) {
|
|
137
|
-
const [active, setActive] =
|
|
138
|
-
const showTimerRef =
|
|
139
|
-
const show =
|
|
137
|
+
const [active, setActive] = React19.useState(null);
|
|
138
|
+
const showTimerRef = React19.useRef(null);
|
|
139
|
+
const show = React19.useCallback((next) => {
|
|
140
140
|
if (showTimerRef.current) clearTimeout(showTimerRef.current);
|
|
141
141
|
showTimerRef.current = setTimeout(() => {
|
|
142
142
|
showTimerRef.current = null;
|
|
@@ -146,7 +146,7 @@ function TooltipProvider({ children }) {
|
|
|
146
146
|
});
|
|
147
147
|
}, SHOW_DELAY_MS);
|
|
148
148
|
}, []);
|
|
149
|
-
const hide =
|
|
149
|
+
const hide = React19.useCallback((id) => {
|
|
150
150
|
if (showTimerRef.current) {
|
|
151
151
|
clearTimeout(showTimerRef.current);
|
|
152
152
|
showTimerRef.current = null;
|
|
@@ -156,34 +156,34 @@ function TooltipProvider({ children }) {
|
|
|
156
156
|
return null;
|
|
157
157
|
});
|
|
158
158
|
}, []);
|
|
159
|
-
const update =
|
|
159
|
+
const update = React19.useCallback((id, patch) => {
|
|
160
160
|
setActive((curr) => {
|
|
161
161
|
if (!curr || curr.id !== id) return curr;
|
|
162
162
|
const proposed = { ...curr, ...patch };
|
|
163
163
|
return shallowEqualActive(curr, proposed) ? curr : proposed;
|
|
164
164
|
});
|
|
165
165
|
}, []);
|
|
166
|
-
const value =
|
|
166
|
+
const value = React19.useMemo(() => ({ show, hide, update, active }), [show, hide, update, active]);
|
|
167
167
|
return /* @__PURE__ */ jsxRuntime.jsxs(TooltipContext.Provider, { value, children: [
|
|
168
168
|
children,
|
|
169
169
|
/* @__PURE__ */ jsxRuntime.jsx(TooltipLayer, {})
|
|
170
170
|
] });
|
|
171
171
|
}
|
|
172
172
|
function TooltipLayer() {
|
|
173
|
-
const ctx =
|
|
173
|
+
const ctx = React19.useContext(TooltipContext);
|
|
174
174
|
const active = ctx == null ? void 0 : ctx.active;
|
|
175
|
-
const bubbleRef =
|
|
176
|
-
const [mounted, setMounted] =
|
|
177
|
-
const [open, setOpen] =
|
|
178
|
-
const [visible, setVisible] =
|
|
179
|
-
const [placement, setPlacement] =
|
|
180
|
-
const [pos, setPos] =
|
|
181
|
-
const lastPlacementRef =
|
|
182
|
-
const lastPosRef =
|
|
183
|
-
const lastActiveIdRef =
|
|
184
|
-
const rafRef =
|
|
185
|
-
|
|
186
|
-
const recompute =
|
|
175
|
+
const bubbleRef = React19.useRef(null);
|
|
176
|
+
const [mounted, setMounted] = React19.useState(false);
|
|
177
|
+
const [open, setOpen] = React19.useState(false);
|
|
178
|
+
const [visible, setVisible] = React19.useState(false);
|
|
179
|
+
const [placement, setPlacement] = React19.useState("top");
|
|
180
|
+
const [pos, setPos] = React19.useState({ top: 0, left: 0 });
|
|
181
|
+
const lastPlacementRef = React19.useRef("top");
|
|
182
|
+
const lastPosRef = React19.useRef({ top: 0, left: 0 });
|
|
183
|
+
const lastActiveIdRef = React19.useRef(null);
|
|
184
|
+
const rafRef = React19.useRef(null);
|
|
185
|
+
React19.useEffect(() => setMounted(true), []);
|
|
186
|
+
const recompute = React19.useCallback(() => {
|
|
187
187
|
if (!(active == null ? void 0 : active.open)) return;
|
|
188
188
|
const trigger = active.triggerEl;
|
|
189
189
|
const bubble = bubbleRef.current;
|
|
@@ -232,13 +232,13 @@ function TooltipLayer() {
|
|
|
232
232
|
}
|
|
233
233
|
if (!visible) setVisible(true);
|
|
234
234
|
}, [active == null ? void 0 : active.open, active == null ? void 0 : active.triggerEl, active == null ? void 0 : active.placement, active == null ? void 0 : active.offset, visible]);
|
|
235
|
-
|
|
235
|
+
React19.useEffect(() => {
|
|
236
236
|
const nextOpen = !!(active == null ? void 0 : active.open);
|
|
237
237
|
setOpen((prev) => prev === nextOpen ? prev : nextOpen);
|
|
238
238
|
if (nextOpen) setVisible(false);
|
|
239
239
|
if (!nextOpen) lastActiveIdRef.current = null;
|
|
240
240
|
}, [active == null ? void 0 : active.open]);
|
|
241
|
-
|
|
241
|
+
React19.useLayoutEffect(() => {
|
|
242
242
|
var _a;
|
|
243
243
|
const id = (_a = active == null ? void 0 : active.id) != null ? _a : null;
|
|
244
244
|
if (!id) return;
|
|
@@ -255,7 +255,7 @@ function TooltipLayer() {
|
|
|
255
255
|
}
|
|
256
256
|
};
|
|
257
257
|
}, [active == null ? void 0 : active.id, recompute]);
|
|
258
|
-
|
|
258
|
+
React19.useLayoutEffect(() => {
|
|
259
259
|
if (!open) return;
|
|
260
260
|
if (rafRef.current) cancelAnimationFrame(rafRef.current);
|
|
261
261
|
rafRef.current = requestAnimationFrame(recompute);
|
|
@@ -276,7 +276,7 @@ function TooltipLayer() {
|
|
|
276
276
|
ro.disconnect();
|
|
277
277
|
};
|
|
278
278
|
}, [open, recompute, active == null ? void 0 : active.triggerEl]);
|
|
279
|
-
|
|
279
|
+
React19.useEffect(() => {
|
|
280
280
|
if (!open || !active) return;
|
|
281
281
|
const onKeyDown = (e) => {
|
|
282
282
|
if (e.key === "Escape") ctx.hide(active.id);
|
|
@@ -308,7 +308,7 @@ function TooltipLayer() {
|
|
|
308
308
|
|
|
309
309
|
// src/components/overlay/tooltip/useTooltipTrigger.tsx
|
|
310
310
|
function useTooltipTrigger(options) {
|
|
311
|
-
const ctx =
|
|
311
|
+
const ctx = React19.useContext(TooltipContext);
|
|
312
312
|
if (!ctx) throw new Error("useTooltipTrigger must be used within <TooltipProvider>.");
|
|
313
313
|
const {
|
|
314
314
|
content,
|
|
@@ -321,21 +321,21 @@ function useTooltipTrigger(options) {
|
|
|
321
321
|
focusOpenMode = "focus-visible",
|
|
322
322
|
closeOnPointerDown = true
|
|
323
323
|
} = options;
|
|
324
|
-
const id =
|
|
325
|
-
const triggerElRef =
|
|
324
|
+
const id = React19.useId();
|
|
325
|
+
const triggerElRef = React19.useRef(null);
|
|
326
326
|
const isControlled = open !== void 0;
|
|
327
|
-
const [uncontrolledOpen, setUncontrolledOpen] =
|
|
327
|
+
const [uncontrolledOpen, setUncontrolledOpen] = React19.useState(defaultOpen);
|
|
328
328
|
const isOpen = isControlled ? !!open : uncontrolledOpen;
|
|
329
|
-
const openTimer =
|
|
330
|
-
const closeTimer =
|
|
329
|
+
const openTimer = React19.useRef(null);
|
|
330
|
+
const closeTimer = React19.useRef(null);
|
|
331
331
|
const clearTimers = () => {
|
|
332
332
|
if (openTimer.current) window.clearTimeout(openTimer.current);
|
|
333
333
|
if (closeTimer.current) window.clearTimeout(closeTimer.current);
|
|
334
334
|
openTimer.current = null;
|
|
335
335
|
closeTimer.current = null;
|
|
336
336
|
};
|
|
337
|
-
const lastSentRef =
|
|
338
|
-
const show =
|
|
337
|
+
const lastSentRef = React19.useRef(null);
|
|
338
|
+
const show = React19.useCallback(() => {
|
|
339
339
|
if (!content) return;
|
|
340
340
|
ctx.show({
|
|
341
341
|
id,
|
|
@@ -346,17 +346,17 @@ function useTooltipTrigger(options) {
|
|
|
346
346
|
});
|
|
347
347
|
lastSentRef.current = { content, placement, offset };
|
|
348
348
|
}, [ctx, id, content, placement, offset]);
|
|
349
|
-
const hide =
|
|
349
|
+
const hide = React19.useCallback(() => {
|
|
350
350
|
ctx.hide(id);
|
|
351
351
|
}, [ctx, id]);
|
|
352
|
-
|
|
352
|
+
React19.useEffect(() => {
|
|
353
353
|
if (!isOpen) {
|
|
354
354
|
hide();
|
|
355
355
|
return;
|
|
356
356
|
}
|
|
357
357
|
show();
|
|
358
358
|
}, [isOpen, show, hide]);
|
|
359
|
-
|
|
359
|
+
React19.useEffect(() => {
|
|
360
360
|
var _a;
|
|
361
361
|
if (!isOpen) return;
|
|
362
362
|
if (((_a = ctx.active) == null ? void 0 : _a.id) !== id) return;
|
|
@@ -451,7 +451,7 @@ function mergeRefs(...refs) {
|
|
|
451
451
|
}
|
|
452
452
|
};
|
|
453
453
|
}
|
|
454
|
-
var Button =
|
|
454
|
+
var Button = React19__namespace.forwardRef(function Button2({
|
|
455
455
|
variant = "outlined",
|
|
456
456
|
shape = "default",
|
|
457
457
|
size = "md",
|
|
@@ -480,8 +480,8 @@ var Button = React20__namespace.forwardRef(function Button2({
|
|
|
480
480
|
userClassName
|
|
481
481
|
);
|
|
482
482
|
const tooltipEnabled = Boolean(tooltip);
|
|
483
|
-
const childRef = isLink &&
|
|
484
|
-
const mergedRef =
|
|
483
|
+
const childRef = isLink && React19__namespace.isValidElement(children) ? (_a = children.ref) != null ? _a : null : null;
|
|
484
|
+
const mergedRef = React19__namespace.useMemo(() => mergeRefs(childRef, ref), [childRef, ref]);
|
|
485
485
|
const { triggerProps, id: tooltipId } = useTooltipTrigger({
|
|
486
486
|
content: tooltipEnabled ? tooltip : null,
|
|
487
487
|
placement: tooltipPlacement,
|
|
@@ -498,7 +498,7 @@ var Button = React20__namespace.forwardRef(function Button2({
|
|
|
498
498
|
loading && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "flex", opacity: 0.5 }, className: "spin", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, {}) })
|
|
499
499
|
] });
|
|
500
500
|
let buttonEl;
|
|
501
|
-
if (isLink &&
|
|
501
|
+
if (isLink && React19__namespace.isValidElement(children)) {
|
|
502
502
|
const childClassName = typeof children.props.className === "string" ? children.props.className : "";
|
|
503
503
|
const { disabled, onClick, ...linkButtonProps } = buttonProps;
|
|
504
504
|
const handleClick = (e) => {
|
|
@@ -508,7 +508,7 @@ var Button = React20__namespace.forwardRef(function Button2({
|
|
|
508
508
|
}
|
|
509
509
|
onClick == null ? void 0 : onClick(e);
|
|
510
510
|
};
|
|
511
|
-
buttonEl =
|
|
511
|
+
buttonEl = React19__namespace.cloneElement(children, {
|
|
512
512
|
...linkButtonProps,
|
|
513
513
|
ref: mergedRef,
|
|
514
514
|
className: cx(childClassName, computedClassName, Button_default.buttonLink),
|
|
@@ -691,11 +691,11 @@ function getDeviceSize(width) {
|
|
|
691
691
|
return "desktop";
|
|
692
692
|
}
|
|
693
693
|
function useDeviceSize() {
|
|
694
|
-
const [deviceSize, setDeviceSize] =
|
|
694
|
+
const [deviceSize, setDeviceSize] = React19.useState(() => {
|
|
695
695
|
if (typeof window === "undefined") return "desktop";
|
|
696
696
|
return getDeviceSize(window.innerWidth);
|
|
697
697
|
});
|
|
698
|
-
|
|
698
|
+
React19.useEffect(() => {
|
|
699
699
|
const mediaQueries = [
|
|
700
700
|
window.matchMedia(`(max-width: ${BREAKPOINTS.tablet - 1}px)`),
|
|
701
701
|
window.matchMedia(
|
|
@@ -888,7 +888,7 @@ function parseMinWidthPx(minWidth, elForEm) {
|
|
|
888
888
|
}
|
|
889
889
|
return 0;
|
|
890
890
|
}
|
|
891
|
-
var Popover =
|
|
891
|
+
var Popover = React19.forwardRef(function Popover2({
|
|
892
892
|
trigger: Trigger,
|
|
893
893
|
children,
|
|
894
894
|
open,
|
|
@@ -908,39 +908,39 @@ var Popover = React20.forwardRef(function Popover2({
|
|
|
908
908
|
anchorRef,
|
|
909
909
|
overlayRef
|
|
910
910
|
}, ref) {
|
|
911
|
-
const internalId =
|
|
911
|
+
const internalId = React19.useId();
|
|
912
912
|
const resolvedContentId = contentId != null ? contentId : `popover-${internalId}`;
|
|
913
913
|
const isControlled = open !== void 0;
|
|
914
|
-
const [uncontrolledOpen, setUncontrolledOpen] =
|
|
914
|
+
const [uncontrolledOpen, setUncontrolledOpen] = React19.useState(defaultOpen);
|
|
915
915
|
const isOpen = isControlled ? !!open : uncontrolledOpen;
|
|
916
|
-
const [pos, setPos] =
|
|
917
|
-
const [positioned, setPositioned] =
|
|
918
|
-
const [triggerWidth, setTriggerWidth] =
|
|
919
|
-
const containerRef =
|
|
920
|
-
const contentRef =
|
|
921
|
-
const triggerElRef =
|
|
922
|
-
const lastCloseReasonRef =
|
|
923
|
-
const [mounted, setMounted] =
|
|
924
|
-
|
|
925
|
-
const setOpen =
|
|
916
|
+
const [pos, setPos] = React19.useState({ top: 0, left: 0 });
|
|
917
|
+
const [positioned, setPositioned] = React19.useState(false);
|
|
918
|
+
const [triggerWidth, setTriggerWidth] = React19.useState(null);
|
|
919
|
+
const containerRef = React19.useRef(null);
|
|
920
|
+
const contentRef = React19.useRef(null);
|
|
921
|
+
const triggerElRef = React19.useRef(null);
|
|
922
|
+
const lastCloseReasonRef = React19.useRef("unknown");
|
|
923
|
+
const [mounted, setMounted] = React19.useState(false);
|
|
924
|
+
React19.useEffect(() => setMounted(true), []);
|
|
925
|
+
const setOpen = React19.useCallback(
|
|
926
926
|
(next) => {
|
|
927
927
|
if (!isControlled) setUncontrolledOpen(next);
|
|
928
928
|
onOpenChange == null ? void 0 : onOpenChange(next);
|
|
929
929
|
},
|
|
930
930
|
[isControlled, onOpenChange]
|
|
931
931
|
);
|
|
932
|
-
const openPopover =
|
|
932
|
+
const openPopover = React19.useCallback(() => {
|
|
933
933
|
setPositioned(false);
|
|
934
934
|
setOpen(true);
|
|
935
935
|
}, [setOpen]);
|
|
936
|
-
const closePopover =
|
|
936
|
+
const closePopover = React19.useCallback(
|
|
937
937
|
(reason = "api") => {
|
|
938
938
|
lastCloseReasonRef.current = reason;
|
|
939
939
|
setOpen(false);
|
|
940
940
|
},
|
|
941
941
|
[setOpen]
|
|
942
942
|
);
|
|
943
|
-
const togglePopover =
|
|
943
|
+
const togglePopover = React19.useCallback(
|
|
944
944
|
(e) => {
|
|
945
945
|
var _a, _b;
|
|
946
946
|
triggerElRef.current = (_b = (_a = anchorRef == null ? void 0 : anchorRef.current) != null ? _a : e.currentTarget) != null ? _b : containerRef.current;
|
|
@@ -949,7 +949,7 @@ var Popover = React20.forwardRef(function Popover2({
|
|
|
949
949
|
},
|
|
950
950
|
[isOpen, closePopover, openPopover, anchorRef]
|
|
951
951
|
);
|
|
952
|
-
|
|
952
|
+
React19.useImperativeHandle(
|
|
953
953
|
ref,
|
|
954
954
|
() => ({
|
|
955
955
|
close: () => closePopover("api"),
|
|
@@ -958,7 +958,7 @@ var Popover = React20.forwardRef(function Popover2({
|
|
|
958
958
|
}),
|
|
959
959
|
[closePopover, openPopover, isOpen]
|
|
960
960
|
);
|
|
961
|
-
const computeAndSetPosition =
|
|
961
|
+
const computeAndSetPosition = React19.useCallback(() => {
|
|
962
962
|
var _a, _b;
|
|
963
963
|
const content = contentRef.current;
|
|
964
964
|
if (!content) return;
|
|
@@ -1023,11 +1023,11 @@ var Popover = React20.forwardRef(function Popover2({
|
|
|
1023
1023
|
setPos({ top: clampedTop, left: clampedLeft });
|
|
1024
1024
|
setPositioned(true);
|
|
1025
1025
|
}, [anchorRef, edgeBuffer, viewportPadding, minWidth, matchTriggerWidth]);
|
|
1026
|
-
|
|
1026
|
+
React19.useLayoutEffect(() => {
|
|
1027
1027
|
if (!isOpen) return;
|
|
1028
1028
|
computeAndSetPosition();
|
|
1029
1029
|
}, [isOpen, computeAndSetPosition]);
|
|
1030
|
-
|
|
1030
|
+
React19.useEffect(() => {
|
|
1031
1031
|
var _a, _b, _c;
|
|
1032
1032
|
if (!isOpen) return;
|
|
1033
1033
|
const content = contentRef.current;
|
|
@@ -1067,7 +1067,7 @@ var Popover = React20.forwardRef(function Popover2({
|
|
|
1067
1067
|
resizeObserver == null ? void 0 : resizeObserver.disconnect();
|
|
1068
1068
|
};
|
|
1069
1069
|
}, [isOpen, closePopover, computeAndSetPosition, autoFocusContent, anchorRef]);
|
|
1070
|
-
|
|
1070
|
+
React19.useEffect(() => {
|
|
1071
1071
|
var _a, _b;
|
|
1072
1072
|
if (isOpen) return;
|
|
1073
1073
|
if (!returnFocus) return;
|
|
@@ -1075,7 +1075,7 @@ var Popover = React20.forwardRef(function Popover2({
|
|
|
1075
1075
|
(_b = (_a = triggerElRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
|
|
1076
1076
|
}, [isOpen, returnFocus]);
|
|
1077
1077
|
const icon = isOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "dbc-muted-text", size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "dbc-muted-text", size: 20 });
|
|
1078
|
-
const setOverlayRef =
|
|
1078
|
+
const setOverlayRef = React19__namespace.useCallback(
|
|
1079
1079
|
(node) => {
|
|
1080
1080
|
assignRef(overlayRef, node);
|
|
1081
1081
|
},
|
|
@@ -1143,10 +1143,10 @@ function NavBar({
|
|
|
1143
1143
|
activeLink,
|
|
1144
1144
|
size
|
|
1145
1145
|
}) {
|
|
1146
|
-
const [mobileOpen, setMobileOpen] =
|
|
1146
|
+
const [mobileOpen, setMobileOpen] = React19.useState(false);
|
|
1147
1147
|
const deviceSize = useDeviceSize();
|
|
1148
1148
|
const isMobile = deviceSize === "mobile";
|
|
1149
|
-
const navRef =
|
|
1149
|
+
const navRef = React19.useRef(null);
|
|
1150
1150
|
const navLinks = items == null ? void 0 : items.filter((i) => i.enabled !== false).map((item, id) => {
|
|
1151
1151
|
const { component: Component, label, icon, href, active, external } = item;
|
|
1152
1152
|
const isActive = activeLink ? href === activeLink : Boolean(active);
|
|
@@ -1259,12 +1259,12 @@ function Avatar({
|
|
|
1259
1259
|
"--text": SeverityTextColor[color],
|
|
1260
1260
|
"--size": fullWidth ? "100%" : sizes[size]
|
|
1261
1261
|
};
|
|
1262
|
-
const pathId =
|
|
1262
|
+
const pathId = React19__namespace.useId();
|
|
1263
1263
|
const renderImage = () => {
|
|
1264
1264
|
if (image) {
|
|
1265
|
-
if (
|
|
1265
|
+
if (React19__namespace.isValidElement(image)) {
|
|
1266
1266
|
const mergedClass = [image.props.className, Avatar_default.image].filter(Boolean).join(" ");
|
|
1267
|
-
return
|
|
1267
|
+
return React19__namespace.cloneElement(image, { className: mergedClass });
|
|
1268
1268
|
}
|
|
1269
1269
|
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: Avatar_default.imageSlot, children: image });
|
|
1270
1270
|
}
|
|
@@ -1436,9 +1436,9 @@ function Checkbox({
|
|
|
1436
1436
|
id,
|
|
1437
1437
|
"data-cy": dataCy
|
|
1438
1438
|
}) {
|
|
1439
|
-
const [internal, setInternal] =
|
|
1439
|
+
const [internal, setInternal] = React19.useState(false);
|
|
1440
1440
|
const isChecked = controlled != null ? controlled : internal;
|
|
1441
|
-
const generatedId =
|
|
1441
|
+
const generatedId = React19.useId();
|
|
1442
1442
|
const controlId = id != null ? id : `checkbox-${generatedId}`;
|
|
1443
1443
|
const toggle = (e) => {
|
|
1444
1444
|
if (disabled) return;
|
|
@@ -1527,7 +1527,7 @@ function RadioButton({
|
|
|
1527
1527
|
id,
|
|
1528
1528
|
"data-cy": dataCy
|
|
1529
1529
|
}) {
|
|
1530
|
-
const generatedId =
|
|
1530
|
+
const generatedId = React19.useId();
|
|
1531
1531
|
const controlId = id != null ? id : `radio-${generatedId}`;
|
|
1532
1532
|
const isChecked = selectedValue !== void 0 ? selectedValue === value : Boolean(checked);
|
|
1533
1533
|
const content = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: RadioButtons_default.container, "data-cy": dataCy, children: [
|
|
@@ -1587,9 +1587,9 @@ var INTERACTIVE_SELECTOR = 'a:not([disabled]), button:not([disabled]), [tabindex
|
|
|
1587
1587
|
function getMenuItems(el) {
|
|
1588
1588
|
return Array.from(el.querySelectorAll(INTERACTIVE_SELECTOR));
|
|
1589
1589
|
}
|
|
1590
|
-
var MenuBase =
|
|
1590
|
+
var MenuBase = React19__namespace.forwardRef(
|
|
1591
1591
|
({ children, className, itemRole = "menuitem", gap, onKeyDown, ...props }, ref) => {
|
|
1592
|
-
const internalRef =
|
|
1592
|
+
const internalRef = React19__namespace.useRef(null);
|
|
1593
1593
|
const handleKeyDown = (e) => {
|
|
1594
1594
|
const ul = internalRef.current;
|
|
1595
1595
|
if (!ul) return;
|
|
@@ -1632,16 +1632,16 @@ var MenuBase = React20__namespace.forwardRef(
|
|
|
1632
1632
|
}
|
|
1633
1633
|
);
|
|
1634
1634
|
MenuBase.displayName = "Menu";
|
|
1635
|
-
var isInteractiveEl = (el) =>
|
|
1635
|
+
var isInteractiveEl = (el) => React19__namespace.isValidElement(el) && (typeof el.type === "string" ? el.type === "a" || el.type === "button" : true);
|
|
1636
1636
|
function applyMenuItemPropsToElement(child, opts) {
|
|
1637
1637
|
var _a, _b, _c, _d;
|
|
1638
1638
|
const { active, selected, disabled, role, tabIndex = 0, className } = opts;
|
|
1639
1639
|
const childClass = [Menu_default.item, active ? Menu_default.active : "", selected ? Menu_default.selected : ""].filter(Boolean).join(" ");
|
|
1640
|
-
const nextImmediate =
|
|
1640
|
+
const nextImmediate = React19__namespace.cloneElement(child, {
|
|
1641
1641
|
className: [child.props.className, Menu_default.interactiveChild, className].filter(Boolean).join(" ")
|
|
1642
1642
|
});
|
|
1643
1643
|
if (typeof child.type === "string" && (child.type === "a" || child.type === "button")) {
|
|
1644
|
-
return
|
|
1644
|
+
return React19__namespace.cloneElement(child, {
|
|
1645
1645
|
role: (_a = child.props.role) != null ? _a : role,
|
|
1646
1646
|
tabIndex: (_b = child.props.tabIndex) != null ? _b : tabIndex,
|
|
1647
1647
|
"aria-selected": selected || void 0,
|
|
@@ -1650,7 +1650,7 @@ function applyMenuItemPropsToElement(child, opts) {
|
|
|
1650
1650
|
...child.type === "button" ? { disabled } : {}
|
|
1651
1651
|
});
|
|
1652
1652
|
}
|
|
1653
|
-
return
|
|
1653
|
+
return React19__namespace.cloneElement(nextImmediate, {
|
|
1654
1654
|
role: (_c = nextImmediate.props.role) != null ? _c : role,
|
|
1655
1655
|
tabIndex: (_d = nextImmediate.props.tabIndex) != null ? _d : tabIndex,
|
|
1656
1656
|
"aria-selected": selected || void 0,
|
|
@@ -1659,7 +1659,7 @@ function applyMenuItemPropsToElement(child, opts) {
|
|
|
1659
1659
|
disabled
|
|
1660
1660
|
});
|
|
1661
1661
|
}
|
|
1662
|
-
var MenuItem =
|
|
1662
|
+
var MenuItem = React19__namespace.forwardRef(
|
|
1663
1663
|
({ children, active, selected, disabled, className, itemRole, variant, ...liProps }, ref) => {
|
|
1664
1664
|
const resolvedRole = itemRole != null ? itemRole : "menuitem";
|
|
1665
1665
|
const isBordered = variant === "bordered";
|
|
@@ -1697,7 +1697,7 @@ var MenuItem = React20__namespace.forwardRef(
|
|
|
1697
1697
|
}
|
|
1698
1698
|
);
|
|
1699
1699
|
MenuItem.displayName = "Menu.Item";
|
|
1700
|
-
var MenuCheckItem =
|
|
1700
|
+
var MenuCheckItem = React19__namespace.forwardRef(
|
|
1701
1701
|
({
|
|
1702
1702
|
label,
|
|
1703
1703
|
checked,
|
|
@@ -1763,7 +1763,7 @@ var MenuCheckItem = React20__namespace.forwardRef(
|
|
|
1763
1763
|
}
|
|
1764
1764
|
);
|
|
1765
1765
|
MenuCheckItem.displayName = "Menu.CheckItem";
|
|
1766
|
-
var MenuRadioItem =
|
|
1766
|
+
var MenuRadioItem = React19__namespace.forwardRef(
|
|
1767
1767
|
({ name, value, checked, disabled, label, onValueChange, className, ...liProps }, ref) => {
|
|
1768
1768
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1769
1769
|
"li",
|
|
@@ -1803,7 +1803,7 @@ var MenuRadioItem = React20__namespace.forwardRef(
|
|
|
1803
1803
|
}
|
|
1804
1804
|
);
|
|
1805
1805
|
MenuRadioItem.displayName = "Menu.RadioItem";
|
|
1806
|
-
var MenuSeparator =
|
|
1806
|
+
var MenuSeparator = React19__namespace.forwardRef(
|
|
1807
1807
|
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1808
1808
|
"li",
|
|
1809
1809
|
{
|
|
@@ -1815,7 +1815,7 @@ var MenuSeparator = React20__namespace.forwardRef(
|
|
|
1815
1815
|
)
|
|
1816
1816
|
);
|
|
1817
1817
|
MenuSeparator.displayName = "Menu.Separator";
|
|
1818
|
-
var MenuHeader =
|
|
1818
|
+
var MenuHeader = React19__namespace.forwardRef(
|
|
1819
1819
|
({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1820
1820
|
"li",
|
|
1821
1821
|
{
|
|
@@ -1945,9 +1945,9 @@ function Chip({
|
|
|
1945
1945
|
selected = false,
|
|
1946
1946
|
onClose
|
|
1947
1947
|
}) {
|
|
1948
|
-
const [chipWidth, setChipWidth] =
|
|
1949
|
-
const chipRef =
|
|
1950
|
-
|
|
1948
|
+
const [chipWidth, setChipWidth] = React19.useState(void 0);
|
|
1949
|
+
const chipRef = React19.useRef(null);
|
|
1950
|
+
React19.useEffect(() => {
|
|
1951
1951
|
if (chipRef.current) {
|
|
1952
1952
|
setChipWidth(`${chipRef.current.offsetWidth}px`);
|
|
1953
1953
|
}
|
|
@@ -2427,8 +2427,8 @@ function getFirstEnabledId(items) {
|
|
|
2427
2427
|
}
|
|
2428
2428
|
function normalizeFromChildren(children) {
|
|
2429
2429
|
const items = [];
|
|
2430
|
-
|
|
2431
|
-
if (!
|
|
2430
|
+
React19.Children.forEach(children, (child) => {
|
|
2431
|
+
if (!React19.isValidElement(child)) return;
|
|
2432
2432
|
const t = child.type;
|
|
2433
2433
|
if ((t == null ? void 0 : t.__TABS_SLOT__) !== "Item") return;
|
|
2434
2434
|
const props = child.props;
|
|
@@ -2458,24 +2458,24 @@ function Tabs({
|
|
|
2458
2458
|
loading = false,
|
|
2459
2459
|
children
|
|
2460
2460
|
}) {
|
|
2461
|
-
const uid =
|
|
2462
|
-
const sourceTabs =
|
|
2461
|
+
const uid = React19.useId();
|
|
2462
|
+
const sourceTabs = React19.useMemo(() => {
|
|
2463
2463
|
if (tabs && tabs.length) return tabs;
|
|
2464
2464
|
return normalizeFromChildren(children);
|
|
2465
2465
|
}, [tabs, children]);
|
|
2466
|
-
const visibleTabs =
|
|
2466
|
+
const visibleTabs = React19.useMemo(() => sourceTabs.filter((t) => !t.hidden), [sourceTabs]);
|
|
2467
2467
|
const isControlled = value !== void 0;
|
|
2468
|
-
const [internalValue, setInternalValue] =
|
|
2468
|
+
const [internalValue, setInternalValue] = React19.useState(() => {
|
|
2469
2469
|
return defaultValue != null ? defaultValue : getFirstEnabledId(visibleTabs);
|
|
2470
2470
|
});
|
|
2471
2471
|
const currentValue = isControlled ? value : internalValue;
|
|
2472
|
-
const activeIndex =
|
|
2472
|
+
const activeIndex = React19.useMemo(() => {
|
|
2473
2473
|
if (!visibleTabs.length) return -1;
|
|
2474
2474
|
const idx = visibleTabs.findIndex((t) => t.id === currentValue);
|
|
2475
2475
|
return idx >= 0 ? idx : 0;
|
|
2476
2476
|
}, [visibleTabs, currentValue]);
|
|
2477
2477
|
const activeTab = activeIndex >= 0 ? visibleTabs[activeIndex] : void 0;
|
|
2478
|
-
const setValue =
|
|
2478
|
+
const setValue = React19.useCallback(
|
|
2479
2479
|
(nextId) => {
|
|
2480
2480
|
const idx = visibleTabs.findIndex((t) => t.id === nextId);
|
|
2481
2481
|
const tab = idx >= 0 ? visibleTabs[idx] : void 0;
|
|
@@ -2485,7 +2485,7 @@ function Tabs({
|
|
|
2485
2485
|
},
|
|
2486
2486
|
[visibleTabs, isControlled, onValueChange]
|
|
2487
2487
|
);
|
|
2488
|
-
|
|
2488
|
+
React19.useEffect(() => {
|
|
2489
2489
|
if (!visibleTabs.length) return;
|
|
2490
2490
|
const current = currentValue;
|
|
2491
2491
|
const stillValid = visibleTabs.some((t) => t.id === current && !t.disabled);
|
|
@@ -2494,7 +2494,7 @@ function Tabs({
|
|
|
2494
2494
|
if (next === void 0) return;
|
|
2495
2495
|
setValue(next);
|
|
2496
2496
|
}, [visibleTabs, currentValue, setValue]);
|
|
2497
|
-
const onKeyDownTab =
|
|
2497
|
+
const onKeyDownTab = React19.useCallback(
|
|
2498
2498
|
(e, index) => {
|
|
2499
2499
|
var _a;
|
|
2500
2500
|
const enabled = visibleTabs.filter((t) => !t.disabled);
|
|
@@ -2587,9 +2587,9 @@ function CollapsibleHeadline({
|
|
|
2587
2587
|
weight = 400,
|
|
2588
2588
|
...headlineProps
|
|
2589
2589
|
}) {
|
|
2590
|
-
const generatedId =
|
|
2590
|
+
const generatedId = React19.useId();
|
|
2591
2591
|
const panelId = controls != null ? controls : generatedId;
|
|
2592
|
-
const [internalExpanded, setInternalExpanded] =
|
|
2592
|
+
const [internalExpanded, setInternalExpanded] = React19.useState(() => {
|
|
2593
2593
|
if (!storageKey || typeof window === "undefined") return expanded != null ? expanded : true;
|
|
2594
2594
|
const stored = localStorage.getItem(storageKey);
|
|
2595
2595
|
return stored !== null ? stored === "true" : expanded != null ? expanded : true;
|
|
@@ -2673,8 +2673,8 @@ function getSlotName(el) {
|
|
|
2673
2673
|
function splitSlots(children) {
|
|
2674
2674
|
const slots = {};
|
|
2675
2675
|
const rest = [];
|
|
2676
|
-
|
|
2677
|
-
if (!
|
|
2676
|
+
React19.Children.forEach(children, (child) => {
|
|
2677
|
+
if (!React19.isValidElement(child)) {
|
|
2678
2678
|
if (child != null) rest.push(child);
|
|
2679
2679
|
return;
|
|
2680
2680
|
}
|
|
@@ -2783,12 +2783,12 @@ function Hyperlink(props) {
|
|
|
2783
2783
|
inline ? "" : Hyperlink_default.block
|
|
2784
2784
|
);
|
|
2785
2785
|
if (asChild) {
|
|
2786
|
-
const child =
|
|
2787
|
-
if (!
|
|
2786
|
+
const child = React19__namespace.Children.only(children);
|
|
2787
|
+
if (!React19__namespace.isValidElement(child)) {
|
|
2788
2788
|
throw new Error("Hyperlink with asChild expects a single valid React element as its child.");
|
|
2789
2789
|
}
|
|
2790
2790
|
const childProps = (_a = child.props) != null ? _a : {};
|
|
2791
|
-
return
|
|
2791
|
+
return React19__namespace.cloneElement(child, {
|
|
2792
2792
|
...childProps,
|
|
2793
2793
|
...rest,
|
|
2794
2794
|
className: cx2(childProps.className, linkClassName),
|
|
@@ -2823,15 +2823,15 @@ function Hyperlink(props) {
|
|
|
2823
2823
|
);
|
|
2824
2824
|
}
|
|
2825
2825
|
|
|
2826
|
-
// src/components/page-layout/components/
|
|
2827
|
-
var
|
|
2828
|
-
footer: "
|
|
2829
|
-
inner: "
|
|
2830
|
-
brand: "
|
|
2831
|
-
logoRow: "
|
|
2832
|
-
meta: "
|
|
2833
|
-
part: "
|
|
2834
|
-
links: "
|
|
2826
|
+
// src/components/page-layout/components/footer/Footer.module.css
|
|
2827
|
+
var Footer_default = {
|
|
2828
|
+
footer: "Footer_footer",
|
|
2829
|
+
inner: "Footer_inner",
|
|
2830
|
+
brand: "Footer_brand",
|
|
2831
|
+
logoRow: "Footer_logoRow",
|
|
2832
|
+
meta: "Footer_meta",
|
|
2833
|
+
part: "Footer_part",
|
|
2834
|
+
links: "Footer_links"};
|
|
2835
2835
|
var DEFAULT_META_PARTS = [
|
|
2836
2836
|
"Tempovej 7-11",
|
|
2837
2837
|
"DK-2750 Ballerup",
|
|
@@ -2843,23 +2843,23 @@ var DEFAULT_LINKS = [
|
|
|
2843
2843
|
label: "Kundeservice",
|
|
2844
2844
|
href: "https://kundeservice.dbc.dk",
|
|
2845
2845
|
external: true
|
|
2846
|
-
},
|
|
2847
|
-
{
|
|
2848
|
-
label: "Cookies",
|
|
2849
|
-
href: "/cookies"
|
|
2850
2846
|
}
|
|
2851
2847
|
];
|
|
2852
|
-
function
|
|
2848
|
+
function Footer({
|
|
2853
2849
|
links = DEFAULT_LINKS,
|
|
2854
2850
|
metaParts = DEFAULT_META_PARTS,
|
|
2851
|
+
version,
|
|
2855
2852
|
extraLinks
|
|
2856
2853
|
}) {
|
|
2857
|
-
|
|
2858
|
-
|
|
2859
|
-
|
|
2860
|
-
|
|
2854
|
+
const displayMetaParts = version && metaParts.length > 0 ? metaParts.map(
|
|
2855
|
+
(part, index) => index === metaParts.length - 1 ? `${part} \xB7 ${version}` : part
|
|
2856
|
+
) : metaParts;
|
|
2857
|
+
return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: Footer_default.footer, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Footer_default.inner, children: [
|
|
2858
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: Footer_default.brand, children: [
|
|
2859
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: Footer_default.logoRow, children: /* @__PURE__ */ jsxRuntime.jsx(Logo, {}) }),
|
|
2860
|
+
/* @__PURE__ */ jsxRuntime.jsx("address", { className: Footer_default.meta, children: displayMetaParts.map((part) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: Footer_default.part, children: part }, part)) })
|
|
2861
2861
|
] }),
|
|
2862
|
-
/* @__PURE__ */ jsxRuntime.jsxs("nav", { className:
|
|
2862
|
+
/* @__PURE__ */ jsxRuntime.jsxs("nav", { className: Footer_default.links, "aria-label": "Footer navigation", children: [
|
|
2863
2863
|
extraLinks && extraLinks.length > 0 && (extraLinks == null ? void 0 : extraLinks.map((link, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: link }, index))),
|
|
2864
2864
|
links.map((link) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2865
2865
|
Hyperlink,
|
|
@@ -2937,7 +2937,7 @@ function mergeRefs2(...refs) {
|
|
|
2937
2937
|
}
|
|
2938
2938
|
};
|
|
2939
2939
|
}
|
|
2940
|
-
var Input =
|
|
2940
|
+
var Input = React19.forwardRef(function Input2({
|
|
2941
2941
|
label,
|
|
2942
2942
|
error,
|
|
2943
2943
|
helpText,
|
|
@@ -2971,10 +2971,10 @@ var Input = React20.forwardRef(function Input2({
|
|
|
2971
2971
|
endAdornment,
|
|
2972
2972
|
...inputProps
|
|
2973
2973
|
}, ref) {
|
|
2974
|
-
const inputRef =
|
|
2975
|
-
const reactId =
|
|
2974
|
+
const inputRef = React19.useRef(null);
|
|
2975
|
+
const reactId = React19.useId();
|
|
2976
2976
|
const inputId = id != null ? id : `input-${reactId}`;
|
|
2977
|
-
|
|
2977
|
+
React19.useEffect(() => {
|
|
2978
2978
|
var _a;
|
|
2979
2979
|
if (autoFocus) (_a = inputRef.current) == null ? void 0 : _a.focus();
|
|
2980
2980
|
}, [autoFocus]);
|
|
@@ -3107,7 +3107,7 @@ var SearchBox_default = {
|
|
|
3107
3107
|
suggestionCell: "SearchBox_suggestionCell",
|
|
3108
3108
|
suggestionRowActive: "SearchBox_suggestionRowActive"
|
|
3109
3109
|
};
|
|
3110
|
-
var SearchBox =
|
|
3110
|
+
var SearchBox = React19.forwardRef(function SearchBoxInner({
|
|
3111
3111
|
inputWidth,
|
|
3112
3112
|
maxWidth,
|
|
3113
3113
|
inputSize,
|
|
@@ -3134,24 +3134,24 @@ var SearchBox = React20.forwardRef(function SearchBoxInner({
|
|
|
3134
3134
|
...rest
|
|
3135
3135
|
}, ref) {
|
|
3136
3136
|
const isControlled = value !== void 0;
|
|
3137
|
-
const [draft, setDraft] =
|
|
3138
|
-
const [searchQuery, setSearchQuery] =
|
|
3139
|
-
const [activeIndex, setActiveIndex] =
|
|
3140
|
-
const popoverRef =
|
|
3141
|
-
const internalInputRef =
|
|
3142
|
-
|
|
3137
|
+
const [draft, setDraft] = React19.useState(() => isControlled ? String(value != null ? value : "") : "");
|
|
3138
|
+
const [searchQuery, setSearchQuery] = React19.useState("");
|
|
3139
|
+
const [activeIndex, setActiveIndex] = React19.useState(null);
|
|
3140
|
+
const popoverRef = React19.useRef(null);
|
|
3141
|
+
const internalInputRef = React19.useRef(null);
|
|
3142
|
+
React19.useEffect(() => {
|
|
3143
3143
|
if (typeof ref === "function") {
|
|
3144
3144
|
ref(internalInputRef.current);
|
|
3145
3145
|
} else if (ref) {
|
|
3146
3146
|
ref.current = internalInputRef.current;
|
|
3147
3147
|
}
|
|
3148
3148
|
}, [ref]);
|
|
3149
|
-
|
|
3149
|
+
React19.useEffect(() => {
|
|
3150
3150
|
if (!isControlled) return;
|
|
3151
3151
|
const next = String(value != null ? value : "");
|
|
3152
3152
|
if (next !== draft) setDraft(next);
|
|
3153
3153
|
}, [value]);
|
|
3154
|
-
|
|
3154
|
+
React19.useEffect(() => {
|
|
3155
3155
|
if (!onSearch) return;
|
|
3156
3156
|
if (!debounce) {
|
|
3157
3157
|
setSearchQuery(draft);
|
|
@@ -3164,7 +3164,7 @@ var SearchBox = React20.forwardRef(function SearchBoxInner({
|
|
|
3164
3164
|
}, debounceMs);
|
|
3165
3165
|
return () => clearTimeout(handler);
|
|
3166
3166
|
}, [draft, onSearch, debounce, debounceMs]);
|
|
3167
|
-
|
|
3167
|
+
React19.useEffect(() => {
|
|
3168
3168
|
function handleKeyDown(event) {
|
|
3169
3169
|
var _a;
|
|
3170
3170
|
if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
|
|
@@ -3177,14 +3177,14 @@ var SearchBox = React20.forwardRef(function SearchBoxInner({
|
|
|
3177
3177
|
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
3178
3178
|
}
|
|
3179
3179
|
}, [enableHotkey]);
|
|
3180
|
-
const handleChange =
|
|
3180
|
+
const handleChange = React19__namespace.default.useCallback(
|
|
3181
3181
|
(e) => {
|
|
3182
3182
|
setDraft(e.target.value);
|
|
3183
3183
|
onChange == null ? void 0 : onChange(e);
|
|
3184
3184
|
},
|
|
3185
3185
|
[onChange]
|
|
3186
3186
|
);
|
|
3187
|
-
const handleSelect =
|
|
3187
|
+
const handleSelect = React19__namespace.default.useCallback(
|
|
3188
3188
|
(item) => {
|
|
3189
3189
|
onSelect == null ? void 0 : onSelect(item);
|
|
3190
3190
|
reset();
|
|
@@ -3198,16 +3198,16 @@ var SearchBox = React20.forwardRef(function SearchBoxInner({
|
|
|
3198
3198
|
setActiveIndex(null);
|
|
3199
3199
|
(_a = popoverRef.current) == null ? void 0 : _a.close();
|
|
3200
3200
|
}
|
|
3201
|
-
const handleClear =
|
|
3201
|
+
const handleClear = React19__namespace.default.useCallback(() => {
|
|
3202
3202
|
var _a;
|
|
3203
3203
|
reset();
|
|
3204
3204
|
onSearch == null ? void 0 : onSearch("");
|
|
3205
3205
|
(_a = internalInputRef.current) == null ? void 0 : _a.focus();
|
|
3206
3206
|
}, [onSearch]);
|
|
3207
|
-
|
|
3207
|
+
React19.useEffect(() => {
|
|
3208
3208
|
setActiveIndex(null);
|
|
3209
3209
|
}, [result]);
|
|
3210
|
-
const inputField =
|
|
3210
|
+
const inputField = React19.useMemo(() => {
|
|
3211
3211
|
var _a;
|
|
3212
3212
|
const inputProps = {
|
|
3213
3213
|
...rest,
|
|
@@ -3384,8 +3384,8 @@ function applyTheme(id) {
|
|
|
3384
3384
|
document.documentElement.dataset.theme = id;
|
|
3385
3385
|
}
|
|
3386
3386
|
function useTheme(initialTheme = "system") {
|
|
3387
|
-
const [theme, setTheme] =
|
|
3388
|
-
|
|
3387
|
+
const [theme, setTheme] = React19.useState(null);
|
|
3388
|
+
React19.useEffect(() => {
|
|
3389
3389
|
const themeFromDataAttributes = getTheme();
|
|
3390
3390
|
let resolved = isThemeVariant(themeFromDataAttributes) ? themeFromDataAttributes : initialTheme;
|
|
3391
3391
|
const fromCookie = getCookie(STORAGE_KEY);
|
|
@@ -3403,7 +3403,7 @@ function useTheme(initialTheme = "system") {
|
|
|
3403
3403
|
setTheme(resolved);
|
|
3404
3404
|
persistTheme(resolved);
|
|
3405
3405
|
}, [initialTheme]);
|
|
3406
|
-
const switchTheme =
|
|
3406
|
+
const switchTheme = React19.useCallback((id) => {
|
|
3407
3407
|
applyTheme(id);
|
|
3408
3408
|
setTheme(id);
|
|
3409
3409
|
persistTheme(id);
|
|
@@ -3682,6 +3682,7 @@ var Page_default = {
|
|
|
3682
3682
|
disableTopPadding: "Page_disableTopPadding",
|
|
3683
3683
|
headerMain: "Page_headerMain",
|
|
3684
3684
|
content: "Page_content",
|
|
3685
|
+
contentLoading: "Page_contentLoading",
|
|
3685
3686
|
disableContentBox: "Page_disableContentBox"
|
|
3686
3687
|
};
|
|
3687
3688
|
|
|
@@ -3693,7 +3694,7 @@ function Breadcrumbs({
|
|
|
3693
3694
|
items,
|
|
3694
3695
|
...navProps
|
|
3695
3696
|
}) {
|
|
3696
|
-
return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: Breadcrumbs_default.breadcrumbs, "aria-label": "breadcrumb", ...navProps, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3697
|
+
return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: Breadcrumbs_default.breadcrumbs, "aria-label": "breadcrumb", ...navProps, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React19.Fragment, { children: [
|
|
3697
3698
|
/* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
|
|
3698
3699
|
item.icon && item.icon,
|
|
3699
3700
|
item.onClick ? /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: item.onClick, children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
|
|
@@ -3737,7 +3738,13 @@ function Page({
|
|
|
3737
3738
|
}
|
|
3738
3739
|
) : null
|
|
3739
3740
|
] }) }),
|
|
3740
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3741
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3742
|
+
"div",
|
|
3743
|
+
{
|
|
3744
|
+
className: `${Page_default.content} ${loading ? Page_default.contentLoading : ""} ${disableContentBox ? Page_default.disableContentBox : ""}`,
|
|
3745
|
+
children: loading ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) : children
|
|
3746
|
+
}
|
|
3747
|
+
)
|
|
3741
3748
|
]
|
|
3742
3749
|
}
|
|
3743
3750
|
);
|
|
@@ -3793,18 +3800,18 @@ function Pagination({
|
|
|
3793
3800
|
showFirstLast = true,
|
|
3794
3801
|
showGoToPage = true
|
|
3795
3802
|
}) {
|
|
3796
|
-
const popoverRef =
|
|
3797
|
-
const pageSizeRef =
|
|
3798
|
-
const formatNumber =
|
|
3799
|
-
const totalPages =
|
|
3803
|
+
const popoverRef = React19.useRef(null);
|
|
3804
|
+
const pageSizeRef = React19.useRef(null);
|
|
3805
|
+
const formatNumber = React19.useCallback((value) => value.toLocaleString(NUMBER_LOCALE), []);
|
|
3806
|
+
const totalPages = React19.useMemo(
|
|
3800
3807
|
() => Math.max(1, Math.ceil(itemsCount / Math.max(1, take))),
|
|
3801
3808
|
[itemsCount, take]
|
|
3802
3809
|
);
|
|
3803
|
-
const currentPage =
|
|
3810
|
+
const currentPage = React19.useMemo(() => {
|
|
3804
3811
|
const p = Math.floor(skip / Math.max(1, take)) + 1;
|
|
3805
3812
|
return Math.min(Math.max(1, p), totalPages);
|
|
3806
3813
|
}, [skip, take, totalPages]);
|
|
3807
|
-
const emit =
|
|
3814
|
+
const emit = React19.useCallback(
|
|
3808
3815
|
(page, nextTake = take) => {
|
|
3809
3816
|
const nextTotalPages = Math.max(1, Math.ceil(itemsCount / Math.max(1, nextTake)));
|
|
3810
3817
|
const clampedPage = Math.min(Math.max(1, page), nextTotalPages);
|
|
@@ -3818,21 +3825,21 @@ function Pagination({
|
|
|
3818
3825
|
},
|
|
3819
3826
|
[onPageChange, take, itemsCount]
|
|
3820
3827
|
);
|
|
3821
|
-
const firstPage =
|
|
3822
|
-
const lastPage =
|
|
3823
|
-
const prevPage =
|
|
3824
|
-
const nextPage =
|
|
3825
|
-
const goToPage =
|
|
3828
|
+
const firstPage = React19.useCallback(() => emit(1), [emit]);
|
|
3829
|
+
const lastPage = React19.useCallback(() => emit(totalPages), [emit, totalPages]);
|
|
3830
|
+
const prevPage = React19.useCallback(() => emit(currentPage - 1), [emit, currentPage]);
|
|
3831
|
+
const nextPage = React19.useCallback(() => emit(currentPage + 1), [emit, currentPage]);
|
|
3832
|
+
const goToPage = React19.useCallback((page) => emit(page), [emit]);
|
|
3826
3833
|
const canPrev = currentPage > 1;
|
|
3827
3834
|
const canNext = currentPage < totalPages;
|
|
3828
|
-
const rangeLabel =
|
|
3835
|
+
const rangeLabel = React19.useMemo(() => {
|
|
3829
3836
|
if (itemsCount <= 0) return "0 af 0";
|
|
3830
3837
|
const first = skip + 1;
|
|
3831
3838
|
const last = Math.min(skip + take, itemsCount);
|
|
3832
3839
|
return `${formatNumber(first)}\u2013${formatNumber(last)} af ${formatNumber(itemsCount)}`;
|
|
3833
3840
|
}, [formatNumber, itemsCount, skip, take]);
|
|
3834
|
-
const pages =
|
|
3835
|
-
const handlePageSizeChange =
|
|
3841
|
+
const pages = React19.useMemo(() => Array.from({ length: totalPages }, (_, i) => i + 1), [totalPages]);
|
|
3842
|
+
const handlePageSizeChange = React19.useCallback((size) => emit(1, size), [emit]);
|
|
3836
3843
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Pagination_default.container, children: [
|
|
3837
3844
|
showFirstLast && /* @__PURE__ */ jsxRuntime.jsx(
|
|
3838
3845
|
Button,
|
|
@@ -3925,11 +3932,11 @@ function Pagination({
|
|
|
3925
3932
|
)
|
|
3926
3933
|
] });
|
|
3927
3934
|
}
|
|
3928
|
-
var useIsomorphicLayoutEffect = typeof window !== "undefined" ?
|
|
3935
|
+
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React19.useLayoutEffect : React19.useEffect;
|
|
3929
3936
|
function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMarginTop = false, watchRef } = {}) {
|
|
3930
|
-
const [maxHeight, setMaxHeight] =
|
|
3931
|
-
const raf =
|
|
3932
|
-
const measure =
|
|
3937
|
+
const [maxHeight, setMaxHeight] = React19.useState(min);
|
|
3938
|
+
const raf = React19.useRef(null);
|
|
3939
|
+
const measure = React19.useCallback(() => {
|
|
3933
3940
|
if (typeof window === "undefined" || !ref.current) return;
|
|
3934
3941
|
const el = ref.current;
|
|
3935
3942
|
const rect = el.getBoundingClientRect();
|
|
@@ -3941,7 +3948,7 @@ function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMarginTop =
|
|
|
3941
3948
|
const next = Math.max(min, Math.floor(window.innerHeight - bottomOffset - top));
|
|
3942
3949
|
setMaxHeight((prev) => prev === next ? prev : next);
|
|
3943
3950
|
}, [ref, bottomOffset, min, includeMarginTop]);
|
|
3944
|
-
const scheduleMeasure =
|
|
3951
|
+
const scheduleMeasure = React19.useCallback(() => {
|
|
3945
3952
|
if (typeof window === "undefined") return;
|
|
3946
3953
|
if (raf.current != null) {
|
|
3947
3954
|
cancelAnimationFrame(raf.current);
|
|
@@ -3954,7 +3961,7 @@ function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMarginTop =
|
|
|
3954
3961
|
useIsomorphicLayoutEffect(() => {
|
|
3955
3962
|
measure();
|
|
3956
3963
|
}, [measure]);
|
|
3957
|
-
|
|
3964
|
+
React19.useEffect(() => {
|
|
3958
3965
|
var _a;
|
|
3959
3966
|
if (typeof window === "undefined" || !ref.current) return;
|
|
3960
3967
|
const target = ref.current;
|
|
@@ -3987,7 +3994,7 @@ function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMarginTop =
|
|
|
3987
3994
|
}
|
|
3988
3995
|
};
|
|
3989
3996
|
}, [ref, watchRef, scheduleMeasure]);
|
|
3990
|
-
const style =
|
|
3997
|
+
const style = React19.useMemo(
|
|
3991
3998
|
() => ({
|
|
3992
3999
|
maxHeight,
|
|
3993
4000
|
overflow: "auto"
|
|
@@ -4172,7 +4179,7 @@ function useTableRowInteractions({
|
|
|
4172
4179
|
onRowClick,
|
|
4173
4180
|
onRowSelect
|
|
4174
4181
|
}) {
|
|
4175
|
-
const handleRowClick =
|
|
4182
|
+
const handleRowClick = React19.useCallback(
|
|
4176
4183
|
(e) => {
|
|
4177
4184
|
var _a;
|
|
4178
4185
|
const target = e.target;
|
|
@@ -4189,7 +4196,7 @@ function useTableRowInteractions({
|
|
|
4189
4196
|
},
|
|
4190
4197
|
[canSelect, isSelected, onRowClick, onRowSelect, row, rowId]
|
|
4191
4198
|
);
|
|
4192
|
-
const handleRowKeyDown =
|
|
4199
|
+
const handleRowKeyDown = React19.useCallback(
|
|
4193
4200
|
(e) => {
|
|
4194
4201
|
if (!onRowClick) return;
|
|
4195
4202
|
if (!shouldToggleOnKey(e.key)) return;
|
|
@@ -4561,10 +4568,10 @@ function Table({
|
|
|
4561
4568
|
onPageChange,
|
|
4562
4569
|
...rest
|
|
4563
4570
|
}) {
|
|
4564
|
-
const visibleColumns =
|
|
4565
|
-
const selectionInputName =
|
|
4566
|
-
const internalTableRootRef =
|
|
4567
|
-
const tableRootRefWrapper =
|
|
4571
|
+
const visibleColumns = React19.useMemo(() => getVisibleColumns(columns), [columns]);
|
|
4572
|
+
const selectionInputName = React19.useId();
|
|
4573
|
+
const internalTableRootRef = React19.useRef(null);
|
|
4574
|
+
const tableRootRefWrapper = React19.useRef(tableRootRef);
|
|
4568
4575
|
const hasSelection = Boolean(selectedRows && onRowSelect);
|
|
4569
4576
|
const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
|
|
4570
4577
|
const paginationOffset = hasPagination ? 72 : 0;
|
|
@@ -4574,7 +4581,7 @@ function Table({
|
|
|
4574
4581
|
});
|
|
4575
4582
|
const fillViewportActive = fillViewport && containScrolling && maxHeight >= 500;
|
|
4576
4583
|
const stickyTop = stickyHeader === "app-header" ? "var(--app-header-height, 60px)" : typeof stickyHeader === "number" ? `${stickyHeader}px` : void 0;
|
|
4577
|
-
const setTableRootRef =
|
|
4584
|
+
const setTableRootRef = React19.useCallback((node) => {
|
|
4578
4585
|
internalTableRootRef.current = node;
|
|
4579
4586
|
if (typeof tableRootRefWrapper.current === "function") {
|
|
4580
4587
|
tableRootRefWrapper.current(node);
|
|
@@ -4582,7 +4589,7 @@ function Table({
|
|
|
4582
4589
|
tableRootRefWrapper.current.current = node;
|
|
4583
4590
|
}
|
|
4584
4591
|
}, []);
|
|
4585
|
-
const handlePageChange =
|
|
4592
|
+
const handlePageChange = React19.useCallback(
|
|
4586
4593
|
(e) => {
|
|
4587
4594
|
onPageChange == null ? void 0 : onPageChange(e);
|
|
4588
4595
|
},
|
|
@@ -4756,10 +4763,10 @@ var Textarea = function Textarea2({
|
|
|
4756
4763
|
...rest
|
|
4757
4764
|
}) {
|
|
4758
4765
|
const HEIGHT_BUFFER_PX = 2;
|
|
4759
|
-
const generatedId =
|
|
4766
|
+
const generatedId = React19.useId();
|
|
4760
4767
|
const textareaId = id != null ? id : `textarea-${generatedId}`;
|
|
4761
|
-
const textareaRef =
|
|
4762
|
-
const syncHeight =
|
|
4768
|
+
const textareaRef = React19.useRef(null);
|
|
4769
|
+
const syncHeight = React19.useCallback(
|
|
4763
4770
|
(textarea) => {
|
|
4764
4771
|
if (!adjustHeight) return;
|
|
4765
4772
|
textarea.style.height = "auto";
|
|
@@ -4767,12 +4774,12 @@ var Textarea = function Textarea2({
|
|
|
4767
4774
|
},
|
|
4768
4775
|
[adjustHeight]
|
|
4769
4776
|
);
|
|
4770
|
-
|
|
4777
|
+
React19.useLayoutEffect(() => {
|
|
4771
4778
|
const textarea = textareaRef.current;
|
|
4772
4779
|
if (!textarea) return;
|
|
4773
4780
|
syncHeight(textarea);
|
|
4774
4781
|
}, [syncHeight, value, rows]);
|
|
4775
|
-
const onInput =
|
|
4782
|
+
const onInput = React19.useCallback(
|
|
4776
4783
|
(e) => {
|
|
4777
4784
|
const textarea = e.currentTarget;
|
|
4778
4785
|
syncHeight(textarea);
|
|
@@ -4780,7 +4787,7 @@ var Textarea = function Textarea2({
|
|
|
4780
4787
|
},
|
|
4781
4788
|
[inputChanged, syncHeight]
|
|
4782
4789
|
);
|
|
4783
|
-
const inputField =
|
|
4790
|
+
const inputField = React19.useMemo(
|
|
4784
4791
|
() => /* @__PURE__ */ jsxRuntime.jsx(
|
|
4785
4792
|
"textarea",
|
|
4786
4793
|
{
|
|
@@ -4901,7 +4908,7 @@ var findExpandableParentChain = (targetHref, items) => {
|
|
|
4901
4908
|
};
|
|
4902
4909
|
return (_a = dfs(items, [])) != null ? _a : [];
|
|
4903
4910
|
};
|
|
4904
|
-
var SidebarContext =
|
|
4911
|
+
var SidebarContext = React19.createContext({
|
|
4905
4912
|
defaultExpanded: null,
|
|
4906
4913
|
expandedItems: /* @__PURE__ */ new Set(),
|
|
4907
4914
|
activeQuery: "",
|
|
@@ -4939,20 +4946,20 @@ function SidebarProvider({
|
|
|
4939
4946
|
initialCollapsed = false,
|
|
4940
4947
|
initialSidebarCollapsed
|
|
4941
4948
|
}) {
|
|
4942
|
-
const [defaultExpanded, setDefaultExpanded] =
|
|
4943
|
-
const [activeQuery, setActiveQuery] =
|
|
4944
|
-
const [wrapItemText, setWrapItemText] =
|
|
4945
|
-
const [areItemsCollapsed, setItemsCollapsed] =
|
|
4946
|
-
const [activeHref, setActiveHref] =
|
|
4947
|
-
const [expandedItems, setExpandedItems] =
|
|
4948
|
-
const itemsRef =
|
|
4949
|
-
|
|
4949
|
+
const [defaultExpanded, setDefaultExpanded] = React19.useState(null);
|
|
4950
|
+
const [activeQuery, setActiveQuery] = React19.useState(initialQuery != null ? initialQuery : "");
|
|
4951
|
+
const [wrapItemText, setWrapItemText] = React19.useState(false);
|
|
4952
|
+
const [areItemsCollapsed, setItemsCollapsed] = React19.useState(initialCollapsed);
|
|
4953
|
+
const [activeHref, setActiveHref] = React19.useState("");
|
|
4954
|
+
const [expandedItems, setExpandedItems] = React19.useState(/* @__PURE__ */ new Set());
|
|
4955
|
+
const itemsRef = React19.useRef(items);
|
|
4956
|
+
React19.useEffect(() => {
|
|
4950
4957
|
itemsRef.current = items;
|
|
4951
4958
|
}, [items]);
|
|
4952
|
-
const [isSidebarCollapsed, setSidebarCollapsed] =
|
|
4959
|
+
const [isSidebarCollapsed, setSidebarCollapsed] = React19.useState(
|
|
4953
4960
|
initialSidebarCollapsed != null ? initialSidebarCollapsed : false
|
|
4954
4961
|
);
|
|
4955
|
-
|
|
4962
|
+
React19.useEffect(() => {
|
|
4956
4963
|
if (initialSidebarCollapsed !== void 0) return;
|
|
4957
4964
|
try {
|
|
4958
4965
|
const stored = window.localStorage.getItem(SIDEBAR_COLLAPSED_STORAGE_KEY);
|
|
@@ -4964,10 +4971,10 @@ function SidebarProvider({
|
|
|
4964
4971
|
}
|
|
4965
4972
|
setSidebarCollapsed(getBreakpoint(window.innerWidth) === "small");
|
|
4966
4973
|
}, []);
|
|
4967
|
-
const triggerExpandAll =
|
|
4968
|
-
const resetExpandAll =
|
|
4969
|
-
const setActiveLink =
|
|
4970
|
-
const expandItem =
|
|
4974
|
+
const triggerExpandAll = React19.useCallback(() => setDefaultExpanded(true), []);
|
|
4975
|
+
const resetExpandAll = React19.useCallback(() => setDefaultExpanded(null), []);
|
|
4976
|
+
const setActiveLink = React19.useCallback((href) => setActiveHref(href), []);
|
|
4977
|
+
const expandItem = React19.useCallback((href) => {
|
|
4971
4978
|
const h = normalizeHref(href);
|
|
4972
4979
|
setExpandedItems((prev) => {
|
|
4973
4980
|
if (prev.has(h)) return prev;
|
|
@@ -4976,7 +4983,7 @@ function SidebarProvider({
|
|
|
4976
4983
|
return next;
|
|
4977
4984
|
});
|
|
4978
4985
|
}, []);
|
|
4979
|
-
const collapseItem =
|
|
4986
|
+
const collapseItem = React19.useCallback((href) => {
|
|
4980
4987
|
const h = normalizeHref(href);
|
|
4981
4988
|
setExpandedItems((prev) => {
|
|
4982
4989
|
if (!prev.has(h)) return prev;
|
|
@@ -4985,11 +4992,11 @@ function SidebarProvider({
|
|
|
4985
4992
|
return next;
|
|
4986
4993
|
});
|
|
4987
4994
|
}, []);
|
|
4988
|
-
const isExpanded =
|
|
4995
|
+
const isExpanded = React19.useCallback(
|
|
4989
4996
|
(href) => expandedItems.has(normalizeHref(href)),
|
|
4990
4997
|
[expandedItems]
|
|
4991
4998
|
);
|
|
4992
|
-
|
|
4999
|
+
React19.useEffect(() => {
|
|
4993
5000
|
if (!activeHref) return;
|
|
4994
5001
|
const currentItems = itemsRef.current;
|
|
4995
5002
|
const parents = findExpandableParentChain(activeHref, currentItems);
|
|
@@ -5007,7 +5014,7 @@ function SidebarProvider({
|
|
|
5007
5014
|
return changed ? next : prev;
|
|
5008
5015
|
});
|
|
5009
5016
|
}, [activeHref]);
|
|
5010
|
-
const filteredItems =
|
|
5017
|
+
const filteredItems = React19.useMemo(() => {
|
|
5011
5018
|
return activeQuery ? nestedFiltering(items, {
|
|
5012
5019
|
keys: ["label", "tags"],
|
|
5013
5020
|
includeParents: true,
|
|
@@ -5015,21 +5022,21 @@ function SidebarProvider({
|
|
|
5015
5022
|
query: activeQuery
|
|
5016
5023
|
}) : items;
|
|
5017
5024
|
}, [items, activeQuery]);
|
|
5018
|
-
const persistCollapsed =
|
|
5025
|
+
const persistCollapsed = React19.useCallback((collapsed) => {
|
|
5019
5026
|
if (typeof window === "undefined") return;
|
|
5020
5027
|
try {
|
|
5021
5028
|
window.localStorage.setItem(SIDEBAR_COLLAPSED_STORAGE_KEY, JSON.stringify(collapsed));
|
|
5022
5029
|
} catch {
|
|
5023
5030
|
}
|
|
5024
5031
|
}, []);
|
|
5025
|
-
const handleSidebarCollapseChange =
|
|
5032
|
+
const handleSidebarCollapseChange = React19.useCallback(
|
|
5026
5033
|
(collapsed) => {
|
|
5027
5034
|
setSidebarCollapsed(collapsed);
|
|
5028
5035
|
persistCollapsed(collapsed);
|
|
5029
5036
|
},
|
|
5030
5037
|
[persistCollapsed]
|
|
5031
5038
|
);
|
|
5032
|
-
|
|
5039
|
+
React19.useEffect(() => {
|
|
5033
5040
|
if (typeof window === "undefined") return;
|
|
5034
5041
|
let lastBreakpoint = getBreakpoint(window.innerWidth);
|
|
5035
5042
|
const onResize = () => {
|
|
@@ -5041,7 +5048,7 @@ function SidebarProvider({
|
|
|
5041
5048
|
window.addEventListener("resize", onResize);
|
|
5042
5049
|
return () => window.removeEventListener("resize", onResize);
|
|
5043
5050
|
}, []);
|
|
5044
|
-
const value =
|
|
5051
|
+
const value = React19.useMemo(
|
|
5045
5052
|
() => ({
|
|
5046
5053
|
defaultExpanded: activeQuery ? true : defaultExpanded,
|
|
5047
5054
|
expandedItems,
|
|
@@ -5086,7 +5093,7 @@ function SidebarProvider({
|
|
|
5086
5093
|
return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value, children });
|
|
5087
5094
|
}
|
|
5088
5095
|
function useSidebar() {
|
|
5089
|
-
return
|
|
5096
|
+
return React19.useContext(SidebarContext);
|
|
5090
5097
|
}
|
|
5091
5098
|
|
|
5092
5099
|
// src/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.module.css
|
|
@@ -5171,7 +5178,7 @@ function SidebarItemContent({
|
|
|
5171
5178
|
const shouldTruncate = truncateLabel && !wrapItemText && !activeQuery;
|
|
5172
5179
|
const highlightTerms = activeQuery.trim().split(/\s+/).filter(Boolean);
|
|
5173
5180
|
const renderedLabel = typeof label === "string" && highlightTerms.length > 0 ? getHighlightedSegments(label, highlightTerms).map(
|
|
5174
|
-
(segment, index) => segment.matched ? /* @__PURE__ */ jsxRuntime.jsx("mark", { className: "dbc-highlight", children: segment.text }, `${segment.text}-${index}`) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
5181
|
+
(segment, index) => segment.matched ? /* @__PURE__ */ jsxRuntime.jsx("mark", { className: "dbc-highlight", children: segment.text }, `${segment.text}-${index}`) : /* @__PURE__ */ jsxRuntime.jsx(React19__namespace.default.Fragment, { children: segment.text }, `${segment.text}-${index}`)
|
|
5175
5182
|
) : label;
|
|
5176
5183
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5177
5184
|
"span",
|
|
@@ -5236,21 +5243,21 @@ function ExpandableSidebarItem({
|
|
|
5236
5243
|
collapseItem,
|
|
5237
5244
|
isExpanded
|
|
5238
5245
|
} = useSidebar();
|
|
5239
|
-
const [closing, setClosing] =
|
|
5246
|
+
const [closing, setClosing] = React19.useState(false);
|
|
5240
5247
|
const ready = true;
|
|
5241
|
-
const expanded =
|
|
5242
|
-
|
|
5248
|
+
const expanded = React19.useMemo(() => isExpanded(href), [href, isExpanded]);
|
|
5249
|
+
React19.useEffect(() => {
|
|
5243
5250
|
if (defaultExpanded === null) return;
|
|
5244
5251
|
if (defaultExpanded) expandItem(href);
|
|
5245
5252
|
else collapseItem(href);
|
|
5246
5253
|
}, [defaultExpanded, expandItem, collapseItem, href]);
|
|
5247
|
-
const handleAnimationEnd =
|
|
5254
|
+
const handleAnimationEnd = React19.useCallback(() => {
|
|
5248
5255
|
if (closing) {
|
|
5249
5256
|
collapseItem(href);
|
|
5250
5257
|
setClosing(false);
|
|
5251
5258
|
}
|
|
5252
5259
|
}, [closing, ready, collapseItem, href]);
|
|
5253
|
-
const toggleAccordion =
|
|
5260
|
+
const toggleAccordion = React19.useCallback(
|
|
5254
5261
|
(e, onlyExpand = false) => {
|
|
5255
5262
|
e == null ? void 0 : e.preventDefault();
|
|
5256
5263
|
e == null ? void 0 : e.stopPropagation();
|
|
@@ -5332,7 +5339,7 @@ function ExpandableSidebarItem({
|
|
|
5332
5339
|
}
|
|
5333
5340
|
function SidebarItems({ activeLink }) {
|
|
5334
5341
|
const { filteredItems, setActiveLink, isSidebarCollapsed } = useSidebar();
|
|
5335
|
-
|
|
5342
|
+
React19.useEffect(() => {
|
|
5336
5343
|
setActiveLink(activeLink != null ? activeLink : "");
|
|
5337
5344
|
}, [activeLink, setActiveLink]);
|
|
5338
5345
|
const renderItem = (item, key) => {
|
|
@@ -5387,7 +5394,7 @@ var SidenavFiltering = ({
|
|
|
5387
5394
|
wrapItemText,
|
|
5388
5395
|
setWrapItemText
|
|
5389
5396
|
} = useSidebar();
|
|
5390
|
-
const searchBoxRef =
|
|
5397
|
+
const searchBoxRef = React19__namespace.default.useRef(null);
|
|
5391
5398
|
const handleSearch = (value) => {
|
|
5392
5399
|
setActiveQuery == null ? void 0 : setActiveQuery(value);
|
|
5393
5400
|
};
|
|
@@ -5512,28 +5519,28 @@ function SidebarContainer({
|
|
|
5512
5519
|
storageKey
|
|
5513
5520
|
}) {
|
|
5514
5521
|
const { isSidebarCollapsed, handleSidebarCollapseChange } = useSidebar();
|
|
5515
|
-
const [sidebarWidth, setSidebarWidth] =
|
|
5516
|
-
const [manualWidth, setManualWidth] =
|
|
5517
|
-
const [isResizing, setIsResizing] =
|
|
5518
|
-
const [ariaMaxWidth, setAriaMaxWidth] =
|
|
5519
|
-
const containerRef =
|
|
5520
|
-
const draggingRef =
|
|
5521
|
-
const pointerIdRef =
|
|
5522
|
-
const startXRef =
|
|
5523
|
-
const startWidthRef =
|
|
5524
|
-
const maxWidthRef =
|
|
5525
|
-
const getMaxWidth =
|
|
5522
|
+
const [sidebarWidth, setSidebarWidth] = React19.useState(defaultWidth);
|
|
5523
|
+
const [manualWidth, setManualWidth] = React19.useState(null);
|
|
5524
|
+
const [isResizing, setIsResizing] = React19.useState(false);
|
|
5525
|
+
const [ariaMaxWidth, setAriaMaxWidth] = React19.useState(void 0);
|
|
5526
|
+
const containerRef = React19.useRef(null);
|
|
5527
|
+
const draggingRef = React19.useRef(false);
|
|
5528
|
+
const pointerIdRef = React19.useRef(null);
|
|
5529
|
+
const startXRef = React19.useRef(0);
|
|
5530
|
+
const startWidthRef = React19.useRef(0);
|
|
5531
|
+
const maxWidthRef = React19.useRef(Infinity);
|
|
5532
|
+
const getMaxWidth = React19.useCallback(() => {
|
|
5526
5533
|
const viewportWidth = typeof window !== "undefined" ? window.innerWidth || document.documentElement.clientWidth : Infinity;
|
|
5527
5534
|
return Math.max(minWidth, viewportWidth - minWidth);
|
|
5528
5535
|
}, [minWidth]);
|
|
5529
|
-
|
|
5536
|
+
React19.useEffect(() => {
|
|
5530
5537
|
if (!storageKey) return;
|
|
5531
5538
|
const stored = readStoredWidth(storageKey);
|
|
5532
5539
|
if (stored === null) return;
|
|
5533
5540
|
setManualWidth(stored);
|
|
5534
5541
|
setSidebarWidth(stored);
|
|
5535
5542
|
}, [storageKey]);
|
|
5536
|
-
|
|
5543
|
+
React19.useEffect(() => {
|
|
5537
5544
|
if (!storageKey) return;
|
|
5538
5545
|
if (manualWidth === null) {
|
|
5539
5546
|
removeStoredWidth(storageKey);
|
|
@@ -5541,20 +5548,20 @@ function SidebarContainer({
|
|
|
5541
5548
|
}
|
|
5542
5549
|
writeStoredWidth(storageKey, manualWidth);
|
|
5543
5550
|
}, [manualWidth, storageKey]);
|
|
5544
|
-
|
|
5551
|
+
React19.useEffect(() => {
|
|
5545
5552
|
setAriaMaxWidth(getMaxWidth());
|
|
5546
5553
|
}, [getMaxWidth]);
|
|
5547
|
-
|
|
5554
|
+
React19.useEffect(() => {
|
|
5548
5555
|
return () => {
|
|
5549
5556
|
document.body.style.cursor = "";
|
|
5550
5557
|
document.body.style.userSelect = "";
|
|
5551
5558
|
};
|
|
5552
5559
|
}, []);
|
|
5553
|
-
const updateWidth =
|
|
5560
|
+
const updateWidth = React19.useCallback((nextWidth) => {
|
|
5554
5561
|
setManualWidth(nextWidth);
|
|
5555
5562
|
setSidebarWidth(nextWidth);
|
|
5556
5563
|
}, []);
|
|
5557
|
-
const onResizePointerDown =
|
|
5564
|
+
const onResizePointerDown = React19.useCallback(
|
|
5558
5565
|
(e) => {
|
|
5559
5566
|
const maxWidth = getMaxWidth();
|
|
5560
5567
|
if (maxWidth === null) return;
|
|
@@ -5570,7 +5577,7 @@ function SidebarContainer({
|
|
|
5570
5577
|
},
|
|
5571
5578
|
[getMaxWidth, sidebarWidth]
|
|
5572
5579
|
);
|
|
5573
|
-
const onResizePointerMove =
|
|
5580
|
+
const onResizePointerMove = React19.useCallback(
|
|
5574
5581
|
(e) => {
|
|
5575
5582
|
if (!draggingRef.current) return;
|
|
5576
5583
|
if (pointerIdRef.current !== null && e.pointerId !== pointerIdRef.current) return;
|
|
@@ -5579,7 +5586,7 @@ function SidebarContainer({
|
|
|
5579
5586
|
},
|
|
5580
5587
|
[minWidth, updateWidth]
|
|
5581
5588
|
);
|
|
5582
|
-
const endResizeDrag =
|
|
5589
|
+
const endResizeDrag = React19.useCallback(() => {
|
|
5583
5590
|
if (!draggingRef.current) return;
|
|
5584
5591
|
draggingRef.current = false;
|
|
5585
5592
|
pointerIdRef.current = null;
|
|
@@ -5587,11 +5594,11 @@ function SidebarContainer({
|
|
|
5587
5594
|
document.body.style.cursor = "";
|
|
5588
5595
|
document.body.style.userSelect = "";
|
|
5589
5596
|
}, []);
|
|
5590
|
-
const resetWidth =
|
|
5597
|
+
const resetWidth = React19.useCallback(() => {
|
|
5591
5598
|
setManualWidth(null);
|
|
5592
5599
|
setSidebarWidth(clamp2(defaultWidth, minWidth, getMaxWidth()));
|
|
5593
5600
|
}, [defaultWidth, getMaxWidth, minWidth]);
|
|
5594
|
-
const onKeyDown =
|
|
5601
|
+
const onKeyDown = React19.useCallback(
|
|
5595
5602
|
(e) => {
|
|
5596
5603
|
const maxWidth = getMaxWidth();
|
|
5597
5604
|
const step = e.shiftKey ? 32 : 8;
|
|
@@ -5606,7 +5613,7 @@ function SidebarContainer({
|
|
|
5606
5613
|
},
|
|
5607
5614
|
[getMaxWidth, minWidth, sidebarWidth, updateWidth]
|
|
5608
5615
|
);
|
|
5609
|
-
const containerStyle =
|
|
5616
|
+
const containerStyle = React19.useMemo(
|
|
5610
5617
|
() => ({
|
|
5611
5618
|
"--sidebar-width": `${sidebarWidth}px`
|
|
5612
5619
|
}),
|
|
@@ -5708,14 +5715,14 @@ function useListNavigation({
|
|
|
5708
5715
|
typeaheadTimeoutMs = 500,
|
|
5709
5716
|
getInitialActiveIndex
|
|
5710
5717
|
}) {
|
|
5711
|
-
const optionRefs =
|
|
5712
|
-
const typeaheadRef =
|
|
5713
|
-
const typeaheadTimeoutRef =
|
|
5714
|
-
const normalizedLabels =
|
|
5718
|
+
const optionRefs = React19.useRef([]);
|
|
5719
|
+
const typeaheadRef = React19.useRef("");
|
|
5720
|
+
const typeaheadTimeoutRef = React19.useRef(null);
|
|
5721
|
+
const normalizedLabels = React19.useMemo(
|
|
5715
5722
|
() => options.map((option) => getLabel(option).trim().toLocaleLowerCase()),
|
|
5716
5723
|
[options, getLabel]
|
|
5717
5724
|
);
|
|
5718
|
-
const getDefaultInitialIndex =
|
|
5725
|
+
const getDefaultInitialIndex = React19.useCallback(
|
|
5719
5726
|
(items) => {
|
|
5720
5727
|
if (items.length === 0) return -1;
|
|
5721
5728
|
if (getInitialActiveIndex) {
|
|
@@ -5727,65 +5734,65 @@ function useListNavigation({
|
|
|
5727
5734
|
},
|
|
5728
5735
|
[getInitialActiveIndex, searchable]
|
|
5729
5736
|
);
|
|
5730
|
-
const [activeIndex, setActiveIndex] =
|
|
5731
|
-
const clearTypeahead =
|
|
5737
|
+
const [activeIndex, setActiveIndex] = React19.useState(() => getDefaultInitialIndex(options));
|
|
5738
|
+
const clearTypeahead = React19.useCallback(() => {
|
|
5732
5739
|
typeaheadRef.current = "";
|
|
5733
5740
|
if (typeaheadTimeoutRef.current) {
|
|
5734
5741
|
clearTimeout(typeaheadTimeoutRef.current);
|
|
5735
5742
|
typeaheadTimeoutRef.current = null;
|
|
5736
5743
|
}
|
|
5737
5744
|
}, []);
|
|
5738
|
-
const focusActiveOption =
|
|
5745
|
+
const focusActiveOption = React19.useCallback(() => {
|
|
5739
5746
|
var _a;
|
|
5740
5747
|
if (activeIndex < 0 || options.length === 0) return;
|
|
5741
5748
|
(_a = optionRefs.current[activeIndex]) == null ? void 0 : _a.focus();
|
|
5742
5749
|
}, [activeIndex, options.length]);
|
|
5743
|
-
const resetActiveIndex =
|
|
5750
|
+
const resetActiveIndex = React19.useCallback(() => {
|
|
5744
5751
|
setActiveIndex(getDefaultInitialIndex(options));
|
|
5745
5752
|
}, [getDefaultInitialIndex, options]);
|
|
5746
|
-
|
|
5753
|
+
React19.useEffect(() => {
|
|
5747
5754
|
return () => {
|
|
5748
5755
|
if (typeaheadTimeoutRef.current) clearTimeout(typeaheadTimeoutRef.current);
|
|
5749
5756
|
};
|
|
5750
5757
|
}, []);
|
|
5751
|
-
|
|
5758
|
+
React19.useEffect(() => {
|
|
5752
5759
|
setActiveIndex((current) => {
|
|
5753
5760
|
if (options.length === 0) return -1;
|
|
5754
5761
|
if (current < 0) return current;
|
|
5755
5762
|
return Math.min(current, options.length - 1);
|
|
5756
5763
|
});
|
|
5757
5764
|
}, [options]);
|
|
5758
|
-
|
|
5765
|
+
React19.useEffect(() => {
|
|
5759
5766
|
optionRefs.current = optionRefs.current.slice(0, options.length);
|
|
5760
5767
|
}, [options.length]);
|
|
5761
|
-
|
|
5768
|
+
React19.useEffect(() => {
|
|
5762
5769
|
if (!isOpen || !focusActiveOptionOnOpen) return;
|
|
5763
5770
|
if (searchable && document.activeElement === (searchInputRef == null ? void 0 : searchInputRef.current)) return;
|
|
5764
5771
|
focusActiveOption();
|
|
5765
5772
|
}, [activeIndex, focusActiveOption, focusActiveOptionOnOpen, isOpen, searchable, searchInputRef]);
|
|
5766
|
-
const moveNext =
|
|
5773
|
+
const moveNext = React19.useCallback(() => {
|
|
5767
5774
|
if (options.length === 0) return;
|
|
5768
5775
|
setActiveIndex((index) => {
|
|
5769
5776
|
if (index < 0) return 0;
|
|
5770
5777
|
return Math.min(index + 1, options.length - 1);
|
|
5771
5778
|
});
|
|
5772
5779
|
}, [options.length]);
|
|
5773
|
-
const movePrev =
|
|
5780
|
+
const movePrev = React19.useCallback(() => {
|
|
5774
5781
|
if (options.length === 0) return;
|
|
5775
5782
|
setActiveIndex((index) => {
|
|
5776
5783
|
if (index < 0) return options.length - 1;
|
|
5777
5784
|
return Math.max(index - 1, 0);
|
|
5778
5785
|
});
|
|
5779
5786
|
}, [options.length]);
|
|
5780
|
-
const moveFirst =
|
|
5787
|
+
const moveFirst = React19.useCallback(() => {
|
|
5781
5788
|
if (options.length === 0) return;
|
|
5782
5789
|
setActiveIndex(0);
|
|
5783
5790
|
}, [options.length]);
|
|
5784
|
-
const moveLast =
|
|
5791
|
+
const moveLast = React19.useCallback(() => {
|
|
5785
5792
|
if (options.length === 0) return;
|
|
5786
5793
|
setActiveIndex(options.length - 1);
|
|
5787
5794
|
}, [options.length]);
|
|
5788
|
-
const findTypeaheadMatch =
|
|
5795
|
+
const findTypeaheadMatch = React19.useCallback(
|
|
5789
5796
|
(query, startIndex) => {
|
|
5790
5797
|
if (!query || options.length === 0) return -1;
|
|
5791
5798
|
const normalizedQuery = query.trim().toLocaleLowerCase();
|
|
@@ -5800,7 +5807,7 @@ function useListNavigation({
|
|
|
5800
5807
|
},
|
|
5801
5808
|
[normalizedLabels, options.length]
|
|
5802
5809
|
);
|
|
5803
|
-
const handleTypeahead =
|
|
5810
|
+
const handleTypeahead = React19.useCallback(
|
|
5804
5811
|
(key) => {
|
|
5805
5812
|
const nextBuffer = `${typeaheadRef.current}${key.toLocaleLowerCase()}`;
|
|
5806
5813
|
const repeatedChar = new Set(nextBuffer).size === 1;
|
|
@@ -5822,7 +5829,7 @@ function useListNavigation({
|
|
|
5822
5829
|
},
|
|
5823
5830
|
[activeIndex, findTypeaheadMatch, isOpen, onOpenChange, typeaheadTimeoutMs]
|
|
5824
5831
|
);
|
|
5825
|
-
const handleKeyDown =
|
|
5832
|
+
const handleKeyDown = React19.useCallback(
|
|
5826
5833
|
(e) => {
|
|
5827
5834
|
var _a;
|
|
5828
5835
|
const isSearchInputTarget = searchable && e.target === (searchInputRef == null ? void 0 : searchInputRef.current);
|
|
@@ -5944,12 +5951,12 @@ function MultiSelect({
|
|
|
5944
5951
|
searchPlaceholder = "S\xF8g",
|
|
5945
5952
|
emptyMessage = "Ingen resultater"
|
|
5946
5953
|
}) {
|
|
5947
|
-
const selectedSet =
|
|
5948
|
-
const popoverRef =
|
|
5949
|
-
const searchInputRef =
|
|
5950
|
-
const [open, setOpen] =
|
|
5951
|
-
const [searchQuery, setSearchQuery] =
|
|
5952
|
-
const filteredOptions =
|
|
5954
|
+
const selectedSet = React19.useMemo(() => new Set(selectedValues), [selectedValues]);
|
|
5955
|
+
const popoverRef = React19.useRef(null);
|
|
5956
|
+
const searchInputRef = React19.useRef(null);
|
|
5957
|
+
const [open, setOpen] = React19.useState(false);
|
|
5958
|
+
const [searchQuery, setSearchQuery] = React19.useState("");
|
|
5959
|
+
const filteredOptions = React19.useMemo(() => {
|
|
5953
5960
|
const normalizedQuery = searchQuery.trim().toLocaleLowerCase();
|
|
5954
5961
|
if (!normalizedQuery) return options;
|
|
5955
5962
|
return options.filter((option) => option.label.toLocaleLowerCase().includes(normalizedQuery));
|
|
@@ -5973,7 +5980,7 @@ function MultiSelect({
|
|
|
5973
5980
|
return selectedIndex >= 0 ? selectedIndex : 0;
|
|
5974
5981
|
}
|
|
5975
5982
|
});
|
|
5976
|
-
|
|
5983
|
+
React19.useEffect(() => {
|
|
5977
5984
|
var _a;
|
|
5978
5985
|
if (!open || !searchable) return;
|
|
5979
5986
|
(_a = searchInputRef.current) == null ? void 0 : _a.focus();
|
|
@@ -6280,14 +6287,14 @@ function Typeahead({
|
|
|
6280
6287
|
enableHotkey = false
|
|
6281
6288
|
}) {
|
|
6282
6289
|
var _a, _b;
|
|
6283
|
-
const rootRef =
|
|
6284
|
-
const triggerWrapperRef =
|
|
6285
|
-
const inputRef =
|
|
6286
|
-
const popoverContentRef =
|
|
6287
|
-
const interactingWithOptionsRef =
|
|
6288
|
-
const justClearedRef =
|
|
6289
|
-
const locallyClearedRef =
|
|
6290
|
-
const listboxId =
|
|
6290
|
+
const rootRef = React19.useRef(null);
|
|
6291
|
+
const triggerWrapperRef = React19.useRef(null);
|
|
6292
|
+
const inputRef = React19.useRef(null);
|
|
6293
|
+
const popoverContentRef = React19.useRef(null);
|
|
6294
|
+
const interactingWithOptionsRef = React19.useRef(false);
|
|
6295
|
+
const justClearedRef = React19.useRef(false);
|
|
6296
|
+
const locallyClearedRef = React19.useRef(false);
|
|
6297
|
+
const listboxId = React19.useId();
|
|
6291
6298
|
const {
|
|
6292
6299
|
onFocus: inputPropsOnFocus,
|
|
6293
6300
|
onBlur: inputPropsOnBlur,
|
|
@@ -6298,28 +6305,28 @@ function Typeahead({
|
|
|
6298
6305
|
endAdornment: inputPropsEndAdornment,
|
|
6299
6306
|
...passthroughInputProps
|
|
6300
6307
|
} = inputProps != null ? inputProps : {};
|
|
6301
|
-
const selectedOption =
|
|
6308
|
+
const selectedOption = React19.useMemo(() => {
|
|
6302
6309
|
var _a2;
|
|
6303
6310
|
if (mode === "multi") return null;
|
|
6304
6311
|
return (_a2 = options.find((option) => option.value === selectedValue)) != null ? _a2 : null;
|
|
6305
6312
|
}, [options, selectedValue, mode]);
|
|
6306
|
-
const selectedOptions =
|
|
6313
|
+
const selectedOptions = React19.useMemo(() => {
|
|
6307
6314
|
if (mode !== "multi" || !Array.isArray(selectedValue)) return [];
|
|
6308
6315
|
return options.filter((option) => selectedValue.includes(option.value));
|
|
6309
6316
|
}, [options, selectedValue, mode]);
|
|
6310
|
-
const [open, setOpen] =
|
|
6311
|
-
const [inputValue, setInputValue] =
|
|
6317
|
+
const [open, setOpen] = React19.useState(false);
|
|
6318
|
+
const [inputValue, setInputValue] = React19.useState(
|
|
6312
6319
|
mode === "multi" ? "" : (_a = selectedOption == null ? void 0 : selectedOption.label) != null ? _a : ""
|
|
6313
6320
|
);
|
|
6314
|
-
const [query, setQuery] =
|
|
6315
|
-
const [activeIndex, setActiveIndex] =
|
|
6316
|
-
const [hideSelectedHighlight, setHideSelectedHighlight] =
|
|
6317
|
-
const clearJustClearedAfterEventCycle =
|
|
6321
|
+
const [query, setQuery] = React19.useState("");
|
|
6322
|
+
const [activeIndex, setActiveIndex] = React19.useState(-1);
|
|
6323
|
+
const [hideSelectedHighlight, setHideSelectedHighlight] = React19.useState(false);
|
|
6324
|
+
const clearJustClearedAfterEventCycle = React19__namespace.useCallback(() => {
|
|
6318
6325
|
requestAnimationFrame(() => {
|
|
6319
6326
|
justClearedRef.current = false;
|
|
6320
6327
|
});
|
|
6321
6328
|
}, []);
|
|
6322
|
-
const getSelectedValueChipLabel =
|
|
6329
|
+
const getSelectedValueChipLabel = React19__namespace.useCallback(
|
|
6323
6330
|
(option) => {
|
|
6324
6331
|
switch (multiSelectedValueChipContent) {
|
|
6325
6332
|
case "value":
|
|
@@ -6346,7 +6353,7 @@ function Typeahead({
|
|
|
6346
6353
|
);
|
|
6347
6354
|
}
|
|
6348
6355
|
}
|
|
6349
|
-
const commitSelection =
|
|
6356
|
+
const commitSelection = React19__namespace.useCallback(
|
|
6350
6357
|
(option) => {
|
|
6351
6358
|
var _a2, _b2;
|
|
6352
6359
|
locallyClearedRef.current = false;
|
|
@@ -6404,12 +6411,12 @@ function Typeahead({
|
|
|
6404
6411
|
const usesCountAdornment = mode === "multi" && multiValueDisplayMode === "count" && selectedOptions.length > 0;
|
|
6405
6412
|
const resolvedInputSize = (_b = inputSize != null ? inputSize : inputProps == null ? void 0 : inputProps.inputSize) != null ? _b : "md";
|
|
6406
6413
|
const shouldFitContent = fitContent && mode === "single";
|
|
6407
|
-
const [fittedWidthPx, setFittedWidthPx] =
|
|
6408
|
-
const visibleSingleValueText =
|
|
6414
|
+
const [fittedWidthPx, setFittedWidthPx] = React19.useState(null);
|
|
6415
|
+
const visibleSingleValueText = React19.useMemo(() => {
|
|
6409
6416
|
if (!shouldFitContent) return "";
|
|
6410
6417
|
return inputValue || (selectedOption == null ? void 0 : selectedOption.label) || placeholder || "";
|
|
6411
6418
|
}, [shouldFitContent, inputValue, selectedOption, placeholder]);
|
|
6412
|
-
|
|
6419
|
+
React19.useLayoutEffect(() => {
|
|
6413
6420
|
if (!shouldFitContent) return;
|
|
6414
6421
|
const input = inputRef.current;
|
|
6415
6422
|
if (!input) return;
|
|
@@ -6443,13 +6450,13 @@ function Typeahead({
|
|
|
6443
6450
|
inputPropsStartAdornment,
|
|
6444
6451
|
inputPropsEndAdornment
|
|
6445
6452
|
]);
|
|
6446
|
-
const measuredRootWidth =
|
|
6453
|
+
const measuredRootWidth = React19.useMemo(() => {
|
|
6447
6454
|
if (!shouldFitContent) return void 0;
|
|
6448
6455
|
if (fittedWidthPx == null) return minWidth != null ? minWidth : "120px";
|
|
6449
6456
|
return `${fittedWidthPx}px`;
|
|
6450
6457
|
}, [shouldFitContent, fittedWidthPx, minWidth]);
|
|
6451
6458
|
const shouldStretchInput = fullWidth || shouldFitContent;
|
|
6452
|
-
|
|
6459
|
+
React19.useEffect(() => {
|
|
6453
6460
|
if (!enableHotkey) return;
|
|
6454
6461
|
function handleKeyDown2(event) {
|
|
6455
6462
|
var _a2;
|
|
@@ -6461,7 +6468,7 @@ function Typeahead({
|
|
|
6461
6468
|
window.addEventListener("keydown", handleKeyDown2);
|
|
6462
6469
|
return () => window.removeEventListener("keydown", handleKeyDown2);
|
|
6463
6470
|
}, [enableHotkey]);
|
|
6464
|
-
|
|
6471
|
+
React19.useEffect(() => {
|
|
6465
6472
|
var _a2;
|
|
6466
6473
|
if (justClearedRef.current || locallyClearedRef.current) return;
|
|
6467
6474
|
if (mode === "multi") {
|
|
@@ -6471,7 +6478,7 @@ function Typeahead({
|
|
|
6471
6478
|
setInputValue((_a2 = selectedOption == null ? void 0 : selectedOption.label) != null ? _a2 : "");
|
|
6472
6479
|
}
|
|
6473
6480
|
}, [selectedOption, mode]);
|
|
6474
|
-
const getSelectedIndex =
|
|
6481
|
+
const getSelectedIndex = React19__namespace.useCallback(
|
|
6475
6482
|
(items) => {
|
|
6476
6483
|
if (items.length === 0) return -1;
|
|
6477
6484
|
if (locallyClearedRef.current) return 0;
|
|
@@ -6485,7 +6492,7 @@ function Typeahead({
|
|
|
6485
6492
|
},
|
|
6486
6493
|
[mode, selectedValue]
|
|
6487
6494
|
);
|
|
6488
|
-
|
|
6495
|
+
React19.useEffect(() => {
|
|
6489
6496
|
setActiveIndex((current) => {
|
|
6490
6497
|
if (filteredOptions.length === 0) return -1;
|
|
6491
6498
|
if (locallyClearedRef.current) return 0;
|
|
@@ -6493,13 +6500,13 @@ function Typeahead({
|
|
|
6493
6500
|
return Math.min(current, filteredOptions.length - 1);
|
|
6494
6501
|
});
|
|
6495
6502
|
}, [filteredOptions, getSelectedIndex]);
|
|
6496
|
-
|
|
6503
|
+
React19.useEffect(() => {
|
|
6497
6504
|
var _a2, _b2;
|
|
6498
6505
|
if (!open || activeIndex < 0) return;
|
|
6499
6506
|
const activeEl = (_a2 = document.getElementById(listboxId)) == null ? void 0 : _a2.querySelector(`#${CSS.escape(`${listboxId}-option-${activeIndex}`)}`);
|
|
6500
6507
|
(_b2 = activeEl == null ? void 0 : activeEl.scrollIntoView) == null ? void 0 : _b2.call(activeEl, { block: "nearest" });
|
|
6501
6508
|
}, [open, activeIndex, filteredOptions, listboxId]);
|
|
6502
|
-
const getFocusableElements =
|
|
6509
|
+
const getFocusableElements = React19__namespace.useCallback(() => {
|
|
6503
6510
|
const selector = [
|
|
6504
6511
|
"a[href]",
|
|
6505
6512
|
"button:not([disabled])",
|
|
@@ -6523,12 +6530,12 @@ function Typeahead({
|
|
|
6523
6530
|
}
|
|
6524
6531
|
return focusables;
|
|
6525
6532
|
}, []);
|
|
6526
|
-
const isFocusWithinTypeahead =
|
|
6533
|
+
const isFocusWithinTypeahead = React19__namespace.useCallback((target) => {
|
|
6527
6534
|
var _a2, _b2;
|
|
6528
6535
|
if (!(target instanceof Node)) return false;
|
|
6529
6536
|
return Boolean(((_a2 = rootRef.current) == null ? void 0 : _a2.contains(target)) || ((_b2 = popoverContentRef.current) == null ? void 0 : _b2.contains(target)));
|
|
6530
6537
|
}, []);
|
|
6531
|
-
const handleTabKeyDown =
|
|
6538
|
+
const handleTabKeyDown = React19__namespace.useCallback(
|
|
6532
6539
|
(event) => {
|
|
6533
6540
|
var _a2, _b2, _c;
|
|
6534
6541
|
if (event.key !== "Tab" || !open) return;
|
|
@@ -6602,23 +6609,23 @@ function Typeahead({
|
|
|
6602
6609
|
setOpen(false);
|
|
6603
6610
|
setActiveIndex(-1);
|
|
6604
6611
|
};
|
|
6605
|
-
const openWithAllOptions =
|
|
6612
|
+
const openWithAllOptions = React19__namespace.useCallback(() => {
|
|
6606
6613
|
if (justClearedRef.current) return;
|
|
6607
6614
|
setQuery("");
|
|
6608
6615
|
setOpen(true);
|
|
6609
6616
|
setActiveIndex(getSelectedIndex(options));
|
|
6610
6617
|
}, [getSelectedIndex, options]);
|
|
6611
|
-
const openWithCurrentFilter =
|
|
6618
|
+
const openWithCurrentFilter = React19__namespace.useCallback(() => {
|
|
6612
6619
|
if (justClearedRef.current) return;
|
|
6613
6620
|
setOpen(true);
|
|
6614
6621
|
setActiveIndex(getSelectedIndex(filteredOptions));
|
|
6615
6622
|
}, [getSelectedIndex, filteredOptions]);
|
|
6616
|
-
const prepareSingleSearchInput =
|
|
6623
|
+
const prepareSingleSearchInput = React19__namespace.useCallback(() => {
|
|
6617
6624
|
if (mode !== "single" || !selectedOption || justClearedRef.current) return;
|
|
6618
6625
|
setInputValue("");
|
|
6619
6626
|
setQuery("");
|
|
6620
6627
|
}, [mode, selectedOption]);
|
|
6621
|
-
const handleOpen =
|
|
6628
|
+
const handleOpen = React19__namespace.useCallback(() => {
|
|
6622
6629
|
if (justClearedRef.current) return;
|
|
6623
6630
|
if (mode === "single" && selectedOption && !locallyClearedRef.current) {
|
|
6624
6631
|
prepareSingleSearchInput();
|
|
@@ -6627,7 +6634,7 @@ function Typeahead({
|
|
|
6627
6634
|
}
|
|
6628
6635
|
openWithCurrentFilter();
|
|
6629
6636
|
}, [mode, selectedOption, prepareSingleSearchInput, openWithAllOptions, openWithCurrentFilter]);
|
|
6630
|
-
const handleTriggerMouseDown =
|
|
6637
|
+
const handleTriggerMouseDown = React19__namespace.useCallback(
|
|
6631
6638
|
(e) => {
|
|
6632
6639
|
var _a2;
|
|
6633
6640
|
inputPropsOnMouseDown == null ? void 0 : inputPropsOnMouseDown(e);
|
|
@@ -6668,7 +6675,7 @@ function Typeahead({
|
|
|
6668
6675
|
filteredOptions
|
|
6669
6676
|
]
|
|
6670
6677
|
);
|
|
6671
|
-
const handleChevronMouseDown =
|
|
6678
|
+
const handleChevronMouseDown = React19__namespace.useCallback(
|
|
6672
6679
|
(e) => {
|
|
6673
6680
|
var _a2, _b2;
|
|
6674
6681
|
e.preventDefault();
|
|
@@ -7006,9 +7013,9 @@ function OperatorDropdown({
|
|
|
7006
7013
|
size = "sm",
|
|
7007
7014
|
disabled
|
|
7008
7015
|
}) {
|
|
7009
|
-
const popRef =
|
|
7010
|
-
const [activeIndex, setActiveIndex] =
|
|
7011
|
-
|
|
7016
|
+
const popRef = React19.useRef(null);
|
|
7017
|
+
const [activeIndex, setActiveIndex] = React19.useState(() => Math.max(0, operators.indexOf(value)));
|
|
7018
|
+
React19.useEffect(() => {
|
|
7012
7019
|
setActiveIndex(Math.max(0, operators.indexOf(value)));
|
|
7013
7020
|
}, [operators, value]);
|
|
7014
7021
|
const handleSelect = (op) => {
|
|
@@ -7074,19 +7081,19 @@ function FilterField({
|
|
|
7074
7081
|
...inputProps
|
|
7075
7082
|
}) {
|
|
7076
7083
|
var _a, _b, _c, _d;
|
|
7077
|
-
const filterFieldRef =
|
|
7078
|
-
const ops =
|
|
7084
|
+
const filterFieldRef = React19.useRef(null);
|
|
7085
|
+
const ops = React19.useMemo(() => operators != null ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
|
|
7079
7086
|
const shouldAutoFitTypeahead = control === "select" && single && !width;
|
|
7080
|
-
const [selectedOperator, setSelectedOperator] =
|
|
7087
|
+
const [selectedOperator, setSelectedOperator] = React19.useState(operator);
|
|
7081
7088
|
const active = isFilterActive(value);
|
|
7082
|
-
|
|
7089
|
+
React19.useEffect(() => {
|
|
7083
7090
|
if (ops.includes(operator)) {
|
|
7084
7091
|
setSelectedOperator(operator);
|
|
7085
7092
|
}
|
|
7086
7093
|
}, [operator, ops]);
|
|
7087
|
-
const [localValue, setLocalValue] =
|
|
7088
|
-
const debounceRef =
|
|
7089
|
-
const pendingValueRef =
|
|
7094
|
+
const [localValue, setLocalValue] = React19.useState(value != null ? value : "");
|
|
7095
|
+
const debounceRef = React19.useRef(null);
|
|
7096
|
+
const pendingValueRef = React19.useRef(null);
|
|
7090
7097
|
const emit = (next) => {
|
|
7091
7098
|
var _a2, _b2;
|
|
7092
7099
|
const nextOperator = (_a2 = next.operator) != null ? _a2 : selectedOperator;
|
|
@@ -7132,7 +7139,7 @@ function FilterField({
|
|
|
7132
7139
|
pendingValueRef.current = control === "input" ? localValue : typeof value === "string" ? value : null;
|
|
7133
7140
|
emit({ operator: op });
|
|
7134
7141
|
};
|
|
7135
|
-
|
|
7142
|
+
React19.useEffect(() => {
|
|
7136
7143
|
if (control !== "input") return;
|
|
7137
7144
|
const incoming = value != null ? value : "";
|
|
7138
7145
|
const pending = pendingValueRef.current;
|
|
@@ -7146,7 +7153,7 @@ function FilterField({
|
|
|
7146
7153
|
setLocalValue(incoming);
|
|
7147
7154
|
}
|
|
7148
7155
|
}, [value, control, localValue]);
|
|
7149
|
-
|
|
7156
|
+
React19.useEffect(() => {
|
|
7150
7157
|
return () => {
|
|
7151
7158
|
clearDebounce();
|
|
7152
7159
|
};
|
|
@@ -7267,26 +7274,26 @@ function Select({
|
|
|
7267
7274
|
disabled,
|
|
7268
7275
|
minWidth
|
|
7269
7276
|
}) {
|
|
7270
|
-
const generatedId =
|
|
7277
|
+
const generatedId = React19.useId();
|
|
7271
7278
|
const controlId = id != null ? id : `select-${generatedId}`;
|
|
7272
7279
|
const describedById = `${controlId}-desc`;
|
|
7273
7280
|
const listboxId = `${controlId}-listbox`;
|
|
7274
|
-
const popoverRef =
|
|
7275
|
-
const optionRefs =
|
|
7276
|
-
const typeaheadRef =
|
|
7277
|
-
const typeaheadTimeoutRef =
|
|
7278
|
-
const selectedIndex =
|
|
7281
|
+
const popoverRef = React19.useRef(null);
|
|
7282
|
+
const optionRefs = React19.useRef([]);
|
|
7283
|
+
const typeaheadRef = React19.useRef("");
|
|
7284
|
+
const typeaheadTimeoutRef = React19.useRef(null);
|
|
7285
|
+
const selectedIndex = React19.useMemo(
|
|
7279
7286
|
() => options.findIndex((o) => o.value === selectedValue),
|
|
7280
7287
|
[options, selectedValue]
|
|
7281
7288
|
);
|
|
7282
|
-
const [activeIndex, setActiveIndex] =
|
|
7283
|
-
const [open, setOpen] =
|
|
7284
|
-
|
|
7289
|
+
const [activeIndex, setActiveIndex] = React19.useState(selectedIndex >= 0 ? selectedIndex : 0);
|
|
7290
|
+
const [open, setOpen] = React19.useState(false);
|
|
7291
|
+
React19.useEffect(() => {
|
|
7285
7292
|
return () => {
|
|
7286
7293
|
if (typeaheadTimeoutRef.current) clearTimeout(typeaheadTimeoutRef.current);
|
|
7287
7294
|
};
|
|
7288
7295
|
}, []);
|
|
7289
|
-
|
|
7296
|
+
React19.useEffect(() => {
|
|
7290
7297
|
var _a;
|
|
7291
7298
|
if (!open) return;
|
|
7292
7299
|
(_a = optionRefs.current[activeIndex]) == null ? void 0 : _a.focus();
|
|
@@ -7880,7 +7887,7 @@ function defaultFormatRange(s, e, opts) {
|
|
|
7880
7887
|
return "";
|
|
7881
7888
|
}
|
|
7882
7889
|
var cx4 = (...classes) => classes.filter(Boolean).join(" ");
|
|
7883
|
-
var DateTimePicker =
|
|
7890
|
+
var DateTimePicker = React19.forwardRef(function DateTimePicker2({
|
|
7884
7891
|
mode = "single",
|
|
7885
7892
|
value,
|
|
7886
7893
|
onChange,
|
|
@@ -7897,12 +7904,12 @@ var DateTimePicker = React20.forwardRef(function DateTimePicker2({
|
|
|
7897
7904
|
formatRange = defaultFormatRange,
|
|
7898
7905
|
onOpenChange
|
|
7899
7906
|
}, _ref) {
|
|
7900
|
-
const popRef =
|
|
7907
|
+
const popRef = React19.useRef(null);
|
|
7901
7908
|
const onChangeRange = onChange;
|
|
7902
7909
|
const onChangeIso = onChange;
|
|
7903
7910
|
const onChangeDateOnly = onChange;
|
|
7904
|
-
const todayLocal =
|
|
7905
|
-
const initialAnchor =
|
|
7911
|
+
const todayLocal = React19.useMemo(() => /* @__PURE__ */ new Date(), []);
|
|
7912
|
+
const initialAnchor = React19.useMemo(() => {
|
|
7906
7913
|
if (mode === "single") {
|
|
7907
7914
|
if (typeof value === "string") {
|
|
7908
7915
|
const d = enableTime ? localDateFromIso(value) : localDateFromDateOnly(value);
|
|
@@ -7917,13 +7924,13 @@ var DateTimePicker = React20.forwardRef(function DateTimePicker2({
|
|
|
7917
7924
|
}
|
|
7918
7925
|
return todayLocal;
|
|
7919
7926
|
}, [mode, value, enableTime, todayLocal]);
|
|
7920
|
-
const [monthAnchor, setMonthAnchor] =
|
|
7921
|
-
|
|
7922
|
-
const [timeHH, setTimeHH] =
|
|
7923
|
-
const [timeMM, setTimeMM] =
|
|
7927
|
+
const [monthAnchor, setMonthAnchor] = React19.useState(initialAnchor);
|
|
7928
|
+
React19.useEffect(() => setMonthAnchor(initialAnchor), [initialAnchor]);
|
|
7929
|
+
const [timeHH, setTimeHH] = React19.useState(todayLocal.getHours());
|
|
7930
|
+
const [timeMM, setTimeMM] = React19.useState(
|
|
7924
7931
|
Math.floor(todayLocal.getMinutes() / timeStep) * timeStep
|
|
7925
7932
|
);
|
|
7926
|
-
|
|
7933
|
+
React19.useEffect(() => {
|
|
7927
7934
|
if (mode === "single" && enableTime && typeof value === "string") {
|
|
7928
7935
|
const d = localDateFromIso(value);
|
|
7929
7936
|
if (!d) return;
|
|
@@ -7931,46 +7938,46 @@ var DateTimePicker = React20.forwardRef(function DateTimePicker2({
|
|
|
7931
7938
|
setTimeMM(Math.floor(d.getMinutes() / timeStep) * timeStep);
|
|
7932
7939
|
}
|
|
7933
7940
|
}, [mode, enableTime, value, timeStep]);
|
|
7934
|
-
const [hoverUTC, setHoverUTC] =
|
|
7935
|
-
const cellsUTC =
|
|
7941
|
+
const [hoverUTC, setHoverUTC] = React19.useState(null);
|
|
7942
|
+
const cellsUTC = React19.useMemo(
|
|
7936
7943
|
() => buildMonthGrid(monthAnchor, weekStartsOn),
|
|
7937
7944
|
[monthAnchor, weekStartsOn]
|
|
7938
7945
|
);
|
|
7939
|
-
const monthStartUTC =
|
|
7946
|
+
const monthStartUTC = React19.useMemo(
|
|
7940
7947
|
() => startOfMonthUTC(toUTCDateOnlyFromLocal(monthAnchor)),
|
|
7941
7948
|
[monthAnchor]
|
|
7942
7949
|
);
|
|
7943
|
-
const monthEndUTC =
|
|
7950
|
+
const monthEndUTC = React19.useMemo(
|
|
7944
7951
|
() => endOfMonthUTC(toUTCDateOnlyFromLocal(monthAnchor)),
|
|
7945
7952
|
[monthAnchor]
|
|
7946
7953
|
);
|
|
7947
|
-
const weekdayFmt =
|
|
7948
|
-
const monthFmt =
|
|
7954
|
+
const weekdayFmt = React19.useMemo(() => new Intl.DateTimeFormat(locale, { weekday: "short" }), [locale]);
|
|
7955
|
+
const monthFmt = React19.useMemo(
|
|
7949
7956
|
() => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }),
|
|
7950
7957
|
[locale]
|
|
7951
7958
|
);
|
|
7952
|
-
const selectedUTC_single =
|
|
7959
|
+
const selectedUTC_single = React19.useMemo(() => {
|
|
7953
7960
|
if (mode !== "single") return null;
|
|
7954
7961
|
if (typeof value !== "string") return null;
|
|
7955
7962
|
const d = enableTime ? localDateFromIso(value) : localDateFromDateOnly(value);
|
|
7956
7963
|
if (!d) return null;
|
|
7957
7964
|
return toUTCDateOnlyFromLocal(d);
|
|
7958
7965
|
}, [mode, value, enableTime]);
|
|
7959
|
-
const selectedUTC_start =
|
|
7966
|
+
const selectedUTC_start = React19.useMemo(() => {
|
|
7960
7967
|
if (mode !== "range") return null;
|
|
7961
7968
|
const v = value;
|
|
7962
7969
|
if (!(v == null ? void 0 : v.start)) return null;
|
|
7963
7970
|
const d = localDateFromDateOnly(v.start);
|
|
7964
7971
|
return d ? toUTCDateOnlyFromLocal(d) : null;
|
|
7965
7972
|
}, [mode, value]);
|
|
7966
|
-
const selectedUTC_end =
|
|
7973
|
+
const selectedUTC_end = React19.useMemo(() => {
|
|
7967
7974
|
if (mode !== "range") return null;
|
|
7968
7975
|
const v = value;
|
|
7969
7976
|
if (!(v == null ? void 0 : v.end)) return null;
|
|
7970
7977
|
const d = localDateFromDateOnly(v.end);
|
|
7971
7978
|
return d ? toUTCDateOnlyFromLocal(d) : null;
|
|
7972
7979
|
}, [mode, value]);
|
|
7973
|
-
const isDisabledUTC =
|
|
7980
|
+
const isDisabledUTC = React19.useCallback(
|
|
7974
7981
|
(utcDay) => {
|
|
7975
7982
|
if (min && utcDay < toUTCDateOnlyFromLocal(min)) return true;
|
|
7976
7983
|
if (max && utcDay > toUTCDateOnlyFromLocal(max)) return true;
|
|
@@ -7978,7 +7985,7 @@ var DateTimePicker = React20.forwardRef(function DateTimePicker2({
|
|
|
7978
7985
|
},
|
|
7979
7986
|
[min, max]
|
|
7980
7987
|
);
|
|
7981
|
-
const selectDay =
|
|
7988
|
+
const selectDay = React19.useCallback(
|
|
7982
7989
|
(utcDay) => {
|
|
7983
7990
|
var _a, _b;
|
|
7984
7991
|
if (isDisabledUTC(utcDay)) return;
|
|
@@ -8030,8 +8037,8 @@ var DateTimePicker = React20.forwardRef(function DateTimePicker2({
|
|
|
8030
8037
|
d.setDate(d.getDate() + n);
|
|
8031
8038
|
return d;
|
|
8032
8039
|
}
|
|
8033
|
-
const gridRef =
|
|
8034
|
-
|
|
8040
|
+
const gridRef = React19.useRef(null);
|
|
8041
|
+
React19.useEffect(() => {
|
|
8035
8042
|
const el = gridRef.current;
|
|
8036
8043
|
if (!el) return;
|
|
8037
8044
|
const onKey = (e) => {
|
|
@@ -8083,12 +8090,12 @@ var DateTimePicker = React20.forwardRef(function DateTimePicker2({
|
|
|
8083
8090
|
el.addEventListener("keydown", onKey);
|
|
8084
8091
|
return () => el.removeEventListener("keydown", onKey);
|
|
8085
8092
|
}, [monthAnchor]);
|
|
8086
|
-
const hours =
|
|
8087
|
-
const minutes =
|
|
8093
|
+
const hours = React19.useMemo(() => Array.from({ length: 24 }, (_, i) => i), []);
|
|
8094
|
+
const minutes = React19.useMemo(
|
|
8088
8095
|
() => Array.from({ length: Math.floor(60 / (timeStep || 1)) }, (_, i) => i * (timeStep || 1)),
|
|
8089
8096
|
[timeStep]
|
|
8090
8097
|
);
|
|
8091
|
-
const formatted =
|
|
8098
|
+
const formatted = React19.useMemo(() => {
|
|
8092
8099
|
if (mode === "single") {
|
|
8093
8100
|
if (typeof value !== "string") return "";
|
|
8094
8101
|
const d = enableTime ? localDateFromIso(value) : localDateFromDateOnly(value);
|
|
@@ -8104,12 +8111,12 @@ var DateTimePicker = React20.forwardRef(function DateTimePicker2({
|
|
|
8104
8111
|
if (ee) return `\u2013 ${ee}`;
|
|
8105
8112
|
return "";
|
|
8106
8113
|
}, [mode, value, enableTime]);
|
|
8107
|
-
const [text, setText] =
|
|
8108
|
-
const [dirty, setDirty] =
|
|
8109
|
-
|
|
8114
|
+
const [text, setText] = React19.useState(formatted);
|
|
8115
|
+
const [dirty, setDirty] = React19.useState(false);
|
|
8116
|
+
React19.useEffect(() => {
|
|
8110
8117
|
if (!dirty) setText(formatted);
|
|
8111
8118
|
}, [formatted, dirty]);
|
|
8112
|
-
const commitTypedValue =
|
|
8119
|
+
const commitTypedValue = React19.useCallback(() => {
|
|
8113
8120
|
if (!text.trim()) {
|
|
8114
8121
|
if (mode === "single") {
|
|
8115
8122
|
if (enableTime) onChangeIso(null);
|
|
@@ -8147,7 +8154,7 @@ var DateTimePicker = React20.forwardRef(function DateTimePicker2({
|
|
|
8147
8154
|
setDirty(false);
|
|
8148
8155
|
}
|
|
8149
8156
|
}, [text, mode, enableTime, onChangeDateOnly, onChangeIso, onChangeRange]);
|
|
8150
|
-
const emitTimeChange =
|
|
8157
|
+
const emitTimeChange = React19.useCallback(
|
|
8151
8158
|
(nextHH, nextMM) => {
|
|
8152
8159
|
if (mode !== "single" || !enableTime) return;
|
|
8153
8160
|
if (typeof value !== "string") return;
|
|
@@ -8165,7 +8172,7 @@ var DateTimePicker = React20.forwardRef(function DateTimePicker2({
|
|
|
8165
8172
|
},
|
|
8166
8173
|
[mode, enableTime, value, onChangeIso]
|
|
8167
8174
|
);
|
|
8168
|
-
const clear =
|
|
8175
|
+
const clear = React19.useCallback(() => {
|
|
8169
8176
|
if (mode === "single") {
|
|
8170
8177
|
if (enableTime) onChangeIso(null);
|
|
8171
8178
|
else onChangeDateOnly(null);
|
|
@@ -8415,19 +8422,19 @@ function Modal({
|
|
|
8415
8422
|
dataCy,
|
|
8416
8423
|
width
|
|
8417
8424
|
}) {
|
|
8418
|
-
const titleId =
|
|
8419
|
-
const dialogRef =
|
|
8420
|
-
const lastActiveElementRef =
|
|
8421
|
-
const [mounted, setMounted] =
|
|
8422
|
-
const onRequestCloseRef =
|
|
8423
|
-
|
|
8425
|
+
const titleId = React19.useId();
|
|
8426
|
+
const dialogRef = React19.useRef(null);
|
|
8427
|
+
const lastActiveElementRef = React19.useRef(null);
|
|
8428
|
+
const [mounted, setMounted] = React19.useState(false);
|
|
8429
|
+
const onRequestCloseRef = React19.useRef(onRequestClose);
|
|
8430
|
+
React19.useEffect(() => {
|
|
8424
8431
|
onRequestCloseRef.current = onRequestClose;
|
|
8425
8432
|
}, [onRequestClose]);
|
|
8426
|
-
|
|
8433
|
+
React19.useEffect(() => {
|
|
8427
8434
|
setMounted(true);
|
|
8428
8435
|
}, []);
|
|
8429
|
-
const wasOpenRef =
|
|
8430
|
-
|
|
8436
|
+
const wasOpenRef = React19.useRef(false);
|
|
8437
|
+
React19.useEffect(() => {
|
|
8431
8438
|
var _a;
|
|
8432
8439
|
const wasOpen = wasOpenRef.current;
|
|
8433
8440
|
wasOpenRef.current = isOpen;
|
|
@@ -8559,28 +8566,28 @@ function Modal({
|
|
|
8559
8566
|
document.body
|
|
8560
8567
|
);
|
|
8561
8568
|
}
|
|
8562
|
-
var ModalContext =
|
|
8569
|
+
var ModalContext = React19.createContext(void 0);
|
|
8563
8570
|
function ModalProvider({ children }) {
|
|
8564
|
-
const [isOpen, setIsOpen] =
|
|
8565
|
-
const [config, setConfig] =
|
|
8566
|
-
const [mounted, setMounted] =
|
|
8567
|
-
|
|
8571
|
+
const [isOpen, setIsOpen] = React19.useState(false);
|
|
8572
|
+
const [config, setConfig] = React19.useState(null);
|
|
8573
|
+
const [mounted, setMounted] = React19.useState(false);
|
|
8574
|
+
React19.useEffect(() => {
|
|
8568
8575
|
setMounted(true);
|
|
8569
8576
|
}, []);
|
|
8570
|
-
const [isLoading, setIsLoading] =
|
|
8571
|
-
const markAsLoading =
|
|
8572
|
-
const pendingResolverRef =
|
|
8573
|
-
const resolvePending =
|
|
8577
|
+
const [isLoading, setIsLoading] = React19.useState(false);
|
|
8578
|
+
const markAsLoading = React19.useCallback((loading = true) => setIsLoading(loading), []);
|
|
8579
|
+
const pendingResolverRef = React19.useRef(null);
|
|
8580
|
+
const resolvePending = React19.useCallback((value) => {
|
|
8574
8581
|
if (pendingResolverRef.current) {
|
|
8575
8582
|
pendingResolverRef.current(value);
|
|
8576
8583
|
pendingResolverRef.current = null;
|
|
8577
8584
|
}
|
|
8578
8585
|
}, []);
|
|
8579
|
-
const closeModal =
|
|
8586
|
+
const closeModal = React19.useCallback(() => {
|
|
8580
8587
|
setIsOpen(false);
|
|
8581
8588
|
setIsLoading(false);
|
|
8582
8589
|
}, []);
|
|
8583
|
-
const openModal =
|
|
8590
|
+
const openModal = React19.useCallback(
|
|
8584
8591
|
(newConfig) => {
|
|
8585
8592
|
resolvePending(false);
|
|
8586
8593
|
setConfig(newConfig);
|
|
@@ -8588,13 +8595,13 @@ function ModalProvider({ children }) {
|
|
|
8588
8595
|
},
|
|
8589
8596
|
[resolvePending]
|
|
8590
8597
|
);
|
|
8591
|
-
const handleRequestClose =
|
|
8598
|
+
const handleRequestClose = React19.useCallback(() => {
|
|
8592
8599
|
var _a;
|
|
8593
8600
|
(_a = config == null ? void 0 : config.onRequestClose) == null ? void 0 : _a.call(config);
|
|
8594
8601
|
resolvePending(false);
|
|
8595
8602
|
closeModal();
|
|
8596
8603
|
}, [config, closeModal, resolvePending]);
|
|
8597
|
-
const confirm =
|
|
8604
|
+
const confirm = React19.useCallback(
|
|
8598
8605
|
(confirmConfig) => {
|
|
8599
8606
|
return new Promise((resolve) => {
|
|
8600
8607
|
resolvePending(false);
|
|
@@ -8642,7 +8649,7 @@ function ModalProvider({ children }) {
|
|
|
8642
8649
|
return modalNode;
|
|
8643
8650
|
}
|
|
8644
8651
|
function useModal() {
|
|
8645
|
-
const ctx =
|
|
8652
|
+
const ctx = React19.useContext(ModalContext);
|
|
8646
8653
|
if (!ctx) throw new Error("useModal must be used within a ModalProvider");
|
|
8647
8654
|
return ctx;
|
|
8648
8655
|
}
|
|
@@ -8721,13 +8728,13 @@ function Toast({
|
|
|
8721
8728
|
}
|
|
8722
8729
|
);
|
|
8723
8730
|
}
|
|
8724
|
-
var ToastContext =
|
|
8731
|
+
var ToastContext = React19.createContext(void 0);
|
|
8725
8732
|
function ToastProvider({
|
|
8726
8733
|
children,
|
|
8727
8734
|
defaultDuration: defaultDuration2 = 4e3
|
|
8728
8735
|
}) {
|
|
8729
|
-
const [toasts, setToasts] =
|
|
8730
|
-
const timeouts =
|
|
8736
|
+
const [toasts, setToasts] = React19.useState([]);
|
|
8737
|
+
const timeouts = React19.useRef(/* @__PURE__ */ new Map());
|
|
8731
8738
|
const clearTimeoutForId = (id) => {
|
|
8732
8739
|
const timeoutId = timeouts.current.get(id);
|
|
8733
8740
|
if (timeoutId) {
|
|
@@ -8735,11 +8742,11 @@ function ToastProvider({
|
|
|
8735
8742
|
timeouts.current.delete(id);
|
|
8736
8743
|
}
|
|
8737
8744
|
};
|
|
8738
|
-
const hideToast =
|
|
8745
|
+
const hideToast = React19.useCallback((id) => {
|
|
8739
8746
|
clearTimeoutForId(id);
|
|
8740
8747
|
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
8741
8748
|
}, []);
|
|
8742
|
-
const scheduleAutoDismiss =
|
|
8749
|
+
const scheduleAutoDismiss = React19.useCallback(
|
|
8743
8750
|
(toast) => {
|
|
8744
8751
|
var _a;
|
|
8745
8752
|
const duration = (_a = toast.duration) != null ? _a : defaultDuration2;
|
|
@@ -8752,7 +8759,7 @@ function ToastProvider({
|
|
|
8752
8759
|
},
|
|
8753
8760
|
[defaultDuration2, hideToast]
|
|
8754
8761
|
);
|
|
8755
|
-
const showToast =
|
|
8762
|
+
const showToast = React19.useCallback(
|
|
8756
8763
|
(config) => {
|
|
8757
8764
|
var _a, _b, _c;
|
|
8758
8765
|
const id = (_c = (_b = config.id) != null ? _b : (_a = crypto.randomUUID) == null ? void 0 : _a.call(crypto)) != null ? _c : `${Date.now()}-${Math.random()}`;
|
|
@@ -8763,12 +8770,12 @@ function ToastProvider({
|
|
|
8763
8770
|
},
|
|
8764
8771
|
[scheduleAutoDismiss]
|
|
8765
8772
|
);
|
|
8766
|
-
const clearToasts =
|
|
8773
|
+
const clearToasts = React19.useCallback(() => {
|
|
8767
8774
|
timeouts.current.forEach((timeoutId) => window.clearTimeout(timeoutId));
|
|
8768
8775
|
timeouts.current.clear();
|
|
8769
8776
|
setToasts([]);
|
|
8770
8777
|
}, []);
|
|
8771
|
-
|
|
8778
|
+
React19.useEffect(
|
|
8772
8779
|
() => () => {
|
|
8773
8780
|
timeouts.current.forEach((timeoutId) => window.clearTimeout(timeoutId));
|
|
8774
8781
|
timeouts.current.clear();
|
|
@@ -8801,14 +8808,14 @@ function ToastProvider({
|
|
|
8801
8808
|
] });
|
|
8802
8809
|
}
|
|
8803
8810
|
function useToast() {
|
|
8804
|
-
const ctx =
|
|
8811
|
+
const ctx = React19.useContext(ToastContext);
|
|
8805
8812
|
if (!ctx) {
|
|
8806
8813
|
throw new Error("useToast must be used within a ToastProvider");
|
|
8807
8814
|
}
|
|
8808
8815
|
return ctx;
|
|
8809
8816
|
}
|
|
8810
8817
|
function useOptionalToast() {
|
|
8811
|
-
return
|
|
8818
|
+
return React19.useContext(ToastContext);
|
|
8812
8819
|
}
|
|
8813
8820
|
|
|
8814
8821
|
// src/components/attribute-chip/AttributeChip.module.css
|
|
@@ -8831,7 +8838,7 @@ function AttributeChip({
|
|
|
8831
8838
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: AttributeChip_default.value, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
|
|
8832
8839
|
] });
|
|
8833
8840
|
}
|
|
8834
|
-
var SplitPaneContext =
|
|
8841
|
+
var SplitPaneContext = React19__namespace.default.createContext(null);
|
|
8835
8842
|
function clamp3(n, min, max) {
|
|
8836
8843
|
return Math.max(min, Math.min(max, n));
|
|
8837
8844
|
}
|
|
@@ -8858,7 +8865,7 @@ function removeStoredSize(key) {
|
|
|
8858
8865
|
}
|
|
8859
8866
|
}
|
|
8860
8867
|
function useSplitPaneContext() {
|
|
8861
|
-
const ctx =
|
|
8868
|
+
const ctx = React19__namespace.default.useContext(SplitPaneContext);
|
|
8862
8869
|
if (!ctx) throw new Error("SplitPane components must be used within <SplitPane />");
|
|
8863
8870
|
return ctx;
|
|
8864
8871
|
}
|
|
@@ -8870,10 +8877,10 @@ function SplitPaneProvider({
|
|
|
8870
8877
|
minSecondarySize,
|
|
8871
8878
|
storageKey
|
|
8872
8879
|
}) {
|
|
8873
|
-
const containerRef =
|
|
8874
|
-
const [primarySize, setPrimarySize] =
|
|
8875
|
-
const [manualPrimarySize, setManualPrimarySize] =
|
|
8876
|
-
const getMaxPrimary =
|
|
8880
|
+
const containerRef = React19.useRef(null);
|
|
8881
|
+
const [primarySize, setPrimarySize] = React19.useState(initialPrimarySize);
|
|
8882
|
+
const [manualPrimarySize, setManualPrimarySize] = React19.useState(null);
|
|
8883
|
+
const getMaxPrimary = React19.useCallback(() => {
|
|
8877
8884
|
const el = containerRef.current;
|
|
8878
8885
|
if (!el) return null;
|
|
8879
8886
|
const rect = el.getBoundingClientRect();
|
|
@@ -8881,14 +8888,14 @@ function SplitPaneProvider({
|
|
|
8881
8888
|
if (!Number.isFinite(total) || total <= 0) return null;
|
|
8882
8889
|
return Math.max(minPrimarySize, total - minSecondarySize);
|
|
8883
8890
|
}, [direction, minPrimarySize, minSecondarySize]);
|
|
8884
|
-
|
|
8891
|
+
React19.useEffect(() => {
|
|
8885
8892
|
if (!storageKey) return;
|
|
8886
8893
|
const stored = readStoredSize(storageKey);
|
|
8887
8894
|
if (stored === null) return;
|
|
8888
8895
|
setManualPrimarySize(stored);
|
|
8889
8896
|
setPrimarySize(stored);
|
|
8890
8897
|
}, [storageKey]);
|
|
8891
|
-
|
|
8898
|
+
React19.useEffect(() => {
|
|
8892
8899
|
const el = containerRef.current;
|
|
8893
8900
|
if (!el) return;
|
|
8894
8901
|
if (typeof ResizeObserver === "undefined") return;
|
|
@@ -8903,7 +8910,7 @@ function SplitPaneProvider({
|
|
|
8903
8910
|
ro.observe(el);
|
|
8904
8911
|
return () => ro.disconnect();
|
|
8905
8912
|
}, [getMaxPrimary, initialPrimarySize, manualPrimarySize]);
|
|
8906
|
-
|
|
8913
|
+
React19.useEffect(() => {
|
|
8907
8914
|
if (!storageKey) return;
|
|
8908
8915
|
if (manualPrimarySize === null) {
|
|
8909
8916
|
removeStoredSize(storageKey);
|
|
@@ -8911,11 +8918,11 @@ function SplitPaneProvider({
|
|
|
8911
8918
|
}
|
|
8912
8919
|
writeStoredSize(storageKey, manualPrimarySize);
|
|
8913
8920
|
}, [manualPrimarySize, storageKey]);
|
|
8914
|
-
const handleSizeChange =
|
|
8921
|
+
const handleSizeChange = React19.useCallback((newSize) => {
|
|
8915
8922
|
setManualPrimarySize(newSize);
|
|
8916
8923
|
setPrimarySize(newSize);
|
|
8917
8924
|
}, []);
|
|
8918
|
-
const resetDefault =
|
|
8925
|
+
const resetDefault = React19.useCallback(() => {
|
|
8919
8926
|
setManualPrimarySize(null);
|
|
8920
8927
|
const maxPrimary = getMaxPrimary();
|
|
8921
8928
|
if (maxPrimary === null) {
|
|
@@ -8924,7 +8931,7 @@ function SplitPaneProvider({
|
|
|
8924
8931
|
}
|
|
8925
8932
|
setPrimarySize(clamp3(initialPrimarySize, minPrimarySize, maxPrimary));
|
|
8926
8933
|
}, [getMaxPrimary, initialPrimarySize, minPrimarySize]);
|
|
8927
|
-
const value =
|
|
8934
|
+
const value = React19.useMemo(
|
|
8928
8935
|
() => ({
|
|
8929
8936
|
direction,
|
|
8930
8937
|
primarySize,
|
|
@@ -8987,7 +8994,7 @@ function SplitPaneContainer({
|
|
|
8987
8994
|
gutterSize
|
|
8988
8995
|
}) {
|
|
8989
8996
|
const { direction, primarySize, containerRef } = useSplitPaneContext();
|
|
8990
|
-
const style =
|
|
8997
|
+
const style = React19.useMemo(
|
|
8991
8998
|
() => ({
|
|
8992
8999
|
"--split-pane-primary-size": `${primarySize}px`,
|
|
8993
9000
|
"--split-pane-gutter": `${gutterSize}px`
|
|
@@ -9022,16 +9029,16 @@ function SplitPaneGutter() {
|
|
|
9022
9029
|
containerRef,
|
|
9023
9030
|
resetDefault
|
|
9024
9031
|
} = useSplitPaneContext();
|
|
9025
|
-
const draggingRef =
|
|
9026
|
-
const pointerIdRef =
|
|
9027
|
-
const startPosRef =
|
|
9028
|
-
const startSizeRef =
|
|
9029
|
-
const maxPrimaryRef =
|
|
9030
|
-
const getClientPos =
|
|
9032
|
+
const draggingRef = React19.useRef(false);
|
|
9033
|
+
const pointerIdRef = React19.useRef(null);
|
|
9034
|
+
const startPosRef = React19.useRef(0);
|
|
9035
|
+
const startSizeRef = React19.useRef(primarySize);
|
|
9036
|
+
const maxPrimaryRef = React19.useRef(Infinity);
|
|
9037
|
+
const getClientPos = React19.useCallback(
|
|
9031
9038
|
(e) => direction === "horizontal" ? e.clientX : e.clientY,
|
|
9032
9039
|
[direction]
|
|
9033
9040
|
);
|
|
9034
|
-
const computeClamp =
|
|
9041
|
+
const computeClamp = React19.useCallback(() => {
|
|
9035
9042
|
const el = containerRef.current;
|
|
9036
9043
|
if (!el) return { maxPrimary: Infinity, total: 0 };
|
|
9037
9044
|
const rect = el.getBoundingClientRect();
|
|
@@ -9039,7 +9046,7 @@ function SplitPaneGutter() {
|
|
|
9039
9046
|
const maxPrimary2 = Math.max(minPrimarySize, total - minSecondarySize);
|
|
9040
9047
|
return { maxPrimary: maxPrimary2, total };
|
|
9041
9048
|
}, [containerRef, direction, minPrimarySize, minSecondarySize]);
|
|
9042
|
-
const onPointerDown =
|
|
9049
|
+
const onPointerDown = React19.useCallback(
|
|
9043
9050
|
(e) => {
|
|
9044
9051
|
const el = containerRef.current;
|
|
9045
9052
|
if (!el) return;
|
|
@@ -9055,7 +9062,7 @@ function SplitPaneGutter() {
|
|
|
9055
9062
|
},
|
|
9056
9063
|
[computeClamp, containerRef, direction, getClientPos, primarySize]
|
|
9057
9064
|
);
|
|
9058
|
-
const onPointerMove =
|
|
9065
|
+
const onPointerMove = React19.useCallback(
|
|
9059
9066
|
(e) => {
|
|
9060
9067
|
if (!draggingRef.current) return;
|
|
9061
9068
|
if (pointerIdRef.current !== null && e.pointerId !== pointerIdRef.current) return;
|
|
@@ -9066,16 +9073,16 @@ function SplitPaneGutter() {
|
|
|
9066
9073
|
},
|
|
9067
9074
|
[getClientPos, minPrimarySize, setPrimarySize]
|
|
9068
9075
|
);
|
|
9069
|
-
const endDrag =
|
|
9076
|
+
const endDrag = React19.useCallback(() => {
|
|
9070
9077
|
if (!draggingRef.current) return;
|
|
9071
9078
|
draggingRef.current = false;
|
|
9072
9079
|
pointerIdRef.current = null;
|
|
9073
9080
|
document.body.style.cursor = "";
|
|
9074
9081
|
document.body.style.userSelect = "";
|
|
9075
9082
|
}, []);
|
|
9076
|
-
const onPointerUp =
|
|
9077
|
-
const onPointerCancel =
|
|
9078
|
-
const onKeyDown =
|
|
9083
|
+
const onPointerUp = React19.useCallback(() => endDrag(), [endDrag]);
|
|
9084
|
+
const onPointerCancel = React19.useCallback(() => endDrag(), [endDrag]);
|
|
9085
|
+
const onKeyDown = React19.useCallback(
|
|
9079
9086
|
(e) => {
|
|
9080
9087
|
const { maxPrimary: maxPrimary2 } = computeClamp();
|
|
9081
9088
|
const step = e.shiftKey ? 32 : 8;
|
|
@@ -9129,7 +9136,7 @@ function MetaBar({ items, separator = "\u2022" }) {
|
|
|
9129
9136
|
(item) => item.value !== null && item.value !== void 0 && item.value !== ""
|
|
9130
9137
|
);
|
|
9131
9138
|
if (visibleItems.length === 0) return null;
|
|
9132
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: MetaBar_default.meta, children: visibleItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
9139
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: MetaBar_default.meta, children: visibleItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React19.Fragment, { children: [
|
|
9133
9140
|
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: item.muted === false ? MetaBar_default.itemDefault : MetaBar_default.itemMuted, children: [
|
|
9134
9141
|
item.label && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
|
9135
9142
|
item.label,
|
|
@@ -9180,7 +9187,7 @@ function CopyButton(props) {
|
|
|
9180
9187
|
disabled,
|
|
9181
9188
|
...rest
|
|
9182
9189
|
} = props;
|
|
9183
|
-
const [copied, setCopied] =
|
|
9190
|
+
const [copied, setCopied] = React19.useState(false);
|
|
9184
9191
|
const toast = useOptionalToast();
|
|
9185
9192
|
const buttonLabel = children;
|
|
9186
9193
|
const icon = disableIcon ? null : copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, {});
|
|
@@ -9297,7 +9304,7 @@ function getTextContent(node) {
|
|
|
9297
9304
|
if (node == null || typeof node === "boolean") return "";
|
|
9298
9305
|
if (typeof node === "string" || typeof node === "number") return String(node);
|
|
9299
9306
|
if (Array.isArray(node)) return node.map(getTextContent).join("");
|
|
9300
|
-
if (
|
|
9307
|
+
if (React19.isValidElement(node)) return getTextContent(node.props.children);
|
|
9301
9308
|
return "";
|
|
9302
9309
|
}
|
|
9303
9310
|
function CodeBlock({
|
|
@@ -9311,15 +9318,15 @@ function CodeBlock({
|
|
|
9311
9318
|
}) {
|
|
9312
9319
|
const text = typeof code === "string" ? code : void 0;
|
|
9313
9320
|
const hasChildren2 = children !== void 0 && children !== null;
|
|
9314
|
-
const [isWrapped, setIsWrapped] =
|
|
9315
|
-
const copy =
|
|
9321
|
+
const [isWrapped, setIsWrapped] = React19.useState(wrap);
|
|
9322
|
+
const copy = React19.useMemo(
|
|
9316
9323
|
() => {
|
|
9317
9324
|
var _a;
|
|
9318
9325
|
return (_a = copyText != null ? copyText : text) != null ? _a : getTextContent(children);
|
|
9319
9326
|
},
|
|
9320
9327
|
[copyText, text, children]
|
|
9321
9328
|
);
|
|
9322
|
-
const lines =
|
|
9329
|
+
const lines = React19.useMemo(
|
|
9323
9330
|
() => smart && !hasChildren2 && typeof text === "string" ? text.split("\n") : null,
|
|
9324
9331
|
[smart, hasChildren2, text]
|
|
9325
9332
|
);
|
|
@@ -9480,7 +9487,7 @@ function collectInitiallyExpandedNodeIds(value, defaultExpandedDepth, expandAll,
|
|
|
9480
9487
|
}
|
|
9481
9488
|
function HighlightedText({ text, query }) {
|
|
9482
9489
|
return getHighlightedSegments(text, query).map(
|
|
9483
|
-
(segment, index) => segment.matched ? /* @__PURE__ */ jsxRuntime.jsx("mark", { className: "dbc-highlight", children: segment.text }, `${segment.text}-${index}`) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
9490
|
+
(segment, index) => segment.matched ? /* @__PURE__ */ jsxRuntime.jsx("mark", { className: "dbc-highlight", children: segment.text }, `${segment.text}-${index}`) : /* @__PURE__ */ jsxRuntime.jsx(React19.Fragment, { children: segment.text }, `${segment.text}-${index}`)
|
|
9484
9491
|
);
|
|
9485
9492
|
}
|
|
9486
9493
|
|
|
@@ -9630,8 +9637,8 @@ function JsonNode({
|
|
|
9630
9637
|
);
|
|
9631
9638
|
}
|
|
9632
9639
|
function useClipboardStatus() {
|
|
9633
|
-
const [copiedId, setCopiedId] =
|
|
9634
|
-
|
|
9640
|
+
const [copiedId, setCopiedId] = React19.useState(null);
|
|
9641
|
+
React19.useEffect(() => {
|
|
9635
9642
|
if (!copiedId) return;
|
|
9636
9643
|
const timer = window.setTimeout(() => setCopiedId(null), 1400);
|
|
9637
9644
|
return () => window.clearTimeout(timer);
|
|
@@ -9649,18 +9656,18 @@ function JsonViewer({
|
|
|
9649
9656
|
className,
|
|
9650
9657
|
maxHeight
|
|
9651
9658
|
}) {
|
|
9652
|
-
const [queryInput, setQueryInput] =
|
|
9653
|
-
const [query, setQuery] =
|
|
9659
|
+
const [queryInput, setQueryInput] = React19.useState("");
|
|
9660
|
+
const [query, setQuery] = React19.useState("");
|
|
9654
9661
|
const normalizedQuery = normalizeSearch(query);
|
|
9655
|
-
const inputId =
|
|
9662
|
+
const inputId = React19.useId();
|
|
9656
9663
|
const { copiedId, setCopiedId } = useClipboardStatus();
|
|
9657
|
-
|
|
9664
|
+
React19.useEffect(() => {
|
|
9658
9665
|
const timeoutId = window.setTimeout(() => {
|
|
9659
9666
|
setQuery(queryInput);
|
|
9660
9667
|
}, searchDebounceMs);
|
|
9661
9668
|
return () => window.clearTimeout(timeoutId);
|
|
9662
9669
|
}, [queryInput, searchDebounceMs]);
|
|
9663
|
-
const safeValue =
|
|
9670
|
+
const safeValue = React19.useMemo(() => {
|
|
9664
9671
|
if (isJsonValue(value)) return value;
|
|
9665
9672
|
return {
|
|
9666
9673
|
unsupported: {
|
|
@@ -9669,12 +9676,12 @@ function JsonViewer({
|
|
|
9669
9676
|
}
|
|
9670
9677
|
};
|
|
9671
9678
|
}, [value]);
|
|
9672
|
-
const matches =
|
|
9679
|
+
const matches = React19.useMemo(
|
|
9673
9680
|
() => normalizedQuery ? collectSearchMatches(safeValue, normalizedQuery) : /* @__PURE__ */ new Map(),
|
|
9674
9681
|
[normalizedQuery, safeValue]
|
|
9675
9682
|
);
|
|
9676
|
-
const allExpandableNodeIds =
|
|
9677
|
-
const [expandedNodeIds, setExpandedNodeIds] =
|
|
9683
|
+
const allExpandableNodeIds = React19.useMemo(() => collectExpandableNodeIds(safeValue), [safeValue]);
|
|
9684
|
+
const [expandedNodeIds, setExpandedNodeIds] = React19.useState(
|
|
9678
9685
|
() => new Set(collectInitiallyExpandedNodeIds(safeValue, defaultExpandedDepth, expandAll))
|
|
9679
9686
|
);
|
|
9680
9687
|
const hasResults = normalizedQuery ? matches.size > 0 : true;
|
|
@@ -9813,10 +9820,10 @@ function useTimeDuration({
|
|
|
9813
9820
|
liveUpdate = false,
|
|
9814
9821
|
formatDuration = defaultDuration
|
|
9815
9822
|
}) {
|
|
9816
|
-
const [hydrated, setHydrated] =
|
|
9817
|
-
const [tick, setTick] =
|
|
9818
|
-
|
|
9819
|
-
|
|
9823
|
+
const [hydrated, setHydrated] = React19.useState(false);
|
|
9824
|
+
const [tick, setTick] = React19.useState(0);
|
|
9825
|
+
React19.useEffect(() => setHydrated(true), []);
|
|
9826
|
+
React19.useEffect(() => {
|
|
9820
9827
|
if (!liveUpdate) return;
|
|
9821
9828
|
if (end && end.getTime() <= Date.now()) return;
|
|
9822
9829
|
const timer = setInterval(() => {
|
|
@@ -9827,17 +9834,17 @@ function useTimeDuration({
|
|
|
9827
9834
|
}, 1e3);
|
|
9828
9835
|
return () => clearInterval(timer);
|
|
9829
9836
|
}, [liveUpdate, end]);
|
|
9830
|
-
const started =
|
|
9837
|
+
const started = React19.useMemo(() => {
|
|
9831
9838
|
if (!start) return fallback;
|
|
9832
9839
|
if (!hydrated) return fallback;
|
|
9833
9840
|
return new Intl.DateTimeFormat("da-DK", dateFormat).format(start);
|
|
9834
9841
|
}, [start, hydrated, fallback, dateFormat]);
|
|
9835
|
-
const ended =
|
|
9842
|
+
const ended = React19.useMemo(() => {
|
|
9836
9843
|
if (!end) return fallback;
|
|
9837
9844
|
if (!hydrated) return fallback;
|
|
9838
9845
|
return new Intl.DateTimeFormat("da-DK", dateFormat).format(end);
|
|
9839
9846
|
}, [end, hydrated, fallback, dateFormat]);
|
|
9840
|
-
const duration =
|
|
9847
|
+
const duration = React19.useMemo(() => {
|
|
9841
9848
|
if (!start || !hydrated) return fallback;
|
|
9842
9849
|
const now = Date.now();
|
|
9843
9850
|
if (!end) {
|
|
@@ -9893,12 +9900,12 @@ function useSorting({
|
|
|
9893
9900
|
resetOnDataChange = false
|
|
9894
9901
|
}) {
|
|
9895
9902
|
const isControlled = state != null;
|
|
9896
|
-
const [uncontrolled, setUncontrolled] =
|
|
9903
|
+
const [uncontrolled, setUncontrolled] = React19.useState(() => ({
|
|
9897
9904
|
sortBy,
|
|
9898
9905
|
sortDirection
|
|
9899
9906
|
}));
|
|
9900
9907
|
const sortState = isControlled ? state : uncontrolled;
|
|
9901
|
-
const setSort =
|
|
9908
|
+
const setSort = React19.useCallback(
|
|
9902
9909
|
(next) => {
|
|
9903
9910
|
var _a, _b;
|
|
9904
9911
|
const normalized = {
|
|
@@ -9910,8 +9917,8 @@ function useSorting({
|
|
|
9910
9917
|
},
|
|
9911
9918
|
[isControlled, onStateChange]
|
|
9912
9919
|
);
|
|
9913
|
-
const clearSort =
|
|
9914
|
-
const onSortChange =
|
|
9920
|
+
const clearSort = React19.useCallback(() => setSort({ sortBy: null, sortDirection: null }), [setSort]);
|
|
9921
|
+
const onSortChange = React19.useCallback(
|
|
9915
9922
|
(e) => {
|
|
9916
9923
|
var _a, _b;
|
|
9917
9924
|
const nextSortBy = (_a = e.sortBy) != null ? _a : null;
|
|
@@ -9931,8 +9938,8 @@ function useSorting({
|
|
|
9931
9938
|
},
|
|
9932
9939
|
[allowUnsort, clearSort, setSort, sortState]
|
|
9933
9940
|
);
|
|
9934
|
-
const didInitRef =
|
|
9935
|
-
|
|
9941
|
+
const didInitRef = React19.useRef(false);
|
|
9942
|
+
React19.useEffect(() => {
|
|
9936
9943
|
if (!resetOnDataChange) return;
|
|
9937
9944
|
if (!didInitRef.current) {
|
|
9938
9945
|
didInitRef.current = true;
|
|
@@ -9940,7 +9947,7 @@ function useSorting({
|
|
|
9940
9947
|
}
|
|
9941
9948
|
clearSort();
|
|
9942
9949
|
}, [resetOnDataChange, data]);
|
|
9943
|
-
const sortedData =
|
|
9950
|
+
const sortedData = React19.useMemo(() => {
|
|
9944
9951
|
const { sortBy: sb, sortDirection: dir } = sortState;
|
|
9945
9952
|
if (!sb || !dir) return data;
|
|
9946
9953
|
const custom = columnComparators[sb];
|
|
@@ -9952,7 +9959,7 @@ function useSorting({
|
|
|
9952
9959
|
};
|
|
9953
9960
|
return stableSort(data, cmp);
|
|
9954
9961
|
}, [data, sortState, columnComparators, nulls]);
|
|
9955
|
-
const setSortRef =
|
|
9962
|
+
const setSortRef = React19.useRef(setSort);
|
|
9956
9963
|
setSortRef.current = setSort;
|
|
9957
9964
|
return {
|
|
9958
9965
|
sortedData,
|
|
@@ -9996,8 +10003,8 @@ function usePagination({
|
|
|
9996
10003
|
storageKey
|
|
9997
10004
|
}) {
|
|
9998
10005
|
const isControlled = state != null;
|
|
9999
|
-
const [hydrated, setHydrated] =
|
|
10000
|
-
const [uncontrolled, setUncontrolled] =
|
|
10006
|
+
const [hydrated, setHydrated] = React19.useState(() => !storageKey || isControlled);
|
|
10007
|
+
const [uncontrolled, setUncontrolled] = React19.useState(() => {
|
|
10001
10008
|
var _a;
|
|
10002
10009
|
const initial = normalizePaginationState({
|
|
10003
10010
|
skip,
|
|
@@ -10008,7 +10015,7 @@ function usePagination({
|
|
|
10008
10015
|
}
|
|
10009
10016
|
return (_a = safeParsePaginationState(window.localStorage.getItem(storageKey))) != null ? _a : initial;
|
|
10010
10017
|
});
|
|
10011
|
-
|
|
10018
|
+
React19.useEffect(() => {
|
|
10012
10019
|
if (typeof window === "undefined") return;
|
|
10013
10020
|
if (isControlled || !storageKey) {
|
|
10014
10021
|
setHydrated(true);
|
|
@@ -10019,8 +10026,8 @@ function usePagination({
|
|
|
10019
10026
|
setUncontrolled(stored != null ? stored : fallback);
|
|
10020
10027
|
setHydrated(true);
|
|
10021
10028
|
}, [isControlled, storageKey, skip, take]);
|
|
10022
|
-
const didInitRef =
|
|
10023
|
-
|
|
10029
|
+
const didInitRef = React19.useRef(false);
|
|
10030
|
+
React19.useEffect(() => {
|
|
10024
10031
|
if (isControlled) return;
|
|
10025
10032
|
if (storageKey) return;
|
|
10026
10033
|
if (!didInitRef.current) {
|
|
@@ -10040,7 +10047,7 @@ function usePagination({
|
|
|
10040
10047
|
totalCount === 0 ? 0 : Math.floor((totalCount - 1) / safeTake) * safeTake
|
|
10041
10048
|
);
|
|
10042
10049
|
const safeSkip = clamp5(Math.max(0, paginationState.skip), 0, maxSkip);
|
|
10043
|
-
const setPagination =
|
|
10050
|
+
const setPagination = React19.useCallback(
|
|
10044
10051
|
(next) => {
|
|
10045
10052
|
const normalized = normalizePaginationState(next);
|
|
10046
10053
|
if (isControlled) {
|
|
@@ -10051,7 +10058,7 @@ function usePagination({
|
|
|
10051
10058
|
},
|
|
10052
10059
|
[isControlled, onStateChange]
|
|
10053
10060
|
);
|
|
10054
|
-
const onPageChange =
|
|
10061
|
+
const onPageChange = React19.useCallback(
|
|
10055
10062
|
(pageEvent) => {
|
|
10056
10063
|
const nextTake = Math.max(1, pageEvent.take);
|
|
10057
10064
|
const nextSkip = Math.max(0, (pageEvent.page - 1) * nextTake);
|
|
@@ -10059,25 +10066,25 @@ function usePagination({
|
|
|
10059
10066
|
},
|
|
10060
10067
|
[setPagination]
|
|
10061
10068
|
);
|
|
10062
|
-
const resetPage =
|
|
10069
|
+
const resetPage = React19.useCallback(() => {
|
|
10063
10070
|
setPagination({ skip: 0, take: safeTake });
|
|
10064
10071
|
}, [setPagination, safeTake]);
|
|
10065
|
-
|
|
10072
|
+
React19.useEffect(() => {
|
|
10066
10073
|
if (!resetOnDataChange) return;
|
|
10067
10074
|
if (!hydrated) return;
|
|
10068
10075
|
resetPage();
|
|
10069
10076
|
}, [resetOnDataChange, data, hydrated]);
|
|
10070
|
-
const paginatedData =
|
|
10077
|
+
const paginatedData = React19.useMemo(() => {
|
|
10071
10078
|
return data.slice(safeSkip, safeSkip + safeTake);
|
|
10072
10079
|
}, [data, safeSkip, safeTake]);
|
|
10073
|
-
const page =
|
|
10074
|
-
|
|
10080
|
+
const page = React19.useMemo(() => Math.floor(safeSkip / safeTake) + 1, [safeSkip, safeTake]);
|
|
10081
|
+
React19.useEffect(() => {
|
|
10075
10082
|
if (isControlled) return;
|
|
10076
10083
|
if (safeSkip !== paginationState.skip) {
|
|
10077
10084
|
setUncontrolled((prev) => ({ ...prev, skip: safeSkip }));
|
|
10078
10085
|
}
|
|
10079
10086
|
}, [isControlled, safeSkip, paginationState.skip]);
|
|
10080
|
-
|
|
10087
|
+
React19.useEffect(() => {
|
|
10081
10088
|
if (typeof window === "undefined") return;
|
|
10082
10089
|
if (isControlled || !storageKey) return;
|
|
10083
10090
|
if (!hydrated) return;
|
|
@@ -10123,11 +10130,11 @@ function useTableData({
|
|
|
10123
10130
|
state: pagination == null ? void 0 : pagination.state,
|
|
10124
10131
|
onStateChange: pagination == null ? void 0 : pagination.onStateChange
|
|
10125
10132
|
});
|
|
10126
|
-
|
|
10133
|
+
React19.useEffect(() => {
|
|
10127
10134
|
if (!resetPageOnSortChange) return;
|
|
10128
10135
|
p.resetPage();
|
|
10129
10136
|
}, [resetPageOnSortChange, s.sortState.sortBy, s.sortState.sortDirection]);
|
|
10130
|
-
const rows =
|
|
10137
|
+
const rows = React19.useMemo(() => p.paginatedData, [p.paginatedData]);
|
|
10131
10138
|
return {
|
|
10132
10139
|
rows,
|
|
10133
10140
|
totalCount: s.sortedData.length,
|
|
@@ -10175,17 +10182,17 @@ function useTableSelection({
|
|
|
10175
10182
|
storage = "session"
|
|
10176
10183
|
}) {
|
|
10177
10184
|
const resolvedInitialSelectedIds = initialSelectedIds != null ? initialSelectedIds : EMPTY_IDS;
|
|
10178
|
-
const [selectedIds, setSelectedIds] =
|
|
10179
|
-
const [hydrated, setHydrated] =
|
|
10180
|
-
const lastWrittenRef =
|
|
10181
|
-
const itemsById =
|
|
10185
|
+
const [selectedIds, setSelectedIds] = React19.useState(resolvedInitialSelectedIds);
|
|
10186
|
+
const [hydrated, setHydrated] = React19.useState(false);
|
|
10187
|
+
const lastWrittenRef = React19.useRef(null);
|
|
10188
|
+
const itemsById = React19.useMemo(() => {
|
|
10182
10189
|
const map = /* @__PURE__ */ new Map();
|
|
10183
10190
|
for (const item of items) {
|
|
10184
10191
|
map.set(getId(item), item);
|
|
10185
10192
|
}
|
|
10186
10193
|
return map;
|
|
10187
10194
|
}, [items, getId]);
|
|
10188
|
-
|
|
10195
|
+
React19.useEffect(() => {
|
|
10189
10196
|
if (typeof window === "undefined") return;
|
|
10190
10197
|
const storageApi = storage === "local" ? window.localStorage : window.sessionStorage;
|
|
10191
10198
|
if (!storageKey) {
|
|
@@ -10202,7 +10209,7 @@ function useTableSelection({
|
|
|
10202
10209
|
lastWrittenRef.current = serializeIds(next);
|
|
10203
10210
|
setHydrated(true);
|
|
10204
10211
|
}, [storage, storageKey, resolvedInitialSelectedIds]);
|
|
10205
|
-
|
|
10212
|
+
React19.useEffect(() => {
|
|
10206
10213
|
if (!pruneToItems) return;
|
|
10207
10214
|
const visibleIds = new Set(Array.from(itemsById.keys()));
|
|
10208
10215
|
setSelectedIds((prev) => {
|
|
@@ -10215,7 +10222,7 @@ function useTableSelection({
|
|
|
10215
10222
|
return areSetsEqual(prev, next) ? prev : next;
|
|
10216
10223
|
});
|
|
10217
10224
|
}, [pruneToItems, itemsById]);
|
|
10218
|
-
const selectedItemMap =
|
|
10225
|
+
const selectedItemMap = React19.useMemo(() => {
|
|
10219
10226
|
const map = /* @__PURE__ */ new Map();
|
|
10220
10227
|
for (const id of selectedIds) {
|
|
10221
10228
|
const item = itemsById.get(id);
|
|
@@ -10223,13 +10230,13 @@ function useTableSelection({
|
|
|
10223
10230
|
}
|
|
10224
10231
|
return map;
|
|
10225
10232
|
}, [selectedIds, itemsById]);
|
|
10226
|
-
const selectedItems =
|
|
10227
|
-
const allSelected =
|
|
10233
|
+
const selectedItems = React19.useMemo(() => Array.from(selectedItemMap.values()), [selectedItemMap]);
|
|
10234
|
+
const allSelected = React19.useMemo(() => {
|
|
10228
10235
|
if (items.length === 0) return false;
|
|
10229
10236
|
return items.every((item) => selectedIds.has(getId(item)));
|
|
10230
10237
|
}, [items, selectedIds, getId]);
|
|
10231
|
-
const anySelected =
|
|
10232
|
-
|
|
10238
|
+
const anySelected = React19.useMemo(() => selectedIds.size > 0, [selectedIds]);
|
|
10239
|
+
React19.useEffect(() => {
|
|
10233
10240
|
if (!hydrated) return;
|
|
10234
10241
|
if (typeof window === "undefined") return;
|
|
10235
10242
|
if (storageKey) {
|
|
@@ -10242,7 +10249,7 @@ function useTableSelection({
|
|
|
10242
10249
|
}
|
|
10243
10250
|
onSelectionChange == null ? void 0 : onSelectionChange({ selectedIds, selectedItems });
|
|
10244
10251
|
}, [hydrated, onSelectionChange, selectedIds, selectedItems, storage, storageKey]);
|
|
10245
|
-
const toggleId =
|
|
10252
|
+
const toggleId = React19.useCallback(
|
|
10246
10253
|
(id, selected) => {
|
|
10247
10254
|
setSelectedIds((prev) => {
|
|
10248
10255
|
const next = new Set(prev);
|
|
@@ -10260,22 +10267,22 @@ function useTableSelection({
|
|
|
10260
10267
|
},
|
|
10261
10268
|
[selectionMode]
|
|
10262
10269
|
);
|
|
10263
|
-
const toggleItem =
|
|
10270
|
+
const toggleItem = React19.useCallback(
|
|
10264
10271
|
(item) => {
|
|
10265
10272
|
toggleId(getId(item));
|
|
10266
10273
|
},
|
|
10267
10274
|
[toggleId, getId]
|
|
10268
10275
|
);
|
|
10269
|
-
const selectOnly =
|
|
10276
|
+
const selectOnly = React19.useCallback((id) => {
|
|
10270
10277
|
setSelectedIds((prev) => {
|
|
10271
10278
|
const next = /* @__PURE__ */ new Set([id]);
|
|
10272
10279
|
return areSetsEqual(prev, next) ? prev : next;
|
|
10273
10280
|
});
|
|
10274
10281
|
}, []);
|
|
10275
|
-
const clearSelection =
|
|
10282
|
+
const clearSelection = React19.useCallback(() => {
|
|
10276
10283
|
setSelectedIds((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Set());
|
|
10277
10284
|
}, []);
|
|
10278
|
-
const toggleAll =
|
|
10285
|
+
const toggleAll = React19.useCallback(
|
|
10279
10286
|
(selected) => {
|
|
10280
10287
|
if (!selected) {
|
|
10281
10288
|
clearSelection();
|
|
@@ -10333,7 +10340,7 @@ function ChipMultiToggle({
|
|
|
10333
10340
|
type = "rounded",
|
|
10334
10341
|
dataCy
|
|
10335
10342
|
}) {
|
|
10336
|
-
const selectedSet =
|
|
10343
|
+
const selectedSet = React19__namespace.default.useMemo(() => new Set(selectedValues), [selectedValues]);
|
|
10337
10344
|
const isNoneSelected = allTogglesNone && selectedSet.has(noneValue);
|
|
10338
10345
|
const isAllSelected = showAllOption && !isNoneSelected && selectedSet.size === 0;
|
|
10339
10346
|
const toggleValue = (value) => {
|
|
@@ -10451,8 +10458,8 @@ function CheckboxGroup({
|
|
|
10451
10458
|
"data-cy": dataCy
|
|
10452
10459
|
}) {
|
|
10453
10460
|
var _a, _b;
|
|
10454
|
-
const selectedSet =
|
|
10455
|
-
const enabledValues =
|
|
10461
|
+
const selectedSet = React19.useMemo(() => new Set(selectedValues), [selectedValues]);
|
|
10462
|
+
const enabledValues = React19.useMemo(
|
|
10456
10463
|
() => options.filter((o) => !(disabled || o.disabled)).map((o) => o.value),
|
|
10457
10464
|
[options, disabled]
|
|
10458
10465
|
);
|
|
@@ -10583,15 +10590,15 @@ function SidePanel({
|
|
|
10583
10590
|
detailsHeaderAddition,
|
|
10584
10591
|
...props
|
|
10585
10592
|
}) {
|
|
10586
|
-
const [mounted, setMounted] =
|
|
10587
|
-
const [shouldRender, setShouldRender] =
|
|
10588
|
-
const [isActive, setIsActive] =
|
|
10589
|
-
const panelRef =
|
|
10590
|
-
|
|
10591
|
-
|
|
10593
|
+
const [mounted, setMounted] = React19.useState(false);
|
|
10594
|
+
const [shouldRender, setShouldRender] = React19.useState(isOpen);
|
|
10595
|
+
const [isActive, setIsActive] = React19.useState(false);
|
|
10596
|
+
const panelRef = React19.useRef(null);
|
|
10597
|
+
React19.useEffect(() => setMounted(true), []);
|
|
10598
|
+
React19.useEffect(() => {
|
|
10592
10599
|
if (isOpen) setShouldRender(true);
|
|
10593
10600
|
}, [isOpen]);
|
|
10594
|
-
|
|
10601
|
+
React19.useEffect(() => {
|
|
10595
10602
|
if (!isOpen) return;
|
|
10596
10603
|
const handleKeyDown = (e) => {
|
|
10597
10604
|
if (e.key === "Escape") {
|
|
@@ -10604,7 +10611,7 @@ function SidePanel({
|
|
|
10604
10611
|
document.removeEventListener("keydown", handleKeyDown);
|
|
10605
10612
|
};
|
|
10606
10613
|
}, [isOpen, onClose]);
|
|
10607
|
-
|
|
10614
|
+
React19.useEffect(() => {
|
|
10608
10615
|
if (!shouldRender) return;
|
|
10609
10616
|
if (!isOpen) {
|
|
10610
10617
|
setIsActive(false);
|
|
@@ -10613,7 +10620,7 @@ function SidePanel({
|
|
|
10613
10620
|
const raf = requestAnimationFrame(() => setIsActive(true));
|
|
10614
10621
|
return () => cancelAnimationFrame(raf);
|
|
10615
10622
|
}, [isOpen, shouldRender]);
|
|
10616
|
-
|
|
10623
|
+
React19.useEffect(() => {
|
|
10617
10624
|
if (!shouldRender) return;
|
|
10618
10625
|
const el = panelRef.current;
|
|
10619
10626
|
if (!el) return;
|
|
@@ -10721,7 +10728,7 @@ function SidePanel({
|
|
|
10721
10728
|
);
|
|
10722
10729
|
}
|
|
10723
10730
|
function useSidePanel(initialOpen = false) {
|
|
10724
|
-
const [isOpen, setIsOpen] =
|
|
10731
|
+
const [isOpen, setIsOpen] = React19.useState(initialOpen);
|
|
10725
10732
|
const openSidePanel = () => setIsOpen(true);
|
|
10726
10733
|
const closeSidePanel = () => setIsOpen(false);
|
|
10727
10734
|
return {
|
|
@@ -10780,7 +10787,7 @@ function Tooltip({
|
|
|
10780
10787
|
delayOpenMs,
|
|
10781
10788
|
delayCloseMs
|
|
10782
10789
|
});
|
|
10783
|
-
const rootClass =
|
|
10790
|
+
const rootClass = React19.useMemo(
|
|
10784
10791
|
() => ["TooltipContainer", className].filter(Boolean).join(" "),
|
|
10785
10792
|
[className]
|
|
10786
10793
|
);
|
|
@@ -10804,7 +10811,7 @@ function RadioButtonGroup({
|
|
|
10804
10811
|
direction = "column",
|
|
10805
10812
|
"data-cy": dataCy
|
|
10806
10813
|
}) {
|
|
10807
|
-
const generated =
|
|
10814
|
+
const generated = React19.useId();
|
|
10808
10815
|
const groupName = name != null ? name : `radio-group-${generated}`;
|
|
10809
10816
|
const content = /* @__PURE__ */ jsxRuntime.jsx(
|
|
10810
10817
|
"div",
|
|
@@ -10876,22 +10883,22 @@ function IntervalSelect({
|
|
|
10876
10883
|
dataCy,
|
|
10877
10884
|
disabled
|
|
10878
10885
|
}) {
|
|
10879
|
-
const generatedId =
|
|
10886
|
+
const generatedId = React19.useId();
|
|
10880
10887
|
const controlId = id != null ? id : `interval-select-${generatedId}`;
|
|
10881
10888
|
const describedById = `${controlId}-desc`;
|
|
10882
10889
|
const listboxId = `${controlId}-listbox`;
|
|
10883
|
-
const popoverRef =
|
|
10884
|
-
const optionRefs =
|
|
10885
|
-
const selectedIndex =
|
|
10890
|
+
const popoverRef = React19.useRef(null);
|
|
10891
|
+
const optionRefs = React19.useRef([]);
|
|
10892
|
+
const selectedIndex = React19.useMemo(
|
|
10886
10893
|
() => options.findIndex((o) => o.minutesAgo === selectedValue),
|
|
10887
10894
|
[options, selectedValue]
|
|
10888
10895
|
);
|
|
10889
|
-
const [activeIndex, setActiveIndex] =
|
|
10890
|
-
|
|
10896
|
+
const [activeIndex, setActiveIndex] = React19.useState(selectedIndex >= 0 ? selectedIndex : 0);
|
|
10897
|
+
React19.useEffect(() => {
|
|
10891
10898
|
var _a;
|
|
10892
10899
|
(_a = optionRefs.current[activeIndex]) == null ? void 0 : _a.focus();
|
|
10893
10900
|
}, [activeIndex]);
|
|
10894
|
-
const selected =
|
|
10901
|
+
const selected = React19.useMemo(
|
|
10895
10902
|
() => {
|
|
10896
10903
|
var _a;
|
|
10897
10904
|
return (_a = options.find((o) => o.minutesAgo === selectedValue)) != null ? _a : null;
|
|
@@ -11061,10 +11068,10 @@ var AccordionRow_default = {
|
|
|
11061
11068
|
content: "AccordionRow_content"
|
|
11062
11069
|
};
|
|
11063
11070
|
function useCollapsibleHeight(isOpen, shouldAnimate) {
|
|
11064
|
-
const innerRef =
|
|
11065
|
-
const [height, setHeight] =
|
|
11066
|
-
const prevIsOpenRef =
|
|
11067
|
-
|
|
11071
|
+
const innerRef = React19.useRef(null);
|
|
11072
|
+
const [height, setHeight] = React19.useState("0px");
|
|
11073
|
+
const prevIsOpenRef = React19.useRef(isOpen);
|
|
11074
|
+
React19.useLayoutEffect(() => {
|
|
11068
11075
|
var _a, _b;
|
|
11069
11076
|
const el = innerRef.current;
|
|
11070
11077
|
if (!el) return;
|
|
@@ -11176,28 +11183,28 @@ function Accordion({
|
|
|
11176
11183
|
onOpenIndexChange,
|
|
11177
11184
|
onOpenIndexesChange
|
|
11178
11185
|
}) {
|
|
11179
|
-
const uid =
|
|
11186
|
+
const uid = React19.useId();
|
|
11180
11187
|
const isControlled = mode === "single" ? openIndex !== void 0 : openIndexes !== void 0;
|
|
11181
|
-
const hasMountedRef =
|
|
11182
|
-
|
|
11188
|
+
const hasMountedRef = React19.useRef(false);
|
|
11189
|
+
React19.useEffect(() => {
|
|
11183
11190
|
hasMountedRef.current = true;
|
|
11184
11191
|
}, []);
|
|
11185
|
-
const [internalSingle, setInternalSingle] =
|
|
11192
|
+
const [internalSingle, setInternalSingle] = React19.useState(
|
|
11186
11193
|
mode === "single" ? defaultOpenIndex : null
|
|
11187
11194
|
);
|
|
11188
|
-
const [internalMultiple, setInternalMultiple] =
|
|
11195
|
+
const [internalMultiple, setInternalMultiple] = React19.useState(() => {
|
|
11189
11196
|
if (mode !== "multiple") return [];
|
|
11190
11197
|
if (defaultOpenIndexes === "all") return items.map((_, i) => i);
|
|
11191
11198
|
return normalizeMultiple(defaultOpenIndexes);
|
|
11192
11199
|
});
|
|
11193
|
-
const currentOpenIndexes =
|
|
11200
|
+
const currentOpenIndexes = React19.useMemo(() => {
|
|
11194
11201
|
if (mode === "single") {
|
|
11195
11202
|
const current = isControlled ? openIndex != null ? openIndex : null : internalSingle;
|
|
11196
11203
|
return current === null ? [] : [current];
|
|
11197
11204
|
}
|
|
11198
11205
|
return isControlled ? normalizeMultiple(openIndexes) : internalMultiple;
|
|
11199
11206
|
}, [mode, isControlled, openIndex, openIndexes, internalSingle, internalMultiple]);
|
|
11200
|
-
const openSet =
|
|
11207
|
+
const openSet = React19.useMemo(() => new Set(currentOpenIndexes), [currentOpenIndexes]);
|
|
11201
11208
|
function commit(nextIndexes) {
|
|
11202
11209
|
if (mode === "single") {
|
|
11203
11210
|
const next = nextIndexes.length ? nextIndexes[0] : null;
|
|
@@ -12451,7 +12458,7 @@ function StatePage({
|
|
|
12451
12458
|
children,
|
|
12452
12459
|
actions
|
|
12453
12460
|
}) {
|
|
12454
|
-
const illustration =
|
|
12461
|
+
const illustration = React19.useMemo(() => {
|
|
12455
12462
|
switch (type) {
|
|
12456
12463
|
case "error":
|
|
12457
12464
|
return /* @__PURE__ */ jsxRuntime.jsx(ErrorIllustration, {});
|
|
@@ -12487,14 +12494,14 @@ function StickyFooterLayout({
|
|
|
12487
12494
|
className
|
|
12488
12495
|
}) {
|
|
12489
12496
|
const pad = `var(${chromePaddingVar})`;
|
|
12490
|
-
const contentColRef =
|
|
12491
|
-
const footerOverlayRef =
|
|
12492
|
-
const [dock, setDock] =
|
|
12497
|
+
const contentColRef = React19.useRef(null);
|
|
12498
|
+
const footerOverlayRef = React19.useRef(null);
|
|
12499
|
+
const [dock, setDock] = React19.useState({
|
|
12493
12500
|
left: 0,
|
|
12494
12501
|
width: typeof maxWidth === "number" ? maxWidth : 550
|
|
12495
12502
|
});
|
|
12496
|
-
const [overlayHeight, setOverlayHeight] =
|
|
12497
|
-
|
|
12503
|
+
const [overlayHeight, setOverlayHeight] = React19.useState(0);
|
|
12504
|
+
React19.useLayoutEffect(() => {
|
|
12498
12505
|
const el = contentColRef.current;
|
|
12499
12506
|
if (!el) return;
|
|
12500
12507
|
const measure = () => {
|
|
@@ -12510,7 +12517,7 @@ function StickyFooterLayout({
|
|
|
12510
12517
|
window.removeEventListener("resize", measure);
|
|
12511
12518
|
};
|
|
12512
12519
|
}, []);
|
|
12513
|
-
|
|
12520
|
+
React19.useLayoutEffect(() => {
|
|
12514
12521
|
const el = footerOverlayRef.current;
|
|
12515
12522
|
if (!el) return;
|
|
12516
12523
|
const measure = () => setOverlayHeight(el.getBoundingClientRect().height);
|
|
@@ -12761,6 +12768,7 @@ exports.DateTimePicker = DateTimePicker;
|
|
|
12761
12768
|
exports.Divider = Divider;
|
|
12762
12769
|
exports.FadeOverlay = FadeOverlay;
|
|
12763
12770
|
exports.FilterField = FilterField;
|
|
12771
|
+
exports.Footer = Footer;
|
|
12764
12772
|
exports.Grid = Grid;
|
|
12765
12773
|
exports.GridItem = GridItem;
|
|
12766
12774
|
exports.Headline = Headline;
|
|
@@ -12770,7 +12778,6 @@ exports.Input = Input;
|
|
|
12770
12778
|
exports.InputContainer = InputContainer;
|
|
12771
12779
|
exports.IntervalSelect = IntervalSelect;
|
|
12772
12780
|
exports.JsonViewer = JsonViewer;
|
|
12773
|
-
exports.LayoutFooter = LayoutFooter;
|
|
12774
12781
|
exports.Menu = Menu;
|
|
12775
12782
|
exports.MetaBar = MetaBar;
|
|
12776
12783
|
exports.Modal = Modal;
|