@seed-design/lynx-react 0.6.0 → 0.6.2

package/lib/hooks/useControllableState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useControllableState.d.ts","sourceRoot":"","sources":["../../src/hooks/useControllableState.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,yBAAyB,CAAC,CAAC;IAC1C,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,YAAY,EAAE,CAAC,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC/B;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EACpC,KAAK,EAAE,yBAAyB,CAAC,CAAC,CAAC,GAClC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,CAkBzB"}
+{"version":3,"file":"useControllableState.d.ts","sourceRoot":"","sources":["../../src/hooks/useControllableState.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,yBAAyB,CAAC,CAAC;IAC1C,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,YAAY,EAAE,CAAC,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC/B;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EACpC,KAAK,EAAE,yBAAyB,CAAC,CAAC,CAAC,GAClC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,CAuBzB"}

package/lib/hooks/useControllableState.js

@@ -16,7 +16,11 @@ function useControllableState(props) {
 	const currentValue = isControlled ? value : uncontrolledValue;
 	const prevValueRef = useRef(currentValue);
 	return [currentValue, useMemoizedFn((nextValue) => {
-		if (!isControlled) setUncontrolledValue(nextValue);
+		if (isControlled) {
+			if (nextValue !== value) onChange?.(nextValue);
+			return;
+		}
+		setUncontrolledValue(nextValue);
 		if (nextValue !== prevValueRef.current) {
 			onChange?.(nextValue);
 			prevValueRef.current = nextValue;

package/lib/hooks/useIconColor.d.ts

@@ -6,8 +6,8 @@ export interface UseIconColorOptions {
 }
 /**
  * Lynx `<image>` 의 tint color 를 recipe 의 CSS `color` 로부터 main-thread 에서 읽어
- * `tint-color` attribute 로 mirror. `deps` 가 바뀌면 native class patch가 반영된
- * 다음 frame에 재동기화하고, UI 표시 이벤트에서는 즉시 동기화.
+ * `tint-color` attribute 로 mirror. `deps` 또는 시스템 테마가 바뀌면 native class
+ * patch가 반영된 다음 frame에 재동기화하고, UI 표시 이벤트에서는 즉시 동기화.
  *
  * ```tsx
  * const iconColorProps = useIconColor([variant, disabled, loading]);

package/lib/hooks/useIconColor.js

@@ -1,4 +1,4 @@
-import { runOnMainThread, useEffect, useMainThreadRef } from "@lynx-js/react";
+import { runOnMainThread, useEffect, useGlobalProps, useMainThreadRef } from "@lynx-js/react";
 //#region src/hooks/useIconColor.ts
 function syncTintColorOnce(targetRef, sourceRef) {
 	"main thread";
@@ -31,8 +31,8 @@ function cancelTintColorSync(frameRef) {
 }
 /**
 * Lynx `<image>` 의 tint color 를 recipe 의 CSS `color` 로부터 main-thread 에서 읽어
-* `tint-color` attribute 로 mirror. `deps` 가 바뀌면 native class patch가 반영된
-* 다음 frame에 재동기화하고, UI 표시 이벤트에서는 즉시 동기화.
+* `tint-color` attribute 로 mirror. `deps` 또는 시스템 테마가 바뀌면 native class
+* patch가 반영된 다음 frame에 재동기화하고, UI 표시 이벤트에서는 즉시 동기화.
 *
 * ```tsx
 * const iconColorProps = useIconColor([variant, disabled, loading]);
@@ -44,6 +44,7 @@ function useIconColor(deps, options) {
 	const sourceRef = options?.sourceRef;
 	const enabled = options?.enabled ?? true;
 	const frameRef = useMainThreadRef(0);
+	const theme = useGlobalProps()?.theme;
 	function syncOnUiAppear() {
 		"main thread";
 		if (!enabled) return;
@@ -55,7 +56,11 @@ function useIconColor(deps, options) {
 		return () => {
 			runOnMainThread(cancelTintColorSync)(frameRef);
 		};
-	}, [...deps, enabled]);
+	}, [
+		...deps,
+		enabled,
+		theme
+	]);
 	return {
 		ref,
 		"main-thread:binduiappear": syncOnUiAppear

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/lynx-react",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -39,7 +39,7 @@
   "devDependencies": {
     "@lynx-js/react": "^0.117.0",
     "@lynx-js/types": "^3.7.0",
-    "@seed-design/lynx-css": "0.10.0",
+    "@seed-design/lynx-css": "0.10.2",
     "@testing-library/jest-dom": "^6.9.1",
     "jsdom": "^29.0.2",
     "preact": "npm:@lynx-js/internal-preact@10.28.4-ee7bb26",

package/src/hooks/useControllableState.test.ts

@@ -64,6 +64,56 @@ describe("useControllableState", () => {
   });
 
   describe("controlled mode", () => {
+    it.each([false, true])("notifies after an external change from %s", (initialValue) => {
+      const onChange = vi.fn();
+      const { result, rerender } = renderHook(
+        (props: { value: boolean }) =>
+          useControllableState({ value: props.value, defaultValue: false, onChange }),
+        { initialProps: { value: initialValue } },
+      );
+
+      rerender({ value: !initialValue });
+      expect(result.current[0]).toBe(!initialValue);
+      expect(onChange).not.toHaveBeenCalled();
+
+      act(() => result.current[1](!result.current[0]));
+
+      expect(onChange).toHaveBeenCalledExactlyOnceWith(initialValue);
+      rerender({ value: initialValue });
+      act(() => result.current[1](!result.current[0]));
+      expect(onChange).toHaveBeenNthCalledWith(2, !initialValue);
+      expect(onChange).toHaveBeenCalledTimes(2);
+    });
+
+    it("notifies again when the parent does not accept a change", () => {
+      const onChange = vi.fn();
+      const { result } = renderHook(() =>
+        useControllableState({ value: false, defaultValue: false, onChange }),
+      );
+
+      act(() => result.current[1](true));
+      act(() => result.current[1](true));
+
+      expect(result.current[0]).toBe(false);
+      expect(onChange).toHaveBeenCalledTimes(2);
+      expect(onChange).toHaveBeenNthCalledWith(1, true);
+      expect(onChange).toHaveBeenNthCalledWith(2, true);
+    });
+
+    it("does not notify for the current prop after an unaccepted change", () => {
+      const onChange = vi.fn();
+      const { result } = renderHook(() =>
+        useControllableState({ value: false, defaultValue: false, onChange }),
+      );
+
+      act(() => result.current[1](false));
+      expect(onChange).not.toHaveBeenCalled();
+      act(() => result.current[1](true));
+      act(() => result.current[1](false));
+
+      expect(onChange).toHaveBeenCalledExactlyOnceWith(true);
+    });
+
     it("uses the provided value", () => {
       const { result } = renderHook(() =>
         useControllableState({ value: "external", defaultValue: "default" }),

package/src/hooks/useControllableState.ts

@@ -25,9 +25,14 @@ export function useControllableState<T>(
   const prevValueRef = useRef(currentValue);
 
   const setValue = useMemoizedFn((nextValue: T) => {
-    if (!isControlled) {
-      setUncontrolledValue(nextValue);
+    if (isControlled) {
+      if (nextValue !== value) {
+        onChange?.(nextValue);
+      }
+      return;
     }
+
+    setUncontrolledValue(nextValue);
     if (nextValue !== prevValueRef.current) {
       onChange?.(nextValue);
       prevValueRef.current = nextValue;

package/src/hooks/useIconColor.test.ts

@@ -1,13 +1,49 @@
+import type * as ReactLynx from "@lynx-js/react";
 import { renderHook } from "@lynx-js/react/testing-library";
-import { describe, expect, it } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 
 import { useIconColor } from "./useIconColor";
 
+const testState = vi.hoisted(() => ({
+  theme: "light",
+  workletCalls: [] as number[],
+}));
+
+vi.mock("@lynx-js/react", async (importOriginal) => {
+  const actual = await importOriginal<typeof ReactLynx>();
+
+  return {
+    ...actual,
+    runOnMainThread:
+      (_worklet: (...args: never[]) => unknown) =>
+      (...args: unknown[]) => {
+        testState.workletCalls.push(args.length);
+      },
+    useGlobalProps: () => ({ theme: testState.theme }),
+  };
+});
+
 describe("useIconColor", () => {
+  beforeEach(() => {
+    testState.theme = "light";
+    testState.workletCalls.length = 0;
+  });
+
   it("returns icon tint sync props", () => {
     const { result } = renderHook(() => useIconColor([]));
 
     expect(result.current).toHaveProperty("ref");
     expect(result.current["main-thread:binduiappear"]).toBeDefined();
   });
+
+  it("schedules tint color synchronization when the system theme changes", () => {
+    const { rerender } = renderHook(() => useIconColor([]));
+
+    expect(testState.workletCalls).toEqual([3]);
+
+    testState.theme = "dark";
+    rerender();
+
+    expect(testState.workletCalls).toEqual([3, 1, 3]);
+  });
 });

package/src/hooks/useIconColor.ts

@@ -1,4 +1,4 @@
-import { runOnMainThread, useEffect, useMainThreadRef } from "@lynx-js/react";
+import { runOnMainThread, useEffect, useGlobalProps, useMainThreadRef } from "@lynx-js/react";
 import type { MainThread } from "@lynx-js/types";
 import type { DependencyList, RefObject } from "@lynx-js/react";
 
@@ -70,8 +70,8 @@ function cancelTintColorSync(frameRef: RefObject<number>) {
 
 /**
  * Lynx `<image>` 의 tint color 를 recipe 의 CSS `color` 로부터 main-thread 에서 읽어
- * `tint-color` attribute 로 mirror. `deps` 가 바뀌면 native class patch가 반영된
- * 다음 frame에 재동기화하고, UI 표시 이벤트에서는 즉시 동기화.
+ * `tint-color` attribute 로 mirror. `deps` 또는 시스템 테마가 바뀌면 native class
+ * patch가 반영된 다음 frame에 재동기화하고, UI 표시 이벤트에서는 즉시 동기화.
  *
  * ```tsx
  * const iconColorProps = useIconColor([variant, disabled, loading]);
@@ -89,6 +89,7 @@ export function useIconColor(
   const sourceRef = options?.sourceRef as RefObject<IconElement> | undefined;
   const enabled = options?.enabled ?? true;
   const frameRef = useMainThreadRef<number>(0);
+  const theme = (useGlobalProps() as { theme?: unknown } | undefined)?.theme;
 
   function syncOnUiAppear() {
     "main thread";
@@ -96,7 +97,6 @@ export function useIconColor(
     syncTintColorOnce(ref, sourceRef);
   }
 
-  // deps 는 caller 가 책임.
   useEffect(() => {
     if (!enabled) return;
 
@@ -104,7 +104,7 @@ export function useIconColor(
     return () => {
       runOnMainThread(cancelTintColorSync)(frameRef);
     };
-  }, [...deps, enabled]);
+  }, [...deps, enabled, theme]);
 
   return { ref, "main-thread:binduiappear": syncOnUiAppear };
 }