@helpwave/hightide 0.12.3 → 0.12.5
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/index.d.mts +11 -9
- package/dist/index.d.ts +11 -9
- package/dist/index.js +721 -689
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +91 -59
- package/dist/index.mjs.map +1 -1
- package/dist/style/globals.css +20 -3
- package/dist/style/uncompiled/theme/components/app-page.css +2 -2
- package/dist/style/uncompiled/theme/components/vertical-navigation.css +5 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -8655,7 +8655,7 @@ var ProcessModelCanvas = ({
|
|
|
8655
8655
|
};
|
|
8656
8656
|
|
|
8657
8657
|
// src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx
|
|
8658
|
-
var
|
|
8658
|
+
var import_react40 = require("react");
|
|
8659
8659
|
var import_clsx9 = __toESM(require("clsx"));
|
|
8660
8660
|
|
|
8661
8661
|
// src/global-contexts/LocaleContext.tsx
|
|
@@ -9829,7 +9829,7 @@ function useHightideTranslation(extensions, overwrites) {
|
|
|
9829
9829
|
}
|
|
9830
9830
|
|
|
9831
9831
|
// src/components/user-interaction/Select/Select.tsx
|
|
9832
|
-
var
|
|
9832
|
+
var import_react39 = require("react");
|
|
9833
9833
|
|
|
9834
9834
|
// src/components/user-interaction/Select/SelectRoot.tsx
|
|
9835
9835
|
var import_react20 = require("react");
|
|
@@ -10612,11 +10612,11 @@ var SelectButton = (0, import_react22.forwardRef)(
|
|
|
10612
10612
|
);
|
|
10613
10613
|
|
|
10614
10614
|
// src/components/user-interaction/Select/SelectContent.tsx
|
|
10615
|
-
var
|
|
10615
|
+
var import_react38 = require("react");
|
|
10616
10616
|
var import_clsx8 = __toESM(require("clsx"));
|
|
10617
10617
|
|
|
10618
10618
|
// src/components/layout/popup/PopUp.tsx
|
|
10619
|
-
var
|
|
10619
|
+
var import_react34 = require("react");
|
|
10620
10620
|
|
|
10621
10621
|
// src/components/utils/Portal.tsx
|
|
10622
10622
|
var import_react_dom = require("react-dom");
|
|
@@ -10975,7 +10975,6 @@ var AnchoredFloatingContainer = (0, import_react27.forwardRef)(function Floating
|
|
|
10975
10975
|
// src/components/utils/FocusTrap.tsx
|
|
10976
10976
|
var import_react29 = require("react");
|
|
10977
10977
|
var import_react30 = require("react");
|
|
10978
|
-
var import_react31 = require("react");
|
|
10979
10978
|
|
|
10980
10979
|
// src/hooks/focus/useFocusTrap.ts
|
|
10981
10980
|
var import_react28 = require("react");
|
|
@@ -10995,7 +10994,7 @@ var createFocusGuard = () => {
|
|
|
10995
10994
|
return div;
|
|
10996
10995
|
};
|
|
10997
10996
|
function getContainedFocusableElements(element) {
|
|
10998
|
-
return element?.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
10997
|
+
return [...element?.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])') ?? []];
|
|
10999
10998
|
}
|
|
11000
10999
|
var FocusTrapService = class {
|
|
11001
11000
|
constructor() {
|
|
@@ -11005,7 +11004,7 @@ var FocusTrapService = class {
|
|
|
11005
11004
|
const active = this.getActive();
|
|
11006
11005
|
if (!active || !active.container.current) return;
|
|
11007
11006
|
const { container } = active;
|
|
11008
|
-
if (!container.current.contains(event.target)) {
|
|
11007
|
+
if (container.current && !container.current.contains(event.target)) {
|
|
11009
11008
|
this.focusElement();
|
|
11010
11009
|
}
|
|
11011
11010
|
};
|
|
@@ -11021,10 +11020,10 @@ var FocusTrapService = class {
|
|
|
11021
11020
|
const containerElement = container.current;
|
|
11022
11021
|
if (initialFocusElement?.current) {
|
|
11023
11022
|
initialFocusElement.current.focus();
|
|
11024
|
-
} else {
|
|
11023
|
+
} else if (containerElement) {
|
|
11025
11024
|
const elements = getContainedFocusableElements(containerElement);
|
|
11026
11025
|
if (elements && elements.length > 0) {
|
|
11027
|
-
const first = elements
|
|
11026
|
+
const first = elements[0];
|
|
11028
11027
|
first.focus();
|
|
11029
11028
|
} else {
|
|
11030
11029
|
containerElement.focus();
|
|
@@ -11101,10 +11100,10 @@ var useFocusTrap = ({
|
|
|
11101
11100
|
const containerElement = container.current;
|
|
11102
11101
|
if (initialFocus?.current) {
|
|
11103
11102
|
initialFocus.current.focus();
|
|
11104
|
-
} else {
|
|
11103
|
+
} else if (containerElement) {
|
|
11105
11104
|
const elements = getContainedFocusableElements(containerElement);
|
|
11106
11105
|
if (elements && elements.length > 0) {
|
|
11107
|
-
const first = elements
|
|
11106
|
+
const first = elements[0];
|
|
11108
11107
|
first.focus();
|
|
11109
11108
|
} else {
|
|
11110
11109
|
console.warn("No focusable elements found in the focus trap. Affected element: ", containerElement);
|
|
@@ -11132,12 +11131,13 @@ var useFocusTrap = ({
|
|
|
11132
11131
|
service.register({ id, pause, focus, focusLast, unpause, container, initialFocusElement: initialFocus });
|
|
11133
11132
|
return () => {
|
|
11134
11133
|
service.unregister(id);
|
|
11135
|
-
lastFocusRef.current =
|
|
11134
|
+
lastFocusRef.current = null;
|
|
11136
11135
|
};
|
|
11137
11136
|
}
|
|
11138
11137
|
}, [active, container, focusElement, id, initialFocus]);
|
|
11139
11138
|
(0, import_react28.useEffect)(() => {
|
|
11140
|
-
|
|
11139
|
+
const containerElement = container.current;
|
|
11140
|
+
if (active && !paused && containerElement) {
|
|
11141
11141
|
let onKeyDown = function(event) {
|
|
11142
11142
|
const key = event.key;
|
|
11143
11143
|
const elements = getContainedFocusableElements(containerElement);
|
|
@@ -11154,7 +11154,6 @@ var useFocusTrap = ({
|
|
|
11154
11154
|
event.preventDefault();
|
|
11155
11155
|
}
|
|
11156
11156
|
};
|
|
11157
|
-
const containerElement = container.current;
|
|
11158
11157
|
containerElement.addEventListener("keydown", onKeyDown);
|
|
11159
11158
|
return () => {
|
|
11160
11159
|
containerElement.removeEventListener("keydown", onKeyDown);
|
|
@@ -11171,21 +11170,33 @@ var FocusTrap = ({ children, ...props }) => {
|
|
|
11171
11170
|
});
|
|
11172
11171
|
return children;
|
|
11173
11172
|
};
|
|
11174
|
-
var FocusTrapWrapper = (0,
|
|
11173
|
+
var FocusTrapWrapper = (0, import_react30.forwardRef)(function FocusTrap2({
|
|
11175
11174
|
active,
|
|
11176
11175
|
initialFocus,
|
|
11177
11176
|
...props
|
|
11178
11177
|
}, forwardedRef) {
|
|
11179
11178
|
const innerRef = (0, import_react29.useRef)(null);
|
|
11180
|
-
(0, import_react30.useImperativeHandle)(forwardedRef, () => innerRef.current);
|
|
11181
11179
|
useFocusTrap({ container: innerRef, active, initialFocus });
|
|
11182
|
-
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
11180
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
11181
|
+
"div",
|
|
11182
|
+
{
|
|
11183
|
+
ref: (node) => {
|
|
11184
|
+
innerRef.current = node;
|
|
11185
|
+
if (typeof forwardedRef === "function") {
|
|
11186
|
+
forwardedRef(node);
|
|
11187
|
+
} else if (forwardedRef) {
|
|
11188
|
+
forwardedRef.current = node;
|
|
11189
|
+
}
|
|
11190
|
+
},
|
|
11191
|
+
...props
|
|
11192
|
+
}
|
|
11193
|
+
);
|
|
11183
11194
|
});
|
|
11184
11195
|
|
|
11185
11196
|
// src/hooks/useOutsideClick.ts
|
|
11186
|
-
var
|
|
11197
|
+
var import_react31 = require("react");
|
|
11187
11198
|
var useOutsideClick = ({ refs, onOutsideClick, active = true }) => {
|
|
11188
|
-
(0,
|
|
11199
|
+
(0, import_react31.useEffect)(() => {
|
|
11189
11200
|
if (!active) return;
|
|
11190
11201
|
const listener = (event) => {
|
|
11191
11202
|
if (event.target === null) return;
|
|
@@ -11206,17 +11217,17 @@ var useOutsideClick = ({ refs, onOutsideClick, active = true }) => {
|
|
|
11206
11217
|
};
|
|
11207
11218
|
|
|
11208
11219
|
// src/hooks/usePresenceRef.ts
|
|
11209
|
-
var
|
|
11220
|
+
var import_react32 = require("react");
|
|
11210
11221
|
var usePresenceRef = ({
|
|
11211
11222
|
isOpen = true
|
|
11212
11223
|
}) => {
|
|
11213
|
-
const [isPresent, setIsPresent] = (0,
|
|
11214
|
-
const ref = (0,
|
|
11215
|
-
const refAssignment = (0,
|
|
11224
|
+
const [isPresent, setIsPresent] = (0, import_react32.useState)(false);
|
|
11225
|
+
const ref = (0, import_react32.useRef)(null);
|
|
11226
|
+
const refAssignment = (0, import_react32.useCallback)((node) => {
|
|
11216
11227
|
ref.current = node;
|
|
11217
11228
|
setIsPresent((prev) => prev || !!node);
|
|
11218
11229
|
}, []);
|
|
11219
|
-
(0,
|
|
11230
|
+
(0, import_react32.useEffect)(() => {
|
|
11220
11231
|
if (!isOpen) {
|
|
11221
11232
|
setIsPresent(false);
|
|
11222
11233
|
}
|
|
@@ -11229,7 +11240,7 @@ var usePresenceRef = ({
|
|
|
11229
11240
|
};
|
|
11230
11241
|
|
|
11231
11242
|
// src/hooks/useOverlayRegistry.ts
|
|
11232
|
-
var
|
|
11243
|
+
var import_react33 = require("react");
|
|
11233
11244
|
var OverlayRegistry = class _OverlayRegistry {
|
|
11234
11245
|
constructor() {
|
|
11235
11246
|
// The frontmost overlay is at the end of the array
|
|
@@ -11294,18 +11305,18 @@ var OverlayRegistry = class _OverlayRegistry {
|
|
|
11294
11305
|
}
|
|
11295
11306
|
};
|
|
11296
11307
|
var useOverlayRegistry = (props = {}) => {
|
|
11297
|
-
const generatedId = (0,
|
|
11298
|
-
const item = (0,
|
|
11308
|
+
const generatedId = (0, import_react33.useId)();
|
|
11309
|
+
const item = (0, import_react33.useMemo)(() => ({
|
|
11299
11310
|
id: props.id ?? generatedId,
|
|
11300
11311
|
tags: props.tags
|
|
11301
11312
|
}), [props.id, generatedId, props.tags]);
|
|
11302
|
-
const [value, setValue] = (0,
|
|
11313
|
+
const [value, setValue] = (0, import_react33.useState)({
|
|
11303
11314
|
activeId: null,
|
|
11304
11315
|
itemInformation: {},
|
|
11305
11316
|
tagItemCounts: {}
|
|
11306
11317
|
});
|
|
11307
|
-
const registry = (0,
|
|
11308
|
-
(0,
|
|
11318
|
+
const registry = (0, import_react33.useMemo)(() => OverlayRegistry.getInstance(), []);
|
|
11319
|
+
(0, import_react33.useEffect)(() => {
|
|
11309
11320
|
if (!props.isActive) {
|
|
11310
11321
|
return;
|
|
11311
11322
|
}
|
|
@@ -11336,7 +11347,7 @@ var useOverlayRegistry = (props = {}) => {
|
|
|
11336
11347
|
|
|
11337
11348
|
// src/components/layout/popup/PopUp.tsx
|
|
11338
11349
|
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
11339
|
-
var PopUp = (0,
|
|
11350
|
+
var PopUp = (0, import_react34.forwardRef)(function PopUp2({
|
|
11340
11351
|
children,
|
|
11341
11352
|
isOpen: isOpenOverwrite,
|
|
11342
11353
|
focusTrapOptions,
|
|
@@ -11348,23 +11359,23 @@ var PopUp = (0, import_react35.forwardRef)(function PopUp2({
|
|
|
11348
11359
|
anchorExcludedFromOutsideClick = false,
|
|
11349
11360
|
...props
|
|
11350
11361
|
}, forwardRef36) {
|
|
11351
|
-
const context = (0,
|
|
11362
|
+
const context = (0, import_react34.useContext)(PopUpContext);
|
|
11352
11363
|
const isOpen = isOpenOverwrite ?? context?.isOpen ?? false;
|
|
11353
11364
|
const anchor = anchorOverwrite ?? context?.triggerRef ?? void 0;
|
|
11354
11365
|
const id = props.id ?? context?.popUpId;
|
|
11355
11366
|
const { refAssignment, isPresent, ref } = usePresenceRef({ isOpen });
|
|
11356
|
-
(0,
|
|
11367
|
+
(0, import_react34.useImperativeHandle)(forwardRef36, () => ref.current, [ref]);
|
|
11357
11368
|
const onCloseStable = useEventCallbackStabilizer(onClose);
|
|
11358
11369
|
const onOutsideClickStable = useEventCallbackStabilizer(onOutsideClick);
|
|
11359
|
-
const onCloseWrapper = (0,
|
|
11370
|
+
const onCloseWrapper = (0, import_react34.useCallback)(() => {
|
|
11360
11371
|
onCloseStable();
|
|
11361
11372
|
context?.setIsOpen(false);
|
|
11362
11373
|
}, [onCloseStable, context]);
|
|
11363
|
-
const { zIndex, tagPositions } = useOverlayRegistry({ isActive: isOpen, tags: (0,
|
|
11374
|
+
const { zIndex, tagPositions } = useOverlayRegistry({ isActive: isOpen, tags: (0, import_react34.useMemo)(() => ["popup"], []) });
|
|
11364
11375
|
const isInFront = tagPositions?.["popup"] === 0;
|
|
11365
11376
|
const isOutsideClickActive = isOpen && isInFront && (outsideClickOptions?.active ?? true);
|
|
11366
11377
|
useOutsideClick({
|
|
11367
|
-
onOutsideClick: (0,
|
|
11378
|
+
onOutsideClick: (0, import_react34.useCallback)((event) => {
|
|
11368
11379
|
if (event.defaultPrevented) return;
|
|
11369
11380
|
onCloseWrapper();
|
|
11370
11381
|
onOutsideClickStable(event);
|
|
@@ -11401,16 +11412,16 @@ var PopUp = (0, import_react35.forwardRef)(function PopUp2({
|
|
|
11401
11412
|
});
|
|
11402
11413
|
|
|
11403
11414
|
// src/components/user-interaction/input/Input.tsx
|
|
11404
|
-
var
|
|
11415
|
+
var import_react37 = require("react");
|
|
11405
11416
|
|
|
11406
11417
|
// src/hooks/useDelay.ts
|
|
11407
|
-
var
|
|
11418
|
+
var import_react35 = require("react");
|
|
11408
11419
|
var defaultOptions2 = {
|
|
11409
11420
|
delay: 3e3,
|
|
11410
11421
|
disabled: false
|
|
11411
11422
|
};
|
|
11412
11423
|
function useDelay(options) {
|
|
11413
|
-
const [timer, setTimer] = (0,
|
|
11424
|
+
const [timer, setTimer] = (0, import_react35.useState)(void 0);
|
|
11414
11425
|
const { delay, disabled } = {
|
|
11415
11426
|
...defaultOptions2,
|
|
11416
11427
|
...options
|
|
@@ -11429,12 +11440,12 @@ function useDelay(options) {
|
|
|
11429
11440
|
setTimer(void 0);
|
|
11430
11441
|
}, delay));
|
|
11431
11442
|
};
|
|
11432
|
-
(0,
|
|
11443
|
+
(0, import_react35.useEffect)(() => {
|
|
11433
11444
|
return () => {
|
|
11434
11445
|
clearTimeout(timer);
|
|
11435
11446
|
};
|
|
11436
11447
|
}, [timer]);
|
|
11437
|
-
(0,
|
|
11448
|
+
(0, import_react35.useEffect)(() => {
|
|
11438
11449
|
if (disabled) {
|
|
11439
11450
|
clearTimeout(timer);
|
|
11440
11451
|
setTimer(void 0);
|
|
@@ -11444,9 +11455,9 @@ function useDelay(options) {
|
|
|
11444
11455
|
}
|
|
11445
11456
|
|
|
11446
11457
|
// src/hooks/focus/useFocusManagement.ts
|
|
11447
|
-
var
|
|
11458
|
+
var import_react36 = require("react");
|
|
11448
11459
|
function useFocusManagement() {
|
|
11449
|
-
const getFocusableElements = (0,
|
|
11460
|
+
const getFocusableElements = (0, import_react36.useCallback)(() => {
|
|
11450
11461
|
return Array.from(
|
|
11451
11462
|
document.querySelectorAll(
|
|
11452
11463
|
'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])'
|
|
@@ -11455,7 +11466,7 @@ function useFocusManagement() {
|
|
|
11455
11466
|
(el) => el instanceof HTMLElement && !el.hasAttribute("disabled") && !el.hasAttribute("hidden") && el.tabIndex !== -1
|
|
11456
11467
|
);
|
|
11457
11468
|
}, []);
|
|
11458
|
-
const getNextFocusElement = (0,
|
|
11469
|
+
const getNextFocusElement = (0, import_react36.useCallback)(() => {
|
|
11459
11470
|
const elements = getFocusableElements();
|
|
11460
11471
|
if (elements.length === 0) {
|
|
11461
11472
|
return void 0;
|
|
@@ -11467,11 +11478,11 @@ function useFocusManagement() {
|
|
|
11467
11478
|
}
|
|
11468
11479
|
return nextElement;
|
|
11469
11480
|
}, [getFocusableElements]);
|
|
11470
|
-
const focusNext = (0,
|
|
11481
|
+
const focusNext = (0, import_react36.useCallback)(() => {
|
|
11471
11482
|
const nextElement = getNextFocusElement();
|
|
11472
11483
|
nextElement?.focus();
|
|
11473
11484
|
}, [getNextFocusElement]);
|
|
11474
|
-
const getPreviousFocusElement = (0,
|
|
11485
|
+
const getPreviousFocusElement = (0, import_react36.useCallback)(() => {
|
|
11475
11486
|
const elements = getFocusableElements();
|
|
11476
11487
|
if (elements.length === 0) {
|
|
11477
11488
|
return void 0;
|
|
@@ -11487,7 +11498,7 @@ function useFocusManagement() {
|
|
|
11487
11498
|
}
|
|
11488
11499
|
return previousElement;
|
|
11489
11500
|
}, [getFocusableElements]);
|
|
11490
|
-
const focusPrevious = (0,
|
|
11501
|
+
const focusPrevious = (0, import_react36.useCallback)(() => {
|
|
11491
11502
|
const previousElement = getPreviousFocusElement();
|
|
11492
11503
|
if (previousElement) previousElement.focus();
|
|
11493
11504
|
}, [getPreviousFocusElement]);
|
|
@@ -11508,7 +11519,7 @@ var defaultEditCompleteOptions = {
|
|
|
11508
11519
|
afterDelay: false,
|
|
11509
11520
|
delay: 2500
|
|
11510
11521
|
};
|
|
11511
|
-
var Input = (0,
|
|
11522
|
+
var Input = (0, import_react37.forwardRef)(function Input2({
|
|
11512
11523
|
value: controlledValue,
|
|
11513
11524
|
initialValue,
|
|
11514
11525
|
invalid = false,
|
|
@@ -11532,8 +11543,8 @@ var Input = (0, import_react38.forwardRef)(function Input2({
|
|
|
11532
11543
|
restartTimer,
|
|
11533
11544
|
clearTimer
|
|
11534
11545
|
} = useDelay({ delay, disabled: !afterDelay || props.disabled || props.readOnly });
|
|
11535
|
-
const innerRef = (0,
|
|
11536
|
-
(0,
|
|
11546
|
+
const innerRef = (0, import_react37.useRef)(null);
|
|
11547
|
+
(0, import_react37.useImperativeHandle)(forwardedRef, () => innerRef.current);
|
|
11537
11548
|
const { focusNext } = useFocusManagement();
|
|
11538
11549
|
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
11539
11550
|
"input",
|
|
@@ -11579,7 +11590,7 @@ var Input = (0, import_react38.forwardRef)(function Input2({
|
|
|
11579
11590
|
|
|
11580
11591
|
// src/components/user-interaction/Select/SelectContent.tsx
|
|
11581
11592
|
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
11582
|
-
var SelectContent = (0,
|
|
11593
|
+
var SelectContent = (0, import_react38.forwardRef)(function SelectContent2({
|
|
11583
11594
|
id,
|
|
11584
11595
|
options,
|
|
11585
11596
|
showSearch: showSearchOverride,
|
|
@@ -11587,18 +11598,18 @@ var SelectContent = (0, import_react39.forwardRef)(function SelectContent2({
|
|
|
11587
11598
|
...props
|
|
11588
11599
|
}, ref) {
|
|
11589
11600
|
const translation = useHightideTranslation();
|
|
11590
|
-
const innerRef = (0,
|
|
11591
|
-
const searchInputRef = (0,
|
|
11592
|
-
(0,
|
|
11601
|
+
const innerRef = (0, import_react38.useRef)(null);
|
|
11602
|
+
const searchInputRef = (0, import_react38.useRef)(null);
|
|
11603
|
+
(0, import_react38.useImperativeHandle)(ref, () => innerRef.current);
|
|
11593
11604
|
const context = useSelectContext();
|
|
11594
11605
|
const { config, handleTypeaheadKey, toggleSelection, highlightNext, highlightPrevious, highlightFirst, highlightLast, highlightedId } = context;
|
|
11595
11606
|
const { setIds } = config;
|
|
11596
|
-
(0,
|
|
11607
|
+
(0, import_react38.useEffect)(() => {
|
|
11597
11608
|
if (id) setIds((prev) => ({ ...prev, content: id }));
|
|
11598
11609
|
}, [id, setIds]);
|
|
11599
11610
|
const showSearch = showSearchOverride ?? context.search.hasSearch;
|
|
11600
11611
|
const listboxAriaLabel = showSearch ? translation("searchResults") : void 0;
|
|
11601
|
-
const keyHandler = (0,
|
|
11612
|
+
const keyHandler = (0, import_react38.useCallback)(
|
|
11602
11613
|
(event) => {
|
|
11603
11614
|
switch (event.key) {
|
|
11604
11615
|
case "ArrowDown":
|
|
@@ -11707,7 +11718,7 @@ var SelectContent = (0, import_react39.forwardRef)(function SelectContent2({
|
|
|
11707
11718
|
|
|
11708
11719
|
// src/components/user-interaction/Select/Select.tsx
|
|
11709
11720
|
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
11710
|
-
var Select = (0,
|
|
11721
|
+
var Select = (0, import_react39.forwardRef)(function Select2({ children, contentPanelProps, buttonProps, ...props }, ref) {
|
|
11711
11722
|
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(SelectRoot, { ...props, children: [
|
|
11712
11723
|
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
11713
11724
|
SelectButton,
|
|
@@ -11783,20 +11794,20 @@ function runParticleAlongPath(path, durationMs, signal, onFrame) {
|
|
|
11783
11794
|
}
|
|
11784
11795
|
var ProcessModelTraceReplay = ({ graph, className }) => {
|
|
11785
11796
|
const translation = useHightideTranslation();
|
|
11786
|
-
const pathPrefix = (0,
|
|
11787
|
-
const hostRef = (0,
|
|
11788
|
-
const traceIndexRef = (0,
|
|
11789
|
-
const playbackRef = (0,
|
|
11790
|
-
const playbackLoopLockRef = (0,
|
|
11791
|
-
const [speedMult, setSpeedMult] = (0,
|
|
11792
|
-
const [isPlaying, setIsPlaying] = (0,
|
|
11793
|
-
const [activeNodeId, setActiveNodeId] = (0,
|
|
11794
|
-
const [visitedNodeIds, setVisitedNodeIds] = (0,
|
|
11795
|
-
const [edgeReplayHighlight, setEdgeReplayHighlight] = (0,
|
|
11796
|
-
const [replayParticle, setReplayParticle] = (0,
|
|
11797
|
-
const [logLines, setLogLines] = (0,
|
|
11798
|
-
const [logPlaceholder, setLogPlaceholder] = (0,
|
|
11799
|
-
const getPath = (0,
|
|
11797
|
+
const pathPrefix = (0, import_react40.useId)().replace(/:/g, "");
|
|
11798
|
+
const hostRef = (0, import_react40.useRef)(null);
|
|
11799
|
+
const traceIndexRef = (0, import_react40.useRef)(0);
|
|
11800
|
+
const playbackRef = (0, import_react40.useRef)(null);
|
|
11801
|
+
const playbackLoopLockRef = (0, import_react40.useRef)(false);
|
|
11802
|
+
const [speedMult, setSpeedMult] = (0, import_react40.useState)(2);
|
|
11803
|
+
const [isPlaying, setIsPlaying] = (0, import_react40.useState)(false);
|
|
11804
|
+
const [activeNodeId, setActiveNodeId] = (0, import_react40.useState)();
|
|
11805
|
+
const [visitedNodeIds, setVisitedNodeIds] = (0, import_react40.useState)(/* @__PURE__ */ new Set());
|
|
11806
|
+
const [edgeReplayHighlight, setEdgeReplayHighlight] = (0, import_react40.useState)(null);
|
|
11807
|
+
const [replayParticle, setReplayParticle] = (0, import_react40.useState)(null);
|
|
11808
|
+
const [logLines, setLogLines] = (0, import_react40.useState)([]);
|
|
11809
|
+
const [logPlaceholder, setLogPlaceholder] = (0, import_react40.useState)(true);
|
|
11810
|
+
const getPath = (0, import_react40.useCallback)(
|
|
11800
11811
|
(from, to) => {
|
|
11801
11812
|
const root = hostRef.current;
|
|
11802
11813
|
if (!root) {
|
|
@@ -11811,7 +11822,7 @@ var ProcessModelTraceReplay = ({ graph, className }) => {
|
|
|
11811
11822
|
},
|
|
11812
11823
|
[pathPrefix]
|
|
11813
11824
|
);
|
|
11814
|
-
const addLog = (0,
|
|
11825
|
+
const addLog = (0, import_react40.useCallback)((text) => {
|
|
11815
11826
|
setLogPlaceholder(false);
|
|
11816
11827
|
const time = (/* @__PURE__ */ new Date()).toLocaleTimeString("en", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
|
|
11817
11828
|
setLogLines((prev) => [
|
|
@@ -11819,20 +11830,20 @@ var ProcessModelTraceReplay = ({ graph, className }) => {
|
|
|
11819
11830
|
{ id: `${Date.now()}-${Math.random().toString(36).slice(2)}`, time, text }
|
|
11820
11831
|
]);
|
|
11821
11832
|
}, []);
|
|
11822
|
-
const getLabel = (0,
|
|
11833
|
+
const getLabel = (0, import_react40.useCallback)(
|
|
11823
11834
|
(id) => {
|
|
11824
11835
|
const n = graph.nodes.find((x) => x.id === id);
|
|
11825
11836
|
return n ? `${n.label} (${n.count})` : id;
|
|
11826
11837
|
},
|
|
11827
11838
|
[graph.nodes]
|
|
11828
11839
|
);
|
|
11829
|
-
const stopPlayback = (0,
|
|
11840
|
+
const stopPlayback = (0, import_react40.useCallback)(() => {
|
|
11830
11841
|
playbackRef.current?.abort();
|
|
11831
11842
|
playbackRef.current = null;
|
|
11832
11843
|
setIsPlaying(false);
|
|
11833
11844
|
setReplayParticle(null);
|
|
11834
11845
|
}, []);
|
|
11835
|
-
const resetReplay = (0,
|
|
11846
|
+
const resetReplay = (0, import_react40.useCallback)(() => {
|
|
11836
11847
|
stopPlayback();
|
|
11837
11848
|
traceIndexRef.current = 0;
|
|
11838
11849
|
setActiveNodeId(void 0);
|
|
@@ -11841,14 +11852,14 @@ var ProcessModelTraceReplay = ({ graph, className }) => {
|
|
|
11841
11852
|
setLogLines([]);
|
|
11842
11853
|
setLogPlaceholder(true);
|
|
11843
11854
|
}, [stopPlayback]);
|
|
11844
|
-
const awaitDoubleRaf = (0,
|
|
11855
|
+
const awaitDoubleRaf = (0, import_react40.useCallback)(() => {
|
|
11845
11856
|
return new Promise((resolve2) => {
|
|
11846
11857
|
requestAnimationFrame(() => {
|
|
11847
11858
|
requestAnimationFrame(() => resolve2());
|
|
11848
11859
|
});
|
|
11849
11860
|
});
|
|
11850
11861
|
}, []);
|
|
11851
|
-
const runTraceOnce = (0,
|
|
11862
|
+
const runTraceOnce = (0, import_react40.useCallback)(
|
|
11852
11863
|
async (trace, signal) => {
|
|
11853
11864
|
await awaitDoubleRaf();
|
|
11854
11865
|
if (signal.aborted) {
|
|
@@ -11901,7 +11912,7 @@ var ProcessModelTraceReplay = ({ graph, className }) => {
|
|
|
11901
11912
|
},
|
|
11902
11913
|
[addLog, awaitDoubleRaf, getLabel, getPath, speedMult]
|
|
11903
11914
|
);
|
|
11904
|
-
const startPlayback = (0,
|
|
11915
|
+
const startPlayback = (0, import_react40.useCallback)(async () => {
|
|
11905
11916
|
if (!graph.traces.length || playbackLoopLockRef.current) {
|
|
11906
11917
|
return;
|
|
11907
11918
|
}
|
|
@@ -11932,10 +11943,10 @@ var ProcessModelTraceReplay = ({ graph, className }) => {
|
|
|
11932
11943
|
setReplayParticle(null);
|
|
11933
11944
|
}
|
|
11934
11945
|
}, [graph.traces, runTraceOnce, speedMult, stopPlayback]);
|
|
11935
|
-
(0,
|
|
11946
|
+
(0, import_react40.useEffect)(() => {
|
|
11936
11947
|
resetReplay();
|
|
11937
11948
|
}, [graph, resetReplay]);
|
|
11938
|
-
(0,
|
|
11949
|
+
(0, import_react40.useEffect)(() => () => {
|
|
11939
11950
|
playbackRef.current?.abort();
|
|
11940
11951
|
}, []);
|
|
11941
11952
|
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { "data-name": "process-model-trace-replay", className: (0, import_clsx9.default)("process-model-trace-replay", className), children: [
|
|
@@ -12264,9 +12275,9 @@ function getProcessModelLibraryEntry(id) {
|
|
|
12264
12275
|
}
|
|
12265
12276
|
|
|
12266
12277
|
// src/components/form/FieldLayout.tsx
|
|
12267
|
-
var
|
|
12278
|
+
var import_react41 = require("react");
|
|
12268
12279
|
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
12269
|
-
var FormFieldLayout = (0,
|
|
12280
|
+
var FormFieldLayout = (0, import_react41.forwardRef)(function FormFieldLayout2({
|
|
12270
12281
|
children,
|
|
12271
12282
|
ids: idOverwrites = {},
|
|
12272
12283
|
required = false,
|
|
@@ -12281,8 +12292,8 @@ var FormFieldLayout = (0, import_react42.forwardRef)(function FormFieldLayout2({
|
|
|
12281
12292
|
showRequiredIndicator = true,
|
|
12282
12293
|
...props
|
|
12283
12294
|
}, ref) {
|
|
12284
|
-
const generatedId = (0,
|
|
12285
|
-
const ids = (0,
|
|
12295
|
+
const generatedId = (0, import_react41.useId)();
|
|
12296
|
+
const ids = (0, import_react41.useMemo)(() => ({
|
|
12286
12297
|
input: idOverwrites.input ?? `form-field-input-${generatedId}`,
|
|
12287
12298
|
error: idOverwrites.error ?? `form-field-error-${generatedId}`,
|
|
12288
12299
|
label: idOverwrites.label ?? `form-field-label-${generatedId}`,
|
|
@@ -12293,14 +12304,14 @@ var FormFieldLayout = (0, import_react42.forwardRef)(function FormFieldLayout2({
|
|
|
12293
12304
|
invalidDescription ? ids.error : void 0
|
|
12294
12305
|
].filter(Boolean).join(" ");
|
|
12295
12306
|
const invalid = !!invalidDescription;
|
|
12296
|
-
const inputAriaAttributes = (0,
|
|
12307
|
+
const inputAriaAttributes = (0, import_react41.useMemo)(() => ({
|
|
12297
12308
|
"aria-required": required,
|
|
12298
12309
|
"aria-describedby": describedBy,
|
|
12299
12310
|
"aria-labelledby": label ? ids.label : void 0,
|
|
12300
12311
|
"aria-invalid": invalid,
|
|
12301
12312
|
"aria-errormessage": invalid ? ids.error : void 0
|
|
12302
12313
|
}), [describedBy, ids.error, ids.label, invalid, label, required]);
|
|
12303
|
-
const state = (0,
|
|
12314
|
+
const state = (0, import_react41.useMemo)(() => ({
|
|
12304
12315
|
disabled,
|
|
12305
12316
|
invalid,
|
|
12306
12317
|
readOnly,
|
|
@@ -12359,47 +12370,47 @@ var FormFieldLayout = (0, import_react42.forwardRef)(function FormFieldLayout2({
|
|
|
12359
12370
|
});
|
|
12360
12371
|
|
|
12361
12372
|
// src/components/form/FormContext.tsx
|
|
12362
|
-
var
|
|
12373
|
+
var import_react42 = require("react");
|
|
12363
12374
|
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
12364
|
-
var FormContext = (0,
|
|
12375
|
+
var FormContext = (0, import_react42.createContext)(null);
|
|
12365
12376
|
var FormProvider = ({ children, state }) => {
|
|
12366
12377
|
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FormContext.Provider, { value: state, children });
|
|
12367
12378
|
};
|
|
12368
12379
|
function useForm() {
|
|
12369
|
-
const ctx = (0,
|
|
12380
|
+
const ctx = (0, import_react42.useContext)(FormContext);
|
|
12370
12381
|
if (!ctx) throw new Error("FormContext is only available inside a <Form>");
|
|
12371
12382
|
return ctx;
|
|
12372
12383
|
}
|
|
12373
12384
|
function useFormField(key, { triggerUpdate = true, validationBehaviour = "touched" }) {
|
|
12374
|
-
const context = (0,
|
|
12375
|
-
const subscribe = (0,
|
|
12385
|
+
const context = (0, import_react42.useContext)(FormContext);
|
|
12386
|
+
const subscribe = (0, import_react42.useCallback)((cb) => {
|
|
12376
12387
|
if (!context) return () => {
|
|
12377
12388
|
};
|
|
12378
12389
|
return context.store.subscribe(key, cb);
|
|
12379
12390
|
}, [context, key]);
|
|
12380
|
-
const subscribeAll = (0,
|
|
12391
|
+
const subscribeAll = (0, import_react42.useCallback)((cb) => {
|
|
12381
12392
|
if (!context) return () => {
|
|
12382
12393
|
};
|
|
12383
12394
|
return context.store.subscribe("ALL", cb);
|
|
12384
12395
|
}, [context]);
|
|
12385
|
-
const value = (0,
|
|
12396
|
+
const value = (0, import_react42.useSyncExternalStore)(
|
|
12386
12397
|
subscribe,
|
|
12387
12398
|
() => context ? context.store.getValue(key) : void 0
|
|
12388
12399
|
);
|
|
12389
|
-
const error = (0,
|
|
12400
|
+
const error = (0, import_react42.useSyncExternalStore)(
|
|
12390
12401
|
subscribe,
|
|
12391
12402
|
() => context ? context.store.getError(key) : void 0
|
|
12392
12403
|
);
|
|
12393
|
-
const touched = (0,
|
|
12404
|
+
const touched = (0, import_react42.useSyncExternalStore)(
|
|
12394
12405
|
subscribe,
|
|
12395
12406
|
() => context ? context.store.getTouched(key) : void 0
|
|
12396
12407
|
);
|
|
12397
|
-
const hasTriedSubmitting = (0,
|
|
12408
|
+
const hasTriedSubmitting = (0, import_react42.useSyncExternalStore)(
|
|
12398
12409
|
subscribeAll,
|
|
12399
12410
|
() => context ? context.store.getHasTriedSubmitting() : void 0
|
|
12400
12411
|
);
|
|
12401
12412
|
const isShowingErrors = validationBehaviour === "always" || validationBehaviour === "touched" && (touched ?? false) || validationBehaviour === "submit" && (hasTriedSubmitting ?? false);
|
|
12402
|
-
const getDataProps = (0,
|
|
12413
|
+
const getDataProps = (0, import_react42.useCallback)(() => {
|
|
12403
12414
|
return {
|
|
12404
12415
|
value,
|
|
12405
12416
|
onValueChange: (val) => context?.store.setValue(key, val),
|
|
@@ -12422,18 +12433,18 @@ function useFormField(key, { triggerUpdate = true, validationBehaviour = "touche
|
|
|
12422
12433
|
};
|
|
12423
12434
|
}
|
|
12424
12435
|
function useFormObserver({ formStore } = {}) {
|
|
12425
|
-
const context = (0,
|
|
12436
|
+
const context = (0, import_react42.useContext)(FormContext);
|
|
12426
12437
|
const store = formStore ?? context?.store;
|
|
12427
|
-
const subscribe = (0,
|
|
12438
|
+
const subscribe = (0, import_react42.useCallback)((cb) => {
|
|
12428
12439
|
if (!store) return () => {
|
|
12429
12440
|
};
|
|
12430
12441
|
return store.subscribe("ALL", cb);
|
|
12431
12442
|
}, [store]);
|
|
12432
|
-
const values = (0,
|
|
12433
|
-
const errors = (0,
|
|
12434
|
-
const touched = (0,
|
|
12435
|
-
const hasErrors = (0,
|
|
12436
|
-
const hasTriedSubmitting = (0,
|
|
12443
|
+
const values = (0, import_react42.useSyncExternalStore)(subscribe, () => store ? store.getAllValues() : void 0);
|
|
12444
|
+
const errors = (0, import_react42.useSyncExternalStore)(subscribe, () => store ? store.getErrors() : void 0);
|
|
12445
|
+
const touched = (0, import_react42.useSyncExternalStore)(subscribe, () => store ? store.getAllTouched() : void 0);
|
|
12446
|
+
const hasErrors = (0, import_react42.useSyncExternalStore)(subscribe, () => store ? store.getHasError() : void 0);
|
|
12447
|
+
const hasTriedSubmitting = (0, import_react42.useSyncExternalStore)(subscribe, () => store ? store.getHasTriedSubmitting() : void 0);
|
|
12437
12448
|
if (!store) return null;
|
|
12438
12449
|
return {
|
|
12439
12450
|
store,
|
|
@@ -12445,16 +12456,16 @@ function useFormObserver({ formStore } = {}) {
|
|
|
12445
12456
|
};
|
|
12446
12457
|
}
|
|
12447
12458
|
function useFormObserverKey({ formStore, formKey }) {
|
|
12448
|
-
const context = (0,
|
|
12459
|
+
const context = (0, import_react42.useContext)(FormContext);
|
|
12449
12460
|
const store = formStore ?? context?.store;
|
|
12450
|
-
const subscribe = (0,
|
|
12461
|
+
const subscribe = (0, import_react42.useCallback)((cb) => {
|
|
12451
12462
|
if (!store) return () => {
|
|
12452
12463
|
};
|
|
12453
12464
|
return store.subscribe(formKey, cb);
|
|
12454
12465
|
}, [store, formKey]);
|
|
12455
|
-
const value = (0,
|
|
12456
|
-
const error = (0,
|
|
12457
|
-
const touched = (0,
|
|
12466
|
+
const value = (0, import_react42.useSyncExternalStore)(subscribe, () => store ? store.getValue(formKey) : void 0);
|
|
12467
|
+
const error = (0, import_react42.useSyncExternalStore)(subscribe, () => store ? store.getError(formKey) : void 0);
|
|
12468
|
+
const touched = (0, import_react42.useSyncExternalStore)(subscribe, () => store ? store.getTouched(formKey) : void 0);
|
|
12458
12469
|
if (!store) return null;
|
|
12459
12470
|
return {
|
|
12460
12471
|
store,
|
|
@@ -12680,7 +12691,7 @@ var FormStore = class {
|
|
|
12680
12691
|
};
|
|
12681
12692
|
|
|
12682
12693
|
// src/components/form/useCreateForm.tsx
|
|
12683
|
-
var
|
|
12694
|
+
var import_react43 = require("react");
|
|
12684
12695
|
function useCreateForm({
|
|
12685
12696
|
onFormSubmit,
|
|
12686
12697
|
onFormError,
|
|
@@ -12698,23 +12709,23 @@ function useCreateForm({
|
|
|
12698
12709
|
const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
|
|
12699
12710
|
const onUpdateStable = useEventCallbackStabilizer(onUpdate);
|
|
12700
12711
|
const onValidUpdateStable = useEventCallbackStabilizer(onValidUpdate);
|
|
12701
|
-
const storeRef = (0,
|
|
12712
|
+
const storeRef = (0, import_react43.useRef)(
|
|
12702
12713
|
new FormStore({
|
|
12703
12714
|
initialValues,
|
|
12704
12715
|
hasTriedSubmitting,
|
|
12705
12716
|
validators
|
|
12706
12717
|
})
|
|
12707
12718
|
);
|
|
12708
|
-
(0,
|
|
12719
|
+
(0, import_react43.useEffect)(() => {
|
|
12709
12720
|
storeRef.current.changeValidators(validators);
|
|
12710
12721
|
}, [validators]);
|
|
12711
|
-
const fieldRefs = (0,
|
|
12712
|
-
const registerRef = (0,
|
|
12722
|
+
const fieldRefs = (0, import_react43.useRef)({});
|
|
12723
|
+
const registerRef = (0, import_react43.useCallback)((key) => {
|
|
12713
12724
|
return (el) => {
|
|
12714
12725
|
fieldRefs.current[key] = el;
|
|
12715
12726
|
};
|
|
12716
12727
|
}, []);
|
|
12717
|
-
(0,
|
|
12728
|
+
(0, import_react43.useEffect)(() => {
|
|
12718
12729
|
const handleUpdate = (event) => {
|
|
12719
12730
|
if (event.type === "onSubmit") {
|
|
12720
12731
|
if (event.hasErrors) {
|
|
@@ -12765,7 +12776,7 @@ function useCreateForm({
|
|
|
12765
12776
|
unsubscribe();
|
|
12766
12777
|
};
|
|
12767
12778
|
}, [onFormErrorStable, onFormSubmitStable, onUpdateStable, onValidUpdateStable, onValueChangeStable, scrollOptions, scrollToElements]);
|
|
12768
|
-
const callbacks = (0,
|
|
12779
|
+
const callbacks = (0, import_react43.useMemo)(() => ({
|
|
12769
12780
|
reset: () => storeRef.current.reset(),
|
|
12770
12781
|
submit: () => storeRef.current.submit(),
|
|
12771
12782
|
update: (updater, triggerUpdate = false) => {
|
|
@@ -12785,20 +12796,20 @@ function useCreateForm({
|
|
|
12785
12796
|
}
|
|
12786
12797
|
|
|
12787
12798
|
// src/components/layout/Carousel.tsx
|
|
12788
|
-
var
|
|
12799
|
+
var import_react50 = require("react");
|
|
12789
12800
|
var import_clsx10 = __toESM(require("clsx"));
|
|
12790
12801
|
var import_lucide_react7 = require("lucide-react");
|
|
12791
12802
|
|
|
12792
12803
|
// src/components/user-interaction/IconButton.tsx
|
|
12793
|
-
var
|
|
12804
|
+
var import_react49 = require("react");
|
|
12794
12805
|
|
|
12795
12806
|
// src/components/user-interaction/Tooltip.tsx
|
|
12807
|
+
var import_react45 = require("react");
|
|
12796
12808
|
var import_react46 = require("react");
|
|
12797
12809
|
var import_react47 = require("react");
|
|
12798
|
-
var import_react48 = require("react");
|
|
12799
12810
|
|
|
12800
12811
|
// src/hooks/useTransitionState.ts
|
|
12801
|
-
var
|
|
12812
|
+
var import_react44 = require("react");
|
|
12802
12813
|
var reducer = (state, action) => {
|
|
12803
12814
|
switch (action) {
|
|
12804
12815
|
case "open":
|
|
@@ -12824,18 +12835,18 @@ var useTransitionState = ({
|
|
|
12824
12835
|
ref,
|
|
12825
12836
|
timeout: initialTimeout = 1e3
|
|
12826
12837
|
}) => {
|
|
12827
|
-
const [state, dispatch] = (0,
|
|
12828
|
-
const timer = (0,
|
|
12829
|
-
const hasAnimation = (0,
|
|
12830
|
-
const [timeout] = (0,
|
|
12831
|
-
(0,
|
|
12838
|
+
const [state, dispatch] = (0, import_react44.useReducer)(reducer, initialState);
|
|
12839
|
+
const timer = (0, import_react44.useRef)(void 0);
|
|
12840
|
+
const hasAnimation = (0, import_react44.useRef)(false);
|
|
12841
|
+
const [timeout] = (0, import_react44.useState)(initialTimeout);
|
|
12842
|
+
(0, import_react44.useEffect)(() => {
|
|
12832
12843
|
if (isOpen && (state !== "opened" && state !== "opening")) {
|
|
12833
12844
|
dispatch("open");
|
|
12834
12845
|
} else if (!isOpen && (state !== "closed" && state !== "closing")) {
|
|
12835
12846
|
dispatch("close");
|
|
12836
12847
|
}
|
|
12837
12848
|
}, [isOpen, state]);
|
|
12838
|
-
(0,
|
|
12849
|
+
(0, import_react44.useEffect)(() => {
|
|
12839
12850
|
if (state === "opening" || state === "closing") {
|
|
12840
12851
|
if (timer.current) {
|
|
12841
12852
|
clearTimeout(timer.current);
|
|
@@ -12851,7 +12862,7 @@ var useTransitionState = ({
|
|
|
12851
12862
|
}
|
|
12852
12863
|
}
|
|
12853
12864
|
}, [state, timeout]);
|
|
12854
|
-
(0,
|
|
12865
|
+
(0, import_react44.useLayoutEffect)(() => {
|
|
12855
12866
|
if (state === "opening" || state === "closing") {
|
|
12856
12867
|
let element = ref?.current;
|
|
12857
12868
|
if (!element && ref) {
|
|
@@ -12873,14 +12884,14 @@ var useTransitionState = ({
|
|
|
12873
12884
|
}
|
|
12874
12885
|
}
|
|
12875
12886
|
}, [ref, state]);
|
|
12876
|
-
const onStart = (0,
|
|
12887
|
+
const onStart = (0, import_react44.useCallback)(() => {
|
|
12877
12888
|
hasAnimation.current = true;
|
|
12878
12889
|
}, []);
|
|
12879
|
-
const onEnd = (0,
|
|
12890
|
+
const onEnd = (0, import_react44.useCallback)(() => {
|
|
12880
12891
|
dispatch("finished");
|
|
12881
12892
|
hasAnimation.current = false;
|
|
12882
12893
|
}, []);
|
|
12883
|
-
(0,
|
|
12894
|
+
(0, import_react44.useEffect)(() => {
|
|
12884
12895
|
if (ref?.current && (state === "opening" || state === "closing")) {
|
|
12885
12896
|
const element = ref.current;
|
|
12886
12897
|
element.addEventListener("animationstart", onStart);
|
|
@@ -12904,11 +12915,11 @@ var useTransitionState = ({
|
|
|
12904
12915
|
};
|
|
12905
12916
|
|
|
12906
12917
|
// src/components/user-interaction/Tooltip.tsx
|
|
12907
|
-
var
|
|
12918
|
+
var import_react48 = require("react");
|
|
12908
12919
|
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
12909
|
-
var TooltipContext = (0,
|
|
12920
|
+
var TooltipContext = (0, import_react48.createContext)(null);
|
|
12910
12921
|
var useTooltip = () => {
|
|
12911
|
-
const context = (0,
|
|
12922
|
+
const context = (0, import_react45.useContext)(TooltipContext);
|
|
12912
12923
|
if (!context) {
|
|
12913
12924
|
throw new Error("useTooltip must be used within a TooltipContext.Provider or TooltipRoot");
|
|
12914
12925
|
}
|
|
@@ -12921,20 +12932,20 @@ var TooltipRoot = ({
|
|
|
12921
12932
|
appearDelay: appearOverwrite,
|
|
12922
12933
|
disabled = false
|
|
12923
12934
|
}) => {
|
|
12924
|
-
const generatedId = "tooltip-" + (0,
|
|
12925
|
-
const [tooltipId, setTooltipId] = (0,
|
|
12926
|
-
const [isShown, setIsShown] = (0,
|
|
12927
|
-
const timeoutRef = (0,
|
|
12935
|
+
const generatedId = "tooltip-" + (0, import_react46.useId)();
|
|
12936
|
+
const [tooltipId, setTooltipId] = (0, import_react47.useState)(generatedId);
|
|
12937
|
+
const [isShown, setIsShown] = (0, import_react47.useState)(isInitiallyShown);
|
|
12938
|
+
const timeoutRef = (0, import_react47.useRef)(void 0);
|
|
12928
12939
|
const { config } = useHightideConfig();
|
|
12929
|
-
const appearDelay = (0,
|
|
12940
|
+
const appearDelay = (0, import_react47.useMemo)(
|
|
12930
12941
|
() => appearOverwrite ?? config.tooltip.appearDelay,
|
|
12931
12942
|
[appearOverwrite, config.tooltip.appearDelay]
|
|
12932
12943
|
);
|
|
12933
|
-
const triggerRef = (0,
|
|
12934
|
-
(0,
|
|
12944
|
+
const triggerRef = (0, import_react47.useRef)(null);
|
|
12945
|
+
(0, import_react45.useEffect)(() => {
|
|
12935
12946
|
onIsShownChange?.(isShown);
|
|
12936
12947
|
}, [isShown, onIsShownChange]);
|
|
12937
|
-
const openWithDelay = (0,
|
|
12948
|
+
const openWithDelay = (0, import_react47.useCallback)(() => {
|
|
12938
12949
|
if (timeoutRef.current || isShown) return;
|
|
12939
12950
|
if (appearDelay < 0) {
|
|
12940
12951
|
setIsShown(true);
|
|
@@ -12945,14 +12956,14 @@ var TooltipRoot = ({
|
|
|
12945
12956
|
setIsShown(true);
|
|
12946
12957
|
}, appearDelay);
|
|
12947
12958
|
}, [appearDelay, isShown]);
|
|
12948
|
-
const close2 = (0,
|
|
12959
|
+
const close2 = (0, import_react47.useCallback)(() => {
|
|
12949
12960
|
if (timeoutRef.current) {
|
|
12950
12961
|
clearTimeout(timeoutRef.current);
|
|
12951
12962
|
timeoutRef.current = void 0;
|
|
12952
12963
|
}
|
|
12953
12964
|
setIsShown(false);
|
|
12954
12965
|
}, []);
|
|
12955
|
-
(0,
|
|
12966
|
+
(0, import_react45.useEffect)(() => {
|
|
12956
12967
|
if (!isShown) return;
|
|
12957
12968
|
const closeOnBlur = () => close2();
|
|
12958
12969
|
const closeOnScroll = () => close2();
|
|
@@ -12963,7 +12974,7 @@ var TooltipRoot = ({
|
|
|
12963
12974
|
window.removeEventListener("scroll", closeOnScroll, true);
|
|
12964
12975
|
};
|
|
12965
12976
|
}, [isShown, close2]);
|
|
12966
|
-
(0,
|
|
12977
|
+
(0, import_react45.useEffect)(() => {
|
|
12967
12978
|
if (disabled) {
|
|
12968
12979
|
setIsShown(false);
|
|
12969
12980
|
if (timeoutRef.current) {
|
|
@@ -12972,7 +12983,7 @@ var TooltipRoot = ({
|
|
|
12972
12983
|
}
|
|
12973
12984
|
}
|
|
12974
12985
|
}, [disabled]);
|
|
12975
|
-
const contextValue = (0,
|
|
12986
|
+
const contextValue = (0, import_react47.useMemo)(() => ({
|
|
12976
12987
|
tooltip: {
|
|
12977
12988
|
id: tooltipId,
|
|
12978
12989
|
setId: setTooltipId
|
|
@@ -12996,7 +13007,7 @@ var TooltipRoot = ({
|
|
|
12996
13007
|
}), [tooltipId, openWithDelay, close2, isShown, disabled]);
|
|
12997
13008
|
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipContext.Provider, { value: contextValue, children });
|
|
12998
13009
|
};
|
|
12999
|
-
var TooltipDisplay = (0,
|
|
13010
|
+
var TooltipDisplay = (0, import_react45.forwardRef)(function TooltipAnchoredFloatingContainer({
|
|
13000
13011
|
children,
|
|
13001
13012
|
alignment = "bottom",
|
|
13002
13013
|
disabled: disabledOverwrite,
|
|
@@ -13006,30 +13017,30 @@ var TooltipDisplay = (0, import_react46.forwardRef)(function TooltipAnchoredFloa
|
|
|
13006
13017
|
...props
|
|
13007
13018
|
}, forwardRef36) {
|
|
13008
13019
|
const { config } = useHightideConfig();
|
|
13009
|
-
const tooltipContext = (0,
|
|
13020
|
+
const tooltipContext = (0, import_react45.useContext)(TooltipContext);
|
|
13010
13021
|
const disabled = disabledOverwrite ?? tooltipContext?.disabled;
|
|
13011
13022
|
const isShown = isShownOverwrite ?? tooltipContext?.isShown;
|
|
13012
13023
|
const anchor = anchorOverwrite ?? tooltipContext?.trigger.ref;
|
|
13013
13024
|
const id = tooltipContext?.tooltip.id ?? props.id;
|
|
13014
|
-
(0,
|
|
13025
|
+
(0, import_react45.useEffect)(() => {
|
|
13015
13026
|
if (!tooltipContext || !props.id) return;
|
|
13016
13027
|
tooltipContext?.tooltip.setId(props.id);
|
|
13017
13028
|
}, [props.id, tooltipContext]);
|
|
13018
|
-
const isAnimated = (0,
|
|
13029
|
+
const isAnimated = (0, import_react47.useMemo)(
|
|
13019
13030
|
() => isAnimatedOverwrite ?? config.tooltip.isAnimated,
|
|
13020
13031
|
[isAnimatedOverwrite, config.tooltip.isAnimated]
|
|
13021
13032
|
);
|
|
13022
|
-
const container = (0,
|
|
13023
|
-
(0,
|
|
13033
|
+
const container = (0, import_react47.useRef)(null);
|
|
13034
|
+
(0, import_react45.useImperativeHandle)(forwardRef36, () => container.current);
|
|
13024
13035
|
const isActive = !disabled && isShown;
|
|
13025
13036
|
const { isVisible, transitionState } = useTransitionState(
|
|
13026
|
-
(0,
|
|
13037
|
+
(0, import_react47.useMemo)(() => ({ isOpen: isShown, ref: container }), [isShown])
|
|
13027
13038
|
);
|
|
13028
|
-
const verticalAlignment = (0,
|
|
13039
|
+
const verticalAlignment = (0, import_react47.useMemo)(
|
|
13029
13040
|
() => alignment === "top" ? "beforeStart" : alignment === "bottom" ? "afterEnd" : "center",
|
|
13030
13041
|
[alignment]
|
|
13031
13042
|
);
|
|
13032
|
-
const horizontalAlignment = (0,
|
|
13043
|
+
const horizontalAlignment = (0, import_react47.useMemo)(
|
|
13033
13044
|
() => alignment === "left" ? "beforeStart" : alignment === "right" ? "afterEnd" : "center",
|
|
13034
13045
|
[alignment]
|
|
13035
13046
|
);
|
|
@@ -13117,7 +13128,7 @@ var Tooltip = ({
|
|
|
13117
13128
|
|
|
13118
13129
|
// src/components/user-interaction/IconButton.tsx
|
|
13119
13130
|
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
13120
|
-
var IconButtonBase = (0,
|
|
13131
|
+
var IconButtonBase = (0, import_react49.forwardRef)(function IconButtonBase2({
|
|
13121
13132
|
children,
|
|
13122
13133
|
size = "md",
|
|
13123
13134
|
color = "primary",
|
|
@@ -13144,14 +13155,14 @@ var IconButtonBase = (0, import_react50.forwardRef)(function IconButtonBase2({
|
|
|
13144
13155
|
}
|
|
13145
13156
|
);
|
|
13146
13157
|
});
|
|
13147
|
-
var IconButtonTooltipTrigger = (0,
|
|
13158
|
+
var IconButtonTooltipTrigger = (0, import_react49.forwardRef)(function IconButtonTooltipTrigger2({
|
|
13148
13159
|
disabled,
|
|
13149
13160
|
...props
|
|
13150
13161
|
}, ref) {
|
|
13151
13162
|
const { trigger: { ref: triggerRef, props: tooltipTriggerProps } } = useTooltip();
|
|
13152
|
-
const innerRef = (0,
|
|
13153
|
-
(0,
|
|
13154
|
-
(0,
|
|
13163
|
+
const innerRef = (0, import_react49.useRef)(null);
|
|
13164
|
+
(0, import_react49.useImperativeHandle)(ref, () => innerRef.current);
|
|
13165
|
+
(0, import_react49.useImperativeHandle)(triggerRef, () => innerRef.current);
|
|
13155
13166
|
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
13156
13167
|
IconButtonBase,
|
|
13157
13168
|
{
|
|
@@ -13200,7 +13211,7 @@ var IconButtonTooltipTrigger = (0, import_react50.forwardRef)(function IconButto
|
|
|
13200
13211
|
}
|
|
13201
13212
|
);
|
|
13202
13213
|
});
|
|
13203
|
-
var IconButton = (0,
|
|
13214
|
+
var IconButton = (0, import_react49.forwardRef)(function IconButton2({
|
|
13204
13215
|
tooltip,
|
|
13205
13216
|
tooltipProps,
|
|
13206
13217
|
"aria-label": ariaLabel,
|
|
@@ -13236,9 +13247,9 @@ var IconButton = (0, import_react50.forwardRef)(function IconButton2({
|
|
|
13236
13247
|
|
|
13237
13248
|
// src/components/layout/Carousel.tsx
|
|
13238
13249
|
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
13239
|
-
var CarouselContext = (0,
|
|
13250
|
+
var CarouselContext = (0, import_react50.createContext)(null);
|
|
13240
13251
|
var useCarouselContext = () => {
|
|
13241
|
-
const context = (0,
|
|
13252
|
+
const context = (0, import_react50.useContext)(CarouselContext);
|
|
13242
13253
|
if (!context) {
|
|
13243
13254
|
console.error("useCarouselContext must be used within CarouselContext");
|
|
13244
13255
|
}
|
|
@@ -13249,7 +13260,7 @@ function CarouselTabs({
|
|
|
13249
13260
|
}) {
|
|
13250
13261
|
const translation = useHightideTranslation();
|
|
13251
13262
|
const { id, slideCount, currentIndex, isLooping } = useCarouselContext();
|
|
13252
|
-
const tabRefs = (0,
|
|
13263
|
+
const tabRefs = (0, import_react50.useRef)([]);
|
|
13253
13264
|
const handleKeyDown = (event, index) => {
|
|
13254
13265
|
let newIndex = index;
|
|
13255
13266
|
if (event.key === "ArrowRight") {
|
|
@@ -13302,7 +13313,7 @@ function CarouselTabs({
|
|
|
13302
13313
|
}
|
|
13303
13314
|
);
|
|
13304
13315
|
}
|
|
13305
|
-
var CarouselSlide = (0,
|
|
13316
|
+
var CarouselSlide = (0, import_react50.forwardRef)(
|
|
13306
13317
|
function CarouselSlide2({
|
|
13307
13318
|
index,
|
|
13308
13319
|
isSelected,
|
|
@@ -13348,17 +13359,17 @@ var Carousel = ({
|
|
|
13348
13359
|
}) => {
|
|
13349
13360
|
const translation = useHightideTranslation();
|
|
13350
13361
|
const onSlideChangedStable = useEventCallbackStabilizer(onSlideChanged);
|
|
13351
|
-
const slideRefs = (0,
|
|
13352
|
-
const [currentIndex, setCurrentIndex] = (0,
|
|
13353
|
-
const [hasFocus, setHasFocus] = (0,
|
|
13354
|
-
const [dragState, setDragState] = (0,
|
|
13362
|
+
const slideRefs = (0, import_react50.useRef)([]);
|
|
13363
|
+
const [currentIndex, setCurrentIndex] = (0, import_react50.useState)(0);
|
|
13364
|
+
const [hasFocus, setHasFocus] = (0, import_react50.useState)(false);
|
|
13365
|
+
const [dragState, setDragState] = (0, import_react50.useState)();
|
|
13355
13366
|
const isPaused = hasFocus;
|
|
13356
|
-
const carouselContainerRef = (0,
|
|
13357
|
-
const [disableClick, setDisableClick] = (0,
|
|
13358
|
-
const timeOut = (0,
|
|
13359
|
-
const length = (0,
|
|
13367
|
+
const carouselContainerRef = (0, import_react50.useRef)(null);
|
|
13368
|
+
const [disableClick, setDisableClick] = (0, import_react50.useState)(false);
|
|
13369
|
+
const timeOut = (0, import_react50.useRef)(void 0);
|
|
13370
|
+
const length = (0, import_react50.useMemo)(() => children.length, [children]);
|
|
13360
13371
|
const paddingItemCount = 3;
|
|
13361
|
-
const generatedId = "carousel" + (0,
|
|
13372
|
+
const generatedId = "carousel" + (0, import_react50.useId)();
|
|
13362
13373
|
const id = props.id ?? generatedId;
|
|
13363
13374
|
if (isAutoPlaying && !isLooping) {
|
|
13364
13375
|
console.error("When isAutoLooping is true, isLooping should also be true");
|
|
@@ -13367,7 +13378,7 @@ var Carousel = ({
|
|
|
13367
13378
|
autoLoopingTimeOut = Math.max(0, autoLoopingTimeOut);
|
|
13368
13379
|
animationTime = Math.max(100, animationTime);
|
|
13369
13380
|
autoLoopAnimationTime = Math.max(200, autoLoopAnimationTime);
|
|
13370
|
-
(0,
|
|
13381
|
+
(0, import_react50.useEffect)(() => {
|
|
13371
13382
|
const carousel = carouselContainerRef.current;
|
|
13372
13383
|
if (carousel) {
|
|
13373
13384
|
let onFocus = function() {
|
|
@@ -13390,7 +13401,7 @@ var Carousel = ({
|
|
|
13390
13401
|
const canGoLeft = () => {
|
|
13391
13402
|
return isLooping || currentIndex !== 0;
|
|
13392
13403
|
};
|
|
13393
|
-
const canGoRight = (0,
|
|
13404
|
+
const canGoRight = (0, import_react50.useCallback)(() => {
|
|
13394
13405
|
return isLooping || currentIndex !== length - 1;
|
|
13395
13406
|
}, [currentIndex, isLooping, length]);
|
|
13396
13407
|
const left = () => {
|
|
@@ -13398,12 +13409,12 @@ var Carousel = ({
|
|
|
13398
13409
|
setCurrentIndex((currentIndex + length - 1) % length);
|
|
13399
13410
|
}
|
|
13400
13411
|
};
|
|
13401
|
-
const right = (0,
|
|
13412
|
+
const right = (0, import_react50.useCallback)(() => {
|
|
13402
13413
|
if (canGoRight()) {
|
|
13403
13414
|
setCurrentIndex((currentIndex + length + 1) % length);
|
|
13404
13415
|
}
|
|
13405
13416
|
}, [canGoRight, currentIndex, length]);
|
|
13406
|
-
(0,
|
|
13417
|
+
(0, import_react50.useEffect)(() => {
|
|
13407
13418
|
if (!timeOut.current && !isPaused) {
|
|
13408
13419
|
if (autoLoopingTimeOut > 0) {
|
|
13409
13420
|
timeOut.current = setTimeout(() => {
|
|
@@ -13455,10 +13466,10 @@ var Carousel = ({
|
|
|
13455
13466
|
}
|
|
13456
13467
|
setDragState(void 0);
|
|
13457
13468
|
};
|
|
13458
|
-
(0,
|
|
13469
|
+
(0, import_react50.useEffect)(() => {
|
|
13459
13470
|
setDisableClick(!dragState);
|
|
13460
13471
|
}, [dragState]);
|
|
13461
|
-
(0,
|
|
13472
|
+
(0, import_react50.useEffect)(() => {
|
|
13462
13473
|
onSlideChangedStable(currentIndex);
|
|
13463
13474
|
}, [currentIndex, onSlideChangedStable]);
|
|
13464
13475
|
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CarouselContext.Provider, { value: { id, currentIndex, slideCount: length, isLooping }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
@@ -13594,20 +13605,20 @@ var DividerInserter = ({
|
|
|
13594
13605
|
};
|
|
13595
13606
|
|
|
13596
13607
|
// src/components/layout/Expandable.tsx
|
|
13608
|
+
var import_react51 = require("react");
|
|
13597
13609
|
var import_react52 = require("react");
|
|
13598
13610
|
var import_react53 = require("react");
|
|
13599
|
-
var import_react54 = require("react");
|
|
13600
13611
|
var import_clsx11 = __toESM(require("clsx"));
|
|
13601
13612
|
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
13602
|
-
var ExpandableContext = (0,
|
|
13613
|
+
var ExpandableContext = (0, import_react53.createContext)(null);
|
|
13603
13614
|
function useExpandableContext() {
|
|
13604
|
-
const context = (0,
|
|
13615
|
+
const context = (0, import_react53.useContext)(ExpandableContext);
|
|
13605
13616
|
if (!context) {
|
|
13606
13617
|
throw new Error("Expandable components must be used within an ExpandableRoot");
|
|
13607
13618
|
}
|
|
13608
13619
|
return context;
|
|
13609
13620
|
}
|
|
13610
|
-
var ExpandableRoot = (0,
|
|
13621
|
+
var ExpandableRoot = (0, import_react53.forwardRef)(function ExpandableRoot2({
|
|
13611
13622
|
children,
|
|
13612
13623
|
id: providedId,
|
|
13613
13624
|
isExpanded: controlledExpanded,
|
|
@@ -13617,8 +13628,8 @@ var ExpandableRoot = (0, import_react54.forwardRef)(function ExpandableRoot2({
|
|
|
13617
13628
|
allowContainerToggle = false,
|
|
13618
13629
|
...props
|
|
13619
13630
|
}, ref) {
|
|
13620
|
-
const generatedId = (0,
|
|
13621
|
-
const [ids, setIds] = (0,
|
|
13631
|
+
const generatedId = (0, import_react53.useId)();
|
|
13632
|
+
const [ids, setIds] = (0, import_react52.useState)({
|
|
13622
13633
|
root: providedId ?? `expandable-${generatedId}-root`,
|
|
13623
13634
|
header: `expandable-${generatedId}-header`,
|
|
13624
13635
|
content: `expandable-${generatedId}-content`
|
|
@@ -13628,12 +13639,12 @@ var ExpandableRoot = (0, import_react54.forwardRef)(function ExpandableRoot2({
|
|
|
13628
13639
|
onValueChange: onExpandedChange,
|
|
13629
13640
|
defaultValue: isInitialExpanded
|
|
13630
13641
|
});
|
|
13631
|
-
const toggle = (0,
|
|
13642
|
+
const toggle = (0, import_react53.useCallback)(() => {
|
|
13632
13643
|
if (!disabled) {
|
|
13633
13644
|
setIsExpanded(!isExpanded);
|
|
13634
13645
|
}
|
|
13635
13646
|
}, [disabled, isExpanded, setIsExpanded]);
|
|
13636
|
-
const contextValue = (0,
|
|
13647
|
+
const contextValue = (0, import_react53.useMemo)(() => ({
|
|
13637
13648
|
isExpanded,
|
|
13638
13649
|
toggle,
|
|
13639
13650
|
setIsExpanded,
|
|
@@ -13661,13 +13672,13 @@ var ExpandableRoot = (0, import_react54.forwardRef)(function ExpandableRoot2({
|
|
|
13661
13672
|
}
|
|
13662
13673
|
) });
|
|
13663
13674
|
});
|
|
13664
|
-
var ExpandableHeader = (0,
|
|
13675
|
+
var ExpandableHeader = (0, import_react53.forwardRef)(function ExpandableHeader2({
|
|
13665
13676
|
children,
|
|
13666
13677
|
isUsingDefaultIcon = true,
|
|
13667
13678
|
...props
|
|
13668
13679
|
}, ref) {
|
|
13669
13680
|
const { isExpanded, toggle, ids, setIds, disabled } = useExpandableContext();
|
|
13670
|
-
(0,
|
|
13681
|
+
(0, import_react51.useEffect)(() => {
|
|
13671
13682
|
if (props.id) {
|
|
13672
13683
|
setIds((prevState) => ({ ...prevState, header: props.id }));
|
|
13673
13684
|
}
|
|
@@ -13696,15 +13707,15 @@ var ExpandableHeader = (0, import_react54.forwardRef)(function ExpandableHeader2
|
|
|
13696
13707
|
}
|
|
13697
13708
|
);
|
|
13698
13709
|
});
|
|
13699
|
-
var ExpandableContent = (0,
|
|
13710
|
+
var ExpandableContent = (0, import_react53.forwardRef)(function ExpandableContent2({
|
|
13700
13711
|
children,
|
|
13701
13712
|
forceMount = false,
|
|
13702
13713
|
...props
|
|
13703
13714
|
}, forwardedRef) {
|
|
13704
13715
|
const { isExpanded, ids, setIds } = useExpandableContext();
|
|
13705
|
-
const ref = (0,
|
|
13706
|
-
(0,
|
|
13707
|
-
(0,
|
|
13716
|
+
const ref = (0, import_react51.useRef)(null);
|
|
13717
|
+
(0, import_react51.useImperativeHandle)(forwardedRef, () => ref.current, [ref]);
|
|
13718
|
+
(0, import_react51.useEffect)(() => {
|
|
13708
13719
|
if (props.id) {
|
|
13709
13720
|
setIds((prevState) => ({ ...prevState, content: props.id }));
|
|
13710
13721
|
}
|
|
@@ -13723,7 +13734,7 @@ var ExpandableContent = (0, import_react54.forwardRef)(function ExpandableConten
|
|
|
13723
13734
|
}
|
|
13724
13735
|
);
|
|
13725
13736
|
});
|
|
13726
|
-
var Expandable = (0,
|
|
13737
|
+
var Expandable = (0, import_react53.forwardRef)(function Expandable2({
|
|
13727
13738
|
children,
|
|
13728
13739
|
trigger,
|
|
13729
13740
|
triggerProps,
|
|
@@ -13762,7 +13773,7 @@ var FAQSection = ({
|
|
|
13762
13773
|
};
|
|
13763
13774
|
|
|
13764
13775
|
// src/components/layout/InifiniteScroll.tsx
|
|
13765
|
-
var
|
|
13776
|
+
var import_react54 = require("react");
|
|
13766
13777
|
var import_clsx12 = __toESM(require("clsx"));
|
|
13767
13778
|
var import_lucide_react8 = require("lucide-react");
|
|
13768
13779
|
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
@@ -13782,10 +13793,10 @@ function InfiniteScroll({
|
|
|
13782
13793
|
if (itemCount < 1) {
|
|
13783
13794
|
throw new Error("InfiniteScroll: itemCount > 0 must hold");
|
|
13784
13795
|
}
|
|
13785
|
-
const items = (0,
|
|
13786
|
-
const containerRef = (0,
|
|
13787
|
-
const snapshotRef = (0,
|
|
13788
|
-
const [windowState, setWindowState] = (0,
|
|
13796
|
+
const items = (0, import_react54.useMemo)(() => range(itemCount), [itemCount]);
|
|
13797
|
+
const containerRef = (0, import_react54.useRef)(null);
|
|
13798
|
+
const snapshotRef = (0, import_react54.useRef)({ scrollHeight: 0, scrollTop: 0, fromTop: false });
|
|
13799
|
+
const [windowState, setWindowState] = (0, import_react54.useState)(() => {
|
|
13789
13800
|
let index = initialIndex;
|
|
13790
13801
|
if (index < 0) {
|
|
13791
13802
|
index = 0;
|
|
@@ -13797,14 +13808,14 @@ function InfiniteScroll({
|
|
|
13797
13808
|
end: Math.min(items.length, safeStart + bufferSize)
|
|
13798
13809
|
};
|
|
13799
13810
|
});
|
|
13800
|
-
const addToStart = (0,
|
|
13811
|
+
const addToStart = (0, import_react54.useCallback)((amount = stepSize) => {
|
|
13801
13812
|
setWindowState((prev) => {
|
|
13802
13813
|
const newStart = Math.max(0, prev.start - amount);
|
|
13803
13814
|
const newEnd = Math.min(items.length, newStart + bufferSize);
|
|
13804
13815
|
return { start: newStart, end: newEnd };
|
|
13805
13816
|
});
|
|
13806
13817
|
}, [bufferSize, items.length, stepSize]);
|
|
13807
|
-
const addToEnd = (0,
|
|
13818
|
+
const addToEnd = (0, import_react54.useCallback)((amount = stepSize) => {
|
|
13808
13819
|
setWindowState((prev) => {
|
|
13809
13820
|
const newEnd = Math.min(items.length, prev.end + amount);
|
|
13810
13821
|
const newStart = Math.max(0, newEnd - bufferSize);
|
|
@@ -13821,7 +13832,7 @@ function InfiniteScroll({
|
|
|
13821
13832
|
addToEnd();
|
|
13822
13833
|
}
|
|
13823
13834
|
};
|
|
13824
|
-
(0,
|
|
13835
|
+
(0, import_react54.useLayoutEffect)(() => {
|
|
13825
13836
|
const container = containerRef.current;
|
|
13826
13837
|
if (!container || !snapshotRef.current.fromTop) return;
|
|
13827
13838
|
const heightDifference = container.scrollHeight - snapshotRef.current.scrollHeight;
|
|
@@ -13830,7 +13841,7 @@ function InfiniteScroll({
|
|
|
13830
13841
|
}
|
|
13831
13842
|
snapshotRef.current.fromTop = false;
|
|
13832
13843
|
}, [windowState]);
|
|
13833
|
-
const visibleItems = (0,
|
|
13844
|
+
const visibleItems = (0, import_react54.useMemo)(
|
|
13834
13845
|
() => items.slice(windowState.start, windowState.end),
|
|
13835
13846
|
[items, windowState]
|
|
13836
13847
|
);
|
|
@@ -14083,8 +14094,8 @@ var MarkdownInterpreter = ({ text, className }) => {
|
|
|
14083
14094
|
};
|
|
14084
14095
|
|
|
14085
14096
|
// src/components/layout/TabSwitcher.tsx
|
|
14097
|
+
var import_react55 = require("react");
|
|
14086
14098
|
var import_react56 = require("react");
|
|
14087
|
-
var import_react57 = require("react");
|
|
14088
14099
|
var import_clsx13 = __toESM(require("clsx"));
|
|
14089
14100
|
var import_react_dom2 = require("react-dom");
|
|
14090
14101
|
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
@@ -14098,9 +14109,9 @@ function sortByDomOrder(infos) {
|
|
|
14098
14109
|
return elA.compareDocumentPosition(elB) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
|
|
14099
14110
|
});
|
|
14100
14111
|
}
|
|
14101
|
-
var TabContext = (0,
|
|
14112
|
+
var TabContext = (0, import_react56.createContext)(null);
|
|
14102
14113
|
function useTabContext() {
|
|
14103
|
-
const context = (0,
|
|
14114
|
+
const context = (0, import_react56.useContext)(TabContext);
|
|
14104
14115
|
if (!context) throw new Error("useTabContext must be used inside a <TabView>");
|
|
14105
14116
|
return context;
|
|
14106
14117
|
}
|
|
@@ -14110,9 +14121,9 @@ function TabSwitcher({ children, activeId: controlledActiveId, onActiveIdChange,
|
|
|
14110
14121
|
defaultValue: initialActiveId ?? null,
|
|
14111
14122
|
onValueChange: onActiveIdChange
|
|
14112
14123
|
});
|
|
14113
|
-
const [tabInfos, setTabInfos] = (0,
|
|
14114
|
-
const [portalState, setPortalState] = (0,
|
|
14115
|
-
const subscribe = (0,
|
|
14124
|
+
const [tabInfos, setTabInfos] = (0, import_react55.useState)([]);
|
|
14125
|
+
const [portalState, setPortalState] = (0, import_react55.useState)(null);
|
|
14126
|
+
const subscribe = (0, import_react55.useCallback)((info) => {
|
|
14116
14127
|
const id = info.id;
|
|
14117
14128
|
setTabInfos((prevState) => {
|
|
14118
14129
|
const existingIndex = prevState.findIndex((t) => t.id === id);
|
|
@@ -14125,7 +14136,7 @@ function TabSwitcher({ children, activeId: controlledActiveId, onActiveIdChange,
|
|
|
14125
14136
|
});
|
|
14126
14137
|
};
|
|
14127
14138
|
}, []);
|
|
14128
|
-
(0,
|
|
14139
|
+
(0, import_react56.useEffect)(() => {
|
|
14129
14140
|
const active = tabInfos.find((value) => value.id === activeId);
|
|
14130
14141
|
if (!active || !active.disabled) return;
|
|
14131
14142
|
const firstEnabled = tabInfos.find((value) => !value.disabled);
|
|
@@ -14135,10 +14146,10 @@ function TabSwitcher({ children, activeId: controlledActiveId, onActiveIdChange,
|
|
|
14135
14146
|
setActiveId(null);
|
|
14136
14147
|
}
|
|
14137
14148
|
}, [activeId, setActiveId, tabInfos]);
|
|
14138
|
-
const registerPortal = (0,
|
|
14149
|
+
const registerPortal = (0, import_react55.useCallback)((state) => {
|
|
14139
14150
|
setPortalState(state);
|
|
14140
14151
|
}, []);
|
|
14141
|
-
const changeActiveId = (0,
|
|
14152
|
+
const changeActiveId = (0, import_react55.useCallback)((activeId2) => {
|
|
14142
14153
|
const info = tabInfos.find((value) => value.id === activeId2);
|
|
14143
14154
|
if (info && info.disabled) return;
|
|
14144
14155
|
setActiveId(activeId2);
|
|
@@ -14173,7 +14184,7 @@ function TabSwitcher({ children, activeId: controlledActiveId, onActiveIdChange,
|
|
|
14173
14184
|
function TabList({ ...props }) {
|
|
14174
14185
|
const { tabs } = useTabContext();
|
|
14175
14186
|
const { infos, activeId, setActiveId: setActive } = tabs;
|
|
14176
|
-
const refs = (0,
|
|
14187
|
+
const refs = (0, import_react56.useRef)({});
|
|
14177
14188
|
const onKeyDown = (e) => {
|
|
14178
14189
|
const idx = infos.findIndex((tab) => tab.id === activeId);
|
|
14179
14190
|
if (idx === -1) return;
|
|
@@ -14226,12 +14237,12 @@ function TabList({ ...props }) {
|
|
|
14226
14237
|
);
|
|
14227
14238
|
}
|
|
14228
14239
|
function TabView({ ...props }) {
|
|
14229
|
-
const generated = (0,
|
|
14240
|
+
const generated = (0, import_react55.useId)();
|
|
14230
14241
|
const id = props.id ?? "tab-view-" + generated;
|
|
14231
14242
|
const { portal } = useTabContext();
|
|
14232
14243
|
const { setPortal } = portal;
|
|
14233
|
-
const ref = (0,
|
|
14234
|
-
(0,
|
|
14244
|
+
const ref = (0, import_react56.useRef)(null);
|
|
14245
|
+
(0, import_react56.useEffect)(() => {
|
|
14235
14246
|
setPortal({ id, ref });
|
|
14236
14247
|
return () => setPortal(null);
|
|
14237
14248
|
}, [id, setPortal]);
|
|
@@ -14248,15 +14259,15 @@ function TabView({ ...props }) {
|
|
|
14248
14259
|
function TabPanel({ label, forceMount = false, disabled = false, initiallyActive = false, ...props }) {
|
|
14249
14260
|
const { tabs, portal } = useTabContext();
|
|
14250
14261
|
const { subscribe, activeId, setActiveId } = tabs;
|
|
14251
|
-
const generatedId = (0,
|
|
14262
|
+
const generatedId = (0, import_react55.useId)();
|
|
14252
14263
|
const id = props.id ?? "tab-panel-" + generatedId;
|
|
14253
14264
|
const labelId = "tab-list-button-" + generatedId;
|
|
14254
|
-
const ref = (0,
|
|
14255
|
-
(0,
|
|
14265
|
+
const ref = (0, import_react56.useRef)(null);
|
|
14266
|
+
(0, import_react56.useEffect)(() => {
|
|
14256
14267
|
return subscribe({ id, label, labelId, disabled, ref });
|
|
14257
14268
|
}, [id, label, labelId, disabled, subscribe]);
|
|
14258
|
-
const [hasAnnouncedIntialliyActive, setHasAnnouncedIntialliyActive] = (0,
|
|
14259
|
-
(0,
|
|
14269
|
+
const [hasAnnouncedIntialliyActive, setHasAnnouncedIntialliyActive] = (0, import_react55.useState)(false);
|
|
14270
|
+
(0, import_react56.useEffect)(() => {
|
|
14260
14271
|
if (!hasAnnouncedIntialliyActive) {
|
|
14261
14272
|
if (initiallyActive) {
|
|
14262
14273
|
setActiveId(id);
|
|
@@ -14398,14 +14409,14 @@ var VerticalDivider = ({
|
|
|
14398
14409
|
|
|
14399
14410
|
// src/components/layout/app/AppPage.tsx
|
|
14400
14411
|
var import_clsx15 = __toESM(require("clsx"));
|
|
14401
|
-
var
|
|
14412
|
+
var import_react60 = require("react");
|
|
14402
14413
|
var import_lucide_react10 = require("lucide-react");
|
|
14403
14414
|
|
|
14404
14415
|
// src/components/layout/navigation/navigation-menus/NavigationContext.tsx
|
|
14405
|
-
var
|
|
14416
|
+
var import_react58 = require("react");
|
|
14406
14417
|
|
|
14407
14418
|
// src/hooks/useTreeNavigation.ts
|
|
14408
|
-
var
|
|
14419
|
+
var import_react57 = require("react");
|
|
14409
14420
|
function buildTreeIndex(nodes) {
|
|
14410
14421
|
const byId = /* @__PURE__ */ new Map();
|
|
14411
14422
|
const walk = (nodeList, parentId, parentPath) => {
|
|
@@ -14489,32 +14500,32 @@ function useTreeNavigation({
|
|
|
14489
14500
|
initialActiveId,
|
|
14490
14501
|
onlyOneExpandedTree = false
|
|
14491
14502
|
}) {
|
|
14492
|
-
const index = (0,
|
|
14503
|
+
const index = (0, import_react57.useMemo)(() => buildTreeIndex(nodes), [nodes]);
|
|
14493
14504
|
const [activeId, setActiveId] = useControlledState({
|
|
14494
14505
|
value: controlledActiveId,
|
|
14495
14506
|
onValueChange: onActiveIdChange,
|
|
14496
14507
|
defaultValue: initialActiveId ?? null
|
|
14497
14508
|
});
|
|
14498
|
-
const resolvedActiveId = (0,
|
|
14509
|
+
const resolvedActiveId = (0, import_react57.useMemo)(() => {
|
|
14499
14510
|
if (activeId == null) return null;
|
|
14500
14511
|
if (index.byId.has(activeId)) return activeId;
|
|
14501
14512
|
return null;
|
|
14502
14513
|
}, [activeId, index]);
|
|
14503
|
-
const [expandedIds, setExpandedIds] = (0,
|
|
14504
|
-
(0,
|
|
14514
|
+
const [expandedIds, setExpandedIds] = (0, import_react57.useState)(() => /* @__PURE__ */ new Set());
|
|
14515
|
+
(0, import_react57.useEffect)(() => {
|
|
14505
14516
|
if (resolvedActiveId == null) return;
|
|
14506
14517
|
const entry = index.byId.get(resolvedActiveId);
|
|
14507
14518
|
if (entry == null) return;
|
|
14508
14519
|
setExpandedIds((prev) => syncExpansionForActive(prev, entry.path, onlyOneExpandedTree, index));
|
|
14509
14520
|
}, [resolvedActiveId, onlyOneExpandedTree, index]);
|
|
14510
|
-
const items = (0,
|
|
14521
|
+
const items = (0, import_react57.useMemo)(() => {
|
|
14511
14522
|
return flattenVisibleItems(nodes, expandedIds);
|
|
14512
14523
|
}, [nodes, expandedIds]);
|
|
14513
|
-
const activeItem = (0,
|
|
14524
|
+
const activeItem = (0, import_react57.useMemo)(() => {
|
|
14514
14525
|
if (resolvedActiveId == null) return null;
|
|
14515
14526
|
return items.find((item) => item.id === resolvedActiveId) ?? null;
|
|
14516
14527
|
}, [items, resolvedActiveId]);
|
|
14517
|
-
const navigateTo = (0,
|
|
14528
|
+
const navigateTo = (0, import_react57.useCallback)((id) => {
|
|
14518
14529
|
const entry = index.byId.get(id);
|
|
14519
14530
|
if (entry == null) {
|
|
14520
14531
|
console.warn(`Attempted to navigate to node ${id} that does not exist`);
|
|
@@ -14526,7 +14537,7 @@ function useTreeNavigation({
|
|
|
14526
14537
|
return next2;
|
|
14527
14538
|
});
|
|
14528
14539
|
}, [index, onlyOneExpandedTree, setActiveId]);
|
|
14529
|
-
const expand = (0,
|
|
14540
|
+
const expand = (0, import_react57.useCallback)((id, options) => {
|
|
14530
14541
|
const entry = index.byId.get(id);
|
|
14531
14542
|
if (entry == null || entry.node.items.length === 0) return;
|
|
14532
14543
|
if (options?.isFocusing) {
|
|
@@ -14539,7 +14550,7 @@ function useTreeNavigation({
|
|
|
14539
14550
|
return pruneExpandedIds(next2, activePath, onlyOneExpandedTree, index);
|
|
14540
14551
|
});
|
|
14541
14552
|
}, [index, onlyOneExpandedTree, resolvedActiveId, setActiveId]);
|
|
14542
|
-
const collapse = (0,
|
|
14553
|
+
const collapse = (0, import_react57.useCallback)((id, options) => {
|
|
14543
14554
|
if (!options?.isFocusing && resolvedActiveId != null) {
|
|
14544
14555
|
const activeEntry = index.byId.get(resolvedActiveId);
|
|
14545
14556
|
if (activeEntry != null && isAncestorOf(id, activeEntry.path)) return;
|
|
@@ -14557,7 +14568,7 @@ function useTreeNavigation({
|
|
|
14557
14568
|
return next2;
|
|
14558
14569
|
});
|
|
14559
14570
|
}, [index, resolvedActiveId, setActiveId]);
|
|
14560
|
-
const toggleExpansion = (0,
|
|
14571
|
+
const toggleExpansion = (0, import_react57.useCallback)((id, options) => {
|
|
14561
14572
|
const entry = index.byId.get(id);
|
|
14562
14573
|
if (entry == null || entry.node.items.length === 0) return;
|
|
14563
14574
|
if (options?.isFocusing) {
|
|
@@ -14587,7 +14598,7 @@ function useTreeNavigation({
|
|
|
14587
14598
|
expand(id);
|
|
14588
14599
|
}
|
|
14589
14600
|
}, [index, expandedIds, expand, collapse, onlyOneExpandedTree, setActiveId]);
|
|
14590
|
-
const next = (0,
|
|
14601
|
+
const next = (0, import_react57.useCallback)(() => {
|
|
14591
14602
|
if (items.length === 0) return;
|
|
14592
14603
|
if (resolvedActiveId == null) {
|
|
14593
14604
|
navigateTo(items[0].id);
|
|
@@ -14600,7 +14611,7 @@ function useTreeNavigation({
|
|
|
14600
14611
|
return;
|
|
14601
14612
|
}
|
|
14602
14613
|
}, [items, resolvedActiveId, navigateTo]);
|
|
14603
|
-
const previous = (0,
|
|
14614
|
+
const previous = (0, import_react57.useCallback)(() => {
|
|
14604
14615
|
if (items.length === 0) return;
|
|
14605
14616
|
if (resolvedActiveId == null) {
|
|
14606
14617
|
navigateTo(items[items.length - 1].id);
|
|
@@ -14613,15 +14624,15 @@ function useTreeNavigation({
|
|
|
14613
14624
|
return;
|
|
14614
14625
|
}
|
|
14615
14626
|
}, [items, resolvedActiveId, navigateTo]);
|
|
14616
|
-
const first = (0,
|
|
14627
|
+
const first = (0, import_react57.useCallback)(() => {
|
|
14617
14628
|
if (items.length === 0) return;
|
|
14618
14629
|
navigateTo(items[0].id);
|
|
14619
14630
|
}, [items, navigateTo]);
|
|
14620
|
-
const last = (0,
|
|
14631
|
+
const last = (0, import_react57.useCallback)(() => {
|
|
14621
14632
|
if (items.length === 0) return;
|
|
14622
14633
|
navigateTo(items[items.length - 1].id);
|
|
14623
14634
|
}, [items, navigateTo]);
|
|
14624
|
-
return (0,
|
|
14635
|
+
return (0, import_react57.useMemo)(() => ({
|
|
14625
14636
|
items,
|
|
14626
14637
|
activeItem,
|
|
14627
14638
|
navigateTo,
|
|
@@ -14637,15 +14648,15 @@ function useTreeNavigation({
|
|
|
14637
14648
|
|
|
14638
14649
|
// src/components/layout/navigation/navigation-menus/NavigationContext.tsx
|
|
14639
14650
|
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
14640
|
-
var NavigationContext = (0,
|
|
14651
|
+
var NavigationContext = (0, import_react58.createContext)(null);
|
|
14641
14652
|
function NavigationProvider({
|
|
14642
14653
|
children,
|
|
14643
14654
|
...options
|
|
14644
14655
|
}) {
|
|
14645
14656
|
const navigation = useTreeNavigation(options);
|
|
14646
|
-
const itemRefs = (0,
|
|
14657
|
+
const itemRefs = (0, import_react58.useRef)(/* @__PURE__ */ new Map());
|
|
14647
14658
|
const focusedId = navigation.activeItem?.id ?? navigation.items[0]?.id ?? null;
|
|
14648
|
-
const itemStateById = (0,
|
|
14659
|
+
const itemStateById = (0, import_react58.useMemo)(() => {
|
|
14649
14660
|
const map = /* @__PURE__ */ new Map();
|
|
14650
14661
|
for (const item of navigation.items) {
|
|
14651
14662
|
map.set(item.id, {
|
|
@@ -14656,21 +14667,21 @@ function NavigationProvider({
|
|
|
14656
14667
|
}
|
|
14657
14668
|
return map;
|
|
14658
14669
|
}, [navigation.items, focusedId]);
|
|
14659
|
-
const getItemState = (0,
|
|
14670
|
+
const getItemState = (0, import_react58.useCallback)((id) => {
|
|
14660
14671
|
return itemStateById.get(id) ?? null;
|
|
14661
14672
|
}, [itemStateById]);
|
|
14662
|
-
const registerItemRef = (0,
|
|
14673
|
+
const registerItemRef = (0, import_react58.useCallback)((id, element) => {
|
|
14663
14674
|
if (element == null) {
|
|
14664
14675
|
itemRefs.current.delete(id);
|
|
14665
14676
|
return;
|
|
14666
14677
|
}
|
|
14667
14678
|
itemRefs.current.set(id, element);
|
|
14668
14679
|
}, []);
|
|
14669
|
-
(0,
|
|
14680
|
+
(0, import_react58.useEffect)(() => {
|
|
14670
14681
|
if (focusedId == null) return;
|
|
14671
14682
|
itemRefs.current.get(focusedId)?.focus();
|
|
14672
14683
|
}, [focusedId]);
|
|
14673
|
-
const value = (0,
|
|
14684
|
+
const value = (0, import_react58.useMemo)(() => ({
|
|
14674
14685
|
activeItem: navigation.activeItem,
|
|
14675
14686
|
focusedId,
|
|
14676
14687
|
items: navigation.items,
|
|
@@ -14702,7 +14713,7 @@ function NavigationProvider({
|
|
|
14702
14713
|
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(NavigationContext.Provider, { value, children });
|
|
14703
14714
|
}
|
|
14704
14715
|
function useNavigationContext() {
|
|
14705
|
-
const context = (0,
|
|
14716
|
+
const context = (0, import_react58.useContext)(NavigationContext);
|
|
14706
14717
|
if (context == null) {
|
|
14707
14718
|
throw new Error("useNavigationContext must be used within NavigationProvider");
|
|
14708
14719
|
}
|
|
@@ -14714,10 +14725,10 @@ function useNavigationItem(id) {
|
|
|
14714
14725
|
if (state == null) {
|
|
14715
14726
|
throw new Error(`useNavigationItem could not resolve state for id "${id}"`);
|
|
14716
14727
|
}
|
|
14717
|
-
const ref = (0,
|
|
14728
|
+
const ref = (0, import_react58.useCallback)((element) => {
|
|
14718
14729
|
context.registerItemRef(id, element);
|
|
14719
14730
|
}, [context, id]);
|
|
14720
|
-
return (0,
|
|
14731
|
+
return (0, import_react58.useMemo)(() => ({
|
|
14721
14732
|
...state,
|
|
14722
14733
|
ref,
|
|
14723
14734
|
navigateTo: context.navigateTo,
|
|
@@ -14743,7 +14754,7 @@ function useNavigationItem(id) {
|
|
|
14743
14754
|
}
|
|
14744
14755
|
|
|
14745
14756
|
// src/components/layout/navigation/navigation-menus/VerticalNavigationItem.tsx
|
|
14746
|
-
var
|
|
14757
|
+
var import_react59 = require("react");
|
|
14747
14758
|
var import_lucide_react9 = require("lucide-react");
|
|
14748
14759
|
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
14749
14760
|
function VerticalNavigationItem({
|
|
@@ -14754,7 +14765,7 @@ function VerticalNavigationItem({
|
|
|
14754
14765
|
items,
|
|
14755
14766
|
depth = 0
|
|
14756
14767
|
}) {
|
|
14757
|
-
const headerRef = (0,
|
|
14768
|
+
const headerRef = (0, import_react59.useRef)(null);
|
|
14758
14769
|
const {
|
|
14759
14770
|
expanded,
|
|
14760
14771
|
isFocused,
|
|
@@ -14771,7 +14782,7 @@ function VerticalNavigationItem({
|
|
|
14771
14782
|
} = useNavigationItem(id);
|
|
14772
14783
|
const hasChildren = items != null && items.length > 0;
|
|
14773
14784
|
const firstChildId = hasChildren ? items[0]?.id : void 0;
|
|
14774
|
-
const handleKeyDown = (0,
|
|
14785
|
+
const handleKeyDown = (0, import_react59.useCallback)((event) => {
|
|
14775
14786
|
if (!isFocused || event.target !== event.currentTarget) return;
|
|
14776
14787
|
if (event.key === "ArrowRight") {
|
|
14777
14788
|
if (!hasChildren) return;
|
|
@@ -14825,10 +14836,10 @@ function VerticalNavigationItem({
|
|
|
14825
14836
|
window.location.assign(url);
|
|
14826
14837
|
}
|
|
14827
14838
|
}, [collapse, expand, expanded, external, first, firstChildId, hasChildren, id, isFocused, last, navigateTo, next, path, previous, toggleExpansion, url]);
|
|
14828
|
-
const handleHeaderActivate = (0,
|
|
14839
|
+
const handleHeaderActivate = (0, import_react59.useCallback)(() => {
|
|
14829
14840
|
toggleExpansion(id, { isFocusing: true });
|
|
14830
14841
|
}, [id, toggleExpansion]);
|
|
14831
|
-
const handleLeafActivate = (0,
|
|
14842
|
+
const handleLeafActivate = (0, import_react59.useCallback)((event) => {
|
|
14832
14843
|
if (event.target.closest('[data-name="vertical-navigation-item-link"]')) return;
|
|
14833
14844
|
navigateTo(id);
|
|
14834
14845
|
}, [id, navigateTo]);
|
|
@@ -14842,7 +14853,7 @@ function VerticalNavigationItem({
|
|
|
14842
14853
|
tabIndex: -1,
|
|
14843
14854
|
children: [
|
|
14844
14855
|
label,
|
|
14845
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react9.ExternalLink, { className: "
|
|
14856
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react9.ExternalLink, { className: "vertical-navigation-item-link-external-icon" })
|
|
14846
14857
|
]
|
|
14847
14858
|
}
|
|
14848
14859
|
) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
@@ -14862,11 +14873,12 @@ function VerticalNavigationItem({
|
|
|
14862
14873
|
role: "treeitem",
|
|
14863
14874
|
"data-name": "vertical-navigation-item",
|
|
14864
14875
|
"data-depth": depth,
|
|
14865
|
-
"data-
|
|
14876
|
+
"data-focused": isFocused ? "" : void 0,
|
|
14866
14877
|
"aria-selected": isFocused ? true : void 0,
|
|
14867
14878
|
tabIndex: isFocused ? 0 : -1,
|
|
14868
14879
|
onKeyDown: handleKeyDown,
|
|
14869
14880
|
onClick: handleLeafActivate,
|
|
14881
|
+
className: "group/tree-leaf",
|
|
14870
14882
|
children: labelContent
|
|
14871
14883
|
}
|
|
14872
14884
|
);
|
|
@@ -14878,7 +14890,7 @@ function VerticalNavigationItem({
|
|
|
14878
14890
|
role: "treeitem",
|
|
14879
14891
|
"data-name": "vertical-navigation-node",
|
|
14880
14892
|
"data-depth": depth,
|
|
14881
|
-
"data-
|
|
14893
|
+
"data-focused": isFocused ? "" : void 0,
|
|
14882
14894
|
"data-expanded": expanded ? "" : void 0,
|
|
14883
14895
|
"aria-expanded": expanded,
|
|
14884
14896
|
tabIndex: isFocused ? 0 : -1,
|
|
@@ -14890,7 +14902,7 @@ function VerticalNavigationItem({
|
|
|
14890
14902
|
{
|
|
14891
14903
|
ref: headerRef,
|
|
14892
14904
|
"data-name": "vertical-navigation-node-header",
|
|
14893
|
-
"data-
|
|
14905
|
+
"data-focused": isFocused ? "" : void 0,
|
|
14894
14906
|
onClick: handleHeaderActivate,
|
|
14895
14907
|
children: [
|
|
14896
14908
|
label,
|
|
@@ -14931,10 +14943,10 @@ function VerticalNavigationTree({
|
|
|
14931
14943
|
|
|
14932
14944
|
// src/components/layout/app/AppPage.tsx
|
|
14933
14945
|
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
14934
|
-
var AppSidebar = ({ isOpen, onClose, children, ...props }) => {
|
|
14946
|
+
var AppSidebar = ({ isOpen = false, onClose, children, ...props }) => {
|
|
14935
14947
|
const translation = useHightideTranslation();
|
|
14936
14948
|
const { zIndex } = useOverlayRegistry({ isActive: isOpen });
|
|
14937
|
-
const ref = (0,
|
|
14949
|
+
const ref = (0, import_react60.useRef)(null);
|
|
14938
14950
|
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
|
|
14939
14951
|
isOpen && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
14940
14952
|
"div",
|
|
@@ -14990,33 +15002,52 @@ var AppPageSidebarWithNavigation = ({
|
|
|
14990
15002
|
footer,
|
|
14991
15003
|
navigationItems,
|
|
14992
15004
|
contentOverwrite,
|
|
15005
|
+
initialActiveId,
|
|
14993
15006
|
...props
|
|
14994
15007
|
}) => {
|
|
14995
15008
|
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AppSidebar, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "app-page-sidebar-with-navigation", children: [
|
|
14996
15009
|
header && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "app-page-sidebar-with-navigation-header", children: header }),
|
|
14997
|
-
navigationItems && !contentOverwrite && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "app-page-sidebar-with-navigation-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(VerticalNavigationTree, { items: navigationItems }) }),
|
|
15010
|
+
navigationItems && !contentOverwrite && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "app-page-sidebar-with-navigation-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(VerticalNavigationTree, { items: navigationItems, initialActiveId }) }),
|
|
14998
15011
|
contentOverwrite && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "app-page-sidebar-with-navigation-scroll", children: contentOverwrite }),
|
|
14999
15012
|
footer && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "app-page-sidebar-with-navigation-footer", children: footer })
|
|
15000
15013
|
] }) });
|
|
15001
15014
|
};
|
|
15002
15015
|
var AppPage = ({ children, headerActions, sidebarProps, ...props }) => {
|
|
15003
15016
|
const translation = useHightideTranslation();
|
|
15004
|
-
const [isSidebarOpen, setIsSidebarOpen] = (0,
|
|
15005
|
-
const toNavigationItems = (0,
|
|
15006
|
-
return items?.map((item) =>
|
|
15007
|
-
|
|
15008
|
-
|
|
15009
|
-
|
|
15010
|
-
item
|
|
15011
|
-
|
|
15012
|
-
|
|
15013
|
-
|
|
15014
|
-
|
|
15015
|
-
|
|
15016
|
-
|
|
15017
|
-
|
|
15018
|
-
|
|
15019
|
-
|
|
15017
|
+
const [isSidebarOpen, setIsSidebarOpen] = (0, import_react60.useState)(false);
|
|
15018
|
+
const toNavigationItems = (0, import_react60.useCallback)((items) => {
|
|
15019
|
+
return items?.map((item) => {
|
|
15020
|
+
const isActive = sidebarProps.activeUrl === item.url && !!sidebarProps.activeUrl || item.id === sidebarProps.initialActiveId;
|
|
15021
|
+
return {
|
|
15022
|
+
id: item.id,
|
|
15023
|
+
label: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: "app-page-navigation-item-label", "data-active-page": isActive ? "" : void 0, children: [
|
|
15024
|
+
item.icon && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "size-5", children: item.icon }),
|
|
15025
|
+
item.label
|
|
15026
|
+
] }),
|
|
15027
|
+
url: item.url,
|
|
15028
|
+
external: item.external,
|
|
15029
|
+
items: toNavigationItems(item.items)
|
|
15030
|
+
};
|
|
15031
|
+
}) ?? void 0;
|
|
15032
|
+
}, [sidebarProps.activeUrl, sidebarProps.initialActiveId]);
|
|
15033
|
+
const navigationItems = (0, import_react60.useMemo)(() => toNavigationItems(
|
|
15034
|
+
sidebarProps.items
|
|
15035
|
+
), [sidebarProps.items, toNavigationItems]);
|
|
15036
|
+
const initialActiveId = (0, import_react60.useMemo)(() => {
|
|
15037
|
+
if (sidebarProps.initialActiveId) return sidebarProps.initialActiveId;
|
|
15038
|
+
if (!navigationItems) return void 0;
|
|
15039
|
+
const findActiveId = (items) => {
|
|
15040
|
+
for (const item of items) {
|
|
15041
|
+
if (item.url === sidebarProps.activeUrl) return item.id;
|
|
15042
|
+
if (item.items) {
|
|
15043
|
+
const found = findActiveId(item.items);
|
|
15044
|
+
if (found) return found;
|
|
15045
|
+
}
|
|
15046
|
+
}
|
|
15047
|
+
return void 0;
|
|
15048
|
+
};
|
|
15049
|
+
return findActiveId(navigationItems);
|
|
15050
|
+
}, [navigationItems, sidebarProps.activeUrl, sidebarProps.initialActiveId]);
|
|
15020
15051
|
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
|
|
15021
15052
|
"div",
|
|
15022
15053
|
{
|
|
@@ -15032,7 +15063,8 @@ var AppPage = ({ children, headerActions, sidebarProps, ...props }) => {
|
|
|
15032
15063
|
header: sidebarProps.header,
|
|
15033
15064
|
footer: sidebarProps.footer,
|
|
15034
15065
|
navigationItems,
|
|
15035
|
-
contentOverwrite: sidebarProps.contentOverwrite
|
|
15066
|
+
contentOverwrite: sidebarProps.contentOverwrite,
|
|
15067
|
+
initialActiveId
|
|
15036
15068
|
}
|
|
15037
15069
|
),
|
|
15038
15070
|
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { "data-name": "app-page-content", children: [
|
|
@@ -15060,14 +15092,14 @@ var AppPage = ({ children, headerActions, sidebarProps, ...props }) => {
|
|
|
15060
15092
|
};
|
|
15061
15093
|
|
|
15062
15094
|
// src/components/layout/dialog/Dialog.tsx
|
|
15063
|
-
var
|
|
15095
|
+
var import_react62 = require("react");
|
|
15064
15096
|
var import_lucide_react11 = require("lucide-react");
|
|
15065
15097
|
|
|
15066
15098
|
// src/components/layout/dialog/DialogContext.tsx
|
|
15067
|
-
var
|
|
15068
|
-
var DialogContext = (0,
|
|
15099
|
+
var import_react61 = require("react");
|
|
15100
|
+
var DialogContext = (0, import_react61.createContext)(null);
|
|
15069
15101
|
function useDialogContext() {
|
|
15070
|
-
const context = (0,
|
|
15102
|
+
const context = (0, import_react61.useContext)(DialogContext);
|
|
15071
15103
|
if (!context) {
|
|
15072
15104
|
throw new Error("useDialogContext must be used within a <DialogContext.Provider>");
|
|
15073
15105
|
}
|
|
@@ -15076,7 +15108,7 @@ function useDialogContext() {
|
|
|
15076
15108
|
|
|
15077
15109
|
// src/components/layout/dialog/Dialog.tsx
|
|
15078
15110
|
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
15079
|
-
var Dialog = (0,
|
|
15111
|
+
var Dialog = (0, import_react62.forwardRef)(function Dialog2({
|
|
15080
15112
|
children,
|
|
15081
15113
|
isOpen: isOpenOverwrite,
|
|
15082
15114
|
titleElement,
|
|
@@ -15089,24 +15121,24 @@ var Dialog = (0, import_react63.forwardRef)(function Dialog2({
|
|
|
15089
15121
|
...props
|
|
15090
15122
|
}, forwardedRef) {
|
|
15091
15123
|
const translation = useHightideTranslation();
|
|
15092
|
-
const generatedId = (0,
|
|
15093
|
-
const ids = (0,
|
|
15124
|
+
const generatedId = (0, import_react62.useId)();
|
|
15125
|
+
const ids = (0, import_react62.useMemo)(() => ({
|
|
15094
15126
|
container: `dialog-container-${generatedId}`,
|
|
15095
15127
|
background: `dialog-background-${generatedId}`,
|
|
15096
15128
|
content: props.id ?? `dialog-content-${generatedId}`,
|
|
15097
15129
|
title: `dialog-title-${generatedId}`,
|
|
15098
15130
|
description: `dialog-description-${generatedId}`
|
|
15099
15131
|
}), [generatedId, props.id]);
|
|
15100
|
-
const containerRef = (0,
|
|
15101
|
-
const context = (0,
|
|
15132
|
+
const containerRef = (0, import_react62.useRef)(null);
|
|
15133
|
+
const context = (0, import_react62.useContext)(DialogContext);
|
|
15102
15134
|
const isOpen = isOpenOverwrite ?? context?.isOpen ?? false;
|
|
15103
15135
|
const isModal = isModalOverwrite ?? context?.isModal ?? true;
|
|
15104
15136
|
const { refAssignment, isPresent, ref } = usePresenceRef({
|
|
15105
15137
|
isOpen
|
|
15106
15138
|
});
|
|
15107
|
-
(0,
|
|
15139
|
+
(0, import_react62.useImperativeHandle)(forwardedRef, () => ref.current, [ref]);
|
|
15108
15140
|
const onCloseStable = useEventCallbackStabilizer(onClose);
|
|
15109
|
-
const onCloseWrapper = (0,
|
|
15141
|
+
const onCloseWrapper = (0, import_react62.useCallback)(() => {
|
|
15110
15142
|
if (!isModal) return;
|
|
15111
15143
|
onCloseStable();
|
|
15112
15144
|
context?.setIsOpen(false);
|
|
@@ -15190,10 +15222,10 @@ var Dialog = (0, import_react63.forwardRef)(function Dialog2({
|
|
|
15190
15222
|
});
|
|
15191
15223
|
|
|
15192
15224
|
// src/components/layout/dialog/DialogOpener.tsx
|
|
15193
|
-
var
|
|
15225
|
+
var import_react63 = require("react");
|
|
15194
15226
|
function DialogOpenerWrapper({ children }) {
|
|
15195
15227
|
const context = useDialogContext();
|
|
15196
|
-
const bag = (0,
|
|
15228
|
+
const bag = (0, import_react63.useMemo)(() => ({
|
|
15197
15229
|
open: () => context.setIsOpen(true),
|
|
15198
15230
|
close: () => context.setIsOpen(false),
|
|
15199
15231
|
toggleOpen: () => context.setIsOpen((prev) => !prev),
|
|
@@ -15371,13 +15403,13 @@ var import_lucide_react12 = require("lucide-react");
|
|
|
15371
15403
|
var import_clsx18 = __toESM(require("clsx"));
|
|
15372
15404
|
|
|
15373
15405
|
// src/global-contexts/ThemeContext.tsx
|
|
15374
|
-
var
|
|
15406
|
+
var import_react64 = require("react");
|
|
15375
15407
|
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
15376
15408
|
var themes = ["light", "dark", "system"];
|
|
15377
15409
|
var ThemeUtil = {
|
|
15378
15410
|
themes
|
|
15379
15411
|
};
|
|
15380
|
-
var ThemeContext = (0,
|
|
15412
|
+
var ThemeContext = (0, import_react64.createContext)(null);
|
|
15381
15413
|
var ThemeProvider = ({ children, theme, initialTheme }) => {
|
|
15382
15414
|
const {
|
|
15383
15415
|
value: storedTheme,
|
|
@@ -15385,8 +15417,8 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
|
|
|
15385
15417
|
deleteValue: deleteStoredTheme
|
|
15386
15418
|
} = useStorage({ key: "theme", defaultValue: "system" });
|
|
15387
15419
|
const { config } = useHightideConfig();
|
|
15388
|
-
const [themePreference, setThemePreference] = (0,
|
|
15389
|
-
const resolvedTheme = (0,
|
|
15420
|
+
const [themePreference, setThemePreference] = (0, import_react64.useState)("system");
|
|
15421
|
+
const resolvedTheme = (0, import_react64.useMemo)(() => {
|
|
15390
15422
|
if (theme && theme !== "system") {
|
|
15391
15423
|
return theme;
|
|
15392
15424
|
}
|
|
@@ -15398,7 +15430,7 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
|
|
|
15398
15430
|
}
|
|
15399
15431
|
return initialTheme ?? config.theme.initialTheme;
|
|
15400
15432
|
}, [config.theme.initialTheme, initialTheme, storedTheme, theme, themePreference]);
|
|
15401
|
-
(0,
|
|
15433
|
+
(0, import_react64.useEffect)(() => {
|
|
15402
15434
|
if (!theme) return;
|
|
15403
15435
|
if (theme === "system") {
|
|
15404
15436
|
deleteStoredTheme();
|
|
@@ -15406,18 +15438,18 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
|
|
|
15406
15438
|
setStoredTheme(theme);
|
|
15407
15439
|
}
|
|
15408
15440
|
}, [theme, deleteStoredTheme, setStoredTheme]);
|
|
15409
|
-
(0,
|
|
15441
|
+
(0, import_react64.useEffect)(() => {
|
|
15410
15442
|
document.documentElement.setAttribute("data-theme", resolvedTheme);
|
|
15411
15443
|
}, [resolvedTheme]);
|
|
15412
|
-
const getPreference = (0,
|
|
15444
|
+
const getPreference = (0, import_react64.useCallback)(() => {
|
|
15413
15445
|
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
15414
15446
|
const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches;
|
|
15415
15447
|
setThemePreference(prefersDark ? "dark" : prefersLight ? "light" : "system");
|
|
15416
15448
|
}, []);
|
|
15417
|
-
(0,
|
|
15449
|
+
(0, import_react64.useEffect)(() => {
|
|
15418
15450
|
getPreference();
|
|
15419
15451
|
}, [getPreference]);
|
|
15420
|
-
(0,
|
|
15452
|
+
(0, import_react64.useEffect)(() => {
|
|
15421
15453
|
const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
15422
15454
|
const lightQuery = window.matchMedia("(prefers-color-scheme: light)");
|
|
15423
15455
|
const noPrefQuery = window.matchMedia("(prefers-color-scheme: no-preference)");
|
|
@@ -15448,7 +15480,7 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
|
|
|
15448
15480
|
);
|
|
15449
15481
|
};
|
|
15450
15482
|
var useTheme = () => {
|
|
15451
|
-
const context = (0,
|
|
15483
|
+
const context = (0, import_react64.useContext)(ThemeContext);
|
|
15452
15484
|
if (!context) {
|
|
15453
15485
|
throw new Error("useTheme must be used within ThemeContext. Try adding a ThemeProvider around your app.");
|
|
15454
15486
|
}
|
|
@@ -15528,16 +15560,16 @@ var ThemeDialog = ({
|
|
|
15528
15560
|
};
|
|
15529
15561
|
|
|
15530
15562
|
// src/components/layout/drawer/Drawer.tsx
|
|
15531
|
-
var
|
|
15563
|
+
var import_react67 = require("react");
|
|
15532
15564
|
|
|
15533
15565
|
// src/components/layout/drawer/DrawerContent.tsx
|
|
15534
|
-
var
|
|
15566
|
+
var import_react66 = require("react");
|
|
15535
15567
|
|
|
15536
15568
|
// src/components/layout/drawer/DrawerContext.tsx
|
|
15537
|
-
var
|
|
15538
|
-
var DrawerContext = (0,
|
|
15569
|
+
var import_react65 = require("react");
|
|
15570
|
+
var DrawerContext = (0, import_react65.createContext)(null);
|
|
15539
15571
|
function useDrawerContext() {
|
|
15540
|
-
const context = (0,
|
|
15572
|
+
const context = (0, import_react65.useContext)(DrawerContext);
|
|
15541
15573
|
if (!context) {
|
|
15542
15574
|
throw new Error("useDrawerContext must be used within a <DrawerRoot>");
|
|
15543
15575
|
}
|
|
@@ -15546,7 +15578,7 @@ function useDrawerContext() {
|
|
|
15546
15578
|
|
|
15547
15579
|
// src/components/layout/drawer/DrawerContent.tsx
|
|
15548
15580
|
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
15549
|
-
var DrawerContent = (0,
|
|
15581
|
+
var DrawerContent = (0, import_react66.forwardRef)(function DrawerContent2({
|
|
15550
15582
|
children,
|
|
15551
15583
|
alignment = "left",
|
|
15552
15584
|
containerClassName,
|
|
@@ -15555,14 +15587,14 @@ var DrawerContent = (0, import_react67.forwardRef)(function DrawerContent2({
|
|
|
15555
15587
|
...props
|
|
15556
15588
|
}, forwardedRef) {
|
|
15557
15589
|
const { isOpen } = useDrawerContext();
|
|
15558
|
-
const generatedId = (0,
|
|
15559
|
-
const ids = (0,
|
|
15590
|
+
const generatedId = (0, import_react66.useId)();
|
|
15591
|
+
const ids = (0, import_react66.useMemo)(() => ({
|
|
15560
15592
|
container: `dialog-container-${generatedId}`,
|
|
15561
15593
|
background: `dialog-background-${generatedId}`,
|
|
15562
15594
|
content: props.id ?? `dialog-content-${generatedId}`
|
|
15563
15595
|
}), [generatedId, props.id]);
|
|
15564
|
-
const ref = (0,
|
|
15565
|
-
(0,
|
|
15596
|
+
const ref = (0, import_react66.useRef)(null);
|
|
15597
|
+
(0, import_react66.useImperativeHandle)(forwardedRef, () => ref.current, [ref]);
|
|
15566
15598
|
const { isVisible, transitionState } = useTransitionState({ isOpen, ref });
|
|
15567
15599
|
useFocusTrap({
|
|
15568
15600
|
container: ref,
|
|
@@ -15570,7 +15602,7 @@ var DrawerContent = (0, import_react67.forwardRef)(function DrawerContent2({
|
|
|
15570
15602
|
});
|
|
15571
15603
|
const { zIndex, tagPositions, tagItemCounts } = useOverlayRegistry({
|
|
15572
15604
|
isActive: isVisible,
|
|
15573
|
-
tags: (0,
|
|
15605
|
+
tags: (0, import_react66.useMemo)(() => ["drawer"], [])
|
|
15574
15606
|
});
|
|
15575
15607
|
const depth = tagPositions && tagItemCounts ? (tagItemCounts["drawer"] ?? 0) - (tagPositions["drawer"] ?? 0) : 0;
|
|
15576
15608
|
const { setOpen } = useDrawerContext();
|
|
@@ -15665,7 +15697,7 @@ function DrawerRoot({
|
|
|
15665
15697
|
|
|
15666
15698
|
// src/components/layout/drawer/Drawer.tsx
|
|
15667
15699
|
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
15668
|
-
var Drawer = (0,
|
|
15700
|
+
var Drawer = (0, import_react67.forwardRef)(function Drawer2({
|
|
15669
15701
|
children,
|
|
15670
15702
|
isOpen = true,
|
|
15671
15703
|
alignment = "left",
|
|
@@ -15723,7 +15755,7 @@ var ErrorComponent = ({
|
|
|
15723
15755
|
};
|
|
15724
15756
|
|
|
15725
15757
|
// src/components/layout/loading/LoadingAndErrorComponent.tsx
|
|
15726
|
-
var
|
|
15758
|
+
var import_react68 = require("react");
|
|
15727
15759
|
|
|
15728
15760
|
// src/components/layout/loading/LoadingContainer.tsx
|
|
15729
15761
|
var import_clsx20 = require("clsx");
|
|
@@ -15744,8 +15776,8 @@ var LoadingAndErrorComponent = ({
|
|
|
15744
15776
|
minimumLoadingDuration = 200,
|
|
15745
15777
|
className
|
|
15746
15778
|
}) => {
|
|
15747
|
-
const [isInMinimumLoading, setIsInMinimumLoading] = (0,
|
|
15748
|
-
const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0,
|
|
15779
|
+
const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react68.useState)(false);
|
|
15780
|
+
const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0, import_react68.useState)(false);
|
|
15749
15781
|
if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
|
|
15750
15782
|
setIsInMinimumLoading(true);
|
|
15751
15783
|
setTimeout(() => {
|
|
@@ -15808,8 +15840,8 @@ var BreadCrumbs = ({ crumbs }) => {
|
|
|
15808
15840
|
|
|
15809
15841
|
// src/components/layout/navigation/Navigation.tsx
|
|
15810
15842
|
var import_lucide_react15 = require("lucide-react");
|
|
15843
|
+
var import_react69 = require("react");
|
|
15811
15844
|
var import_react70 = require("react");
|
|
15812
|
-
var import_react71 = require("react");
|
|
15813
15845
|
var import_link2 = __toESM(require_link2());
|
|
15814
15846
|
var import_clsx23 = __toESM(require("clsx"));
|
|
15815
15847
|
var import_jsx_runtime61 = require("react/jsx-runtime");
|
|
@@ -15822,10 +15854,10 @@ var NavigationItemWithSubItem = ({
|
|
|
15822
15854
|
horizontalAlignment = "center",
|
|
15823
15855
|
...options
|
|
15824
15856
|
}) => {
|
|
15825
|
-
const [isOpen, setOpen] = (0,
|
|
15826
|
-
const containerRef = (0,
|
|
15827
|
-
const triggerRef = (0,
|
|
15828
|
-
const id = (0,
|
|
15857
|
+
const [isOpen, setOpen] = (0, import_react70.useState)(false);
|
|
15858
|
+
const containerRef = (0, import_react70.useRef)(null);
|
|
15859
|
+
const triggerRef = (0, import_react70.useRef)(null);
|
|
15860
|
+
const id = (0, import_react70.useId)();
|
|
15829
15861
|
const style = useAnchoredPosition({
|
|
15830
15862
|
active: isOpen,
|
|
15831
15863
|
container: containerRef,
|
|
@@ -15833,7 +15865,7 @@ var NavigationItemWithSubItem = ({
|
|
|
15833
15865
|
horizontalAlignment,
|
|
15834
15866
|
...options
|
|
15835
15867
|
});
|
|
15836
|
-
const onBlur = (0,
|
|
15868
|
+
const onBlur = (0, import_react70.useCallback)((event) => {
|
|
15837
15869
|
const nextFocus = event.relatedTarget;
|
|
15838
15870
|
if (!containerRef.current?.contains(nextFocus) && !triggerRef.current?.contains(nextFocus)) {
|
|
15839
15871
|
setOpen(false);
|
|
@@ -15899,10 +15931,10 @@ var NavigationItemList = ({ items, ...restProps }) => {
|
|
|
15899
15931
|
};
|
|
15900
15932
|
var Navigation = ({ ...props }) => {
|
|
15901
15933
|
const translation = useHightideTranslation();
|
|
15902
|
-
const [isMobileOpen, setIsMobileOpen] = (0,
|
|
15903
|
-
const id = (0,
|
|
15904
|
-
const menuRef = (0,
|
|
15905
|
-
(0,
|
|
15934
|
+
const [isMobileOpen, setIsMobileOpen] = (0, import_react70.useState)(false);
|
|
15935
|
+
const id = (0, import_react70.useId)();
|
|
15936
|
+
const menuRef = (0, import_react70.useRef)(null);
|
|
15937
|
+
(0, import_react69.useEffect)(() => {
|
|
15906
15938
|
menuRef.current?.focus();
|
|
15907
15939
|
}, [isMobileOpen]);
|
|
15908
15940
|
const { zIndex } = useOverlayRegistry({ isActive: isMobileOpen });
|
|
@@ -15970,7 +16002,7 @@ var Navigation = ({ ...props }) => {
|
|
|
15970
16002
|
// src/components/layout/navigation/Pagination.tsx
|
|
15971
16003
|
var import_lucide_react16 = require("lucide-react");
|
|
15972
16004
|
var import_clsx24 = __toESM(require("clsx"));
|
|
15973
|
-
var
|
|
16005
|
+
var import_react71 = require("react");
|
|
15974
16006
|
var import_jsx_runtime62 = require("react/jsx-runtime");
|
|
15975
16007
|
var Pagination = ({
|
|
15976
16008
|
pageIndex,
|
|
@@ -15979,11 +16011,11 @@ var Pagination = ({
|
|
|
15979
16011
|
...props
|
|
15980
16012
|
}) => {
|
|
15981
16013
|
const translation = useHightideTranslation();
|
|
15982
|
-
const [value, setValue] = (0,
|
|
16014
|
+
const [value, setValue] = (0, import_react71.useState)((pageIndex + 1).toString());
|
|
15983
16015
|
const noPages = pageCount === 0;
|
|
15984
16016
|
const onFirstPage = pageIndex === 0 && !noPages;
|
|
15985
16017
|
const onLastPage = pageIndex === pageCount - 1;
|
|
15986
|
-
(0,
|
|
16018
|
+
(0, import_react71.useEffect)(() => {
|
|
15987
16019
|
if (noPages) {
|
|
15988
16020
|
setValue("0");
|
|
15989
16021
|
} else {
|
|
@@ -16177,18 +16209,18 @@ var StepperBar = ({
|
|
|
16177
16209
|
};
|
|
16178
16210
|
|
|
16179
16211
|
// src/components/layout/popup/PopUpOpener.tsx
|
|
16180
|
-
var
|
|
16212
|
+
var import_react72 = require("react");
|
|
16181
16213
|
function PopUpOpener({ children }) {
|
|
16182
16214
|
const context = usePopUpContext();
|
|
16183
16215
|
const { setTriggerRef } = context;
|
|
16184
|
-
const ref = (0,
|
|
16185
|
-
(0,
|
|
16216
|
+
const ref = (0, import_react72.useRef)(null);
|
|
16217
|
+
(0, import_react72.useEffect)(() => {
|
|
16186
16218
|
setTriggerRef(ref);
|
|
16187
16219
|
return () => {
|
|
16188
16220
|
setTriggerRef(null);
|
|
16189
16221
|
};
|
|
16190
16222
|
}, [setTriggerRef]);
|
|
16191
|
-
const bag = (0,
|
|
16223
|
+
const bag = (0, import_react72.useMemo)(() => ({
|
|
16192
16224
|
open: () => context.setIsOpen(true),
|
|
16193
16225
|
close: () => context.setIsOpen(false),
|
|
16194
16226
|
toggleOpen: () => context.setIsOpen((prev) => !prev),
|
|
@@ -16206,7 +16238,7 @@ function PopUpOpener({ children }) {
|
|
|
16206
16238
|
}
|
|
16207
16239
|
|
|
16208
16240
|
// src/components/layout/popup/PopUpRoot.tsx
|
|
16209
|
-
var
|
|
16241
|
+
var import_react73 = require("react");
|
|
16210
16242
|
var import_jsx_runtime64 = require("react/jsx-runtime");
|
|
16211
16243
|
function PopUpRoot({
|
|
16212
16244
|
children,
|
|
@@ -16216,17 +16248,17 @@ function PopUpRoot({
|
|
|
16216
16248
|
popUpId: popUpIdOverwrite,
|
|
16217
16249
|
triggerId: triggerIdOverwrite
|
|
16218
16250
|
}) {
|
|
16219
|
-
const generatedPopUpId = (0,
|
|
16220
|
-
const generatedTriggerId = (0,
|
|
16251
|
+
const generatedPopUpId = (0, import_react73.useId)();
|
|
16252
|
+
const generatedTriggerId = (0, import_react73.useId)();
|
|
16221
16253
|
const [isOpen, setIsOpen] = useControlledState({
|
|
16222
16254
|
value: controlledIsOpen,
|
|
16223
16255
|
onValueChange: onIsOpenChange,
|
|
16224
16256
|
defaultValue: initialIsOpen
|
|
16225
16257
|
});
|
|
16226
|
-
const [triggerRef, setTriggerRef] = (0,
|
|
16227
|
-
const popUpId = (0,
|
|
16228
|
-
const triggerId = (0,
|
|
16229
|
-
const contextValue = (0,
|
|
16258
|
+
const [triggerRef, setTriggerRef] = (0, import_react73.useState)(null);
|
|
16259
|
+
const popUpId = (0, import_react73.useMemo)(() => popUpIdOverwrite ?? `pop-up-${generatedPopUpId}`, [popUpIdOverwrite, generatedPopUpId]);
|
|
16260
|
+
const triggerId = (0, import_react73.useMemo)(() => triggerIdOverwrite ?? `pop-up-trigger-${generatedTriggerId}`, [triggerIdOverwrite, generatedTriggerId]);
|
|
16261
|
+
const contextValue = (0, import_react73.useMemo)(() => ({
|
|
16230
16262
|
isOpen,
|
|
16231
16263
|
setIsOpen,
|
|
16232
16264
|
popUpId,
|
|
@@ -16413,31 +16445,31 @@ var FillerCell = ({ ...props }) => {
|
|
|
16413
16445
|
};
|
|
16414
16446
|
|
|
16415
16447
|
// src/components/layout/table/TableProvider.tsx
|
|
16416
|
-
var
|
|
16448
|
+
var import_react76 = require("react");
|
|
16417
16449
|
|
|
16418
16450
|
// src/components/layout/table/TableContext.tsx
|
|
16419
|
-
var
|
|
16420
|
-
var TableStateWithoutSizingContext = (0,
|
|
16451
|
+
var import_react74 = require("react");
|
|
16452
|
+
var TableStateWithoutSizingContext = (0, import_react74.createContext)(null);
|
|
16421
16453
|
var useTableStateWithoutSizingContext = () => {
|
|
16422
|
-
const context = (0,
|
|
16454
|
+
const context = (0, import_react74.useContext)(TableStateWithoutSizingContext);
|
|
16423
16455
|
if (!context) throw new Error("useTableStateWithoutSizingContext must be used within a <TableStateWithoutSizingContext.Provider> like <TableStateWithoutSizing>");
|
|
16424
16456
|
return context;
|
|
16425
16457
|
};
|
|
16426
|
-
var TableStateContext = (0,
|
|
16458
|
+
var TableStateContext = (0, import_react74.createContext)(null);
|
|
16427
16459
|
var useTableStateContext = () => {
|
|
16428
|
-
const context = (0,
|
|
16460
|
+
const context = (0, import_react74.useContext)(TableStateContext);
|
|
16429
16461
|
if (!context) throw new Error("useTableStateContext must be used within a <TableStateContext.Provider> like <TableState>");
|
|
16430
16462
|
return context;
|
|
16431
16463
|
};
|
|
16432
|
-
var TableContainerContext = (0,
|
|
16464
|
+
var TableContainerContext = (0, import_react74.createContext)(null);
|
|
16433
16465
|
var useTableContainerContext = () => {
|
|
16434
|
-
const context = (0,
|
|
16466
|
+
const context = (0, import_react74.useContext)(TableContainerContext);
|
|
16435
16467
|
if (!context) throw new Error("useTableContainerContext must be used within a <TableContainerContext.Provider> like <TableContainer>");
|
|
16436
16468
|
return context;
|
|
16437
16469
|
};
|
|
16438
|
-
var TableColumnDefinitionContext = (0,
|
|
16470
|
+
var TableColumnDefinitionContext = (0, import_react74.createContext)(null);
|
|
16439
16471
|
var useTableColumnDefinitionContext = () => {
|
|
16440
|
-
const context = (0,
|
|
16472
|
+
const context = (0, import_react74.useContext)(TableColumnDefinitionContext);
|
|
16441
16473
|
if (!context) throw new Error("useTableColumnDefinitionContext must be used within a <TableColumnDefinitionContext.Provider> like <TableColumnDefinition>");
|
|
16442
16474
|
return context;
|
|
16443
16475
|
};
|
|
@@ -16616,7 +16648,7 @@ var FilterOperatorUtils = {
|
|
|
16616
16648
|
};
|
|
16617
16649
|
|
|
16618
16650
|
// src/components/user-interaction/data/filter-function.ts
|
|
16619
|
-
var
|
|
16651
|
+
var import_react75 = require("react");
|
|
16620
16652
|
|
|
16621
16653
|
// src/utils/date.ts
|
|
16622
16654
|
var timesInSeconds = {
|
|
@@ -17287,7 +17319,7 @@ function tagToLabel(tags, value) {
|
|
|
17287
17319
|
function useFilterValueTranslation() {
|
|
17288
17320
|
const translation = useHightideTranslation();
|
|
17289
17321
|
const { locale } = useLocale();
|
|
17290
|
-
return (0,
|
|
17322
|
+
return (0, import_react75.useCallback)((value, options) => {
|
|
17291
17323
|
const p = value.parameter;
|
|
17292
17324
|
const tags = options?.tags;
|
|
17293
17325
|
const dateFormat = value.dataType === "dateTime" ? "dateTime" : "date";
|
|
@@ -17489,9 +17521,9 @@ var TableProvider = ({
|
|
|
17489
17521
|
}) => {
|
|
17490
17522
|
const onRowClickStable = useEventCallbackStabilizer(onRowClick);
|
|
17491
17523
|
const onFillerRowClickStable = useEventCallbackStabilizer(onFillerRowClick);
|
|
17492
|
-
const [registeredColumns, setRegisteredColumns] = (0,
|
|
17493
|
-
const containerRef = (0,
|
|
17494
|
-
const [, setTableState] = (0,
|
|
17524
|
+
const [registeredColumns, setRegisteredColumns] = (0, import_react76.useState)([]);
|
|
17525
|
+
const containerRef = (0, import_react76.useRef)(null);
|
|
17526
|
+
const [, setTableState] = (0, import_react76.useState)({
|
|
17495
17527
|
columnSizing: {},
|
|
17496
17528
|
columnOrder: [],
|
|
17497
17529
|
columnFilters: [],
|
|
@@ -17516,16 +17548,16 @@ var TableProvider = ({
|
|
|
17516
17548
|
pageSize: 10
|
|
17517
17549
|
}
|
|
17518
17550
|
});
|
|
17519
|
-
const [targetWidth, setTargetWidth] = (0,
|
|
17520
|
-
(0,
|
|
17551
|
+
const [targetWidth, setTargetWidth] = (0, import_react76.useState)(void 0);
|
|
17552
|
+
(0, import_react76.useLayoutEffect)(() => {
|
|
17521
17553
|
const width = containerRef.current?.getBoundingClientRect().width;
|
|
17522
17554
|
setTargetWidth(width !== void 0 ? Math.floor(width) : void 0);
|
|
17523
17555
|
}, [containerRef]);
|
|
17524
|
-
useWindowResizeObserver((0,
|
|
17556
|
+
useWindowResizeObserver((0, import_react76.useCallback)(() => {
|
|
17525
17557
|
const width = containerRef.current?.getBoundingClientRect().width;
|
|
17526
17558
|
setTargetWidth(width !== void 0 ? Math.floor(width) : void 0);
|
|
17527
17559
|
}, [containerRef]));
|
|
17528
|
-
const registerColumn = (0,
|
|
17560
|
+
const registerColumn = (0, import_react76.useCallback)((column) => {
|
|
17529
17561
|
setRegisteredColumns((prev) => {
|
|
17530
17562
|
return [...prev, column];
|
|
17531
17563
|
});
|
|
@@ -17535,7 +17567,7 @@ var TableProvider = ({
|
|
|
17535
17567
|
});
|
|
17536
17568
|
};
|
|
17537
17569
|
}, []);
|
|
17538
|
-
const columns = (0,
|
|
17570
|
+
const columns = (0, import_react76.useMemo)(() => {
|
|
17539
17571
|
const contextColumns = Array.from(registeredColumns.values());
|
|
17540
17572
|
if (columnsProp) {
|
|
17541
17573
|
return [...contextColumns, ...columnsProp];
|
|
@@ -17552,7 +17584,7 @@ var TableProvider = ({
|
|
|
17552
17584
|
defaultColumn: {
|
|
17553
17585
|
minSize: 60,
|
|
17554
17586
|
maxSize: 800,
|
|
17555
|
-
cell: (0,
|
|
17587
|
+
cell: (0, import_react76.useCallback)(({ cell }) => {
|
|
17556
17588
|
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableCell, { children: String(cell.getValue()) });
|
|
17557
17589
|
}, []),
|
|
17558
17590
|
enableResizing: true,
|
|
@@ -17593,7 +17625,7 @@ var TableProvider = ({
|
|
|
17593
17625
|
});
|
|
17594
17626
|
const pagination = table.getState().pagination;
|
|
17595
17627
|
const pageCount = table.getPageCount();
|
|
17596
|
-
(0,
|
|
17628
|
+
(0, import_react76.useEffect)(() => {
|
|
17597
17629
|
if (pageCount === -1) {
|
|
17598
17630
|
return;
|
|
17599
17631
|
}
|
|
@@ -17601,20 +17633,20 @@ var TableProvider = ({
|
|
|
17601
17633
|
table.setPageIndex(pageCount - 1);
|
|
17602
17634
|
}
|
|
17603
17635
|
}, [table, pagination.pageIndex, pageCount]);
|
|
17604
|
-
(0,
|
|
17636
|
+
(0, import_react76.useEffect)(() => {
|
|
17605
17637
|
table.setColumnOrder((prev) => [...prev]);
|
|
17606
17638
|
}, [table, columns]);
|
|
17607
17639
|
const columnVisibility = table.getState().columnVisibility;
|
|
17608
17640
|
const columnOrder = table.getState().columnOrder;
|
|
17609
17641
|
const columnPinning = table.getState().columnPinning;
|
|
17610
|
-
(0,
|
|
17642
|
+
(0, import_react76.useEffect)(() => {
|
|
17611
17643
|
table.setColumnSizing((prev) => ({ ...prev }));
|
|
17612
17644
|
}, [table, targetWidth, columnVisibility, columnOrder, columnPinning]);
|
|
17613
|
-
const tableColumnDefinitionContextValue = (0,
|
|
17645
|
+
const tableColumnDefinitionContextValue = (0, import_react76.useMemo)(() => ({
|
|
17614
17646
|
table,
|
|
17615
17647
|
registerColumn
|
|
17616
17648
|
}), [table, registerColumn]);
|
|
17617
|
-
const tableContainerContextValue = (0,
|
|
17649
|
+
const tableContainerContextValue = (0, import_react76.useMemo)(() => ({
|
|
17618
17650
|
table,
|
|
17619
17651
|
containerRef
|
|
17620
17652
|
}), [table, containerRef]);
|
|
@@ -17623,7 +17655,7 @@ var TableProvider = ({
|
|
|
17623
17655
|
return rest;
|
|
17624
17656
|
})();
|
|
17625
17657
|
const rowModel = table.getRowModel();
|
|
17626
|
-
const tableStateWithoutSizingContextValue = (0,
|
|
17658
|
+
const tableStateWithoutSizingContextValue = (0, import_react76.useMemo)(() => ({
|
|
17627
17659
|
table,
|
|
17628
17660
|
isUsingFillerRows,
|
|
17629
17661
|
fillerRowCell,
|
|
@@ -17666,7 +17698,7 @@ var TableProvider = ({
|
|
|
17666
17698
|
]);
|
|
17667
17699
|
const columnSizing = table.getState().columnSizing;
|
|
17668
17700
|
const columnSizingInfo = table.getState().columnSizingInfo;
|
|
17669
|
-
const tableStateContextValue = (0,
|
|
17701
|
+
const tableStateContextValue = (0, import_react76.useMemo)(() => ({
|
|
17670
17702
|
...tableStateWithoutSizingContextValue,
|
|
17671
17703
|
sizeVars: ColumnSizeUtil.toSizeVars(columnSizing),
|
|
17672
17704
|
columnSizingInfo,
|
|
@@ -17677,10 +17709,10 @@ var TableProvider = ({
|
|
|
17677
17709
|
|
|
17678
17710
|
// src/components/layout/table/TableBody.tsx
|
|
17679
17711
|
var import_react_table2 = require("@tanstack/react-table");
|
|
17680
|
-
var
|
|
17712
|
+
var import_react77 = __toESM(require("react"));
|
|
17681
17713
|
var import_clsx26 = __toESM(require("clsx"));
|
|
17682
17714
|
var import_jsx_runtime69 = require("react/jsx-runtime");
|
|
17683
|
-
var TableBody =
|
|
17715
|
+
var TableBody = import_react77.default.memo(function TableBodyVisual() {
|
|
17684
17716
|
const { table, isUsingFillerRows, fillerRowCell, onRowClick, onFillerRowClick } = useTableStateWithoutSizingContext();
|
|
17685
17717
|
const rows = table.getRowModel().rows;
|
|
17686
17718
|
const columnOrder = table.getState().columnOrder;
|
|
@@ -17778,20 +17810,20 @@ var TableSortButton = ({
|
|
|
17778
17810
|
|
|
17779
17811
|
// src/components/layout/table/TableFilterButton.tsx
|
|
17780
17812
|
var import_lucide_react25 = require("lucide-react");
|
|
17781
|
-
var
|
|
17813
|
+
var import_react94 = require("react");
|
|
17782
17814
|
var import_react_table3 = require("@tanstack/react-table");
|
|
17783
17815
|
|
|
17784
17816
|
// src/components/user-interaction/data/FilterPopUp.tsx
|
|
17785
17817
|
var import_lucide_react24 = require("lucide-react");
|
|
17786
|
-
var
|
|
17818
|
+
var import_react93 = require("react");
|
|
17787
17819
|
|
|
17788
17820
|
// src/components/user-interaction/input/DateTimeInput.tsx
|
|
17789
|
-
var
|
|
17821
|
+
var import_react84 = require("react");
|
|
17790
17822
|
var import_lucide_react22 = require("lucide-react");
|
|
17791
17823
|
var import_clsx31 = __toESM(require("clsx"));
|
|
17792
17824
|
|
|
17793
17825
|
// src/components/user-interaction/date/TimePicker.tsx
|
|
17794
|
-
var
|
|
17826
|
+
var import_react78 = require("react");
|
|
17795
17827
|
var import_jsx_runtime71 = require("react/jsx-runtime");
|
|
17796
17828
|
var TimePicker = ({
|
|
17797
17829
|
value: controlledValue,
|
|
@@ -17812,11 +17844,11 @@ var TimePicker = ({
|
|
|
17812
17844
|
onValueChange,
|
|
17813
17845
|
defaultValue: initialValue
|
|
17814
17846
|
});
|
|
17815
|
-
const minuteRef = (0,
|
|
17816
|
-
const hourRef = (0,
|
|
17847
|
+
const minuteRef = (0, import_react78.useRef)(null);
|
|
17848
|
+
const hourRef = (0, import_react78.useRef)(null);
|
|
17817
17849
|
const isPM = value.getHours() > 11;
|
|
17818
17850
|
const hours = is24HourFormat ? range(24) : range(12);
|
|
17819
|
-
const minutes = (0,
|
|
17851
|
+
const minutes = (0, import_react78.useMemo)(() => {
|
|
17820
17852
|
const full = range(60);
|
|
17821
17853
|
switch (minuteIncrement) {
|
|
17822
17854
|
case "5min":
|
|
@@ -17829,7 +17861,7 @@ var TimePicker = ({
|
|
|
17829
17861
|
return full.filter((value2) => value2 % 30 === 0);
|
|
17830
17862
|
}
|
|
17831
17863
|
}, [minuteIncrement]);
|
|
17832
|
-
const seconds = (0,
|
|
17864
|
+
const seconds = (0, import_react78.useMemo)(() => {
|
|
17833
17865
|
const full = range(60);
|
|
17834
17866
|
switch (secondIncrement) {
|
|
17835
17867
|
case "1s":
|
|
@@ -17844,7 +17876,7 @@ var TimePicker = ({
|
|
|
17844
17876
|
return full.filter((value2) => value2 % 30 === 0);
|
|
17845
17877
|
}
|
|
17846
17878
|
}, [secondIncrement]);
|
|
17847
|
-
const milliseconds = (0,
|
|
17879
|
+
const milliseconds = (0, import_react78.useMemo)(() => {
|
|
17848
17880
|
const full = range(1e3);
|
|
17849
17881
|
switch (millisecondIncrement) {
|
|
17850
17882
|
case "1ms":
|
|
@@ -17865,17 +17897,17 @@ var TimePicker = ({
|
|
|
17865
17897
|
return full.filter((value2) => value2 % 500 === 0);
|
|
17866
17898
|
}
|
|
17867
17899
|
}, [millisecondIncrement]);
|
|
17868
|
-
const closestMinute = (0,
|
|
17869
|
-
const closestSecond = (0,
|
|
17870
|
-
const closestMillisecond = (0,
|
|
17900
|
+
const closestMinute = (0, import_react78.useMemo)(() => closestMatch(minutes, (item1, item2) => Math.abs(item1 - value.getMinutes()) < Math.abs(item2 - value.getMinutes())), [minutes, value]);
|
|
17901
|
+
const closestSecond = (0, import_react78.useMemo)(() => closestMatch(seconds, (item1, item2) => Math.abs(item1 - value.getSeconds()) < Math.abs(item2 - value.getSeconds())), [seconds, value]);
|
|
17902
|
+
const closestMillisecond = (0, import_react78.useMemo)(() => closestMatch(milliseconds, (item1, item2) => Math.abs(item1 - value.getMilliseconds()) < Math.abs(item2 - value.getMilliseconds())), [milliseconds, value]);
|
|
17871
17903
|
const hour = value.getHours();
|
|
17872
|
-
(0,
|
|
17904
|
+
(0, import_react78.useEffect)(() => {
|
|
17873
17905
|
minuteRef.current?.scrollIntoView({
|
|
17874
17906
|
behavior: "smooth",
|
|
17875
17907
|
block: "nearest"
|
|
17876
17908
|
});
|
|
17877
17909
|
}, [closestMinute]);
|
|
17878
|
-
(0,
|
|
17910
|
+
(0, import_react78.useEffect)(() => {
|
|
17879
17911
|
hourRef.current?.scrollIntoView({
|
|
17880
17912
|
behavior: "smooth",
|
|
17881
17913
|
block: "nearest"
|
|
@@ -17974,12 +18006,12 @@ var TimePicker = ({
|
|
|
17974
18006
|
};
|
|
17975
18007
|
|
|
17976
18008
|
// src/components/user-interaction/date/DatePicker.tsx
|
|
17977
|
-
var
|
|
18009
|
+
var import_react81 = require("react");
|
|
17978
18010
|
var import_lucide_react21 = require("lucide-react");
|
|
17979
18011
|
var import_clsx29 = __toESM(require("clsx"));
|
|
17980
18012
|
|
|
17981
18013
|
// src/components/user-interaction/date/DayPicker.tsx
|
|
17982
|
-
var
|
|
18014
|
+
var import_react79 = require("react");
|
|
17983
18015
|
var import_jsx_runtime72 = require("react/jsx-runtime");
|
|
17984
18016
|
var DayPicker = ({
|
|
17985
18017
|
displayedMonth: controlledDisplayedMonth,
|
|
@@ -18008,33 +18040,33 @@ var DayPicker = ({
|
|
|
18008
18040
|
});
|
|
18009
18041
|
const month = displayedMonth.getMonth();
|
|
18010
18042
|
const weeks = DateUtils.weeksForCalenderMonth(displayedMonth, weekStart);
|
|
18011
|
-
const selectedButtonRef = (0,
|
|
18012
|
-
const isValueInDisplayedWeeks = (0,
|
|
18043
|
+
const selectedButtonRef = (0, import_react79.useRef)(null);
|
|
18044
|
+
const isValueInDisplayedWeeks = (0, import_react79.useMemo)(
|
|
18013
18045
|
() => !!value && weeks.some((week) => week.some((d) => DateUtils.equalDate(value, d))),
|
|
18014
18046
|
[value, weeks]
|
|
18015
18047
|
);
|
|
18016
|
-
const firstDayOfMonth = (0,
|
|
18048
|
+
const firstDayOfMonth = (0, import_react79.useCallback)(
|
|
18017
18049
|
(date) => new Date(date.getFullYear(), date.getMonth(), 1),
|
|
18018
18050
|
[]
|
|
18019
18051
|
);
|
|
18020
18052
|
const focusTargetDate = value && isValueInDisplayedWeeks ? value : firstDayOfMonth(displayedMonth);
|
|
18021
|
-
(0,
|
|
18053
|
+
(0, import_react79.useEffect)(() => {
|
|
18022
18054
|
selectedButtonRef.current?.focus();
|
|
18023
18055
|
}, [focusTargetDate]);
|
|
18024
|
-
const end = (0,
|
|
18056
|
+
const end = (0, import_react79.useMemo)(() => {
|
|
18025
18057
|
if (!providedEnd) return;
|
|
18026
18058
|
return new Date(providedEnd.getFullYear(), providedEnd.getMonth(), providedEnd.getDate());
|
|
18027
18059
|
}, [providedEnd]);
|
|
18028
|
-
const start = (0,
|
|
18060
|
+
const start = (0, import_react79.useMemo)(() => {
|
|
18029
18061
|
if (!providedStart) return;
|
|
18030
18062
|
return new Date(providedStart.getFullYear(), providedStart.getMonth(), providedStart.getDate());
|
|
18031
18063
|
}, [providedStart]);
|
|
18032
|
-
const clampToRange = (0,
|
|
18064
|
+
const clampToRange = (0, import_react79.useCallback)((date) => {
|
|
18033
18065
|
if (start && date < start) return start;
|
|
18034
18066
|
if (end && date > end) return end;
|
|
18035
18067
|
return date;
|
|
18036
18068
|
}, [start, end]);
|
|
18037
|
-
const navigateTo = (0,
|
|
18069
|
+
const navigateTo = (0, import_react79.useCallback)((candidate) => {
|
|
18038
18070
|
const clamped = clampToRange(candidate);
|
|
18039
18071
|
if (!DateUtils.between(clamped, start, end)) return;
|
|
18040
18072
|
setValue(clamped);
|
|
@@ -18043,7 +18075,7 @@ var DayPicker = ({
|
|
|
18043
18075
|
setDisplayedMonth(firstDayOfMonth(clamped));
|
|
18044
18076
|
}
|
|
18045
18077
|
}, [clampToRange, start, end, setValue, onEditComplete, displayedMonth, setDisplayedMonth, firstDayOfMonth]);
|
|
18046
|
-
const onKeyDown = (0,
|
|
18078
|
+
const onKeyDown = (0, import_react79.useCallback)(
|
|
18047
18079
|
(event) => {
|
|
18048
18080
|
PropsUtil.aria.navigate({
|
|
18049
18081
|
left: () => focusTargetDate && navigateTo(DateUtils.subtractDuration(focusTargetDate, { days: 1 })),
|
|
@@ -18100,10 +18132,10 @@ var DayPicker = ({
|
|
|
18100
18132
|
};
|
|
18101
18133
|
|
|
18102
18134
|
// src/components/user-interaction/date/YearMonthPicker.tsx
|
|
18103
|
-
var
|
|
18135
|
+
var import_react80 = require("react");
|
|
18104
18136
|
var import_clsx28 = __toESM(require("clsx"));
|
|
18105
18137
|
var import_jsx_runtime73 = require("react/jsx-runtime");
|
|
18106
|
-
var YearRow = (0,
|
|
18138
|
+
var YearRow = (0, import_react80.memo)(function YearRow2({
|
|
18107
18139
|
year,
|
|
18108
18140
|
selectedMonthIndex,
|
|
18109
18141
|
minTimestamp,
|
|
@@ -18111,15 +18143,15 @@ var YearRow = (0, import_react81.memo)(function YearRow2({
|
|
|
18111
18143
|
monthNames,
|
|
18112
18144
|
onSelect
|
|
18113
18145
|
}) {
|
|
18114
|
-
const ref = (0,
|
|
18146
|
+
const ref = (0, import_react80.useRef)(null);
|
|
18115
18147
|
const isSelectedYear = selectedMonthIndex !== void 0;
|
|
18116
|
-
const [isExpanded, setIsExpanded] = (0,
|
|
18117
|
-
(0,
|
|
18148
|
+
const [isExpanded, setIsExpanded] = (0, import_react80.useState)(false);
|
|
18149
|
+
(0, import_react80.useEffect)(() => {
|
|
18118
18150
|
if (isSelectedYear) {
|
|
18119
18151
|
ref.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
|
18120
18152
|
}
|
|
18121
18153
|
}, [isSelectedYear]);
|
|
18122
|
-
const monthGrid = (0,
|
|
18154
|
+
const monthGrid = (0, import_react80.useMemo)(() => equalSizeGroups([...DateUtils.monthsList], 3), []);
|
|
18123
18155
|
return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
|
|
18124
18156
|
ExpandableRoot,
|
|
18125
18157
|
{
|
|
@@ -18174,23 +18206,23 @@ var YearMonthPicker = ({
|
|
|
18174
18206
|
defaultValue: initialValue
|
|
18175
18207
|
});
|
|
18176
18208
|
const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
|
|
18177
|
-
const monthNames = (0,
|
|
18209
|
+
const monthNames = (0, import_react80.useMemo)(() => {
|
|
18178
18210
|
const formatter = new Intl.DateTimeFormat(locale, { month: "short" });
|
|
18179
18211
|
return Array.from({ length: 12 }, (_, i) => formatter.format(new Date(2e3, i, 1)));
|
|
18180
18212
|
}, [locale]);
|
|
18181
|
-
const years = (0,
|
|
18213
|
+
const years = (0, import_react80.useMemo)(
|
|
18182
18214
|
() => range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false }),
|
|
18183
18215
|
[start, end]
|
|
18184
18216
|
);
|
|
18185
|
-
const minTimestamp = (0,
|
|
18217
|
+
const minTimestamp = (0, import_react80.useMemo)(() => {
|
|
18186
18218
|
if (!start) return;
|
|
18187
18219
|
return new Date(start.getFullYear(), start.getMonth(), 1).getTime();
|
|
18188
18220
|
}, [start]);
|
|
18189
|
-
const maxTimestamp = (0,
|
|
18221
|
+
const maxTimestamp = (0, import_react80.useMemo)(() => {
|
|
18190
18222
|
if (!end) return;
|
|
18191
18223
|
return new Date(end.getFullYear(), end.getMonth() + 1, 0).getTime();
|
|
18192
18224
|
}, [end]);
|
|
18193
|
-
const handleSelect = (0,
|
|
18225
|
+
const handleSelect = (0, import_react80.useCallback)((newDate) => {
|
|
18194
18226
|
setValue(newDate);
|
|
18195
18227
|
onEditCompleteStable(newDate);
|
|
18196
18228
|
}, [onEditCompleteStable, setValue]);
|
|
@@ -18243,8 +18275,8 @@ var DatePicker = ({
|
|
|
18243
18275
|
onValueChange,
|
|
18244
18276
|
defaultValue: initialValue
|
|
18245
18277
|
});
|
|
18246
|
-
const [displayedMonth, setDisplayedMonth] = (0,
|
|
18247
|
-
const [displayMode, setDisplayMode] = (0,
|
|
18278
|
+
const [displayedMonth, setDisplayedMonth] = (0, import_react81.useState)(new Date(value.getFullYear(), value.getMonth(), 1));
|
|
18279
|
+
const [displayMode, setDisplayMode] = (0, import_react81.useState)(initialDisplay);
|
|
18248
18280
|
return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: (0, import_clsx29.default)("flex-col-3", className), children: [
|
|
18249
18281
|
/* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex-row-2 items-center justify-between", children: [
|
|
18250
18282
|
/* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
|
|
@@ -18406,7 +18438,7 @@ var DateTimePicker = ({
|
|
|
18406
18438
|
};
|
|
18407
18439
|
|
|
18408
18440
|
// src/components/user-interaction/date/DateTimePickerDialog.tsx
|
|
18409
|
-
var
|
|
18441
|
+
var import_react82 = require("react");
|
|
18410
18442
|
var import_jsx_runtime76 = require("react/jsx-runtime");
|
|
18411
18443
|
var DateTimePickerDialog = ({
|
|
18412
18444
|
initialValue = null,
|
|
@@ -18434,8 +18466,8 @@ var DateTimePickerDialog = ({
|
|
|
18434
18466
|
onValueChange,
|
|
18435
18467
|
defaultValue: initialValue
|
|
18436
18468
|
});
|
|
18437
|
-
const [pickerState, setPickerState] = (0,
|
|
18438
|
-
(0,
|
|
18469
|
+
const [pickerState, setPickerState] = (0, import_react82.useState)(state ?? /* @__PURE__ */ new Date());
|
|
18470
|
+
(0, import_react82.useEffect)(() => {
|
|
18439
18471
|
setPickerState(state ?? /* @__PURE__ */ new Date());
|
|
18440
18472
|
}, [state]);
|
|
18441
18473
|
return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
|
|
@@ -18509,7 +18541,7 @@ var DateTimePickerDialog = ({
|
|
|
18509
18541
|
};
|
|
18510
18542
|
|
|
18511
18543
|
// src/components/user-interaction/input/DateTimeField.tsx
|
|
18512
|
-
var
|
|
18544
|
+
var import_react83 = require("react");
|
|
18513
18545
|
var import_clsx30 = __toESM(require("clsx"));
|
|
18514
18546
|
|
|
18515
18547
|
// src/components/user-interaction/input/dateTimeSegments.ts
|
|
@@ -18786,7 +18818,7 @@ var formatSegment = (type, values, buffer, locale) => {
|
|
|
18786
18818
|
// src/components/user-interaction/input/DateTimeField.tsx
|
|
18787
18819
|
var import_jsx_runtime77 = require("react/jsx-runtime");
|
|
18788
18820
|
var advanceKeys = [".", ":", "/", ",", "-", " "];
|
|
18789
|
-
var DateTimeField = (0,
|
|
18821
|
+
var DateTimeField = (0, import_react83.forwardRef)(function DateTimeField2({
|
|
18790
18822
|
value: controlledValue,
|
|
18791
18823
|
initialValue = null,
|
|
18792
18824
|
onValueChange,
|
|
@@ -18811,20 +18843,20 @@ var DateTimeField = (0, import_react84.forwardRef)(function DateTimeField2({
|
|
|
18811
18843
|
defaultValue: initialValue
|
|
18812
18844
|
});
|
|
18813
18845
|
const is24Hour = is24HourFormat ?? contextIs24HourFormat ?? true;
|
|
18814
|
-
const layout = (0,
|
|
18846
|
+
const layout = (0, import_react83.useMemo)(
|
|
18815
18847
|
() => buildSegmentLayout({ locale, mode, precision, is24HourFormat: is24Hour }),
|
|
18816
18848
|
[locale, mode, precision, is24Hour]
|
|
18817
18849
|
);
|
|
18818
|
-
const editableTypes = (0,
|
|
18819
|
-
const [editState, setEditState] = (0,
|
|
18850
|
+
const editableTypes = (0, import_react83.useMemo)(() => editableTypesOf(layout), [layout]);
|
|
18851
|
+
const [editState, setEditState] = (0, import_react83.useState)(() => ({
|
|
18820
18852
|
values: value ? decomposeDate(value, layout, is24Hour) : {},
|
|
18821
18853
|
buffer: null
|
|
18822
18854
|
}));
|
|
18823
|
-
const [focusedType, setFocusedType] = (0,
|
|
18824
|
-
const editStateRef = (0,
|
|
18855
|
+
const [focusedType, setFocusedType] = (0, import_react83.useState)(null);
|
|
18856
|
+
const editStateRef = (0, import_react83.useRef)(editState);
|
|
18825
18857
|
editStateRef.current = editState;
|
|
18826
|
-
const segmentRefs = (0,
|
|
18827
|
-
const segmentRefCallbacks = (0,
|
|
18858
|
+
const segmentRefs = (0, import_react83.useRef)(/* @__PURE__ */ new Map());
|
|
18859
|
+
const segmentRefCallbacks = (0, import_react83.useRef)(/* @__PURE__ */ new Map());
|
|
18828
18860
|
const registerSegment = (type) => {
|
|
18829
18861
|
const existing = segmentRefCallbacks.current.get(type);
|
|
18830
18862
|
if (existing) {
|
|
@@ -18840,7 +18872,7 @@ var DateTimeField = (0, import_react84.forwardRef)(function DateTimeField2({
|
|
|
18840
18872
|
segmentRefCallbacks.current.set(type, callback);
|
|
18841
18873
|
return callback;
|
|
18842
18874
|
};
|
|
18843
|
-
(0,
|
|
18875
|
+
(0, import_react83.useEffect)(() => {
|
|
18844
18876
|
if (editStateRef.current.buffer) {
|
|
18845
18877
|
return;
|
|
18846
18878
|
}
|
|
@@ -18868,7 +18900,7 @@ var DateTimeField = (0, import_react84.forwardRef)(function DateTimeField2({
|
|
|
18868
18900
|
const focusType = (type) => {
|
|
18869
18901
|
setFocusedType(type);
|
|
18870
18902
|
};
|
|
18871
|
-
(0,
|
|
18903
|
+
(0, import_react83.useLayoutEffect)(() => {
|
|
18872
18904
|
if (focusedType === null) {
|
|
18873
18905
|
return;
|
|
18874
18906
|
}
|
|
@@ -19033,7 +19065,7 @@ var DateTimeField = (0, import_react84.forwardRef)(function DateTimeField2({
|
|
|
19033
19065
|
|
|
19034
19066
|
// src/components/user-interaction/input/DateTimeInput.tsx
|
|
19035
19067
|
var import_jsx_runtime78 = require("react/jsx-runtime");
|
|
19036
|
-
var DateTimeInput = (0,
|
|
19068
|
+
var DateTimeInput = (0, import_react84.forwardRef)(function DateTimeInput2({
|
|
19037
19069
|
id: inputId,
|
|
19038
19070
|
value,
|
|
19039
19071
|
initialValue = null,
|
|
@@ -19066,34 +19098,34 @@ var DateTimeInput = (0, import_react85.forwardRef)(function DateTimeInput2({
|
|
|
19066
19098
|
const translation = useHightideTranslation();
|
|
19067
19099
|
const { timeZone: contextTimeZone } = useLocale();
|
|
19068
19100
|
const timeZone = timeZoneOverride ?? contextTimeZone;
|
|
19069
|
-
const [isOpen, setIsOpen] = (0,
|
|
19101
|
+
const [isOpen, setIsOpen] = (0, import_react84.useState)(false);
|
|
19070
19102
|
const [state, setState] = useControlledState({
|
|
19071
19103
|
value,
|
|
19072
19104
|
onValueChange,
|
|
19073
19105
|
defaultValue: initialValue
|
|
19074
19106
|
});
|
|
19075
|
-
const [dialogValue, setDialogValue] = (0,
|
|
19076
|
-
const changeOpenWrapper = (0,
|
|
19107
|
+
const [dialogValue, setDialogValue] = (0, import_react84.useState)(state);
|
|
19108
|
+
const changeOpenWrapper = (0, import_react84.useCallback)((isOpen2) => {
|
|
19077
19109
|
onDialogOpeningChange?.(isOpen2);
|
|
19078
19110
|
setIsOpen(isOpen2);
|
|
19079
19111
|
}, [onDialogOpeningChange]);
|
|
19080
|
-
const toZoned = (0,
|
|
19081
|
-
const fromZoned = (0,
|
|
19082
|
-
const generatedId = (0,
|
|
19083
|
-
const ids = (0,
|
|
19112
|
+
const toZoned = (0, import_react84.useCallback)((date) => DateUtils.toZonedDate(date, timeZone), [timeZone]);
|
|
19113
|
+
const fromZoned = (0, import_react84.useCallback)((date) => DateUtils.fromZonedDate(date, timeZone), [timeZone]);
|
|
19114
|
+
const generatedId = (0, import_react84.useId)();
|
|
19115
|
+
const ids = (0, import_react84.useMemo)(() => ({
|
|
19084
19116
|
input: inputId ?? `date-time-input-${generatedId}`,
|
|
19085
19117
|
popup: `date-time-input-popup-${generatedId}`,
|
|
19086
19118
|
label: `date-time-input-label-${generatedId}`
|
|
19087
19119
|
}), [generatedId, inputId]);
|
|
19088
|
-
const controlRef = (0,
|
|
19089
|
-
const fieldRef = (0,
|
|
19090
|
-
(0,
|
|
19091
|
-
(0,
|
|
19120
|
+
const controlRef = (0, import_react84.useRef)(null);
|
|
19121
|
+
const fieldRef = (0, import_react84.useRef)(null);
|
|
19122
|
+
(0, import_react84.useImperativeHandle)(forwardedRef, () => controlRef.current);
|
|
19123
|
+
(0, import_react84.useEffect)(() => {
|
|
19092
19124
|
if (readOnly || disabled) {
|
|
19093
19125
|
changeOpenWrapper(false);
|
|
19094
19126
|
}
|
|
19095
19127
|
}, [changeOpenWrapper, readOnly, disabled]);
|
|
19096
|
-
(0,
|
|
19128
|
+
(0, import_react84.useEffect)(() => {
|
|
19097
19129
|
if (isOpen) {
|
|
19098
19130
|
setDialogValue(state);
|
|
19099
19131
|
}
|
|
@@ -19227,25 +19259,25 @@ var DateTimeInput = (0, import_react85.forwardRef)(function DateTimeInput2({
|
|
|
19227
19259
|
});
|
|
19228
19260
|
|
|
19229
19261
|
// src/components/user-interaction/MultiSelect/MultiSelect.tsx
|
|
19230
|
-
var
|
|
19262
|
+
var import_react92 = require("react");
|
|
19231
19263
|
|
|
19232
19264
|
// src/components/user-interaction/MultiSelect/MultiSelectRoot.tsx
|
|
19233
|
-
var
|
|
19265
|
+
var import_react88 = require("react");
|
|
19234
19266
|
|
|
19235
19267
|
// src/components/user-interaction/MultiSelect/MultiSelectContext.tsx
|
|
19236
|
-
var
|
|
19237
|
-
var MultiSelectContext = (0,
|
|
19268
|
+
var import_react85 = require("react");
|
|
19269
|
+
var MultiSelectContext = (0, import_react85.createContext)(null);
|
|
19238
19270
|
function useMultiSelectContext() {
|
|
19239
|
-
const ctx = (0,
|
|
19271
|
+
const ctx = (0, import_react85.useContext)(MultiSelectContext);
|
|
19240
19272
|
if (!ctx) throw new Error("useMultiSelectContext must be used within MultiSelectRoot");
|
|
19241
19273
|
return ctx;
|
|
19242
19274
|
}
|
|
19243
19275
|
|
|
19244
19276
|
// src/components/user-interaction/MultiSelect/useMultiSelect.ts
|
|
19245
|
-
var
|
|
19277
|
+
var import_react87 = require("react");
|
|
19246
19278
|
|
|
19247
19279
|
// src/hooks/useMultiSelection.ts
|
|
19248
|
-
var
|
|
19280
|
+
var import_react86 = require("react");
|
|
19249
19281
|
function useMultiSelection({
|
|
19250
19282
|
options: optionsList,
|
|
19251
19283
|
value,
|
|
@@ -19259,8 +19291,8 @@ function useMultiSelection({
|
|
|
19259
19291
|
defaultValue: [...initialSelection],
|
|
19260
19292
|
isControlled
|
|
19261
19293
|
});
|
|
19262
|
-
const isSelected = (0,
|
|
19263
|
-
const toggleSelection = (0,
|
|
19294
|
+
const isSelected = (0, import_react86.useCallback)((id) => selection.includes(id), [selection]);
|
|
19295
|
+
const toggleSelection = (0, import_react86.useCallback)(
|
|
19264
19296
|
(id) => {
|
|
19265
19297
|
const option = optionsList.find((o) => o.id === id);
|
|
19266
19298
|
if (!option || option.disabled) return;
|
|
@@ -19268,11 +19300,11 @@ function useMultiSelection({
|
|
|
19268
19300
|
},
|
|
19269
19301
|
[optionsList, setSelection]
|
|
19270
19302
|
);
|
|
19271
|
-
const setSelectionValue = (0,
|
|
19303
|
+
const setSelectionValue = (0, import_react86.useCallback)(
|
|
19272
19304
|
(next) => setSelection(Array.from(next)),
|
|
19273
19305
|
[setSelection]
|
|
19274
19306
|
);
|
|
19275
|
-
return (0,
|
|
19307
|
+
return (0, import_react86.useMemo)(
|
|
19276
19308
|
() => ({
|
|
19277
19309
|
selection,
|
|
19278
19310
|
setSelection: setSelectionValue,
|
|
@@ -19294,9 +19326,9 @@ function useMultiSelect({
|
|
|
19294
19326
|
initialIsOpen = false,
|
|
19295
19327
|
typeAheadResetMs = 500
|
|
19296
19328
|
}) {
|
|
19297
|
-
const [isOpen, setIsOpen] = (0,
|
|
19298
|
-
const [searchQuery, setSearchQuery] = (0,
|
|
19299
|
-
const selectionOptions = (0,
|
|
19329
|
+
const [isOpen, setIsOpen] = (0, import_react87.useState)(initialIsOpen);
|
|
19330
|
+
const [searchQuery, setSearchQuery] = (0, import_react87.useState)("");
|
|
19331
|
+
const selectionOptions = (0, import_react87.useMemo)(
|
|
19300
19332
|
() => options.map((o) => ({ id: o.id, disabled: o.disabled })),
|
|
19301
19333
|
[options]
|
|
19302
19334
|
);
|
|
@@ -19312,13 +19344,13 @@ function useMultiSelect({
|
|
|
19312
19344
|
const { searchResult: visibleOptions } = useSearch({
|
|
19313
19345
|
items: options,
|
|
19314
19346
|
searchQuery,
|
|
19315
|
-
toTags: (0,
|
|
19347
|
+
toTags: (0, import_react87.useCallback)((o) => [o.label ?? ""], [])
|
|
19316
19348
|
});
|
|
19317
|
-
const visibleOptionIds = (0,
|
|
19349
|
+
const visibleOptionIds = (0, import_react87.useMemo)(
|
|
19318
19350
|
() => visibleOptions.map((o) => o.id),
|
|
19319
19351
|
[visibleOptions]
|
|
19320
19352
|
);
|
|
19321
|
-
const enabledOptions = (0,
|
|
19353
|
+
const enabledOptions = (0, import_react87.useMemo)(
|
|
19322
19354
|
() => visibleOptions.filter((o) => !o.disabled),
|
|
19323
19355
|
[visibleOptions]
|
|
19324
19356
|
);
|
|
@@ -19331,7 +19363,7 @@ function useMultiSelect({
|
|
|
19331
19363
|
options: enabledOptions,
|
|
19332
19364
|
resetTimer: typeAheadResetMs,
|
|
19333
19365
|
toString: (o) => o.label ?? "",
|
|
19334
|
-
onResultChange: (0,
|
|
19366
|
+
onResultChange: (0, import_react87.useCallback)(
|
|
19335
19367
|
(option) => {
|
|
19336
19368
|
if (option) listNav.highlight(option.id);
|
|
19337
19369
|
},
|
|
@@ -19339,14 +19371,14 @@ function useMultiSelect({
|
|
|
19339
19371
|
)
|
|
19340
19372
|
});
|
|
19341
19373
|
const { reset: typeAheadReset, addToTypeAhead } = typeAhead;
|
|
19342
|
-
(0,
|
|
19374
|
+
(0, import_react87.useEffect)(() => {
|
|
19343
19375
|
if (!isOpen) typeAheadReset();
|
|
19344
19376
|
}, [isOpen, typeAheadReset]);
|
|
19345
|
-
const highlightItem = (0,
|
|
19377
|
+
const highlightItem = (0, import_react87.useCallback)((id) => {
|
|
19346
19378
|
if (!enabledOptions.some((o) => o.id === id)) return;
|
|
19347
19379
|
listNavHighlight(id);
|
|
19348
19380
|
}, [enabledOptions, listNavHighlight]);
|
|
19349
|
-
const toggleSelectionValue = (0,
|
|
19381
|
+
const toggleSelectionValue = (0, import_react87.useCallback)((id, newIsSelected) => {
|
|
19350
19382
|
const next = newIsSelected ?? !isSelected(id);
|
|
19351
19383
|
if (next) {
|
|
19352
19384
|
toggleSelection(id);
|
|
@@ -19355,7 +19387,7 @@ function useMultiSelect({
|
|
|
19355
19387
|
}
|
|
19356
19388
|
highlightItem(id);
|
|
19357
19389
|
}, [toggleSelection, setSelection, highlightItem, isSelected, selection]);
|
|
19358
|
-
const setIsOpenWrapper = (0,
|
|
19390
|
+
const setIsOpenWrapper = (0, import_react87.useCallback)(
|
|
19359
19391
|
(open, behavior) => {
|
|
19360
19392
|
setIsOpen(open);
|
|
19361
19393
|
behavior = behavior ?? "first";
|
|
@@ -19386,13 +19418,13 @@ function useMultiSelect({
|
|
|
19386
19418
|
enabledOptions
|
|
19387
19419
|
]
|
|
19388
19420
|
);
|
|
19389
|
-
const toggleOpenWrapper = (0,
|
|
19421
|
+
const toggleOpenWrapper = (0, import_react87.useCallback)(
|
|
19390
19422
|
(behavior) => {
|
|
19391
19423
|
setIsOpenWrapper(!isOpen, behavior);
|
|
19392
19424
|
},
|
|
19393
19425
|
[isOpen, setIsOpenWrapper]
|
|
19394
19426
|
);
|
|
19395
|
-
const state = (0,
|
|
19427
|
+
const state = (0, import_react87.useMemo)(
|
|
19396
19428
|
() => ({
|
|
19397
19429
|
value: [...selection],
|
|
19398
19430
|
highlightedId: listNav.highlightedId,
|
|
@@ -19408,11 +19440,11 @@ function useMultiSelect({
|
|
|
19408
19440
|
options
|
|
19409
19441
|
]
|
|
19410
19442
|
);
|
|
19411
|
-
const computedState = (0,
|
|
19443
|
+
const computedState = (0, import_react87.useMemo)(
|
|
19412
19444
|
() => ({ visibleOptionIds }),
|
|
19413
19445
|
[visibleOptionIds]
|
|
19414
19446
|
);
|
|
19415
|
-
const actions = (0,
|
|
19447
|
+
const actions = (0, import_react87.useMemo)(
|
|
19416
19448
|
() => ({
|
|
19417
19449
|
setIsOpen: setIsOpenWrapper,
|
|
19418
19450
|
toggleOpen: toggleOpenWrapper,
|
|
@@ -19441,7 +19473,7 @@ function useMultiSelect({
|
|
|
19441
19473
|
addToTypeAhead
|
|
19442
19474
|
]
|
|
19443
19475
|
);
|
|
19444
|
-
return (0,
|
|
19476
|
+
return (0, import_react87.useMemo)(
|
|
19445
19477
|
() => ({
|
|
19446
19478
|
...state,
|
|
19447
19479
|
...computedState,
|
|
@@ -19469,16 +19501,16 @@ function MultiSelectRoot({
|
|
|
19469
19501
|
readOnly = false,
|
|
19470
19502
|
required = false
|
|
19471
19503
|
}) {
|
|
19472
|
-
const [triggerRef, setTriggerRef] = (0,
|
|
19473
|
-
const [options, setOptions] = (0,
|
|
19474
|
-
const generatedId = (0,
|
|
19475
|
-
const [ids, setIds] = (0,
|
|
19504
|
+
const [triggerRef, setTriggerRef] = (0, import_react88.useState)(null);
|
|
19505
|
+
const [options, setOptions] = (0, import_react88.useState)([]);
|
|
19506
|
+
const generatedId = (0, import_react88.useId)();
|
|
19507
|
+
const [ids, setIds] = (0, import_react88.useState)({
|
|
19476
19508
|
trigger: "multi-select-" + generatedId,
|
|
19477
19509
|
content: "multi-select-content-" + generatedId,
|
|
19478
19510
|
listbox: "multi-select-listbox-" + generatedId,
|
|
19479
19511
|
searchInput: "multi-select-search-" + generatedId
|
|
19480
19512
|
});
|
|
19481
|
-
const registerOption = (0,
|
|
19513
|
+
const registerOption = (0, import_react88.useCallback)((item) => {
|
|
19482
19514
|
setOptions((prev) => {
|
|
19483
19515
|
const next = prev.filter((o) => o.id !== item.id);
|
|
19484
19516
|
next.push(item);
|
|
@@ -19487,12 +19519,12 @@ function MultiSelectRoot({
|
|
|
19487
19519
|
});
|
|
19488
19520
|
return () => setOptions((prev) => prev.filter((o) => o.id !== item.id));
|
|
19489
19521
|
}, []);
|
|
19490
|
-
const registerTrigger = (0,
|
|
19522
|
+
const registerTrigger = (0, import_react88.useCallback)((ref) => {
|
|
19491
19523
|
setTriggerRef(ref);
|
|
19492
19524
|
return () => setTriggerRef(null);
|
|
19493
19525
|
}, []);
|
|
19494
|
-
const compare = (0,
|
|
19495
|
-
const idToOptionMap = (0,
|
|
19526
|
+
const compare = (0, import_react88.useMemo)(() => compareFunction ?? Object.is, [compareFunction]);
|
|
19527
|
+
const idToOptionMap = (0, import_react88.useMemo)(
|
|
19496
19528
|
() => options.reduce(
|
|
19497
19529
|
(acc, o) => {
|
|
19498
19530
|
acc[o.id] = o;
|
|
@@ -19502,22 +19534,22 @@ function MultiSelectRoot({
|
|
|
19502
19534
|
),
|
|
19503
19535
|
[options]
|
|
19504
19536
|
);
|
|
19505
|
-
const mappedValueIds = (0,
|
|
19537
|
+
const mappedValueIds = (0, import_react88.useMemo)(() => {
|
|
19506
19538
|
if (value == null) return void 0;
|
|
19507
19539
|
return value.map((v) => options.find((o) => compare(o.value, v))?.id).filter((id) => id !== void 0);
|
|
19508
19540
|
}, [options, value, compare]);
|
|
19509
|
-
const mappedInitialValueIds = (0,
|
|
19541
|
+
const mappedInitialValueIds = (0, import_react88.useMemo)(() => {
|
|
19510
19542
|
if (initialValue == null) return [];
|
|
19511
19543
|
return initialValue.map((v) => options.find((o) => compare(o.value, v))?.id).filter((id) => id !== void 0);
|
|
19512
19544
|
}, [options, initialValue, compare]);
|
|
19513
|
-
const onValueChangeStable = (0,
|
|
19545
|
+
const onValueChangeStable = (0, import_react88.useCallback)(
|
|
19514
19546
|
(ids2) => {
|
|
19515
19547
|
const values = ids2.map((id) => idToOptionMap[id]?.value).filter((v) => v != null);
|
|
19516
19548
|
onValueChange?.(values);
|
|
19517
19549
|
},
|
|
19518
19550
|
[idToOptionMap, onValueChange]
|
|
19519
19551
|
);
|
|
19520
|
-
const onEditCompleteStable = (0,
|
|
19552
|
+
const onEditCompleteStable = (0, import_react88.useCallback)(
|
|
19521
19553
|
(ids2) => {
|
|
19522
19554
|
const values = ids2.map((id) => idToOptionMap[id]?.value).filter((v) => v != null);
|
|
19523
19555
|
onEditComplete?.(values);
|
|
@@ -19534,12 +19566,12 @@ function MultiSelectRoot({
|
|
|
19534
19566
|
onClose
|
|
19535
19567
|
});
|
|
19536
19568
|
const { setSearchQuery } = state;
|
|
19537
|
-
(0,
|
|
19569
|
+
(0, import_react88.useEffect)(() => {
|
|
19538
19570
|
if (showSearch === false) {
|
|
19539
19571
|
setSearchQuery("");
|
|
19540
19572
|
}
|
|
19541
19573
|
}, [showSearch, setSearchQuery]);
|
|
19542
|
-
const contextValue = (0,
|
|
19574
|
+
const contextValue = (0, import_react88.useMemo)(() => {
|
|
19543
19575
|
const valueT = state.value.map((id) => idToOptionMap[id]?.value).filter((v) => v != null);
|
|
19544
19576
|
return {
|
|
19545
19577
|
invalid,
|
|
@@ -19610,16 +19642,16 @@ function MultiSelectRoot({
|
|
|
19610
19642
|
}
|
|
19611
19643
|
|
|
19612
19644
|
// src/components/user-interaction/MultiSelect/MultiSelectButton.tsx
|
|
19613
|
-
var
|
|
19645
|
+
var import_react90 = require("react");
|
|
19614
19646
|
|
|
19615
19647
|
// src/components/user-interaction/MultiSelect/MultiSelectOption.tsx
|
|
19616
19648
|
var import_clsx32 = __toESM(require("clsx"));
|
|
19617
19649
|
var import_lucide_react23 = require("lucide-react");
|
|
19618
|
-
var
|
|
19650
|
+
var import_react89 = require("react");
|
|
19619
19651
|
var import_jsx_runtime80 = require("react/jsx-runtime");
|
|
19620
|
-
var MultiSelectOptionDisplayContext = (0,
|
|
19652
|
+
var MultiSelectOptionDisplayContext = (0, import_react89.createContext)(null);
|
|
19621
19653
|
function useMultiSelectOptionDisplayLocation() {
|
|
19622
|
-
const context = (0,
|
|
19654
|
+
const context = (0, import_react89.useContext)(MultiSelectOptionDisplayContext);
|
|
19623
19655
|
if (!context) {
|
|
19624
19656
|
throw new Error(
|
|
19625
19657
|
"useMultiSelectOptionDisplayLocation must be used within a MultiSelectOptionDisplayContext"
|
|
@@ -19627,7 +19659,7 @@ function useMultiSelectOptionDisplayLocation() {
|
|
|
19627
19659
|
}
|
|
19628
19660
|
return context;
|
|
19629
19661
|
}
|
|
19630
|
-
var MultiSelectOption = (0,
|
|
19662
|
+
var MultiSelectOption = (0, import_react89.forwardRef)(function MultiSelectOption2({
|
|
19631
19663
|
children,
|
|
19632
19664
|
label,
|
|
19633
19665
|
value,
|
|
@@ -19637,12 +19669,12 @@ var MultiSelectOption = (0, import_react90.forwardRef)(function MultiSelectOptio
|
|
|
19637
19669
|
}, ref) {
|
|
19638
19670
|
const context = useMultiSelectContext();
|
|
19639
19671
|
const { registerOption } = context;
|
|
19640
|
-
const itemRef = (0,
|
|
19672
|
+
const itemRef = (0, import_react89.useRef)(null);
|
|
19641
19673
|
const display = children ?? label;
|
|
19642
19674
|
const iconAppearanceResolved = iconAppearance ?? context.config.iconAppearance;
|
|
19643
|
-
const generatedId = (0,
|
|
19675
|
+
const generatedId = (0, import_react89.useId)();
|
|
19644
19676
|
const optionId = props?.id ?? "multi-select-option-" + generatedId;
|
|
19645
|
-
(0,
|
|
19677
|
+
(0, import_react89.useEffect)(() => {
|
|
19646
19678
|
return registerOption({
|
|
19647
19679
|
id: optionId,
|
|
19648
19680
|
value,
|
|
@@ -19710,7 +19742,7 @@ var MultiSelectOption = (0, import_react90.forwardRef)(function MultiSelectOptio
|
|
|
19710
19742
|
|
|
19711
19743
|
// src/components/user-interaction/MultiSelect/MultiSelectButton.tsx
|
|
19712
19744
|
var import_jsx_runtime81 = require("react/jsx-runtime");
|
|
19713
|
-
var MultiSelectButton = (0,
|
|
19745
|
+
var MultiSelectButton = (0, import_react90.forwardRef)(function MultiSelectButton2({
|
|
19714
19746
|
id,
|
|
19715
19747
|
placeholder,
|
|
19716
19748
|
disabled: disabledOverride,
|
|
@@ -19723,12 +19755,12 @@ var MultiSelectButton = (0, import_react91.forwardRef)(function MultiSelectButto
|
|
|
19723
19755
|
const { config, layout } = context;
|
|
19724
19756
|
const { setIds } = config;
|
|
19725
19757
|
const { registerTrigger } = layout;
|
|
19726
|
-
(0,
|
|
19758
|
+
(0, import_react90.useEffect)(() => {
|
|
19727
19759
|
if (id) setIds((prev) => ({ ...prev, trigger: id }));
|
|
19728
19760
|
}, [id, setIds]);
|
|
19729
|
-
const innerRef = (0,
|
|
19730
|
-
(0,
|
|
19731
|
-
(0,
|
|
19761
|
+
const innerRef = (0, import_react90.useRef)(null);
|
|
19762
|
+
(0, import_react90.useImperativeHandle)(ref, () => innerRef.current);
|
|
19763
|
+
(0, import_react90.useEffect)(() => {
|
|
19732
19764
|
const unregister = registerTrigger(innerRef);
|
|
19733
19765
|
return () => unregister();
|
|
19734
19766
|
}, [registerTrigger]);
|
|
@@ -19796,23 +19828,23 @@ var MultiSelectButton = (0, import_react91.forwardRef)(function MultiSelectButto
|
|
|
19796
19828
|
});
|
|
19797
19829
|
|
|
19798
19830
|
// src/components/user-interaction/MultiSelect/MultiSelectContent.tsx
|
|
19799
|
-
var
|
|
19831
|
+
var import_react91 = require("react");
|
|
19800
19832
|
var import_clsx33 = __toESM(require("clsx"));
|
|
19801
19833
|
var import_jsx_runtime82 = require("react/jsx-runtime");
|
|
19802
|
-
var MultiSelectContent = (0,
|
|
19834
|
+
var MultiSelectContent = (0, import_react91.forwardRef)(function MultiSelectContent2({ id, options, showSearch: showSearchOverride, searchInputProps, ...props }, ref) {
|
|
19803
19835
|
const translation = useHightideTranslation();
|
|
19804
|
-
const innerRef = (0,
|
|
19805
|
-
const searchInputRef = (0,
|
|
19806
|
-
(0,
|
|
19836
|
+
const innerRef = (0, import_react91.useRef)(null);
|
|
19837
|
+
const searchInputRef = (0, import_react91.useRef)(null);
|
|
19838
|
+
(0, import_react91.useImperativeHandle)(ref, () => innerRef.current);
|
|
19807
19839
|
const context = useMultiSelectContext();
|
|
19808
19840
|
const { config, highlightNext, highlightPrevious, highlightFirst, highlightLast, highlightedId, handleTypeaheadKey, toggleSelection } = context;
|
|
19809
19841
|
const { setIds } = config;
|
|
19810
|
-
(0,
|
|
19842
|
+
(0, import_react91.useEffect)(() => {
|
|
19811
19843
|
if (id) setIds((prev) => ({ ...prev, content: id }));
|
|
19812
19844
|
}, [id, setIds]);
|
|
19813
19845
|
const showSearch = showSearchOverride ?? context.search.hasSearch;
|
|
19814
19846
|
const listboxAriaLabel = showSearch ? translation("searchResults") : void 0;
|
|
19815
|
-
const keyHandler = (0,
|
|
19847
|
+
const keyHandler = (0, import_react91.useCallback)(
|
|
19816
19848
|
(event) => {
|
|
19817
19849
|
switch (event.key) {
|
|
19818
19850
|
case "ArrowDown":
|
|
@@ -19926,7 +19958,7 @@ var MultiSelectContent = (0, import_react92.forwardRef)(function MultiSelectCont
|
|
|
19926
19958
|
|
|
19927
19959
|
// src/components/user-interaction/MultiSelect/MultiSelect.tsx
|
|
19928
19960
|
var import_jsx_runtime83 = require("react/jsx-runtime");
|
|
19929
|
-
var MultiSelect = (0,
|
|
19961
|
+
var MultiSelect = (0, import_react92.forwardRef)(
|
|
19930
19962
|
function MultiSelect2({ children, contentPanelProps, buttonProps, ...props }, ref) {
|
|
19931
19963
|
return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(MultiSelectRoot, { ...props, children: [
|
|
19932
19964
|
/* @__PURE__ */ (0, import_jsx_runtime83.jsx)(MultiSelectButton, { ref, ...buttonProps }),
|
|
@@ -19952,7 +19984,7 @@ var FilterOperatorLabel = ({ operator }) => {
|
|
|
19952
19984
|
|
|
19953
19985
|
// src/components/user-interaction/data/FilterPopUp.tsx
|
|
19954
19986
|
var import_jsx_runtime85 = require("react/jsx-runtime");
|
|
19955
|
-
var FilterBasePopUp = (0,
|
|
19987
|
+
var FilterBasePopUp = (0, import_react93.forwardRef)(function FilterBasePopUp2({
|
|
19956
19988
|
children,
|
|
19957
19989
|
name,
|
|
19958
19990
|
operator,
|
|
@@ -19964,11 +19996,11 @@ var FilterBasePopUp = (0, import_react94.forwardRef)(function FilterBasePopUp2({
|
|
|
19964
19996
|
...props
|
|
19965
19997
|
}, ref) {
|
|
19966
19998
|
const translation = useHightideTranslation();
|
|
19967
|
-
const operators = (0,
|
|
19999
|
+
const operators = (0, import_react93.useMemo)(() => {
|
|
19968
20000
|
if (!operatorOverrides || operatorOverrides.length === 0) return allowedOperators;
|
|
19969
20001
|
return allowedOperators.filter((op) => operatorOverrides.includes(op));
|
|
19970
20002
|
}, [allowedOperators, operatorOverrides]);
|
|
19971
|
-
(0,
|
|
20003
|
+
(0, import_react93.useEffect)(() => {
|
|
19972
20004
|
if (operators.length === 0) {
|
|
19973
20005
|
onRemove();
|
|
19974
20006
|
}
|
|
@@ -20029,7 +20061,7 @@ var FilterBasePopUp = (0, import_react94.forwardRef)(function FilterBasePopUp2({
|
|
|
20029
20061
|
}
|
|
20030
20062
|
);
|
|
20031
20063
|
});
|
|
20032
|
-
var TextFilterPopUp = (0,
|
|
20064
|
+
var TextFilterPopUp = (0, import_react93.forwardRef)(function TextFilterPopUp2({
|
|
20033
20065
|
name,
|
|
20034
20066
|
value,
|
|
20035
20067
|
onValueChange,
|
|
@@ -20037,12 +20069,12 @@ var TextFilterPopUp = (0, import_react94.forwardRef)(function TextFilterPopUp2({
|
|
|
20037
20069
|
...props
|
|
20038
20070
|
}, ref) {
|
|
20039
20071
|
const translation = useHightideTranslation();
|
|
20040
|
-
const id = (0,
|
|
20072
|
+
const id = (0, import_react93.useId)();
|
|
20041
20073
|
const ids = {
|
|
20042
20074
|
search: `text-filter-search-${id}`,
|
|
20043
20075
|
caseSensitive: `text-filter-case-sensitive-${id}`
|
|
20044
20076
|
};
|
|
20045
|
-
const operator = (0,
|
|
20077
|
+
const operator = (0, import_react93.useMemo)(() => {
|
|
20046
20078
|
const suggestion = value?.operator ?? "contains";
|
|
20047
20079
|
if (!FilterOperatorUtils.typeCheck.text(suggestion)) {
|
|
20048
20080
|
return "contains";
|
|
@@ -20084,7 +20116,7 @@ var TextFilterPopUp = (0, import_react94.forwardRef)(function TextFilterPopUp2({
|
|
|
20084
20116
|
}
|
|
20085
20117
|
);
|
|
20086
20118
|
});
|
|
20087
|
-
var NumberFilterPopUp = (0,
|
|
20119
|
+
var NumberFilterPopUp = (0, import_react93.forwardRef)(function NumberFilterPopUp2({
|
|
20088
20120
|
name,
|
|
20089
20121
|
value,
|
|
20090
20122
|
onValueChange,
|
|
@@ -20092,13 +20124,13 @@ var NumberFilterPopUp = (0, import_react94.forwardRef)(function NumberFilterPopU
|
|
|
20092
20124
|
...props
|
|
20093
20125
|
}, ref) {
|
|
20094
20126
|
const translation = useHightideTranslation();
|
|
20095
|
-
const id = (0,
|
|
20127
|
+
const id = (0, import_react93.useId)();
|
|
20096
20128
|
const ids = {
|
|
20097
20129
|
min: `number-filter-min-${id}`,
|
|
20098
20130
|
max: `number-filter-max-${id}`,
|
|
20099
20131
|
compareValue: `number-filter-compare-value-${id}`
|
|
20100
20132
|
};
|
|
20101
|
-
const operator = (0,
|
|
20133
|
+
const operator = (0, import_react93.useMemo)(() => {
|
|
20102
20134
|
const suggestion = value?.operator ?? "between";
|
|
20103
20135
|
if (!FilterOperatorUtils.typeCheck.number(suggestion)) {
|
|
20104
20136
|
return "between";
|
|
@@ -20187,7 +20219,7 @@ var NumberFilterPopUp = (0, import_react94.forwardRef)(function NumberFilterPopU
|
|
|
20187
20219
|
}
|
|
20188
20220
|
);
|
|
20189
20221
|
});
|
|
20190
|
-
var DateFilterPopUp = (0,
|
|
20222
|
+
var DateFilterPopUp = (0, import_react93.forwardRef)(function DateFilterPopUp2({
|
|
20191
20223
|
name,
|
|
20192
20224
|
value,
|
|
20193
20225
|
onValueChange,
|
|
@@ -20195,13 +20227,13 @@ var DateFilterPopUp = (0, import_react94.forwardRef)(function DateFilterPopUp2({
|
|
|
20195
20227
|
...props
|
|
20196
20228
|
}, ref) {
|
|
20197
20229
|
const translation = useHightideTranslation();
|
|
20198
|
-
const id = (0,
|
|
20230
|
+
const id = (0, import_react93.useId)();
|
|
20199
20231
|
const ids = {
|
|
20200
20232
|
startDate: `date-filter-start-date-${id}`,
|
|
20201
20233
|
endDate: `date-filter-end-date-${id}`,
|
|
20202
20234
|
compareDate: `date-filter-compare-date-${id}`
|
|
20203
20235
|
};
|
|
20204
|
-
const operator = (0,
|
|
20236
|
+
const operator = (0, import_react93.useMemo)(() => {
|
|
20205
20237
|
const suggestion = value?.operator ?? "between";
|
|
20206
20238
|
if (!FilterOperatorUtils.typeCheck.date(suggestion)) {
|
|
20207
20239
|
return "between";
|
|
@@ -20209,8 +20241,8 @@ var DateFilterPopUp = (0, import_react94.forwardRef)(function DateFilterPopUp2({
|
|
|
20209
20241
|
return suggestion;
|
|
20210
20242
|
}, [value]);
|
|
20211
20243
|
const parameter = value?.parameter ?? {};
|
|
20212
|
-
const [temporaryMinDateValue, setTemporaryMinDateValue] = (0,
|
|
20213
|
-
const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0,
|
|
20244
|
+
const [temporaryMinDateValue, setTemporaryMinDateValue] = (0, import_react93.useState)(null);
|
|
20245
|
+
const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0, import_react93.useState)(null);
|
|
20214
20246
|
const needsRangeInput = operator === "between" || operator === "notBetween";
|
|
20215
20247
|
const needsParameterInput = operator !== "isUndefined" && operator !== "isNotUndefined";
|
|
20216
20248
|
return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
|
|
@@ -20329,7 +20361,7 @@ var DateFilterPopUp = (0, import_react94.forwardRef)(function DateFilterPopUp2({
|
|
|
20329
20361
|
}
|
|
20330
20362
|
);
|
|
20331
20363
|
});
|
|
20332
|
-
var DatetimeFilterPopUp = (0,
|
|
20364
|
+
var DatetimeFilterPopUp = (0, import_react93.forwardRef)(function DatetimeFilterPopUp2({
|
|
20333
20365
|
name,
|
|
20334
20366
|
value,
|
|
20335
20367
|
onValueChange,
|
|
@@ -20337,13 +20369,13 @@ var DatetimeFilterPopUp = (0, import_react94.forwardRef)(function DatetimeFilter
|
|
|
20337
20369
|
...props
|
|
20338
20370
|
}, ref) {
|
|
20339
20371
|
const translation = useHightideTranslation();
|
|
20340
|
-
const id = (0,
|
|
20372
|
+
const id = (0, import_react93.useId)();
|
|
20341
20373
|
const ids = {
|
|
20342
20374
|
startDate: `datetime-filter-start-date-${id}`,
|
|
20343
20375
|
endDate: `datetime-filter-end-date-${id}`,
|
|
20344
20376
|
compareDate: `datetime-filter-compare-date-${id}`
|
|
20345
20377
|
};
|
|
20346
|
-
const operator = (0,
|
|
20378
|
+
const operator = (0, import_react93.useMemo)(() => {
|
|
20347
20379
|
const suggestion = value?.operator ?? "between";
|
|
20348
20380
|
if (!FilterOperatorUtils.typeCheck.datetime(suggestion)) {
|
|
20349
20381
|
return "between";
|
|
@@ -20351,8 +20383,8 @@ var DatetimeFilterPopUp = (0, import_react94.forwardRef)(function DatetimeFilter
|
|
|
20351
20383
|
return suggestion;
|
|
20352
20384
|
}, [value]);
|
|
20353
20385
|
const parameter = value?.parameter ?? {};
|
|
20354
|
-
const [temporaryMinDateValue, setTemporaryMinDateValue] = (0,
|
|
20355
|
-
const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0,
|
|
20386
|
+
const [temporaryMinDateValue, setTemporaryMinDateValue] = (0, import_react93.useState)(null);
|
|
20387
|
+
const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0, import_react93.useState)(null);
|
|
20356
20388
|
const needsRangeInput = operator === "between" || operator === "notBetween";
|
|
20357
20389
|
const needsParameterInput = operator !== "isUndefined" && operator !== "isNotUndefined";
|
|
20358
20390
|
return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
|
|
@@ -20471,14 +20503,14 @@ var DatetimeFilterPopUp = (0, import_react94.forwardRef)(function DatetimeFilter
|
|
|
20471
20503
|
}
|
|
20472
20504
|
);
|
|
20473
20505
|
});
|
|
20474
|
-
var BooleanFilterPopUp = (0,
|
|
20506
|
+
var BooleanFilterPopUp = (0, import_react93.forwardRef)(function BooleanFilterPopUp2({
|
|
20475
20507
|
name,
|
|
20476
20508
|
value,
|
|
20477
20509
|
onValueChange,
|
|
20478
20510
|
onRemove,
|
|
20479
20511
|
...props
|
|
20480
20512
|
}, ref) {
|
|
20481
|
-
const operator = (0,
|
|
20513
|
+
const operator = (0, import_react93.useMemo)(() => {
|
|
20482
20514
|
const suggestion = value?.operator ?? "isTrue";
|
|
20483
20515
|
if (!FilterOperatorUtils.typeCheck.boolean(suggestion)) {
|
|
20484
20516
|
return "isTrue";
|
|
@@ -20499,7 +20531,7 @@ var BooleanFilterPopUp = (0, import_react94.forwardRef)(function BooleanFilterPo
|
|
|
20499
20531
|
}
|
|
20500
20532
|
);
|
|
20501
20533
|
});
|
|
20502
|
-
var TagsFilterPopUp = (0,
|
|
20534
|
+
var TagsFilterPopUp = (0, import_react93.forwardRef)(function TagsFilterPopUp2({
|
|
20503
20535
|
name,
|
|
20504
20536
|
value,
|
|
20505
20537
|
onValueChange,
|
|
@@ -20508,7 +20540,7 @@ var TagsFilterPopUp = (0, import_react94.forwardRef)(function TagsFilterPopUp2({
|
|
|
20508
20540
|
...props
|
|
20509
20541
|
}, ref) {
|
|
20510
20542
|
const translation = useHightideTranslation();
|
|
20511
|
-
const operator = (0,
|
|
20543
|
+
const operator = (0, import_react93.useMemo)(() => {
|
|
20512
20544
|
const suggestion = value?.operator ?? "contains";
|
|
20513
20545
|
if (!FilterOperatorUtils.typeCheck.tags(suggestion)) {
|
|
20514
20546
|
return "contains";
|
|
@@ -20553,7 +20585,7 @@ var TagsFilterPopUp = (0, import_react94.forwardRef)(function TagsFilterPopUp2({
|
|
|
20553
20585
|
}
|
|
20554
20586
|
);
|
|
20555
20587
|
});
|
|
20556
|
-
var TagsSingleFilterPopUp = (0,
|
|
20588
|
+
var TagsSingleFilterPopUp = (0, import_react93.forwardRef)(function TagsSingleFilterPopUp2({
|
|
20557
20589
|
name,
|
|
20558
20590
|
value,
|
|
20559
20591
|
onValueChange,
|
|
@@ -20562,7 +20594,7 @@ var TagsSingleFilterPopUp = (0, import_react94.forwardRef)(function TagsSingleFi
|
|
|
20562
20594
|
...props
|
|
20563
20595
|
}, ref) {
|
|
20564
20596
|
const translation = useHightideTranslation();
|
|
20565
|
-
const operator = (0,
|
|
20597
|
+
const operator = (0, import_react93.useMemo)(() => {
|
|
20566
20598
|
const suggestion = value?.operator ?? "contains";
|
|
20567
20599
|
if (!FilterOperatorUtils.typeCheck.tagsSingle(suggestion)) {
|
|
20568
20600
|
return "contains";
|
|
@@ -20624,8 +20656,8 @@ var TagsSingleFilterPopUp = (0, import_react94.forwardRef)(function TagsSingleFi
|
|
|
20624
20656
|
}
|
|
20625
20657
|
);
|
|
20626
20658
|
});
|
|
20627
|
-
var GenericFilterPopUp = (0,
|
|
20628
|
-
const operator = (0,
|
|
20659
|
+
var GenericFilterPopUp = (0, import_react93.forwardRef)(function GenericFilterPopUp2({ name, value, onValueChange, ...props }, ref) {
|
|
20660
|
+
const operator = (0, import_react93.useMemo)(() => {
|
|
20629
20661
|
const suggestion = value?.operator ?? "isNotUndefined";
|
|
20630
20662
|
if (!FilterOperatorUtils.typeCheck.unknownType(suggestion)) {
|
|
20631
20663
|
return "isNotUndefined";
|
|
@@ -20645,7 +20677,7 @@ var GenericFilterPopUp = (0, import_react94.forwardRef)(function GenericFilterPo
|
|
|
20645
20677
|
}
|
|
20646
20678
|
);
|
|
20647
20679
|
});
|
|
20648
|
-
var FilterPopUp = (0,
|
|
20680
|
+
var FilterPopUp = (0, import_react93.forwardRef)(function FilterPopUp2({
|
|
20649
20681
|
name,
|
|
20650
20682
|
value,
|
|
20651
20683
|
onValueChange,
|
|
@@ -20682,18 +20714,18 @@ var TableFilterButton = ({
|
|
|
20682
20714
|
const translation = useHightideTranslation();
|
|
20683
20715
|
const column = header.column;
|
|
20684
20716
|
const columnFilterValue = column.getFilterValue();
|
|
20685
|
-
const [filterValue, setFilterValue] = (0,
|
|
20717
|
+
const [filterValue, setFilterValue] = (0, import_react94.useState)(columnFilterValue);
|
|
20686
20718
|
const hasFilter = !!filterValue;
|
|
20687
|
-
const anchorRef = (0,
|
|
20688
|
-
const containerRef = (0,
|
|
20689
|
-
const [isOpen, setIsOpen] = (0,
|
|
20690
|
-
const id = (0,
|
|
20691
|
-
const ids = (0,
|
|
20719
|
+
const anchorRef = (0, import_react94.useRef)(null);
|
|
20720
|
+
const containerRef = (0, import_react94.useRef)(null);
|
|
20721
|
+
const [isOpen, setIsOpen] = (0, import_react94.useState)(false);
|
|
20722
|
+
const id = (0, import_react94.useId)();
|
|
20723
|
+
const ids = (0, import_react94.useMemo)(() => ({
|
|
20692
20724
|
button: `table-filter-button-${id}`,
|
|
20693
20725
|
popup: `table-filter-popup-${id}`,
|
|
20694
20726
|
label: `table-filter-label-${id}`
|
|
20695
20727
|
}), [id]);
|
|
20696
|
-
(0,
|
|
20728
|
+
(0, import_react94.useEffect)(() => {
|
|
20697
20729
|
setFilterValue(columnFilterValue);
|
|
20698
20730
|
}, [columnFilterValue]);
|
|
20699
20731
|
const isTagsFilter = filterType === "multiTags" || filterType === "singleTag";
|
|
@@ -20754,7 +20786,7 @@ var TableFilterButton = ({
|
|
|
20754
20786
|
};
|
|
20755
20787
|
|
|
20756
20788
|
// src/components/layout/table/TableHeader.tsx
|
|
20757
|
-
var
|
|
20789
|
+
var import_react95 = require("react");
|
|
20758
20790
|
|
|
20759
20791
|
// src/components/user-interaction/data/data-types.tsx
|
|
20760
20792
|
var import_lucide_react26 = require("lucide-react");
|
|
@@ -20818,7 +20850,7 @@ var DataTypeUtils = {
|
|
|
20818
20850
|
var import_jsx_runtime88 = require("react/jsx-runtime");
|
|
20819
20851
|
var TableHeader = ({ isSticky = false }) => {
|
|
20820
20852
|
const { table } = useTableStateWithoutSizingContext();
|
|
20821
|
-
const handleResizeMove = (0,
|
|
20853
|
+
const handleResizeMove = (0, import_react95.useCallback)((e) => {
|
|
20822
20854
|
if (!table.getState().columnSizingInfo.isResizingColumn) return;
|
|
20823
20855
|
const currentX = "touches" in e ? e.touches[0].clientX : e.clientX;
|
|
20824
20856
|
const deltaOffset = currentX - (table.getState().columnSizingInfo.startOffset ?? 0);
|
|
@@ -20834,7 +20866,7 @@ var TableHeader = ({ isSticky = false }) => {
|
|
|
20834
20866
|
deltaOffset
|
|
20835
20867
|
}));
|
|
20836
20868
|
}, [table]);
|
|
20837
|
-
const handleResizeEnd = (0,
|
|
20869
|
+
const handleResizeEnd = (0, import_react95.useCallback)(() => {
|
|
20838
20870
|
if (!table.getState().columnSizingInfo.isResizingColumn) return;
|
|
20839
20871
|
const newWidth = (table.getState().columnSizingInfo.startSize ?? 0) + (table.getState().columnSizingInfo.deltaOffset ?? 0);
|
|
20840
20872
|
table.setColumnSizing((prev) => {
|
|
@@ -20852,7 +20884,7 @@ var TableHeader = ({ isSticky = false }) => {
|
|
|
20852
20884
|
startSize: null
|
|
20853
20885
|
});
|
|
20854
20886
|
}, [table]);
|
|
20855
|
-
(0,
|
|
20887
|
+
(0, import_react95.useEffect)(() => {
|
|
20856
20888
|
window.addEventListener("pointermove", handleResizeMove);
|
|
20857
20889
|
window.addEventListener("pointerup", handleResizeEnd);
|
|
20858
20890
|
return () => {
|
|
@@ -20951,7 +20983,7 @@ var TableHeader = ({ isSticky = false }) => {
|
|
|
20951
20983
|
};
|
|
20952
20984
|
|
|
20953
20985
|
// src/components/layout/table/VirtualizedTableBody.tsx
|
|
20954
|
-
var
|
|
20986
|
+
var import_react96 = require("react");
|
|
20955
20987
|
var import_react_table5 = require("@tanstack/react-table");
|
|
20956
20988
|
var import_react_virtual = require("@tanstack/react-virtual");
|
|
20957
20989
|
var import_clsx36 = __toESM(require("clsx"));
|
|
@@ -20964,11 +20996,11 @@ var VirtualizedTableBody = ({
|
|
|
20964
20996
|
const { table, onRowClick } = useTableStateWithoutSizingContext();
|
|
20965
20997
|
const { containerRef } = useTableContainerContext();
|
|
20966
20998
|
const rows = table.getRowModel().rows;
|
|
20967
|
-
const bodyRef = (0,
|
|
20968
|
-
const [isMounted, setIsMounted] = (0,
|
|
20969
|
-
const [scrollMargin, setScrollMargin] = (0,
|
|
20970
|
-
(0,
|
|
20971
|
-
(0,
|
|
20999
|
+
const bodyRef = (0, import_react96.useRef)(null);
|
|
21000
|
+
const [isMounted, setIsMounted] = (0, import_react96.useState)(false);
|
|
21001
|
+
const [scrollMargin, setScrollMargin] = (0, import_react96.useState)(0);
|
|
21002
|
+
(0, import_react96.useEffect)(() => setIsMounted(true), []);
|
|
21003
|
+
(0, import_react96.useEffect)(() => {
|
|
20972
21004
|
if (scroll !== "window") return;
|
|
20973
21005
|
const element = bodyRef.current;
|
|
20974
21006
|
if (!element || typeof window === "undefined") return;
|
|
@@ -21100,7 +21132,7 @@ var TablePagination = ({ allowChangingPageSize = true, pageSizeOptions, ...props
|
|
|
21100
21132
|
|
|
21101
21133
|
// src/components/user-interaction/Checkbox.tsx
|
|
21102
21134
|
var import_lucide_react27 = require("lucide-react");
|
|
21103
|
-
var
|
|
21135
|
+
var import_react97 = require("react");
|
|
21104
21136
|
var import_jsx_runtime92 = require("react/jsx-runtime");
|
|
21105
21137
|
var Checkbox = ({
|
|
21106
21138
|
value: controlledValue,
|
|
@@ -21119,7 +21151,7 @@ var Checkbox = ({
|
|
|
21119
21151
|
}) => {
|
|
21120
21152
|
const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
|
|
21121
21153
|
const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
|
|
21122
|
-
const onChangeWrapper = (0,
|
|
21154
|
+
const onChangeWrapper = (0, import_react97.useCallback)((value2) => {
|
|
21123
21155
|
onValueChangeStable(value2);
|
|
21124
21156
|
onEditCompleteStable(value2);
|
|
21125
21157
|
}, [onValueChangeStable, onEditCompleteStable]);
|
|
@@ -21164,7 +21196,7 @@ var Checkbox = ({
|
|
|
21164
21196
|
};
|
|
21165
21197
|
|
|
21166
21198
|
// src/components/layout/table/TableWithSelectionProvider.tsx
|
|
21167
|
-
var
|
|
21199
|
+
var import_react98 = require("react");
|
|
21168
21200
|
var import_jsx_runtime93 = require("react/jsx-runtime");
|
|
21169
21201
|
var TableWithSelectionProvider = ({
|
|
21170
21202
|
children,
|
|
@@ -21177,7 +21209,7 @@ var TableWithSelectionProvider = ({
|
|
|
21177
21209
|
...props
|
|
21178
21210
|
}) => {
|
|
21179
21211
|
const translation = useHightideTranslation();
|
|
21180
|
-
const columnDef = (0,
|
|
21212
|
+
const columnDef = (0, import_react98.useMemo)(() => [
|
|
21181
21213
|
{
|
|
21182
21214
|
id: selectionRowId,
|
|
21183
21215
|
header: ({ table }) => {
|
|
@@ -21220,7 +21252,7 @@ var TableWithSelectionProvider = ({
|
|
|
21220
21252
|
TableProvider,
|
|
21221
21253
|
{
|
|
21222
21254
|
...props,
|
|
21223
|
-
fillerRowCell: (0,
|
|
21255
|
+
fillerRowCell: (0, import_react98.useCallback)((columnId, table) => {
|
|
21224
21256
|
if (columnId === selectionRowId) {
|
|
21225
21257
|
return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Checkbox, { value: false, disabled: true });
|
|
21226
21258
|
}
|
|
@@ -21238,7 +21270,7 @@ var TableWithSelectionProvider = ({
|
|
|
21238
21270
|
rowSelection,
|
|
21239
21271
|
...state
|
|
21240
21272
|
},
|
|
21241
|
-
onRowClick: (0,
|
|
21273
|
+
onRowClick: (0, import_react98.useCallback)((row, table) => {
|
|
21242
21274
|
if (!disableClickRowClickSelection) {
|
|
21243
21275
|
row.toggleSelected();
|
|
21244
21276
|
}
|
|
@@ -21280,7 +21312,7 @@ var TableWithSelection = ({
|
|
|
21280
21312
|
};
|
|
21281
21313
|
|
|
21282
21314
|
// src/components/layout/table/TableColumn.tsx
|
|
21283
|
-
var
|
|
21315
|
+
var import_react99 = require("react");
|
|
21284
21316
|
var import_jsx_runtime95 = require("react/jsx-runtime");
|
|
21285
21317
|
var TableColumnComponent = ({
|
|
21286
21318
|
filterType,
|
|
@@ -21292,11 +21324,11 @@ var TableColumnComponent = ({
|
|
|
21292
21324
|
"TableColumn: For filterType === multiTags or singleTag, filterData.tags must be set.",
|
|
21293
21325
|
(filterType === "multiTags" || filterType === "singleTag") && props.meta?.filterData?.tags === void 0
|
|
21294
21326
|
);
|
|
21295
|
-
const [column] = (0,
|
|
21327
|
+
const [column] = (0, import_react99.useState)({
|
|
21296
21328
|
...props,
|
|
21297
21329
|
filterFn
|
|
21298
21330
|
});
|
|
21299
|
-
(0,
|
|
21331
|
+
(0, import_react99.useEffect)(() => {
|
|
21300
21332
|
const unsubscribe = registerColumn(column);
|
|
21301
21333
|
return () => {
|
|
21302
21334
|
unsubscribe();
|
|
@@ -21304,27 +21336,27 @@ var TableColumnComponent = ({
|
|
|
21304
21336
|
}, [registerColumn, column]);
|
|
21305
21337
|
return null;
|
|
21306
21338
|
};
|
|
21307
|
-
var TableColumnFactory = () => (0,
|
|
21339
|
+
var TableColumnFactory = () => (0, import_react99.memo)(
|
|
21308
21340
|
TableColumnComponent,
|
|
21309
21341
|
(prevProps, nextProps) => {
|
|
21310
21342
|
return prevProps.filterType === nextProps.filterType && prevProps.id === nextProps.id && prevProps["accessorKey"] === nextProps["accessorKey"] && prevProps.enableColumnFilter === nextProps.enableColumnFilter && prevProps.enableGlobalFilter === nextProps.enableGlobalFilter && prevProps.enableGrouping === nextProps.enableGrouping && prevProps.enableHiding === nextProps.enableHiding && prevProps.enablePinning === nextProps.enablePinning && prevProps.enableResizing === nextProps.enableResizing && prevProps.enableSorting === nextProps.enableSorting && prevProps.meta === nextProps.meta, prevProps.cell === nextProps.cell;
|
|
21311
21343
|
}
|
|
21312
21344
|
);
|
|
21313
21345
|
var TableColumn = (props) => {
|
|
21314
|
-
const TableColumnComponent2 = (0,
|
|
21346
|
+
const TableColumnComponent2 = (0, import_react99.useMemo)(() => TableColumnFactory(), []);
|
|
21315
21347
|
return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(TableColumnComponent2, { ...props });
|
|
21316
21348
|
};
|
|
21317
21349
|
|
|
21318
21350
|
// src/components/layout/table/TableColumnSwitcher.tsx
|
|
21319
|
-
var
|
|
21351
|
+
var import_react100 = require("react");
|
|
21320
21352
|
var import_lucide_react28 = require("lucide-react");
|
|
21321
21353
|
var import_jsx_runtime96 = require("react/jsx-runtime");
|
|
21322
21354
|
var TableColumnSwitcherPopUp = ({ ...props }) => {
|
|
21323
21355
|
const { table } = useTableStateWithoutSizingContext();
|
|
21324
21356
|
const translation = useHightideTranslation();
|
|
21325
|
-
const containerRef = (0,
|
|
21326
|
-
const generatedId = (0,
|
|
21327
|
-
const ids = (0,
|
|
21357
|
+
const containerRef = (0, import_react100.useRef)(null);
|
|
21358
|
+
const generatedId = (0, import_react100.useId)();
|
|
21359
|
+
const ids = (0, import_react100.useMemo)(() => ({
|
|
21328
21360
|
popup: props.id ?? `table-column-picker-popup-${generatedId}`,
|
|
21329
21361
|
label: `table-column-picker-label-${generatedId}`
|
|
21330
21362
|
}), [generatedId, props.id]);
|
|
@@ -21333,7 +21365,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
|
|
|
21333
21365
|
const tableState = table.getState();
|
|
21334
21366
|
const columnOrder = tableState.columnOrder;
|
|
21335
21367
|
const columnPinning = tableState.columnPinning;
|
|
21336
|
-
const columns = (0,
|
|
21368
|
+
const columns = (0, import_react100.useMemo)(() => {
|
|
21337
21369
|
const allColumns = table.getAllColumns();
|
|
21338
21370
|
const leftPinned = [];
|
|
21339
21371
|
const unpinned = [];
|
|
@@ -21591,16 +21623,16 @@ var TableColumnSwitcher = ({ buttonProps, ...props }) => {
|
|
|
21591
21623
|
};
|
|
21592
21624
|
|
|
21593
21625
|
// src/components/user-interaction/Combobox/Combobox.tsx
|
|
21594
|
-
var
|
|
21626
|
+
var import_react106 = require("react");
|
|
21595
21627
|
|
|
21596
21628
|
// src/components/user-interaction/Combobox/ComboboxRoot.tsx
|
|
21597
|
-
var
|
|
21629
|
+
var import_react103 = require("react");
|
|
21598
21630
|
|
|
21599
21631
|
// src/components/user-interaction/Combobox/ComboboxContext.tsx
|
|
21600
|
-
var
|
|
21601
|
-
var ComboboxContext = (0,
|
|
21632
|
+
var import_react101 = require("react");
|
|
21633
|
+
var ComboboxContext = (0, import_react101.createContext)(null);
|
|
21602
21634
|
function useComboboxContext() {
|
|
21603
|
-
const ctx = (0,
|
|
21635
|
+
const ctx = (0, import_react101.useContext)(ComboboxContext);
|
|
21604
21636
|
if (ctx == null) {
|
|
21605
21637
|
throw new Error("useComboboxContext must be used within ComboboxRoot");
|
|
21606
21638
|
}
|
|
@@ -21608,7 +21640,7 @@ function useComboboxContext() {
|
|
|
21608
21640
|
}
|
|
21609
21641
|
|
|
21610
21642
|
// src/components/user-interaction/Combobox/useCombobox.ts
|
|
21611
|
-
var
|
|
21643
|
+
var import_react102 = require("react");
|
|
21612
21644
|
function useCombobox({
|
|
21613
21645
|
options,
|
|
21614
21646
|
searchQuery: controlledSearchQuery,
|
|
@@ -21623,36 +21655,36 @@ function useCombobox({
|
|
|
21623
21655
|
const { searchResult: visibleOptions } = useSearch({
|
|
21624
21656
|
items: options,
|
|
21625
21657
|
searchQuery: searchQuery ?? "",
|
|
21626
|
-
toTags: (0,
|
|
21658
|
+
toTags: (0, import_react102.useCallback)((o) => [o.label], [])
|
|
21627
21659
|
});
|
|
21628
|
-
const visibleOptionIds = (0,
|
|
21660
|
+
const visibleOptionIds = (0, import_react102.useMemo)(
|
|
21629
21661
|
() => visibleOptions.map((o) => o.id),
|
|
21630
21662
|
[visibleOptions]
|
|
21631
21663
|
);
|
|
21632
|
-
const enabledOptionIds = (0,
|
|
21664
|
+
const enabledOptionIds = (0, import_react102.useMemo)(
|
|
21633
21665
|
() => visibleOptions.filter((o) => !o.disabled).map((o) => o.id),
|
|
21634
21666
|
[visibleOptions]
|
|
21635
21667
|
);
|
|
21636
21668
|
const listNav = useListNavigation({ options: enabledOptionIds });
|
|
21637
|
-
const highlightItem = (0,
|
|
21669
|
+
const highlightItem = (0, import_react102.useCallback)(
|
|
21638
21670
|
(id) => {
|
|
21639
21671
|
if (!enabledOptionIds.includes(id)) return;
|
|
21640
21672
|
listNav.highlight(id);
|
|
21641
21673
|
},
|
|
21642
21674
|
[enabledOptionIds, listNav]
|
|
21643
21675
|
);
|
|
21644
|
-
const state = (0,
|
|
21676
|
+
const state = (0, import_react102.useMemo)(
|
|
21645
21677
|
() => ({
|
|
21646
21678
|
searchQuery: searchQuery ?? "",
|
|
21647
21679
|
highlightedId: listNav.highlightedId
|
|
21648
21680
|
}),
|
|
21649
21681
|
[searchQuery, listNav.highlightedId]
|
|
21650
21682
|
);
|
|
21651
|
-
const computedState = (0,
|
|
21683
|
+
const computedState = (0, import_react102.useMemo)(
|
|
21652
21684
|
() => ({ visibleOptionIds }),
|
|
21653
21685
|
[visibleOptionIds]
|
|
21654
21686
|
);
|
|
21655
|
-
const actions = (0,
|
|
21687
|
+
const actions = (0, import_react102.useMemo)(
|
|
21656
21688
|
() => ({
|
|
21657
21689
|
setSearchQuery,
|
|
21658
21690
|
highlightFirst: listNav.first,
|
|
@@ -21663,7 +21695,7 @@ function useCombobox({
|
|
|
21663
21695
|
}),
|
|
21664
21696
|
[setSearchQuery, listNav.first, listNav.last, listNav.next, listNav.previous, highlightItem]
|
|
21665
21697
|
);
|
|
21666
|
-
return (0,
|
|
21698
|
+
return (0, import_react102.useMemo)(
|
|
21667
21699
|
() => ({
|
|
21668
21700
|
...state,
|
|
21669
21701
|
...computedState,
|
|
@@ -21680,14 +21712,14 @@ function ComboboxRoot({
|
|
|
21680
21712
|
onItemClick,
|
|
21681
21713
|
...hookProps
|
|
21682
21714
|
}) {
|
|
21683
|
-
const [options, setOptions] = (0,
|
|
21684
|
-
const [listRef, setListRef] = (0,
|
|
21685
|
-
const generatedId = (0,
|
|
21686
|
-
const [ids, setIds] = (0,
|
|
21715
|
+
const [options, setOptions] = (0, import_react103.useState)([]);
|
|
21716
|
+
const [listRef, setListRef] = (0, import_react103.useState)(null);
|
|
21717
|
+
const generatedId = (0, import_react103.useId)();
|
|
21718
|
+
const [ids, setIds] = (0, import_react103.useState)({
|
|
21687
21719
|
trigger: `combobox-${generatedId}`,
|
|
21688
21720
|
listbox: `combobox-${generatedId}-listbox`
|
|
21689
21721
|
});
|
|
21690
|
-
const registerOption = (0,
|
|
21722
|
+
const registerOption = (0, import_react103.useCallback)(
|
|
21691
21723
|
(option) => {
|
|
21692
21724
|
setOptions((prev) => {
|
|
21693
21725
|
const next = prev.filter((o) => o.id !== option.id);
|
|
@@ -21699,11 +21731,11 @@ function ComboboxRoot({
|
|
|
21699
21731
|
},
|
|
21700
21732
|
[]
|
|
21701
21733
|
);
|
|
21702
|
-
const registerList = (0,
|
|
21734
|
+
const registerList = (0, import_react103.useCallback)((ref) => {
|
|
21703
21735
|
setListRef(() => ref);
|
|
21704
21736
|
return () => setListRef(null);
|
|
21705
21737
|
}, []);
|
|
21706
|
-
const hookOptions = (0,
|
|
21738
|
+
const hookOptions = (0, import_react103.useMemo)(
|
|
21707
21739
|
() => options.map((o) => ({
|
|
21708
21740
|
id: o.id,
|
|
21709
21741
|
label: o.label,
|
|
@@ -21712,38 +21744,38 @@ function ComboboxRoot({
|
|
|
21712
21744
|
[options]
|
|
21713
21745
|
);
|
|
21714
21746
|
const state = useCombobox({ ...hookProps, options: hookOptions });
|
|
21715
|
-
const idToOptionMap = (0,
|
|
21747
|
+
const idToOptionMap = (0, import_react103.useMemo)(() => {
|
|
21716
21748
|
return options.reduce((acc, o) => {
|
|
21717
21749
|
acc[o.id] = o;
|
|
21718
21750
|
return acc;
|
|
21719
21751
|
}, {});
|
|
21720
21752
|
}, [options]);
|
|
21721
|
-
const selectOption = (0,
|
|
21753
|
+
const selectOption = (0, import_react103.useCallback)(
|
|
21722
21754
|
(id) => {
|
|
21723
21755
|
const option = idToOptionMap[id];
|
|
21724
21756
|
if (option) onItemClick?.(option.value);
|
|
21725
21757
|
},
|
|
21726
21758
|
[idToOptionMap, onItemClick]
|
|
21727
21759
|
);
|
|
21728
|
-
const config = (0,
|
|
21760
|
+
const config = (0, import_react103.useMemo)(
|
|
21729
21761
|
() => ({ ids, setIds }),
|
|
21730
21762
|
[ids, setIds]
|
|
21731
21763
|
);
|
|
21732
|
-
const layout = (0,
|
|
21764
|
+
const layout = (0, import_react103.useMemo)(
|
|
21733
21765
|
() => ({
|
|
21734
21766
|
listRef: listRef ?? { current: null },
|
|
21735
21767
|
registerList
|
|
21736
21768
|
}),
|
|
21737
21769
|
[listRef, registerList]
|
|
21738
21770
|
);
|
|
21739
|
-
const search = (0,
|
|
21771
|
+
const search = (0, import_react103.useMemo)(
|
|
21740
21772
|
() => ({
|
|
21741
21773
|
searchQuery: state.searchQuery,
|
|
21742
21774
|
setSearchQuery: state.setSearchQuery
|
|
21743
21775
|
}),
|
|
21744
21776
|
[state.searchQuery, state.setSearchQuery]
|
|
21745
21777
|
);
|
|
21746
|
-
const contextValue = (0,
|
|
21778
|
+
const contextValue = (0, import_react103.useMemo)(
|
|
21747
21779
|
() => ({
|
|
21748
21780
|
highlightedId: state.highlightedId,
|
|
21749
21781
|
options,
|
|
@@ -21781,14 +21813,14 @@ function ComboboxRoot({
|
|
|
21781
21813
|
}
|
|
21782
21814
|
|
|
21783
21815
|
// src/components/user-interaction/Combobox/ComboboxInput.tsx
|
|
21784
|
-
var
|
|
21816
|
+
var import_react104 = require("react");
|
|
21785
21817
|
var import_jsx_runtime98 = require("react/jsx-runtime");
|
|
21786
|
-
var ComboboxInput = (0,
|
|
21818
|
+
var ComboboxInput = (0, import_react104.forwardRef)(
|
|
21787
21819
|
function ComboboxInput2(props, ref) {
|
|
21788
21820
|
const translation = useHightideTranslation();
|
|
21789
21821
|
const context = useComboboxContext();
|
|
21790
21822
|
const { highlightNext, highlightPrevious, highlightFirst, highlightLast, highlightedId, selectOption } = context;
|
|
21791
|
-
const handleKeyDown = (0,
|
|
21823
|
+
const handleKeyDown = (0, import_react104.useCallback)(
|
|
21792
21824
|
(event) => {
|
|
21793
21825
|
props.onKeyDown?.(event);
|
|
21794
21826
|
switch (event.key) {
|
|
@@ -21840,17 +21872,17 @@ var ComboboxInput = (0, import_react105.forwardRef)(
|
|
|
21840
21872
|
);
|
|
21841
21873
|
|
|
21842
21874
|
// src/components/user-interaction/Combobox/ComboboxList.tsx
|
|
21843
|
-
var
|
|
21875
|
+
var import_react105 = require("react");
|
|
21844
21876
|
var import_clsx39 = __toESM(require("clsx"));
|
|
21845
21877
|
var import_jsx_runtime99 = require("react/jsx-runtime");
|
|
21846
|
-
var ComboboxList = (0,
|
|
21878
|
+
var ComboboxList = (0, import_react105.forwardRef)(
|
|
21847
21879
|
function ComboboxList2({ children, ...props }, ref) {
|
|
21848
21880
|
const translation = useHightideTranslation();
|
|
21849
21881
|
const context = useComboboxContext();
|
|
21850
21882
|
const { layout } = context;
|
|
21851
21883
|
const { registerList } = layout;
|
|
21852
|
-
const innerRef = (0,
|
|
21853
|
-
(0,
|
|
21884
|
+
const innerRef = (0, import_react105.useRef)(null);
|
|
21885
|
+
(0, import_react105.useEffect)(() => {
|
|
21854
21886
|
return registerList(innerRef);
|
|
21855
21887
|
}, [registerList]);
|
|
21856
21888
|
const setRefs = (node) => {
|
|
@@ -21892,7 +21924,7 @@ var ComboboxList = (0, import_react106.forwardRef)(
|
|
|
21892
21924
|
|
|
21893
21925
|
// src/components/user-interaction/Combobox/Combobox.tsx
|
|
21894
21926
|
var import_jsx_runtime100 = require("react/jsx-runtime");
|
|
21895
|
-
var Combobox = (0,
|
|
21927
|
+
var Combobox = (0, import_react106.forwardRef)(function Combobox2({
|
|
21896
21928
|
children,
|
|
21897
21929
|
onItemClick,
|
|
21898
21930
|
searchQuery,
|
|
@@ -21917,10 +21949,10 @@ var Combobox = (0, import_react107.forwardRef)(function Combobox2({
|
|
|
21917
21949
|
});
|
|
21918
21950
|
|
|
21919
21951
|
// src/components/user-interaction/Combobox/ComboboxOption.tsx
|
|
21920
|
-
var
|
|
21952
|
+
var import_react107 = require("react");
|
|
21921
21953
|
var import_clsx40 = __toESM(require("clsx"));
|
|
21922
21954
|
var import_jsx_runtime101 = require("react/jsx-runtime");
|
|
21923
|
-
var ComboboxOption = (0,
|
|
21955
|
+
var ComboboxOption = (0, import_react107.forwardRef)(function ComboboxOption2({
|
|
21924
21956
|
children,
|
|
21925
21957
|
value,
|
|
21926
21958
|
label,
|
|
@@ -21931,11 +21963,11 @@ var ComboboxOption = (0, import_react108.forwardRef)(function ComboboxOption2({
|
|
|
21931
21963
|
}, ref) {
|
|
21932
21964
|
const context = useComboboxContext();
|
|
21933
21965
|
const { registerOption } = context;
|
|
21934
|
-
const itemRef = (0,
|
|
21935
|
-
const generatedId = (0,
|
|
21966
|
+
const itemRef = (0, import_react107.useRef)(null);
|
|
21967
|
+
const generatedId = (0, import_react107.useId)();
|
|
21936
21968
|
const optionId = idProp ?? `combobox-option-${generatedId}`;
|
|
21937
21969
|
const resolvedDisplay = children ?? label;
|
|
21938
|
-
(0,
|
|
21970
|
+
(0, import_react107.useEffect)(() => {
|
|
21939
21971
|
return registerOption({
|
|
21940
21972
|
id: optionId,
|
|
21941
21973
|
value,
|
|
@@ -21945,7 +21977,7 @@ var ComboboxOption = (0, import_react108.forwardRef)(function ComboboxOption2({
|
|
|
21945
21977
|
ref: itemRef
|
|
21946
21978
|
});
|
|
21947
21979
|
}, [optionId, value, label, resolvedDisplay, disabled, registerOption]);
|
|
21948
|
-
(0,
|
|
21980
|
+
(0, import_react107.useEffect)(() => {
|
|
21949
21981
|
if (context.highlightedId === optionId) {
|
|
21950
21982
|
itemRef.current?.scrollIntoView?.({ behavior: "smooth", block: "nearest" });
|
|
21951
21983
|
}
|
|
@@ -21991,7 +22023,7 @@ var ComboboxOption = (0, import_react108.forwardRef)(function ComboboxOption2({
|
|
|
21991
22023
|
ComboboxOption.displayName = "ComboboxOption";
|
|
21992
22024
|
|
|
21993
22025
|
// src/components/user-interaction/CopyToClipboardWrapper.tsx
|
|
21994
|
-
var
|
|
22026
|
+
var import_react108 = require("react");
|
|
21995
22027
|
var import_clsx41 = require("clsx");
|
|
21996
22028
|
|
|
21997
22029
|
// src/utils/writeToClipboard.ts
|
|
@@ -22014,7 +22046,7 @@ var CopyToClipboardWrapper = ({
|
|
|
22014
22046
|
...props
|
|
22015
22047
|
}) => {
|
|
22016
22048
|
const translation = useHightideTranslation();
|
|
22017
|
-
const [isShowingConfirmation, setIsShowingConfirmation] = (0,
|
|
22049
|
+
const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react108.useState)(false);
|
|
22018
22050
|
return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
|
|
22019
22051
|
TooltipRoot,
|
|
22020
22052
|
{
|
|
@@ -22063,7 +22095,7 @@ var CopyToClipboardWrapper = ({
|
|
|
22063
22095
|
};
|
|
22064
22096
|
|
|
22065
22097
|
// src/components/user-interaction/Menu.tsx
|
|
22066
|
-
var
|
|
22098
|
+
var import_react109 = require("react");
|
|
22067
22099
|
var import_clsx42 = __toESM(require("clsx"));
|
|
22068
22100
|
var import_jsx_runtime103 = require("react/jsx-runtime");
|
|
22069
22101
|
var MenuItem = ({
|
|
@@ -22089,8 +22121,8 @@ var Menu = ({
|
|
|
22089
22121
|
disabled = false,
|
|
22090
22122
|
...props
|
|
22091
22123
|
}) => {
|
|
22092
|
-
const triggerRef = (0,
|
|
22093
|
-
const [isOpen, setIsOpen] = (0,
|
|
22124
|
+
const triggerRef = (0, import_react109.useRef)(null);
|
|
22125
|
+
const [isOpen, setIsOpen] = (0, import_react109.useState)(false);
|
|
22094
22126
|
const bag = {
|
|
22095
22127
|
isOpen,
|
|
22096
22128
|
close: () => setIsOpen(false),
|
|
@@ -22098,7 +22130,7 @@ var Menu = ({
|
|
|
22098
22130
|
disabled
|
|
22099
22131
|
};
|
|
22100
22132
|
return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(import_jsx_runtime103.Fragment, { children: [
|
|
22101
|
-
trigger(bag, (0,
|
|
22133
|
+
trigger(bag, (0, import_react109.useCallback)((el) => triggerRef.current = el, [])),
|
|
22102
22134
|
/* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
|
|
22103
22135
|
PopUp,
|
|
22104
22136
|
{
|
|
@@ -22120,21 +22152,21 @@ var Menu = ({
|
|
|
22120
22152
|
};
|
|
22121
22153
|
|
|
22122
22154
|
// src/components/user-interaction/MultiSelect/MultiSelectChipDisplay.tsx
|
|
22123
|
-
var
|
|
22155
|
+
var import_react110 = require("react");
|
|
22124
22156
|
var import_lucide_react30 = require("lucide-react");
|
|
22125
22157
|
var import_jsx_runtime104 = require("react/jsx-runtime");
|
|
22126
|
-
var MultiSelectChipDisplayButton = (0,
|
|
22158
|
+
var MultiSelectChipDisplayButton = (0, import_react110.forwardRef)(function MultiSelectChipDisplayButton2({ id, ...props }, ref) {
|
|
22127
22159
|
const translation = useHightideTranslation();
|
|
22128
22160
|
const context = useMultiSelectContext();
|
|
22129
22161
|
const { config, layout } = context;
|
|
22130
22162
|
const { setIds } = config;
|
|
22131
22163
|
const { registerTrigger } = layout;
|
|
22132
|
-
(0,
|
|
22164
|
+
(0, import_react110.useEffect)(() => {
|
|
22133
22165
|
if (id) setIds((prev) => ({ ...prev, trigger: id }));
|
|
22134
22166
|
}, [id, setIds]);
|
|
22135
|
-
const innerRef = (0,
|
|
22136
|
-
(0,
|
|
22137
|
-
(0,
|
|
22167
|
+
const innerRef = (0, import_react110.useRef)(null);
|
|
22168
|
+
(0, import_react110.useImperativeHandle)(ref, () => innerRef.current);
|
|
22169
|
+
(0, import_react110.useEffect)(() => {
|
|
22138
22170
|
const unregister = registerTrigger(innerRef);
|
|
22139
22171
|
return () => unregister();
|
|
22140
22172
|
}, [registerTrigger]);
|
|
@@ -22218,7 +22250,7 @@ var MultiSelectChipDisplayButton = (0, import_react111.forwardRef)(function Mult
|
|
|
22218
22250
|
}
|
|
22219
22251
|
);
|
|
22220
22252
|
});
|
|
22221
|
-
var MultiSelectChipDisplay = (0,
|
|
22253
|
+
var MultiSelectChipDisplay = (0, import_react110.forwardRef)(
|
|
22222
22254
|
function MultiSelectChipDisplay2({
|
|
22223
22255
|
children,
|
|
22224
22256
|
contentPanelProps,
|
|
@@ -22233,7 +22265,7 @@ var MultiSelectChipDisplay = (0, import_react111.forwardRef)(
|
|
|
22233
22265
|
);
|
|
22234
22266
|
|
|
22235
22267
|
// src/components/user-interaction/ScrollPicker.tsx
|
|
22236
|
-
var
|
|
22268
|
+
var import_react111 = require("react");
|
|
22237
22269
|
var import_clsx43 = __toESM(require("clsx"));
|
|
22238
22270
|
var import_jsx_runtime105 = require("react/jsx-runtime");
|
|
22239
22271
|
var up = 1;
|
|
@@ -22254,7 +22286,7 @@ var ScrollPicker = ({
|
|
|
22254
22286
|
transition,
|
|
22255
22287
|
items,
|
|
22256
22288
|
lastTimeStamp
|
|
22257
|
-
}, setAnimation] = (0,
|
|
22289
|
+
}, setAnimation] = (0, import_react111.useState)({
|
|
22258
22290
|
targetIndex: selectedIndex,
|
|
22259
22291
|
currentIndex: disabled ? selectedIndex : 0,
|
|
22260
22292
|
velocity: 0,
|
|
@@ -22270,7 +22302,7 @@ var ScrollPicker = ({
|
|
|
22270
22302
|
const itemHeight = 40;
|
|
22271
22303
|
const distance = 8;
|
|
22272
22304
|
const containerHeight = itemHeight * (itemsShownCount - 2) + distance * (itemsShownCount - 2 + 1);
|
|
22273
|
-
const getDirection = (0,
|
|
22305
|
+
const getDirection = (0, import_react111.useCallback)((targetIndex, currentIndex2, transition2, length) => {
|
|
22274
22306
|
if (targetIndex === currentIndex2) {
|
|
22275
22307
|
return transition2 > 0 ? up : down;
|
|
22276
22308
|
}
|
|
@@ -22280,7 +22312,7 @@ var ScrollPicker = ({
|
|
|
22280
22312
|
}
|
|
22281
22313
|
return distanceForward >= length / 2 ? down : up;
|
|
22282
22314
|
}, []);
|
|
22283
|
-
const animate = (0,
|
|
22315
|
+
const animate = (0, import_react111.useCallback)((timestamp, startTime) => {
|
|
22284
22316
|
setAnimation((prevState) => {
|
|
22285
22317
|
const {
|
|
22286
22318
|
targetIndex,
|
|
@@ -22353,7 +22385,7 @@ var ScrollPicker = ({
|
|
|
22353
22385
|
};
|
|
22354
22386
|
});
|
|
22355
22387
|
}, [disabled, getDirection, onChange]);
|
|
22356
|
-
(0,
|
|
22388
|
+
(0, import_react111.useEffect)(() => {
|
|
22357
22389
|
requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
|
|
22358
22390
|
});
|
|
22359
22391
|
const opacity = (transition2, index, itemsCount) => {
|
|
@@ -22431,7 +22463,7 @@ var ScrollPicker = ({
|
|
|
22431
22463
|
};
|
|
22432
22464
|
|
|
22433
22465
|
// src/components/user-interaction/Switch.tsx
|
|
22434
|
-
var
|
|
22466
|
+
var import_react112 = require("react");
|
|
22435
22467
|
var import_jsx_runtime106 = require("react/jsx-runtime");
|
|
22436
22468
|
var Switch = ({
|
|
22437
22469
|
value: controlledValue,
|
|
@@ -22446,7 +22478,7 @@ var Switch = ({
|
|
|
22446
22478
|
}) => {
|
|
22447
22479
|
const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
|
|
22448
22480
|
const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
|
|
22449
|
-
const onChangeWrapper = (0,
|
|
22481
|
+
const onChangeWrapper = (0, import_react112.useCallback)((value2) => {
|
|
22450
22482
|
onValueChangeStable(!value2);
|
|
22451
22483
|
onEditCompleteStable(!value2);
|
|
22452
22484
|
}, [onValueChangeStable, onEditCompleteStable]);
|
|
@@ -22486,10 +22518,10 @@ var Switch = ({
|
|
|
22486
22518
|
};
|
|
22487
22519
|
|
|
22488
22520
|
// src/components/user-interaction/Textarea.tsx
|
|
22489
|
-
var
|
|
22521
|
+
var import_react113 = require("react");
|
|
22490
22522
|
var import_clsx44 = __toESM(require("clsx"));
|
|
22491
22523
|
var import_jsx_runtime107 = require("react/jsx-runtime");
|
|
22492
|
-
var Textarea = (0,
|
|
22524
|
+
var Textarea = (0, import_react113.forwardRef)(function Textarea2({
|
|
22493
22525
|
value: controlledValue,
|
|
22494
22526
|
initialValue,
|
|
22495
22527
|
invalid = false,
|
|
@@ -22505,7 +22537,7 @@ var Textarea = (0, import_react114.forwardRef)(function Textarea2({
|
|
|
22505
22537
|
});
|
|
22506
22538
|
const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
|
|
22507
22539
|
const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
|
|
22508
|
-
const onEditCompleteWrapper = (0,
|
|
22540
|
+
const onEditCompleteWrapper = (0, import_react113.useCallback)((text) => {
|
|
22509
22541
|
onEditCompleteStable(text);
|
|
22510
22542
|
clearTimer();
|
|
22511
22543
|
}, [onEditCompleteStable, clearTimer]);
|
|
@@ -22543,7 +22575,7 @@ var TextareaWithHeadline = ({
|
|
|
22543
22575
|
containerClassName,
|
|
22544
22576
|
...props
|
|
22545
22577
|
}) => {
|
|
22546
|
-
const genId = (0,
|
|
22578
|
+
const genId = (0, import_react113.useId)();
|
|
22547
22579
|
const usedId = id ?? genId;
|
|
22548
22580
|
return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
|
|
22549
22581
|
"div",
|
|
@@ -22575,20 +22607,20 @@ var TextareaWithHeadline = ({
|
|
|
22575
22607
|
};
|
|
22576
22608
|
|
|
22577
22609
|
// src/components/user-interaction/data/FilterList.tsx
|
|
22578
|
-
var
|
|
22610
|
+
var import_react114 = require("react");
|
|
22579
22611
|
var import_lucide_react31 = require("lucide-react");
|
|
22580
22612
|
var import_jsx_runtime108 = require("react/jsx-runtime");
|
|
22581
22613
|
var FilterList = ({ value, onValueChange, availableItems }) => {
|
|
22582
22614
|
const translation = useHightideTranslation();
|
|
22583
22615
|
const filterValueToLabel = useFilterValueTranslation();
|
|
22584
|
-
const activeIds = (0,
|
|
22585
|
-
const inactiveItems = (0,
|
|
22586
|
-
const itemRecord = (0,
|
|
22616
|
+
const activeIds = (0, import_react114.useMemo)(() => value.map((item) => item.id), [value]);
|
|
22617
|
+
const inactiveItems = (0, import_react114.useMemo)(() => availableItems.filter((item) => !activeIds.includes(item.id)).sort((a, b) => a.label.localeCompare(b.label)), [availableItems, activeIds]);
|
|
22618
|
+
const itemRecord = (0, import_react114.useMemo)(() => availableItems.reduce((acc, item) => {
|
|
22587
22619
|
acc[item.id] = item;
|
|
22588
22620
|
return acc;
|
|
22589
22621
|
}, {}), [availableItems]);
|
|
22590
|
-
const [editState, setEditState] = (0,
|
|
22591
|
-
const valueWithEditState = (0,
|
|
22622
|
+
const [editState, setEditState] = (0, import_react114.useState)(void 0);
|
|
22623
|
+
const valueWithEditState = (0, import_react114.useMemo)(() => {
|
|
22592
22624
|
let foundEditValue = false;
|
|
22593
22625
|
for (const item of value) {
|
|
22594
22626
|
if (item.id === editState?.id) {
|
|
@@ -22696,18 +22728,18 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
|
|
|
22696
22728
|
};
|
|
22697
22729
|
|
|
22698
22730
|
// src/components/user-interaction/data/SortingList.tsx
|
|
22699
|
-
var
|
|
22731
|
+
var import_react115 = require("react");
|
|
22700
22732
|
var import_lucide_react32 = require("lucide-react");
|
|
22701
22733
|
var import_clsx45 = __toESM(require("clsx"));
|
|
22702
22734
|
var import_jsx_runtime109 = require("react/jsx-runtime");
|
|
22703
22735
|
var SortingList = ({ sorting, onSortingChange, availableItems }) => {
|
|
22704
22736
|
const translation = useHightideTranslation();
|
|
22705
|
-
const activeIds = (0,
|
|
22706
|
-
const inactiveItems = (0,
|
|
22737
|
+
const activeIds = (0, import_react115.useMemo)(() => sorting.map((item) => item.id), [sorting]);
|
|
22738
|
+
const inactiveItems = (0, import_react115.useMemo)(
|
|
22707
22739
|
() => availableItems.filter((item) => !activeIds.includes(item.id)).sort((a, b) => a.label.localeCompare(b.label)),
|
|
22708
22740
|
[availableItems, activeIds]
|
|
22709
22741
|
);
|
|
22710
|
-
const itemRecord = (0,
|
|
22742
|
+
const itemRecord = (0, import_react115.useMemo)(
|
|
22711
22743
|
() => availableItems.reduce(
|
|
22712
22744
|
(acc, item) => {
|
|
22713
22745
|
acc[item.id] = item;
|
|
@@ -22885,10 +22917,10 @@ var TimeDisplay = ({
|
|
|
22885
22917
|
};
|
|
22886
22918
|
|
|
22887
22919
|
// src/components/user-interaction/input/FlexibleDateTimeInput.tsx
|
|
22888
|
-
var
|
|
22920
|
+
var import_react116 = require("react");
|
|
22889
22921
|
var import_lucide_react33 = require("lucide-react");
|
|
22890
22922
|
var import_jsx_runtime111 = require("react/jsx-runtime");
|
|
22891
|
-
var FlexibleDateTimeInput = (0,
|
|
22923
|
+
var FlexibleDateTimeInput = (0, import_react116.forwardRef)(function FlexibleDateTimeInput2({
|
|
22892
22924
|
defaultMode = "date",
|
|
22893
22925
|
value: controlledValue,
|
|
22894
22926
|
initialValue,
|
|
@@ -22910,7 +22942,7 @@ var FlexibleDateTimeInput = (0, import_react117.forwardRef)(function FlexibleDat
|
|
|
22910
22942
|
const zoned = (date) => DateUtils.toZonedDate(date, timeZone);
|
|
22911
22943
|
const unzoned = (date) => DateUtils.fromZonedDate(date, timeZone);
|
|
22912
22944
|
const hasFixedTime = (date) => DateUtils.sameTime(zoned(date), fixedTime, true, true);
|
|
22913
|
-
const [mode, setMode] = (0,
|
|
22945
|
+
const [mode, setMode] = (0, import_react116.useState)(() => {
|
|
22914
22946
|
if (value && !hasFixedTime(value)) {
|
|
22915
22947
|
return "dateTime";
|
|
22916
22948
|
}
|
|
@@ -22955,11 +22987,11 @@ var FlexibleDateTimeInput = (0, import_react117.forwardRef)(function FlexibleDat
|
|
|
22955
22987
|
});
|
|
22956
22988
|
|
|
22957
22989
|
// src/components/user-interaction/input/InsideLabelInput.tsx
|
|
22990
|
+
var import_react117 = require("react");
|
|
22958
22991
|
var import_react118 = require("react");
|
|
22959
|
-
var import_react119 = require("react");
|
|
22960
22992
|
var import_clsx46 = __toESM(require("clsx"));
|
|
22961
22993
|
var import_jsx_runtime112 = require("react/jsx-runtime");
|
|
22962
|
-
var InsideLabelInput = (0,
|
|
22994
|
+
var InsideLabelInput = (0, import_react118.forwardRef)(function InsideLabelInput2({
|
|
22963
22995
|
id: customId,
|
|
22964
22996
|
value: controlledValue,
|
|
22965
22997
|
initialValue,
|
|
@@ -22972,8 +23004,8 @@ var InsideLabelInput = (0, import_react119.forwardRef)(function InsideLabelInput
|
|
|
22972
23004
|
onValueChange,
|
|
22973
23005
|
defaultValue: initialValue
|
|
22974
23006
|
});
|
|
22975
|
-
const [isFocused, setIsFocused] = (0,
|
|
22976
|
-
const generatedId = (0,
|
|
23007
|
+
const [isFocused, setIsFocused] = (0, import_react118.useState)(false);
|
|
23008
|
+
const generatedId = (0, import_react117.useId)();
|
|
22977
23009
|
const id = customId ?? generatedId;
|
|
22978
23010
|
return /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("div", { className: (0, import_clsx46.default)("relative"), children: [
|
|
22979
23011
|
/* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
|
|
@@ -23062,11 +23094,11 @@ var SearchBar = ({
|
|
|
23062
23094
|
};
|
|
23063
23095
|
|
|
23064
23096
|
// src/components/user-interaction/input/ToggleableInput.tsx
|
|
23065
|
-
var
|
|
23097
|
+
var import_react119 = require("react");
|
|
23066
23098
|
var import_lucide_react35 = require("lucide-react");
|
|
23067
23099
|
var import_clsx48 = __toESM(require("clsx"));
|
|
23068
23100
|
var import_jsx_runtime114 = require("react/jsx-runtime");
|
|
23069
|
-
var ToggleableInput = (0,
|
|
23101
|
+
var ToggleableInput = (0, import_react119.forwardRef)(function ToggleableInput2({
|
|
23070
23102
|
value: controlledValue,
|
|
23071
23103
|
initialValue,
|
|
23072
23104
|
onValueChange,
|
|
@@ -23079,10 +23111,10 @@ var ToggleableInput = (0, import_react120.forwardRef)(function ToggleableInput2(
|
|
|
23079
23111
|
onValueChange,
|
|
23080
23112
|
defaultValue: initialValue
|
|
23081
23113
|
});
|
|
23082
|
-
const [isEditing, setIsEditing] = (0,
|
|
23083
|
-
const innerRef = (0,
|
|
23084
|
-
(0,
|
|
23085
|
-
(0,
|
|
23114
|
+
const [isEditing, setIsEditing] = (0, import_react119.useState)(initialState !== "display");
|
|
23115
|
+
const innerRef = (0, import_react119.useRef)(null);
|
|
23116
|
+
(0, import_react119.useImperativeHandle)(forwardedRef, () => innerRef.current);
|
|
23117
|
+
(0, import_react119.useEffect)(() => {
|
|
23086
23118
|
if (isEditing) {
|
|
23087
23119
|
innerRef.current?.focus();
|
|
23088
23120
|
}
|
|
@@ -23517,9 +23549,9 @@ var TextProperty = ({
|
|
|
23517
23549
|
|
|
23518
23550
|
// src/components/utils/Polymorphic.tsx
|
|
23519
23551
|
var import_react_slot = require("@radix-ui/react-slot");
|
|
23520
|
-
var
|
|
23552
|
+
var import_react120 = require("react");
|
|
23521
23553
|
var import_jsx_runtime122 = require("react/jsx-runtime");
|
|
23522
|
-
var PolymorphicSlot = (0,
|
|
23554
|
+
var PolymorphicSlot = (0, import_react120.forwardRef)(function PolymorphicSlot2({
|
|
23523
23555
|
children,
|
|
23524
23556
|
asChild,
|
|
23525
23557
|
defaultComponent = "div",
|
|
@@ -23530,16 +23562,16 @@ var PolymorphicSlot = (0, import_react121.forwardRef)(function PolymorphicSlot2(
|
|
|
23530
23562
|
});
|
|
23531
23563
|
|
|
23532
23564
|
// src/components/utils/Transition.tsx
|
|
23533
|
-
var
|
|
23565
|
+
var import_react121 = require("react");
|
|
23534
23566
|
function Transition({
|
|
23535
23567
|
children,
|
|
23536
23568
|
show,
|
|
23537
23569
|
includeAnimation = true
|
|
23538
23570
|
}) {
|
|
23539
|
-
const [isOpen, setIsOpen] = (0,
|
|
23540
|
-
const [isTransitioning, setIsTransitioning] = (0,
|
|
23571
|
+
const [isOpen, setIsOpen] = (0, import_react121.useState)(show);
|
|
23572
|
+
const [isTransitioning, setIsTransitioning] = (0, import_react121.useState)(!isOpen);
|
|
23541
23573
|
const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
|
|
23542
|
-
(0,
|
|
23574
|
+
(0, import_react121.useEffect)(() => {
|
|
23543
23575
|
setIsOpen(show);
|
|
23544
23576
|
setIsTransitioning(true);
|
|
23545
23577
|
}, [show]);
|
|
@@ -23575,7 +23607,7 @@ var HightideProvider = ({
|
|
|
23575
23607
|
};
|
|
23576
23608
|
|
|
23577
23609
|
// src/hooks/focus/useFocusGuards.ts
|
|
23578
|
-
var
|
|
23610
|
+
var import_react122 = require("react");
|
|
23579
23611
|
var selectorName = "data-hw-focus-guard";
|
|
23580
23612
|
function FocusGuard() {
|
|
23581
23613
|
const element = document.createElement("div");
|
|
@@ -23613,7 +23645,7 @@ var FocusGuardsService = class _FocusGuardsService {
|
|
|
23613
23645
|
}
|
|
23614
23646
|
};
|
|
23615
23647
|
var useFocusGuards = () => {
|
|
23616
|
-
(0,
|
|
23648
|
+
(0, import_react122.useEffect)(() => {
|
|
23617
23649
|
FocusGuardsService.getInstance().add();
|
|
23618
23650
|
return () => {
|
|
23619
23651
|
FocusGuardsService.getInstance().remove();
|
|
@@ -23622,10 +23654,10 @@ var useFocusGuards = () => {
|
|
|
23622
23654
|
};
|
|
23623
23655
|
|
|
23624
23656
|
// src/hooks/focus/useFocusOnceVisible.ts
|
|
23625
|
-
var
|
|
23657
|
+
var import_react123 = __toESM(require("react"));
|
|
23626
23658
|
var useFocusOnceVisible = (ref, disable = false) => {
|
|
23627
|
-
const [hasUsedFocus, setHasUsedFocus] =
|
|
23628
|
-
(0,
|
|
23659
|
+
const [hasUsedFocus, setHasUsedFocus] = import_react123.default.useState(false);
|
|
23660
|
+
(0, import_react123.useEffect)(() => {
|
|
23629
23661
|
if (disable || hasUsedFocus) {
|
|
23630
23662
|
return;
|
|
23631
23663
|
}
|
|
@@ -23645,11 +23677,11 @@ var useFocusOnceVisible = (ref, disable = false) => {
|
|
|
23645
23677
|
};
|
|
23646
23678
|
|
|
23647
23679
|
// src/hooks/focus/useIsMounted.ts
|
|
23648
|
-
var
|
|
23680
|
+
var import_react124 = require("react");
|
|
23649
23681
|
var isClient = typeof window !== "undefined" && typeof document !== "undefined";
|
|
23650
|
-
var useIsomorphicEffect = isClient ?
|
|
23682
|
+
var useIsomorphicEffect = isClient ? import_react124.useLayoutEffect : import_react124.useEffect;
|
|
23651
23683
|
var useIsMounted = () => {
|
|
23652
|
-
const [isMounted, setIsMounted] = (0,
|
|
23684
|
+
const [isMounted, setIsMounted] = (0, import_react124.useState)(false);
|
|
23653
23685
|
useIsomorphicEffect(() => {
|
|
23654
23686
|
setIsMounted(true);
|
|
23655
23687
|
return () => {
|
|
@@ -23660,10 +23692,10 @@ var useIsMounted = () => {
|
|
|
23660
23692
|
};
|
|
23661
23693
|
|
|
23662
23694
|
// src/hooks/useHandleRefs.ts
|
|
23663
|
-
var
|
|
23695
|
+
var import_react125 = require("react");
|
|
23664
23696
|
function useHandleRefs(handleRef) {
|
|
23665
|
-
const refs = (0,
|
|
23666
|
-
(0,
|
|
23697
|
+
const refs = (0, import_react125.useRef)([]);
|
|
23698
|
+
(0, import_react125.useEffect)(() => {
|
|
23667
23699
|
refs.current = Object.keys(handleRef?.current ?? {}).map(
|
|
23668
23700
|
() => ({ current: null })
|
|
23669
23701
|
);
|
|
@@ -23676,10 +23708,10 @@ function useHandleRefs(handleRef) {
|
|
|
23676
23708
|
}
|
|
23677
23709
|
|
|
23678
23710
|
// src/hooks/useLogUnstableDependencies.ts
|
|
23679
|
-
var
|
|
23711
|
+
var import_react126 = __toESM(require("react"));
|
|
23680
23712
|
function useLogUnstableDependencies(name, value) {
|
|
23681
|
-
const prev =
|
|
23682
|
-
|
|
23713
|
+
const prev = import_react126.default.useRef(null);
|
|
23714
|
+
import_react126.default.useEffect(() => {
|
|
23683
23715
|
if (!prev.current) {
|
|
23684
23716
|
prev.current = value;
|
|
23685
23717
|
return;
|
|
@@ -23701,10 +23733,10 @@ function useLogUnstableDependencies(name, value) {
|
|
|
23701
23733
|
}
|
|
23702
23734
|
|
|
23703
23735
|
// src/hooks/useOverwritableState.ts
|
|
23704
|
-
var
|
|
23736
|
+
var import_react127 = require("react");
|
|
23705
23737
|
var useOverwritableState = (overwriteValue, onChange) => {
|
|
23706
|
-
const [state, setState] = (0,
|
|
23707
|
-
(0,
|
|
23738
|
+
const [state, setState] = (0, import_react127.useState)(overwriteValue);
|
|
23739
|
+
(0, import_react127.useEffect)(() => {
|
|
23708
23740
|
setState(overwriteValue);
|
|
23709
23741
|
}, [overwriteValue]);
|
|
23710
23742
|
const onChangeWrapper = (action) => {
|
|
@@ -23716,13 +23748,13 @@ var useOverwritableState = (overwriteValue, onChange) => {
|
|
|
23716
23748
|
};
|
|
23717
23749
|
|
|
23718
23750
|
// src/hooks/useRerender.ts
|
|
23719
|
-
var
|
|
23751
|
+
var import_react128 = require("react");
|
|
23720
23752
|
var useRerender = () => {
|
|
23721
|
-
return (0,
|
|
23753
|
+
return (0, import_react128.useReducer)(() => ({}), {})[1];
|
|
23722
23754
|
};
|
|
23723
23755
|
|
|
23724
23756
|
// src/hooks/useSwipeGesture.ts
|
|
23725
|
-
var
|
|
23757
|
+
var import_react129 = require("react");
|
|
23726
23758
|
var useSwipeGesture = ({
|
|
23727
23759
|
elementRef,
|
|
23728
23760
|
inputMode = "touch",
|
|
@@ -23732,16 +23764,16 @@ var useSwipeGesture = ({
|
|
|
23732
23764
|
crossAxisThreshold = 100,
|
|
23733
23765
|
maxSwipeTime = 100
|
|
23734
23766
|
}) => {
|
|
23735
|
-
const onSwipeRef = (0,
|
|
23736
|
-
const startRegionRef = (0,
|
|
23737
|
-
const thresholdRef = (0,
|
|
23738
|
-
const crossAxisThresholdRef = (0,
|
|
23739
|
-
const maxSwipeTimeRef = (0,
|
|
23740
|
-
const gestureStartRef = (0,
|
|
23741
|
-
const gestureEndRef = (0,
|
|
23742
|
-
const isScrollingRef = (0,
|
|
23743
|
-
const isMouseDownRef = (0,
|
|
23744
|
-
(0,
|
|
23767
|
+
const onSwipeRef = (0, import_react129.useRef)(onSwipe);
|
|
23768
|
+
const startRegionRef = (0, import_react129.useRef)(startRegion);
|
|
23769
|
+
const thresholdRef = (0, import_react129.useRef)(threshold);
|
|
23770
|
+
const crossAxisThresholdRef = (0, import_react129.useRef)(crossAxisThreshold);
|
|
23771
|
+
const maxSwipeTimeRef = (0, import_react129.useRef)(maxSwipeTime);
|
|
23772
|
+
const gestureStartRef = (0, import_react129.useRef)(null);
|
|
23773
|
+
const gestureEndRef = (0, import_react129.useRef)(null);
|
|
23774
|
+
const isScrollingRef = (0, import_react129.useRef)(false);
|
|
23775
|
+
const isMouseDownRef = (0, import_react129.useRef)(false);
|
|
23776
|
+
(0, import_react129.useEffect)(() => {
|
|
23745
23777
|
onSwipeRef.current = onSwipe;
|
|
23746
23778
|
startRegionRef.current = startRegion;
|
|
23747
23779
|
thresholdRef.current = threshold;
|
|
@@ -23781,7 +23813,7 @@ var useSwipeGesture = ({
|
|
|
23781
23813
|
}
|
|
23782
23814
|
return null;
|
|
23783
23815
|
};
|
|
23784
|
-
(0,
|
|
23816
|
+
(0, import_react129.useEffect)(() => {
|
|
23785
23817
|
const element = elementRef?.current ?? null;
|
|
23786
23818
|
const target = element ?? window;
|
|
23787
23819
|
const listenTouch = inputMode === "touch" || inputMode === "both";
|
|
@@ -23917,25 +23949,25 @@ var useSwipeGesture = ({
|
|
|
23917
23949
|
};
|
|
23918
23950
|
|
|
23919
23951
|
// src/hooks/useUpdatingDateString.ts
|
|
23920
|
-
var
|
|
23952
|
+
var import_react130 = require("react");
|
|
23921
23953
|
var useUpdatingDateString = ({ absoluteFormat = "dateTime", localeOverride, is24HourFormat: is24HourFormatOverride, timeZone: timeZoneOverride, date }) => {
|
|
23922
23954
|
const { locale: contextLocale, is24HourFormat: contextIs24HourFormat, timeZone: contextTimeZone } = useLocale();
|
|
23923
23955
|
const locale = localeOverride ?? contextLocale;
|
|
23924
23956
|
const is24HourFormat = is24HourFormatOverride ?? contextIs24HourFormat ?? true;
|
|
23925
23957
|
const timeZone = timeZoneOverride ?? contextTimeZone;
|
|
23926
|
-
const [dateAndTimeStrings, setDateAndTimeStrings] = (0,
|
|
23958
|
+
const [dateAndTimeStrings, setDateAndTimeStrings] = (0, import_react130.useState)({
|
|
23927
23959
|
compareDate: date,
|
|
23928
23960
|
absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat, { is24HourFormat, timeZone }),
|
|
23929
23961
|
relative: DateUtils.formatRelative(date, locale)
|
|
23930
23962
|
});
|
|
23931
|
-
(0,
|
|
23963
|
+
(0, import_react130.useEffect)(() => {
|
|
23932
23964
|
setDateAndTimeStrings({
|
|
23933
23965
|
compareDate: date,
|
|
23934
23966
|
absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat, { is24HourFormat, timeZone }),
|
|
23935
23967
|
relative: DateUtils.formatRelative(date, locale)
|
|
23936
23968
|
});
|
|
23937
23969
|
}, [date, absoluteFormat, locale, is24HourFormat, timeZone]);
|
|
23938
|
-
(0,
|
|
23970
|
+
(0, import_react130.useEffect)(() => {
|
|
23939
23971
|
let timeoutId;
|
|
23940
23972
|
const startTimer = () => {
|
|
23941
23973
|
const now = /* @__PURE__ */ new Date();
|
|
@@ -23971,7 +24003,7 @@ var validateEmail = (email) => {
|
|
|
23971
24003
|
};
|
|
23972
24004
|
|
|
23973
24005
|
// src/hooks/useValidators.ts
|
|
23974
|
-
var
|
|
24006
|
+
var import_react131 = require("react");
|
|
23975
24007
|
var notEmpty = (value) => {
|
|
23976
24008
|
if (!value) {
|
|
23977
24009
|
return "notEmpty";
|
|
@@ -24021,7 +24053,7 @@ var UseValidators = {
|
|
|
24021
24053
|
};
|
|
24022
24054
|
var useTranslatedValidators = () => {
|
|
24023
24055
|
const translation = useHightideTranslation();
|
|
24024
|
-
return (0,
|
|
24056
|
+
return (0, import_react131.useMemo)(() => ({
|
|
24025
24057
|
notEmpty: (value) => {
|
|
24026
24058
|
const result = notEmpty(value);
|
|
24027
24059
|
if (result) {
|