pesona-ui 1.0.28 → 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 }) => {
@@ -8187,28 +8187,34 @@ const useDropdownPositionAndScroll = (isOpen, dropdownOptionsRef) => {
     }, [isOpen, dropdownOptionsRef]);
 };
 
-const Select = forwardRef(({ name, label, message, selectLabel, size = 'md', floatingLabel = false, error, options, value = '', onChange, required, disabled, }, ref) => {
+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 [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
     const handleOptionClick = (optionValue) => {
-        const selectedOption = options.find((opt) => opt.value === optionValue);
-        // Gunakan nilai asli sesuai tipe (number/string)
-        const actualValue = typeof selectedOption?.value === 'number'
-            ? Number(selectedOption.value)
-            : selectedOption?.value;
-        if (onChange) {
-            onChange({
-                target: {
-                    name,
-                    value: actualValue,
-                },
-            });
+        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);
     };
     useOutsideClick([dropdownRef], () => {
         setIsOpen(false);
+        selectRef.current?.blur();
     });
     useDropdownPositionAndScroll(isOpen, dropdownOptionsRef);
     useEffect(() => {
@@ -8216,19 +8222,29 @@ const Select = forwardRef(({ name, label, message, selectLabel, size = 'md', flo
             setIsOpen(false);
         };
     }, []);
-    const displayText = value
-        ? options.find((option) => option.value === value)?.label
+    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("option", { value: "" }, "Select an option"),
+            options.map((option) => (React.createElement("option", { key: option.value, value: option.value }, option.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" }, options.map((option, index) => (React.createElement("div", { key: `${option.value}-${index}`, className: `option ${value === option.value ? 'selected' : ''}`, onClick: () => !disabled && handleOptionClick(option.value), role: "option", "aria-selected": value === option.value }, 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,
             " ",
@@ -8581,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);
@@ -8597,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
@@ -8612,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' : ''}` },