@inseefr/lunatic 3.8.0-rc.ucq-options-variable.0 → 3.8.1-rc.0

package/src/components/Suggester/Suggester.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import type { LunaticComponentProps } from '../type';
 import { CustomSuggester } from './CustomSuggester';
 import { getComponentErrors } from '../shared/ComponentErrors/ComponentErrors';
-import { OTHER_VALUE, useSuggestions } from './useSuggestions';
+import { OTHER_VALUE, useStore, useSuggestions } from './useSuggestions';
 import D from '../../i18n';
 import type { SuggesterOptionType } from './SuggesterType';
 
@@ -36,6 +36,10 @@ export function WrappedSuggester({
 	arbitrary,
 	arbitraryValue,
 }: LunaticComponentProps<'Suggester'>) {
+	const { store, storeState, setStoreState, getLabelById } = useStore({
+		storeName,
+	});
+
 	// Default options should not change between render
 	// so we can break the rule of hooks here
 	const computeSelectedOptions = (): [SuggesterOptionType] | [] => {
@@ -47,7 +51,7 @@ export function WrappedSuggester({
 		}
 		const labelResponse = optionResponses?.find((o) => o.attribute === 'label');
 		if (!labelResponse) {
-			return [{ id: value, label: value, value: value }];
+			return [{ id: value, label: getLabelById(value), value: value }];
 		}
 		const label = executeExpression(
 			{ value: labelResponse.name, type: 'VTL' },
@@ -73,7 +77,9 @@ export function WrappedSuggester({
 
 	const { state, options, search, setSearch, onFocus, onBlur } = useSuggestions(
 		{
-			storeName: storeName,
+			store,
+			storeState,
+			setStoreState,
 			allowArbitrary: !!arbitrary,
 			selectedOptions: selectedOptions,
 		}
@@ -110,7 +116,7 @@ export function WrappedSuggester({
 			{ name: response.name, value: null },
 		];
 		// User chose an arbitrary option or clear the value
-		if (arbitrary && arbitrary.response) {
+		if (arbitrary?.response) {
 			newResponses.push({
 				name: arbitrary.response.name,
 				value: v?.id === OTHER_VALUE ? search : null,
@@ -145,11 +151,18 @@ export function WrappedSuggester({
 		setSearch('');
 	};
 
-	// Fix display issue (when handleChanges is called outside this component (in management mode, return to FORCED value by example) )
-	// We have to re-compute actual selection
 	useEffect(() => {
-		if (value) {
-			setSelectedOptions(computeSelectedOptions());
+		// Fix display issue (when handleChanges is called outside this component (in management mode, return to FORCED value by example)
+		// "value" does'nt match selectedOption's "id"
+		if (value && selectedOptions[0]?.id !== value) {
+			const actualSelection = computeSelectedOptions();
+			const selectedOptionsWithLabel = [
+				{
+					...actualSelection[0],
+					label: getLabelById(actualSelection[0]?.id),
+				},
+			] as [SuggesterOptionType];
+			setSelectedOptions(selectedOptionsWithLabel);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [value]);

package/src/components/Suggester/useSuggestions.ts

@@ -1,11 +1,16 @@
 import { useEffect, useState } from 'react';
 import type { SuggesterOptionType } from './SuggesterType';
 import { useEffectDebounced } from '../../hooks/useDebounce';
-import { getSearchForStore } from '../../utils/search/SuggestersDatabase';
+import {
+	getSearchForStore,
+	SearchStore,
+} from '../../utils/search/SuggestersDatabase';
 import { useRefSync } from '../../hooks/useRefSync';
 
 type Props = {
-	storeName: string;
+	store: SearchStore;
+	storeState: State;
+	setStoreState: (s: State) => any;
 	selectedOptions: SuggesterOptionType[];
 	allowArbitrary: boolean;
 };
@@ -14,20 +19,13 @@ export const OTHER_VALUE = 'OTHER';
 
 type State = 'success' | 'loading' | 'error';
 
-export function useSuggestions({
-	storeName,
-	selectedOptions,
-	allowArbitrary,
-}: Props) {
-	const [searchQuery, setSearchQuery] = useState('');
+export function useStore({ storeName }: { storeName: string }) {
 	const store = getSearchForStore(storeName);
 	const searchIndexRef = useRefSync(store.index);
-	// eslint-disable-next-line prefer-const
-	let [options, setOptions] = useState(selectedOptions);
 	const [state, setState] = useState<State>(
 		store.error !== null
 			? 'error'
-			: store.search.isIndexed()
+			: store?.search.isIndexed()
 				? 'success'
 				: 'loading'
 	);
@@ -47,19 +45,42 @@ export function useSuggestions({
 			});
 	}, [searchIndexRef]);
 
+	return {
+		store,
+		storeState: state,
+		setStoreState: setState,
+		getLabelById: (id: any) => {
+			if (!id) return '';
+			return store.search?.getFieldsById(id).label ?? '';
+		},
+	};
+}
+
+export function useSuggestions({
+	store,
+	storeState: state,
+	setStoreState: setState,
+	selectedOptions,
+	allowArbitrary,
+}: Props) {
+	const [searchQuery, setSearchQuery] = useState('');
+	// eslint-disable-next-line prefer-const
+	let [options, setOptions] = useState(selectedOptions);
+
 	useEffectDebounced(
 		() => {
 			// Do not reset search for empty search
 			if (!searchQuery) {
 				return;
 			}
-			store.search
-				?.search(searchQuery)
-				.then((r) => {
-					setOptions(r);
-					setState('success');
-				})
-				.catch(() => setState('error'));
+			if (store.error === null)
+				store.search
+					?.search(searchQuery)
+					.then((r) => {
+						setOptions(r);
+						setState('success');
+					})
+					.catch(() => setState('error'));
 		},
 		[searchQuery],
 		300

package/src/stories/checkbox/checkbox.stories.tsx

@@ -1,4 +1,3 @@
-import { dataFromObject } from '../../utils/object';
 import {
 	type Orchestrator,
 	OrchestratorMeta,
@@ -11,7 +10,6 @@ import sourceGroupDetail from './sourceGroupDetail.json';
 import sourceGroupLoop from './sourceGroupLoop.json';
 import sourceOne from './sourceOne.json';
 import sourceOneDetail from './sourceOneDetail.json';
-import sourceOneDynamicOptions from './sourceOneDynamicOptions.json';
 
 import { Meta } from '@storybook/react';
 
@@ -75,14 +73,3 @@ export const CheckboxOneWithDetail: OrchestratorStory = {
 		source: sourceOneDetail,
 	},
 };
-
-export const CheckboxOneDynamicOptions: OrchestratorStory = {
-	args: {
-		source: sourceOneDynamicOptions,
-		data: dataFromObject({
-			NBHAB: 3,
-			PRENOM: ['Verso', 'Maëlle', 'Aline'],
-			AGE: [30, 16, 50],
-		}),
-	},
-};

package/src/stories/dropdown/dropdown.stories.tsx

@@ -4,7 +4,6 @@ import {
 	type OrchestratorStory,
 } from '../utils/Orchestrator';
 import source from './source.json';
-import sourceDynamicOptions from './sourceDynamicOptions.json';
 
 import { Meta } from '@storybook/react';
 
@@ -26,14 +25,3 @@ export const Default: OrchestratorStory = {
 		}),
 	},
 };
-
-export const DynamicOptions: OrchestratorStory = {
-	args: {
-		source: sourceDynamicOptions,
-		data: dataFromObject({
-			NBHAB: 3,
-			PRENOM: ['Verso', 'Maëlle', 'Aline'],
-			AGE: [30, 16, 50],
-		}),
-	},
-};

package/src/stories/radio/radio.stories.tsx

@@ -7,10 +7,8 @@ import source from './source.json';
 import sourceHorizontal from './sourceHorizontal.json';
 import sourceDetail from './sourceDetail.json';
 import sourceCondition from './sourceCondition.json';
-import sourceDynamicOptions from './sourceDynamicOptions.json';
 
 import { Meta } from '@storybook/react';
-import { dataFromObject } from '../../utils/object';
 
 const meta: Meta<typeof Orchestrator> = {
 	title: 'Components/Radio',
@@ -53,14 +51,3 @@ export const WithDetail: OrchestratorStory = {
 		source: sourceDetail,
 	},
 };
-
-export const DynamicOptions: OrchestratorStory = {
-	args: {
-		source: sourceDynamicOptions,
-		data: dataFromObject({
-			NBHAB: 3,
-			PRENOM: ['Verso', 'Maëlle', 'Aline'],
-			AGE: [30, 16, 50],
-		}),
-	},
-};

package/src/type.source.ts

@@ -159,9 +159,7 @@ export type ComponentCheckboxBooleanDefinition =
 export type ComponentRadioDefinition = ComponentDefinitionBaseWithResponse & {
 	componentType: 'Radio';
 	orientation?: 'horizontal' | 'vertical';
-	options?: OptionsWithDetail;
-	optionSource?: string;
-	optionFilter?: VTLExpression;
+	options: OptionsWithDetail;
 };
 export type OptionsWithDetail = {
 	value: string | boolean;
@@ -178,9 +176,7 @@ export type OptionsWithDetail = {
 export type ComponentDropdownDefinition =
 	ComponentDefinitionBaseWithResponse & {
 		componentType: 'Dropdown';
-		options?: Options;
-		optionSource?: string;
-		optionFilter?: VTLExpression;
+		options: Options;
 	};
 export type ComponentQuestionDefinition = ComponentDefinitionBase & {
 	componentType: 'Question';
@@ -189,9 +185,7 @@ export type ComponentQuestionDefinition = ComponentDefinitionBase & {
 export type ComponentCheckboxOneDefinition =
 	ComponentDefinitionBaseWithResponse & {
 		componentType: 'CheckboxOne';
-		options?: OptionsWithDetail;
-		optionSource?: string;
-		optionFilter?: VTLExpression;
+		options: OptionsWithDetail;
 	};
 export type ComponentSuggesterDefinition =
 	ComponentDefinitionBaseWithResponse & {

package/src/use-lunatic/commons/fill-components/fill-component-expressions.ts

@@ -91,8 +91,7 @@ type UntranslatedProperties =
 	| 'controls'
 	| 'conditionFilter'
 	| 'conditionReadOnly'
-	| 'components'
-	| 'optionFilter';
+	| 'components';
 export type DeepTranslateExpression<T> = T extends LunaticExpression
 	? ReactNode
 	: T extends (infer ElementType)[]

package/src/use-lunatic/commons/fill-components/fill-components.ts

@@ -11,7 +11,7 @@ import type { LunaticComponentProps } from '../../../components/type';
 import { getMissingResponseProp } from '../../props/propMissingResponse';
 import { getValueProp } from '../../props/propValue';
 import { getIterationsProp } from '../../props/propIterations';
-import { computeOptionsFromComponent } from '../../props/propOptions';
+import { getOptionsProp } from '../../props/propOptions';
 import { LunaticLogger } from '../../logger/type';
 import { VTLScalarExpression } from '../../../type.source';
 
@@ -80,15 +80,16 @@ export const fillComponent = (
 		missingResponse: getMissingResponseProp(component, state),
 		management: state.management,
 		iterations: getIterationsProp(component, state),
-		options: computeOptionsFromComponent(interpretedProps, {
-			variables: state.variables,
-			handleChanges: state.handleChanges,
-			pagerIteration: state.pager.iteration,
+		options: getOptionsProp(
+			interpretedProps,
+			state.variables,
+			state.handleChanges,
+			state.pager.iteration,
 			value,
-			logger: state.logger,
-			disableFilters: state.disableFilters,
-			shouldParentBeFiltered: shouldBeFiltered,
-		}),
+			state.logger,
+			state.disableFilters,
+			shouldBeFiltered
+		),
 		...getComponentTypeProps(interpretedProps, state),
 		// This is too dynamic to be typed correctly, so we allow any here
 	} as any;