feat(TextField): add a controlled variant

packages/core/src/components/TextField/TextField.tsx

@@ -1,5 +1,14 @@
 import cx from "classnames";
-import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  ChangeEvent,
+  ChangeEventHandler,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 import useDebounceEvent from "../../hooks/useDebounceEvent";
 import Icon from "../Icon/Icon";
 import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
@@ -86,6 +95,10 @@ export interface TextFieldProps extends VibeComponentProps {
    * Apply new style for read only, use along with `readonly` prop
    */
   withReadOnlyStyle?: boolean;
+  /**
+   * When true, component is controlled by an external state
+   */
+  controlled?: boolean;
 }
 
 const TextField: VibeComponent<TextFieldProps, unknown> & {
@@ -138,7 +151,8 @@ const TextField: VibeComponent<TextFieldProps, unknown> & {
       tabIndex,
       underline = false,
       name,
-      withReadOnlyStyle
+      withReadOnlyStyle,
+      controlled = false
     },
     ref
   ) => {
@@ -171,13 +185,28 @@ const TextField: VibeComponent<TextFieldProps, unknown> & {
       [onChange, isRequiredAndEmpty]
     );
 
-    const { inputValue, onEventChanged, clearValue } = useDebounceEvent({
+    const {
+      inputValue: uncontrolledInput,
+      onEventChanged,
+      clearValue
+    } = useDebounceEvent({
       delay: debounceRate,
       onChange: onChangeCallback,
       initialStateValue: value,
       trim
     });
 
+    const inputValue = useMemo(() => {
+      return controlled ? value : uncontrolledInput;
+    }, [controlled, value, uncontrolledInput]);
+
+    const handleChange = useCallback<ChangeEventHandler>(
+      (event: ChangeEvent<Partial<HTMLInputElement>>) => {
+        controlled ? onChangeCallback(event.target.value) : onEventChanged(event);
+      },
+      [controlled, onChangeCallback, onEventChanged]
+    );
+
     const currentStateIconName = useMemo(() => {
       if (secondaryIconName) {
         return inputValue ? secondaryIconName : iconName;
@@ -196,10 +225,10 @@ const TextField: VibeComponent<TextFieldProps, unknown> & {
         }
         // Do it cause otherwise the value is not cleared in target object
         inputRef.current.value = "";
-        clearValue();
+        controlled ? onChangeCallback("") : clearValue();
       }
       onIconClick(currentStateIconName);
-    }, [inputRef, disabled, clearOnIconClick, onIconClick, currentStateIconName, clearValue]);
+    }, [disabled, clearOnIconClick, onIconClick, currentStateIconName, controlled, onChangeCallback, clearValue]);
 
     const validationClass = useMemo(() => {
       if ((!validation || !validation.status) && !isRequiredAndEmpty) {
@@ -256,7 +285,7 @@ const TextField: VibeComponent<TextFieldProps, unknown> & {
               placeholder={placeholder}
               autoComplete={autoComplete}
               value={inputValue}
-              onChange={onEventChanged}
+              onChange={handleChange}
               disabled={disabled}
               readOnly={readonly}
               ref={mergedRef}

packages/core/src/components/TextField/__tests__/TextField.test.js

@@ -290,4 +290,19 @@ describe("TextField Tests", () => {
     });
     expect(input.value).toBe(value.trim());
   });
+
+  describe("controlled", () => {
+    it("should call onChange with the new value when controlled is true", () => {
+      const handleChange = jest.fn();
+      render(<TextField placeholder="Enter text" onChange={handleChange} value="value" controlled />);
+
+      const input = screen.getByPlaceholderText("Enter text");
+      expect(input.value).toBe("value");
+
+      fireEvent.change(input, { target: { value: "new value" } });
+
+      expect(handleChange).toHaveBeenCalledTimes(1);
+      expect(handleChange).toHaveBeenCalledWith("new value", expect.anything());
+    });
+  });
 });