pesona-ui 1.0.19 → 1.0.20

package/dist/index.cjs.js

@@ -8590,13 +8590,11 @@ const SelectMultiple = React.forwardRef(({ name, label, selectLabel, floatingLab
 });
 SelectMultiple.displayName = 'SelectMultiple';
 
-const SelectWithSearch = React.forwardRef(({ name, label, selectLabel, size = 'md', floatingLabel = false, error, options, value = '', onChange, required, disabled, selectSearch, handleOptionSearch, }, ref) => {
+const SelectWithSearch = React.forwardRef(({ name, label, selectLabel, size = 'md', floatingLabel = false, error, options = [], value = '', onChange, required, disabled, selectSearch = '', setSelectSearch, isLoading = false, }, ref) => {
     const [isOpen, setIsOpen] = React.useState(false);
-    const [selectedValue, setSelectedValue] = React.useState(value || '');
     const dropdownRef = React.useRef(null);
     const dropdownOptionsRef = React.useRef(null);
     const handleOptionClick = (optionValue) => {
-        setSelectedValue(optionValue);
         if (onChange) {
             onChange({
                 target: { name, value: optionValue },
@@ -8604,25 +8602,19 @@ const SelectWithSearch = React.forwardRef(({ name, label, selectLabel, size = 'm
         }
         setIsOpen(false);
     };
-    useOutsideClick([dropdownRef], () => {
-        setIsOpen(false);
-    });
+    useOutsideClick([dropdownRef], () => setIsOpen(false));
     useDropdownPositionAndScroll(isOpen, dropdownOptionsRef);
     React.useEffect(() => {
-        return () => {
-            setIsOpen(false);
-        };
+        return () => setIsOpen(false);
     }, []);
-    // useEffect for value
-    React.useEffect(() => {
-        setSelectedValue(value);
-    }, [value]);
-    const displayText = selectedValue
-        ? options.find((option) => option.value === selectedValue)?.label
+    const displayText = value
+        ? options.find((option) => option.value === value)?.label
         : selectLabel || 'Select an option';
+    console.log(isLoading);
     return (React.createElement(React.Fragment, null,
         label && !floatingLabel && (React.createElement("label", { htmlFor: name },
             label,
+            " ",
             required && React.createElement("span", { className: "text-danger" }, "*"))),
         React.createElement("div", { className: `dropdown-select-container ${size}`, ref: dropdownRef },
             React.createElement("div", { className: `dropdown-header ${isOpen ? 'open' : ''} ${disabled ? 'disabled' : ''}`, onClick: () => !disabled && setIsOpen(!isOpen), ref: ref, "aria-haspopup": "listbox", "aria-expanded": isOpen },
@@ -8630,12 +8622,11 @@ const SelectWithSearch = React.forwardRef(({ name, label, selectLabel, size = 'm
                 React.createElement(FiChevronDown, { className: "arrow" })),
             isOpen && (React.createElement("div", { className: `dropdown-options scrollbar ${disabled ? 'disabled' : ''}`, ref: dropdownOptionsRef, role: "listbox" },
                 React.createElement("div", { className: "search-input" },
-                    React.createElement(Input, { name: "search", placeholder: "Ketik untuk mencari..", type: "search", tabIndex: 0, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, role: "textbox", value: selectSearch, autoFocus: true, onChange: (e) => {
-                            handleOptionSearch(e.currentTarget.value);
-                        } })),
-                options.length > 0 ? (options.map((option, index) => (React.createElement("div", { key: `${option.value}-${index}`, className: `option ${selectedValue === option.value ? 'selected' : ''}`, onClick: () => !disabled && handleOptionClick(option.value), role: "option", "aria-selected": selectedValue === option.value }, option.label)))) : (React.createElement("div", { className: "option disabled", role: "option" }, "No results found"))))),
+                    React.createElement(Input, { name: "search", placeholder: "Ketik untuk mencari..", type: "search", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, role: "textbox", value: selectSearch, autoFocus: true, onChange: (e) => setSelectSearch && setSelectSearch(e.currentTarget.value) })),
+                isLoading ? (React.createElement("div", { className: "loading-indicator" }, "Loading options...")) : options.length === 0 ? (React.createElement("div", { className: "empty-message" }, "Tidak ada hasil ditemukan")) : (options.map((option) => (React.createElement("div", { key: String(option.value), className: `option ${value === option.value ? 'selected' : ''}`, onClick: () => !disabled && handleOptionClick(String(option.value)), role: "option", "aria-selected": value === option.value }, option.label))))))),
         label && floatingLabel && (React.createElement("label", { htmlFor: name },
             label,
+            " ",
             required && React.createElement("span", { className: "text-danger" }, "*"))),
         error && React.createElement("small", { className: "form-message" }, error)));
 });