@nxgt/material 2.5.0 → 2.6.0

package/dist/lib/components/ui/dates/date-range-field/partials/date-range-field-content.d.ts

@@ -0,0 +1,25 @@
+import { DateRangePresetOption } from '@nxgt/material-core/date-range';
+import { ComponentProps } from 'react';
+import { Matcher } from 'react-day-picker';
+import { Calendar, DateRange } from '../../calendar/calendar';
+type CalendarProps = ComponentProps<typeof Calendar>;
+type BodyProps = {
+    calendarProps: Omit<CalendarProps, 'mode' | 'label' | 'onSelect' | 'disabled'>;
+    dayRule?: Matcher | Matcher[];
+    required?: boolean;
+    value?: DateRange;
+    onValueChange?: (value?: DateRange) => void;
+    presets?: readonly DateRangePresetOption[];
+    withTime?: boolean;
+    onClose: () => void;
+};
+/**
+ * The open popover of a `DateRangeField`: the presets, the range calendar
+ * and, with `withTime`, the two times and OK. Its body is mounted only while
+ * the popover is open, so the presets are resolved (and "now" read) only
+ * then, as in the Vue sister.
+ */
+export declare function DateRangeFieldContent({ triggerId, ...body }: BodyProps & {
+    triggerId: string;
+}): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/dates/date-range-field/partials/date-range-presets.d.ts

@@ -0,0 +1,11 @@
+import { DayRange } from '@nxgt/material-core/date-range';
+import { DateRangePresetItem } from '../use-date-range-presets';
+/**
+ * The one-click ranges beside the calendar: a group (a `<fieldset>`) of
+ * toggle buttons, the one whose range is the field's value pressed
+ * (`aria-pressed`). A preset the field's rules rule out is disabled.
+ */
+export declare function DateRangePresets({ items, onPick, }: {
+    items: DateRangePresetItem[];
+    onPick: (range: DayRange) => void;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/dates/date-range-field/partials/date-range-times.d.ts

@@ -0,0 +1,11 @@
+import { DateRange } from '../../calendar/calendar';
+/**
+ * A time of day for each end of the range, under the calendar. An end with
+ * no day yet has its time disabled. The end never comes before the start:
+ * on the same day, an earlier end time becomes the start time.
+ */
+export declare function DateRangeTimes({ value, onValueChange, onDone, }: {
+    value?: DateRange;
+    onValueChange?: (value?: DateRange) => void;
+    onDone: () => void;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/dates/date-range-field/use-date-range-presets.d.ts

@@ -0,0 +1,22 @@
+import { DateRangePresetOption, DateRangeRules, DayRange, PartialDayRange } from '@nxgt/material-core/date-range';
+/** One entry of the preset list, resolved for this render. */
+export type DateRangePresetItem = {
+    key: string;
+    label: string;
+    range: DayRange;
+    /** Its range starts before `minDate`, ends after `maxDate`, or on a disabled day. */
+    disabled: boolean;
+    /** The field's value covers the same days. */
+    active: boolean;
+};
+/**
+ * The presets a `DateRangeField` lists, each with its range at this render,
+ * its label in the provider's language, and its state against the field's
+ * rules and value.
+ */
+export declare function useDateRangePresets({ presets, value, rules, withTime, }: {
+    presets?: readonly DateRangePresetOption[];
+    value?: PartialDayRange;
+    rules: DateRangeRules;
+    withTime?: boolean;
+}): DateRangePresetItem[];

package/dist/lib/components/ui/dates/time-picker/time-picker-utils.d.ts

@@ -1,3 +1,10 @@
 export declare function parseHours(value: string, period: 'AM' | 'PM'): number;
 export declare function parseMinutes(value?: string): number;
 export declare function formatValue(value: number): string;
+/** The half of the day `date` is in. */
+export declare function periodOf(date: Date): 'AM' | 'PM';
+/**
+ * `date` moved into `period`'s half of the day, at the same hour on the
+ * 12-hour clock; a date already in it is returned unchanged (as a copy).
+ */
+export declare function withPeriod(date: Date, period: 'AM' | 'PM'): Date;

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

@@ -20,5 +20,7 @@ export type NumberFieldProps = {
     suffix?: ReactNode;
     /** Names the input when it has no `label` of its own (a part of a larger field). */
     'aria-label'?: string;
+    /** Names the input by another element's id (a part of a larger field). */
+    'aria-labelledby'?: string;
 };
-export declare function NumberField({ label, helperText, error, required, disabled, className, name, id, placeholder, value, defaultValue, onChange, onBlur, min, max, step, hideSteppers, suffix, 'aria-label': ariaLabel, }: NumberFieldProps): import("react").JSX.Element;
+export declare function NumberField({ label, helperText, error, required, disabled, className, name, id, placeholder, value, defaultValue, onChange, onBlur, min, max, step, hideSteppers, suffix, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }: NumberFieldProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/slider/slider-header.d.ts

@@ -9,7 +9,11 @@ export type SliderHeaderProps = {
     max: number;
     step: number;
     disabled?: boolean;
+    /** The Slider's own name: it names a single value's readout as it names the thumbs. */
+    ariaLabel?: string;
+    /** As `ariaLabel`, and wins over it, as on the thumbs (`sliderThumbNames`). */
+    ariaLabelledBy?: string;
     onChange: (values: number[]) => void;
 };
 /** The Label and the value (editable inputs, or text) above the track. */
-export declare function SliderHeader({ label, labelId, required, showReadout, values, min, max, step, disabled, onChange, }: SliderHeaderProps): import("react").JSX.Element | null;
+export declare function SliderHeader({ label, labelId, required, showReadout, values, min, max, step, disabled, ariaLabel, ariaLabelledBy, onChange, }: SliderHeaderProps): import("react").JSX.Element | null;

package/dist/lib/components/ui/fields/slider/slider-readout.d.ts

@@ -4,6 +4,10 @@ export type SliderReadoutProps = {
     max: number;
     step?: number;
     disabled?: boolean;
+    /** What names a single value's input: an element's id (the field's Label)… */
+    labelledBy?: string;
+    /** …else this name, else "Value". */
+    label?: string;
     onChange: (values: number[]) => void;
 };
-export declare function SliderReadout({ values, min, max, step, disabled, onChange, }: SliderReadoutProps): import("react").JSX.Element;
+export declare function SliderReadout({ values, min, max, step, disabled, labelledBy, label, onChange, }: SliderReadoutProps): import("react").JSX.Element;

package/dist/lib/components/ui/media/file-preview/file-preview-pdf.lazy.d.ts

@@ -0,0 +1,9 @@
+import { ComponentType } from 'react';
+import { PdfReaderProps } from '../pdf-viewer/types';
+/**
+ * `PdfReader`, imported on first use: a page that previews no PDF never
+ * loads the viewer, and an import that fails (a chunk that cannot be
+ * fetched, pdf.js missing from the bundle) rejects, so `FilePreview` falls
+ * back to its file card. A failure is not cached; the next call tries again.
+ */
+export declare function loadPdfReader(): Promise<ComponentType<PdfReaderProps>>;

package/dist/lib/components/ui/media/file-preview/file-preview.d.ts

@@ -0,0 +1,12 @@
+import { FilePreviewProps } from './types';
+export type { FilePreviewProps } from './types';
+/**
+ * Previews a file picked by its MIME type, else its extension: an image, a
+ * PDF (in `PdfReader`, loaded on demand), a video or audio file with the
+ * browser's controls, the text of a text, JSON, CSV or Markdown file, and
+ * for anything else a card with its name, size and a download link.
+ *
+ * Safe on a server: nothing is read and no object URL is made until it has
+ * mounted, and until then it renders a neutral placeholder.
+ */
+export declare function FilePreview({ file, type, name, maxTextBytes, onError, className, ...props }: FilePreviewProps): import("react").JSX.Element | null;

package/dist/lib/components/ui/media/file-preview/index.d.ts

@@ -0,0 +1,3 @@
+export { type FileKind, FilePreviewHttpError, type FilePreviewSource, FilePreviewUnsafeUrlError, fileKind, TEXT_PREVIEW_MAX_BYTES, } from '@nxgt/material-core/file-preview';
+export { FilePreview } from './file-preview';
+export type { FilePreviewProps, FilePreviewStatus } from './types';

package/dist/lib/components/ui/media/file-preview/partials/file-preview-body.d.ts

@@ -0,0 +1,9 @@
+import { DescribedFile } from '@nxgt/material-core/file-preview';
+import { FilePreviewState } from '../use-file-preview';
+/** The part of `FilePreview` that depends on the file's kind and the status. */
+export declare function FilePreviewBody({ state, described, displayName, maxTextBytes, }: {
+    state: FilePreviewState;
+    described: DescribedFile;
+    displayName: string;
+    maxTextBytes?: number;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/media/file-preview/partials/file-preview-card.d.ts

@@ -0,0 +1,20 @@
+import { FileKind } from '@nxgt/material-core/file-preview';
+/**
+ * A link that saves the file under `name` (the browser's choice when `''`).
+ * Nothing until `href` is known.
+ */
+export declare function FilePreviewDownload({ href, name, }: {
+    href: string | undefined;
+    name: string;
+}): import("react").JSX.Element | null;
+/** Any other file: its icon, name, size and type, and a download link. */
+export declare function FilePreviewCard({ kind, name, fileName, size, type, href, }: {
+    kind: FileKind;
+    /** What the card shows. */
+    name: string;
+    /** What the download saves as. */
+    fileName: string;
+    size?: number;
+    type: string;
+    href: string | undefined;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/media/file-preview/partials/file-preview-media.d.ts

@@ -0,0 +1,11 @@
+/**
+ * An image, a video or an audio file in the browser's own element: `<img>`
+ * named by the file name, `<video controls>` and `<audio controls>` labelled
+ * with it. `onError` fires when the element cannot load `src`.
+ */
+export declare function FilePreviewMedia({ kind, src, name, onError, }: {
+    kind: 'image' | 'video' | 'audio';
+    src: string;
+    name: string;
+    onError: () => void;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/media/file-preview/partials/file-preview-pdf.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+/**
+ * A PDF in `PdfReader`, loaded lazily; `fallback` (the file card) when the
+ * viewer cannot be loaded.
+ */
+export declare function FilePreviewPdf({ file, fileName, fallback, }: {
+    file: Blob | string;
+    fileName: string;
+    fallback: ReactNode;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;

package/dist/lib/components/ui/media/file-preview/partials/file-preview-status.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+/** The server's and the first render's box: no text, nothing to mismatch. */
+export declare function FilePreviewPlaceholder(): import("react").JSX.Element;
+/**
+ * The live region that announces the loading: always mounted, from the
+ * server's render on, with its text put in while loading. A region that
+ * mounted with its text already in it would not be announced.
+ */
+export declare function FilePreviewAnnouncer({ loading }: {
+    loading: boolean;
+}): import("react").JSX.Element;
+/** What is seen while loading; `FilePreviewAnnouncer` is what is heard. */
+export declare function FilePreviewLoading(): import("react").JSX.Element;
+/** The error message, and below it whatever can still be done (a download). */
+export declare function FilePreviewError({ children }: {
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/media/file-preview/partials/file-preview-text.d.ts

@@ -0,0 +1,13 @@
+import { FileKind, TextPreview } from '@nxgt/material-core/file-preview';
+/**
+ * A text kind's content: JSON in `JsonViewer` and Markdown rendered when the
+ * whole file was read, else (and for text and CSV) as it is, in a `<pre>`.
+ * What scrolls is a region named after the file, and takes focus so a
+ * keyboard can scroll it.
+ */
+export declare function FilePreviewText({ kind, name, preview, maxBytes, }: {
+    kind: FileKind;
+    name: string;
+    preview: TextPreview;
+    maxBytes: number;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/media/file-preview/types.d.ts

@@ -0,0 +1,23 @@
+import { FilePreviewSource } from '@nxgt/material-core/file-preview';
+import { ComponentProps } from 'react';
+/** Where a preview is: server or first render, reading, shown, failed. */
+export type FilePreviewStatus = 'pending' | 'loading' | 'ready' | 'error';
+export type FilePreviewProps = Omit<ComponentProps<'figure'>, 'children' | 'onError'> & {
+    /**
+     * The file: a `File` or `Blob`, or a URL. Nothing renders without one. A
+     * URL must be `http(s):`, relative, `blob:`, or a `data:` URL of an
+     * image, video, audio, plain text, CSV, Markdown, JSON or PDF; any other (`javascript:`, …) shows the error state.
+     */
+    file: FilePreviewSource | null | undefined;
+    /** MIME type; overrides the `Blob`'s. Picks the kind before the extension does. */
+    type?: string;
+    /** Name shown, used as the image's alt text and the download's file name; overrides the `File`'s. */
+    name?: string;
+    /** How much of a text, JSON, CSV or Markdown file is read and shown. 256 KB by default. */
+    maxTextBytes?: number;
+    /**
+     * The file could not be read or shown: `FilePreviewHttpError`, a
+     * `FilePreviewUnsafeUrlError`, or an `Error` for a broken image or video.
+     */
+    onError?: (error: unknown) => void;
+};

package/dist/lib/components/ui/media/file-preview/use-file-preview.d.ts

@@ -0,0 +1,22 @@
+import { DescribedFile } from '@nxgt/material-core/file-preview';
+import { FilePreviewProps, FilePreviewStatus } from './types';
+import { TextPreviewState } from './use-text-preview';
+type Options = Pick<FilePreviewProps, 'file' | 'type' | 'name' | 'maxTextBytes' | 'onError'>;
+export type FilePreviewState = {
+    described: DescribedFile | null;
+    status: FilePreviewStatus;
+    /** What the media element and the download link point at, once known. */
+    href: string | undefined;
+    text: TextPreviewState;
+    /** For an `<img>`, `<video>` or `<audio>` that failed to load `href`. */
+    onMediaError: () => void;
+};
+/**
+ * Everything `FilePreview` decides: the file's kind, the object URL of a
+ * `Blob` (made after mount, revoked on change and unmount), the text of a
+ * text kind, and the status. On a server and in the first client render the
+ * status is `'pending'` and nothing is read; a URL `safePreviewUrl` refuses
+ * is `'error'` everywhere and is never used.
+ */
+export declare function useFilePreview({ file, type, name, maxTextBytes, onError, }: Options): FilePreviewState;
+export {};

package/dist/lib/components/ui/media/file-preview/use-text-preview.d.ts

@@ -0,0 +1,15 @@
+import { TextPreview } from '@nxgt/material-core/file-preview';
+export type TextPreviewState = {
+    status: 'loading';
+} | {
+    status: 'ready';
+    preview: TextPreview;
+} | {
+    status: 'error';
+    error: unknown;
+};
+/**
+ * The first `maxBytes` of `source` as text, read in an effect (never on a
+ * server). A new source aborts the previous read; `undefined` reads nothing.
+ */
+export declare function useTextPreview(source: Blob | string | undefined, maxBytes: number | undefined): TextPreviewState;

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

@@ -1,6 +1,7 @@
 export * from './camera';
 export * from './carousel';
 export * from './file-list';
+export * from './file-preview';
 export * from './files-form-field';
 export * from './galleries';
 export * from './image-cropper';

package/dist/lib/components/ui/media/upload/network-upload-field/use-image-preview.d.ts

@@ -1,2 +1,8 @@
+/**
+ * An object URL for `blob`, made in an effect (never on a server) and revoked
+ * when `blob` changes or the component unmounts. `undefined` until made, and
+ * never the previous blob's (already revoked) URL. `FilePreview` uses it.
+ */
+export declare function useBlobUrl(blob: Blob | undefined): string | undefined;
 /** An object URL previewing `file` while it is an image, revoked on change. */
 export declare function useImagePreview(file?: File): string | undefined;

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

@@ -13,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/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;
@@ -626,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;
@@ -1170,6 +1177,7 @@ export declare const en: {
         slider: {
             minimum: string;
             maximum: string;
+            value: string;
         };
         "scroll-to-top": {
             label: string;
@@ -1206,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",
@@ -616,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",
@@ -1159,7 +1166,8 @@ declare const _default: {
 	},
 	"slider": {
 		"minimum": "Minimum",
-		"maximum": "Maximum"
+		"maximum": "Maximum",
+		"value": "Value"
 	},
 	"scroll-to-top": {
 		"label": "Scroll to top"
@@ -1195,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}"
 	}
 }
 ;