@helpwave/hightide 0.1.27 → 0.1.28
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/coloring/index.d.mts +2 -0
- package/dist/coloring/index.d.ts +2 -0
- package/dist/coloring/index.js +85 -0
- package/dist/coloring/index.js.map +1 -0
- package/dist/coloring/index.mjs +48 -0
- package/dist/coloring/index.mjs.map +1 -0
- package/dist/components/branding/index.d.mts +3 -0
- package/dist/components/branding/index.d.ts +3 -0
- package/dist/components/branding/index.js +140 -0
- package/dist/components/branding/index.js.map +1 -0
- package/dist/components/branding/index.mjs +104 -0
- package/dist/components/branding/index.mjs.map +1 -0
- package/dist/components/date/index.d.mts +10 -0
- package/dist/components/date/index.d.ts +10 -0
- package/dist/components/date/index.js +1168 -0
- package/dist/components/date/index.js.map +1 -0
- package/dist/components/date/index.mjs +1124 -0
- package/dist/components/date/index.mjs.map +1 -0
- package/dist/components/dialog/index.js.map +1 -1
- package/dist/components/form/index.d.mts +5 -0
- package/dist/components/form/index.d.ts +5 -0
- package/dist/components/form/index.js +100 -0
- package/dist/components/form/index.js.map +1 -0
- package/dist/components/form/index.mjs +64 -0
- package/dist/components/form/index.mjs.map +1 -0
- package/dist/components/icons-and-geometry/index.d.mts +7 -0
- package/dist/components/icons-and-geometry/index.d.ts +7 -0
- package/dist/components/icons-and-geometry/index.js +3955 -0
- package/dist/components/icons-and-geometry/index.js.map +1 -0
- package/dist/components/icons-and-geometry/index.mjs +3939 -0
- package/dist/components/icons-and-geometry/index.mjs.map +1 -0
- package/dist/components/index.d.mts +83 -0
- package/dist/components/index.d.ts +83 -0
- package/dist/components/index.js +15471 -0
- package/dist/components/index.js.map +1 -0
- package/dist/components/index.mjs +15377 -0
- package/dist/components/index.mjs.map +1 -0
- package/dist/components/layout/index.d.mts +18 -0
- package/dist/components/layout/index.d.ts +18 -0
- package/dist/components/layout/index.js +3111 -0
- package/dist/components/layout/index.js.map +1 -0
- package/dist/components/layout/index.mjs +3064 -0
- package/dist/components/layout/index.mjs.map +1 -0
- package/dist/components/loading-states/index.d.mts +12 -0
- package/dist/components/loading-states/index.d.ts +12 -0
- package/dist/components/loading-states/index.js +614 -0
- package/dist/components/loading-states/index.js.map +1 -0
- package/dist/components/loading-states/index.mjs +573 -0
- package/dist/components/loading-states/index.mjs.map +1 -0
- package/dist/components/navigation/index.d.mts +9 -0
- package/dist/components/navigation/index.d.ts +9 -0
- package/dist/components/navigation/index.js +4660 -0
- package/dist/components/navigation/index.js.map +1 -0
- package/dist/components/navigation/index.mjs +4648 -0
- package/dist/components/navigation/index.mjs.map +1 -0
- package/dist/components/properties/index.d.mts +12 -0
- package/dist/components/properties/index.d.ts +12 -0
- package/dist/components/properties/index.js +2983 -0
- package/dist/components/properties/index.js.map +1 -0
- package/dist/components/properties/index.mjs +2951 -0
- package/dist/components/properties/index.mjs.map +1 -0
- package/dist/components/table/index.d.mts +10 -0
- package/dist/components/table/index.d.ts +10 -0
- package/dist/components/table/index.js +2329 -0
- package/dist/components/table/index.js.map +1 -0
- package/dist/components/table/index.mjs +2293 -0
- package/dist/components/table/index.mjs.map +1 -0
- package/dist/components/user-action/index.d.mts +30 -0
- package/dist/components/user-action/index.d.ts +30 -0
- package/dist/components/user-action/index.js +4257 -0
- package/dist/components/user-action/index.js.map +1 -0
- package/dist/components/user-action/index.mjs +4195 -0
- package/dist/components/user-action/index.mjs.map +1 -0
- package/dist/components/user-action/input/index.d.mts +6 -0
- package/dist/components/user-action/input/index.d.ts +6 -0
- package/dist/components/user-action/input/index.js +398 -0
- package/dist/components/user-action/input/index.js.map +1 -0
- package/dist/components/user-action/input/index.mjs +357 -0
- package/dist/components/user-action/input/index.mjs.map +1 -0
- package/dist/components/user-action/select/index.d.mts +4 -0
- package/dist/components/user-action/select/index.d.ts +4 -0
- package/dist/components/user-action/select/index.js +1369 -0
- package/dist/components/user-action/select/index.js.map +1 -0
- package/dist/components/user-action/select/index.mjs +1333 -0
- package/dist/components/user-action/select/index.mjs.map +1 -0
- package/dist/components/utils/index.d.mts +4 -0
- package/dist/components/utils/index.d.ts +4 -0
- package/dist/components/utils/index.js +302 -0
- package/dist/components/utils/index.js.map +1 -0
- package/dist/components/utils/index.mjs +275 -0
- package/dist/components/utils/index.mjs.map +1 -0
- package/dist/hooks/focus/index.d.mts +6 -0
- package/dist/hooks/focus/index.d.ts +6 -0
- package/dist/hooks/focus/index.js +379 -0
- package/dist/hooks/focus/index.js.map +1 -0
- package/dist/hooks/focus/index.mjs +339 -0
- package/dist/hooks/focus/index.mjs.map +1 -0
- package/dist/hooks/index.d.mts +16 -0
- package/dist/hooks/index.d.ts +16 -0
- package/dist/hooks/index.js +844 -0
- package/dist/hooks/index.js.map +1 -0
- package/dist/hooks/index.mjs +794 -0
- package/dist/hooks/index.mjs.map +1 -0
- package/dist/index.d.mts +110 -0
- package/dist/index.d.ts +110 -0
- package/dist/index.js +16101 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +15941 -0
- package/dist/index.mjs.map +1 -0
- package/dist/localization/defaults/index.d.mts +4 -0
- package/dist/localization/defaults/index.d.ts +4 -0
- package/dist/localization/defaults/index.js +223 -0
- package/dist/localization/defaults/index.js.map +1 -0
- package/dist/localization/defaults/index.mjs +195 -0
- package/dist/localization/defaults/index.mjs.map +1 -0
- package/dist/localization/index.d.mts +7 -0
- package/dist/localization/index.d.ts +7 -0
- package/dist/localization/index.js +415 -0
- package/dist/localization/index.js.map +1 -0
- package/dist/localization/index.mjs +380 -0
- package/dist/localization/index.mjs.map +1 -0
- package/dist/theming/index.d.mts +5 -0
- package/dist/theming/index.d.ts +5 -0
- package/dist/theming/index.js +174 -0
- package/dist/theming/index.js.map +1 -0
- package/dist/theming/index.mjs +145 -0
- package/dist/theming/index.mjs.map +1 -0
- package/dist/utils/index.d.mts +15 -0
- package/dist/utils/index.d.ts +15 -0
- package/dist/utils/index.js +553 -0
- package/dist/utils/index.js.map +1 -0
- package/dist/utils/index.mjs +493 -0
- package/dist/utils/index.mjs.map +1 -0
- package/package.json +25 -24
|
@@ -0,0 +1,2951 @@
|
|
|
1
|
+
// src/components/properties/CheckboxProperty.tsx
|
|
2
|
+
import { Check as Check2 } from "lucide-react";
|
|
3
|
+
|
|
4
|
+
// src/utils/noop.ts
|
|
5
|
+
var noop = () => void 0;
|
|
6
|
+
|
|
7
|
+
// src/components/user-action/Checkbox.tsx
|
|
8
|
+
import { useEffect as useEffect5, useState as useState5 } from "react";
|
|
9
|
+
import { Check, Minus } from "lucide-react";
|
|
10
|
+
import clsx from "clsx";
|
|
11
|
+
|
|
12
|
+
// node_modules/@radix-ui/react-checkbox/dist/index.mjs
|
|
13
|
+
import * as React10 from "react";
|
|
14
|
+
|
|
15
|
+
// node_modules/@radix-ui/react-compose-refs/dist/index.mjs
|
|
16
|
+
import * as React from "react";
|
|
17
|
+
function setRef(ref, value) {
|
|
18
|
+
if (typeof ref === "function") {
|
|
19
|
+
return ref(value);
|
|
20
|
+
} else if (ref !== null && ref !== void 0) {
|
|
21
|
+
ref.current = value;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
function composeRefs(...refs) {
|
|
25
|
+
return (node) => {
|
|
26
|
+
let hasCleanup = false;
|
|
27
|
+
const cleanups = refs.map((ref) => {
|
|
28
|
+
const cleanup = setRef(ref, node);
|
|
29
|
+
if (!hasCleanup && typeof cleanup == "function") {
|
|
30
|
+
hasCleanup = true;
|
|
31
|
+
}
|
|
32
|
+
return cleanup;
|
|
33
|
+
});
|
|
34
|
+
if (hasCleanup) {
|
|
35
|
+
return () => {
|
|
36
|
+
for (let i = 0; i < cleanups.length; i++) {
|
|
37
|
+
const cleanup = cleanups[i];
|
|
38
|
+
if (typeof cleanup == "function") {
|
|
39
|
+
cleanup();
|
|
40
|
+
} else {
|
|
41
|
+
setRef(refs[i], null);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
function useComposedRefs(...refs) {
|
|
49
|
+
return React.useCallback(composeRefs(...refs), refs);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// node_modules/@radix-ui/react-context/dist/index.mjs
|
|
53
|
+
import * as React2 from "react";
|
|
54
|
+
import { jsx } from "react/jsx-runtime";
|
|
55
|
+
function createContextScope(scopeName, createContextScopeDeps = []) {
|
|
56
|
+
let defaultContexts = [];
|
|
57
|
+
function createContext32(rootComponentName, defaultContext) {
|
|
58
|
+
const BaseContext = React2.createContext(defaultContext);
|
|
59
|
+
const index = defaultContexts.length;
|
|
60
|
+
defaultContexts = [...defaultContexts, defaultContext];
|
|
61
|
+
const Provider = (props) => {
|
|
62
|
+
const { scope, children, ...context } = props;
|
|
63
|
+
const Context = scope?.[scopeName]?.[index] || BaseContext;
|
|
64
|
+
const value = React2.useMemo(() => context, Object.values(context));
|
|
65
|
+
return /* @__PURE__ */ jsx(Context.Provider, { value, children });
|
|
66
|
+
};
|
|
67
|
+
Provider.displayName = rootComponentName + "Provider";
|
|
68
|
+
function useContext22(consumerName, scope) {
|
|
69
|
+
const Context = scope?.[scopeName]?.[index] || BaseContext;
|
|
70
|
+
const context = React2.useContext(Context);
|
|
71
|
+
if (context) return context;
|
|
72
|
+
if (defaultContext !== void 0) return defaultContext;
|
|
73
|
+
throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
|
|
74
|
+
}
|
|
75
|
+
return [Provider, useContext22];
|
|
76
|
+
}
|
|
77
|
+
const createScope = () => {
|
|
78
|
+
const scopeContexts = defaultContexts.map((defaultContext) => {
|
|
79
|
+
return React2.createContext(defaultContext);
|
|
80
|
+
});
|
|
81
|
+
return function useScope(scope) {
|
|
82
|
+
const contexts = scope?.[scopeName] || scopeContexts;
|
|
83
|
+
return React2.useMemo(
|
|
84
|
+
() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
|
|
85
|
+
[scope, contexts]
|
|
86
|
+
);
|
|
87
|
+
};
|
|
88
|
+
};
|
|
89
|
+
createScope.scopeName = scopeName;
|
|
90
|
+
return [createContext32, composeContextScopes(createScope, ...createContextScopeDeps)];
|
|
91
|
+
}
|
|
92
|
+
function composeContextScopes(...scopes) {
|
|
93
|
+
const baseScope = scopes[0];
|
|
94
|
+
if (scopes.length === 1) return baseScope;
|
|
95
|
+
const createScope = () => {
|
|
96
|
+
const scopeHooks = scopes.map((createScope2) => ({
|
|
97
|
+
useScope: createScope2(),
|
|
98
|
+
scopeName: createScope2.scopeName
|
|
99
|
+
}));
|
|
100
|
+
return function useComposedScopes(overrideScopes) {
|
|
101
|
+
const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
|
|
102
|
+
const scopeProps = useScope(overrideScopes);
|
|
103
|
+
const currentScope = scopeProps[`__scope${scopeName}`];
|
|
104
|
+
return { ...nextScopes2, ...currentScope };
|
|
105
|
+
}, {});
|
|
106
|
+
return React2.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
|
|
107
|
+
};
|
|
108
|
+
};
|
|
109
|
+
createScope.scopeName = baseScope.scopeName;
|
|
110
|
+
return createScope;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
// node_modules/@radix-ui/primitive/dist/index.mjs
|
|
114
|
+
function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
|
|
115
|
+
return function handleEvent(event) {
|
|
116
|
+
originalEventHandler?.(event);
|
|
117
|
+
if (checkForDefaultPrevented === false || !event.defaultPrevented) {
|
|
118
|
+
return ourEventHandler?.(event);
|
|
119
|
+
}
|
|
120
|
+
};
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
|
|
124
|
+
import * as React4 from "react";
|
|
125
|
+
|
|
126
|
+
// node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
|
|
127
|
+
import * as React3 from "react";
|
|
128
|
+
var useLayoutEffect2 = globalThis?.document ? React3.useLayoutEffect : () => {
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
// node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
|
|
132
|
+
import * as React22 from "react";
|
|
133
|
+
var useInsertionEffect = React4[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
|
|
134
|
+
function useControllableState({
|
|
135
|
+
prop,
|
|
136
|
+
defaultProp,
|
|
137
|
+
onChange = () => {
|
|
138
|
+
},
|
|
139
|
+
caller
|
|
140
|
+
}) {
|
|
141
|
+
const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
|
|
142
|
+
defaultProp,
|
|
143
|
+
onChange
|
|
144
|
+
});
|
|
145
|
+
const isControlled = prop !== void 0;
|
|
146
|
+
const value = isControlled ? prop : uncontrolledProp;
|
|
147
|
+
if (true) {
|
|
148
|
+
const isControlledRef = React4.useRef(prop !== void 0);
|
|
149
|
+
React4.useEffect(() => {
|
|
150
|
+
const wasControlled = isControlledRef.current;
|
|
151
|
+
if (wasControlled !== isControlled) {
|
|
152
|
+
const from = wasControlled ? "controlled" : "uncontrolled";
|
|
153
|
+
const to = isControlled ? "controlled" : "uncontrolled";
|
|
154
|
+
console.warn(
|
|
155
|
+
`${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
|
|
156
|
+
);
|
|
157
|
+
}
|
|
158
|
+
isControlledRef.current = isControlled;
|
|
159
|
+
}, [isControlled, caller]);
|
|
160
|
+
}
|
|
161
|
+
const setValue = React4.useCallback(
|
|
162
|
+
(nextValue) => {
|
|
163
|
+
if (isControlled) {
|
|
164
|
+
const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
|
|
165
|
+
if (value2 !== prop) {
|
|
166
|
+
onChangeRef.current?.(value2);
|
|
167
|
+
}
|
|
168
|
+
} else {
|
|
169
|
+
setUncontrolledProp(nextValue);
|
|
170
|
+
}
|
|
171
|
+
},
|
|
172
|
+
[isControlled, prop, setUncontrolledProp, onChangeRef]
|
|
173
|
+
);
|
|
174
|
+
return [value, setValue];
|
|
175
|
+
}
|
|
176
|
+
function useUncontrolledState({
|
|
177
|
+
defaultProp,
|
|
178
|
+
onChange
|
|
179
|
+
}) {
|
|
180
|
+
const [value, setValue] = React4.useState(defaultProp);
|
|
181
|
+
const prevValueRef = React4.useRef(value);
|
|
182
|
+
const onChangeRef = React4.useRef(onChange);
|
|
183
|
+
useInsertionEffect(() => {
|
|
184
|
+
onChangeRef.current = onChange;
|
|
185
|
+
}, [onChange]);
|
|
186
|
+
React4.useEffect(() => {
|
|
187
|
+
if (prevValueRef.current !== value) {
|
|
188
|
+
onChangeRef.current?.(value);
|
|
189
|
+
prevValueRef.current = value;
|
|
190
|
+
}
|
|
191
|
+
}, [value, prevValueRef]);
|
|
192
|
+
return [value, setValue, onChangeRef];
|
|
193
|
+
}
|
|
194
|
+
function isFunction(value) {
|
|
195
|
+
return typeof value === "function";
|
|
196
|
+
}
|
|
197
|
+
var SYNC_STATE = Symbol("RADIX:SYNC_STATE");
|
|
198
|
+
|
|
199
|
+
// node_modules/@radix-ui/react-use-previous/dist/index.mjs
|
|
200
|
+
import * as React5 from "react";
|
|
201
|
+
function usePrevious(value) {
|
|
202
|
+
const ref = React5.useRef({ value, previous: value });
|
|
203
|
+
return React5.useMemo(() => {
|
|
204
|
+
if (ref.current.value !== value) {
|
|
205
|
+
ref.current.previous = ref.current.value;
|
|
206
|
+
ref.current.value = value;
|
|
207
|
+
}
|
|
208
|
+
return ref.current.previous;
|
|
209
|
+
}, [value]);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
// node_modules/@radix-ui/react-use-size/dist/index.mjs
|
|
213
|
+
import * as React6 from "react";
|
|
214
|
+
function useSize(element) {
|
|
215
|
+
const [size, setSize] = React6.useState(void 0);
|
|
216
|
+
useLayoutEffect2(() => {
|
|
217
|
+
if (element) {
|
|
218
|
+
setSize({ width: element.offsetWidth, height: element.offsetHeight });
|
|
219
|
+
const resizeObserver = new ResizeObserver((entries) => {
|
|
220
|
+
if (!Array.isArray(entries)) {
|
|
221
|
+
return;
|
|
222
|
+
}
|
|
223
|
+
if (!entries.length) {
|
|
224
|
+
return;
|
|
225
|
+
}
|
|
226
|
+
const entry = entries[0];
|
|
227
|
+
let width;
|
|
228
|
+
let height;
|
|
229
|
+
if ("borderBoxSize" in entry) {
|
|
230
|
+
const borderSizeEntry = entry["borderBoxSize"];
|
|
231
|
+
const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
|
|
232
|
+
width = borderSize["inlineSize"];
|
|
233
|
+
height = borderSize["blockSize"];
|
|
234
|
+
} else {
|
|
235
|
+
width = element.offsetWidth;
|
|
236
|
+
height = element.offsetHeight;
|
|
237
|
+
}
|
|
238
|
+
setSize({ width, height });
|
|
239
|
+
});
|
|
240
|
+
resizeObserver.observe(element, { box: "border-box" });
|
|
241
|
+
return () => resizeObserver.unobserve(element);
|
|
242
|
+
} else {
|
|
243
|
+
setSize(void 0);
|
|
244
|
+
}
|
|
245
|
+
}, [element]);
|
|
246
|
+
return size;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
// node_modules/@radix-ui/react-presence/dist/index.mjs
|
|
250
|
+
import * as React23 from "react";
|
|
251
|
+
import * as React7 from "react";
|
|
252
|
+
function useStateMachine(initialState, machine) {
|
|
253
|
+
return React7.useReducer((state, event) => {
|
|
254
|
+
const nextState = machine[state][event];
|
|
255
|
+
return nextState ?? state;
|
|
256
|
+
}, initialState);
|
|
257
|
+
}
|
|
258
|
+
var Presence = (props) => {
|
|
259
|
+
const { present, children } = props;
|
|
260
|
+
const presence = usePresence(present);
|
|
261
|
+
const child = typeof children === "function" ? children({ present: presence.isPresent }) : React23.Children.only(children);
|
|
262
|
+
const ref = useComposedRefs(presence.ref, getElementRef(child));
|
|
263
|
+
const forceMount = typeof children === "function";
|
|
264
|
+
return forceMount || presence.isPresent ? React23.cloneElement(child, { ref }) : null;
|
|
265
|
+
};
|
|
266
|
+
Presence.displayName = "Presence";
|
|
267
|
+
function usePresence(present) {
|
|
268
|
+
const [node, setNode] = React23.useState();
|
|
269
|
+
const stylesRef = React23.useRef(null);
|
|
270
|
+
const prevPresentRef = React23.useRef(present);
|
|
271
|
+
const prevAnimationNameRef = React23.useRef("none");
|
|
272
|
+
const initialState = present ? "mounted" : "unmounted";
|
|
273
|
+
const [state, send] = useStateMachine(initialState, {
|
|
274
|
+
mounted: {
|
|
275
|
+
UNMOUNT: "unmounted",
|
|
276
|
+
ANIMATION_OUT: "unmountSuspended"
|
|
277
|
+
},
|
|
278
|
+
unmountSuspended: {
|
|
279
|
+
MOUNT: "mounted",
|
|
280
|
+
ANIMATION_END: "unmounted"
|
|
281
|
+
},
|
|
282
|
+
unmounted: {
|
|
283
|
+
MOUNT: "mounted"
|
|
284
|
+
}
|
|
285
|
+
});
|
|
286
|
+
React23.useEffect(() => {
|
|
287
|
+
const currentAnimationName = getAnimationName(stylesRef.current);
|
|
288
|
+
prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
|
|
289
|
+
}, [state]);
|
|
290
|
+
useLayoutEffect2(() => {
|
|
291
|
+
const styles = stylesRef.current;
|
|
292
|
+
const wasPresent = prevPresentRef.current;
|
|
293
|
+
const hasPresentChanged = wasPresent !== present;
|
|
294
|
+
if (hasPresentChanged) {
|
|
295
|
+
const prevAnimationName = prevAnimationNameRef.current;
|
|
296
|
+
const currentAnimationName = getAnimationName(styles);
|
|
297
|
+
if (present) {
|
|
298
|
+
send("MOUNT");
|
|
299
|
+
} else if (currentAnimationName === "none" || styles?.display === "none") {
|
|
300
|
+
send("UNMOUNT");
|
|
301
|
+
} else {
|
|
302
|
+
const isAnimating = prevAnimationName !== currentAnimationName;
|
|
303
|
+
if (wasPresent && isAnimating) {
|
|
304
|
+
send("ANIMATION_OUT");
|
|
305
|
+
} else {
|
|
306
|
+
send("UNMOUNT");
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
prevPresentRef.current = present;
|
|
310
|
+
}
|
|
311
|
+
}, [present, send]);
|
|
312
|
+
useLayoutEffect2(() => {
|
|
313
|
+
if (node) {
|
|
314
|
+
let timeoutId;
|
|
315
|
+
const ownerWindow = node.ownerDocument.defaultView ?? window;
|
|
316
|
+
const handleAnimationEnd = (event) => {
|
|
317
|
+
const currentAnimationName = getAnimationName(stylesRef.current);
|
|
318
|
+
const isCurrentAnimation = currentAnimationName.includes(event.animationName);
|
|
319
|
+
if (event.target === node && isCurrentAnimation) {
|
|
320
|
+
send("ANIMATION_END");
|
|
321
|
+
if (!prevPresentRef.current) {
|
|
322
|
+
const currentFillMode = node.style.animationFillMode;
|
|
323
|
+
node.style.animationFillMode = "forwards";
|
|
324
|
+
timeoutId = ownerWindow.setTimeout(() => {
|
|
325
|
+
if (node.style.animationFillMode === "forwards") {
|
|
326
|
+
node.style.animationFillMode = currentFillMode;
|
|
327
|
+
}
|
|
328
|
+
});
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
};
|
|
332
|
+
const handleAnimationStart = (event) => {
|
|
333
|
+
if (event.target === node) {
|
|
334
|
+
prevAnimationNameRef.current = getAnimationName(stylesRef.current);
|
|
335
|
+
}
|
|
336
|
+
};
|
|
337
|
+
node.addEventListener("animationstart", handleAnimationStart);
|
|
338
|
+
node.addEventListener("animationcancel", handleAnimationEnd);
|
|
339
|
+
node.addEventListener("animationend", handleAnimationEnd);
|
|
340
|
+
return () => {
|
|
341
|
+
ownerWindow.clearTimeout(timeoutId);
|
|
342
|
+
node.removeEventListener("animationstart", handleAnimationStart);
|
|
343
|
+
node.removeEventListener("animationcancel", handleAnimationEnd);
|
|
344
|
+
node.removeEventListener("animationend", handleAnimationEnd);
|
|
345
|
+
};
|
|
346
|
+
} else {
|
|
347
|
+
send("ANIMATION_END");
|
|
348
|
+
}
|
|
349
|
+
}, [node, send]);
|
|
350
|
+
return {
|
|
351
|
+
isPresent: ["mounted", "unmountSuspended"].includes(state),
|
|
352
|
+
ref: React23.useCallback((node2) => {
|
|
353
|
+
stylesRef.current = node2 ? getComputedStyle(node2) : null;
|
|
354
|
+
setNode(node2);
|
|
355
|
+
}, [])
|
|
356
|
+
};
|
|
357
|
+
}
|
|
358
|
+
function getAnimationName(styles) {
|
|
359
|
+
return styles?.animationName || "none";
|
|
360
|
+
}
|
|
361
|
+
function getElementRef(element) {
|
|
362
|
+
let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
|
|
363
|
+
let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
364
|
+
if (mayWarn) {
|
|
365
|
+
return element.ref;
|
|
366
|
+
}
|
|
367
|
+
getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
|
|
368
|
+
mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
369
|
+
if (mayWarn) {
|
|
370
|
+
return element.props.ref;
|
|
371
|
+
}
|
|
372
|
+
return element.props.ref || element.ref;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
// node_modules/@radix-ui/react-primitive/dist/index.mjs
|
|
376
|
+
import * as React9 from "react";
|
|
377
|
+
import * as ReactDOM from "react-dom";
|
|
378
|
+
|
|
379
|
+
// node_modules/@radix-ui/react-slot/dist/index.mjs
|
|
380
|
+
import * as React8 from "react";
|
|
381
|
+
import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
|
|
382
|
+
// @__NO_SIDE_EFFECTS__
|
|
383
|
+
function createSlot(ownerName) {
|
|
384
|
+
const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
|
|
385
|
+
const Slot2 = React8.forwardRef((props, forwardedRef) => {
|
|
386
|
+
const { children, ...slotProps } = props;
|
|
387
|
+
const childrenArray = React8.Children.toArray(children);
|
|
388
|
+
const slottable = childrenArray.find(isSlottable);
|
|
389
|
+
if (slottable) {
|
|
390
|
+
const newElement = slottable.props.children;
|
|
391
|
+
const newChildren = childrenArray.map((child) => {
|
|
392
|
+
if (child === slottable) {
|
|
393
|
+
if (React8.Children.count(newElement) > 1) return React8.Children.only(null);
|
|
394
|
+
return React8.isValidElement(newElement) ? newElement.props.children : null;
|
|
395
|
+
} else {
|
|
396
|
+
return child;
|
|
397
|
+
}
|
|
398
|
+
});
|
|
399
|
+
return /* @__PURE__ */ jsx2(SlotClone, { ...slotProps, ref: forwardedRef, children: React8.isValidElement(newElement) ? React8.cloneElement(newElement, void 0, newChildren) : null });
|
|
400
|
+
}
|
|
401
|
+
return /* @__PURE__ */ jsx2(SlotClone, { ...slotProps, ref: forwardedRef, children });
|
|
402
|
+
});
|
|
403
|
+
Slot2.displayName = `${ownerName}.Slot`;
|
|
404
|
+
return Slot2;
|
|
405
|
+
}
|
|
406
|
+
// @__NO_SIDE_EFFECTS__
|
|
407
|
+
function createSlotClone(ownerName) {
|
|
408
|
+
const SlotClone = React8.forwardRef((props, forwardedRef) => {
|
|
409
|
+
const { children, ...slotProps } = props;
|
|
410
|
+
if (React8.isValidElement(children)) {
|
|
411
|
+
const childrenRef = getElementRef2(children);
|
|
412
|
+
const props2 = mergeProps(slotProps, children.props);
|
|
413
|
+
if (children.type !== React8.Fragment) {
|
|
414
|
+
props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
|
|
415
|
+
}
|
|
416
|
+
return React8.cloneElement(children, props2);
|
|
417
|
+
}
|
|
418
|
+
return React8.Children.count(children) > 1 ? React8.Children.only(null) : null;
|
|
419
|
+
});
|
|
420
|
+
SlotClone.displayName = `${ownerName}.SlotClone`;
|
|
421
|
+
return SlotClone;
|
|
422
|
+
}
|
|
423
|
+
var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
|
|
424
|
+
function isSlottable(child) {
|
|
425
|
+
return React8.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
|
|
426
|
+
}
|
|
427
|
+
function mergeProps(slotProps, childProps) {
|
|
428
|
+
const overrideProps = { ...childProps };
|
|
429
|
+
for (const propName in childProps) {
|
|
430
|
+
const slotPropValue = slotProps[propName];
|
|
431
|
+
const childPropValue = childProps[propName];
|
|
432
|
+
const isHandler = /^on[A-Z]/.test(propName);
|
|
433
|
+
if (isHandler) {
|
|
434
|
+
if (slotPropValue && childPropValue) {
|
|
435
|
+
overrideProps[propName] = (...args) => {
|
|
436
|
+
const result = childPropValue(...args);
|
|
437
|
+
slotPropValue(...args);
|
|
438
|
+
return result;
|
|
439
|
+
};
|
|
440
|
+
} else if (slotPropValue) {
|
|
441
|
+
overrideProps[propName] = slotPropValue;
|
|
442
|
+
}
|
|
443
|
+
} else if (propName === "style") {
|
|
444
|
+
overrideProps[propName] = { ...slotPropValue, ...childPropValue };
|
|
445
|
+
} else if (propName === "className") {
|
|
446
|
+
overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
|
|
447
|
+
}
|
|
448
|
+
}
|
|
449
|
+
return { ...slotProps, ...overrideProps };
|
|
450
|
+
}
|
|
451
|
+
function getElementRef2(element) {
|
|
452
|
+
let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
|
|
453
|
+
let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
454
|
+
if (mayWarn) {
|
|
455
|
+
return element.ref;
|
|
456
|
+
}
|
|
457
|
+
getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
|
|
458
|
+
mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
459
|
+
if (mayWarn) {
|
|
460
|
+
return element.props.ref;
|
|
461
|
+
}
|
|
462
|
+
return element.props.ref || element.ref;
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
// node_modules/@radix-ui/react-primitive/dist/index.mjs
|
|
466
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
467
|
+
var NODES = [
|
|
468
|
+
"a",
|
|
469
|
+
"button",
|
|
470
|
+
"div",
|
|
471
|
+
"form",
|
|
472
|
+
"h2",
|
|
473
|
+
"h3",
|
|
474
|
+
"img",
|
|
475
|
+
"input",
|
|
476
|
+
"label",
|
|
477
|
+
"li",
|
|
478
|
+
"nav",
|
|
479
|
+
"ol",
|
|
480
|
+
"p",
|
|
481
|
+
"select",
|
|
482
|
+
"span",
|
|
483
|
+
"svg",
|
|
484
|
+
"ul"
|
|
485
|
+
];
|
|
486
|
+
var Primitive = NODES.reduce((primitive, node) => {
|
|
487
|
+
const Slot = createSlot(`Primitive.${node}`);
|
|
488
|
+
const Node2 = React9.forwardRef((props, forwardedRef) => {
|
|
489
|
+
const { asChild, ...primitiveProps } = props;
|
|
490
|
+
const Comp = asChild ? Slot : node;
|
|
491
|
+
if (typeof window !== "undefined") {
|
|
492
|
+
window[Symbol.for("radix-ui")] = true;
|
|
493
|
+
}
|
|
494
|
+
return /* @__PURE__ */ jsx3(Comp, { ...primitiveProps, ref: forwardedRef });
|
|
495
|
+
});
|
|
496
|
+
Node2.displayName = `Primitive.${node}`;
|
|
497
|
+
return { ...primitive, [node]: Node2 };
|
|
498
|
+
}, {});
|
|
499
|
+
|
|
500
|
+
// node_modules/@radix-ui/react-checkbox/dist/index.mjs
|
|
501
|
+
import { Fragment as Fragment3, jsx as jsx4, jsxs } from "react/jsx-runtime";
|
|
502
|
+
var CHECKBOX_NAME = "Checkbox";
|
|
503
|
+
var [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);
|
|
504
|
+
var [CheckboxProviderImpl, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
|
|
505
|
+
function CheckboxProvider(props) {
|
|
506
|
+
const {
|
|
507
|
+
__scopeCheckbox,
|
|
508
|
+
checked: checkedProp,
|
|
509
|
+
children,
|
|
510
|
+
defaultChecked,
|
|
511
|
+
disabled,
|
|
512
|
+
form,
|
|
513
|
+
name,
|
|
514
|
+
onCheckedChange,
|
|
515
|
+
required,
|
|
516
|
+
value = "on",
|
|
517
|
+
// @ts-expect-error
|
|
518
|
+
internal_do_not_use_render
|
|
519
|
+
} = props;
|
|
520
|
+
const [checked, setChecked] = useControllableState({
|
|
521
|
+
prop: checkedProp,
|
|
522
|
+
defaultProp: defaultChecked ?? false,
|
|
523
|
+
onChange: onCheckedChange,
|
|
524
|
+
caller: CHECKBOX_NAME
|
|
525
|
+
});
|
|
526
|
+
const [control, setControl] = React10.useState(null);
|
|
527
|
+
const [bubbleInput, setBubbleInput] = React10.useState(null);
|
|
528
|
+
const hasConsumerStoppedPropagationRef = React10.useRef(false);
|
|
529
|
+
const isFormControl = control ? !!form || !!control.closest("form") : (
|
|
530
|
+
// We set this to true by default so that events bubble to forms without JS (SSR)
|
|
531
|
+
true
|
|
532
|
+
);
|
|
533
|
+
const context = {
|
|
534
|
+
checked,
|
|
535
|
+
disabled,
|
|
536
|
+
setChecked,
|
|
537
|
+
control,
|
|
538
|
+
setControl,
|
|
539
|
+
name,
|
|
540
|
+
form,
|
|
541
|
+
value,
|
|
542
|
+
hasConsumerStoppedPropagationRef,
|
|
543
|
+
required,
|
|
544
|
+
defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked,
|
|
545
|
+
isFormControl,
|
|
546
|
+
bubbleInput,
|
|
547
|
+
setBubbleInput
|
|
548
|
+
};
|
|
549
|
+
return /* @__PURE__ */ jsx4(
|
|
550
|
+
CheckboxProviderImpl,
|
|
551
|
+
{
|
|
552
|
+
scope: __scopeCheckbox,
|
|
553
|
+
...context,
|
|
554
|
+
children: isFunction2(internal_do_not_use_render) ? internal_do_not_use_render(context) : children
|
|
555
|
+
}
|
|
556
|
+
);
|
|
557
|
+
}
|
|
558
|
+
var TRIGGER_NAME = "CheckboxTrigger";
|
|
559
|
+
var CheckboxTrigger = React10.forwardRef(
|
|
560
|
+
({ __scopeCheckbox, onKeyDown, onClick, ...checkboxProps }, forwardedRef) => {
|
|
561
|
+
const {
|
|
562
|
+
control,
|
|
563
|
+
value,
|
|
564
|
+
disabled,
|
|
565
|
+
checked,
|
|
566
|
+
required,
|
|
567
|
+
setControl,
|
|
568
|
+
setChecked,
|
|
569
|
+
hasConsumerStoppedPropagationRef,
|
|
570
|
+
isFormControl,
|
|
571
|
+
bubbleInput
|
|
572
|
+
} = useCheckboxContext(TRIGGER_NAME, __scopeCheckbox);
|
|
573
|
+
const composedRefs = useComposedRefs(forwardedRef, setControl);
|
|
574
|
+
const initialCheckedStateRef = React10.useRef(checked);
|
|
575
|
+
React10.useEffect(() => {
|
|
576
|
+
const form = control?.form;
|
|
577
|
+
if (form) {
|
|
578
|
+
const reset = () => setChecked(initialCheckedStateRef.current);
|
|
579
|
+
form.addEventListener("reset", reset);
|
|
580
|
+
return () => form.removeEventListener("reset", reset);
|
|
581
|
+
}
|
|
582
|
+
}, [control, setChecked]);
|
|
583
|
+
return /* @__PURE__ */ jsx4(
|
|
584
|
+
Primitive.button,
|
|
585
|
+
{
|
|
586
|
+
type: "button",
|
|
587
|
+
role: "checkbox",
|
|
588
|
+
"aria-checked": isIndeterminate(checked) ? "mixed" : checked,
|
|
589
|
+
"aria-required": required,
|
|
590
|
+
"data-state": getState(checked),
|
|
591
|
+
"data-disabled": disabled ? "" : void 0,
|
|
592
|
+
disabled,
|
|
593
|
+
value,
|
|
594
|
+
...checkboxProps,
|
|
595
|
+
ref: composedRefs,
|
|
596
|
+
onKeyDown: composeEventHandlers(onKeyDown, (event) => {
|
|
597
|
+
if (event.key === "Enter") event.preventDefault();
|
|
598
|
+
}),
|
|
599
|
+
onClick: composeEventHandlers(onClick, (event) => {
|
|
600
|
+
setChecked((prevChecked) => isIndeterminate(prevChecked) ? true : !prevChecked);
|
|
601
|
+
if (bubbleInput && isFormControl) {
|
|
602
|
+
hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
|
|
603
|
+
if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
|
|
604
|
+
}
|
|
605
|
+
})
|
|
606
|
+
}
|
|
607
|
+
);
|
|
608
|
+
}
|
|
609
|
+
);
|
|
610
|
+
CheckboxTrigger.displayName = TRIGGER_NAME;
|
|
611
|
+
var Checkbox = React10.forwardRef(
|
|
612
|
+
(props, forwardedRef) => {
|
|
613
|
+
const {
|
|
614
|
+
__scopeCheckbox,
|
|
615
|
+
name,
|
|
616
|
+
checked,
|
|
617
|
+
defaultChecked,
|
|
618
|
+
required,
|
|
619
|
+
disabled,
|
|
620
|
+
value,
|
|
621
|
+
onCheckedChange,
|
|
622
|
+
form,
|
|
623
|
+
...checkboxProps
|
|
624
|
+
} = props;
|
|
625
|
+
return /* @__PURE__ */ jsx4(
|
|
626
|
+
CheckboxProvider,
|
|
627
|
+
{
|
|
628
|
+
__scopeCheckbox,
|
|
629
|
+
checked,
|
|
630
|
+
defaultChecked,
|
|
631
|
+
disabled,
|
|
632
|
+
required,
|
|
633
|
+
onCheckedChange,
|
|
634
|
+
name,
|
|
635
|
+
form,
|
|
636
|
+
value,
|
|
637
|
+
internal_do_not_use_render: ({ isFormControl }) => /* @__PURE__ */ jsxs(Fragment3, { children: [
|
|
638
|
+
/* @__PURE__ */ jsx4(
|
|
639
|
+
CheckboxTrigger,
|
|
640
|
+
{
|
|
641
|
+
...checkboxProps,
|
|
642
|
+
ref: forwardedRef,
|
|
643
|
+
__scopeCheckbox
|
|
644
|
+
}
|
|
645
|
+
),
|
|
646
|
+
isFormControl && /* @__PURE__ */ jsx4(
|
|
647
|
+
CheckboxBubbleInput,
|
|
648
|
+
{
|
|
649
|
+
__scopeCheckbox
|
|
650
|
+
}
|
|
651
|
+
)
|
|
652
|
+
] })
|
|
653
|
+
}
|
|
654
|
+
);
|
|
655
|
+
}
|
|
656
|
+
);
|
|
657
|
+
Checkbox.displayName = CHECKBOX_NAME;
|
|
658
|
+
var INDICATOR_NAME = "CheckboxIndicator";
|
|
659
|
+
var CheckboxIndicator = React10.forwardRef(
|
|
660
|
+
(props, forwardedRef) => {
|
|
661
|
+
const { __scopeCheckbox, forceMount, ...indicatorProps } = props;
|
|
662
|
+
const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);
|
|
663
|
+
return /* @__PURE__ */ jsx4(
|
|
664
|
+
Presence,
|
|
665
|
+
{
|
|
666
|
+
present: forceMount || isIndeterminate(context.checked) || context.checked === true,
|
|
667
|
+
children: /* @__PURE__ */ jsx4(
|
|
668
|
+
Primitive.span,
|
|
669
|
+
{
|
|
670
|
+
"data-state": getState(context.checked),
|
|
671
|
+
"data-disabled": context.disabled ? "" : void 0,
|
|
672
|
+
...indicatorProps,
|
|
673
|
+
ref: forwardedRef,
|
|
674
|
+
style: { pointerEvents: "none", ...props.style }
|
|
675
|
+
}
|
|
676
|
+
)
|
|
677
|
+
}
|
|
678
|
+
);
|
|
679
|
+
}
|
|
680
|
+
);
|
|
681
|
+
CheckboxIndicator.displayName = INDICATOR_NAME;
|
|
682
|
+
var BUBBLE_INPUT_NAME = "CheckboxBubbleInput";
|
|
683
|
+
var CheckboxBubbleInput = React10.forwardRef(
|
|
684
|
+
({ __scopeCheckbox, ...props }, forwardedRef) => {
|
|
685
|
+
const {
|
|
686
|
+
control,
|
|
687
|
+
hasConsumerStoppedPropagationRef,
|
|
688
|
+
checked,
|
|
689
|
+
defaultChecked,
|
|
690
|
+
required,
|
|
691
|
+
disabled,
|
|
692
|
+
name,
|
|
693
|
+
value,
|
|
694
|
+
form,
|
|
695
|
+
bubbleInput,
|
|
696
|
+
setBubbleInput
|
|
697
|
+
} = useCheckboxContext(BUBBLE_INPUT_NAME, __scopeCheckbox);
|
|
698
|
+
const composedRefs = useComposedRefs(forwardedRef, setBubbleInput);
|
|
699
|
+
const prevChecked = usePrevious(checked);
|
|
700
|
+
const controlSize = useSize(control);
|
|
701
|
+
React10.useEffect(() => {
|
|
702
|
+
const input = bubbleInput;
|
|
703
|
+
if (!input) return;
|
|
704
|
+
const inputProto = window.HTMLInputElement.prototype;
|
|
705
|
+
const descriptor = Object.getOwnPropertyDescriptor(
|
|
706
|
+
inputProto,
|
|
707
|
+
"checked"
|
|
708
|
+
);
|
|
709
|
+
const setChecked = descriptor.set;
|
|
710
|
+
const bubbles = !hasConsumerStoppedPropagationRef.current;
|
|
711
|
+
if (prevChecked !== checked && setChecked) {
|
|
712
|
+
const event = new Event("click", { bubbles });
|
|
713
|
+
input.indeterminate = isIndeterminate(checked);
|
|
714
|
+
setChecked.call(input, isIndeterminate(checked) ? false : checked);
|
|
715
|
+
input.dispatchEvent(event);
|
|
716
|
+
}
|
|
717
|
+
}, [bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef]);
|
|
718
|
+
const defaultCheckedRef = React10.useRef(isIndeterminate(checked) ? false : checked);
|
|
719
|
+
return /* @__PURE__ */ jsx4(
|
|
720
|
+
Primitive.input,
|
|
721
|
+
{
|
|
722
|
+
type: "checkbox",
|
|
723
|
+
"aria-hidden": true,
|
|
724
|
+
defaultChecked: defaultChecked ?? defaultCheckedRef.current,
|
|
725
|
+
required,
|
|
726
|
+
disabled,
|
|
727
|
+
name,
|
|
728
|
+
value,
|
|
729
|
+
form,
|
|
730
|
+
...props,
|
|
731
|
+
tabIndex: -1,
|
|
732
|
+
ref: composedRefs,
|
|
733
|
+
style: {
|
|
734
|
+
...props.style,
|
|
735
|
+
...controlSize,
|
|
736
|
+
position: "absolute",
|
|
737
|
+
pointerEvents: "none",
|
|
738
|
+
opacity: 0,
|
|
739
|
+
margin: 0,
|
|
740
|
+
// We transform because the input is absolutely positioned but we have
|
|
741
|
+
// rendered it **after** the button. This pulls it back to sit on top
|
|
742
|
+
// of the button.
|
|
743
|
+
transform: "translateX(-100%)"
|
|
744
|
+
}
|
|
745
|
+
}
|
|
746
|
+
);
|
|
747
|
+
}
|
|
748
|
+
);
|
|
749
|
+
CheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME;
|
|
750
|
+
function isFunction2(value) {
|
|
751
|
+
return typeof value === "function";
|
|
752
|
+
}
|
|
753
|
+
function isIndeterminate(checked) {
|
|
754
|
+
return checked === "indeterminate";
|
|
755
|
+
}
|
|
756
|
+
function getState(checked) {
|
|
757
|
+
return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
|
|
758
|
+
}
|
|
759
|
+
|
|
760
|
+
// src/components/user-action/Checkbox.tsx
|
|
761
|
+
import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
762
|
+
var checkboxSizeMapping = {
|
|
763
|
+
sm: "size-5 border-1",
|
|
764
|
+
md: "size-6 border-1",
|
|
765
|
+
lg: "size-8 border-2"
|
|
766
|
+
};
|
|
767
|
+
var checkboxIconSizeMapping = {
|
|
768
|
+
sm: "size-4 stroke-3",
|
|
769
|
+
md: "size-5 stroke-3",
|
|
770
|
+
lg: "size-7 stroke-3"
|
|
771
|
+
};
|
|
772
|
+
var Checkbox2 = ({
|
|
773
|
+
disabled,
|
|
774
|
+
checked = false,
|
|
775
|
+
indeterminate = false,
|
|
776
|
+
onChange,
|
|
777
|
+
size = "md",
|
|
778
|
+
className = "",
|
|
779
|
+
...props
|
|
780
|
+
}) => {
|
|
781
|
+
const usedSizeClass = checkboxSizeMapping[size];
|
|
782
|
+
const innerIconSize = checkboxIconSizeMapping[size];
|
|
783
|
+
return /* @__PURE__ */ jsx5(
|
|
784
|
+
Checkbox,
|
|
785
|
+
{
|
|
786
|
+
...props,
|
|
787
|
+
disabled,
|
|
788
|
+
checked: indeterminate ? "indeterminate" : checked,
|
|
789
|
+
onCheckedChange: onChange,
|
|
790
|
+
className: clsx(
|
|
791
|
+
usedSizeClass,
|
|
792
|
+
`flex-col-0 items-center justify-center rounded outline-none`,
|
|
793
|
+
{
|
|
794
|
+
"text-disabled-text border-disabled-outline bg-disabled-background cursor-not-allowed": disabled,
|
|
795
|
+
"hover:border-primary": !disabled,
|
|
796
|
+
"bg-input-background": !disabled && !checked,
|
|
797
|
+
"bg-primary/30 border-primary text-primary": !disabled && (checked || indeterminate)
|
|
798
|
+
},
|
|
799
|
+
className
|
|
800
|
+
),
|
|
801
|
+
children: /* @__PURE__ */ jsxs2(CheckboxIndicator, { children: [
|
|
802
|
+
!checked && !indeterminate && /* @__PURE__ */ jsx5("div", { className: clsx("bg-input-background", innerIconSize) }),
|
|
803
|
+
checked && !indeterminate && /* @__PURE__ */ jsx5(Check, { className: innerIconSize }),
|
|
804
|
+
indeterminate && /* @__PURE__ */ jsx5(Minus, { className: innerIconSize })
|
|
805
|
+
] })
|
|
806
|
+
}
|
|
807
|
+
);
|
|
808
|
+
};
|
|
809
|
+
|
|
810
|
+
// src/localization/LanguageProvider.tsx
|
|
811
|
+
import { createContext as createContext2, useContext as useContext2, useEffect as useEffect6, useState as useState7 } from "react";
|
|
812
|
+
|
|
813
|
+
// src/hooks/useLocalStorage.ts
|
|
814
|
+
import { useCallback as useCallback4, useState as useState6 } from "react";
|
|
815
|
+
|
|
816
|
+
// src/localization/util.ts
|
|
817
|
+
var languages = ["en", "de"];
|
|
818
|
+
var languagesLocalNames = {
|
|
819
|
+
en: "English",
|
|
820
|
+
de: "Deutsch"
|
|
821
|
+
};
|
|
822
|
+
var DEFAULT_LANGUAGE = "en";
|
|
823
|
+
var LanguageUtil = {
|
|
824
|
+
languages,
|
|
825
|
+
DEFAULT_LANGUAGE,
|
|
826
|
+
languagesLocalNames
|
|
827
|
+
};
|
|
828
|
+
|
|
829
|
+
// src/localization/LanguageProvider.tsx
|
|
830
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
831
|
+
var LanguageContext = createContext2({
|
|
832
|
+
language: LanguageUtil.DEFAULT_LANGUAGE,
|
|
833
|
+
setLanguage: (v) => v
|
|
834
|
+
});
|
|
835
|
+
var useLanguage = () => useContext2(LanguageContext);
|
|
836
|
+
|
|
837
|
+
// src/localization/useTranslation.ts
|
|
838
|
+
var TranslationPluralCount = {
|
|
839
|
+
zero: 0,
|
|
840
|
+
one: 1,
|
|
841
|
+
two: 2,
|
|
842
|
+
few: 3,
|
|
843
|
+
many: 11,
|
|
844
|
+
other: -1
|
|
845
|
+
};
|
|
846
|
+
var useTranslation = (translations, overwriteTranslation = {}) => {
|
|
847
|
+
const { language: languageProp, translation: overwrite } = overwriteTranslation;
|
|
848
|
+
const { language: inferredLanguage } = useLanguage();
|
|
849
|
+
const usedLanguage = languageProp ?? inferredLanguage;
|
|
850
|
+
const usedTranslations = [...translations];
|
|
851
|
+
if (overwrite) {
|
|
852
|
+
usedTranslations.push(overwrite);
|
|
853
|
+
}
|
|
854
|
+
return (key, options) => {
|
|
855
|
+
const { count, replacements } = { ...{ count: 0, replacements: {} }, ...options };
|
|
856
|
+
try {
|
|
857
|
+
for (let i = translations.length - 1; i >= 0; i--) {
|
|
858
|
+
const translation = translations[i];
|
|
859
|
+
const localizedTranslation = translation[usedLanguage];
|
|
860
|
+
if (!localizedTranslation) {
|
|
861
|
+
continue;
|
|
862
|
+
}
|
|
863
|
+
const value = localizedTranslation[key];
|
|
864
|
+
if (!value) {
|
|
865
|
+
continue;
|
|
866
|
+
}
|
|
867
|
+
let forProcessing;
|
|
868
|
+
if (typeof value !== "string") {
|
|
869
|
+
if (count === TranslationPluralCount.zero && value?.zero) {
|
|
870
|
+
forProcessing = value.zero;
|
|
871
|
+
} else if (count === TranslationPluralCount.one && value?.one) {
|
|
872
|
+
forProcessing = value.one;
|
|
873
|
+
} else if (count === TranslationPluralCount.two && value?.two) {
|
|
874
|
+
forProcessing = value.two;
|
|
875
|
+
} else if (TranslationPluralCount.few <= count && count < TranslationPluralCount.many && value?.few) {
|
|
876
|
+
forProcessing = value.few;
|
|
877
|
+
} else if (count > TranslationPluralCount.many && value?.many) {
|
|
878
|
+
forProcessing = value.many;
|
|
879
|
+
} else {
|
|
880
|
+
forProcessing = value.other;
|
|
881
|
+
}
|
|
882
|
+
} else {
|
|
883
|
+
forProcessing = value;
|
|
884
|
+
}
|
|
885
|
+
forProcessing = forProcessing.replace(/\{\{(\w+)}}/g, (_, placeholder) => {
|
|
886
|
+
return replacements[placeholder] ?? `{{key:${placeholder}}}`;
|
|
887
|
+
});
|
|
888
|
+
return forProcessing;
|
|
889
|
+
}
|
|
890
|
+
} catch (e) {
|
|
891
|
+
console.error(e);
|
|
892
|
+
}
|
|
893
|
+
return `{{${usedLanguage}:${key}}}`;
|
|
894
|
+
};
|
|
895
|
+
};
|
|
896
|
+
|
|
897
|
+
// src/components/properties/PropertyBase.tsx
|
|
898
|
+
import { AlertTriangle } from "lucide-react";
|
|
899
|
+
import clsx3 from "clsx";
|
|
900
|
+
|
|
901
|
+
// src/components/user-action/Button.tsx
|
|
902
|
+
import { forwardRef as forwardRef4 } from "react";
|
|
903
|
+
import clsx2 from "clsx";
|
|
904
|
+
import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
905
|
+
var ButtonColorUtil = {
|
|
906
|
+
solid: ["primary", "secondary", "tertiary", "positive", "warning", "negative", "neutral"],
|
|
907
|
+
text: ["primary", "negative", "neutral"],
|
|
908
|
+
outline: ["primary"]
|
|
909
|
+
};
|
|
910
|
+
var IconButtonUtil = {
|
|
911
|
+
icon: [...ButtonColorUtil.solid, "transparent"]
|
|
912
|
+
};
|
|
913
|
+
var paddingMapping = {
|
|
914
|
+
small: "btn-sm",
|
|
915
|
+
medium: "btn-md",
|
|
916
|
+
large: "btn-lg"
|
|
917
|
+
};
|
|
918
|
+
var iconPaddingMapping = {
|
|
919
|
+
tiny: "icon-btn-xs",
|
|
920
|
+
small: "icon-btn-sm",
|
|
921
|
+
medium: "icon-btn-md",
|
|
922
|
+
large: "icon-btn-lg"
|
|
923
|
+
};
|
|
924
|
+
var ButtonUtil = {
|
|
925
|
+
paddingMapping,
|
|
926
|
+
iconPaddingMapping
|
|
927
|
+
};
|
|
928
|
+
var SolidButton = forwardRef4(function SolidButton2({
|
|
929
|
+
children,
|
|
930
|
+
color = "primary",
|
|
931
|
+
size = "medium",
|
|
932
|
+
startIcon,
|
|
933
|
+
endIcon,
|
|
934
|
+
onClick,
|
|
935
|
+
className,
|
|
936
|
+
...restProps
|
|
937
|
+
}, ref) {
|
|
938
|
+
const colorClasses = {
|
|
939
|
+
primary: "not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text",
|
|
940
|
+
secondary: "not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text",
|
|
941
|
+
tertiary: "not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text",
|
|
942
|
+
positive: "not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text",
|
|
943
|
+
warning: "not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text",
|
|
944
|
+
negative: "not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text",
|
|
945
|
+
neutral: "not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text"
|
|
946
|
+
}[color];
|
|
947
|
+
const iconColorClasses = {
|
|
948
|
+
primary: "not-group-disabled:text-button-solid-primary-icon",
|
|
949
|
+
secondary: "not-group-disabled:text-button-solid-secondary-icon",
|
|
950
|
+
tertiary: "not-group-disabled:text-button-solid-tertiary-icon",
|
|
951
|
+
positive: "not-group-disabled:text-button-solid-positive-icon",
|
|
952
|
+
warning: "not-group-disabled:text-button-solid-warning-icon",
|
|
953
|
+
negative: "not-group-disabled:text-button-solid-negative-icon",
|
|
954
|
+
neutral: "not-group-disabled:text-button-solid-neutral-icon"
|
|
955
|
+
}[color];
|
|
956
|
+
return /* @__PURE__ */ jsxs3(
|
|
957
|
+
"button",
|
|
958
|
+
{
|
|
959
|
+
ref,
|
|
960
|
+
onClick,
|
|
961
|
+
className: clsx2(
|
|
962
|
+
"group font-semibold",
|
|
963
|
+
colorClasses,
|
|
964
|
+
"not-disabled:hover:brightness-90",
|
|
965
|
+
"disabled:text-disabled-text disabled:bg-disabled-background",
|
|
966
|
+
ButtonUtil.paddingMapping[size],
|
|
967
|
+
className
|
|
968
|
+
),
|
|
969
|
+
...restProps,
|
|
970
|
+
children: [
|
|
971
|
+
startIcon && /* @__PURE__ */ jsx7(
|
|
972
|
+
"span",
|
|
973
|
+
{
|
|
974
|
+
className: clsx2(
|
|
975
|
+
iconColorClasses,
|
|
976
|
+
"group-disabled:text-disabled-icon"
|
|
977
|
+
),
|
|
978
|
+
children: startIcon
|
|
979
|
+
}
|
|
980
|
+
),
|
|
981
|
+
children,
|
|
982
|
+
endIcon && /* @__PURE__ */ jsx7(
|
|
983
|
+
"span",
|
|
984
|
+
{
|
|
985
|
+
className: clsx2(
|
|
986
|
+
iconColorClasses,
|
|
987
|
+
"group-disabled:text-disabled-icon"
|
|
988
|
+
),
|
|
989
|
+
children: endIcon
|
|
990
|
+
}
|
|
991
|
+
)
|
|
992
|
+
]
|
|
993
|
+
}
|
|
994
|
+
);
|
|
995
|
+
});
|
|
996
|
+
var TextButton = ({
|
|
997
|
+
children,
|
|
998
|
+
color = "neutral",
|
|
999
|
+
size = "medium",
|
|
1000
|
+
startIcon,
|
|
1001
|
+
endIcon,
|
|
1002
|
+
onClick,
|
|
1003
|
+
coloredHoverBackground = true,
|
|
1004
|
+
className,
|
|
1005
|
+
...restProps
|
|
1006
|
+
}) => {
|
|
1007
|
+
const colorClasses = {
|
|
1008
|
+
primary: "not-disabled:bg-transparent not-disabled:text-button-text-primary-text focus-style-none focus-visible:ring-2 not-disabled:focus-visible:ring-button-text-primary-text",
|
|
1009
|
+
negative: "not-disabled:bg-transparent not-disabled:text-button-text-negative-text focus-style-none focus-visible:ring-2 not-disabled:focus-visible:ring-button-text-negative-text",
|
|
1010
|
+
neutral: "not-disabled:bg-transparent not-disabled:text-button-text-neutral-text focus-style-none focus-visible:ring-2 not-disabled:focus-visible:ring-button-text-neutral-text"
|
|
1011
|
+
}[color];
|
|
1012
|
+
const backgroundColor = {
|
|
1013
|
+
primary: "not-disabled:hover:bg-button-text-primary-text/20 not-disabled:focus-visible:bg-button-text-primary-text/20",
|
|
1014
|
+
negative: "not-disabled:hover:bg-button-text-negative-text/20 not-disabled:focus-visible:bg-button-text-negative-text/20",
|
|
1015
|
+
neutral: "not-disabled:hover:bg-button-text-neutral-text/20 not-disabled:focus-visible:bg-button-text-neutral-text/20"
|
|
1016
|
+
}[color];
|
|
1017
|
+
const iconColorClasses = {
|
|
1018
|
+
primary: "not-group-disabled:text-button-text-primary-icon",
|
|
1019
|
+
negative: "not-group-disabled:text-button-text-negative-icon",
|
|
1020
|
+
neutral: "not-group-disabled:text-button-text-neutral-icon"
|
|
1021
|
+
}[color];
|
|
1022
|
+
return /* @__PURE__ */ jsxs3(
|
|
1023
|
+
"button",
|
|
1024
|
+
{
|
|
1025
|
+
onClick,
|
|
1026
|
+
className: clsx2(
|
|
1027
|
+
"group font-semibold",
|
|
1028
|
+
"disabled:text-disabled-text",
|
|
1029
|
+
colorClasses,
|
|
1030
|
+
{
|
|
1031
|
+
[backgroundColor]: coloredHoverBackground,
|
|
1032
|
+
"not-disabled:hover:bg-button-text-hover-background": !coloredHoverBackground
|
|
1033
|
+
},
|
|
1034
|
+
ButtonUtil.paddingMapping[size],
|
|
1035
|
+
className
|
|
1036
|
+
),
|
|
1037
|
+
...restProps,
|
|
1038
|
+
children: [
|
|
1039
|
+
startIcon && /* @__PURE__ */ jsx7(
|
|
1040
|
+
"span",
|
|
1041
|
+
{
|
|
1042
|
+
className: clsx2(
|
|
1043
|
+
iconColorClasses,
|
|
1044
|
+
"group-disabled:text-disabled-icon"
|
|
1045
|
+
),
|
|
1046
|
+
children: startIcon
|
|
1047
|
+
}
|
|
1048
|
+
),
|
|
1049
|
+
children,
|
|
1050
|
+
endIcon && /* @__PURE__ */ jsx7(
|
|
1051
|
+
"span",
|
|
1052
|
+
{
|
|
1053
|
+
className: clsx2(
|
|
1054
|
+
iconColorClasses,
|
|
1055
|
+
"group-disabled:text-disabled-icon"
|
|
1056
|
+
),
|
|
1057
|
+
children: endIcon
|
|
1058
|
+
}
|
|
1059
|
+
)
|
|
1060
|
+
]
|
|
1061
|
+
}
|
|
1062
|
+
);
|
|
1063
|
+
};
|
|
1064
|
+
var IconButton = forwardRef4(function IconButton2({
|
|
1065
|
+
children,
|
|
1066
|
+
color = "primary",
|
|
1067
|
+
size = "medium",
|
|
1068
|
+
className,
|
|
1069
|
+
...restProps
|
|
1070
|
+
}, ref) {
|
|
1071
|
+
const colorClasses = {
|
|
1072
|
+
primary: "not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text",
|
|
1073
|
+
secondary: "not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text",
|
|
1074
|
+
tertiary: "not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text",
|
|
1075
|
+
positive: "not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text",
|
|
1076
|
+
warning: "not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text",
|
|
1077
|
+
negative: "not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text",
|
|
1078
|
+
neutral: "not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text",
|
|
1079
|
+
transparent: "not-disabled:bg-transparent"
|
|
1080
|
+
}[color];
|
|
1081
|
+
return /* @__PURE__ */ jsx7(
|
|
1082
|
+
"button",
|
|
1083
|
+
{
|
|
1084
|
+
ref,
|
|
1085
|
+
className: clsx2(
|
|
1086
|
+
colorClasses,
|
|
1087
|
+
"not-disabled:hover:brightness-90",
|
|
1088
|
+
"disabled:text-disabled-text",
|
|
1089
|
+
{
|
|
1090
|
+
"disabled:bg-disabled-background": color !== "transparent",
|
|
1091
|
+
"disabled:opacity-70": color === "transparent",
|
|
1092
|
+
"not-disabled:hover:bg-button-text-hover-background": color === "transparent"
|
|
1093
|
+
},
|
|
1094
|
+
ButtonUtil.iconPaddingMapping[size],
|
|
1095
|
+
className
|
|
1096
|
+
),
|
|
1097
|
+
...restProps,
|
|
1098
|
+
children
|
|
1099
|
+
}
|
|
1100
|
+
);
|
|
1101
|
+
});
|
|
1102
|
+
|
|
1103
|
+
// src/localization/defaults/form.ts
|
|
1104
|
+
var formTranslation = {
|
|
1105
|
+
en: {
|
|
1106
|
+
add: "Add",
|
|
1107
|
+
all: "All",
|
|
1108
|
+
apply: "Apply",
|
|
1109
|
+
back: "Back",
|
|
1110
|
+
cancel: "Cancel",
|
|
1111
|
+
change: "Change",
|
|
1112
|
+
clear: "Clear",
|
|
1113
|
+
click: "Click",
|
|
1114
|
+
clickToCopy: "Click to Copy",
|
|
1115
|
+
close: "Close",
|
|
1116
|
+
confirm: "Confirm",
|
|
1117
|
+
copy: "Copy",
|
|
1118
|
+
copied: "Copied",
|
|
1119
|
+
create: "Create",
|
|
1120
|
+
decline: "Decline",
|
|
1121
|
+
delete: "Delete",
|
|
1122
|
+
discard: "Discard",
|
|
1123
|
+
discardChanges: "Discard Changes",
|
|
1124
|
+
done: "Done",
|
|
1125
|
+
edit: "Edit",
|
|
1126
|
+
enterText: "Enter text here",
|
|
1127
|
+
error: "Error",
|
|
1128
|
+
exit: "Exit",
|
|
1129
|
+
fieldRequiredError: "This field is required.",
|
|
1130
|
+
invalidEmailError: "Please enter a valid email address.",
|
|
1131
|
+
less: "Less",
|
|
1132
|
+
loading: "Loading",
|
|
1133
|
+
maxLengthError: "Maximum length exceeded.",
|
|
1134
|
+
minLengthError: "Minimum length not met.",
|
|
1135
|
+
more: "More",
|
|
1136
|
+
next: "Next",
|
|
1137
|
+
no: "No",
|
|
1138
|
+
none: "None",
|
|
1139
|
+
nothingFound: "Nothing found",
|
|
1140
|
+
of: "of",
|
|
1141
|
+
optional: "Optional",
|
|
1142
|
+
pleaseWait: "Please wait...",
|
|
1143
|
+
previous: "Previous",
|
|
1144
|
+
remove: "Remove",
|
|
1145
|
+
required: "Required",
|
|
1146
|
+
reset: "Reset",
|
|
1147
|
+
save: "Save",
|
|
1148
|
+
saved: "Saved",
|
|
1149
|
+
search: "Search",
|
|
1150
|
+
select: "Select",
|
|
1151
|
+
selectOption: "Select an option",
|
|
1152
|
+
show: "Show",
|
|
1153
|
+
showMore: "Show more",
|
|
1154
|
+
showLess: "Show less",
|
|
1155
|
+
submit: "Submit",
|
|
1156
|
+
success: "Success",
|
|
1157
|
+
update: "Update",
|
|
1158
|
+
unsavedChanges: "Unsaved Changes",
|
|
1159
|
+
unsavedChangesSaveQuestion: "Do you want to save your changes?",
|
|
1160
|
+
yes: "Yes"
|
|
1161
|
+
},
|
|
1162
|
+
de: {
|
|
1163
|
+
add: "Hinzuf\xFCgen",
|
|
1164
|
+
all: "Alle",
|
|
1165
|
+
apply: "Anwenden",
|
|
1166
|
+
back: "Zur\xFCck",
|
|
1167
|
+
cancel: "Abbrechen",
|
|
1168
|
+
change: "\xC4ndern",
|
|
1169
|
+
clear: "L\xF6schen",
|
|
1170
|
+
click: "Klicken",
|
|
1171
|
+
clickToCopy: "Zum kopieren klicken",
|
|
1172
|
+
close: "Schlie\xDFen",
|
|
1173
|
+
confirm: "Best\xE4tigen",
|
|
1174
|
+
copy: "Kopieren",
|
|
1175
|
+
copied: "Kopiert",
|
|
1176
|
+
create: "Erstellen",
|
|
1177
|
+
decline: "Ablehnen",
|
|
1178
|
+
delete: "L\xF6schen",
|
|
1179
|
+
discard: "Verwerfen",
|
|
1180
|
+
discardChanges: "\xC4nderungen Verwerfen",
|
|
1181
|
+
done: "Fertig",
|
|
1182
|
+
edit: "Bearbeiten",
|
|
1183
|
+
enterText: "Text hier eingeben",
|
|
1184
|
+
error: "Fehler",
|
|
1185
|
+
exit: "Beenden",
|
|
1186
|
+
fieldRequiredError: "Dieses Feld ist erforderlich.",
|
|
1187
|
+
invalidEmailError: "Bitte geben Sie eine g\xFCltige E-Mail-Adresse ein.",
|
|
1188
|
+
less: "Weniger",
|
|
1189
|
+
loading: "L\xE4dt",
|
|
1190
|
+
maxLengthError: "Maximale L\xE4nge \xFCberschritten.",
|
|
1191
|
+
minLengthError: "Mindestl\xE4nge nicht erreicht.",
|
|
1192
|
+
more: "Mehr",
|
|
1193
|
+
next: "Weiter",
|
|
1194
|
+
no: "Nein",
|
|
1195
|
+
none: "Nichts",
|
|
1196
|
+
nothingFound: "Nichts gefunden",
|
|
1197
|
+
of: "von",
|
|
1198
|
+
optional: "Optional",
|
|
1199
|
+
pleaseWait: "Bitte warten...",
|
|
1200
|
+
previous: "Vorherige",
|
|
1201
|
+
remove: "Entfernen",
|
|
1202
|
+
required: "Erforderlich",
|
|
1203
|
+
reset: "Zur\xFCcksetzen",
|
|
1204
|
+
save: "Speichern",
|
|
1205
|
+
saved: "Gespeichert",
|
|
1206
|
+
search: "Suche",
|
|
1207
|
+
select: "Select",
|
|
1208
|
+
selectOption: "Option ausw\xE4hlen",
|
|
1209
|
+
show: "Anzeigen",
|
|
1210
|
+
showMore: "Mehr anzeigen",
|
|
1211
|
+
showLess: "Weniger anzeigen",
|
|
1212
|
+
submit: "Abschicken",
|
|
1213
|
+
success: "Erfolg",
|
|
1214
|
+
update: "Update",
|
|
1215
|
+
unsavedChanges: "Ungespeicherte \xC4nderungen",
|
|
1216
|
+
unsavedChangesSaveQuestion: "M\xF6chtest du die \xC4nderungen speichern?",
|
|
1217
|
+
yes: "Ja"
|
|
1218
|
+
}
|
|
1219
|
+
};
|
|
1220
|
+
|
|
1221
|
+
// src/components/properties/PropertyBase.tsx
|
|
1222
|
+
import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
1223
|
+
var PropertyBase = ({
|
|
1224
|
+
overwriteTranslation,
|
|
1225
|
+
name,
|
|
1226
|
+
input,
|
|
1227
|
+
softRequired = false,
|
|
1228
|
+
hasValue,
|
|
1229
|
+
icon,
|
|
1230
|
+
readOnly,
|
|
1231
|
+
onRemove,
|
|
1232
|
+
className = ""
|
|
1233
|
+
}) => {
|
|
1234
|
+
const translation = useTranslation([formTranslation], overwriteTranslation);
|
|
1235
|
+
const requiredAndNoValue = softRequired && !hasValue;
|
|
1236
|
+
return /* @__PURE__ */ jsxs4("div", { className: clsx3("flex-row-0 group", className), children: [
|
|
1237
|
+
/* @__PURE__ */ jsxs4(
|
|
1238
|
+
"div",
|
|
1239
|
+
{
|
|
1240
|
+
className: clsx3(
|
|
1241
|
+
"flex-row-2 max-w-48 min-w-48 px-3 py-2 items-center rounded-l-xl border-2 border-r-0",
|
|
1242
|
+
{
|
|
1243
|
+
"bg-property-title-background text-property-title-text group-hover:border-primary": !requiredAndNoValue,
|
|
1244
|
+
"bg-warning text-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
|
|
1245
|
+
},
|
|
1246
|
+
className
|
|
1247
|
+
),
|
|
1248
|
+
children: [
|
|
1249
|
+
/* @__PURE__ */ jsx8("div", { className: "max-w-6 min-w-6 text-text-primary", children: icon }),
|
|
1250
|
+
/* @__PURE__ */ jsx8("span", { className: "font-semibold", children: name })
|
|
1251
|
+
]
|
|
1252
|
+
}
|
|
1253
|
+
),
|
|
1254
|
+
/* @__PURE__ */ jsxs4(
|
|
1255
|
+
"div",
|
|
1256
|
+
{
|
|
1257
|
+
className: clsx3(
|
|
1258
|
+
"flex-row-2 grow px-3 py-2 justify-between items-center rounded-r-xl border-2 border-l-0 min-h-15",
|
|
1259
|
+
{
|
|
1260
|
+
"bg-input-background text-input-text group-hover:border-primary": !requiredAndNoValue,
|
|
1261
|
+
"bg-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
|
|
1262
|
+
},
|
|
1263
|
+
className
|
|
1264
|
+
),
|
|
1265
|
+
children: [
|
|
1266
|
+
input({ softRequired, hasValue }),
|
|
1267
|
+
requiredAndNoValue && /* @__PURE__ */ jsx8("div", { className: "text-warning", children: /* @__PURE__ */ jsx8(AlertTriangle, { size: 24 }) }),
|
|
1268
|
+
onRemove && !readOnly && /* @__PURE__ */ jsx8(
|
|
1269
|
+
TextButton,
|
|
1270
|
+
{
|
|
1271
|
+
onClick: onRemove,
|
|
1272
|
+
color: "negative",
|
|
1273
|
+
className: clsx3("items-center"),
|
|
1274
|
+
disabled: !hasValue,
|
|
1275
|
+
children: translation("remove")
|
|
1276
|
+
}
|
|
1277
|
+
)
|
|
1278
|
+
]
|
|
1279
|
+
}
|
|
1280
|
+
)
|
|
1281
|
+
] });
|
|
1282
|
+
};
|
|
1283
|
+
|
|
1284
|
+
// src/components/properties/CheckboxProperty.tsx
|
|
1285
|
+
import { useId } from "react";
|
|
1286
|
+
|
|
1287
|
+
// src/components/user-action/Label.tsx
|
|
1288
|
+
import clsx4 from "clsx";
|
|
1289
|
+
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
1290
|
+
var styleMapping = {
|
|
1291
|
+
sm: "typography-label-xs color-label-text",
|
|
1292
|
+
md: "typography-label-md color-label-text"
|
|
1293
|
+
};
|
|
1294
|
+
var Label = ({
|
|
1295
|
+
children,
|
|
1296
|
+
size = "md",
|
|
1297
|
+
className,
|
|
1298
|
+
...props
|
|
1299
|
+
}) => {
|
|
1300
|
+
return /* @__PURE__ */ jsx9("label", { ...props, className: clsx4(styleMapping[size], className), children });
|
|
1301
|
+
};
|
|
1302
|
+
|
|
1303
|
+
// src/components/properties/CheckboxProperty.tsx
|
|
1304
|
+
import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
1305
|
+
var CheckboxProperty = ({
|
|
1306
|
+
overwriteTranslation,
|
|
1307
|
+
value,
|
|
1308
|
+
onChange = noop,
|
|
1309
|
+
readOnly,
|
|
1310
|
+
...baseProps
|
|
1311
|
+
}) => {
|
|
1312
|
+
const translation = useTranslation([formTranslation], overwriteTranslation);
|
|
1313
|
+
const id = useId();
|
|
1314
|
+
return /* @__PURE__ */ jsx10(
|
|
1315
|
+
PropertyBase,
|
|
1316
|
+
{
|
|
1317
|
+
...baseProps,
|
|
1318
|
+
hasValue: true,
|
|
1319
|
+
readOnly,
|
|
1320
|
+
icon: /* @__PURE__ */ jsx10(Check2, { size: 24 }),
|
|
1321
|
+
input: () => /* @__PURE__ */ jsxs5("div", { className: "flex-row-2 items-center", children: [
|
|
1322
|
+
/* @__PURE__ */ jsx10(
|
|
1323
|
+
Checkbox2,
|
|
1324
|
+
{
|
|
1325
|
+
id,
|
|
1326
|
+
checked: value ?? true,
|
|
1327
|
+
disabled: readOnly,
|
|
1328
|
+
onChange,
|
|
1329
|
+
"aria-labelledby": id + "label"
|
|
1330
|
+
}
|
|
1331
|
+
),
|
|
1332
|
+
/* @__PURE__ */ jsx10(Label, { id: id + "label", children: `${translation("yes")}/${translation("no")}` })
|
|
1333
|
+
] })
|
|
1334
|
+
}
|
|
1335
|
+
);
|
|
1336
|
+
};
|
|
1337
|
+
|
|
1338
|
+
// src/components/properties/DateProperty.tsx
|
|
1339
|
+
import { CalendarDays } from "lucide-react";
|
|
1340
|
+
import clsx6 from "clsx";
|
|
1341
|
+
|
|
1342
|
+
// src/utils/date.ts
|
|
1343
|
+
var formatDate = (date) => {
|
|
1344
|
+
const year = date.getFullYear().toString().padStart(4, "0");
|
|
1345
|
+
const month = (date.getMonth() + 1).toString().padStart(2, "0");
|
|
1346
|
+
const day = date.getDate().toString().padStart(2, "0");
|
|
1347
|
+
return `${year}-${month}-${day}`;
|
|
1348
|
+
};
|
|
1349
|
+
var formatDateTime = (date) => {
|
|
1350
|
+
const dateString = formatDate(date);
|
|
1351
|
+
const hours = date.getHours().toString().padStart(2, "0");
|
|
1352
|
+
const minutes = date.getMinutes().toString().padStart(2, "0");
|
|
1353
|
+
return `${dateString}T${hours}:${minutes}`;
|
|
1354
|
+
};
|
|
1355
|
+
|
|
1356
|
+
// src/components/user-action/input/Input.tsx
|
|
1357
|
+
import { forwardRef as forwardRef5, useEffect as useEffect8, useImperativeHandle, useRef as useRef6, useState as useState9 } from "react";
|
|
1358
|
+
import clsx5 from "clsx";
|
|
1359
|
+
|
|
1360
|
+
// src/hooks/useDelay.ts
|
|
1361
|
+
import { useEffect as useEffect7, useState as useState8 } from "react";
|
|
1362
|
+
var defaultOptions = {
|
|
1363
|
+
delay: 3e3,
|
|
1364
|
+
disabled: false
|
|
1365
|
+
};
|
|
1366
|
+
function useDelay(options) {
|
|
1367
|
+
const [timer, setTimer] = useState8(void 0);
|
|
1368
|
+
const { delay, disabled } = {
|
|
1369
|
+
...defaultOptions,
|
|
1370
|
+
...options
|
|
1371
|
+
};
|
|
1372
|
+
const clearTimer = () => {
|
|
1373
|
+
clearTimeout(timer);
|
|
1374
|
+
setTimer(void 0);
|
|
1375
|
+
};
|
|
1376
|
+
const restartTimer = (onDelayFinish) => {
|
|
1377
|
+
if (disabled) {
|
|
1378
|
+
return;
|
|
1379
|
+
}
|
|
1380
|
+
clearTimeout(timer);
|
|
1381
|
+
setTimer(setTimeout(() => {
|
|
1382
|
+
onDelayFinish();
|
|
1383
|
+
setTimer(void 0);
|
|
1384
|
+
}, delay));
|
|
1385
|
+
};
|
|
1386
|
+
useEffect7(() => {
|
|
1387
|
+
return () => {
|
|
1388
|
+
clearTimeout(timer);
|
|
1389
|
+
};
|
|
1390
|
+
}, [timer]);
|
|
1391
|
+
useEffect7(() => {
|
|
1392
|
+
if (disabled) {
|
|
1393
|
+
clearTimeout(timer);
|
|
1394
|
+
setTimer(void 0);
|
|
1395
|
+
}
|
|
1396
|
+
}, [disabled, timer]);
|
|
1397
|
+
return { restartTimer, clearTimer, hasActiveTimer: !!timer };
|
|
1398
|
+
}
|
|
1399
|
+
|
|
1400
|
+
// src/hooks/focus/useFocusManagement.ts
|
|
1401
|
+
import { useCallback as useCallback5 } from "react";
|
|
1402
|
+
function useFocusManagement() {
|
|
1403
|
+
const getFocusableElements = useCallback5(() => {
|
|
1404
|
+
return Array.from(
|
|
1405
|
+
document.querySelectorAll(
|
|
1406
|
+
'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])'
|
|
1407
|
+
)
|
|
1408
|
+
).filter(
|
|
1409
|
+
(el) => el instanceof HTMLElement && !el.hasAttribute("disabled") && !el.hasAttribute("hidden") && el.tabIndex !== -1
|
|
1410
|
+
);
|
|
1411
|
+
}, []);
|
|
1412
|
+
const getNextFocusElement = useCallback5(() => {
|
|
1413
|
+
const elements = getFocusableElements();
|
|
1414
|
+
if (elements.length === 0) {
|
|
1415
|
+
return void 0;
|
|
1416
|
+
}
|
|
1417
|
+
let nextElement = elements[0];
|
|
1418
|
+
if (document.activeElement instanceof HTMLElement) {
|
|
1419
|
+
const currentIndex = elements.indexOf(document.activeElement);
|
|
1420
|
+
nextElement = elements[(currentIndex + 1) % elements.length];
|
|
1421
|
+
}
|
|
1422
|
+
return nextElement;
|
|
1423
|
+
}, [getFocusableElements]);
|
|
1424
|
+
const focusNext = useCallback5(() => {
|
|
1425
|
+
const nextElement = getNextFocusElement();
|
|
1426
|
+
nextElement?.focus();
|
|
1427
|
+
}, [getNextFocusElement]);
|
|
1428
|
+
const getPreviousFocusElement = useCallback5(() => {
|
|
1429
|
+
const elements = getFocusableElements();
|
|
1430
|
+
if (elements.length === 0) {
|
|
1431
|
+
return void 0;
|
|
1432
|
+
}
|
|
1433
|
+
let previousElement = elements[0];
|
|
1434
|
+
if (document.activeElement instanceof HTMLElement) {
|
|
1435
|
+
const currentIndex = elements.indexOf(document.activeElement);
|
|
1436
|
+
if (currentIndex === 0) {
|
|
1437
|
+
previousElement = elements[elements.length - 1];
|
|
1438
|
+
} else {
|
|
1439
|
+
previousElement = elements[currentIndex - 1];
|
|
1440
|
+
}
|
|
1441
|
+
}
|
|
1442
|
+
return previousElement;
|
|
1443
|
+
}, [getFocusableElements]);
|
|
1444
|
+
const focusPrevious = useCallback5(() => {
|
|
1445
|
+
const previousElement = getPreviousFocusElement();
|
|
1446
|
+
if (previousElement) previousElement.focus();
|
|
1447
|
+
}, [getPreviousFocusElement]);
|
|
1448
|
+
return {
|
|
1449
|
+
getFocusableElements,
|
|
1450
|
+
getNextFocusElement,
|
|
1451
|
+
getPreviousFocusElement,
|
|
1452
|
+
focusNext,
|
|
1453
|
+
focusPrevious
|
|
1454
|
+
};
|
|
1455
|
+
}
|
|
1456
|
+
|
|
1457
|
+
// src/components/user-action/input/Input.tsx
|
|
1458
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
1459
|
+
var defaultEditCompleteOptions = {
|
|
1460
|
+
allowEnterComplete: false,
|
|
1461
|
+
onBlur: true,
|
|
1462
|
+
afterDelay: true,
|
|
1463
|
+
delay: 2500
|
|
1464
|
+
};
|
|
1465
|
+
var Input = forwardRef5(function Input2({
|
|
1466
|
+
value,
|
|
1467
|
+
onChange,
|
|
1468
|
+
onChangeText,
|
|
1469
|
+
onEditCompleted,
|
|
1470
|
+
editCompleteOptions,
|
|
1471
|
+
disabled = false,
|
|
1472
|
+
invalid = false,
|
|
1473
|
+
defaultStyle = true,
|
|
1474
|
+
className,
|
|
1475
|
+
...props
|
|
1476
|
+
}, forwardedRef) {
|
|
1477
|
+
const {
|
|
1478
|
+
onBlur: allowEditCompleteOnBlur,
|
|
1479
|
+
afterDelay,
|
|
1480
|
+
delay,
|
|
1481
|
+
allowEnterComplete
|
|
1482
|
+
} = { ...defaultEditCompleteOptions, ...editCompleteOptions };
|
|
1483
|
+
const {
|
|
1484
|
+
restartTimer,
|
|
1485
|
+
clearTimer
|
|
1486
|
+
} = useDelay({ delay, disabled: !afterDelay });
|
|
1487
|
+
const innerRef = useRef6(null);
|
|
1488
|
+
useImperativeHandle(forwardedRef, () => innerRef.current);
|
|
1489
|
+
const { focusNext } = useFocusManagement();
|
|
1490
|
+
return /* @__PURE__ */ jsx11(
|
|
1491
|
+
"input",
|
|
1492
|
+
{
|
|
1493
|
+
...props,
|
|
1494
|
+
ref: innerRef,
|
|
1495
|
+
value,
|
|
1496
|
+
disabled,
|
|
1497
|
+
className: defaultStyle ? clsx5(
|
|
1498
|
+
"px-2.5 py-1.75 rounded-md border-1 text-sm",
|
|
1499
|
+
{
|
|
1500
|
+
"bg-input-background text-input-text hover:border-primary focus:border-primary": !disabled && !invalid,
|
|
1501
|
+
"bg-on-negative text-negative border-negative-border hover:border-negative-border-hover focus-visible:ring-negative-border": !disabled && invalid,
|
|
1502
|
+
"bg-disabled-background text-disabled-text border-disabled-border": disabled
|
|
1503
|
+
},
|
|
1504
|
+
className
|
|
1505
|
+
) : className,
|
|
1506
|
+
onKeyDown: (event) => {
|
|
1507
|
+
props.onKeyDown?.(event);
|
|
1508
|
+
if (!allowEnterComplete) {
|
|
1509
|
+
return;
|
|
1510
|
+
}
|
|
1511
|
+
if (event.key === "Enter" && !event.shiftKey) {
|
|
1512
|
+
event.preventDefault();
|
|
1513
|
+
innerRef.current?.blur();
|
|
1514
|
+
onEditCompleted?.(event.target.value);
|
|
1515
|
+
focusNext();
|
|
1516
|
+
}
|
|
1517
|
+
},
|
|
1518
|
+
onBlur: (event) => {
|
|
1519
|
+
props.onBlur?.(event);
|
|
1520
|
+
if (allowEditCompleteOnBlur) {
|
|
1521
|
+
onEditCompleted?.(event.target.value);
|
|
1522
|
+
clearTimer();
|
|
1523
|
+
}
|
|
1524
|
+
},
|
|
1525
|
+
onChange: (event) => {
|
|
1526
|
+
onChange?.(event);
|
|
1527
|
+
const value2 = event.target.value;
|
|
1528
|
+
restartTimer(() => {
|
|
1529
|
+
innerRef.current?.blur();
|
|
1530
|
+
onEditCompleted?.(value2);
|
|
1531
|
+
});
|
|
1532
|
+
onChangeText?.(value2);
|
|
1533
|
+
},
|
|
1534
|
+
"aria-invalid": props["aria-invalid"] ?? invalid,
|
|
1535
|
+
"aria-disabled": props["aria-disabled"] ?? disabled
|
|
1536
|
+
}
|
|
1537
|
+
);
|
|
1538
|
+
});
|
|
1539
|
+
|
|
1540
|
+
// src/components/properties/DateProperty.tsx
|
|
1541
|
+
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
1542
|
+
var DateProperty = ({
|
|
1543
|
+
value,
|
|
1544
|
+
onChange = noop,
|
|
1545
|
+
onEditComplete = noop,
|
|
1546
|
+
readOnly,
|
|
1547
|
+
type = "dateTime",
|
|
1548
|
+
...baseProps
|
|
1549
|
+
}) => {
|
|
1550
|
+
const hasValue = !!value;
|
|
1551
|
+
const dateText = value ? type === "dateTime" ? formatDateTime(value) : formatDate(value) : "";
|
|
1552
|
+
return /* @__PURE__ */ jsx12(
|
|
1553
|
+
PropertyBase,
|
|
1554
|
+
{
|
|
1555
|
+
...baseProps,
|
|
1556
|
+
hasValue,
|
|
1557
|
+
icon: /* @__PURE__ */ jsx12(CalendarDays, { size: 24 }),
|
|
1558
|
+
input: ({ softRequired }) => /* @__PURE__ */ jsx12(
|
|
1559
|
+
Input,
|
|
1560
|
+
{
|
|
1561
|
+
className: clsx6("!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !w-fit !rounded-none", { "bg-surface-warning": softRequired && !hasValue }),
|
|
1562
|
+
value: dateText,
|
|
1563
|
+
type: type === "dateTime" ? "datetime-local" : "date",
|
|
1564
|
+
readOnly,
|
|
1565
|
+
onChange: (event) => {
|
|
1566
|
+
const value2 = event.target.value;
|
|
1567
|
+
if (!value2) {
|
|
1568
|
+
event.preventDefault();
|
|
1569
|
+
return;
|
|
1570
|
+
}
|
|
1571
|
+
const dueDate = new Date(value2);
|
|
1572
|
+
onChange(dueDate);
|
|
1573
|
+
},
|
|
1574
|
+
onEditCompleted: (value2) => onEditComplete(new Date(value2))
|
|
1575
|
+
}
|
|
1576
|
+
)
|
|
1577
|
+
}
|
|
1578
|
+
);
|
|
1579
|
+
};
|
|
1580
|
+
|
|
1581
|
+
// src/components/properties/MultiSelectProperty.tsx
|
|
1582
|
+
import { List } from "lucide-react";
|
|
1583
|
+
import clsx10 from "clsx";
|
|
1584
|
+
|
|
1585
|
+
// src/components/user-action/select/Select.tsx
|
|
1586
|
+
import {
|
|
1587
|
+
createContext as createContext3,
|
|
1588
|
+
forwardRef as forwardRef7,
|
|
1589
|
+
useCallback as useCallback9,
|
|
1590
|
+
useContext as useContext3,
|
|
1591
|
+
useEffect as useEffect13,
|
|
1592
|
+
useId as useId4,
|
|
1593
|
+
useImperativeHandle as useImperativeHandle2,
|
|
1594
|
+
useRef as useRef8,
|
|
1595
|
+
useState as useState14
|
|
1596
|
+
} from "react";
|
|
1597
|
+
import clsx9 from "clsx";
|
|
1598
|
+
|
|
1599
|
+
// src/components/layout/Expandable.tsx
|
|
1600
|
+
import { forwardRef as forwardRef6, useCallback as useCallback6, useEffect as useEffect9, useId as useId2, useState as useState10 } from "react";
|
|
1601
|
+
import { ChevronDown } from "lucide-react";
|
|
1602
|
+
import clsx7 from "clsx";
|
|
1603
|
+
import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
1604
|
+
var ExpansionIcon = ({ isExpanded, className }) => {
|
|
1605
|
+
return /* @__PURE__ */ jsx13(
|
|
1606
|
+
ChevronDown,
|
|
1607
|
+
{
|
|
1608
|
+
"aria-hidden": true,
|
|
1609
|
+
className: clsx7(
|
|
1610
|
+
"min-w-6 w-6 min-h-6 h-6 transition-transform motion-safe:duration-200 motion-reduce:duration-0 ease-in-out",
|
|
1611
|
+
{ "rotate-180": isExpanded },
|
|
1612
|
+
className
|
|
1613
|
+
)
|
|
1614
|
+
}
|
|
1615
|
+
);
|
|
1616
|
+
};
|
|
1617
|
+
var Expandable = forwardRef6(function Expandable2({
|
|
1618
|
+
children,
|
|
1619
|
+
id: providedId,
|
|
1620
|
+
label,
|
|
1621
|
+
icon,
|
|
1622
|
+
isExpanded = false,
|
|
1623
|
+
onChange = noop,
|
|
1624
|
+
clickOnlyOnHeader = true,
|
|
1625
|
+
disabled = false,
|
|
1626
|
+
className,
|
|
1627
|
+
headerClassName,
|
|
1628
|
+
contentClassName,
|
|
1629
|
+
contentExpandedClassName
|
|
1630
|
+
}, ref) {
|
|
1631
|
+
const defaultIcon = useCallback6((expanded) => /* @__PURE__ */ jsx13(ExpansionIcon, { isExpanded: expanded }), []);
|
|
1632
|
+
icon ??= defaultIcon;
|
|
1633
|
+
const generatedId = useId2();
|
|
1634
|
+
const id = providedId ?? generatedId;
|
|
1635
|
+
return /* @__PURE__ */ jsxs6(
|
|
1636
|
+
"div",
|
|
1637
|
+
{
|
|
1638
|
+
ref,
|
|
1639
|
+
onClick: () => !clickOnlyOnHeader && !disabled && onChange(!isExpanded),
|
|
1640
|
+
className: clsx7(
|
|
1641
|
+
"flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm",
|
|
1642
|
+
{ "cursor-pointer": !clickOnlyOnHeader && !disabled },
|
|
1643
|
+
className
|
|
1644
|
+
),
|
|
1645
|
+
children: [
|
|
1646
|
+
/* @__PURE__ */ jsxs6(
|
|
1647
|
+
"button",
|
|
1648
|
+
{
|
|
1649
|
+
onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
|
|
1650
|
+
className: clsx7(
|
|
1651
|
+
"flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
|
|
1652
|
+
{
|
|
1653
|
+
"group-hover:brightness-97": !isExpanded,
|
|
1654
|
+
"hover:brightness-97": isExpanded && !disabled,
|
|
1655
|
+
"cursor-pointer": clickOnlyOnHeader && !disabled
|
|
1656
|
+
},
|
|
1657
|
+
headerClassName
|
|
1658
|
+
),
|
|
1659
|
+
"aria-expanded": isExpanded,
|
|
1660
|
+
"aria-controls": `${id}-content`,
|
|
1661
|
+
"aria-disabled": disabled ?? void 0,
|
|
1662
|
+
children: [
|
|
1663
|
+
label,
|
|
1664
|
+
icon(isExpanded)
|
|
1665
|
+
]
|
|
1666
|
+
}
|
|
1667
|
+
),
|
|
1668
|
+
/* @__PURE__ */ jsx13(
|
|
1669
|
+
"div",
|
|
1670
|
+
{
|
|
1671
|
+
id: `${id}-content`,
|
|
1672
|
+
className: clsx7(
|
|
1673
|
+
"flex-col-2 px-4 transition-all duration-300 ease-in-out",
|
|
1674
|
+
{
|
|
1675
|
+
[clsx7("max-h-96 opacity-100 pb-2 overflow-y-auto", contentExpandedClassName)]: isExpanded,
|
|
1676
|
+
"max-h-0 opacity-0 overflow-hidden": !isExpanded
|
|
1677
|
+
},
|
|
1678
|
+
contentClassName
|
|
1679
|
+
),
|
|
1680
|
+
role: "region",
|
|
1681
|
+
children
|
|
1682
|
+
}
|
|
1683
|
+
)
|
|
1684
|
+
]
|
|
1685
|
+
}
|
|
1686
|
+
);
|
|
1687
|
+
});
|
|
1688
|
+
var ExpandableUncontrolled = forwardRef6(function ExpandableUncontrolled2({
|
|
1689
|
+
isExpanded,
|
|
1690
|
+
onChange = noop,
|
|
1691
|
+
...props
|
|
1692
|
+
}, ref) {
|
|
1693
|
+
const [usedIsExpanded, setUsedIsExpanded] = useState10(isExpanded);
|
|
1694
|
+
useEffect9(() => {
|
|
1695
|
+
setUsedIsExpanded(isExpanded);
|
|
1696
|
+
}, [isExpanded]);
|
|
1697
|
+
return /* @__PURE__ */ jsx13(
|
|
1698
|
+
Expandable,
|
|
1699
|
+
{
|
|
1700
|
+
...props,
|
|
1701
|
+
ref,
|
|
1702
|
+
isExpanded: usedIsExpanded,
|
|
1703
|
+
onChange: (value) => {
|
|
1704
|
+
onChange(value);
|
|
1705
|
+
setUsedIsExpanded(value);
|
|
1706
|
+
}
|
|
1707
|
+
}
|
|
1708
|
+
);
|
|
1709
|
+
});
|
|
1710
|
+
|
|
1711
|
+
// src/hooks/focus/useFocusTrap.ts
|
|
1712
|
+
import { useCallback as useCallback7, useEffect as useEffect11, useId as useId3, useRef as useRef7, useState as useState12 } from "react";
|
|
1713
|
+
|
|
1714
|
+
// src/hooks/focus/useIsMounted.ts
|
|
1715
|
+
import { useEffect as useEffect10, useLayoutEffect as useLayoutEffect3, useState as useState11 } from "react";
|
|
1716
|
+
var isClient = typeof window !== "undefined" && typeof document !== "undefined";
|
|
1717
|
+
var useIsomorphicEffect = isClient ? useLayoutEffect3 : useEffect10;
|
|
1718
|
+
var useIsMounted = () => {
|
|
1719
|
+
const [isMounted, setIsMounted] = useState11(false);
|
|
1720
|
+
useIsomorphicEffect(() => {
|
|
1721
|
+
setIsMounted(true);
|
|
1722
|
+
return () => {
|
|
1723
|
+
setIsMounted(false);
|
|
1724
|
+
};
|
|
1725
|
+
}, []);
|
|
1726
|
+
return isMounted;
|
|
1727
|
+
};
|
|
1728
|
+
|
|
1729
|
+
// src/hooks/focus/useFocusTrap.ts
|
|
1730
|
+
var createFocusGuard = () => {
|
|
1731
|
+
const div = document.createElement("div");
|
|
1732
|
+
Object.assign(div.style, {
|
|
1733
|
+
opacity: "0",
|
|
1734
|
+
outline: "none",
|
|
1735
|
+
boxShadow: "none",
|
|
1736
|
+
position: "fixed",
|
|
1737
|
+
pointerEvents: "none",
|
|
1738
|
+
touchAction: "none"
|
|
1739
|
+
});
|
|
1740
|
+
div.tabIndex = 0;
|
|
1741
|
+
div.setAttribute("data-hw-focus-guard", "");
|
|
1742
|
+
document.body.appendChild(div);
|
|
1743
|
+
return div;
|
|
1744
|
+
};
|
|
1745
|
+
function getContainedFocusableElements(element) {
|
|
1746
|
+
return element?.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
1747
|
+
}
|
|
1748
|
+
var FocusTrapService = class {
|
|
1749
|
+
constructor() {
|
|
1750
|
+
// The last entry is always the active one
|
|
1751
|
+
this.listeners = [];
|
|
1752
|
+
this.onFocusIn = (event) => {
|
|
1753
|
+
const active = this.getActive();
|
|
1754
|
+
if (!active || !active.container.current) return;
|
|
1755
|
+
const { container } = active;
|
|
1756
|
+
if (!container.current.contains(event.target)) {
|
|
1757
|
+
this.focusElement();
|
|
1758
|
+
}
|
|
1759
|
+
};
|
|
1760
|
+
}
|
|
1761
|
+
getActive() {
|
|
1762
|
+
if (this.listeners.length === 0) return void 0;
|
|
1763
|
+
return this.listeners[this.listeners.length - 1];
|
|
1764
|
+
}
|
|
1765
|
+
focusElement() {
|
|
1766
|
+
const active = this.getActive();
|
|
1767
|
+
if (!active) return;
|
|
1768
|
+
const { container, initialFocusElement } = active;
|
|
1769
|
+
const containerElement = container.current;
|
|
1770
|
+
if (initialFocusElement?.current) {
|
|
1771
|
+
initialFocusElement.current.focus();
|
|
1772
|
+
} else {
|
|
1773
|
+
const elements = getContainedFocusableElements(containerElement);
|
|
1774
|
+
if (elements && elements.length > 0) {
|
|
1775
|
+
const first = elements.item(0);
|
|
1776
|
+
first.focus();
|
|
1777
|
+
} else {
|
|
1778
|
+
containerElement.focus();
|
|
1779
|
+
}
|
|
1780
|
+
}
|
|
1781
|
+
}
|
|
1782
|
+
removeGuards() {
|
|
1783
|
+
document.querySelectorAll("[data-hw-focus-guard]").forEach((node) => node.remove());
|
|
1784
|
+
}
|
|
1785
|
+
addGuards() {
|
|
1786
|
+
document.body.insertAdjacentElement("afterbegin", createFocusGuard());
|
|
1787
|
+
document.body.insertAdjacentElement("beforeend", createFocusGuard());
|
|
1788
|
+
}
|
|
1789
|
+
activate() {
|
|
1790
|
+
document.addEventListener("focusin", this.onFocusIn);
|
|
1791
|
+
this.addGuards();
|
|
1792
|
+
}
|
|
1793
|
+
deactivate() {
|
|
1794
|
+
document.removeEventListener("focusin", this.onFocusIn);
|
|
1795
|
+
this.removeGuards();
|
|
1796
|
+
}
|
|
1797
|
+
register(listener) {
|
|
1798
|
+
this.listeners.push(listener);
|
|
1799
|
+
if (this.listeners.length === 1) {
|
|
1800
|
+
this.activate();
|
|
1801
|
+
}
|
|
1802
|
+
const active = listener;
|
|
1803
|
+
this.listeners.forEach((listener2) => {
|
|
1804
|
+
const { focus, pause } = listener2;
|
|
1805
|
+
if (listener2 === active) {
|
|
1806
|
+
focus();
|
|
1807
|
+
} else {
|
|
1808
|
+
pause();
|
|
1809
|
+
}
|
|
1810
|
+
});
|
|
1811
|
+
}
|
|
1812
|
+
unregister(id) {
|
|
1813
|
+
const index = this.listeners.findIndex((trap) => trap.id === id);
|
|
1814
|
+
if (index !== -1) {
|
|
1815
|
+
const isActive = index === this.listeners.length - 1;
|
|
1816
|
+
const listener = this.listeners[index];
|
|
1817
|
+
this.listeners = this.listeners.filter((listener2) => listener2.id !== id);
|
|
1818
|
+
if (isActive) {
|
|
1819
|
+
this.deactivate();
|
|
1820
|
+
listener.focusLast();
|
|
1821
|
+
const active = this.getActive();
|
|
1822
|
+
this.listeners.forEach((listener2) => {
|
|
1823
|
+
const { pause, unpause } = listener2;
|
|
1824
|
+
if (listener2 === active) {
|
|
1825
|
+
unpause();
|
|
1826
|
+
} else {
|
|
1827
|
+
pause();
|
|
1828
|
+
}
|
|
1829
|
+
});
|
|
1830
|
+
if (this.listeners.length > 0) {
|
|
1831
|
+
this.activate();
|
|
1832
|
+
}
|
|
1833
|
+
}
|
|
1834
|
+
} else {
|
|
1835
|
+
console.warn(`Unable to unregister id ${id}: not found`);
|
|
1836
|
+
}
|
|
1837
|
+
}
|
|
1838
|
+
};
|
|
1839
|
+
var service = new FocusTrapService();
|
|
1840
|
+
var useFocusTrap = ({
|
|
1841
|
+
container,
|
|
1842
|
+
active = true,
|
|
1843
|
+
initialFocus,
|
|
1844
|
+
focusFirst = true
|
|
1845
|
+
}) => {
|
|
1846
|
+
const lastFocusRef = useRef7(null);
|
|
1847
|
+
const [paused, setPaused] = useState12(false);
|
|
1848
|
+
const isMounted = useIsMounted();
|
|
1849
|
+
const id = useId3();
|
|
1850
|
+
const focusElement = useCallback7(() => {
|
|
1851
|
+
const containerElement = container.current;
|
|
1852
|
+
if (initialFocus?.current) {
|
|
1853
|
+
initialFocus.current.focus();
|
|
1854
|
+
} else {
|
|
1855
|
+
const elements = getContainedFocusableElements(containerElement);
|
|
1856
|
+
if (elements && elements.length > 0) {
|
|
1857
|
+
const first = elements.item(0);
|
|
1858
|
+
first.focus();
|
|
1859
|
+
} else {
|
|
1860
|
+
containerElement.focus();
|
|
1861
|
+
}
|
|
1862
|
+
}
|
|
1863
|
+
}, [container, initialFocus]);
|
|
1864
|
+
useEffect11(() => {
|
|
1865
|
+
if (active && isMounted) {
|
|
1866
|
+
let pause = function() {
|
|
1867
|
+
setPaused(true);
|
|
1868
|
+
}, unpause = function() {
|
|
1869
|
+
setPaused(false);
|
|
1870
|
+
if (!container.current.contains(document.activeElement)) {
|
|
1871
|
+
focusElement();
|
|
1872
|
+
}
|
|
1873
|
+
}, focus = function() {
|
|
1874
|
+
focusElement();
|
|
1875
|
+
setPaused(false);
|
|
1876
|
+
}, focusLast = function() {
|
|
1877
|
+
lastFocusRef.current?.focus();
|
|
1878
|
+
};
|
|
1879
|
+
if (!lastFocusRef.current) {
|
|
1880
|
+
lastFocusRef.current = document.activeElement;
|
|
1881
|
+
}
|
|
1882
|
+
service.register({ id, pause, focus, focusLast, unpause, container, initialFocusElement: initialFocus });
|
|
1883
|
+
return () => {
|
|
1884
|
+
service.unregister(id);
|
|
1885
|
+
lastFocusRef.current = void 0;
|
|
1886
|
+
};
|
|
1887
|
+
}
|
|
1888
|
+
}, [active, container, focusElement, id, initialFocus, isMounted]);
|
|
1889
|
+
useEffect11(() => {
|
|
1890
|
+
if (active && !paused && isMounted) {
|
|
1891
|
+
let onKeyDown = function(event) {
|
|
1892
|
+
const key = event.key;
|
|
1893
|
+
const elements = getContainedFocusableElements(containerElement);
|
|
1894
|
+
const active2 = document.activeElement;
|
|
1895
|
+
const index = [...elements].findIndex((value) => value === active2);
|
|
1896
|
+
if (index === -1 || event.altKey || event.ctrlKey || event.metaKey) {
|
|
1897
|
+
return;
|
|
1898
|
+
}
|
|
1899
|
+
if (key === "Tab") {
|
|
1900
|
+
const next = event.shiftKey ? -1 : 1;
|
|
1901
|
+
const nextIndex = (index + next + elements.length) % elements.length;
|
|
1902
|
+
const nextElement = elements[nextIndex];
|
|
1903
|
+
nextElement.focus();
|
|
1904
|
+
event.preventDefault();
|
|
1905
|
+
}
|
|
1906
|
+
};
|
|
1907
|
+
const containerElement = container.current;
|
|
1908
|
+
containerElement.addEventListener("keydown", onKeyDown);
|
|
1909
|
+
return () => {
|
|
1910
|
+
containerElement.removeEventListener("keydown", onKeyDown);
|
|
1911
|
+
};
|
|
1912
|
+
}
|
|
1913
|
+
}, [active, paused, isMounted, container, initialFocus, focusFirst, focusElement]);
|
|
1914
|
+
};
|
|
1915
|
+
|
|
1916
|
+
// src/utils/match.ts
|
|
1917
|
+
var match = (key, values) => {
|
|
1918
|
+
return values[key];
|
|
1919
|
+
};
|
|
1920
|
+
|
|
1921
|
+
// src/components/user-action/select/Select.tsx
|
|
1922
|
+
import { CheckIcon, Plus, XIcon } from "lucide-react";
|
|
1923
|
+
|
|
1924
|
+
// src/components/layout/Chip.tsx
|
|
1925
|
+
import clsx8 from "clsx";
|
|
1926
|
+
import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1927
|
+
var Chip = ({
|
|
1928
|
+
children,
|
|
1929
|
+
trailingIcon,
|
|
1930
|
+
color = "default",
|
|
1931
|
+
size = "md",
|
|
1932
|
+
icon = false,
|
|
1933
|
+
variant = "normal",
|
|
1934
|
+
className = "",
|
|
1935
|
+
...restProps
|
|
1936
|
+
}) => {
|
|
1937
|
+
const colorMapping = {
|
|
1938
|
+
default: "text-tag-default-text bg-tag-default-background",
|
|
1939
|
+
dark: "text-tag-dark-text bg-tag-dark-background",
|
|
1940
|
+
red: "text-tag-red-text bg-tag-red-background",
|
|
1941
|
+
yellow: "text-tag-yellow-text bg-tag-yellow-background",
|
|
1942
|
+
green: "text-tag-green-text bg-tag-green-background",
|
|
1943
|
+
blue: "text-tag-blue-text bg-tag-blue-background",
|
|
1944
|
+
pink: "text-tag-pink-text bg-tag-pink-background",
|
|
1945
|
+
orange: "text-tag-orange-text bg-tag-orange-background"
|
|
1946
|
+
}[color];
|
|
1947
|
+
const colorMappingIcon = {
|
|
1948
|
+
default: "text-tag-default-icon",
|
|
1949
|
+
dark: "text-tag-dark-icon",
|
|
1950
|
+
red: "text-tag-red-icon",
|
|
1951
|
+
yellow: "text-tag-yellow-icon",
|
|
1952
|
+
green: "text-tag-green-icon",
|
|
1953
|
+
blue: "text-tag-blue-icon",
|
|
1954
|
+
pink: "text-tag-pink-icon",
|
|
1955
|
+
orange: "text-tag-orange-icon"
|
|
1956
|
+
}[color];
|
|
1957
|
+
return /* @__PURE__ */ jsxs7(
|
|
1958
|
+
"div",
|
|
1959
|
+
{
|
|
1960
|
+
...restProps,
|
|
1961
|
+
className: clsx8(
|
|
1962
|
+
`flex-row-0 w-fit font-semibold`,
|
|
1963
|
+
colorMapping,
|
|
1964
|
+
!icon ? {
|
|
1965
|
+
"px-1 py-0.5": size === "sm",
|
|
1966
|
+
"px-2 py-1": size === "md",
|
|
1967
|
+
"px-4 py-2": size === "lg"
|
|
1968
|
+
} : {
|
|
1969
|
+
"p-0.5": size === "sm",
|
|
1970
|
+
"p-1": size === "md",
|
|
1971
|
+
"p-2": size === "lg"
|
|
1972
|
+
},
|
|
1973
|
+
{
|
|
1974
|
+
"rounded-md": variant === "normal",
|
|
1975
|
+
"rounded-full": variant === "fullyRounded"
|
|
1976
|
+
},
|
|
1977
|
+
className
|
|
1978
|
+
),
|
|
1979
|
+
children: [
|
|
1980
|
+
children,
|
|
1981
|
+
trailingIcon && /* @__PURE__ */ jsx14("span", { className: colorMappingIcon, children: trailingIcon })
|
|
1982
|
+
]
|
|
1983
|
+
}
|
|
1984
|
+
);
|
|
1985
|
+
};
|
|
1986
|
+
|
|
1987
|
+
// src/hooks/useFloatingElement.ts
|
|
1988
|
+
import { useCallback as useCallback8, useEffect as useEffect12, useState as useState13 } from "react";
|
|
1989
|
+
|
|
1990
|
+
// src/utils/math.ts
|
|
1991
|
+
var clamp = (value, range = [0, 1]) => {
|
|
1992
|
+
const [min, max] = range;
|
|
1993
|
+
return Math.min(Math.max(value, min), max);
|
|
1994
|
+
};
|
|
1995
|
+
|
|
1996
|
+
// src/hooks/useFloatingElement.ts
|
|
1997
|
+
function calculatePosition({
|
|
1998
|
+
windowRect,
|
|
1999
|
+
containerRect,
|
|
2000
|
+
anchorRect,
|
|
2001
|
+
options
|
|
2002
|
+
}) {
|
|
2003
|
+
const { verticalAlignment, horizontalAlignment, gap, screenPadding } = options;
|
|
2004
|
+
const windowWidth = windowRect.width;
|
|
2005
|
+
const windowHeight = windowRect.height;
|
|
2006
|
+
const maxWidth = windowWidth - 2 * screenPadding;
|
|
2007
|
+
const maxHeight = windowHeight - 2 * screenPadding;
|
|
2008
|
+
const width = Math.min(containerRect.width, maxWidth);
|
|
2009
|
+
const height = Math.min(containerRect.height, maxHeight);
|
|
2010
|
+
const leftSuggestion = {
|
|
2011
|
+
beforeStart: anchorRect.left - width - gap,
|
|
2012
|
+
afterStart: anchorRect.left,
|
|
2013
|
+
center: anchorRect.left + anchorRect.width / 2 - width / 2,
|
|
2014
|
+
beforeEnd: anchorRect.right - width,
|
|
2015
|
+
afterEnd: anchorRect.right + gap
|
|
2016
|
+
}[horizontalAlignment];
|
|
2017
|
+
const topSuggestion = {
|
|
2018
|
+
beforeStart: anchorRect.top - height - gap,
|
|
2019
|
+
afterStart: anchorRect.top,
|
|
2020
|
+
center: anchorRect.top + anchorRect.height / 2 - height / 2,
|
|
2021
|
+
beforeEnd: anchorRect.bottom - height,
|
|
2022
|
+
afterEnd: anchorRect.bottom + gap
|
|
2023
|
+
}[verticalAlignment];
|
|
2024
|
+
const left = clamp(leftSuggestion, [
|
|
2025
|
+
screenPadding,
|
|
2026
|
+
windowWidth - screenPadding - width
|
|
2027
|
+
]);
|
|
2028
|
+
const top = clamp(topSuggestion, [
|
|
2029
|
+
screenPadding,
|
|
2030
|
+
windowHeight - screenPadding - height
|
|
2031
|
+
]);
|
|
2032
|
+
return {
|
|
2033
|
+
left,
|
|
2034
|
+
top,
|
|
2035
|
+
maxWidth,
|
|
2036
|
+
maxHeight
|
|
2037
|
+
};
|
|
2038
|
+
}
|
|
2039
|
+
function useFloatingElement({
|
|
2040
|
+
active = true,
|
|
2041
|
+
windowRef,
|
|
2042
|
+
anchorRef,
|
|
2043
|
+
containerRef,
|
|
2044
|
+
isPolling = false,
|
|
2045
|
+
pollingInterval = 100,
|
|
2046
|
+
verticalAlignment = "afterEnd",
|
|
2047
|
+
horizontalAlignment = "afterStart",
|
|
2048
|
+
screenPadding = 16,
|
|
2049
|
+
gap = 4
|
|
2050
|
+
}) {
|
|
2051
|
+
const [style, setStyle] = useState13();
|
|
2052
|
+
const isMounted = useIsMounted();
|
|
2053
|
+
const calculate = useCallback8(() => {
|
|
2054
|
+
const containerRect = containerRef.current.getBoundingClientRect();
|
|
2055
|
+
const windowRect = windowRef?.current.getBoundingClientRect() ?? {
|
|
2056
|
+
top: 0,
|
|
2057
|
+
bottom: window.innerHeight,
|
|
2058
|
+
left: 0,
|
|
2059
|
+
right: window.innerWidth,
|
|
2060
|
+
width: window.innerWidth,
|
|
2061
|
+
height: window.innerHeight
|
|
2062
|
+
};
|
|
2063
|
+
const anchorElement = anchorRef?.current;
|
|
2064
|
+
if (anchorRef && !anchorElement) {
|
|
2065
|
+
console.warn("FloatingContainer anchor provided, but its value is undefined");
|
|
2066
|
+
}
|
|
2067
|
+
const anchorRect = anchorElement?.getBoundingClientRect() ?? windowRect;
|
|
2068
|
+
const calculateProps = {
|
|
2069
|
+
windowRect,
|
|
2070
|
+
anchorRect,
|
|
2071
|
+
containerRect,
|
|
2072
|
+
options: {
|
|
2073
|
+
horizontalAlignment,
|
|
2074
|
+
verticalAlignment,
|
|
2075
|
+
screenPadding,
|
|
2076
|
+
gap
|
|
2077
|
+
}
|
|
2078
|
+
};
|
|
2079
|
+
setStyle(calculatePosition(calculateProps));
|
|
2080
|
+
}, [anchorRef, containerRef, gap, horizontalAlignment, screenPadding, verticalAlignment, windowRef]);
|
|
2081
|
+
const height = containerRef.current?.getBoundingClientRect().height;
|
|
2082
|
+
const width = containerRef.current?.getBoundingClientRect().width;
|
|
2083
|
+
useEffect12(() => {
|
|
2084
|
+
if (active && isMounted) {
|
|
2085
|
+
calculate();
|
|
2086
|
+
} else {
|
|
2087
|
+
setStyle(void 0);
|
|
2088
|
+
}
|
|
2089
|
+
}, [calculate, active, isMounted, height, width]);
|
|
2090
|
+
useEffect12(() => {
|
|
2091
|
+
window.addEventListener("resize", calculate);
|
|
2092
|
+
let timeout;
|
|
2093
|
+
if (isPolling) {
|
|
2094
|
+
timeout = setInterval(calculate, pollingInterval);
|
|
2095
|
+
}
|
|
2096
|
+
return () => {
|
|
2097
|
+
window.removeEventListener("resize", calculate);
|
|
2098
|
+
if (timeout) {
|
|
2099
|
+
clearInterval(timeout);
|
|
2100
|
+
}
|
|
2101
|
+
};
|
|
2102
|
+
}, [calculate, isPolling, pollingInterval]);
|
|
2103
|
+
return style;
|
|
2104
|
+
}
|
|
2105
|
+
|
|
2106
|
+
// src/components/user-action/select/Select.tsx
|
|
2107
|
+
import { createPortal } from "react-dom";
|
|
2108
|
+
import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
2109
|
+
var defaultToggleOpenOptions = {
|
|
2110
|
+
highlightStartPosition: "first"
|
|
2111
|
+
};
|
|
2112
|
+
var SelectContext = createContext3(null);
|
|
2113
|
+
function useSelectContext() {
|
|
2114
|
+
const ctx = useContext3(SelectContext);
|
|
2115
|
+
if (!ctx) {
|
|
2116
|
+
throw new Error("SelectContext must be used within a ListBoxPrimitive");
|
|
2117
|
+
}
|
|
2118
|
+
return ctx;
|
|
2119
|
+
}
|
|
2120
|
+
var SelectRoot = ({
|
|
2121
|
+
children,
|
|
2122
|
+
id,
|
|
2123
|
+
value,
|
|
2124
|
+
onValueChanged,
|
|
2125
|
+
values,
|
|
2126
|
+
onValuesChanged,
|
|
2127
|
+
isOpen = false,
|
|
2128
|
+
disabled = false,
|
|
2129
|
+
invalid = false,
|
|
2130
|
+
isMultiSelect = false,
|
|
2131
|
+
iconAppearance = "left"
|
|
2132
|
+
}) => {
|
|
2133
|
+
const optionsRef = useRef8([]);
|
|
2134
|
+
const triggerRef = useRef8(null);
|
|
2135
|
+
const generatedId = useId4();
|
|
2136
|
+
const usedId = id ?? generatedId;
|
|
2137
|
+
const [internalState, setInternalState] = useState14({
|
|
2138
|
+
isOpen
|
|
2139
|
+
});
|
|
2140
|
+
const state = {
|
|
2141
|
+
...internalState,
|
|
2142
|
+
id: usedId,
|
|
2143
|
+
disabled,
|
|
2144
|
+
invalid,
|
|
2145
|
+
value: isMultiSelect ? values ?? [] : [value].filter(Boolean)
|
|
2146
|
+
};
|
|
2147
|
+
const config = {
|
|
2148
|
+
isMultiSelect,
|
|
2149
|
+
iconAppearance
|
|
2150
|
+
};
|
|
2151
|
+
const registerItem = useCallback9((item) => {
|
|
2152
|
+
optionsRef.current.push(item);
|
|
2153
|
+
optionsRef.current.sort((a, b) => {
|
|
2154
|
+
const aEl = a.ref.current;
|
|
2155
|
+
const bEl = b.ref.current;
|
|
2156
|
+
if (!aEl || !bEl) return 0;
|
|
2157
|
+
return aEl.compareDocumentPosition(bEl) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
|
|
2158
|
+
});
|
|
2159
|
+
}, []);
|
|
2160
|
+
const unregisterItem = useCallback9((value2) => {
|
|
2161
|
+
optionsRef.current = optionsRef.current.filter((i) => i.value !== value2);
|
|
2162
|
+
}, []);
|
|
2163
|
+
const toggleSelection = (value2, isSelected) => {
|
|
2164
|
+
if (disabled) {
|
|
2165
|
+
return;
|
|
2166
|
+
}
|
|
2167
|
+
const option = optionsRef.current.find((i) => i.value === value2);
|
|
2168
|
+
if (!option) {
|
|
2169
|
+
console.error(`SelectOption with value: ${value2} not found`);
|
|
2170
|
+
return;
|
|
2171
|
+
}
|
|
2172
|
+
let newValue;
|
|
2173
|
+
if (isMultiSelect) {
|
|
2174
|
+
const isSelectedBefore = state.value.includes(value2);
|
|
2175
|
+
const isSelectedAfter = isSelected ?? !isSelectedBefore;
|
|
2176
|
+
if (!isSelectedAfter) {
|
|
2177
|
+
newValue = state.value.filter((v) => v !== value2);
|
|
2178
|
+
} else {
|
|
2179
|
+
newValue = [...state.value, value2];
|
|
2180
|
+
}
|
|
2181
|
+
} else {
|
|
2182
|
+
newValue = [value2];
|
|
2183
|
+
}
|
|
2184
|
+
if (!isMultiSelect) {
|
|
2185
|
+
onValueChanged?.(newValue[0]);
|
|
2186
|
+
} else {
|
|
2187
|
+
onValuesChanged?.(newValue);
|
|
2188
|
+
}
|
|
2189
|
+
setInternalState((prevState) => ({
|
|
2190
|
+
...prevState,
|
|
2191
|
+
highlightedValue: value2
|
|
2192
|
+
}));
|
|
2193
|
+
};
|
|
2194
|
+
const highlightItem = (value2) => {
|
|
2195
|
+
if (disabled) {
|
|
2196
|
+
return;
|
|
2197
|
+
}
|
|
2198
|
+
setInternalState((prevState) => ({
|
|
2199
|
+
...prevState,
|
|
2200
|
+
highlightedValue: value2
|
|
2201
|
+
}));
|
|
2202
|
+
};
|
|
2203
|
+
const registerTrigger = useCallback9((ref) => {
|
|
2204
|
+
triggerRef.current = ref.current;
|
|
2205
|
+
}, []);
|
|
2206
|
+
const unregisterTrigger = useCallback9(() => {
|
|
2207
|
+
triggerRef.current = null;
|
|
2208
|
+
}, []);
|
|
2209
|
+
const toggleOpen = (isOpen2, options) => {
|
|
2210
|
+
const { highlightStartPosition } = { ...defaultToggleOpenOptions, ...options };
|
|
2211
|
+
let highlightedIndex;
|
|
2212
|
+
if (highlightStartPosition === "first") {
|
|
2213
|
+
highlightedIndex = optionsRef.current.findIndex((option) => !option.disabled);
|
|
2214
|
+
} else {
|
|
2215
|
+
highlightedIndex = optionsRef.current.length - 1 - [...optionsRef.current].reverse().findIndex((option) => !option.disabled);
|
|
2216
|
+
}
|
|
2217
|
+
if (highlightedIndex === -1 || highlightedIndex === optionsRef.current.length) {
|
|
2218
|
+
highlightedIndex = 0;
|
|
2219
|
+
}
|
|
2220
|
+
setInternalState((prevState) => ({
|
|
2221
|
+
...prevState,
|
|
2222
|
+
isOpen: isOpen2 ?? !prevState.isOpen,
|
|
2223
|
+
highlightedValue: optionsRef.current[highlightedIndex].value
|
|
2224
|
+
}));
|
|
2225
|
+
};
|
|
2226
|
+
const moveHighlightedIndex = (delta) => {
|
|
2227
|
+
let highlightedIndex = optionsRef.current.findIndex((value2) => value2.value === internalState.highlightedValue);
|
|
2228
|
+
if (highlightedIndex === -1) {
|
|
2229
|
+
highlightedIndex = 0;
|
|
2230
|
+
}
|
|
2231
|
+
const optionLength = optionsRef.current.length;
|
|
2232
|
+
const startIndex = (highlightedIndex + delta % optionLength + optionLength) % optionLength;
|
|
2233
|
+
const isForward = delta >= 0;
|
|
2234
|
+
let highlightedValue = optionsRef.current[startIndex].value;
|
|
2235
|
+
for (let i = 0; i < optionsRef.current.length; i++) {
|
|
2236
|
+
const index = (startIndex + (isForward ? i : -i) + optionLength) % optionLength;
|
|
2237
|
+
if (!optionsRef.current[index].disabled) {
|
|
2238
|
+
highlightedValue = optionsRef.current[index].value;
|
|
2239
|
+
break;
|
|
2240
|
+
}
|
|
2241
|
+
}
|
|
2242
|
+
setInternalState((prevState) => ({
|
|
2243
|
+
...prevState,
|
|
2244
|
+
highlightedValue
|
|
2245
|
+
}));
|
|
2246
|
+
};
|
|
2247
|
+
useEffect13(() => {
|
|
2248
|
+
if (!internalState.highlightedValue) return;
|
|
2249
|
+
const highlighted = optionsRef.current.find((value2) => value2.value === internalState.highlightedValue);
|
|
2250
|
+
if (highlighted) {
|
|
2251
|
+
highlighted.ref.current.scrollIntoView({ behavior: "instant", block: "nearest" });
|
|
2252
|
+
} else {
|
|
2253
|
+
console.error(`SelectRoot: Could not find highlighted value (${internalState.highlightedValue})`);
|
|
2254
|
+
}
|
|
2255
|
+
}, [internalState.highlightedValue]);
|
|
2256
|
+
const contextValue = {
|
|
2257
|
+
state,
|
|
2258
|
+
config,
|
|
2259
|
+
item: {
|
|
2260
|
+
register: registerItem,
|
|
2261
|
+
unregister: unregisterItem,
|
|
2262
|
+
toggleSelection,
|
|
2263
|
+
highlightItem,
|
|
2264
|
+
moveHighlightedIndex
|
|
2265
|
+
},
|
|
2266
|
+
trigger: {
|
|
2267
|
+
ref: triggerRef,
|
|
2268
|
+
register: registerTrigger,
|
|
2269
|
+
unregister: unregisterTrigger,
|
|
2270
|
+
toggleOpen
|
|
2271
|
+
}
|
|
2272
|
+
};
|
|
2273
|
+
return /* @__PURE__ */ jsx15(SelectContext.Provider, { value: contextValue, children });
|
|
2274
|
+
};
|
|
2275
|
+
var SelectOption = forwardRef7(
|
|
2276
|
+
function SelectOption2({ children, value, disabled = false, iconAppearance, className, ...restProps }, ref) {
|
|
2277
|
+
const { state, config, item, trigger } = useSelectContext();
|
|
2278
|
+
const { register, unregister, toggleSelection, highlightItem } = item;
|
|
2279
|
+
const itemRef = useRef8(null);
|
|
2280
|
+
iconAppearance ??= config.iconAppearance;
|
|
2281
|
+
useEffect13(() => {
|
|
2282
|
+
register({
|
|
2283
|
+
value,
|
|
2284
|
+
disabled,
|
|
2285
|
+
ref: itemRef
|
|
2286
|
+
});
|
|
2287
|
+
return () => unregister(value);
|
|
2288
|
+
}, [value, disabled, register, unregister, children]);
|
|
2289
|
+
const isHighlighted = state.highlightedValue === value;
|
|
2290
|
+
const isSelected = state.value.includes(value);
|
|
2291
|
+
return /* @__PURE__ */ jsxs8(
|
|
2292
|
+
"li",
|
|
2293
|
+
{
|
|
2294
|
+
...restProps,
|
|
2295
|
+
ref: (node) => {
|
|
2296
|
+
itemRef.current = node;
|
|
2297
|
+
if (typeof ref === "function") ref(node);
|
|
2298
|
+
else if (ref) ref.current = node;
|
|
2299
|
+
},
|
|
2300
|
+
id: value,
|
|
2301
|
+
role: "option",
|
|
2302
|
+
"aria-disabled": disabled,
|
|
2303
|
+
"aria-selected": isSelected,
|
|
2304
|
+
"data-highlighted": isHighlighted ? "" : void 0,
|
|
2305
|
+
"data-selected": isSelected ? "" : void 0,
|
|
2306
|
+
"data-disabled": disabled ? "" : void 0,
|
|
2307
|
+
className: clsx9(
|
|
2308
|
+
"flex-row-1 items-center px-2 py-1 rounded-md",
|
|
2309
|
+
"data-highlighted:bg-primary/20",
|
|
2310
|
+
"data-disabled:text-disabled data-disabled:cursor-not-allowed",
|
|
2311
|
+
"not-data-disabled:cursor-pointer",
|
|
2312
|
+
className
|
|
2313
|
+
),
|
|
2314
|
+
onClick: (event) => {
|
|
2315
|
+
if (!disabled) {
|
|
2316
|
+
toggleSelection(value);
|
|
2317
|
+
if (!config.isMultiSelect) {
|
|
2318
|
+
trigger.toggleOpen(false);
|
|
2319
|
+
}
|
|
2320
|
+
restProps.onClick?.(event);
|
|
2321
|
+
}
|
|
2322
|
+
},
|
|
2323
|
+
onMouseEnter: (event) => {
|
|
2324
|
+
if (!disabled) {
|
|
2325
|
+
highlightItem(value);
|
|
2326
|
+
restProps.onMouseEnter?.(event);
|
|
2327
|
+
}
|
|
2328
|
+
},
|
|
2329
|
+
children: [
|
|
2330
|
+
iconAppearance === "left" && /* @__PURE__ */ jsx15(
|
|
2331
|
+
CheckIcon,
|
|
2332
|
+
{
|
|
2333
|
+
className: clsx9("w-4 h-4", { "opacity-0": !isSelected || disabled }),
|
|
2334
|
+
"aria-hidden": true
|
|
2335
|
+
}
|
|
2336
|
+
),
|
|
2337
|
+
children ?? value,
|
|
2338
|
+
iconAppearance === "right" && /* @__PURE__ */ jsx15(
|
|
2339
|
+
CheckIcon,
|
|
2340
|
+
{
|
|
2341
|
+
className: clsx9("w-4 h-4", { "opacity-0": !isSelected || disabled }),
|
|
2342
|
+
"aria-hidden": true
|
|
2343
|
+
}
|
|
2344
|
+
)
|
|
2345
|
+
]
|
|
2346
|
+
}
|
|
2347
|
+
);
|
|
2348
|
+
}
|
|
2349
|
+
);
|
|
2350
|
+
var defaultSelectButtonTranslation = {
|
|
2351
|
+
en: {
|
|
2352
|
+
clickToSelect: "Click to select"
|
|
2353
|
+
},
|
|
2354
|
+
de: {
|
|
2355
|
+
clickToSelect: "Zum ausw\xE4hlen dr\xFCcken"
|
|
2356
|
+
}
|
|
2357
|
+
};
|
|
2358
|
+
var SelectButton = forwardRef7(function SelectButton2({ placeholder, selectedDisplay, ...props }, ref) {
|
|
2359
|
+
const translation = useTranslation([defaultSelectButtonTranslation]);
|
|
2360
|
+
const { state, trigger } = useSelectContext();
|
|
2361
|
+
const { register, unregister, toggleOpen } = trigger;
|
|
2362
|
+
const innerRef = useRef8(null);
|
|
2363
|
+
useImperativeHandle2(ref, () => innerRef.current);
|
|
2364
|
+
useEffect13(() => {
|
|
2365
|
+
register(innerRef);
|
|
2366
|
+
return () => unregister();
|
|
2367
|
+
}, [register, unregister]);
|
|
2368
|
+
const disabled = !!props?.disabled || !!state.disabled;
|
|
2369
|
+
const invalid = state.invalid;
|
|
2370
|
+
const hasValue = state.value.length > 0;
|
|
2371
|
+
return /* @__PURE__ */ jsxs8(
|
|
2372
|
+
"button",
|
|
2373
|
+
{
|
|
2374
|
+
...props,
|
|
2375
|
+
ref: innerRef,
|
|
2376
|
+
id: state.id,
|
|
2377
|
+
className: clsx9(
|
|
2378
|
+
"flex-row-2 items-center justify-between bg-input-background text-input-text rounded-md px-2.5 py-2.5",
|
|
2379
|
+
"data-placeholder:text-description",
|
|
2380
|
+
props.className
|
|
2381
|
+
),
|
|
2382
|
+
onClick: () => toggleOpen(!state.isOpen),
|
|
2383
|
+
onKeyDown: (event) => {
|
|
2384
|
+
switch (event.key) {
|
|
2385
|
+
case "ArrowDown":
|
|
2386
|
+
toggleOpen(true, { highlightStartPosition: "first" });
|
|
2387
|
+
break;
|
|
2388
|
+
case "ArrowUp":
|
|
2389
|
+
toggleOpen(true, { highlightStartPosition: "last" });
|
|
2390
|
+
break;
|
|
2391
|
+
}
|
|
2392
|
+
},
|
|
2393
|
+
"data-placeholder": !hasValue ? "" : void 0,
|
|
2394
|
+
"data-disabled": disabled ? "" : void 0,
|
|
2395
|
+
"data-invalid": invalid ? "" : void 0,
|
|
2396
|
+
"aria-invalid": invalid,
|
|
2397
|
+
"aria-disabled": disabled,
|
|
2398
|
+
"aria-haspopup": "listbox",
|
|
2399
|
+
"aria-expanded": state.isOpen,
|
|
2400
|
+
"aria-controls": state.isOpen ? `${state.id}-listbox` : void 0,
|
|
2401
|
+
children: [
|
|
2402
|
+
hasValue ? selectedDisplay?.(state.value) ?? state.value.join(", ") : placeholder ?? translation("clickToSelect"),
|
|
2403
|
+
/* @__PURE__ */ jsx15(ExpansionIcon, { isExpanded: state.isOpen })
|
|
2404
|
+
]
|
|
2405
|
+
}
|
|
2406
|
+
);
|
|
2407
|
+
});
|
|
2408
|
+
var SelectChipDisplay = forwardRef7(function SelectChipDisplay2({ ...props }, ref) {
|
|
2409
|
+
const { state, trigger, item } = useSelectContext();
|
|
2410
|
+
const { register, unregister, toggleOpen } = trigger;
|
|
2411
|
+
const innerRef = useRef8(null);
|
|
2412
|
+
useImperativeHandle2(ref, () => innerRef.current);
|
|
2413
|
+
useEffect13(() => {
|
|
2414
|
+
register(innerRef);
|
|
2415
|
+
return () => unregister();
|
|
2416
|
+
}, [register, unregister]);
|
|
2417
|
+
const disabled = !!props?.disabled || !!state.disabled;
|
|
2418
|
+
const invalid = state.invalid;
|
|
2419
|
+
return /* @__PURE__ */ jsxs8(
|
|
2420
|
+
"div",
|
|
2421
|
+
{
|
|
2422
|
+
...props,
|
|
2423
|
+
ref: innerRef,
|
|
2424
|
+
className: clsx9(
|
|
2425
|
+
"flex flex-wrap flex-row gap-2 items-center bg-input-background text-input-text rounded-md px-2.5 py-2.5",
|
|
2426
|
+
props.className
|
|
2427
|
+
),
|
|
2428
|
+
"data-disabled": disabled ? "" : void 0,
|
|
2429
|
+
"data-invalid": invalid ? "" : void 0,
|
|
2430
|
+
"aria-invalid": invalid,
|
|
2431
|
+
"aria-disabled": disabled,
|
|
2432
|
+
children: [
|
|
2433
|
+
state.value.map((value) => /* @__PURE__ */ jsxs8(Chip, { className: "gap-x-2", children: [
|
|
2434
|
+
value,
|
|
2435
|
+
/* @__PURE__ */ jsx15(
|
|
2436
|
+
"button",
|
|
2437
|
+
{
|
|
2438
|
+
onClick: () => {
|
|
2439
|
+
item.toggleSelection(value, false);
|
|
2440
|
+
},
|
|
2441
|
+
className: "focus-within:text-negative hover:bg-negative/20 hover:text-negative rounded-md focus-style-none focus-visible:ring-2 focus-visible:ring-negative focus-visible:bg-negative/20",
|
|
2442
|
+
children: /* @__PURE__ */ jsx15(XIcon, {})
|
|
2443
|
+
}
|
|
2444
|
+
)
|
|
2445
|
+
] }, value)),
|
|
2446
|
+
/* @__PURE__ */ jsx15(
|
|
2447
|
+
IconButton,
|
|
2448
|
+
{
|
|
2449
|
+
id: state.id,
|
|
2450
|
+
onClick: () => toggleOpen(),
|
|
2451
|
+
onKeyDown: (event) => {
|
|
2452
|
+
switch (event.key) {
|
|
2453
|
+
case "ArrowDown":
|
|
2454
|
+
toggleOpen(true, { highlightStartPosition: "first" });
|
|
2455
|
+
break;
|
|
2456
|
+
case "ArrowUp":
|
|
2457
|
+
toggleOpen(true, { highlightStartPosition: "last" });
|
|
2458
|
+
}
|
|
2459
|
+
},
|
|
2460
|
+
size: "small",
|
|
2461
|
+
color: "neutral",
|
|
2462
|
+
"aria-invalid": invalid,
|
|
2463
|
+
"aria-disabled": disabled,
|
|
2464
|
+
"aria-haspopup": "listbox",
|
|
2465
|
+
"aria-expanded": state.isOpen,
|
|
2466
|
+
"aria-controls": state.isOpen ? `${state.id}-listbox` : void 0,
|
|
2467
|
+
children: /* @__PURE__ */ jsx15(Plus, {})
|
|
2468
|
+
}
|
|
2469
|
+
)
|
|
2470
|
+
]
|
|
2471
|
+
}
|
|
2472
|
+
);
|
|
2473
|
+
});
|
|
2474
|
+
var SelectContent = forwardRef7(
|
|
2475
|
+
function SelectContent2({
|
|
2476
|
+
alignment,
|
|
2477
|
+
orientation = "vertical",
|
|
2478
|
+
...props
|
|
2479
|
+
}, ref) {
|
|
2480
|
+
const innerRef = useRef8(null);
|
|
2481
|
+
useImperativeHandle2(ref, () => innerRef.current);
|
|
2482
|
+
const { trigger, state, config, item } = useSelectContext();
|
|
2483
|
+
const position = useFloatingElement({
|
|
2484
|
+
active: state.isOpen,
|
|
2485
|
+
anchorRef: trigger.ref,
|
|
2486
|
+
containerRef: innerRef,
|
|
2487
|
+
...alignment
|
|
2488
|
+
});
|
|
2489
|
+
useFocusTrap({
|
|
2490
|
+
container: innerRef,
|
|
2491
|
+
active: state.isOpen && !!position
|
|
2492
|
+
});
|
|
2493
|
+
return createPortal(
|
|
2494
|
+
/* @__PURE__ */ jsxs8(Fragment4, { children: [
|
|
2495
|
+
/* @__PURE__ */ jsx15(
|
|
2496
|
+
"div",
|
|
2497
|
+
{
|
|
2498
|
+
hidden: !state.isOpen,
|
|
2499
|
+
onClick: () => trigger.toggleOpen(false),
|
|
2500
|
+
className: clsx9("fixed w-screen h-screen inset-0")
|
|
2501
|
+
}
|
|
2502
|
+
),
|
|
2503
|
+
/* @__PURE__ */ jsx15(
|
|
2504
|
+
"ul",
|
|
2505
|
+
{
|
|
2506
|
+
...props,
|
|
2507
|
+
id: `${state.id}-listbox`,
|
|
2508
|
+
ref: innerRef,
|
|
2509
|
+
hidden: !state.isOpen,
|
|
2510
|
+
onKeyDown: (event) => {
|
|
2511
|
+
switch (event.key) {
|
|
2512
|
+
case "Escape":
|
|
2513
|
+
trigger.toggleOpen(false);
|
|
2514
|
+
event.preventDefault();
|
|
2515
|
+
event.stopPropagation();
|
|
2516
|
+
break;
|
|
2517
|
+
case match(orientation, {
|
|
2518
|
+
vertical: "ArrowDown",
|
|
2519
|
+
horizontal: "ArrowUp"
|
|
2520
|
+
}):
|
|
2521
|
+
item.moveHighlightedIndex(1);
|
|
2522
|
+
event.preventDefault();
|
|
2523
|
+
break;
|
|
2524
|
+
case match(orientation, {
|
|
2525
|
+
vertical: "ArrowUp",
|
|
2526
|
+
horizontal: "ArrowDown"
|
|
2527
|
+
}):
|
|
2528
|
+
item.moveHighlightedIndex(-1);
|
|
2529
|
+
event.preventDefault();
|
|
2530
|
+
break;
|
|
2531
|
+
case "Home":
|
|
2532
|
+
event.preventDefault();
|
|
2533
|
+
break;
|
|
2534
|
+
case "End":
|
|
2535
|
+
event.preventDefault();
|
|
2536
|
+
break;
|
|
2537
|
+
case "Enter":
|
|
2538
|
+
// Fall through
|
|
2539
|
+
case " ":
|
|
2540
|
+
if (state.highlightedValue) {
|
|
2541
|
+
item.toggleSelection(state.highlightedValue);
|
|
2542
|
+
if (!config.isMultiSelect) {
|
|
2543
|
+
trigger.toggleOpen(false);
|
|
2544
|
+
}
|
|
2545
|
+
event.preventDefault();
|
|
2546
|
+
}
|
|
2547
|
+
break;
|
|
2548
|
+
}
|
|
2549
|
+
},
|
|
2550
|
+
className: clsx9("flex-col-0 p-2 bg-menu-background text-menu-text rounded-md shadow-hw-bottom focus-style-within overflow-auto", props.className),
|
|
2551
|
+
style: {
|
|
2552
|
+
opacity: position ? void 0 : 0,
|
|
2553
|
+
position: "fixed",
|
|
2554
|
+
...position
|
|
2555
|
+
},
|
|
2556
|
+
role: "listbox",
|
|
2557
|
+
"aria-multiselectable": config.isMultiSelect,
|
|
2558
|
+
"aria-orientation": orientation,
|
|
2559
|
+
tabIndex: position ? 0 : void 0,
|
|
2560
|
+
children: props.children
|
|
2561
|
+
}
|
|
2562
|
+
)
|
|
2563
|
+
] }),
|
|
2564
|
+
document.body
|
|
2565
|
+
);
|
|
2566
|
+
}
|
|
2567
|
+
);
|
|
2568
|
+
var Select = forwardRef7(function Select2({
|
|
2569
|
+
children,
|
|
2570
|
+
contentPanelProps,
|
|
2571
|
+
buttonProps,
|
|
2572
|
+
...props
|
|
2573
|
+
}, ref) {
|
|
2574
|
+
return /* @__PURE__ */ jsxs8(SelectRoot, { ...props, isMultiSelect: false, children: [
|
|
2575
|
+
/* @__PURE__ */ jsx15(
|
|
2576
|
+
SelectButton,
|
|
2577
|
+
{
|
|
2578
|
+
ref,
|
|
2579
|
+
...buttonProps,
|
|
2580
|
+
selectedDisplay: (values) => {
|
|
2581
|
+
const value = values[0];
|
|
2582
|
+
if (!buttonProps?.selectedDisplay) return void 0;
|
|
2583
|
+
return buttonProps.selectedDisplay(value);
|
|
2584
|
+
}
|
|
2585
|
+
}
|
|
2586
|
+
),
|
|
2587
|
+
/* @__PURE__ */ jsx15(SelectContent, { ...contentPanelProps, children })
|
|
2588
|
+
] });
|
|
2589
|
+
});
|
|
2590
|
+
var SelectUncontrolled = forwardRef7(function SelectUncontrolled2({
|
|
2591
|
+
value: initialValue,
|
|
2592
|
+
onValueChanged,
|
|
2593
|
+
...props
|
|
2594
|
+
}, ref) {
|
|
2595
|
+
const [value, setValue] = useState14(initialValue);
|
|
2596
|
+
useEffect13(() => {
|
|
2597
|
+
setValue(initialValue);
|
|
2598
|
+
}, [initialValue]);
|
|
2599
|
+
return /* @__PURE__ */ jsx15(
|
|
2600
|
+
Select,
|
|
2601
|
+
{
|
|
2602
|
+
...props,
|
|
2603
|
+
ref,
|
|
2604
|
+
value,
|
|
2605
|
+
onValueChanged: (value2) => {
|
|
2606
|
+
setValue(value2);
|
|
2607
|
+
onValueChanged?.(value2);
|
|
2608
|
+
}
|
|
2609
|
+
}
|
|
2610
|
+
);
|
|
2611
|
+
});
|
|
2612
|
+
var MultiSelect = forwardRef7(function MultiSelect2({
|
|
2613
|
+
children,
|
|
2614
|
+
contentPanelProps,
|
|
2615
|
+
buttonProps,
|
|
2616
|
+
...props
|
|
2617
|
+
}, ref) {
|
|
2618
|
+
return /* @__PURE__ */ jsxs8(SelectRoot, { ...props, isMultiSelect: true, children: [
|
|
2619
|
+
/* @__PURE__ */ jsx15(SelectButton, { ref, ...buttonProps }),
|
|
2620
|
+
/* @__PURE__ */ jsx15(SelectContent, { ...contentPanelProps, children })
|
|
2621
|
+
] });
|
|
2622
|
+
});
|
|
2623
|
+
var MultiSelectUncontrolled = forwardRef7(function MultiSelectUncontrolled2({
|
|
2624
|
+
values: initialValues,
|
|
2625
|
+
onValuesChanged,
|
|
2626
|
+
...props
|
|
2627
|
+
}, ref) {
|
|
2628
|
+
const [values, setValues] = useState14(initialValues);
|
|
2629
|
+
useEffect13(() => {
|
|
2630
|
+
setValues(initialValues);
|
|
2631
|
+
}, [initialValues]);
|
|
2632
|
+
return /* @__PURE__ */ jsx15(
|
|
2633
|
+
MultiSelect,
|
|
2634
|
+
{
|
|
2635
|
+
...props,
|
|
2636
|
+
ref,
|
|
2637
|
+
values,
|
|
2638
|
+
onValuesChanged: (value) => {
|
|
2639
|
+
setValues(value);
|
|
2640
|
+
onValuesChanged?.(value);
|
|
2641
|
+
}
|
|
2642
|
+
}
|
|
2643
|
+
);
|
|
2644
|
+
});
|
|
2645
|
+
var MultiSelectChipDisplay = forwardRef7(function MultiSelectChipDisplay2({
|
|
2646
|
+
children,
|
|
2647
|
+
contentPanelProps,
|
|
2648
|
+
chipDisplayProps,
|
|
2649
|
+
...props
|
|
2650
|
+
}, ref) {
|
|
2651
|
+
return /* @__PURE__ */ jsxs8(SelectRoot, { ...props, isMultiSelect: true, children: [
|
|
2652
|
+
/* @__PURE__ */ jsx15(SelectChipDisplay, { ref, ...chipDisplayProps }),
|
|
2653
|
+
/* @__PURE__ */ jsx15(SelectContent, { ...contentPanelProps, children })
|
|
2654
|
+
] });
|
|
2655
|
+
});
|
|
2656
|
+
var MultiSelectChipDisplayUncontrolled = forwardRef7(function MultiSelectChipDisplayUncontrolled2({
|
|
2657
|
+
values: initialValues,
|
|
2658
|
+
onValuesChanged,
|
|
2659
|
+
...props
|
|
2660
|
+
}, ref) {
|
|
2661
|
+
const [values, setValues] = useState14(initialValues);
|
|
2662
|
+
useEffect13(() => {
|
|
2663
|
+
setValues(initialValues);
|
|
2664
|
+
}, [initialValues]);
|
|
2665
|
+
return /* @__PURE__ */ jsx15(
|
|
2666
|
+
MultiSelectChipDisplay,
|
|
2667
|
+
{
|
|
2668
|
+
...props,
|
|
2669
|
+
ref,
|
|
2670
|
+
values,
|
|
2671
|
+
onValuesChanged: (value) => {
|
|
2672
|
+
setValues(value);
|
|
2673
|
+
onValuesChanged?.(value);
|
|
2674
|
+
}
|
|
2675
|
+
}
|
|
2676
|
+
);
|
|
2677
|
+
});
|
|
2678
|
+
|
|
2679
|
+
// src/components/properties/MultiSelectProperty.tsx
|
|
2680
|
+
import { jsx as jsx16 } from "react/jsx-runtime";
|
|
2681
|
+
var MultiSelectProperty = ({
|
|
2682
|
+
values,
|
|
2683
|
+
options,
|
|
2684
|
+
onValuesChanged,
|
|
2685
|
+
...props
|
|
2686
|
+
}) => {
|
|
2687
|
+
const hasValue = values.length > 0;
|
|
2688
|
+
return /* @__PURE__ */ jsx16(
|
|
2689
|
+
PropertyBase,
|
|
2690
|
+
{
|
|
2691
|
+
...props,
|
|
2692
|
+
hasValue,
|
|
2693
|
+
icon: /* @__PURE__ */ jsx16(List, { size: 24 }),
|
|
2694
|
+
input: ({ softRequired }) => /* @__PURE__ */ jsx16(
|
|
2695
|
+
MultiSelectChipDisplay,
|
|
2696
|
+
{
|
|
2697
|
+
values,
|
|
2698
|
+
onValuesChanged,
|
|
2699
|
+
disabled: props.readOnly,
|
|
2700
|
+
contentPanelProps: {
|
|
2701
|
+
className: clsx10(
|
|
2702
|
+
"!border-none !min-h-10"
|
|
2703
|
+
)
|
|
2704
|
+
},
|
|
2705
|
+
chipDisplayProps: {
|
|
2706
|
+
className: clsx10({
|
|
2707
|
+
"!bg-warning !text-surface-warning": softRequired && !hasValue
|
|
2708
|
+
})
|
|
2709
|
+
},
|
|
2710
|
+
children: options.map((value) => /* @__PURE__ */ jsx16(SelectOption, { value }, value))
|
|
2711
|
+
}
|
|
2712
|
+
)
|
|
2713
|
+
}
|
|
2714
|
+
);
|
|
2715
|
+
};
|
|
2716
|
+
|
|
2717
|
+
// src/components/properties/NumberProperty.tsx
|
|
2718
|
+
import { Binary } from "lucide-react";
|
|
2719
|
+
import clsx11 from "clsx";
|
|
2720
|
+
import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
2721
|
+
var defaultNumberPropertyTranslation = {
|
|
2722
|
+
en: {
|
|
2723
|
+
value: "Value"
|
|
2724
|
+
},
|
|
2725
|
+
de: {
|
|
2726
|
+
value: "Wert"
|
|
2727
|
+
}
|
|
2728
|
+
};
|
|
2729
|
+
var NumberProperty = ({
|
|
2730
|
+
overwriteTranslation,
|
|
2731
|
+
value,
|
|
2732
|
+
onChange = noop,
|
|
2733
|
+
onRemove = noop,
|
|
2734
|
+
onEditComplete = noop,
|
|
2735
|
+
readOnly,
|
|
2736
|
+
suffix,
|
|
2737
|
+
...baseProps
|
|
2738
|
+
}) => {
|
|
2739
|
+
const translation = useTranslation([defaultNumberPropertyTranslation], overwriteTranslation);
|
|
2740
|
+
const hasValue = value !== void 0;
|
|
2741
|
+
return /* @__PURE__ */ jsx17(
|
|
2742
|
+
PropertyBase,
|
|
2743
|
+
{
|
|
2744
|
+
...baseProps,
|
|
2745
|
+
onRemove,
|
|
2746
|
+
hasValue,
|
|
2747
|
+
icon: /* @__PURE__ */ jsx17(Binary, { size: 24 }),
|
|
2748
|
+
input: ({ softRequired }) => /* @__PURE__ */ jsxs9(
|
|
2749
|
+
"div",
|
|
2750
|
+
{
|
|
2751
|
+
className: clsx11("flex-row-2 grow", { "text-warning": softRequired && !hasValue }),
|
|
2752
|
+
children: [
|
|
2753
|
+
/* @__PURE__ */ jsx17(
|
|
2754
|
+
Input,
|
|
2755
|
+
{
|
|
2756
|
+
className: clsx11("!ring-0 !border-0 !outline-0 !p-0 !m-0 !w-fit !shadow-none !rounded-none", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
|
|
2757
|
+
value: value?.toString() ?? "",
|
|
2758
|
+
type: "number",
|
|
2759
|
+
readOnly,
|
|
2760
|
+
placeholder: `${translation("value")}...`,
|
|
2761
|
+
onChangeText: (value2) => {
|
|
2762
|
+
const numberValue = parseFloat(value2);
|
|
2763
|
+
if (isNaN(numberValue)) {
|
|
2764
|
+
onRemove();
|
|
2765
|
+
} else {
|
|
2766
|
+
onChange(numberValue);
|
|
2767
|
+
}
|
|
2768
|
+
},
|
|
2769
|
+
onEditCompleted: (value2) => {
|
|
2770
|
+
const numberValue = parseFloat(value2);
|
|
2771
|
+
if (isNaN(numberValue)) {
|
|
2772
|
+
onRemove();
|
|
2773
|
+
} else {
|
|
2774
|
+
onEditComplete(numberValue);
|
|
2775
|
+
}
|
|
2776
|
+
}
|
|
2777
|
+
}
|
|
2778
|
+
),
|
|
2779
|
+
suffix && /* @__PURE__ */ jsx17("span", { className: clsx11("ml-1", { "bg-surface-warning": softRequired && !hasValue }), children: suffix })
|
|
2780
|
+
]
|
|
2781
|
+
}
|
|
2782
|
+
)
|
|
2783
|
+
}
|
|
2784
|
+
);
|
|
2785
|
+
};
|
|
2786
|
+
|
|
2787
|
+
// src/components/properties/SelectProperty.tsx
|
|
2788
|
+
import { List as List2 } from "lucide-react";
|
|
2789
|
+
import clsx12 from "clsx";
|
|
2790
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
2791
|
+
var SingleSelectProperty = ({
|
|
2792
|
+
value,
|
|
2793
|
+
options,
|
|
2794
|
+
onValueChanged,
|
|
2795
|
+
...props
|
|
2796
|
+
}) => {
|
|
2797
|
+
const hasValue = value !== void 0;
|
|
2798
|
+
return /* @__PURE__ */ jsx18(
|
|
2799
|
+
PropertyBase,
|
|
2800
|
+
{
|
|
2801
|
+
...props,
|
|
2802
|
+
hasValue,
|
|
2803
|
+
icon: /* @__PURE__ */ jsx18(List2, { size: 24 }),
|
|
2804
|
+
input: ({ softRequired }) => /* @__PURE__ */ jsx18(
|
|
2805
|
+
Select,
|
|
2806
|
+
{
|
|
2807
|
+
value,
|
|
2808
|
+
onValueChanged,
|
|
2809
|
+
disabled: props.readOnly,
|
|
2810
|
+
buttonProps: {
|
|
2811
|
+
className: clsx12(
|
|
2812
|
+
"border-none w-full",
|
|
2813
|
+
{
|
|
2814
|
+
"!bg-warning !text-surface-warning": softRequired && !hasValue
|
|
2815
|
+
}
|
|
2816
|
+
)
|
|
2817
|
+
},
|
|
2818
|
+
children: options.map((value2) => /* @__PURE__ */ jsx18(SelectOption, { value: value2 }, value2))
|
|
2819
|
+
}
|
|
2820
|
+
)
|
|
2821
|
+
}
|
|
2822
|
+
);
|
|
2823
|
+
};
|
|
2824
|
+
|
|
2825
|
+
// src/components/properties/TextProperty.tsx
|
|
2826
|
+
import { Text } from "lucide-react";
|
|
2827
|
+
import clsx14 from "clsx";
|
|
2828
|
+
|
|
2829
|
+
// src/components/user-action/Textarea.tsx
|
|
2830
|
+
import { forwardRef as forwardRef8, useEffect as useEffect14, useId as useId5, useState as useState15 } from "react";
|
|
2831
|
+
import clsx13 from "clsx";
|
|
2832
|
+
import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
2833
|
+
var Textarea = forwardRef8(function Textarea2({
|
|
2834
|
+
id,
|
|
2835
|
+
onChange,
|
|
2836
|
+
onChangeText,
|
|
2837
|
+
onBlur,
|
|
2838
|
+
onEditCompleted,
|
|
2839
|
+
saveDelayOptions,
|
|
2840
|
+
defaultStyle = true,
|
|
2841
|
+
invalid = false,
|
|
2842
|
+
disabled = false,
|
|
2843
|
+
className,
|
|
2844
|
+
...props
|
|
2845
|
+
}, ref) {
|
|
2846
|
+
const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
|
|
2847
|
+
const onEditCompletedWrapper = (text) => {
|
|
2848
|
+
onEditCompleted?.(text);
|
|
2849
|
+
clearTimer();
|
|
2850
|
+
};
|
|
2851
|
+
return /* @__PURE__ */ jsx19(
|
|
2852
|
+
"textarea",
|
|
2853
|
+
{
|
|
2854
|
+
ref,
|
|
2855
|
+
id,
|
|
2856
|
+
className: clsx13(
|
|
2857
|
+
"resize-none w-full h-32 overflow-y-scroll",
|
|
2858
|
+
"py-2 px-3 rounded-md border-1",
|
|
2859
|
+
{
|
|
2860
|
+
"bg-input-background text-input-text hover:border-primary focus-within:border-primary focus-within:ring-2 ring-focus": !disabled && !invalid,
|
|
2861
|
+
"bg-on-negative text-negative border-negative-border hover:border-negative-border-hover focus-visible:ring-negative-border": invalid && !disabled && defaultStyle,
|
|
2862
|
+
"text-disabled-text bg-disabled-background border-disabled-border": disabled && defaultStyle
|
|
2863
|
+
},
|
|
2864
|
+
className
|
|
2865
|
+
),
|
|
2866
|
+
onChange: (event) => {
|
|
2867
|
+
const value = event.target.value;
|
|
2868
|
+
restartTimer(() => {
|
|
2869
|
+
onEditCompletedWrapper(value);
|
|
2870
|
+
});
|
|
2871
|
+
onChange?.(event);
|
|
2872
|
+
onChangeText?.(value);
|
|
2873
|
+
},
|
|
2874
|
+
onBlur: (event) => {
|
|
2875
|
+
onBlur?.(event);
|
|
2876
|
+
onEditCompletedWrapper(event.target.value);
|
|
2877
|
+
},
|
|
2878
|
+
disabled,
|
|
2879
|
+
...props
|
|
2880
|
+
}
|
|
2881
|
+
);
|
|
2882
|
+
});
|
|
2883
|
+
|
|
2884
|
+
// src/components/properties/TextProperty.tsx
|
|
2885
|
+
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
2886
|
+
var defaultTextPropertyTranslation = {
|
|
2887
|
+
en: {
|
|
2888
|
+
text: "Text"
|
|
2889
|
+
},
|
|
2890
|
+
de: {
|
|
2891
|
+
text: "Text"
|
|
2892
|
+
}
|
|
2893
|
+
};
|
|
2894
|
+
var TextProperty = ({
|
|
2895
|
+
overwriteTranslation,
|
|
2896
|
+
value,
|
|
2897
|
+
readOnly,
|
|
2898
|
+
onChange = noop,
|
|
2899
|
+
onRemove = noop,
|
|
2900
|
+
onEditComplete = noop,
|
|
2901
|
+
...baseProps
|
|
2902
|
+
}) => {
|
|
2903
|
+
const translation = useTranslation([defaultTextPropertyTranslation], overwriteTranslation);
|
|
2904
|
+
const hasValue = value !== void 0;
|
|
2905
|
+
return /* @__PURE__ */ jsx20(
|
|
2906
|
+
PropertyBase,
|
|
2907
|
+
{
|
|
2908
|
+
...baseProps,
|
|
2909
|
+
onRemove,
|
|
2910
|
+
hasValue,
|
|
2911
|
+
icon: /* @__PURE__ */ jsx20(Text, { size: 24 }),
|
|
2912
|
+
input: ({ softRequired }) => /* @__PURE__ */ jsx20(
|
|
2913
|
+
Textarea,
|
|
2914
|
+
{
|
|
2915
|
+
className: clsx14({
|
|
2916
|
+
"bg-surface-warning placeholder-warning": softRequired && !hasValue
|
|
2917
|
+
}),
|
|
2918
|
+
rows: 5,
|
|
2919
|
+
defaultStyle: false,
|
|
2920
|
+
value: value ?? "",
|
|
2921
|
+
readOnly,
|
|
2922
|
+
placeholder: `${translation("text")}...`,
|
|
2923
|
+
onChangeText: (value2) => {
|
|
2924
|
+
if (!value2) {
|
|
2925
|
+
onRemove();
|
|
2926
|
+
} else {
|
|
2927
|
+
onChange(value2);
|
|
2928
|
+
}
|
|
2929
|
+
},
|
|
2930
|
+
onEditCompleted: (value2) => {
|
|
2931
|
+
if (!value2) {
|
|
2932
|
+
onRemove();
|
|
2933
|
+
} else {
|
|
2934
|
+
onEditComplete(value2);
|
|
2935
|
+
}
|
|
2936
|
+
}
|
|
2937
|
+
}
|
|
2938
|
+
)
|
|
2939
|
+
}
|
|
2940
|
+
);
|
|
2941
|
+
};
|
|
2942
|
+
export {
|
|
2943
|
+
CheckboxProperty,
|
|
2944
|
+
DateProperty,
|
|
2945
|
+
MultiSelectProperty,
|
|
2946
|
+
NumberProperty,
|
|
2947
|
+
PropertyBase,
|
|
2948
|
+
SingleSelectProperty,
|
|
2949
|
+
TextProperty
|
|
2950
|
+
};
|
|
2951
|
+
//# sourceMappingURL=index.mjs.map
|