@itilite/lumina-ui 1.1.11 → 1.1.12
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/atom/RangePicker/RangePicker.js +105 -102
- package/dist/atom/RangePicker/RangePicker.mjs +2 -2
- package/dist/atom/Select/Select.d.mts +1 -4
- package/dist/atom/Select/Select.d.ts +1 -4
- package/dist/atom/Select/Select.js +105 -102
- package/dist/atom/Select/Select.mjs +1 -1
- package/dist/chunk-3AWYHB3A.mjs +618 -0
- package/dist/chunk-3WWAOBS6.mjs +633 -0
- package/dist/chunk-57YKBWEI.mjs +673 -0
- package/dist/chunk-5BBLW4MR.mjs +670 -0
- package/dist/chunk-6XGVIU52.mjs +679 -0
- package/dist/chunk-BKPTZNXK.mjs +618 -0
- package/dist/chunk-CNN74G3M.mjs +666 -0
- package/dist/chunk-CPOZJCLV.mjs +681 -0
- package/dist/chunk-DRNY4L7J.mjs +618 -0
- package/dist/chunk-G7I4NT42.mjs +720 -0
- package/dist/chunk-GU5F7Z7I.mjs +681 -0
- package/dist/chunk-HPDJYQXM.mjs +663 -0
- package/dist/chunk-HTYOI6JT.mjs +618 -0
- package/dist/chunk-IIJUGDEJ.mjs +618 -0
- package/dist/chunk-J327EMX2.mjs +663 -0
- package/dist/chunk-J3ZBXBJ2.mjs +689 -0
- package/dist/chunk-JEAZCSST.mjs +676 -0
- package/dist/chunk-KDR6M52K.mjs +723 -0
- package/dist/chunk-LEPDKBT2.mjs +709 -0
- package/dist/chunk-LH55S6HJ.mjs +618 -0
- package/dist/chunk-MO7JTKPH.mjs +618 -0
- package/dist/chunk-MWC57EU6.mjs +666 -0
- package/dist/chunk-OMXQ6VML.mjs +618 -0
- package/dist/chunk-PSESRID3.mjs +681 -0
- package/dist/chunk-RAWVG2MM.mjs +618 -0
- package/dist/chunk-T2Y6AXM5.mjs +618 -0
- package/dist/chunk-THT4ALWQ.mjs +618 -0
- package/dist/chunk-TWV2Z27S.mjs +618 -0
- package/dist/chunk-UPUD2FQL.mjs +618 -0
- package/dist/chunk-UUTSL2NM.mjs +618 -0
- package/dist/chunk-WCYB5OTY.mjs +618 -0
- package/dist/chunk-YCAOWGDP.mjs +618 -0
- package/dist/chunk-ZUUAXTPM.mjs +618 -0
- package/dist/index.js +105 -102
- package/dist/index.mjs +11 -11
- package/dist/styles.css +254 -254
- package/package.json +1 -1
|
@@ -275,6 +275,46 @@ var LoadingSpinner_default = LoadingSpinner;
|
|
|
275
275
|
|
|
276
276
|
// src/atom/Select/Select.tsx
|
|
277
277
|
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
278
|
+
var InputWrapper = (0, import_react2.memo)(({ children, disabled, disabledTooltip }) => {
|
|
279
|
+
if (disabled && disabledTooltip)
|
|
280
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Tooltip_default, { title: disabledTooltip, children });
|
|
281
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children });
|
|
282
|
+
});
|
|
283
|
+
var OptionItem = (0, import_react2.memo)(({
|
|
284
|
+
option,
|
|
285
|
+
index,
|
|
286
|
+
isSelected,
|
|
287
|
+
isHighlighted,
|
|
288
|
+
experience,
|
|
289
|
+
size,
|
|
290
|
+
optionClassName,
|
|
291
|
+
onSelectHandler,
|
|
292
|
+
onMouseEnterHandler
|
|
293
|
+
}) => {
|
|
294
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
295
|
+
"div",
|
|
296
|
+
{
|
|
297
|
+
onClick: () => onSelectHandler(option),
|
|
298
|
+
onMouseEnter: () => onMouseEnterHandler(index),
|
|
299
|
+
className: (0, import_clsx.default)(
|
|
300
|
+
"tw-transition-all tw-duration-150",
|
|
301
|
+
{ "tw-typography-body2": size !== "small" },
|
|
302
|
+
{ "tw-typography-caption1": size === "small" },
|
|
303
|
+
optionClassName
|
|
304
|
+
),
|
|
305
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
306
|
+
"div",
|
|
307
|
+
{
|
|
308
|
+
className: (0, import_clsx.default)(
|
|
309
|
+
"tw-px-4 tw-cursor-pointer tw-py-2 tw-mx-0.5 tw-rounded-xl",
|
|
310
|
+
isSelected ? experience === "personal" ? "tw-bg-[#f1e8fa]" : "tw-bg-[#fff1e1]" : isHighlighted ? "tw-bg-[#f3f4f6] tw-text-gray-900" : "tw-text-gray-900 hover:tw-bg-[#1118270a]"
|
|
311
|
+
),
|
|
312
|
+
children: option.label
|
|
313
|
+
}
|
|
314
|
+
)
|
|
315
|
+
}
|
|
316
|
+
);
|
|
317
|
+
});
|
|
278
318
|
var Select = ({
|
|
279
319
|
label,
|
|
280
320
|
mandatory = false,
|
|
@@ -513,6 +553,31 @@ var Select = ({
|
|
|
513
553
|
}
|
|
514
554
|
return "";
|
|
515
555
|
}, [selectedValue, validatedOptions, showDisplayValue, normalizeValue]);
|
|
556
|
+
const displayValue = (0, import_react2.useMemo)(() => getDisplayValue(), [getDisplayValue]);
|
|
557
|
+
const inputClasses = (0, import_react2.useMemo)(() => {
|
|
558
|
+
return (0, import_clsx.default)(
|
|
559
|
+
"tw-w-full tw-rounded-xl tw-outline-none tw-transition-all tw-duration-200 tw-cursor-pointer tw-border-solid tw-text-color-text-default",
|
|
560
|
+
sizeClasses.input,
|
|
561
|
+
sizeClasses.padding,
|
|
562
|
+
variantClasses,
|
|
563
|
+
{
|
|
564
|
+
"tw-bg-white": valueSelected || displayValue || isFocused,
|
|
565
|
+
"tw-bg-color-gray-5": !valueSelected || !displayValue,
|
|
566
|
+
"!tw-bg-[#F8F7F6] tw-cursor-not-allowed tw-pointer-events-none": disabled
|
|
567
|
+
},
|
|
568
|
+
!label && "tw-flex tw-items-center",
|
|
569
|
+
{
|
|
570
|
+
"!tw-border-color-primary": isFocused && experience === "business"
|
|
571
|
+
},
|
|
572
|
+
{
|
|
573
|
+
"!tw-border-[#804D7B]": isFocused && experience === "personal"
|
|
574
|
+
},
|
|
575
|
+
error ? "!tw-border-color-text-critical " : "tw-border-[#EBE3DD] hover:tw-border-[#C5B7AC]",
|
|
576
|
+
"focus:tw-shadow-sm focus:tw-ring-offset-1",
|
|
577
|
+
className,
|
|
578
|
+
inputClassName
|
|
579
|
+
);
|
|
580
|
+
}, [sizeClasses, variantClasses, valueSelected, displayValue, isFocused, disabled, label, experience, error, className, inputClassName]);
|
|
516
581
|
const filteredOptions = (0, import_react2.useMemo)(() => {
|
|
517
582
|
var _a;
|
|
518
583
|
if (!enableSearch) {
|
|
@@ -607,7 +672,7 @@ var Select = ({
|
|
|
607
672
|
}, [highlightedIndex]);
|
|
608
673
|
(0, import_react2.useEffect)(() => {
|
|
609
674
|
optionRefs.current = [];
|
|
610
|
-
}, [filteredOptions]);
|
|
675
|
+
}, [filteredOptions.length]);
|
|
611
676
|
const handleMouseEnter = (0, import_react2.useCallback)(() => {
|
|
612
677
|
if (hoverTimeoutRef.current) {
|
|
613
678
|
clearTimeout(hoverTimeoutRef.current);
|
|
@@ -644,12 +709,23 @@ var Select = ({
|
|
|
644
709
|
},
|
|
645
710
|
[isOpen, handleInputInteraction]
|
|
646
711
|
);
|
|
647
|
-
const
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
712
|
+
const handleChevronMouseDown = (0, import_react2.useCallback)(
|
|
713
|
+
(e) => {
|
|
714
|
+
if (isHovering && selectedValue && allowClear) {
|
|
715
|
+
handleClear(e);
|
|
716
|
+
} else {
|
|
717
|
+
handleChevronClick(e);
|
|
718
|
+
}
|
|
719
|
+
},
|
|
720
|
+
[isHovering, selectedValue, allowClear, handleClear, handleChevronClick]
|
|
721
|
+
);
|
|
722
|
+
const handleOptionClick = (0, import_react2.useCallback)((option) => {
|
|
723
|
+
handleOptionSelect(option);
|
|
724
|
+
}, [handleOptionSelect]);
|
|
725
|
+
const handleOptionMouseEnter = (0, import_react2.useCallback)((index) => {
|
|
726
|
+
setHighlightedIndex(index);
|
|
727
|
+
}, []);
|
|
728
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InputWrapper, { disabled, disabledTooltip, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
653
729
|
"div",
|
|
654
730
|
{
|
|
655
731
|
style,
|
|
@@ -673,35 +749,11 @@ var Select = ({
|
|
|
673
749
|
autoCorrect: "off",
|
|
674
750
|
autoCapitalize: "off",
|
|
675
751
|
spellCheck: "false",
|
|
676
|
-
value: isFocused && enableSearch ? searchTerm :
|
|
752
|
+
value: isFocused && enableSearch ? searchTerm : displayValue,
|
|
677
753
|
onChange: enableSearch ? handleSearchChange : void 0,
|
|
678
754
|
onClick: handleInputInteraction,
|
|
679
755
|
onKeyDown: handleKeyDown,
|
|
680
|
-
className:
|
|
681
|
-
"tw-w-full tw-rounded-xl tw-outline-none tw-transition-all tw-duration-200 tw-cursor-pointer tw-border-solid tw-text-color-text-default",
|
|
682
|
-
sizeClasses.input,
|
|
683
|
-
sizeClasses.padding,
|
|
684
|
-
variantClasses,
|
|
685
|
-
{
|
|
686
|
-
"tw-bg-white": valueSelected || getDisplayValue() || isFocused,
|
|
687
|
-
"tw-bg-color-gray-5": !valueSelected || !getDisplayValue(),
|
|
688
|
-
"!tw-bg-[#F8F7F6] tw-cursor-not-allowed tw-pointer-events-none": disabled
|
|
689
|
-
},
|
|
690
|
-
// Conditional padding based on label presence
|
|
691
|
-
!label && "tw-flex tw-items-center",
|
|
692
|
-
{
|
|
693
|
-
"!tw-border-color-primary": isFocused && experience === "business"
|
|
694
|
-
},
|
|
695
|
-
{
|
|
696
|
-
"!tw-border-[#804D7B]": isFocused && experience === "personal"
|
|
697
|
-
},
|
|
698
|
-
error ? "!tw-border-color-text-critical " : "tw-border-[#EBE3DD] hover:tw-border-[#C5B7AC]",
|
|
699
|
-
// Add focus state styling
|
|
700
|
-
"focus:tw-shadow-sm focus:tw-ring-offset-1",
|
|
701
|
-
className,
|
|
702
|
-
inputClassName
|
|
703
|
-
// Put inputClassName last so it can override default classes
|
|
704
|
-
),
|
|
756
|
+
className: inputClasses,
|
|
705
757
|
readOnly: !isFocused || !enableSearch
|
|
706
758
|
}
|
|
707
759
|
),
|
|
@@ -742,13 +794,7 @@ var Select = ({
|
|
|
742
794
|
// Only rotate chevron when open and not showing clear icon
|
|
743
795
|
isOpen && !(isHovering && selectedValue && allowClear) && "-tw-rotate-180"
|
|
744
796
|
),
|
|
745
|
-
onMouseDown:
|
|
746
|
-
if (isHovering && selectedValue && allowClear) {
|
|
747
|
-
handleClear(e);
|
|
748
|
-
} else {
|
|
749
|
-
handleChevronClick(e);
|
|
750
|
-
}
|
|
751
|
-
},
|
|
797
|
+
onMouseDown: handleChevronMouseDown,
|
|
752
798
|
children: disabled ? null : isHovering && selectedValue && allowClear ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
753
799
|
CrossV2,
|
|
754
800
|
{
|
|
@@ -779,75 +825,32 @@ var Select = ({
|
|
|
779
825
|
dropdownClassName
|
|
780
826
|
),
|
|
781
827
|
ref: optionListRef,
|
|
782
|
-
children: filteredOptions.length > 0 ? filteredOptions.map((option, index) =>
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
// Highlighted option styling (keyboard navigation)
|
|
801
|
-
index === highlightedIndex ? "tw-bg-[#f3f4f6] tw-text-gray-900" : (
|
|
802
|
-
// Default option styling
|
|
803
|
-
"tw-text-gray-900 hover:tw-bg-[#1118270a]"
|
|
804
|
-
)
|
|
805
|
-
)
|
|
806
|
-
),
|
|
807
|
-
children: option.label
|
|
808
|
-
}
|
|
809
|
-
)
|
|
810
|
-
},
|
|
811
|
-
doubleCharSearch ? option.label : option.value
|
|
812
|
-
)) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "tw-px-4 tw-py-3 tw-text-gray-500 tw-text-sm", children: "No options found" })
|
|
828
|
+
children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => {
|
|
829
|
+
const isSelected = normalizeValue(selectedValue) === normalizeValue(option.value);
|
|
830
|
+
const isHighlighted = index === highlightedIndex;
|
|
831
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: (el) => optionRefs.current[index] = el, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
832
|
+
OptionItem,
|
|
833
|
+
{
|
|
834
|
+
option,
|
|
835
|
+
index,
|
|
836
|
+
isSelected,
|
|
837
|
+
isHighlighted,
|
|
838
|
+
experience,
|
|
839
|
+
size,
|
|
840
|
+
optionClassName,
|
|
841
|
+
onSelectHandler: handleOptionClick,
|
|
842
|
+
onMouseEnterHandler: handleOptionMouseEnter
|
|
843
|
+
}
|
|
844
|
+
) }, doubleCharSearch ? option.label : option.value);
|
|
845
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "tw-px-4 tw-py-3 tw-text-gray-500 tw-text-sm", children: "No options found" })
|
|
813
846
|
}
|
|
814
847
|
)
|
|
815
848
|
]
|
|
816
849
|
}
|
|
817
850
|
) });
|
|
818
851
|
};
|
|
819
|
-
var arePropsEqual = (prevProps, nextProps) => {
|
|
820
|
-
var _a, _b;
|
|
821
|
-
const criticalProps = [
|
|
822
|
-
"value",
|
|
823
|
-
"valueSelected",
|
|
824
|
-
"options",
|
|
825
|
-
"error",
|
|
826
|
-
"disabled",
|
|
827
|
-
"label",
|
|
828
|
-
"mandatory"
|
|
829
|
-
];
|
|
830
|
-
for (const prop of criticalProps) {
|
|
831
|
-
if (prevProps[prop] !== nextProps[prop]) {
|
|
832
|
-
return false;
|
|
833
|
-
}
|
|
834
|
-
}
|
|
835
|
-
if (((_a = prevProps.options) == null ? void 0 : _a.length) !== ((_b = nextProps.options) == null ? void 0 : _b.length)) {
|
|
836
|
-
return false;
|
|
837
|
-
}
|
|
838
|
-
if (prevProps.options && nextProps.options) {
|
|
839
|
-
for (let i = 0; i < prevProps.options.length; i++) {
|
|
840
|
-
const prevOpt = prevProps.options[i];
|
|
841
|
-
const nextOpt = nextProps.options[i];
|
|
842
|
-
if ((prevOpt == null ? void 0 : prevOpt.value) !== (nextOpt == null ? void 0 : nextOpt.value) || (prevOpt == null ? void 0 : prevOpt.label) !== (nextOpt == null ? void 0 : nextOpt.label)) {
|
|
843
|
-
return false;
|
|
844
|
-
}
|
|
845
|
-
}
|
|
846
|
-
}
|
|
847
|
-
return true;
|
|
848
|
-
};
|
|
849
852
|
Select.displayName = "Select";
|
|
850
|
-
var Select_default =
|
|
853
|
+
var Select_default = Select;
|
|
851
854
|
|
|
852
855
|
// src/atom/RangePicker/RangePicker.tsx
|
|
853
856
|
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
CustomRangePicker,
|
|
3
3
|
RangePicker_default
|
|
4
|
-
} from "../../chunk-
|
|
4
|
+
} from "../../chunk-IIJUGDEJ.mjs";
|
|
5
5
|
import "../../chunk-ZTRM4HZJ.mjs";
|
|
6
|
-
import "../../chunk-
|
|
6
|
+
import "../../chunk-GU5F7Z7I.mjs";
|
|
7
7
|
import "../../chunk-MLCMZRUC.mjs";
|
|
8
8
|
import "../../chunk-QKTMWS4J.mjs";
|
|
9
9
|
import "../../chunk-FWCSY2DS.mjs";
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import * as React$1 from 'react';
|
|
2
|
-
|
|
3
1
|
interface SelectOption {
|
|
4
2
|
value: string | number;
|
|
5
3
|
label: string;
|
|
@@ -38,6 +36,5 @@ interface SelectProps {
|
|
|
38
36
|
}
|
|
39
37
|
|
|
40
38
|
declare const Select: React.FC<SelectProps>;
|
|
41
|
-
declare const _default: React$1.NamedExoticComponent<SelectProps>;
|
|
42
39
|
|
|
43
|
-
export { Select,
|
|
40
|
+
export { Select, Select as default };
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import * as React$1 from 'react';
|
|
2
|
-
|
|
3
1
|
interface SelectOption {
|
|
4
2
|
value: string | number;
|
|
5
3
|
label: string;
|
|
@@ -38,6 +36,5 @@ interface SelectProps {
|
|
|
38
36
|
}
|
|
39
37
|
|
|
40
38
|
declare const Select: React.FC<SelectProps>;
|
|
41
|
-
declare const _default: React$1.NamedExoticComponent<SelectProps>;
|
|
42
39
|
|
|
43
|
-
export { Select,
|
|
40
|
+
export { Select, Select as default };
|
|
@@ -223,6 +223,46 @@ var LoadingSpinner_default = LoadingSpinner;
|
|
|
223
223
|
|
|
224
224
|
// src/atom/Select/Select.tsx
|
|
225
225
|
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
226
|
+
var InputWrapper = (0, import_react2.memo)(({ children, disabled, disabledTooltip }) => {
|
|
227
|
+
if (disabled && disabledTooltip)
|
|
228
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Tooltip_default, { title: disabledTooltip, children });
|
|
229
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children });
|
|
230
|
+
});
|
|
231
|
+
var OptionItem = (0, import_react2.memo)(({
|
|
232
|
+
option,
|
|
233
|
+
index,
|
|
234
|
+
isSelected,
|
|
235
|
+
isHighlighted,
|
|
236
|
+
experience,
|
|
237
|
+
size,
|
|
238
|
+
optionClassName,
|
|
239
|
+
onSelectHandler,
|
|
240
|
+
onMouseEnterHandler
|
|
241
|
+
}) => {
|
|
242
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
243
|
+
"div",
|
|
244
|
+
{
|
|
245
|
+
onClick: () => onSelectHandler(option),
|
|
246
|
+
onMouseEnter: () => onMouseEnterHandler(index),
|
|
247
|
+
className: (0, import_clsx.default)(
|
|
248
|
+
"tw-transition-all tw-duration-150",
|
|
249
|
+
{ "tw-typography-body2": size !== "small" },
|
|
250
|
+
{ "tw-typography-caption1": size === "small" },
|
|
251
|
+
optionClassName
|
|
252
|
+
),
|
|
253
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
254
|
+
"div",
|
|
255
|
+
{
|
|
256
|
+
className: (0, import_clsx.default)(
|
|
257
|
+
"tw-px-4 tw-cursor-pointer tw-py-2 tw-mx-0.5 tw-rounded-xl",
|
|
258
|
+
isSelected ? experience === "personal" ? "tw-bg-[#f1e8fa]" : "tw-bg-[#fff1e1]" : isHighlighted ? "tw-bg-[#f3f4f6] tw-text-gray-900" : "tw-text-gray-900 hover:tw-bg-[#1118270a]"
|
|
259
|
+
),
|
|
260
|
+
children: option.label
|
|
261
|
+
}
|
|
262
|
+
)
|
|
263
|
+
}
|
|
264
|
+
);
|
|
265
|
+
});
|
|
226
266
|
var Select = ({
|
|
227
267
|
label,
|
|
228
268
|
mandatory = false,
|
|
@@ -461,6 +501,31 @@ var Select = ({
|
|
|
461
501
|
}
|
|
462
502
|
return "";
|
|
463
503
|
}, [selectedValue, validatedOptions, showDisplayValue, normalizeValue]);
|
|
504
|
+
const displayValue = (0, import_react2.useMemo)(() => getDisplayValue(), [getDisplayValue]);
|
|
505
|
+
const inputClasses = (0, import_react2.useMemo)(() => {
|
|
506
|
+
return (0, import_clsx.default)(
|
|
507
|
+
"tw-w-full tw-rounded-xl tw-outline-none tw-transition-all tw-duration-200 tw-cursor-pointer tw-border-solid tw-text-color-text-default",
|
|
508
|
+
sizeClasses.input,
|
|
509
|
+
sizeClasses.padding,
|
|
510
|
+
variantClasses,
|
|
511
|
+
{
|
|
512
|
+
"tw-bg-white": valueSelected || displayValue || isFocused,
|
|
513
|
+
"tw-bg-color-gray-5": !valueSelected || !displayValue,
|
|
514
|
+
"!tw-bg-[#F8F7F6] tw-cursor-not-allowed tw-pointer-events-none": disabled
|
|
515
|
+
},
|
|
516
|
+
!label && "tw-flex tw-items-center",
|
|
517
|
+
{
|
|
518
|
+
"!tw-border-color-primary": isFocused && experience === "business"
|
|
519
|
+
},
|
|
520
|
+
{
|
|
521
|
+
"!tw-border-[#804D7B]": isFocused && experience === "personal"
|
|
522
|
+
},
|
|
523
|
+
error ? "!tw-border-color-text-critical " : "tw-border-[#EBE3DD] hover:tw-border-[#C5B7AC]",
|
|
524
|
+
"focus:tw-shadow-sm focus:tw-ring-offset-1",
|
|
525
|
+
className,
|
|
526
|
+
inputClassName
|
|
527
|
+
);
|
|
528
|
+
}, [sizeClasses, variantClasses, valueSelected, displayValue, isFocused, disabled, label, experience, error, className, inputClassName]);
|
|
464
529
|
const filteredOptions = (0, import_react2.useMemo)(() => {
|
|
465
530
|
var _a;
|
|
466
531
|
if (!enableSearch) {
|
|
@@ -555,7 +620,7 @@ var Select = ({
|
|
|
555
620
|
}, [highlightedIndex]);
|
|
556
621
|
(0, import_react2.useEffect)(() => {
|
|
557
622
|
optionRefs.current = [];
|
|
558
|
-
}, [filteredOptions]);
|
|
623
|
+
}, [filteredOptions.length]);
|
|
559
624
|
const handleMouseEnter = (0, import_react2.useCallback)(() => {
|
|
560
625
|
if (hoverTimeoutRef.current) {
|
|
561
626
|
clearTimeout(hoverTimeoutRef.current);
|
|
@@ -592,12 +657,23 @@ var Select = ({
|
|
|
592
657
|
},
|
|
593
658
|
[isOpen, handleInputInteraction]
|
|
594
659
|
);
|
|
595
|
-
const
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
660
|
+
const handleChevronMouseDown = (0, import_react2.useCallback)(
|
|
661
|
+
(e) => {
|
|
662
|
+
if (isHovering && selectedValue && allowClear) {
|
|
663
|
+
handleClear(e);
|
|
664
|
+
} else {
|
|
665
|
+
handleChevronClick(e);
|
|
666
|
+
}
|
|
667
|
+
},
|
|
668
|
+
[isHovering, selectedValue, allowClear, handleClear, handleChevronClick]
|
|
669
|
+
);
|
|
670
|
+
const handleOptionClick = (0, import_react2.useCallback)((option) => {
|
|
671
|
+
handleOptionSelect(option);
|
|
672
|
+
}, [handleOptionSelect]);
|
|
673
|
+
const handleOptionMouseEnter = (0, import_react2.useCallback)((index) => {
|
|
674
|
+
setHighlightedIndex(index);
|
|
675
|
+
}, []);
|
|
676
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(InputWrapper, { disabled, disabledTooltip, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
601
677
|
"div",
|
|
602
678
|
{
|
|
603
679
|
style,
|
|
@@ -621,35 +697,11 @@ var Select = ({
|
|
|
621
697
|
autoCorrect: "off",
|
|
622
698
|
autoCapitalize: "off",
|
|
623
699
|
spellCheck: "false",
|
|
624
|
-
value: isFocused && enableSearch ? searchTerm :
|
|
700
|
+
value: isFocused && enableSearch ? searchTerm : displayValue,
|
|
625
701
|
onChange: enableSearch ? handleSearchChange : void 0,
|
|
626
702
|
onClick: handleInputInteraction,
|
|
627
703
|
onKeyDown: handleKeyDown,
|
|
628
|
-
className:
|
|
629
|
-
"tw-w-full tw-rounded-xl tw-outline-none tw-transition-all tw-duration-200 tw-cursor-pointer tw-border-solid tw-text-color-text-default",
|
|
630
|
-
sizeClasses.input,
|
|
631
|
-
sizeClasses.padding,
|
|
632
|
-
variantClasses,
|
|
633
|
-
{
|
|
634
|
-
"tw-bg-white": valueSelected || getDisplayValue() || isFocused,
|
|
635
|
-
"tw-bg-color-gray-5": !valueSelected || !getDisplayValue(),
|
|
636
|
-
"!tw-bg-[#F8F7F6] tw-cursor-not-allowed tw-pointer-events-none": disabled
|
|
637
|
-
},
|
|
638
|
-
// Conditional padding based on label presence
|
|
639
|
-
!label && "tw-flex tw-items-center",
|
|
640
|
-
{
|
|
641
|
-
"!tw-border-color-primary": isFocused && experience === "business"
|
|
642
|
-
},
|
|
643
|
-
{
|
|
644
|
-
"!tw-border-[#804D7B]": isFocused && experience === "personal"
|
|
645
|
-
},
|
|
646
|
-
error ? "!tw-border-color-text-critical " : "tw-border-[#EBE3DD] hover:tw-border-[#C5B7AC]",
|
|
647
|
-
// Add focus state styling
|
|
648
|
-
"focus:tw-shadow-sm focus:tw-ring-offset-1",
|
|
649
|
-
className,
|
|
650
|
-
inputClassName
|
|
651
|
-
// Put inputClassName last so it can override default classes
|
|
652
|
-
),
|
|
704
|
+
className: inputClasses,
|
|
653
705
|
readOnly: !isFocused || !enableSearch
|
|
654
706
|
}
|
|
655
707
|
),
|
|
@@ -690,13 +742,7 @@ var Select = ({
|
|
|
690
742
|
// Only rotate chevron when open and not showing clear icon
|
|
691
743
|
isOpen && !(isHovering && selectedValue && allowClear) && "-tw-rotate-180"
|
|
692
744
|
),
|
|
693
|
-
onMouseDown:
|
|
694
|
-
if (isHovering && selectedValue && allowClear) {
|
|
695
|
-
handleClear(e);
|
|
696
|
-
} else {
|
|
697
|
-
handleChevronClick(e);
|
|
698
|
-
}
|
|
699
|
-
},
|
|
745
|
+
onMouseDown: handleChevronMouseDown,
|
|
700
746
|
children: disabled ? null : isHovering && selectedValue && allowClear ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
701
747
|
CrossV2,
|
|
702
748
|
{
|
|
@@ -727,75 +773,32 @@ var Select = ({
|
|
|
727
773
|
dropdownClassName
|
|
728
774
|
),
|
|
729
775
|
ref: optionListRef,
|
|
730
|
-
children: filteredOptions.length > 0 ? filteredOptions.map((option, index) =>
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
// Highlighted option styling (keyboard navigation)
|
|
749
|
-
index === highlightedIndex ? "tw-bg-[#f3f4f6] tw-text-gray-900" : (
|
|
750
|
-
// Default option styling
|
|
751
|
-
"tw-text-gray-900 hover:tw-bg-[#1118270a]"
|
|
752
|
-
)
|
|
753
|
-
)
|
|
754
|
-
),
|
|
755
|
-
children: option.label
|
|
756
|
-
}
|
|
757
|
-
)
|
|
758
|
-
},
|
|
759
|
-
doubleCharSearch ? option.label : option.value
|
|
760
|
-
)) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "tw-px-4 tw-py-3 tw-text-gray-500 tw-text-sm", children: "No options found" })
|
|
776
|
+
children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => {
|
|
777
|
+
const isSelected = normalizeValue(selectedValue) === normalizeValue(option.value);
|
|
778
|
+
const isHighlighted = index === highlightedIndex;
|
|
779
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: (el) => optionRefs.current[index] = el, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
780
|
+
OptionItem,
|
|
781
|
+
{
|
|
782
|
+
option,
|
|
783
|
+
index,
|
|
784
|
+
isSelected,
|
|
785
|
+
isHighlighted,
|
|
786
|
+
experience,
|
|
787
|
+
size,
|
|
788
|
+
optionClassName,
|
|
789
|
+
onSelectHandler: handleOptionClick,
|
|
790
|
+
onMouseEnterHandler: handleOptionMouseEnter
|
|
791
|
+
}
|
|
792
|
+
) }, doubleCharSearch ? option.label : option.value);
|
|
793
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "tw-px-4 tw-py-3 tw-text-gray-500 tw-text-sm", children: "No options found" })
|
|
761
794
|
}
|
|
762
795
|
)
|
|
763
796
|
]
|
|
764
797
|
}
|
|
765
798
|
) });
|
|
766
799
|
};
|
|
767
|
-
var arePropsEqual = (prevProps, nextProps) => {
|
|
768
|
-
var _a, _b;
|
|
769
|
-
const criticalProps = [
|
|
770
|
-
"value",
|
|
771
|
-
"valueSelected",
|
|
772
|
-
"options",
|
|
773
|
-
"error",
|
|
774
|
-
"disabled",
|
|
775
|
-
"label",
|
|
776
|
-
"mandatory"
|
|
777
|
-
];
|
|
778
|
-
for (const prop of criticalProps) {
|
|
779
|
-
if (prevProps[prop] !== nextProps[prop]) {
|
|
780
|
-
return false;
|
|
781
|
-
}
|
|
782
|
-
}
|
|
783
|
-
if (((_a = prevProps.options) == null ? void 0 : _a.length) !== ((_b = nextProps.options) == null ? void 0 : _b.length)) {
|
|
784
|
-
return false;
|
|
785
|
-
}
|
|
786
|
-
if (prevProps.options && nextProps.options) {
|
|
787
|
-
for (let i = 0; i < prevProps.options.length; i++) {
|
|
788
|
-
const prevOpt = prevProps.options[i];
|
|
789
|
-
const nextOpt = nextProps.options[i];
|
|
790
|
-
if ((prevOpt == null ? void 0 : prevOpt.value) !== (nextOpt == null ? void 0 : nextOpt.value) || (prevOpt == null ? void 0 : prevOpt.label) !== (nextOpt == null ? void 0 : nextOpt.label)) {
|
|
791
|
-
return false;
|
|
792
|
-
}
|
|
793
|
-
}
|
|
794
|
-
}
|
|
795
|
-
return true;
|
|
796
|
-
};
|
|
797
800
|
Select.displayName = "Select";
|
|
798
|
-
var Select_default =
|
|
801
|
+
var Select_default = Select;
|
|
799
802
|
// Annotate the CommonJS export names for ESM import in node:
|
|
800
803
|
0 && (module.exports = {
|
|
801
804
|
Select
|