@bigtablet/design-system 1.11.2 → 1.11.3

package/dist/index.d.ts

@@ -120,16 +120,10 @@ interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
     fullWidth?: boolean;
-    /**
-     * 외부에 최종 값만 전달하는 콜백
-     * IME 조합 중 값은 내부에서만 관리된다.
-     */
     onChangeAction?: (value: string) => void;
-    /**
-     * controlled / uncontrolled 모두 지원
-     */
     value?: string;
     defaultValue?: string;
+    transformValue?: (value: string) => string;
 }
 declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
 

package/dist/index.js

@@ -511,20 +511,21 @@ var TextField = React3.forwardRef(
     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(
-      value ?? defaultValue ?? ""
+      () => applyTransform(value ?? defaultValue ?? "")
     );
     const isComposingRef = React3.useRef(false);
     React3.useEffect(() => {
-      if (isControlled) {
-        setInnerValue(value ?? "");
-      }
-    }, [isControlled, value]);
+      if (!isControlled) return;
+      setInnerValue(applyTransform(value ?? ""));
+    }, [isControlled, value, transformValue]);
     const rootClassName = [
       "text_field",
       fullWidth && "text_field_full_width",
@@ -563,14 +564,19 @@ var TextField = React3.forwardRef(
             },
             onCompositionEnd: (event) => {
               isComposingRef.current = false;
-              const nextValue = event.currentTarget.value;
+              const rawValue = event.currentTarget.value;
+              const nextValue = applyTransform(rawValue);
               setInnerValue(nextValue);
               onChangeAction?.(nextValue);
             },
             onChange: (event) => {
-              const nextValue = event.target.value;
+              const rawValue = event.target.value;
+              if (isComposingRef.current) {
+                setInnerValue(rawValue);
+                return;
+              }
+              const nextValue = applyTransform(rawValue);
               setInnerValue(nextValue);
-              if (isComposingRef.current) return;
               onChangeAction?.(nextValue);
             }
           }

package/package.json

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