@nxgt/material 3.36.0 → 3.38.0

package/dist/lib/components/ui/layout/app-shell/activity-layout.types.d.ts

@@ -32,6 +32,23 @@ export type ActivityLayoutProps = {
      * `handle.title`), which it then sits beside.
      */
     headerTitle?: ReactNode;
+    /**
+     * A node rendered right after the page's title in the app bar (a record's
+     * `Switcher`), outside the `h1` so the heading's name stays the plain
+     * title. It stays on screen on a phone and shares the row with the title,
+     * which truncates first. Wins over a route's `handle.titleAfter`; ignored
+     * while the bar shows no page title (no `handle.title`).
+     */
+    titleAfter?: ReactNode;
+    /**
+     * A small, muted context line (the tenant's name) after the page's title in
+     * the app bar, from `md` up: outside the `h1`, truncated, its full text the
+     * `title` tooltip once cut off (#629). Not shown on a phone, where the menu
+     * sheet's `context` carries the line; independent of `context`, so setting
+     * one never duplicates the other. Ignored while the bar shows no page title
+     * (`headerTitle` is the context line then).
+     */
+    headerContext?: ReactNode;
     /**
      * Whether the breadcrumb trail shows. `false` hides it, for an error page
      * whose matched routes would show a misleading trail. The trail is also
@@ -40,7 +57,7 @@ export type ActivityLayoutProps = {
      * @default true
      */
     breadcrumb?: boolean;
-    /** The breadcrumb's first crumb, a text link in place of the home icon. */
+    /** The breadcrumb's first crumb: a text link, or (`icon: true`) the home icon alone with its own target and name. */
     breadcrumbRoot?: AppBreadcrumbRoot;
     /** Passed to the header, before the avatar. */
     headerActions?: ReactNode;

package/dist/lib/components/ui/layout/app-shell/app-breadcrumb.d.ts

@@ -14,17 +14,33 @@ export declare function AppBreadcrumbItem({ to, children, last, ...props }: AppB
 export type AppBreadcrumbSeparatorProps = Omit<ComponentProps<typeof BreadcrumbSeparator>, 'children'>;
 export declare function AppBreadcrumbSeparator({ className, ...props }: AppBreadcrumbSeparatorProps): import("react").JSX.Element;
 /** The trail's first crumb, in place of the home icon: a text link. */
-export type AppBreadcrumbRoot = {
+export type AppBreadcrumbTextRoot = {
     /** The crumb's text, already translated (a tenant's or an organisation's name). */
     label: ReactNode;
     /** Where it links, through the router's `basename` like every crumb. */
     to: string;
+    icon?: false;
 };
+/** The trail's first crumb, the home icon alone, with its own target and name. */
+export type AppBreadcrumbIconRoot = {
+    /**
+     * The icon link's accessible name and its tooltip, already translated
+     * ("Home - Example Org"): a string, since it names an icon.
+     */
+    label: string;
+    /** Where it links, through the router's `basename` like every crumb. */
+    to: string;
+    /** Keeps the house icon in place of a text link. */
+    icon: true;
+};
+/** The trail's first crumb: a text link, or (`icon: true`) the home icon alone. */
+export type AppBreadcrumbRoot = AppBreadcrumbTextRoot | AppBreadcrumbIconRoot;
 export type AppBreadcrumbProps = {
     /**
      * Replaces the home icon with a text root crumb that links to `to`, as the
-     * other parent crumbs do. Without it the trail starts with the home icon
-     * linking to the router's root.
+     * other parent crumbs do; with `icon: true` it keeps the home icon but links
+     * it to `to` and names it `label` (also its tooltip). Without it the trail
+     * starts with the home icon linking to the router's root.
      */
     root?: AppBreadcrumbRoot;
 } & ComponentProps<typeof Breadcrumb>;
@@ -34,7 +50,7 @@ export type AppBreadcrumbProps = {
  * A route opts in by exporting `handle = { breadcrumb: (match) => ... }`;
  * routes without one contribute nothing, so intermediate layouts stay out of
  * the trail, and so does a crumb that renders `null`; with none left the trail
- * is hidden. It starts with a home icon, or with `root`'s text link. Hidden on
+ * is hidden. It starts with a home icon, or with `root`'s text link or custom icon link. Hidden on
  * mobile, where there is no room for it.
  */
 export declare function AppBreadcrumb({ root, className, ...props }: AppBreadcrumbProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/app-shell/header-context.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+/**
+ * The app bar's small muted context line (the tenant), after the page's
+ * title: from `md` up only, truncated with an ellipsis, and only then
+ * carrying a `title` with the full text (#629). The title truncates before
+ * it does (this line never shrinks below its own cap).
+ */
+export declare function HeaderContext({ children }: {
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/app-shell/header-title.d.ts

@@ -16,8 +16,12 @@ export declare function HeaderTitle({ children, shrinks, }: {
  * The app bar's titles: the leading `headerTitle`, then the page's title (a
  * route's `handle.title`, the page's `h1`) after a thin rule when both are set.
  */
-export declare function AppBarTitles({ headerTitle, pageTitle, titleId, }: {
+export declare function AppBarTitles({ headerTitle, pageTitle, pageTitleAfter, headerContext, titleId, }: {
     headerTitle?: ReactNode;
     pageTitle?: ReactNode;
+    /** The slot right after the page's title, outside its `h1`. */
+    pageTitleAfter?: ReactNode;
+    /** The small muted context line after the title, from `md` up. */
+    headerContext?: ReactNode;
     titleId?: string;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/layout/app-shell/page-title.d.ts

@@ -13,6 +13,14 @@ export type PageTitle<Data = unknown> = ReactNode | ((match: UIMatch<Data>) => R
 export type AppShellHandle<Data = unknown> = {
     breadcrumb?: (match: UIMatch<Data>) => ReactNode;
     title?: PageTitle<Data>;
+    /**
+     * A node rendered right after the page's title in the app bar, outside its
+     * `h1` (a record's `Switcher`). A node, or a function of the matched route
+     * returning one, as `title` is. The deepest route declaring one wins; the
+     * `ActivityLayout` `titleAfter` prop wins over it. Ignored while the bar
+     * shows no page title.
+     */
+    titleAfter?: PageTitle<Data>;
 };
 /**
  * The title of the deepest matched route that declares a `handle.title`, or
@@ -20,6 +28,11 @@ export type AppShellHandle<Data = unknown> = {
  * anything: the title is in the server HTML, with no client-side effect.
  */
 export declare function resolvePageTitle(matches: UIMatch[]): ReactNode;
+/**
+ * The `handle.titleAfter` of the deepest matched route that declares one, or
+ * `undefined`: resolved like {@link resolvePageTitle}, from the matches.
+ */
+export declare function resolvePageTitleAfter(matches: UIMatch[]): ReactNode;
 /**
  * The `id` of the page's title in the app bar, or `undefined` when the bar
  * shows none. `ActivityContent` leaves its own large title out while it does
@@ -28,9 +41,11 @@ export declare function resolvePageTitle(matches: UIMatch[]): ReactNode;
  */
 export declare const PageTitleContext: import('react').Context<string | undefined>;
 /** The layout's page title and the `id` its `h1` and `<main>`'s label share. */
-export declare function usePageTitleScope(): {
+export declare function usePageTitleScope(titleAfter?: ReactNode, headerContext?: ReactNode): {
     pageTitle: ReactNode;
     titleId: string | undefined;
+    pageTitleAfter: ReactNode;
+    headerContext: ReactNode;
 };
 /** The part of `document` {@link pageStartTarget} reads. */
 type FocusRoot = Pick<Document, 'getElementById' | 'querySelector'>;
@@ -71,8 +86,12 @@ export declare function usePageTitle(): ReactNode;
  * leading title does, #629); the accessible name is the content itself.
  * The display face is `--font-display`, the body face without it.
  */
-export declare function PageHeading({ children, id, }: {
+export declare function PageHeading({ children, id, after, context, }: {
     children?: ReactNode;
     id?: string;
+    /** The slot right after the title, outside the `h1`: it never truncates, the title does. */
+    after?: ReactNode;
+    /** The small muted context line (the tenant), last in the row, from `md` up. */
+    context?: ReactNode;
 }): import("react").JSX.Element | null;
 export {};

package/dist/lib/components/ui/media/image-cropper/image-cropper.d.ts

@@ -1,3 +1,4 @@
+import { ButtonVariant } from '../../actions/button/button.js';
 import { ImageCropResult, ImageCropShape } from './types.js';
 export type ImageCropperProps = {
     src: string;
@@ -6,6 +7,8 @@ export type ImageCropperProps = {
     fileName?: string;
     onCrop: (result: ImageCropResult) => void;
     onCancel?: () => void;
+    /** The Cancel button's variant. Default `'tonal'`; `'ghost'` restores the earlier look. */
+    cancelVariant?: ButtonVariant;
     className?: string;
 };
-export declare function ImageCropper({ src, aspect: aspectProp, cropShape, fileName, onCrop, onCancel, className, }: ImageCropperProps): import("react").JSX.Element;
+export declare function ImageCropper({ src, aspect: aspectProp, cropShape, fileName, onCrop, onCancel, cancelVariant, className, }: ImageCropperProps): import("react").JSX.Element;

package/dist/lib/components/ui/selection/chip-group-field/chip-group-columns.d.ts

@@ -0,0 +1,3 @@
+import { ChipGroupColumns } from './chip-group-field.types.js';
+/** The grid classes of `columns`: a number is the same at every width. */
+export declare function chipGroupColumnClasses(columns: ChipGroupColumns): string;

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

@@ -1,10 +1,31 @@
 import { ChipSize } from '../../display/chip/chip.variants.js';
 import { ChoiceGroupBase, ChoiceSelection } from '../choice-group/choice-group.types.js';
-import { ChipGroupOption } from './chip-group-field.types.js';
-export type { ChipGroupOption };
-export type ChipGroupFieldProps = ChoiceGroupBase & ChoiceSelection & {
-    options: ChipGroupOption[];
+import { ChipGroupColumns, ChipGroupOption, ChipGroupSection } from './chip-group-field.types.js';
+export type { ChipGroupColumns, ChipGroupOption, ChipGroupSection };
+type ChipGroupFieldBase = ChoiceGroupBase & ChoiceSelection & {
     size?: ChipSize;
+    /**
+     * Lays the chips out in equal-width columns (`4`, or one count per
+     * breakpoint: `{ base: 2, md: 4 }`). Up and Down then move by row. Left
+     * unset, the chips flow and wrap.
+     */
+    columns?: ChipGroupColumns;
+    /**
+     * Prints a disabled option's `disabledReason` under its chip, so a touch
+     * user sees it too. Default `true`; `false` leaves it to the tooltip and
+     * the accessible description.
+     */
+    showDisabledReason?: boolean;
+};
+export type ChipGroupFieldProps = ChipGroupFieldBase & {
+    /** The chips, in one flow. Give `options` or `groups`. */
+    options?: ChipGroupOption[];
+    /**
+     * Titled runs of options in one group: each is a `group` named by its
+     * heading, and the arrow keys run through all of them in order. Wins over
+     * `options` when both are given.
+     */
+    groups?: ChipGroupSection[];
 };
 /**
  * Chips that choose: one (`type="single"`, the default; a `radiogroup` of
@@ -12,6 +33,8 @@ export type ChipGroupFieldProps = ChoiceGroupBase & ChoiceSelection & {
  * (`type="multiple"`; a `group` of `checkbox` chips, arrows move the focus,
  * Space toggles). Enter does nothing, so it never submits a form. A disabled
  * option, or any unchosen one once `max` is reached, stays focusable and
- * says why. The `ref` reaches the chip that holds the tab stop.
+ * says why: a disabled option's `disabledReason` is printed under the chip
+ * and tied to it by `aria-describedby`. `columns` draws an even grid and
+ * `groups` titled sections. The `ref` reaches the chip that holds the tab stop.
  */
 export declare function ChipGroupField(props: ChipGroupFieldProps): import("react").JSX.Element;

package/dist/lib/components/ui/selection/chip-group-field/chip-group-field.types.d.ts

@@ -6,3 +6,20 @@ export type ChipGroupOption = ChoiceOption & {
     /** Shown after the label and added to its accessible name. */
     count?: number;
 };
+/** A titled run of options, such as "Morning" or "Afternoon". */
+export type ChipGroupSection = {
+    /** The heading, and the accessible name of the section's `group`. */
+    label: string;
+    options: ChipGroupOption[];
+};
+/**
+ * Equal-width columns: one number for every width, or one per breakpoint
+ * (`sm` 40rem, `md` 48rem, `lg` 64rem), each holding until the next. Counts
+ * run from 1 to 12.
+ */
+export type ChipGroupColumns = number | {
+    base?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+};

package/dist/lib/components/ui/selection/chip-group-field/partials/chip-group-option.d.ts

@@ -10,13 +10,17 @@ export type ChipGroupChipProps = {
     dataPw: string;
     /** The field's `name`, on every chip: a lookup by name finds the group. */
     name?: string;
+    /** The chips sit in grid cells: each fills its cell and centres its text. */
+    columns?: boolean;
+    /** Print a disabled option's reason under the chip. */
+    showReason?: boolean;
 };
 /**
  * One chip of a `ChipGroupField`: a `Chip` with the group's role (`radio` or
  * `checkbox`), `aria-checked`, and the tab stop. A chosen chip swaps its icon
  * for the chip's own check, so the choice never relies on colour alone. The
- * disabled reason (or the description) is its tooltip, and both are read out
- * through `aria-describedby`.
+ * disabled reason is printed under it (`showReason`, else it is the tooltip),
+ * and the reason and the description are read out through `aria-describedby`.
  */
-export declare function ChipGroupChip({ group, option, index, size, dataPw, name, }: ChipGroupChipProps): import("react").JSX.Element;
+export declare function ChipGroupChip({ group, option, index, size, dataPw, name, columns, showReason, }: ChipGroupChipProps): import("react").JSX.Element;
 export {};

package/dist/lib/components/ui/selection/chip-group-field/partials/chip-group-sections.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { ChipGroupOption, ChipGroupSection } from '../chip-group-field.types.js';
+/**
+ * The titled sections of a `ChipGroupField`: each a `group` named by its
+ * heading, its chips in a wrapping row or the field's grid. The chips keep
+ * the field-wide index, so one arrow-key sequence runs through all of them.
+ */
+export declare function ChipGroupSections({ groupId, sections, gridClasses, renderChip, }: {
+    groupId: string;
+    sections: ChipGroupSection[];
+    gridClasses?: string;
+    renderChip: (option: ChipGroupOption, index: number) => ReactNode;
+}): import("react").JSX.Element[];

package/dist/lib/components/ui/selection/choice-group/choice-key-target.d.ts

@@ -7,4 +7,4 @@ import { ChoiceOption } from './choice-group.types.js';
  * items wrap, as RadioGroup's do. Answers the index the focus moved to,
  * or `null` when it did not move.
  */
-export declare function choiceKeyTarget(event: KeyboardEvent<HTMLElement>, items: (HTMLElement | null)[], options: ChoiceOption[], disabled?: boolean): number | null;
+export declare function choiceKeyTarget(event: KeyboardEvent<HTMLElement>, items: (HTMLElement | null)[], options: ChoiceOption[], disabled?: boolean, grid?: boolean): number | null;

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

@@ -6,6 +6,8 @@ export type ChoiceContext = {
     selection: ChoiceSelection;
     disabled?: boolean;
     max?: number;
+    /** Up and Down move by row, the options being laid out in a grid. */
+    grid?: boolean;
 };
 /**
  * Presses option `index`: a no-op when the group is disabled, or the option

package/dist/lib/components/ui/selection/choice-group/use-choice-group-field.d.ts

@@ -5,7 +5,9 @@ import { ChoiceGroupBase, ChoiceOption, ChoiceSelection } from './choice-group.t
  * left for the root element. The field takes its own props (`options`,
  * `size`, `columns`...) out first and passes the common rest.
  */
-export declare function useChoiceGroupField(props: ChoiceGroupBase<HTMLButtonElement> & ChoiceSelection, options: ChoiceOption[]): {
+export declare function useChoiceGroupField(props: ChoiceGroupBase<HTMLButtonElement> & ChoiceSelection, options: ChoiceOption[], layout?: {
+    grid?: boolean;
+}): {
     group: {
         groupId: string;
         ids: {

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

@@ -8,6 +8,8 @@ type CallerAria = {
 export type UseChoiceGroupOptions<E extends HTMLElement = HTMLElement> = Pick<ChoiceGroupBase<E>, 'label' | 'helperText' | 'error' | 'required' | 'disabled' | 'id' | 'max' | 'min' | 'orientation' | 'ref'> & {
     options: ChoiceOption[];
     selection: ChoiceSelection;
+    /** The items sit in rows and columns: Up and Down move by row. */
+    grid?: boolean;
     /** The caller's own aria props, which win over the generated ones. */
     aria?: CallerAria;
 };

package/dist/lib/components/ui/widgets/event-calendar/event-calendar-events.utils.d.ts

@@ -10,5 +10,15 @@ export declare function toAllDayEvent(event: CalendarEvent, day: Date): Calendar
 export declare function moveEventToDay(event: CalendarEvent, day: Date): CalendarEvent;
 export declare function moveEventToDateTime(event: CalendarEvent, dateTime: Date): CalendarEvent;
 export declare function resizeEventEnd(event: CalendarEvent, end: Date): CalendarEvent;
-export declare function layoutTimedEvents(events: CalendarEvent[], day: Date, startHour: number, endHour: number): LaidOutEvent[];
+/** The shortest an event is drawn, in px: WCAG 2.5.8's 24px target. */
+export declare const MIN_EVENT_HEIGHT = 24;
+/** The minutes an event draws over at least, at `hourHeight` px an hour. */
+export declare function minEventMinutes(hourHeight: number): number;
+/**
+ * Lays the day's timed events out in columns. A short event is drawn at least
+ * `MIN_EVENT_HEIGHT` tall, so it takes the room of `minMinutes` (default: its
+ * real duration): one that would then run into the next in its column gets a
+ * column of its own, and two targets never overlap.
+ */
+export declare function layoutTimedEvents(events: CalendarEvent[], day: Date, startHour: number, endHour: number, minMinutes?: number): LaidOutEvent[];
 export declare function isToday(day: Date, now?: Date): boolean;

package/dist/lib/components/ui/widgets/rich-text-editor/types.d.ts

@@ -1,3 +1,4 @@
+import { ButtonVariant } from '../../actions/button/button.js';
 import { RichTextMentionSuggestion } from '../editor/extensions/mention/mention-items.js';
 import { LegacyFeatureFlags } from '../editor/kit/legacy-flags.js';
 /** The 15 on/off flags of the old editor (`options.features`); the core owns the type. */
@@ -9,6 +10,8 @@ export interface RichTextEditorOptions {
         save?: string;
         cancel?: string;
     };
+    /** The Cancel button's variant. Default `'tonal'`; `'ghost'` restores the earlier look. */
+    cancelVariant?: ButtonVariant;
     /**
      * `@` suggestions: plain names, or `MentionItem`s (the type `MentionList`
      * and `ChatComposer` take). An item inserts its `id` and shows its `label`.

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

@@ -2076,6 +2076,7 @@ export declare const en: {
             "error-hint": string;
             "bulk-action": string;
             "bulk-action-name": string;
+            "bulk-more": string;
         };
         "list-empty": {
             clear: string;

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

@@ -2065,7 +2065,8 @@ declare const _default: {
 		"error": "Could not load the list",
 		"error-hint": "Check your connection, then try again.",
 		"bulk-action": "{label} ({count})",
-		"bulk-action-name": "{label} {count, plural, one {# row} other {# rows}}"
+		"bulk-action-name": "{label} {count, plural, one {# row} other {# rows}}",
+		"bulk-more": "More"
 	},
 	"list-empty": {
 		"clear": "Clear search and filters"

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

@@ -2076,6 +2076,7 @@ export declare const fr: {
             "error-hint": string;
             "bulk-action": string;
             "bulk-action-name": string;
+            "bulk-more": string;
         };
         "list-empty": {
             clear: string;

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

@@ -2065,7 +2065,8 @@ declare const _default: {
 		"error": "Impossible de charger la liste",
 		"error-hint": "Vérifiez votre connexion, puis réessayez.",
 		"bulk-action": "{label} ({count})",
-		"bulk-action-name": "{label} : {count, plural, one {# ligne} other {# lignes}}"
+		"bulk-action-name": "{label} : {count, plural, one {# ligne} other {# lignes}}",
+		"bulk-more": "Plus"
 	},
 	"list-empty": {
 		"clear": "Effacer la recherche et les filtres"

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

@@ -2074,6 +2074,7 @@ export declare const resources: {
                 "error-hint": string;
                 "bulk-action": string;
                 "bulk-action-name": string;
+                "bulk-more": string;
             };
             "list-empty": {
                 clear: string;
@@ -4888,6 +4889,7 @@ export declare const resources: {
                 "error-hint": string;
                 "bulk-action": string;
                 "bulk-action-name": string;
+                "bulk-more": string;
             };
             "list-empty": {
                 clear: string;