@bigtablet/design-system 1.11.0 → 1.11.2

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

package/dist/index.js

@@ -509,10 +509,22 @@ var TextField = React3.forwardRef(
     fullWidth,
     className,
     onChangeAction,
+    value,
+    defaultValue,
     ...props
   }, ref) => {
     const inputId = id ?? React3.useId();
     const helperId = helperText ? `${inputId}-help` : void 0;
+    const isControlled = value !== void 0;
+    const [innerValue, setInnerValue] = React3.useState(
+      value ?? defaultValue ?? ""
+    );
+    const isComposingRef = React3.useRef(false);
+    React3.useEffect(() => {
+      if (isControlled) {
+        setInnerValue(value ?? "");
+      }
+    }, [isControlled, value]);
     const rootClassName = [
       "text_field",
       fullWidth && "text_field_full_width",
@@ -545,7 +557,22 @@ 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 nextValue = event.currentTarget.value;
+              setInnerValue(nextValue);
+              onChangeAction?.(nextValue);
+            },
+            onChange: (event) => {
+              const nextValue = event.target.value;
+              setInnerValue(nextValue);
+              if (isComposingRef.current) return;
+              onChangeAction?.(nextValue);
+            }
           }
         ),
         rightIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_icon_right", children: rightIcon }) : null

package/dist/styles/scss/_colors.scss

@@ -5,6 +5,8 @@ $color_primary_hover: #333333;
 /* Background */
 $color_background: #ffffff;
 $color_background_secondary: #fafafa;
+$color_background_neutral: #F3F3F3;
+$color_background_muted: #f0f0f0;
 $color_background_primary: #47555E;
 
 /* Text */

package/package.json

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

package/src/styles/scss/_colors.scss

@@ -5,6 +5,8 @@ $color_primary_hover: #333333;
 /* Background */
 $color_background: #ffffff;
 $color_background_secondary: #fafafa;
+$color_background_neutral: #F3F3F3;
+$color_background_muted: #f0f0f0;
 $color_background_primary: #47555E;
 
 /* Text */