@seed-design/lynx-react 0.5.1 → 0.6.0

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

@@ -301,6 +301,54 @@ describe("TextField", () => {
     expect(invoke).not.toHaveBeenCalled();
   });
 
+  it("restores the committed controlled value when blur reports a stale native value", async () => {
+    const inputRef = createRef<NodesRef>();
+
+    function ControlledInput() {
+      const [value, setValue] = useState("초기값");
+
+      return (
+        <TextField.Root value={value} onValueChange={setValue}>
+          <TextField.Input ref={inputRef} />
+        </TextField.Root>
+      );
+    }
+
+    render(<ControlledInput />);
+
+    const input = getRenderedRoot().querySelector("input");
+    if (!input || !inputRef.current) throw new Error("Expected native input to exist.");
+
+    const exec = vi.fn();
+    const invoke = vi.fn(() => ({ exec }));
+    inputRef.current.invoke = invoke as unknown as NodesRef["invoke"];
+
+    fireNativeEvent(inputRef.current, input, "input", {
+      value: "최신값",
+      selectionStart: 3,
+      selectionEnd: 3,
+      isComposing: false,
+    });
+    await flushControlledReconciliation();
+
+    fireNativeEvent(inputRef.current, input, "blur", { value: "이전값" });
+    await flushControlledReconciliation();
+
+    expect(invoke).toHaveBeenCalledTimes(1);
+    expect(invoke).toHaveBeenCalledWith(
+      expect.objectContaining({
+        method: "setValue",
+        params: { value: "최신값" },
+      }),
+    );
+    expect(exec).toHaveBeenCalledTimes(1);
+
+    fireNativeEvent(inputRef.current, input, "blur", { value: "최신값" });
+    await flushControlledReconciliation();
+
+    expect(invoke).toHaveBeenCalledTimes(1);
+  });
+
   it("waits for a parent value update queued in a microtask", async () => {
     const inputRef = createRef<NodesRef>();
 

package/src/components/TextField/TextField.tsx

@@ -456,11 +456,18 @@ function useNativeTextControl({
     (event: Parameters<NonNullable<NativeInputProps["bindblur"]>>[0]) => {
       "background only";
 
+      const nativeValue = event.detail?.value;
+      if (typeof nativeValue === "string") {
+        lastNativeValueRef.current = nativeValue;
+      }
       textFieldContext.setFocused(false);
       keyboardAvoidance?.blur(ownerRef.current);
       bindblur?.(event);
+      if (typeof nativeValue === "string") {
+        reconcileControlledValue(nativeValue);
+      }
     },
-    [bindblur, keyboardAvoidance, textFieldContext.setFocused],
+    [bindblur, keyboardAvoidance, reconcileControlledValue, textFieldContext.setFocused],
   );
 
   const notifyLayoutChanged = React.useCallback(() => {

package/src/components/index.ts

@@ -11,8 +11,14 @@ export * from "./Divider";
 export * from "./Field";
 export * from "./Icon";
 export * from "./KeyboardAvoidingScrollView";
+export * from "./MannerTemp";
+export * from "./MannerTempBadge";
+export * from "./NotificationBadge";
+export * from "./PageBanner";
 export * from "./ProgressCircle";
 export * from "./RadioGroup";
+export * from "./SegmentedControl";
+export * from "./SelectBox";
 export * from "./Stack";
 export * from "./Switch";
 export * from "./Tabs";

package/src/hooks/useIconColor.ts

@@ -9,6 +9,7 @@ type IconElement = MainThread.Element & {
 
 export interface UseIconColorOptions {
   sourceRef?: RefObject<MainThread.Element>;
+  enabled?: boolean;
 }
 
 // Lynx `<image>` 의 `tint-color` attribute 에 CSS variable 문자열을 직접 넣는 경로는
@@ -86,20 +87,24 @@ export function useIconColor(
 } {
   const ref = useMainThreadRef<IconElement>(null);
   const sourceRef = options?.sourceRef as RefObject<IconElement> | undefined;
+  const enabled = options?.enabled ?? true;
   const frameRef = useMainThreadRef<number>(0);
 
   function syncOnUiAppear() {
     "main thread";
+    if (!enabled) return;
     syncTintColorOnce(ref, sourceRef);
   }
 
   // deps 는 caller 가 책임.
   useEffect(() => {
+    if (!enabled) return;
+
     runOnMainThread(scheduleTintColorSync)(ref, sourceRef, frameRef);
     return () => {
       runOnMainThread(cancelTintColorSync)(frameRef);
     };
-  }, deps);
+  }, [...deps, enabled]);
 
   return { ref, "main-thread:binduiappear": syncOnUiAppear };
 }