@nxgt/material 3.101.0 → 3.104.0

package/dist/lib/components/ui/collections/data-table/partials/layouts/data-table-list-bar.d.ts

@@ -3,8 +3,9 @@ import { RefObject } from 'react';
 import { DataTableTable } from '../../types.js';
 /** Whether the table has a `select` column ("Select all on this page"). */
 export declare const isSelectable: <TData extends RowData>(table: DataTableTable<TData>) => boolean;
-/** Whether the cards have a list bar: a `select` column, or a sortable column. */
-export declare const hasListBar: <TData extends RowData>(table: DataTableTable<TData>) => boolean;
+/** Whether the cards have a list bar: a `select` column, or a sortable column
+ * whose sort control is shown (`showSort`). */
+export declare const hasListBar: <TData extends RowData>(table: DataTableTable<TData>, showSort?: boolean) => boolean;
 /**
  * The list's header row, where a table's header row would be (the cards'
  * `showHeader`): "Select all on this page" and, beside it, "N rows selected"
@@ -24,8 +25,10 @@ export declare const hasListBar: <TData extends RowData>(table: DataTableTable<T
  * count replaces in place while rows are selected, and the sort to its sort
  * slot (#1719). The names and the behaviour are the same.
  */
-export declare function DataTableListBar<TData extends RowData>({ table, rootRef, }: {
+export declare function DataTableListBar<TData extends RowData>({ table, rootRef, showSort, }: {
     table: DataTableTable<TData>;
+    /** `false`: no sort control (`DataTable`'s `showSort`). */
+    showSort?: boolean;
     /** The list's root, where the focus goes once "Clear selection" is gone. */
     rootRef?: RefObject<HTMLElement | null>;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/collections/data-table/partials/layouts/list-bar-in-row.d.ts

@@ -8,11 +8,12 @@ import { DataTableTable } from '../../types.js';
  * replaces in place, and "Clear selection") goes to the host's start slot,
  * the sort to its sort slot.
  */
-export declare function ListBarInRow<TData extends RowData>({ table, slots, count, countText, selectAll, clear, }: {
+export declare function ListBarInRow<TData extends RowData>({ table, slots, count, countText, selectAll, clear, showSort, }: {
     table: DataTableTable<TData>;
     slots: DataTableListSlots;
     count: number;
     countText: string;
     selectAll: (visibleLabel?: string) => ReactNode;
     clear: ReactNode;
+    showSort?: boolean;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/collections/data-table/types.d.ts

@@ -37,19 +37,22 @@ export interface DataTableProps<TData extends RowData> extends DataTableEmptyPro
     /** The header row (column names, sorting, "Select all"). Shown at every
      * width; `false` hides it. */
     showHeader?: boolean;
+    /** `false`: `cards` and `tiles` drop their sort control (phone too); columns
+     * stay sortable, header sorting unchanged. Default: shown. */
+    showSort?: boolean;
     /** Caps the table's height (`400`, `'60vh'`); the rows then scroll inside
      * it. Default: none — the table is as tall as its rows, and the page
      * scrolls. */
     maxHeight?: number | string;
+    /** `maxHeight` as a Tailwind class (`'max-h-[28rem]'`): no inline `style`,
+     * server included (strict CSP). Wins over `maxHeight`. */
+    maxHeightClassName?: string;
     /** Renders only the rows in view (and a few around them), for long
-     * lists. Needs `maxHeight`: without it, it is off and warns in
-     * development. In client mode every filtered and sorted row is in one
-     * scrolling list, with no paging and no pagination footer; in `manual`
-     * mode the rows given are. The table gets `aria-rowcount` and each row
-     * its `aria-rowindex`, and switches to `table-fixed`: give columns their
-     * widths with `meta.className`. `renderExpandedRow` is ignored while it
-     * is on. The server renders the first `ssrRows` rows, with no inline
-     * `style`. */
+     * lists. Needs `maxHeight` or `maxHeightClassName`, else it is off and
+     * warns in development. Client mode: every filtered and sorted row in one
+     * list, no paging; `manual`: the rows given. Adds `aria-rowcount`,
+     * `aria-rowindex` and `table-fixed` (widths in `meta.className`).
+     * `renderExpandedRow` is ignored. The server renders `ssrRows` rows. */
     virtual?: DataTableVirtual;
     /** The name of the scroll region the table becomes while it overflows.
      * Default: "Scrollable table" (`material.table.labels.scroll-region`). */

package/dist/lib/components/ui/collections/data-table/virtual-option.d.ts

@@ -7,9 +7,15 @@ export type DataTableVirtualOptions = {
 };
 /**
  * `DataTable`'s `virtual`, or `undefined` when it is off. It needs
- * `maxHeight` (the rows scroll inside the table, not the page): without it,
- * it stays off and warns. `renderExpandedRow` is ignored while it is on —
+ * `maxHeight` or `maxHeightClassName` (the rows scroll inside the table, not
+ * the page): without either, it stays off and warns. `renderExpandedRow` is ignored while it is on —
  * an expanded row changes its row's height under the virtualizer — and
  * warns too.
  */
-export declare function resolveVirtual(virtual: DataTableVirtual | undefined, maxHeight: number | string | undefined, expandable: boolean): DataTableVirtualOptions | undefined;
+export declare function resolveVirtual(virtual: DataTableVirtual | undefined, capped: boolean, expandable: boolean): DataTableVirtualOptions | undefined;
+/** Whether the table's height is capped, by `maxHeight` or by
+ * `maxHeightClassName`: the rows then scroll inside it. */
+export declare function isCapped(props: {
+    maxHeight?: number | string;
+    maxHeightClassName?: string;
+}): boolean;

package/dist/lib/components/ui/collections/filter/use-filter-field-config.d.ts

@@ -2326,6 +2326,7 @@ export declare function useFilterFieldConfig({ field, value, onChange, error, di
         label?: import('react').ReactNode;
         columns?: import('../../selection/index.js').ChipGroupColumns | undefined;
         content?: string | undefined | undefined;
+        overflow?: "wrap" | "scroll" | undefined;
         size?: import('../../display/index.js').ChipSize | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         color?: string | undefined | undefined;
@@ -2623,6 +2624,7 @@ export declare function useFilterFieldConfig({ field, value, onChange, error, di
         label?: import('react').ReactNode;
         columns?: import('../../selection/index.js').ChipGroupColumns | undefined;
         content?: string | undefined | undefined;
+        overflow?: "wrap" | "scroll" | undefined;
         size?: import('../../display/index.js').ChipSize | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         color?: string | undefined | undefined;

package/dist/lib/components/ui/collections/server-table/partials/server-table-passed-through.d.ts

@@ -19,6 +19,7 @@ export declare function passedThrough<T extends RowData>(props: ServerTableProps
         expandedRowModel: (table: import('@tanstack/table-core').Table<any, any>) => () => import('@tanstack/table-core').RowModel<any, any>;
     }, T, any>[];
     maxHeight: string | number | undefined;
+    maxHeightClassName: string | undefined;
     scrollLabel: string | undefined;
     showViewOptions: boolean | undefined;
     renderExpandedRow: ((row: import('@tanstack/table-core').Row<{

package/dist/lib/components/ui/collections/server-table/types.d.ts

@@ -15,7 +15,7 @@ export type ServerTableSelection = {
     deselect(ids: readonly string[]): void;
 };
 /** The `DataTable` props `ServerTable` passes through as they are. */
-export type PassedThrough<T extends RowData> = Pick<DataTableProps<T>, 'columns' | 'maxHeight' | 'scrollLabel' | 'showViewOptions' | 'renderExpandedRow' | 'options' | 'loading' | 'loadingRows' | 'getRowHref' | 'onRowClick' | 'linkComponent' | 'density' | 'layout' | 'cardDensity' | 'renderCard' | 'renderTile' | 'focusRef' | 'enableRowSelection' | 'rowSelectionDisabledReason'>;
+export type PassedThrough<T extends RowData> = Pick<DataTableProps<T>, 'columns' | 'maxHeight' | 'maxHeightClassName' | 'scrollLabel' | 'showViewOptions' | 'renderExpandedRow' | 'options' | 'loading' | 'loadingRows' | 'getRowHref' | 'onRowClick' | 'linkComponent' | 'density' | 'layout' | 'cardDensity' | 'renderCard' | 'renderTile' | 'focusRef' | 'enableRowSelection' | 'rowSelectionDisabledReason'>;
 export type ServerTableProps<T extends RowData> = PassedThrough<T> & ServerTablePagingProps & {
     /** The URL's search params, as the router reads them. */
     params: URLSearchParams;

package/dist/lib/components/ui/display/chip/chip.variants.d.ts

@@ -1,3 +1,4 @@
+import { Tone } from '../../tones.js';
 /**
  * A `Chip`'s look. `outlined` (the default) is a neutral hairline pill;
  * `tonal` and `filled` a soft tonal fill; `tag` a compact tag led by a
@@ -10,8 +11,8 @@ export type ChipVariant = 'outlined' | 'tonal' | 'filled' | 'tag' | 'dashed'
  | 'ghost'
 /** @deprecated A Button variant: draws the hairline look, as `outlined`. */
  | 'link';
-/** A `Chip`'s tone: `default` (and nothing) is neutral. */
-export type ChipColor = 'default' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error';
+/** A `Chip`'s tone: `default` (and nothing) is neutral; else a tone `Badge` takes, an app's own included. */
+export type ChipColor = 'default' | Tone;
 /**
  * A `Chip`'s density: `default` 28px, `sm` 24px (the 24px target kept), `lg`
  * 44px (the touch target, drawn at every pointer).
@@ -21,7 +22,7 @@ export type ChipLook = 'hairline' | 'soft' | 'tag';
 /** The look a variant draws. */
 export declare function chipLook(variant: ChipVariant | null | undefined): ChipLook;
 /** The tone a colour draws: no colour, and `default`, are neutral. */
-export declare function chipTone(color: ChipColor | null | undefined): "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral";
+export declare function chipTone(color: ChipColor | null | undefined): Tone;
 /** The data attributes a chip's root carries, and the look and tone they name. */
 export declare function chipAttributes({ variant, size, color, selected, }: {
     variant: ChipVariant;
@@ -30,6 +31,6 @@ export declare function chipAttributes({ variant, size, color, selected, }: {
     selected?: boolean;
 }): {
     look: ChipLook;
-    tone: string;
+    tone: Tone;
     attributes: Record<string, string | undefined>;
 };

package/dist/lib/components/ui/display/code/code-block-parts.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 /** The bar over the code: the file name, the language and the copy button. */
 export declare function CodeBlockHeader({ filename, label, code, }: {
     filename: ReactNode;
-    label: string;
+    label: ReactNode | false;
     code: string;
 }): import("react").JSX.Element;
 /** The scrollable code: the line numbers beside the highlighted lines. */

package/dist/lib/components/ui/display/code/code-block.d.ts

@@ -1,7 +1,10 @@
 import { ReactNode } from 'react';
 export type CodeBlockProps = {
     code: string;
+    /** A language id or alias; `text` shows the code as is, without highlighting. */
     language?: string;
+    /** Replaces the language label; `false` hides it. */
+    label?: ReactNode | false;
     filename?: ReactNode;
     showLineNumbers?: boolean;
     highlightLines?: number[];
@@ -9,4 +12,4 @@ export type CodeBlockProps = {
     scheme?: 'dark' | 'light';
     className?: string;
 };
-export declare function CodeBlock({ code, language, filename, showLineNumbers, highlightLines, maxHeight, scheme, className, }: CodeBlockProps): import("react").JSX.Element;
+export declare function CodeBlock({ code, language, label: labelProp, filename, showLineNumbers, highlightLines, maxHeight, scheme, className, }: CodeBlockProps): import("react").JSX.Element;

package/dist/lib/components/ui/display/code/languages.d.ts

@@ -7,3 +7,5 @@ export declare const CODE_LANGUAGES: {
 export declare function resolveCodeLanguage(value?: string): CodeLanguageId;
 /** The language's name, or its id when the list does not know it. */
 export declare function codeLanguageLabel(language: string): string;
+/** `text`, `plaintext`, `plain` or `txt`: shown as is, without highlighting. */
+export declare function isPlainTextLanguage(value?: string): boolean;

package/dist/lib/components/ui/display/code/moonlight-tokens.d.ts

@@ -2,7 +2,7 @@ export declare const MOONLIGHT_DARK: {
     readonly bg: "#222436";
     readonly bgElevated: "#1e2030";
     readonly fg: "#c8d3f5";
-    readonly comment: "#7a88cf";
+    readonly comment: "#8f9ad6";
     readonly blue: "#82aaff";
     readonly cyan: "#86e1fc";
     readonly green: "#c3e88d";
@@ -17,15 +17,15 @@ export declare const MOONLIGHT_DAY: {
     readonly bg: "#f5f7ff";
     readonly bgElevated: "#eceff8";
     readonly fg: "#383a51";
-    readonly comment: "#7a88cf";
-    readonly blue: "#3e68d7";
-    readonly cyan: "#0b8ec2";
-    readonly green: "#4db380";
-    readonly orange: "#c44c22";
-    readonly yellow: "#ac8300";
-    readonly red: "#c53b40";
-    readonly magenta: "#7a5af5";
-    readonly pink: "#b04d9a";
+    readonly comment: "#4356ba";
+    readonly blue: "#2a56ca";
+    readonly cyan: "#08658a";
+    readonly green: "#2d6a4c";
+    readonly orange: "#a33f1c";
+    readonly yellow: "#765a00";
+    readonly red: "#ac3337";
+    readonly magenta: "#5d36f3";
+    readonly pink: "#924080";
     readonly selection: "#d4daf0";
 };
 export type MoonlightTokens = {

package/dist/lib/components/ui/feedback/confirm-dialog/confirm-dialog-props.d.ts

@@ -0,0 +1,73 @@
+import { ReactNode } from 'react';
+import { ButtonVariant } from '../../actions/button/button.js';
+import { ConfirmRefusalContext } from './confirm-alert.js';
+import { ConfirmPhraseMatch } from './confirm-dialog-rules.js';
+export interface ConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    /**
+     * The text under the title. A string renders in a paragraph; any other node
+     * (several paragraphs, a list, a link) renders in a `div`, so block children
+     * are valid HTML. Either way it names the dialog (`aria-describedby`).
+     */
+    description: ReactNode;
+    /**
+     * A note under the description, for what the user should know before
+     * confirming (what else is affected, what cannot be undone). It is part of
+     * what describes the dialog.
+     */
+    details?: ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /**
+     * The variant of the Cancel button. Default `'tonal'`; `'outlined'` or
+     * `'ghost'` restores the earlier look.
+     */
+    cancelVariant?: ButtonVariant;
+    /**
+     * Runs when the user confirms. The dialog stays open, with its buttons
+     * disabled, until the returned promise settles. It closes on success; on
+     * a throw or a rejection it stays open and shows the error's message, so
+     * the user can retry or cancel (or only cancel, with `lockOnRefusal`).
+     */
+    onConfirm: () => void | Promise<void>;
+    variant?: 'default' | 'destructive';
+    loading?: boolean;
+    /** Disables the confirm button, for example while an error of yours stands. */
+    confirmDisabled?: boolean;
+    /**
+     * Disables the confirm button once `onConfirm` has refused (thrown), so a
+     * retry that cannot succeed is not invited. Cancel stays. It clears when the
+     * dialog reopens. Off by default: the refused action may be retried.
+     */
+    lockOnRefusal?: boolean;
+    /**
+     * Renders the refusal inside the dialog's error alert instead of the plain
+     * message, so it can carry a link (to the records that block a delete, for
+     * example). Receives the message, what `onConfirm` threw and `close()`. The alert keeps `role="alert"`.
+     * By default an `ActionRefusal` thrown by `onConfirm` shows its details and
+     * its action under the message; any other error shows its message.
+     */
+    refusal?: (refusal: ConfirmRefusalContext) => ReactNode;
+    /**
+     * Asks the user to type this text before Confirm enables, for a deletion
+     * worth a second thought. A field labelled "Type {phrase} to confirm"
+     * (translated, the phrase in code style) takes the focus on open and starts
+     * empty each time the dialog opens; paste is allowed. Enter in it confirms
+     * only once it matches. Unset or empty: no field.
+     */
+    confirmPhrase?: string;
+    /**
+     * How the typed text is compared with `confirmPhrase`: `'exact'` (default),
+     * `'trim'` (spaces around the text ignored) or `'trim-case-insensitive'`.
+     */
+    confirmPhraseMatch?: ConfirmPhraseMatch;
+    /**
+     * Called as the dialog closes, before the focus goes back to what opened
+     * it. `event.preventDefault()` places the focus yourself, for example
+     * `ctx.focusTrigger()` of a ServerTable bulk action, whose button a redraw
+     * may have replaced.
+     */
+    onCloseAutoFocus?: (event: Event) => void;
+}

package/dist/lib/components/ui/feedback/confirm-dialog/confirm-dialog-rules.d.ts

@@ -15,3 +15,15 @@ export declare function confirmIsDisabled({ busy, confirmDisabled, lockOnRefusal
     lockOnRefusal?: boolean;
     error: string | null;
 }): boolean;
+/**
+ * How the typed text is compared with `confirmPhrase`: `'exact'` (the
+ * default) character for character, `'trim'` ignoring spaces around the text,
+ * `'trim-case-insensitive'` ignoring those and the letter case.
+ */
+export type ConfirmPhraseMatch = 'exact' | 'trim' | 'trim-case-insensitive';
+/**
+ * Whether the typed text satisfies the phrase. An empty phrase never asks for
+ * anything (always true); the phrase itself is trimmed the same way as the
+ * input in the `trim` modes.
+ */
+export declare function confirmPhraseMatches(typed: string, phrase: string, mode?: ConfirmPhraseMatch): boolean;

package/dist/lib/components/ui/feedback/confirm-dialog/confirm-dialog.d.ts

@@ -1,61 +1,5 @@
-import { ReactNode } from 'react';
-import { ButtonVariant } from '../../actions/button/button.js';
-import { ConfirmRefusalContext } from './confirm-alert.js';
-export type { ConfirmRefusalContext };
-export interface ConfirmDialogProps {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    title: string;
-    /**
-     * The text under the title. A string renders in a paragraph; any other node
-     * (several paragraphs, a list, a link) renders in a `div`, so block children
-     * are valid HTML. Either way it names the dialog (`aria-describedby`).
-     */
-    description: ReactNode;
-    /**
-     * A note under the description, for what the user should know before
-     * confirming (what else is affected, what cannot be undone). It is part of
-     * what describes the dialog.
-     */
-    details?: ReactNode;
-    confirmLabel?: string;
-    cancelLabel?: string;
-    /**
-     * The variant of the Cancel button. Default `'tonal'`; `'outlined'` or
-     * `'ghost'` restores the earlier look.
-     */
-    cancelVariant?: ButtonVariant;
-    /**
-     * Runs when the user confirms. The dialog stays open, with its buttons
-     * disabled, until the returned promise settles. It closes on success; on
-     * a throw or a rejection it stays open and shows the error's message, so
-     * the user can retry or cancel (or only cancel, with `lockOnRefusal`).
-     */
-    onConfirm: () => void | Promise<void>;
-    variant?: 'default' | 'destructive';
-    loading?: boolean;
-    /** Disables the confirm button, for example while an error of yours stands. */
-    confirmDisabled?: boolean;
-    /**
-     * Disables the confirm button once `onConfirm` has refused (thrown), so a
-     * retry that cannot succeed is not invited. Cancel stays. It clears when the
-     * dialog reopens. Off by default: the refused action may be retried.
-     */
-    lockOnRefusal?: boolean;
-    /**
-     * Renders the refusal inside the dialog's error alert instead of the plain
-     * message, so it can carry a link (to the records that block a delete, for
-     * example). Receives the message, what `onConfirm` threw and `close()`. The alert keeps `role="alert"`.
-     * By default an `ActionRefusal` thrown by `onConfirm` shows its details and
-     * its action under the message; any other error shows its message.
-     */
-    refusal?: (refusal: ConfirmRefusalContext) => ReactNode;
-    /**
-     * Called as the dialog closes, before the focus goes back to what opened
-     * it. `event.preventDefault()` places the focus yourself, for example
-     * `ctx.focusTrigger()` of a ServerTable bulk action, whose button a redraw
-     * may have replaced.
-     */
-    onCloseAutoFocus?: (event: Event) => void;
-}
-export declare function ConfirmDialog({ open, onOpenChange, title: titleProp, description: descriptionProp, details: detailsProp, confirmLabel: confirmLabelProp, cancelLabel: cancelLabelProp, cancelVariant, onConfirm, variant: variantProp, loading, confirmDisabled, lockOnRefusal, refusal, onCloseAutoFocus, }: ConfirmDialogProps): import("react").JSX.Element;
+import { ConfirmDialogProps } from './confirm-dialog-props.js';
+export type { ConfirmRefusalContext } from './confirm-alert.js';
+export type { ConfirmPhraseMatch } from './confirm-dialog-rules.js';
+export type { ConfirmDialogProps };
+export declare function ConfirmDialog(props: ConfirmDialogProps): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/confirm-dialog/confirm-footer.d.ts

@@ -0,0 +1,12 @@
+import { MouseEvent } from 'react';
+import { ButtonVariant } from '../../actions/button/button.js';
+/** A confirm dialog's Cancel and Confirm buttons. */
+export declare function ConfirmFooter({ variant, busy, disabled, cancelLabel, confirmLabel, cancelVariant, onConfirm, }: {
+    variant: 'default' | 'destructive';
+    busy: boolean;
+    disabled: boolean;
+    cancelLabel?: string;
+    confirmLabel?: string;
+    cancelVariant?: ButtonVariant;
+    onConfirm: (event: MouseEvent<HTMLButtonElement>) => void;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/confirm-dialog/confirm-phrase.d.ts

@@ -0,0 +1,26 @@
+import { Ref } from 'react';
+import { ConfirmPhraseMatch } from './confirm-dialog-rules.js';
+/**
+ * The "type the value to confirm" field of a `ConfirmDialog`: a label that
+ * shows the phrase in code style, and an input that takes any paste. The
+ * dialog owns the value; Enter is handed back only while it matches.
+ */
+export declare function ConfirmPhraseField({ phrase, value, onValueChange, onEnter, disabled, inputRef, }: {
+    phrase: string;
+    value: string;
+    onValueChange: (value: string) => void;
+    onEnter: () => void;
+    disabled: boolean;
+    inputRef: Ref<HTMLInputElement>;
+}): import("react").JSX.Element;
+/**
+ * The typed text of a `ConfirmDialog`'s phrase field: it starts empty each
+ * time the dialog opens, `missing` says Confirm must wait, and `ref` is the
+ * input the dialog focuses on open.
+ */
+export declare function useConfirmPhrase(open: boolean, phrase: string | undefined, match: ConfirmPhraseMatch): {
+    ref: import('react').RefObject<HTMLInputElement | null>;
+    typed: string;
+    setTyped: import('react').Dispatch<import('react').SetStateAction<string>>;
+    missing: boolean;
+};

package/dist/lib/components/ui/feedback/confirm-dialog/use-confirm-action.d.ts

@@ -13,7 +13,7 @@ export declare function useConfirmAction({ open, onOpenChange, onConfirm, }: {
     error: string | null;
     cause: unknown;
     handleOpenChange: (value: boolean) => void;
-    handleConfirm: (event: MouseEvent<HTMLButtonElement>) => Promise<void>;
+    handleConfirm: (event: Pick<MouseEvent, "preventDefault">) => Promise<void>;
 };
 /**
  * A ref for a modal's content that takes the focus while `pending`: the