fis-component 0.0.87 → 0.0.89

package/dist/cjs/types/src/components/Select/types.d.ts

@@ -1,13 +1,14 @@
 import { InputLabelProps } from "../Input/InputLabel";
 import { MenuProps } from "../MenuSelect/types";
 import { SelectFieldProps } from "../SelectItem";
+export interface SelectOptionItem<T = string | number> {
+    label: string;
+    description?: string;
+    value: T;
+}
 export interface SelectOption<T = string | number> {
     groupLabel?: string;
-    items: {
-        label: string;
-        description?: string;
-        value: T;
-    }[];
+    items: SelectOptionItem<T>[];
 }
 type BaseSelectProps<T extends string | number> = Partial<InputLabelProps> & Omit<MenuProps, "groups" | "multi" | "selectedValues" | "onChangeSelected" | "onClickMenu" | "size" | "placeholder"> & Omit<SelectFieldProps, "value" | "onChange"> & {
     options: SelectOption<T>[];
@@ -25,13 +26,13 @@ export type SingleSelectProps<T extends string | number> = BaseSelectProps<T> &
     multi?: false;
     value: T;
     onChange: (value: T) => void;
-    displayValue?: (value: SelectOption<T>) => string;
+    displayValue?: (item: SelectOptionItem<T>) => string;
 };
 export type MultiSelectProps<T extends string | number> = BaseSelectProps<T> & {
     multi: true;
     value: T[];
     onChange: (value: T[]) => void;
-    displayValue?: (value: SelectOption<T>[]) => string;
+    displayValue?: (items: SelectOptionItem<T>[]) => string;
 };
 export type SelectProps<T extends string | number> = SingleSelectProps<T> | MultiSelectProps<T>;
 export {};

package/dist/esm/index.js

@@ -64954,38 +64954,23 @@ const FISInputText = forwardRef((props, ref) => {
     const { className, typeSuffix, textLabel = "", iconLabel, required, iconPrefix, sizeInput, showCount, message, negative, positive, maxLength = 500, disabled, onChange, onEnter, onKeyDown, onClickIconLabel, onClickSuffix, ...rest } = props;
     // Internal ref to access DOM element for character count
     const internalRef = React__default.useRef(null);
-    const [internalValue, setInternalValue] = React__default.useState(rest.value || rest.defaultValue || "");
+    const [internalValue, setInternalValue] = React__default.useState("");
     // State to trigger re-render for character count (React Hook Form compatibility)
     const [, forceUpdate] = React__default.useReducer((x) => x + 1, 0);
-    // Sync internal value with controlled value prop
-    React__default.useEffect(() => {
-        if (rest.value !== undefined) {
-            setInternalValue(rest.value);
-        }
-    }, [rest.value]);
-    // Get current value for display (controlled vs uncontrolled)
+    // Get current value for display (prioritize DOM for React Hook Form)
     const getCurrentValue = () => {
-        // Always prioritize DOM value for React Hook Form compatibility
-        const domValue = internalRef.current?.value;
-        if (domValue !== undefined) {
-            return domValue;
-        }
-        // Fallback to controlled value prop
-        if (rest.value !== undefined) {
-            return rest.value;
-        }
-        // Fallback to internal state for uncontrolled mode
-        return internalValue ?? "";
+        return (internalRef.current?.value ??
+            rest.value ??
+            internalValue ??
+            "");
     };
     const handleChange = React__default.useCallback((event) => {
-        const newValue = event.target.value;
         // Update internal state for uncontrolled mode
         if (rest.value === undefined) {
-            setInternalValue(newValue);
+            setInternalValue(event.target.value);
         }
         else {
             // Force re-render only for controlled mode (React Hook Form case)
-            // This ensures character count updates when value prop doesn't change
             forceUpdate();
         }
         if (onChange) {
@@ -66038,13 +66023,26 @@ styled.div `
 const FISInputArea = forwardRef((props, ref) => {
     const { className, required = false, textLabel = "", iconLabel, iconSuffix, disabled = false, readOnly = false, negative, message, positive, maxLength = 50, showCount, size = "md", fixedWidth, onClickIconLabel, onClickIconSuffix, onChange, onEnter, ...rest } = props;
     const [internalValue, setInternalValue] = React__default.useState("");
+    // State to trigger re-render for character count (React Hook Form compatibility)
+    const [, forceUpdate] = React__default.useReducer((x) => x + 1, 0);
     const inputRef = React__default.useRef(null);
+    // Get current value for display (prioritize DOM for React Hook Form)
+    const getCurrentValue = () => {
+        return (inputRef.current?.value ?? rest.value ?? internalValue ?? "");
+    };
     const handleChange = React__default.useCallback((event) => {
-        setInternalValue(event.target.value);
+        // Update internal state for uncontrolled mode
+        if (rest.value === undefined) {
+            setInternalValue(event.target.value);
+        }
+        else {
+            // Force re-render only for controlled mode (React Hook Form case)
+            forceUpdate();
+        }
         if (onChange) {
             onChange(event);
         }
-    }, [onChange]);
+    }, [onChange, rest.value]);
     const handleKeyPress = React__default.useCallback((event) => {
         if (!event)
             return;
@@ -66054,28 +66052,6 @@ const FISInputArea = forwardRef((props, ref) => {
             }
         }
     }, [onEnter]);
-    useImperativeHandle(ref, () => {
-        const inputElement = inputRef.current;
-        return {
-            ...inputElement,
-            focus: () => {
-                if (inputRef.current) {
-                    inputRef.current.focus();
-                }
-            },
-            blur: () => {
-                if (inputRef.current) {
-                    inputRef.current.blur();
-                }
-            },
-            clear: () => {
-                if (inputRef.current) {
-                    inputRef.current.value = "";
-                    setInternalValue("");
-                }
-            },
-        };
-    });
     const handleResize = (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -66116,7 +66092,7 @@ const FISInputArea = forwardRef((props, ref) => {
                     "input-area-lg": size === "lg",
                     "input-area-icon": iconSuffix,
                     negative,
-                }), style: { width: fixedWidth ? `${fixedWidth}px` : "auto" }, children: [jsx(TextAreaSC, { ...rest, onChange: handleChange, onKeyDown: handleKeyPress, ref: inputRef, disabled: disabled, className: classNames({
+                }), style: { width: fixedWidth ? `${fixedWidth}px` : "auto" }, children: [jsx(TextAreaSC, { ...rest, onChange: handleChange, onKeyDown: handleKeyPress, ref: mergeRefs(ref, inputRef), disabled: disabled, className: classNames({
                             negative,
                             "input-area-lg": size === "lg",
                             "input-area-icon": iconSuffix,
@@ -66127,8 +66103,8 @@ const FISInputArea = forwardRef((props, ref) => {
                             negative,
                             positive,
                         }), children: message ? message : "" }), jsx(DivCountSC, { children: showCount && maxLength > 0 && (jsxs("span", { className: classNames("text-area__count", {
-                                negative: internalValue.length > maxLength,
-                            }), children: [internalValue?.replaceAll("\n", "")?.length, "/", maxLength] })) })] })] }));
+                                negative: getCurrentValue()?.length > maxLength,
+                            }), children: [getCurrentValue()?.length, "/", maxLength] })) })] })] }));
 });
 FISInputArea.displayName = "FISInputArea";
 
@@ -73666,45 +73642,21 @@ const FISSelect = forwardRef(({ className, style, size = "md", options, value, d
         strategy: "fixed",
     }), []);
     const { styles, attributes } = usePopper(referenceElement, popperElement, popperOptions);
-    const originalOptionsRef = useRef(options);
-    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 = useMemo$1(() => {
         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 = useMemo$1(() => {
         if (multi) {
-            const count = value.length;
+            const selectedArray = Array.isArray(value) ? value : [];
+            const count = selectedArray.length;
             if (count === 0) {
                 return "";
             }
@@ -73713,17 +73665,18 @@ const FISSelect = forwardRef(({ className, style, size = "md", options, value, d
                 : `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 = useCallback(() => {
         if (!disabled)
             setIsOpen((prev) => !prev);
     }, [disabled]);
     const handleOptionRemove = useCallback((option) => {
-        if (multi) {
+        if (multi && Array.isArray(value)) {
             const newValues = value.filter((v) => v !== option.value);
             onChange(newValues);
         }
@@ -73751,8 +73704,10 @@ const FISSelect = forwardRef(({ className, style, size = "md", options, value, d
         multi,
         size: isMenuSize(size) ? size : "md",
         selectedValues: multi
-            ? value
-            : value
+            ? Array.isArray(value)
+                ? value
+                : []
+            : value !== undefined && value !== null
                 ? [value]
                 : [],
         onChangeSelected: handleMenuChange,
@@ -73776,18 +73731,21 @@ const FISSelect = forwardRef(({ className, style, size = "md", options, value, d
         restProps,
     ]);
     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 (jsxs(DivWrapperSC$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, "$hasValue": !!value, children: jsx(FISSelectItem, { ...restProps, ref: ref, size: size, placeholder: placeholder, iconSuffix: isOpen ? jsx(ArrowUpIcon, {}) : jsx(ArrowDownIcon, {}), value: computedDisplayValue(), disabled: disabled, activeDropdown: isOpen, negative: negative }) }), message && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && value.length > 0 && (jsx(SelectedTagsWrapper, { children: jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsx(Portal, { portal: portal, children: jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
+    }, [isOpen, referenceElement, popperElement]);
+    return (jsxs(DivWrapperSC$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, "$hasValue": !!value, children: jsx(FISSelectItem, { ...restProps, ref: ref, size: size, placeholder: placeholder, iconSuffix: isOpen ? jsx(ArrowUpIcon, {}) : jsx(ArrowDownIcon, {}), value: computedDisplayValue, disabled: disabled, activeDropdown: isOpen, negative: negative }) }), message && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && Array.isArray(value) && value.length > 0 && (jsx(SelectedTagsWrapper, { children: jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsx(Portal, { portal: portal, children: jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
                         ...styles.popper,
                         width: referenceElement?.offsetWidth,
                         zIndex: 9999,