@nxgt/material 3.67.0 → 3.70.0

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

@@ -0,0 +1,27 @@
+import { ChoiceListSelection, ChoiceRow } from './types.js';
+/** A new row id, unique in the page. */
+export declare function newChoiceId(): string;
+/** Rows that all have a distinct id: a missing or repeated one is replaced. */
+export declare function withIds(rows: readonly ChoiceRow[]): ChoiceRow[];
+/** Rows shown before they have a distinct id: a placeholder per position. */
+export declare const provisionalIds: (rows: readonly ChoiceRow[]) => ChoiceRow[];
+/** Whether every row has a distinct id. */
+export declare const hasIds: (rows: readonly ChoiceRow[]) => boolean;
+/** Marks or unmarks a row; in `single`, marking a row unmarks the others. */
+export declare function setCorrect(rows: readonly ChoiceRow[], id: string, correct: boolean, selection: ChoiceListSelection): ChoiceRow[];
+/** 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[];
+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';
+/**
+ * What stops the list from being valid, first issue first: fewer than `min`
+ * rows, several rows marked in `single`, no row marked (unless
+ * `requireCorrect` is false), or a row with no text.
+ */
+export declare function choiceListIssue(rows: readonly ChoiceRow[], options?: {
+    min?: number;
+    selection?: ChoiceListSelection;
+    requireCorrect?: boolean;
+}): ChoiceListIssue | undefined;

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

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

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

@@ -0,0 +1,18 @@
+import { ChoiceListSelection } from '../types.js';
+export type ChoiceMarkProps = {
+    selection: ChoiceListSelection;
+    /** The list's radio `name`, shared by its radios (`single`). */
+    radioName: string;
+    correct: boolean;
+    /** Visible word, e.g. "Correct". */
+    text: string;
+    /** Accessible name; it starts with `text`. */
+    name: string;
+    disabled?: boolean;
+    onCorrectChange: (correct: boolean) => void;
+};
+/**
+ * A row's mark: a radio of the list's radio group in `single`, a checkbox in
+ * `multiple`, with a visible word beside it.
+ */
+export declare function ChoiceMark({ selection, radioName, correct, text, name, disabled, onCorrectChange, }: ChoiceMarkProps): import("react").JSX.Element;

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

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { ChoiceListSelection, ChoiceRow as Row } from '../types.js';
+export type ChoiceRowProps = {
+    row: Row;
+    position: number;
+    radioName: string;
+    selection: ChoiceListSelection;
+    disabled?: boolean;
+    error?: ReactNode;
+    names: {
+        text: (position: number) => string;
+        correctText: string;
+        correct: (position: number) => string;
+    };
+    onText: (text: string) => void;
+    onCorrect: (correct: boolean) => 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;

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

@@ -0,0 +1,44 @@
+import { ComponentProps, ReactNode } from 'react';
+import { RepeatableGroupProps } from '../repeatable-group/types.js';
+/** One answer choice: its text, and whether it is a correct answer. */
+export type ChoiceRow = {
+    /** Stable across edits and moves; given to a new row, kept on the others. */
+    id: string;
+    text: string;
+    correct: boolean;
+};
+/**
+ * `single` marks one row (radios; marking a row unmarks the others) and
+ * `multiple` allows several (checkboxes). A `single` list that holds several
+ * marked rows is not changed, and fails the `too-many` rule.
+ */
+export type ChoiceListSelection = 'single' | 'multiple';
+export type ChoiceListFieldProps = Omit<ComponentProps<'div'>, 'children' | 'onChange' | 'defaultValue'> & Pick<RepeatableGroupProps<ChoiceRow>, 'min' | 'max' | 'disabled' | 'emptyTitle' | 'emptyDescription'> & {
+    value: readonly ChoiceRow[];
+    onChange: (rows: ChoiceRow[]) => void;
+    /**
+     * Called once on mount, instead of `onChange`, with the rows whose id was
+     * missing or repeated given a new one. A form passes a handler that does
+     * not mark itself dirty.
+     */
+    onAssignIds?: (rows: ChoiceRow[]) => void;
+    selection?: ChoiceListSelection;
+    /** The group's label, above the rows. */
+    label?: ReactNode;
+    /** What one row is, lower case; default "answer", translated. */
+    rowLabel?: string;
+    /** The Add button's text. Default "Add {rowLabel}", translated. */
+    addLabel?: string;
+    /** Move up and move down buttons on each row. Default true. */
+    reorderable?: boolean;
+    /** An error about the whole list, under the rows. */
+    error?: ReactNode;
+    /** An error per row, by id: `{ [row.id]: 'Enter the answer' }`. */
+    rowErrors?: 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
+     * needed.
+     */
+    onBlur?: () => void;
+};