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

package/dist/matbea-ui.es.js

@@ -1284,6 +1284,7 @@ const List = styled$1.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);
@@ -1291,6 +1292,7 @@ const List = styled$1.div `
   flex-direction: column;
   max-height: 260px;
   overflow-y: auto;
+  padding-bottom: 8px;
 `;
 const Option = styled$1.button `
   display: flex;
@@ -1328,12 +1330,18 @@ const OptionIcon = styled$1.span `
   width: 24px;
   height: 24px;
 `;
+const SearchInput = styled$1(TextField) `
+  margin: 16px 12px 4px 12px;
+  display: flex;
+  width: inherit;
+`;
 
 const DROPDOWN_OFFSET = 8;
-const SelectField = forwardRef(({ options = [], value, defaultValue, placeholder = "Text", label, error, disabled = false, icon, name, onChange, onFocus, onBlur, className, }, ref) => {
+const SelectField = forwardRef(({ options = [], value, defaultValue, placeholder = "Text", label, searchInput = false, searchPlaceholder = "Search", error, disabled = false, icon, name, onChange, onFocus, onBlur, className, }, ref) => {
     const wrapperRef = useRef(null);
     const fieldRef = useRef(null);
     const listRef = useRef(null);
+    const [searchValue, setSearchValue] = useState("");
     const [isOpen, setIsOpen] = useState(false);
     const [focused, setFocused] = useState(false);
     const [internalValue, setInternalValue] = useState(defaultValue ?? "");
@@ -1455,12 +1463,18 @@ const SelectField = forwardRef(({ options = [], value, defaultValue, placeholder
         onBlur?.(evt);
     };
     const includeOption = options.find((opt) => opt.value === selectedValue);
+    const data = useMemo(() => {
+        if (searchInput && searchValue?.trim() !== "") {
+            return options.filter((opt) => [opt.label.toLowerCase(), opt.value.toLowerCase()].includes(searchValue.toLocaleLowerCase()));
+        }
+        return options;
+    }, [options, searchInput, searchValue]);
     return (jsxs(Wrapper, { "data-select-field": "true", className: className, ref: wrapperRef, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: (e) => e.stopPropagation(), children: [label && jsx(Label$1, { children: label }), 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 && (jsx(LeadingIcon, { children: icon || includeOption.icon }))), jsx(Value, { "$placeholder": displayPlaceholder, children: displayText }), jsx(HiddenInput$1, { ref: ref, readOnly: true, name: name, value: selectedValue, tabIndex: -1, "aria-hidden": true })] }), error && jsx(ErrorText, { children: error }), isOpen && (jsx(List, { ref: listRef, role: "listbox", "$width": dropdownRect.width, children: options.map((option, index) => {
-                    const isActiveOption = option.value === selectedValue;
-                    const isHovered = index === hoveredIndex;
-                    return (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 && jsx(OptionIcon, { children: option.icon }), jsx(OptionText, { variant: "form-input", children: option.label })] }, option.value));
-                }) }))] }));
+                        (includeOption?.icon && (jsx(LeadingIcon, { children: icon || includeOption.icon }))), jsx(Value, { "$placeholder": displayPlaceholder, children: displayText }), jsx(HiddenInput$1, { ref: ref, readOnly: true, name: name, value: selectedValue, tabIndex: -1, "aria-hidden": true })] }), error && jsx(ErrorText, { children: error }), isOpen && (jsxs(List, { ref: listRef, role: "listbox", "$width": dropdownRect.width, children: [searchInput && (jsx("div", { children: jsx(SearchInput, { icon: 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 (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 && jsx(OptionIcon, { children: option.icon }), jsx(OptionText, { variant: "form-input", children: option.label })] }, option.value));
+                    })] }))] }));
 });
 SelectField.displayName = "SelectField";
 
@@ -2218,6 +2232,10 @@ const LangCountrySelectContainer = styled$1.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$1.div `
   display: flex;
@@ -2261,7 +2279,7 @@ const LangCountrySelectButton = styled$1(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] = useState(false);
     const ref = useRef(null);
     const [lang, setLang] = useState(currentLang);
@@ -2294,7 +2312,7 @@ const LangCountrySelect = ({ currentLang, currentCurrency, currentCountry, count
     }, [isOpen]);
     return (jsxs(LangCountrySelectStyled, { ref: ref, children: [jsxs(LangCountrySelectContainer, { onClick: handleClick, children: [includedCurrency?.icon && (jsx(LangCountrySelectIcon, { children: includedCurrency?.icon })), jsx(LangCountrySelectLabel, { children: [includedCurrency?.value, includedLang?.label]
                             .join(" / ")
-                            ?.toLocaleUpperCase() }), jsx(LangCountrySelectArrow, { "$open": isOpen, size: 9 })] }), jsxs(LangCountrySelectDropdown, { "$open": isOpen, children: [jsx(SelectField, { placeholder: "", label: labelLang, options: languages, value: lang, onChange: setLang }), jsx(SelectField, { icon: includedCurrency?.icon, placeholder: "", label: labelCurrency, options: currencies, value: currency, onChange: setCurrency }), jsx(SelectField, { icon: includedCountry?.icon, placeholder: "", label: labelCountry, options: countries, value: country, onChange: setCountry }), jsx(LangCountrySelectButton, { size: "medium", onClick: handleClickSave, children: saveText })] })] }));
+                            ?.toLocaleUpperCase() }), jsx(LangCountrySelectArrow, { "$open": isOpen, size: 9 })] }), jsxs(LangCountrySelectDropdown, { "$open": isOpen, children: [jsx(SelectField, { placeholder: "", label: labelLang, options: languages, value: lang, onChange: setLang }), jsx(SelectField, { icon: includedCurrency?.icon, placeholder: "", label: labelCurrency, options: currencies, value: currency, onChange: setCurrency }), jsx(SelectField, { icon: includedCountry?.icon, placeholder: "", label: labelCountry, options: countries, value: country, onChange: setCountry, searchPlaceholder: searchPlaceholder, searchInput: true }), jsx(LangCountrySelectButton, { size: "medium", onClick: handleClickSave, children: saveText })] })] }));
 };
 
 const ApplicationDataStyled = styled$1.div `