funuicss 3.7.3 → 3.7.5

package/ui/input/Input.js

@@ -62,7 +62,7 @@ var pi_1 = require("react-icons/pi");
 var theme_1 = require("../theme/theme");
 var componentUtils_1 = require("../../utils/componentUtils");
 var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
-var FileUpload_1 = require("./FileUpload"); // Import the FileUpload component
+var FileUpload_1 = require("./FileUpload");
 // Status icons mapping
 var statusIcons = {
     success: react_1.default.createElement(pi_1.PiCheckCircle, null),
@@ -83,26 +83,39 @@ var generateInputClasses = function (_a) {
     var noLabelClass = hasNoLabel ? 'no_label' : '';
     return "\n    ".concat(statusClass, "\n    ").concat(roundedClass, "\n    ").concat(bgClass, "\n    ").concat(funcss || '', "\n    ").concat(flatClass, "\n    ").concat(cornerClass, "\n    ").concat(borderClass, "\n    ").concat(additionalClasses, "\n    ").concat(noPrefixClass, "\n    ").concat(noLabelClass, "\n    input\n  ").trim().replace(/\s+/g, ' ');
 };
-// Iconic Input Wrapper Component
+// Iconic Input Wrapper Component - UPDATED to match Button's pattern
 var IconicInputWrapper = function (_a) {
-    var startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, iconicBg = _a.iconicBg, funcss = _a.funcss, children = _a.children;
-    var effectiveStartIcon = prefix !== undefined ? prefix : startIcon;
-    var effectiveEndIcon = suffix !== undefined ? suffix : endIcon;
-    if (!effectiveStartIcon && !effectiveEndIcon) {
+    var startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, iconicBg = _a.iconicBg, funcss = _a.funcss, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, children = _a.children;
+    // Match Button's pattern exactly - use proper priority
+    var effectiveStartIcon = startIcon !== undefined ? startIcon : prefix;
+    var effectiveEndIcon = endIcon !== undefined ? endIcon : suffix;
+    // Determine which icons to show - MATCH BUTTON'S PATTERN EXACTLY
+    var showPrefix = effectiveStartIcon !== undefined && effectiveStartIcon !== null;
+    var showSuffix = effectiveEndIcon !== undefined && effectiveEndIcon !== null;
+    if (!showPrefix && !showSuffix) {
         return react_1.default.createElement(react_1.default.Fragment, null, children);
     }
-    return (react_1.default.createElement("div", { className: "icon-container ".concat(effectiveStartIcon ? 'has-left-icon' : '', " ").concat(funcss || '') },
-        effectiveStartIcon && (react_1.default.createElement("div", { className: "leftIcon", style: {
+    // Helper function to check if element is a React element
+    function isReactElement(node) {
+        return react_1.default.isValidElement(node);
+    }
+    return (react_1.default.createElement("div", { className: "icon-container ".concat(showPrefix ? 'has-left-icon' : '', " ").concat(funcss || '') },
+        showPrefix && (react_1.default.createElement("div", { className: "leftIcon", style: {
                 backgroundColor: iconicBg || '',
                 border: iconicBg ? "0.1rem ".concat(iconicBg, " solid") : '',
-            } }, effectiveStartIcon)),
+            } }, isReactElement(startIcon) ? startIcon
+            : isReactElement(prefix) ? prefix
+                : isReactElement(effectiveStartIcon) ? effectiveStartIcon
+                    : stringPrefix ? effectiveStartIcon : '')),
         children,
-        effectiveEndIcon && (react_1.default.createElement("div", { className: "rightIcon", style: { backgroundColor: iconicBg || '' } }, effectiveEndIcon))));
+        showSuffix && (react_1.default.createElement("div", { className: "rightIcon", style: { backgroundColor: iconicBg || '' } }, isReactElement(endIcon) ? endIcon
+            : isReactElement(suffix) ? suffix
+                : isReactElement(effectiveEndIcon) ? effectiveEndIcon
+                    : stringSuffix ? effectiveEndIcon : ""))));
 };
 // Input Container with Floating Label
 var InputContainer = function (_a) {
     var label = _a.label, status = _a.status, helperText = _a.helperText, children = _a.children, isFocused = _a.isFocused, hasValue = _a.hasValue, fullWidth = _a.fullWidth, id = _a.id, startIcon = _a.startIcon, prefix = _a.prefix, _b = _a.alwaysActiveLabel, alwaysActiveLabel = _b === void 0 ? false : _b;
-    // For select inputs and date/time inputs, label is always active
     var showFloatingLabel = label && (alwaysActiveLabel || isFocused || hasValue);
     return (react_1.default.createElement("div", { className: "input-wrapper ".concat(fullWidth ? 'full-width' : '') },
         react_1.default.createElement("div", { className: "input-container-with-label" },
@@ -119,21 +132,19 @@ var TextInput = function (_a) {
     var _f = (0, react_1.useState)(value !== undefined ? String(value) : defaultValue || ''), inputValue = _f[0], setInputValue = _f[1];
     var _g = (0, react_1.useState)(null), prefixNode = _g[0], setPrefixNode = _g[1];
     var _h = (0, react_1.useState)(null), suffixNode = _h[0], setSuffixNode = _h[1];
+    var _j = (0, react_1.useState)(false), hasValidStringPrefix = _j[0], setHasValidStringPrefix = _j[1];
+    var _k = (0, react_1.useState)(false), hasValidStringSuffix = _k[0], setHasValidStringSuffix = _k[1];
     var inputRef = (0, react_1.useRef)(null);
-    // Check if this is a date/time input type for always active label
     var isDateTimeInput = ['date', 'time', 'month', 'week', 'datetime-local'].includes(type || '');
-    // Handle value changes - only update if value is truly defined (not empty string)
     (0, react_1.useEffect)(function () {
         if (value !== undefined && value !== '') {
             setInputValue(String(value));
         }
         else if (value === '') {
-            // Allow empty string to clear the input
             setInputValue('');
         }
     }, [value]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    // Create local props object including stringPrefix/stringSuffix
     var localProps = {
         status: status,
         funcss: funcss,
@@ -150,12 +161,10 @@ var TextInput = function (_a) {
         prefix: prefix,
         suffix: suffix,
         iconicBg: iconicBg,
-        stringPrefix: stringPrefix, // Include in local props
+        stringPrefix: stringPrefix,
         stringSuffix: stringSuffix,
     };
-    // Merge with config - LOCAL PROPS OVERRIDE CONFIG
     var mergedProps = mergeWithLocal(localProps).props;
-    // Extract final values - local props take precedence, but handle empty strings properly
     var final = {
         status: status !== undefined ? status : mergedProps.status,
         funcss: funcss !== undefined ? funcss : mergedProps.funcss,
@@ -172,36 +181,92 @@ var TextInput = function (_a) {
         prefix: prefix !== undefined ? prefix : mergedProps.prefix,
         suffix: suffix !== undefined ? suffix : mergedProps.suffix,
         iconicBg: iconicBg !== undefined ? iconicBg : mergedProps.iconicBg,
-        stringPrefix: stringPrefix !== undefined ? stringPrefix : mergedProps.stringPrefix, // Handle both local and config
-        stringSuffix: stringSuffix !== undefined ? stringSuffix : mergedProps.stringSuffix, // Handle both local and config
+        stringPrefix: stringPrefix !== undefined ? stringPrefix : mergedProps.stringPrefix,
+        stringSuffix: stringSuffix !== undefined ? stringSuffix : mergedProps.stringSuffix,
     };
-    // Handle stringPrefix - use final value (local or config)
+    // Handle stringPrefix - MATCH BUTTON'S PATTERN EXACTLY
     (0, react_1.useEffect)(function () {
         var effectiveStringPrefix = final.stringPrefix;
-        if (effectiveStringPrefix) {
-            (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringPrefix).then(function (node) { return setPrefixNode(node); });
-        }
-        else {
+        if (!effectiveStringPrefix || effectiveStringPrefix.trim() === '') {
             setPrefixNode(null);
+            setHasValidStringPrefix(false);
+            return;
         }
+        (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringPrefix).then(function (node) {
+            if (node) {
+                setPrefixNode(node);
+                setHasValidStringPrefix(true);
+            }
+            else {
+                setPrefixNode(null);
+                setHasValidStringPrefix(false);
+            }
+        });
     }, [final.stringPrefix]);
-    // Handle stringSuffix - use final value (local or config)
+    // Handle stringSuffix - MATCH BUTTON'S PATTERN EXACTLY
     (0, react_1.useEffect)(function () {
         var effectiveStringSuffix = final.stringSuffix;
-        if (effectiveStringSuffix) {
-            (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringSuffix).then(function (node) { return setSuffixNode(node); });
-        }
-        else {
+        if (!effectiveStringSuffix || effectiveStringSuffix.trim() === '') {
             setSuffixNode(null);
+            setHasValidStringSuffix(false);
+            return;
         }
+        (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringSuffix).then(function (node) {
+            if (node) {
+                setSuffixNode(node);
+                setHasValidStringSuffix(true);
+            }
+            else {
+                setSuffixNode(null);
+                setHasValidStringSuffix(false);
+            }
+        });
     }, [final.stringSuffix]);
     var themeVariant = (0, theme_1.useVariant)().variant;
-    // Determine effective icons: stringPrefix/stringSuffix take priority, then local, then config
-    var effectivePrefix = prefixNode || final.prefix || final.startIcon;
-    var effectiveSuffix = suffixNode || final.suffix || final.endIcon;
-    // Check if there's no start icon or prefix
+    // Determine which prefix to show with proper priority - MATCH BUTTON'S PATTERN
+    var showPrefix = react_1.default.useMemo(function () {
+        // Priority order: startIcon (local) > prefix (local) > stringPrefix (dynamic)
+        if (final.startIcon)
+            return true;
+        if (final.prefix)
+            return true;
+        if (hasValidStringPrefix && prefixNode)
+            return true;
+        return false;
+    }, [final.startIcon, final.prefix, hasValidStringPrefix, prefixNode]);
+    // Determine which suffix to show with proper priority - MATCH BUTTON'S PATTERN
+    var showSuffix = react_1.default.useMemo(function () {
+        // Priority order: endIcon (local) > suffix (local) > stringSuffix (dynamic)
+        if (final.endIcon)
+            return true;
+        if (final.suffix)
+            return true;
+        if (hasValidStringSuffix && suffixNode)
+            return true;
+        return false;
+    }, [final.endIcon, final.suffix, hasValidStringSuffix, suffixNode]);
+    // Get effective icons following Button's priority pattern
+    var effectivePrefix = react_1.default.useMemo(function () {
+        // Priority: startIcon > prefix > stringPrefix
+        if (final.startIcon)
+            return final.startIcon;
+        if (final.prefix)
+            return final.prefix;
+        if (hasValidStringPrefix)
+            return prefixNode;
+        return null;
+    }, [final.startIcon, final.prefix, hasValidStringPrefix, prefixNode]);
+    var effectiveSuffix = react_1.default.useMemo(function () {
+        // Priority: endIcon > suffix > stringSuffix
+        if (final.endIcon)
+            return final.endIcon;
+        if (final.suffix)
+            return final.suffix;
+        if (hasValidStringSuffix)
+            return suffixNode;
+        return null;
+    }, [final.endIcon, final.suffix, hasValidStringSuffix, suffixNode]);
     var hasNoPrefix = !effectivePrefix;
-    // Check if there's no label
     var hasNoLabel = !label;
     var className = generateInputClasses({
         status: final.status,
@@ -213,7 +278,7 @@ var TextInput = function (_a) {
         rightRounded: final.rightRounded,
         bordered: final.bordered,
         borderless: final.borderless,
-        hasNoPrefix: hasNoPrefix, // Add no_prefix class when no start icon/prefix
+        hasNoPrefix: hasNoPrefix,
         hasNoLabel: hasNoLabel,
     });
     var style = final.fullWidth ? { width: '100%' } : undefined;
@@ -233,32 +298,31 @@ var TextInput = function (_a) {
         if (rest.onBlur)
             rest.onBlur(e);
     };
-    // Show placeholder only when label is active (focused or has value)
     var showPlaceholder = placeholder && label && (isFocused || !!inputValue);
     var inputElement = (react_1.default.createElement("input", __assign({ ref: inputRef, id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, defaultValue: defaultValue, type: type, placeholder: showPlaceholder ? placeholder : (!label ? placeholder : ''), style: style, value: inputValue }, rest)));
-    var wrappedInput = (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: final.iconicBg, funcss: final.funcss }, inputElement));
+    // Only use iconic wrapper when we have icons, matching Button's pattern
+    var wrappedInput = showPrefix || showSuffix ? (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: final.iconicBg, funcss: final.funcss, stringPrefix: stringPrefix, stringSuffix: stringSuffix }, inputElement)) : (inputElement);
     return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: !!inputValue, fullWidth: final.fullWidth, id: id, alwaysActiveLabel: isDateTimeInput }, wrappedInput));
 };
 exports.TextInput = TextInput;
-// Select Component
+// Select Component - UPDATED to match pattern
 var SelectInput = function (_a) {
     var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, _b = _a.options, options = _b === void 0 ? [] : _b, label = _a.label, helperText = _a.helperText, _c = _a.variant, variant = _c === void 0 ? '' : _c, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "options", "label", "helperText", "variant"]);
     var _d = (0, react_1.useState)(false), isFocused = _d[0], setIsFocused = _d[1];
     var _e = (0, react_1.useState)(value !== undefined ? String(value) : defaultValue || ''), selectValue = _e[0], setSelectValue = _e[1];
     var _f = (0, react_1.useState)(null), prefixNode = _f[0], setPrefixNode = _f[1];
     var _g = (0, react_1.useState)(null), suffixNode = _g[0], setSuffixNode = _g[1];
-    // Handle value changes - only update if value is truly defined (not empty string)
+    var _h = (0, react_1.useState)(false), hasValidStringPrefix = _h[0], setHasValidStringPrefix = _h[1];
+    var _j = (0, react_1.useState)(false), hasValidStringSuffix = _j[0], setHasValidStringSuffix = _j[1];
     (0, react_1.useEffect)(function () {
         if (value !== undefined && value !== '') {
             setSelectValue(String(value));
         }
         else if (value === '') {
-            // Allow empty string to clear the select
             setSelectValue('');
         }
     }, [value]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    // Create local props object including stringPrefix/stringSuffix
     var localProps = {
         status: status,
         funcss: funcss,
@@ -275,12 +339,10 @@ var SelectInput = function (_a) {
         prefix: prefix,
         suffix: suffix,
         iconicBg: iconicBg,
-        stringPrefix: stringPrefix, // Include in local props
+        stringPrefix: stringPrefix,
         stringSuffix: stringSuffix,
     };
-    // Merge with config - LOCAL PROPS OVERRIDE CONFIG
     var mergedProps = mergeWithLocal(localProps).props;
-    // Extract final values - local props take precedence, but handle empty strings properly
     var final = {
         status: status !== undefined ? status : mergedProps.status,
         funcss: funcss !== undefined ? funcss : mergedProps.funcss,
@@ -297,37 +359,93 @@ var SelectInput = function (_a) {
         prefix: prefix !== undefined ? prefix : mergedProps.prefix,
         suffix: suffix !== undefined ? suffix : mergedProps.suffix,
         iconicBg: iconicBg !== undefined ? iconicBg : mergedProps.iconicBg,
-        stringPrefix: stringPrefix !== undefined ? stringPrefix : mergedProps.stringPrefix, // Handle both local and config
-        stringSuffix: stringSuffix !== undefined ? stringSuffix : mergedProps.stringSuffix, // Handle both local and config
+        stringPrefix: stringPrefix !== undefined ? stringPrefix : mergedProps.stringPrefix,
+        stringSuffix: stringSuffix !== undefined ? stringSuffix : mergedProps.stringSuffix,
     };
-    // Handle stringPrefix - use final value (local or config)
+    // Handle stringPrefix - MATCH BUTTON'S PATTERN EXACTLY
     (0, react_1.useEffect)(function () {
         var effectiveStringPrefix = final.stringPrefix;
-        if (effectiveStringPrefix) {
-            (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringPrefix).then(function (node) { return setPrefixNode(node); });
-        }
-        else {
+        if (!effectiveStringPrefix || effectiveStringPrefix.trim() === '') {
             setPrefixNode(null);
+            setHasValidStringPrefix(false);
+            return;
         }
+        (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringPrefix).then(function (node) {
+            if (node) {
+                setPrefixNode(node);
+                setHasValidStringPrefix(true);
+            }
+            else {
+                setPrefixNode(null);
+                setHasValidStringPrefix(false);
+            }
+        });
     }, [final.stringPrefix]);
-    // Handle stringSuffix - use final value (local or config)
+    // Handle stringSuffix - MATCH BUTTON'S PATTERN EXACTLY
     (0, react_1.useEffect)(function () {
         var effectiveStringSuffix = final.stringSuffix;
-        if (effectiveStringSuffix) {
-            (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringSuffix).then(function (node) { return setSuffixNode(node); });
-        }
-        else {
+        if (!effectiveStringSuffix || effectiveStringSuffix.trim() === '') {
             setSuffixNode(null);
+            setHasValidStringSuffix(false);
+            return;
         }
+        (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringSuffix).then(function (node) {
+            if (node) {
+                setSuffixNode(node);
+                setHasValidStringSuffix(true);
+            }
+            else {
+                setSuffixNode(null);
+                setHasValidStringSuffix(false);
+            }
+        });
     }, [final.stringSuffix]);
     var selectHasValue = !!selectValue;
     var themeVariant = (0, theme_1.useVariant)().variant;
-    // Determine effective icons
-    var effectivePrefix = prefixNode || final.prefix || final.startIcon;
-    var effectiveSuffix = suffixNode || final.suffix || final.endIcon;
-    // Check if there's no start icon or prefix
+    // Determine which prefix to show with proper priority - MATCH BUTTON'S PATTERN
+    var showPrefix = react_1.default.useMemo(function () {
+        // Priority order: startIcon (local) > prefix (local) > stringPrefix (dynamic)
+        if (final.startIcon)
+            return true;
+        if (final.prefix)
+            return true;
+        if (hasValidStringPrefix && prefixNode)
+            return true;
+        return false;
+    }, [final.startIcon, final.prefix, hasValidStringPrefix, prefixNode]);
+    // Determine which suffix to show with proper priority - MATCH BUTTON'S PATTERN
+    var showSuffix = react_1.default.useMemo(function () {
+        // Priority order: endIcon (local) > suffix (local) > stringSuffix (dynamic)
+        if (final.endIcon)
+            return true;
+        if (final.suffix)
+            return true;
+        if (hasValidStringSuffix && suffixNode)
+            return true;
+        return false;
+    }, [final.endIcon, final.suffix, hasValidStringSuffix, suffixNode]);
+    // Get effective icons following Button's priority pattern
+    var effectivePrefix = react_1.default.useMemo(function () {
+        // Priority: startIcon > prefix > stringPrefix
+        if (final.startIcon)
+            return final.startIcon;
+        if (final.prefix)
+            return final.prefix;
+        if (hasValidStringPrefix)
+            return prefixNode;
+        return null;
+    }, [final.startIcon, final.prefix, hasValidStringPrefix, prefixNode]);
+    var effectiveSuffix = react_1.default.useMemo(function () {
+        // Priority: endIcon > suffix > stringSuffix
+        if (final.endIcon)
+            return final.endIcon;
+        if (final.suffix)
+            return final.suffix;
+        if (hasValidStringSuffix)
+            return suffixNode;
+        return null;
+    }, [final.endIcon, final.suffix, hasValidStringSuffix, suffixNode]);
     var hasNoPrefix = !effectivePrefix;
-    // Check if there's no label
     var hasNoLabel = !label;
     var className = generateInputClasses({
         status: final.status,
@@ -339,7 +457,7 @@ var SelectInput = function (_a) {
         rightRounded: final.rightRounded,
         bordered: final.bordered,
         borderless: final.borderless,
-        hasNoPrefix: hasNoPrefix, // Add no_prefix class when no start icon/prefix
+        hasNoPrefix: hasNoPrefix,
         hasNoLabel: hasNoLabel,
     });
     var style = final.fullWidth ? { width: '100%' } : undefined;
@@ -360,29 +478,29 @@ var SelectInput = function (_a) {
             rest.onBlur(e);
     };
     var selectElement = (react_1.default.createElement("select", __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, defaultValue: defaultValue, value: selectValue, style: style }, rest), options.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.text)); })));
-    var wrappedSelect = (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: final.iconicBg, funcss: final.funcss }, selectElement));
+    // Only use iconic wrapper when we have icons, matching Button's pattern
+    var wrappedSelect = showPrefix || showSuffix ? (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: final.iconicBg, funcss: final.funcss, stringPrefix: stringPrefix, stringSuffix: stringSuffix }, selectElement)) : (selectElement);
     return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: selectHasValue, fullWidth: final.fullWidth, id: id, alwaysActiveLabel: true }, wrappedSelect));
 };
 exports.SelectInput = SelectInput;
-// Textarea Component
+// Textarea Component - UPDATED to match pattern
 var TextareaInput = function (_a) {
     var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, label = _a.label, helperText = _a.helperText, _b = _a.rows, rows = _b === void 0 ? 2 : _b, _c = _a.variant, variant = _c === void 0 ? '' : _c, placeholder = _a.placeholder, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "label", "helperText", "rows", "variant", "placeholder"]);
     var _d = (0, react_1.useState)(false), isFocused = _d[0], setIsFocused = _d[1];
     var _e = (0, react_1.useState)(value !== undefined ? String(value) : defaultValue || ''), textValue = _e[0], setTextValue = _e[1];
     var _f = (0, react_1.useState)(null), prefixNode = _f[0], setPrefixNode = _f[1];
     var _g = (0, react_1.useState)(null), suffixNode = _g[0], setSuffixNode = _g[1];
-    // Handle value changes - only update if value is truly defined (not empty string)
+    var _h = (0, react_1.useState)(false), hasValidStringPrefix = _h[0], setHasValidStringPrefix = _h[1];
+    var _j = (0, react_1.useState)(false), hasValidStringSuffix = _j[0], setHasValidStringSuffix = _j[1];
     (0, react_1.useEffect)(function () {
         if (value !== undefined && value !== '') {
             setTextValue(String(value));
         }
         else if (value === '') {
-            // Allow empty string to clear the textarea
             setTextValue('');
         }
     }, [value]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    // Create local props object including stringPrefix/stringSuffix
     var localProps = {
         status: status,
         funcss: funcss,
@@ -399,12 +517,10 @@ var TextareaInput = function (_a) {
         prefix: prefix,
         suffix: suffix,
         iconicBg: iconicBg,
-        stringPrefix: stringPrefix, // Include in local props
+        stringPrefix: stringPrefix,
         stringSuffix: stringSuffix,
     };
-    // Merge with config - LOCAL PROPS OVERRIDE CONFIG
     var mergedProps = mergeWithLocal(localProps).props;
-    // Extract final values - local props take precedence, but handle empty strings properly
     var final = {
         status: status !== undefined ? status : mergedProps.status,
         funcss: funcss !== undefined ? funcss : mergedProps.funcss,
@@ -421,36 +537,92 @@ var TextareaInput = function (_a) {
         prefix: prefix !== undefined ? prefix : mergedProps.prefix,
         suffix: suffix !== undefined ? suffix : mergedProps.suffix,
         iconicBg: iconicBg !== undefined ? iconicBg : mergedProps.iconicBg,
-        stringPrefix: stringPrefix !== undefined ? stringPrefix : mergedProps.stringPrefix, // Handle both local and config
-        stringSuffix: stringSuffix !== undefined ? stringSuffix : mergedProps.stringSuffix, // Handle both local and config
+        stringPrefix: stringPrefix !== undefined ? stringPrefix : mergedProps.stringPrefix,
+        stringSuffix: stringSuffix !== undefined ? stringSuffix : mergedProps.stringSuffix,
     };
-    // Handle stringPrefix - use final value (local or config)
+    // Handle stringPrefix - MATCH BUTTON'S PATTERN EXACTLY
     (0, react_1.useEffect)(function () {
         var effectiveStringPrefix = final.stringPrefix;
-        if (effectiveStringPrefix) {
-            (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringPrefix).then(function (node) { return setPrefixNode(node); });
-        }
-        else {
+        if (!effectiveStringPrefix || effectiveStringPrefix.trim() === '') {
             setPrefixNode(null);
+            setHasValidStringPrefix(false);
+            return;
         }
+        (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringPrefix).then(function (node) {
+            if (node) {
+                setPrefixNode(node);
+                setHasValidStringPrefix(true);
+            }
+            else {
+                setPrefixNode(null);
+                setHasValidStringPrefix(false);
+            }
+        });
     }, [final.stringPrefix]);
-    // Handle stringSuffix - use final value (local or config)
+    // Handle stringSuffix - MATCH BUTTON'S PATTERN EXACTLY
     (0, react_1.useEffect)(function () {
         var effectiveStringSuffix = final.stringSuffix;
-        if (effectiveStringSuffix) {
-            (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringSuffix).then(function (node) { return setSuffixNode(node); });
-        }
-        else {
+        if (!effectiveStringSuffix || effectiveStringSuffix.trim() === '') {
             setSuffixNode(null);
+            setHasValidStringSuffix(false);
+            return;
         }
+        (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringSuffix).then(function (node) {
+            if (node) {
+                setSuffixNode(node);
+                setHasValidStringSuffix(true);
+            }
+            else {
+                setSuffixNode(null);
+                setHasValidStringSuffix(false);
+            }
+        });
     }, [final.stringSuffix]);
     var themeVariant = (0, theme_1.useVariant)().variant;
-    // Determine effective icons
-    var effectivePrefix = prefixNode || final.prefix || final.startIcon;
-    var effectiveSuffix = suffixNode || final.suffix || final.endIcon;
-    // Check if there's no start icon or prefix
+    // Determine which prefix to show with proper priority - MATCH BUTTON'S PATTERN
+    var showPrefix = react_1.default.useMemo(function () {
+        // Priority order: startIcon (local) > prefix (local) > stringPrefix (dynamic)
+        if (final.startIcon)
+            return true;
+        if (final.prefix)
+            return true;
+        if (hasValidStringPrefix && prefixNode)
+            return true;
+        return false;
+    }, [final.startIcon, final.prefix, hasValidStringPrefix, prefixNode]);
+    // Determine which suffix to show with proper priority - MATCH BUTTON'S PATTERN
+    var showSuffix = react_1.default.useMemo(function () {
+        // Priority order: endIcon (local) > suffix (local) > stringSuffix (dynamic)
+        if (final.endIcon)
+            return true;
+        if (final.suffix)
+            return true;
+        if (hasValidStringSuffix && suffixNode)
+            return true;
+        return false;
+    }, [final.endIcon, final.suffix, hasValidStringSuffix, suffixNode]);
+    // Get effective icons following Button's priority pattern
+    var effectivePrefix = react_1.default.useMemo(function () {
+        // Priority: startIcon > prefix > stringPrefix
+        if (final.startIcon)
+            return final.startIcon;
+        if (final.prefix)
+            return final.prefix;
+        if (hasValidStringPrefix)
+            return prefixNode;
+        return null;
+    }, [final.startIcon, final.prefix, hasValidStringPrefix, prefixNode]);
+    var effectiveSuffix = react_1.default.useMemo(function () {
+        // Priority: endIcon > suffix > stringSuffix
+        if (final.endIcon)
+            return final.endIcon;
+        if (final.suffix)
+            return final.suffix;
+        if (hasValidStringSuffix)
+            return suffixNode;
+        return null;
+    }, [final.endIcon, final.suffix, hasValidStringSuffix, suffixNode]);
     var hasNoPrefix = !effectivePrefix;
-    // Check if there's no label
     var hasNoLabel = !label;
     var className = generateInputClasses({
         status: final.status,
@@ -462,7 +634,7 @@ var TextareaInput = function (_a) {
         rightRounded: final.rightRounded,
         bordered: final.bordered,
         borderless: final.borderless,
-        hasNoPrefix: hasNoPrefix, // Add no_prefix class when no start icon/prefix
+        hasNoPrefix: hasNoPrefix,
         hasNoLabel: hasNoLabel,
     });
     var style = final.fullWidth ? { width: '100%' } : undefined;
@@ -482,21 +654,19 @@ var TextareaInput = function (_a) {
         if (rest.onBlur)
             rest.onBlur(e);
     };
-    // Show placeholder only when label is active (focused or has value)
     var showPlaceholder = placeholder && label && (isFocused || !!textValue);
     var textareaElement = (react_1.default.createElement("textarea", __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, defaultValue: defaultValue, placeholder: showPlaceholder ? placeholder : (!label ? placeholder : ''), style: style, value: textValue, rows: rows }, rest)));
-    var wrappedTextarea = (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: final.iconicBg, funcss: final.funcss }, textareaElement));
+    // Only use iconic wrapper when we have icons, matching Button's pattern
+    var wrappedTextarea = showPrefix || showSuffix ? (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: final.iconicBg, funcss: final.funcss, stringPrefix: stringPrefix, stringSuffix: stringSuffix }, textareaElement)) : (textareaElement);
     return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: !!textValue, fullWidth: final.fullWidth, id: id }, wrappedTextarea));
 };
 exports.TextareaInput = TextareaInput;
 var Input = function (_a) {
     var select = _a.select, multiline = _a.multiline, file = _a.file, noBorder = _a.noBorder, startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, type = _a.type, _b = _a.variant, variant = _b === void 0 ? '' : _b, props = __rest(_a, ["select", "multiline", "file", "noBorder", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "type", "variant"]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    // Create local props object including stringPrefix/stringSuffix
     var localProps = __assign(__assign({}, props), { startIcon: startIcon, endIcon: endIcon, prefix: prefix, suffix: suffix, iconicBg: iconicBg, stringPrefix: stringPrefix, stringSuffix: stringSuffix, type: type });
     var mergedProps = mergeWithLocal(localProps).props;
     var inputProps = __assign(__assign(__assign({}, props), mergedProps), { variant: variant, borderless: noBorder !== undefined ? noBorder : (props.borderless !== undefined ? props.borderless : mergedProps.borderless), type: type });
-    // If type is file or file prop is true, use FileUpload component
     if (file || type === 'file') {
         return react_1.default.createElement(FileUpload_1.FileUpload, __assign({}, inputProps));
     }