@inseefr/lunatic 3.12.2 → 3.12.3

package/esm/components/shared/Combobox/Panel/ComboboxOption.spec.js

@@ -11,13 +11,26 @@ describe('DefaultOptionRenderer', () => {
         expect(idElement).toBeInTheDocument();
         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(_jsx(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(_jsx(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(_jsx(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', () => {
         const option = { id: '1', value: 'Value', label: 'Label' };

package/esm/components/shared/Combobox/Panel/ComboboxOption.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxOption.spec.js","sourceRoot":"","sources":["../../../../../src/components/shared/Combobox/Panel/ComboboxOption.spec.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAE9C,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE;QAChC,MAAM,MAAM,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;QAC3C,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,MAAM,CACxC,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,CAClC,CAAC;QACF,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QACvC,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;QACtC,MAAM,CAAC,SAAS,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACtC,MAAM,CAAC,YAAY,CAAC,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oBAAoB,EAAE,GAAG,EAAE;QAC7B,MAAM,MAAM,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;QAC3D,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,CAAC,CAAC;QACjE,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QACvC,MAAM,YAAY,GAAG,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC7C,MAAM,CAAC,SAAS,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACtC,MAAM,CAAC,YAAY,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,GAAG,EAAE;QACtC,MAAM,MAAM,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;QAC3D,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,SAAG,CAAC,CAAC;QAC1E,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,GAAG,EAAE;QACzC,MAAM,MAAM,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;QAC3D,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,CAAC,CAAC;QACjE,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"ComboboxOption.spec.js","sourceRoot":"","sources":["../../../../../src/components/shared/Combobox/Panel/ComboboxOption.spec.tsx"],"names":[],"mappings":"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"}

package/esm/components/shared/Combobox/Panel/ComboboxPanel.d.ts

@@ -2,4 +2,4 @@ import type { ComboboxPanelProps } from '../ComboboxType';
 /**
  * Floating menu containing selectable options
  */
-export declare function ComboboxPanel({ optionRenderer: OptionRender, options, focused, selectedIndex, expanded, id, search, onSelect, isLoading, }: ComboboxPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ComboboxPanel({ optionRenderer: OptionRender, options, shouldDisplayOptionsId, focused, selectedIndex, expanded, id, search, onSelect, isLoading, }: Readonly<ComboboxPanelProps>): import("react/jsx-runtime").JSX.Element | null;

package/esm/components/shared/Combobox/Panel/ComboboxPanel.js

@@ -6,7 +6,7 @@ import D from '../../../../i18n';
 /**
  * Floating menu containing selectable options
  */
-export function ComboboxPanel({ optionRenderer: OptionRender, options = [], focused, selectedIndex, expanded, id, search, onSelect, isLoading, }) {
+export function ComboboxPanel({ optionRenderer: OptionRender, options = [], shouldDisplayOptionsId, focused, selectedIndex, expanded, id, search, onSelect, isLoading, }) {
     const visibleOptions = expanded ? options : [];
     const ComboBoxOptionComponent = OptionRender !== null && OptionRender !== void 0 ? OptionRender : ComboboxOption;
     // Do not display the panel if it's empty
@@ -24,7 +24,7 @@ export function ComboboxPanel({ optionRenderer: OptionRender, options = [], focu
     }
     return (_jsx(ComboboxPanelContainer, { expanded: expanded, focused: focused, id: `${id}-list`, children: visibleOptions.map((option, index) => {
             var _a;
-            return (_jsx(ComboboxOptionContainer, { index: index.toString(), selected: selectedIndex === index, onSelect: onSelect, children: _jsx(ComboBoxOptionComponent, { option: option, selected: selectedIndex === index, search: search }) }, (_a = option.id) !== null && _a !== void 0 ? _a : option.value));
+            return (_jsx(ComboboxOptionContainer, { index: index.toString(), selected: selectedIndex === index, onSelect: onSelect, children: _jsx(ComboBoxOptionComponent, { option: option, shouldDisplayOptionId: shouldDisplayOptionsId, selected: selectedIndex === index, search: search }) }, (_a = option.id) !== null && _a !== void 0 ? _a : option.value));
         }) }));
 }
 //# sourceMappingURL=ComboboxPanel.js.map

package/esm/components/shared/Combobox/Panel/ComboboxPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxPanel.js","sourceRoot":"","sources":["../../../../../src/components/shared/Combobox/Panel/ComboboxPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,CAAC,MAAM,kBAAkB,CAAC;AAEjC;;GAEG;AACH,MAAM,UAAU,aAAa,CAAC,EAC7B,cAAc,EAAE,YAAY,EAC5B,OAAO,GAAG,EAAE,EACZ,OAAO,EACP,aAAa,EACb,QAAQ,EACR,EAAE,EACF,MAAM,EACN,QAAQ,EACR,SAAS,GACW;IACpB,MAAM,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAE/C,MAAM,uBAAuB,GAAG,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,cAAc,CAAC;IAE/D,yCAAyC;IACzC,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;QAC5C,OAAO,IAAI,CAAC;IACb,CAAC;IAED,IAAI,SAAS,EAAE,CAAC;QACf,OAAO,CACN,KAAC,sBAAsB,IACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,GAAG,EAAE,OAAO,YAEhB,cAAK,SAAS,EAAC,0BAA0B,YACxC,eAAM,SAAS,EAAC,OAAO,YAAE,CAAC,CAAC,iBAAiB,GAAQ,GAC/C,GACkB,CACzB,CAAC;IACH,CAAC;IAED,IAAI,MAAM,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC3C,OAAO,CACN,KAAC,sBAAsB,IACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,GAAG,EAAE,OAAO,YAEhB,cAAK,SAAS,EAAC,0BAA0B,YACxC,eAAM,SAAS,EAAC,OAAO,YAAE,CAAC,CAAC,mBAAmB,GAAQ,GACjD,GACkB,CACzB,CAAC;IACH,CAAC;IAED,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACjC,OAAO,CACN,KAAC,sBAAsB,IACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,GAAG,EAAE,OAAO,YAEhB,cAAK,SAAS,EAAC,0BAA0B,YACxC,eAAM,SAAS,EAAC,OAAO,YAAE,CAAC,CAAC,mBAAmB,GAAQ,GACjD,GACkB,CACzB,CAAC;IACH,CAAC;IAED,OAAO,CACN,KAAC,sBAAsB,IACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,GAAG,EAAE,OAAO,YAEf,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;;YAAC,OAAA,CACtC,KAAC,uBAAuB,IAEvB,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,EACvB,QAAQ,EAAE,aAAa,KAAK,KAAK,EACjC,QAAQ,EAAE,QAAQ,YAElB,KAAC,uBAAuB,IACvB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,aAAa,KAAK,KAAK,EACjC,MAAM,EAAE,MAAM,GACb,IATG,MAAA,MAAM,CAAC,EAAE,mCAAI,MAAM,CAAC,KAAK,CAUL,CAC1B,CAAA;SAAA,CAAC,GACsB,CACzB,CAAC;AACH,CAAC"}
+{"version":3,"file":"ComboboxPanel.js","sourceRoot":"","sources":["../../../../../src/components/shared/Combobox/Panel/ComboboxPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,CAAC,MAAM,kBAAkB,CAAC;AAEjC;;GAEG;AACH,MAAM,UAAU,aAAa,CAAC,EAC7B,cAAc,EAAE,YAAY,EAC5B,OAAO,GAAG,EAAE,EACZ,sBAAsB,EACtB,OAAO,EACP,aAAa,EACb,QAAQ,EACR,EAAE,EACF,MAAM,EACN,QAAQ,EACR,SAAS,GACqB;IAC9B,MAAM,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAE/C,MAAM,uBAAuB,GAAG,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,cAAc,CAAC;IAE/D,yCAAyC;IACzC,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;QAC5C,OAAO,IAAI,CAAC;IACb,CAAC;IAED,IAAI,SAAS,EAAE,CAAC;QACf,OAAO,CACN,KAAC,sBAAsB,IACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,GAAG,EAAE,OAAO,YAEhB,cAAK,SAAS,EAAC,0BAA0B,YACxC,eAAM,SAAS,EAAC,OAAO,YAAE,CAAC,CAAC,iBAAiB,GAAQ,GAC/C,GACkB,CACzB,CAAC;IACH,CAAC;IAED,IAAI,MAAM,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC3C,OAAO,CACN,KAAC,sBAAsB,IACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,GAAG,EAAE,OAAO,YAEhB,cAAK,SAAS,EAAC,0BAA0B,YACxC,eAAM,SAAS,EAAC,OAAO,YAAE,CAAC,CAAC,mBAAmB,GAAQ,GACjD,GACkB,CACzB,CAAC;IACH,CAAC;IAED,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACjC,OAAO,CACN,KAAC,sBAAsB,IACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,GAAG,EAAE,OAAO,YAEhB,cAAK,SAAS,EAAC,0BAA0B,YACxC,eAAM,SAAS,EAAC,OAAO,YAAE,CAAC,CAAC,mBAAmB,GAAQ,GACjD,GACkB,CACzB,CAAC;IACH,CAAC;IAED,OAAO,CACN,KAAC,sBAAsB,IACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,GAAG,EAAE,OAAO,YAEf,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;;YAAC,OAAA,CACtC,KAAC,uBAAuB,IAEvB,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,EACvB,QAAQ,EAAE,aAAa,KAAK,KAAK,EACjC,QAAQ,EAAE,QAAQ,YAElB,KAAC,uBAAuB,IACvB,MAAM,EAAE,MAAM,EACd,qBAAqB,EAAE,sBAAsB,EAC7C,QAAQ,EAAE,aAAa,KAAK,KAAK,EACjC,MAAM,EAAE,MAAM,GACb,IAVG,MAAA,MAAM,CAAC,EAAE,mCAAI,MAAM,CAAC,KAAK,CAWL,CAC1B,CAAA;SAAA,CAAC,GACsB,CACzB,CAAC;AACH,CAAC"}

package/esm/components/type.d.ts

@@ -265,11 +265,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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@inseefr/lunatic",
-    "version": "3.12.2",
+    "version": "3.12.3",
     "description": "Library of questionnaire components",
     "repository": {
         "type": "git",
@@ -51,7 +51,6 @@
         "src/components/Dropdown/Dropdown.tsx",
         "src/components/Dropdown/__snapshots__/Dropdown.spec.tsx.snap",
         "src/components/Dropdown/renderer/SimpleLabelRenderer.tsx",
-        "src/components/Dropdown/renderer/SimpleOptionRenderer.tsx",
         "src/components/Duration/Duration.test.tsx",
         "src/components/Duration/Duration.tsx",
         "src/components/Duration/durationUtils.ts",
@@ -511,9 +510,6 @@
         "components/Dropdown/renderer/SimpleLabelRenderer.d.ts",
         "components/Dropdown/renderer/SimpleLabelRenderer.js",
         "components/Dropdown/renderer/SimpleLabelRenderer.js.map",
-        "components/Dropdown/renderer/SimpleOptionRenderer.d.ts",
-        "components/Dropdown/renderer/SimpleOptionRenderer.js",
-        "components/Dropdown/renderer/SimpleOptionRenderer.js.map",
         "components/Duration/Duration.d.ts",
         "components/Duration/Duration.js",
         "components/Duration/Duration.js.map",
@@ -946,9 +942,6 @@
         "esm/components/Dropdown/renderer/SimpleLabelRenderer.d.ts",
         "esm/components/Dropdown/renderer/SimpleLabelRenderer.js",
         "esm/components/Dropdown/renderer/SimpleLabelRenderer.js.map",
-        "esm/components/Dropdown/renderer/SimpleOptionRenderer.d.ts",
-        "esm/components/Dropdown/renderer/SimpleOptionRenderer.js",
-        "esm/components/Dropdown/renderer/SimpleOptionRenderer.js.map",
         "esm/components/Duration/Duration.d.ts",
         "esm/components/Duration/Duration.js",
         "esm/components/Duration/Duration.js.map",
@@ -2111,4 +2104,4 @@
         "node": "20.16.0",
         "pnpm": "9.15.0"
     }
-}
+}

package/src/components/Dropdown/Dropdown.spec.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { Dropdown } from './Dropdown';
 
@@ -6,14 +6,14 @@ describe('Dropdown', () => {
 	const mockOnSelect = vi.fn();
 
 	const baseProps = {
-		value: 'toto',
+		value: 'value1',
 		id: 'dropdown',
 		'aria-labelledby': 'dropdown',
 		options: [
 			{
-				value: 'toto',
-				description: 'toto',
-				label: 'toto',
+				value: 'value1',
+				description: 'description 1',
+				label: 'option 1',
 			},
 		],
 		response: { name: 'demo' },
@@ -37,6 +37,22 @@ describe('Dropdown', () => {
 		(selection as HTMLElement).focus();
 		expect(selection).toHaveFocus();
 		const span = selection?.querySelector('span');
-		expect(span).toHaveTextContent('toto');
+		expect(span).toHaveTextContent('option 1');
+	});
+
+	it('should display only options label in dropdown selection', () => {
+		const { container, queryByText, getByText } = render(
+			<Dropdown
+				{...baseProps}
+				value={null}
+			/>
+		);
+
+		const selection = container.querySelector('.lunatic-combo-box-content');
+		fireEvent.focus(selection as HTMLElement);
+
+		expect(getByText('option 1')).toBeInTheDocument();
+		expect(queryByText('value1')).not.toBeInTheDocument();
+		expect(queryByText('description 1')).not.toBeInTheDocument();
 	});
 });

package/src/components/Dropdown/Dropdown.tsx

@@ -1,7 +1,6 @@
 import type { LunaticComponentProps } from '../type';
 import { getComponentErrors } from '../shared/ComponentErrors/ComponentErrors';
 import { slottableComponent } from '../shared/HOC/slottableComponent';
-import { SimpleOptionRenderer } from './renderer/SimpleOptionRenderer';
 import { SimpleLabelRenderer } from './renderer/SimpleLabelRenderer';
 import { Combobox } from '../shared/Combobox/Combobox';
 import classNames from 'classnames';
@@ -54,9 +53,9 @@ export const CustomDropdown = slottableComponent<CustomProps>(
 				disabled={disabled}
 				readOnly={readOnly}
 				options={options}
+				shouldDisplayOptionsId={false}
 				editable={false}
 				onSelect={onChange}
-				optionRenderer={SimpleOptionRenderer}
 				labelRenderer={SimpleLabelRenderer}
 				value={value}
 				label={label}

package/src/components/Dropdown/__snapshots__/Dropdown.spec.tsx.snap

@@ -27,7 +27,7 @@ exports[`Dropdown > renders without crashing 1`] = `
           <span
             class="selection"
           >
-            toto
+            option 1
           </span>
         </div>
       </div>
@@ -63,7 +63,7 @@ exports[`Dropdown > should handle readOnly 1`] = `
           <span
             class="selection"
           >
-            toto
+            option 1
           </span>
         </div>
       </div>

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;