@helpwave/hightide 0.12.3 → 0.12.4
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 +7 -7
- package/dist/index.d.ts +7 -7
- package/dist/index.js +683 -672
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +53 -42
- package/dist/index.mjs.map +1 -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]);
|
|
@@ -14931,10 +14942,10 @@ function VerticalNavigationTree({
|
|
|
14931
14942
|
|
|
14932
14943
|
// src/components/layout/app/AppPage.tsx
|
|
14933
14944
|
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
14934
|
-
var AppSidebar = ({ isOpen, onClose, children, ...props }) => {
|
|
14945
|
+
var AppSidebar = ({ isOpen = false, onClose, children, ...props }) => {
|
|
14935
14946
|
const translation = useHightideTranslation();
|
|
14936
14947
|
const { zIndex } = useOverlayRegistry({ isActive: isOpen });
|
|
14937
|
-
const ref = (0,
|
|
14948
|
+
const ref = (0, import_react60.useRef)(null);
|
|
14938
14949
|
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
|
|
14939
14950
|
isOpen && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
14940
14951
|
"div",
|
|
@@ -15001,8 +15012,8 @@ var AppPageSidebarWithNavigation = ({
|
|
|
15001
15012
|
};
|
|
15002
15013
|
var AppPage = ({ children, headerActions, sidebarProps, ...props }) => {
|
|
15003
15014
|
const translation = useHightideTranslation();
|
|
15004
|
-
const [isSidebarOpen, setIsSidebarOpen] = (0,
|
|
15005
|
-
const toNavigationItems = (0,
|
|
15015
|
+
const [isSidebarOpen, setIsSidebarOpen] = (0, import_react60.useState)(false);
|
|
15016
|
+
const toNavigationItems = (0, import_react60.useCallback)((items) => {
|
|
15006
15017
|
return items?.map((item) => ({
|
|
15007
15018
|
id: item.id,
|
|
15008
15019
|
label: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: "app-page-navigation-item-label", "data-acitve": item.isActive ? "" : void 0, children: [
|
|
@@ -15014,9 +15025,9 @@ var AppPage = ({ children, headerActions, sidebarProps, ...props }) => {
|
|
|
15014
15025
|
items: toNavigationItems(item.items)
|
|
15015
15026
|
})) ?? void 0;
|
|
15016
15027
|
}, []);
|
|
15017
|
-
const navigationItems = (0,
|
|
15018
|
-
sidebarProps.
|
|
15019
|
-
), [sidebarProps.
|
|
15028
|
+
const navigationItems = (0, import_react60.useMemo)(() => toNavigationItems(
|
|
15029
|
+
sidebarProps.items
|
|
15030
|
+
), [sidebarProps.items, toNavigationItems]);
|
|
15020
15031
|
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
|
|
15021
15032
|
"div",
|
|
15022
15033
|
{
|
|
@@ -15060,14 +15071,14 @@ var AppPage = ({ children, headerActions, sidebarProps, ...props }) => {
|
|
|
15060
15071
|
};
|
|
15061
15072
|
|
|
15062
15073
|
// src/components/layout/dialog/Dialog.tsx
|
|
15063
|
-
var
|
|
15074
|
+
var import_react62 = require("react");
|
|
15064
15075
|
var import_lucide_react11 = require("lucide-react");
|
|
15065
15076
|
|
|
15066
15077
|
// src/components/layout/dialog/DialogContext.tsx
|
|
15067
|
-
var
|
|
15068
|
-
var DialogContext = (0,
|
|
15078
|
+
var import_react61 = require("react");
|
|
15079
|
+
var DialogContext = (0, import_react61.createContext)(null);
|
|
15069
15080
|
function useDialogContext() {
|
|
15070
|
-
const context = (0,
|
|
15081
|
+
const context = (0, import_react61.useContext)(DialogContext);
|
|
15071
15082
|
if (!context) {
|
|
15072
15083
|
throw new Error("useDialogContext must be used within a <DialogContext.Provider>");
|
|
15073
15084
|
}
|
|
@@ -15076,7 +15087,7 @@ function useDialogContext() {
|
|
|
15076
15087
|
|
|
15077
15088
|
// src/components/layout/dialog/Dialog.tsx
|
|
15078
15089
|
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
15079
|
-
var Dialog = (0,
|
|
15090
|
+
var Dialog = (0, import_react62.forwardRef)(function Dialog2({
|
|
15080
15091
|
children,
|
|
15081
15092
|
isOpen: isOpenOverwrite,
|
|
15082
15093
|
titleElement,
|
|
@@ -15089,24 +15100,24 @@ var Dialog = (0, import_react63.forwardRef)(function Dialog2({
|
|
|
15089
15100
|
...props
|
|
15090
15101
|
}, forwardedRef) {
|
|
15091
15102
|
const translation = useHightideTranslation();
|
|
15092
|
-
const generatedId = (0,
|
|
15093
|
-
const ids = (0,
|
|
15103
|
+
const generatedId = (0, import_react62.useId)();
|
|
15104
|
+
const ids = (0, import_react62.useMemo)(() => ({
|
|
15094
15105
|
container: `dialog-container-${generatedId}`,
|
|
15095
15106
|
background: `dialog-background-${generatedId}`,
|
|
15096
15107
|
content: props.id ?? `dialog-content-${generatedId}`,
|
|
15097
15108
|
title: `dialog-title-${generatedId}`,
|
|
15098
15109
|
description: `dialog-description-${generatedId}`
|
|
15099
15110
|
}), [generatedId, props.id]);
|
|
15100
|
-
const containerRef = (0,
|
|
15101
|
-
const context = (0,
|
|
15111
|
+
const containerRef = (0, import_react62.useRef)(null);
|
|
15112
|
+
const context = (0, import_react62.useContext)(DialogContext);
|
|
15102
15113
|
const isOpen = isOpenOverwrite ?? context?.isOpen ?? false;
|
|
15103
15114
|
const isModal = isModalOverwrite ?? context?.isModal ?? true;
|
|
15104
15115
|
const { refAssignment, isPresent, ref } = usePresenceRef({
|
|
15105
15116
|
isOpen
|
|
15106
15117
|
});
|
|
15107
|
-
(0,
|
|
15118
|
+
(0, import_react62.useImperativeHandle)(forwardedRef, () => ref.current, [ref]);
|
|
15108
15119
|
const onCloseStable = useEventCallbackStabilizer(onClose);
|
|
15109
|
-
const onCloseWrapper = (0,
|
|
15120
|
+
const onCloseWrapper = (0, import_react62.useCallback)(() => {
|
|
15110
15121
|
if (!isModal) return;
|
|
15111
15122
|
onCloseStable();
|
|
15112
15123
|
context?.setIsOpen(false);
|
|
@@ -15190,10 +15201,10 @@ var Dialog = (0, import_react63.forwardRef)(function Dialog2({
|
|
|
15190
15201
|
});
|
|
15191
15202
|
|
|
15192
15203
|
// src/components/layout/dialog/DialogOpener.tsx
|
|
15193
|
-
var
|
|
15204
|
+
var import_react63 = require("react");
|
|
15194
15205
|
function DialogOpenerWrapper({ children }) {
|
|
15195
15206
|
const context = useDialogContext();
|
|
15196
|
-
const bag = (0,
|
|
15207
|
+
const bag = (0, import_react63.useMemo)(() => ({
|
|
15197
15208
|
open: () => context.setIsOpen(true),
|
|
15198
15209
|
close: () => context.setIsOpen(false),
|
|
15199
15210
|
toggleOpen: () => context.setIsOpen((prev) => !prev),
|
|
@@ -15371,13 +15382,13 @@ var import_lucide_react12 = require("lucide-react");
|
|
|
15371
15382
|
var import_clsx18 = __toESM(require("clsx"));
|
|
15372
15383
|
|
|
15373
15384
|
// src/global-contexts/ThemeContext.tsx
|
|
15374
|
-
var
|
|
15385
|
+
var import_react64 = require("react");
|
|
15375
15386
|
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
15376
15387
|
var themes = ["light", "dark", "system"];
|
|
15377
15388
|
var ThemeUtil = {
|
|
15378
15389
|
themes
|
|
15379
15390
|
};
|
|
15380
|
-
var ThemeContext = (0,
|
|
15391
|
+
var ThemeContext = (0, import_react64.createContext)(null);
|
|
15381
15392
|
var ThemeProvider = ({ children, theme, initialTheme }) => {
|
|
15382
15393
|
const {
|
|
15383
15394
|
value: storedTheme,
|
|
@@ -15385,8 +15396,8 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
|
|
|
15385
15396
|
deleteValue: deleteStoredTheme
|
|
15386
15397
|
} = useStorage({ key: "theme", defaultValue: "system" });
|
|
15387
15398
|
const { config } = useHightideConfig();
|
|
15388
|
-
const [themePreference, setThemePreference] = (0,
|
|
15389
|
-
const resolvedTheme = (0,
|
|
15399
|
+
const [themePreference, setThemePreference] = (0, import_react64.useState)("system");
|
|
15400
|
+
const resolvedTheme = (0, import_react64.useMemo)(() => {
|
|
15390
15401
|
if (theme && theme !== "system") {
|
|
15391
15402
|
return theme;
|
|
15392
15403
|
}
|
|
@@ -15398,7 +15409,7 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
|
|
|
15398
15409
|
}
|
|
15399
15410
|
return initialTheme ?? config.theme.initialTheme;
|
|
15400
15411
|
}, [config.theme.initialTheme, initialTheme, storedTheme, theme, themePreference]);
|
|
15401
|
-
(0,
|
|
15412
|
+
(0, import_react64.useEffect)(() => {
|
|
15402
15413
|
if (!theme) return;
|
|
15403
15414
|
if (theme === "system") {
|
|
15404
15415
|
deleteStoredTheme();
|
|
@@ -15406,18 +15417,18 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
|
|
|
15406
15417
|
setStoredTheme(theme);
|
|
15407
15418
|
}
|
|
15408
15419
|
}, [theme, deleteStoredTheme, setStoredTheme]);
|
|
15409
|
-
(0,
|
|
15420
|
+
(0, import_react64.useEffect)(() => {
|
|
15410
15421
|
document.documentElement.setAttribute("data-theme", resolvedTheme);
|
|
15411
15422
|
}, [resolvedTheme]);
|
|
15412
|
-
const getPreference = (0,
|
|
15423
|
+
const getPreference = (0, import_react64.useCallback)(() => {
|
|
15413
15424
|
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
15414
15425
|
const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches;
|
|
15415
15426
|
setThemePreference(prefersDark ? "dark" : prefersLight ? "light" : "system");
|
|
15416
15427
|
}, []);
|
|
15417
|
-
(0,
|
|
15428
|
+
(0, import_react64.useEffect)(() => {
|
|
15418
15429
|
getPreference();
|
|
15419
15430
|
}, [getPreference]);
|
|
15420
|
-
(0,
|
|
15431
|
+
(0, import_react64.useEffect)(() => {
|
|
15421
15432
|
const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
15422
15433
|
const lightQuery = window.matchMedia("(prefers-color-scheme: light)");
|
|
15423
15434
|
const noPrefQuery = window.matchMedia("(prefers-color-scheme: no-preference)");
|
|
@@ -15448,7 +15459,7 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
|
|
|
15448
15459
|
);
|
|
15449
15460
|
};
|
|
15450
15461
|
var useTheme = () => {
|
|
15451
|
-
const context = (0,
|
|
15462
|
+
const context = (0, import_react64.useContext)(ThemeContext);
|
|
15452
15463
|
if (!context) {
|
|
15453
15464
|
throw new Error("useTheme must be used within ThemeContext. Try adding a ThemeProvider around your app.");
|
|
15454
15465
|
}
|
|
@@ -15528,16 +15539,16 @@ var ThemeDialog = ({
|
|
|
15528
15539
|
};
|
|
15529
15540
|
|
|
15530
15541
|
// src/components/layout/drawer/Drawer.tsx
|
|
15531
|
-
var
|
|
15542
|
+
var import_react67 = require("react");
|
|
15532
15543
|
|
|
15533
15544
|
// src/components/layout/drawer/DrawerContent.tsx
|
|
15534
|
-
var
|
|
15545
|
+
var import_react66 = require("react");
|
|
15535
15546
|
|
|
15536
15547
|
// src/components/layout/drawer/DrawerContext.tsx
|
|
15537
|
-
var
|
|
15538
|
-
var DrawerContext = (0,
|
|
15548
|
+
var import_react65 = require("react");
|
|
15549
|
+
var DrawerContext = (0, import_react65.createContext)(null);
|
|
15539
15550
|
function useDrawerContext() {
|
|
15540
|
-
const context = (0,
|
|
15551
|
+
const context = (0, import_react65.useContext)(DrawerContext);
|
|
15541
15552
|
if (!context) {
|
|
15542
15553
|
throw new Error("useDrawerContext must be used within a <DrawerRoot>");
|
|
15543
15554
|
}
|
|
@@ -15546,7 +15557,7 @@ function useDrawerContext() {
|
|
|
15546
15557
|
|
|
15547
15558
|
// src/components/layout/drawer/DrawerContent.tsx
|
|
15548
15559
|
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
15549
|
-
var DrawerContent = (0,
|
|
15560
|
+
var DrawerContent = (0, import_react66.forwardRef)(function DrawerContent2({
|
|
15550
15561
|
children,
|
|
15551
15562
|
alignment = "left",
|
|
15552
15563
|
containerClassName,
|
|
@@ -15555,14 +15566,14 @@ var DrawerContent = (0, import_react67.forwardRef)(function DrawerContent2({
|
|
|
15555
15566
|
...props
|
|
15556
15567
|
}, forwardedRef) {
|
|
15557
15568
|
const { isOpen } = useDrawerContext();
|
|
15558
|
-
const generatedId = (0,
|
|
15559
|
-
const ids = (0,
|
|
15569
|
+
const generatedId = (0, import_react66.useId)();
|
|
15570
|
+
const ids = (0, import_react66.useMemo)(() => ({
|
|
15560
15571
|
container: `dialog-container-${generatedId}`,
|
|
15561
15572
|
background: `dialog-background-${generatedId}`,
|
|
15562
15573
|
content: props.id ?? `dialog-content-${generatedId}`
|
|
15563
15574
|
}), [generatedId, props.id]);
|
|
15564
|
-
const ref = (0,
|
|
15565
|
-
(0,
|
|
15575
|
+
const ref = (0, import_react66.useRef)(null);
|
|
15576
|
+
(0, import_react66.useImperativeHandle)(forwardedRef, () => ref.current, [ref]);
|
|
15566
15577
|
const { isVisible, transitionState } = useTransitionState({ isOpen, ref });
|
|
15567
15578
|
useFocusTrap({
|
|
15568
15579
|
container: ref,
|
|
@@ -15570,7 +15581,7 @@ var DrawerContent = (0, import_react67.forwardRef)(function DrawerContent2({
|
|
|
15570
15581
|
});
|
|
15571
15582
|
const { zIndex, tagPositions, tagItemCounts } = useOverlayRegistry({
|
|
15572
15583
|
isActive: isVisible,
|
|
15573
|
-
tags: (0,
|
|
15584
|
+
tags: (0, import_react66.useMemo)(() => ["drawer"], [])
|
|
15574
15585
|
});
|
|
15575
15586
|
const depth = tagPositions && tagItemCounts ? (tagItemCounts["drawer"] ?? 0) - (tagPositions["drawer"] ?? 0) : 0;
|
|
15576
15587
|
const { setOpen } = useDrawerContext();
|
|
@@ -15665,7 +15676,7 @@ function DrawerRoot({
|
|
|
15665
15676
|
|
|
15666
15677
|
// src/components/layout/drawer/Drawer.tsx
|
|
15667
15678
|
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
15668
|
-
var Drawer = (0,
|
|
15679
|
+
var Drawer = (0, import_react67.forwardRef)(function Drawer2({
|
|
15669
15680
|
children,
|
|
15670
15681
|
isOpen = true,
|
|
15671
15682
|
alignment = "left",
|
|
@@ -15723,7 +15734,7 @@ var ErrorComponent = ({
|
|
|
15723
15734
|
};
|
|
15724
15735
|
|
|
15725
15736
|
// src/components/layout/loading/LoadingAndErrorComponent.tsx
|
|
15726
|
-
var
|
|
15737
|
+
var import_react68 = require("react");
|
|
15727
15738
|
|
|
15728
15739
|
// src/components/layout/loading/LoadingContainer.tsx
|
|
15729
15740
|
var import_clsx20 = require("clsx");
|
|
@@ -15744,8 +15755,8 @@ var LoadingAndErrorComponent = ({
|
|
|
15744
15755
|
minimumLoadingDuration = 200,
|
|
15745
15756
|
className
|
|
15746
15757
|
}) => {
|
|
15747
|
-
const [isInMinimumLoading, setIsInMinimumLoading] = (0,
|
|
15748
|
-
const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0,
|
|
15758
|
+
const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react68.useState)(false);
|
|
15759
|
+
const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0, import_react68.useState)(false);
|
|
15749
15760
|
if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
|
|
15750
15761
|
setIsInMinimumLoading(true);
|
|
15751
15762
|
setTimeout(() => {
|
|
@@ -15808,8 +15819,8 @@ var BreadCrumbs = ({ crumbs }) => {
|
|
|
15808
15819
|
|
|
15809
15820
|
// src/components/layout/navigation/Navigation.tsx
|
|
15810
15821
|
var import_lucide_react15 = require("lucide-react");
|
|
15822
|
+
var import_react69 = require("react");
|
|
15811
15823
|
var import_react70 = require("react");
|
|
15812
|
-
var import_react71 = require("react");
|
|
15813
15824
|
var import_link2 = __toESM(require_link2());
|
|
15814
15825
|
var import_clsx23 = __toESM(require("clsx"));
|
|
15815
15826
|
var import_jsx_runtime61 = require("react/jsx-runtime");
|
|
@@ -15822,10 +15833,10 @@ var NavigationItemWithSubItem = ({
|
|
|
15822
15833
|
horizontalAlignment = "center",
|
|
15823
15834
|
...options
|
|
15824
15835
|
}) => {
|
|
15825
|
-
const [isOpen, setOpen] = (0,
|
|
15826
|
-
const containerRef = (0,
|
|
15827
|
-
const triggerRef = (0,
|
|
15828
|
-
const id = (0,
|
|
15836
|
+
const [isOpen, setOpen] = (0, import_react70.useState)(false);
|
|
15837
|
+
const containerRef = (0, import_react70.useRef)(null);
|
|
15838
|
+
const triggerRef = (0, import_react70.useRef)(null);
|
|
15839
|
+
const id = (0, import_react70.useId)();
|
|
15829
15840
|
const style = useAnchoredPosition({
|
|
15830
15841
|
active: isOpen,
|
|
15831
15842
|
container: containerRef,
|
|
@@ -15833,7 +15844,7 @@ var NavigationItemWithSubItem = ({
|
|
|
15833
15844
|
horizontalAlignment,
|
|
15834
15845
|
...options
|
|
15835
15846
|
});
|
|
15836
|
-
const onBlur = (0,
|
|
15847
|
+
const onBlur = (0, import_react70.useCallback)((event) => {
|
|
15837
15848
|
const nextFocus = event.relatedTarget;
|
|
15838
15849
|
if (!containerRef.current?.contains(nextFocus) && !triggerRef.current?.contains(nextFocus)) {
|
|
15839
15850
|
setOpen(false);
|
|
@@ -15899,10 +15910,10 @@ var NavigationItemList = ({ items, ...restProps }) => {
|
|
|
15899
15910
|
};
|
|
15900
15911
|
var Navigation = ({ ...props }) => {
|
|
15901
15912
|
const translation = useHightideTranslation();
|
|
15902
|
-
const [isMobileOpen, setIsMobileOpen] = (0,
|
|
15903
|
-
const id = (0,
|
|
15904
|
-
const menuRef = (0,
|
|
15905
|
-
(0,
|
|
15913
|
+
const [isMobileOpen, setIsMobileOpen] = (0, import_react70.useState)(false);
|
|
15914
|
+
const id = (0, import_react70.useId)();
|
|
15915
|
+
const menuRef = (0, import_react70.useRef)(null);
|
|
15916
|
+
(0, import_react69.useEffect)(() => {
|
|
15906
15917
|
menuRef.current?.focus();
|
|
15907
15918
|
}, [isMobileOpen]);
|
|
15908
15919
|
const { zIndex } = useOverlayRegistry({ isActive: isMobileOpen });
|
|
@@ -15970,7 +15981,7 @@ var Navigation = ({ ...props }) => {
|
|
|
15970
15981
|
// src/components/layout/navigation/Pagination.tsx
|
|
15971
15982
|
var import_lucide_react16 = require("lucide-react");
|
|
15972
15983
|
var import_clsx24 = __toESM(require("clsx"));
|
|
15973
|
-
var
|
|
15984
|
+
var import_react71 = require("react");
|
|
15974
15985
|
var import_jsx_runtime62 = require("react/jsx-runtime");
|
|
15975
15986
|
var Pagination = ({
|
|
15976
15987
|
pageIndex,
|
|
@@ -15979,11 +15990,11 @@ var Pagination = ({
|
|
|
15979
15990
|
...props
|
|
15980
15991
|
}) => {
|
|
15981
15992
|
const translation = useHightideTranslation();
|
|
15982
|
-
const [value, setValue] = (0,
|
|
15993
|
+
const [value, setValue] = (0, import_react71.useState)((pageIndex + 1).toString());
|
|
15983
15994
|
const noPages = pageCount === 0;
|
|
15984
15995
|
const onFirstPage = pageIndex === 0 && !noPages;
|
|
15985
15996
|
const onLastPage = pageIndex === pageCount - 1;
|
|
15986
|
-
(0,
|
|
15997
|
+
(0, import_react71.useEffect)(() => {
|
|
15987
15998
|
if (noPages) {
|
|
15988
15999
|
setValue("0");
|
|
15989
16000
|
} else {
|
|
@@ -16177,18 +16188,18 @@ var StepperBar = ({
|
|
|
16177
16188
|
};
|
|
16178
16189
|
|
|
16179
16190
|
// src/components/layout/popup/PopUpOpener.tsx
|
|
16180
|
-
var
|
|
16191
|
+
var import_react72 = require("react");
|
|
16181
16192
|
function PopUpOpener({ children }) {
|
|
16182
16193
|
const context = usePopUpContext();
|
|
16183
16194
|
const { setTriggerRef } = context;
|
|
16184
|
-
const ref = (0,
|
|
16185
|
-
(0,
|
|
16195
|
+
const ref = (0, import_react72.useRef)(null);
|
|
16196
|
+
(0, import_react72.useEffect)(() => {
|
|
16186
16197
|
setTriggerRef(ref);
|
|
16187
16198
|
return () => {
|
|
16188
16199
|
setTriggerRef(null);
|
|
16189
16200
|
};
|
|
16190
16201
|
}, [setTriggerRef]);
|
|
16191
|
-
const bag = (0,
|
|
16202
|
+
const bag = (0, import_react72.useMemo)(() => ({
|
|
16192
16203
|
open: () => context.setIsOpen(true),
|
|
16193
16204
|
close: () => context.setIsOpen(false),
|
|
16194
16205
|
toggleOpen: () => context.setIsOpen((prev) => !prev),
|
|
@@ -16206,7 +16217,7 @@ function PopUpOpener({ children }) {
|
|
|
16206
16217
|
}
|
|
16207
16218
|
|
|
16208
16219
|
// src/components/layout/popup/PopUpRoot.tsx
|
|
16209
|
-
var
|
|
16220
|
+
var import_react73 = require("react");
|
|
16210
16221
|
var import_jsx_runtime64 = require("react/jsx-runtime");
|
|
16211
16222
|
function PopUpRoot({
|
|
16212
16223
|
children,
|
|
@@ -16216,17 +16227,17 @@ function PopUpRoot({
|
|
|
16216
16227
|
popUpId: popUpIdOverwrite,
|
|
16217
16228
|
triggerId: triggerIdOverwrite
|
|
16218
16229
|
}) {
|
|
16219
|
-
const generatedPopUpId = (0,
|
|
16220
|
-
const generatedTriggerId = (0,
|
|
16230
|
+
const generatedPopUpId = (0, import_react73.useId)();
|
|
16231
|
+
const generatedTriggerId = (0, import_react73.useId)();
|
|
16221
16232
|
const [isOpen, setIsOpen] = useControlledState({
|
|
16222
16233
|
value: controlledIsOpen,
|
|
16223
16234
|
onValueChange: onIsOpenChange,
|
|
16224
16235
|
defaultValue: initialIsOpen
|
|
16225
16236
|
});
|
|
16226
|
-
const [triggerRef, setTriggerRef] = (0,
|
|
16227
|
-
const popUpId = (0,
|
|
16228
|
-
const triggerId = (0,
|
|
16229
|
-
const contextValue = (0,
|
|
16237
|
+
const [triggerRef, setTriggerRef] = (0, import_react73.useState)(null);
|
|
16238
|
+
const popUpId = (0, import_react73.useMemo)(() => popUpIdOverwrite ?? `pop-up-${generatedPopUpId}`, [popUpIdOverwrite, generatedPopUpId]);
|
|
16239
|
+
const triggerId = (0, import_react73.useMemo)(() => triggerIdOverwrite ?? `pop-up-trigger-${generatedTriggerId}`, [triggerIdOverwrite, generatedTriggerId]);
|
|
16240
|
+
const contextValue = (0, import_react73.useMemo)(() => ({
|
|
16230
16241
|
isOpen,
|
|
16231
16242
|
setIsOpen,
|
|
16232
16243
|
popUpId,
|
|
@@ -16413,31 +16424,31 @@ var FillerCell = ({ ...props }) => {
|
|
|
16413
16424
|
};
|
|
16414
16425
|
|
|
16415
16426
|
// src/components/layout/table/TableProvider.tsx
|
|
16416
|
-
var
|
|
16427
|
+
var import_react76 = require("react");
|
|
16417
16428
|
|
|
16418
16429
|
// src/components/layout/table/TableContext.tsx
|
|
16419
|
-
var
|
|
16420
|
-
var TableStateWithoutSizingContext = (0,
|
|
16430
|
+
var import_react74 = require("react");
|
|
16431
|
+
var TableStateWithoutSizingContext = (0, import_react74.createContext)(null);
|
|
16421
16432
|
var useTableStateWithoutSizingContext = () => {
|
|
16422
|
-
const context = (0,
|
|
16433
|
+
const context = (0, import_react74.useContext)(TableStateWithoutSizingContext);
|
|
16423
16434
|
if (!context) throw new Error("useTableStateWithoutSizingContext must be used within a <TableStateWithoutSizingContext.Provider> like <TableStateWithoutSizing>");
|
|
16424
16435
|
return context;
|
|
16425
16436
|
};
|
|
16426
|
-
var TableStateContext = (0,
|
|
16437
|
+
var TableStateContext = (0, import_react74.createContext)(null);
|
|
16427
16438
|
var useTableStateContext = () => {
|
|
16428
|
-
const context = (0,
|
|
16439
|
+
const context = (0, import_react74.useContext)(TableStateContext);
|
|
16429
16440
|
if (!context) throw new Error("useTableStateContext must be used within a <TableStateContext.Provider> like <TableState>");
|
|
16430
16441
|
return context;
|
|
16431
16442
|
};
|
|
16432
|
-
var TableContainerContext = (0,
|
|
16443
|
+
var TableContainerContext = (0, import_react74.createContext)(null);
|
|
16433
16444
|
var useTableContainerContext = () => {
|
|
16434
|
-
const context = (0,
|
|
16445
|
+
const context = (0, import_react74.useContext)(TableContainerContext);
|
|
16435
16446
|
if (!context) throw new Error("useTableContainerContext must be used within a <TableContainerContext.Provider> like <TableContainer>");
|
|
16436
16447
|
return context;
|
|
16437
16448
|
};
|
|
16438
|
-
var TableColumnDefinitionContext = (0,
|
|
16449
|
+
var TableColumnDefinitionContext = (0, import_react74.createContext)(null);
|
|
16439
16450
|
var useTableColumnDefinitionContext = () => {
|
|
16440
|
-
const context = (0,
|
|
16451
|
+
const context = (0, import_react74.useContext)(TableColumnDefinitionContext);
|
|
16441
16452
|
if (!context) throw new Error("useTableColumnDefinitionContext must be used within a <TableColumnDefinitionContext.Provider> like <TableColumnDefinition>");
|
|
16442
16453
|
return context;
|
|
16443
16454
|
};
|
|
@@ -16616,7 +16627,7 @@ var FilterOperatorUtils = {
|
|
|
16616
16627
|
};
|
|
16617
16628
|
|
|
16618
16629
|
// src/components/user-interaction/data/filter-function.ts
|
|
16619
|
-
var
|
|
16630
|
+
var import_react75 = require("react");
|
|
16620
16631
|
|
|
16621
16632
|
// src/utils/date.ts
|
|
16622
16633
|
var timesInSeconds = {
|
|
@@ -17287,7 +17298,7 @@ function tagToLabel(tags, value) {
|
|
|
17287
17298
|
function useFilterValueTranslation() {
|
|
17288
17299
|
const translation = useHightideTranslation();
|
|
17289
17300
|
const { locale } = useLocale();
|
|
17290
|
-
return (0,
|
|
17301
|
+
return (0, import_react75.useCallback)((value, options) => {
|
|
17291
17302
|
const p = value.parameter;
|
|
17292
17303
|
const tags = options?.tags;
|
|
17293
17304
|
const dateFormat = value.dataType === "dateTime" ? "dateTime" : "date";
|
|
@@ -17489,9 +17500,9 @@ var TableProvider = ({
|
|
|
17489
17500
|
}) => {
|
|
17490
17501
|
const onRowClickStable = useEventCallbackStabilizer(onRowClick);
|
|
17491
17502
|
const onFillerRowClickStable = useEventCallbackStabilizer(onFillerRowClick);
|
|
17492
|
-
const [registeredColumns, setRegisteredColumns] = (0,
|
|
17493
|
-
const containerRef = (0,
|
|
17494
|
-
const [, setTableState] = (0,
|
|
17503
|
+
const [registeredColumns, setRegisteredColumns] = (0, import_react76.useState)([]);
|
|
17504
|
+
const containerRef = (0, import_react76.useRef)(null);
|
|
17505
|
+
const [, setTableState] = (0, import_react76.useState)({
|
|
17495
17506
|
columnSizing: {},
|
|
17496
17507
|
columnOrder: [],
|
|
17497
17508
|
columnFilters: [],
|
|
@@ -17516,16 +17527,16 @@ var TableProvider = ({
|
|
|
17516
17527
|
pageSize: 10
|
|
17517
17528
|
}
|
|
17518
17529
|
});
|
|
17519
|
-
const [targetWidth, setTargetWidth] = (0,
|
|
17520
|
-
(0,
|
|
17530
|
+
const [targetWidth, setTargetWidth] = (0, import_react76.useState)(void 0);
|
|
17531
|
+
(0, import_react76.useLayoutEffect)(() => {
|
|
17521
17532
|
const width = containerRef.current?.getBoundingClientRect().width;
|
|
17522
17533
|
setTargetWidth(width !== void 0 ? Math.floor(width) : void 0);
|
|
17523
17534
|
}, [containerRef]);
|
|
17524
|
-
useWindowResizeObserver((0,
|
|
17535
|
+
useWindowResizeObserver((0, import_react76.useCallback)(() => {
|
|
17525
17536
|
const width = containerRef.current?.getBoundingClientRect().width;
|
|
17526
17537
|
setTargetWidth(width !== void 0 ? Math.floor(width) : void 0);
|
|
17527
17538
|
}, [containerRef]));
|
|
17528
|
-
const registerColumn = (0,
|
|
17539
|
+
const registerColumn = (0, import_react76.useCallback)((column) => {
|
|
17529
17540
|
setRegisteredColumns((prev) => {
|
|
17530
17541
|
return [...prev, column];
|
|
17531
17542
|
});
|
|
@@ -17535,7 +17546,7 @@ var TableProvider = ({
|
|
|
17535
17546
|
});
|
|
17536
17547
|
};
|
|
17537
17548
|
}, []);
|
|
17538
|
-
const columns = (0,
|
|
17549
|
+
const columns = (0, import_react76.useMemo)(() => {
|
|
17539
17550
|
const contextColumns = Array.from(registeredColumns.values());
|
|
17540
17551
|
if (columnsProp) {
|
|
17541
17552
|
return [...contextColumns, ...columnsProp];
|
|
@@ -17552,7 +17563,7 @@ var TableProvider = ({
|
|
|
17552
17563
|
defaultColumn: {
|
|
17553
17564
|
minSize: 60,
|
|
17554
17565
|
maxSize: 800,
|
|
17555
|
-
cell: (0,
|
|
17566
|
+
cell: (0, import_react76.useCallback)(({ cell }) => {
|
|
17556
17567
|
return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableCell, { children: String(cell.getValue()) });
|
|
17557
17568
|
}, []),
|
|
17558
17569
|
enableResizing: true,
|
|
@@ -17593,7 +17604,7 @@ var TableProvider = ({
|
|
|
17593
17604
|
});
|
|
17594
17605
|
const pagination = table.getState().pagination;
|
|
17595
17606
|
const pageCount = table.getPageCount();
|
|
17596
|
-
(0,
|
|
17607
|
+
(0, import_react76.useEffect)(() => {
|
|
17597
17608
|
if (pageCount === -1) {
|
|
17598
17609
|
return;
|
|
17599
17610
|
}
|
|
@@ -17601,20 +17612,20 @@ var TableProvider = ({
|
|
|
17601
17612
|
table.setPageIndex(pageCount - 1);
|
|
17602
17613
|
}
|
|
17603
17614
|
}, [table, pagination.pageIndex, pageCount]);
|
|
17604
|
-
(0,
|
|
17615
|
+
(0, import_react76.useEffect)(() => {
|
|
17605
17616
|
table.setColumnOrder((prev) => [...prev]);
|
|
17606
17617
|
}, [table, columns]);
|
|
17607
17618
|
const columnVisibility = table.getState().columnVisibility;
|
|
17608
17619
|
const columnOrder = table.getState().columnOrder;
|
|
17609
17620
|
const columnPinning = table.getState().columnPinning;
|
|
17610
|
-
(0,
|
|
17621
|
+
(0, import_react76.useEffect)(() => {
|
|
17611
17622
|
table.setColumnSizing((prev) => ({ ...prev }));
|
|
17612
17623
|
}, [table, targetWidth, columnVisibility, columnOrder, columnPinning]);
|
|
17613
|
-
const tableColumnDefinitionContextValue = (0,
|
|
17624
|
+
const tableColumnDefinitionContextValue = (0, import_react76.useMemo)(() => ({
|
|
17614
17625
|
table,
|
|
17615
17626
|
registerColumn
|
|
17616
17627
|
}), [table, registerColumn]);
|
|
17617
|
-
const tableContainerContextValue = (0,
|
|
17628
|
+
const tableContainerContextValue = (0, import_react76.useMemo)(() => ({
|
|
17618
17629
|
table,
|
|
17619
17630
|
containerRef
|
|
17620
17631
|
}), [table, containerRef]);
|
|
@@ -17623,7 +17634,7 @@ var TableProvider = ({
|
|
|
17623
17634
|
return rest;
|
|
17624
17635
|
})();
|
|
17625
17636
|
const rowModel = table.getRowModel();
|
|
17626
|
-
const tableStateWithoutSizingContextValue = (0,
|
|
17637
|
+
const tableStateWithoutSizingContextValue = (0, import_react76.useMemo)(() => ({
|
|
17627
17638
|
table,
|
|
17628
17639
|
isUsingFillerRows,
|
|
17629
17640
|
fillerRowCell,
|
|
@@ -17666,7 +17677,7 @@ var TableProvider = ({
|
|
|
17666
17677
|
]);
|
|
17667
17678
|
const columnSizing = table.getState().columnSizing;
|
|
17668
17679
|
const columnSizingInfo = table.getState().columnSizingInfo;
|
|
17669
|
-
const tableStateContextValue = (0,
|
|
17680
|
+
const tableStateContextValue = (0, import_react76.useMemo)(() => ({
|
|
17670
17681
|
...tableStateWithoutSizingContextValue,
|
|
17671
17682
|
sizeVars: ColumnSizeUtil.toSizeVars(columnSizing),
|
|
17672
17683
|
columnSizingInfo,
|
|
@@ -17677,10 +17688,10 @@ var TableProvider = ({
|
|
|
17677
17688
|
|
|
17678
17689
|
// src/components/layout/table/TableBody.tsx
|
|
17679
17690
|
var import_react_table2 = require("@tanstack/react-table");
|
|
17680
|
-
var
|
|
17691
|
+
var import_react77 = __toESM(require("react"));
|
|
17681
17692
|
var import_clsx26 = __toESM(require("clsx"));
|
|
17682
17693
|
var import_jsx_runtime69 = require("react/jsx-runtime");
|
|
17683
|
-
var TableBody =
|
|
17694
|
+
var TableBody = import_react77.default.memo(function TableBodyVisual() {
|
|
17684
17695
|
const { table, isUsingFillerRows, fillerRowCell, onRowClick, onFillerRowClick } = useTableStateWithoutSizingContext();
|
|
17685
17696
|
const rows = table.getRowModel().rows;
|
|
17686
17697
|
const columnOrder = table.getState().columnOrder;
|
|
@@ -17778,20 +17789,20 @@ var TableSortButton = ({
|
|
|
17778
17789
|
|
|
17779
17790
|
// src/components/layout/table/TableFilterButton.tsx
|
|
17780
17791
|
var import_lucide_react25 = require("lucide-react");
|
|
17781
|
-
var
|
|
17792
|
+
var import_react94 = require("react");
|
|
17782
17793
|
var import_react_table3 = require("@tanstack/react-table");
|
|
17783
17794
|
|
|
17784
17795
|
// src/components/user-interaction/data/FilterPopUp.tsx
|
|
17785
17796
|
var import_lucide_react24 = require("lucide-react");
|
|
17786
|
-
var
|
|
17797
|
+
var import_react93 = require("react");
|
|
17787
17798
|
|
|
17788
17799
|
// src/components/user-interaction/input/DateTimeInput.tsx
|
|
17789
|
-
var
|
|
17800
|
+
var import_react84 = require("react");
|
|
17790
17801
|
var import_lucide_react22 = require("lucide-react");
|
|
17791
17802
|
var import_clsx31 = __toESM(require("clsx"));
|
|
17792
17803
|
|
|
17793
17804
|
// src/components/user-interaction/date/TimePicker.tsx
|
|
17794
|
-
var
|
|
17805
|
+
var import_react78 = require("react");
|
|
17795
17806
|
var import_jsx_runtime71 = require("react/jsx-runtime");
|
|
17796
17807
|
var TimePicker = ({
|
|
17797
17808
|
value: controlledValue,
|
|
@@ -17812,11 +17823,11 @@ var TimePicker = ({
|
|
|
17812
17823
|
onValueChange,
|
|
17813
17824
|
defaultValue: initialValue
|
|
17814
17825
|
});
|
|
17815
|
-
const minuteRef = (0,
|
|
17816
|
-
const hourRef = (0,
|
|
17826
|
+
const minuteRef = (0, import_react78.useRef)(null);
|
|
17827
|
+
const hourRef = (0, import_react78.useRef)(null);
|
|
17817
17828
|
const isPM = value.getHours() > 11;
|
|
17818
17829
|
const hours = is24HourFormat ? range(24) : range(12);
|
|
17819
|
-
const minutes = (0,
|
|
17830
|
+
const minutes = (0, import_react78.useMemo)(() => {
|
|
17820
17831
|
const full = range(60);
|
|
17821
17832
|
switch (minuteIncrement) {
|
|
17822
17833
|
case "5min":
|
|
@@ -17829,7 +17840,7 @@ var TimePicker = ({
|
|
|
17829
17840
|
return full.filter((value2) => value2 % 30 === 0);
|
|
17830
17841
|
}
|
|
17831
17842
|
}, [minuteIncrement]);
|
|
17832
|
-
const seconds = (0,
|
|
17843
|
+
const seconds = (0, import_react78.useMemo)(() => {
|
|
17833
17844
|
const full = range(60);
|
|
17834
17845
|
switch (secondIncrement) {
|
|
17835
17846
|
case "1s":
|
|
@@ -17844,7 +17855,7 @@ var TimePicker = ({
|
|
|
17844
17855
|
return full.filter((value2) => value2 % 30 === 0);
|
|
17845
17856
|
}
|
|
17846
17857
|
}, [secondIncrement]);
|
|
17847
|
-
const milliseconds = (0,
|
|
17858
|
+
const milliseconds = (0, import_react78.useMemo)(() => {
|
|
17848
17859
|
const full = range(1e3);
|
|
17849
17860
|
switch (millisecondIncrement) {
|
|
17850
17861
|
case "1ms":
|
|
@@ -17865,17 +17876,17 @@ var TimePicker = ({
|
|
|
17865
17876
|
return full.filter((value2) => value2 % 500 === 0);
|
|
17866
17877
|
}
|
|
17867
17878
|
}, [millisecondIncrement]);
|
|
17868
|
-
const closestMinute = (0,
|
|
17869
|
-
const closestSecond = (0,
|
|
17870
|
-
const closestMillisecond = (0,
|
|
17879
|
+
const closestMinute = (0, import_react78.useMemo)(() => closestMatch(minutes, (item1, item2) => Math.abs(item1 - value.getMinutes()) < Math.abs(item2 - value.getMinutes())), [minutes, value]);
|
|
17880
|
+
const closestSecond = (0, import_react78.useMemo)(() => closestMatch(seconds, (item1, item2) => Math.abs(item1 - value.getSeconds()) < Math.abs(item2 - value.getSeconds())), [seconds, value]);
|
|
17881
|
+
const closestMillisecond = (0, import_react78.useMemo)(() => closestMatch(milliseconds, (item1, item2) => Math.abs(item1 - value.getMilliseconds()) < Math.abs(item2 - value.getMilliseconds())), [milliseconds, value]);
|
|
17871
17882
|
const hour = value.getHours();
|
|
17872
|
-
(0,
|
|
17883
|
+
(0, import_react78.useEffect)(() => {
|
|
17873
17884
|
minuteRef.current?.scrollIntoView({
|
|
17874
17885
|
behavior: "smooth",
|
|
17875
17886
|
block: "nearest"
|
|
17876
17887
|
});
|
|
17877
17888
|
}, [closestMinute]);
|
|
17878
|
-
(0,
|
|
17889
|
+
(0, import_react78.useEffect)(() => {
|
|
17879
17890
|
hourRef.current?.scrollIntoView({
|
|
17880
17891
|
behavior: "smooth",
|
|
17881
17892
|
block: "nearest"
|
|
@@ -17974,12 +17985,12 @@ var TimePicker = ({
|
|
|
17974
17985
|
};
|
|
17975
17986
|
|
|
17976
17987
|
// src/components/user-interaction/date/DatePicker.tsx
|
|
17977
|
-
var
|
|
17988
|
+
var import_react81 = require("react");
|
|
17978
17989
|
var import_lucide_react21 = require("lucide-react");
|
|
17979
17990
|
var import_clsx29 = __toESM(require("clsx"));
|
|
17980
17991
|
|
|
17981
17992
|
// src/components/user-interaction/date/DayPicker.tsx
|
|
17982
|
-
var
|
|
17993
|
+
var import_react79 = require("react");
|
|
17983
17994
|
var import_jsx_runtime72 = require("react/jsx-runtime");
|
|
17984
17995
|
var DayPicker = ({
|
|
17985
17996
|
displayedMonth: controlledDisplayedMonth,
|
|
@@ -18008,33 +18019,33 @@ var DayPicker = ({
|
|
|
18008
18019
|
});
|
|
18009
18020
|
const month = displayedMonth.getMonth();
|
|
18010
18021
|
const weeks = DateUtils.weeksForCalenderMonth(displayedMonth, weekStart);
|
|
18011
|
-
const selectedButtonRef = (0,
|
|
18012
|
-
const isValueInDisplayedWeeks = (0,
|
|
18022
|
+
const selectedButtonRef = (0, import_react79.useRef)(null);
|
|
18023
|
+
const isValueInDisplayedWeeks = (0, import_react79.useMemo)(
|
|
18013
18024
|
() => !!value && weeks.some((week) => week.some((d) => DateUtils.equalDate(value, d))),
|
|
18014
18025
|
[value, weeks]
|
|
18015
18026
|
);
|
|
18016
|
-
const firstDayOfMonth = (0,
|
|
18027
|
+
const firstDayOfMonth = (0, import_react79.useCallback)(
|
|
18017
18028
|
(date) => new Date(date.getFullYear(), date.getMonth(), 1),
|
|
18018
18029
|
[]
|
|
18019
18030
|
);
|
|
18020
18031
|
const focusTargetDate = value && isValueInDisplayedWeeks ? value : firstDayOfMonth(displayedMonth);
|
|
18021
|
-
(0,
|
|
18032
|
+
(0, import_react79.useEffect)(() => {
|
|
18022
18033
|
selectedButtonRef.current?.focus();
|
|
18023
18034
|
}, [focusTargetDate]);
|
|
18024
|
-
const end = (0,
|
|
18035
|
+
const end = (0, import_react79.useMemo)(() => {
|
|
18025
18036
|
if (!providedEnd) return;
|
|
18026
18037
|
return new Date(providedEnd.getFullYear(), providedEnd.getMonth(), providedEnd.getDate());
|
|
18027
18038
|
}, [providedEnd]);
|
|
18028
|
-
const start = (0,
|
|
18039
|
+
const start = (0, import_react79.useMemo)(() => {
|
|
18029
18040
|
if (!providedStart) return;
|
|
18030
18041
|
return new Date(providedStart.getFullYear(), providedStart.getMonth(), providedStart.getDate());
|
|
18031
18042
|
}, [providedStart]);
|
|
18032
|
-
const clampToRange = (0,
|
|
18043
|
+
const clampToRange = (0, import_react79.useCallback)((date) => {
|
|
18033
18044
|
if (start && date < start) return start;
|
|
18034
18045
|
if (end && date > end) return end;
|
|
18035
18046
|
return date;
|
|
18036
18047
|
}, [start, end]);
|
|
18037
|
-
const navigateTo = (0,
|
|
18048
|
+
const navigateTo = (0, import_react79.useCallback)((candidate) => {
|
|
18038
18049
|
const clamped = clampToRange(candidate);
|
|
18039
18050
|
if (!DateUtils.between(clamped, start, end)) return;
|
|
18040
18051
|
setValue(clamped);
|
|
@@ -18043,7 +18054,7 @@ var DayPicker = ({
|
|
|
18043
18054
|
setDisplayedMonth(firstDayOfMonth(clamped));
|
|
18044
18055
|
}
|
|
18045
18056
|
}, [clampToRange, start, end, setValue, onEditComplete, displayedMonth, setDisplayedMonth, firstDayOfMonth]);
|
|
18046
|
-
const onKeyDown = (0,
|
|
18057
|
+
const onKeyDown = (0, import_react79.useCallback)(
|
|
18047
18058
|
(event) => {
|
|
18048
18059
|
PropsUtil.aria.navigate({
|
|
18049
18060
|
left: () => focusTargetDate && navigateTo(DateUtils.subtractDuration(focusTargetDate, { days: 1 })),
|
|
@@ -18100,10 +18111,10 @@ var DayPicker = ({
|
|
|
18100
18111
|
};
|
|
18101
18112
|
|
|
18102
18113
|
// src/components/user-interaction/date/YearMonthPicker.tsx
|
|
18103
|
-
var
|
|
18114
|
+
var import_react80 = require("react");
|
|
18104
18115
|
var import_clsx28 = __toESM(require("clsx"));
|
|
18105
18116
|
var import_jsx_runtime73 = require("react/jsx-runtime");
|
|
18106
|
-
var YearRow = (0,
|
|
18117
|
+
var YearRow = (0, import_react80.memo)(function YearRow2({
|
|
18107
18118
|
year,
|
|
18108
18119
|
selectedMonthIndex,
|
|
18109
18120
|
minTimestamp,
|
|
@@ -18111,15 +18122,15 @@ var YearRow = (0, import_react81.memo)(function YearRow2({
|
|
|
18111
18122
|
monthNames,
|
|
18112
18123
|
onSelect
|
|
18113
18124
|
}) {
|
|
18114
|
-
const ref = (0,
|
|
18125
|
+
const ref = (0, import_react80.useRef)(null);
|
|
18115
18126
|
const isSelectedYear = selectedMonthIndex !== void 0;
|
|
18116
|
-
const [isExpanded, setIsExpanded] = (0,
|
|
18117
|
-
(0,
|
|
18127
|
+
const [isExpanded, setIsExpanded] = (0, import_react80.useState)(false);
|
|
18128
|
+
(0, import_react80.useEffect)(() => {
|
|
18118
18129
|
if (isSelectedYear) {
|
|
18119
18130
|
ref.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
|
18120
18131
|
}
|
|
18121
18132
|
}, [isSelectedYear]);
|
|
18122
|
-
const monthGrid = (0,
|
|
18133
|
+
const monthGrid = (0, import_react80.useMemo)(() => equalSizeGroups([...DateUtils.monthsList], 3), []);
|
|
18123
18134
|
return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
|
|
18124
18135
|
ExpandableRoot,
|
|
18125
18136
|
{
|
|
@@ -18174,23 +18185,23 @@ var YearMonthPicker = ({
|
|
|
18174
18185
|
defaultValue: initialValue
|
|
18175
18186
|
});
|
|
18176
18187
|
const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
|
|
18177
|
-
const monthNames = (0,
|
|
18188
|
+
const monthNames = (0, import_react80.useMemo)(() => {
|
|
18178
18189
|
const formatter = new Intl.DateTimeFormat(locale, { month: "short" });
|
|
18179
18190
|
return Array.from({ length: 12 }, (_, i) => formatter.format(new Date(2e3, i, 1)));
|
|
18180
18191
|
}, [locale]);
|
|
18181
|
-
const years = (0,
|
|
18192
|
+
const years = (0, import_react80.useMemo)(
|
|
18182
18193
|
() => range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false }),
|
|
18183
18194
|
[start, end]
|
|
18184
18195
|
);
|
|
18185
|
-
const minTimestamp = (0,
|
|
18196
|
+
const minTimestamp = (0, import_react80.useMemo)(() => {
|
|
18186
18197
|
if (!start) return;
|
|
18187
18198
|
return new Date(start.getFullYear(), start.getMonth(), 1).getTime();
|
|
18188
18199
|
}, [start]);
|
|
18189
|
-
const maxTimestamp = (0,
|
|
18200
|
+
const maxTimestamp = (0, import_react80.useMemo)(() => {
|
|
18190
18201
|
if (!end) return;
|
|
18191
18202
|
return new Date(end.getFullYear(), end.getMonth() + 1, 0).getTime();
|
|
18192
18203
|
}, [end]);
|
|
18193
|
-
const handleSelect = (0,
|
|
18204
|
+
const handleSelect = (0, import_react80.useCallback)((newDate) => {
|
|
18194
18205
|
setValue(newDate);
|
|
18195
18206
|
onEditCompleteStable(newDate);
|
|
18196
18207
|
}, [onEditCompleteStable, setValue]);
|
|
@@ -18243,8 +18254,8 @@ var DatePicker = ({
|
|
|
18243
18254
|
onValueChange,
|
|
18244
18255
|
defaultValue: initialValue
|
|
18245
18256
|
});
|
|
18246
|
-
const [displayedMonth, setDisplayedMonth] = (0,
|
|
18247
|
-
const [displayMode, setDisplayMode] = (0,
|
|
18257
|
+
const [displayedMonth, setDisplayedMonth] = (0, import_react81.useState)(new Date(value.getFullYear(), value.getMonth(), 1));
|
|
18258
|
+
const [displayMode, setDisplayMode] = (0, import_react81.useState)(initialDisplay);
|
|
18248
18259
|
return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: (0, import_clsx29.default)("flex-col-3", className), children: [
|
|
18249
18260
|
/* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex-row-2 items-center justify-between", children: [
|
|
18250
18261
|
/* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
|
|
@@ -18406,7 +18417,7 @@ var DateTimePicker = ({
|
|
|
18406
18417
|
};
|
|
18407
18418
|
|
|
18408
18419
|
// src/components/user-interaction/date/DateTimePickerDialog.tsx
|
|
18409
|
-
var
|
|
18420
|
+
var import_react82 = require("react");
|
|
18410
18421
|
var import_jsx_runtime76 = require("react/jsx-runtime");
|
|
18411
18422
|
var DateTimePickerDialog = ({
|
|
18412
18423
|
initialValue = null,
|
|
@@ -18434,8 +18445,8 @@ var DateTimePickerDialog = ({
|
|
|
18434
18445
|
onValueChange,
|
|
18435
18446
|
defaultValue: initialValue
|
|
18436
18447
|
});
|
|
18437
|
-
const [pickerState, setPickerState] = (0,
|
|
18438
|
-
(0,
|
|
18448
|
+
const [pickerState, setPickerState] = (0, import_react82.useState)(state ?? /* @__PURE__ */ new Date());
|
|
18449
|
+
(0, import_react82.useEffect)(() => {
|
|
18439
18450
|
setPickerState(state ?? /* @__PURE__ */ new Date());
|
|
18440
18451
|
}, [state]);
|
|
18441
18452
|
return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
|
|
@@ -18509,7 +18520,7 @@ var DateTimePickerDialog = ({
|
|
|
18509
18520
|
};
|
|
18510
18521
|
|
|
18511
18522
|
// src/components/user-interaction/input/DateTimeField.tsx
|
|
18512
|
-
var
|
|
18523
|
+
var import_react83 = require("react");
|
|
18513
18524
|
var import_clsx30 = __toESM(require("clsx"));
|
|
18514
18525
|
|
|
18515
18526
|
// src/components/user-interaction/input/dateTimeSegments.ts
|
|
@@ -18786,7 +18797,7 @@ var formatSegment = (type, values, buffer, locale) => {
|
|
|
18786
18797
|
// src/components/user-interaction/input/DateTimeField.tsx
|
|
18787
18798
|
var import_jsx_runtime77 = require("react/jsx-runtime");
|
|
18788
18799
|
var advanceKeys = [".", ":", "/", ",", "-", " "];
|
|
18789
|
-
var DateTimeField = (0,
|
|
18800
|
+
var DateTimeField = (0, import_react83.forwardRef)(function DateTimeField2({
|
|
18790
18801
|
value: controlledValue,
|
|
18791
18802
|
initialValue = null,
|
|
18792
18803
|
onValueChange,
|
|
@@ -18811,20 +18822,20 @@ var DateTimeField = (0, import_react84.forwardRef)(function DateTimeField2({
|
|
|
18811
18822
|
defaultValue: initialValue
|
|
18812
18823
|
});
|
|
18813
18824
|
const is24Hour = is24HourFormat ?? contextIs24HourFormat ?? true;
|
|
18814
|
-
const layout = (0,
|
|
18825
|
+
const layout = (0, import_react83.useMemo)(
|
|
18815
18826
|
() => buildSegmentLayout({ locale, mode, precision, is24HourFormat: is24Hour }),
|
|
18816
18827
|
[locale, mode, precision, is24Hour]
|
|
18817
18828
|
);
|
|
18818
|
-
const editableTypes = (0,
|
|
18819
|
-
const [editState, setEditState] = (0,
|
|
18829
|
+
const editableTypes = (0, import_react83.useMemo)(() => editableTypesOf(layout), [layout]);
|
|
18830
|
+
const [editState, setEditState] = (0, import_react83.useState)(() => ({
|
|
18820
18831
|
values: value ? decomposeDate(value, layout, is24Hour) : {},
|
|
18821
18832
|
buffer: null
|
|
18822
18833
|
}));
|
|
18823
|
-
const [focusedType, setFocusedType] = (0,
|
|
18824
|
-
const editStateRef = (0,
|
|
18834
|
+
const [focusedType, setFocusedType] = (0, import_react83.useState)(null);
|
|
18835
|
+
const editStateRef = (0, import_react83.useRef)(editState);
|
|
18825
18836
|
editStateRef.current = editState;
|
|
18826
|
-
const segmentRefs = (0,
|
|
18827
|
-
const segmentRefCallbacks = (0,
|
|
18837
|
+
const segmentRefs = (0, import_react83.useRef)(/* @__PURE__ */ new Map());
|
|
18838
|
+
const segmentRefCallbacks = (0, import_react83.useRef)(/* @__PURE__ */ new Map());
|
|
18828
18839
|
const registerSegment = (type) => {
|
|
18829
18840
|
const existing = segmentRefCallbacks.current.get(type);
|
|
18830
18841
|
if (existing) {
|
|
@@ -18840,7 +18851,7 @@ var DateTimeField = (0, import_react84.forwardRef)(function DateTimeField2({
|
|
|
18840
18851
|
segmentRefCallbacks.current.set(type, callback);
|
|
18841
18852
|
return callback;
|
|
18842
18853
|
};
|
|
18843
|
-
(0,
|
|
18854
|
+
(0, import_react83.useEffect)(() => {
|
|
18844
18855
|
if (editStateRef.current.buffer) {
|
|
18845
18856
|
return;
|
|
18846
18857
|
}
|
|
@@ -18868,7 +18879,7 @@ var DateTimeField = (0, import_react84.forwardRef)(function DateTimeField2({
|
|
|
18868
18879
|
const focusType = (type) => {
|
|
18869
18880
|
setFocusedType(type);
|
|
18870
18881
|
};
|
|
18871
|
-
(0,
|
|
18882
|
+
(0, import_react83.useLayoutEffect)(() => {
|
|
18872
18883
|
if (focusedType === null) {
|
|
18873
18884
|
return;
|
|
18874
18885
|
}
|
|
@@ -19033,7 +19044,7 @@ var DateTimeField = (0, import_react84.forwardRef)(function DateTimeField2({
|
|
|
19033
19044
|
|
|
19034
19045
|
// src/components/user-interaction/input/DateTimeInput.tsx
|
|
19035
19046
|
var import_jsx_runtime78 = require("react/jsx-runtime");
|
|
19036
|
-
var DateTimeInput = (0,
|
|
19047
|
+
var DateTimeInput = (0, import_react84.forwardRef)(function DateTimeInput2({
|
|
19037
19048
|
id: inputId,
|
|
19038
19049
|
value,
|
|
19039
19050
|
initialValue = null,
|
|
@@ -19066,34 +19077,34 @@ var DateTimeInput = (0, import_react85.forwardRef)(function DateTimeInput2({
|
|
|
19066
19077
|
const translation = useHightideTranslation();
|
|
19067
19078
|
const { timeZone: contextTimeZone } = useLocale();
|
|
19068
19079
|
const timeZone = timeZoneOverride ?? contextTimeZone;
|
|
19069
|
-
const [isOpen, setIsOpen] = (0,
|
|
19080
|
+
const [isOpen, setIsOpen] = (0, import_react84.useState)(false);
|
|
19070
19081
|
const [state, setState] = useControlledState({
|
|
19071
19082
|
value,
|
|
19072
19083
|
onValueChange,
|
|
19073
19084
|
defaultValue: initialValue
|
|
19074
19085
|
});
|
|
19075
|
-
const [dialogValue, setDialogValue] = (0,
|
|
19076
|
-
const changeOpenWrapper = (0,
|
|
19086
|
+
const [dialogValue, setDialogValue] = (0, import_react84.useState)(state);
|
|
19087
|
+
const changeOpenWrapper = (0, import_react84.useCallback)((isOpen2) => {
|
|
19077
19088
|
onDialogOpeningChange?.(isOpen2);
|
|
19078
19089
|
setIsOpen(isOpen2);
|
|
19079
19090
|
}, [onDialogOpeningChange]);
|
|
19080
|
-
const toZoned = (0,
|
|
19081
|
-
const fromZoned = (0,
|
|
19082
|
-
const generatedId = (0,
|
|
19083
|
-
const ids = (0,
|
|
19091
|
+
const toZoned = (0, import_react84.useCallback)((date) => DateUtils.toZonedDate(date, timeZone), [timeZone]);
|
|
19092
|
+
const fromZoned = (0, import_react84.useCallback)((date) => DateUtils.fromZonedDate(date, timeZone), [timeZone]);
|
|
19093
|
+
const generatedId = (0, import_react84.useId)();
|
|
19094
|
+
const ids = (0, import_react84.useMemo)(() => ({
|
|
19084
19095
|
input: inputId ?? `date-time-input-${generatedId}`,
|
|
19085
19096
|
popup: `date-time-input-popup-${generatedId}`,
|
|
19086
19097
|
label: `date-time-input-label-${generatedId}`
|
|
19087
19098
|
}), [generatedId, inputId]);
|
|
19088
|
-
const controlRef = (0,
|
|
19089
|
-
const fieldRef = (0,
|
|
19090
|
-
(0,
|
|
19091
|
-
(0,
|
|
19099
|
+
const controlRef = (0, import_react84.useRef)(null);
|
|
19100
|
+
const fieldRef = (0, import_react84.useRef)(null);
|
|
19101
|
+
(0, import_react84.useImperativeHandle)(forwardedRef, () => controlRef.current);
|
|
19102
|
+
(0, import_react84.useEffect)(() => {
|
|
19092
19103
|
if (readOnly || disabled) {
|
|
19093
19104
|
changeOpenWrapper(false);
|
|
19094
19105
|
}
|
|
19095
19106
|
}, [changeOpenWrapper, readOnly, disabled]);
|
|
19096
|
-
(0,
|
|
19107
|
+
(0, import_react84.useEffect)(() => {
|
|
19097
19108
|
if (isOpen) {
|
|
19098
19109
|
setDialogValue(state);
|
|
19099
19110
|
}
|
|
@@ -19227,25 +19238,25 @@ var DateTimeInput = (0, import_react85.forwardRef)(function DateTimeInput2({
|
|
|
19227
19238
|
});
|
|
19228
19239
|
|
|
19229
19240
|
// src/components/user-interaction/MultiSelect/MultiSelect.tsx
|
|
19230
|
-
var
|
|
19241
|
+
var import_react92 = require("react");
|
|
19231
19242
|
|
|
19232
19243
|
// src/components/user-interaction/MultiSelect/MultiSelectRoot.tsx
|
|
19233
|
-
var
|
|
19244
|
+
var import_react88 = require("react");
|
|
19234
19245
|
|
|
19235
19246
|
// src/components/user-interaction/MultiSelect/MultiSelectContext.tsx
|
|
19236
|
-
var
|
|
19237
|
-
var MultiSelectContext = (0,
|
|
19247
|
+
var import_react85 = require("react");
|
|
19248
|
+
var MultiSelectContext = (0, import_react85.createContext)(null);
|
|
19238
19249
|
function useMultiSelectContext() {
|
|
19239
|
-
const ctx = (0,
|
|
19250
|
+
const ctx = (0, import_react85.useContext)(MultiSelectContext);
|
|
19240
19251
|
if (!ctx) throw new Error("useMultiSelectContext must be used within MultiSelectRoot");
|
|
19241
19252
|
return ctx;
|
|
19242
19253
|
}
|
|
19243
19254
|
|
|
19244
19255
|
// src/components/user-interaction/MultiSelect/useMultiSelect.ts
|
|
19245
|
-
var
|
|
19256
|
+
var import_react87 = require("react");
|
|
19246
19257
|
|
|
19247
19258
|
// src/hooks/useMultiSelection.ts
|
|
19248
|
-
var
|
|
19259
|
+
var import_react86 = require("react");
|
|
19249
19260
|
function useMultiSelection({
|
|
19250
19261
|
options: optionsList,
|
|
19251
19262
|
value,
|
|
@@ -19259,8 +19270,8 @@ function useMultiSelection({
|
|
|
19259
19270
|
defaultValue: [...initialSelection],
|
|
19260
19271
|
isControlled
|
|
19261
19272
|
});
|
|
19262
|
-
const isSelected = (0,
|
|
19263
|
-
const toggleSelection = (0,
|
|
19273
|
+
const isSelected = (0, import_react86.useCallback)((id) => selection.includes(id), [selection]);
|
|
19274
|
+
const toggleSelection = (0, import_react86.useCallback)(
|
|
19264
19275
|
(id) => {
|
|
19265
19276
|
const option = optionsList.find((o) => o.id === id);
|
|
19266
19277
|
if (!option || option.disabled) return;
|
|
@@ -19268,11 +19279,11 @@ function useMultiSelection({
|
|
|
19268
19279
|
},
|
|
19269
19280
|
[optionsList, setSelection]
|
|
19270
19281
|
);
|
|
19271
|
-
const setSelectionValue = (0,
|
|
19282
|
+
const setSelectionValue = (0, import_react86.useCallback)(
|
|
19272
19283
|
(next) => setSelection(Array.from(next)),
|
|
19273
19284
|
[setSelection]
|
|
19274
19285
|
);
|
|
19275
|
-
return (0,
|
|
19286
|
+
return (0, import_react86.useMemo)(
|
|
19276
19287
|
() => ({
|
|
19277
19288
|
selection,
|
|
19278
19289
|
setSelection: setSelectionValue,
|
|
@@ -19294,9 +19305,9 @@ function useMultiSelect({
|
|
|
19294
19305
|
initialIsOpen = false,
|
|
19295
19306
|
typeAheadResetMs = 500
|
|
19296
19307
|
}) {
|
|
19297
|
-
const [isOpen, setIsOpen] = (0,
|
|
19298
|
-
const [searchQuery, setSearchQuery] = (0,
|
|
19299
|
-
const selectionOptions = (0,
|
|
19308
|
+
const [isOpen, setIsOpen] = (0, import_react87.useState)(initialIsOpen);
|
|
19309
|
+
const [searchQuery, setSearchQuery] = (0, import_react87.useState)("");
|
|
19310
|
+
const selectionOptions = (0, import_react87.useMemo)(
|
|
19300
19311
|
() => options.map((o) => ({ id: o.id, disabled: o.disabled })),
|
|
19301
19312
|
[options]
|
|
19302
19313
|
);
|
|
@@ -19312,13 +19323,13 @@ function useMultiSelect({
|
|
|
19312
19323
|
const { searchResult: visibleOptions } = useSearch({
|
|
19313
19324
|
items: options,
|
|
19314
19325
|
searchQuery,
|
|
19315
|
-
toTags: (0,
|
|
19326
|
+
toTags: (0, import_react87.useCallback)((o) => [o.label ?? ""], [])
|
|
19316
19327
|
});
|
|
19317
|
-
const visibleOptionIds = (0,
|
|
19328
|
+
const visibleOptionIds = (0, import_react87.useMemo)(
|
|
19318
19329
|
() => visibleOptions.map((o) => o.id),
|
|
19319
19330
|
[visibleOptions]
|
|
19320
19331
|
);
|
|
19321
|
-
const enabledOptions = (0,
|
|
19332
|
+
const enabledOptions = (0, import_react87.useMemo)(
|
|
19322
19333
|
() => visibleOptions.filter((o) => !o.disabled),
|
|
19323
19334
|
[visibleOptions]
|
|
19324
19335
|
);
|
|
@@ -19331,7 +19342,7 @@ function useMultiSelect({
|
|
|
19331
19342
|
options: enabledOptions,
|
|
19332
19343
|
resetTimer: typeAheadResetMs,
|
|
19333
19344
|
toString: (o) => o.label ?? "",
|
|
19334
|
-
onResultChange: (0,
|
|
19345
|
+
onResultChange: (0, import_react87.useCallback)(
|
|
19335
19346
|
(option) => {
|
|
19336
19347
|
if (option) listNav.highlight(option.id);
|
|
19337
19348
|
},
|
|
@@ -19339,14 +19350,14 @@ function useMultiSelect({
|
|
|
19339
19350
|
)
|
|
19340
19351
|
});
|
|
19341
19352
|
const { reset: typeAheadReset, addToTypeAhead } = typeAhead;
|
|
19342
|
-
(0,
|
|
19353
|
+
(0, import_react87.useEffect)(() => {
|
|
19343
19354
|
if (!isOpen) typeAheadReset();
|
|
19344
19355
|
}, [isOpen, typeAheadReset]);
|
|
19345
|
-
const highlightItem = (0,
|
|
19356
|
+
const highlightItem = (0, import_react87.useCallback)((id) => {
|
|
19346
19357
|
if (!enabledOptions.some((o) => o.id === id)) return;
|
|
19347
19358
|
listNavHighlight(id);
|
|
19348
19359
|
}, [enabledOptions, listNavHighlight]);
|
|
19349
|
-
const toggleSelectionValue = (0,
|
|
19360
|
+
const toggleSelectionValue = (0, import_react87.useCallback)((id, newIsSelected) => {
|
|
19350
19361
|
const next = newIsSelected ?? !isSelected(id);
|
|
19351
19362
|
if (next) {
|
|
19352
19363
|
toggleSelection(id);
|
|
@@ -19355,7 +19366,7 @@ function useMultiSelect({
|
|
|
19355
19366
|
}
|
|
19356
19367
|
highlightItem(id);
|
|
19357
19368
|
}, [toggleSelection, setSelection, highlightItem, isSelected, selection]);
|
|
19358
|
-
const setIsOpenWrapper = (0,
|
|
19369
|
+
const setIsOpenWrapper = (0, import_react87.useCallback)(
|
|
19359
19370
|
(open, behavior) => {
|
|
19360
19371
|
setIsOpen(open);
|
|
19361
19372
|
behavior = behavior ?? "first";
|
|
@@ -19386,13 +19397,13 @@ function useMultiSelect({
|
|
|
19386
19397
|
enabledOptions
|
|
19387
19398
|
]
|
|
19388
19399
|
);
|
|
19389
|
-
const toggleOpenWrapper = (0,
|
|
19400
|
+
const toggleOpenWrapper = (0, import_react87.useCallback)(
|
|
19390
19401
|
(behavior) => {
|
|
19391
19402
|
setIsOpenWrapper(!isOpen, behavior);
|
|
19392
19403
|
},
|
|
19393
19404
|
[isOpen, setIsOpenWrapper]
|
|
19394
19405
|
);
|
|
19395
|
-
const state = (0,
|
|
19406
|
+
const state = (0, import_react87.useMemo)(
|
|
19396
19407
|
() => ({
|
|
19397
19408
|
value: [...selection],
|
|
19398
19409
|
highlightedId: listNav.highlightedId,
|
|
@@ -19408,11 +19419,11 @@ function useMultiSelect({
|
|
|
19408
19419
|
options
|
|
19409
19420
|
]
|
|
19410
19421
|
);
|
|
19411
|
-
const computedState = (0,
|
|
19422
|
+
const computedState = (0, import_react87.useMemo)(
|
|
19412
19423
|
() => ({ visibleOptionIds }),
|
|
19413
19424
|
[visibleOptionIds]
|
|
19414
19425
|
);
|
|
19415
|
-
const actions = (0,
|
|
19426
|
+
const actions = (0, import_react87.useMemo)(
|
|
19416
19427
|
() => ({
|
|
19417
19428
|
setIsOpen: setIsOpenWrapper,
|
|
19418
19429
|
toggleOpen: toggleOpenWrapper,
|
|
@@ -19441,7 +19452,7 @@ function useMultiSelect({
|
|
|
19441
19452
|
addToTypeAhead
|
|
19442
19453
|
]
|
|
19443
19454
|
);
|
|
19444
|
-
return (0,
|
|
19455
|
+
return (0, import_react87.useMemo)(
|
|
19445
19456
|
() => ({
|
|
19446
19457
|
...state,
|
|
19447
19458
|
...computedState,
|
|
@@ -19469,16 +19480,16 @@ function MultiSelectRoot({
|
|
|
19469
19480
|
readOnly = false,
|
|
19470
19481
|
required = false
|
|
19471
19482
|
}) {
|
|
19472
|
-
const [triggerRef, setTriggerRef] = (0,
|
|
19473
|
-
const [options, setOptions] = (0,
|
|
19474
|
-
const generatedId = (0,
|
|
19475
|
-
const [ids, setIds] = (0,
|
|
19483
|
+
const [triggerRef, setTriggerRef] = (0, import_react88.useState)(null);
|
|
19484
|
+
const [options, setOptions] = (0, import_react88.useState)([]);
|
|
19485
|
+
const generatedId = (0, import_react88.useId)();
|
|
19486
|
+
const [ids, setIds] = (0, import_react88.useState)({
|
|
19476
19487
|
trigger: "multi-select-" + generatedId,
|
|
19477
19488
|
content: "multi-select-content-" + generatedId,
|
|
19478
19489
|
listbox: "multi-select-listbox-" + generatedId,
|
|
19479
19490
|
searchInput: "multi-select-search-" + generatedId
|
|
19480
19491
|
});
|
|
19481
|
-
const registerOption = (0,
|
|
19492
|
+
const registerOption = (0, import_react88.useCallback)((item) => {
|
|
19482
19493
|
setOptions((prev) => {
|
|
19483
19494
|
const next = prev.filter((o) => o.id !== item.id);
|
|
19484
19495
|
next.push(item);
|
|
@@ -19487,12 +19498,12 @@ function MultiSelectRoot({
|
|
|
19487
19498
|
});
|
|
19488
19499
|
return () => setOptions((prev) => prev.filter((o) => o.id !== item.id));
|
|
19489
19500
|
}, []);
|
|
19490
|
-
const registerTrigger = (0,
|
|
19501
|
+
const registerTrigger = (0, import_react88.useCallback)((ref) => {
|
|
19491
19502
|
setTriggerRef(ref);
|
|
19492
19503
|
return () => setTriggerRef(null);
|
|
19493
19504
|
}, []);
|
|
19494
|
-
const compare = (0,
|
|
19495
|
-
const idToOptionMap = (0,
|
|
19505
|
+
const compare = (0, import_react88.useMemo)(() => compareFunction ?? Object.is, [compareFunction]);
|
|
19506
|
+
const idToOptionMap = (0, import_react88.useMemo)(
|
|
19496
19507
|
() => options.reduce(
|
|
19497
19508
|
(acc, o) => {
|
|
19498
19509
|
acc[o.id] = o;
|
|
@@ -19502,22 +19513,22 @@ function MultiSelectRoot({
|
|
|
19502
19513
|
),
|
|
19503
19514
|
[options]
|
|
19504
19515
|
);
|
|
19505
|
-
const mappedValueIds = (0,
|
|
19516
|
+
const mappedValueIds = (0, import_react88.useMemo)(() => {
|
|
19506
19517
|
if (value == null) return void 0;
|
|
19507
19518
|
return value.map((v) => options.find((o) => compare(o.value, v))?.id).filter((id) => id !== void 0);
|
|
19508
19519
|
}, [options, value, compare]);
|
|
19509
|
-
const mappedInitialValueIds = (0,
|
|
19520
|
+
const mappedInitialValueIds = (0, import_react88.useMemo)(() => {
|
|
19510
19521
|
if (initialValue == null) return [];
|
|
19511
19522
|
return initialValue.map((v) => options.find((o) => compare(o.value, v))?.id).filter((id) => id !== void 0);
|
|
19512
19523
|
}, [options, initialValue, compare]);
|
|
19513
|
-
const onValueChangeStable = (0,
|
|
19524
|
+
const onValueChangeStable = (0, import_react88.useCallback)(
|
|
19514
19525
|
(ids2) => {
|
|
19515
19526
|
const values = ids2.map((id) => idToOptionMap[id]?.value).filter((v) => v != null);
|
|
19516
19527
|
onValueChange?.(values);
|
|
19517
19528
|
},
|
|
19518
19529
|
[idToOptionMap, onValueChange]
|
|
19519
19530
|
);
|
|
19520
|
-
const onEditCompleteStable = (0,
|
|
19531
|
+
const onEditCompleteStable = (0, import_react88.useCallback)(
|
|
19521
19532
|
(ids2) => {
|
|
19522
19533
|
const values = ids2.map((id) => idToOptionMap[id]?.value).filter((v) => v != null);
|
|
19523
19534
|
onEditComplete?.(values);
|
|
@@ -19534,12 +19545,12 @@ function MultiSelectRoot({
|
|
|
19534
19545
|
onClose
|
|
19535
19546
|
});
|
|
19536
19547
|
const { setSearchQuery } = state;
|
|
19537
|
-
(0,
|
|
19548
|
+
(0, import_react88.useEffect)(() => {
|
|
19538
19549
|
if (showSearch === false) {
|
|
19539
19550
|
setSearchQuery("");
|
|
19540
19551
|
}
|
|
19541
19552
|
}, [showSearch, setSearchQuery]);
|
|
19542
|
-
const contextValue = (0,
|
|
19553
|
+
const contextValue = (0, import_react88.useMemo)(() => {
|
|
19543
19554
|
const valueT = state.value.map((id) => idToOptionMap[id]?.value).filter((v) => v != null);
|
|
19544
19555
|
return {
|
|
19545
19556
|
invalid,
|
|
@@ -19610,16 +19621,16 @@ function MultiSelectRoot({
|
|
|
19610
19621
|
}
|
|
19611
19622
|
|
|
19612
19623
|
// src/components/user-interaction/MultiSelect/MultiSelectButton.tsx
|
|
19613
|
-
var
|
|
19624
|
+
var import_react90 = require("react");
|
|
19614
19625
|
|
|
19615
19626
|
// src/components/user-interaction/MultiSelect/MultiSelectOption.tsx
|
|
19616
19627
|
var import_clsx32 = __toESM(require("clsx"));
|
|
19617
19628
|
var import_lucide_react23 = require("lucide-react");
|
|
19618
|
-
var
|
|
19629
|
+
var import_react89 = require("react");
|
|
19619
19630
|
var import_jsx_runtime80 = require("react/jsx-runtime");
|
|
19620
|
-
var MultiSelectOptionDisplayContext = (0,
|
|
19631
|
+
var MultiSelectOptionDisplayContext = (0, import_react89.createContext)(null);
|
|
19621
19632
|
function useMultiSelectOptionDisplayLocation() {
|
|
19622
|
-
const context = (0,
|
|
19633
|
+
const context = (0, import_react89.useContext)(MultiSelectOptionDisplayContext);
|
|
19623
19634
|
if (!context) {
|
|
19624
19635
|
throw new Error(
|
|
19625
19636
|
"useMultiSelectOptionDisplayLocation must be used within a MultiSelectOptionDisplayContext"
|
|
@@ -19627,7 +19638,7 @@ function useMultiSelectOptionDisplayLocation() {
|
|
|
19627
19638
|
}
|
|
19628
19639
|
return context;
|
|
19629
19640
|
}
|
|
19630
|
-
var MultiSelectOption = (0,
|
|
19641
|
+
var MultiSelectOption = (0, import_react89.forwardRef)(function MultiSelectOption2({
|
|
19631
19642
|
children,
|
|
19632
19643
|
label,
|
|
19633
19644
|
value,
|
|
@@ -19637,12 +19648,12 @@ var MultiSelectOption = (0, import_react90.forwardRef)(function MultiSelectOptio
|
|
|
19637
19648
|
}, ref) {
|
|
19638
19649
|
const context = useMultiSelectContext();
|
|
19639
19650
|
const { registerOption } = context;
|
|
19640
|
-
const itemRef = (0,
|
|
19651
|
+
const itemRef = (0, import_react89.useRef)(null);
|
|
19641
19652
|
const display = children ?? label;
|
|
19642
19653
|
const iconAppearanceResolved = iconAppearance ?? context.config.iconAppearance;
|
|
19643
|
-
const generatedId = (0,
|
|
19654
|
+
const generatedId = (0, import_react89.useId)();
|
|
19644
19655
|
const optionId = props?.id ?? "multi-select-option-" + generatedId;
|
|
19645
|
-
(0,
|
|
19656
|
+
(0, import_react89.useEffect)(() => {
|
|
19646
19657
|
return registerOption({
|
|
19647
19658
|
id: optionId,
|
|
19648
19659
|
value,
|
|
@@ -19710,7 +19721,7 @@ var MultiSelectOption = (0, import_react90.forwardRef)(function MultiSelectOptio
|
|
|
19710
19721
|
|
|
19711
19722
|
// src/components/user-interaction/MultiSelect/MultiSelectButton.tsx
|
|
19712
19723
|
var import_jsx_runtime81 = require("react/jsx-runtime");
|
|
19713
|
-
var MultiSelectButton = (0,
|
|
19724
|
+
var MultiSelectButton = (0, import_react90.forwardRef)(function MultiSelectButton2({
|
|
19714
19725
|
id,
|
|
19715
19726
|
placeholder,
|
|
19716
19727
|
disabled: disabledOverride,
|
|
@@ -19723,12 +19734,12 @@ var MultiSelectButton = (0, import_react91.forwardRef)(function MultiSelectButto
|
|
|
19723
19734
|
const { config, layout } = context;
|
|
19724
19735
|
const { setIds } = config;
|
|
19725
19736
|
const { registerTrigger } = layout;
|
|
19726
|
-
(0,
|
|
19737
|
+
(0, import_react90.useEffect)(() => {
|
|
19727
19738
|
if (id) setIds((prev) => ({ ...prev, trigger: id }));
|
|
19728
19739
|
}, [id, setIds]);
|
|
19729
|
-
const innerRef = (0,
|
|
19730
|
-
(0,
|
|
19731
|
-
(0,
|
|
19740
|
+
const innerRef = (0, import_react90.useRef)(null);
|
|
19741
|
+
(0, import_react90.useImperativeHandle)(ref, () => innerRef.current);
|
|
19742
|
+
(0, import_react90.useEffect)(() => {
|
|
19732
19743
|
const unregister = registerTrigger(innerRef);
|
|
19733
19744
|
return () => unregister();
|
|
19734
19745
|
}, [registerTrigger]);
|
|
@@ -19796,23 +19807,23 @@ var MultiSelectButton = (0, import_react91.forwardRef)(function MultiSelectButto
|
|
|
19796
19807
|
});
|
|
19797
19808
|
|
|
19798
19809
|
// src/components/user-interaction/MultiSelect/MultiSelectContent.tsx
|
|
19799
|
-
var
|
|
19810
|
+
var import_react91 = require("react");
|
|
19800
19811
|
var import_clsx33 = __toESM(require("clsx"));
|
|
19801
19812
|
var import_jsx_runtime82 = require("react/jsx-runtime");
|
|
19802
|
-
var MultiSelectContent = (0,
|
|
19813
|
+
var MultiSelectContent = (0, import_react91.forwardRef)(function MultiSelectContent2({ id, options, showSearch: showSearchOverride, searchInputProps, ...props }, ref) {
|
|
19803
19814
|
const translation = useHightideTranslation();
|
|
19804
|
-
const innerRef = (0,
|
|
19805
|
-
const searchInputRef = (0,
|
|
19806
|
-
(0,
|
|
19815
|
+
const innerRef = (0, import_react91.useRef)(null);
|
|
19816
|
+
const searchInputRef = (0, import_react91.useRef)(null);
|
|
19817
|
+
(0, import_react91.useImperativeHandle)(ref, () => innerRef.current);
|
|
19807
19818
|
const context = useMultiSelectContext();
|
|
19808
19819
|
const { config, highlightNext, highlightPrevious, highlightFirst, highlightLast, highlightedId, handleTypeaheadKey, toggleSelection } = context;
|
|
19809
19820
|
const { setIds } = config;
|
|
19810
|
-
(0,
|
|
19821
|
+
(0, import_react91.useEffect)(() => {
|
|
19811
19822
|
if (id) setIds((prev) => ({ ...prev, content: id }));
|
|
19812
19823
|
}, [id, setIds]);
|
|
19813
19824
|
const showSearch = showSearchOverride ?? context.search.hasSearch;
|
|
19814
19825
|
const listboxAriaLabel = showSearch ? translation("searchResults") : void 0;
|
|
19815
|
-
const keyHandler = (0,
|
|
19826
|
+
const keyHandler = (0, import_react91.useCallback)(
|
|
19816
19827
|
(event) => {
|
|
19817
19828
|
switch (event.key) {
|
|
19818
19829
|
case "ArrowDown":
|
|
@@ -19926,7 +19937,7 @@ var MultiSelectContent = (0, import_react92.forwardRef)(function MultiSelectCont
|
|
|
19926
19937
|
|
|
19927
19938
|
// src/components/user-interaction/MultiSelect/MultiSelect.tsx
|
|
19928
19939
|
var import_jsx_runtime83 = require("react/jsx-runtime");
|
|
19929
|
-
var MultiSelect = (0,
|
|
19940
|
+
var MultiSelect = (0, import_react92.forwardRef)(
|
|
19930
19941
|
function MultiSelect2({ children, contentPanelProps, buttonProps, ...props }, ref) {
|
|
19931
19942
|
return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(MultiSelectRoot, { ...props, children: [
|
|
19932
19943
|
/* @__PURE__ */ (0, import_jsx_runtime83.jsx)(MultiSelectButton, { ref, ...buttonProps }),
|
|
@@ -19952,7 +19963,7 @@ var FilterOperatorLabel = ({ operator }) => {
|
|
|
19952
19963
|
|
|
19953
19964
|
// src/components/user-interaction/data/FilterPopUp.tsx
|
|
19954
19965
|
var import_jsx_runtime85 = require("react/jsx-runtime");
|
|
19955
|
-
var FilterBasePopUp = (0,
|
|
19966
|
+
var FilterBasePopUp = (0, import_react93.forwardRef)(function FilterBasePopUp2({
|
|
19956
19967
|
children,
|
|
19957
19968
|
name,
|
|
19958
19969
|
operator,
|
|
@@ -19964,11 +19975,11 @@ var FilterBasePopUp = (0, import_react94.forwardRef)(function FilterBasePopUp2({
|
|
|
19964
19975
|
...props
|
|
19965
19976
|
}, ref) {
|
|
19966
19977
|
const translation = useHightideTranslation();
|
|
19967
|
-
const operators = (0,
|
|
19978
|
+
const operators = (0, import_react93.useMemo)(() => {
|
|
19968
19979
|
if (!operatorOverrides || operatorOverrides.length === 0) return allowedOperators;
|
|
19969
19980
|
return allowedOperators.filter((op) => operatorOverrides.includes(op));
|
|
19970
19981
|
}, [allowedOperators, operatorOverrides]);
|
|
19971
|
-
(0,
|
|
19982
|
+
(0, import_react93.useEffect)(() => {
|
|
19972
19983
|
if (operators.length === 0) {
|
|
19973
19984
|
onRemove();
|
|
19974
19985
|
}
|
|
@@ -20029,7 +20040,7 @@ var FilterBasePopUp = (0, import_react94.forwardRef)(function FilterBasePopUp2({
|
|
|
20029
20040
|
}
|
|
20030
20041
|
);
|
|
20031
20042
|
});
|
|
20032
|
-
var TextFilterPopUp = (0,
|
|
20043
|
+
var TextFilterPopUp = (0, import_react93.forwardRef)(function TextFilterPopUp2({
|
|
20033
20044
|
name,
|
|
20034
20045
|
value,
|
|
20035
20046
|
onValueChange,
|
|
@@ -20037,12 +20048,12 @@ var TextFilterPopUp = (0, import_react94.forwardRef)(function TextFilterPopUp2({
|
|
|
20037
20048
|
...props
|
|
20038
20049
|
}, ref) {
|
|
20039
20050
|
const translation = useHightideTranslation();
|
|
20040
|
-
const id = (0,
|
|
20051
|
+
const id = (0, import_react93.useId)();
|
|
20041
20052
|
const ids = {
|
|
20042
20053
|
search: `text-filter-search-${id}`,
|
|
20043
20054
|
caseSensitive: `text-filter-case-sensitive-${id}`
|
|
20044
20055
|
};
|
|
20045
|
-
const operator = (0,
|
|
20056
|
+
const operator = (0, import_react93.useMemo)(() => {
|
|
20046
20057
|
const suggestion = value?.operator ?? "contains";
|
|
20047
20058
|
if (!FilterOperatorUtils.typeCheck.text(suggestion)) {
|
|
20048
20059
|
return "contains";
|
|
@@ -20084,7 +20095,7 @@ var TextFilterPopUp = (0, import_react94.forwardRef)(function TextFilterPopUp2({
|
|
|
20084
20095
|
}
|
|
20085
20096
|
);
|
|
20086
20097
|
});
|
|
20087
|
-
var NumberFilterPopUp = (0,
|
|
20098
|
+
var NumberFilterPopUp = (0, import_react93.forwardRef)(function NumberFilterPopUp2({
|
|
20088
20099
|
name,
|
|
20089
20100
|
value,
|
|
20090
20101
|
onValueChange,
|
|
@@ -20092,13 +20103,13 @@ var NumberFilterPopUp = (0, import_react94.forwardRef)(function NumberFilterPopU
|
|
|
20092
20103
|
...props
|
|
20093
20104
|
}, ref) {
|
|
20094
20105
|
const translation = useHightideTranslation();
|
|
20095
|
-
const id = (0,
|
|
20106
|
+
const id = (0, import_react93.useId)();
|
|
20096
20107
|
const ids = {
|
|
20097
20108
|
min: `number-filter-min-${id}`,
|
|
20098
20109
|
max: `number-filter-max-${id}`,
|
|
20099
20110
|
compareValue: `number-filter-compare-value-${id}`
|
|
20100
20111
|
};
|
|
20101
|
-
const operator = (0,
|
|
20112
|
+
const operator = (0, import_react93.useMemo)(() => {
|
|
20102
20113
|
const suggestion = value?.operator ?? "between";
|
|
20103
20114
|
if (!FilterOperatorUtils.typeCheck.number(suggestion)) {
|
|
20104
20115
|
return "between";
|
|
@@ -20187,7 +20198,7 @@ var NumberFilterPopUp = (0, import_react94.forwardRef)(function NumberFilterPopU
|
|
|
20187
20198
|
}
|
|
20188
20199
|
);
|
|
20189
20200
|
});
|
|
20190
|
-
var DateFilterPopUp = (0,
|
|
20201
|
+
var DateFilterPopUp = (0, import_react93.forwardRef)(function DateFilterPopUp2({
|
|
20191
20202
|
name,
|
|
20192
20203
|
value,
|
|
20193
20204
|
onValueChange,
|
|
@@ -20195,13 +20206,13 @@ var DateFilterPopUp = (0, import_react94.forwardRef)(function DateFilterPopUp2({
|
|
|
20195
20206
|
...props
|
|
20196
20207
|
}, ref) {
|
|
20197
20208
|
const translation = useHightideTranslation();
|
|
20198
|
-
const id = (0,
|
|
20209
|
+
const id = (0, import_react93.useId)();
|
|
20199
20210
|
const ids = {
|
|
20200
20211
|
startDate: `date-filter-start-date-${id}`,
|
|
20201
20212
|
endDate: `date-filter-end-date-${id}`,
|
|
20202
20213
|
compareDate: `date-filter-compare-date-${id}`
|
|
20203
20214
|
};
|
|
20204
|
-
const operator = (0,
|
|
20215
|
+
const operator = (0, import_react93.useMemo)(() => {
|
|
20205
20216
|
const suggestion = value?.operator ?? "between";
|
|
20206
20217
|
if (!FilterOperatorUtils.typeCheck.date(suggestion)) {
|
|
20207
20218
|
return "between";
|
|
@@ -20209,8 +20220,8 @@ var DateFilterPopUp = (0, import_react94.forwardRef)(function DateFilterPopUp2({
|
|
|
20209
20220
|
return suggestion;
|
|
20210
20221
|
}, [value]);
|
|
20211
20222
|
const parameter = value?.parameter ?? {};
|
|
20212
|
-
const [temporaryMinDateValue, setTemporaryMinDateValue] = (0,
|
|
20213
|
-
const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0,
|
|
20223
|
+
const [temporaryMinDateValue, setTemporaryMinDateValue] = (0, import_react93.useState)(null);
|
|
20224
|
+
const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0, import_react93.useState)(null);
|
|
20214
20225
|
const needsRangeInput = operator === "between" || operator === "notBetween";
|
|
20215
20226
|
const needsParameterInput = operator !== "isUndefined" && operator !== "isNotUndefined";
|
|
20216
20227
|
return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
|
|
@@ -20329,7 +20340,7 @@ var DateFilterPopUp = (0, import_react94.forwardRef)(function DateFilterPopUp2({
|
|
|
20329
20340
|
}
|
|
20330
20341
|
);
|
|
20331
20342
|
});
|
|
20332
|
-
var DatetimeFilterPopUp = (0,
|
|
20343
|
+
var DatetimeFilterPopUp = (0, import_react93.forwardRef)(function DatetimeFilterPopUp2({
|
|
20333
20344
|
name,
|
|
20334
20345
|
value,
|
|
20335
20346
|
onValueChange,
|
|
@@ -20337,13 +20348,13 @@ var DatetimeFilterPopUp = (0, import_react94.forwardRef)(function DatetimeFilter
|
|
|
20337
20348
|
...props
|
|
20338
20349
|
}, ref) {
|
|
20339
20350
|
const translation = useHightideTranslation();
|
|
20340
|
-
const id = (0,
|
|
20351
|
+
const id = (0, import_react93.useId)();
|
|
20341
20352
|
const ids = {
|
|
20342
20353
|
startDate: `datetime-filter-start-date-${id}`,
|
|
20343
20354
|
endDate: `datetime-filter-end-date-${id}`,
|
|
20344
20355
|
compareDate: `datetime-filter-compare-date-${id}`
|
|
20345
20356
|
};
|
|
20346
|
-
const operator = (0,
|
|
20357
|
+
const operator = (0, import_react93.useMemo)(() => {
|
|
20347
20358
|
const suggestion = value?.operator ?? "between";
|
|
20348
20359
|
if (!FilterOperatorUtils.typeCheck.datetime(suggestion)) {
|
|
20349
20360
|
return "between";
|
|
@@ -20351,8 +20362,8 @@ var DatetimeFilterPopUp = (0, import_react94.forwardRef)(function DatetimeFilter
|
|
|
20351
20362
|
return suggestion;
|
|
20352
20363
|
}, [value]);
|
|
20353
20364
|
const parameter = value?.parameter ?? {};
|
|
20354
|
-
const [temporaryMinDateValue, setTemporaryMinDateValue] = (0,
|
|
20355
|
-
const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0,
|
|
20365
|
+
const [temporaryMinDateValue, setTemporaryMinDateValue] = (0, import_react93.useState)(null);
|
|
20366
|
+
const [temporaryMaxDateValue, setTemporaryMaxDateValue] = (0, import_react93.useState)(null);
|
|
20356
20367
|
const needsRangeInput = operator === "between" || operator === "notBetween";
|
|
20357
20368
|
const needsParameterInput = operator !== "isUndefined" && operator !== "isNotUndefined";
|
|
20358
20369
|
return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
|
|
@@ -20471,14 +20482,14 @@ var DatetimeFilterPopUp = (0, import_react94.forwardRef)(function DatetimeFilter
|
|
|
20471
20482
|
}
|
|
20472
20483
|
);
|
|
20473
20484
|
});
|
|
20474
|
-
var BooleanFilterPopUp = (0,
|
|
20485
|
+
var BooleanFilterPopUp = (0, import_react93.forwardRef)(function BooleanFilterPopUp2({
|
|
20475
20486
|
name,
|
|
20476
20487
|
value,
|
|
20477
20488
|
onValueChange,
|
|
20478
20489
|
onRemove,
|
|
20479
20490
|
...props
|
|
20480
20491
|
}, ref) {
|
|
20481
|
-
const operator = (0,
|
|
20492
|
+
const operator = (0, import_react93.useMemo)(() => {
|
|
20482
20493
|
const suggestion = value?.operator ?? "isTrue";
|
|
20483
20494
|
if (!FilterOperatorUtils.typeCheck.boolean(suggestion)) {
|
|
20484
20495
|
return "isTrue";
|
|
@@ -20499,7 +20510,7 @@ var BooleanFilterPopUp = (0, import_react94.forwardRef)(function BooleanFilterPo
|
|
|
20499
20510
|
}
|
|
20500
20511
|
);
|
|
20501
20512
|
});
|
|
20502
|
-
var TagsFilterPopUp = (0,
|
|
20513
|
+
var TagsFilterPopUp = (0, import_react93.forwardRef)(function TagsFilterPopUp2({
|
|
20503
20514
|
name,
|
|
20504
20515
|
value,
|
|
20505
20516
|
onValueChange,
|
|
@@ -20508,7 +20519,7 @@ var TagsFilterPopUp = (0, import_react94.forwardRef)(function TagsFilterPopUp2({
|
|
|
20508
20519
|
...props
|
|
20509
20520
|
}, ref) {
|
|
20510
20521
|
const translation = useHightideTranslation();
|
|
20511
|
-
const operator = (0,
|
|
20522
|
+
const operator = (0, import_react93.useMemo)(() => {
|
|
20512
20523
|
const suggestion = value?.operator ?? "contains";
|
|
20513
20524
|
if (!FilterOperatorUtils.typeCheck.tags(suggestion)) {
|
|
20514
20525
|
return "contains";
|
|
@@ -20553,7 +20564,7 @@ var TagsFilterPopUp = (0, import_react94.forwardRef)(function TagsFilterPopUp2({
|
|
|
20553
20564
|
}
|
|
20554
20565
|
);
|
|
20555
20566
|
});
|
|
20556
|
-
var TagsSingleFilterPopUp = (0,
|
|
20567
|
+
var TagsSingleFilterPopUp = (0, import_react93.forwardRef)(function TagsSingleFilterPopUp2({
|
|
20557
20568
|
name,
|
|
20558
20569
|
value,
|
|
20559
20570
|
onValueChange,
|
|
@@ -20562,7 +20573,7 @@ var TagsSingleFilterPopUp = (0, import_react94.forwardRef)(function TagsSingleFi
|
|
|
20562
20573
|
...props
|
|
20563
20574
|
}, ref) {
|
|
20564
20575
|
const translation = useHightideTranslation();
|
|
20565
|
-
const operator = (0,
|
|
20576
|
+
const operator = (0, import_react93.useMemo)(() => {
|
|
20566
20577
|
const suggestion = value?.operator ?? "contains";
|
|
20567
20578
|
if (!FilterOperatorUtils.typeCheck.tagsSingle(suggestion)) {
|
|
20568
20579
|
return "contains";
|
|
@@ -20624,8 +20635,8 @@ var TagsSingleFilterPopUp = (0, import_react94.forwardRef)(function TagsSingleFi
|
|
|
20624
20635
|
}
|
|
20625
20636
|
);
|
|
20626
20637
|
});
|
|
20627
|
-
var GenericFilterPopUp = (0,
|
|
20628
|
-
const operator = (0,
|
|
20638
|
+
var GenericFilterPopUp = (0, import_react93.forwardRef)(function GenericFilterPopUp2({ name, value, onValueChange, ...props }, ref) {
|
|
20639
|
+
const operator = (0, import_react93.useMemo)(() => {
|
|
20629
20640
|
const suggestion = value?.operator ?? "isNotUndefined";
|
|
20630
20641
|
if (!FilterOperatorUtils.typeCheck.unknownType(suggestion)) {
|
|
20631
20642
|
return "isNotUndefined";
|
|
@@ -20645,7 +20656,7 @@ var GenericFilterPopUp = (0, import_react94.forwardRef)(function GenericFilterPo
|
|
|
20645
20656
|
}
|
|
20646
20657
|
);
|
|
20647
20658
|
});
|
|
20648
|
-
var FilterPopUp = (0,
|
|
20659
|
+
var FilterPopUp = (0, import_react93.forwardRef)(function FilterPopUp2({
|
|
20649
20660
|
name,
|
|
20650
20661
|
value,
|
|
20651
20662
|
onValueChange,
|
|
@@ -20682,18 +20693,18 @@ var TableFilterButton = ({
|
|
|
20682
20693
|
const translation = useHightideTranslation();
|
|
20683
20694
|
const column = header.column;
|
|
20684
20695
|
const columnFilterValue = column.getFilterValue();
|
|
20685
|
-
const [filterValue, setFilterValue] = (0,
|
|
20696
|
+
const [filterValue, setFilterValue] = (0, import_react94.useState)(columnFilterValue);
|
|
20686
20697
|
const hasFilter = !!filterValue;
|
|
20687
|
-
const anchorRef = (0,
|
|
20688
|
-
const containerRef = (0,
|
|
20689
|
-
const [isOpen, setIsOpen] = (0,
|
|
20690
|
-
const id = (0,
|
|
20691
|
-
const ids = (0,
|
|
20698
|
+
const anchorRef = (0, import_react94.useRef)(null);
|
|
20699
|
+
const containerRef = (0, import_react94.useRef)(null);
|
|
20700
|
+
const [isOpen, setIsOpen] = (0, import_react94.useState)(false);
|
|
20701
|
+
const id = (0, import_react94.useId)();
|
|
20702
|
+
const ids = (0, import_react94.useMemo)(() => ({
|
|
20692
20703
|
button: `table-filter-button-${id}`,
|
|
20693
20704
|
popup: `table-filter-popup-${id}`,
|
|
20694
20705
|
label: `table-filter-label-${id}`
|
|
20695
20706
|
}), [id]);
|
|
20696
|
-
(0,
|
|
20707
|
+
(0, import_react94.useEffect)(() => {
|
|
20697
20708
|
setFilterValue(columnFilterValue);
|
|
20698
20709
|
}, [columnFilterValue]);
|
|
20699
20710
|
const isTagsFilter = filterType === "multiTags" || filterType === "singleTag";
|
|
@@ -20754,7 +20765,7 @@ var TableFilterButton = ({
|
|
|
20754
20765
|
};
|
|
20755
20766
|
|
|
20756
20767
|
// src/components/layout/table/TableHeader.tsx
|
|
20757
|
-
var
|
|
20768
|
+
var import_react95 = require("react");
|
|
20758
20769
|
|
|
20759
20770
|
// src/components/user-interaction/data/data-types.tsx
|
|
20760
20771
|
var import_lucide_react26 = require("lucide-react");
|
|
@@ -20818,7 +20829,7 @@ var DataTypeUtils = {
|
|
|
20818
20829
|
var import_jsx_runtime88 = require("react/jsx-runtime");
|
|
20819
20830
|
var TableHeader = ({ isSticky = false }) => {
|
|
20820
20831
|
const { table } = useTableStateWithoutSizingContext();
|
|
20821
|
-
const handleResizeMove = (0,
|
|
20832
|
+
const handleResizeMove = (0, import_react95.useCallback)((e) => {
|
|
20822
20833
|
if (!table.getState().columnSizingInfo.isResizingColumn) return;
|
|
20823
20834
|
const currentX = "touches" in e ? e.touches[0].clientX : e.clientX;
|
|
20824
20835
|
const deltaOffset = currentX - (table.getState().columnSizingInfo.startOffset ?? 0);
|
|
@@ -20834,7 +20845,7 @@ var TableHeader = ({ isSticky = false }) => {
|
|
|
20834
20845
|
deltaOffset
|
|
20835
20846
|
}));
|
|
20836
20847
|
}, [table]);
|
|
20837
|
-
const handleResizeEnd = (0,
|
|
20848
|
+
const handleResizeEnd = (0, import_react95.useCallback)(() => {
|
|
20838
20849
|
if (!table.getState().columnSizingInfo.isResizingColumn) return;
|
|
20839
20850
|
const newWidth = (table.getState().columnSizingInfo.startSize ?? 0) + (table.getState().columnSizingInfo.deltaOffset ?? 0);
|
|
20840
20851
|
table.setColumnSizing((prev) => {
|
|
@@ -20852,7 +20863,7 @@ var TableHeader = ({ isSticky = false }) => {
|
|
|
20852
20863
|
startSize: null
|
|
20853
20864
|
});
|
|
20854
20865
|
}, [table]);
|
|
20855
|
-
(0,
|
|
20866
|
+
(0, import_react95.useEffect)(() => {
|
|
20856
20867
|
window.addEventListener("pointermove", handleResizeMove);
|
|
20857
20868
|
window.addEventListener("pointerup", handleResizeEnd);
|
|
20858
20869
|
return () => {
|
|
@@ -20951,7 +20962,7 @@ var TableHeader = ({ isSticky = false }) => {
|
|
|
20951
20962
|
};
|
|
20952
20963
|
|
|
20953
20964
|
// src/components/layout/table/VirtualizedTableBody.tsx
|
|
20954
|
-
var
|
|
20965
|
+
var import_react96 = require("react");
|
|
20955
20966
|
var import_react_table5 = require("@tanstack/react-table");
|
|
20956
20967
|
var import_react_virtual = require("@tanstack/react-virtual");
|
|
20957
20968
|
var import_clsx36 = __toESM(require("clsx"));
|
|
@@ -20964,11 +20975,11 @@ var VirtualizedTableBody = ({
|
|
|
20964
20975
|
const { table, onRowClick } = useTableStateWithoutSizingContext();
|
|
20965
20976
|
const { containerRef } = useTableContainerContext();
|
|
20966
20977
|
const rows = table.getRowModel().rows;
|
|
20967
|
-
const bodyRef = (0,
|
|
20968
|
-
const [isMounted, setIsMounted] = (0,
|
|
20969
|
-
const [scrollMargin, setScrollMargin] = (0,
|
|
20970
|
-
(0,
|
|
20971
|
-
(0,
|
|
20978
|
+
const bodyRef = (0, import_react96.useRef)(null);
|
|
20979
|
+
const [isMounted, setIsMounted] = (0, import_react96.useState)(false);
|
|
20980
|
+
const [scrollMargin, setScrollMargin] = (0, import_react96.useState)(0);
|
|
20981
|
+
(0, import_react96.useEffect)(() => setIsMounted(true), []);
|
|
20982
|
+
(0, import_react96.useEffect)(() => {
|
|
20972
20983
|
if (scroll !== "window") return;
|
|
20973
20984
|
const element = bodyRef.current;
|
|
20974
20985
|
if (!element || typeof window === "undefined") return;
|
|
@@ -21100,7 +21111,7 @@ var TablePagination = ({ allowChangingPageSize = true, pageSizeOptions, ...props
|
|
|
21100
21111
|
|
|
21101
21112
|
// src/components/user-interaction/Checkbox.tsx
|
|
21102
21113
|
var import_lucide_react27 = require("lucide-react");
|
|
21103
|
-
var
|
|
21114
|
+
var import_react97 = require("react");
|
|
21104
21115
|
var import_jsx_runtime92 = require("react/jsx-runtime");
|
|
21105
21116
|
var Checkbox = ({
|
|
21106
21117
|
value: controlledValue,
|
|
@@ -21119,7 +21130,7 @@ var Checkbox = ({
|
|
|
21119
21130
|
}) => {
|
|
21120
21131
|
const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
|
|
21121
21132
|
const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
|
|
21122
|
-
const onChangeWrapper = (0,
|
|
21133
|
+
const onChangeWrapper = (0, import_react97.useCallback)((value2) => {
|
|
21123
21134
|
onValueChangeStable(value2);
|
|
21124
21135
|
onEditCompleteStable(value2);
|
|
21125
21136
|
}, [onValueChangeStable, onEditCompleteStable]);
|
|
@@ -21164,7 +21175,7 @@ var Checkbox = ({
|
|
|
21164
21175
|
};
|
|
21165
21176
|
|
|
21166
21177
|
// src/components/layout/table/TableWithSelectionProvider.tsx
|
|
21167
|
-
var
|
|
21178
|
+
var import_react98 = require("react");
|
|
21168
21179
|
var import_jsx_runtime93 = require("react/jsx-runtime");
|
|
21169
21180
|
var TableWithSelectionProvider = ({
|
|
21170
21181
|
children,
|
|
@@ -21177,7 +21188,7 @@ var TableWithSelectionProvider = ({
|
|
|
21177
21188
|
...props
|
|
21178
21189
|
}) => {
|
|
21179
21190
|
const translation = useHightideTranslation();
|
|
21180
|
-
const columnDef = (0,
|
|
21191
|
+
const columnDef = (0, import_react98.useMemo)(() => [
|
|
21181
21192
|
{
|
|
21182
21193
|
id: selectionRowId,
|
|
21183
21194
|
header: ({ table }) => {
|
|
@@ -21220,7 +21231,7 @@ var TableWithSelectionProvider = ({
|
|
|
21220
21231
|
TableProvider,
|
|
21221
21232
|
{
|
|
21222
21233
|
...props,
|
|
21223
|
-
fillerRowCell: (0,
|
|
21234
|
+
fillerRowCell: (0, import_react98.useCallback)((columnId, table) => {
|
|
21224
21235
|
if (columnId === selectionRowId) {
|
|
21225
21236
|
return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Checkbox, { value: false, disabled: true });
|
|
21226
21237
|
}
|
|
@@ -21238,7 +21249,7 @@ var TableWithSelectionProvider = ({
|
|
|
21238
21249
|
rowSelection,
|
|
21239
21250
|
...state
|
|
21240
21251
|
},
|
|
21241
|
-
onRowClick: (0,
|
|
21252
|
+
onRowClick: (0, import_react98.useCallback)((row, table) => {
|
|
21242
21253
|
if (!disableClickRowClickSelection) {
|
|
21243
21254
|
row.toggleSelected();
|
|
21244
21255
|
}
|
|
@@ -21280,7 +21291,7 @@ var TableWithSelection = ({
|
|
|
21280
21291
|
};
|
|
21281
21292
|
|
|
21282
21293
|
// src/components/layout/table/TableColumn.tsx
|
|
21283
|
-
var
|
|
21294
|
+
var import_react99 = require("react");
|
|
21284
21295
|
var import_jsx_runtime95 = require("react/jsx-runtime");
|
|
21285
21296
|
var TableColumnComponent = ({
|
|
21286
21297
|
filterType,
|
|
@@ -21292,11 +21303,11 @@ var TableColumnComponent = ({
|
|
|
21292
21303
|
"TableColumn: For filterType === multiTags or singleTag, filterData.tags must be set.",
|
|
21293
21304
|
(filterType === "multiTags" || filterType === "singleTag") && props.meta?.filterData?.tags === void 0
|
|
21294
21305
|
);
|
|
21295
|
-
const [column] = (0,
|
|
21306
|
+
const [column] = (0, import_react99.useState)({
|
|
21296
21307
|
...props,
|
|
21297
21308
|
filterFn
|
|
21298
21309
|
});
|
|
21299
|
-
(0,
|
|
21310
|
+
(0, import_react99.useEffect)(() => {
|
|
21300
21311
|
const unsubscribe = registerColumn(column);
|
|
21301
21312
|
return () => {
|
|
21302
21313
|
unsubscribe();
|
|
@@ -21304,27 +21315,27 @@ var TableColumnComponent = ({
|
|
|
21304
21315
|
}, [registerColumn, column]);
|
|
21305
21316
|
return null;
|
|
21306
21317
|
};
|
|
21307
|
-
var TableColumnFactory = () => (0,
|
|
21318
|
+
var TableColumnFactory = () => (0, import_react99.memo)(
|
|
21308
21319
|
TableColumnComponent,
|
|
21309
21320
|
(prevProps, nextProps) => {
|
|
21310
21321
|
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
21322
|
}
|
|
21312
21323
|
);
|
|
21313
21324
|
var TableColumn = (props) => {
|
|
21314
|
-
const TableColumnComponent2 = (0,
|
|
21325
|
+
const TableColumnComponent2 = (0, import_react99.useMemo)(() => TableColumnFactory(), []);
|
|
21315
21326
|
return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(TableColumnComponent2, { ...props });
|
|
21316
21327
|
};
|
|
21317
21328
|
|
|
21318
21329
|
// src/components/layout/table/TableColumnSwitcher.tsx
|
|
21319
|
-
var
|
|
21330
|
+
var import_react100 = require("react");
|
|
21320
21331
|
var import_lucide_react28 = require("lucide-react");
|
|
21321
21332
|
var import_jsx_runtime96 = require("react/jsx-runtime");
|
|
21322
21333
|
var TableColumnSwitcherPopUp = ({ ...props }) => {
|
|
21323
21334
|
const { table } = useTableStateWithoutSizingContext();
|
|
21324
21335
|
const translation = useHightideTranslation();
|
|
21325
|
-
const containerRef = (0,
|
|
21326
|
-
const generatedId = (0,
|
|
21327
|
-
const ids = (0,
|
|
21336
|
+
const containerRef = (0, import_react100.useRef)(null);
|
|
21337
|
+
const generatedId = (0, import_react100.useId)();
|
|
21338
|
+
const ids = (0, import_react100.useMemo)(() => ({
|
|
21328
21339
|
popup: props.id ?? `table-column-picker-popup-${generatedId}`,
|
|
21329
21340
|
label: `table-column-picker-label-${generatedId}`
|
|
21330
21341
|
}), [generatedId, props.id]);
|
|
@@ -21333,7 +21344,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
|
|
|
21333
21344
|
const tableState = table.getState();
|
|
21334
21345
|
const columnOrder = tableState.columnOrder;
|
|
21335
21346
|
const columnPinning = tableState.columnPinning;
|
|
21336
|
-
const columns = (0,
|
|
21347
|
+
const columns = (0, import_react100.useMemo)(() => {
|
|
21337
21348
|
const allColumns = table.getAllColumns();
|
|
21338
21349
|
const leftPinned = [];
|
|
21339
21350
|
const unpinned = [];
|
|
@@ -21591,16 +21602,16 @@ var TableColumnSwitcher = ({ buttonProps, ...props }) => {
|
|
|
21591
21602
|
};
|
|
21592
21603
|
|
|
21593
21604
|
// src/components/user-interaction/Combobox/Combobox.tsx
|
|
21594
|
-
var
|
|
21605
|
+
var import_react106 = require("react");
|
|
21595
21606
|
|
|
21596
21607
|
// src/components/user-interaction/Combobox/ComboboxRoot.tsx
|
|
21597
|
-
var
|
|
21608
|
+
var import_react103 = require("react");
|
|
21598
21609
|
|
|
21599
21610
|
// src/components/user-interaction/Combobox/ComboboxContext.tsx
|
|
21600
|
-
var
|
|
21601
|
-
var ComboboxContext = (0,
|
|
21611
|
+
var import_react101 = require("react");
|
|
21612
|
+
var ComboboxContext = (0, import_react101.createContext)(null);
|
|
21602
21613
|
function useComboboxContext() {
|
|
21603
|
-
const ctx = (0,
|
|
21614
|
+
const ctx = (0, import_react101.useContext)(ComboboxContext);
|
|
21604
21615
|
if (ctx == null) {
|
|
21605
21616
|
throw new Error("useComboboxContext must be used within ComboboxRoot");
|
|
21606
21617
|
}
|
|
@@ -21608,7 +21619,7 @@ function useComboboxContext() {
|
|
|
21608
21619
|
}
|
|
21609
21620
|
|
|
21610
21621
|
// src/components/user-interaction/Combobox/useCombobox.ts
|
|
21611
|
-
var
|
|
21622
|
+
var import_react102 = require("react");
|
|
21612
21623
|
function useCombobox({
|
|
21613
21624
|
options,
|
|
21614
21625
|
searchQuery: controlledSearchQuery,
|
|
@@ -21623,36 +21634,36 @@ function useCombobox({
|
|
|
21623
21634
|
const { searchResult: visibleOptions } = useSearch({
|
|
21624
21635
|
items: options,
|
|
21625
21636
|
searchQuery: searchQuery ?? "",
|
|
21626
|
-
toTags: (0,
|
|
21637
|
+
toTags: (0, import_react102.useCallback)((o) => [o.label], [])
|
|
21627
21638
|
});
|
|
21628
|
-
const visibleOptionIds = (0,
|
|
21639
|
+
const visibleOptionIds = (0, import_react102.useMemo)(
|
|
21629
21640
|
() => visibleOptions.map((o) => o.id),
|
|
21630
21641
|
[visibleOptions]
|
|
21631
21642
|
);
|
|
21632
|
-
const enabledOptionIds = (0,
|
|
21643
|
+
const enabledOptionIds = (0, import_react102.useMemo)(
|
|
21633
21644
|
() => visibleOptions.filter((o) => !o.disabled).map((o) => o.id),
|
|
21634
21645
|
[visibleOptions]
|
|
21635
21646
|
);
|
|
21636
21647
|
const listNav = useListNavigation({ options: enabledOptionIds });
|
|
21637
|
-
const highlightItem = (0,
|
|
21648
|
+
const highlightItem = (0, import_react102.useCallback)(
|
|
21638
21649
|
(id) => {
|
|
21639
21650
|
if (!enabledOptionIds.includes(id)) return;
|
|
21640
21651
|
listNav.highlight(id);
|
|
21641
21652
|
},
|
|
21642
21653
|
[enabledOptionIds, listNav]
|
|
21643
21654
|
);
|
|
21644
|
-
const state = (0,
|
|
21655
|
+
const state = (0, import_react102.useMemo)(
|
|
21645
21656
|
() => ({
|
|
21646
21657
|
searchQuery: searchQuery ?? "",
|
|
21647
21658
|
highlightedId: listNav.highlightedId
|
|
21648
21659
|
}),
|
|
21649
21660
|
[searchQuery, listNav.highlightedId]
|
|
21650
21661
|
);
|
|
21651
|
-
const computedState = (0,
|
|
21662
|
+
const computedState = (0, import_react102.useMemo)(
|
|
21652
21663
|
() => ({ visibleOptionIds }),
|
|
21653
21664
|
[visibleOptionIds]
|
|
21654
21665
|
);
|
|
21655
|
-
const actions = (0,
|
|
21666
|
+
const actions = (0, import_react102.useMemo)(
|
|
21656
21667
|
() => ({
|
|
21657
21668
|
setSearchQuery,
|
|
21658
21669
|
highlightFirst: listNav.first,
|
|
@@ -21663,7 +21674,7 @@ function useCombobox({
|
|
|
21663
21674
|
}),
|
|
21664
21675
|
[setSearchQuery, listNav.first, listNav.last, listNav.next, listNav.previous, highlightItem]
|
|
21665
21676
|
);
|
|
21666
|
-
return (0,
|
|
21677
|
+
return (0, import_react102.useMemo)(
|
|
21667
21678
|
() => ({
|
|
21668
21679
|
...state,
|
|
21669
21680
|
...computedState,
|
|
@@ -21680,14 +21691,14 @@ function ComboboxRoot({
|
|
|
21680
21691
|
onItemClick,
|
|
21681
21692
|
...hookProps
|
|
21682
21693
|
}) {
|
|
21683
|
-
const [options, setOptions] = (0,
|
|
21684
|
-
const [listRef, setListRef] = (0,
|
|
21685
|
-
const generatedId = (0,
|
|
21686
|
-
const [ids, setIds] = (0,
|
|
21694
|
+
const [options, setOptions] = (0, import_react103.useState)([]);
|
|
21695
|
+
const [listRef, setListRef] = (0, import_react103.useState)(null);
|
|
21696
|
+
const generatedId = (0, import_react103.useId)();
|
|
21697
|
+
const [ids, setIds] = (0, import_react103.useState)({
|
|
21687
21698
|
trigger: `combobox-${generatedId}`,
|
|
21688
21699
|
listbox: `combobox-${generatedId}-listbox`
|
|
21689
21700
|
});
|
|
21690
|
-
const registerOption = (0,
|
|
21701
|
+
const registerOption = (0, import_react103.useCallback)(
|
|
21691
21702
|
(option) => {
|
|
21692
21703
|
setOptions((prev) => {
|
|
21693
21704
|
const next = prev.filter((o) => o.id !== option.id);
|
|
@@ -21699,11 +21710,11 @@ function ComboboxRoot({
|
|
|
21699
21710
|
},
|
|
21700
21711
|
[]
|
|
21701
21712
|
);
|
|
21702
|
-
const registerList = (0,
|
|
21713
|
+
const registerList = (0, import_react103.useCallback)((ref) => {
|
|
21703
21714
|
setListRef(() => ref);
|
|
21704
21715
|
return () => setListRef(null);
|
|
21705
21716
|
}, []);
|
|
21706
|
-
const hookOptions = (0,
|
|
21717
|
+
const hookOptions = (0, import_react103.useMemo)(
|
|
21707
21718
|
() => options.map((o) => ({
|
|
21708
21719
|
id: o.id,
|
|
21709
21720
|
label: o.label,
|
|
@@ -21712,38 +21723,38 @@ function ComboboxRoot({
|
|
|
21712
21723
|
[options]
|
|
21713
21724
|
);
|
|
21714
21725
|
const state = useCombobox({ ...hookProps, options: hookOptions });
|
|
21715
|
-
const idToOptionMap = (0,
|
|
21726
|
+
const idToOptionMap = (0, import_react103.useMemo)(() => {
|
|
21716
21727
|
return options.reduce((acc, o) => {
|
|
21717
21728
|
acc[o.id] = o;
|
|
21718
21729
|
return acc;
|
|
21719
21730
|
}, {});
|
|
21720
21731
|
}, [options]);
|
|
21721
|
-
const selectOption = (0,
|
|
21732
|
+
const selectOption = (0, import_react103.useCallback)(
|
|
21722
21733
|
(id) => {
|
|
21723
21734
|
const option = idToOptionMap[id];
|
|
21724
21735
|
if (option) onItemClick?.(option.value);
|
|
21725
21736
|
},
|
|
21726
21737
|
[idToOptionMap, onItemClick]
|
|
21727
21738
|
);
|
|
21728
|
-
const config = (0,
|
|
21739
|
+
const config = (0, import_react103.useMemo)(
|
|
21729
21740
|
() => ({ ids, setIds }),
|
|
21730
21741
|
[ids, setIds]
|
|
21731
21742
|
);
|
|
21732
|
-
const layout = (0,
|
|
21743
|
+
const layout = (0, import_react103.useMemo)(
|
|
21733
21744
|
() => ({
|
|
21734
21745
|
listRef: listRef ?? { current: null },
|
|
21735
21746
|
registerList
|
|
21736
21747
|
}),
|
|
21737
21748
|
[listRef, registerList]
|
|
21738
21749
|
);
|
|
21739
|
-
const search = (0,
|
|
21750
|
+
const search = (0, import_react103.useMemo)(
|
|
21740
21751
|
() => ({
|
|
21741
21752
|
searchQuery: state.searchQuery,
|
|
21742
21753
|
setSearchQuery: state.setSearchQuery
|
|
21743
21754
|
}),
|
|
21744
21755
|
[state.searchQuery, state.setSearchQuery]
|
|
21745
21756
|
);
|
|
21746
|
-
const contextValue = (0,
|
|
21757
|
+
const contextValue = (0, import_react103.useMemo)(
|
|
21747
21758
|
() => ({
|
|
21748
21759
|
highlightedId: state.highlightedId,
|
|
21749
21760
|
options,
|
|
@@ -21781,14 +21792,14 @@ function ComboboxRoot({
|
|
|
21781
21792
|
}
|
|
21782
21793
|
|
|
21783
21794
|
// src/components/user-interaction/Combobox/ComboboxInput.tsx
|
|
21784
|
-
var
|
|
21795
|
+
var import_react104 = require("react");
|
|
21785
21796
|
var import_jsx_runtime98 = require("react/jsx-runtime");
|
|
21786
|
-
var ComboboxInput = (0,
|
|
21797
|
+
var ComboboxInput = (0, import_react104.forwardRef)(
|
|
21787
21798
|
function ComboboxInput2(props, ref) {
|
|
21788
21799
|
const translation = useHightideTranslation();
|
|
21789
21800
|
const context = useComboboxContext();
|
|
21790
21801
|
const { highlightNext, highlightPrevious, highlightFirst, highlightLast, highlightedId, selectOption } = context;
|
|
21791
|
-
const handleKeyDown = (0,
|
|
21802
|
+
const handleKeyDown = (0, import_react104.useCallback)(
|
|
21792
21803
|
(event) => {
|
|
21793
21804
|
props.onKeyDown?.(event);
|
|
21794
21805
|
switch (event.key) {
|
|
@@ -21840,17 +21851,17 @@ var ComboboxInput = (0, import_react105.forwardRef)(
|
|
|
21840
21851
|
);
|
|
21841
21852
|
|
|
21842
21853
|
// src/components/user-interaction/Combobox/ComboboxList.tsx
|
|
21843
|
-
var
|
|
21854
|
+
var import_react105 = require("react");
|
|
21844
21855
|
var import_clsx39 = __toESM(require("clsx"));
|
|
21845
21856
|
var import_jsx_runtime99 = require("react/jsx-runtime");
|
|
21846
|
-
var ComboboxList = (0,
|
|
21857
|
+
var ComboboxList = (0, import_react105.forwardRef)(
|
|
21847
21858
|
function ComboboxList2({ children, ...props }, ref) {
|
|
21848
21859
|
const translation = useHightideTranslation();
|
|
21849
21860
|
const context = useComboboxContext();
|
|
21850
21861
|
const { layout } = context;
|
|
21851
21862
|
const { registerList } = layout;
|
|
21852
|
-
const innerRef = (0,
|
|
21853
|
-
(0,
|
|
21863
|
+
const innerRef = (0, import_react105.useRef)(null);
|
|
21864
|
+
(0, import_react105.useEffect)(() => {
|
|
21854
21865
|
return registerList(innerRef);
|
|
21855
21866
|
}, [registerList]);
|
|
21856
21867
|
const setRefs = (node) => {
|
|
@@ -21892,7 +21903,7 @@ var ComboboxList = (0, import_react106.forwardRef)(
|
|
|
21892
21903
|
|
|
21893
21904
|
// src/components/user-interaction/Combobox/Combobox.tsx
|
|
21894
21905
|
var import_jsx_runtime100 = require("react/jsx-runtime");
|
|
21895
|
-
var Combobox = (0,
|
|
21906
|
+
var Combobox = (0, import_react106.forwardRef)(function Combobox2({
|
|
21896
21907
|
children,
|
|
21897
21908
|
onItemClick,
|
|
21898
21909
|
searchQuery,
|
|
@@ -21917,10 +21928,10 @@ var Combobox = (0, import_react107.forwardRef)(function Combobox2({
|
|
|
21917
21928
|
});
|
|
21918
21929
|
|
|
21919
21930
|
// src/components/user-interaction/Combobox/ComboboxOption.tsx
|
|
21920
|
-
var
|
|
21931
|
+
var import_react107 = require("react");
|
|
21921
21932
|
var import_clsx40 = __toESM(require("clsx"));
|
|
21922
21933
|
var import_jsx_runtime101 = require("react/jsx-runtime");
|
|
21923
|
-
var ComboboxOption = (0,
|
|
21934
|
+
var ComboboxOption = (0, import_react107.forwardRef)(function ComboboxOption2({
|
|
21924
21935
|
children,
|
|
21925
21936
|
value,
|
|
21926
21937
|
label,
|
|
@@ -21931,11 +21942,11 @@ var ComboboxOption = (0, import_react108.forwardRef)(function ComboboxOption2({
|
|
|
21931
21942
|
}, ref) {
|
|
21932
21943
|
const context = useComboboxContext();
|
|
21933
21944
|
const { registerOption } = context;
|
|
21934
|
-
const itemRef = (0,
|
|
21935
|
-
const generatedId = (0,
|
|
21945
|
+
const itemRef = (0, import_react107.useRef)(null);
|
|
21946
|
+
const generatedId = (0, import_react107.useId)();
|
|
21936
21947
|
const optionId = idProp ?? `combobox-option-${generatedId}`;
|
|
21937
21948
|
const resolvedDisplay = children ?? label;
|
|
21938
|
-
(0,
|
|
21949
|
+
(0, import_react107.useEffect)(() => {
|
|
21939
21950
|
return registerOption({
|
|
21940
21951
|
id: optionId,
|
|
21941
21952
|
value,
|
|
@@ -21945,7 +21956,7 @@ var ComboboxOption = (0, import_react108.forwardRef)(function ComboboxOption2({
|
|
|
21945
21956
|
ref: itemRef
|
|
21946
21957
|
});
|
|
21947
21958
|
}, [optionId, value, label, resolvedDisplay, disabled, registerOption]);
|
|
21948
|
-
(0,
|
|
21959
|
+
(0, import_react107.useEffect)(() => {
|
|
21949
21960
|
if (context.highlightedId === optionId) {
|
|
21950
21961
|
itemRef.current?.scrollIntoView?.({ behavior: "smooth", block: "nearest" });
|
|
21951
21962
|
}
|
|
@@ -21991,7 +22002,7 @@ var ComboboxOption = (0, import_react108.forwardRef)(function ComboboxOption2({
|
|
|
21991
22002
|
ComboboxOption.displayName = "ComboboxOption";
|
|
21992
22003
|
|
|
21993
22004
|
// src/components/user-interaction/CopyToClipboardWrapper.tsx
|
|
21994
|
-
var
|
|
22005
|
+
var import_react108 = require("react");
|
|
21995
22006
|
var import_clsx41 = require("clsx");
|
|
21996
22007
|
|
|
21997
22008
|
// src/utils/writeToClipboard.ts
|
|
@@ -22014,7 +22025,7 @@ var CopyToClipboardWrapper = ({
|
|
|
22014
22025
|
...props
|
|
22015
22026
|
}) => {
|
|
22016
22027
|
const translation = useHightideTranslation();
|
|
22017
|
-
const [isShowingConfirmation, setIsShowingConfirmation] = (0,
|
|
22028
|
+
const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react108.useState)(false);
|
|
22018
22029
|
return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
|
|
22019
22030
|
TooltipRoot,
|
|
22020
22031
|
{
|
|
@@ -22063,7 +22074,7 @@ var CopyToClipboardWrapper = ({
|
|
|
22063
22074
|
};
|
|
22064
22075
|
|
|
22065
22076
|
// src/components/user-interaction/Menu.tsx
|
|
22066
|
-
var
|
|
22077
|
+
var import_react109 = require("react");
|
|
22067
22078
|
var import_clsx42 = __toESM(require("clsx"));
|
|
22068
22079
|
var import_jsx_runtime103 = require("react/jsx-runtime");
|
|
22069
22080
|
var MenuItem = ({
|
|
@@ -22089,8 +22100,8 @@ var Menu = ({
|
|
|
22089
22100
|
disabled = false,
|
|
22090
22101
|
...props
|
|
22091
22102
|
}) => {
|
|
22092
|
-
const triggerRef = (0,
|
|
22093
|
-
const [isOpen, setIsOpen] = (0,
|
|
22103
|
+
const triggerRef = (0, import_react109.useRef)(null);
|
|
22104
|
+
const [isOpen, setIsOpen] = (0, import_react109.useState)(false);
|
|
22094
22105
|
const bag = {
|
|
22095
22106
|
isOpen,
|
|
22096
22107
|
close: () => setIsOpen(false),
|
|
@@ -22098,7 +22109,7 @@ var Menu = ({
|
|
|
22098
22109
|
disabled
|
|
22099
22110
|
};
|
|
22100
22111
|
return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(import_jsx_runtime103.Fragment, { children: [
|
|
22101
|
-
trigger(bag, (0,
|
|
22112
|
+
trigger(bag, (0, import_react109.useCallback)((el) => triggerRef.current = el, [])),
|
|
22102
22113
|
/* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
|
|
22103
22114
|
PopUp,
|
|
22104
22115
|
{
|
|
@@ -22120,21 +22131,21 @@ var Menu = ({
|
|
|
22120
22131
|
};
|
|
22121
22132
|
|
|
22122
22133
|
// src/components/user-interaction/MultiSelect/MultiSelectChipDisplay.tsx
|
|
22123
|
-
var
|
|
22134
|
+
var import_react110 = require("react");
|
|
22124
22135
|
var import_lucide_react30 = require("lucide-react");
|
|
22125
22136
|
var import_jsx_runtime104 = require("react/jsx-runtime");
|
|
22126
|
-
var MultiSelectChipDisplayButton = (0,
|
|
22137
|
+
var MultiSelectChipDisplayButton = (0, import_react110.forwardRef)(function MultiSelectChipDisplayButton2({ id, ...props }, ref) {
|
|
22127
22138
|
const translation = useHightideTranslation();
|
|
22128
22139
|
const context = useMultiSelectContext();
|
|
22129
22140
|
const { config, layout } = context;
|
|
22130
22141
|
const { setIds } = config;
|
|
22131
22142
|
const { registerTrigger } = layout;
|
|
22132
|
-
(0,
|
|
22143
|
+
(0, import_react110.useEffect)(() => {
|
|
22133
22144
|
if (id) setIds((prev) => ({ ...prev, trigger: id }));
|
|
22134
22145
|
}, [id, setIds]);
|
|
22135
|
-
const innerRef = (0,
|
|
22136
|
-
(0,
|
|
22137
|
-
(0,
|
|
22146
|
+
const innerRef = (0, import_react110.useRef)(null);
|
|
22147
|
+
(0, import_react110.useImperativeHandle)(ref, () => innerRef.current);
|
|
22148
|
+
(0, import_react110.useEffect)(() => {
|
|
22138
22149
|
const unregister = registerTrigger(innerRef);
|
|
22139
22150
|
return () => unregister();
|
|
22140
22151
|
}, [registerTrigger]);
|
|
@@ -22218,7 +22229,7 @@ var MultiSelectChipDisplayButton = (0, import_react111.forwardRef)(function Mult
|
|
|
22218
22229
|
}
|
|
22219
22230
|
);
|
|
22220
22231
|
});
|
|
22221
|
-
var MultiSelectChipDisplay = (0,
|
|
22232
|
+
var MultiSelectChipDisplay = (0, import_react110.forwardRef)(
|
|
22222
22233
|
function MultiSelectChipDisplay2({
|
|
22223
22234
|
children,
|
|
22224
22235
|
contentPanelProps,
|
|
@@ -22233,7 +22244,7 @@ var MultiSelectChipDisplay = (0, import_react111.forwardRef)(
|
|
|
22233
22244
|
);
|
|
22234
22245
|
|
|
22235
22246
|
// src/components/user-interaction/ScrollPicker.tsx
|
|
22236
|
-
var
|
|
22247
|
+
var import_react111 = require("react");
|
|
22237
22248
|
var import_clsx43 = __toESM(require("clsx"));
|
|
22238
22249
|
var import_jsx_runtime105 = require("react/jsx-runtime");
|
|
22239
22250
|
var up = 1;
|
|
@@ -22254,7 +22265,7 @@ var ScrollPicker = ({
|
|
|
22254
22265
|
transition,
|
|
22255
22266
|
items,
|
|
22256
22267
|
lastTimeStamp
|
|
22257
|
-
}, setAnimation] = (0,
|
|
22268
|
+
}, setAnimation] = (0, import_react111.useState)({
|
|
22258
22269
|
targetIndex: selectedIndex,
|
|
22259
22270
|
currentIndex: disabled ? selectedIndex : 0,
|
|
22260
22271
|
velocity: 0,
|
|
@@ -22270,7 +22281,7 @@ var ScrollPicker = ({
|
|
|
22270
22281
|
const itemHeight = 40;
|
|
22271
22282
|
const distance = 8;
|
|
22272
22283
|
const containerHeight = itemHeight * (itemsShownCount - 2) + distance * (itemsShownCount - 2 + 1);
|
|
22273
|
-
const getDirection = (0,
|
|
22284
|
+
const getDirection = (0, import_react111.useCallback)((targetIndex, currentIndex2, transition2, length) => {
|
|
22274
22285
|
if (targetIndex === currentIndex2) {
|
|
22275
22286
|
return transition2 > 0 ? up : down;
|
|
22276
22287
|
}
|
|
@@ -22280,7 +22291,7 @@ var ScrollPicker = ({
|
|
|
22280
22291
|
}
|
|
22281
22292
|
return distanceForward >= length / 2 ? down : up;
|
|
22282
22293
|
}, []);
|
|
22283
|
-
const animate = (0,
|
|
22294
|
+
const animate = (0, import_react111.useCallback)((timestamp, startTime) => {
|
|
22284
22295
|
setAnimation((prevState) => {
|
|
22285
22296
|
const {
|
|
22286
22297
|
targetIndex,
|
|
@@ -22353,7 +22364,7 @@ var ScrollPicker = ({
|
|
|
22353
22364
|
};
|
|
22354
22365
|
});
|
|
22355
22366
|
}, [disabled, getDirection, onChange]);
|
|
22356
|
-
(0,
|
|
22367
|
+
(0, import_react111.useEffect)(() => {
|
|
22357
22368
|
requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
|
|
22358
22369
|
});
|
|
22359
22370
|
const opacity = (transition2, index, itemsCount) => {
|
|
@@ -22431,7 +22442,7 @@ var ScrollPicker = ({
|
|
|
22431
22442
|
};
|
|
22432
22443
|
|
|
22433
22444
|
// src/components/user-interaction/Switch.tsx
|
|
22434
|
-
var
|
|
22445
|
+
var import_react112 = require("react");
|
|
22435
22446
|
var import_jsx_runtime106 = require("react/jsx-runtime");
|
|
22436
22447
|
var Switch = ({
|
|
22437
22448
|
value: controlledValue,
|
|
@@ -22446,7 +22457,7 @@ var Switch = ({
|
|
|
22446
22457
|
}) => {
|
|
22447
22458
|
const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
|
|
22448
22459
|
const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
|
|
22449
|
-
const onChangeWrapper = (0,
|
|
22460
|
+
const onChangeWrapper = (0, import_react112.useCallback)((value2) => {
|
|
22450
22461
|
onValueChangeStable(!value2);
|
|
22451
22462
|
onEditCompleteStable(!value2);
|
|
22452
22463
|
}, [onValueChangeStable, onEditCompleteStable]);
|
|
@@ -22486,10 +22497,10 @@ var Switch = ({
|
|
|
22486
22497
|
};
|
|
22487
22498
|
|
|
22488
22499
|
// src/components/user-interaction/Textarea.tsx
|
|
22489
|
-
var
|
|
22500
|
+
var import_react113 = require("react");
|
|
22490
22501
|
var import_clsx44 = __toESM(require("clsx"));
|
|
22491
22502
|
var import_jsx_runtime107 = require("react/jsx-runtime");
|
|
22492
|
-
var Textarea = (0,
|
|
22503
|
+
var Textarea = (0, import_react113.forwardRef)(function Textarea2({
|
|
22493
22504
|
value: controlledValue,
|
|
22494
22505
|
initialValue,
|
|
22495
22506
|
invalid = false,
|
|
@@ -22505,7 +22516,7 @@ var Textarea = (0, import_react114.forwardRef)(function Textarea2({
|
|
|
22505
22516
|
});
|
|
22506
22517
|
const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
|
|
22507
22518
|
const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
|
|
22508
|
-
const onEditCompleteWrapper = (0,
|
|
22519
|
+
const onEditCompleteWrapper = (0, import_react113.useCallback)((text) => {
|
|
22509
22520
|
onEditCompleteStable(text);
|
|
22510
22521
|
clearTimer();
|
|
22511
22522
|
}, [onEditCompleteStable, clearTimer]);
|
|
@@ -22543,7 +22554,7 @@ var TextareaWithHeadline = ({
|
|
|
22543
22554
|
containerClassName,
|
|
22544
22555
|
...props
|
|
22545
22556
|
}) => {
|
|
22546
|
-
const genId = (0,
|
|
22557
|
+
const genId = (0, import_react113.useId)();
|
|
22547
22558
|
const usedId = id ?? genId;
|
|
22548
22559
|
return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
|
|
22549
22560
|
"div",
|
|
@@ -22575,20 +22586,20 @@ var TextareaWithHeadline = ({
|
|
|
22575
22586
|
};
|
|
22576
22587
|
|
|
22577
22588
|
// src/components/user-interaction/data/FilterList.tsx
|
|
22578
|
-
var
|
|
22589
|
+
var import_react114 = require("react");
|
|
22579
22590
|
var import_lucide_react31 = require("lucide-react");
|
|
22580
22591
|
var import_jsx_runtime108 = require("react/jsx-runtime");
|
|
22581
22592
|
var FilterList = ({ value, onValueChange, availableItems }) => {
|
|
22582
22593
|
const translation = useHightideTranslation();
|
|
22583
22594
|
const filterValueToLabel = useFilterValueTranslation();
|
|
22584
|
-
const activeIds = (0,
|
|
22585
|
-
const inactiveItems = (0,
|
|
22586
|
-
const itemRecord = (0,
|
|
22595
|
+
const activeIds = (0, import_react114.useMemo)(() => value.map((item) => item.id), [value]);
|
|
22596
|
+
const inactiveItems = (0, import_react114.useMemo)(() => availableItems.filter((item) => !activeIds.includes(item.id)).sort((a, b) => a.label.localeCompare(b.label)), [availableItems, activeIds]);
|
|
22597
|
+
const itemRecord = (0, import_react114.useMemo)(() => availableItems.reduce((acc, item) => {
|
|
22587
22598
|
acc[item.id] = item;
|
|
22588
22599
|
return acc;
|
|
22589
22600
|
}, {}), [availableItems]);
|
|
22590
|
-
const [editState, setEditState] = (0,
|
|
22591
|
-
const valueWithEditState = (0,
|
|
22601
|
+
const [editState, setEditState] = (0, import_react114.useState)(void 0);
|
|
22602
|
+
const valueWithEditState = (0, import_react114.useMemo)(() => {
|
|
22592
22603
|
let foundEditValue = false;
|
|
22593
22604
|
for (const item of value) {
|
|
22594
22605
|
if (item.id === editState?.id) {
|
|
@@ -22696,18 +22707,18 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
|
|
|
22696
22707
|
};
|
|
22697
22708
|
|
|
22698
22709
|
// src/components/user-interaction/data/SortingList.tsx
|
|
22699
|
-
var
|
|
22710
|
+
var import_react115 = require("react");
|
|
22700
22711
|
var import_lucide_react32 = require("lucide-react");
|
|
22701
22712
|
var import_clsx45 = __toESM(require("clsx"));
|
|
22702
22713
|
var import_jsx_runtime109 = require("react/jsx-runtime");
|
|
22703
22714
|
var SortingList = ({ sorting, onSortingChange, availableItems }) => {
|
|
22704
22715
|
const translation = useHightideTranslation();
|
|
22705
|
-
const activeIds = (0,
|
|
22706
|
-
const inactiveItems = (0,
|
|
22716
|
+
const activeIds = (0, import_react115.useMemo)(() => sorting.map((item) => item.id), [sorting]);
|
|
22717
|
+
const inactiveItems = (0, import_react115.useMemo)(
|
|
22707
22718
|
() => availableItems.filter((item) => !activeIds.includes(item.id)).sort((a, b) => a.label.localeCompare(b.label)),
|
|
22708
22719
|
[availableItems, activeIds]
|
|
22709
22720
|
);
|
|
22710
|
-
const itemRecord = (0,
|
|
22721
|
+
const itemRecord = (0, import_react115.useMemo)(
|
|
22711
22722
|
() => availableItems.reduce(
|
|
22712
22723
|
(acc, item) => {
|
|
22713
22724
|
acc[item.id] = item;
|
|
@@ -22885,10 +22896,10 @@ var TimeDisplay = ({
|
|
|
22885
22896
|
};
|
|
22886
22897
|
|
|
22887
22898
|
// src/components/user-interaction/input/FlexibleDateTimeInput.tsx
|
|
22888
|
-
var
|
|
22899
|
+
var import_react116 = require("react");
|
|
22889
22900
|
var import_lucide_react33 = require("lucide-react");
|
|
22890
22901
|
var import_jsx_runtime111 = require("react/jsx-runtime");
|
|
22891
|
-
var FlexibleDateTimeInput = (0,
|
|
22902
|
+
var FlexibleDateTimeInput = (0, import_react116.forwardRef)(function FlexibleDateTimeInput2({
|
|
22892
22903
|
defaultMode = "date",
|
|
22893
22904
|
value: controlledValue,
|
|
22894
22905
|
initialValue,
|
|
@@ -22910,7 +22921,7 @@ var FlexibleDateTimeInput = (0, import_react117.forwardRef)(function FlexibleDat
|
|
|
22910
22921
|
const zoned = (date) => DateUtils.toZonedDate(date, timeZone);
|
|
22911
22922
|
const unzoned = (date) => DateUtils.fromZonedDate(date, timeZone);
|
|
22912
22923
|
const hasFixedTime = (date) => DateUtils.sameTime(zoned(date), fixedTime, true, true);
|
|
22913
|
-
const [mode, setMode] = (0,
|
|
22924
|
+
const [mode, setMode] = (0, import_react116.useState)(() => {
|
|
22914
22925
|
if (value && !hasFixedTime(value)) {
|
|
22915
22926
|
return "dateTime";
|
|
22916
22927
|
}
|
|
@@ -22955,11 +22966,11 @@ var FlexibleDateTimeInput = (0, import_react117.forwardRef)(function FlexibleDat
|
|
|
22955
22966
|
});
|
|
22956
22967
|
|
|
22957
22968
|
// src/components/user-interaction/input/InsideLabelInput.tsx
|
|
22969
|
+
var import_react117 = require("react");
|
|
22958
22970
|
var import_react118 = require("react");
|
|
22959
|
-
var import_react119 = require("react");
|
|
22960
22971
|
var import_clsx46 = __toESM(require("clsx"));
|
|
22961
22972
|
var import_jsx_runtime112 = require("react/jsx-runtime");
|
|
22962
|
-
var InsideLabelInput = (0,
|
|
22973
|
+
var InsideLabelInput = (0, import_react118.forwardRef)(function InsideLabelInput2({
|
|
22963
22974
|
id: customId,
|
|
22964
22975
|
value: controlledValue,
|
|
22965
22976
|
initialValue,
|
|
@@ -22972,8 +22983,8 @@ var InsideLabelInput = (0, import_react119.forwardRef)(function InsideLabelInput
|
|
|
22972
22983
|
onValueChange,
|
|
22973
22984
|
defaultValue: initialValue
|
|
22974
22985
|
});
|
|
22975
|
-
const [isFocused, setIsFocused] = (0,
|
|
22976
|
-
const generatedId = (0,
|
|
22986
|
+
const [isFocused, setIsFocused] = (0, import_react118.useState)(false);
|
|
22987
|
+
const generatedId = (0, import_react117.useId)();
|
|
22977
22988
|
const id = customId ?? generatedId;
|
|
22978
22989
|
return /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("div", { className: (0, import_clsx46.default)("relative"), children: [
|
|
22979
22990
|
/* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
|
|
@@ -23062,11 +23073,11 @@ var SearchBar = ({
|
|
|
23062
23073
|
};
|
|
23063
23074
|
|
|
23064
23075
|
// src/components/user-interaction/input/ToggleableInput.tsx
|
|
23065
|
-
var
|
|
23076
|
+
var import_react119 = require("react");
|
|
23066
23077
|
var import_lucide_react35 = require("lucide-react");
|
|
23067
23078
|
var import_clsx48 = __toESM(require("clsx"));
|
|
23068
23079
|
var import_jsx_runtime114 = require("react/jsx-runtime");
|
|
23069
|
-
var ToggleableInput = (0,
|
|
23080
|
+
var ToggleableInput = (0, import_react119.forwardRef)(function ToggleableInput2({
|
|
23070
23081
|
value: controlledValue,
|
|
23071
23082
|
initialValue,
|
|
23072
23083
|
onValueChange,
|
|
@@ -23079,10 +23090,10 @@ var ToggleableInput = (0, import_react120.forwardRef)(function ToggleableInput2(
|
|
|
23079
23090
|
onValueChange,
|
|
23080
23091
|
defaultValue: initialValue
|
|
23081
23092
|
});
|
|
23082
|
-
const [isEditing, setIsEditing] = (0,
|
|
23083
|
-
const innerRef = (0,
|
|
23084
|
-
(0,
|
|
23085
|
-
(0,
|
|
23093
|
+
const [isEditing, setIsEditing] = (0, import_react119.useState)(initialState !== "display");
|
|
23094
|
+
const innerRef = (0, import_react119.useRef)(null);
|
|
23095
|
+
(0, import_react119.useImperativeHandle)(forwardedRef, () => innerRef.current);
|
|
23096
|
+
(0, import_react119.useEffect)(() => {
|
|
23086
23097
|
if (isEditing) {
|
|
23087
23098
|
innerRef.current?.focus();
|
|
23088
23099
|
}
|
|
@@ -23517,9 +23528,9 @@ var TextProperty = ({
|
|
|
23517
23528
|
|
|
23518
23529
|
// src/components/utils/Polymorphic.tsx
|
|
23519
23530
|
var import_react_slot = require("@radix-ui/react-slot");
|
|
23520
|
-
var
|
|
23531
|
+
var import_react120 = require("react");
|
|
23521
23532
|
var import_jsx_runtime122 = require("react/jsx-runtime");
|
|
23522
|
-
var PolymorphicSlot = (0,
|
|
23533
|
+
var PolymorphicSlot = (0, import_react120.forwardRef)(function PolymorphicSlot2({
|
|
23523
23534
|
children,
|
|
23524
23535
|
asChild,
|
|
23525
23536
|
defaultComponent = "div",
|
|
@@ -23530,16 +23541,16 @@ var PolymorphicSlot = (0, import_react121.forwardRef)(function PolymorphicSlot2(
|
|
|
23530
23541
|
});
|
|
23531
23542
|
|
|
23532
23543
|
// src/components/utils/Transition.tsx
|
|
23533
|
-
var
|
|
23544
|
+
var import_react121 = require("react");
|
|
23534
23545
|
function Transition({
|
|
23535
23546
|
children,
|
|
23536
23547
|
show,
|
|
23537
23548
|
includeAnimation = true
|
|
23538
23549
|
}) {
|
|
23539
|
-
const [isOpen, setIsOpen] = (0,
|
|
23540
|
-
const [isTransitioning, setIsTransitioning] = (0,
|
|
23550
|
+
const [isOpen, setIsOpen] = (0, import_react121.useState)(show);
|
|
23551
|
+
const [isTransitioning, setIsTransitioning] = (0, import_react121.useState)(!isOpen);
|
|
23541
23552
|
const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
|
|
23542
|
-
(0,
|
|
23553
|
+
(0, import_react121.useEffect)(() => {
|
|
23543
23554
|
setIsOpen(show);
|
|
23544
23555
|
setIsTransitioning(true);
|
|
23545
23556
|
}, [show]);
|
|
@@ -23575,7 +23586,7 @@ var HightideProvider = ({
|
|
|
23575
23586
|
};
|
|
23576
23587
|
|
|
23577
23588
|
// src/hooks/focus/useFocusGuards.ts
|
|
23578
|
-
var
|
|
23589
|
+
var import_react122 = require("react");
|
|
23579
23590
|
var selectorName = "data-hw-focus-guard";
|
|
23580
23591
|
function FocusGuard() {
|
|
23581
23592
|
const element = document.createElement("div");
|
|
@@ -23613,7 +23624,7 @@ var FocusGuardsService = class _FocusGuardsService {
|
|
|
23613
23624
|
}
|
|
23614
23625
|
};
|
|
23615
23626
|
var useFocusGuards = () => {
|
|
23616
|
-
(0,
|
|
23627
|
+
(0, import_react122.useEffect)(() => {
|
|
23617
23628
|
FocusGuardsService.getInstance().add();
|
|
23618
23629
|
return () => {
|
|
23619
23630
|
FocusGuardsService.getInstance().remove();
|
|
@@ -23622,10 +23633,10 @@ var useFocusGuards = () => {
|
|
|
23622
23633
|
};
|
|
23623
23634
|
|
|
23624
23635
|
// src/hooks/focus/useFocusOnceVisible.ts
|
|
23625
|
-
var
|
|
23636
|
+
var import_react123 = __toESM(require("react"));
|
|
23626
23637
|
var useFocusOnceVisible = (ref, disable = false) => {
|
|
23627
|
-
const [hasUsedFocus, setHasUsedFocus] =
|
|
23628
|
-
(0,
|
|
23638
|
+
const [hasUsedFocus, setHasUsedFocus] = import_react123.default.useState(false);
|
|
23639
|
+
(0, import_react123.useEffect)(() => {
|
|
23629
23640
|
if (disable || hasUsedFocus) {
|
|
23630
23641
|
return;
|
|
23631
23642
|
}
|
|
@@ -23645,11 +23656,11 @@ var useFocusOnceVisible = (ref, disable = false) => {
|
|
|
23645
23656
|
};
|
|
23646
23657
|
|
|
23647
23658
|
// src/hooks/focus/useIsMounted.ts
|
|
23648
|
-
var
|
|
23659
|
+
var import_react124 = require("react");
|
|
23649
23660
|
var isClient = typeof window !== "undefined" && typeof document !== "undefined";
|
|
23650
|
-
var useIsomorphicEffect = isClient ?
|
|
23661
|
+
var useIsomorphicEffect = isClient ? import_react124.useLayoutEffect : import_react124.useEffect;
|
|
23651
23662
|
var useIsMounted = () => {
|
|
23652
|
-
const [isMounted, setIsMounted] = (0,
|
|
23663
|
+
const [isMounted, setIsMounted] = (0, import_react124.useState)(false);
|
|
23653
23664
|
useIsomorphicEffect(() => {
|
|
23654
23665
|
setIsMounted(true);
|
|
23655
23666
|
return () => {
|
|
@@ -23660,10 +23671,10 @@ var useIsMounted = () => {
|
|
|
23660
23671
|
};
|
|
23661
23672
|
|
|
23662
23673
|
// src/hooks/useHandleRefs.ts
|
|
23663
|
-
var
|
|
23674
|
+
var import_react125 = require("react");
|
|
23664
23675
|
function useHandleRefs(handleRef) {
|
|
23665
|
-
const refs = (0,
|
|
23666
|
-
(0,
|
|
23676
|
+
const refs = (0, import_react125.useRef)([]);
|
|
23677
|
+
(0, import_react125.useEffect)(() => {
|
|
23667
23678
|
refs.current = Object.keys(handleRef?.current ?? {}).map(
|
|
23668
23679
|
() => ({ current: null })
|
|
23669
23680
|
);
|
|
@@ -23676,10 +23687,10 @@ function useHandleRefs(handleRef) {
|
|
|
23676
23687
|
}
|
|
23677
23688
|
|
|
23678
23689
|
// src/hooks/useLogUnstableDependencies.ts
|
|
23679
|
-
var
|
|
23690
|
+
var import_react126 = __toESM(require("react"));
|
|
23680
23691
|
function useLogUnstableDependencies(name, value) {
|
|
23681
|
-
const prev =
|
|
23682
|
-
|
|
23692
|
+
const prev = import_react126.default.useRef(null);
|
|
23693
|
+
import_react126.default.useEffect(() => {
|
|
23683
23694
|
if (!prev.current) {
|
|
23684
23695
|
prev.current = value;
|
|
23685
23696
|
return;
|
|
@@ -23701,10 +23712,10 @@ function useLogUnstableDependencies(name, value) {
|
|
|
23701
23712
|
}
|
|
23702
23713
|
|
|
23703
23714
|
// src/hooks/useOverwritableState.ts
|
|
23704
|
-
var
|
|
23715
|
+
var import_react127 = require("react");
|
|
23705
23716
|
var useOverwritableState = (overwriteValue, onChange) => {
|
|
23706
|
-
const [state, setState] = (0,
|
|
23707
|
-
(0,
|
|
23717
|
+
const [state, setState] = (0, import_react127.useState)(overwriteValue);
|
|
23718
|
+
(0, import_react127.useEffect)(() => {
|
|
23708
23719
|
setState(overwriteValue);
|
|
23709
23720
|
}, [overwriteValue]);
|
|
23710
23721
|
const onChangeWrapper = (action) => {
|
|
@@ -23716,13 +23727,13 @@ var useOverwritableState = (overwriteValue, onChange) => {
|
|
|
23716
23727
|
};
|
|
23717
23728
|
|
|
23718
23729
|
// src/hooks/useRerender.ts
|
|
23719
|
-
var
|
|
23730
|
+
var import_react128 = require("react");
|
|
23720
23731
|
var useRerender = () => {
|
|
23721
|
-
return (0,
|
|
23732
|
+
return (0, import_react128.useReducer)(() => ({}), {})[1];
|
|
23722
23733
|
};
|
|
23723
23734
|
|
|
23724
23735
|
// src/hooks/useSwipeGesture.ts
|
|
23725
|
-
var
|
|
23736
|
+
var import_react129 = require("react");
|
|
23726
23737
|
var useSwipeGesture = ({
|
|
23727
23738
|
elementRef,
|
|
23728
23739
|
inputMode = "touch",
|
|
@@ -23732,16 +23743,16 @@ var useSwipeGesture = ({
|
|
|
23732
23743
|
crossAxisThreshold = 100,
|
|
23733
23744
|
maxSwipeTime = 100
|
|
23734
23745
|
}) => {
|
|
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,
|
|
23746
|
+
const onSwipeRef = (0, import_react129.useRef)(onSwipe);
|
|
23747
|
+
const startRegionRef = (0, import_react129.useRef)(startRegion);
|
|
23748
|
+
const thresholdRef = (0, import_react129.useRef)(threshold);
|
|
23749
|
+
const crossAxisThresholdRef = (0, import_react129.useRef)(crossAxisThreshold);
|
|
23750
|
+
const maxSwipeTimeRef = (0, import_react129.useRef)(maxSwipeTime);
|
|
23751
|
+
const gestureStartRef = (0, import_react129.useRef)(null);
|
|
23752
|
+
const gestureEndRef = (0, import_react129.useRef)(null);
|
|
23753
|
+
const isScrollingRef = (0, import_react129.useRef)(false);
|
|
23754
|
+
const isMouseDownRef = (0, import_react129.useRef)(false);
|
|
23755
|
+
(0, import_react129.useEffect)(() => {
|
|
23745
23756
|
onSwipeRef.current = onSwipe;
|
|
23746
23757
|
startRegionRef.current = startRegion;
|
|
23747
23758
|
thresholdRef.current = threshold;
|
|
@@ -23781,7 +23792,7 @@ var useSwipeGesture = ({
|
|
|
23781
23792
|
}
|
|
23782
23793
|
return null;
|
|
23783
23794
|
};
|
|
23784
|
-
(0,
|
|
23795
|
+
(0, import_react129.useEffect)(() => {
|
|
23785
23796
|
const element = elementRef?.current ?? null;
|
|
23786
23797
|
const target = element ?? window;
|
|
23787
23798
|
const listenTouch = inputMode === "touch" || inputMode === "both";
|
|
@@ -23917,25 +23928,25 @@ var useSwipeGesture = ({
|
|
|
23917
23928
|
};
|
|
23918
23929
|
|
|
23919
23930
|
// src/hooks/useUpdatingDateString.ts
|
|
23920
|
-
var
|
|
23931
|
+
var import_react130 = require("react");
|
|
23921
23932
|
var useUpdatingDateString = ({ absoluteFormat = "dateTime", localeOverride, is24HourFormat: is24HourFormatOverride, timeZone: timeZoneOverride, date }) => {
|
|
23922
23933
|
const { locale: contextLocale, is24HourFormat: contextIs24HourFormat, timeZone: contextTimeZone } = useLocale();
|
|
23923
23934
|
const locale = localeOverride ?? contextLocale;
|
|
23924
23935
|
const is24HourFormat = is24HourFormatOverride ?? contextIs24HourFormat ?? true;
|
|
23925
23936
|
const timeZone = timeZoneOverride ?? contextTimeZone;
|
|
23926
|
-
const [dateAndTimeStrings, setDateAndTimeStrings] = (0,
|
|
23937
|
+
const [dateAndTimeStrings, setDateAndTimeStrings] = (0, import_react130.useState)({
|
|
23927
23938
|
compareDate: date,
|
|
23928
23939
|
absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat, { is24HourFormat, timeZone }),
|
|
23929
23940
|
relative: DateUtils.formatRelative(date, locale)
|
|
23930
23941
|
});
|
|
23931
|
-
(0,
|
|
23942
|
+
(0, import_react130.useEffect)(() => {
|
|
23932
23943
|
setDateAndTimeStrings({
|
|
23933
23944
|
compareDate: date,
|
|
23934
23945
|
absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat, { is24HourFormat, timeZone }),
|
|
23935
23946
|
relative: DateUtils.formatRelative(date, locale)
|
|
23936
23947
|
});
|
|
23937
23948
|
}, [date, absoluteFormat, locale, is24HourFormat, timeZone]);
|
|
23938
|
-
(0,
|
|
23949
|
+
(0, import_react130.useEffect)(() => {
|
|
23939
23950
|
let timeoutId;
|
|
23940
23951
|
const startTimer = () => {
|
|
23941
23952
|
const now = /* @__PURE__ */ new Date();
|
|
@@ -23971,7 +23982,7 @@ var validateEmail = (email) => {
|
|
|
23971
23982
|
};
|
|
23972
23983
|
|
|
23973
23984
|
// src/hooks/useValidators.ts
|
|
23974
|
-
var
|
|
23985
|
+
var import_react131 = require("react");
|
|
23975
23986
|
var notEmpty = (value) => {
|
|
23976
23987
|
if (!value) {
|
|
23977
23988
|
return "notEmpty";
|
|
@@ -24021,7 +24032,7 @@ var UseValidators = {
|
|
|
24021
24032
|
};
|
|
24022
24033
|
var useTranslatedValidators = () => {
|
|
24023
24034
|
const translation = useHightideTranslation();
|
|
24024
|
-
return (0,
|
|
24035
|
+
return (0, import_react131.useMemo)(() => ({
|
|
24025
24036
|
notEmpty: (value) => {
|
|
24026
24037
|
const result = notEmpty(value);
|
|
24027
24038
|
if (result) {
|