@seed-design/lynx-react 0.6.1 → 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/package.json

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