fis-component 0.0.86 → 0.0.88

package/dist/cjs/index.js

@@ -64945,44 +64945,58 @@ const FISInputLabel = (props) => {
 };
 FISInputLabel.displayName = "FISInputLabel";
 
+/**
+ * A utility function to merge multiple React refs into a single callback function.
+ * This function accepts any number of refs as arguments and returns a callback function.
+ * When the returned callback function is invoked with a DOM element or null,
+ * it updates the current value of each ref accordingly.
+ *
+ * @template T - The type of the DOM element.
+ * @param {...(Ref<T> | undefined)[]} refs - The refs to be merged.
+ * @returns {(el: T | null) => void} - A callback function that updates the current value of each ref.
+ */
+function mergeRefs(...refs) {
+    return (el) => {
+        refs.forEach((ref) => {
+            if (!ref)
+                return;
+            if (typeof ref === "function") {
+                ref(el);
+            }
+            else if (typeof ref === "object" && "current" in ref) {
+                ref.current = el;
+            }
+        });
+    };
+}
+
 const FISInputText = React.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 when external ref is not provided
+    // Internal ref to access DOM element for character count
     const internalRef = React.useRef(null);
-    const inputRef = ref || internalRef;
-    const [internalValue, setInternalValue] = React.useState(rest.value || rest.defaultValue || "");
+    const [internalValue, setInternalValue] = React.useState("");
     // State to trigger re-render for character count (React Hook Form compatibility)
     const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
-    // Sync internal value with controlled value prop
-    React.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 = () => {
-        // Controlled mode: use value prop
-        if (rest.value !== undefined) {
-            return rest.value;
-        }
-        // Uncontrolled mode: use internal state, fallback to DOM value for React Hook Form
-        return internalValue ?? inputRef.current?.value ?? "";
+        return (internalRef.current?.value ??
+            rest.value ??
+            internalValue ??
+            "");
     };
     const handleChange = React.useCallback((event) => {
-        const newValue = event.target.value;
-        // Only update internal state if not controlled
+        // Update internal state for uncontrolled mode
         if (rest.value === undefined) {
-            setInternalValue(newValue);
+            setInternalValue(event.target.value);
         }
         else {
-            // Force re-render for character count when using React Hook Form
-            // This ensures character count updates even when value prop doesn't change
+            // Force re-render only for controlled mode (React Hook Form case)
             forceUpdate();
         }
         if (onChange) {
             onChange(event);
         }
-    }, [onChange, rest.value, forceUpdate]);
+    }, [onChange, rest.value]);
     const handleKeyPress = React.useCallback((event) => {
         if (!event)
             return;
@@ -64992,7 +65006,7 @@ const FISInputText = React.forwardRef((props, ref) => {
             }
         }
     }, [onEnter]);
-    return (jsxRuntime.jsxs(DivContainerSC$6, { className: className, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsx(FISInputField, { ...rest, ref: inputRef, typeSuffix: typeSuffix, sizeInput: sizeInput, iconPrefix: iconPrefix, onKeyPress: handleKeyPress, onChange: handleChange, disabled: disabled, negative: negative, maxLength: maxLength, onClickSuffix: onClickSuffix }), (message || showCount) && (jsxRuntime.jsxs(DivHintWrapperSC$1, { children: [jsxRuntime.jsx(SpanHintSC$3, { className: classNames({
+    return (jsxRuntime.jsxs(DivContainerSC$6, { className: className, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsx(FISInputField, { ...rest, ref: mergeRefs(ref, internalRef), typeSuffix: typeSuffix, sizeInput: sizeInput, iconPrefix: iconPrefix, onKeyPress: handleKeyPress, onChange: handleChange, disabled: disabled, negative: negative, maxLength: maxLength, onClickSuffix: onClickSuffix }), (message || showCount) && (jsxRuntime.jsxs(DivHintWrapperSC$1, { children: [jsxRuntime.jsx(SpanHintSC$3, { className: classNames({
                             disabled: disabled,
                             negative: negative,
                             positive: positive,
@@ -66029,13 +66043,26 @@ styled.div `
 const FISInputArea = React.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.useState("");
+    // State to trigger re-render for character count (React Hook Form compatibility)
+    const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
     const inputRef = React.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.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.useCallback((event) => {
         if (!event)
             return;
@@ -66045,28 +66072,6 @@ const FISInputArea = React.forwardRef((props, ref) => {
             }
         }
     }, [onEnter]);
-    React.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();
@@ -66107,7 +66112,7 @@ const FISInputArea = React.forwardRef((props, ref) => {
                     "input-area-lg": size === "lg",
                     "input-area-icon": iconSuffix,
                     negative,
-                }), style: { width: fixedWidth ? `${fixedWidth}px` : "auto" }, children: [jsxRuntime.jsx(TextAreaSC, { ...rest, onChange: handleChange, onKeyDown: handleKeyPress, ref: inputRef, disabled: disabled, className: classNames({
+                }), style: { width: fixedWidth ? `${fixedWidth}px` : "auto" }, children: [jsxRuntime.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,
@@ -66118,8 +66123,8 @@ const FISInputArea = React.forwardRef((props, ref) => {
                             negative,
                             positive,
                         }), children: message ? message : "" }), jsxRuntime.jsx(DivCountSC, { children: showCount && maxLength > 0 && (jsxRuntime.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";
 
@@ -71273,31 +71278,6 @@ const HiddenDatePickerSC = styled(DatePicker) `
   z-index: -1;
 `;
 
-/**
- * A utility function to merge multiple React refs into a single callback function.
- * This function accepts any number of refs as arguments and returns a callback function.
- * When the returned callback function is invoked with a DOM element or null,
- * it updates the current value of each ref accordingly.
- *
- * @template T - The type of the DOM element.
- * @param {...(Ref<T> | undefined)[]} refs - The refs to be merged.
- * @returns {(el: T | null) => void} - A callback function that updates the current value of each ref.
- */
-function mergeRefs(...refs) {
-    return (el) => {
-        refs.forEach((ref) => {
-            if (!ref)
-                return;
-            if (typeof ref === "function") {
-                ref(el);
-            }
-            else if (typeof ref === "object" && "current" in ref) {
-                ref.current = el;
-            }
-        });
-    };
-}
-
 const FISInputDate = React.forwardRef((props, ref) => {
     const { className, value, textLabel = "", iconLabel, required, message = "", disabled, negative, positive, format, onClickIconLabel, onChange, getPopupContainer, minDate, maxDate, picker = "date", allowClear = true, showToday = true, showTime = false, autoFocus = false, disabledDate, inputReadOnly = false, ...restProps } = props;
     const getDefaultFormat = (pickerMode) => {