@seed-design/lynx-react 0.4.0 → 0.5.0

package/src/components/TagGroup/TagGroup.test.tsx

@@ -0,0 +1,73 @@
+import "@testing-library/jest-dom";
+import type { ReactNode } from "@lynx-js/react";
+import { render } from "@lynx-js/react/testing-library";
+import { describe, expect, it } from "vitest";
+
+import * as TagGroup from "./TagGroup.namespace";
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+function renderTagGroup(separator?: ReactNode) {
+  render(
+    <TagGroup.Root separator={separator}>
+      <TagGroup.Item>
+        <TagGroup.ItemLabel>첫 번째</TagGroup.ItemLabel>
+      </TagGroup.Item>
+      <TagGroup.Item>
+        <TagGroup.ItemLabel>두 번째</TagGroup.ItemLabel>
+      </TagGroup.Item>
+      <TagGroup.Item>
+        <TagGroup.ItemLabel>세 번째</TagGroup.ItemLabel>
+      </TagGroup.Item>
+    </TagGroup.Root>,
+  );
+}
+
+describe("TagGroup", () => {
+  it("trims surrounding whitespace from the default string separator", () => {
+    renderTagGroup();
+
+    const separators = getRenderedRoot().querySelectorAll(".seed-tag-group__separator");
+
+    expect(separators).toHaveLength(2);
+    expect(Array.from(separators, (separator) => separator.textContent)).toEqual(["·", "·"]);
+  });
+
+  it("trims surrounding whitespace from a custom string separator", () => {
+    renderTagGroup(" \n / \t ");
+
+    const separators = getRenderedRoot().querySelectorAll(".seed-tag-group__separator");
+
+    expect(Array.from(separators, (separator) => separator.textContent)).toEqual(["/", "/"]);
+  });
+
+  it("preserves a non-string separator node", () => {
+    renderTagGroup(<text className="custom-separator"> 구분 </text>);
+
+    const customSeparators = getRenderedRoot().querySelectorAll(".custom-separator");
+
+    expect(customSeparators).toHaveLength(2);
+    expect(Array.from(customSeparators, (separator) => separator.textContent)).toEqual([
+      " 구분 ",
+      " 구분 ",
+    ]);
+  });
+
+  it("keeps each separator and following item in the same wrapper", () => {
+    renderTagGroup();
+
+    const wrappers = getRenderedRoot().querySelectorAll(".seed-tag-group__separatorWrapper");
+
+    expect(wrappers).toHaveLength(2);
+    expect(wrappers[0]?.textContent).toBe("·두 번째");
+    expect(wrappers[1]?.textContent).toBe("·세 번째");
+  });
+});

package/src/components/TagGroup/TagGroup.tsx

@@ -31,7 +31,8 @@ export interface TagGroupRootProps
     TagGroupItemVariantProps,
     LynxStyledElementProps {
   /**
-   * children 사이에 삽입되는 구분자. 기본값 `" · "`.
+   * children 사이에 삽입되는 구분자. 기본값 `"·"`.
+   * 문자열을 전달하면 앞뒤 공백을 제거합니다.
    */
   separator?: React.ReactNode;
 }
@@ -41,6 +42,7 @@ export const TagGroupRoot = React.forwardRef<unknown, TagGroupRootProps>((props,
     splitMultipleVariantsProps(props, { tagGroup, tagGroupItem });
   const { children, className, separator = " · ", ...nativeProps } = otherProps;
   const classes = tagGroup(tagGroupVariantProps);
+  const normalizedSeparator = typeof separator === "string" ? separator.trim() : separator;
 
   const visibleChildren = toArray(children);
 
@@ -61,7 +63,7 @@ export const TagGroupRoot = React.forwardRef<unknown, TagGroupRootProps>((props,
               key={(child as React.ReactElement).key ?? index}
               className={classes.separatorWrapper}
             >
-              <text className={classes.separator}>{separator}</text>
+              <text className={classes.separator}>{normalizedSeparator}</text>
               {child}
             </view>
           );

package/src/components/TextField/TextField.test.tsx

@@ -63,11 +63,17 @@ function getTextFieldRoot() {
   return textFieldRoot;
 }
 
-function fireNativeEvent(nativeRef: NodesRef, element: Element, eventName: string, detail: object) {
+function fireNativeEvent(
+  nativeRef: NodesRef,
+  element: Element,
+  eventName: string,
+  detail: object,
+  bubbles = true,
+) {
   const EventConstructor = element.ownerDocument.defaultView?.CustomEvent;
   if (!EventConstructor) throw new Error("Expected CustomEvent constructor to exist.");
 
-  const event = new EventConstructor(`bindEvent:${eventName}`, { bubbles: true, detail });
+  const event = new EventConstructor(`bindEvent:${eventName}`, { bubbles, detail });
   Object.assign(event, { eventType: "bindEvent", eventName });
   fireEvent(nativeRef as unknown as Element, event);
 }
@@ -171,7 +177,9 @@ describe("TextField", () => {
     expect(input).toHaveAttribute("name", "title");
     expect(input).toHaveAttribute("placeholder", "제목");
     expect(input).toHaveAttribute("default-value", "초기값");
-    expect(input).not.toHaveAttribute("android-set-soft-input-mode");
+    expect(input).toHaveAttribute("show-soft-input-on-focus", "true");
+    expect(input).toHaveAttribute("android-set-soft-input-mode", "unspecified");
+    expect(input).not.toHaveAttribute("maxlength");
 
     rerender(renderTextField());
 
@@ -196,6 +204,56 @@ describe("TextField", () => {
     expect(input).toHaveAttribute("default-value", "");
   });
 
+  it("replaces undefined soft keyboard props with safe native defaults", () => {
+    const { rerender } = render(
+      <TextField.Root>
+        <TextField.Input
+          show-soft-input-on-focus={undefined}
+          android-set-soft-input-mode={undefined}
+        />
+      </TextField.Root>,
+    );
+
+    const input = getRenderedRoot().querySelector("input");
+    expect(input).toHaveAttribute("show-soft-input-on-focus", "true");
+    expect(input).toHaveAttribute("android-set-soft-input-mode", "unspecified");
+
+    rerender(
+      <TextField.Root>
+        <TextField.Textarea
+          show-soft-input-on-focus={undefined}
+          android-set-soft-input-mode={undefined}
+        />
+      </TextField.Root>,
+    );
+
+    const textarea = getRenderedRoot().querySelector("textarea");
+    expect(textarea).toHaveAttribute("show-soft-input-on-focus", "true");
+    expect(textarea).toHaveAttribute("android-set-soft-input-mode", "unspecified");
+  });
+
+  it("preserves explicit soft keyboard overrides", () => {
+    const { rerender } = render(
+      <TextField.Root>
+        <TextField.Input show-soft-input-on-focus={false} android-set-soft-input-mode="nothing" />
+      </TextField.Root>,
+    );
+
+    const input = getRenderedRoot().querySelector("input");
+    expect(input).toHaveAttribute("show-soft-input-on-focus", "false");
+    expect(input).toHaveAttribute("android-set-soft-input-mode", "nothing");
+
+    rerender(
+      <TextField.Root>
+        <TextField.Textarea show-soft-input-on-focus={false} android-set-soft-input-mode="resize" />
+      </TextField.Root>,
+    );
+
+    const textarea = getRenderedRoot().querySelector("textarea");
+    expect(textarea).toHaveAttribute("show-soft-input-on-focus", "false");
+    expect(textarea).toHaveAttribute("android-set-soft-input-mode", "resize");
+  });
+
   it("initializes a non-empty value without invoking a native UI method", () => {
     const invoke = vi.fn(() => ({ exec: vi.fn() }));
     const setRef = (node: NodesRef | null) => {
@@ -543,8 +601,9 @@ describe("TextField", () => {
     );
 
     if (!inputRef.current) throw new Error("Expected native input ref to exist.");
-    expect(getRenderedRoot().querySelector("input")).not.toHaveAttribute(
+    expect(getRenderedRoot().querySelector("input")).toHaveAttribute(
       "android-set-soft-input-mode",
+      "unspecified",
     );
 
     // ReactLynx Testing Library runtime accepts NodesRef, but its public fireEvent type
@@ -627,8 +686,11 @@ describe("TextField", () => {
     expect(getRenderedQueries().queryByText("secret")).toBeNull();
   });
 
-  it("uses native intrinsic autoresize inside a padded sizing wrapper", () => {
+  it("uses direct native autoresize on Android", () => {
+    setSystemInfo({ platform: "Android" });
+
     const textareaRef = createRef<NodesRef>();
+    const bindlayoutchange = vi.fn();
     const actions = {
       focus: vi.fn(),
       blur: vi.fn(),
@@ -642,6 +704,7 @@ describe("TextField", () => {
             ref={textareaRef}
             placeholder="내용"
             android-set-soft-input-mode="nothing"
+            bindlayoutchange={bindlayoutchange}
           />
         </TextField.Root>
       </KeyboardAvoidanceActionsContext.Provider>,
@@ -649,37 +712,27 @@ describe("TextField", () => {
 
     const root = getRenderedRoot();
     const textarea = root.querySelector("textarea");
-    const textareaRoot = root.querySelector(".seed-text-input__textareaRoot");
     if (!textarea) throw new Error("Expected native textarea to exist.");
-    if (!textareaRoot) throw new Error("Expected textarea sizing wrapper to exist.");
     if (!textareaRef.current) throw new Error("Expected native textarea ref to exist.");
 
-    expect(textareaRoot).toHaveClass("seed-text-input__textareaAutoresizeRoot--size_large");
-    expect(textarea).toHaveClass("seed-text-input__textareaNativeAutoresize");
-    expect(textarea).not.toHaveClass("seed-text-input__textareaAndroidAutoresize--size_large");
+    expect(textarea).not.toHaveClass("seed-text-input__textareaNativeAutoresize");
+    expect(textarea).toHaveClass("seed-text-input__textareaAndroidAutoresize--size_large");
     expect(textarea).toHaveClass("seed-text-input__textareaValue");
     expect(textarea).not.toHaveClass("seed-text-input__textareaFixed");
     expect(textarea).toHaveAttribute("bounces", "false");
+    expect(textarea).toHaveAttribute("show-soft-input-on-focus", "true");
     expect(textarea).toHaveAttribute("default-value", "첫 줄\n둘째 줄\n");
     expect(textarea).toHaveAttribute("android-fullscreen-mode", "false");
     expect(textarea).toHaveAttribute("android-set-soft-input-mode", "nothing");
-    expect(textareaRoot.querySelector("text")).toBeNull();
+    expect(textarea).not.toHaveAttribute("maxlength");
+    expect(root.querySelector(".seed-text-input__textareaRoot")).toBeNull();
 
-    fireNativeEvent(textareaRoot as unknown as NodesRef, textareaRoot, "layoutchange", {
+    fireNativeEvent(textareaRef.current, textarea, "layoutchange", {
       width: 200,
       height: 120,
     });
     expect(actions.layoutChanged).toHaveBeenCalledOnce();
-
-    const exec = vi.fn();
-    const invoke = vi.fn(() => ({ exec }));
-    textareaRef.current.invoke = invoke as unknown as NodesRef["invoke"];
-    fireEvent.tap(textareaRef.current as unknown as Element);
-    expect(invoke).not.toHaveBeenCalled();
-
-    fireEvent.tap(textareaRoot);
-    expect(invoke).toHaveBeenCalledWith(expect.objectContaining({ method: "focus" }));
-    expect(exec).toHaveBeenCalledOnce();
+    expect(bindlayoutchange).toHaveBeenCalledOnce();
   });
 
   it("uses native intrinsic autoresize with the Android-only line-spacing correction", () => {
@@ -695,7 +748,7 @@ describe("TextField", () => {
     const textarea = root.querySelector("textarea");
     if (!textarea) throw new Error("Expected native textarea to exist.");
 
-    expect(textarea).toHaveClass("seed-text-input__textareaNativeAutoresize");
+    expect(textarea).not.toHaveClass("seed-text-input__textareaNativeAutoresize");
     expect(textarea).toHaveClass("seed-text-input__textareaAndroidAutoresize--size_large");
     expect(textarea).toHaveAttribute("line-spacing", "3.2px");
     expect(root.querySelector(".seed-text-input__textareaAutoresizeRoot--size_large")).toBeNull();
@@ -743,29 +796,98 @@ describe("TextField", () => {
     expect(uncorrectedTextarea).toHaveAttribute("line-spacing", "0");
   });
 
-  it("keeps iOS native autoresize without the Android line-spacing correction", () => {
+  it("uses an iOS-only sizing wrapper without intercepting native textarea taps", () => {
     setSystemInfo({ platform: "iOS" });
 
+    const textareaRef = createRef<NodesRef>();
+    const bindlayoutchange = vi.fn();
+    const actions = {
+      focus: vi.fn(),
+      blur: vi.fn(),
+      layoutChanged: vi.fn(),
+      unregister: vi.fn(),
+    };
     render(
-      <TextField.Root defaultValue={"첫 줄\n"}>
-        <TextField.Textarea />
-      </TextField.Root>,
+      <KeyboardAvoidanceActionsContext.Provider value={actions}>
+        <TextField.Root defaultValue={"첫 줄\n"}>
+          <TextField.Textarea ref={textareaRef} bindlayoutchange={bindlayoutchange} />
+        </TextField.Root>
+      </KeyboardAvoidanceActionsContext.Provider>,
     );
 
     const root = getRenderedRoot();
     const textarea = root.querySelector("textarea");
-    if (!textarea) throw new Error("Expected native textarea to exist.");
+    const textareaRoot = root.querySelector(".seed-text-input__textareaRoot");
+    if (!textarea || !textareaRoot || !textareaRef.current) {
+      throw new Error("Expected native textarea and its iOS sizing wrapper to exist.");
+    }
 
     expect(textarea).toHaveClass("seed-text-input__textareaNativeAutoresize");
     expect(textarea).not.toHaveClass("seed-text-input__textareaAndroidAutoresize--size_large");
     expect(textarea).not.toHaveAttribute("line-spacing");
-    expect(
-      root.querySelector(".seed-text-input__textareaAutoresizeRoot--size_large"),
-    ).not.toBeNull();
-    expect(root.querySelector(".seed-text-input__textareaRoot text")).toBeNull();
+    expect(textareaRoot).toHaveClass("seed-text-input__textareaAutoresizeRoot--size_large");
+    expect(textareaRoot).toHaveAttribute("ignore-focus", "true");
+
+    const exec = vi.fn();
+    const invoke = vi.fn(() => ({ exec }));
+    textareaRef.current.invoke = invoke as unknown as NodesRef["invoke"];
+
+    fireEvent.tap(textareaRef.current as unknown as Element);
+    expect(invoke).not.toHaveBeenCalled();
+
+    fireEvent.tap(textareaRoot);
+    expect(invoke).toHaveBeenCalledWith(expect.objectContaining({ method: "focus" }));
+    expect(exec).toHaveBeenCalledOnce();
+
+    actions.layoutChanged.mockClear();
+    fireNativeEvent(
+      textareaRef.current,
+      textarea,
+      "layoutchange",
+      {
+        width: 200,
+        height: 80,
+      },
+      false,
+    );
+    expect(bindlayoutchange).toHaveBeenCalledOnce();
+    expect(actions.layoutChanged).not.toHaveBeenCalled();
+
+    fireNativeEvent(textareaRoot as unknown as NodesRef, textareaRoot, "layoutchange", {
+      width: 200,
+      height: 94,
+    });
+    expect(actions.layoutChanged).toHaveBeenCalledOnce();
   });
 
-  it("does not restore the previous value after an accepted controlled textarea newline", async () => {
+  it("does not invoke focus from disabled iOS textarea wrapper padding", () => {
+    setSystemInfo({ platform: "iOS" });
+
+    const textareaRef = createRef<NodesRef>();
+    render(
+      <TextField.Root disabled>
+        <TextField.Textarea ref={textareaRef} />
+      </TextField.Root>,
+    );
+
+    const textareaRoot = getRenderedRoot().querySelector(".seed-text-input__textareaRoot");
+    if (!textareaRoot || !textareaRef.current) {
+      throw new Error("Expected disabled native textarea and its iOS sizing wrapper to exist.");
+    }
+
+    const invoke = vi.fn(() => ({ exec: vi.fn() }));
+    textareaRef.current.invoke = invoke as unknown as NodesRef["invoke"];
+
+    fireEvent.tap(textareaRoot);
+    expect(invoke).not.toHaveBeenCalled();
+  });
+
+  it.each([
+    "Android",
+    "iOS",
+  ] as const)("does not restore the previous value after an accepted controlled textarea newline on %s", async (platform) => {
+    setSystemInfo({ platform });
+
     const textareaRef = createRef<NodesRef>();
     const onValueChange = vi.fn();
     const bindinput = vi.fn();
@@ -794,8 +916,13 @@ describe("TextField", () => {
       throw new Error("Expected native textarea to exist.");
     }
 
-    expect(textarea).toHaveClass("seed-text-input__textareaNativeAutoresize");
-    expect(root.querySelector(".seed-text-input__textareaRoot")).not.toBeNull();
+    if (platform === "iOS") {
+      expect(textarea).toHaveClass("seed-text-input__textareaNativeAutoresize");
+      expect(root.querySelector(".seed-text-input__textareaRoot")).not.toBeNull();
+    } else {
+      expect(textarea).not.toHaveClass("seed-text-input__textareaNativeAutoresize");
+      expect(root.querySelector(".seed-text-input__textareaRoot")).toBeNull();
+    }
 
     const invoke = vi.fn(() => ({ exec: vi.fn() }));
     textareaRef.current.invoke = invoke as unknown as NodesRef["invoke"];
@@ -811,6 +938,7 @@ describe("TextField", () => {
     expect(invoke).not.toHaveBeenCalled();
 
     await flushControlledReconciliation();
+    expect(getRenderedRoot().querySelector("textarea")).toBe(textarea);
     expect(invoke).not.toHaveBeenCalled();
   });
 

package/src/components/TextField/TextField.tsx

@@ -17,13 +17,21 @@ declare const SystemInfo: LynxSystemInfo | undefined;
 
 const ANDROID_TEXTAREA_DEFAULT_LINE_SPACING = "3.2px" as const;
 
-function isAndroidRuntime(): boolean {
+function getRuntimePlatform(): string | undefined {
   const globalSystemInfo = (globalThis as typeof globalThis & { SystemInfo?: LynxSystemInfo })
     .SystemInfo;
   const systemInfo =
     globalSystemInfo ?? (typeof SystemInfo === "undefined" ? undefined : SystemInfo);
 
-  return systemInfo?.platform === "Android";
+  return systemInfo?.platform;
+}
+
+function isAndroidRuntime(): boolean {
+  return getRuntimePlatform() === "Android";
+}
+
+function isIOSRuntime(): boolean {
+  return getRuntimePlatform() === "iOS";
 }
 
 const { ClassNamesProvider, useClassNames } = createSlotRecipeContext(textInput);
@@ -562,13 +570,22 @@ export interface TextFieldInputProps extends NativeTextControlProps {
   maxlength?: NativeInputProps["maxlength"];
   readonly?: NativeInputProps["readonly"];
   disabled?: NativeInputProps["disabled"];
+  /**
+   * 포커스할 때 시스템 키보드를 표시한다.
+   * `undefined`가 native attribute로 전달되지 않도록 `true`를 명시적으로 적용한다.
+   * @defaultValue true
+   */
   "show-soft-input-on-focus"?: NativeInputProps["show-soft-input-on-focus"];
   "input-filter"?: NativeInputProps["input-filter"];
   type?: NativeInputProps["type"];
   "ios-auto-correct"?: NativeInputProps["ios-auto-correct"];
   "ios-spell-check"?: NativeInputProps["ios-spell-check"];
   "android-fullscreen-mode"?: NativeInputProps["android-fullscreen-mode"];
-  /** Android host window의 soft input mode를 지정한다. */
+  /**
+   * Android host window의 soft input mode를 지정한다.
+   * `undefined`가 native attribute로 전달되지 않도록 `"unspecified"`를 명시적으로 적용한다.
+   * @defaultValue "unspecified"
+   */
   "android-set-soft-input-mode"?: AndroidSetSoftInputMode;
   bindfocus?: NativeInputProps["bindfocus"];
   bindblur?: NativeInputProps["bindblur"];
@@ -651,10 +668,10 @@ export const TextFieldInput = React.forwardRef<NodesRef, TextFieldInputProps>((p
       className={clsx(classes.value, className)}
       disabled={control.disabled}
       readonly={control.readOnly}
-      show-soft-input-on-focus={control.readOnly ? false : showSoftInputOnFocus}
-      android-set-soft-input-mode={androidSetSoftInputMode}
+      show-soft-input-on-focus={showSoftInputOnFocus ?? true}
+      android-set-soft-input-mode={androidSetSoftInputMode ?? "unspecified"}
       name={name ?? control.context.name}
-      maxlength={resolvedMaxLength}
+      {...(resolvedMaxLength === undefined ? {} : { maxlength: resolvedMaxLength })}
       bindinput={control.handleInput}
       bindselection={handleSelection}
       bindfocus={control.handleFocus}
@@ -686,6 +703,11 @@ export interface TextFieldTextareaProps extends NativeTextControlProps {
   "line-spacing"?: NativeTextareaProps["line-spacing"];
   readonly?: NativeTextareaProps["readonly"];
   disabled?: NativeTextareaProps["disabled"];
+  /**
+   * 포커스할 때 시스템 키보드를 표시한다.
+   * `undefined`가 native attribute로 전달되지 않도록 `true`를 명시적으로 적용한다.
+   * @defaultValue true
+   */
   "show-soft-input-on-focus"?: NativeTextareaProps["show-soft-input-on-focus"];
   "input-filter"?: NativeTextareaProps["input-filter"];
   "enable-scroll-bar"?: NativeTextareaProps["enable-scroll-bar"];
@@ -694,7 +716,11 @@ export interface TextFieldTextareaProps extends NativeTextControlProps {
   "ios-spell-check"?: NativeTextareaProps["ios-spell-check"];
   /** Android의 fullscreen extract input을 활성화한다. @defaultValue false */
   "android-fullscreen-mode"?: NativeTextareaProps["android-fullscreen-mode"];
-  /** Android host window의 soft input mode를 지정한다. */
+  /**
+   * Android host window의 soft input mode를 지정한다.
+   * `undefined`가 native attribute로 전달되지 않도록 `"unspecified"`를 명시적으로 적용한다.
+   * @defaultValue "unspecified"
+   */
   "android-set-soft-input-mode"?: AndroidSetSoftInputMode;
   bindfocus?: NativeTextareaProps["bindfocus"];
   bindblur?: NativeTextareaProps["bindblur"];
@@ -738,6 +764,7 @@ export const TextFieldTextarea = React.forwardRef<NodesRef, TextFieldTextareaPro
       control.nativeInsertionMaxLength,
     );
     const isAndroid = isAndroidRuntime();
+    const usesIOSAutoresizeWrapper = autoresize && isIOSRuntime();
     // Android native textarea는 CSS line-height를 무시한다. 실기기에서 관측한
     // native font metrics와 SEED line box의 차이를 line-spacing으로 보정한다.
     // 명시적인 값(0 포함)은 내부 기본값보다 우선한다.
@@ -756,16 +783,29 @@ export const TextFieldTextarea = React.forwardRef<NodesRef, TextFieldTextareaPro
       },
       [bindselection, control.handleSelectionChange],
     );
+    const handleLayoutChange = React.useCallback<
+      NonNullable<NativeTextareaProps["bindlayoutchange"]>
+    >(
+      (event) => {
+        "background only";
+
+        if (autoresize) {
+          control.notifyLayoutChanged();
+        }
+        bindlayoutchange?.(event);
+      },
+      [autoresize, bindlayoutchange, control.notifyLayoutChanged],
+    );
     const handleTextareaRootTap = React.useCallback<
       NonNullable<IntrinsicElements["view"]["bindtap"]>
     >(
       (event) => {
         "background only";
 
-        if (event.target.uid !== event.currentTarget.uid) return;
+        if (control.disabled || event.target.uid !== event.currentTarget.uid) return;
         control.focusNativeControl();
       },
-      [control.focusNativeControl],
+      [control.disabled, control.focusNativeControl],
     );
 
     if (control.readOnly) {
@@ -795,8 +835,8 @@ export const TextFieldTextarea = React.forwardRef<NodesRef, TextFieldTextareaPro
       );
     }
 
-    // Android EditText는 자체 canvas 경계 안에서 text와 scroll offset을 먼저 자른다.
-    // autoresize 시 세로 padding을 wrapper가 아니라 native가 소유해야 첫 줄 여유가 유효하다.
+    // iOS textarea는 첫 편집에서 native contentSize를 높이에 반영한다.
+    // 디자인 padding을 wrapper로 분리해 이때 padding만큼 높이가 중복되지 않게 한다.
     const textarea = (
       <textarea
         {...control.defaultValueProps}
@@ -804,33 +844,35 @@ export const TextFieldTextarea = React.forwardRef<NodesRef, TextFieldTextareaPro
         className={clsx(
           classes.value,
           classes.textareaValue,
-          autoresize ? classes.textareaNativeAutoresize : classes.textareaFixed,
-          autoresize && isAndroid && classes.textareaAndroidAutoresize,
+          !autoresize && classes.textareaFixed,
+          usesIOSAutoresizeWrapper && classes.textareaNativeAutoresize,
+          autoresize && !usesIOSAutoresizeWrapper && classes.textareaAndroidAutoresize,
           className,
         )}
         disabled={control.disabled}
         readonly={control.readOnly}
-        show-soft-input-on-focus={control.readOnly ? false : showSoftInputOnFocus}
+        show-soft-input-on-focus={showSoftInputOnFocus ?? true}
         bounces={bounces ?? (autoresize ? false : undefined)}
         line-spacing={resolvedLineSpacing}
         android-fullscreen-mode={androidFullscreenMode ?? false}
-        android-set-soft-input-mode={androidSetSoftInputMode}
+        android-set-soft-input-mode={androidSetSoftInputMode ?? "unspecified"}
         name={name ?? control.context.name}
-        maxlength={resolvedMaxLength}
+        {...(resolvedMaxLength === undefined ? {} : { maxlength: resolvedMaxLength })}
         bindinput={control.handleInput}
         bindselection={handleSelection}
         bindfocus={control.handleFocus}
         bindblur={control.handleBlur}
-        bindlayoutchange={bindlayoutchange}
+        bindlayoutchange={usesIOSAutoresizeWrapper ? bindlayoutchange : handleLayoutChange}
         {...nativeProps}
       />
     );
 
-    if (!autoresize) return textarea;
+    if (!usesIOSAutoresizeWrapper) return textarea;
 
     return (
       <view
-        className={clsx(classes.textareaRoot, !isAndroid && classes.textareaAutoresizeRoot)}
+        ignore-focus={true}
+        className={clsx(classes.textareaRoot, classes.textareaAutoresizeRoot)}
         bindtap={handleTextareaRootTap}
         bindlayoutchange={control.notifyLayoutChanged}
       >

package/src/components/index.ts

@@ -1,9 +1,13 @@
+export * from "./Accordion";
 export * from "./ActionButton";
 export * from "./AppBar";
 export * from "./Badge";
 export * from "./Box";
 export * from "./BottomSheet";
+export * from "./Callout";
 export * from "./Checkbox";
+export * from "./Chip";
+export * from "./Divider";
 export * from "./Field";
 export * from "./Icon";
 export * from "./KeyboardAvoidingScrollView";
@@ -11,6 +15,7 @@ export * from "./ProgressCircle";
 export * from "./RadioGroup";
 export * from "./Stack";
 export * from "./Switch";
+export * from "./Tabs";
 export * from "./TagGroup";
 export * from "./Text";
 export * from "./TextField";