@geneui/components 3.0.0-next-a255969-03032026 → 3.0.0-next-e1bd79a-05032026

package/TextField.js

@@ -65,26 +65,33 @@ var SvgEyeOff = function SvgEyeOff(_ref) {
 var css_248z = ".textField{align-items:flex-start;display:flex;flex-direction:column;gap:var(--guit-ref-spacing-3xsmall)}.textField__wrapper{align-items:center;border-color:var(--guit-sem-color-border-neutral-2);border-style:var(--guit-ref-border-style-solid);border-width:var(--guit-ref-border-width-thin);display:flex;overflow:hidden;width:100%}.textField__wrapper_size_large .textField__input,.textField__wrapper_size_medium .textField__input{font-family:var(--guit-sem-font-body-medium-default-medium-font-family);font-size:var(--guit-sem-font-body-medium-default-medium-font-size);font-weight:var(--guit-sem-font-body-medium-default-medium-font-weight);line-height:var(--guit-sem-font-body-medium-default-medium-line-height)}.textField__wrapper_size_large{border-radius:var(--guit-ref-radius-2xsmall);gap:var(--guit-ref-spacing-xsmall);height:var(--guit-sem-dimension-height-large)}.textField__wrapper_size_large:not(.textField__wrapper_iconBefore,.textField__wrapper_size_large.textField__wrapper_iconAfter,.textField__wrapper_size_large.textField__wrapper_withIcons) .textField__input{padding:var(--guit-ref-spacing-small) var(--guit-ref-spacing-large)}.textField__wrapper_size_large.textField__wrapper_iconBefore{-webkit-padding-start:var(--guit-ref-spacing-medium);padding-inline-start:var(--guit-ref-spacing-medium)}.textField__wrapper_size_large.textField__wrapper_iconBefore .textField__input{-webkit-padding-end:var(--guit-ref-spacing-large);padding-block:var(--guit-ref-spacing-small);padding-inline-end:var(--guit-ref-spacing-large)}.textField__wrapper_size_large.textField__wrapper_iconAfter{-webkit-padding-end:var(--guit-ref-spacing-medium);padding-inline-end:var(--guit-ref-spacing-medium)}.textField__wrapper_size_large.textField__wrapper_iconAfter .textField__input{-webkit-padding-start:var(--guit-ref-spacing-large);padding-block:var(--guit-ref-spacing-xsmall);padding-inline-start:var(--guit-ref-spacing-large)}.textField__wrapper_size_large.textField__wrapper_withIcons{padding-inline:var(--guit-ref-spacing-medium)}.textField__wrapper_size_large.textField__wrapper_withIcons .textField__input{padding-block:var(--guit-ref-spacing-xsmall)}.textField__wrapper_size_medium{border-radius:var(--guit-ref-radius-3xsmall);gap:var(--guit-ref-spacing-xsmall);height:var(--guit-sem-dimension-height-medium)}.textField__wrapper_size_medium:not(.textField__wrapper_iconBefore,.textField__wrapper_size_medium.textField__wrapper_iconAfter,.textField__wrapper_size_medium.textField__wrapper_withIcons) .textField__input{padding:var(--guit-ref-spacing-2xsmall) var(--guit-ref-spacing-medium)}.textField__wrapper_size_medium.textField__wrapper_iconBefore{-webkit-padding-start:var(--guit-ref-spacing-xsmall);padding-inline-start:var(--guit-ref-spacing-xsmall)}.textField__wrapper_size_medium.textField__wrapper_iconBefore .textField__input{-webkit-padding-end:var(--guit-ref-spacing-medium);padding-block:var(--guit-ref-spacing-2xsmall);padding-inline-end:var(--guit-ref-spacing-medium)}.textField__wrapper_size_medium.textField__wrapper_iconAfter{-webkit-padding-end:var(--guit-ref-spacing-xsmall);padding-inline-end:var(--guit-ref-spacing-xsmall)}.textField__wrapper_size_medium.textField__wrapper_iconAfter .textField__input{-webkit-padding-start:var(--guit-ref-spacing-medium);padding-block:var(--guit-ref-spacing-3xsmall);padding-inline-start:var(--guit-ref-spacing-medium)}.textField__wrapper_size_medium.textField__wrapper_withIcons{padding-inline:var(--guit-ref-spacing-xsmall)}.textField__wrapper_size_medium.textField__wrapper_withIcons .textField__input{padding-block:var(--guit-ref-spacing-3xsmall)}.textField__wrapper_size_small{border-radius:var(--guit-ref-radius-3xsmall);gap:var(--guit-ref-spacing-2xsmall);height:var(--guit-sem-dimension-height-small)}.textField__wrapper_size_small:not(.textField__wrapper_iconBefore,.textField__wrapper_size_small.textField__wrapper_iconAfter,.textField__wrapper_size_small.textField__wrapper_withIcons) .textField__input{padding:var(--guit-ref-radius-3xsmall) var(--guit-ref-spacing-medium)}.textField__wrapper_size_small.textField__wrapper_iconBefore{-webkit-padding-start:var(--guit-ref-spacing-xsmall);padding-inline-start:var(--guit-ref-spacing-xsmall)}.textField__wrapper_size_small.textField__wrapper_iconBefore .textField__input{-webkit-padding-end:var(--guit-ref-spacing-medium);padding-block:var(--guit-ref-radius-3xsmall);padding-inline-end:var(--guit-ref-spacing-medium)}.textField__wrapper_size_small.textField__wrapper_iconAfter{-webkit-padding-end:var(--guit-ref-spacing-xsmall);padding-inline-end:var(--guit-ref-spacing-xsmall)}.textField__wrapper_size_small.textField__wrapper_iconAfter .textField__input{-webkit-padding-start:var(--guit-ref-spacing-medium);padding-block:var(--guit-ref-spacing-4xsmall);padding-inline-start:var(--guit-ref-spacing-medium)}.textField__wrapper_size_small.textField__wrapper_withIcons{padding-inline:var(--guit-ref-spacing-xsmall)}.textField__wrapper_size_small.textField__wrapper_withIcons .textField__input{padding-block:var(--guit-ref-spacing-4xsmall)}.textField__wrapper_size_small .textField__input{font-family:var(--guit-sem-font-caption-large-medium-font-family);font-size:var(--guit-sem-font-caption-large-medium-font-size);font-weight:var(--guit-sem-font-caption-large-medium-font-weight);letter-spacing:var(--guit-sem-font-caption-large-medium-letter-spacing);line-height:var(--guit-sem-font-caption-large-medium-line-height)}.textField__wrapper_readOnly{background-color:var(--guit-sem-color-background-neutral-3);border-color:#0000}.textField__wrapper_error{border-color:var(--guit-sem-color-border-error)}.textField__wrapper_error .textField__input,.textField__wrapper_warning .textField__input{color:var(--guit-sem-color-foreground-neutral-2)}.textField__wrapper_disabled{border-color:var(--guit-sem-color-border-disabled-1);pointer-events:none;-webkit-user-select:none;user-select:none}.textField__wrapper_disabled .textField__icon,.textField__wrapper_disabled .textField__input{color:var(--guit-sem-color-foreground-disabled)}.textField__wrapper:hover{background-color:var(--guit-sem-color-background-neutral-1-hover)}.textField__wrapper:not(.textField__wrapper.textField__wrapper_disabled):focus-within{outline:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-focus);outline-offset:var(--guit-ref-border-width-thin)}.textField__wrapper:not(.textField__wrapper.textField__wrapper_disabled):focus-within .textField__input{color:var(--guit-sem-color-foreground-neutral-2)}.textField__icon{align-items:center;color:var(--guit-sem-color-foreground-neutral-1);display:flex;flex:0 0 auto;justify-content:center}.textField__input{background-color:initial;border:none;color:var(--guit-sem-color-foreground-neutral-2);height:100%;outline:none;width:100%}.textField__input::placeholder{color:var(--guit-sem-color-foreground-neutral-1)}.textField__actions{align-items:center;display:flex;flex:0 0 auto;gap:var(--guit-ref-spacing-3xsmall)}.textField__info{align-items:center;display:flex;justify-content:space-between;width:100%}.textField__characterLimit{-webkit-margin-start:auto;color:var(--guit-sem-color-foreground-neutral-2);margin-inline-start:auto;white-space:nowrap}.textField__characterLimit_size_medium{font-size:var(--guit-sem-font-body-medium-default-medium-font-size)}.textField__characterLimit_size_small{font-size:var(--guit-sem-font-caption-large-medium-font-size)}.textField__characterLimit_disabled{color:var(--guit-sem-color-foreground-disabled)}";
 styleInject(css_248z);
 
-// Size mapping objects for Label and HelperText components
-const labelSizeMap = {
+// Size mapping objects for Label, Button, IconBefore/IconAfter and HelperText components
+const textSizeMap = {
     large: "medium",
     medium: "medium",
     small: "small"
 };
-const helperTextSizeMap = {
-    large: "medium",
-    medium: "medium",
-    small: "small"
+const labelSizeMap = textSizeMap;
+const helperTextSizeMap = textSizeMap;
+const iconSizeMap = {
+    large: 24,
+    medium: 24,
+    small: 20
 };
+const actionButtonSizeMap = {
+    large: "small",
+    medium: "small",
+    small: "smallNudge"
+};
+
 /**
  * Text field is an input element in a user interface where users can enter and edit text. Text fields are commonly used in forms for collecting user data such as names, email addresses, and messages.
  */
-const TextField = forwardRef(({ id, name, type = "text", size = "large", defaultValue, value, placeholder, IconBefore, onChange, onFocus, onBlur, readOnly, disabled, required, label, infoText, clearable, characterLimit, className, autoComplete = "on", autoFocus, helperText, status = "rest", onClear, inputMode = "text" }, ref) => {
+const TextField = forwardRef(({ id, name, type = "text", size = "medium", defaultValue, value, placeholder, IconBefore, IconAfter, onChange, onFocus, onBlur, readOnly, disabled, required, label, infoText, clearable, characterLimit, className, autoComplete = "on", autoFocus, helperText, status = "rest", onClear, inputMode = "text" }, ref) => {
     const isControlled = value !== undefined;
     const inputRef = useRef(null);
     const [internalValue, setInternalValue] = useState("");
     const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-    const [paddingClassesForIcon, setPaddingClassesForIcon] = useState("");
     const inputValue = isControlled ? value.toString() : internalValue;
     const generatedId = useMemo(() => id || `default-id-${nanoid()}`, [id]);
     const labelSize = labelSizeMap[size] || "medium";
@@ -124,39 +131,34 @@ const TextField = forwardRef(({ id, name, type = "text", size = "large", default
             return;
         setInternalValue(defaultValue.toString());
     }, []);
-    useEffect(() => {
-        const iconAfter = type === "password" || (clearable && inputValue.length > 0 && !disabled && !readOnly);
-        if (IconBefore && iconAfter) {
-            setPaddingClassesForIcon("textField__wrapper_withIcons");
-        }
-        else if (IconBefore) {
-            setPaddingClassesForIcon("textField__wrapper_iconBefore");
-        }
-        else if (iconAfter) {
-            setPaddingClassesForIcon("textField__wrapper_iconAfter");
-        }
-    }, [IconBefore, type, clearable, inputValue, disabled, readOnly]);
     const isClearable = clearable && inputValue.length > 0 && !disabled && !readOnly;
     const isPassword = type === "password" && inputValue.length > 0 && !readOnly && !disabled;
+    const iconAfter = isPassword || isClearable || IconAfter;
     const inputConditionalProps = {
         placeholder,
         autoFocus,
         inputMode: type === "number" ? "numeric" : inputMode,
         type: isPasswordVisible || type === "number" ? "text" : type
     };
+    const paddedClassesForIcon = {
+        textField__wrapper_readOnly: readOnly && !disabled,
+        textField__wrapper_disabled: disabled,
+        textField__wrapper_error: status === "error",
+        textField__wrapper_withIcons: IconBefore && iconAfter,
+        textField__wrapper_iconBefore: IconBefore && !iconAfter,
+        textField__wrapper_iconAfter: iconAfter && !IconBefore
+    };
     return (React__default.createElement("div", { className: classNames("textField", className) },
         React__default.createElement(Label, { text: label, required: required, className: "textField__label", disabled: disabled, infoText: infoText, readOnly: readOnly, labelFor: generatedId, size: labelSize }),
-        React__default.createElement("div", { className: classNames(`textField__wrapper textField__wrapper_size_${size}`, paddingClassesForIcon, {
-                textField__wrapper_readOnly: readOnly && !disabled,
-                textField__wrapper_disabled: disabled,
-                textField__wrapper_error: status === "error"
-            }) },
+        React__default.createElement("div", { className: classNames(`textField__wrapper textField__wrapper_size_${size}`, paddedClassesForIcon) },
             IconBefore && (React__default.createElement("span", { className: "textField__icon" },
-                React__default.createElement(IconBefore, { size: size === "small" ? 20 : 24 }))),
+                React__default.createElement(IconBefore, { size: iconSizeMap[size] }))),
             React__default.createElement("input", Object.assign({ id: generatedId, autoComplete: autoComplete, name: name || type, ref: inputRef, className: "textField__input", required: required, disabled: disabled, readOnly: readOnly, value: inputValue, onChange: handleChange, onBlur: onBlur, onFocus: onInputFocus, "aria-invalid": status === "error", "aria-required": required }, inputConditionalProps)),
             (isClearable || isPassword) && (React__default.createElement("span", { className: "textField__actions" },
-                isClearable && (React__default.createElement(Button, { Icon: SvgX, appearance: "secondary", size: size === "small" ? "smallNudge" : "small", layout: "text", disabled: disabled, onClick: handleClear })),
-                isPassword && (React__default.createElement(Button, { Icon: isPasswordVisible ? SvgEye : SvgEyeOff, appearance: "secondary", size: size === "small" ? "smallNudge" : "small", layout: "text", disabled: disabled, onClick: showPasswordToggle }))))),
+                isClearable && (React__default.createElement(Button, { Icon: SvgX, appearance: "secondary", size: actionButtonSizeMap[size], layout: "text", disabled: disabled, onClick: handleClear })),
+                isPassword && (React__default.createElement(Button, { Icon: isPasswordVisible ? SvgEye : SvgEyeOff, appearance: "secondary", size: actionButtonSizeMap[size], layout: "text", disabled: disabled, onClick: showPasswordToggle })))),
+            IconAfter && (React__default.createElement("span", { className: "textField__icon" },
+                React__default.createElement(IconAfter, { size: iconSizeMap[size] })))),
         (helperText || characterLimit) && (React__default.createElement("div", { className: "textField__info" },
             helperText && (React__default.createElement(HelperText, { text: helperText, disabled: disabled, status: status, size: helperTextSize })),
             characterLimit && (React__default.createElement(Text, { as: "span", className: classNames(`textField__characterLimit textField__characterLimit_size_${helperTextSize}`, {

package/components/molecules/TextField/TextField.d.ts

@@ -94,9 +94,15 @@ interface ITextFieldProps {
      */
     onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     /**
-     * The `IconBefore` prop accepts a React Functional Component that will be displayed alongside the `TextField`.
+     * Icon component rendered before the TextField content.
+     * Must be a React component that accepts this library's `IconProps`.
      */
     IconBefore?: FC<IconProps>;
+    /**
+     * Icon component rendered after the TextField content.
+     * Must be a React component that accepts this library's `IconProps`.
+     */
+    IconAfter?: FC<IconProps>;
     /**
      * When `true`, shows a `clear button` to reset the `input` value.
      * default value is `false`

package/components/molecules/TextField/constants.d.ts

@@ -0,0 +1,21 @@
+declare const labelSizeMap: {
+    readonly large: "medium";
+    readonly medium: "medium";
+    readonly small: "small";
+};
+declare const helperTextSizeMap: {
+    readonly large: "medium";
+    readonly medium: "medium";
+    readonly small: "small";
+};
+declare const iconSizeMap: {
+    readonly large: 24;
+    readonly medium: 24;
+    readonly small: 20;
+};
+declare const actionButtonSizeMap: {
+    readonly large: "small";
+    readonly medium: "small";
+    readonly small: "smallNudge";
+};
+export { labelSizeMap, helperTextSizeMap, iconSizeMap, actionButtonSizeMap };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@geneui/components",
     "description": "The Gene UI components library designed for BI tools",
-    "version": "3.0.0-next-a255969-03032026",
+    "version": "3.0.0-next-e1bd79a-05032026",
     "author": "SoftConstruct",
     "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
     "repository": {