@matbea-ui/matbea-ui 0.2.0-dev.573256 → 0.2.0-dev.600564

package/dist/matbea-ui.cjs.js

@@ -1286,6 +1286,7 @@ const List = styled.styled.div `
   width: ${({ $width }) => `${$width}px`};
   z-index: 999;
   border-radius: 5px;
+  overflow-x: hidden;
   border: 1px solid ${({ theme }) => theme.colors.gray.lightGray2};
   background: ${({ theme }) => theme.colors.primary.white};
   box-shadow: 0px 8px 24px rgba(15, 23, 42, 0.12);
@@ -1293,6 +1294,7 @@ const List = styled.styled.div `
   flex-direction: column;
   max-height: 260px;
   overflow-y: auto;
+  padding-bottom: 8px;
 `;
 const Option = styled.styled.button `
   display: flex;
@@ -1330,12 +1332,18 @@ const OptionIcon = styled.styled.span `
   width: 24px;
   height: 24px;
 `;
+const SearchInput = styled.styled(TextField) `
+  margin: 16px 12px 4px 12px;
+  display: flex;
+  width: inherit;
+`;
 
 const DROPDOWN_OFFSET = 8;
-const SelectField = React__default.forwardRef(({ options = [], value, defaultValue, placeholder = "Text", label, error, disabled = false, icon, name, onChange, onFocus, onBlur, className, }, ref) => {
+const SelectField = React__default.forwardRef(({ options = [], value, defaultValue, placeholder = "Text", label, searchInput = false, searchPlaceholder = "Search", error, disabled = false, icon, name, onChange, onFocus, onBlur, className, }, ref) => {
     const wrapperRef = React__default.useRef(null);
     const fieldRef = React__default.useRef(null);
     const listRef = React__default.useRef(null);
+    const [searchValue, setSearchValue] = React__default.useState("");
     const [isOpen, setIsOpen] = React__default.useState(false);
     const [focused, setFocused] = React__default.useState(false);
     const [internalValue, setInternalValue] = React__default.useState(defaultValue ?? "");
@@ -1457,12 +1465,18 @@ const SelectField = React__default.forwardRef(({ options = [], value, defaultVal
         onBlur?.(evt);
     };
     const includeOption = options.find((opt) => opt.value === selectedValue);
+    const data = React__default.useMemo(() => {
+        if (searchInput && searchValue?.trim() !== "") {
+            return options.filter((opt) => [opt.label.toLowerCase(), opt.value.toLowerCase()].includes(searchValue.toLocaleLowerCase()));
+        }
+        return options;
+    }, [options, searchInput, searchValue]);
     return (jsxRuntime.jsxs(Wrapper, { "data-select-field": "true", className: className, ref: wrapperRef, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: (e) => e.stopPropagation(), children: [label && jsxRuntime.jsx(Label$1, { children: label }), jsxRuntime.jsxs(FieldContainer, { ref: fieldRef, role: "button", tabIndex: disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-invalid": hasError, "aria-disabled": disabled, "$hasError": hasError, "$disabled": disabled, "data-state": hasError ? "error" : isOpen || focused ? "active" : undefined, onClick: toggleDropdown, children: [icon ||
-                        (includeOption?.icon && (jsxRuntime.jsx(LeadingIcon, { children: icon || includeOption.icon }))), jsxRuntime.jsx(Value, { "$placeholder": displayPlaceholder, children: displayText }), jsxRuntime.jsx(HiddenInput$1, { ref: ref, readOnly: true, name: name, value: selectedValue, tabIndex: -1, "aria-hidden": true })] }), error && jsxRuntime.jsx(ErrorText, { children: error }), isOpen && (jsxRuntime.jsx(List, { ref: listRef, role: "listbox", "$width": dropdownRect.width, children: options.map((option, index) => {
-                    const isActiveOption = option.value === selectedValue;
-                    const isHovered = index === hoveredIndex;
-                    return (jsxRuntime.jsxs(Option, { role: "option", "aria-selected": isActiveOption, "data-active": isActiveOption || undefined, "data-hovered": isHovered || undefined, onMouseEnter: () => setHoveredIndex(index), onMouseLeave: () => setHoveredIndex(null), onMouseDown: (evt) => evt.preventDefault(), onClick: () => handleSelect(option), children: [option.icon && jsxRuntime.jsx(OptionIcon, { children: option.icon }), jsxRuntime.jsx(OptionText, { variant: "form-input", children: option.label })] }, option.value));
-                }) }))] }));
+                        (includeOption?.icon && (jsxRuntime.jsx(LeadingIcon, { children: icon || includeOption.icon }))), jsxRuntime.jsx(Value, { "$placeholder": displayPlaceholder, children: displayText }), jsxRuntime.jsx(HiddenInput$1, { ref: ref, readOnly: true, name: name, value: selectedValue, tabIndex: -1, "aria-hidden": true })] }), error && jsxRuntime.jsx(ErrorText, { children: error }), isOpen && (jsxRuntime.jsxs(List, { ref: listRef, role: "listbox", "$width": dropdownRect.width, children: [searchInput && (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(SearchInput, { icon: jsxRuntime.jsx(SearchIcon, {}), value: searchValue, placeholder: searchPlaceholder, onChange: (e) => setSearchValue(e.target.value) }) })), data.map((option, index) => {
+                        const isActiveOption = option.value === selectedValue;
+                        const isHovered = index === hoveredIndex;
+                        return (jsxRuntime.jsxs(Option, { role: "option", "aria-selected": isActiveOption, "data-active": isActiveOption || undefined, "data-hovered": isHovered || undefined, onMouseEnter: () => setHoveredIndex(index), onMouseLeave: () => setHoveredIndex(null), onMouseDown: (evt) => evt.preventDefault(), onClick: () => handleSelect(option), children: [option.icon && jsxRuntime.jsx(OptionIcon, { children: option.icon }), jsxRuntime.jsx(OptionText, { variant: "form-input", children: option.label })] }, option.value));
+                    })] }))] }));
 });
 SelectField.displayName = "SelectField";
 
@@ -2220,6 +2234,10 @@ const LangCountrySelectContainer = styled.styled.div `
   min-width: 200px;
   width: fit-content;
   cursor: pointer;
+  background: ${({ theme }) => theme.colors.primary.white};
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.primary.primaryBlue};
+  }
 `;
 const LangCountrySelectDropdown = styled.styled.div `
   display: flex;
@@ -2263,7 +2281,7 @@ const LangCountrySelectButton = styled.styled(Button$1) `
   width: fit-content;
 `;
 
-const LangCountrySelect = ({ currentLang, currentCurrency, currentCountry, countries = [], currencies = [], languages = [], handleSave, labelLang, labelCurrency, labelCountry, saveText, }) => {
+const LangCountrySelect = ({ currentLang, currentCurrency, currentCountry, countries = [], currencies = [], languages = [], handleSave, labelLang, labelCurrency, labelCountry, saveText, searchPlaceholder, }) => {
     const [isOpen, setIsOpen] = React__default.useState(false);
     const ref = React__default.useRef(null);
     const [lang, setLang] = React__default.useState(currentLang);
@@ -2296,7 +2314,7 @@ const LangCountrySelect = ({ currentLang, currentCurrency, currentCountry, count
     }, [isOpen]);
     return (jsxRuntime.jsxs(LangCountrySelectStyled, { ref: ref, children: [jsxRuntime.jsxs(LangCountrySelectContainer, { onClick: handleClick, children: [includedCurrency?.icon && (jsxRuntime.jsx(LangCountrySelectIcon, { children: includedCurrency?.icon })), jsxRuntime.jsx(LangCountrySelectLabel, { children: [includedCurrency?.value, includedLang?.label]
                             .join(" / ")
-                            ?.toLocaleUpperCase() }), jsxRuntime.jsx(LangCountrySelectArrow, { "$open": isOpen, size: 9 })] }), jsxRuntime.jsxs(LangCountrySelectDropdown, { "$open": isOpen, children: [jsxRuntime.jsx(SelectField, { placeholder: "", label: labelLang, options: languages, value: lang, onChange: setLang }), jsxRuntime.jsx(SelectField, { icon: includedCurrency?.icon, placeholder: "", label: labelCurrency, options: currencies, value: currency, onChange: setCurrency }), jsxRuntime.jsx(SelectField, { icon: includedCountry?.icon, placeholder: "", label: labelCountry, options: countries, value: country, onChange: setCountry }), jsxRuntime.jsx(LangCountrySelectButton, { size: "medium", onClick: handleClickSave, children: saveText })] })] }));
+                            ?.toLocaleUpperCase() }), jsxRuntime.jsx(LangCountrySelectArrow, { "$open": isOpen, size: 9 })] }), jsxRuntime.jsxs(LangCountrySelectDropdown, { "$open": isOpen, children: [jsxRuntime.jsx(SelectField, { placeholder: "", label: labelLang, options: languages, value: lang, onChange: setLang }), jsxRuntime.jsx(SelectField, { icon: includedCurrency?.icon, placeholder: "", label: labelCurrency, options: currencies, value: currency, onChange: setCurrency }), jsxRuntime.jsx(SelectField, { icon: includedCountry?.icon, placeholder: "", label: labelCountry, options: countries, value: country, onChange: setCountry, searchPlaceholder: searchPlaceholder, searchInput: true }), jsxRuntime.jsx(LangCountrySelectButton, { size: "medium", onClick: handleClickSave, children: saveText })] })] }));
 };
 
 const ApplicationDataStyled = styled.styled.div `