@firecms/ui 3.0.0-canary.241 → 3.0.0-canary.244
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Autocomplete.d.ts +4 -2
- package/dist/components/Select.d.ts +1 -0
- package/dist/index.es.js +167 -148
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +167 -148
- package/dist/index.umd.js.map +1 -1
- package/package.json +2 -2
- package/src/components/Autocomplete.tsx +10 -5
- package/src/components/MultiSelect.tsx +2 -3
- package/src/components/Select.tsx +44 -39
@@ -3,6 +3,7 @@ export type AutocompleteProps = {
|
|
3
3
|
children: React.ReactNode;
|
4
4
|
open: boolean;
|
5
5
|
setOpen: (open: boolean) => void;
|
6
|
+
className?: string;
|
6
7
|
};
|
7
8
|
export declare const useAutoComplete: ({ ref }: {
|
8
9
|
ref: React.MutableRefObject<HTMLDivElement | null>;
|
@@ -11,9 +12,10 @@ export declare const useAutoComplete: ({ ref }: {
|
|
11
12
|
autoCompleteOpen: boolean;
|
12
13
|
setAutoCompleteOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
13
14
|
};
|
14
|
-
export declare function Autocomplete({ children, open, setOpen }: AutocompleteProps): import("react/jsx-runtime").JSX.Element;
|
15
|
+
export declare function Autocomplete({ children, open, setOpen, className }: AutocompleteProps): import("react/jsx-runtime").JSX.Element;
|
15
16
|
export type AutocompleteItemProps = {
|
16
17
|
children: React.ReactNode;
|
17
18
|
onClick?: () => void;
|
19
|
+
className?: string;
|
18
20
|
};
|
19
|
-
export declare function AutocompleteItem({ children, onClick }: AutocompleteItemProps): import("react/jsx-runtime").JSX.Element;
|
21
|
+
export declare function AutocompleteItem({ children, onClick, className }: AutocompleteItemProps): import("react/jsx-runtime").JSX.Element;
|
@@ -23,6 +23,7 @@ export type SelectProps<T extends SelectValue = string> = {
|
|
23
23
|
padding?: boolean;
|
24
24
|
invisible?: boolean;
|
25
25
|
children?: React.ReactNode;
|
26
|
+
dataType?: "string" | "number" | "boolean";
|
26
27
|
};
|
27
28
|
export declare const Select: React.ForwardRefExoticComponent<SelectProps<string> & React.RefAttributes<HTMLDivElement>>;
|
28
29
|
export type SelectItemProps<T extends SelectValue = string> = {
|
package/dist/index.es.js
CHANGED
@@ -452,11 +452,12 @@ const useAutoComplete = ({
|
|
452
452
|
};
|
453
453
|
};
|
454
454
|
function Autocomplete(t0) {
|
455
|
-
const $ = c(
|
455
|
+
const $ = c(14);
|
456
456
|
const {
|
457
457
|
children,
|
458
458
|
open,
|
459
|
-
setOpen
|
459
|
+
setOpen,
|
460
|
+
className
|
460
461
|
} = t0;
|
461
462
|
const autocompleteRef = React__default.useRef(null);
|
462
463
|
let t1;
|
@@ -479,50 +480,61 @@ function Autocomplete(t0) {
|
|
479
480
|
}
|
480
481
|
const t4 = open ? paperMixin : "";
|
481
482
|
let t5;
|
482
|
-
if ($[4] !== t4) {
|
483
|
-
t5 = cls(t4, "bg-surface-50 dark:bg-surface-900
|
484
|
-
$[4] =
|
485
|
-
$[5] =
|
483
|
+
if ($[4] !== className || $[5] !== t4) {
|
484
|
+
t5 = cls(t4, "bg-surface-50 dark:bg-surface-900", className);
|
485
|
+
$[4] = className;
|
486
|
+
$[5] = t4;
|
487
|
+
$[6] = t5;
|
486
488
|
} else {
|
487
|
-
t5 = $[
|
489
|
+
t5 = $[6];
|
488
490
|
}
|
489
491
|
let t6;
|
490
|
-
if ($[
|
492
|
+
if ($[7] !== children || $[8] !== t5) {
|
491
493
|
t6 = /* @__PURE__ */ jsx("div", { ref: autocompleteRef, className: t5, children });
|
492
|
-
$[
|
493
|
-
$[
|
494
|
-
$[
|
494
|
+
$[7] = children;
|
495
|
+
$[8] = t5;
|
496
|
+
$[9] = t6;
|
495
497
|
} else {
|
496
|
-
t6 = $[
|
498
|
+
t6 = $[9];
|
497
499
|
}
|
498
500
|
let t7;
|
499
|
-
if ($[
|
500
|
-
t7 = /* @__PURE__ */ jsx(Collapse, { in: open, duration:
|
501
|
-
$[
|
502
|
-
$[
|
503
|
-
$[
|
504
|
-
$[
|
501
|
+
if ($[10] !== open || $[11] !== t3 || $[12] !== t6) {
|
502
|
+
t7 = /* @__PURE__ */ jsx(Collapse, { in: open, duration: 30, className: t3, children: t6 });
|
503
|
+
$[10] = open;
|
504
|
+
$[11] = t3;
|
505
|
+
$[12] = t6;
|
506
|
+
$[13] = t7;
|
505
507
|
} else {
|
506
|
-
t7 = $[
|
508
|
+
t7 = $[13];
|
507
509
|
}
|
508
510
|
return t7;
|
509
511
|
}
|
510
512
|
function AutocompleteItem(t0) {
|
511
|
-
const $ = c(
|
513
|
+
const $ = c(6);
|
512
514
|
const {
|
513
515
|
children,
|
514
|
-
onClick
|
516
|
+
onClick,
|
517
|
+
className
|
515
518
|
} = t0;
|
516
519
|
let t1;
|
517
|
-
if ($[0] !==
|
518
|
-
t1 =
|
519
|
-
$[0] =
|
520
|
-
$[1] =
|
521
|
-
$[2] = t1;
|
520
|
+
if ($[0] !== className) {
|
521
|
+
t1 = cls("flex w-full items-center h-[48px] cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800", className);
|
522
|
+
$[0] = className;
|
523
|
+
$[1] = t1;
|
522
524
|
} else {
|
523
|
-
t1 = $[
|
525
|
+
t1 = $[1];
|
524
526
|
}
|
525
|
-
|
527
|
+
let t2;
|
528
|
+
if ($[2] !== children || $[3] !== onClick || $[4] !== t1) {
|
529
|
+
t2 = /* @__PURE__ */ jsx("div", { className: t1, onClick, children });
|
530
|
+
$[2] = children;
|
531
|
+
$[3] = onClick;
|
532
|
+
$[4] = t1;
|
533
|
+
$[5] = t2;
|
534
|
+
} else {
|
535
|
+
t2 = $[5];
|
536
|
+
}
|
537
|
+
return t2;
|
526
538
|
}
|
527
539
|
const getSizeClasses = (size) => {
|
528
540
|
switch (size) {
|
@@ -29655,7 +29667,7 @@ function SelectInputLabel(t0) {
|
|
29655
29667
|
}
|
29656
29668
|
const MultiSelectContext = React.createContext({});
|
29657
29669
|
const MultiSelect = React.forwardRef((t0, ref) => {
|
29658
|
-
const $ = c(
|
29670
|
+
const $ = c(103);
|
29659
29671
|
const {
|
29660
29672
|
value,
|
29661
29673
|
size: t1,
|
@@ -29900,7 +29912,7 @@ const MultiSelect = React.forwardRef((t0, ref) => {
|
|
29900
29912
|
t24 = $[48];
|
29901
29913
|
}
|
29902
29914
|
let t25;
|
29903
|
-
if ($[49] !== children || $[50] !== handleClear || $[51] !== includeClear || $[52] !== isPopoverOpen || $[53] !== placeholder || $[54] !== renderValues || $[55] !== selectedValues || $[56] !==
|
29915
|
+
if ($[49] !== children || $[50] !== handleClear || $[51] !== includeClear || $[52] !== isPopoverOpen || $[53] !== placeholder || $[54] !== renderValues || $[55] !== selectedValues || $[56] !== size || $[57] !== toggleOption || $[58] !== useChips) {
|
29904
29916
|
t25 = selectedValues.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center w-full", children: [
|
29905
29917
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5 text-start", children: [
|
29906
29918
|
renderValues && renderValues(selectedValues),
|
@@ -29924,11 +29936,11 @@ const MultiSelect = React.forwardRef((t0, ref) => {
|
|
29924
29936
|
event_1.stopPropagation();
|
29925
29937
|
handleClear();
|
29926
29938
|
} }),
|
29927
|
-
/* @__PURE__ */ jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: "small", className: cls("transition", isPopoverOpen ? "rotate-180" : "") }) })
|
29939
|
+
/* @__PURE__ */ jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: size === "large" ? "medium" : "small", className: cls("transition", isPopoverOpen ? "rotate-180" : "") }) })
|
29928
29940
|
] })
|
29929
29941
|
] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full mx-auto", children: [
|
29930
29942
|
/* @__PURE__ */ jsx("span", { className: "text-sm", children: placeholder }),
|
29931
|
-
/* @__PURE__ */ jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: "small", className: cls("transition", isPopoverOpen ? "rotate-180" : "") }) })
|
29943
|
+
/* @__PURE__ */ jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: size === "large" ? "medium" : "small", className: cls("transition", isPopoverOpen ? "rotate-180" : "") }) })
|
29932
29944
|
] });
|
29933
29945
|
$[49] = children;
|
29934
29946
|
$[50] = handleClear;
|
@@ -29937,104 +29949,105 @@ const MultiSelect = React.forwardRef((t0, ref) => {
|
|
29937
29949
|
$[53] = placeholder;
|
29938
29950
|
$[54] = renderValues;
|
29939
29951
|
$[55] = selectedValues;
|
29940
|
-
$[56] =
|
29941
|
-
$[57] =
|
29942
|
-
$[58] =
|
29952
|
+
$[56] = size;
|
29953
|
+
$[57] = toggleOption;
|
29954
|
+
$[58] = useChips;
|
29955
|
+
$[59] = t25;
|
29943
29956
|
} else {
|
29944
|
-
t25 = $[
|
29957
|
+
t25 = $[59];
|
29945
29958
|
}
|
29946
29959
|
let t26;
|
29947
|
-
if ($[
|
29960
|
+
if ($[60] !== handleTogglePopover || $[61] !== ref || $[62] !== t24 || $[63] !== t25) {
|
29948
29961
|
t26 = /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { ref, onClick: handleTogglePopover, className: t24, children: t25 }) });
|
29949
|
-
$[
|
29950
|
-
$[
|
29951
|
-
$[
|
29952
|
-
$[
|
29953
|
-
$[
|
29962
|
+
$[60] = handleTogglePopover;
|
29963
|
+
$[61] = ref;
|
29964
|
+
$[62] = t24;
|
29965
|
+
$[63] = t25;
|
29966
|
+
$[64] = t26;
|
29954
29967
|
} else {
|
29955
|
-
t26 = $[
|
29968
|
+
t26 = $[64];
|
29956
29969
|
}
|
29957
29970
|
let t27;
|
29958
|
-
if ($[
|
29971
|
+
if ($[65] === Symbol.for("react.memo_cache_sentinel")) {
|
29959
29972
|
t27 = cls("z-50 relative overflow-hidden border bg-white dark:bg-surface-900 rounded-lg w-[400px]", defaultBorderMixin);
|
29960
|
-
$[
|
29973
|
+
$[65] = t27;
|
29961
29974
|
} else {
|
29962
|
-
t27 = $[
|
29975
|
+
t27 = $[65];
|
29963
29976
|
}
|
29964
29977
|
let t28;
|
29965
|
-
if ($[
|
29978
|
+
if ($[66] !== onPopoverOpenChange) {
|
29966
29979
|
t28 = () => onPopoverOpenChange(false);
|
29967
|
-
$[
|
29968
|
-
$[
|
29980
|
+
$[66] = onPopoverOpenChange;
|
29981
|
+
$[67] = t28;
|
29969
29982
|
} else {
|
29970
|
-
t28 = $[
|
29983
|
+
t28 = $[67];
|
29971
29984
|
}
|
29972
29985
|
let t29;
|
29973
|
-
if ($[
|
29986
|
+
if ($[68] === Symbol.for("react.memo_cache_sentinel")) {
|
29974
29987
|
t29 = cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4 flex-grow ");
|
29975
|
-
$[
|
29988
|
+
$[68] = t29;
|
29976
29989
|
} else {
|
29977
|
-
t29 = $[
|
29990
|
+
t29 = $[68];
|
29978
29991
|
}
|
29979
29992
|
let t30;
|
29980
|
-
if ($[
|
29993
|
+
if ($[69] !== handleInputKeyDown) {
|
29981
29994
|
t30 = /* @__PURE__ */ jsx(Command.Input, { className: t29, placeholder: "Search...", onKeyDown: handleInputKeyDown });
|
29982
|
-
$[
|
29983
|
-
$[
|
29995
|
+
$[69] = handleInputKeyDown;
|
29996
|
+
$[70] = t30;
|
29984
29997
|
} else {
|
29985
|
-
t30 = $[
|
29998
|
+
t30 = $[70];
|
29986
29999
|
}
|
29987
30000
|
let t31;
|
29988
|
-
if ($[
|
30001
|
+
if ($[71] !== handleClear || $[72] !== selectedValues.length) {
|
29989
30002
|
t31 = selectedValues.length > 0 && /* @__PURE__ */ jsx("div", { onClick: handleClear, className: "text-sm justify-center cursor-pointer py-3 px-4 text-text-secondary dark:text-text-secondary-dark", children: "Clear" });
|
29990
|
-
$[
|
29991
|
-
$[
|
29992
|
-
$[
|
30003
|
+
$[71] = handleClear;
|
30004
|
+
$[72] = selectedValues.length;
|
30005
|
+
$[73] = t31;
|
29993
30006
|
} else {
|
29994
|
-
t31 = $[
|
30007
|
+
t31 = $[73];
|
29995
30008
|
}
|
29996
30009
|
let t32;
|
29997
|
-
if ($[
|
30010
|
+
if ($[74] !== t30 || $[75] !== t31) {
|
29998
30011
|
t32 = /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
|
29999
30012
|
t30,
|
30000
30013
|
t31
|
30001
30014
|
] });
|
30002
|
-
$[
|
30003
|
-
$[
|
30004
|
-
$[
|
30015
|
+
$[74] = t30;
|
30016
|
+
$[75] = t31;
|
30017
|
+
$[76] = t32;
|
30005
30018
|
} else {
|
30006
|
-
t32 = $[
|
30019
|
+
t32 = $[76];
|
30007
30020
|
}
|
30008
30021
|
let t33;
|
30009
|
-
if ($[
|
30022
|
+
if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
|
30010
30023
|
t33 = /* @__PURE__ */ jsx(Separator, { orientation: "horizontal", className: "my-0" });
|
30011
|
-
$[
|
30024
|
+
$[77] = t33;
|
30012
30025
|
} else {
|
30013
|
-
t33 = $[
|
30026
|
+
t33 = $[77];
|
30014
30027
|
}
|
30015
30028
|
let t34;
|
30016
|
-
if ($[
|
30029
|
+
if ($[78] === Symbol.for("react.memo_cache_sentinel")) {
|
30017
30030
|
t34 = /* @__PURE__ */ jsx(Command.Empty, { className: "px-4 py-2", children: "No results found." });
|
30018
|
-
$[
|
30031
|
+
$[78] = t34;
|
30019
30032
|
} else {
|
30020
|
-
t34 = $[
|
30033
|
+
t34 = $[78];
|
30021
30034
|
}
|
30022
30035
|
let t35;
|
30023
|
-
if ($[
|
30036
|
+
if ($[79] !== allValues.length || $[80] !== includeSelectAll || $[81] !== selectedValues.length || $[82] !== toggleAll) {
|
30024
30037
|
t35 = includeSelectAll && /* @__PURE__ */ jsxs(Command.Item, { onSelect: toggleAll, className: cls("flex flex-row items-center gap-1.5", "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2", "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900"), children: [
|
30025
30038
|
/* @__PURE__ */ jsx(InnerCheckBox, { checked: selectedValues.length === allValues.length }),
|
30026
30039
|
/* @__PURE__ */ jsx("span", { className: "text-sm text-text-secondary dark:text-text-secondary-dark", children: "(Select All)" })
|
30027
30040
|
] }, "all");
|
30028
|
-
$[
|
30029
|
-
$[
|
30030
|
-
$[
|
30031
|
-
$[
|
30032
|
-
$[
|
30041
|
+
$[79] = allValues.length;
|
30042
|
+
$[80] = includeSelectAll;
|
30043
|
+
$[81] = selectedValues.length;
|
30044
|
+
$[82] = toggleAll;
|
30045
|
+
$[83] = t35;
|
30033
30046
|
} else {
|
30034
|
-
t35 = $[
|
30047
|
+
t35 = $[83];
|
30035
30048
|
}
|
30036
30049
|
let t36;
|
30037
|
-
if ($[
|
30050
|
+
if ($[84] !== children || $[85] !== t35) {
|
30038
30051
|
t36 = /* @__PURE__ */ jsxs(Command.List, { children: [
|
30039
30052
|
t34,
|
30040
30053
|
/* @__PURE__ */ jsxs(Command.Group, { children: [
|
@@ -30042,61 +30055,61 @@ const MultiSelect = React.forwardRef((t0, ref) => {
|
|
30042
30055
|
children
|
30043
30056
|
] })
|
30044
30057
|
] });
|
30045
|
-
$[
|
30046
|
-
$[
|
30047
|
-
$[
|
30058
|
+
$[84] = children;
|
30059
|
+
$[85] = t35;
|
30060
|
+
$[86] = t36;
|
30048
30061
|
} else {
|
30049
|
-
t36 = $[
|
30062
|
+
t36 = $[86];
|
30050
30063
|
}
|
30051
30064
|
let t37;
|
30052
|
-
if ($[
|
30065
|
+
if ($[87] !== t32 || $[88] !== t36) {
|
30053
30066
|
t37 = /* @__PURE__ */ jsxs(Command, { children: [
|
30054
30067
|
t32,
|
30055
30068
|
t33,
|
30056
30069
|
t36
|
30057
30070
|
] });
|
30058
|
-
$[
|
30059
|
-
$[
|
30060
|
-
$[
|
30071
|
+
$[87] = t32;
|
30072
|
+
$[88] = t36;
|
30073
|
+
$[89] = t37;
|
30061
30074
|
} else {
|
30062
|
-
t37 = $[
|
30075
|
+
t37 = $[89];
|
30063
30076
|
}
|
30064
30077
|
let t38;
|
30065
|
-
if ($[
|
30078
|
+
if ($[90] !== t28 || $[91] !== t37) {
|
30066
30079
|
t38 = /* @__PURE__ */ jsx(PopoverPrimitive.Content, { className: t27, align: "start", sideOffset: 8, onEscapeKeyDown: t28, children: t37 });
|
30067
|
-
$[
|
30068
|
-
$[
|
30069
|
-
$[
|
30080
|
+
$[90] = t28;
|
30081
|
+
$[91] = t37;
|
30082
|
+
$[92] = t38;
|
30070
30083
|
} else {
|
30071
|
-
t38 = $[
|
30084
|
+
t38 = $[92];
|
30072
30085
|
}
|
30073
30086
|
let t39;
|
30074
|
-
if ($[
|
30087
|
+
if ($[93] !== isPopoverOpen || $[94] !== modalPopover || $[95] !== onPopoverOpenChange || $[96] !== t26 || $[97] !== t38) {
|
30075
30088
|
t39 = /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open: isPopoverOpen, onOpenChange: onPopoverOpenChange, modal: modalPopover, children: [
|
30076
30089
|
t26,
|
30077
30090
|
t38
|
30078
30091
|
] });
|
30079
|
-
$[
|
30080
|
-
$[
|
30081
|
-
$[
|
30082
|
-
$[
|
30083
|
-
$[
|
30084
|
-
$[
|
30092
|
+
$[93] = isPopoverOpen;
|
30093
|
+
$[94] = modalPopover;
|
30094
|
+
$[95] = onPopoverOpenChange;
|
30095
|
+
$[96] = t26;
|
30096
|
+
$[97] = t38;
|
30097
|
+
$[98] = t39;
|
30085
30098
|
} else {
|
30086
|
-
t39 = $[
|
30099
|
+
t39 = $[98];
|
30087
30100
|
}
|
30088
30101
|
let t40;
|
30089
|
-
if ($[
|
30102
|
+
if ($[99] !== t18 || $[100] !== t19 || $[101] !== t39) {
|
30090
30103
|
t40 = /* @__PURE__ */ jsxs(MultiSelectContext.Provider, { value: t18, children: [
|
30091
30104
|
t19,
|
30092
30105
|
t39
|
30093
30106
|
] });
|
30094
|
-
$[
|
30095
|
-
$[
|
30096
|
-
$[
|
30097
|
-
$[
|
30107
|
+
$[99] = t18;
|
30108
|
+
$[100] = t19;
|
30109
|
+
$[101] = t39;
|
30110
|
+
$[102] = t40;
|
30098
30111
|
} else {
|
30099
|
-
t40 = $[
|
30112
|
+
t40 = $[102];
|
30100
30113
|
}
|
30101
30114
|
return t40;
|
30102
30115
|
});
|
@@ -30538,6 +30551,7 @@ const Select = forwardRef(({
|
|
30538
30551
|
endAdornment,
|
30539
30552
|
invisible,
|
30540
30553
|
children,
|
30554
|
+
dataType = "string",
|
30541
30555
|
...props
|
30542
30556
|
}, ref) => {
|
30543
30557
|
const [openInternal, setOpenInternal] = useState(open ?? false);
|
@@ -30546,9 +30560,12 @@ const Select = forwardRef(({
|
|
30546
30560
|
}, [open]);
|
30547
30561
|
const onValueChangeInternal = useCallback((newValue) => {
|
30548
30562
|
let typedValue = newValue;
|
30549
|
-
if (
|
30550
|
-
|
30551
|
-
|
30563
|
+
if (dataType === "boolean") {
|
30564
|
+
if (newValue === "true") typedValue = true;
|
30565
|
+
else if (newValue === "false") typedValue = false;
|
30566
|
+
} else if (dataType === "number") {
|
30567
|
+
if (!isNaN(Number(newValue)) && newValue.trim() !== "") typedValue = Number(newValue);
|
30568
|
+
}
|
30552
30569
|
onValueChange?.(typedValue);
|
30553
30570
|
if (onChange) {
|
30554
30571
|
const event = {
|
@@ -30567,54 +30584,56 @@ const Select = forwardRef(({
|
|
30567
30584
|
setOpenInternal(open_0);
|
30568
30585
|
}, ...props, children: [
|
30569
30586
|
typeof label === "string" ? /* @__PURE__ */ jsx(SelectInputLabel, { error, children: label }) : label,
|
30570
|
-
/* @__PURE__ */
|
30587
|
+
/* @__PURE__ */ jsxs("div", { className: cls("select-none rounded-md text-sm", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, "relative flex items-center", className, {
|
30571
30588
|
"min-h-[28px]": size === "smallest",
|
30572
30589
|
"min-h-[32px]": size === "small",
|
30573
30590
|
"min-h-[42px]": size === "medium",
|
30574
30591
|
"min-h-[64px]": size === "large",
|
30575
30592
|
"w-fit": !fullWidth,
|
30576
30593
|
"w-full": fullWidth
|
30577
|
-
}), children:
|
30578
|
-
"
|
30579
|
-
|
30580
|
-
|
30581
|
-
|
30582
|
-
"
|
30583
|
-
"min-h-[32px]": size === "small",
|
30584
|
-
"min-h-[42px]": size === "medium",
|
30585
|
-
"min-h-[64px]": size === "large",
|
30586
|
-
"w-full": fullWidth,
|
30587
|
-
"w-fit": !fullWidth
|
30588
|
-
}, inputClassName), children: [
|
30589
|
-
/* @__PURE__ */ jsx("div", { ref, className: cls("flex-grow max-w-full flex flex-row gap-2 items-center", "overflow-visible", {
|
30594
|
+
}), children: [
|
30595
|
+
/* @__PURE__ */ jsx(SelectPrimitive.Trigger, { ref: inputRef, id, asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cls("h-full", padding ? {
|
30596
|
+
"px-4": size === "large",
|
30597
|
+
"px-3": size === "medium",
|
30598
|
+
"px-2": size === "small" || size === "smallest"
|
30599
|
+
} : "", "outline-none focus:outline-none", "select-none rounded-md text-sm", error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark", error ? "border border-red-500 dark:border-red-600" : "", disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white", "relative flex flex-row items-center", {
|
30590
30600
|
"min-h-[28px]": size === "smallest",
|
30591
30601
|
"min-h-[32px]": size === "small",
|
30592
30602
|
"min-h-[42px]": size === "medium",
|
30593
|
-
"min-h-[64px]": size === "large"
|
30594
|
-
|
30595
|
-
|
30596
|
-
|
30597
|
-
|
30598
|
-
|
30599
|
-
|
30600
|
-
|
30601
|
-
|
30602
|
-
|
30603
|
-
|
30604
|
-
|
30605
|
-
|
30606
|
-
|
30607
|
-
|
30603
|
+
"min-h-[64px]": size === "large",
|
30604
|
+
"w-full": fullWidth,
|
30605
|
+
"w-fit": !fullWidth
|
30606
|
+
}, inputClassName), children: [
|
30607
|
+
/* @__PURE__ */ jsx("div", { ref, className: cls("flex-grow max-w-full flex flex-row gap-2 items-center", "overflow-visible", {
|
30608
|
+
"min-h-[28px]": size === "smallest",
|
30609
|
+
"min-h-[32px]": size === "small",
|
30610
|
+
"min-h-[42px]": size === "medium",
|
30611
|
+
"min-h-[64px]": size === "large"
|
30612
|
+
}), children: /* @__PURE__ */ jsxs(SelectPrimitive.Value, { onClick: (e) => {
|
30613
|
+
e.preventDefault();
|
30614
|
+
e.stopPropagation();
|
30615
|
+
}, placeholder, className: "w-full", children: [
|
30616
|
+
hasValue && value !== void 0 && renderValue ? renderValue(value) : placeholder,
|
30617
|
+
hasValue && !renderValue && (() => {
|
30618
|
+
const childrenProps = Children.map(children, (child) => {
|
30619
|
+
if (React__default.isValidElement(child)) {
|
30620
|
+
return child.props;
|
30621
|
+
}
|
30622
|
+
}).filter(Boolean);
|
30623
|
+
const option = childrenProps.find((o) => String(o.value) === String(value));
|
30624
|
+
return option?.children;
|
30625
|
+
})()
|
30626
|
+
] }) }),
|
30627
|
+
/* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: size === "large" ? "medium" : "small", className: cls("transition", open ? "rotate-180" : "", {
|
30628
|
+
"px-2": size === "large",
|
30629
|
+
"px-1": size === "medium" || size === "small"
|
30630
|
+
}) }) })
|
30608
30631
|
] }) }),
|
30609
|
-
endAdornment && /* @__PURE__ */ jsx("div", { className: cls("h-full flex items-center"), onClick: (e_0) => {
|
30632
|
+
endAdornment && /* @__PURE__ */ jsx("div", { className: cls("h-full flex items-center absolute right-0 pr-12"), onClick: (e_0) => {
|
30610
30633
|
e_0.preventDefault();
|
30611
30634
|
e_0.stopPropagation();
|
30612
|
-
}, children: endAdornment })
|
30613
|
-
|
30614
|
-
"px-2": size === "large",
|
30615
|
-
"px-1": size === "medium" || size === "small"
|
30616
|
-
}) }) })
|
30617
|
-
] }) }) }),
|
30635
|
+
}, children: endAdornment })
|
30636
|
+
] }),
|
30618
30637
|
/* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(SelectPrimitive.Content, { position, className: cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-900 p-2 rounded-lg", defaultBorderMixin), children: /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { className: "p-1", style: {
|
30619
30638
|
maxHeight: "var(--radix-select-content-available-height)"
|
30620
30639
|
}, children }) }) })
|