@inseefr/lunatic 3.7.4 → 3.7.5

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

@@ -2,6 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { RosterForLoop } from './RosterForLoop';
 import type { LunaticComponentProps } from '../type';
+import { LunaticContext } from '../../use-lunatic/lunatic-context';
 
 describe('RosterForLoop', () => {
 	const mockOnChange = vi.fn();
@@ -38,5 +39,32 @@ describe('RosterForLoop', () => {
 		);
 		expect(container).toMatchSnapshot();
 		expect(screen.getAllByRole('row')).toHaveLength(2);
+		expect(screen.getByRole('button', { name: /add/i })).toBeEnabled();
+		expect(screen.getByRole('button', { name: /remove/i })).toBeEnabled();
+	});
+
+	it('disable the remove row button', () => {
+		const { container } = render(
+			<LunaticContext.Provider
+				value={{
+					componentsOptions: { disableRosterForLoopDeleteRowButton: true },
+				}}
+			>
+				<RosterForLoop
+					value={{ name: ['John Doe', 'Jane Doe'] }}
+					handleChanges={mockOnChange}
+					label="Ceci est un test"
+					id="table"
+					lines={{ min: 1, max: 3 }}
+					iterations={2}
+					getComponents={getComponents}
+					executeExpression={() => null as any}
+				/>
+			</LunaticContext.Provider>
+		);
+		expect(container).toMatchSnapshot();
+		expect(screen.getAllByRole('row')).toHaveLength(2);
+		expect(screen.getByRole('button', { name: /add/i })).toBeEnabled();
+		expect(screen.getByRole('button', { name: /remove/i })).toBeDisabled();
 	});
 });

package/src/components/RosterForLoop/RosterForLoop.tsx

@@ -10,6 +10,7 @@ import {
 } from '../shared/ComponentErrors/ComponentErrors';
 import { CustomLoop } from '../Loop/Loop';
 import { useLoopUtils } from '../Loop/utils';
+import { useLunaticComponentsOptions } from '../../use-lunatic/lunatic-context';
 
 /**
  * Loop displayed as a table
@@ -17,6 +18,7 @@ import { useLoopUtils } from '../Loop/utils';
 export const RosterForLoop = (
 	props: LunaticComponentProps<'RosterForLoop'>
 ) => {
+	const { disableRosterForLoopDeleteRowButton } = useLunaticComponentsOptions();
 	const { min, max, nbRows, addRow, removeRow } = useLoopUtils(props);
 	const {
 		errors,
@@ -43,6 +45,7 @@ export const RosterForLoop = (
 			addRow={nbRows === max ? undefined : addRow}
 			removeRow={nbRows === min ? undefined : removeRow}
 			canControlRows={!!(min && max && min !== max)}
+			disableDeleteRowButton={disableRosterForLoopDeleteRowButton}
 		>
 			<Table id={id}>
 				{header && <TableHeader header={header} />}

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

@@ -1,5 +1,119 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`RosterForLoop > disable the remove row button 1`] = `
+<div>
+  <label
+    class="lunatic-label"
+    for="table"
+    id="label-table"
+  >
+    Ceci est un test
+  </label>
+  <table
+    class="lunatic-table"
+    id="table-table"
+  >
+    <tbody
+      class="lunatic-table-tbody"
+    >
+      <tr
+        class="lunatic-table-tr"
+      >
+        <td
+          class="lunatic-table-td"
+        >
+          <div
+            class="field-container"
+          >
+            <div
+              class="field"
+            >
+              <div
+                class="lunatic-input"
+              >
+                <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>
+        </td>
+      </tr>
+      <tr
+        class="lunatic-table-tr"
+      >
+        <td
+          class="lunatic-table-td"
+        >
+          <div
+            class="field-container"
+          >
+            <div
+              class="field"
+            >
+              <div
+                class="lunatic-input"
+              >
+                <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>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <input
+    class="button-lunatic"
+    type="button"
+    value="Add row"
+  />
+  <input
+    class="button-lunatic disabled"
+    disabled=""
+    type="button"
+    value="Remove row"
+  />
+</div>
+`;
+
 exports[`RosterForLoop > renders the right number of columns 1`] = `
 <div>
   <label

package/src/components/shared/Missing/Missing.tsx

@@ -82,12 +82,12 @@ export const MissingPure = (
 	);
 
 	useKeyboardKey(
-		Object.values(missingShortcut),
+		missingShortcut ? Object.values(missingShortcut) : [],
 		(e) => {
 			e.preventDefault();
-			if (e.key.toLowerCase() === missingShortcut.dontKnow.toLowerCase())
+			if (e.key.toLowerCase() === missingShortcut?.dontKnow.toLowerCase())
 				onClickDK();
-			if (e.key.toLowerCase() === missingShortcut.refused.toLowerCase())
+			if (e.key.toLowerCase() === missingShortcut?.refused.toLowerCase())
 				onClickRF();
 		},
 		hasKeyboardShortcut

package/src/stories/utils/Orchestrator.tsx

@@ -36,6 +36,8 @@ type Props = {
 	getReferentiel: (name: string) => Promise<IndexEntry[]>;
 	// Display detail input even if the corresponding checkbox is not checked
 	detailAlwaysDisplayed?: boolean;
+	// Set the "remove row" button as disabled in roster for loop.
+	disableRosterForLoopDeleteRowButton?: boolean;
 	// Enable missing buttons
 	missing?: boolean;
 	// Readonly mode
@@ -78,11 +80,15 @@ function OrchestratorForStories(props: Readonly<Props>) {
 		readOnly,
 		disabled,
 		detailAlwaysDisplayed,
+		disableRosterForLoopDeleteRowButton,
 		autoSuggesterLoading,
 		extraTabs = [],
 	} = props;
 
-	const componentsOptions = { detailAlwaysDisplayed };
+	const componentsOptions = {
+		detailAlwaysDisplayed,
+		disableRosterForLoopDeleteRowButton,
+	};
 
 	const {
 		getComponents,
@@ -313,6 +319,7 @@ export const OrchestratorMeta: Meta<typeof Orchestrator> = {
 		readOnly: false,
 		disabled: false,
 		detailAlwaysDisplayed: false,
+		disableRosterForLoopDeleteRowButton: false,
 		autoSuggesterLoading: false,
 	},
 };

package/src/use-lunatic/lunatic-context.tsx

@@ -6,8 +6,21 @@ import {
 } from 'react';
 
 import D from '../i18n/index';
+import type { LunaticOptions } from './type';
 
-const LunaticContext = createContext({
+type LunaticContextType = {
+	missingStrategy?: LunaticOptions['missingStrategy'];
+	management?: LunaticOptions['management'];
+	missing?: LunaticOptions['missing'];
+	shortcut?: LunaticOptions['shortcut'];
+	missingShortcut?: LunaticOptions['missingShortcut'];
+	dontKnowButton?: LunaticOptions['dontKnowButton'];
+	refusedButton?: LunaticOptions['refusedButton'];
+	componentsOptions?: LunaticOptions['componentsOptions'];
+};
+
+/** Mandatory values used as a context's last-resort fallback. */
+const defaultValues = {
 	missingStrategy: () => {},
 	management: false,
 	missing: false,
@@ -15,8 +28,15 @@ const LunaticContext = createContext({
 	missingShortcut: { dontKnow: '', refused: '' },
 	dontKnowButton: D.DK,
 	refusedButton: D.RF,
-	componentsOptions: { detailAlwaysDisplayed: false },
-});
+	componentsOptions: {
+		detailAlwaysDisplayed: false,
+		disableRosterForLoopDeleteRowButton: false,
+	},
+};
+
+/** Expose specific Lunatic options to handle some (e.g. missing, management, components options) */
+export const LunaticContext = createContext<LunaticContextType>(defaultValues);
+
 /**
  * Provide `missing`, `missingStrategy`, `shortcut` and `missingShortcut`,
  * `dontKnowButton`, `refusedButton` to `Missing` component to manage
@@ -41,9 +61,10 @@ export const useLunaticMissing = () => {
 	};
 };
 
+/** Expose the specified options to override default component behaviour. */
 export const useLunaticComponentsOptions = () => {
 	const { componentsOptions } = useContext(LunaticContext);
-	return componentsOptions;
+	return componentsOptions ?? {};
 };
 
 /** Provide `management` to display data states [COLLECTED,EDITED,FORCED] */
@@ -60,16 +81,7 @@ export function createLunaticProvider({
 	dontKnowButton,
 	refusedButton,
 	componentsOptions,
-}: {
-	management: boolean;
-	missing: boolean;
-	missingStrategy: () => void;
-	shortcut: boolean;
-	missingShortcut: { dontKnow: string; refused: string };
-	dontKnowButton: string;
-	refusedButton: string;
-	componentsOptions: { detailAlwaysDisplayed: boolean };
-}): FunctionComponent<PropsWithChildren> {
+}: LunaticContextType): FunctionComponent<PropsWithChildren> {
 	const value = {
 		management,
 		missing,

package/src/use-lunatic/type.ts

@@ -185,16 +185,25 @@ export type LunaticReducerState = {
 
 /** Specific behaviour options defined in the {@link useLunatic} hook. */
 export type LunaticOptions = {
-	/** Ignore filters. (default: `false`) */
+	/**
+	 * Ignore filters.
+	 * @default false
+	 */
 	disableFilters?: boolean;
 
-	/** Disable filters description. (default: `true`) */
+	/**
+	 * Disable filters description.
+	 * @default true
+	 */
 	disableFiltersDescription?: boolean;
 
 	/** Enable VTL and Markdown support. */
 	features?: ('MD' | 'VTL')[];
 	preferences?: ['COLLECTED'];
-	/** Key in which the data is saved. (default: `"COLLECTED"`) */
+	/**
+	 * Key in which the data is saved.
+	 * @default "COLLECTED"
+	 */
 	savingType?: 'COLLECTED';
 	/** Function called when a variable is changed by a user input (must be memoized as it is used in dependency of a `useCallback` by the library). */
 	onChange?: LunaticChangesHandler;
@@ -204,24 +213,43 @@ export type LunaticOptions = {
 	 *
 	 * Enable management mode which allow to handle multiple states of the same variable (used by recovery positions).
 	 *
-	 * The administrator can switch between `COLLECTED`, `EDITED`, `INPUTTED` modes. (default: `false`)
+	 * The administrator can switch between `COLLECTED`, `EDITED`, `INPUTTED` modes.
+	 * @default false
 	 */
 	management?: boolean;
-	/** Enable keyboard shortcuts for checkboxes, radio buttons and missing buttons (default: `false`). */
+	/**
+	 * Enable keyboard shortcuts for checkboxes, radio buttons and missing buttons.
+	 * @default false
+	 */
 	shortcut?: boolean;
-	/** Starting page at launch. (default: `"1"`) */
+	/**
+	 * Starting page at launch.
+	 * @default '1'
+	 */
 	initialPage?: PageTag;
 	/** Furthest page the user ever reached. */
 	lastReachedPage?: PageTag;
-	/** Enable the preemptive loading of suggester data on Lunatic initialization. (default: `false`) */
+	/**
+	 * Enable the preemptive loading of suggester data on Lunatic initialization.
+	 * @default false
+	 */
 	autoSuggesterLoading?: boolean;
 	/** Function called to fetch nomenclatures used by the suggesters. */
 	getReferentiel?: (name: string) => Promise<Array<IndexEntry>>;
-	/** Enable data controls (form validation). (default: `false`) */
+	/**
+	 * Enable data controls (form validation).
+	 * @default false
+	 */
 	activeControls?: boolean;
-	/** Enable overview system. (default: `false`) */
+	/**
+	 * Enable overview system.
+	 * @default false
+	 */
 	withOverview?: boolean;
-	/** Enable missing system. (default: `false`) */
+	/**
+	 * Enable missing system.
+	 * @default false
+	 */
 	missing?: boolean;
 	/** Function triggered when a missing button is clicked. */
 	missingStrategy?: () => void;
@@ -231,10 +259,29 @@ export type LunaticOptions = {
 	dontKnowButton?: string;
 	/** "Refused" button label. */
 	refusedButton?: string;
-	/** Enable change tracking to keep a track of what variable changed (allow using getChangedData()). (default: `false`) */
+	/**
+	 * Enable change tracking to keep a track of what variable changed
+	 * (allow using getChangedData()).
+	 * @default false
+	 */
 	trackChanges?: boolean;
 	logger?: LunaticLogger;
-	componentsOptions?: { detailAlwaysDisplayed?: boolean };
+	/** Options that can be set to override default component behaviour. */
+	componentsOptions?: {
+		/**
+		 * Set the details ("autre précisez") as always displayed (even if the
+		 * related "other" modality is not currently selected).
+		 * @since 3.4.9
+		 * @default false
+		 */
+		detailAlwaysDisplayed?: boolean;
+		/**
+		 * Set the "remove row" button as disabled in roster for loop.
+		 * @since 3.7.5
+		 * @default false
+		 */
+		disableRosterForLoopDeleteRowButton?: boolean;
+	};
 	/** Commit variable change automatically for resizing / cleaning (used for testing) **/
 	autoCommit?: boolean;
 };

package/src/use-lunatic/use-lunatic.test.ts

@@ -106,7 +106,10 @@ describe('use-lunatic()', () => {
 					missingShortcut: { dontKnow: '1', refused: '2' },
 					dontKnowButton: 'DK',
 					refusedButton: 'RF',
-					componentsOptions: { detailAlwaysDisplayed: false },
+					componentsOptions: {
+						detailAlwaysDisplayed: false,
+						disableRosterForLoopDeleteRowButton: false,
+					},
 				});
 			});
 

package/src/use-lunatic/use-lunatic.ts

@@ -67,7 +67,10 @@ const defaultOptions = {
 	refusedButton: DEFAULT_REFUSED,
 	trackChanges: false,
 	logger: ConsoleLogger,
-	componentsOptions: { detailAlwaysDisplayed: false },
+	componentsOptions: {
+		detailAlwaysDisplayed: false,
+		disableRosterForLoopDeleteRowButton: false,
+	},
 } satisfies LunaticOptions;
 
 /** The first library entrypoint is the `useLunatic` hook. */
@@ -143,6 +146,7 @@ export function useLunatic(
 			dontKnowButton,
 			refusedButton,
 			componentsOptions.detailAlwaysDisplayed,
+			componentsOptions.disableRosterForLoopDeleteRowButton,
 		]
 	);