@dt-dds/react-text-field 1.0.0-beta.89 → 1.0.0-beta.90

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @dt-ui/react-text-field
 
+## 1.0.0-beta.90
+
+### Minor Changes
+
+- feat: add ref to text field
+
+### Patch Changes
+
+- @dt-dds/react-spinner@1.0.0-beta.85
+
 ## 1.0.0-beta.89
 
 ### Minor Changes

package/dist/index.d.mts

@@ -1,8 +1,7 @@
 import { CustomTheme } from '@dt-dds/themes';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { BaseProps, Scale } from '@dt-dds/react-core';
 import * as react from 'react';
 import { ReactNode, ComponentPropsWithoutRef, RefObject } from 'react';
+import { BaseProps, Scale } from '@dt-dds/react-core';
 import * as _emotion_styled from '@emotion/styled';
 import * as _emotion_react from '@emotion/react';
 
@@ -28,8 +27,9 @@ interface TextFieldProps extends ComponentPropsWithoutRef<'input'>, BaseProps {
     scale?: Scale;
     backgroundFill?: TextFieldBackgroundFill;
     onResetInput?: () => void;
+    isInputFocused?: boolean;
 }
-declare const TextField: ({ dataTestId, hasError, extraPrefix, extraSuffix, label, labelIcon, isFloatingLabel, name, id, required, requiredMessage, style, children, initialValue, inputRef, message: messageProp, type, variant, scale, backgroundFill, disabled, onChange, onResetInput, ...rest }: TextFieldProps) => react_jsx_runtime.JSX.Element;
+declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLDivElement>>;
 
 interface TextFieldStyledProps {
     isFloatingLabel?: boolean;
@@ -38,6 +38,7 @@ interface TextFieldStyledProps {
 interface InputFieldStyledProps {
     isFloatingLabel: boolean;
     scale: Scale;
+    isFocused: boolean;
 }
 interface InputWrapperStyledProps {
     isFloatingLabel: boolean;

package/dist/index.d.ts

@@ -1,8 +1,7 @@
 import { CustomTheme } from '@dt-dds/themes';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { BaseProps, Scale } from '@dt-dds/react-core';
 import * as react from 'react';
 import { ReactNode, ComponentPropsWithoutRef, RefObject } from 'react';
+import { BaseProps, Scale } from '@dt-dds/react-core';
 import * as _emotion_styled from '@emotion/styled';
 import * as _emotion_react from '@emotion/react';
 
@@ -28,8 +27,9 @@ interface TextFieldProps extends ComponentPropsWithoutRef<'input'>, BaseProps {
     scale?: Scale;
     backgroundFill?: TextFieldBackgroundFill;
     onResetInput?: () => void;
+    isInputFocused?: boolean;
 }
-declare const TextField: ({ dataTestId, hasError, extraPrefix, extraSuffix, label, labelIcon, isFloatingLabel, name, id, required, requiredMessage, style, children, initialValue, inputRef, message: messageProp, type, variant, scale, backgroundFill, disabled, onChange, onResetInput, ...rest }: TextFieldProps) => react_jsx_runtime.JSX.Element;
+declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLDivElement>>;
 
 interface TextFieldStyledProps {
     isFloatingLabel?: boolean;
@@ -38,6 +38,7 @@ interface TextFieldStyledProps {
 interface InputFieldStyledProps {
     isFloatingLabel: boolean;
     scale: Scale;
+    isFocused: boolean;
 }
 interface InputWrapperStyledProps {
     isFloatingLabel: boolean;

package/dist/index.js

@@ -140,7 +140,7 @@ var InputContainerStyled = import_styled.default.div`
   `}
 `;
 var InputFieldStyled = import_styled.default.input`
-  ${({ theme, isFloatingLabel, scale }) => `
+  ${({ theme, isFloatingLabel, scale, isFocused }) => `
     ${theme.fontStyles.bodyMdRegular}
     border: 0;
     outline: 0;
@@ -168,11 +168,7 @@ var InputFieldStyled = import_styled.default.input`
     }
 
     &::placeholder {
-      color: ${isFloatingLabel ? "transparent" : theme.palette.content.medium};
-    }
-
-    &:focus::placeholder {
-      color: ${theme.palette.content.medium}; 
+      color: ${isFloatingLabel && !isFocused ? "transparent" : theme.palette.content.medium};
     }
 
     &:disabled {
@@ -293,211 +289,219 @@ var InputWrapperStyled = import_styled.default.div`
 
 // src/TextField.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var TextField = (_a) => {
-  var _b = _a, {
-    dataTestId,
-    hasError = false,
-    extraPrefix,
-    extraSuffix,
-    label,
-    labelIcon,
-    isFloatingLabel = true,
-    name,
-    id,
-    required,
-    requiredMessage,
-    style,
-    children,
-    initialValue,
-    inputRef,
-    message: messageProp = "",
-    type = "text",
-    variant = "outlined",
-    scale = "standard",
-    backgroundFill = "default",
-    disabled = false,
-    onChange = () => null,
-    onResetInput = () => null
-  } = _b, rest = __objRest(_b, [
-    "dataTestId",
-    "hasError",
-    "extraPrefix",
-    "extraSuffix",
-    "label",
-    "labelIcon",
-    "isFloatingLabel",
-    "name",
-    "id",
-    "required",
-    "requiredMessage",
-    "style",
-    "children",
-    "initialValue",
-    "inputRef",
-    "message",
-    "type",
-    "variant",
-    "scale",
-    "backgroundFill",
-    "disabled",
-    "onChange",
-    "onResetInput"
-  ]);
-  const [activeInput, setActiveInput] = (0, import_react.useState)(false);
-  const [inputValue, setInputValue] = (0, import_react.useState)("");
-  const [hasRequiredError, setHasRequiredError] = (0, import_react.useState)(false);
-  const textFieldId = id != null ? id : label.replaceAll(" ", "-").toLowerCase();
-  const testId = dataTestId != null ? dataTestId : `${label.replaceAll(" ", "-").toLowerCase()}-text-field`;
-  (0, import_react.useEffect)(() => {
-    if (!!initialValue) {
-      setInputValue(initialValue);
+var EXTRA_SUFFIX_DATA_TEST_ID = "extra-suffix";
+var TextField = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      dataTestId,
+      hasError = false,
+      extraPrefix,
+      extraSuffix,
+      label,
+      labelIcon,
+      isFloatingLabel = true,
+      name,
+      id,
+      required,
+      requiredMessage,
+      style,
+      children,
+      initialValue,
+      inputRef,
+      isInputFocused,
+      message: messageProp = "",
+      type = "text",
+      variant = "outlined",
+      scale = "standard",
+      backgroundFill = "default",
+      disabled = false,
+      onChange = () => null,
+      onResetInput = () => null
+    } = _b, rest = __objRest(_b, [
+      "dataTestId",
+      "hasError",
+      "extraPrefix",
+      "extraSuffix",
+      "label",
+      "labelIcon",
+      "isFloatingLabel",
+      "name",
+      "id",
+      "required",
+      "requiredMessage",
+      "style",
+      "children",
+      "initialValue",
+      "inputRef",
+      "isInputFocused",
+      "message",
+      "type",
+      "variant",
+      "scale",
+      "backgroundFill",
+      "disabled",
+      "onChange",
+      "onResetInput"
+    ]);
+    const [activeInput, setActiveInput] = (0, import_react.useState)(false);
+    const [inputValue, setInputValue] = (0, import_react.useState)("");
+    const [hasRequiredError, setHasRequiredError] = (0, import_react.useState)(false);
+    const textFieldId = id != null ? id : label.replaceAll(" ", "-").toLowerCase();
+    const testId = dataTestId != null ? dataTestId : `${label.replaceAll(" ", "-").toLowerCase()}-text-field`;
+    (0, import_react.useEffect)(() => {
+      if (!!initialValue) {
+        setInputValue(initialValue);
+        setHasRequiredError(false);
+      } else {
+        setInputValue("");
+      }
+    }, [initialValue]);
+    const handleChange = (event) => {
+      setInputValue(event.target.value);
       setHasRequiredError(false);
-    } else {
+      if (onChange) {
+        onChange(event);
+      }
+    };
+    const onFocus = (event) => {
+      if (!rest.readOnly) {
+        setActiveInput(true);
+      }
+      if (rest.onFocus) {
+        rest.onFocus(event);
+      }
+    };
+    const onBlur = (event) => {
+      var _a2;
+      setActiveInput(false);
+      const isEmptyOrOnlySpaces = event.currentTarget.value.trim().length === 0;
+      const isExtraSuffixClicked = ((_a2 = event.relatedTarget) == null ? void 0 : _a2.getAttribute("data-testid")) === EXTRA_SUFFIX_DATA_TEST_ID;
+      if (isEmptyOrOnlySpaces && required && !isExtraSuffixClicked) {
+        setHasRequiredError(true);
+      }
+      if (rest.onBlur) {
+        rest.onBlur(event);
+      }
+    };
+    const handleResetInput = () => {
       setInputValue("");
-    }
-  }, [initialValue]);
-  const handleChange = (event) => {
-    setInputValue(event.target.value);
-    setHasRequiredError(false);
-    if (onChange) {
-      onChange(event);
-    }
-  };
-  const onFocus = (event) => {
-    if (!rest.readOnly) {
-      setActiveInput(true);
-    }
-    if (rest.onFocus) {
-      rest.onFocus(event);
-    }
-  };
-  const onBlur = (event) => {
-    setActiveInput(false);
-    const isEmptyOrOnlySpaces = event.currentTarget.value.trim().length === 0;
-    if (isEmptyOrOnlySpaces && required) {
-      setHasRequiredError(true);
-    }
-    if (rest.onBlur) {
-      rest.onBlur(event);
-    }
-  };
-  const handleResetInput = () => {
-    setInputValue("");
-    setActiveInput(false);
-    onResetInput();
-  };
-  const handleExtraPreffixEnter = (event) => event.code === "Enter" && (extraPrefix == null ? void 0 : extraPrefix.onClick) && extraPrefix.onClick(inputValue);
-  const handleExtraSuffixEnter = (event) => event.code === "Enter" && (extraSuffix == null ? void 0 : extraSuffix.onClick) && extraSuffix.onClick(inputValue);
-  const messageColor = disabled ? "content.light" : "content.medium";
-  const showError = hasError || hasRequiredError;
-  const message = hasRequiredError ? requiredMessage != null ? requiredMessage : messageProp : messageProp;
-  const isActiveInput = activeInput || !!inputValue.trim();
-  const isSearchType = type === "search";
-  const extraPreffixOnClick = (extraPrefix == null ? void 0 : extraPrefix.onClick) ? extraPrefix.onClick : null;
-  const extraSuffixOnClick = (extraSuffix == null ? void 0 : extraSuffix.onClick) ? extraSuffix.onClick : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    TextFieldStyled,
-    {
-      "data-testid": testId,
-      hasPrefix: !!extraPrefix,
-      isFloatingLabel,
-      style,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(InputContainerStyled, { isFloatingLabel, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_react_label_field.LabelField,
-            {
-              hasError: showError,
-              htmlFor: textFieldId,
-              icon: labelIcon,
-              isActive: activeInput,
-              isCentered: !isActiveInput && isFloatingLabel,
-              isDisabled: disabled,
-              isFloating: isFloatingLabel,
-              isInputFilled: !!inputValue,
-              isRequired: required,
-              scale,
-              children: label
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            InputWrapperStyled,
+      setActiveInput(false);
+      onResetInput();
+    };
+    const handleExtraPrefixEnter = (event) => event.code === "Enter" && (extraPrefix == null ? void 0 : extraPrefix.onClick) && extraPrefix.onClick(inputValue);
+    const handleExtraSuffixEnter = (event) => event.code === "Enter" && (extraSuffix == null ? void 0 : extraSuffix.onClick) && extraSuffix.onClick(inputValue);
+    const messageColor = disabled ? "content.light" : "content.medium";
+    const showError = hasError || hasRequiredError;
+    const message = hasRequiredError ? requiredMessage != null ? requiredMessage : messageProp : messageProp;
+    const isActiveInput = isInputFocused || activeInput || !!inputValue.trim();
+    const isSearchType = type === "search";
+    const extraPrefixOnClick = (extraPrefix == null ? void 0 : extraPrefix.onClick) ? extraPrefix.onClick : null;
+    const extraSuffixOnClick = (extraSuffix == null ? void 0 : extraSuffix.onClick) ? extraSuffix.onClick : null;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      TextFieldStyled,
+      {
+        "data-testid": testId,
+        hasPrefix: !!extraPrefix,
+        isFloatingLabel,
+        style,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(InputContainerStyled, { isFloatingLabel, ref, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_react_label_field.LabelField,
+              {
+                hasError: showError,
+                htmlFor: textFieldId,
+                icon: labelIcon,
+                isActive: isActiveInput,
+                isCentered: !isActiveInput && isFloatingLabel,
+                isDisabled: disabled,
+                isFloating: isFloatingLabel,
+                isInputFilled: !!inputValue,
+                isRequired: required,
+                scale,
+                children: label
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              InputWrapperStyled,
+              {
+                backgroundFill,
+                "data-testid": `${testId}-wrapper`,
+                hasError: showError,
+                isFloatingLabel,
+                variant,
+                children: [
+                  (extraPrefix == null ? void 0 : extraPrefix.component) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    InputExtraPrefixStyled,
+                    __spreadProps(__spreadValues({
+                      "data-testid": "extra-prefix"
+                    }, !!extraPrefixOnClick && {
+                      tabIndex: 0,
+                      onClick: () => !disabled && extraPrefixOnClick(inputValue),
+                      onKeyDown: handleExtraPrefixEnter
+                    }), {
+                      children: extraPrefix.component
+                    })
+                  ) : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    InputFieldStyled,
+                    __spreadProps(__spreadValues({
+                      "data-error": showError,
+                      "data-testid": `${testId}-input`,
+                      disabled,
+                      id: textFieldId,
+                      isFloatingLabel,
+                      isFocused: isActiveInput,
+                      name: name != null ? name : textFieldId,
+                      ref: inputRef,
+                      scale,
+                      type,
+                      value: inputValue
+                    }, rest), {
+                      onBlur,
+                      onChange: handleChange,
+                      onFocus
+                    })
+                  ),
+                  isSearchType && !!inputValue ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_react_icon_button.IconButton,
+                    {
+                      dataTestId: "reset-icon",
+                      onClick: handleResetInput,
+                      style: { marginRight: 12 },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icon.Icon, { code: "close" })
+                    }
+                  ) : null,
+                  (extraSuffix == null ? void 0 : extraSuffix.component) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    InputExtraSuffixStyled,
+                    __spreadProps(__spreadValues({
+                      "data-testid": EXTRA_SUFFIX_DATA_TEST_ID
+                    }, !!extraSuffixOnClick && {
+                      tabIndex: 0,
+                      onClick: () => !disabled && extraSuffixOnClick(inputValue),
+                      onKeyDown: handleExtraSuffixEnter
+                    }), {
+                      children: extraSuffix.component
+                    })
+                  ) : null
+                ]
+              }
+            )
+          ] }),
+          message ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextFieldMessageStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_react_typography.Typography,
             {
-              backgroundFill,
-              "data-testid": `${testId}-wrapper`,
-              hasError: showError,
-              isFloatingLabel,
-              variant,
-              children: [
-                (extraPrefix == null ? void 0 : extraPrefix.component) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  InputExtraPrefixStyled,
-                  __spreadProps(__spreadValues({
-                    "data-testid": "extra-preffix"
-                  }, !!extraPreffixOnClick && {
-                    tabIndex: 0,
-                    onClick: () => extraPreffixOnClick(inputValue),
-                    onKeyDown: handleExtraPreffixEnter
-                  }), {
-                    children: extraPrefix.component
-                  })
-                ) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  InputFieldStyled,
-                  __spreadProps(__spreadValues({
-                    "data-error": showError,
-                    "data-testid": `${testId}-input`,
-                    disabled,
-                    id: textFieldId,
-                    isFloatingLabel,
-                    name: name != null ? name : textFieldId,
-                    ref: inputRef,
-                    scale,
-                    type,
-                    value: inputValue
-                  }, rest), {
-                    onBlur,
-                    onChange: handleChange,
-                    onFocus
-                  })
-                ),
-                isSearchType && !!inputValue ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_react_icon_button.IconButton,
-                  {
-                    dataTestId: "reset-icon",
-                    onClick: handleResetInput,
-                    style: { marginRight: 12 },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icon.Icon, { code: "close" })
-                  }
-                ) : null,
-                (extraSuffix == null ? void 0 : extraSuffix.component) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  InputExtraSuffixStyled,
-                  __spreadProps(__spreadValues({
-                    "data-testid": "extra-suffix"
-                  }, !!extraSuffixOnClick && {
-                    tabIndex: 0,
-                    onClick: () => extraSuffixOnClick(inputValue),
-                    onKeyDown: handleExtraSuffixEnter
-                  }), {
-                    children: extraSuffix.component
-                  })
-                ) : null
-              ]
+              color: showError ? "error.default" : messageColor,
+              fontStyles: "bodySmRegular",
+              children: message
             }
-          )
-        ] }),
-        message ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextFieldMessageStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_react_typography.Typography,
-          {
-            color: showError ? "error.default" : messageColor,
-            fontStyles: "bodySmRegular",
-            children: message
-          }
-        ) }) : null,
-        children
-      ]
-    }
-  );
-};
+          ) }) : null,
+          children
+        ]
+      }
+    );
+  }
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   InputContainerStyled,

package/dist/index.mjs

@@ -36,6 +36,7 @@ import { IconButton } from "@dt-dds/react-icon-button";
 import { LabelField } from "@dt-dds/react-label-field";
 import { Typography } from "@dt-dds/react-typography";
 import {
+  forwardRef,
   useEffect,
   useState
 } from "react";
@@ -103,7 +104,7 @@ var InputContainerStyled = styled.div`
   `}
 `;
 var InputFieldStyled = styled.input`
-  ${({ theme, isFloatingLabel, scale }) => `
+  ${({ theme, isFloatingLabel, scale, isFocused }) => `
     ${theme.fontStyles.bodyMdRegular}
     border: 0;
     outline: 0;
@@ -131,11 +132,7 @@ var InputFieldStyled = styled.input`
     }
 
     &::placeholder {
-      color: ${isFloatingLabel ? "transparent" : theme.palette.content.medium};
-    }
-
-    &:focus::placeholder {
-      color: ${theme.palette.content.medium}; 
+      color: ${isFloatingLabel && !isFocused ? "transparent" : theme.palette.content.medium};
     }
 
     &:disabled {
@@ -256,211 +253,219 @@ var InputWrapperStyled = styled.div`
 
 // src/TextField.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var TextField = (_a) => {
-  var _b = _a, {
-    dataTestId,
-    hasError = false,
-    extraPrefix,
-    extraSuffix,
-    label,
-    labelIcon,
-    isFloatingLabel = true,
-    name,
-    id,
-    required,
-    requiredMessage,
-    style,
-    children,
-    initialValue,
-    inputRef,
-    message: messageProp = "",
-    type = "text",
-    variant = "outlined",
-    scale = "standard",
-    backgroundFill = "default",
-    disabled = false,
-    onChange = () => null,
-    onResetInput = () => null
-  } = _b, rest = __objRest(_b, [
-    "dataTestId",
-    "hasError",
-    "extraPrefix",
-    "extraSuffix",
-    "label",
-    "labelIcon",
-    "isFloatingLabel",
-    "name",
-    "id",
-    "required",
-    "requiredMessage",
-    "style",
-    "children",
-    "initialValue",
-    "inputRef",
-    "message",
-    "type",
-    "variant",
-    "scale",
-    "backgroundFill",
-    "disabled",
-    "onChange",
-    "onResetInput"
-  ]);
-  const [activeInput, setActiveInput] = useState(false);
-  const [inputValue, setInputValue] = useState("");
-  const [hasRequiredError, setHasRequiredError] = useState(false);
-  const textFieldId = id != null ? id : label.replaceAll(" ", "-").toLowerCase();
-  const testId = dataTestId != null ? dataTestId : `${label.replaceAll(" ", "-").toLowerCase()}-text-field`;
-  useEffect(() => {
-    if (!!initialValue) {
-      setInputValue(initialValue);
+var EXTRA_SUFFIX_DATA_TEST_ID = "extra-suffix";
+var TextField = forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      dataTestId,
+      hasError = false,
+      extraPrefix,
+      extraSuffix,
+      label,
+      labelIcon,
+      isFloatingLabel = true,
+      name,
+      id,
+      required,
+      requiredMessage,
+      style,
+      children,
+      initialValue,
+      inputRef,
+      isInputFocused,
+      message: messageProp = "",
+      type = "text",
+      variant = "outlined",
+      scale = "standard",
+      backgroundFill = "default",
+      disabled = false,
+      onChange = () => null,
+      onResetInput = () => null
+    } = _b, rest = __objRest(_b, [
+      "dataTestId",
+      "hasError",
+      "extraPrefix",
+      "extraSuffix",
+      "label",
+      "labelIcon",
+      "isFloatingLabel",
+      "name",
+      "id",
+      "required",
+      "requiredMessage",
+      "style",
+      "children",
+      "initialValue",
+      "inputRef",
+      "isInputFocused",
+      "message",
+      "type",
+      "variant",
+      "scale",
+      "backgroundFill",
+      "disabled",
+      "onChange",
+      "onResetInput"
+    ]);
+    const [activeInput, setActiveInput] = useState(false);
+    const [inputValue, setInputValue] = useState("");
+    const [hasRequiredError, setHasRequiredError] = useState(false);
+    const textFieldId = id != null ? id : label.replaceAll(" ", "-").toLowerCase();
+    const testId = dataTestId != null ? dataTestId : `${label.replaceAll(" ", "-").toLowerCase()}-text-field`;
+    useEffect(() => {
+      if (!!initialValue) {
+        setInputValue(initialValue);
+        setHasRequiredError(false);
+      } else {
+        setInputValue("");
+      }
+    }, [initialValue]);
+    const handleChange = (event) => {
+      setInputValue(event.target.value);
       setHasRequiredError(false);
-    } else {
+      if (onChange) {
+        onChange(event);
+      }
+    };
+    const onFocus = (event) => {
+      if (!rest.readOnly) {
+        setActiveInput(true);
+      }
+      if (rest.onFocus) {
+        rest.onFocus(event);
+      }
+    };
+    const onBlur = (event) => {
+      var _a2;
+      setActiveInput(false);
+      const isEmptyOrOnlySpaces = event.currentTarget.value.trim().length === 0;
+      const isExtraSuffixClicked = ((_a2 = event.relatedTarget) == null ? void 0 : _a2.getAttribute("data-testid")) === EXTRA_SUFFIX_DATA_TEST_ID;
+      if (isEmptyOrOnlySpaces && required && !isExtraSuffixClicked) {
+        setHasRequiredError(true);
+      }
+      if (rest.onBlur) {
+        rest.onBlur(event);
+      }
+    };
+    const handleResetInput = () => {
       setInputValue("");
-    }
-  }, [initialValue]);
-  const handleChange = (event) => {
-    setInputValue(event.target.value);
-    setHasRequiredError(false);
-    if (onChange) {
-      onChange(event);
-    }
-  };
-  const onFocus = (event) => {
-    if (!rest.readOnly) {
-      setActiveInput(true);
-    }
-    if (rest.onFocus) {
-      rest.onFocus(event);
-    }
-  };
-  const onBlur = (event) => {
-    setActiveInput(false);
-    const isEmptyOrOnlySpaces = event.currentTarget.value.trim().length === 0;
-    if (isEmptyOrOnlySpaces && required) {
-      setHasRequiredError(true);
-    }
-    if (rest.onBlur) {
-      rest.onBlur(event);
-    }
-  };
-  const handleResetInput = () => {
-    setInputValue("");
-    setActiveInput(false);
-    onResetInput();
-  };
-  const handleExtraPreffixEnter = (event) => event.code === "Enter" && (extraPrefix == null ? void 0 : extraPrefix.onClick) && extraPrefix.onClick(inputValue);
-  const handleExtraSuffixEnter = (event) => event.code === "Enter" && (extraSuffix == null ? void 0 : extraSuffix.onClick) && extraSuffix.onClick(inputValue);
-  const messageColor = disabled ? "content.light" : "content.medium";
-  const showError = hasError || hasRequiredError;
-  const message = hasRequiredError ? requiredMessage != null ? requiredMessage : messageProp : messageProp;
-  const isActiveInput = activeInput || !!inputValue.trim();
-  const isSearchType = type === "search";
-  const extraPreffixOnClick = (extraPrefix == null ? void 0 : extraPrefix.onClick) ? extraPrefix.onClick : null;
-  const extraSuffixOnClick = (extraSuffix == null ? void 0 : extraSuffix.onClick) ? extraSuffix.onClick : null;
-  return /* @__PURE__ */ jsxs(
-    TextFieldStyled,
-    {
-      "data-testid": testId,
-      hasPrefix: !!extraPrefix,
-      isFloatingLabel,
-      style,
-      children: [
-        /* @__PURE__ */ jsxs(InputContainerStyled, { isFloatingLabel, children: [
-          /* @__PURE__ */ jsx(
-            LabelField,
-            {
-              hasError: showError,
-              htmlFor: textFieldId,
-              icon: labelIcon,
-              isActive: activeInput,
-              isCentered: !isActiveInput && isFloatingLabel,
-              isDisabled: disabled,
-              isFloating: isFloatingLabel,
-              isInputFilled: !!inputValue,
-              isRequired: required,
-              scale,
-              children: label
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            InputWrapperStyled,
+      setActiveInput(false);
+      onResetInput();
+    };
+    const handleExtraPrefixEnter = (event) => event.code === "Enter" && (extraPrefix == null ? void 0 : extraPrefix.onClick) && extraPrefix.onClick(inputValue);
+    const handleExtraSuffixEnter = (event) => event.code === "Enter" && (extraSuffix == null ? void 0 : extraSuffix.onClick) && extraSuffix.onClick(inputValue);
+    const messageColor = disabled ? "content.light" : "content.medium";
+    const showError = hasError || hasRequiredError;
+    const message = hasRequiredError ? requiredMessage != null ? requiredMessage : messageProp : messageProp;
+    const isActiveInput = isInputFocused || activeInput || !!inputValue.trim();
+    const isSearchType = type === "search";
+    const extraPrefixOnClick = (extraPrefix == null ? void 0 : extraPrefix.onClick) ? extraPrefix.onClick : null;
+    const extraSuffixOnClick = (extraSuffix == null ? void 0 : extraSuffix.onClick) ? extraSuffix.onClick : null;
+    return /* @__PURE__ */ jsxs(
+      TextFieldStyled,
+      {
+        "data-testid": testId,
+        hasPrefix: !!extraPrefix,
+        isFloatingLabel,
+        style,
+        children: [
+          /* @__PURE__ */ jsxs(InputContainerStyled, { isFloatingLabel, ref, children: [
+            /* @__PURE__ */ jsx(
+              LabelField,
+              {
+                hasError: showError,
+                htmlFor: textFieldId,
+                icon: labelIcon,
+                isActive: isActiveInput,
+                isCentered: !isActiveInput && isFloatingLabel,
+                isDisabled: disabled,
+                isFloating: isFloatingLabel,
+                isInputFilled: !!inputValue,
+                isRequired: required,
+                scale,
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              InputWrapperStyled,
+              {
+                backgroundFill,
+                "data-testid": `${testId}-wrapper`,
+                hasError: showError,
+                isFloatingLabel,
+                variant,
+                children: [
+                  (extraPrefix == null ? void 0 : extraPrefix.component) ? /* @__PURE__ */ jsx(
+                    InputExtraPrefixStyled,
+                    __spreadProps(__spreadValues({
+                      "data-testid": "extra-prefix"
+                    }, !!extraPrefixOnClick && {
+                      tabIndex: 0,
+                      onClick: () => !disabled && extraPrefixOnClick(inputValue),
+                      onKeyDown: handleExtraPrefixEnter
+                    }), {
+                      children: extraPrefix.component
+                    })
+                  ) : null,
+                  /* @__PURE__ */ jsx(
+                    InputFieldStyled,
+                    __spreadProps(__spreadValues({
+                      "data-error": showError,
+                      "data-testid": `${testId}-input`,
+                      disabled,
+                      id: textFieldId,
+                      isFloatingLabel,
+                      isFocused: isActiveInput,
+                      name: name != null ? name : textFieldId,
+                      ref: inputRef,
+                      scale,
+                      type,
+                      value: inputValue
+                    }, rest), {
+                      onBlur,
+                      onChange: handleChange,
+                      onFocus
+                    })
+                  ),
+                  isSearchType && !!inputValue ? /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      dataTestId: "reset-icon",
+                      onClick: handleResetInput,
+                      style: { marginRight: 12 },
+                      children: /* @__PURE__ */ jsx(Icon, { code: "close" })
+                    }
+                  ) : null,
+                  (extraSuffix == null ? void 0 : extraSuffix.component) ? /* @__PURE__ */ jsx(
+                    InputExtraSuffixStyled,
+                    __spreadProps(__spreadValues({
+                      "data-testid": EXTRA_SUFFIX_DATA_TEST_ID
+                    }, !!extraSuffixOnClick && {
+                      tabIndex: 0,
+                      onClick: () => !disabled && extraSuffixOnClick(inputValue),
+                      onKeyDown: handleExtraSuffixEnter
+                    }), {
+                      children: extraSuffix.component
+                    })
+                  ) : null
+                ]
+              }
+            )
+          ] }),
+          message ? /* @__PURE__ */ jsx(TextFieldMessageStyled, { children: /* @__PURE__ */ jsx(
+            Typography,
             {
-              backgroundFill,
-              "data-testid": `${testId}-wrapper`,
-              hasError: showError,
-              isFloatingLabel,
-              variant,
-              children: [
-                (extraPrefix == null ? void 0 : extraPrefix.component) ? /* @__PURE__ */ jsx(
-                  InputExtraPrefixStyled,
-                  __spreadProps(__spreadValues({
-                    "data-testid": "extra-preffix"
-                  }, !!extraPreffixOnClick && {
-                    tabIndex: 0,
-                    onClick: () => extraPreffixOnClick(inputValue),
-                    onKeyDown: handleExtraPreffixEnter
-                  }), {
-                    children: extraPrefix.component
-                  })
-                ) : null,
-                /* @__PURE__ */ jsx(
-                  InputFieldStyled,
-                  __spreadProps(__spreadValues({
-                    "data-error": showError,
-                    "data-testid": `${testId}-input`,
-                    disabled,
-                    id: textFieldId,
-                    isFloatingLabel,
-                    name: name != null ? name : textFieldId,
-                    ref: inputRef,
-                    scale,
-                    type,
-                    value: inputValue
-                  }, rest), {
-                    onBlur,
-                    onChange: handleChange,
-                    onFocus
-                  })
-                ),
-                isSearchType && !!inputValue ? /* @__PURE__ */ jsx(
-                  IconButton,
-                  {
-                    dataTestId: "reset-icon",
-                    onClick: handleResetInput,
-                    style: { marginRight: 12 },
-                    children: /* @__PURE__ */ jsx(Icon, { code: "close" })
-                  }
-                ) : null,
-                (extraSuffix == null ? void 0 : extraSuffix.component) ? /* @__PURE__ */ jsx(
-                  InputExtraSuffixStyled,
-                  __spreadProps(__spreadValues({
-                    "data-testid": "extra-suffix"
-                  }, !!extraSuffixOnClick && {
-                    tabIndex: 0,
-                    onClick: () => extraSuffixOnClick(inputValue),
-                    onKeyDown: handleExtraSuffixEnter
-                  }), {
-                    children: extraSuffix.component
-                  })
-                ) : null
-              ]
+              color: showError ? "error.default" : messageColor,
+              fontStyles: "bodySmRegular",
+              children: message
             }
-          )
-        ] }),
-        message ? /* @__PURE__ */ jsx(TextFieldMessageStyled, { children: /* @__PURE__ */ jsx(
-          Typography,
-          {
-            color: showError ? "error.default" : messageColor,
-            fontStyles: "bodySmRegular",
-            children: message
-          }
-        ) }) : null,
-        children
-      ]
-    }
-  );
-};
+          ) }) : null,
+          children
+        ]
+      }
+    );
+  }
+);
 export {
   InputContainerStyled,
   InputExtraPrefixStyled,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dt-dds/react-text-field",
-  "version": "1.0.0-beta.89",
+  "version": "1.0.0-beta.90",
   "license": "MIT",
   "exports": {
     ".": "./dist/index.js"
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@dt-dds/react-core": "1.0.0-beta.51",
-    "@dt-dds/react-spinner": "1.0.0-beta.84",
+    "@dt-dds/react-spinner": "1.0.0-beta.85",
     "@dt-dds/react-label-field": "1.0.0-beta.52",
     "@dt-dds/react-typography": "1.0.0-beta.42",
     "@dt-dds/react-icon-button": "1.0.0-beta.20",