@kaio-xyz/design-system 1.1.126 → 1.1.128

package/dist/index.cjs.js

@@ -488,8 +488,13 @@ var CustomSingleValue = function (_a) {
     return (jsxRuntime.jsx(ReactSelect.components.SingleValue, __assign({ data: data }, rest, { children: jsxRuntime.jsx(IconAndLabel, { icon: data.icon, children: children }) })));
 };
 var Select = function (_a) {
-    var id = _a.id, label = _a.label, dataTest = _a.dataTest, isDisabled = _a.isDisabled, className = _a.className, error = _a.error, customComponents = _a.components, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, value = _a.value, defaultValue = _a.defaultValue, placeholder = _a.placeholder, rest = __rest(_a, ["id", "label", "dataTest", "isDisabled", "className", "error", "components", "onChange", "onFocus", "onBlur", "value", "defaultValue", "placeholder"]);
-    var _b = React.useState(false), isFocused = _b[0], setIsFocused = _b[1];
+    var id = _a.id, label = _a.label, dataTest = _a.dataTest, isDisabled = _a.isDisabled, className = _a.className, error = _a.error, customComponents = _a.components, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, onMenuOpen = _a.onMenuOpen, onMenuClose = _a.onMenuClose, value = _a.value, defaultValue = _a.defaultValue, placeholder = _a.placeholder, rest = __rest(_a, ["id", "label", "dataTest", "isDisabled", "className", "error", "components", "onChange", "onFocus", "onBlur", "onMenuOpen", "onMenuClose", "value", "defaultValue", "placeholder"]);
+    var DataTestInput = React.useMemo(function () {
+        var Input = function (props) { return (jsxRuntime.jsx(ReactSelect.components.Input, __assign({}, props, { "data-test": dataTest }))); };
+        Input.displayName = 'DataTestInput';
+        return Input;
+    }, [dataTest]);
+    var _b = React.useState(false), menuIsOpen = _b[0], setMenuIsOpen = _b[1];
     var _c = React.useState(function () {
         var v = defaultValue;
         return v != null && (!Array.isArray(v) || v.length > 0);
@@ -504,13 +509,13 @@ var Select = function (_a) {
     var controlledHasValue = value !== undefined
         ? (value != null && (!Array.isArray(value) || value.length > 0))
         : uncontrolledHasValue;
-    var isFloating = isFocused || controlledHasValue;
+    var isFloating = menuIsOpen || controlledHasValue;
     var handleChange = function (newValue, actionMeta) {
         var v = newValue;
         setUncontrolledHasValue(v != null && (!Array.isArray(v) || v.length > 0));
         onChange === null || onChange === void 0 ? void 0 : onChange(newValue, actionMeta);
     };
-    return (jsxRuntime.jsx("div", { className: clsx(style$m.root, className), children: jsxRuntime.jsxs("div", { "data-test": dataTest, className: style$m.selector, "data-error": !!error, "data-has-floating-label": !!label, "data-floating-active": isFloating, children: [label && (jsxRuntime.jsx("label", { className: style$m.label, htmlFor: id, "data-floating": isFloating, children: label })), jsxRuntime.jsx(ReactSelect, __assign({ inputId: id, classNamePrefix: "select", components: __assign(__assign({}, customComponents), { IndicatorSeparator: function () { return null; }, Option: CustomOption, SingleValue: CustomSingleValue, DropdownIndicator: CustomDropdownIndicator, MultiValueLabel: CustomMultiValueLabel }) }, rest, { placeholder: label ? (placeholder !== null && placeholder !== void 0 ? placeholder : "") : placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, onFocus: function (e) { setIsFocused(true); onFocus === null || onFocus === void 0 ? void 0 : onFocus(e); }, onBlur: function (e) { setIsFocused(false); onBlur === null || onBlur === void 0 ? void 0 : onBlur(e); }, isDisabled: isDisabled })), error && jsxRuntime.jsx(Hint, { kind: "error", className: style$m.hint, children: error })] }) }));
+    return (jsxRuntime.jsx("div", { className: clsx(style$m.root, className), children: jsxRuntime.jsxs("div", { className: style$m.selector, "data-error": !!error, "data-has-floating-label": !!label, "data-floating-active": isFloating, children: [label && (jsxRuntime.jsx("label", { className: style$m.label, htmlFor: id, "data-floating": isFloating, children: label })), jsxRuntime.jsx(ReactSelect, __assign({ inputId: id, classNamePrefix: "select", components: __assign(__assign({}, customComponents), { IndicatorSeparator: function () { return null; }, Input: DataTestInput, Option: CustomOption, SingleValue: CustomSingleValue, DropdownIndicator: CustomDropdownIndicator, MultiValueLabel: CustomMultiValueLabel }) }, rest, { placeholder: label ? (placeholder !== null && placeholder !== void 0 ? placeholder : "") : placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, onMenuOpen: function () { setMenuIsOpen(true); onMenuOpen === null || onMenuOpen === void 0 ? void 0 : onMenuOpen(); }, onMenuClose: function () { setMenuIsOpen(false); onMenuClose === null || onMenuClose === void 0 ? void 0 : onMenuClose(); }, onFocus: function (e) { onFocus === null || onFocus === void 0 ? void 0 : onFocus(e); }, onBlur: function (e) { onBlur === null || onBlur === void 0 ? void 0 : onBlur(e); }, isDisabled: isDisabled })), error && jsxRuntime.jsx(Hint, { kind: "error", className: style$m.hint, children: error })] }) }));
 };
 Select.displayName = "Select";