@nxgt/material 3.48.0 → 3.50.0

package/dist/lib/components/ui/actions/icon-button/icon-button.d.ts

@@ -51,6 +51,13 @@ export type IconButtonProps = {
      * alert), `error` (a notification) or `neutral` (the page's text colour).
      */
     badgeTone?: 'primary' | 'error' | 'neutral';
+    /**
+     * Busy, as `Button`'s `loading`: `aria-busy` and `aria-disabled`, a
+     * spinner in place of the icon (the button keeps its size) and every
+     * click blocked. It stays focusable (no native `disabled`), so the
+     * focus is not lost while the work runs.
+     */
+    loading?: boolean;
 };
 export declare function IconButton({ tooltip, 'aria-label': ariaLabel, ...props }: IconButtonProps): import("react").JSX.Element;
 export { variants as iconButtonVariants };

package/dist/lib/components/ui/actions/icon-button/icon-button.variants.d.ts

@@ -22,7 +22,7 @@ declare const variantsByColor: (props?: ({
     look?: "btn" | "shaped" | null | undefined;
     size?: "lg" | "sm" | "default" | "xs" | "xl" | "legacy" | null | undefined;
     width?: "default" | "narrow" | "wide" | null | undefined;
-    variant?: "tonal" | "filled" | "link" | "ghost" | "outlined" | null | undefined;
+    variant?: "link" | "tonal" | "filled" | "ghost" | "outlined" | null | undefined;
     color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type Props = Parameters<typeof variantsByColor>[0];

package/dist/lib/components/ui/collections/filter/bar/partials/filter-quick-toggle.d.ts

@@ -1,8 +1,9 @@
 import { FilterModelField } from '@nxgt/material-core/filter';
 /**
  * A switch or checkbox as a quick filter: a toggle button (`aria-pressed`),
- * dashed while off, selected (the Chip's own check) once on ("Yes");
- * pressed again, its condition goes.
+ * the Chip's toggle look: its label alone while off (no plus, not dashed, so
+ * it never reads as the "+ Field" pill that opens an editor), selected with
+ * the Chip's own check mark once on ("Yes"); pressed again, its condition goes.
  * A "No" condition leaves it off, shown as a chip; pressing it then sets
  * "Yes". The focus stays on it.
  * A field on by default shows pressed with no condition, marked "Default"

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

@@ -18,7 +18,13 @@ export declare const FILTER_SHEET_COUNT_CLASS = "rounded-full bg-primary/10 px-1
 /** The sheet: its header (the title, then Close), the scrolling sections, the footer. */
 export declare const FILTER_SHEET_CLASS = "motion-reduce:transition-none";
 export declare const FILTER_SHEET_HEADER_CLASS = "flex-row items-center justify-between gap-2 border-b py-2 pr-2 text-left";
-export declare const FILTER_SHEET_CLOSE_CLASS = "static size-11";
+/**
+ * In the header's flow, not at the corner. `relative`, never `static`: the
+ * button's invisible 44px hit area (`::after`, absolute) is placed against
+ * the nearest positioned ancestor, which for a static button is the whole
+ * sheet, so it covered the sections and swallowed a tap on their headers (#1733).
+ */
+export declare const FILTER_SHEET_CLOSE_CLASS = "relative top-auto right-auto size-11";
 export declare const FILTER_SHEET_LOCKED_CLASS = "flex flex-wrap items-center gap-2 border-b px-4 py-3";
 /**
  * The sections, each a FacetGroup. Every row is a 44px target (WCAG 2.5.5):

package/dist/lib/components/ui/collections/page-footer/page-footer.d.ts

@@ -27,6 +27,11 @@ export type PageFooterProps = {
     live?: boolean;
     /** Makes Previous and Next inert (a feed that is loading). */
     disabled?: boolean;
+    /** Renders nothing when there is a single page: no previous page and no
+     * next page. Default `false` (the footer shows its range, "1–5 of 5").
+     * The range is then not on screen: say the count elsewhere (a status
+     * line, a heading) or keep the footer. */
+    hideOnSinglePage?: boolean;
     /** Your router's link; it must forward `className` and `ref`. */
     linkComponent?: DataTableLinkComponent;
 } & Omit<ComponentProps<'div'>, 'children'>;
@@ -37,4 +42,4 @@ export type PageFooterProps = {
  * `ServerTable` draws. Renders nothing for an empty result. Without a
  * `totalCount` (a cursor feed with no total) it is the Previous / Next alone.
  */
-export declare function PageFooter({ pageInfo, totalCount, params, pageSize, count, pageHref, pagingNames, pageControls, live, disabled, linkComponent, className, ...props }: PageFooterProps): import("react").JSX.Element | null;
+export declare function PageFooter({ pageInfo, totalCount, params, pageSize, count, pageHref, pagingNames, pageControls, live, disabled, hideOnSinglePage, linkComponent, className, ...props }: PageFooterProps): import("react").JSX.Element | null;

package/dist/lib/components/ui/collections/row-menu/row-menu-trigger.d.ts

@@ -11,6 +11,9 @@ export type RowMenuTriggerProps = Omit<IconButtonProps, 'children' | 'tooltip' |
  * The "..." button of a row: a ghost `IconButton` with an ellipsis, named
  * after its row. It is 44px on a coarse pointer (and below `md`), 36px with a
  * fine pointer from `md` up. It forwards its props and its `ref`, so it works
- * as the child of a `DropdownMenuTrigger asChild`.
+ * as the child of a `DropdownMenuTrigger asChild`. `loading` (as `Button`'s)
+ * marks it busy while an action chosen from its menu runs: `aria-busy`, a
+ * spinner in place of the dots, the same size, the focus kept, and the menu
+ * does not reopen until it is over.
  */
-export declare function RowMenuTrigger({ label, className, 'aria-label': ariaLabel, ...props }: RowMenuTriggerProps): import("react").JSX.Element;
+export declare function RowMenuTrigger({ label, loading, onPointerDown, onKeyDown, className, 'aria-label': ariaLabel, ...props }: RowMenuTriggerProps): import("react").JSX.Element;

package/dist/lib/components/ui/collections/row-menu/row-menu.d.ts

@@ -33,7 +33,7 @@ export type RowMenuProps = {
 };
 /**
  * A row's actions menu: `RowMenuTrigger` and a `DropdownMenu` aligned to the
- * end of it. Its items are 44px high on a coarse pointer, and the destructive
+ * end of it. Every item of its menu, `children` too, is 44px high on a coarse pointer, and the destructive
  * ones come last, after a separator. Focus returns to the trigger when the
  * menu closes, and when a dialog opened from an item closes.
  */

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

@@ -1,3 +1,3 @@
-export { defineFilterModel, type FilterCodecOptions, type FilterCondition, type FilterLockedCondition, type FilterModel, type FilterQuery, parseFilterQuery, serializeFilterQuery, } from '@nxgt/material-core/filter';
+export { defineFilterModel, effectiveConditions, type FilterCodecOptions, type FilterCondition, type FilterFieldError, type FilterFieldErrors, type FilterLockedCondition, type FilterModel, type FilterQuery, type FilterSplitErrors, parseFilterQuery, serializeFilterQuery, splitFilterErrors, } from '@nxgt/material-core/filter';
 export { type CursorConnection, createSorting, FIRST_PAGE, firstPage, isFiltered, isNewQuery, nextPage, type PageCursor, type PagingNames, pagingNames, paramsFromQuery, previousPage, queryFromParams, queryKey, type RouterQuery, readCursor, type ServerPagination, type ServerPaginationOptions, type SortingOptions, serverPagination, type TableFilterBinding, type TableFilterOptions, type TableSort, type TableSorting, tableFilters, withoutFilters, } from '@nxgt/material-core/table-url';
 export * from './server-table.js';

package/dist/lib/components/ui/collections/server-table/partials/server-table-empty-chips.d.ts

@@ -1,8 +1,10 @@
 /**
  * "Nothing matches": the user's filters that narrow the list, as chips
  * removed by their ✕ (a kept field, a widening switch such as "Show archived" or a scope such as the period, is not
- * one, a locked condition stays in the band), then "Clear all" while two
- * or a search remain. A removal focuses the next chip, then "Clear all",
+ * one, a locked condition stays in the band), then "Clear all" (worded by
+ * `empty.clear`) whenever a chip or a search remains. A removal focuses the next chip, then "Clear all",
  * then the search (the core's `focusAfterRemove`, from `empty`).
  */
-export declare function ServerTableEmptyChips(): import("react").JSX.Element | null;
+export declare function ServerTableEmptyChips({ clear }: {
+    clear?: string;
+}): import("react").JSX.Element | null;

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

@@ -0,0 +1,17 @@
+import { PagingNames } from '@nxgt/material-core/table-url';
+/** The footer and paging props of `ServerTable`, apart from the page's data. */
+export type ServerTablePagingProps = {
+    /** How the footer's Previous and Next are drawn: `'labelled'` (default) or
+     * `'icon'`, icon-only buttons with a tooltip and a name that says the page
+     * ("Previous page"); a page given as an href stays a link. */
+    pageControls?: 'labelled' | 'icon';
+    /** Hides the footer's range and Previous / Next when the result is a single
+     * page (no previous page, no next page). Default `false`. The count is
+     * still announced by the live region, but no longer shown: show it in the
+     * `description` or keep the footer. A selection's "N rows selected" stays. */
+    hideOnSinglePage?: boolean;
+    /** A page's href. Default ``(params) => `?${params}` ``. */
+    pageHref?: (params: URLSearchParams) => string;
+    /** The cursor's search param names. Default `after` and `trail`. */
+    pagingNames?: Partial<PagingNames>;
+};

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

@@ -1,7 +1,7 @@
 import { FilterDefaults, FilterFieldErrors, FilterLockedCondition, FilterModel } from '@nxgt/material-core/filter';
 import { IconStyleInput } from '@nxgt/material-core/icons';
 import { ErrorStateKind } from '@nxgt/material-core/states';
-import { PagingNames, TableFilterBinding, TableSorting } from '@nxgt/material-core/table-url';
+import { TableFilterBinding, TableSorting } from '@nxgt/material-core/table-url';
 import { RowData } from '@tanstack/react-table';
 import { ReactNode, Ref } from 'react';
 import { StateHeadingLevel } from '../../feedback/state-frame/state-frame.js';
@@ -9,6 +9,7 @@ import { DataTableProps } from '../data-table/types.js';
 import { FilterBarFieldProps, FilterQueryProps } from '../filter/internal.js';
 import { ListEmptyContent } from '../list-empty/list-empty.js';
 import { ServerTableBulkAction } from './bulk-action.js';
+import { ServerTablePagingProps } from './types-paging.js';
 /** What a bulk action can do to the selection once it acted. */
 export type ServerTableSelection = {
     /** Empties the selection; the table takes the focus the toolbar had. */
@@ -123,7 +124,7 @@ export type ServerTableFilterHandle = {
 };
 /** 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' | 'enableRowSelection' | 'rowSelectionDisabledReason'>;
-export type ServerTableProps<T extends RowData> = PassedThrough<T> & {
+export type ServerTableProps<T extends RowData> = PassedThrough<T> & ServerTablePagingProps & {
     /** The URL's search params, as the router reads them. */
     params: URLSearchParams;
     /** The router's setter, called with new search params: React Router's
@@ -172,10 +173,6 @@ export type ServerTableProps<T extends RowData> = PassedThrough<T> & {
      * half the room above and under it (a list under a sticky app bar). The
      * controls keep their size (the Filter's `density` is theirs). */
     bandDensity?: 'comfortable' | 'compact';
-    /** How the footer's Previous and Next are drawn: `'labelled'` (default) or
-     * `'icon'`, icon-only buttons with a tooltip and a name that says the page
-     * ("Previous page"); a page given as an href stays a link. */
-    pageControls?: 'labelled' | 'icon';
     /** With `filter`: a handle to focus the Filter's first control, for the
      * app to move the focus there (after its own action). */
     filterRef?: Ref<ServerTableFilterHandle>;
@@ -191,10 +188,6 @@ export type ServerTableProps<T extends RowData> = PassedThrough<T> & {
      * across pages, and a new query empties the selection. Which rows can be
      * is `enableRowSelection`; why one cannot, `rowSelectionDisabledReason`. */
     bulkActions?: ((ids: string[], selection: ServerTableSelection) => ReactNode) | readonly ServerTableBulkAction<T>[];
-    /** A page's href. Default ``(params) => `?${params}` ``. */
-    pageHref?: (params: URLSearchParams) => string;
-    /** The cursor's search param names. Default `after` and `trail`. */
-    pagingNames?: Partial<PagingNames>;
     /** Without `filter`: what the live region says once a new query is
      * answered. Default "N results" (`material.server-table.results`). */
     resultsLabel?: (count: number) => string;

package/dist/lib/components/ui/dates/duration-field/partials/use-duration-box.d.ts

@@ -18,10 +18,10 @@ export declare function useDurationBox({ disabled, ...values }: Model): {
         labels: {
             hour: string;
             minute: string;
+            period: string;
             day: string;
             month: string;
             year: string;
-            period: string;
         };
         placeholders: Record<import('../../../primitives/segmented-input/segment-defs.js').SegmentKey, string>;
         periodNames: [string, string];

package/dist/lib/components/ui/display/badge/badge.d.ts

@@ -3,7 +3,7 @@ import { ComponentProps, ReactNode } from 'react';
 import { IconName } from '../../primitives/icon/icon.js';
 import { Tone } from '../../tones.js';
 declare const badgeVariants: (props?: ({
-    variant?: "secondary" | "success" | "info" | "warning" | "error" | "default" | "outlined" | "soft" | null | undefined;
+    variant?: "secondary" | "success" | "info" | "warning" | "error" | "default" | "soft" | "outlined" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /** The tone of a `soft` or `outlined` badge: a named tone or one the app declared in `AppTones`. */
 export type BadgeTone = Tone;

package/dist/lib/components/ui/display/day-separator/day-separator.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import { ComponentProps, ReactNode } from 'react';
 import { DayInput } from './day-label.js';
 declare const daySeparatorVariants: (props?: ({
-    variant?: "pill" | "line" | null | undefined;
+    variant?: "line" | "pill" | null | undefined;
     sticky?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type DaySeparatorProps = Omit<ComponentProps<'div'>, 'children'> & VariantProps<typeof daySeparatorVariants> & {

package/dist/lib/components/ui/feedback/step-up-dialog/partials/step-up-body.d.ts

@@ -1,15 +1,17 @@
-import { ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import { StepUpDialogProps } from '../types.js';
-type Props = Pick<StepUpDialogProps, 'via' | 'requestError' | 'confirming' | 'attemptsLeft' | 'locked' | 'error' | 'retryAfter' | 'pending' | 'onSubmit' | 'onResend' | 'resent' | 'length' | 'allowRecovery' | 'icons'> & {
+import { StepUpRequestError } from './step-up-request-error.js';
+type Props = Pick<StepUpDialogProps, 'via' | 'requestError' | 'confirming' | 'attemptsLeft' | 'locked' | 'error' | 'retryAfter' | 'pending' | 'onSubmit' | 'onResend' | 'resent' | 'length' | 'allowRecovery' | 'autoFocus' | 'icons'> & {
     formId: string;
     labels: NonNullable<StepUpDialogProps['labels']>;
     /** What is said instead of the field (requesting, confirming). */
     statusText: ReactNode;
+    retry: Omit<ComponentProps<typeof StepUpRequestError>, 'requestError'>;
 };
 /**
  * What sits between the title and the footer: the code form, or, when it is
  * not there (a code still being requested, a request that failed, an
  * accepted code), the status line or the alert that replaces it.
  */
-export declare function StepUpBody({ via, requestError, confirming, formId, labels, statusText, icons, ...code }: Props): import("react").JSX.Element;
+export declare function StepUpBody({ via, requestError, confirming, formId, labels, statusText, icons, retry, ...code }: Props): import("react").JSX.Element;
 export {};

package/dist/lib/components/ui/feedback/step-up-dialog/partials/step-up-request-error.d.ts

@@ -0,0 +1,15 @@
+import { FocusEvent, ReactNode, RefObject } from 'react';
+type Props = {
+    requestError: ReactNode;
+    /** The "Retry" button is drawn only with a handler. */
+    onRetry?: () => void;
+    retryLabel: string;
+    retrying: boolean;
+    /** Retries that finished: a new key tells the live region again, even for the same text. */
+    settled: number;
+    retryRef: RefObject<HTMLButtonElement | null>;
+    onRetryBlur: (event: FocusEvent) => void;
+};
+/** The alert that replaces the field when the code could not be requested, with "Retry" when the host offers it. */
+export declare function StepUpRequestError({ requestError, onRetry, retryLabel, retrying, settled, retryRef, onRetryBlur, }: Props): import("react").JSX.Element;
+export {};

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

@@ -7,10 +7,13 @@ import { StepUpDialogProps } from './types.js';
  * `error`, `pending`, `resent`, `onSubmit`, `onResend`), which the app
  * wires to its own model.
  *
- * The title takes the focus on open and whenever the field goes (a code
+ * The title takes the focus on open (unless `autoFocus` sends it to the
+ * field) and whenever the field goes (a code
  * being requested, a code accepted); the field takes it after a refusal; on
  * close it goes back to what opened the dialog. Escape, a click outside and
  * Cancel call `onCancel`, except while `confirming`. A locked code leaves
- * Cancel usable.
+ * Cancel usable. A failed code request (`requestError`) offers "Retry" when
+ * `onRetry` is set: the focus stays on it while it runs and goes to the
+ * field once the request succeeds.
  */
-export declare function StepUpDialog({ open, onCancel, cancelVariant, via, destination, requestError, confirming, confirmedLabel, title, description, labels: labelOverrides, icons, ...code }: StepUpDialogProps): import("react").JSX.Element;
+export declare function StepUpDialog({ open, onCancel, cancelVariant, via, destination, requestError, onRetry, confirming, confirmedLabel, title, description, labels: labelOverrides, icons, ...code }: StepUpDialogProps): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/step-up-dialog/types.d.ts

@@ -19,8 +19,10 @@ export type StepUpDialogLabels = {
     cancel: string;
     /** Said once the code was accepted and the host finishes its action. */
     confirmed: string;
+    /** The "Retry" button of a failed code request (see `onRetry`). */
+    retry: string;
 };
-export type StepUpDialogProps = Pick<VerificationCodeProps, 'attemptsLeft' | 'locked' | 'error' | 'retryAfter' | 'pending' | 'onSubmit' | 'onResend' | 'resent' | 'length' | 'allowRecovery'> & {
+export type StepUpDialogProps = Pick<VerificationCodeProps, 'attemptsLeft' | 'locked' | 'error' | 'retryAfter' | 'pending' | 'onSubmit' | 'onResend' | 'resent' | 'length' | 'allowRecovery' | 'autoFocus'> & {
     open: boolean;
     /**
      * Escape, a click outside and Cancel call it, except while `confirming`.
@@ -38,6 +40,15 @@ export type StepUpDialogProps = Pick<VerificationCodeProps, 'attemptsLeft' | 'lo
     destination?: ReactNode;
     /** The request for a code failed; shown as an alert in place of the field. */
     requestError?: ReactNode;
+    /**
+     * Draws a "Retry" button in the `requestError` alert. Pressing it calls
+     * this; while the returned promise is pending the button is busy and keeps
+     * the focus. Answer by clearing `requestError` and setting `via` (the code
+     * field takes the focus) or by setting a new `requestError` (the focus
+     * stays on "Retry" and the new text is announced). Left out, the alert
+     * has no button.
+     */
+    onRetry?: () => unknown;
     /**
      * The code was accepted and the host re-runs its action: the field goes,
      * a status line shows `labels.confirmed` and Cancel is disabled until the

package/dist/lib/components/ui/feedback/step-up-dialog/use-retry-focus.d.ts

@@ -0,0 +1,27 @@
+import { RefObject } from 'react';
+type Input = {
+    open: boolean;
+    fieldShown: boolean;
+    requestError: unknown;
+    confirming: boolean;
+    formId: string;
+    titleRef: RefObject<HTMLElement | null>;
+};
+/**
+ * Where the focus goes around a "Retry": it stays on the button while the
+ * retry runs and when the request fails again (the button may be taken away
+ * and put back by the host meanwhile, the title holding the focus in the
+ * gap), and goes to the code field once the request succeeds. Only after a
+ * press of "Retry", and only while the focus is still free (the page, the
+ * dialog itself, the title or the button): a focus the user moved elsewhere is left alone.
+ */
+export declare function useRetryFocus({ open, fieldShown, requestError, confirming, formId, titleRef, }: Input): {
+    retryRef: RefObject<HTMLButtonElement | null>;
+    /** On "Retry": the focus it holds is followed from here on. */
+    arm: () => void;
+    /** On the button's blur: a focus that went to another control is not ours any more. */
+    release: (event: {
+        relatedTarget: EventTarget | null;
+    }) => void;
+};
+export {};

package/dist/lib/components/ui/feedback/step-up-dialog/use-retry.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The retry of a failed code request: `run` calls the host's `onRetry` and
+ * stays `retrying` until what it returned settles (a thrown or rejected
+ * retry is the host's to show as a new `requestError`). `settled` counts the
+ * retries that finished, so the alert is told again, even for the same text.
+ */
+export declare function useRetry(onRetry: (() => unknown) | undefined): {
+    retrying: boolean;
+    settled: number;
+    run: () => Promise<void>;
+};