@nxgt/material 3.52.0 → 3.54.0

package/dist/lib/components/ui/actions/action-card/partials/action-card-text.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, ElementType, ReactNode } from 'react';
+import { ComponentProps, ElementType, ReactElement, ReactNode } from 'react';
 import { useActionCardNames } from '../use-action-card-names.js';
 import { useReveal } from '../use-reveal.js';
 import { ActionCardTitleButton } from './action-card-title-button.js';
@@ -8,7 +8,7 @@ import { ActionCardTitleButton } from './action-card-title-button.js';
  * meta line. With an `action` the button is always there, named after the
  * status and the meta when there is no title.
  */
-export declare function ActionCardText({ title, description, status, meta, Title, button, names, reveal, }: {
+export declare function ActionCardText({ title, description, status, meta, Title, button, names, reveal, link, }: {
     title: ReactNode;
     description: ReactNode;
     status: ReactNode;
@@ -17,4 +17,8 @@ export declare function ActionCardText({ title, description, status, meta, Title
     button: Omit<ComponentProps<typeof ActionCardTitleButton>, 'id' | 'labelledBy' | 'describedBy' | 'children'> | undefined;
     names: ReturnType<typeof useActionCardNames>;
     reveal: ReturnType<typeof useReveal>;
+    /** The caller's link element: the title becomes it (`titleLink`). */
+    link?: ReactElement<{
+        className?: string;
+    }>;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/actions/action-card/partials/action-card-title-button.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, ReactNode } from 'react';
+import { ComponentProps, ReactElement, ReactNode } from 'react';
 /**
  * The title of a card that has an `action`: the card's one button. Its
  * `::after` is stretched over the card (action-card-tile.css), so the whole
@@ -12,3 +12,17 @@ export declare function ActionCardTitleButton({ id, labelledBy, describedBy, chi
     describedBy: string | undefined;
     children?: ReactNode;
 } & Omit<ComponentProps<'button'>, 'children' | 'id'>): import("react").JSX.Element;
+/**
+ * The title of a card with a `titleLink`: the caller's link element (a router
+ * `Link`, an `<a>`) given the title as its children. It takes the button's
+ * class, so its `::after` covers the card, and the same name and description.
+ */
+export declare function ActionCardTitleLink({ id, labelledBy, describedBy, link, children, }: {
+    id: string;
+    labelledBy: string | undefined;
+    describedBy: string | undefined;
+    link: ReactElement<{
+        className?: string;
+    }>;
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/actions/action-card/partials/action-card-trail.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 /** The card's trailing parts: its `action` in its own area, then the indicator. */
-export declare function ActionCardTrail({ action, withIndicator, }: {
+export declare function ActionCardTrail({ action, footer, withIndicator, }: {
     action: ReactNode;
+    footer?: ReactNode;
     withIndicator: boolean;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/collections/data-grid/columns/column-codec.d.ts

@@ -1,8 +1,8 @@
 import { GridMsg } from '@nxgt/material-core/data-grid';
-import { ColumnMeta, RowData } from '@tanstack/react-table';
-import { DataTableFeatures } from '../../data-table/features.js';
+import { RowData } from '@tanstack/react-table';
 import { DataGridFormatContext } from '../grid-meta.js';
-type Meta<TData extends RowData> = ColumnMeta<DataTableFeatures, TData>;
+import { RowMeta } from './row-meta.js';
+type Meta<TData extends RowData> = RowMeta<TData>;
 type Result = {
     value: unknown;
 } | {

package/dist/lib/components/ui/collections/data-grid/columns/column-edit.d.ts

@@ -4,10 +4,11 @@ import { DataTableFeatures } from '../../data-table/features.js';
 import { DataGridEditor, DataGridEditorName } from '../editors/editor-types.js';
 import { DataGridFormatContext } from '../grid-meta.js';
 import { GridColumn } from '../use-grid-model.js';
-type Meta<TData extends RowData> = ColumnMeta<DataTableFeatures, TData>;
+export { metaFor, type RowMeta } from './row-meta.js';
 /** The kind of editor a column has: a name, `'custom'` (a component), or `null` (none). */
 export type ColumnEditorKind = DataGridEditorName | 'custom' | null;
-export declare function editorKind<TData extends RowData>(meta: Meta<TData> | undefined): ColumnEditorKind;
+/** The kind of editor a (row's) meta names. */
+export declare function editorKind<TData extends RowData>(meta: Pick<ColumnMeta<DataTableFeatures, TData>, 'editor'> | undefined): ColumnEditorKind;
 /** The column's custom editor, when it has one. */
 export declare function customEditor<TData extends RowData>(column: GridColumn<TData>): DataGridEditor<TData> | undefined;
 /**
@@ -16,9 +17,9 @@ export declare function customEditor<TData extends RowData>(column: GridColumn<T
  * code's or an option's label, a date in the locale), else the value as a
  * string.
  */
-export declare function formatValue<TData extends RowData>(column: GridColumn<TData>, value: unknown, ctx: DataGridFormatContext): string;
+export declare function formatValue<TData extends RowData>(column: GridColumn<TData>, value: unknown, ctx: DataGridFormatContext, row: TData | undefined): string;
 /** Whether the grid writes the cell's text itself (`format`, a number, a select, a date), rather than the column's `cell`. */
-export declare function formatsItself<TData extends RowData>(column: GridColumn<TData>): boolean;
+export declare function formatsItself<TData extends RowData>(column: GridColumn<TData>, row: TData | undefined): boolean;
 /** `text` parsed and checked by the column (parse, `validate`, `schema`). */
 export declare function validateText<TData extends RowData>(column: GridColumn<TData>, text: string, row: TData, ctx: DataGridFormatContext): GridValidation<unknown> | Promise<GridValidation<unknown>>;
 /**
@@ -47,4 +48,3 @@ export declare function settledCheck<TData extends RowData>(column: GridColumn<T
 export declare function settledCheck<TData extends RowData>(column: GridColumn<TData>, result: GridValidation<unknown> | Promise<GridValidation<unknown>>, timeout?: number): GridValidation<unknown> | Promise<GridValidation<unknown>>;
 /** The value Delete leaves: unchecked for a checkbox, else what the empty text parses to (`null` if it does not). */
 export declare function clearedValue<TData extends RowData>(column: GridColumn<TData>, row: TData, ctx: DataGridFormatContext): unknown;
-export {};

package/dist/lib/components/ui/collections/data-grid/columns/row-meta.d.ts

@@ -0,0 +1,24 @@
+import { GridBound, GridOption } from '@nxgt/material-core/data-grid';
+import { ColumnMeta, RowData } from '@tanstack/react-table';
+import { DataTableFeatures } from '../../data-table/features.js';
+import { GridColumn } from '../use-grid-model.js';
+type Meta<TData extends RowData> = ColumnMeta<DataTableFeatures, TData>;
+/** A column's meta once the row has decided what depends on it: a plain editor, option list and decimals. */
+export type RowMeta<TData extends RowData> = Omit<Meta<TData>, 'options' | 'number'> & {
+    options?: GridOption[];
+    number?: {
+        min?: GridBound<TData>;
+        max?: GridBound<TData>;
+        decimals?: number;
+        /** The decimals came from the row: the cell shows exactly that many. */
+        fixed?: boolean;
+    };
+};
+/**
+ * The column's meta for one row: `rowEditor`, a function `options` and a
+ * function `decimals` resolved. A column with none of them gives its own
+ * meta; otherwise one resolved meta per (column, row), so the codec cache
+ * keeps working.
+ */
+export declare function metaFor<TData extends RowData>(column: GridColumn<TData>, row: TData | undefined): RowMeta<TData> | undefined;
+export {};

package/dist/lib/components/ui/collections/data-grid/grid-meta.d.ts

@@ -7,7 +7,7 @@ export type { DataGridEditorName } from './editors/editor-types.js';
 export type DataGridRule = boolean | {
     reason: string;
 };
-/** What a column's `parse` and `format` are told: the page's language, the row (parse only). */
+/** What a column's `parse` and `format` are told: the page's language, and the row (`format` has none for a total). */
 export type DataGridFormatContext = {
     lang: string;
     locale: string;
@@ -49,19 +49,26 @@ declare module '@tanstack/react-table' {
          * column without one is read-only.
          */
         editor?: DataGridEditorName | DataGridEditor<TData, TValue>;
-        /** The number editor's bounds (`max` may depend on the row) and decimals. */
+        /**
+         * The built-in editor a row's cell has, when it differs from row to
+         * row (a result column of numbers, picks and texts): it wins over
+         * `editor`. A name only; a component stays `editor`'s.
+         */
+        rowEditor?: (row: TData) => DataGridEditorName;
+        /** The number editor's bounds and decimals; each may depend on the row. A function `decimals` is also what a cell shows: exactly that many fraction digits (2.50). */
         number?: {
             min?: GridBound<TData>;
             max?: GridBound<TData>;
-            decimals?: number;
+            decimals?: number | ((row: TData) => number);
         };
         /** Symbolic values the number editor also takes ("abs"), in every language. */
         codes?: GridCode[];
         /**
          * The select editor's options: the value stored, the label shown and
          * copied. A pasted or typed text is a label or a value, in any case.
+         * A function gives each row its own list.
          */
-        options?: GridOption[];
+        options?: GridOption[] | ((row: TData) => GridOption[]);
         /**
          * The date editor's bounds, as ISO dates (`'2026-09-01'`): a day
          * outside them is an error. The value is an ISO date, shown in the
@@ -75,8 +82,14 @@ declare module '@tanstack/react-table' {
         parse?: (text: string, ctx: DataGridFormatContext & {
             row: TData;
         }) => DataGridParseResult<TValue | null>;
-        /** Value to text, shown in the cell and edited; replaces the editor's own. */
-        format?: (value: TValue | null, ctx: DataGridFormatContext) => string;
+        /**
+         * Value to text, shown in the cell and edited; replaces the editor's own.
+         * `ctx.row` is the cell's row (absent for a total), so a format can follow
+         * the row, as a function `number.decimals` does.
+         */
+        format?: (value: TValue | null, ctx: DataGridFormatContext & {
+            row?: TData;
+        }) => string;
         /** Checks a parsed value; a message flags the cell in error. */
         validate?: (value: TValue | null, row: TData) => GridMsg | string | null | undefined;
         /** A Standard Schema (zod, valibot…) the value must pass, after `validate`; a nullable one too. */

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

@@ -1,5 +1,5 @@
 import { RowData } from '@tanstack/react-table';
 import { DataTableProps } from './types.js';
 export type { DataTableEmpty, DataTableEmptyState, } from './partials/data-table-empty-row.js';
-export type { DataTableControls, DataTableDensity, DataTableItem, DataTableItemTitleElement, DataTableLayout, DataTableLayoutProp, DataTableLinkComponent, DataTableLinkProps, DataTableOptions, DataTablePageTarget, DataTableProps, DataTableResponsiveLayout, DataTableServerPagination, DataTableSlot, DataTableVirtual, } from './types.js';
+export type { DataTableControls, DataTableDensity, DataTableItem, DataTableItemRowProps, DataTableItemTitleElement, DataTableLayout, DataTableLayoutProp, DataTableLinkComponent, DataTableLinkProps, DataTableOptions, DataTablePageTarget, DataTableProps, DataTableResponsiveLayout, DataTableServerPagination, DataTableSlot, DataTableVirtual, } from './types.js';
 export declare function DataTable<TData extends RowData>(props: DataTableProps<TData>): import("react").JSX.Element;

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

@@ -14,6 +14,25 @@ export type DataTableResponsiveLayout = {
 export type DataTableLayoutProp = DataTableLayout | DataTableResponsiveLayout;
 /** The heading level (or `span`) of a card's title. */
 export type DataTableItemTitleElement = 'h2' | 'h3' | 'h4' | 'span';
+/** The compact record row `item.Row` lays out (the dense row of `ListTile`,
+ * `size="sm"` with `chips`). */
+export type DataTableItemRowProps = {
+    /** The title text: the item's one link (or button), as `Title`. */
+    title: ReactNode;
+    /** The heading level of the title, as `Title`'s `as`. Default `span`. */
+    as?: DataTableItemTitleElement;
+    /** A note after the title: on its line from a width of 28rem, under it below. */
+    subtitle?: ReactNode;
+    /** Tags after the text (usually `<Chip size="sm">`s), under it below 36rem;
+     * decoration, never buttons. */
+    chips?: ReactNode;
+    /** Facts at the end of the row, before the chevron: decoration, never buttons. */
+    trailing?: ReactNode;
+    /** Before the text, such as an `Avatar`. */
+    leading?: ReactNode;
+    /** The discreet chevron of a link row. Default: on when the item has a link. */
+    chevron?: boolean;
+};
 /** What `renderCard` and `renderTile` are handed beside the row. */
 export type DataTableItem = {
     /** The card's (or tile's) one link and its accessible name: wrap the title text in
@@ -25,6 +44,14 @@ export type DataTableItem = {
         children: ReactNode;
         as?: DataTableItemTitleElement;
     }>;
+    /** The compact record row, in place of a hand-laid title and content:
+     * `<Row as="h2" title subtitle chips trailing />` lays out the dense row of
+     * `ListTile`, keeps the item's corner checkbox and makes `title` the one
+     * link. Render it once, instead of `Title`. In a tile (`layout="tiles"`) it
+     * is 36px tall (44px on a coarse pointer). It is passed to `renderCard`
+     * too: there it is the same row inside the card's own padding, border and
+     * columns, with no height of its own. */
+    Row: ComponentType<DataTableItemRowProps>;
     /** The row is selected. */
     selected: boolean;
     /** The row cannot be selected (`enableRowSelection` is false for it). */

package/dist/lib/components/ui/collections/data-table/partials/layouts/data-table-item-context.d.ts

@@ -9,5 +9,7 @@ export type DataTableItemContextValue = {
     /** `onRowClick(row, event)`: the title is a button, or runs before the link. */
     onActivate: ((event: MouseEvent) => void) | undefined;
     linkComponent: DataTableLinkComponent;
+    /** The item is selected. */
+    selected?: boolean;
 };
 export declare const DataTableItemContext: import('react').Context<DataTableItemContextValue | null>;

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

@@ -0,0 +1,8 @@
+import { DataTableItemRowProps } from '../../layout-types.js';
+/** The compact record row of a tile: the dense layout of `ListTile`
+ * (`size="sm"` with `chips`), laid out by the item. The subtitle shares the
+ * title's line from a width of 28rem, the chips sit after the text from 36rem
+ * and under it below that (a container query on the row). The title is the
+ * item's one link, so the item keeps its corner checkbox and its states; the
+ * row itself is not interactive. */
+export declare function DataTableItemRow({ title, as, subtitle, chips, trailing, leading, chevron, }: DataTableItemRowProps): import("react").JSX.Element;

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

@@ -5,7 +5,7 @@ import { DataTableFeatures } from './features.js';
 import { DataTableDensity, DataTableItem, DataTableLayoutProp, DataTableVirtual } from './layout-types.js';
 import { DataTableLinkComponent, DataTableServerPagination } from './server-pagination.js';
 import { DataTableSlot, DataTableTable } from './slots.js';
-export type { DataTableDensity, DataTableItem, DataTableItemTitleElement, DataTableLayout, DataTableLayoutProp, DataTableResponsiveLayout, DataTableVirtual, } from './layout-types.js';
+export type { DataTableDensity, DataTableItem, DataTableItemRowProps, DataTableItemTitleElement, DataTableLayout, DataTableLayoutProp, DataTableResponsiveLayout, DataTableVirtual, } from './layout-types.js';
 export type { DataTableLinkComponent, DataTableLinkProps, DataTablePageTarget, DataTableServerPagination, } from './server-pagination.js';
 export type { DataTableControls, DataTableSlot, DataTableTable, } from './slots.js';
 export type DataTableOptions = {

package/dist/lib/components/ui/collections/filter/bar/filter-bar-classes.d.ts

@@ -36,7 +36,12 @@ export declare const FILTER_MENU_ITEM_LABEL_CLASS = "min-w-0 flex-1 truncate";
 /** A field already active, in the menu: its condition, after its label. */
 export declare const FILTER_MENU_ITEM_CURRENT_CLASS = "min-w-0 max-w-[50%] truncate text-muted-foreground text-xs";
 export declare const FILTER_MENU_CHEVRON_CLASS = "size-3.5 text-muted-foreground";
-/** The quick filters, beside "Add filter". */
-export declare const FILTER_QUICK_LIST_CLASS = "flex flex-wrap items-center";
+/** The quick filters, beside "Add filter": `contents`, so each pill and "Add
+ * filter" are items of the bar's own wrapping row. "Add filter" follows the
+ * last pill wherever it lands, and wraps only when the row is really full
+ * (#1752), instead of the whole list moving down as one block. The list is
+ * `display: contents` and keeps its `role="group"` name on the library's
+ * Tailwind 4 baseline (Safari 16.4+, Chrome 111+). */
+export declare const FILTER_QUICK_LIST_CLASS = "contents";
 /** "Done" while the value is unreadable: `aria-disabled`, dimmed like a disabled button. */
 export declare const FILTER_DONE_CLASS = "aria-disabled:cursor-not-allowed aria-disabled:opacity-50";

package/dist/lib/components/ui/collections/server-table/partials/server-table-band-classes.d.ts

@@ -22,3 +22,8 @@ export declare const SERVER_TABLE_PHONE_ROW_START_CLASS = "min-w-0 flex-1";
 /** The row's end: the sort slot (`contents`, its child is the item), then
  * "Filters (N)" and the actions. */
 export declare const SERVER_TABLE_PHONE_ROW_END_CLASS = "flex shrink-0 items-center gap-1";
+/** The bar's search floor in the band: from md the band lowers it to 8rem,
+ * though `SERVER_TABLE_BAR_CLASS` (shared with Vue, so left as is) says 10rem:
+ * the search gives up that much more room before "Add filter" wraps alone to
+ * a second row (#1752). It follows `SERVER_TABLE_BAR_CLASS`, so it wins. */
+export declare const SERVER_TABLE_BAR_FLOOR_CLASS = "md:[&_[data-slot=search-field]]:basis-32";

package/dist/lib/components/ui/display/list-tile/internal.d.ts

@@ -0,0 +1 @@
+export { ListTileDenseText } from './partials/list-tile-dense-text.js';

package/dist/lib/components/ui/display/list-tile/partials/list-tile-dense-text.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+type SubtitleProps = {
+    subtitle: ReactNode;
+    selected?: boolean;
+    /** The record row's subtitle is a note: smaller than its title. */
+    note?: boolean;
+    id?: string;
+};
+/** A tile's second line; the muted colour is 4.4:1 on the selected tint, so a selected tile gets a darker one. */
+export declare function ListTileSubtitle({ subtitle, selected, note, id, }: SubtitleProps): import("react").JSX.Element | null;
+type DenseTextProps = {
+    /** The title, already rendered: ListTile's `Typography`, or a table item's `Title`. */
+    title: ReactNode;
+    subtitle?: ReactNode;
+    chips?: ReactNode;
+    selected?: boolean;
+    /** The note look of the subtitle (`size="sm"`). Default `true`. */
+    compact?: boolean;
+    subtitleId?: string;
+};
+/**
+ * The record row's text block, shared by ListTile (`size="sm"` with `chips`)
+ * and a table tile's `item.Row`: the subtitle shares the title's line from the
+ * container's `@md`, the chips come after the text from `@xl` and under it
+ * below. The nearest `@container` ancestor measures.
+ */
+export declare function ListTileDenseText({ title, subtitle, chips, selected, compact, subtitleId, }: DenseTextProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/feedback/toast/toast-text.d.ts

@@ -0,0 +1,7 @@
+import { MaterialLocaleKey } from '../../../../i18n/types.js';
+/**
+ * A `material.*` word for a toast, which runs outside React: it follows the
+ * mounted `I18nProvider`'s `resources` and language, else the base bundle in
+ * the stored language.
+ */
+export declare function toastText(key: MaterialLocaleKey, fallback: string): string;