pesona-ui 1.0.29 → 1.0.31

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef, useMemo, forwardRef, useCallback } from 'react';
+import React, { useEffect, useState, useRef, useMemo, forwardRef, useImperativeHandle, useCallback } from 'react';
 import ReactDOM, { createPortal } from 'react-dom';
 
 const Button = ({ type = 'button', className, children, ...rest }) => {
@@ -8187,120 +8187,55 @@ 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 [highlightIndex, setHighlightIndex] = useState(-1);
     const dropdownRef = useRef(null);
     const dropdownOptionsRef = useRef(null);
-    const hiddenSelectRef = useRef(null);
-    const shouldReturnNumber = useMemo(() => options.every((opt) => typeof opt.value === 'number'), [options]);
-    const coerceValue = useCallback((val) => (shouldReturnNumber ? Number(val) : val), [shouldReturnNumber]);
-    const createSyntheticEvent = useCallback((val) => ({
-        target: { name, value: coerceValue(val), type: 'select-one' },
-        currentTarget: { name, value: coerceValue(val), type: 'select-one' },
-    }), [name, coerceValue]);
-    const handleOptionSelect = useCallback((optionValue) => {
-        const selectedOption = options.find((opt) => opt.value === optionValue);
-        if (!selectedOption)
-            return;
-        hiddenSelectRef.current.value = String(selectedOption.value);
-        onChange?.(createSyntheticEvent(selectedOption.value));
-        setIsOpen(false);
-        setTimeout(() => {
-            onBlur?.(createSyntheticEvent(selectedOption.value));
-        }, 0);
-    }, [options, onChange, onBlur, createSyntheticEvent]);
-    const handleOutsideClick = useCallback(() => {
+    const selectRef = useRef(null);
+    useImperativeHandle(ref, () => selectRef.current);
+    useEffect(() => setIsOpen(false), []);
+    useOutsideClick([dropdownRef], () => {
         setIsOpen(false);
-        if (onBlur && value !== undefined && value !== null && value !== '') {
-            setTimeout(() => {
-                onBlur(createSyntheticEvent(value));
-            }, 0);
-        }
-    }, [value, onBlur, createSyntheticEvent]);
-    useOutsideClick([dropdownRef], handleOutsideClick);
+        selectRef.current?.blur(); // Trigger onBlur RHF
+    });
     useDropdownPositionAndScroll(isOpen, dropdownOptionsRef);
-    const normalizedValue = useMemo(() => (value === null || value === undefined || value === '' ? '' : String(value)), [value]);
-    const selectedOption = useMemo(() => options.find((opt) => String(opt.value) === normalizedValue), [options, normalizedValue]);
-    const displayText = selectedOption?.label || selectLabel || 'Select an option';
-    useEffect(() => {
-        if (hiddenSelectRef.current)
-            hiddenSelectRef.current.value = normalizedValue;
-    }, [normalizedValue]);
-    useEffect(() => {
-        if (isOpen) {
-            const index = options.findIndex((opt) => String(opt.value) === normalizedValue);
-            setHighlightIndex(index >= 0 ? index : 0);
-        }
-    }, [isOpen, options, normalizedValue]);
-    const handleKeyDown = useCallback((e) => {
-        if (disabled)
-            return;
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            if (isOpen && highlightIndex >= 0) {
-                handleOptionSelect(options[highlightIndex].value);
-            }
-            else {
-                setIsOpen((prev) => !prev);
-            }
-        }
-        else if (e.key === 'Escape' && isOpen) {
-            setIsOpen(false);
-        }
-        else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-            e.preventDefault();
-            if (!isOpen) {
-                setIsOpen(true);
-            }
-            else {
-                setHighlightIndex((prev) => {
-                    const next = e.key === 'ArrowDown'
-                        ? (prev + 1) % options.length
-                        : (prev - 1 + options.length) % options.length;
-                    return next;
-                });
-            }
-        }
-    }, [disabled, isOpen, highlightIndex, options, handleOptionSelect]);
-    useEffect(() => {
-        if (isOpen && dropdownOptionsRef.current && highlightIndex >= 0) {
-            const optionElements = dropdownOptionsRef.current.querySelectorAll('.option');
-            const highlighted = optionElements[highlightIndex];
-            highlighted?.scrollIntoView({ block: 'nearest' });
+    const displayText = value
+        ? options.find((opt) => opt.value === value)?.label
+        : selectLabel;
+    const handleOptionClick = (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 }));
         }
-    }, [highlightIndex, isOpen]);
+        setIsOpen(false);
+    };
     return (React.createElement(React.Fragment, null,
-        React.createElement("select", { ref: (el) => {
-                hiddenSelectRef.current = el;
-                if (typeof ref === 'function')
-                    ref(el);
-                else if (ref)
-                    ref.current = el;
-            }, name: name, value: normalizedValue, 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,
             " ",
             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' : ''} ${error ? 'error' : ''}`, onClick: () => !disabled && setIsOpen(!isOpen), onKeyDown: handleKeyDown, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-invalid": !!error, tabIndex: disabled ? -1 : 0, role: "combobox" },
+            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", ref: dropdownOptionsRef, role: "listbox" }, options.map((option, index) => (React.createElement("div", { key: `${option.value}-${index}`, className: `option ${String(value) === String(option.value) ? 'selected' : ''} ${highlightIndex === index ? 'highlight' : ''}`, onClick: () => !disabled && handleOptionSelect(option.value), role: "option", "aria-selected": String(value) === String(option.value), tabIndex: 0 }, 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,
             " ",
             required && React.createElement("span", { className: "text-danger" }, "*"))),
-        error ? (React.createElement("small", { className: "form-message text-danger", role: "alert" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
+        error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
 });
 Select.displayName = 'Select';
 
@@ -8697,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,
             " ",