@nxgt/material 3.91.0 → 3.93.0

package/dist/lib/components/ui/display/event-chip/event-chip-content.d.ts

@@ -1,9 +1,4 @@
-import { Tone } from '../../tones.js';
-/** A small label an event carries, drawn after its title. */
-export type EventChipBadge = {
-    label: string;
-    tone?: Tone;
-};
+import { EventChipBadge } from './event-chip-badges.js';
 type ContentProps = {
     title: string;
     /** The start time alone, shown before the title when compact. */
@@ -14,7 +9,10 @@ type ContentProps = {
     compact: boolean;
     tight: boolean;
     solid: boolean;
-    badge?: EventChipBadge;
+    /** Already merged by `eventChipBadges`. */
+    badges?: EventChipBadge[];
+    /** The event is cancelled: the title is struck through and "Cancelled" joins its name. */
+    cancelled?: boolean;
 };
 /** What a chip says: the title and its time, on one line when `compact`. */
 export declare function EventChipContent(props: ContentProps): import("react").JSX.Element;

package/dist/lib/components/ui/display/event-chip/event-chip-title.d.ts

@@ -0,0 +1,9 @@
+/**
+ * An event's title: struck through (`<del>`) and followed by a hidden
+ * "Cancelled" (the chip's own translated word) when `cancelled`, so the state
+ * is spoken and not only drawn.
+ */
+export declare function ChipTitle({ title, cancelled, }: {
+    title: string;
+    cancelled?: boolean;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/display/event-chip/event-chip.classes.d.ts

@@ -1,3 +1,12 @@
 export type EventChipVariant = 'soft' | 'solid' | 'outline';
 /** Each variant's surface; the colour comes from `--event-color`. */
 export declare const EVENT_CHIP_VARIANTS: Record<EventChipVariant, string>;
+/** The classes of the chip's button: its variant, shape, size and, when cancelled, the muted dashed look. */
+export declare function eventChipClass({ variant, color, compact, cancelled, continuesBefore, continuesAfter, }: {
+    variant: EventChipVariant;
+    color: string;
+    compact: boolean;
+    cancelled: boolean;
+    continuesBefore: boolean;
+    continuesAfter: boolean;
+}): string;

package/dist/lib/components/ui/display/event-chip/event-chip.d.ts

@@ -1,6 +1,7 @@
 import { CSSProperties, MouseEventHandler } from 'react';
+import { Tone } from '../../tones.js';
 import { EventChipVariant } from './event-chip.classes.js';
-import { EventChipBadge } from './event-chip-content.js';
+import { EventChipBadge } from './event-chip-badges.js';
 export type { EventChipVariant } from './event-chip.classes.js';
 export type { EventChipBadge };
 export type EventChipProps = {
@@ -11,6 +12,16 @@ export type EventChipProps = {
     endTime?: string;
     /** Any CSS colour. Default: the primary colour. */
     color?: string;
+    /**
+     * A tone of the library (or one an app declared) the chip is drawn in when
+     * it sets no `color`.
+     */
+    tone?: Tone;
+    /**
+     * The event is cancelled: a muted chip with a dashed outline, the title
+     * struck through (`<del>`) and "Cancelled" in its accessible name.
+     */
+    cancelled?: boolean;
     allDay?: boolean;
     /** One line, the time before the title (a month cell, a short slot). */
     compact?: boolean;
@@ -20,6 +31,8 @@ export type EventChipProps = {
     variant?: EventChipVariant;
     /** A small label (and tone) after the title; hidden but still named where the box is tiny. */
     badge?: EventChipBadge;
+    /** Further badges after `badge` (a status, then a priority). */
+    badges?: EventChipBadge[];
     selected?: boolean;
     disabled?: boolean;
     continuesBefore?: boolean;
@@ -34,4 +47,4 @@ export type EventChipProps = {
  * is set from script (a CSS custom property), never as inline style in server
  * markup.
  */
-export declare function EventChip({ title, time, endTime, color, allDay, compact, tight, variant, badge, selected, disabled, continuesBefore, continuesAfter, onClick, className, style, }: EventChipProps): import("react").JSX.Element;
+export declare function EventChip({ title, time, endTime, color: ownColor, tone, cancelled, allDay, compact, tight, variant, badge, badges, selected, disabled, continuesBefore, continuesAfter, onClick, className, style, }: EventChipProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/attributes/attribute-values-form-field-set/attribute-values-form-field-set.d.ts

@@ -13,4 +13,4 @@ export interface AttributeValuesFormFieldSetProps<T extends Record<string, any>>
     /** Keep `label` as the group's accessible name but draw nothing, e.g. under a `FormSection` that already titles it. */
     hideLabel?: boolean;
 }
-export declare function AttributeValuesFormFieldSet<T extends Record<string, Attribute>>({ attributes, defaultValues, name, control, label, hideLabel, className, }: AttributeValuesFormFieldSetProps<T>): import("react").JSX.Element;
+export declare function AttributeValuesFormFieldSet<T extends Record<string, any>>({ attributes, defaultValues, name, control, label, hideLabel, className, }: AttributeValuesFormFieldSetProps<T>): import("react").JSX.Element;

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

@@ -11,7 +11,7 @@ export type ChoiceListControlProps = Pick<ChoiceListFieldProps, 'min' | 'rowLabe
     setIds?: (next: ChoiceRow[]) => void;
     t: ReturnType<typeof useMaterialTranslation>['t'];
     label: ReturnType<typeof defaultRowLabel>;
-    props: Omit<ChoiceListFieldProps, 'value' | 'onChange' | 'onAssignIds' | 'error' | 'rowErrors' | 'onBlur'>;
+    props: Omit<ChoiceListFieldProps, 'value' | 'onChange' | 'onAssignIds' | 'error' | 'rowErrors' | 'rowDetailErrors' | 'onBlur'>;
 };
 /** The list itself, with the group and per-row errors of the field. */
 export declare function ChoiceListControl({ rows, error, focus, setIds, onChange, t, label, min, selection, rowLabel, disabled, props, }: ChoiceListControlProps): import("react").JSX.Element;

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