pesona-ui 1.0.29 → 1.0.30

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 }) => {
@@ -8189,95 +8189,44 @@ const useDropdownPositionAndScroll = (isOpen, dropdownOptionsRef) => {
 
 const Select = forwardRef(({ name, label, message, selectLabel, size = 'md', floatingLabel = false, error, options, value = '', onChange, onBlur, required, disabled, }, ref) => {
     const [isOpen, setIsOpen] = useState(false);
-    const [highlightIndex, setHighlightIndex] = useState(-1);
+    const [internalValue, setInternalValue] = useState(value);
     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));
+    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
+    const handleOptionClick = (optionValue) => {
+        setInternalValue(optionValue);
+        // Trigger onChange
+        onChange?.({
+            target: { name, value: optionValue, type: 'select-one' },
+        });
+        if (selectRef.current) {
+            selectRef.current.value = optionValue.toString();
+            selectRef.current.dispatchEvent(new Event('change', { bubbles: true }));
+        }
         setIsOpen(false);
-        setTimeout(() => {
-            onBlur?.(createSyntheticEvent(selectedOption.value));
-        }, 0);
-    }, [options, onChange, onBlur, createSyntheticEvent]);
-    const handleOutsideClick = useCallback(() => {
+    };
+    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();
+    });
     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) {
+        return () => {
             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' });
-        }
-    }, [highlightIndex, isOpen]);
+        };
+    }, []);
+    const displayText = internalValue
+        ? options.find((option) => option.value === internalValue)?.label
+        : selectLabel || 'Select an option';
     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: {
+        React.createElement("select", { ref: selectRef, name: name, value: internalValue || '', onChange: onChange, onBlur: onBlur, required: required, disabled: disabled, style: {
                 position: 'absolute',
                 left: '-9999px',
                 opacity: 0,
@@ -8292,15 +8241,15 @@ const Select = forwardRef(({ name, label, message, selectLabel, size = 'md', flo
             " ",
             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 ${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)))))),
         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';
 
@@ -8648,12 +8597,15 @@ 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, required, disabled, className, }, ref) => {
+const SelectMultiple = forwardRef(({ name, label, message, selectLabel, floatingLabel = false, error, options, value = [], onChange, onBlur, required, disabled, className, }, ref) => {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedValues, setSelectedValues] = useState(value);
     const dropdownRef = useRef(null);
     const dropdownOptionsRef = useRef(null);
-    // Update selectedValues hanya jika value dari props berubah
+    const inputRef = useRef(null);
+    // expose to RHF
+    useImperativeHandle(ref, () => inputRef.current);
+    // update when external value changes
     useEffect(() => {
         if (JSON.stringify(value) !== JSON.stringify(selectedValues)) {
             setSelectedValues(value);
@@ -8664,14 +8616,16 @@ const SelectMultiple = forwardRef(({ name, label, message, selectLabel, floating
             ? selectedValues.filter((val) => val !== optionValue)
             : [...selectedValues, optionValue];
         setSelectedValues(newSelectedValues);
-        if (onChange) {
-            onChange({
-                target: { name, value: newSelectedValues },
-            });
-        }
+        onChange?.({
+            target: {
+                name,
+                value: newSelectedValues,
+            },
+        });
     };
     useOutsideClick([dropdownRef], () => {
         setIsOpen(false);
+        inputRef.current?.blur();
     });
     useDropdownPositionAndScroll(isOpen, dropdownOptionsRef);
     const selectedLabels = selectedValues
@@ -8679,12 +8633,13 @@ 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), ref: ref },
+            React.createElement("div", { className: `dropdown-header ${isOpen ? 'open' : ''} ${disabled ? 'disabled' : ''}`, onClick: () => !disabled && setIsOpen(!isOpen) },
                 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' : ''}` },