@inseefr/lunatic 3.12.2 → 3.13.0

package/src/components/Suggester/CustomSuggester.tsx

@@ -15,7 +15,13 @@ type Props = {
 	onBlur: () => void;
 	onFocus: () => void;
 	value: [SuggesterOptionType] | [];
+	/**
+	 * @deprecated use createCustomizableField with ComboboxLabelRenderer as name.
+	 */
 	labelRenderer: LunaticComponentProps<'Suggester'>['labelRenderer'];
+	/**
+	 * @deprecated use createCustomizableField with ComboboxOptionRenderer as name.
+	 */
 	optionRenderer: LunaticComponentProps<'Suggester'>['optionRenderer'];
 	disabled?: boolean;
 	readOnly?: boolean;
@@ -74,6 +80,7 @@ export const CustomSuggester = slottableComponent<Props>(
 				disabled={disabled}
 				readOnly={readOnly}
 				options={options.map((o) => ({ value: o.id, ...o }))}
+				shouldDisplayOptionsId={true}
 				editable={true}
 				onBlur={onBlur}
 				onFocus={onFocus}

package/src/components/shared/Combobox/Combobox.tsx

@@ -57,6 +57,7 @@ function LunaticComboBox({
 	onSelect,
 	value,
 	options,
+	shouldDisplayOptionsId = true,
 	messageError,
 	search = EMPTY_SEARCH,
 	getOptionValue = getDefaultOptionValue,
@@ -184,6 +185,7 @@ function LunaticComboBox({
 					isLoading={isLoading}
 					optionRenderer={optionRenderer}
 					options={options}
+					shouldDisplayOptionsId={shouldDisplayOptionsId}
 					focused={focused}
 					selectedIndex={selectedIndex}
 					expanded={expanded}
@@ -212,15 +214,14 @@ function getIndexFromOptions(
 	if (!Array.isArray(options)) {
 		return undefined;
 	}
-	return options.map(getOptionValue).findIndex((v) => v === value);
+	return options.map(getOptionValue).indexOf(value ?? '');
 }
 
 /**
  * Extract value from an option item
  */
-function getDefaultOptionValue(option: ComboboxOptionType = { value: '' }) {
-	const { id, value } = option;
-	return id || value;
+function getDefaultOptionValue(option?: ComboboxOptionType) {
+	return option?.id || option?.value || '';
 }
 
 export const Combobox = slottableComponent('Combobox', LunaticComboBox);

package/src/components/shared/Combobox/ComboboxType.ts

@@ -44,6 +44,7 @@ export type ComboboxPanelProps = {
 		search?: string;
 	}>;
 	options: Array<ComboboxOptionType>;
+	shouldDisplayOptionsId?: boolean;
 	focused?: boolean;
 	selectedIndex?: number | string | null;
 	expanded?: boolean;

package/src/components/shared/Combobox/Panel/ComboboxOption.spec.tsx

@@ -14,13 +14,35 @@ describe('DefaultOptionRenderer', () => {
 		expect(labelElement).toBeNull();
 	});
 
-	it('renders with label', () => {
+	it('renders with label and displays id by default', () => {
 		const option = { id: '1', value: 'Value', label: 'Label' };
 		const { getByText } = render(<ComboboxOption option={option} />);
-		const idElement = getByText(option.id);
-		const labelElement = getByText(option.label);
-		expect(idElement).toBeInTheDocument();
-		expect(labelElement).toBeInTheDocument();
+
+		expect(getByText(option.id)).toBeInTheDocument();
+		expect(getByText('-')).toBeInTheDocument();
+		expect(getByText(option.label)).toBeInTheDocument();
+	});
+
+	it('renders with label and displays id when prop is true', () => {
+		const option = { id: '1', value: 'Value', label: 'Label' };
+		const { getByText } = render(
+			<ComboboxOption option={option} shouldDisplayOptionId={true} />
+		);
+
+		expect(getByText(option.id)).toBeInTheDocument();
+		expect(getByText('-')).toBeInTheDocument();
+		expect(getByText(option.label)).toBeInTheDocument();
+	});
+
+	it('renders with label and does not display id when prop is false', () => {
+		const option = { id: '1', value: 'Value', label: 'Label' };
+		const { getByText, queryByText } = render(
+			<ComboboxOption option={option} shouldDisplayOptionId={false} />
+		);
+
+		expect(queryByText(option.id)).not.toBeInTheDocument();
+		expect(queryByText('-')).not.toBeInTheDocument();
+		expect(getByText(option.label)).toBeInTheDocument();
 	});
 
 	it('renders with selected class', () => {

package/src/components/shared/Combobox/Panel/ComboboxOption.tsx

@@ -5,12 +5,13 @@ import D from '../../../../i18n';
 
 type Props = {
 	option: ComboboxOptionType;
+	shouldDisplayOptionId?: boolean;
 	selected?: boolean;
 };
 
 export const ComboboxOption = slottableComponent(
 	'ComboboxOption',
-	({ option, selected }: Props) => {
+	({ option, shouldDisplayOptionId = true, selected }: Props) => {
 		const { id, value, label } = option;
 
 		if (value === 'OTHER') {
@@ -22,19 +23,22 @@ export const ComboboxOption = slottableComponent(
 				</div>
 			);
 		}
-
-		if (label && typeof label === 'string' && label.length) {
+		if (label) {
 			return (
 				<div className={classnames('lunatic-combo-box-option', { selected })}>
-					<span className="id">{id || value}</span>
-					<span> - </span>
+					{shouldDisplayOptionId && (
+						<>
+							<span className="id">{id || value}</span>
+							<span> - </span>
+						</>
+					)}
 					<span className="label">{label}</span>
 				</div>
 			);
 		}
 		return (
 			<div className={classnames('lunatic-combo-box-option', { selected })}>
-				<span className="id">{id}</span>
+				<span className="id">{id || value}</span>
 			</div>
 		);
 	}

package/src/components/shared/Combobox/Panel/ComboboxPanel.tsx

@@ -10,6 +10,7 @@ import D from '../../../../i18n';
 export function ComboboxPanel({
 	optionRenderer: OptionRender,
 	options = [],
+	shouldDisplayOptionsId,
 	focused,
 	selectedIndex,
 	expanded,
@@ -17,7 +18,7 @@ export function ComboboxPanel({
 	search,
 	onSelect,
 	isLoading,
-}: ComboboxPanelProps) {
+}: Readonly<ComboboxPanelProps>) {
 	const visibleOptions = expanded ? options : [];
 
 	const ComboBoxOptionComponent = OptionRender ?? ComboboxOption;
@@ -84,6 +85,7 @@ export function ComboboxPanel({
 				>
 					<ComboBoxOptionComponent
 						option={option}
+						shouldDisplayOptionId={shouldDisplayOptionsId}
 						selected={selectedIndex === index}
 						search={search}
 					/>

package/src/components/type.ts

@@ -261,11 +261,17 @@ export type ComponentPropsByType = {
 	Suggester: LunaticBaseProps<string | null> & {
 		componentType?: 'Suggester';
 		storeName: string;
+		/**
+		 * @deprecated use createCustomizableField with ComboboxOptionRenderer as name.
+		 */
 		optionRenderer: FunctionComponent<{
 			option: SuggesterOption;
 			placeholder?: string;
 			search?: string;
 		}>;
+		/**
+		 * @deprecated use createCustomizableField with ComboboxLabelRenderer as name.
+		 */
 		labelRenderer: FunctionComponent<{
 			option?: SuggesterOption;
 			selected?: boolean;

package/src/stories/checkbox/sourceOneDynamicOptions.json

@@ -6,7 +6,22 @@
 	},
 	"modele": "FEATQCUBAS",
 	"maxPage": "7",
-	"cleaning": {},
+	"cleaning": {
+		"PRENOM": {
+			"QCUHORSBOU": [
+				{
+					"expression": false
+				}
+			],
+			"QCUDANSBOU": [
+				{
+					"expression": false,
+					"shapeFrom": "PRENOM",
+					"shouldCheckAllIterations": true
+				}
+			]
+		}
+	},
 	"resizing": {
 		"NBHAB": {
 			"size": "NBHAB",

package/src/stories/dropdown/sourceDynamicOptions.json

@@ -6,7 +6,22 @@
 	},
 	"modele": "FEATQCUBAS",
 	"maxPage": "7",
-	"cleaning": {},
+	"cleaning": {
+		"PRENOM": {
+			"QCUHORSBOU": [
+				{
+					"expression": false
+				}
+			],
+			"QCUDANSBOU": [
+				{
+					"expression": false,
+					"shapeFrom": "PRENOM",
+					"shouldCheckAllIterations": true
+				}
+			]
+		}
+	},
 	"resizing": {
 		"NBHAB": {
 			"size": "NBHAB",

package/src/stories/radio/sourceDynamicOptions.json

@@ -6,7 +6,22 @@
 	},
 	"modele": "FEATQCUBAS",
 	"maxPage": "7",
-	"cleaning": {},
+	"cleaning": {
+		"PRENOM": {
+			"QCUHORSBOU": [
+				{
+					"expression": false
+				}
+			],
+			"QCUDANSBOU": [
+				{
+					"expression": false,
+					"shapeFrom": "PRENOM",
+					"shouldCheckAllIterations": true
+				}
+			]
+		}
+	},
 	"resizing": {
 		"NBHAB": {
 			"size": "NBHAB",

package/src/type.source.ts

@@ -302,6 +302,7 @@ export type LunaticSource = {
 						expression: string;
 						shapeFrom?: string;
 						isAggregatorUsed: boolean;
+						shouldCheckAllIterations?: boolean;
 				  }[];
 		};
 	};

package/src/use-lunatic/commons/variables/behaviours/cleaning-behaviour.ts

@@ -7,6 +7,13 @@ import { depth, setAtIndex } from '../../../../utils/array';
 import { castBool } from '../../../../utils/cast';
 import { IterationLevel } from '../models';
 
+type CleaningExpression = {
+	expression: string;
+	shapeFrom?: string;
+	isAggregatorUsed: boolean;
+	shouldCheckAllIterations?: boolean;
+};
+
 /**
  * Implements the cleaning behavior for the variable store.
  * When a variable changes, this function determines which other variables
@@ -130,13 +137,7 @@ function shouldClean(
 		iteration,
 		isResizing,
 	}: {
-		expressions:
-			| string
-			| {
-					expression: string;
-					shapeFrom?: string;
-					isAggregatorUsed: boolean;
-			  }[];
+		expressions: string | CleaningExpression[];
 		iteration?: number[];
 		isResizing: boolean;
 	}
@@ -156,6 +157,42 @@ function shouldClean(
 		expressions = expressions.filter((expr) => expr.isAggregatorUsed);
 	}
 
+	// At least one expression requires to compute on each iteration
+	if (shouldCheckAtAllIterations(expressions)) {
+		const shapeFromVariable = store.get(
+			expressions[0].shapeFrom as string
+		) as Array<unknown>;
+
+		const shouldCleanArray = new Array(shapeFromVariable.length).fill(
+			false
+		) as Array<boolean>;
+
+		const expressionsToCheckAtAllIterations: CleaningExpression[] = [];
+		const expressionsNotToCheckAtAllIterations: CleaningExpression[] = [];
+
+		for (const expression of expressions) {
+			if (expression.shouldCheckAllIterations) {
+				expressionsToCheckAtAllIterations.push(expression);
+			} else {
+				expressionsNotToCheckAtAllIterations.push(expression);
+			}
+		}
+
+		for (const [iterationIndex] of shouldCleanArray.entries()) {
+			shouldCleanArray[iterationIndex] =
+				// check if we need to clean each iteration according to expression
+				shouldCleanAtIteration(store, {
+					expressions: expressionsToCheckAtAllIterations,
+					iteration: [iterationIndex],
+				}) ||
+				shouldCleanAtIteration(store, {
+					expressions: expressionsNotToCheckAtAllIterations,
+					iteration,
+				});
+		}
+		return shouldCleanArray;
+	}
+
 	// If expressions have shapeFrom and we're at root level, we need to check each iteration individually
 	if (hasShapeFrom(expressions) && !iteration) {
 		const shapeFromVariable = store.get(
@@ -167,27 +204,43 @@ function shouldClean(
 		) as Array<boolean>;
 
 		for (const [iterationIndex] of shouldCleanArray.entries()) {
-			shouldCleanArray[iterationIndex] = shouldClean(store, {
+			shouldCleanArray[iterationIndex] = shouldCleanAtIteration(store, {
 				expressions,
 				iteration: [iterationIndex],
-				isResizing,
-			}) as boolean;
+			});
 		}
 		return shouldCleanArray;
 	} else {
-		// Clean the variable if any condition is false (variable is not visible),
-		for (const expression of expressions) {
-			if (
-				!store.run(expression.expression, {
-					iteration,
-				})
-			)
-				return true;
-		}
+		return shouldCleanAtIteration(store, { expressions, iteration });
+	}
+}
 
-		// All conditions are true, no cleaning needed
-		return false;
+function shouldCheckAtAllIterations(expressions: CleaningExpression[]) {
+	return expressions.some((expression) => expression.shouldCheckAllIterations);
+}
+
+function shouldCleanAtIteration(
+	store: LunaticVariablesStore,
+	{
+		expressions,
+		iteration,
+	}: {
+		expressions: CleaningExpression[];
+		iteration?: number[];
 	}
+) {
+	// Clean the variable if any condition is false (variable is not visible),
+	for (const expression of expressions) {
+		if (
+			!store.run(expression.expression, {
+				iteration,
+			})
+		)
+			return true;
+	}
+
+	// All conditions are true, no cleaning needed
+	return false;
 }
 
 /**

package/src/use-lunatic/commons/variables/lunatic-variables-store.spec.ts

@@ -572,6 +572,65 @@ describe('lunatic-variables-store', () => {
 			variables.set('PRENOM', ['John', 'Jane']);
 			expect(variables.get('AGE')).toEqual([null, null]);
 		});
+		it('should check every iteration when configured from an iterated source change', () => {
+			// Given
+			variables.set('PRENOM', ['Marc', 'Marc', 'Marc']);
+			variables.set('QCU', ['A', 'B', 'B']);
+			cleaningBehaviour(
+				variables,
+				{
+					PRENOM: {
+						QCU: [
+							{
+								expression: 'PRENOM <> "Marc"',
+								shapeFrom: 'PRENOM',
+								isAggregatorUsed: false,
+								shouldCheckAllIterations: true,
+							},
+						],
+					},
+				},
+				{ PRENOM: [], QCU: [null] }
+			);
+
+			// When
+			variables.set('PRENOM', 'Patrick', { iteration: [0] });
+
+			// Then
+			expect(variables.get('QCU')).toEqual(['A', null, null]);
+		});
+		it('should handle simultaneously expressions that should check every iteration and expression that should not ', () => {
+			// Given
+			variables.set('PRENOM', ['Marc', 'Marc', 'Marc']);
+			variables.set('QCU', ['A', 'B', 'B']);
+			cleaningBehaviour(
+				variables,
+				{
+					PRENOM: {
+						QCU: [
+							{
+								expression: 'PRENOM <> ""',
+								shapeFrom: 'PRENOM',
+								isAggregatorUsed: false,
+							},
+							{
+								expression: 'PRENOM <> "Marc"',
+								shapeFrom: 'PRENOM',
+								isAggregatorUsed: false,
+								shouldCheckAllIterations: true,
+							},
+						],
+					},
+				},
+				{ PRENOM: [], QCU: [null] }
+			);
+
+			// When
+			variables.set('PRENOM', '', { iteration: [0] });
+
+			// Then
+			expect(variables.get('QCU')).toEqual([null, null, null]);
+		});
 		it('should clean pairwise in two directions', () => {
 			variables.set('LINKS', [
 				[null, '1', '3'],