@telepix-lab/telepix-ui 0.1.2 → 0.2.1
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/cjs/autocomplete/styles.d.ts +0 -1
- package/dist/cjs/hooks/usePreferColors.d.ts +13 -0
- package/dist/cjs/index.js +737 -1511
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/styles/primitiveColors.stylex.d.ts +6 -6
- package/dist/cjs/styles/semanticColors.stylex.d.ts +98 -0
- package/dist/cjs/styles.css +151 -57
- package/dist/esm/autocomplete/styles.d.ts +0 -1
- package/dist/esm/hooks/usePreferColors.d.ts +13 -0
- package/dist/esm/index.js +736 -1512
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/styles/primitiveColors.stylex.d.ts +6 -6
- package/dist/esm/styles/semanticColors.stylex.d.ts +98 -0
- package/dist/esm/styles.css +151 -57
- package/dist/index.d.ts +105 -8
- package/package.json +2 -1
package/dist/cjs/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var stylex = require('@stylexjs/stylex');
|
|
5
4
|
var React = require('react');
|
|
5
|
+
var stylex = require('@stylexjs/stylex');
|
|
6
6
|
var ReactDOM = require('react-dom');
|
|
7
7
|
var reactDayPicker = require('react-day-picker');
|
|
8
8
|
|
|
@@ -23,33 +23,10 @@ function _interopNamespaceDefault(e) {
|
|
|
23
23
|
return Object.freeze(n);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
var stylex__namespace = /*#__PURE__*/_interopNamespaceDefault(stylex);
|
|
27
26
|
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
27
|
+
var stylex__namespace = /*#__PURE__*/_interopNamespaceDefault(stylex);
|
|
28
28
|
var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
|
|
29
29
|
|
|
30
|
-
// 간격 변수 정의
|
|
31
|
-
const spacing = {
|
|
32
|
-
xs: "var(--tpst1aa85u5)",
|
|
33
|
-
sm: "var(--tpst15cl33r)",
|
|
34
|
-
md: "var(--tpst1s1bzlu)",
|
|
35
|
-
lg: "var(--tpstr1ymy1)",
|
|
36
|
-
xl: "var(--tpst13zox1l)",
|
|
37
|
-
xxl: "var(--tpst1xkcubw)",
|
|
38
|
-
xxxl: "var(--tpst67ua5f)",
|
|
39
|
-
__themeName__: "tpst1cmuz2h"
|
|
40
|
-
};
|
|
41
|
-
// 테두리 반경 변수 정의
|
|
42
|
-
const borderRadius = {
|
|
43
|
-
none: "var(--tpst16kocez)",
|
|
44
|
-
xs: "var(--tpst1vsob78)",
|
|
45
|
-
sm: "var(--tpst1w7bvkk)",
|
|
46
|
-
md: "var(--tpst1ls88jo)",
|
|
47
|
-
lg: "var(--tpst1d2ic4p)",
|
|
48
|
-
xl: "var(--tpst1bkg6mz)",
|
|
49
|
-
full: "var(--tpstbu84cc)",
|
|
50
|
-
__themeName__: "tpstun8bdo"
|
|
51
|
-
};
|
|
52
|
-
|
|
53
30
|
// 프리미티브 컬러 변수 정의
|
|
54
31
|
const primitiveColors = {
|
|
55
32
|
blue100: "var(--tpstqe013h)",
|
|
@@ -70,16 +47,16 @@ const primitiveColors = {
|
|
|
70
47
|
cyan700: "var(--tpsth1uc7g)",
|
|
71
48
|
cyan800: "var(--tpsttewm74)",
|
|
72
49
|
cyan900: "var(--tpst1ts0yxk)",
|
|
50
|
+
darkOpacity25: "var(--tpst1695na0)",
|
|
51
|
+
darkOpacity50: "var(--tpstoyk8v8)",
|
|
73
52
|
darkOpacity100: "var(--tpst101zq66)",
|
|
74
53
|
darkOpacity150: "var(--tpst18059y4)",
|
|
75
54
|
darkOpacity200: "var(--tpst1o2qj1w)",
|
|
76
|
-
darkOpacity25: "var(--tpst1695na0)",
|
|
77
55
|
darkOpacity250: "var(--tpst1e4u9cd)",
|
|
78
56
|
darkOpacity300: "var(--tpstzzylim)",
|
|
79
57
|
darkOpacity350: "var(--tpst1giqxg)",
|
|
80
58
|
darkOpacity400: "var(--tpst1ckp6cb)",
|
|
81
59
|
darkOpacity450: "var(--tpst1ujyhgx)",
|
|
82
|
-
darkOpacity50: "var(--tpstoyk8v8)",
|
|
83
60
|
darkOpacity500: "var(--tpstdb8mlt)",
|
|
84
61
|
darkOpacity550: "var(--tpst142inpb)",
|
|
85
62
|
darkOpacity600: "var(--tpstrvxn8n)",
|
|
@@ -98,16 +75,16 @@ const primitiveColors = {
|
|
|
98
75
|
green700: "var(--tpst1a1gxqa)",
|
|
99
76
|
green800: "var(--tpstb6uyui)",
|
|
100
77
|
green900: "var(--tpstklhf60)",
|
|
78
|
+
lightOpacity25: "var(--tpstevrkdv)",
|
|
79
|
+
lightOpacity50: "var(--tpst8kgh2v)",
|
|
101
80
|
lightOpacity100: "var(--tpst1i0r5ji)",
|
|
102
81
|
lightOpacity150: "var(--tpst1y5wwdd)",
|
|
103
82
|
lightOpacity200: "var(--tpst1qyy4b3)",
|
|
104
|
-
lightOpacity25: "var(--tpstevrkdv)",
|
|
105
83
|
lightOpacity250: "var(--tpst9u9sq4)",
|
|
106
84
|
lightOpacity300: "var(--tpst9ontey)",
|
|
107
85
|
lightOpacity350: "var(--tpst7h2gr7)",
|
|
108
86
|
lightOpacity400: "var(--tpstrlh8f2)",
|
|
109
87
|
lightOpacity450: "var(--tpstpvck6k)",
|
|
110
|
-
lightOpacity50: "var(--tpst8kgh2v)",
|
|
111
88
|
lightOpacity500: "var(--tpstwf3o2r)",
|
|
112
89
|
lightOpacity550: "var(--tpst1yklry3)",
|
|
113
90
|
lightOpacity600: "var(--tpst1pqr7tr)",
|
|
@@ -126,16 +103,16 @@ const primitiveColors = {
|
|
|
126
103
|
magenta700: "var(--tpst11snvgx)",
|
|
127
104
|
magenta800: "var(--tpst14beq8s)",
|
|
128
105
|
magenta900: "var(--tpstzb1amu)",
|
|
106
|
+
neutral25: "var(--tpsttwjrp6)",
|
|
107
|
+
neutral50: "var(--tpst1oe8qtm)",
|
|
129
108
|
neutral100: "var(--tpst1gpymmf)",
|
|
130
109
|
neutral150: "var(--tpst1wxl5pq)",
|
|
131
110
|
neutral200: "var(--tpst12b1wd7)",
|
|
132
|
-
neutral25: "var(--tpsttwjrp6)",
|
|
133
111
|
neutral250: "var(--tpstxadivy)",
|
|
134
112
|
neutral300: "var(--tpst13x3j6w)",
|
|
135
113
|
neutral350: "var(--tpstihxxi9)",
|
|
136
114
|
neutral400: "var(--tpstv2m2ve)",
|
|
137
115
|
neutral450: "var(--tpstiiea8d)",
|
|
138
|
-
neutral50: "var(--tpst1oe8qtm)",
|
|
139
116
|
neutral500: "var(--tpst1yltxr6)",
|
|
140
117
|
neutral550: "var(--tpstr8jwi2)",
|
|
141
118
|
neutral600: "var(--tpst1dl1ny3)",
|
|
@@ -278,6 +255,89 @@ const semanticColors = {
|
|
|
278
255
|
transparent: "var(--tpst1wrmwgo)",
|
|
279
256
|
__themeName__: "tpst1h3jhwn"
|
|
280
257
|
};
|
|
258
|
+
const lightMode = {
|
|
259
|
+
$$css: true,
|
|
260
|
+
tpst1h3jhwn: "tpst1eqgcyt tpst1h3jhwn"
|
|
261
|
+
};
|
|
262
|
+
const darkMode = {
|
|
263
|
+
$$css: true,
|
|
264
|
+
tpst1h3jhwn: "tpst1bbvikf tpst1h3jhwn"
|
|
265
|
+
};
|
|
266
|
+
|
|
267
|
+
const usePreferColors = () => {
|
|
268
|
+
const [dataTheme, setDataTheme] = React.useState("light");
|
|
269
|
+
const initTheme = () => {
|
|
270
|
+
const targetNode = document.documentElement; // <html> 엘리먼트
|
|
271
|
+
const currentTheme = targetNode.getAttribute("data-theme");
|
|
272
|
+
// currentTheme이 없으면 system의 기본 테마를 사용
|
|
273
|
+
if (currentTheme === "dark" || currentTheme === "light") {
|
|
274
|
+
setDataTheme(currentTheme);
|
|
275
|
+
} else {
|
|
276
|
+
// matchMedia를 사용하여 시스템의 기본 테마를 확인
|
|
277
|
+
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
278
|
+
// 시스템의 기본 테마가 dark이면 data-theme을 "dark"로 설정,
|
|
279
|
+
// 아니면 "light"로 설정
|
|
280
|
+
prefersDark ? setDataTheme("dark") : setDataTheme("light");
|
|
281
|
+
}
|
|
282
|
+
};
|
|
283
|
+
React.useEffect(() => {
|
|
284
|
+
const targetNode = document.documentElement; // <html> 엘리먼트
|
|
285
|
+
const observer = new MutationObserver(mutationsList => {
|
|
286
|
+
for (const mutation of mutationsList) {
|
|
287
|
+
if (mutation.type === "attributes" && mutation.attributeName === "data-theme") {
|
|
288
|
+
const currentTheme = targetNode.getAttribute("data-theme");
|
|
289
|
+
// currentTheme이 없으면 system의 기본 테마를 사용
|
|
290
|
+
if (currentTheme === "dark" || currentTheme === "light") {
|
|
291
|
+
setDataTheme(currentTheme);
|
|
292
|
+
} else {
|
|
293
|
+
// matchMedia를 사용하여 시스템의 기본 테마를 확인
|
|
294
|
+
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
295
|
+
// 시스템의 기본 테마가 dark이면 data-theme을 "dark"로 설정,
|
|
296
|
+
// 아니면 "light"로 설정
|
|
297
|
+
prefersDark ? setDataTheme("dark") : setDataTheme("light");
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
});
|
|
302
|
+
observer.observe(targetNode, {
|
|
303
|
+
attributes: true,
|
|
304
|
+
// 속성 감시
|
|
305
|
+
attributeFilter: ["data-theme"] // data-theme만 감시
|
|
306
|
+
});
|
|
307
|
+
initTheme();
|
|
308
|
+
}, []);
|
|
309
|
+
const setStyleXProps = (...styles) => {
|
|
310
|
+
return stylex__namespace.props(dataTheme === "dark" ? darkMode : lightMode, ...styles);
|
|
311
|
+
};
|
|
312
|
+
return {
|
|
313
|
+
setStyleXProps,
|
|
314
|
+
dataTheme,
|
|
315
|
+
setDataTheme
|
|
316
|
+
};
|
|
317
|
+
};
|
|
318
|
+
|
|
319
|
+
// 간격 변수 정의
|
|
320
|
+
const spacing = {
|
|
321
|
+
xs: "var(--tpst1aa85u5)",
|
|
322
|
+
sm: "var(--tpst15cl33r)",
|
|
323
|
+
md: "var(--tpst1s1bzlu)",
|
|
324
|
+
lg: "var(--tpstr1ymy1)",
|
|
325
|
+
xl: "var(--tpst13zox1l)",
|
|
326
|
+
xxl: "var(--tpst1xkcubw)",
|
|
327
|
+
xxxl: "var(--tpst67ua5f)",
|
|
328
|
+
__themeName__: "tpst1cmuz2h"
|
|
329
|
+
};
|
|
330
|
+
// 테두리 반경 변수 정의
|
|
331
|
+
const borderRadius = {
|
|
332
|
+
none: "var(--tpst16kocez)",
|
|
333
|
+
xs: "var(--tpst1vsob78)",
|
|
334
|
+
sm: "var(--tpst1w7bvkk)",
|
|
335
|
+
md: "var(--tpst1ls88jo)",
|
|
336
|
+
lg: "var(--tpst1d2ic4p)",
|
|
337
|
+
xl: "var(--tpst1bkg6mz)",
|
|
338
|
+
full: "var(--tpstbu84cc)",
|
|
339
|
+
__themeName__: "tpstun8bdo"
|
|
340
|
+
};
|
|
281
341
|
|
|
282
342
|
// 폰트 패밀리 변수 정의
|
|
283
343
|
const fontFamily = {
|
|
@@ -615,61 +675,19 @@ const commonStyles = {
|
|
|
615
675
|
* </Button>
|
|
616
676
|
* ```
|
|
617
677
|
*/
|
|
618
|
-
const Button = React.forwardRef(({
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
}
|
|
630
|
-
|
|
631
|
-
const getLoadingSpinnerStyles = () => {
|
|
632
|
-
if (size === "small") {
|
|
633
|
-
return buttonStyles.spinnerSmall;
|
|
634
|
-
}
|
|
635
|
-
if (size === "large") {
|
|
636
|
-
return buttonStyles.spinnerLarge;
|
|
637
|
-
}
|
|
638
|
-
return buttonStyles.spinner;
|
|
639
|
-
};
|
|
640
|
-
return jsxRuntime.jsxs("button", {
|
|
641
|
-
ref: ref,
|
|
642
|
-
disabled: disabled ?? isLoading,
|
|
643
|
-
className: `${buttonClasses.className} ${className ?? ""}`,
|
|
644
|
-
...rest,
|
|
645
|
-
children: [isLoading && jsxRuntime.jsx("svg", {
|
|
646
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
647
|
-
width: "24",
|
|
648
|
-
height: "24",
|
|
649
|
-
viewBox: "0 0 24 24",
|
|
650
|
-
fill: "none",
|
|
651
|
-
stroke: "currentColor",
|
|
652
|
-
strokeWidth: "2",
|
|
653
|
-
strokeLinecap: "round",
|
|
654
|
-
strokeLinejoin: "round",
|
|
655
|
-
className: `lucide lucide-loader-circle-icon lucide-loader-circle ${stylex__namespace.props(getLoadingSpinnerStyles()).className}`,
|
|
656
|
-
children: jsxRuntime.jsx("path", {
|
|
657
|
-
d: "M21 12a9 9 0 1 1-6.219-8.56"
|
|
658
|
-
})
|
|
659
|
-
}), leftIcon && jsxRuntime.jsx("span", {
|
|
660
|
-
className: stylex__namespace.props(commonStyles.flexCenter).className,
|
|
661
|
-
children: leftIcon
|
|
662
|
-
}), children && jsxRuntime.jsx("span", {
|
|
663
|
-
className: "button-text",
|
|
664
|
-
style: {
|
|
665
|
-
visibility: isLoading ? "hidden" : "visible"
|
|
666
|
-
},
|
|
667
|
-
children: children
|
|
668
|
-
}), rightIcon && jsxRuntime.jsx("span", {
|
|
669
|
-
className: stylex__namespace.props(commonStyles.flexCenter).className,
|
|
670
|
-
children: rightIcon
|
|
671
|
-
})]
|
|
672
|
-
});
|
|
678
|
+
const Button = React.forwardRef(({ variant = "accent", size = "regular", fullWidth = false, isLoading = false, leftIcon, rightIcon, children, disabled, className, ...rest }, ref) => {
|
|
679
|
+
const { setStyleXProps } = usePreferColors();
|
|
680
|
+
const buttonClasses = setStyleXProps(buttonStyles.base, buttonSizeStyles[size], buttonVariantStyles[variant], fullWidth ? buttonStyles.fullWidth : null, leftIcon || rightIcon ? buttonStyles.withIcon : null);
|
|
681
|
+
const getLoadingSpinnerStyles = () => {
|
|
682
|
+
if (size === "small") {
|
|
683
|
+
return buttonStyles.spinnerSmall;
|
|
684
|
+
}
|
|
685
|
+
if (size === "large") {
|
|
686
|
+
return buttonStyles.spinnerLarge;
|
|
687
|
+
}
|
|
688
|
+
return buttonStyles.spinner;
|
|
689
|
+
};
|
|
690
|
+
return (jsxRuntime.jsxs("button", { ref: ref, disabled: disabled ?? isLoading, className: `${buttonClasses.className} ${className ?? ""}`, ...rest, children: [isLoading && (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: `lucide lucide-loader-circle-icon lucide-loader-circle ${setStyleXProps(getLoadingSpinnerStyles()).className}`, children: jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) })), leftIcon && (jsxRuntime.jsx("span", { className: setStyleXProps(commonStyles.flexCenter).className, children: leftIcon })), children && (jsxRuntime.jsx("span", { className: "button-text", style: { visibility: isLoading ? "hidden" : "visible" }, children: children })), rightIcon && (jsxRuntime.jsx("span", { className: setStyleXProps(commonStyles.flexCenter).className, children: rightIcon }))] }));
|
|
673
691
|
});
|
|
674
692
|
Button.displayName = "Button";
|
|
675
693
|
|
|
@@ -1038,24 +1056,10 @@ const textStyles = {
|
|
|
1038
1056
|
}
|
|
1039
1057
|
};
|
|
1040
1058
|
|
|
1041
|
-
const Text = ({
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
weight,
|
|
1046
|
-
align,
|
|
1047
|
-
variant = "regularBase",
|
|
1048
|
-
color,
|
|
1049
|
-
as: Component = "p"
|
|
1050
|
-
}) => {
|
|
1051
|
-
const styles = stylex__namespace.props(textStyles.base, textVariantStyles[variant], size ? textSizeStyles[size] : undefined, weight ? fontWeightStyles[weight] : undefined, align ? textAlignStyles[align] : undefined);
|
|
1052
|
-
return jsxRuntime.jsx(Component, {
|
|
1053
|
-
style: color ? {
|
|
1054
|
-
color
|
|
1055
|
-
} : undefined,
|
|
1056
|
-
className: `${styles.className} ${className ?? ""}`,
|
|
1057
|
-
children: children
|
|
1058
|
-
});
|
|
1059
|
+
const Text = ({ children, className, size, weight, align, variant = "regularBase", color, as: Component = "p", }) => {
|
|
1060
|
+
const { setStyleXProps } = usePreferColors();
|
|
1061
|
+
const styles = setStyleXProps(textStyles.base, textVariantStyles[variant], size ? textSizeStyles[size] : undefined, weight ? fontWeightStyles[weight] : undefined, align ? textAlignStyles[align] : undefined);
|
|
1062
|
+
return (jsxRuntime.jsx(Component, { style: color ? { color } : undefined, className: `${styles.className} ${className ?? ""}`, children: children }));
|
|
1059
1063
|
};
|
|
1060
1064
|
Text.displayName = "Text";
|
|
1061
1065
|
|
|
@@ -1233,30 +1237,11 @@ const inputStyles = {
|
|
|
1233
1237
|
* />
|
|
1234
1238
|
* ```
|
|
1235
1239
|
*/
|
|
1236
|
-
const Input = React.forwardRef(({
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
...rest
|
|
1242
|
-
}, ref) => {
|
|
1243
|
-
const inputWrapperClasses = stylex__namespace.props(inputWrapperStyles.base, size ? inputWrapperSizeStyles[size] : inputWrapperSizeStyles.regular);
|
|
1244
|
-
const inputClasses = stylex__namespace.props(inputStyles.base, size ? inputStyles[size] : inputStyles.regular);
|
|
1245
|
-
return jsxRuntime.jsxs("div", {
|
|
1246
|
-
"aria-disabled": rest.disabled,
|
|
1247
|
-
className: `${inputWrapperClasses.className} ${wrapperClassName}`,
|
|
1248
|
-
children: [leftIcon && jsxRuntime.jsx("span", {
|
|
1249
|
-
className: stylex__namespace.props(commonStyles.flexCenter).className,
|
|
1250
|
-
children: leftIcon
|
|
1251
|
-
}), jsxRuntime.jsx("input", {
|
|
1252
|
-
ref: ref,
|
|
1253
|
-
className: `${inputClasses.className} ${rest.className}`,
|
|
1254
|
-
...rest
|
|
1255
|
-
}), rightIcon && jsxRuntime.jsx("span", {
|
|
1256
|
-
className: stylex__namespace.props(commonStyles.flexCenter).className,
|
|
1257
|
-
children: rightIcon
|
|
1258
|
-
})]
|
|
1259
|
-
});
|
|
1240
|
+
const Input = React.forwardRef(({ size = "regular", leftIcon, rightIcon, wrapperClassName, ...rest }, ref) => {
|
|
1241
|
+
const { setStyleXProps } = usePreferColors();
|
|
1242
|
+
const inputWrapperClasses = setStyleXProps(inputWrapperStyles.base, size ? inputWrapperSizeStyles[size] : inputWrapperSizeStyles.regular);
|
|
1243
|
+
const inputClasses = setStyleXProps(inputStyles.base, size ? inputStyles[size] : inputStyles.regular);
|
|
1244
|
+
return (jsxRuntime.jsxs("div", { "aria-disabled": rest.disabled, className: `${inputWrapperClasses.className} ${wrapperClassName}`, children: [leftIcon && (jsxRuntime.jsx("span", { className: setStyleXProps(commonStyles.flexCenter).className, children: leftIcon })), jsxRuntime.jsx("input", { ref: ref, className: `${inputClasses.className} ${rest.className}`, ...rest }), rightIcon && (jsxRuntime.jsx("span", { className: setStyleXProps(commonStyles.flexCenter).className, children: rightIcon }))] }));
|
|
1260
1245
|
});
|
|
1261
1246
|
Input.displayName = "Input";
|
|
1262
1247
|
|
|
@@ -1360,15 +1345,9 @@ const textAreaStyles = {
|
|
|
1360
1345
|
* ```
|
|
1361
1346
|
*/
|
|
1362
1347
|
const TextArea = React.forwardRef((rest, ref) => {
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
children: jsxRuntime.jsx("textarea", {
|
|
1367
|
-
ref: ref,
|
|
1368
|
-
className: `${textAreaClasses.className} ${rest.className}`,
|
|
1369
|
-
...rest
|
|
1370
|
-
})
|
|
1371
|
-
});
|
|
1348
|
+
const { setStyleXProps } = usePreferColors();
|
|
1349
|
+
const textAreaClasses = setStyleXProps(textAreaStyles.base, rest.disabled ? textAreaStyles.disabled : undefined);
|
|
1350
|
+
return (jsxRuntime.jsx("div", { ...setStyleXProps(textAreaWrapperStyles.base), children: jsxRuntime.jsx("textarea", { ref: ref, className: `${textAreaClasses.className} ${rest.className}`, ...rest }) }));
|
|
1372
1351
|
});
|
|
1373
1352
|
TextArea.displayName = "TextArea";
|
|
1374
1353
|
|
|
@@ -10123,64 +10102,32 @@ const X = createLucideIcon("x", __iconNode);
|
|
|
10123
10102
|
* />
|
|
10124
10103
|
* ```
|
|
10125
10104
|
*/
|
|
10126
|
-
const Checkbox = React.forwardRef(({
|
|
10127
|
-
|
|
10128
|
-
|
|
10129
|
-
|
|
10130
|
-
|
|
10131
|
-
|
|
10132
|
-
|
|
10133
|
-
|
|
10134
|
-
|
|
10135
|
-
|
|
10136
|
-
disabled
|
|
10137
|
-
|
|
10138
|
-
|
|
10139
|
-
|
|
10140
|
-
|
|
10141
|
-
|
|
10142
|
-
|
|
10143
|
-
|
|
10144
|
-
|
|
10145
|
-
|
|
10146
|
-
|
|
10147
|
-
|
|
10148
|
-
|
|
10149
|
-
|
|
10150
|
-
|
|
10151
|
-
|
|
10152
|
-
...checkboxIconClasses
|
|
10153
|
-
});
|
|
10154
|
-
} else if (checked) {
|
|
10155
|
-
return jsxRuntime.jsx(SquareCheck, {
|
|
10156
|
-
...checkboxIconClasses
|
|
10157
|
-
});
|
|
10158
|
-
}
|
|
10159
|
-
return jsxRuntime.jsx(Square, {
|
|
10160
|
-
...checkboxIconClasses
|
|
10161
|
-
});
|
|
10162
|
-
};
|
|
10163
|
-
const onCheckedChange = value => {
|
|
10164
|
-
setChecked(value);
|
|
10165
|
-
onChange?.(value);
|
|
10166
|
-
};
|
|
10167
|
-
return jsxRuntime.jsxs("div", {
|
|
10168
|
-
className: `${checkboxWrapperClasses.className} ${wrapperClassName}`,
|
|
10169
|
-
children: [jsxRuntime.jsx(Checkbox$1, {
|
|
10170
|
-
ref: ref,
|
|
10171
|
-
id: id ?? randomId,
|
|
10172
|
-
...rest,
|
|
10173
|
-
checked: checked,
|
|
10174
|
-
className: `${checkboxClasses.className} ${className}`,
|
|
10175
|
-
onCheckedChange: onCheckedChange,
|
|
10176
|
-
children: renderCheckboxIcon(checked, disabled)
|
|
10177
|
-
}), jsxRuntime.jsx("label", {
|
|
10178
|
-
className: `${labelClasses.className} ${labelClassName}`,
|
|
10179
|
-
htmlFor: id ?? randomId,
|
|
10180
|
-
"aria-disabled": disabled,
|
|
10181
|
-
children: label
|
|
10182
|
-
})]
|
|
10183
|
-
});
|
|
10105
|
+
const Checkbox = React.forwardRef(({ label, labelClassName, wrapperClassName, ...rest }, ref) => {
|
|
10106
|
+
const { checked: isChecked, defaultChecked, id, disabled, className, onCheckedChange: onChange, } = rest;
|
|
10107
|
+
const { setStyleXProps } = usePreferColors();
|
|
10108
|
+
const [checked, setChecked] = React.useState(isChecked ?? defaultChecked);
|
|
10109
|
+
React.useEffect(() => {
|
|
10110
|
+
setChecked(isChecked ?? defaultChecked);
|
|
10111
|
+
}, [isChecked, defaultChecked]);
|
|
10112
|
+
const randomId = React.useId();
|
|
10113
|
+
const checkboxWrapperClasses = setStyleXProps(checkboxWrapperStyles.base);
|
|
10114
|
+
const checkboxClasses = setStyleXProps(checkboxStyles.base);
|
|
10115
|
+
const labelClasses = setStyleXProps(labelStyles.base, disabled ? labelStyles.disabled : undefined);
|
|
10116
|
+
const checkboxIconClasses = setStyleXProps(checkboxStyles.icon, checked ? checkboxStyles.iconChecked : undefined, disabled ? checkboxStyles.iconDisabled : undefined);
|
|
10117
|
+
const renderCheckboxIcon = (checked, disabled) => {
|
|
10118
|
+
if (disabled) {
|
|
10119
|
+
return jsxRuntime.jsx(SquareMinus, { ...checkboxIconClasses });
|
|
10120
|
+
}
|
|
10121
|
+
else if (checked) {
|
|
10122
|
+
return jsxRuntime.jsx(SquareCheck, { ...checkboxIconClasses });
|
|
10123
|
+
}
|
|
10124
|
+
return jsxRuntime.jsx(Square, { ...checkboxIconClasses });
|
|
10125
|
+
};
|
|
10126
|
+
const onCheckedChange = (value) => {
|
|
10127
|
+
setChecked(value);
|
|
10128
|
+
onChange?.(value);
|
|
10129
|
+
};
|
|
10130
|
+
return (jsxRuntime.jsxs("div", { className: `${checkboxWrapperClasses.className} ${wrapperClassName}`, children: [jsxRuntime.jsx(Checkbox$1, { ref: ref, id: id ?? randomId, ...rest, checked: checked, className: `${checkboxClasses.className} ${className}`, onCheckedChange: onCheckedChange, children: renderCheckboxIcon(checked, disabled) }), jsxRuntime.jsx("label", { className: `${labelClasses.className} ${labelClassName}`, htmlFor: id ?? randomId, "aria-disabled": disabled, children: label })] }));
|
|
10184
10131
|
});
|
|
10185
10132
|
Checkbox.displayName = "Checkbox";
|
|
10186
10133
|
|
|
@@ -10456,13 +10403,16 @@ const RadioGroup = React.forwardRef(({
|
|
|
10456
10403
|
orientation = "vertical",
|
|
10457
10404
|
...rest
|
|
10458
10405
|
}, ref) => {
|
|
10406
|
+
const {
|
|
10407
|
+
setStyleXProps
|
|
10408
|
+
} = usePreferColors();
|
|
10459
10409
|
const {
|
|
10460
10410
|
disabled,
|
|
10461
10411
|
children,
|
|
10462
10412
|
value,
|
|
10463
10413
|
...restProps
|
|
10464
10414
|
} = rest;
|
|
10465
|
-
const radioGroupClasses =
|
|
10415
|
+
const radioGroupClasses = setStyleXProps(radioGroupStyles.base, orientation === "horizontal" ? radioGroupStyles.horizontal : undefined);
|
|
10466
10416
|
return jsxRuntime.jsx(RadioGroupContext, {
|
|
10467
10417
|
value: {
|
|
10468
10418
|
value: value ?? "",
|
|
@@ -10490,11 +10440,14 @@ const RadioItem = React.forwardRef(({
|
|
|
10490
10440
|
...restProps
|
|
10491
10441
|
} = rest;
|
|
10492
10442
|
const randomId = id ?? React.useId();
|
|
10443
|
+
const {
|
|
10444
|
+
setStyleXProps
|
|
10445
|
+
} = usePreferColors();
|
|
10493
10446
|
const isSelected = React.useContext(RadioGroupContext).value === value;
|
|
10494
10447
|
const isDisabled = React.useContext(RadioGroupContext).disabled || disabled || false;
|
|
10495
|
-
const radioItemWrapperClasses =
|
|
10496
|
-
const radioItemLabelClasses =
|
|
10497
|
-
const radioItemClasses =
|
|
10448
|
+
const radioItemWrapperClasses = setStyleXProps(radioItemWrapperStyles.base);
|
|
10449
|
+
const radioItemLabelClasses = setStyleXProps(radioItemLabelStyles.base, isSelected ? radioItemLabelStyles.selected : undefined, isDisabled ? radioItemLabelStyles.disabled : undefined);
|
|
10450
|
+
const radioItemClasses = setStyleXProps(radioItemStyles.base);
|
|
10498
10451
|
return jsxRuntime.jsxs("div", {
|
|
10499
10452
|
className: `${radioItemWrapperClasses.className} ${wrapperClassName ?? ""}`,
|
|
10500
10453
|
children: [jsxRuntime.jsx(Item2, {
|
|
@@ -10624,60 +10577,28 @@ const cardFooterStyles = {
|
|
|
10624
10577
|
* </CardFooter>
|
|
10625
10578
|
* </Card>
|
|
10626
10579
|
*/
|
|
10627
|
-
const Card = React.forwardRef(({
|
|
10628
|
-
|
|
10629
|
-
|
|
10630
|
-
|
|
10631
|
-
const cardClasses = stylex__namespace.props(cardStyles.base);
|
|
10632
|
-
return jsxRuntime.jsx("div", {
|
|
10633
|
-
...rest,
|
|
10634
|
-
ref: ref,
|
|
10635
|
-
className: `${cardClasses.className} ${className ?? ""}`,
|
|
10636
|
-
children: rest.children
|
|
10637
|
-
});
|
|
10580
|
+
const Card = React.forwardRef(({ className, ...rest }, ref) => {
|
|
10581
|
+
const { setStyleXProps } = usePreferColors();
|
|
10582
|
+
const cardClasses = setStyleXProps(cardStyles.base);
|
|
10583
|
+
return (jsxRuntime.jsx("div", { ...rest, ref: ref, className: `${cardClasses.className} ${className ?? ""}`, children: rest.children }));
|
|
10638
10584
|
});
|
|
10639
|
-
const CardBody = React.forwardRef(({
|
|
10640
|
-
|
|
10641
|
-
|
|
10642
|
-
|
|
10643
|
-
const cardBodyClasses = stylex__namespace.props(cardBodyStyles.base);
|
|
10644
|
-
return jsxRuntime.jsx("div", {
|
|
10645
|
-
...rest,
|
|
10646
|
-
ref: ref,
|
|
10647
|
-
className: `${cardBodyClasses.className} ${className ?? ""}`,
|
|
10648
|
-
children: rest.children
|
|
10649
|
-
});
|
|
10585
|
+
const CardBody = React.forwardRef(({ className, ...rest }, ref) => {
|
|
10586
|
+
const { setStyleXProps } = usePreferColors();
|
|
10587
|
+
const cardBodyClasses = setStyleXProps(cardBodyStyles.base);
|
|
10588
|
+
return (jsxRuntime.jsx("div", { ...rest, ref: ref, className: `${cardBodyClasses.className} ${className ?? ""}`, children: rest.children }));
|
|
10650
10589
|
});
|
|
10651
|
-
const CardHeader = React.forwardRef(({
|
|
10652
|
-
|
|
10653
|
-
|
|
10654
|
-
|
|
10655
|
-
const cardHeaderClasses = stylex__namespace.props(cardHeaderStyles.base);
|
|
10656
|
-
return jsxRuntime.jsx("div", {
|
|
10657
|
-
...rest,
|
|
10658
|
-
ref: ref,
|
|
10659
|
-
className: `${cardHeaderClasses.className} ${className ?? ""}`,
|
|
10660
|
-
children: rest.children
|
|
10661
|
-
});
|
|
10590
|
+
const CardHeader = React.forwardRef(({ className, ...rest }, ref) => {
|
|
10591
|
+
const { setStyleXProps } = usePreferColors();
|
|
10592
|
+
const cardHeaderClasses = setStyleXProps(cardHeaderStyles.base);
|
|
10593
|
+
return (jsxRuntime.jsx("div", { ...rest, ref: ref, className: `${cardHeaderClasses.className} ${className ?? ""}`, children: rest.children }));
|
|
10662
10594
|
});
|
|
10663
10595
|
const CardContent = React.forwardRef((rest, ref) => {
|
|
10664
|
-
|
|
10665
|
-
...rest,
|
|
10666
|
-
ref: ref,
|
|
10667
|
-
children: rest.children
|
|
10668
|
-
});
|
|
10596
|
+
return (jsxRuntime.jsx("div", { ...rest, ref: ref, children: rest.children }));
|
|
10669
10597
|
});
|
|
10670
|
-
const CardFooter = React.forwardRef(({
|
|
10671
|
-
|
|
10672
|
-
|
|
10673
|
-
|
|
10674
|
-
const cardFooterClasses = stylex__namespace.props(cardFooterStyles.base);
|
|
10675
|
-
return jsxRuntime.jsx("div", {
|
|
10676
|
-
...rest,
|
|
10677
|
-
ref: ref,
|
|
10678
|
-
className: `${cardFooterClasses.className} ${className ?? ""}`,
|
|
10679
|
-
children: rest.children
|
|
10680
|
-
});
|
|
10598
|
+
const CardFooter = React.forwardRef(({ className, ...rest }, ref) => {
|
|
10599
|
+
const { setStyleXProps } = usePreferColors();
|
|
10600
|
+
const cardFooterClasses = setStyleXProps(cardFooterStyles.base);
|
|
10601
|
+
return (jsxRuntime.jsx("div", { ...rest, ref: ref, className: `${cardFooterClasses.className} ${className ?? ""}`, children: rest.children }));
|
|
10681
10602
|
});
|
|
10682
10603
|
|
|
10683
10604
|
const dialogOverlayStyles = {
|
|
@@ -10763,58 +10684,23 @@ const dialogContentStyles = {
|
|
|
10763
10684
|
* </Dialog>
|
|
10764
10685
|
*/
|
|
10765
10686
|
const Dialog = Root$2;
|
|
10766
|
-
const DialogTrigger = props => {
|
|
10767
|
-
|
|
10768
|
-
className: props.className,
|
|
10769
|
-
...props,
|
|
10770
|
-
"data-slot": "dialog-trigger",
|
|
10771
|
-
asChild: true,
|
|
10772
|
-
children: props.children
|
|
10773
|
-
});
|
|
10687
|
+
const DialogTrigger = (props) => {
|
|
10688
|
+
return (jsxRuntime.jsx(Trigger$4, { className: props.className, ...props, "data-slot": "dialog-trigger", asChild: true, children: props.children }));
|
|
10774
10689
|
};
|
|
10775
10690
|
const DialogPortal = Portal$3;
|
|
10776
10691
|
const DialogClose = Close;
|
|
10777
|
-
const DialogContent = ({
|
|
10778
|
-
|
|
10779
|
-
|
|
10780
|
-
|
|
10781
|
-
})
|
|
10782
|
-
const dialogOverlayClasses = stylex__namespace.props(dialogOverlayStyles.base);
|
|
10783
|
-
const dialogContentClasses = stylex__namespace.props(dialogContentStyles.base);
|
|
10784
|
-
return jsxRuntime.jsxs(Portal$3, {
|
|
10785
|
-
children: [jsxRuntime.jsx(Overlay, {
|
|
10786
|
-
...dialogOverlayClasses
|
|
10787
|
-
}), jsxRuntime.jsxs(Content$1, {
|
|
10788
|
-
className: `${dialogContentClasses.className} ${className ?? ""}`,
|
|
10789
|
-
...props,
|
|
10790
|
-
children: [jsxRuntime.jsx(Description, {}), jsxRuntime.jsx(Card, {
|
|
10791
|
-
children: children
|
|
10792
|
-
})]
|
|
10793
|
-
})]
|
|
10794
|
-
});
|
|
10692
|
+
const DialogContent = ({ className, children, ...props }) => {
|
|
10693
|
+
const { setStyleXProps } = usePreferColors();
|
|
10694
|
+
const dialogOverlayClasses = setStyleXProps(dialogOverlayStyles.base);
|
|
10695
|
+
const dialogContentClasses = setStyleXProps(dialogContentStyles.base);
|
|
10696
|
+
return (jsxRuntime.jsxs(Portal$3, { children: [jsxRuntime.jsx(Overlay, { ...dialogOverlayClasses }), jsxRuntime.jsxs(Content$1, { className: `${dialogContentClasses.className} ${className ?? ""}`, ...props, children: [jsxRuntime.jsx(Description, {}), jsxRuntime.jsx(Card, { children: children })] })] }));
|
|
10795
10697
|
};
|
|
10796
|
-
const DialogHeader = ({
|
|
10797
|
-
|
|
10798
|
-
...props
|
|
10799
|
-
}) => {
|
|
10800
|
-
return jsxRuntime.jsx(Title, {
|
|
10801
|
-
"data-slot": "dialog-title",
|
|
10802
|
-
...props,
|
|
10803
|
-
children: jsxRuntime.jsx(CardHeader, {
|
|
10804
|
-
className: className,
|
|
10805
|
-
children: props.children
|
|
10806
|
-
})
|
|
10807
|
-
});
|
|
10698
|
+
const DialogHeader = ({ className, ...props }) => {
|
|
10699
|
+
return (jsxRuntime.jsx(Title, { "data-slot": "dialog-title", ...props, children: jsxRuntime.jsx(CardHeader, { className: className, children: props.children }) }));
|
|
10808
10700
|
};
|
|
10809
10701
|
const DialogFooter = CardFooter;
|
|
10810
|
-
const DialogDescription = ({
|
|
10811
|
-
|
|
10812
|
-
...props
|
|
10813
|
-
}) => {
|
|
10814
|
-
return jsxRuntime.jsx(CardBody, {
|
|
10815
|
-
className: className,
|
|
10816
|
-
children: props.children
|
|
10817
|
-
});
|
|
10702
|
+
const DialogDescription = ({ className, ...props }) => {
|
|
10703
|
+
return jsxRuntime.jsx(CardBody, { className: className, children: props.children });
|
|
10818
10704
|
};
|
|
10819
10705
|
|
|
10820
10706
|
const selectIconWrapperStyles = {
|
|
@@ -11136,95 +11022,37 @@ const selectGroupLabelStyles = {
|
|
|
11136
11022
|
* </SelectContent>
|
|
11137
11023
|
* </Select>
|
|
11138
11024
|
*/
|
|
11139
|
-
const Select = props => jsxRuntime.jsx(Root2, {
|
|
11140
|
-
|
|
11141
|
-
});
|
|
11142
|
-
const
|
|
11143
|
-
|
|
11144
|
-
|
|
11145
|
-
|
|
11146
|
-
|
|
11147
|
-
|
|
11148
|
-
}
|
|
11149
|
-
|
|
11150
|
-
className,
|
|
11151
|
-
...otherProps
|
|
11152
|
-
} = rest;
|
|
11153
|
-
const triggerClasses = stylex__namespace.props(selectTriggerStyles.base, selectTriggerStyles[variant], selectTriggerStyles[size]);
|
|
11154
|
-
const iconWrapperClasses = stylex__namespace.props(selectIconWrapperStyles.base);
|
|
11155
|
-
return jsxRuntime.jsxs(Trigger$1, {
|
|
11156
|
-
className: `${triggerClasses.className} ${className}`,
|
|
11157
|
-
...otherProps,
|
|
11158
|
-
children: [icon && jsxRuntime.jsx("div", {
|
|
11159
|
-
className: iconWrapperClasses.className,
|
|
11160
|
-
children: icon
|
|
11161
|
-
}), jsxRuntime.jsx(Value, {
|
|
11162
|
-
placeholder: placeholder
|
|
11163
|
-
}), jsxRuntime.jsx(Icon$1, {
|
|
11164
|
-
className: iconWrapperClasses.className,
|
|
11165
|
-
children: jsxRuntime.jsx(CaretDownIcon, {})
|
|
11166
|
-
})]
|
|
11167
|
-
});
|
|
11168
|
-
};
|
|
11169
|
-
const SelectContent = ({
|
|
11170
|
-
children,
|
|
11171
|
-
...rest
|
|
11172
|
-
}) => {
|
|
11173
|
-
const contentClasses = stylex__namespace.props(selectContentStyles.base);
|
|
11174
|
-
const {
|
|
11175
|
-
className,
|
|
11176
|
-
position,
|
|
11177
|
-
sideOffset,
|
|
11178
|
-
...otherProps
|
|
11179
|
-
} = rest;
|
|
11180
|
-
return jsxRuntime.jsx(Portal$1, {
|
|
11181
|
-
children: jsxRuntime.jsx(Content2$1, {
|
|
11182
|
-
position: "popper",
|
|
11183
|
-
sideOffset: 7,
|
|
11184
|
-
className: `${contentClasses.className} ${className}`,
|
|
11185
|
-
...otherProps,
|
|
11186
|
-
children: jsxRuntime.jsx(Viewport, {
|
|
11187
|
-
children: children
|
|
11188
|
-
})
|
|
11189
|
-
})
|
|
11190
|
-
});
|
|
11025
|
+
const Select = (props) => jsxRuntime.jsx(Root2, { ...props });
|
|
11026
|
+
const SelectTrigger = ({ placeholder, variant = "outline", size = "regular", icon, ...rest }) => {
|
|
11027
|
+
const { setStyleXProps } = usePreferColors();
|
|
11028
|
+
const { className, ...otherProps } = rest;
|
|
11029
|
+
const triggerClasses = setStyleXProps(selectTriggerStyles.base, selectTriggerStyles[variant], selectTriggerStyles[size]);
|
|
11030
|
+
const iconWrapperClasses = setStyleXProps(selectIconWrapperStyles.base);
|
|
11031
|
+
return (jsxRuntime.jsxs(Trigger$1, { className: `${triggerClasses.className} ${className}`, ...otherProps, children: [icon && jsxRuntime.jsx("div", { className: iconWrapperClasses.className, children: icon }), jsxRuntime.jsx(Value, { placeholder: placeholder }), jsxRuntime.jsx(Icon$1, { className: iconWrapperClasses.className, children: jsxRuntime.jsx(CaretDownIcon, {}) })] }));
|
|
11032
|
+
};
|
|
11033
|
+
const SelectContent = ({ children, ...rest }) => {
|
|
11034
|
+
const { setStyleXProps } = usePreferColors();
|
|
11035
|
+
const contentClasses = setStyleXProps(selectContentStyles.base);
|
|
11036
|
+
const { className, position, sideOffset, ...otherProps } = rest;
|
|
11037
|
+
return (jsxRuntime.jsx(Portal$1, { children: jsxRuntime.jsx(Content2$1, { position: "popper", sideOffset: 7, className: `${contentClasses.className} ${className}`, ...otherProps, children: jsxRuntime.jsx(Viewport, { children: children }) }) }));
|
|
11191
11038
|
};
|
|
11192
11039
|
const SelectGroup = Group;
|
|
11193
|
-
const SelectLabel = props => {
|
|
11194
|
-
|
|
11195
|
-
|
|
11196
|
-
...props,
|
|
11197
|
-
|
|
11198
|
-
|
|
11199
|
-
};
|
|
11200
|
-
const
|
|
11201
|
-
|
|
11202
|
-
|
|
11203
|
-
|
|
11204
|
-
|
|
11205
|
-
|
|
11206
|
-
|
|
11207
|
-
const
|
|
11208
|
-
|
|
11209
|
-
...rest
|
|
11210
|
-
}) => {
|
|
11211
|
-
const itemClasses = stylex__namespace.props(selectItemStyles.base);
|
|
11212
|
-
const itemIndicatorClasses = stylex__namespace.props(selectItemStyles.indicator);
|
|
11213
|
-
const {
|
|
11214
|
-
className,
|
|
11215
|
-
textValue,
|
|
11216
|
-
...otherProps
|
|
11217
|
-
} = rest;
|
|
11218
|
-
return jsxRuntime.jsxs(Item, {
|
|
11219
|
-
className: `${itemClasses.className} ${className}`,
|
|
11220
|
-
...otherProps,
|
|
11221
|
-
children: [jsxRuntime.jsx(ItemText, {
|
|
11222
|
-
children: textValue
|
|
11223
|
-
}), indicator && jsxRuntime.jsx(ItemIndicator, {
|
|
11224
|
-
className: itemIndicatorClasses.className,
|
|
11225
|
-
children: indicator
|
|
11226
|
-
})]
|
|
11227
|
-
});
|
|
11040
|
+
const SelectLabel = (props) => {
|
|
11041
|
+
const { setStyleXProps } = usePreferColors();
|
|
11042
|
+
const groupLabelClasses = setStyleXProps(selectGroupLabelStyles.base);
|
|
11043
|
+
return (jsxRuntime.jsx(Label, { ...props, className: groupLabelClasses.className }));
|
|
11044
|
+
};
|
|
11045
|
+
const SelectSeparator = (props) => {
|
|
11046
|
+
const { setStyleXProps } = usePreferColors();
|
|
11047
|
+
const separatorClasses = setStyleXProps(selectSeparatorStyles.base);
|
|
11048
|
+
return (jsxRuntime.jsx(Separator, { ...props, className: separatorClasses.className }));
|
|
11049
|
+
};
|
|
11050
|
+
const SelectItem = ({ indicator, ...rest }) => {
|
|
11051
|
+
const { setStyleXProps } = usePreferColors();
|
|
11052
|
+
const itemClasses = setStyleXProps(selectItemStyles.base);
|
|
11053
|
+
const itemIndicatorClasses = setStyleXProps(selectItemStyles.indicator);
|
|
11054
|
+
const { className, textValue, ...otherProps } = rest;
|
|
11055
|
+
return (jsxRuntime.jsxs(Item, { className: `${itemClasses.className} ${className}`, ...otherProps, children: [jsxRuntime.jsx(ItemText, { children: textValue }), indicator && (jsxRuntime.jsx(ItemIndicator, { className: itemIndicatorClasses.className, children: indicator }))] }));
|
|
11228
11056
|
};
|
|
11229
11057
|
Select.displayName = "Select";
|
|
11230
11058
|
SelectTrigger.displayName = "SelectTrigger";
|
|
@@ -11374,70 +11202,41 @@ const verticalMenuStyles = {
|
|
|
11374
11202
|
};
|
|
11375
11203
|
|
|
11376
11204
|
const VerticalMenusContext = React.createContext({
|
|
11377
|
-
|
|
11378
|
-
|
|
11379
|
-
|
|
11205
|
+
value: "",
|
|
11206
|
+
disabled: false,
|
|
11207
|
+
setSelectedMenu: () => { },
|
|
11380
11208
|
});
|
|
11381
|
-
const VerticalMenus = React.forwardRef(({
|
|
11382
|
-
|
|
11383
|
-
|
|
11384
|
-
|
|
11385
|
-
|
|
11386
|
-
|
|
11387
|
-
|
|
11388
|
-
|
|
11389
|
-
|
|
11390
|
-
|
|
11391
|
-
|
|
11392
|
-
|
|
11393
|
-
|
|
11394
|
-
|
|
11395
|
-
value: {
|
|
11396
|
-
value: selectedMenu,
|
|
11397
|
-
disabled: disabled ?? false,
|
|
11398
|
-
setSelectedMenu
|
|
11399
|
-
},
|
|
11400
|
-
children: jsxRuntime.jsx("div", {
|
|
11401
|
-
ref: ref,
|
|
11402
|
-
className: `${verticalMenusClasses.className} ${className || ""}`,
|
|
11403
|
-
...rest,
|
|
11404
|
-
children: rest.children
|
|
11405
|
-
})
|
|
11406
|
-
});
|
|
11209
|
+
const VerticalMenus = React.forwardRef(({ disabled, value, onValueChange, className, ...rest }, ref) => {
|
|
11210
|
+
const { setStyleXProps } = usePreferColors();
|
|
11211
|
+
const [selectedMenu, setSelectedMenu] = React.useState(value || "");
|
|
11212
|
+
const verticalMenusClasses = setStyleXProps(verticalMenusWrapperStyles.base);
|
|
11213
|
+
React.useEffect(() => {
|
|
11214
|
+
if (!onValueChange)
|
|
11215
|
+
return;
|
|
11216
|
+
onValueChange(selectedMenu);
|
|
11217
|
+
}, [selectedMenu]);
|
|
11218
|
+
return (jsxRuntime.jsx(VerticalMenusContext, { value: {
|
|
11219
|
+
value: selectedMenu,
|
|
11220
|
+
disabled: disabled ?? false,
|
|
11221
|
+
setSelectedMenu,
|
|
11222
|
+
}, children: jsxRuntime.jsx("div", { ref: ref, className: `${verticalMenusClasses.className} ${className || ""}`, ...rest, children: rest.children }) }));
|
|
11407
11223
|
});
|
|
11408
|
-
const VerticalMenu = React.forwardRef(({
|
|
11409
|
-
|
|
11410
|
-
|
|
11411
|
-
|
|
11412
|
-
|
|
11413
|
-
|
|
11414
|
-
|
|
11415
|
-
|
|
11416
|
-
|
|
11417
|
-
|
|
11418
|
-
|
|
11419
|
-
|
|
11420
|
-
|
|
11421
|
-
|
|
11422
|
-
|
|
11423
|
-
|
|
11424
|
-
if (context.disabled) return;
|
|
11425
|
-
context.setSelectedMenu?.(value);
|
|
11426
|
-
rest.onClick?.(e);
|
|
11427
|
-
};
|
|
11428
|
-
return jsxRuntime.jsxs("button", {
|
|
11429
|
-
ref: ref,
|
|
11430
|
-
className: `${verticalMenuClasses.className} ${rest.className || ""}`,
|
|
11431
|
-
...rest,
|
|
11432
|
-
disabled: isDisabled,
|
|
11433
|
-
value: value,
|
|
11434
|
-
"data-selected": isSelected,
|
|
11435
|
-
onClick: onClick,
|
|
11436
|
-
children: [icon && jsxRuntime.jsx("span", {
|
|
11437
|
-
...verticalMenuIconClasses,
|
|
11438
|
-
children: icon
|
|
11439
|
-
}), label]
|
|
11440
|
-
});
|
|
11224
|
+
const VerticalMenu = React.forwardRef(({ disabled, value, label, icon, variant = "accent", size = "regular", ...rest }, ref) => {
|
|
11225
|
+
const context = React.useContext(VerticalMenusContext);
|
|
11226
|
+
const { setStyleXProps } = usePreferColors();
|
|
11227
|
+
const isSelected = context.value === value;
|
|
11228
|
+
const isDisabled = context.disabled || disabled || false;
|
|
11229
|
+
const verticalMenuClasses = setStyleXProps(verticalMenuStyles.base, verticalMenuStyles[variant], verticalMenuStyles[size]);
|
|
11230
|
+
const verticalMenuIconClasses = setStyleXProps(verticalMenuIconStyles.base);
|
|
11231
|
+
const onClick = (e) => {
|
|
11232
|
+
if (isDisabled)
|
|
11233
|
+
return;
|
|
11234
|
+
if (context.disabled)
|
|
11235
|
+
return;
|
|
11236
|
+
context.setSelectedMenu?.(value);
|
|
11237
|
+
rest.onClick?.(e);
|
|
11238
|
+
};
|
|
11239
|
+
return (jsxRuntime.jsxs("button", { ref: ref, className: `${verticalMenuClasses.className} ${rest.className || ""}`, ...rest, disabled: isDisabled, value: value, "data-selected": isSelected, onClick: onClick, children: [icon && jsxRuntime.jsx("span", { ...verticalMenuIconClasses, children: icon }), label] }));
|
|
11441
11240
|
});
|
|
11442
11241
|
VerticalMenu.displayName = "VerticalMenu";
|
|
11443
11242
|
|
|
@@ -11567,78 +11366,40 @@ const horizontalTabStyles = {
|
|
|
11567
11366
|
};
|
|
11568
11367
|
|
|
11569
11368
|
const HorizontalTabContext = React.createContext({
|
|
11570
|
-
|
|
11571
|
-
|
|
11572
|
-
|
|
11369
|
+
value: "",
|
|
11370
|
+
disabled: false,
|
|
11371
|
+
setSelectedTab: () => { },
|
|
11573
11372
|
});
|
|
11574
|
-
const HorizontalTabs = React.forwardRef(({
|
|
11575
|
-
|
|
11576
|
-
|
|
11577
|
-
|
|
11578
|
-
|
|
11579
|
-
|
|
11580
|
-
|
|
11581
|
-
|
|
11582
|
-
|
|
11583
|
-
|
|
11584
|
-
|
|
11585
|
-
|
|
11586
|
-
|
|
11587
|
-
|
|
11588
|
-
value: {
|
|
11589
|
-
value: selectedTab,
|
|
11590
|
-
disabled: disabled ?? false,
|
|
11591
|
-
setSelectedTab
|
|
11592
|
-
},
|
|
11593
|
-
children: jsxRuntime.jsx("div", {
|
|
11594
|
-
ref: ref,
|
|
11595
|
-
className: `${horizontalTabClasses.className} ${className || ""}`,
|
|
11596
|
-
...rest,
|
|
11597
|
-
children: rest.children
|
|
11598
|
-
})
|
|
11599
|
-
});
|
|
11373
|
+
const HorizontalTabs = React.forwardRef(({ disabled, value, onValueChange, className, ...rest }, ref) => {
|
|
11374
|
+
const { setStyleXProps } = usePreferColors();
|
|
11375
|
+
const [selectedTab, setSelectedTab] = React.useState(value || "");
|
|
11376
|
+
const horizontalTabClasses = setStyleXProps(horizontalTabWrapperStyles.base);
|
|
11377
|
+
React.useEffect(() => {
|
|
11378
|
+
if (!onValueChange)
|
|
11379
|
+
return;
|
|
11380
|
+
onValueChange(selectedTab);
|
|
11381
|
+
}, [selectedTab]);
|
|
11382
|
+
return (jsxRuntime.jsx(HorizontalTabContext.Provider, { value: {
|
|
11383
|
+
value: selectedTab,
|
|
11384
|
+
disabled: disabled ?? false,
|
|
11385
|
+
setSelectedTab,
|
|
11386
|
+
}, children: jsxRuntime.jsx("div", { ref: ref, className: `${horizontalTabClasses.className} ${className || ""}`, ...rest, children: rest.children }) }));
|
|
11600
11387
|
});
|
|
11601
|
-
const HorizontalTab = React.forwardRef(({
|
|
11602
|
-
|
|
11603
|
-
|
|
11604
|
-
|
|
11605
|
-
|
|
11606
|
-
|
|
11607
|
-
|
|
11608
|
-
|
|
11609
|
-
|
|
11610
|
-
|
|
11611
|
-
|
|
11612
|
-
|
|
11613
|
-
|
|
11614
|
-
|
|
11615
|
-
|
|
11616
|
-
const handleClick = () => {
|
|
11617
|
-
if (isDisabled) return;
|
|
11618
|
-
setSelectedTab(value);
|
|
11619
|
-
};
|
|
11620
|
-
const horizontalTabClasses = stylex__namespace.props(horizontalTabStyles.base);
|
|
11621
|
-
const iconClasses = stylex__namespace.props(horizontalTabStyles.icon, size === "small" && horizontalTabStyles.iconSmall);
|
|
11622
|
-
const lineClasses = stylex__namespace.props(horizontalTabStyles.line);
|
|
11623
|
-
const labelWrapperClasses = stylex__namespace.props(horizontalTabStyles.labelWrapper, horizontalTabStyles[size || "regular"]);
|
|
11624
|
-
return jsxRuntime.jsxs("button", {
|
|
11625
|
-
ref: ref,
|
|
11626
|
-
className: `${horizontalTabClasses.className} ${className || ""}`,
|
|
11627
|
-
onClick: handleClick,
|
|
11628
|
-
disabled: isDisabled,
|
|
11629
|
-
"data-selected": isSelected,
|
|
11630
|
-
...rest,
|
|
11631
|
-
children: [jsxRuntime.jsxs("div", {
|
|
11632
|
-
...labelWrapperClasses,
|
|
11633
|
-
children: [icon && jsxRuntime.jsx("span", {
|
|
11634
|
-
...iconClasses,
|
|
11635
|
-
children: icon
|
|
11636
|
-
}), label]
|
|
11637
|
-
}), jsxRuntime.jsx("div", {
|
|
11638
|
-
...lineClasses,
|
|
11639
|
-
"data-selected": isSelected
|
|
11640
|
-
})]
|
|
11641
|
-
});
|
|
11388
|
+
const HorizontalTab = React.forwardRef(({ value, label, className, icon, size = "regular", ...rest }, ref) => {
|
|
11389
|
+
const { value: selectedTab, setSelectedTab, disabled, } = React.useContext(HorizontalTabContext);
|
|
11390
|
+
const { setStyleXProps } = usePreferColors();
|
|
11391
|
+
const isSelected = selectedTab === value;
|
|
11392
|
+
const isDisabled = disabled || rest.disabled;
|
|
11393
|
+
const handleClick = () => {
|
|
11394
|
+
if (isDisabled)
|
|
11395
|
+
return;
|
|
11396
|
+
setSelectedTab(value);
|
|
11397
|
+
};
|
|
11398
|
+
const horizontalTabClasses = setStyleXProps(horizontalTabStyles.base);
|
|
11399
|
+
const iconClasses = setStyleXProps(horizontalTabStyles.icon, size === "small" && horizontalTabStyles.iconSmall);
|
|
11400
|
+
const lineClasses = setStyleXProps(horizontalTabStyles.line);
|
|
11401
|
+
const labelWrapperClasses = setStyleXProps(horizontalTabStyles.labelWrapper, horizontalTabStyles[size || "regular"]);
|
|
11402
|
+
return (jsxRuntime.jsxs("button", { ref: ref, className: `${horizontalTabClasses.className} ${className || ""}`, onClick: handleClick, disabled: isDisabled, "data-selected": isSelected, ...rest, children: [jsxRuntime.jsxs("div", { ...labelWrapperClasses, children: [icon && jsxRuntime.jsx("span", { ...iconClasses, children: icon }), label] }), jsxRuntime.jsx("div", { ...lineClasses, "data-selected": isSelected })] }));
|
|
11642
11403
|
});
|
|
11643
11404
|
|
|
11644
11405
|
const modeTabWrapperStyles = {
|
|
@@ -11751,69 +11512,38 @@ const modeTabStyles = {
|
|
|
11751
11512
|
};
|
|
11752
11513
|
|
|
11753
11514
|
const ModeTabContext = React.createContext({
|
|
11754
|
-
|
|
11755
|
-
|
|
11756
|
-
|
|
11515
|
+
value: "",
|
|
11516
|
+
disabled: false,
|
|
11517
|
+
setSelectedTab: () => { },
|
|
11757
11518
|
});
|
|
11758
|
-
const ModeTabs = React.forwardRef(({
|
|
11759
|
-
|
|
11760
|
-
|
|
11761
|
-
|
|
11762
|
-
|
|
11763
|
-
|
|
11764
|
-
|
|
11765
|
-
|
|
11766
|
-
|
|
11767
|
-
|
|
11768
|
-
|
|
11769
|
-
|
|
11770
|
-
|
|
11771
|
-
|
|
11772
|
-
value: {
|
|
11773
|
-
value: selectedTab,
|
|
11774
|
-
disabled: disabled ?? false,
|
|
11775
|
-
setSelectedTab
|
|
11776
|
-
},
|
|
11777
|
-
children: jsxRuntime.jsx("div", {
|
|
11778
|
-
ref: ref,
|
|
11779
|
-
className: `${modeTabsClasses.className} ${className || ""}`,
|
|
11780
|
-
...rest,
|
|
11781
|
-
children: rest.children
|
|
11782
|
-
})
|
|
11783
|
-
});
|
|
11519
|
+
const ModeTabs = React.forwardRef(({ disabled, value, onValueChange, className, ...rest }, ref) => {
|
|
11520
|
+
const { setStyleXProps } = usePreferColors();
|
|
11521
|
+
const [selectedTab, setSelectedTab] = React.useState(value || "");
|
|
11522
|
+
const modeTabsClasses = setStyleXProps(modeTabWrapperStyles.base);
|
|
11523
|
+
React.useEffect(() => {
|
|
11524
|
+
if (!onValueChange)
|
|
11525
|
+
return;
|
|
11526
|
+
onValueChange(selectedTab);
|
|
11527
|
+
}, [selectedTab]);
|
|
11528
|
+
return (jsxRuntime.jsx(ModeTabContext, { value: {
|
|
11529
|
+
value: selectedTab,
|
|
11530
|
+
disabled: disabled ?? false,
|
|
11531
|
+
setSelectedTab,
|
|
11532
|
+
}, children: jsxRuntime.jsx("div", { ref: ref, className: `${modeTabsClasses.className} ${className || ""}`, ...rest, children: rest.children }) }));
|
|
11784
11533
|
});
|
|
11785
|
-
const ModeTab = React.forwardRef(({
|
|
11786
|
-
|
|
11787
|
-
|
|
11788
|
-
|
|
11789
|
-
|
|
11790
|
-
|
|
11791
|
-
|
|
11792
|
-
|
|
11793
|
-
|
|
11794
|
-
|
|
11795
|
-
|
|
11796
|
-
|
|
11797
|
-
|
|
11798
|
-
} = React.useContext(ModeTabContext);
|
|
11799
|
-
const isSelected = selectedTab === value;
|
|
11800
|
-
const isDisabled = disabled || rest.disabled;
|
|
11801
|
-
const handleClick = () => {
|
|
11802
|
-
if (isDisabled) return;
|
|
11803
|
-
setSelectedTab(value);
|
|
11804
|
-
};
|
|
11805
|
-
return jsxRuntime.jsxs("button", {
|
|
11806
|
-
ref: ref,
|
|
11807
|
-
className: `${modeTabClasses.className} ${className || ""}`,
|
|
11808
|
-
"data-selected": isSelected,
|
|
11809
|
-
disabled: isDisabled,
|
|
11810
|
-
onClick: handleClick,
|
|
11811
|
-
...rest,
|
|
11812
|
-
children: [icon && jsxRuntime.jsx("span", {
|
|
11813
|
-
...iconClasses,
|
|
11814
|
-
children: icon
|
|
11815
|
-
}), label]
|
|
11816
|
-
});
|
|
11534
|
+
const ModeTab = React.forwardRef(({ label, icon, value, className, ...rest }, ref) => {
|
|
11535
|
+
const { setStyleXProps } = usePreferColors();
|
|
11536
|
+
const modeTabClasses = setStyleXProps(modeTabStyles.base);
|
|
11537
|
+
const iconClasses = setStyleXProps(modeTabStyles.icon);
|
|
11538
|
+
const { value: selectedTab, disabled, setSelectedTab, } = React.useContext(ModeTabContext);
|
|
11539
|
+
const isSelected = selectedTab === value;
|
|
11540
|
+
const isDisabled = disabled || rest.disabled;
|
|
11541
|
+
const handleClick = () => {
|
|
11542
|
+
if (isDisabled)
|
|
11543
|
+
return;
|
|
11544
|
+
setSelectedTab(value);
|
|
11545
|
+
};
|
|
11546
|
+
return (jsxRuntime.jsxs("button", { ref: ref, className: `${modeTabClasses.className} ${className || ""}`, "data-selected": isSelected, disabled: isDisabled, onClick: handleClick, ...rest, children: [icon && jsxRuntime.jsx("span", { ...iconClasses, children: icon }), label] }));
|
|
11817
11547
|
});
|
|
11818
11548
|
|
|
11819
11549
|
const tooltipDescriptionStyles = {
|
|
@@ -11979,94 +11709,40 @@ const tooltipShortStyles = {
|
|
|
11979
11709
|
}
|
|
11980
11710
|
};
|
|
11981
11711
|
|
|
11982
|
-
const Tooltip = props => {
|
|
11983
|
-
|
|
11984
|
-
delayDuration,
|
|
11985
|
-
skipDelayDuration,
|
|
11986
|
-
disableHoverableContent,
|
|
11987
|
-
...rest
|
|
11988
|
-
} = props;
|
|
11989
|
-
return jsxRuntime.jsx(Provider, {
|
|
11990
|
-
delayDuration: delayDuration,
|
|
11991
|
-
skipDelayDuration: skipDelayDuration,
|
|
11992
|
-
disableHoverableContent: disableHoverableContent,
|
|
11993
|
-
children: jsxRuntime.jsx(Root3, {
|
|
11994
|
-
...rest,
|
|
11995
|
-
children: props.children
|
|
11996
|
-
})
|
|
11997
|
-
});
|
|
11712
|
+
const Tooltip = (props) => {
|
|
11713
|
+
const { delayDuration, skipDelayDuration, disableHoverableContent, ...rest } = props;
|
|
11714
|
+
return (jsxRuntime.jsx(Provider, { delayDuration: delayDuration, skipDelayDuration: skipDelayDuration, disableHoverableContent: disableHoverableContent, children: jsxRuntime.jsx(Root3, { ...rest, children: props.children }) }));
|
|
11998
11715
|
};
|
|
11999
11716
|
const TooltipTrigger = Trigger;
|
|
12000
|
-
const TooltipContent = ({
|
|
12001
|
-
|
|
12002
|
-
|
|
12003
|
-
|
|
12004
|
-
|
|
12005
|
-
|
|
12006
|
-
|
|
12007
|
-
|
|
12008
|
-
|
|
12009
|
-
|
|
12010
|
-
return jsxRuntime.jsx(Portal, {
|
|
12011
|
-
children: jsxRuntime.jsx(Content2, {
|
|
12012
|
-
className: `${contentClasses.className} ${className}`,
|
|
12013
|
-
...otherProps,
|
|
12014
|
-
children: rest.children
|
|
12015
|
-
})
|
|
12016
|
-
});
|
|
12017
|
-
}
|
|
12018
|
-
const {
|
|
12019
|
-
variant = "default",
|
|
12020
|
-
size = "regular"
|
|
12021
|
-
} = rest;
|
|
12022
|
-
const contentClasses = stylex__namespace.props(tooltipShortStyles.base, type === "short" && tooltipShortStyles[variant], type === "short" && tooltipShortStyles[size]);
|
|
12023
|
-
return jsxRuntime.jsx(Portal, {
|
|
12024
|
-
children: jsxRuntime.jsx(Content2, {
|
|
12025
|
-
className: contentClasses.className,
|
|
12026
|
-
...rest,
|
|
12027
|
-
children: rest.children
|
|
12028
|
-
})
|
|
12029
|
-
});
|
|
11717
|
+
const TooltipContent = ({ type, ...rest }) => {
|
|
11718
|
+
const { setStyleXProps } = usePreferColors();
|
|
11719
|
+
if (type === "default") {
|
|
11720
|
+
const contentClasses = setStyleXProps(tooltipDescriptionStyles.base);
|
|
11721
|
+
const { className, ...otherProps } = rest;
|
|
11722
|
+
return (jsxRuntime.jsx(Portal, { children: jsxRuntime.jsx(Content2, { className: `${contentClasses.className} ${className}`, ...otherProps, children: rest.children }) }));
|
|
11723
|
+
}
|
|
11724
|
+
const { variant = "default", size = "regular" } = rest;
|
|
11725
|
+
const contentClasses = setStyleXProps(tooltipShortStyles.base, type === "short" && tooltipShortStyles[variant], type === "short" && tooltipShortStyles[size]);
|
|
11726
|
+
return (jsxRuntime.jsx(Portal, { children: jsxRuntime.jsx(Content2, { className: contentClasses.className, ...rest, children: rest.children }) }));
|
|
12030
11727
|
};
|
|
12031
11728
|
const TooltipArrow = Arrow2;
|
|
12032
11729
|
const TooltipHeader = React.forwardRef((props, ref) => {
|
|
12033
|
-
|
|
12034
|
-
|
|
12035
|
-
|
|
12036
|
-
|
|
12037
|
-
const headerClasses = stylex__namespace.props(tooltipDescriptionStyles.header);
|
|
12038
|
-
return jsxRuntime.jsx("div", {
|
|
12039
|
-
className: `${headerClasses.className} ${className}`,
|
|
12040
|
-
...otherProps,
|
|
12041
|
-
ref: ref,
|
|
12042
|
-
children: props.children
|
|
12043
|
-
});
|
|
11730
|
+
const { className, ...otherProps } = props;
|
|
11731
|
+
const { setStyleXProps } = usePreferColors();
|
|
11732
|
+
const headerClasses = setStyleXProps(tooltipDescriptionStyles.header);
|
|
11733
|
+
return (jsxRuntime.jsx("div", { className: `${headerClasses.className} ${className}`, ...otherProps, ref: ref, children: props.children }));
|
|
12044
11734
|
});
|
|
12045
11735
|
const TooltipDescription = React.forwardRef((props, ref) => {
|
|
12046
|
-
|
|
12047
|
-
|
|
12048
|
-
|
|
12049
|
-
|
|
12050
|
-
const descriptionClasses = stylex__namespace.props(tooltipDescriptionStyles.content);
|
|
12051
|
-
return jsxRuntime.jsx("div", {
|
|
12052
|
-
className: `${descriptionClasses.className} ${className}`,
|
|
12053
|
-
...otherProps,
|
|
12054
|
-
ref: ref,
|
|
12055
|
-
children: props.children
|
|
12056
|
-
});
|
|
11736
|
+
const { className, ...otherProps } = props;
|
|
11737
|
+
const { setStyleXProps } = usePreferColors();
|
|
11738
|
+
const descriptionClasses = setStyleXProps(tooltipDescriptionStyles.content);
|
|
11739
|
+
return (jsxRuntime.jsx("div", { className: `${descriptionClasses.className} ${className}`, ...otherProps, ref: ref, children: props.children }));
|
|
12057
11740
|
});
|
|
12058
11741
|
const TooltipFooter = React.forwardRef((props, ref) => {
|
|
12059
|
-
|
|
12060
|
-
|
|
12061
|
-
|
|
12062
|
-
|
|
12063
|
-
const footerClasses = stylex__namespace.props(tooltipDescriptionStyles.footer);
|
|
12064
|
-
return jsxRuntime.jsx("div", {
|
|
12065
|
-
className: `${footerClasses.className} ${className}`,
|
|
12066
|
-
...otherProps,
|
|
12067
|
-
ref: ref,
|
|
12068
|
-
children: props.children
|
|
12069
|
-
});
|
|
11742
|
+
const { className, ...otherProps } = props;
|
|
11743
|
+
const { setStyleXProps } = usePreferColors();
|
|
11744
|
+
const footerClasses = setStyleXProps(tooltipDescriptionStyles.footer);
|
|
11745
|
+
return (jsxRuntime.jsx("div", { className: `${footerClasses.className} ${className}`, ...otherProps, ref: ref, children: props.children }));
|
|
12070
11746
|
});
|
|
12071
11747
|
|
|
12072
11748
|
const tagStyles = {
|
|
@@ -12357,46 +12033,21 @@ const tagStyles = {
|
|
|
12357
12033
|
}
|
|
12358
12034
|
};
|
|
12359
12035
|
|
|
12360
|
-
const Tag = React.forwardRef(({
|
|
12361
|
-
|
|
12362
|
-
|
|
12363
|
-
|
|
12364
|
-
|
|
12365
|
-
|
|
12366
|
-
|
|
12367
|
-
|
|
12368
|
-
|
|
12369
|
-
|
|
12370
|
-
|
|
12371
|
-
|
|
12372
|
-
|
|
12373
|
-
|
|
12374
|
-
|
|
12375
|
-
const tagClasses = stylex__namespace.props(tagStyles.base, tagStyles[variant], tagStyles[size]);
|
|
12376
|
-
const iconClasses = stylex__namespace.props(tagStyles.icon);
|
|
12377
|
-
const textClasses = stylex__namespace.props(tagStyles.text);
|
|
12378
|
-
const handleDeleteClick = event => {
|
|
12379
|
-
event.stopPropagation();
|
|
12380
|
-
onDeleteClick?.(value, event);
|
|
12381
|
-
};
|
|
12382
|
-
return jsxRuntime.jsxs("button", {
|
|
12383
|
-
ref: ref,
|
|
12384
|
-
className: `${tagClasses.className} ${className ?? ""}`,
|
|
12385
|
-
onClick: handleClick,
|
|
12386
|
-
"data-selected": isSelected,
|
|
12387
|
-
...props,
|
|
12388
|
-
children: [icon && jsxRuntime.jsx("span", {
|
|
12389
|
-
className: iconClasses.className,
|
|
12390
|
-
children: icon
|
|
12391
|
-
}), jsxRuntime.jsx("span", {
|
|
12392
|
-
...textClasses,
|
|
12393
|
-
children: value.label
|
|
12394
|
-
}), onDeleteClick && jsxRuntime.jsx("span", {
|
|
12395
|
-
className: iconClasses.className,
|
|
12396
|
-
onClick: handleDeleteClick,
|
|
12397
|
-
children: jsxRuntime.jsx(X, {})
|
|
12398
|
-
})]
|
|
12399
|
-
});
|
|
12036
|
+
const Tag = React.forwardRef(({ icon, value, variant = "filled", size = "regular", className, onDeleteClick, onClick, ...props }, ref) => {
|
|
12037
|
+
const { setStyleXProps } = usePreferColors();
|
|
12038
|
+
const [isSelected, setIsSelected] = React.useState(false);
|
|
12039
|
+
const handleClick = (event) => {
|
|
12040
|
+
setIsSelected((prev) => !prev);
|
|
12041
|
+
onClick?.(event);
|
|
12042
|
+
};
|
|
12043
|
+
const tagClasses = setStyleXProps(tagStyles.base, tagStyles[variant], tagStyles[size]);
|
|
12044
|
+
const iconClasses = setStyleXProps(tagStyles.icon);
|
|
12045
|
+
const textClasses = setStyleXProps(tagStyles.text);
|
|
12046
|
+
const handleDeleteClick = (event) => {
|
|
12047
|
+
event.stopPropagation();
|
|
12048
|
+
onDeleteClick?.(value, event);
|
|
12049
|
+
};
|
|
12050
|
+
return (jsxRuntime.jsxs("button", { ref: ref, className: `${tagClasses.className} ${className ?? ""}`, onClick: handleClick, "data-selected": isSelected, ...props, children: [icon && jsxRuntime.jsx("span", { className: iconClasses.className, children: icon }), jsxRuntime.jsx("span", { ...textClasses, children: value.label }), onDeleteClick && (jsxRuntime.jsx("span", { className: iconClasses.className, onClick: handleDeleteClick, children: jsxRuntime.jsx(X, {}) }))] }));
|
|
12400
12051
|
});
|
|
12401
12052
|
Tag.displayName = "Tag";
|
|
12402
12053
|
|
|
@@ -12771,245 +12422,131 @@ const multipleSelectItemStyles = {
|
|
|
12771
12422
|
};
|
|
12772
12423
|
|
|
12773
12424
|
const MultipleSelectContext = React.createContext({
|
|
12774
|
-
|
|
12775
|
-
|
|
12776
|
-
|
|
12777
|
-
|
|
12778
|
-
|
|
12425
|
+
isOpen: false,
|
|
12426
|
+
values: [],
|
|
12427
|
+
disabled: false,
|
|
12428
|
+
setSelectedValues: () => { },
|
|
12429
|
+
setIsOpen: () => { },
|
|
12779
12430
|
});
|
|
12780
|
-
const MultipleSelect = React.forwardRef(({
|
|
12781
|
-
|
|
12782
|
-
|
|
12783
|
-
|
|
12784
|
-
|
|
12785
|
-
|
|
12786
|
-
|
|
12787
|
-
|
|
12788
|
-
|
|
12789
|
-
|
|
12790
|
-
|
|
12791
|
-
|
|
12792
|
-
|
|
12793
|
-
|
|
12794
|
-
|
|
12795
|
-
|
|
12796
|
-
|
|
12797
|
-
|
|
12798
|
-
|
|
12799
|
-
|
|
12800
|
-
|
|
12801
|
-
|
|
12802
|
-
|
|
12803
|
-
const onTriggerOpenChange = value => {
|
|
12804
|
-
setIsOpen(value);
|
|
12805
|
-
onOpenChange?.(value);
|
|
12806
|
-
};
|
|
12807
|
-
return jsxRuntime.jsx(MultipleSelectContext, {
|
|
12808
|
-
value: {
|
|
12809
|
-
isOpen,
|
|
12810
|
-
values: selectedValues,
|
|
12811
|
-
disabled: disabled || false,
|
|
12812
|
-
setSelectedValues: onSelectedValuesChange,
|
|
12813
|
-
setIsOpen: onTriggerOpenChange
|
|
12814
|
-
},
|
|
12815
|
-
children: jsxRuntime.jsx("div", {
|
|
12816
|
-
ref: ref,
|
|
12817
|
-
className: `${wrapperStyles.className} ${className ?? ""}`,
|
|
12818
|
-
...rest,
|
|
12819
|
-
children: children
|
|
12820
|
-
})
|
|
12821
|
-
});
|
|
12822
|
-
});
|
|
12823
|
-
const MultipleSelectTrigger = React.forwardRef(({
|
|
12824
|
-
size = "regular",
|
|
12825
|
-
children,
|
|
12826
|
-
...rest
|
|
12827
|
-
}, ref) => {
|
|
12828
|
-
const {
|
|
12829
|
-
className,
|
|
12830
|
-
onClick,
|
|
12831
|
-
...otherProps
|
|
12832
|
-
} = rest;
|
|
12833
|
-
const {
|
|
12834
|
-
disabled,
|
|
12835
|
-
values,
|
|
12836
|
-
isOpen,
|
|
12837
|
-
setIsOpen
|
|
12838
|
-
} = React.useContext(MultipleSelectContext);
|
|
12839
|
-
const triggerStyles = stylex__namespace.props(multipleSelectTriggerStyles.base, multipleSelectTriggerStyles[size]);
|
|
12840
|
-
const arrowStyles = stylex__namespace.props(multipleSelectTriggerStyles.arrow);
|
|
12841
|
-
const handleTriggerClick = e => {
|
|
12842
|
-
e.stopPropagation();
|
|
12843
|
-
if (disabled) return;
|
|
12844
|
-
const value = !isOpen;
|
|
12845
|
-
setIsOpen(value);
|
|
12846
|
-
onClick?.(e);
|
|
12847
|
-
};
|
|
12848
|
-
return jsxRuntime.jsxs("div", {
|
|
12849
|
-
ref: ref,
|
|
12850
|
-
className: `${triggerStyles.className} ${className ?? ""}`,
|
|
12851
|
-
"data-disabled": disabled,
|
|
12852
|
-
"data-selected": values.length > 0,
|
|
12853
|
-
onClick: handleTriggerClick,
|
|
12854
|
-
...otherProps,
|
|
12855
|
-
children: [children, jsxRuntime.jsx("span", {
|
|
12856
|
-
...arrowStyles,
|
|
12857
|
-
children: jsxRuntime.jsx(ChevronDown, {
|
|
12858
|
-
size: 16
|
|
12859
|
-
})
|
|
12860
|
-
})]
|
|
12861
|
-
});
|
|
12862
|
-
});
|
|
12863
|
-
const MultipleSelectValue = React.forwardRef(({
|
|
12864
|
-
placeholder,
|
|
12865
|
-
className,
|
|
12866
|
-
...rest
|
|
12867
|
-
}, ref) => {
|
|
12868
|
-
const {
|
|
12869
|
-
values,
|
|
12870
|
-
disabled,
|
|
12871
|
-
setSelectedValues
|
|
12872
|
-
} = React.useContext(MultipleSelectContext);
|
|
12873
|
-
const [content, setContent] = React.useState(null);
|
|
12874
|
-
const composedRefs = useComposedRefs(ref, node => setContent(node));
|
|
12875
|
-
const valueStyles = stylex__namespace.props(multipleSelectTriggerStyles.value);
|
|
12876
|
-
const tagStyles = stylex__namespace.props(multipleSelectTriggerStyles.tag);
|
|
12877
|
-
const placeholderStyles = stylex__namespace.props(multipleSelectTriggerStyles.placeholder);
|
|
12878
|
-
const onDeleteClick = (value, e) => {
|
|
12879
|
-
e.stopPropagation();
|
|
12880
|
-
const newValues = values.filter(v => v.value !== value.id);
|
|
12881
|
-
setSelectedValues(newValues);
|
|
12882
|
-
};
|
|
12883
|
-
return jsxRuntime.jsx("div", {
|
|
12884
|
-
ref: composedRefs,
|
|
12885
|
-
style: {
|
|
12886
|
-
"--select-content-width": `${content?.offsetWidth}px`
|
|
12887
|
-
},
|
|
12888
|
-
className: `${valueStyles.className} ${className ?? ""}`,
|
|
12889
|
-
...rest,
|
|
12890
|
-
children: values?.length > 0 ? values.map(val => jsxRuntime.jsx(Tag, {
|
|
12891
|
-
value: {
|
|
12892
|
-
id: val.value,
|
|
12893
|
-
label: val.label
|
|
12894
|
-
},
|
|
12895
|
-
disabled: disabled,
|
|
12896
|
-
className: tagStyles.className,
|
|
12897
|
-
onDeleteClick: onDeleteClick
|
|
12898
|
-
}, val.value)) : jsxRuntime.jsx("span", {
|
|
12899
|
-
"data-disabled": disabled,
|
|
12900
|
-
...placeholderStyles,
|
|
12901
|
-
children: placeholder || "Select options"
|
|
12902
|
-
})
|
|
12903
|
-
});
|
|
12431
|
+
const MultipleSelect = React.forwardRef(({ open, onOpenChange, disabled, value, onValueChange, className, children, ...rest }, ref) => {
|
|
12432
|
+
const { setStyleXProps } = usePreferColors();
|
|
12433
|
+
const [isOpen, setIsOpen] = React.useState(open || false);
|
|
12434
|
+
const [selectedValues, setSelectedValues] = React.useState([]);
|
|
12435
|
+
const wrapperStyles = setStyleXProps(multipleSelectWrapperStyles.base);
|
|
12436
|
+
React.useEffect(() => {
|
|
12437
|
+
setIsOpen(open || false);
|
|
12438
|
+
}, [open]);
|
|
12439
|
+
const onSelectedValuesChange = (newValues) => {
|
|
12440
|
+
setSelectedValues(newValues);
|
|
12441
|
+
onValueChange?.(newValues.map((value) => ({ value: value.value, label: value.label })));
|
|
12442
|
+
};
|
|
12443
|
+
const onTriggerOpenChange = (value) => {
|
|
12444
|
+
setIsOpen(value);
|
|
12445
|
+
onOpenChange?.(value);
|
|
12446
|
+
};
|
|
12447
|
+
return (jsxRuntime.jsx(MultipleSelectContext, { value: {
|
|
12448
|
+
isOpen,
|
|
12449
|
+
values: selectedValues,
|
|
12450
|
+
disabled: disabled || false,
|
|
12451
|
+
setSelectedValues: onSelectedValuesChange,
|
|
12452
|
+
setIsOpen: onTriggerOpenChange,
|
|
12453
|
+
}, children: jsxRuntime.jsx("div", { ref: ref, className: `${wrapperStyles.className} ${className ?? ""}`, ...rest, children: children }) }));
|
|
12904
12454
|
});
|
|
12905
|
-
const
|
|
12906
|
-
|
|
12907
|
-
|
|
12908
|
-
|
|
12909
|
-
|
|
12910
|
-
|
|
12911
|
-
|
|
12912
|
-
|
|
12913
|
-
|
|
12914
|
-
|
|
12915
|
-
|
|
12916
|
-
|
|
12917
|
-
|
|
12918
|
-
const searchStyles = stylex__namespace.props(multipleSelectContentStyles.search);
|
|
12919
|
-
const [content, setContent] = React.useState(null);
|
|
12920
|
-
const composedRefs = useComposedRefs(ref, node => setContent(node));
|
|
12921
|
-
const [options, setOptions] = React.useState(optionsProps);
|
|
12922
|
-
React.useEffect(() => {
|
|
12923
|
-
if (isOpen) return;
|
|
12924
|
-
setOptions(optionsProps);
|
|
12925
|
-
}, [isOpen]);
|
|
12926
|
-
const handleSearchChange = e => {
|
|
12927
|
-
const searchValue = e.target.value.toLowerCase();
|
|
12928
|
-
if (!searchValue) {
|
|
12929
|
-
setOptions(optionsProps);
|
|
12930
|
-
return;
|
|
12931
|
-
}
|
|
12932
|
-
const filteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue));
|
|
12933
|
-
setOptions(filteredOptions);
|
|
12934
|
-
};
|
|
12935
|
-
React.useEffect(() => {
|
|
12936
|
-
const handleMouseUp = event => {
|
|
12937
|
-
if (!content?.contains(event.target)) {
|
|
12938
|
-
setIsOpen(false);
|
|
12939
|
-
}
|
|
12455
|
+
const MultipleSelectTrigger = React.forwardRef(({ size = "regular", children, ...rest }, ref) => {
|
|
12456
|
+
const { setStyleXProps } = usePreferColors();
|
|
12457
|
+
const { className, onClick, ...otherProps } = rest;
|
|
12458
|
+
const { disabled, values, isOpen, setIsOpen } = React.useContext(MultipleSelectContext);
|
|
12459
|
+
const triggerStyles = setStyleXProps(multipleSelectTriggerStyles.base, multipleSelectTriggerStyles[size]);
|
|
12460
|
+
const arrowStyles = setStyleXProps(multipleSelectTriggerStyles.arrow);
|
|
12461
|
+
const handleTriggerClick = (e) => {
|
|
12462
|
+
e.stopPropagation();
|
|
12463
|
+
if (disabled)
|
|
12464
|
+
return;
|
|
12465
|
+
const value = !isOpen;
|
|
12466
|
+
setIsOpen(value);
|
|
12467
|
+
onClick?.(e);
|
|
12940
12468
|
};
|
|
12941
|
-
|
|
12942
|
-
|
|
12943
|
-
|
|
12469
|
+
return (jsxRuntime.jsxs("div", { ref: ref, className: `${triggerStyles.className} ${className ?? ""}`, "data-disabled": disabled, "data-selected": values.length > 0, onClick: handleTriggerClick, ...otherProps, children: [children, jsxRuntime.jsx("span", { ...arrowStyles, children: jsxRuntime.jsx(ChevronDown, { size: 16 }) })] }));
|
|
12470
|
+
});
|
|
12471
|
+
const MultipleSelectValue = React.forwardRef(({ placeholder, className, ...rest }, ref) => {
|
|
12472
|
+
const { setStyleXProps } = usePreferColors();
|
|
12473
|
+
const { values, disabled, setSelectedValues } = React.useContext(MultipleSelectContext);
|
|
12474
|
+
const [content, setContent] = React.useState(null);
|
|
12475
|
+
const composedRefs = useComposedRefs(ref, (node) => setContent(node));
|
|
12476
|
+
const valueStyles = setStyleXProps(multipleSelectTriggerStyles.value);
|
|
12477
|
+
const tagStyles = setStyleXProps(multipleSelectTriggerStyles.tag);
|
|
12478
|
+
const placeholderStyles = setStyleXProps(multipleSelectTriggerStyles.placeholder);
|
|
12479
|
+
const onDeleteClick = (value, e) => {
|
|
12480
|
+
e.stopPropagation();
|
|
12481
|
+
const newValues = values.filter((v) => v.value !== value.id);
|
|
12482
|
+
setSelectedValues(newValues);
|
|
12944
12483
|
};
|
|
12945
|
-
|
|
12946
|
-
|
|
12947
|
-
|
|
12948
|
-
|
|
12949
|
-
|
|
12950
|
-
|
|
12951
|
-
|
|
12952
|
-
|
|
12484
|
+
return (jsxRuntime.jsx("div", { ref: composedRefs, style: {
|
|
12485
|
+
"--select-content-width": `${content?.offsetWidth}px`,
|
|
12486
|
+
}, className: `${valueStyles.className} ${className ?? ""}`, ...rest, children: values?.length > 0 ? (values.map((val) => (jsxRuntime.jsx(Tag, { value: { id: val.value, label: val.label }, disabled: disabled, className: tagStyles.className, onDeleteClick: onDeleteClick }, val.value)))) : (jsxRuntime.jsx("span", { "data-disabled": disabled, ...placeholderStyles, children: placeholder || "Select options" })) }));
|
|
12487
|
+
});
|
|
12488
|
+
const MultipleSelectContent = React.forwardRef(({ useSearch, options: optionsProps, indicator, className, ...rest }, ref) => {
|
|
12489
|
+
const { setStyleXProps } = usePreferColors();
|
|
12490
|
+
const { isOpen, setIsOpen } = React.useContext(MultipleSelectContext);
|
|
12491
|
+
const contentStyles = setStyleXProps(multipleSelectContentStyles.base);
|
|
12492
|
+
const optionsStyles = setStyleXProps(multipleSelectContentStyles.options);
|
|
12493
|
+
const searchStyles = setStyleXProps(multipleSelectContentStyles.search);
|
|
12494
|
+
const [content, setContent] = React.useState(null);
|
|
12495
|
+
const composedRefs = useComposedRefs(ref, (node) => setContent(node));
|
|
12496
|
+
const [options, setOptions] = React.useState(optionsProps);
|
|
12497
|
+
React.useEffect(() => {
|
|
12498
|
+
if (isOpen)
|
|
12499
|
+
return;
|
|
12500
|
+
setOptions(optionsProps);
|
|
12501
|
+
}, [isOpen]);
|
|
12502
|
+
const handleSearchChange = (e) => {
|
|
12503
|
+
const searchValue = e.target.value.toLowerCase();
|
|
12504
|
+
if (!searchValue) {
|
|
12505
|
+
setOptions(optionsProps);
|
|
12506
|
+
return;
|
|
12507
|
+
}
|
|
12508
|
+
const filteredOptions = options.filter((option) => option.label.toLowerCase().includes(searchValue));
|
|
12509
|
+
setOptions(filteredOptions);
|
|
12953
12510
|
};
|
|
12954
|
-
|
|
12955
|
-
|
|
12956
|
-
|
|
12957
|
-
|
|
12958
|
-
|
|
12959
|
-
|
|
12960
|
-
|
|
12961
|
-
|
|
12962
|
-
|
|
12963
|
-
|
|
12964
|
-
|
|
12965
|
-
|
|
12966
|
-
|
|
12967
|
-
|
|
12968
|
-
|
|
12969
|
-
|
|
12970
|
-
|
|
12971
|
-
|
|
12972
|
-
|
|
12973
|
-
|
|
12974
|
-
|
|
12975
|
-
})]
|
|
12976
|
-
});
|
|
12511
|
+
React.useEffect(() => {
|
|
12512
|
+
const handleMouseUp = (event) => {
|
|
12513
|
+
if (!content?.contains(event.target)) {
|
|
12514
|
+
setIsOpen(false);
|
|
12515
|
+
}
|
|
12516
|
+
};
|
|
12517
|
+
document.addEventListener("mouseup", handleMouseUp);
|
|
12518
|
+
return () => {
|
|
12519
|
+
document.removeEventListener("mouseup", handleMouseUp);
|
|
12520
|
+
};
|
|
12521
|
+
}, [setIsOpen, content]);
|
|
12522
|
+
React.useEffect(() => {
|
|
12523
|
+
const close = () => setIsOpen(false);
|
|
12524
|
+
window.addEventListener("blur", close);
|
|
12525
|
+
window.addEventListener("resize", close);
|
|
12526
|
+
return () => {
|
|
12527
|
+
window.removeEventListener("blur", close);
|
|
12528
|
+
window.removeEventListener("resize", close);
|
|
12529
|
+
};
|
|
12530
|
+
}, [setIsOpen]);
|
|
12531
|
+
return (isOpen && (jsxRuntime.jsxs("div", { ref: composedRefs, className: `${contentStyles.className} ${className ?? ""}`, ...rest, children: [useSearch && (jsxRuntime.jsx("div", { ...searchStyles, children: jsxRuntime.jsx(Input, { onChange: handleSearchChange, leftIcon: jsxRuntime.jsx(MagnifyingGlassIcon, { width: 20, height: 20 }), placeholder: "Enter any characters..." }) })), jsxRuntime.jsx("ul", { ...optionsStyles, children: options.map((option) => (jsxRuntime.jsx(MultipleSelectItem, { option: option, indicator: indicator }, option.value))) })] })));
|
|
12977
12532
|
});
|
|
12978
|
-
const MultipleSelectItem = React.forwardRef(({
|
|
12979
|
-
|
|
12980
|
-
|
|
12981
|
-
|
|
12982
|
-
|
|
12983
|
-
|
|
12984
|
-
|
|
12985
|
-
|
|
12986
|
-
|
|
12987
|
-
|
|
12988
|
-
|
|
12989
|
-
|
|
12990
|
-
|
|
12991
|
-
|
|
12992
|
-
|
|
12993
|
-
|
|
12994
|
-
|
|
12995
|
-
const newValues = isSelected ? values.filter(val => val.value !== option.value) : [...values, option];
|
|
12996
|
-
setSelectedValues(newValues);
|
|
12997
|
-
};
|
|
12998
|
-
return jsxRuntime.jsxs("li", {
|
|
12999
|
-
ref: ref,
|
|
13000
|
-
"data-selected": isSelected,
|
|
13001
|
-
"data-disabled": option.disabled,
|
|
13002
|
-
className: `${itemStyles.className} ${className}`,
|
|
13003
|
-
onClick: handleClick,
|
|
13004
|
-
...rest,
|
|
13005
|
-
children: [jsxRuntime.jsx("span", {
|
|
13006
|
-
className: itemLabelStyles.className,
|
|
13007
|
-
children: option.label
|
|
13008
|
-
}), indicator && isSelected && jsxRuntime.jsx("span", {
|
|
13009
|
-
...indicatorStyles,
|
|
13010
|
-
children: indicator
|
|
13011
|
-
})]
|
|
13012
|
-
});
|
|
12533
|
+
const MultipleSelectItem = React.forwardRef(({ option, indicator, className, ...rest }, ref) => {
|
|
12534
|
+
const { setStyleXProps } = usePreferColors();
|
|
12535
|
+
const { values, setSelectedValues } = React.useContext(MultipleSelectContext);
|
|
12536
|
+
const isSelected = values.some((val) => val.value === option.value);
|
|
12537
|
+
const itemStyles = setStyleXProps(multipleSelectItemStyles.base);
|
|
12538
|
+
const indicatorStyles = setStyleXProps(multipleSelectItemStyles.indicator);
|
|
12539
|
+
const itemLabelStyles = setStyleXProps(multipleSelectItemStyles.label);
|
|
12540
|
+
const handleClick = (e) => {
|
|
12541
|
+
e.stopPropagation();
|
|
12542
|
+
if (option.disabled)
|
|
12543
|
+
return;
|
|
12544
|
+
const newValues = isSelected
|
|
12545
|
+
? values.filter((val) => val.value !== option.value)
|
|
12546
|
+
: [...values, option];
|
|
12547
|
+
setSelectedValues(newValues);
|
|
12548
|
+
};
|
|
12549
|
+
return (jsxRuntime.jsxs("li", { ref: ref, "data-selected": isSelected, "data-disabled": option.disabled, className: `${itemStyles.className} ${className}`, onClick: handleClick, ...rest, children: [jsxRuntime.jsx("span", { className: itemLabelStyles.className, children: option.label }), indicator && isSelected && jsxRuntime.jsx("span", { ...indicatorStyles, children: indicator })] }));
|
|
13013
12550
|
});
|
|
13014
12551
|
|
|
13015
12552
|
const tableStyles = {
|
|
@@ -13078,99 +12615,35 @@ const tableStyles = {
|
|
|
13078
12615
|
}
|
|
13079
12616
|
};
|
|
13080
12617
|
|
|
13081
|
-
const Table = React.forwardRef(({
|
|
13082
|
-
|
|
13083
|
-
|
|
13084
|
-
|
|
13085
|
-
const tableClasses = stylex__namespace.props(tableStyles.table);
|
|
13086
|
-
return jsxRuntime.jsx("table", {
|
|
13087
|
-
ref: ref,
|
|
13088
|
-
className: `${tableClasses.className} ${className ?? ""}`,
|
|
13089
|
-
...rest
|
|
13090
|
-
});
|
|
12618
|
+
const Table = React.forwardRef(({ className, ...rest }, ref) => {
|
|
12619
|
+
const { setStyleXProps } = usePreferColors();
|
|
12620
|
+
const tableClasses = setStyleXProps(tableStyles.table);
|
|
12621
|
+
return (jsxRuntime.jsx("table", { ref: ref, className: `${tableClasses.className} ${className ?? ""}`, ...rest }));
|
|
13091
12622
|
});
|
|
13092
|
-
const TableHeader = React.forwardRef(({
|
|
13093
|
-
|
|
13094
|
-
|
|
13095
|
-
|
|
13096
|
-
const headerRowClasses = stylex__namespace.props(tableStyles.theadTR);
|
|
13097
|
-
return jsxRuntime.jsx("thead", {
|
|
13098
|
-
children: jsxRuntime.jsx("tr", {
|
|
13099
|
-
ref: ref,
|
|
13100
|
-
className: `${headerRowClasses.className} ${className ?? ""}`,
|
|
13101
|
-
...rest
|
|
13102
|
-
})
|
|
13103
|
-
});
|
|
12623
|
+
const TableHeader = React.forwardRef(({ className, ...rest }, ref) => {
|
|
12624
|
+
const { setStyleXProps } = usePreferColors();
|
|
12625
|
+
const headerRowClasses = setStyleXProps(tableStyles.theadTR);
|
|
12626
|
+
return (jsxRuntime.jsx("thead", { children: jsxRuntime.jsx("tr", { ref: ref, className: `${headerRowClasses.className} ${className ?? ""}`, ...rest }) }));
|
|
13104
12627
|
});
|
|
13105
|
-
const TableBody = React.forwardRef(({
|
|
13106
|
-
|
|
13107
|
-
}, ref) => {
|
|
13108
|
-
return jsxRuntime.jsx("tbody", {
|
|
13109
|
-
ref: ref,
|
|
13110
|
-
...rest
|
|
13111
|
-
});
|
|
12628
|
+
const TableBody = React.forwardRef(({ ...rest }, ref) => {
|
|
12629
|
+
return jsxRuntime.jsx("tbody", { ref: ref, ...rest });
|
|
13112
12630
|
});
|
|
13113
|
-
const TableRow = React.forwardRef(({
|
|
13114
|
-
|
|
13115
|
-
|
|
13116
|
-
|
|
13117
|
-
...rest
|
|
13118
|
-
}, ref) => {
|
|
13119
|
-
const rowClasses = stylex__namespace.props(tableStyles.tr);
|
|
13120
|
-
return jsxRuntime.jsx("tr", {
|
|
13121
|
-
ref: ref,
|
|
13122
|
-
"data-selected": isSelected,
|
|
13123
|
-
"data-last-border": shouldLastBorderRender,
|
|
13124
|
-
className: `${rowClasses.className} ${className ?? ""}`,
|
|
13125
|
-
...rest
|
|
13126
|
-
});
|
|
12631
|
+
const TableRow = React.forwardRef(({ isSelected, shouldLastBorderRender = true, className, ...rest }, ref) => {
|
|
12632
|
+
const { setStyleXProps } = usePreferColors();
|
|
12633
|
+
const rowClasses = setStyleXProps(tableStyles.tr);
|
|
12634
|
+
return (jsxRuntime.jsx("tr", { ref: ref, "data-selected": isSelected, "data-last-border": shouldLastBorderRender, className: `${rowClasses.className} ${className ?? ""}`, ...rest }));
|
|
13127
12635
|
});
|
|
13128
|
-
const TableHead = React.forwardRef(({
|
|
13129
|
-
|
|
13130
|
-
|
|
13131
|
-
|
|
13132
|
-
|
|
13133
|
-
const headClasses = stylex__namespace.props(tableStyles.cell, tableStyles.th);
|
|
13134
|
-
const contentClasses = stylex__namespace.props(tableStyles.content);
|
|
13135
|
-
return jsxRuntime.jsx("th", {
|
|
13136
|
-
ref: ref,
|
|
13137
|
-
className: `${headClasses.className} ${className ?? ""}`,
|
|
13138
|
-
...rest,
|
|
13139
|
-
children: jsxRuntime.jsx("div", {
|
|
13140
|
-
className: contentClasses.className,
|
|
13141
|
-
children: children
|
|
13142
|
-
})
|
|
13143
|
-
});
|
|
12636
|
+
const TableHead = React.forwardRef(({ className, children, ...rest }, ref) => {
|
|
12637
|
+
const { setStyleXProps } = usePreferColors();
|
|
12638
|
+
const headClasses = setStyleXProps(tableStyles.cell, tableStyles.th);
|
|
12639
|
+
const contentClasses = setStyleXProps(tableStyles.content);
|
|
12640
|
+
return (jsxRuntime.jsx("th", { ref: ref, className: `${headClasses.className} ${className ?? ""}`, ...rest, children: jsxRuntime.jsx("div", { className: contentClasses.className, children: children }) }));
|
|
13144
12641
|
});
|
|
13145
|
-
const TableCell = React.forwardRef(({
|
|
13146
|
-
|
|
13147
|
-
|
|
13148
|
-
|
|
13149
|
-
|
|
13150
|
-
}, ref) => {
|
|
13151
|
-
const cellClasses = stylex__namespace.props(tableStyles.cell, tableStyles.td);
|
|
13152
|
-
const contentClasses = stylex__namespace.props(tableStyles.content);
|
|
13153
|
-
return jsxRuntime.jsx("td", {
|
|
13154
|
-
ref: ref,
|
|
13155
|
-
className: `${cellClasses.className} ${className ?? ""}`,
|
|
13156
|
-
...rest,
|
|
13157
|
-
children: showTooltip ? jsxRuntime.jsxs(Tooltip, {
|
|
13158
|
-
children: [jsxRuntime.jsx(TooltipTrigger, {
|
|
13159
|
-
asChild: true,
|
|
13160
|
-
children: jsxRuntime.jsx("span", {
|
|
13161
|
-
children: children
|
|
13162
|
-
})
|
|
13163
|
-
}), jsxRuntime.jsx(TooltipContent, {
|
|
13164
|
-
type: "short",
|
|
13165
|
-
side: "bottom",
|
|
13166
|
-
sideOffset: 10,
|
|
13167
|
-
children: children
|
|
13168
|
-
})]
|
|
13169
|
-
}) : jsxRuntime.jsx("div", {
|
|
13170
|
-
className: contentClasses.className,
|
|
13171
|
-
children: children
|
|
13172
|
-
})
|
|
13173
|
-
});
|
|
12642
|
+
const TableCell = React.forwardRef(({ className, children, showTooltip, ...rest }, ref) => {
|
|
12643
|
+
const { setStyleXProps } = usePreferColors();
|
|
12644
|
+
const cellClasses = setStyleXProps(tableStyles.cell, tableStyles.td);
|
|
12645
|
+
const contentClasses = setStyleXProps(tableStyles.content);
|
|
12646
|
+
return (jsxRuntime.jsx("td", { ref: ref, className: `${cellClasses.className} ${className ?? ""}`, ...rest, children: showTooltip ? (jsxRuntime.jsxs(Tooltip, { children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.jsx("span", { children: children }) }), jsxRuntime.jsx(TooltipContent, { type: "short", side: "bottom", sideOffset: 10, children: children })] })) : (jsxRuntime.jsx("div", { className: contentClasses.className, children: children })) }));
|
|
13174
12647
|
});
|
|
13175
12648
|
|
|
13176
12649
|
const DataTable = ({ config, data, emptyMessage, onRowClick, enableSelection = false, shouldLastBorderRender = true, classNames, refs, }) => {
|
|
@@ -13268,97 +12741,39 @@ const paginationStyles = {
|
|
|
13268
12741
|
}
|
|
13269
12742
|
};
|
|
13270
12743
|
|
|
13271
|
-
const Pagination = ({
|
|
13272
|
-
|
|
13273
|
-
|
|
13274
|
-
}
|
|
13275
|
-
const paginationClasses = stylex__namespace.props(paginationStyles.pagination);
|
|
13276
|
-
return jsxRuntime.jsx("nav", {
|
|
13277
|
-
role: "navigation",
|
|
13278
|
-
"aria-label": "pagination",
|
|
13279
|
-
"data-slot": "pagination",
|
|
13280
|
-
className: `${paginationClasses.className} ${className ?? ""}`,
|
|
13281
|
-
...props
|
|
13282
|
-
});
|
|
12744
|
+
const Pagination = ({ className, ...props }) => {
|
|
12745
|
+
const { setStyleXProps } = usePreferColors();
|
|
12746
|
+
const paginationClasses = setStyleXProps(paginationStyles.pagination);
|
|
12747
|
+
return (jsxRuntime.jsx("nav", { role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: `${paginationClasses.className} ${className ?? ""}`, ...props }));
|
|
13283
12748
|
};
|
|
13284
|
-
const PaginationContent = ({
|
|
13285
|
-
|
|
13286
|
-
|
|
13287
|
-
}
|
|
13288
|
-
const contentClasses = stylex__namespace.props(paginationStyles.content);
|
|
13289
|
-
return jsxRuntime.jsx("ul", {
|
|
13290
|
-
"data-slot": "pagination-content",
|
|
13291
|
-
className: `${contentClasses.className} ${className ?? ""}`,
|
|
13292
|
-
...props
|
|
13293
|
-
});
|
|
12749
|
+
const PaginationContent = ({ className, ...props }) => {
|
|
12750
|
+
const { setStyleXProps } = usePreferColors();
|
|
12751
|
+
const contentClasses = setStyleXProps(paginationStyles.content);
|
|
12752
|
+
return (jsxRuntime.jsx("ul", { "data-slot": "pagination-content", className: `${contentClasses.className} ${className ?? ""}`, ...props }));
|
|
13294
12753
|
};
|
|
13295
|
-
const PaginationItem = props => {
|
|
13296
|
-
|
|
13297
|
-
"data-slot": "pagination-item",
|
|
13298
|
-
...props
|
|
13299
|
-
});
|
|
12754
|
+
const PaginationItem = (props) => {
|
|
12755
|
+
return jsxRuntime.jsx("li", { "data-slot": "pagination-item", ...props });
|
|
13300
12756
|
};
|
|
13301
|
-
const PaginationLink = ({
|
|
13302
|
-
|
|
13303
|
-
|
|
13304
|
-
|
|
13305
|
-
variant = "ghost",
|
|
13306
|
-
...props
|
|
13307
|
-
}) => {
|
|
13308
|
-
const buttonClasses = stylex__namespace.props(paginationStyles.button, isActive && paginationStyles.selected);
|
|
13309
|
-
return jsxRuntime.jsx(Button, {
|
|
13310
|
-
"aria-current": isActive ? "page" : undefined,
|
|
13311
|
-
"data-slot": "pagination-link",
|
|
13312
|
-
"data-active": isActive,
|
|
13313
|
-
size: size,
|
|
13314
|
-
variant: variant,
|
|
13315
|
-
className: `${buttonClasses.className} ${className ?? ""}`,
|
|
13316
|
-
...props
|
|
13317
|
-
});
|
|
12757
|
+
const PaginationLink = ({ className, isActive, size = "regular", variant = "ghost", ...props }) => {
|
|
12758
|
+
const { setStyleXProps } = usePreferColors();
|
|
12759
|
+
const buttonClasses = setStyleXProps(paginationStyles.button, isActive && paginationStyles.selected);
|
|
12760
|
+
return (jsxRuntime.jsx(Button, { "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive, size: size, variant: variant, className: `${buttonClasses.className} ${className ?? ""}`, ...props }));
|
|
13318
12761
|
};
|
|
13319
|
-
const PaginationPrevious = ({
|
|
13320
|
-
|
|
13321
|
-
|
|
13322
|
-
})
|
|
13323
|
-
const previousClasses = stylex__namespace.props(paginationStyles.previous);
|
|
13324
|
-
return jsxRuntime.jsx(PaginationLink, {
|
|
13325
|
-
"aria-label": "Go to previous page",
|
|
13326
|
-
className: `${previousClasses.className} ${className ?? ""}`,
|
|
13327
|
-
leftIcon: jsxRuntime.jsx(ChevronLeft, {
|
|
13328
|
-
size: 20
|
|
13329
|
-
}),
|
|
13330
|
-
...props
|
|
13331
|
-
});
|
|
12762
|
+
const PaginationPrevious = ({ className, ...props }) => {
|
|
12763
|
+
const { setStyleXProps } = usePreferColors();
|
|
12764
|
+
const previousClasses = setStyleXProps(paginationStyles.previous);
|
|
12765
|
+
return (jsxRuntime.jsx(PaginationLink, { "aria-label": "Go to previous page", className: `${previousClasses.className} ${className ?? ""}`, leftIcon: jsxRuntime.jsx(ChevronLeft, { size: 20 }), ...props }));
|
|
13332
12766
|
};
|
|
13333
|
-
const PaginationNext = ({
|
|
13334
|
-
|
|
13335
|
-
|
|
13336
|
-
})
|
|
13337
|
-
const nextClasses = stylex__namespace.props(paginationStyles.next);
|
|
13338
|
-
return jsxRuntime.jsx(PaginationLink, {
|
|
13339
|
-
"aria-label": "Go to next page",
|
|
13340
|
-
className: `${nextClasses.className} ${className ?? ""}`,
|
|
13341
|
-
leftIcon: jsxRuntime.jsx(ChevronRight, {
|
|
13342
|
-
size: 20
|
|
13343
|
-
}),
|
|
13344
|
-
...props
|
|
13345
|
-
});
|
|
12767
|
+
const PaginationNext = ({ className, ...props }) => {
|
|
12768
|
+
const { setStyleXProps } = usePreferColors();
|
|
12769
|
+
const nextClasses = setStyleXProps(paginationStyles.next);
|
|
12770
|
+
return (jsxRuntime.jsx(PaginationLink, { "aria-label": "Go to next page", className: `${nextClasses.className} ${className ?? ""}`, leftIcon: jsxRuntime.jsx(ChevronRight, { size: 20 }), ...props }));
|
|
13346
12771
|
};
|
|
13347
|
-
const PaginationEllipsis = ({
|
|
13348
|
-
|
|
13349
|
-
|
|
13350
|
-
|
|
13351
|
-
|
|
13352
|
-
const iconClasses = stylex__namespace.props(paginationStyles.ellipsisIcon);
|
|
13353
|
-
return jsxRuntime.jsx("span", {
|
|
13354
|
-
"aria-hidden": true,
|
|
13355
|
-
"data-slot": "pagination-ellipsis",
|
|
13356
|
-
className: `${ellipsisClasses.className} ${className ?? ""}`,
|
|
13357
|
-
...props,
|
|
13358
|
-
children: jsxRuntime.jsx(Ellipsis, {
|
|
13359
|
-
className: iconClasses.className
|
|
13360
|
-
})
|
|
13361
|
-
});
|
|
12772
|
+
const PaginationEllipsis = ({ className, ...props }) => {
|
|
12773
|
+
const { setStyleXProps } = usePreferColors();
|
|
12774
|
+
const ellipsisClasses = setStyleXProps(paginationStyles.ellipsis);
|
|
12775
|
+
const iconClasses = setStyleXProps(paginationStyles.ellipsisIcon);
|
|
12776
|
+
return (jsxRuntime.jsx("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: `${ellipsisClasses.className} ${className ?? ""}`, ...props, children: jsxRuntime.jsx(Ellipsis, { className: iconClasses.className }) }));
|
|
13362
12777
|
};
|
|
13363
12778
|
|
|
13364
12779
|
const interactiveListItemStyles = {
|
|
@@ -13490,66 +12905,27 @@ const interactiveListItemStyles = {
|
|
|
13490
12905
|
};
|
|
13491
12906
|
|
|
13492
12907
|
const InteractiveListItemContext = React.createContext({
|
|
13493
|
-
|
|
12908
|
+
disabled: false,
|
|
13494
12909
|
});
|
|
13495
|
-
const InteractiveListItem = React.forwardRef(({
|
|
13496
|
-
|
|
13497
|
-
|
|
13498
|
-
|
|
13499
|
-
children,
|
|
13500
|
-
...props
|
|
13501
|
-
}, ref) => {
|
|
13502
|
-
const itemClasses = stylex__namespace.props(interactiveListItemStyles.base);
|
|
13503
|
-
return jsxRuntime.jsx(InteractiveListItemContext, {
|
|
13504
|
-
value: {
|
|
13505
|
-
disabled: !!disabled
|
|
13506
|
-
},
|
|
13507
|
-
children: jsxRuntime.jsx("div", {
|
|
13508
|
-
ref: ref,
|
|
13509
|
-
"data-selected": isSelected,
|
|
13510
|
-
"data-disabled": disabled,
|
|
13511
|
-
"data-hover-actions": showHoverActions,
|
|
13512
|
-
className: `${itemClasses.className} ${props.className ?? ""}`,
|
|
13513
|
-
...props,
|
|
13514
|
-
children: children
|
|
13515
|
-
})
|
|
13516
|
-
});
|
|
12910
|
+
const InteractiveListItem = React.forwardRef(({ isSelected, disabled, showHoverActions = true, children, ...props }, ref) => {
|
|
12911
|
+
const { setStyleXProps } = usePreferColors();
|
|
12912
|
+
const itemClasses = setStyleXProps(interactiveListItemStyles.base);
|
|
12913
|
+
return (jsxRuntime.jsx(InteractiveListItemContext, { value: { disabled: !!disabled }, children: jsxRuntime.jsx("div", { ref: ref, "data-selected": isSelected, "data-disabled": disabled, "data-hover-actions": showHoverActions, className: `${itemClasses.className} ${props.className ?? ""}`, ...props, children: children }) }));
|
|
13517
12914
|
});
|
|
13518
|
-
const InteractiveListItemIcon = React.forwardRef(({
|
|
13519
|
-
|
|
13520
|
-
|
|
13521
|
-
|
|
13522
|
-
const iconClasses = stylex__namespace.props(interactiveListItemStyles.icon);
|
|
13523
|
-
return jsxRuntime.jsx("span", {
|
|
13524
|
-
className: iconClasses.className,
|
|
13525
|
-
...props,
|
|
13526
|
-
ref: ref,
|
|
13527
|
-
children: children
|
|
13528
|
-
});
|
|
12915
|
+
const InteractiveListItemIcon = React.forwardRef(({ children, ...props }, ref) => {
|
|
12916
|
+
const { setStyleXProps } = usePreferColors();
|
|
12917
|
+
const iconClasses = setStyleXProps(interactiveListItemStyles.icon);
|
|
12918
|
+
return (jsxRuntime.jsx("span", { className: iconClasses.className, ...props, ref: ref, children: children }));
|
|
13529
12919
|
});
|
|
13530
|
-
const InteractiveListItemContent = React.forwardRef(({
|
|
13531
|
-
|
|
13532
|
-
|
|
13533
|
-
|
|
13534
|
-
const contentClasses = stylex__namespace.props(interactiveListItemStyles.content);
|
|
13535
|
-
return jsxRuntime.jsx("div", {
|
|
13536
|
-
className: contentClasses.className,
|
|
13537
|
-
...rest,
|
|
13538
|
-
ref: ref,
|
|
13539
|
-
children: children
|
|
13540
|
-
});
|
|
12920
|
+
const InteractiveListItemContent = React.forwardRef(({ children, ...rest }, ref) => {
|
|
12921
|
+
const { setStyleXProps } = usePreferColors();
|
|
12922
|
+
const contentClasses = setStyleXProps(interactiveListItemStyles.content);
|
|
12923
|
+
return (jsxRuntime.jsx("div", { className: contentClasses.className, ...rest, ref: ref, children: children }));
|
|
13541
12924
|
});
|
|
13542
|
-
const InteractiveListItemActions = React.forwardRef(({
|
|
13543
|
-
|
|
13544
|
-
|
|
13545
|
-
|
|
13546
|
-
const buttonsClasses = stylex__namespace.props(interactiveListItemStyles.buttons);
|
|
13547
|
-
return jsxRuntime.jsx("div", {
|
|
13548
|
-
className: buttonsClasses.className,
|
|
13549
|
-
...props,
|
|
13550
|
-
ref: ref,
|
|
13551
|
-
children: children
|
|
13552
|
-
});
|
|
12925
|
+
const InteractiveListItemActions = React.forwardRef(({ children, ...props }, ref) => {
|
|
12926
|
+
const { setStyleXProps } = usePreferColors();
|
|
12927
|
+
const buttonsClasses = setStyleXProps(interactiveListItemStyles.buttons);
|
|
12928
|
+
return (jsxRuntime.jsx("div", { className: buttonsClasses.className, ...props, ref: ref, children: children }));
|
|
13553
12929
|
});
|
|
13554
12930
|
|
|
13555
12931
|
const calendarStyles = {
|
|
@@ -13772,50 +13148,33 @@ const calendarStyles = {
|
|
|
13772
13148
|
}
|
|
13773
13149
|
};
|
|
13774
13150
|
|
|
13775
|
-
const Calendar = ({
|
|
13776
|
-
|
|
13777
|
-
|
|
13778
|
-
|
|
13779
|
-
|
|
13780
|
-
|
|
13781
|
-
|
|
13782
|
-
|
|
13783
|
-
|
|
13784
|
-
|
|
13785
|
-
|
|
13786
|
-
|
|
13787
|
-
|
|
13788
|
-
|
|
13789
|
-
|
|
13790
|
-
|
|
13791
|
-
|
|
13792
|
-
|
|
13793
|
-
|
|
13794
|
-
|
|
13795
|
-
|
|
13796
|
-
|
|
13797
|
-
|
|
13798
|
-
|
|
13799
|
-
|
|
13800
|
-
|
|
13801
|
-
|
|
13802
|
-
today: getDatePickerClassName("day"),
|
|
13803
|
-
range_start: `${getDatePickerClassName("rangeStart")} range-start`,
|
|
13804
|
-
range_middle: `${getDatePickerClassName("rangeMiddle")} range-middle`,
|
|
13805
|
-
range_end: `${getDatePickerClassName("rangeEnd")} range-end`,
|
|
13806
|
-
outside: getDatePickerClassName("outside"),
|
|
13807
|
-
...classNames
|
|
13808
|
-
},
|
|
13809
|
-
components: {
|
|
13810
|
-
Chevron: args => jsxRuntime.jsx(ChevronLeft, {
|
|
13811
|
-
size: 16,
|
|
13812
|
-
...args,
|
|
13813
|
-
"data-orientation": args.orientation,
|
|
13814
|
-
className: getDatePickerClassName("navButton")
|
|
13815
|
-
})
|
|
13816
|
-
},
|
|
13817
|
-
...props
|
|
13818
|
-
});
|
|
13151
|
+
const Calendar = ({ className, classNames, showOutsideDays = true, ...props }) => {
|
|
13152
|
+
const { setStyleXProps } = usePreferColors();
|
|
13153
|
+
const getDatePickerClassName = (key) => {
|
|
13154
|
+
return setStyleXProps(calendarStyles[key]).className;
|
|
13155
|
+
};
|
|
13156
|
+
return (jsxRuntime.jsx(reactDayPicker.DayPicker, { showOutsideDays: showOutsideDays, navLayout: "around", style: {
|
|
13157
|
+
"--rdp-day-width": "32px",
|
|
13158
|
+
"--rdp-day-height": "32px",
|
|
13159
|
+
"--rdp-day_button-height": "32px",
|
|
13160
|
+
"--rdp-day_button-width": "32px",
|
|
13161
|
+
}, className: className, classNames: {
|
|
13162
|
+
months: getDatePickerClassName("months"),
|
|
13163
|
+
month_caption: getDatePickerClassName("monthCaption"),
|
|
13164
|
+
caption_label: getDatePickerClassName("captionLabel"),
|
|
13165
|
+
month_grid: getDatePickerClassName("monthGrid"),
|
|
13166
|
+
weekday: getDatePickerClassName("weekday"),
|
|
13167
|
+
day: getDatePickerClassName("day"),
|
|
13168
|
+
selected: getDatePickerClassName("selected"),
|
|
13169
|
+
today: getDatePickerClassName("day"),
|
|
13170
|
+
range_start: `${getDatePickerClassName("rangeStart")} range-start`,
|
|
13171
|
+
range_middle: `${getDatePickerClassName("rangeMiddle")} range-middle`,
|
|
13172
|
+
range_end: `${getDatePickerClassName("rangeEnd")} range-end`,
|
|
13173
|
+
outside: getDatePickerClassName("outside"),
|
|
13174
|
+
...classNames,
|
|
13175
|
+
}, components: {
|
|
13176
|
+
Chevron: (args) => (jsxRuntime.jsx(ChevronLeft, { size: 16, ...args, "data-orientation": args.orientation, className: getDatePickerClassName("navButton") })),
|
|
13177
|
+
}, ...props }));
|
|
13819
13178
|
};
|
|
13820
13179
|
|
|
13821
13180
|
const datePickerStyles = {
|
|
@@ -13834,90 +13193,49 @@ var dayjs_min = {exports: {}};
|
|
|
13834
13193
|
var dayjs_minExports = dayjs_min.exports;
|
|
13835
13194
|
var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
|
|
13836
13195
|
|
|
13837
|
-
const DatePicker = ({
|
|
13838
|
-
|
|
13839
|
-
|
|
13840
|
-
|
|
13841
|
-
|
|
13842
|
-
|
|
13843
|
-
|
|
13844
|
-
|
|
13845
|
-
|
|
13846
|
-
|
|
13847
|
-
|
|
13848
|
-
|
|
13849
|
-
|
|
13850
|
-
|
|
13851
|
-
|
|
13852
|
-
|
|
13853
|
-
|
|
13854
|
-
|
|
13855
|
-
|
|
13856
|
-
|
|
13857
|
-
|
|
13858
|
-
|
|
13859
|
-
|
|
13860
|
-
|
|
13861
|
-
|
|
13862
|
-
|
|
13863
|
-
}
|
|
13864
|
-
|
|
13865
|
-
|
|
13866
|
-
|
|
13867
|
-
|
|
13868
|
-
|
|
13869
|
-
|
|
13870
|
-
|
|
13871
|
-
|
|
13872
|
-
|
|
13873
|
-
|
|
13874
|
-
|
|
13875
|
-
|
|
13876
|
-
|
|
13877
|
-
|
|
13878
|
-
}
|
|
13879
|
-
|
|
13880
|
-
}
|
|
13881
|
-
return placeholder ?? "";
|
|
13882
|
-
};
|
|
13883
|
-
return jsxRuntime.jsxs(Root2$2, {
|
|
13884
|
-
open: open,
|
|
13885
|
-
onOpenChange: handleOpenChange,
|
|
13886
|
-
children: [jsxRuntime.jsx(Trigger$2, {
|
|
13887
|
-
asChild: true,
|
|
13888
|
-
children: jsxRuntime.jsx(Button, {
|
|
13889
|
-
size: size,
|
|
13890
|
-
fullWidth: true,
|
|
13891
|
-
variant: "outline",
|
|
13892
|
-
leftIcon: jsxRuntime.jsx(Calendar$1, {
|
|
13893
|
-
size: 20
|
|
13894
|
-
}),
|
|
13895
|
-
className: wrapperStyle.className,
|
|
13896
|
-
disabled: disabled,
|
|
13897
|
-
children: getDateToFormatString(inputValue)
|
|
13898
|
-
})
|
|
13899
|
-
}), jsxRuntime.jsx(Content2$2, {
|
|
13900
|
-
sideOffset: 10,
|
|
13901
|
-
align: "start",
|
|
13902
|
-
...rest,
|
|
13903
|
-
children: mode === "single" ? jsxRuntime.jsx(Calendar, {
|
|
13904
|
-
mode: "single",
|
|
13905
|
-
...rest,
|
|
13906
|
-
selected: inputValue,
|
|
13907
|
-
onSelect: handleSelect
|
|
13908
|
-
}) : mode === "multiple" ? jsxRuntime.jsx(Calendar, {
|
|
13909
|
-
mode: "multiple",
|
|
13910
|
-
...rest,
|
|
13911
|
-
selected: Array.isArray(inputValue) ? inputValue : [],
|
|
13912
|
-
onSelect: handleSelect
|
|
13913
|
-
}) : jsxRuntime.jsx(Calendar, {
|
|
13914
|
-
mode: "range",
|
|
13915
|
-
...rest,
|
|
13916
|
-
selected: inputValue,
|
|
13917
|
-
onSelect: handleSelect
|
|
13918
|
-
})
|
|
13919
|
-
})]
|
|
13920
|
-
});
|
|
13196
|
+
const DatePicker = ({ size = "regular", placeholder = "Pick a date", format = "YYYY. MM. DD.", value, mode = "single", onChange, isInstantClose = false, open: openProp, onOpenChange: onOpenChangeProp, disabled, ...rest }) => {
|
|
13197
|
+
const { setStyleXProps } = usePreferColors();
|
|
13198
|
+
const [inputValue, setInputValue] = React.useState(value);
|
|
13199
|
+
const [open, setOpen] = React.useState(openProp || false);
|
|
13200
|
+
const wrapperStyle = setStyleXProps(datePickerStyles.wrapper);
|
|
13201
|
+
const handleSelect = (date) => {
|
|
13202
|
+
if (mode === "single") {
|
|
13203
|
+
const value = date;
|
|
13204
|
+
onChange?.(value);
|
|
13205
|
+
}
|
|
13206
|
+
else if (mode === "multiple") {
|
|
13207
|
+
const value = date;
|
|
13208
|
+
onChange?.(value);
|
|
13209
|
+
}
|
|
13210
|
+
else if (mode === "range") {
|
|
13211
|
+
const value = date;
|
|
13212
|
+
onChange?.(value);
|
|
13213
|
+
}
|
|
13214
|
+
setInputValue(date);
|
|
13215
|
+
if (isInstantClose && mode === "single") {
|
|
13216
|
+
handleOpenChange(false);
|
|
13217
|
+
}
|
|
13218
|
+
};
|
|
13219
|
+
const handleOpenChange = (open) => {
|
|
13220
|
+
setOpen(open);
|
|
13221
|
+
onOpenChangeProp?.(open);
|
|
13222
|
+
};
|
|
13223
|
+
const getDateToFormatString = (date) => {
|
|
13224
|
+
if (date instanceof Date) {
|
|
13225
|
+
return dayjs(date).format(format);
|
|
13226
|
+
}
|
|
13227
|
+
else if (Array.isArray(date)) {
|
|
13228
|
+
return date.map((d) => dayjs(d).format(format)).join(", ");
|
|
13229
|
+
}
|
|
13230
|
+
else if (date &&
|
|
13231
|
+
typeof date === "object" &&
|
|
13232
|
+
"from" in date &&
|
|
13233
|
+
"to" in date) {
|
|
13234
|
+
return `${dayjs(date.from).format(format)} - ${dayjs(date.to).format(format)}`;
|
|
13235
|
+
}
|
|
13236
|
+
return placeholder ?? "";
|
|
13237
|
+
};
|
|
13238
|
+
return (jsxRuntime.jsxs(Root2$2, { open: open, onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(Trigger$2, { asChild: true, children: jsxRuntime.jsx(Button, { size: size, fullWidth: true, variant: "outline", leftIcon: jsxRuntime.jsx(Calendar$1, { size: 20 }), className: wrapperStyle.className, disabled: disabled, children: getDateToFormatString(inputValue) }) }), jsxRuntime.jsx(Content2$2, { sideOffset: 10, align: "start", ...rest, children: mode === "single" ? (jsxRuntime.jsx(Calendar, { mode: "single", ...rest, selected: inputValue, onSelect: handleSelect })) : mode === "multiple" ? (jsxRuntime.jsx(Calendar, { mode: "multiple", ...rest, selected: Array.isArray(inputValue) ? inputValue : [], onSelect: handleSelect })) : (jsxRuntime.jsx(Calendar, { mode: "range", ...rest, selected: inputValue, onSelect: handleSelect })) })] }));
|
|
13921
13239
|
};
|
|
13922
13240
|
|
|
13923
13241
|
const contextMenuContentStyles = {
|
|
@@ -14116,80 +13434,42 @@ const contextMenuContentStyles = {
|
|
|
14116
13434
|
|
|
14117
13435
|
const ContextMenu = Root2$3;
|
|
14118
13436
|
const ContextMenuTrigger = Trigger$3;
|
|
14119
|
-
const ContextMenuContent = props => {
|
|
14120
|
-
|
|
14121
|
-
|
|
14122
|
-
children: jsxRuntime.jsx(Content2$3, {
|
|
14123
|
-
...props,
|
|
14124
|
-
className: `${contentClasses.className} ${props.className ?? ""}`,
|
|
14125
|
-
children: props.children
|
|
14126
|
-
})
|
|
14127
|
-
});
|
|
13437
|
+
const ContextMenuContent = (props) => {
|
|
13438
|
+
const { setStyleXProps } = usePreferColors();
|
|
13439
|
+
const contentClasses = setStyleXProps(contextMenuContentStyles.content);
|
|
13440
|
+
return (jsxRuntime.jsx(Portal2, { children: jsxRuntime.jsx(Content2$3, { ...props, className: `${contentClasses.className} ${props.className ?? ""}`, children: props.children }) }));
|
|
14128
13441
|
};
|
|
14129
13442
|
const ContextMenuArrow = Arrow2$1;
|
|
14130
|
-
const ContextMenuLabel = props => {
|
|
14131
|
-
|
|
14132
|
-
|
|
14133
|
-
|
|
14134
|
-
|
|
14135
|
-
|
|
14136
|
-
const
|
|
14137
|
-
|
|
14138
|
-
|
|
14139
|
-
|
|
14140
|
-
|
|
14141
|
-
}) => {
|
|
14142
|
-
const itemClasses = stylex__namespace.props(contextMenuContentStyles.item);
|
|
14143
|
-
const leftIconClasses = stylex__namespace.props(contextMenuContentStyles.leftIcon);
|
|
14144
|
-
const rightSlotClasses = stylex__namespace.props(contextMenuContentStyles.rightSlot);
|
|
14145
|
-
const itemContentClasses = stylex__namespace.props(contextMenuContentStyles.itemContent);
|
|
14146
|
-
const itemTextClasses = stylex__namespace.props(contextMenuContentStyles.textValue);
|
|
14147
|
-
return jsxRuntime.jsxs(Item2$1, {
|
|
14148
|
-
...rest,
|
|
14149
|
-
className: `${itemClasses.className} ${rest.className ?? ""}`,
|
|
14150
|
-
children: [jsxRuntime.jsxs("div", {
|
|
14151
|
-
...itemContentClasses,
|
|
14152
|
-
children: [jsxRuntime.jsx("div", {
|
|
14153
|
-
className: leftIconClasses.className,
|
|
14154
|
-
children: leftIcon
|
|
14155
|
-
}), jsxRuntime.jsx("span", {
|
|
14156
|
-
...itemTextClasses,
|
|
14157
|
-
children: textValue
|
|
14158
|
-
})]
|
|
14159
|
-
}), rightSlot && jsxRuntime.jsx("div", {
|
|
14160
|
-
...rightSlotClasses,
|
|
14161
|
-
children: rightSlot
|
|
14162
|
-
})]
|
|
14163
|
-
});
|
|
13443
|
+
const ContextMenuLabel = (props) => {
|
|
13444
|
+
return (jsxRuntime.jsx(Label2, { ...props, children: props.children }));
|
|
13445
|
+
};
|
|
13446
|
+
const ContextMenuItem = ({ leftIcon, rightSlot, textValue, ...rest }) => {
|
|
13447
|
+
const { setStyleXProps } = usePreferColors();
|
|
13448
|
+
const itemClasses = setStyleXProps(contextMenuContentStyles.item);
|
|
13449
|
+
const leftIconClasses = setStyleXProps(contextMenuContentStyles.leftIcon);
|
|
13450
|
+
const rightSlotClasses = setStyleXProps(contextMenuContentStyles.rightSlot);
|
|
13451
|
+
const itemContentClasses = setStyleXProps(contextMenuContentStyles.itemContent);
|
|
13452
|
+
const itemTextClasses = setStyleXProps(contextMenuContentStyles.textValue);
|
|
13453
|
+
return (jsxRuntime.jsxs(Item2$1, { ...rest, className: `${itemClasses.className} ${rest.className ?? ""}`, children: [jsxRuntime.jsxs("div", { ...itemContentClasses, children: [jsxRuntime.jsx("div", { className: leftIconClasses.className, children: leftIcon }), jsxRuntime.jsx("span", { ...itemTextClasses, children: textValue })] }), rightSlot && jsxRuntime.jsx("div", { ...rightSlotClasses, children: rightSlot })] }));
|
|
14164
13454
|
};
|
|
14165
13455
|
const ContextMenuGroup = Group2;
|
|
14166
13456
|
const ContextMenuSub = Sub2;
|
|
14167
13457
|
const ContextMenuSubTrigger = SubTrigger2;
|
|
14168
|
-
const ContextMenuSubContent = props => {
|
|
14169
|
-
|
|
14170
|
-
|
|
14171
|
-
children: jsxRuntime.jsx(SubContent2, {
|
|
14172
|
-
...props,
|
|
14173
|
-
className: `${contentClasses.className} ${props.className ?? ""}`,
|
|
14174
|
-
children: props.children
|
|
14175
|
-
})
|
|
14176
|
-
});
|
|
13458
|
+
const ContextMenuSubContent = (props) => {
|
|
13459
|
+
const { setStyleXProps } = usePreferColors();
|
|
13460
|
+
const contentClasses = setStyleXProps(contextMenuContentStyles.content);
|
|
13461
|
+
return (jsxRuntime.jsx(Portal2, { children: jsxRuntime.jsx(SubContent2, { ...props, className: `${contentClasses.className} ${props.className ?? ""}`, children: props.children }) }));
|
|
14177
13462
|
};
|
|
14178
|
-
const ContextMenuSeparator = props => {
|
|
14179
|
-
|
|
14180
|
-
|
|
14181
|
-
...props,
|
|
14182
|
-
className: `${separatorClasses.className} ${props.className ?? ""}`
|
|
14183
|
-
});
|
|
13463
|
+
const ContextMenuSeparator = (props) => {
|
|
13464
|
+
const { setStyleXProps } = usePreferColors();
|
|
13465
|
+
const separatorClasses = setStyleXProps(contextMenuContentStyles.separator);
|
|
13466
|
+
return (jsxRuntime.jsx(Separator2, { ...props, className: `${separatorClasses.className} ${props.className ?? ""}` }));
|
|
14184
13467
|
};
|
|
14185
13468
|
const ContextMenuCheckboxItem = CheckboxItem2;
|
|
14186
13469
|
const ContextMenuRadioGroup = RadioGroup2;
|
|
14187
13470
|
const ContextMenuRadioItem = RadioItem2;
|
|
14188
|
-
const ContextMenuItemIndicator = props => {
|
|
14189
|
-
|
|
14190
|
-
...props,
|
|
14191
|
-
children: props.children
|
|
14192
|
-
});
|
|
13471
|
+
const ContextMenuItemIndicator = (props) => {
|
|
13472
|
+
return (jsxRuntime.jsx(ItemIndicator2, { ...props, children: props.children }));
|
|
14193
13473
|
};
|
|
14194
13474
|
|
|
14195
13475
|
const autocompleteStyles = {
|
|
@@ -14274,7 +13554,6 @@ const autocompleteStyles = {
|
|
|
14274
13554
|
k8WAf4: null,
|
|
14275
13555
|
kLKAdn: null,
|
|
14276
13556
|
kGO01o: null,
|
|
14277
|
-
kWkggS: "tpst1po33qi",
|
|
14278
13557
|
kMwMTN: "tpst3jceqh",
|
|
14279
13558
|
kGuDYH: "tpst1v3388n",
|
|
14280
13559
|
kLWn49: "tpst1waae9e",
|
|
@@ -14324,174 +13603,119 @@ const autocompleteStyles = {
|
|
|
14324
13603
|
}
|
|
14325
13604
|
};
|
|
14326
13605
|
|
|
14327
|
-
const AutocompleteContentItem = ({
|
|
14328
|
-
|
|
14329
|
-
|
|
14330
|
-
|
|
14331
|
-
|
|
14332
|
-
|
|
14333
|
-
|
|
14334
|
-
|
|
14335
|
-
}
|
|
14336
|
-
|
|
14337
|
-
|
|
14338
|
-
|
|
14339
|
-
|
|
14340
|
-
|
|
14341
|
-
|
|
14342
|
-
|
|
14343
|
-
|
|
14344
|
-
|
|
14345
|
-
|
|
14346
|
-
|
|
14347
|
-
|
|
14348
|
-
|
|
14349
|
-
|
|
14350
|
-
|
|
14351
|
-
|
|
14352
|
-
|
|
14353
|
-
|
|
14354
|
-
|
|
14355
|
-
|
|
14356
|
-
|
|
14357
|
-
|
|
14358
|
-
|
|
14359
|
-
|
|
14360
|
-
|
|
14361
|
-
|
|
14362
|
-
|
|
14363
|
-
|
|
14364
|
-
|
|
14365
|
-
|
|
14366
|
-
|
|
14367
|
-
|
|
14368
|
-
|
|
14369
|
-
|
|
14370
|
-
|
|
14371
|
-
|
|
14372
|
-
|
|
14373
|
-
|
|
14374
|
-
|
|
14375
|
-
|
|
14376
|
-
|
|
14377
|
-
|
|
14378
|
-
|
|
14379
|
-
|
|
13606
|
+
const AutocompleteContentItem = ({ inputValue, item, index, displayValue, highlightedIndex, onClick, className = "", }) => {
|
|
13607
|
+
const { setStyleXProps } = usePreferColors();
|
|
13608
|
+
const isHighlighted = index === highlightedIndex;
|
|
13609
|
+
const itemClasses = setStyleXProps(autocompleteStyles.item, isHighlighted && autocompleteStyles.highlight);
|
|
13610
|
+
const matchedClasses = setStyleXProps(autocompleteStyles.matched);
|
|
13611
|
+
return (jsxRuntime.jsx("li", { id: `suggestion-item-${index}`, className: `${itemClasses.className} ${className}`, onClick: (e) => onClick(item, e), role: "option", "aria-selected": isHighlighted, children: displayValue(item)
|
|
13612
|
+
.split(new RegExp(`(${inputValue})`, "gi"))
|
|
13613
|
+
.map((part, i) => part.toLowerCase() === inputValue.toLowerCase() ? (jsxRuntime.jsx("span", { ...matchedClasses, children: part }, i)) : (jsxRuntime.jsx("span", { children: part }, i))) }));
|
|
13614
|
+
};
|
|
13615
|
+
const Autocomplete = ({ placeholder, data, value, displayValue, onSelect, onChange, noResultsMessage = "검색 결과가 없습니다.", maxResults = 10, debounceTime = 300, wrapperClassName, contentClassName, itemClassName, }) => {
|
|
13616
|
+
const { setStyleXProps } = usePreferColors();
|
|
13617
|
+
const [inputValue, setInputValue] = React.useState(value ?? "");
|
|
13618
|
+
const [filteredResults, setFilteredResults] = React.useState([]);
|
|
13619
|
+
const [showSuggestions, setShowSuggestions] = React.useState(false);
|
|
13620
|
+
const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
|
|
13621
|
+
// useRef를 사용하여 DOM 엘리먼트 참조
|
|
13622
|
+
const autocompleteRef = React.useRef(null);
|
|
13623
|
+
const inputRef = React.useRef(null);
|
|
13624
|
+
// 디바운싱을 위한 타이머 참조
|
|
13625
|
+
const debounceTimerRef = React.useRef(null);
|
|
13626
|
+
// 외부 클릭 감지 (추천 목록 닫기)
|
|
13627
|
+
React.useEffect(() => {
|
|
13628
|
+
const handleClickOutside = (event) => {
|
|
13629
|
+
if (autocompleteRef.current &&
|
|
13630
|
+
!autocompleteRef.current.contains(event.target)) {
|
|
13631
|
+
setShowSuggestions(false);
|
|
13632
|
+
}
|
|
13633
|
+
};
|
|
13634
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
13635
|
+
return () => {
|
|
13636
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
13637
|
+
if (debounceTimerRef.current) {
|
|
13638
|
+
clearTimeout(debounceTimerRef.current);
|
|
13639
|
+
}
|
|
13640
|
+
};
|
|
13641
|
+
}, []);
|
|
13642
|
+
React.useEffect(() => {
|
|
13643
|
+
setInputValue(value ?? "");
|
|
13644
|
+
}, [value]);
|
|
13645
|
+
// 입력 값 변경에 따른 필터링 로직 (디바운싱 적용)
|
|
13646
|
+
React.useEffect(() => {
|
|
13647
|
+
if (debounceTimerRef.current) {
|
|
13648
|
+
clearTimeout(debounceTimerRef.current);
|
|
13649
|
+
}
|
|
13650
|
+
if (inputValue.length === 0) {
|
|
13651
|
+
setFilteredResults(data);
|
|
13652
|
+
return;
|
|
13653
|
+
}
|
|
13654
|
+
debounceTimerRef.current = setTimeout(() => {
|
|
13655
|
+
const lowercasedInput = inputValue.toLowerCase();
|
|
13656
|
+
const results = data.filter((item) => displayValue(item).toLowerCase().includes(lowercasedInput));
|
|
13657
|
+
setFilteredResults(results.slice(0, maxResults));
|
|
13658
|
+
setHighlightedIndex(-1); // 필터링 시 하이라이트 초기화
|
|
13659
|
+
}, debounceTime);
|
|
13660
|
+
return () => {
|
|
13661
|
+
// 클린업: 컴포넌트 언마운트 또는 useEffect 재실행 시 타이머 정리
|
|
13662
|
+
if (debounceTimerRef.current) {
|
|
13663
|
+
clearTimeout(debounceTimerRef.current);
|
|
13664
|
+
}
|
|
13665
|
+
};
|
|
13666
|
+
}, [inputValue, data, displayValue, maxResults, debounceTime]);
|
|
13667
|
+
// 항목 선택 처리
|
|
13668
|
+
const handleSelectItem = React.useCallback((item) => {
|
|
13669
|
+
setInputValue(displayValue(item));
|
|
13670
|
+
onSelect?.(item);
|
|
14380
13671
|
setShowSuggestions(false);
|
|
14381
|
-
|
|
13672
|
+
setHighlightedIndex(-1);
|
|
13673
|
+
inputRef.current?.focus(); // 선택 후 입력 필드에 포커스 유지
|
|
13674
|
+
}, [displayValue, onSelect]);
|
|
13675
|
+
// 입력 필드 변경 핸들러
|
|
13676
|
+
const handleChange = (e) => {
|
|
13677
|
+
const value = e.target.value;
|
|
13678
|
+
setInputValue(value);
|
|
13679
|
+
onChange?.(value); // 외부 onChange 콜백 호출
|
|
14382
13680
|
};
|
|
14383
|
-
|
|
14384
|
-
|
|
14385
|
-
|
|
14386
|
-
|
|
14387
|
-
|
|
14388
|
-
|
|
13681
|
+
// 키보드 이벤트 핸들러
|
|
13682
|
+
const handleKeyDown = (e) => {
|
|
13683
|
+
if (!showSuggestions || filteredResults.length === 0)
|
|
13684
|
+
return;
|
|
13685
|
+
if (e.key === "ArrowDown") {
|
|
13686
|
+
e.preventDefault(); // 커서 이동 방지
|
|
13687
|
+
setHighlightedIndex((prevIndex) => (prevIndex + 1) % filteredResults.length);
|
|
13688
|
+
}
|
|
13689
|
+
else if (e.key === "ArrowUp") {
|
|
13690
|
+
e.preventDefault(); // 커서 이동 방지
|
|
13691
|
+
setHighlightedIndex((prevIndex) => (prevIndex - 1 + filteredResults.length) % filteredResults.length);
|
|
13692
|
+
}
|
|
13693
|
+
else if (e.key === "Enter") {
|
|
13694
|
+
e.preventDefault();
|
|
13695
|
+
if (highlightedIndex >= 0) {
|
|
13696
|
+
handleSelectItem(filteredResults[highlightedIndex]);
|
|
13697
|
+
}
|
|
13698
|
+
else if (filteredResults.length > 0) ;
|
|
13699
|
+
}
|
|
13700
|
+
else if (e.key === "Escape") {
|
|
13701
|
+
e.preventDefault();
|
|
13702
|
+
setShowSuggestions(false);
|
|
13703
|
+
setHighlightedIndex(-1);
|
|
13704
|
+
}
|
|
14389
13705
|
};
|
|
14390
|
-
|
|
14391
|
-
|
|
14392
|
-
|
|
14393
|
-
|
|
14394
|
-
// 입력 값 변경에 따른 필터링 로직 (디바운싱 적용)
|
|
14395
|
-
React.useEffect(() => {
|
|
14396
|
-
if (debounceTimerRef.current) {
|
|
14397
|
-
clearTimeout(debounceTimerRef.current);
|
|
14398
|
-
}
|
|
14399
|
-
if (inputValue.length === 0) {
|
|
14400
|
-
setFilteredResults(data);
|
|
14401
|
-
return;
|
|
14402
|
-
}
|
|
14403
|
-
debounceTimerRef.current = setTimeout(() => {
|
|
14404
|
-
const lowercasedInput = inputValue.toLowerCase();
|
|
14405
|
-
const results = data.filter(item => displayValue(item).toLowerCase().includes(lowercasedInput));
|
|
14406
|
-
setFilteredResults(results.slice(0, maxResults));
|
|
14407
|
-
setHighlightedIndex(-1); // 필터링 시 하이라이트 초기화
|
|
14408
|
-
}, debounceTime);
|
|
14409
|
-
return () => {
|
|
14410
|
-
// 클린업: 컴포넌트 언마운트 또는 useEffect 재실행 시 타이머 정리
|
|
14411
|
-
if (debounceTimerRef.current) {
|
|
14412
|
-
clearTimeout(debounceTimerRef.current);
|
|
14413
|
-
}
|
|
13706
|
+
// 마우스 클릭 시 항목 선택
|
|
13707
|
+
const handleItemClick = (item, e) => {
|
|
13708
|
+
e.stopPropagation(); // 외부 클릭 감지 이벤트 버블링 방지
|
|
13709
|
+
handleSelectItem(item);
|
|
14414
13710
|
};
|
|
14415
|
-
|
|
14416
|
-
|
|
14417
|
-
|
|
14418
|
-
|
|
14419
|
-
|
|
14420
|
-
|
|
14421
|
-
|
|
14422
|
-
|
|
14423
|
-
}, [displayValue, onSelect]);
|
|
14424
|
-
// 입력 필드 변경 핸들러
|
|
14425
|
-
const handleChange = e => {
|
|
14426
|
-
const value = e.target.value;
|
|
14427
|
-
setInputValue(value);
|
|
14428
|
-
onChange?.(value); // 외부 onChange 콜백 호출
|
|
14429
|
-
};
|
|
14430
|
-
// 키보드 이벤트 핸들러
|
|
14431
|
-
const handleKeyDown = e => {
|
|
14432
|
-
if (!showSuggestions || filteredResults.length === 0) return;
|
|
14433
|
-
if (e.key === "ArrowDown") {
|
|
14434
|
-
e.preventDefault(); // 커서 이동 방지
|
|
14435
|
-
setHighlightedIndex(prevIndex => (prevIndex + 1) % filteredResults.length);
|
|
14436
|
-
} else if (e.key === "ArrowUp") {
|
|
14437
|
-
e.preventDefault(); // 커서 이동 방지
|
|
14438
|
-
setHighlightedIndex(prevIndex => (prevIndex - 1 + filteredResults.length) % filteredResults.length);
|
|
14439
|
-
} else if (e.key === "Enter") {
|
|
14440
|
-
e.preventDefault();
|
|
14441
|
-
if (highlightedIndex >= 0) {
|
|
14442
|
-
handleSelectItem(filteredResults[highlightedIndex]);
|
|
14443
|
-
} else if (filteredResults.length > 0) ;
|
|
14444
|
-
} else if (e.key === "Escape") {
|
|
14445
|
-
e.preventDefault();
|
|
14446
|
-
setShowSuggestions(false);
|
|
14447
|
-
setHighlightedIndex(-1);
|
|
14448
|
-
}
|
|
14449
|
-
};
|
|
14450
|
-
// 마우스 클릭 시 항목 선택
|
|
14451
|
-
const handleItemClick = (item, e) => {
|
|
14452
|
-
e.stopPropagation(); // 외부 클릭 감지 이벤트 버블링 방지
|
|
14453
|
-
handleSelectItem(item);
|
|
14454
|
-
};
|
|
14455
|
-
const wrapperClasses = stylex__namespace.props(autocompleteStyles.wrapper);
|
|
14456
|
-
const contentClasses = stylex__namespace.props(autocompleteStyles.content);
|
|
14457
|
-
const noResultClasses = stylex__namespace.props(autocompleteStyles.noResults);
|
|
14458
|
-
return jsxRuntime.jsxs("div", {
|
|
14459
|
-
ref: autocompleteRef,
|
|
14460
|
-
className: `${wrapperClasses.className} ${wrapperClassName ?? ""}`,
|
|
14461
|
-
children: [jsxRuntime.jsx(Input, {
|
|
14462
|
-
type: "text",
|
|
14463
|
-
placeholder: placeholder,
|
|
14464
|
-
value: inputValue,
|
|
14465
|
-
onChange: handleChange,
|
|
14466
|
-
onFocus: () => setShowSuggestions(true),
|
|
14467
|
-
onKeyDown: handleKeyDown,
|
|
14468
|
-
ref: inputRef,
|
|
14469
|
-
// ARIA 속성 (접근성)
|
|
14470
|
-
role: "combobox",
|
|
14471
|
-
"aria-autocomplete": "list",
|
|
14472
|
-
"aria-haspopup": "listbox",
|
|
14473
|
-
"aria-expanded": showSuggestions,
|
|
14474
|
-
"aria-controls": "autocomplete-suggestions",
|
|
14475
|
-
"aria-activedescendant": highlightedIndex >= 0 ? `suggestion-item-${highlightedIndex}` : undefined
|
|
14476
|
-
}), showSuggestions && jsxRuntime.jsx("ul", {
|
|
14477
|
-
id: "autocomplete-suggestions",
|
|
14478
|
-
role: "listbox",
|
|
14479
|
-
className: `${contentClasses.className} ${contentClassName ?? ""}`,
|
|
14480
|
-
children: filteredResults.length > 0 ? filteredResults.map((item, index) => jsxRuntime.jsx(AutocompleteContentItem, {
|
|
14481
|
-
item: item,
|
|
14482
|
-
index: index,
|
|
14483
|
-
highlightedIndex: highlightedIndex,
|
|
14484
|
-
onClick: handleItemClick,
|
|
14485
|
-
displayValue: displayValue,
|
|
14486
|
-
inputValue: inputValue,
|
|
14487
|
-
className: itemClassName
|
|
14488
|
-
}, displayValue(item) + index)) : jsxRuntime.jsx("li", {
|
|
14489
|
-
"data-no-results": true,
|
|
14490
|
-
...noResultClasses,
|
|
14491
|
-
children: noResultsMessage
|
|
14492
|
-
})
|
|
14493
|
-
})]
|
|
14494
|
-
});
|
|
13711
|
+
const wrapperClasses = setStyleXProps(autocompleteStyles.wrapper);
|
|
13712
|
+
const contentClasses = setStyleXProps(autocompleteStyles.content);
|
|
13713
|
+
const noResultClasses = setStyleXProps(autocompleteStyles.noResults);
|
|
13714
|
+
return (jsxRuntime.jsxs("div", { ref: autocompleteRef, className: `${wrapperClasses.className} ${wrapperClassName ?? ""}`, children: [jsxRuntime.jsx(Input, { type: "text", placeholder: placeholder, value: inputValue, onChange: handleChange, onFocus: () => setShowSuggestions(true), onKeyDown: handleKeyDown, ref: inputRef,
|
|
13715
|
+
// ARIA 속성 (접근성)
|
|
13716
|
+
role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": showSuggestions, "aria-controls": "autocomplete-suggestions", "aria-activedescendant": highlightedIndex >= 0
|
|
13717
|
+
? `suggestion-item-${highlightedIndex}`
|
|
13718
|
+
: undefined }), showSuggestions && (jsxRuntime.jsx("ul", { id: "autocomplete-suggestions", role: "listbox", className: `${contentClasses.className} ${contentClassName ?? ""}`, children: filteredResults.length > 0 ? (filteredResults.map((item, index) => (jsxRuntime.jsx(AutocompleteContentItem, { item: item, index: index, highlightedIndex: highlightedIndex, onClick: handleItemClick, displayValue: displayValue, inputValue: inputValue, className: itemClassName }, displayValue(item) + index)))) : (jsxRuntime.jsx("li", { "data-no-results": true, ...noResultClasses, children: noResultsMessage })) }))] }));
|
|
14495
13719
|
};
|
|
14496
13720
|
|
|
14497
13721
|
// 컴포넌트 내보내기
|
|
@@ -14593,6 +13817,7 @@ exports.checkboxStyles = checkboxStyles;
|
|
|
14593
13817
|
exports.checkboxWrapperStyles = checkboxWrapperStyles;
|
|
14594
13818
|
exports.commonStyles = commonStyles;
|
|
14595
13819
|
exports.contextMenuContentStyles = contextMenuContentStyles;
|
|
13820
|
+
exports.darkMode = darkMode;
|
|
14596
13821
|
exports.datePickerStyles = datePickerStyles;
|
|
14597
13822
|
exports.dialogContentStyles = dialogContentStyles;
|
|
14598
13823
|
exports.dialogOverlayStyles = dialogOverlayStyles;
|
|
@@ -14607,6 +13832,7 @@ exports.inputWrapperSizeStyles = inputWrapperSizeStyles;
|
|
|
14607
13832
|
exports.inputWrapperStyles = inputWrapperStyles;
|
|
14608
13833
|
exports.interactiveListItemStyles = interactiveListItemStyles;
|
|
14609
13834
|
exports.labelStyles = labelStyles;
|
|
13835
|
+
exports.lightMode = lightMode;
|
|
14610
13836
|
exports.lineHeight = lineHeight;
|
|
14611
13837
|
exports.modeTabStyles = modeTabStyles;
|
|
14612
13838
|
exports.modeTabWrapperStyles = modeTabWrapperStyles;
|