@inseefr/lunatic 3.4.18 → 3.4.19

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@inseefr/lunatic",
-    "version": "3.4.18",
+    "version": "3.4.19",
     "description": "Library of questionnaire components",
     "repository": {
         "type": "git",
@@ -98,6 +98,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,6 +179,8 @@
         "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/css/components/Button.scss",
         "src/css/components/CheckboxGroup.scss",
@@ -640,6 +644,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",
@@ -874,6 +884,9 @@
         "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",
@@ -1048,6 +1061,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",
@@ -1282,6 +1301,9 @@
         "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",

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} />);
 

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

@@ -16,15 +16,19 @@ exports[`Input > renders without crashing 1`] = `
         description
       </span>
     </label>
-    <input
-      aria-invalid="false"
-      aria-labelledby="label-input"
-      autocomplete="off"
-      id="input"
-      title="input"
-      type="text"
-      value="input"
-    />
+    <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>
 `;
@@ -34,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>
 `;

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

@@ -31,16 +31,27 @@ exports[`RosterForLoop > renders the right number of columns 1`] = `
               <div
                 class="lunatic-input"
               >
-                <input
-                  aria-invalid="false"
-                  aria-labelledby="label-jrc3ye5q-QOP-lo6tcvvx-0"
-                  autocomplete="off"
-                  id="jrc3ye5q-QOP-lo6tcvvx-0"
-                  maxlength="249"
-                  title="azeaze"
-                  type="text"
-                  value="azeaze"
-                />
+                <div
+                  class="field-with-count"
+                >
+                  <input
+                    aria-describedby="characters-count-jrc3ye5q-QOP-lo6tcvvx-0"
+                    aria-invalid="false"
+                    aria-labelledby="label-jrc3ye5q-QOP-lo6tcvvx-0"
+                    autocomplete="off"
+                    id="jrc3ye5q-QOP-lo6tcvvx-0"
+                    maxlength="249"
+                    title="azeaze"
+                    type="text"
+                    value="azeaze"
+                  />
+                  <span
+                    class="characters-count"
+                    id="characters-count-jrc3ye5q-QOP-lo6tcvvx-0"
+                  >
+                    6/249
+                  </span>
+                </div>
               </div>
             </div>
           </div>
@@ -61,16 +72,27 @@ exports[`RosterForLoop > renders the right number of columns 1`] = `
               <div
                 class="lunatic-input"
               >
-                <input
-                  aria-invalid="false"
-                  aria-labelledby="label-jrc3ye5q-QOP-lo6tcvvx-1"
-                  autocomplete="off"
-                  id="jrc3ye5q-QOP-lo6tcvvx-1"
-                  maxlength="249"
-                  title="azeaze"
-                  type="text"
-                  value="azeaze"
-                />
+                <div
+                  class="field-with-count"
+                >
+                  <input
+                    aria-describedby="characters-count-jrc3ye5q-QOP-lo6tcvvx-1"
+                    aria-invalid="false"
+                    aria-labelledby="label-jrc3ye5q-QOP-lo6tcvvx-1"
+                    autocomplete="off"
+                    id="jrc3ye5q-QOP-lo6tcvvx-1"
+                    maxlength="249"
+                    title="azeaze"
+                    type="text"
+                    value="azeaze"
+                  />
+                  <span
+                    class="characters-count"
+                    id="characters-count-jrc3ye5q-QOP-lo6tcvvx-1"
+                  >
+                    6/249
+                  </span>
+                </div>
               </div>
             </div>
           </div>

package/src/components/Textarea/Textarea.spec.tsx

@@ -1,6 +1,11 @@
 import { render } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { Textarea } from './Textarea';
+import { CharactersCount } from '../shared/CharactersCount/CharactersCount';
+
+vi.mock('../shared/CharactersCount/CharactersCount', () => ({
+	CharactersCount: vi.fn(),
+}));
 
 describe('Textarea', () => {
 	const mockOnChange = vi.fn();
@@ -22,6 +27,19 @@ describe('Textarea', () => {
 		expect(container).toMatchSnapshot();
 	});
 
+	it('calls CharactersCount component with correct props', () => {
+		const props = { ...baseProps, maxLength: 30 };
+		render(<Textarea {...props} />);
+		expect(CharactersCount).toHaveBeenCalledWith(
+			{
+				id: props.id,
+				maxLength: props.maxLength,
+				value: props.value,
+			},
+			{}
+		);
+	});
+
 	it('should handle readOnly', () => {
 		const { container } = render(
 			<Textarea

package/src/components/Textarea/Textarea.tsx

@@ -7,6 +7,8 @@ import {
 import { slottableComponent } from '../shared/HOC/slottableComponent';
 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 Textarea({
 	handleChanges,
@@ -51,6 +53,7 @@ export const CustomTextarea = slottableComponent<CustomProps>(
 			placeHolder,
 		} = props;
 		const labelId = `label-${id}`;
+		const charactersCountId = getCharactersCountId(id, maxLength);
 
 		return (
 			<div className="lunatic-textarea">
@@ -62,19 +65,24 @@ export const CustomTextarea = slottableComponent<CustomProps>(
 					declarations={declarations}
 					id={id}
 				/>
-				<textarea
-					required={required}
-					disabled={disabled}
-					id={id}
-					rows={rows}
-					maxLength={maxLength}
-					cols={cols}
-					onChange={(e) => onChange(e.target.value)}
-					value={value ?? ''}
-					placeholder={placeHolder}
-					readOnly={readOnly}
-					aria-invalid={!!errors}
-				/>
+				<div className="field-with-count">
+					<textarea
+						required={required}
+						disabled={disabled}
+						id={id}
+						aria-labelledby={labelId}
+						aria-describedby={maxLength ? charactersCountId : undefined}
+						rows={rows}
+						maxLength={maxLength}
+						cols={cols}
+						onChange={(e) => onChange(e.target.value)}
+						value={value ?? ''}
+						placeholder={placeHolder}
+						readOnly={readOnly}
+						aria-invalid={!!errors}
+					/>
+					<CharactersCount id={id} maxLength={maxLength} value={value} />
+				</div>
 				<ComponentErrors errors={errors} />
 			</div>
 		);

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

@@ -5,12 +5,17 @@ exports[`Textarea > renders without crashing 1`] = `
   <div
     class="lunatic-textarea"
   >
-    <textarea
-      aria-invalid="false"
-      id="input"
+    <div
+      class="field-with-count"
     >
-      input
-    </textarea>
+      <textarea
+        aria-invalid="false"
+        aria-labelledby="label-input"
+        id="input"
+      >
+        input
+      </textarea>
+    </div>
   </div>
 </div>
 `;
@@ -20,13 +25,18 @@ exports[`Textarea > should handle readOnly 1`] = `
   <div
     class="lunatic-textarea"
   >
-    <textarea
-      aria-invalid="false"
-      id="textarea"
-      readonly=""
+    <div
+      class="field-with-count"
     >
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </textarea>
+      <textarea
+        aria-invalid="false"
+        aria-labelledby="label-textarea"
+        id="textarea"
+        readonly=""
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </textarea>
+    </div>
   </div>
 </div>
 `;

package/src/components/shared/CharactersCount/CharactersCount.spec.tsx

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { CharactersCount } from './CharactersCount';
+import { render } from '@testing-library/react';
+
+describe('CharactersCount', () => {
+	const defaultProps = {
+		id: 'test-id',
+		maxLength: 20,
+		value: 'Hello',
+	};
+
+	it('renders correctly characters count if there is a maximum length', () => {
+		const { getByText } = render(<CharactersCount {...defaultProps} />);
+
+		expect(getByText('5/20')).toBeInTheDocument();
+	});
+
+	it('should apply the max-length-reached class when limit is reached', () => {
+		const props = { ...defaultProps, maxLength: 5 };
+		const { getByText } = render(<CharactersCount {...props} />);
+
+		expect(getByText('5/5')).toHaveClass('max-length-reached');
+	});
+
+	it('should not render anything when maxLength is not provided', () => {
+		const props = { ...defaultProps, maxLength: undefined };
+		const { container } = render(<CharactersCount {...props} />);
+
+		expect(container.firstChild).toBeNull();
+	});
+});

package/src/components/shared/CharactersCount/CharactersCount.tsx

@@ -0,0 +1,27 @@
+import classNames from 'classnames';
+import { getCharactersCountId } from '../utils/getCharactersCountId';
+
+type Props = {
+	id: string;
+	maxLength?: number;
+	value?: string | null;
+};
+
+export function CharactersCount({ id, maxLength, value }: Readonly<Props>) {
+	if (!maxLength) return null;
+
+	const currentLength = value?.length ?? 0;
+	const charactersCountId = getCharactersCountId(id, maxLength);
+	const hasReachedMaxLength = currentLength === maxLength;
+
+	return (
+		<span
+			id={charactersCountId}
+			className={classNames('characters-count', {
+				'max-length-reached': hasReachedMaxLength,
+			})}
+		>
+			{`${currentLength}/${maxLength}`}
+		</span>
+	);
+}

package/src/components/shared/utils/getCharactersCountId.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest';
+import { getCharactersCountId } from './getCharactersCountId';
+
+describe('getCharacterCountId', () => {
+	it('should return the correct ID when maxLength is provided', () => {
+		expect(getCharactersCountId('test-id', 100)).toBe(
+			'characters-count-test-id'
+		);
+	});
+
+	it('should return undefined when maxLength is not provided', () => {
+		expect(getCharactersCountId('test-id')).toBeUndefined();
+	});
+});

package/src/components/shared/utils/getCharactersCountId.ts

@@ -0,0 +1,6 @@
+/**
+ * Get the correct id for characters count div, used for both input and textarea.
+ */
+export function getCharactersCountId(id: string, maxLength?: number) {
+	return maxLength ? `characters-count-${id}` : undefined;
+}

package/src/css/components/Input.scss

@@ -43,3 +43,13 @@
 		}
 	}
 }
+
+.characters-count {
+	display: block;
+	font-size: 12px;
+	padding-top: 0.3rem;
+}
+
+.max-length-reached {
+	color: red;
+}