@inseefr/lunatic 3.5.8 → 3.6.1

package/src/use-lunatic/hooks/useCallbackOnNextRender.test.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { useCallbackOnNextRender } from './useCallbackOnNextRender.js';
+import { act, fireEvent, render } from '@testing-library/react';
+
+describe('useCallbackOnNextRender', () => {
+	// Since we want to test when the callback is called, we need to keep track of the count state inside the component
+	let countSpy = 0;
+
+	const FakeComponent = (props: { onChange: () => void }) => {
+		const onChange = useCallbackOnNextRender(props.onChange);
+		const [count, setCount] = useState(0);
+		countSpy = count;
+
+		const onClick = () => {
+			setCount((v) => v + 1);
+			onChange();
+		};
+
+		return <button onClick={onClick}>{count}</button>;
+	};
+
+	it('should call the callback on the next render', () => {
+		let resolveSpy: (e?: unknown) => void;
+		const spyPromise = new Promise((resolve) => {
+			resolveSpy = resolve;
+		});
+		const onChange = vi.fn(() => {
+			try {
+				expect(countSpy).toBe(1);
+				resolveSpy();
+			} catch (e) {
+				resolveSpy(e);
+			}
+		});
+		const { getByRole } = render(<FakeComponent onChange={onChange} />);
+		act(() => {
+			fireEvent.click(getByRole('button'));
+		});
+
+		expect(onChange).toHaveBeenCalledTimes(1);
+
+		return spyPromise.then((r) => {
+			if (r instanceof Error) {
+				throw r;
+			}
+			expect(countSpy).toBe(1);
+		});
+	});
+});

package/src/use-lunatic/hooks/useCallbackOnNextRender.ts

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+/**
+ * Run a callback on that will be run on the next render
+ */
+export function useCallbackOnNextRender<T extends (...args: unknown[]) => void>(
+	cb: T
+): T {
+	const callOnNextRender = useRef<Parameters<T> | null>(null);
+	const cbRef = useRef(cb);
+	cbRef.current = cb;
+
+	// use useEffect to run the callback at the end of the next render
+	useEffect(() => {
+		if (callOnNextRender.current === null) {
+			return;
+		}
+		try {
+			cbRef.current(...callOnNextRender.current);
+		} catch (e) {
+			console.error(e);
+		}
+		callOnNextRender.current = null;
+		// eslint-disable-next-line react-hooks/exhaustive-deps -- We want to run the callback when the value of the ref changed on the next render
+	}, [callOnNextRender.current]);
+
+	// When the function is called, we store the arguments to be called on the next render (when state was really updated)
+	return useCallback((...args: Parameters<T>) => {
+		callOnNextRender.current = args;
+	}, []) as T;
+}

package/src/use-lunatic/props/getComponentTypeProps.ts

@@ -49,7 +49,8 @@ function getChildComponents(
 			component.components,
 			state,
 			undefined,
-			component.conditionFilter
+			component.conditionFilter,
+			component.conditionReadOnly
 		),
 	};
 }

package/src/use-lunatic/use-lunatic.ts

@@ -32,6 +32,7 @@ import { mergeDefault } from '../utils/object';
 import { useRefSync } from '../hooks/useRefSync';
 import { ConsoleLogger } from './logger/ConsoleLogger';
 import { useWarnDepChange } from './hooks/useWarnDepChange';
+import { useCallbackOnNextRender } from './hooks/useCallbackOnNextRender';
 
 const empty = {}; // Keep the same empty object (to avoid problem with useEffect dependencies)
 const DEFAULT_DATA = empty as LunaticData;
@@ -169,12 +170,14 @@ export function useLunatic(
 		[dispatch]
 	);
 
+	const onChangeAfterRender = useCallbackOnNextRender(onChange);
+
 	const handleChanges = useCallback<LunaticChangesHandler>(
 		(responses) => {
 			dispatch(handleChangesAction(responses));
-			onChange(responses);
+			onChangeAfterRender(responses);
 		},
-		[dispatch, onChange]
+		[dispatch, onChangeAfterRender]
 	);
 
 	const getData: LunaticState['getData'] = (