@nxgt/material 3.92.0 → 3.93.0

package/dist/lib/components/ui/fields/choice-list/choice-list-field.d.ts

@@ -10,4 +10,4 @@ export type { ChoiceListFieldProps } from './types.js';
  * new one, with one call of `onAssignIds` (default: `onChange`) on mount.
  * `ChoiceListFormField` wires it to react-hook-form.
  */
-export declare function ChoiceListField({ value, onChange, onAssignIds, selection, rowLabel, reorderable, rowErrors, disabled, onBlur, ref, ...props }: ChoiceListFieldProps): import("react").JSX.Element;
+export declare function ChoiceListField({ value, onChange, onAssignIds, selection, rowLabel, reorderable, rowErrors, rowDetail, rowDetailErrors, disabled, onBlur, ref, ...props }: ChoiceListFieldProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/choice-list/choice-list-focus.d.ts

@@ -10,6 +10,9 @@ export type ArrayError = {
         text?: {
             message?: string;
         };
+        explanation?: {
+            message?: string;
+        };
     } | undefined;
 };
 /**
@@ -43,7 +46,7 @@ export declare function useRefusedFocus(error: () => ArrayError | undefined, bla
 };
 /**
  * The handle React Hook Form gets as the `ref` of a row path
- * (`choices.<i>.text`): `setFocus` and `setError(…, { shouldFocus })` on that
- * path call its `focus()`, which goes to the row's text input.
+ * (`choices.<i>.text`, or `.explanation`): `setFocus` and `setError(…, { shouldFocus })` on that
+ * path call its `focus()`, which goes to the row's text input (the detail textarea for `.explanation`).
  */
-export declare function rowFocus(list: RefObject<Element | null>, position: number): FocusHandle;
+export declare function rowFocus(list: RefObject<Element | null>, position: number, field?: 'text' | 'explanation'): FocusHandle;

package/dist/lib/components/ui/fields/choice-list/choice-list-form-field.d.ts

@@ -1,6 +1,6 @@
 import { FieldValues, UseControllerProps } from 'react-hook-form';
 import { ChoiceListFieldProps } from './types.js';
-export type ChoiceListFormFieldProps<T extends FieldValues> = Pick<UseControllerProps<T>, 'control' | 'name'> & Omit<ChoiceListFieldProps, 'value' | 'onChange' | 'onAssignIds' | 'error' | 'rowErrors' | 'onBlur'> & {
+export type ChoiceListFormFieldProps<T extends FieldValues> = Pick<UseControllerProps<T>, 'control' | 'name'> & Omit<ChoiceListFieldProps, 'value' | 'onChange' | 'onAssignIds' | 'error' | 'rowErrors' | 'rowDetailErrors' | 'onBlur'> & {
     /**
      * The built-in rules ask for one marked row at least. `false` lets a list
      * with none pass (a poll). Default true.
@@ -16,4 +16,4 @@ export type ChoiceListFormFieldProps<T extends FieldValues> = Pick<UseController
  * way: `choices.2.text` under row 3, `choices` under the list. Ids given on
  * mount do not make the form dirty when a `FormProvider` is above.
  */
-export declare function ChoiceListFormField<T extends FieldValues>({ control, name, min, selection, requireCorrect, rowLabel, disabled, ...props }: ChoiceListFormFieldProps<T>): import("react").JSX.Element;
+export declare function ChoiceListFormField<T extends FieldValues>({ control, name, min, selection, requireCorrect, rowLabel, disabled, rowDetail, ...props }: ChoiceListFormFieldProps<T>): import("react").JSX.Element;

package/dist/lib/components/ui/fields/choice-list/choice-list-names.d.ts

@@ -5,6 +5,8 @@ type Translate = ReturnType<typeof useMaterialTranslation>['t'];
 export declare const defaultRowLabel: (t: Translate) => string;
 /** A row's text field label: "Answer 2". */
 export declare const textLabel: (label: string, position: number) => string;
+/** A row's detail textarea label: "Explanation 2". */
+export declare const detailLabel: (label: string | undefined, t: Translate, position: number) => string;
 /** The visible word beside the mark. */
 export declare const correctText: (t: Translate) => string;
 /** The mark's accessible name, which starts with its visible word. */

package/dist/lib/components/ui/fields/choice-list/choice-list.utils.d.ts

@@ -12,6 +12,8 @@ export declare function setCorrect(rows: readonly ChoiceRow[], id: string, corre
 /** The rows with one more at the end; in `single` it is marked when none is. */
 export declare function addChoice(rows: readonly ChoiceRow[], selection: ChoiceListSelection): ChoiceRow[];
 export declare function setText(rows: readonly ChoiceRow[], id: string, text: string): ChoiceRow[];
+/** Sets a row's detail text, keeping its other fields. */
+export declare function setExplanation(rows: readonly ChoiceRow[], id: string, explanation: string): ChoiceRow[];
 export declare const removeAt: (rows: readonly ChoiceRow[], index: number) => ChoiceRow[];
 export declare function moveRow(rows: readonly ChoiceRow[], from: number, to: number): ChoiceRow[];
 export type ChoiceListIssue = 'too-few' | 'too-many' | 'none-correct' | 'blank';

package/dist/lib/components/ui/fields/choice-list/index.d.ts

@@ -1,3 +1,3 @@
 export * from './choice-list-field.js';
 export * from './choice-list-form-field.js';
-export type { ChoiceListSelection, ChoiceRow } from './types.js';
+export type { ChoiceListSelection, ChoiceRow, ChoiceRowDetail } from './types.js';

package/dist/lib/components/ui/fields/choice-list/partials/choice-row.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ChoiceListSelection, ChoiceRow as Row } from '../types.js';
+import { ChoiceListSelection, ChoiceRowDetail, ChoiceRow as Row } from '../types.js';
 export type ChoiceRowProps = {
     row: Row;
     position: number;
@@ -7,6 +7,11 @@ export type ChoiceRowProps = {
     selection: ChoiceListSelection;
     disabled?: boolean;
     error?: ReactNode;
+    /** The detail textarea under the row; absent: none. */
+    detail?: ChoiceRowDetail & {
+        name: string;
+        error?: ReactNode;
+    };
     names: {
         text: (position: number) => string;
         correctText: string;
@@ -14,6 +19,7 @@ export type ChoiceRowProps = {
     };
     onText: (text: string) => void;
     onCorrect: (correct: boolean) => void;
+    onDetail?: (explanation: string) => void;
 };
-/** One row's fields: the answer's text, then its mark. */
-export declare function ChoiceListRow({ row, position, radioName, selection, disabled, error, names, onText, onCorrect, }: ChoiceRowProps): import("react").JSX.Element;
+/** One row's fields: the answer's text, its mark, then its detail when asked. */
+export declare function ChoiceListRow({ row, position, radioName, selection, disabled, error, detail, names, onText, onCorrect, onDetail, }: ChoiceRowProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/choice-list/types.d.ts

@@ -6,6 +6,19 @@ export type ChoiceRow = {
     id: string;
     text: string;
     correct: boolean;
+    /**
+     * A detail about the choice (why it is right or wrong), edited when the
+     * list has `rowDetail`. Absent until a user types in it.
+     */
+    explanation?: string;
+};
+/** The optional detail textarea under each row (`ChoiceRow.explanation`). */
+export type ChoiceRowDetail = {
+    /** The textarea's label, before the row's number. Default "Explanation", translated. */
+    label?: string;
+    placeholder?: string;
+    /** Limits the text and shows a counter. */
+    maxLength?: number;
 };
 /**
  * `single` marks one row (radios; marking a row unmarks the others) and
@@ -35,6 +48,13 @@ export type ChoiceListFieldProps = Omit<ComponentProps<'div'>, 'children' | 'onC
     error?: ReactNode;
     /** An error per row, by id: `{ [row.id]: 'Enter the answer' }`. */
     rowErrors?: Readonly<Record<string, ReactNode>>;
+    /**
+     * Adds a textarea under each row, stored as `ChoiceRow.explanation`
+     * (`true` for its defaults). Absent: no detail, rows unchanged.
+     */
+    rowDetail?: boolean | ChoiceRowDetail;
+    /** An error per row's detail, by id. */
+    rowDetailErrors?: Readonly<Record<string, ReactNode>>;
     /**
      * Called when the focus leaves the whole list, for a field used alone;
      * inside a `FieldBlur` the list's root is registered and this is not