pesona-ui 1.0.30 → 1.0.31

package/dist/index.esm.js

@@ -8187,55 +8187,41 @@ const useDropdownPositionAndScroll = (isOpen, dropdownOptionsRef) => {
     }, [isOpen, dropdownOptionsRef]);
 };
 
-const Select = forwardRef(({ name, label, message, selectLabel, size = 'md', floatingLabel = false, error, options, value = '', onChange, onBlur, required, disabled, }, ref) => {
+const Select = forwardRef((props, ref) => {
+    const { name, label, message, selectLabel = 'Select an option', size = 'md', floatingLabel = false, error, options, value = '', onChange, onBlur, required, disabled, } = props;
     const [isOpen, setIsOpen] = useState(false);
-    const [internalValue, setInternalValue] = useState(value);
     const dropdownRef = useRef(null);
     const dropdownOptionsRef = useRef(null);
     const selectRef = useRef(null);
-    // Update internal value when value prop changes
-    useEffect(() => {
-        setInternalValue(value);
-    }, [value]);
-    // Expose selectRef to parent via forwardRef
     useImperativeHandle(ref, () => selectRef.current);
-    // Handle option click
+    useEffect(() => setIsOpen(false), []);
+    useOutsideClick([dropdownRef], () => {
+        setIsOpen(false);
+        selectRef.current?.blur(); // Trigger onBlur RHF
+    });
+    useDropdownPositionAndScroll(isOpen, dropdownOptionsRef);
+    const displayText = value
+        ? options.find((opt) => opt.value === value)?.label
+        : selectLabel;
     const handleOptionClick = (optionValue) => {
-        setInternalValue(optionValue);
-        // Trigger onChange
-        onChange?.({
-            target: { name, value: optionValue, type: 'select-one' },
-        });
+        const syntheticEvent = {
+            target: {
+                name,
+                value: optionValue,
+            },
+        };
+        onChange?.(syntheticEvent);
+        // Change the select value to trigger onChange in RHF
         if (selectRef.current) {
-            selectRef.current.value = optionValue.toString();
+            selectRef.current.value = String(optionValue);
             selectRef.current.dispatchEvent(new Event('change', { bubbles: true }));
         }
         setIsOpen(false);
     };
-    useOutsideClick([dropdownRef], () => {
-        setIsOpen(false);
-        selectRef.current?.blur();
-    });
-    useDropdownPositionAndScroll(isOpen, dropdownOptionsRef);
-    useEffect(() => {
-        return () => {
-            setIsOpen(false);
-        };
-    }, []);
-    const displayText = internalValue
-        ? options.find((option) => option.value === internalValue)?.label
-        : selectLabel || 'Select an option';
     return (React.createElement(React.Fragment, null,
-        React.createElement("select", { ref: selectRef, name: name, value: internalValue || '', onChange: onChange, onBlur: onBlur, required: required, disabled: disabled, style: {
-                position: 'absolute',
-                left: '-9999px',
-                opacity: 0,
-                pointerEvents: 'none',
-                width: '1px',
-                height: '1px',
-            }, tabIndex: -1, "aria-hidden": "true" },
+        React.createElement("select", { ref: selectRef, name: name, value: value, onChange: onChange, onBlur: onBlur, required: required, disabled: disabled, style: { position: 'absolute', left: '-9999px' }, tabIndex: -1, "aria-hidden": "true" },
             React.createElement("option", { value: "" }, "Select an option"),
-            options.map((option) => (React.createElement("option", { key: option.value, value: option.value }, option.label)))),
+            options.map((opt) => (React.createElement("option", { key: opt.value, value: opt.value }, opt.label)))),
         label && !floatingLabel && (React.createElement("label", { htmlFor: name },
             label,
             " ",
@@ -8244,7 +8230,7 @@ const Select = forwardRef(({ name, label, message, selectLabel, size = 'md', flo
             React.createElement("div", { className: `dropdown-header ${isOpen ? 'open' : ''} ${disabled ? 'disabled' : ''}`, onClick: () => !disabled && setIsOpen(!isOpen), "aria-haspopup": "listbox", "aria-expanded": isOpen },
                 React.createElement("span", { className: "label" }, displayText),
                 React.createElement(FiChevronDown, { className: "arrow" })),
-            isOpen && (React.createElement("div", { className: `dropdown-options scrollbar ${disabled ? 'disabled' : ''}`, ref: dropdownOptionsRef, role: "listbox" }, options.map((option, index) => (React.createElement("div", { key: `${option.value}-${index}`, className: `option ${internalValue === option.value ? 'selected' : ''}`, onClick: () => !disabled && handleOptionClick(option.value), role: "option", "aria-selected": internalValue === option.value }, option.label)))))),
+            isOpen && (React.createElement("div", { className: "dropdown-options scrollbar", ref: dropdownOptionsRef, role: "listbox" }, options.map((opt) => (React.createElement("div", { key: opt.value, className: `option ${opt.value === value ? 'selected' : ''}`, onClick: () => handleOptionClick(opt.value), role: "option", "aria-selected": opt.value === value }, opt.label)))))),
         label && floatingLabel && (React.createElement("label", { htmlFor: name },
             label,
             " ",
@@ -8597,15 +8583,12 @@ const RadioButtonGroup = React.forwardRef(({ name, label, message, size = 'md',
 });
 RadioButtonGroup.displayName = 'RadioButtonGroup';
 
-const SelectMultiple = forwardRef(({ name, label, message, selectLabel, floatingLabel = false, error, options, value = [], onChange, onBlur, required, disabled, className, }, ref) => {
+const SelectMultiple = forwardRef(({ name, label, message, selectLabel, floatingLabel = false, error, options, value = [], onChange, required, disabled, className, }, ref) => {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedValues, setSelectedValues] = useState(value);
     const dropdownRef = useRef(null);
     const dropdownOptionsRef = useRef(null);
-    const inputRef = useRef(null);
-    // expose to RHF
-    useImperativeHandle(ref, () => inputRef.current);
-    // update when external value changes
+    // Update selectedValues hanya jika value dari props berubah
     useEffect(() => {
         if (JSON.stringify(value) !== JSON.stringify(selectedValues)) {
             setSelectedValues(value);
@@ -8616,16 +8599,14 @@ const SelectMultiple = forwardRef(({ name, label, message, selectLabel, floating
             ? selectedValues.filter((val) => val !== optionValue)
             : [...selectedValues, optionValue];
         setSelectedValues(newSelectedValues);
-        onChange?.({
-            target: {
-                name,
-                value: newSelectedValues,
-            },
-        });
+        if (onChange) {
+            onChange({
+                target: { name, value: newSelectedValues },
+            });
+        }
     };
     useOutsideClick([dropdownRef], () => {
         setIsOpen(false);
-        inputRef.current?.blur();
     });
     useDropdownPositionAndScroll(isOpen, dropdownOptionsRef);
     const selectedLabels = selectedValues
@@ -8633,13 +8614,12 @@ const SelectMultiple = forwardRef(({ name, label, message, selectLabel, floating
         .filter(Boolean)
         .join(', ');
     return (React.createElement(React.Fragment, null,
-        React.createElement("input", { type: "hidden", name: name, value: selectedValues.join(','), ref: inputRef, onBlur: onBlur, required: required }),
         label && !floatingLabel && (React.createElement("label", { htmlFor: name },
             label,
             " ",
             required && React.createElement("span", { className: "text-danger" }, "*"))),
         React.createElement("div", { className: `dropdown-select-container ${className || ''}`, ref: dropdownRef },
-            React.createElement("div", { className: `dropdown-header ${isOpen ? 'open' : ''} ${disabled ? 'disabled' : ''}`, onClick: () => !disabled && setIsOpen(!isOpen) },
+            React.createElement("div", { className: `dropdown-header ${isOpen ? 'open' : ''} ${disabled ? 'disabled' : ''}`, onClick: () => !disabled && setIsOpen(!isOpen), ref: ref },
                 React.createElement("span", { className: "label" }, selectedLabels || selectLabel || 'Select an option'),
                 React.createElement(FiChevronDown, { className: `arrow ${isOpen ? 'open' : ''}` })),
             isOpen && !disabled && (React.createElement("div", { className: "dropdown-options scrollbar", ref: dropdownOptionsRef, role: "listbox" }, options?.map((option) => (React.createElement("div", { key: option.value, className: `option ${selectedValues.includes(option.value) ? 'selected' : ''}` },
@@ -8652,39 +8632,49 @@ const SelectMultiple = forwardRef(({ name, label, message, selectLabel, floating
 });
 SelectMultiple.displayName = 'SelectMultiple';
 
-const SelectWithSearch = forwardRef(({ name, label, message, selectLabel, size = 'md', floatingLabel = false, error, options = [], value = '', onChange, required, disabled, selectSearch = '', setSelectSearch, isLoading = false, }, ref) => {
+const SelectWithSearch = forwardRef((props, ref) => {
+    const { name, label, message, selectLabel = 'Select an option', size = 'md', floatingLabel = false, error, options = [], value = '', onChange, required, disabled, selectSearch = '', setSelectSearch, isLoading = false, } = props;
     const [isOpen, setIsOpen] = useState(false);
     const dropdownRef = useRef(null);
     const dropdownOptionsRef = useRef(null);
+    const selectRef = useRef(null);
+    useImperativeHandle(ref, () => selectRef.current);
+    useOutsideClick([dropdownRef], () => setIsOpen(false));
+    useDropdownPositionAndScroll(isOpen, dropdownOptionsRef);
+    const displayText = value
+        ? options.find((opt) => opt.value === value)?.label
+        : selectLabel;
     const handleOptionClick = (optionValue) => {
-        if (onChange) {
-            onChange({
-                target: { name, value: optionValue },
-            });
+        const syntheticEvent = {
+            target: {
+                name,
+                value: optionValue,
+            },
+        };
+        onChange?.(syntheticEvent);
+        // Change the select value to trigger onChange in RHF
+        if (selectRef.current) {
+            selectRef.current.value = String(optionValue);
+            selectRef.current.dispatchEvent(new Event('change', { bubbles: true }));
         }
         setIsOpen(false);
     };
-    useOutsideClick([dropdownRef], () => setIsOpen(false));
-    useDropdownPositionAndScroll(isOpen, dropdownOptionsRef);
-    useEffect(() => {
-        return () => setIsOpen(false);
-    }, []);
-    const displayText = value
-        ? options.find((option) => option.value === value)?.label
-        : selectLabel || 'Select an option';
     return (React.createElement(React.Fragment, null,
+        React.createElement("select", { ref: selectRef, name: name, value: value, onChange: onChange, style: { position: 'absolute', left: '-9999px' }, tabIndex: -1, "aria-hidden": "true" },
+            React.createElement("option", { value: "" }, "Select an option"),
+            options.map((opt) => (React.createElement("option", { key: opt.value, value: opt.value }, opt.label)))),
         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 },
+            React.createElement("div", { className: `dropdown-header ${isOpen ? 'open' : ''} ${disabled ? 'disabled' : ''}`, onClick: () => !disabled && setIsOpen(!isOpen), "aria-haspopup": "listbox", "aria-expanded": isOpen },
                 React.createElement("span", { className: "label" }, displayText),
                 React.createElement(FiChevronDown, { className: "arrow" })),
-            isOpen && (React.createElement("div", { className: `dropdown-options scrollbar ${disabled ? 'disabled' : ''}`, ref: dropdownOptionsRef, role: "listbox" },
+            isOpen && (React.createElement("div", { className: "dropdown-options scrollbar", ref: dropdownOptionsRef, role: "listbox" },
                 React.createElement("div", { className: "search-input" },
-                    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: "p-10 text-center" }, "Loading options...")) : options.length === 0 ? (React.createElement("div", { className: "p-10 text-center" }, "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))))))),
+                    React.createElement(Input, { name: "search", placeholder: "Ketik untuk mencari..", type: "search", autoFocus: true, value: selectSearch, onChange: (e) => setSelectSearch?.(e.currentTarget.value) })),
+                isLoading ? (React.createElement("div", { className: "p-10 text-center" }, "Loading options...")) : options.length === 0 ? (React.createElement("div", { className: "p-10 text-center" }, "Tidak ada hasil ditemukan")) : (options.map((opt) => (React.createElement("div", { key: opt.value, className: `option ${value === opt.value ? 'selected' : ''}`, onClick: () => handleOptionClick(opt.value), role: "option", "aria-selected": value === opt.value }, opt.label))))))),
         label && floatingLabel && (React.createElement("label", { htmlFor: name },
             label,
             " ",