pesona-ui 1.0.28 → 1.0.29

package/dist/index.esm.js

@@ -8187,53 +8187,120 @@ 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 [highlightIndex, setHighlightIndex] = useState(-1);
     const dropdownRef = useRef(null);
     const dropdownOptionsRef = useRef(null);
-    const handleOptionClick = (optionValue) => {
+    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);
-        // 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,
-                },
-            });
-        }
+        if (!selectedOption)
+            return;
+        hiddenSelectRef.current.value = String(selectedOption.value);
+        onChange?.(createSyntheticEvent(selectedOption.value));
         setIsOpen(false);
-    };
-    useOutsideClick([dropdownRef], () => {
+        setTimeout(() => {
+            onBlur?.(createSyntheticEvent(selectedOption.value));
+        }, 0);
+    }, [options, onChange, onBlur, createSyntheticEvent]);
+    const handleOutsideClick = useCallback(() => {
         setIsOpen(false);
-    });
+        if (onBlur && value !== undefined && value !== null && value !== '') {
+            setTimeout(() => {
+                onBlur(createSyntheticEvent(value));
+            }, 0);
+        }
+    }, [value, onBlur, createSyntheticEvent]);
+    useOutsideClick([dropdownRef], handleOutsideClick);
     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(() => {
-        return () => {
+        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);
-        };
-    }, []);
-    const displayText = value
-        ? options.find((option) => option.value === value)?.label
-        : selectLabel || 'Select an option';
+        }
+        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]);
     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("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' : ''} ${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("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", 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)))))),
         label && floatingLabel && (React.createElement("label", { htmlFor: name },
             label,
             " ",
             required && React.createElement("span", { className: "text-danger" }, "*"))),
-        error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
+        error ? (React.createElement("small", { className: "form-message text-danger", role: "alert" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
 });
 Select.displayName = 'Select';