@nxgt/material 2.18.0 → 2.19.0

package/dist/lib/components/ui/fields/repeatable-group/repeatable-group.d.ts

@@ -0,0 +1,12 @@
+import { RepeatableGroupProps } from './types';
+export type { RepeatableGroupProps, RepeatableGroupRowContext, } from './types';
+/**
+ * Rows of fields a user adds, removes and, with `reorderable`, moves: a list
+ * (`ul`/`li`) of rows, each from `renderRow`, a Remove button per row named
+ * after it ("Remove period 2"), and an Add button. An added row's first field
+ * takes the focus, a removed row hands it to its neighbour (or to Add), a
+ * moved row keeps it on its move button, and each change is announced
+ * politely. For react-hook-form, `RepeatableGroupFormField` wires it to
+ * `useFieldArray`.
+ */
+export declare function RepeatableGroup<TItem>({ items, renderRow, getKey, label, rowLabel, addLabel, onAdd, onRemove, onMove, reorderable, min, max, disabled, error, emptyTitle, emptyDescription, className, ref, ...props }: RepeatableGroupProps<TItem>): import("react").JSX.Element;

package/dist/lib/components/ui/fields/repeatable-group/types.d.ts

@@ -0,0 +1,45 @@
+import { ComponentProps, Key, ReactNode } from 'react';
+/** What `renderRow` is given for each row. */
+export type RepeatableGroupRowContext<TItem> = {
+    item: TItem;
+    /** 0-based, for the row's field names (`periods.${index}.name`). */
+    index: number;
+    /** 1-based, as a user reads it ("Period 2"). */
+    position: number;
+};
+export type RepeatableGroupProps<TItem> = Omit<ComponentProps<'div'>, 'children' | 'onChange'> & {
+    /** The rows' values, one row each. */
+    items: readonly TItem[];
+    /** Renders one row's fields. */
+    renderRow: (row: RepeatableGroupRowContext<TItem>) => ReactNode;
+    /**
+     * A stable key per row; by default the item's `id` (what react-hook-form's
+     * `useFieldArray` gives each field), else its index.
+     */
+    getKey?: (item: TItem, index: number) => Key;
+    /** The group's label, above the rows; it names the group and the list. */
+    label?: ReactNode;
+    /**
+     * What one row is, lower case: it names the row's buttons ("Remove
+     * period 2") and the announcements. Default "row", translated.
+     */
+    rowLabel?: string;
+    /** The Add button's text. Default "Add {rowLabel}", translated. */
+    addLabel?: string;
+    onAdd: () => void;
+    onRemove: (index: number) => void;
+    /** Called by the move buttons, which `reorderable` shows. */
+    onMove?: (from: number, to: number) => void;
+    /** Move up and move down buttons on each row. */
+    reorderable?: boolean;
+    /** No Remove at this many rows. */
+    min?: number;
+    /** The Add button is disabled at this many rows, and says why. */
+    max?: number;
+    disabled?: boolean;
+    /** An error about the whole group (`arrayErrorMessage`), under the rows. */
+    error?: ReactNode;
+    /** With no row: an EmptyState with this title (and description). */
+    emptyTitle?: ReactNode;
+    emptyDescription?: ReactNode;
+};

package/dist/lib/components/ui/fields/repeatable-group/use-repeatable-group.d.ts

@@ -0,0 +1,32 @@
+import { RowMoveDirection } from '@nxgt/material-core/repeatable-group';
+type Options = {
+    items: readonly unknown[];
+    rowLabel?: string;
+    max?: number;
+    onAdd: () => void;
+    onRemove: (index: number) => void;
+    onMove?: (from: number, to: number) => void;
+};
+/**
+ * A RepeatableGroup's behaviour: the buttons' names, the focus after a row
+ * is added, removed or moved (the rules are `@nxgt/material-core`'s, shared
+ * with the Vue group), and what the polite live region says.
+ */
+export declare function useRepeatableGroup(options: Options): {
+    setRoot: (node: Element | null) => void;
+    message: {
+        text: string;
+        id: number;
+    };
+    names: {
+        add: string;
+        remove: (position: number) => string;
+        moveUp: (position: number) => string;
+        moveDown: (position: number) => string;
+        maxReached: string;
+    };
+    add: () => void;
+    remove: (index: number) => void;
+    move: (index: number, direction: RowMoveDirection) => void;
+};
+export {};

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

@@ -7,5 +7,11 @@ export type SearchFieldProps = Omit<InputProps, 'type'> & {
     loading?: boolean;
     debounceMs?: number;
     onValueChange?: (value: string) => void;
+    /**
+     * A hint for the key that focuses the field, for example `"/"`: shown as a
+     * `Kbd` while the field is empty and set as `aria-keyshortcuts`. It binds no
+     * key; the page owns the listener.
+     */
+    shortcut?: string;
 };
-export declare function SearchField({ id, value: valueProp, defaultValue, onChange, onValueChange, debounceMs, loading, placeholder, label, helperText, error, disabled, required, name, className, onKeyDown, ...props }: SearchFieldProps): import("react").JSX.Element;
+export declare function SearchField({ id, value: valueProp, defaultValue, onChange, onValueChange, debounceMs, loading, placeholder, label, helperText, error, disabled, required, name, className, onKeyDown, shortcut, ...props }: SearchFieldProps): import("react").JSX.Element;

package/dist/lib/components/ui/overlays/command/command-item.d.ts

@@ -0,0 +1,10 @@
+import { Command as CommandPrimitive } from 'cmdk';
+import { ComponentProps } from 'react';
+declare function CommandItem({ className, checked, children, ...props }: ComponentProps<typeof CommandPrimitive.Item> & {
+    /**
+     * Sets `aria-checked` and shows a checkbox indicator. cmdk's
+     * `aria-selected` stays the highlighted item, not the checked one.
+     */
+    checked?: boolean;
+}): import("react").JSX.Element;
+export { CommandItem };

package/dist/lib/components/ui/overlays/command/command.d.ts

@@ -1,16 +1,19 @@
 import { Command as CommandPrimitive } from 'cmdk';
 import { ComponentProps } from 'react';
 import { Dialog } from '../dialog/dialog';
+import { CommandItem } from './command-item';
 declare function Command({ className, ...props }: ComponentProps<typeof CommandPrimitive>): import("react").JSX.Element;
 declare function CommandDialog({ title, description, children, ...props }: ComponentProps<typeof Dialog> & {
     title?: string;
     description?: string;
 }): import("react").JSX.Element;
 declare function CommandInput({ className, ...props }: ComponentProps<typeof CommandPrimitive.Input>): import("react").JSX.Element;
-declare function CommandList({ className, ...props }: ComponentProps<typeof CommandPrimitive.List>): import("react").JSX.Element;
+declare function CommandList({ className, multiselectable, ...props }: ComponentProps<typeof CommandPrimitive.List> & {
+    /** Sets `aria-multiselectable`: the items carry a `checked` state. */
+    multiselectable?: boolean;
+}): import("react").JSX.Element;
 declare function CommandEmpty({ ...props }: ComponentProps<typeof CommandPrimitive.Empty>): import("react").JSX.Element;
 declare function CommandGroup({ className, ...props }: ComponentProps<typeof CommandPrimitive.Group>): import("react").JSX.Element;
 declare function CommandSeparator({ className, ...props }: ComponentProps<typeof CommandPrimitive.Separator>): import("react").JSX.Element;
-declare function CommandItem({ className, ...props }: ComponentProps<typeof CommandPrimitive.Item>): import("react").JSX.Element;
 declare function CommandShortcut({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
 export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, };

package/dist/lib/components/ui/primitives/typography/typography.d.ts

@@ -2,6 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import { ComponentProps } from 'react';
 export declare const typographyVariants: (props?: ({
     variant?: "caption" | "normal" | "huge-larger" | "huge-large" | "huge-medium" | "huge-small" | "headline-larger" | "headline-large" | "headline-medium" | "headline-small" | "title-large" | "title-medium" | "title-small" | "body-medium" | "body-small" | null | undefined;
+    tone?: "error" | "default" | "primary" | "muted" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type TypographyProps = ComponentProps<'p'> & VariantProps<typeof typographyVariants> & {
     /** The element to render, `div` by default. Intrinsic tags only. */
@@ -9,4 +10,4 @@ export type TypographyProps = ComponentProps<'p'> & VariantProps<typeof typograp
     /** Merge the typography classes onto the single child instead of rendering an element. */
     asChild?: boolean;
 };
-export declare function Typography({ className, variant, as, asChild, ...props }: TypographyProps): import("react").JSX.Element;
+export declare function Typography({ className, variant, tone, as, asChild, ...props }: TypographyProps): import("react").JSX.Element;

package/dist/lib/components/ui/selection/autocomplete/types.d.ts

@@ -67,7 +67,7 @@ export type AutocompleteProps<T extends AutocompleteOption = AutocompleteOption>
     renderOption?: (option: T) => ReactNode;
     renderSelectedLeading?: (option: T) => ReactNode;
     actions?: ReactNode | ((query: string) => ReactNode);
-    /** The query, once typing pauses (`debounceMs`). */
+    /** The query, once typing pauses (`debounceMs`); `''` at once when it empties (a pick, a clear). */
     onQueryChange?: (query: string) => void;
 } & AutocompleteSearchProps<T> & ({
     mode: 'single';

package/dist/lib/components/ui/selection/autocomplete/use-query-report.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Reports the query to `onQueryChange`: typing once it pauses for `debounceMs`,
+ * and `''` at once, but only when the query changes from a non-empty value
+ * to `''` (a pick, a clear), never on mount. What the page derives from the
+ * query then changes with the pick, not `debounceMs` later, under the click
+ * on the next field (#557). The same as the Vue Autocomplete's `queryChange`.
+ */
+export declare function useQueryReport(query: string, debounceMs: number, onQueryChange: ((query: string) => void) | undefined): void;

package/dist/lib/components/ui/selection/checkbox-group/checkbox-group.d.ts

@@ -3,6 +3,8 @@ export type CheckboxGroupProps = {
     options: {
         value: string;
         label: ReactNode;
+        /** Shown after the label and added to its accessible name. */
+        count?: number;
     }[];
     label?: ReactNode;
     helperText?: ReactNode;

package/dist/lib/components/ui/selection/option-count/option-count.d.ts

@@ -0,0 +1,18 @@
+/**
+ * An option's trailing count, as plain text inside the option's label or
+ * chip: " 24" in muted `tabular-nums`, then a `sr-only` " results" (the
+ * `material.option-count.label` ICU plural, the unit word only). The name
+ * reads "CE1 24 results": it starts with the visible label (WCAG 2.5.3), and
+ * no ARIA attribute or zero-size trick is involved, so it names the same in
+ * Chromium, WebKit and Firefox.
+ *
+ * Limits: put it right after the label text, in the same inline wrapper
+ * (a `<span>`) for a checkbox or radio, so a flex `Label` sees one item. The
+ * leading space is a text node; a flex chip drops it and its `gap` spaces
+ * the items instead. On a filled chip (`inChip`) the count keeps the chip's
+ * colour: the muted one would not reach 4.5:1.
+ */
+export declare function OptionCount({ count, inChip, }: {
+    count?: number;
+    inChip?: boolean;
+}): import("react").JSX.Element | null;

package/dist/lib/components/ui/selection/radio-group/radio-group.d.ts

@@ -5,6 +5,8 @@ export type RadioGroupOption = {
     label: ReactNode;
     /** Rendered and announced as disabled, skipped by the arrow keys. */
     disabled?: boolean;
+    /** Shown after the label and added to its accessible name. */
+    count?: number;
 };
 export type RadioGroupProps = {
     options: RadioGroupOption[];

package/dist/lib/components/ui/selection/select-chip-field/next-selection.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The value after `target` was pressed. Multiple mode toggles it; single mode
+ * replaces the choice, and clears it on a second press unless `deselectable`
+ * is `false`.
+ */
+export declare function nextSelection(mode: 'single' | 'multiple', value: string[], target: string, deselectable?: boolean): string[];
+/** The chip the field's `ref` reaches: the first chosen one, else the first. */
+export declare function firstChosenIndex(options: {
+    value: string;
+}[], value: string[]): number;

package/dist/lib/components/ui/selection/select-chip-field/select-chip-field.d.ts

@@ -7,7 +7,14 @@ export type SelectChipFieldProps = {
         value: string;
         label: string;
         icon?: ReactNode;
+        /** Shown after the label and added to its accessible name. */
+        count?: number;
     }[];
+    /**
+     * Single mode: pressing the chosen chip again clears it (`true`, the
+     * default). `false` keeps it chosen, as a radio group does.
+     */
+    deselectable?: boolean;
     label?: ReactNode;
     helperText?: ReactNode;
     error?: boolean;
@@ -19,4 +26,4 @@ export type SelectChipFieldProps = {
      */
     ref?: Ref<HTMLButtonElement>;
 } & Omit<ComponentProps<'div'>, 'children' | 'ref'>;
-export declare function SelectChipField({ value, onValueChange, mode, options, className, label, error, helperText, disabled, name, id, 'aria-invalid': ariaInvalid, ref, ...props }: SelectChipFieldProps): import("react").JSX.Element;
+export declare function SelectChipField({ value, onValueChange, mode, options, className, label, error, helperText, disabled, name, deselectable, id, 'aria-invalid': ariaInvalid, ref, ...props }: SelectChipFieldProps): import("react").JSX.Element;

package/dist/lib/components/ui/selection/select-chip-field/select-chip-header.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+/** The ids of a `SelectChipField`'s label, help text and "not valid" hint. */
+export declare const chipGroupIds: (groupId: string) => {
+    labelId: string;
+    helperId: string;
+    invalidId: string;
+};
+/** A `SelectChipField`'s label, help text and the hidden "not valid" hint. */
+export declare function SelectChipHeader({ ids, label, helperText, error, invalid, }: {
+    ids: ReturnType<typeof chipGroupIds>;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: boolean;
+    invalid: boolean;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/selection/select-chip-field/select-chip-option.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode, Ref } from 'react';
+export type SelectChipOptionProps = {
+    label: string;
+    icon?: ReactNode;
+    count?: number;
+    pressed: boolean;
+    disabled?: boolean;
+    dataPw: string;
+    ref?: Ref<HTMLButtonElement>;
+    onPress: () => void;
+};
+/** One chip of a `SelectChipField`: a toggle button, `aria-pressed`. */
+export declare function SelectChipOption({ label, icon, count, pressed, disabled, dataPw, ref, onPress, }: SelectChipOptionProps): import("react").JSX.Element;

package/dist/lib/i18n/resources/en/en.d.ts

@@ -795,6 +795,9 @@ export declare const en: {
             placeholder: string;
             empty: string;
         };
+        "option-count": {
+            label: string;
+        };
         autocomplete: {
             empty: string;
             add: string;
@@ -1293,5 +1296,16 @@ export declare const en: {
             "saved-required": string;
             done: string;
         };
+        "repeatable-group": {
+            row: string;
+            add: string;
+            remove: string;
+            "move-up": string;
+            "move-down": string;
+            added: string;
+            removed: string;
+            moved: string;
+            "max-reached": string;
+        };
     };
 };

package/dist/lib/i18n/resources/en/material.json.d.ts

@@ -785,6 +785,9 @@ declare const _default: {
 		"placeholder": "Search…",
 		"empty": "No results"
 	},
+	"option-count": {
+		"label": "{count, plural, one {result} other {results}}"
+	},
 	"autocomplete": {
 		"empty": "No option found.",
 		"add": "Add \"{query}\"",
@@ -1282,6 +1285,17 @@ declare const _default: {
 		"saved": "I have saved these codes",
 		"saved-required": "Tick the box once your codes are safe",
 		"done": "Done"
+	},
+	"repeatable-group": {
+		"row": "row",
+		"add": "Add {label}",
+		"remove": "Remove {label} {index}",
+		"move-up": "Move {label} {index} up",
+		"move-down": "Move {label} {index} down",
+		"added": "Added {label} {index}",
+		"removed": "Removed {label} {index}",
+		"moved": "Moved {label} {from} to position {to}",
+		"max-reached": "Maximum reached ({max})"
 	}
 }
 ;

package/dist/lib/i18n/resources/fr/fr.d.ts

@@ -795,6 +795,9 @@ export declare const fr: {
             placeholder: string;
             empty: string;
         };
+        "option-count": {
+            label: string;
+        };
         autocomplete: {
             empty: string;
             add: string;
@@ -1293,5 +1296,16 @@ export declare const fr: {
             "saved-required": string;
             done: string;
         };
+        "repeatable-group": {
+            row: string;
+            add: string;
+            remove: string;
+            "move-up": string;
+            "move-down": string;
+            added: string;
+            removed: string;
+            moved: string;
+            "max-reached": string;
+        };
     };
 };

package/dist/lib/i18n/resources/fr/material.json.d.ts

@@ -785,6 +785,9 @@ declare const _default: {
 		"placeholder": "Rechercher…",
 		"empty": "Aucun résultat"
 	},
+	"option-count": {
+		"label": "{count, plural, one {résultat} other {résultats}}"
+	},
 	"autocomplete": {
 		"empty": "Aucune option.",
 		"add": "Ajouter « {query} »",
@@ -1282,6 +1285,17 @@ declare const _default: {
 		"saved": "J'ai enregistré ces codes",
 		"saved-required": "Cochez la case une fois vos codes en lieu sûr",
 		"done": "Terminé"
+	},
+	"repeatable-group": {
+		"row": "ligne",
+		"add": "Ajouter une {label}",
+		"remove": "Retirer la {label} {index}",
+		"move-up": "Monter la {label} {index}",
+		"move-down": "Descendre la {label} {index}",
+		"added": "Ajout : {label} {index}",
+		"removed": "Suppression : {label} {index}",
+		"moved": "Déplacement : {label} {from} en position {to}",
+		"max-reached": "Maximum atteint ({max})"
 	}
 }
 ;

package/dist/lib/i18n/resources/resources.d.ts

@@ -793,6 +793,9 @@ export declare const resources: {
                 placeholder: string;
                 empty: string;
             };
+            "option-count": {
+                label: string;
+            };
             autocomplete: {
                 empty: string;
                 add: string;
@@ -1291,6 +1294,17 @@ export declare const resources: {
                 "saved-required": string;
                 done: string;
             };
+            "repeatable-group": {
+                row: string;
+                add: string;
+                remove: string;
+                "move-up": string;
+                "move-down": string;
+                added: string;
+                removed: string;
+                moved: string;
+                "max-reached": string;
+            };
         };
     };
     fr: {
@@ -2081,6 +2095,9 @@ export declare const resources: {
                 placeholder: string;
                 empty: string;
             };
+            "option-count": {
+                label: string;
+            };
             autocomplete: {
                 empty: string;
                 add: string;
@@ -2579,6 +2596,17 @@ export declare const resources: {
                 "saved-required": string;
                 done: string;
             };
+            "repeatable-group": {
+                row: string;
+                add: string;
+                remove: string;
+                "move-up": string;
+                "move-down": string;
+                added: string;
+                removed: string;
+                moved: string;
+                "max-reached": string;
+            };
         };
     };
 };