@bigtablet/design-system 1.11.1 → 1.11.3

package/dist/index.d.ts

@@ -110,7 +110,7 @@ declare const Switch: ({ checked, defaultChecked, onChange, size, disabled, clas
 
 type TextFieldVariant = "outline" | "filled" | "ghost";
 type TextFieldSize = "sm" | "md" | "lg";
-interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
+interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value" | "defaultValue"> {
     label?: string;
     helperText?: string;
     error?: boolean;
@@ -120,7 +120,10 @@ interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
     fullWidth?: boolean;
-    onChangeAction?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChangeAction?: (value: string) => void;
+    value?: string;
+    defaultValue?: string;
+    transformValue?: (value: string) => string;
 }
 declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
 

package/dist/index.js

@@ -509,10 +509,23 @@ var TextField = React3.forwardRef(
     fullWidth,
     className,
     onChangeAction,
+    value,
+    defaultValue,
+    transformValue,
     ...props
   }, ref) => {
     const inputId = id ?? React3.useId();
     const helperId = helperText ? `${inputId}-help` : void 0;
+    const isControlled = value !== void 0;
+    const applyTransform = (nextValue) => transformValue ? transformValue(nextValue) : nextValue;
+    const [innerValue, setInnerValue] = React3.useState(
+      () => applyTransform(value ?? defaultValue ?? "")
+    );
+    const isComposingRef = React3.useRef(false);
+    React3.useEffect(() => {
+      if (!isControlled) return;
+      setInnerValue(applyTransform(value ?? ""));
+    }, [isControlled, value, transformValue]);
     const rootClassName = [
       "text_field",
       fullWidth && "text_field_full_width",
@@ -545,7 +558,27 @@ var TextField = React3.forwardRef(
             "aria-invalid": !!error,
             "aria-describedby": helperId,
             ...props,
-            onChange: onChangeAction
+            value: innerValue,
+            onCompositionStart: () => {
+              isComposingRef.current = true;
+            },
+            onCompositionEnd: (event) => {
+              isComposingRef.current = false;
+              const rawValue = event.currentTarget.value;
+              const nextValue = applyTransform(rawValue);
+              setInnerValue(nextValue);
+              onChangeAction?.(nextValue);
+            },
+            onChange: (event) => {
+              const rawValue = event.target.value;
+              if (isComposingRef.current) {
+                setInnerValue(rawValue);
+                return;
+              }
+              const nextValue = applyTransform(rawValue);
+              setInnerValue(nextValue);
+              onChangeAction?.(nextValue);
+            }
           }
         ),
         rightIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_icon_right", children: rightIcon }) : null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigtablet/design-system",
-  "version": "1.11.1",
+  "version": "1.11.3",
   "description": "Bigtablet Design System UI Components",
   "type": "module",
   "types": "dist/index.d.ts",