fis-component 0.0.88 → 0.0.90

package/dist/cjs/index.js

@@ -73662,45 +73662,21 @@ const FISSelect = React.forwardRef(({ className, style, size = "md", options, va
         strategy: "fixed",
     }), []);
     const { styles, attributes } = usePopper(referenceElement, popperElement, popperOptions);
-    const originalOptionsRef = React.useRef(options);
-    React.useEffect(() => {
-        // Keep track of all items including selected ones
-        const allItems = new Map();
-        // Add items from current options
-        options.forEach((group) => {
-            group.items.forEach((item) => {
-                allItems.set(item.value, item);
-            });
-        });
-        // Add selected items that might not be in current options
-        if (multi && Array.isArray(value)) {
-            const selectedItems = originalOptionsRef.current
-                .flatMap((group) => group.items)
-                .filter((item) => value.includes(item.value));
-            selectedItems.forEach((item) => {
-                allItems.set(item.value, item);
-            });
-        }
-        // Update originalOptionsRef with all items
-        originalOptionsRef.current = [
-            {
-                items: Array.from(allItems.values()),
-            },
-        ];
-    }, [options, value, multi]);
     const selectedItems = React.useMemo(() => {
         const allItems = options.flatMap((group) => group.items);
         if (multi) {
-            return allItems.filter((item) => value.includes(item.value));
+            const selectedArray = Array.isArray(value) ? value : [];
+            return allItems.filter((item) => selectedArray.includes(item.value));
         }
         else {
             const found = allItems.find((item) => item.value === value);
             return found ? [found] : [];
         }
     }, [value, multi, options]);
-    const computedDisplayValue = () => {
+    const computedDisplayValue = React.useMemo(() => {
         if (multi) {
-            const count = value.length;
+            const selectedArray = Array.isArray(value) ? value : [];
+            const count = selectedArray.length;
             if (count === 0) {
                 return "";
             }
@@ -73709,17 +73685,18 @@ const FISSelect = React.forwardRef(({ className, style, size = "md", options, va
                 : `Selected ${count.toString().padStart(2, "0")} option${count !== 1 ? "s" : ""}`;
         }
         else {
-            if (!selectedItems[0])
+            const firstItem = selectedItems[0];
+            if (!firstItem)
                 return "";
-            return (displayValue?.(selectedItems[0]) || selectedItems[0].label);
+            return displayValue?.(firstItem) || firstItem.label;
         }
-    };
+    }, [multi, value, multiDisplayText, selectedItems, displayValue]);
     const handleToggle = React.useCallback(() => {
         if (!disabled)
             setIsOpen((prev) => !prev);
     }, [disabled]);
     const handleOptionRemove = React.useCallback((option) => {
-        if (multi) {
+        if (multi && Array.isArray(value)) {
             const newValues = value.filter((v) => v !== option.value);
             onChange(newValues);
         }
@@ -73731,13 +73708,15 @@ const FISSelect = React.forwardRef(({ className, style, size = "md", options, va
         else {
             if (values.length > 0) {
                 onChange(values[0]);
-                setIsOpen(false);
+                // Delay closing to ensure react-hook-form processes the change first
+                setTimeout(() => setIsOpen(false), 0);
             }
         }
     }, [multi, onChange]);
     const handleMenuClick = React.useCallback(() => {
         if (!multi) {
-            setIsOpen(false);
+            // Delay closing to ensure react-hook-form processes the change first
+            setTimeout(() => setIsOpen(false), 0);
         }
     }, [multi]);
     const menuProps = React.useMemo(() => ({
@@ -73747,8 +73726,10 @@ const FISSelect = React.forwardRef(({ className, style, size = "md", options, va
         multi,
         size: isMenuSize(size) ? size : "md",
         selectedValues: multi
-            ? value
-            : value
+            ? Array.isArray(value)
+                ? value
+                : []
+            : value !== undefined && value !== null
                 ? [value]
                 : [],
         onChangeSelected: handleMenuChange,
@@ -73772,18 +73753,25 @@ const FISSelect = React.forwardRef(({ className, style, size = "md", options, va
         restProps,
     ]);
     React.useEffect(() => {
+        if (!isOpen)
+            return;
         const handleClickOutside = (event) => {
+            const target = event.target;
             if (referenceElement &&
-                !referenceElement.contains(event.target) &&
+                !referenceElement.contains(target) &&
                 popperElement &&
-                !popperElement.contains(event.target)) {
+                !popperElement.contains(target)) {
                 setIsOpen(false);
             }
         };
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [referenceElement, popperElement]);
-    return (jsxRuntime.jsxs(DivWrapperSC$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, "$hasValue": !!value, children: jsxRuntime.jsx(FISSelectItem, { ...restProps, ref: ref, size: size, placeholder: placeholder, iconSuffix: isOpen ? jsxRuntime.jsx(ArrowUpIcon, {}) : jsxRuntime.jsx(ArrowDownIcon, {}), value: computedDisplayValue(), disabled: disabled, activeDropdown: isOpen, negative: negative }) }), message && (jsxRuntime.jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsxRuntime.jsx(SelectedTagsWrapper, { children: jsxRuntime.jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsxRuntime.jsx(Portal, { portal: portal, children: jsxRuntime.jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
+    }, [isOpen, referenceElement, popperElement]);
+    return (jsxRuntime.jsxs(DivWrapperSC$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsxs(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, "$hasValue": !!value, children: [jsxRuntime.jsx("input", { ...restProps, ref: ref, type: "hidden", value: multi
+                            ? Array.isArray(value)
+                                ? value.join(",")
+                                : ""
+                            : (value ?? "") }), jsxRuntime.jsx(FISSelectItem, { size: size, placeholder: placeholder, iconSuffix: isOpen ? jsxRuntime.jsx(ArrowUpIcon, {}) : jsxRuntime.jsx(ArrowDownIcon, {}), value: computedDisplayValue, disabled: disabled, activeDropdown: isOpen, negative: negative, readOnly: true })] }), message && (jsxRuntime.jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && Array.isArray(value) && value.length > 0 && (jsxRuntime.jsx(SelectedTagsWrapper, { children: jsxRuntime.jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsxRuntime.jsx(Portal, { portal: portal, children: jsxRuntime.jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
                         ...styles.popper,
                         width: referenceElement?.offsetWidth,
                         zIndex: 9999,