@nxgt/material 2.4.2 → 2.6.0

package/dist/lib/components/ui/overlays/dialog/dialog-scroll-content.d.ts

@@ -0,0 +1,9 @@
+import { Dialog as DialogPrimitive } from 'radix-ui';
+import { ComponentProps } from 'react';
+/**
+ * A dialog content for a dialog taller than the screen: the overlay scrolls,
+ * and the content sits in it with a margin, instead of being clipped at the
+ * viewport. It renders its own close button (top right).
+ */
+declare function DialogScrollContent({ className, children, onInteractOutside, onPointerDownOutside, onFocusOutside, onOpenAutoFocus, onCloseAutoFocus, ...props }: ComponentProps<typeof DialogPrimitive.Content>): import("react").JSX.Element;
+export { DialogScrollContent };

package/dist/lib/components/ui/overlays/dialog/index.d.ts

@@ -1 +1,2 @@
 export * from './dialog';
+export * from './dialog-scroll-content';

package/dist/lib/components/ui/primitives/icon/icon-context.d.ts

@@ -1,7 +1,7 @@
 /**
  * `true` inside a control that already carries an accessible name — a named
  * `IconButton`, and so `InputGroupButton` and `IconLinkButton`, which render
- * one. An `Icon` there with no `aria-label` of its own renders
+ * one, and a `Button` with text or an `aria-label`. An `Icon` there with no `aria-label` of its own renders
  * `aria-hidden="true"` instead of `role="img" aria-label="Icon {name}"`, so a
  * screen reader reads "Delete" and not "Delete, Icon trash".
  *

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

@@ -6,5 +6,10 @@ declare function TableFooter({ className, ...props }: ComponentProps<'tfoot'>):
 declare function TableRow({ className, ...props }: ComponentProps<'tr'>): import("react").JSX.Element;
 declare function TableHead({ className, ...props }: ComponentProps<'th'>): import("react").JSX.Element;
 declare function TableCell({ className, ...props }: ComponentProps<'td'>): import("react").JSX.Element;
+/**
+ * A full-width row for "nothing here": one cell spanning `colSpan` columns
+ * (default 1), its content centred.
+ */
+declare function TableEmpty({ className, colSpan, children, ...props }: ComponentProps<'td'>): import("react").JSX.Element;
 declare function TableCaption({ className, ...props }: ComponentProps<'caption'>): import("react").JSX.Element;
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, };
+export { Table, TableBody, TableCaption, TableCell, TableEmpty, TableFooter, TableHead, TableHeader, TableRow, };

package/dist/lib/components/ui/selection/index.d.ts

@@ -4,6 +4,7 @@ export * from './checkbox';
 export * from './checkbox-group';
 export * from './combobox';
 export * from './combobox-field';
+export * from './native-select';
 export * from './radio-group';
 export * from './select';
 export * from './select-card-field';
@@ -12,3 +13,4 @@ export * from './select-field';
 export * from './sortable-list';
 export * from './switcher';
 export * from './transfer-list';
+export * from './tree-select-field';

package/dist/lib/components/ui/selection/native-select/index.d.ts

@@ -0,0 +1 @@
+export * from './native-select';

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

@@ -0,0 +1,11 @@
+import { ComponentProps } from 'react';
+export type NativeSelectProps = ComponentProps<'select'>;
+/**
+ * The browser's own `<select>`, styled like the library's inputs, with a
+ * chevron. `value` / `defaultValue` / `onChange` and every other attribute go
+ * to the `<select>`; `className` too, the wrapper only positions the chevron.
+ */
+declare function NativeSelect({ className, ...props }: NativeSelectProps): import("react").JSX.Element;
+declare function NativeSelectOption({ className, ...props }: ComponentProps<'option'>): import("react").JSX.Element;
+declare function NativeSelectOptGroup({ className, ...props }: ComponentProps<'optgroup'>): import("react").JSX.Element;
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };

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

@@ -13,4 +13,11 @@ export type RadioGroupProps = {
 declare function RadioGroup({ options, label, helperText, error, orientation, className, id, ...props }: RadioGroupProps): import("react").JSX.Element;
 declare function RadioGroupBase({ className, ...props }: ComponentProps<typeof RadioGroupPrimitive.Root>): import("react").JSX.Element;
 declare function RadioGroupItem({ className, ...props }: ComponentProps<typeof RadioGroupPrimitive.Item>): import("react").JSX.Element;
-export { RadioGroup, RadioGroupBase, RadioGroupItem };
+/**
+ * The labelled `RadioGroup` under `@nxgt/material-vue`'s name, so code reads
+ * the same in both libraries. Same component, same props. The names align
+ * fully in 3.0; `RadioGroup` is not deprecated.
+ */
+declare const RadioGroupField: typeof RadioGroup;
+export type RadioGroupFieldProps = RadioGroupProps;
+export { RadioGroup, RadioGroupBase, RadioGroupField, RadioGroupItem };

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

@@ -0,0 +1,2 @@
+export * from './tree-select-field';
+export * from './tree-select-form-field';

package/dist/lib/components/ui/selection/tree-select-field/partials/tree-select-content.d.ts

@@ -0,0 +1,13 @@
+import { useTreeSelectField } from '../use-tree-select-field';
+export type TreeSelectContentProps = {
+    field: ReturnType<typeof useTreeSelectField>;
+    multiple?: boolean;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    /** Names the popover: the label's id when there is one, else the trigger's. */
+    labelledBy: string;
+    /** Names the tree: the field's label text. */
+    treeLabel?: string;
+};
+/** The popover under the field: the optional filter, then the tree. */
+export declare function TreeSelectContent({ field, multiple, searchable, searchPlaceholder, labelledBy, treeLabel, }: TreeSelectContentProps): import("react").JSX.Element;

package/dist/lib/components/ui/selection/tree-select-field/partials/tree-select-panel.d.ts

@@ -0,0 +1,19 @@
+import { TreeNode } from '../../../collections/tree/types';
+export type TreeSelectPanelProps = {
+    nodes: TreeNode[];
+    multiple?: boolean;
+    selectedIds: string[];
+    expandedIds: string[];
+    onExpandedIdsChange: (ids: string[]) => void;
+    onSelectedIdsChange: (ids: string[]) => void;
+    onSelect: (id: string) => void;
+    /** Names the tree: the field's label text. */
+    treeLabel?: string;
+    searchable?: boolean;
+    query: string;
+    onQueryChange: (query: string) => void;
+    searchLabel: string;
+    emptyText: string;
+};
+/** What the popover holds: the optional filter input, then the tree. */
+export declare function TreeSelectPanel({ nodes, multiple, selectedIds, expandedIds, onExpandedIdsChange, onSelectedIdsChange, onSelect, treeLabel, searchable, query, onQueryChange, searchLabel, emptyText, }: TreeSelectPanelProps): import("react").JSX.Element;

package/dist/lib/components/ui/selection/tree-select-field/partials/tree-select-trigger.d.ts

@@ -0,0 +1,24 @@
+import { ComponentProps } from 'react';
+import { TreeNode } from '../../../collections/tree/types';
+export type TreeSelectTriggerProps = {
+    open: boolean;
+    multiple?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    name?: string;
+    /** What the button shows while nothing is picked. */
+    placeholder: string;
+    /** What the button shows in multiple mode once something is picked. */
+    countText: string;
+    selectedNodes: TreeNode[];
+    onRemove: (id: string) => void;
+    /** The combobox's role, name, description and id (`pickerTriggerA11y`). */
+    a11y: ComponentProps<'button'>;
+};
+/**
+ * The field's box: in multiple mode, a chip per picked node, then the
+ * `combobox` button that opens the tree. The chips sit beside the button, not
+ * in it — a chip's remove button may not be nested in another button — and the
+ * box is the popover's anchor, so the tree opens under all of it.
+ */
+export declare function TreeSelectTrigger({ open, multiple, disabled, error, name, placeholder, countText, selectedNodes, onRemove, a11y, }: TreeSelectTriggerProps): import("react").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { TreeSelectFieldProps } from './types';
+export type { TreeSelectFieldBaseProps, TreeSelectFieldMultipleProps, TreeSelectFieldProps, TreeSelectFieldSingleProps, } from './types';
+/**
+ * A form field that opens a `Tree` in a popover. Single: a pick closes it and
+ * the trigger shows the node. Multiple: checkboxes, the picks as chips.
+ * The trigger is a `combobox`; Escape closes and hands focus back to it.
+ * `id`, `aria-describedby` and `data-*` attributes go on the trigger.
+ */
+export declare function TreeSelectField(props: TreeSelectFieldProps): import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { UseControllerProps } from 'react-hook-form';
+import { TreeSelectFieldBaseProps } from './types';
+export type TreeSelectFormFieldProps<T extends Record<string, any>> = Pick<UseControllerProps<T>, 'control' | 'name'> & Omit<TreeSelectFieldBaseProps, 'name'> & {
+    /** The form value is a list of ids when set, else one id (or `null`). */
+    multiple?: boolean;
+};
+/** `TreeSelectField` bound to react-hook-form: touched when focus leaves it. */
+export declare function TreeSelectFormField<T extends Record<string, any>>({ control, name, multiple, ...props }: TreeSelectFormFieldProps<T>): import("react").JSX.Element;

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

@@ -0,0 +1,35 @@
+import { TreeNode } from '../../collections/tree/types';
+/** The text a node shows, which the search matches against. */
+export declare function treeNodeText(node: TreeNode): string;
+export type FilteredTree = {
+    /** The matches, each under its ancestors; a match keeps its own subtree. */
+    nodes: TreeNode[];
+    /** The ancestors kept for a match below them: open, so the match shows. */
+    expandedIds: string[];
+};
+/**
+ * The tree narrowed to the nodes whose text contains `query` (case- and
+ * accent-insensitive), with every match's ancestors kept so it stays in place.
+ * An empty query keeps the whole tree, with nothing forced open.
+ */
+export declare function filterTree(nodes: TreeNode[], query: string): FilteredTree;
+/** The ids of the ancestors of `ids`: opened, so a picked node is in view. */
+export declare function ancestorIds(nodes: TreeNode[], ids: string[]): string[];
+/** The nodes of `ids`, in the order of `ids`; an id the tree lacks is skipped. */
+export declare function treeNodesOf(nodes: TreeNode[], ids: string[]): TreeNode[];
+/** The value as a list of ids, whatever the mode. */
+export declare function toIds(value: string | string[] | null | undefined): string[];
+/** The first tree item a keyboard user lands on: the roving one, else the first. */
+export declare function treeEntry(root: ParentNode | null | undefined): HTMLElement | null;
+/**
+ * `filterTree` with a one-entry memory: the search handler (for the branches
+ * to open) and the render (for the nodes) ask for the same filter, and the
+ * tree is walked once per keystroke.
+ */
+export declare function memoFilterTree(): typeof filterTree;
+/**
+ * Before a chip is removed, hand focus on, so a keyboard user is not dropped
+ * to `<body>` (which also blurs, so touches, the form field): the next chip's
+ * remove button, else the previous one's, else the combobox trigger.
+ */
+export declare function focusAfterChipRemoval(box: ParentNode | null | undefined, index: number): void;

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

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { TreeNode } from '../../collections/tree/types';
+import { PickerTriggerAttrs } from '../../dates/picker-trigger/picker-trigger-attrs';
+export type TreeSelectFieldBaseProps = {
+    /** The tree to pick from: `Tree`'s node shape. */
+    items: TreeNode[];
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: boolean;
+    /** Shown while nothing is picked; `material.tree-select-field.placeholder` otherwise. */
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    /** A filter input above the tree: matches stay under their ancestors. */
+    searchable?: boolean;
+    /** The filter input's placeholder and name; `material.tree-select-field.search` otherwise. */
+    searchPlaceholder?: string;
+    name?: string;
+    className?: string;
+    /** Names the trigger; it wins over `label`. */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+} & PickerTriggerAttrs;
+export type TreeSelectFieldSingleProps = {
+    multiple?: false;
+    /** The picked node's id. */
+    value?: string | null;
+    onValueChange?: (value: string | null) => void;
+};
+export type TreeSelectFieldMultipleProps = {
+    /** Checkboxes in the tree, and the picked nodes as chips in the trigger. */
+    multiple: true;
+    /** The picked nodes' ids. */
+    value?: string[];
+    onValueChange?: (value: string[]) => void;
+};
+export type TreeSelectFieldProps = TreeSelectFieldBaseProps & (TreeSelectFieldSingleProps | TreeSelectFieldMultipleProps);

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

@@ -0,0 +1,20 @@
+import { TreeSelectFieldProps } from './types';
+/**
+ * A `TreeSelectField`'s chrome — open, the search query, the open branches —
+ * and what picking does. The value stays the caller's (`value` /
+ * `onValueChange`); three local values need no slice, as in `Autocomplete`.
+ */
+export declare function useTreeSelectField(props: TreeSelectFieldProps): {
+    open: boolean;
+    setOpen: (next: boolean) => void;
+    query: string;
+    search: (next: string) => void;
+    nodes: import('../../collections').TreeNode[];
+    expandedIds: string[];
+    setExpandedIds: import('react').Dispatch<import('react').SetStateAction<string[]>>;
+    selectedIds: string[];
+    selectedNodes: import('../../collections').TreeNode[];
+    onSelectedIdsChange: (ids: string[]) => void;
+    onSelect: (id: string) => void;
+    remove: (id: string) => void;
+};

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

@@ -48,6 +48,7 @@ export declare const en: {
             cancel: string;
             processing: string;
             failed: string;
+            "form-failed": string;
         };
         "scroll-progress": string;
         "skip-link": string;
@@ -323,6 +324,7 @@ export declare const en: {
             };
         };
         table: {
+            loading: string;
             labels: {
                 asc: string;
                 desc: string;
@@ -625,6 +627,12 @@ export declare const en: {
             expand: string;
             collapse: string;
         };
+        "tree-select-field": {
+            placeholder: string;
+            search: string;
+            empty: string;
+            selected: string;
+        };
         "image-cropper": {
             title: string;
             zoom: string;
@@ -749,6 +757,8 @@ export declare const en: {
         };
         stepper: {
             step: string;
+            completed: string;
+            error: string;
         };
         "location-field": {
             placeholder: string;
@@ -1164,6 +1174,11 @@ export declare const en: {
         spinner: {
             loading: string;
         };
+        slider: {
+            minimum: string;
+            maximum: string;
+            value: string;
+        };
         "scroll-to-top": {
             label: string;
         };
@@ -1199,6 +1214,31 @@ export declare const en: {
         "time-picker": {
             am: string;
             pm: string;
+            hours: string;
+            minutes: string;
+        };
+        "date-range-field": {
+            presets: string;
+            preset: {
+                today: string;
+                yesterday: string;
+                "last-7-days": string;
+                "last-30-days": string;
+                "this-month": string;
+                "last-month": string;
+                "this-year": string;
+            };
+            "start-time": string;
+            "end-time": string;
+        };
+        "file-preview": {
+            label: string;
+            untitled: string;
+            loading: string;
+            error: string;
+            download: string;
+            truncated: string;
+            content: string;
         };
     };
 };

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

@@ -37,7 +37,8 @@ declare const _default: {
 		"confirm": "Confirm",
 		"cancel": "Cancel",
 		"processing": "Processing...",
-		"failed": "The action failed."
+		"failed": "The action failed.",
+		"form-failed": "The form could not be loaded."
 	},
 	"scroll-progress": "Scroll progress",
 	"skip-link": "Skip to content",
@@ -313,6 +314,7 @@ declare const _default: {
 		}
 	},
 	"table": {
+		"loading": "Loading data…",
 		"labels": {
 			"asc": "Asc",
 			"desc": "Desc",
@@ -615,6 +617,12 @@ declare const _default: {
 		"expand": "Expand",
 		"collapse": "Collapse"
 	},
+	"tree-select-field": {
+		"placeholder": "Select…",
+		"search": "Search",
+		"empty": "No match found.",
+		"selected": "{count} selected"
+	},
 	"image-cropper": {
 		"title": "Crop image",
 		"zoom": "Zoom",
@@ -738,7 +746,9 @@ declare const _default: {
 		"open": "Open URL"
 	},
 	"stepper": {
-		"step": "Step {step}"
+		"step": "Step {step}",
+		"completed": "Completed",
+		"error": "Error"
 	},
 	"location-field": {
 		"placeholder": "No location selected",
@@ -1154,6 +1164,11 @@ declare const _default: {
 	"spinner": {
 		"loading": "Loading..."
 	},
+	"slider": {
+		"minimum": "Minimum",
+		"maximum": "Maximum",
+		"value": "Value"
+	},
 	"scroll-to-top": {
 		"label": "Scroll to top"
 	},
@@ -1188,7 +1203,32 @@ declare const _default: {
 	},
 	"time-picker": {
 		"am": "AM",
-		"pm": "PM"
+		"pm": "PM",
+		"hours": "Hours",
+		"minutes": "Minutes"
+	},
+	"date-range-field": {
+		"presets": "Presets",
+		"preset": {
+			"today": "Today",
+			"yesterday": "Yesterday",
+			"last-7-days": "Last 7 days",
+			"last-30-days": "Last 30 days",
+			"this-month": "This month",
+			"last-month": "Last month",
+			"this-year": "This year"
+		},
+		"start-time": "Start time",
+		"end-time": "End time"
+	},
+	"file-preview": {
+		"label": "Preview of {name}",
+		"untitled": "Untitled file",
+		"loading": "Loading preview…",
+		"error": "This file could not be previewed.",
+		"download": "Download",
+		"truncated": "Showing the first {size} of this file.",
+		"content": "Contents of {name}"
 	}
 }
 ;

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

@@ -48,6 +48,7 @@ export declare const fr: {
             cancel: string;
             processing: string;
             failed: string;
+            "form-failed": string;
         };
         "scroll-progress": string;
         "skip-link": string;
@@ -323,6 +324,7 @@ export declare const fr: {
             };
         };
         table: {
+            loading: string;
             labels: {
                 asc: string;
                 desc: string;
@@ -625,6 +627,12 @@ export declare const fr: {
             expand: string;
             collapse: string;
         };
+        "tree-select-field": {
+            placeholder: string;
+            search: string;
+            empty: string;
+            selected: string;
+        };
         "image-cropper": {
             title: string;
             zoom: string;
@@ -749,6 +757,8 @@ export declare const fr: {
         };
         stepper: {
             step: string;
+            completed: string;
+            error: string;
         };
         "location-field": {
             placeholder: string;
@@ -1164,6 +1174,11 @@ export declare const fr: {
         spinner: {
             loading: string;
         };
+        slider: {
+            minimum: string;
+            maximum: string;
+            value: string;
+        };
         "scroll-to-top": {
             label: string;
         };
@@ -1199,6 +1214,31 @@ export declare const fr: {
         "time-picker": {
             am: string;
             pm: string;
+            hours: string;
+            minutes: string;
+        };
+        "date-range-field": {
+            presets: string;
+            preset: {
+                today: string;
+                yesterday: string;
+                "last-7-days": string;
+                "last-30-days": string;
+                "this-month": string;
+                "last-month": string;
+                "this-year": string;
+            };
+            "start-time": string;
+            "end-time": string;
+        };
+        "file-preview": {
+            label: string;
+            untitled: string;
+            loading: string;
+            error: string;
+            download: string;
+            truncated: string;
+            content: string;
         };
     };
 };

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

@@ -37,7 +37,8 @@ declare const _default: {
 		"confirm": "Confirmer",
 		"cancel": "Annuler",
 		"processing": "Traitement en cours…",
-		"failed": "L’action a échoué."
+		"failed": "L’action a échoué.",
+		"form-failed": "Le formulaire n’a pas pu être chargé."
 	},
 	"scroll-progress": "Progression du défilement",
 	"skip-link": "Aller au contenu",
@@ -313,6 +314,7 @@ declare const _default: {
 		}
 	},
 	"table": {
+		"loading": "Chargement des données…",
 		"labels": {
 			"asc": "Asc",
 			"desc": "Desc",
@@ -615,6 +617,12 @@ declare const _default: {
 		"expand": "Déplier",
 		"collapse": "Replier"
 	},
+	"tree-select-field": {
+		"placeholder": "Sélectionner…",
+		"search": "Rechercher",
+		"empty": "Aucun résultat.",
+		"selected": "{count, plural, one {# sélectionné} other {# sélectionnés}}"
+	},
 	"image-cropper": {
 		"title": "Recadrer l'image",
 		"zoom": "Zoom",
@@ -738,7 +746,9 @@ declare const _default: {
 		"open": "Ouvrir l’URL"
 	},
 	"stepper": {
-		"step": "Étape {step}"
+		"step": "Étape {step}",
+		"completed": "Terminée",
+		"error": "Erreur"
 	},
 	"location-field": {
 		"placeholder": "Aucun emplacement sélectionné",
@@ -1154,6 +1164,11 @@ declare const _default: {
 	"spinner": {
 		"loading": "Chargement..."
 	},
+	"slider": {
+		"minimum": "Minimum",
+		"maximum": "Maximum",
+		"value": "Valeur"
+	},
 	"scroll-to-top": {
 		"label": "Retour en haut"
 	},
@@ -1188,7 +1203,32 @@ declare const _default: {
 	},
 	"time-picker": {
 		"am": "a.m.",
-		"pm": "p.m."
+		"pm": "p.m.",
+		"hours": "Heures",
+		"minutes": "Minutes"
+	},
+	"date-range-field": {
+		"presets": "Plages prédéfinies",
+		"preset": {
+			"today": "Aujourd’hui",
+			"yesterday": "Hier",
+			"last-7-days": "7 derniers jours",
+			"last-30-days": "30 derniers jours",
+			"this-month": "Ce mois-ci",
+			"last-month": "Le mois dernier",
+			"this-year": "Cette année"
+		},
+		"start-time": "Heure de début",
+		"end-time": "Heure de fin"
+	},
+	"file-preview": {
+		"label": "Aperçu de {name}",
+		"untitled": "Fichier sans nom",
+		"loading": "Chargement de l’aperçu…",
+		"error": "Impossible d’afficher l’aperçu de ce fichier.",
+		"download": "Télécharger",
+		"truncated": "Seuls les premiers {size} de ce fichier sont affichés.",
+		"content": "Contenu de {name}"
 	}
 }
 ;