@inseefr/lunatic 3.4.8-rc.0 → 3.4.9

package/src/components/CheckboxOne/CheckboxOne.tsx

@@ -1,6 +1,7 @@
 import { RadioGroup } from '../shared/Radio/RadioGroup';
 import type { LunaticComponentProps } from '../type';
 import { getComponentErrors } from '../shared/ComponentErrors/ComponentErrors';
+import { useLunaticComponentsOptions } from '../../use-lunatic/lunatic-context';
 
 /**
  * Checkbox acting as a radio (only one option can be checked at a time)
@@ -18,6 +19,7 @@ export function CheckboxOne({
 	declarations,
 	orientation,
 }: LunaticComponentProps<'CheckboxOne'>) {
+	const { detailAlwaysDisplayed } = useLunaticComponentsOptions();
 	return (
 		<RadioGroup
 			id={id}
@@ -33,6 +35,7 @@ export function CheckboxOne({
 			shortcut={shortcut}
 			declarations={declarations}
 			orientation={orientation ?? 'vertical'}
+			detailAlwaysDisplayed={detailAlwaysDisplayed}
 			clearable
 		/>
 	);

package/src/components/Datepicker/Datepicker.tsx

@@ -153,9 +153,16 @@ function numbersFromDateString(s?: string): [number, number, number] {
 	];
 }
 
+/**
+ * Check if the date provided by the user is valid (e.g. not 2001/02/29)
+ */
 function isDateValid(dateArray: [number, number, number]) {
 	const [year, month, day] = dateArray;
-	const date = new Date(year, month - 1, day);
+
+	// do not set the date directly on new Date(), to avoid transformation on year between 0 and 99.
+	//See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#year
+	const date = new Date();
+	date.setFullYear(year, month - 1, day);
 
 	return (
 		date.getFullYear() === year &&

package/src/components/Input/Input.tsx

@@ -65,11 +65,15 @@ export const CustomInput = slottableComponent<CustomProps>('Input', (props) => {
 				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);
+				}}
 			/>
 			<ComponentErrors errors={errors} />
 		</div>

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

@@ -10,6 +10,7 @@ exports[`Input > renders without crashing 1`] = `
       aria-labelledby="label-input"
       autocomplete="off"
       id="input"
+      title="input"
       type="text"
       value="input"
     />
@@ -28,6 +29,7 @@ exports[`Input > should handle readOnly 1`] = `
       autocomplete="off"
       id="number"
       readonly=""
+      title="toto"
       type="text"
       value="toto"
     />

package/src/components/InputNumber/InputNumber.spec.tsx

@@ -112,4 +112,24 @@ describe('InputNumber', () => {
 		const unit = container.querySelector('span');
 		expect(unit).toHaveTextContent('kg');
 	});
+
+	it('should display the input value from the start', () => {
+		const setSelectionRangeMock = vi.fn();
+		const { container } = render(
+			<InputNumber
+				{...baseProps}
+				value={100000000000000000000000000000000000}
+			/>
+		);
+
+		const input = container.querySelector('input[type="text"]');
+
+		fireEvent.blur(input!, {
+			target: {
+				...input,
+				setSelectionRange: setSelectionRangeMock,
+			},
+		});
+		expect(setSelectionRangeMock).toHaveBeenCalledWith(0, 0);
+	});
 });

package/src/components/InputNumber/InputNumberThousand.tsx

@@ -55,6 +55,7 @@ export const InputNumberThousand = ({
 			className={classNames({ disabled })}
 			onValueChange={handleChange}
 			value={value ?? ''}
+			title={value ? value.toString() : ''}
 			aria-labelledby={labelId}
 			disabled={disabled}
 			readOnly={readOnly}
@@ -68,6 +69,9 @@ export const InputNumberThousand = ({
 			thousandSeparator={inputNumberPropsI18N.thousandSeparator}
 			inputMode={decimals ? 'decimal' : 'numeric'}
 			aria-invalid={invalid}
+			onBlur={(e) => {
+				e.target.setSelectionRange(0, 0);
+			}}
 		/>
 	);
 };

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

@@ -12,6 +12,7 @@ exports[`InputNumber > renders without crashing 1`] = `
       id="number"
       inputmode="numeric"
       lang="en"
+      title="10"
       type="text"
       value="10"
     />
@@ -32,6 +33,7 @@ exports[`InputNumber > should handle readOnly 1`] = `
       inputmode="numeric"
       lang="en"
       readonly=""
+      title="123"
       type="text"
       value="123"
     />

package/src/components/Radio/Radio.tsx

@@ -2,6 +2,7 @@ import type { LunaticComponentProps } from '../type';
 import { getComponentErrors } from '../shared/ComponentErrors/ComponentErrors';
 import { RadioGroup } from '../shared/Radio/RadioGroup';
 import { slottableComponent } from '../shared/HOC/slottableComponent';
+import { useLunaticComponentsOptions } from '../../use-lunatic/lunatic-context';
 
 function LunaticRadio(props: LunaticComponentProps<'Radio'>) {
 	const {
@@ -19,6 +20,7 @@ function LunaticRadio(props: LunaticComponentProps<'Radio'>) {
 		declarations,
 		orientation,
 	} = props;
+	const { detailAlwaysDisplayed } = useLunaticComponentsOptions();
 	return (
 		<RadioGroup
 			id={id}
@@ -34,6 +36,7 @@ function LunaticRadio(props: LunaticComponentProps<'Radio'>) {
 			readOnly={readOnly}
 			declarations={declarations}
 			orientation={orientation ?? 'vertical'}
+			detailAlwaysDisplayed={detailAlwaysDisplayed}
 		/>
 	);
 }

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

@@ -37,6 +37,7 @@ exports[`RosterForLoop > renders the right number of columns 1`] = `
                   autocomplete="off"
                   id="jrc3ye5q-QOP-lo6tcvvx-0"
                   maxlength="249"
+                  title="azeaze"
                   type="text"
                   value="azeaze"
                 />
@@ -66,6 +67,7 @@ exports[`RosterForLoop > renders the right number of columns 1`] = `
                   autocomplete="off"
                   id="jrc3ye5q-QOP-lo6tcvvx-1"
                   maxlength="249"
+                  title="azeaze"
                   type="text"
                   value="azeaze"
                 />

package/src/components/shared/Checkbox/CheckboxOption.spec.tsx

@@ -17,6 +17,8 @@ describe('CheckboxOption', () => {
 		id: 'test-checkbox',
 		onCheck: vi.fn(),
 		label: 'Test checkbox',
+		detailLabel: 'My detail',
+		onDetailChange: () => {},
 	};
 
 	it('renders the component correctly', () => {
@@ -55,4 +57,23 @@ describe('CheckboxOption', () => {
 		fireEvent.keyDown(checkbox, { code: 'Space' });
 		expect(defaultProps.onCheck).toHaveBeenCalledWith(true);
 	});
+
+	it('renders the detail when checked', () => {
+		const { getByText } = render(
+			<CheckboxOption {...defaultProps} checked={true} />
+		);
+		expect(getByText(defaultProps.detailLabel)).toBeInTheDocument();
+	});
+	it('does not render the detail when unchecked', () => {
+		const { queryByText } = render(
+			<CheckboxOption {...defaultProps} checked={false} />
+		);
+		expect(queryByText(defaultProps.detailLabel)).toBeNull();
+	});
+	it('renders the details when unchecked with the detail always displayed attribute', () => {
+		const { getByText } = render(
+			<CheckboxOption {...defaultProps} checked={false} detailAlwaysDisplayed />
+		);
+		expect(getByText(defaultProps.detailLabel)).toBeInTheDocument();
+	});
 });

package/src/components/shared/Checkbox/CheckboxOption.tsx

@@ -3,6 +3,7 @@ import type { LunaticBaseProps } from '../../type';
 import { slottableComponent } from '../HOC/slottableComponent';
 import { Label } from '../Label/Label';
 import { useKeyboardKey } from '../../../hooks/useKeyboardKey';
+import { CustomInput } from '../../Input/Input';
 
 export type CheckboxOptionProps = {
 	disabled?: boolean;
@@ -15,6 +16,10 @@ export type CheckboxOptionProps = {
 	codeModality?: string;
 	shortcut?: boolean;
 	invalid?: boolean;
+	detailAlwaysDisplayed?: boolean;
+	detailLabel?: ReactNode;
+	detailValue?: string | null;
+	onDetailChange?: (value: string) => void;
 };
 
 function LunaticCheckboxOption({
@@ -25,11 +30,16 @@ function LunaticCheckboxOption({
 	onCheck,
 	label,
 	description,
+	detailAlwaysDisplayed,
+	detailLabel,
+	detailValue,
+	onDetailChange,
 	codeModality,
 	shortcut,
 	invalid,
 }: CheckboxOptionProps) {
 	const isEnabled = !readOnly && !disabled;
+	const hasDetail = !!onDetailChange;
 	const hasKeyboardShortcut = Boolean(shortcut && codeModality && isEnabled);
 	const onClickOption = () => {
 		if (isEnabled) {
@@ -88,6 +98,15 @@ function LunaticCheckboxOption({
 				)}{' '}
 				{label}
 			</Label>
+			{hasDetail && (checked || detailAlwaysDisplayed) && (
+				<CustomInput
+					id="detailId"
+					label={detailLabel ?? 'Précisez :'}
+					value={typeof detailValue === 'string' ? detailValue : ''}
+					onChange={onDetailChange}
+					disabled={disabled}
+				/>
+			)}
 		</div>
 	);
 }

package/src/components/shared/Radio/RadioGroup.tsx

@@ -22,6 +22,7 @@ export type RadioGroupProps = Pick<
 	| 'description'
 	| 'declarations'
 	| 'orientation'
+	| 'detailAlwaysDisplayed'
 > & {
 	errors?: LunaticError[];
 	clearable?: boolean;
@@ -44,6 +45,7 @@ function LunaticRadioGroup({
 	readOnly,
 	declarations,
 	orientation,
+	detailAlwaysDisplayed,
 }: RadioGroupProps) {
 	const onKeyDown = useListKeyboardHandler(options);
 	const maxIndex = options.length;
@@ -61,6 +63,7 @@ function LunaticRadioGroup({
 							id={radioId}
 							index={index}
 							checked={value === option.value}
+							detailAlwaysDisplayed={detailAlwaysDisplayed}
 							onKeyDown={onKeyDown}
 							checkboxStyle={checkboxStyle}
 							codeModality={shortcut ? codeModality : undefined}

package/src/components/shared/Radio/RadioOption.spec.tsx

@@ -73,4 +73,40 @@ describe('RadioOption', () => {
 		fireEvent.keyDown(option, { key: 'Enter', code: 'Enter' });
 		expect(onKeyDownMock).toHaveBeenCalled();
 	});
+
+	it('renders the detail when checked', () => {
+		const { getByText } = render(
+			<RadioOption
+				id="radio-option"
+				label="Test Option"
+				onDetailChange={() => {}}
+				detailLabel="My detail"
+				checked
+			/>
+		);
+		expect(getByText('My detail')).toBeInTheDocument();
+	});
+	it('does not render the detail when unchecked', () => {
+		const { queryByText } = render(
+			<RadioOption
+				id="radio-option"
+				label="Test Option"
+				onDetailChange={() => {}}
+				detailLabel="My detail"
+			/>
+		);
+		expect(queryByText('My detail')).toBeNull();
+	});
+	it('renders the details when unchecked with the detail always displayed attribute', () => {
+		const { getByText } = render(
+			<RadioOption
+				id="radio-option"
+				label="Test Option"
+				onDetailChange={() => {}}
+				detailLabel="My detail"
+				detailAlwaysDisplayed
+			/>
+		);
+		expect(getByText('My detail')).toBeInTheDocument();
+	});
 });

package/src/components/shared/Radio/RadioOption.tsx

@@ -17,6 +17,7 @@ export type Props = {
 	labelledBy?: string;
 	codeModality?: string;
 	invalid?: boolean;
+	detailAlwaysDisplayed?: boolean;
 } & InterpretedOption;
 
 function LunaticRadioOption({
@@ -30,10 +31,12 @@ function LunaticRadioOption({
 	shortcut,
 	codeModality,
 	id,
+	invalid,
 	labelledBy,
 	description,
 	label,
 	onDetailChange,
+	detailAlwaysDisplayed,
 	detailLabel,
 	detailValue,
 	onCheck,
@@ -80,6 +83,7 @@ function LunaticRadioOption({
 			<div
 				id={id}
 				role="radio"
+				aria-invalid={invalid}
 				aria-disabled={disabled}
 				className={classnames(
 					'lunatic-input-checkbox',
@@ -113,7 +117,7 @@ function LunaticRadioOption({
 					{label}
 				</Label>
 			</div>
-			{hasDetail && checked && (
+			{hasDetail && (checked || detailAlwaysDisplayed) && (
 				<CustomInput
 					id="detailId"
 					label={detailLabel ?? 'Précisez :'}

package/src/components/type.ts

@@ -191,6 +191,7 @@ export type ComponentPropsByType = {
 				detailLabel?: ReactNode;
 			}[];
 			orientation?: 'horizontal' | 'vertical';
+			detailAlwaysDisplayed?: boolean;
 			componentType?: 'CheckboxGroup';
 		};
 	CheckboxOne: LunaticBaseProps<string | null> &
@@ -198,6 +199,7 @@ export type ComponentPropsByType = {
 			options: Array<InterpretedOption>;
 			componentType?: 'CheckboxOne';
 			orientation?: 'horizontal' | 'vertical';
+			detailAlwaysDisplayed?: boolean;
 		};
 	Switch: LunaticBaseProps<boolean> &
 		LunaticExtraProps & {
@@ -217,6 +219,7 @@ export type ComponentPropsByType = {
 			response: { name: string };
 			componentType?: 'Radio';
 			orientation?: 'horizontal' | 'vertical';
+			detailAlwaysDisplayed?: boolean;
 		};
 	Roundabout: LunaticBaseProps<string> &
 		LunaticExtraProps & {

package/src/css/components/CheckboxOne.scss

@@ -9,7 +9,7 @@
 
 		label {
 			display: flex;
-			gap:0.5em;
+			gap: 0.5em;
 			align-items: center;
 			.label-description {
 				font-weight: lighter;

package/src/css/components/CheckboxOption.scss

@@ -12,12 +12,12 @@
 	display: flex;
 	align-items: center;
 	cursor: pointer;
-	gap: .5rem;
-	padding: .3rem 0;
+	gap: 0.5rem;
+	padding: 0.3rem 0;
 
 	label {
 		display: flex;
-		gap: .5em;
+		gap: 0.5em;
 		cursor: inherit;
 		margin: 0;
 		font-weight: normal;
@@ -31,33 +31,30 @@
 	height: 18px;
 	flex: none;
 	border-radius: 2px;
-	color: #FFF;
+	color: #fff;
 	border: 2px solid var(--color-primary-dark);
 
 	svg {
-		transform: scale(.9);
+		transform: scale(0.9);
 	}
 }
 
-.lunatic-input-checkbox[aria-checked="true"] .lunatic-input-checkbox__icon {
+.lunatic-input-checkbox[aria-checked='true'] .lunatic-input-checkbox__icon {
 	background-color: var(--color-primary-dark);
 }
 
-.lunatic-input-checkbox[aria-disabled="true"],
-.lunatic-input-checkbox[aria-readonly="true"] {
+.lunatic-input-checkbox[aria-disabled='true'],
+.lunatic-input-checkbox[aria-readonly='true'] {
 	cursor: default;
 
-	.lunatic-input-checkbox__icon
-	{
+	.lunatic-input-checkbox__icon {
 		border-color: var(--color-primary-light);
 		background-color: var(--color-disabled);
 	}
 }
 
-.lunatic-input-checkbox[aria-disabled="true"][aria-checked="true"],
-.lunatic-input-checkbox[aria-readonly="true"][aria-checked="true"]
-{
-
+.lunatic-input-checkbox[aria-disabled='true'][aria-checked='true'],
+.lunatic-input-checkbox[aria-readonly='true'][aria-checked='true'] {
 	.lunatic-input-checkbox__icon {
 		color: var(--color-primary-light);
 	}
@@ -71,15 +68,14 @@
 	svg {
 		display: none;
 	}
-
 }
 
-.lunatic-input-radio[aria-checked="true"] .lunatic-input-checkbox__icon {
+.lunatic-input-radio[aria-checked='true'] .lunatic-input-checkbox__icon {
 	background: transparent;
 }
 
-.lunatic-input-radio[aria-checked="true"] .lunatic-input-checkbox__icon::after {
-	content:'';
+.lunatic-input-radio[aria-checked='true'] .lunatic-input-checkbox__icon::after {
+	content: '';
 	width: 10px;
 	height: 10px;
 	border-radius: 10px;

package/src/css/components/Combobox.scss

@@ -86,13 +86,14 @@
 					height: 0;
 					opacity: 0;
 					background-color: var(--color-combo-box-background);
-					transition: opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+					transition:
+						opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
 						transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 
 					&.expanded {
 						display: flex;
 						flex-direction: column;
-						gap: .2rem;
+						gap: 0.2rem;
 						border: solid 1px var(--color-primary-light);
 						opacity: 1;
 						min-height: 30px;

package/src/css/components/Datepicker.scss

@@ -1,19 +1,19 @@
 .lunaticDatepickerFields {
-  display: flex;
-  align-items: flex-end;
-  gap: 1rem;
+	display: flex;
+	align-items: flex-end;
+	gap: 1rem;
 }
 
 .lunaticDatepickerField input {
-  width: 3.5em;
+	width: 3.5em;
 }
 
 .lunaticDatepickerFieldLarge input {
-  width: 4.5em;
+	width: 4.5em;
 }
 
 .lunaticDatepickerHint {
-  display: block;
-  font-weight: 400;
-  font-size: .9em;
+	display: block;
+	font-weight: 400;
+	font-size: 0.9em;
 }

package/src/css/components/Declarations.scss

@@ -28,7 +28,7 @@
 		width: fit-content;
 		padding: 1em;
 		&:before {
-			content: "→ "
+			content: '→ ';
 		}
 	}
 

package/src/css/components/Dragger.scss

@@ -1,8 +1,8 @@
 .lunatic-dragger {
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-  -moz-user-select: -moz-none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
+	display: inline-block;
+	width: 100%;
+	height: 100%;
+	-moz-user-select: -moz-none;
+	-khtml-user-select: none;
+	-webkit-user-select: none;
 }

package/src/css/components/Duration.scss

@@ -1,9 +1,9 @@
 .duration-fields,
 .duration-field {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
+	display: flex;
+	align-items: center;
+	gap: 1rem;
 }
 .duration-field {
-  gap: .5rem;
+	gap: 0.5rem;
 }

package/src/css/components/IconButton.scss

@@ -13,8 +13,10 @@
 	outline: inherit;
 	border: none;
 	background-color: royalblue;
-	box-shadow: 0px 3px 5px -1px rgb(0 0 0 / 20%),
-		0px 6px 10px 0px rgb(0 0 0 / 14%), 0px 1px 18px 0px rgb(0 0 0 / 12%);
+	box-shadow:
+		0px 3px 5px -1px rgb(0 0 0 / 20%),
+		0px 6px 10px 0px rgb(0 0 0 / 14%),
+		0px 1px 18px 0px rgb(0 0 0 / 12%);
 
 	&:hover {
 		cursor: pointer;

package/src/css/components/Input.scss

@@ -21,6 +21,9 @@
 			min-width: 0;
 			box-sizing: content-box;
 			background: none;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
 			&:focus {
 				outline: none;
 				border-bottom: 0.125rem solid var(--color-primary-main);

package/src/css/components/Missing.scss

@@ -15,7 +15,7 @@
 	color: var(--color-primary-main);
 }
 .missing-buttons .button-lunatic:disabled {
-	opacity: .5;
+	opacity: 0.5;
 }
 .missing-button-active .button-lunatic {
 	background-color: var(--color-primary-dark);

package/src/css/components/Roundabout.scss

@@ -8,7 +8,7 @@
 	display: grid;
 	grid-template-columns: 1fr max-content;
 	justify-content: space-between;
-	gap: .5rem;
+	gap: 0.5rem;
 }
 
 .lunatic-roundabout__item .lunatic-errors {
@@ -17,7 +17,7 @@
 
 .lunatic-roundabout__item + .lunatic-roundabout__item {
 	border-top: 1px solid var(--color-secondary-dark);
-	padding-top: .5rem;
+	padding-top: 0.5rem;
 	margin-top: 1rem;
 }
 
@@ -27,5 +27,5 @@
 }
 .lunatic-roundabout__button-progress,
 .lunatic-roundabout__button-progress:focus {
-	background-color: var(--color-primary-main)
+	background-color: var(--color-primary-main);
 }

package/src/css/components/Suggester.scss

@@ -53,7 +53,6 @@
 				min-width: 260px;
 				width: 100%;
 				.lunatic-suggester-content {
-
 					&.focused {
 						.lunatic-suggester-selection {
 						}
@@ -107,7 +106,8 @@
 						height: 0;
 						opacity: 0;
 						background-color: white;
-						transition: opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+						transition:
+							opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
 							transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 						&.expended {
 							border: solid 1px var(--color-primary-light);

package/src/css/components/Table.scss

@@ -21,10 +21,12 @@
 		top: 0;
 		z-index: 2;
 		border-collapse: separate;
-		background-color: #FFF;
+		background-color: #fff;
 		// Borders does not work on position sticky element, use box-shadow to imitate border
-		border-top: none!important;
-		box-shadow: inset 0 1px 0 var(--color-primary-dark), inset 0 -1px 0 var(--color-primary-dark);
+		border-top: none !important;
+		box-shadow:
+			inset 0 1px 0 var(--color-primary-dark),
+			inset 0 -1px 0 var(--color-primary-dark);
 	}
 
 	td {
@@ -37,7 +39,7 @@
 	}
 }
 
-  .lunatic-component .table-lunatic .tooltip-lunatic img {
-    height: 20px;
-    width: 20px;
-  }
+.lunatic-component .table-lunatic .tooltip-lunatic img {
+	height: 20px;
+	width: 20px;
+}