@seed-design/lynx-react 0.6.1 → 0.6.3

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.map

@@ -1 +1 @@
-{"version":3,"file":"useIconColor.d.ts","sourceRoot":"","sources":["../../src/hooks/useIconColor.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAOhE,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA0DD;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,cAAc,EACpB,OAAO,CAAC,EAAE,mBAAmB,GAC5B;IACD,GAAG,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACnC,0BAA0B,EAAE,MAAM,IAAI,CAAC;CACxC,CAuBA"}
+{"version":3,"file":"useIconColor.d.ts","sourceRoot":"","sources":["../../src/hooks/useIconColor.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAOhE,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA0DD;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,cAAc,EACpB,OAAO,CAAC,EAAE,mBAAmB,GAC5B;IACD,GAAG,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACnC,0BAA0B,EAAE,MAAM,IAAI,CAAC;CACxC,CA6BA"}

package/lib/hooks/useIconColor.js

@@ -1,4 +1,4 @@
-import { runOnMainThread, useEffect, useGlobalProps, useMainThreadRef } from "@lynx-js/react";
+import { runOnMainThread, useEffect, useGlobalProps, useMainThreadRef, useRef } from "@lynx-js/react";
 //#region src/hooks/useIconColor.ts
 function syncTintColorOnce(targetRef, sourceRef) {
 	"main thread";
@@ -45,12 +45,17 @@ function useIconColor(deps, options) {
 	const enabled = options?.enabled ?? true;
 	const frameRef = useMainThreadRef(0);
 	const theme = useGlobalProps()?.theme;
+	const hasMountedRef = useRef(false);
 	function syncOnUiAppear() {
 		"main thread";
 		if (!enabled) return;
-		syncTintColorOnce(ref, sourceRef);
+		scheduleTintColorSync(ref, sourceRef, frameRef);
 	}
 	useEffect(() => {
+		if (!hasMountedRef.current) {
+			hasMountedRef.current = true;
+			return;
+		}
 		if (!enabled) return;
 		runOnMainThread(scheduleTintColorSync)(ref, sourceRef, frameRef);
 		return () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/lynx-react",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "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.1",
+    "@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/components/Icon/Icon.test.tsx

@@ -80,7 +80,7 @@ function installMainThreadStyleMocks(getComputedColor: () => string) {
 }
 
 describe("InternalIcon", () => {
-  it("reads the updated computed color in the next frame", async () => {
+  it("reads the updated computed color after dependency changes", async () => {
     let computedColor = "rgb(134, 139, 148)";
     const { frames, runNextFrame } = installMainThreadStyleMocks(() => computedColor);
 
@@ -94,16 +94,14 @@ describe("InternalIcon", () => {
     await waitSchedule();
 
     const { image } = getSourceAndImage();
-    expect(frames.size).toBe(1);
-    runNextFrame();
-
-    expect(image.getAttribute("tint-color")).toBe("rgb(134, 139, 148)");
+    expect(frames.size).toBe(0);
+    expect(image.getAttribute("tint-color")).toBeNull();
 
     rerender(renderIcon("checked"));
     await waitSchedule();
 
     expect(frames.size).toBe(1);
-    expect(image.getAttribute("tint-color")).toBe("rgb(134, 139, 148)");
+    expect(image.getAttribute("tint-color")).toBeNull();
 
     computedColor = "rgb(255, 102, 0)";
     runNextFrame();

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

@@ -15,7 +15,7 @@ vi.mock("@lynx-js/react", async (importOriginal) => {
   return {
     ...actual,
     runOnMainThread:
-      (_worklet: (...args: never[]) => unknown) =>
+      () =>
       (...args: unknown[]) => {
         testState.workletCalls.push(args.length);
       },
@@ -36,14 +36,14 @@ describe("useIconColor", () => {
     expect(result.current["main-thread:binduiappear"]).toBeDefined();
   });
 
-  it("schedules tint color synchronization when the system theme changes", () => {
+  it("avoids cross-thread calls on mount and resynchronizes after theme changes", () => {
     const { rerender } = renderHook(() => useIconColor([]));
 
-    expect(testState.workletCalls).toEqual([3]);
+    expect(testState.workletCalls).toEqual([]);
 
     testState.theme = "dark";
     rerender();
 
-    expect(testState.workletCalls).toEqual([3, 1, 3]);
+    expect(testState.workletCalls).toEqual([3]);
   });
 });

package/src/hooks/useIconColor.ts

@@ -1,4 +1,4 @@
-import { runOnMainThread, useEffect, useGlobalProps, useMainThreadRef } from "@lynx-js/react";
+import { runOnMainThread, useEffect, useGlobalProps, useMainThreadRef, useRef } from "@lynx-js/react";
 import type { MainThread } from "@lynx-js/types";
 import type { DependencyList, RefObject } from "@lynx-js/react";
 
@@ -90,14 +90,20 @@ export function useIconColor(
   const enabled = options?.enabled ?? true;
   const frameRef = useMainThreadRef<number>(0);
   const theme = (useGlobalProps() as { theme?: unknown } | undefined)?.theme;
+  const hasMountedRef = useRef(false);
 
   function syncOnUiAppear() {
     "main thread";
     if (!enabled) return;
-    syncTintColorOnce(ref, sourceRef);
+    scheduleTintColorSync(ref, sourceRef, frameRef);
   }
 
   useEffect(() => {
+    if (!hasMountedRef.current) {
+      hasMountedRef.current = true;
+      return;
+    }
+
     if (!enabled) return;
 
     runOnMainThread(scheduleTintColorSync)(ref, sourceRef, frameRef);