@inseefr/lunatic 3.5.0-rc.0 → 3.5.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@inseefr/lunatic",
-    "version": "3.5.0-rc.0",
+    "version": "3.5.0-rc.1",
     "description": "Library of questionnaire components",
     "repository": {
         "type": "git",
@@ -51,6 +51,7 @@
         "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",
         "src/components/Duration/formatDuration.spec.ts",
@@ -65,6 +66,7 @@
         "src/components/InputNumber/InputNumber.tsx",
         "src/components/InputNumber/InputNumberThousand.tsx",
         "src/components/InputNumber/__snapshots__/InputNumber.spec.tsx.snap",
+        "src/components/Loop/Loop.spec.tsx",
         "src/components/Loop/Loop.tsx",
         "src/components/Loop/constant.ts",
         "src/components/LunaticComponents.tsx",
@@ -98,6 +100,8 @@
         "src/components/shared/Button/IconButton.spec.tsx",
         "src/components/shared/Button/IconButton.tsx",
         "src/components/shared/Button/__snapshots__/Button.spec.tsx.snap",
+        "src/components/shared/CharactersCount/CharactersCount.spec.tsx",
+        "src/components/shared/CharactersCount/CharactersCount.tsx",
         "src/components/shared/Checkbox/CheckboxOption.spec.tsx",
         "src/components/shared/Checkbox/CheckboxOption.tsx",
         "src/components/shared/Checkbox/getShortcutKey.ts",
@@ -177,15 +181,9 @@
         "src/components/shared/Table/Tr.spec.tsx",
         "src/components/shared/Table/Tr.tsx",
         "src/components/shared/Table/index.ts",
+        "src/components/shared/utils/getCharactersCountId.test.ts",
+        "src/components/shared/utils/getCharactersCountId.ts",
         "src/components/type.ts",
-        "src/constants/component-types.ts",
-        "src/constants/declarations.ts",
-        "src/constants/event-types.ts",
-        "src/constants/index.ts",
-        "src/constants/indexedDBStore.ts",
-        "src/constants/supported-preferences.ts",
-        "src/constants/value-types.ts",
-        "src/constants/variable-types.ts",
         "src/css/components/Button.scss",
         "src/css/components/CheckboxGroup.scss",
         "src/css/components/CheckboxOne.scss",
@@ -219,7 +217,6 @@
         "src/hooks/use-auto-focus.ts",
         "src/hooks/use-track-changes.ts",
         "src/hooks/use-why-render.ts",
-        "src/hooks/useArticulation.ts",
         "src/hooks/useDebounce.ts",
         "src/hooks/useDocumentEvent.ts",
         "src/hooks/useKeyboardKey.ts",
@@ -233,9 +230,8 @@
         "src/insee.d.ts",
         "src/stories/accordion/accordion.stories.jsx",
         "src/stories/accordion/source.json",
-        "src/stories/behaviour/articulation/articulation.stories.tsx",
-        "src/stories/behaviour/articulation/roundabout.json",
         "src/stories/behaviour/cleaning/cleaning.stories.jsx",
+        "src/stories/behaviour/cleaning/loop.json",
         "src/stories/behaviour/cleaning/source-loop.json",
         "src/stories/behaviour/cleaning/source.json",
         "src/stories/behaviour/controls/boucles-n.json",
@@ -260,6 +256,7 @@
         "src/stories/behaviour/paste/test.stories.jsx",
         "src/stories/behaviour/performance/performance.stories.jsx",
         "src/stories/behaviour/performance/source.json",
+        "src/stories/behaviour/performance/srcv.json",
         "src/stories/behaviour/resizing/resizing.stories.jsx",
         "src/stories/behaviour/resizing/source-resizing-cleaning.json",
         "src/stories/behaviour/resizing/source.json",
@@ -296,6 +293,7 @@
         "src/stories/input/input.stories.jsx",
         "src/stories/input/source.json",
         "src/stories/input-number/input-number.stories.jsx",
+        "src/stories/input-number/source-big-number.json",
         "src/stories/input-number/source-euro.json",
         "src/stories/input-number/source.json",
         "src/stories/loop/loop.stories.jsx",
@@ -369,15 +367,15 @@
         "src/stories/textarea/data.json",
         "src/stories/textarea/source.json",
         "src/stories/textarea/textarea.stories.jsx",
-        "src/stories/utils/SchemaValidator.tsx",
+        "src/stories/utils/SchemaValidator.jsx",
         "src/stories/utils/custom-lunatic.scss",
         "src/stories/utils/default-arg-types.js",
         "src/stories/utils/default-args.js",
         "src/stories/utils/options.js",
+        "src/stories/utils/orchestrator.jsx",
         "src/stories/utils/orchestrator.scss",
-        "src/stories/utils/orchestrator.tsx",
+        "src/stories/utils/overview.jsx",
         "src/stories/utils/overview.scss",
-        "src/stories/utils/overview.tsx",
         "src/stories/utils/referentiel.js",
         "src/test.d.ts",
         "src/tests/setup.ts",
@@ -416,7 +414,9 @@
         "src/use-lunatic/commons/variables/lunatic-variables-store.spec.ts",
         "src/use-lunatic/commons/variables/lunatic-variables-store.ts",
         "src/use-lunatic/hooks/use-loop-variables.ts",
+        "src/use-lunatic/hooks/use-page-has-response.test.ts",
         "src/use-lunatic/hooks/use-page-has-response.ts",
+        "src/use-lunatic/hooks/useOverview.spec.ts",
         "src/use-lunatic/hooks/useOverview.ts",
         "src/use-lunatic/hooks/useWarnDepChange.ts",
         "src/use-lunatic/logger/ConsoleLogger.ts",
@@ -443,11 +443,13 @@
         "src/use-lunatic/reducer/reducer.ts",
         "src/use-lunatic/reducer/reducerInitializer.tsx",
         "src/use-lunatic/replace-component-sequence.ts",
+        "src/use-lunatic/test.utils.ts",
         "src/use-lunatic/type.ts",
         "src/use-lunatic/use-lunatic.test.ts",
         "src/use-lunatic/use-lunatic.ts",
         "src/utils/array.spec.ts",
         "src/utils/array.ts",
+        "src/utils/cast.ts",
         "src/utils/constants/alphabet.ts",
         "src/utils/constants/features.ts",
         "src/utils/constants/index.ts",
@@ -560,6 +562,9 @@
         "components/Loop/Loop.d.ts",
         "components/Loop/Loop.js",
         "components/Loop/Loop.js.map",
+        "components/Loop/Loop.spec.d.ts",
+        "components/Loop/Loop.spec.js",
+        "components/Loop/Loop.spec.js.map",
         "components/Loop/constant.d.ts",
         "components/Loop/constant.js",
         "components/Loop/constant.js.map",
@@ -647,6 +652,12 @@
         "components/shared/Button/IconButton.spec.d.ts",
         "components/shared/Button/IconButton.spec.js",
         "components/shared/Button/IconButton.spec.js.map",
+        "components/shared/CharactersCount/CharactersCount.d.ts",
+        "components/shared/CharactersCount/CharactersCount.js",
+        "components/shared/CharactersCount/CharactersCount.js.map",
+        "components/shared/CharactersCount/CharactersCount.spec.d.ts",
+        "components/shared/CharactersCount/CharactersCount.spec.js",
+        "components/shared/CharactersCount/CharactersCount.spec.js.map",
         "components/shared/Checkbox/CheckboxOption.d.ts",
         "components/shared/Checkbox/CheckboxOption.js",
         "components/shared/Checkbox/CheckboxOption.js.map",
@@ -881,33 +892,12 @@
         "components/shared/Table/index.d.ts",
         "components/shared/Table/index.js",
         "components/shared/Table/index.js.map",
+        "components/shared/utils/getCharactersCountId.d.ts",
+        "components/shared/utils/getCharactersCountId.js",
+        "components/shared/utils/getCharactersCountId.js.map",
         "components/type.d.ts",
         "components/type.js",
         "components/type.js.map",
-        "constants/component-types.d.ts",
-        "constants/component-types.js",
-        "constants/component-types.js.map",
-        "constants/declarations.d.ts",
-        "constants/declarations.js",
-        "constants/declarations.js.map",
-        "constants/event-types.d.ts",
-        "constants/event-types.js",
-        "constants/event-types.js.map",
-        "constants/index.d.ts",
-        "constants/index.js",
-        "constants/index.js.map",
-        "constants/indexedDBStore.d.ts",
-        "constants/indexedDBStore.js",
-        "constants/indexedDBStore.js.map",
-        "constants/supported-preferences.d.ts",
-        "constants/supported-preferences.js",
-        "constants/supported-preferences.js.map",
-        "constants/value-types.d.ts",
-        "constants/value-types.js",
-        "constants/value-types.js.map",
-        "constants/variable-types.d.ts",
-        "constants/variable-types.js",
-        "constants/variable-types.js.map",
         "esm/components/Accordion/Accordion.d.ts",
         "esm/components/Accordion/Accordion.js",
         "esm/components/Accordion/Accordion.js.map",
@@ -992,6 +982,9 @@
         "esm/components/Loop/Loop.d.ts",
         "esm/components/Loop/Loop.js",
         "esm/components/Loop/Loop.js.map",
+        "esm/components/Loop/Loop.spec.d.ts",
+        "esm/components/Loop/Loop.spec.js",
+        "esm/components/Loop/Loop.spec.js.map",
         "esm/components/Loop/constant.d.ts",
         "esm/components/Loop/constant.js",
         "esm/components/Loop/constant.js.map",
@@ -1079,6 +1072,12 @@
         "esm/components/shared/Button/IconButton.spec.d.ts",
         "esm/components/shared/Button/IconButton.spec.js",
         "esm/components/shared/Button/IconButton.spec.js.map",
+        "esm/components/shared/CharactersCount/CharactersCount.d.ts",
+        "esm/components/shared/CharactersCount/CharactersCount.js",
+        "esm/components/shared/CharactersCount/CharactersCount.js.map",
+        "esm/components/shared/CharactersCount/CharactersCount.spec.d.ts",
+        "esm/components/shared/CharactersCount/CharactersCount.spec.js",
+        "esm/components/shared/CharactersCount/CharactersCount.spec.js.map",
         "esm/components/shared/Checkbox/CheckboxOption.d.ts",
         "esm/components/shared/Checkbox/CheckboxOption.js",
         "esm/components/shared/Checkbox/CheckboxOption.js.map",
@@ -1313,33 +1312,12 @@
         "esm/components/shared/Table/index.d.ts",
         "esm/components/shared/Table/index.js",
         "esm/components/shared/Table/index.js.map",
+        "esm/components/shared/utils/getCharactersCountId.d.ts",
+        "esm/components/shared/utils/getCharactersCountId.js",
+        "esm/components/shared/utils/getCharactersCountId.js.map",
         "esm/components/type.d.ts",
         "esm/components/type.js",
         "esm/components/type.js.map",
-        "esm/constants/component-types.d.ts",
-        "esm/constants/component-types.js",
-        "esm/constants/component-types.js.map",
-        "esm/constants/declarations.d.ts",
-        "esm/constants/declarations.js",
-        "esm/constants/declarations.js.map",
-        "esm/constants/event-types.d.ts",
-        "esm/constants/event-types.js",
-        "esm/constants/event-types.js.map",
-        "esm/constants/index.d.ts",
-        "esm/constants/index.js",
-        "esm/constants/index.js.map",
-        "esm/constants/indexedDBStore.d.ts",
-        "esm/constants/indexedDBStore.js",
-        "esm/constants/indexedDBStore.js.map",
-        "esm/constants/supported-preferences.d.ts",
-        "esm/constants/supported-preferences.js",
-        "esm/constants/supported-preferences.js.map",
-        "esm/constants/value-types.d.ts",
-        "esm/constants/value-types.js",
-        "esm/constants/value-types.js.map",
-        "esm/constants/variable-types.d.ts",
-        "esm/constants/variable-types.js",
-        "esm/constants/variable-types.js.map",
         "esm/hooks/use-auto-focus.d.ts",
         "esm/hooks/use-auto-focus.js",
         "esm/hooks/use-auto-focus.js.map",
@@ -1349,9 +1327,6 @@
         "esm/hooks/use-why-render.d.ts",
         "esm/hooks/use-why-render.js",
         "esm/hooks/use-why-render.js.map",
-        "esm/hooks/useArticulation.d.ts",
-        "esm/hooks/useArticulation.js",
-        "esm/hooks/useArticulation.js.map",
         "esm/hooks/useDebounce.d.ts",
         "esm/hooks/useDebounce.js",
         "esm/hooks/useDebounce.js.map",
@@ -1387,6 +1362,7 @@
         "esm/index.js.map",
         "esm/main.css",
         "esm/main.css.map",
+        "esm/stories/overview/sourceWithHierarchy.json",
         "esm/tests/setup.d.ts",
         "esm/tests/setup.js",
         "esm/tests/setup.js.map",
@@ -1495,6 +1471,9 @@
         "esm/use-lunatic/hooks/useOverview.d.ts",
         "esm/use-lunatic/hooks/useOverview.js",
         "esm/use-lunatic/hooks/useOverview.js.map",
+        "esm/use-lunatic/hooks/useOverview.spec.d.ts",
+        "esm/use-lunatic/hooks/useOverview.spec.js",
+        "esm/use-lunatic/hooks/useOverview.spec.js.map",
         "esm/use-lunatic/hooks/useWarnDepChange.d.ts",
         "esm/use-lunatic/hooks/useWarnDepChange.js",
         "esm/use-lunatic/hooks/useWarnDepChange.js.map",
@@ -1570,6 +1549,9 @@
         "esm/use-lunatic/replace-component-sequence.d.ts",
         "esm/use-lunatic/replace-component-sequence.js",
         "esm/use-lunatic/replace-component-sequence.js.map",
+        "esm/use-lunatic/test.utils.d.ts",
+        "esm/use-lunatic/test.utils.js",
+        "esm/use-lunatic/test.utils.js.map",
         "esm/use-lunatic/type.d.ts",
         "esm/use-lunatic/type.js",
         "esm/use-lunatic/type.js.map",
@@ -1582,6 +1564,9 @@
         "esm/utils/array.spec.d.ts",
         "esm/utils/array.spec.js",
         "esm/utils/array.spec.js.map",
+        "esm/utils/cast.d.ts",
+        "esm/utils/cast.js",
+        "esm/utils/cast.js.map",
         "esm/utils/constants/alphabet.d.ts",
         "esm/utils/constants/alphabet.js",
         "esm/utils/constants/alphabet.js.map",
@@ -1675,9 +1660,6 @@
         "hooks/use-why-render.d.ts",
         "hooks/use-why-render.js",
         "hooks/use-why-render.js.map",
-        "hooks/useArticulation.d.ts",
-        "hooks/useArticulation.js",
-        "hooks/useArticulation.js.map",
         "hooks/useDebounce.d.ts",
         "hooks/useDebounce.js",
         "hooks/useDebounce.js.map",
@@ -1713,6 +1695,7 @@
         "index.js.map",
         "main.css",
         "main.css.map",
+        "stories/overview/sourceWithHierarchy.json",
         "tests/setup.d.ts",
         "tests/setup.js",
         "tests/setup.js.map",
@@ -1822,6 +1805,9 @@
         "use-lunatic/hooks/useOverview.d.ts",
         "use-lunatic/hooks/useOverview.js",
         "use-lunatic/hooks/useOverview.js.map",
+        "use-lunatic/hooks/useOverview.spec.d.ts",
+        "use-lunatic/hooks/useOverview.spec.js",
+        "use-lunatic/hooks/useOverview.spec.js.map",
         "use-lunatic/hooks/useWarnDepChange.d.ts",
         "use-lunatic/hooks/useWarnDepChange.js",
         "use-lunatic/hooks/useWarnDepChange.js.map",
@@ -1897,6 +1883,9 @@
         "use-lunatic/replace-component-sequence.d.ts",
         "use-lunatic/replace-component-sequence.js",
         "use-lunatic/replace-component-sequence.js.map",
+        "use-lunatic/test.utils.d.ts",
+        "use-lunatic/test.utils.js",
+        "use-lunatic/test.utils.js.map",
         "use-lunatic/type.d.ts",
         "use-lunatic/type.js",
         "use-lunatic/type.js.map",
@@ -1909,6 +1898,9 @@
         "utils/array.spec.d.ts",
         "utils/array.spec.js",
         "utils/array.spec.js.map",
+        "utils/cast.d.ts",
+        "utils/cast.js",
+        "utils/cast.js.map",
         "utils/constants/alphabet.d.ts",
         "utils/constants/alphabet.js",
         "utils/constants/alphabet.js.map",

package/src/components/Datepicker/Datepicker.tsx

@@ -118,7 +118,7 @@ export const CustomDatepicker = slottableComponent<CustomProps>(
 						<DatepickerField
 							id={id + 'month'}
 							label="Mois"
-							description="Exemple: 07"
+							description="Exemple: 7"
 							max={12}
 							value={numbers[1]}
 							onChange={setNumber(1)}

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

@@ -52,7 +52,7 @@ exports[`Datepicker > should render properly with format YYYY-MM 1`] = `
           <span
             class="lunaticDatepickerHint"
           >
-            Exemple: 07
+            Exemple: 7
           </span>
         </label>
         <input
@@ -128,7 +128,7 @@ exports[`Datepicker > should render properly with format YYYY-MM-DD 1`] = `
           <span
             class="lunaticDatepickerHint"
           >
-            Exemple: 07
+            Exemple: 7
           </span>
         </label>
         <input

package/src/components/Duration/Duration.test.tsx

@@ -0,0 +1,52 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Duration } from './Duration';
+import { render } from '@testing-library/react';
+import { Formats } from './durationUtils';
+
+describe('Duration', () => {
+	const mockOnChange = vi.fn();
+
+	const baseDeclarations = [
+		{
+			id: '1',
+			label: 'Declaration 1',
+			declarationType: 'COMMENT' as const,
+			position: 'AFTER_QUESTION_TEXT',
+		},
+		{
+			id: '2',
+			label: 'Declaration 2',
+			declarationType: 'COMMENT' as const,
+			position: 'AFTER_QUESTION_TEXT',
+		},
+	];
+
+	const baseProps = {
+		handleChanges: mockOnChange,
+		response: { name: 'demo' },
+		format: 'PTnHnM' as Formats,
+		value: 'PT5H1M',
+		id: 'duration',
+		label: 'label',
+		description: 'description',
+		declarations: baseDeclarations,
+	};
+
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('renders label, declarations and description', () => {
+		const { getByText } = render(<Duration {...baseProps} />);
+
+		// label is displayed
+		expect(getByText(baseProps.label)).toBeInTheDocument();
+
+		// all declarations are displayed
+		expect(getByText('Declaration 1')).toBeInTheDocument();
+		expect(getByText('Declaration 2')).toBeInTheDocument();
+
+		// description is displayed
+		expect(getByText(baseProps.description)).toBeInTheDocument();
+	});
+});

package/src/components/Duration/Duration.tsx

@@ -12,6 +12,7 @@ import {
 	getComponentErrors,
 } from '../shared/ComponentErrors/ComponentErrors';
 import { Declarations } from '../shared/Declarations/Declarations';
+import { Fieldset } from '../shared/Fieldset/Fieldset';
 
 export function Duration({
 	handleChanges,
@@ -39,7 +40,16 @@ type CustomProps = Omit<
 export const CustomDuration = slottableComponent<CustomProps>(
 	'Duration',
 	(props) => {
-		const { errors, value, label, format, onChange, declarations, id } = props;
+		const {
+			errors,
+			value,
+			label,
+			format,
+			onChange,
+			declarations,
+			id,
+			description,
+		} = props;
 		// We need to keep an internal state since one field can be empty (null value in duration)
 		// but we still send "0" and we don't want the field to display "0"
 		const [duration, setDuration] = useState(
@@ -66,8 +76,11 @@ export const CustomDuration = slottableComponent<CustomProps>(
 			};
 
 		return (
-			<fieldset className={classnames('lunatic-input')}>
-				{label && <legend>{label}</legend>}
+			<Fieldset
+				className={classnames('lunatic-input')}
+				legend={label}
+				description={description}
+			>
 				<Declarations
 					type="AFTER_QUESTION_TEXT"
 					declarations={declarations}
@@ -91,7 +104,7 @@ export const CustomDuration = slottableComponent<CustomProps>(
 					))}
 				</div>
 				<ComponentErrors errors={errors} />
-			</fieldset>
+			</Fieldset>
 		);
 	}
 );

package/src/components/Input/Input.spec.tsx

@@ -1,6 +1,12 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { Input } from './Input';
+import { CharactersCount } from '../shared/CharactersCount/CharactersCount';
+
+vi.mock('../shared/CharactersCount/CharactersCount', () => ({
+	CharactersCount: vi.fn(),
+}));
+
 describe('Input', () => {
 	const mockOnChange = vi.fn();
 	const baseProps = {
@@ -34,6 +40,19 @@ describe('Input', () => {
 		expect(input).toBeInTheDocument();
 	});
 
+	it('calls CharactersCount component with correct props', () => {
+		const props = { ...baseProps, maxLength: 30 };
+		render(<Input {...props} />);
+		expect(CharactersCount).toHaveBeenCalledWith(
+			{
+				id: props.id,
+				maxLength: props.maxLength,
+				value: props.value,
+			},
+			{}
+		);
+	});
+
 	it('calls onChange with parsed value', () => {
 		const { container } = render(<Input {...baseProps} errors={undefined} />);
 
@@ -73,4 +92,19 @@ describe('Input', () => {
 		expect(input).toHaveFocus();
 		expect(input).toHaveValue('toto');
 	});
+
+	it('should display input value from the start when user leave input', () => {
+		const setSelectionRangeMock = vi.fn();
+		const { container } = render(<Input {...baseProps} />);
+
+		const input = container.querySelector('input[type="text"]');
+
+		fireEvent.blur(input!, {
+			target: {
+				...input,
+				setSelectionRange: setSelectionRangeMock,
+			},
+		});
+		expect(setSelectionRangeMock).toHaveBeenCalledWith(0, 0);
+	});
 });

package/src/components/Input/Input.tsx

@@ -8,6 +8,8 @@ import {
 } from '../shared/ComponentErrors/ComponentErrors';
 import { Declarations } from '../shared/Declarations/Declarations';
 import type { LunaticError } from '../../use-lunatic/type';
+import { CharactersCount } from '../shared/CharactersCount/CharactersCount';
+import { getCharactersCountId } from '../shared/utils/getCharactersCountId';
 
 export function Input({
 	handleChanges,
@@ -47,6 +49,8 @@ export const CustomInput = slottableComponent<CustomProps>('Input', (props) => {
 		declarations,
 	} = props;
 	const labelId = `label-${id}`;
+	const charactersCountId = getCharactersCountId(id, maxLength);
+
 	return (
 		<div className={classnames('lunatic-input')}>
 			<Label htmlFor={id} id={labelId} description={description}>
@@ -57,24 +61,28 @@ export const CustomInput = slottableComponent<CustomProps>('Input', (props) => {
 				declarations={declarations}
 				id={id}
 			/>
-			<input
-				id={id}
-				aria-labelledby={labelId}
-				autoComplete="off"
-				type="text"
-				disabled={disabled}
-				readOnly={readOnly}
-				value={(value ?? '').toString()}
-				title={value ?? ''}
-				onChange={(e) => onChange(e.target.value)}
-				aria-required={required}
-				required={required}
-				maxLength={maxLength}
-				aria-invalid={!!errors}
-				onBlur={(e) => {
-					e.target.setSelectionRange(0, 0);
-				}}
-			/>
+			<div className="field-with-count">
+				<input
+					id={id}
+					aria-labelledby={labelId}
+					aria-describedby={maxLength ? charactersCountId : undefined}
+					autoComplete="off"
+					type="text"
+					disabled={disabled}
+					readOnly={readOnly}
+					value={(value ?? '').toString()}
+					title={value ?? ''}
+					onChange={(e) => onChange(e.target.value)}
+					aria-required={required}
+					required={required}
+					maxLength={maxLength}
+					aria-invalid={!!errors}
+					onBlur={(e) => {
+						e.target.setSelectionRange(0, 0);
+					}}
+				/>
+				<CharactersCount id={id} maxLength={maxLength} value={value} />
+			</div>
 			<ComponentErrors errors={errors} />
 		</div>
 	);

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

@@ -5,15 +5,30 @@ exports[`Input > renders without crashing 1`] = `
   <div
     class="lunatic-input"
   >
-    <input
-      aria-invalid="false"
-      aria-labelledby="label-input"
-      autocomplete="off"
-      id="input"
-      title="input"
-      type="text"
-      value="input"
-    />
+    <label
+      class="lunatic-label"
+      for="input"
+      id="label-input"
+    >
+      <span
+        class="label-description"
+      >
+        description
+      </span>
+    </label>
+    <div
+      class="field-with-count"
+    >
+      <input
+        aria-invalid="false"
+        aria-labelledby="label-input"
+        autocomplete="off"
+        id="input"
+        title="input"
+        type="text"
+        value="input"
+      />
+    </div>
   </div>
 </div>
 `;
@@ -23,16 +38,20 @@ exports[`Input > should handle readOnly 1`] = `
   <div
     class="lunatic-input"
   >
-    <input
-      aria-invalid="false"
-      aria-labelledby="label-number"
-      autocomplete="off"
-      id="number"
-      readonly=""
-      title="toto"
-      type="text"
-      value="toto"
-    />
+    <div
+      class="field-with-count"
+    >
+      <input
+        aria-invalid="false"
+        aria-labelledby="label-number"
+        autocomplete="off"
+        id="number"
+        readonly=""
+        title="toto"
+        type="text"
+        value="toto"
+      />
+    </div>
   </div>
 </div>
 `;