@nxgt/material 3.37.0 → 3.39.0

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/primitives/segmented-input/segment-date-time.d.ts

@@ -0,0 +1,13 @@
+import { SegmentDef, SegmentValues } from './segment-defs.js';
+/**
+ * The segments of a date and a time typed side by side: the locale's date
+ * order, then the hours and minutes (and AM / PM on a 12-hour clock).
+ */
+export declare function dateTimeSegments(locale: string, cycle: 12 | 24): SegmentDef[];
+/** The date's and the time's segments of `date` on `cycle` (none when there is none). */
+export declare function dateTimeValuesOf(date: Date | undefined, cycle: 12 | 24): SegmentValues;
+/**
+ * The date and time the segments make, or `undefined` while any of them is
+ * missing or out of its range. The seconds and milliseconds are `base`'s.
+ */
+export declare function dateTimeOf(values: SegmentValues, cycle: 12 | 24, base?: Date): Date | undefined;

package/dist/lib/components/ui/primitives/segmented-input/segment-defs.d.ts

@@ -19,6 +19,12 @@ export type SegmentDef = {
     pad?: boolean;
     /** `false`: ↑ and ↓ stop at the range's ends instead of wrapping. */
     wrap?: boolean;
+    /**
+     * The part of the value a segment belongs to (a date and a time typed
+     * side by side). On a narrow field the parts wrap whole: the time goes
+     * under the date, never half of it.
+     */
+    part?: 'date' | 'time';
 };
 export type SegmentValues = Partial<Record<SegmentKey, number>>;
 /** The date segments of `locale`, in its order, with its separators. */

package/dist/lib/components/ui/primitives/segmented-input/segment-floating.d.ts

@@ -0,0 +1,11 @@
+import { SegmentValues } from './segment-defs.js';
+/** The day, month and year segments of a floating `date`. */
+export declare function floatingDateValuesOf(date: Date | undefined): SegmentValues;
+/** The hour, minute and AM / PM segments of a floating `date` on `cycle`. */
+export declare function floatingTimeValuesOf(date: Date | undefined, cycle: 12 | 24): SegmentValues;
+/** `dateOf` for floating dates: the day the segments make on `base`'s time. */
+export declare function floatingDateOf(values: SegmentValues, base?: Date): Date | undefined;
+/** `timeOf` for floating dates: the time the segments make on `base`'s day. */
+export declare function floatingTimeOf(values: SegmentValues, cycle: 12 | 24, base: Date): Date | undefined;
+/** The date and time the segments make, or `undefined` while one is missing. */
+export declare function floatingDateTimeOf(values: SegmentValues, cycle: 12 | 24, base?: Date): Date | undefined;

package/dist/lib/components/ui/primitives/segmented-input/segment-part.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { SegmentDef } from './segment-defs.js';
+type Indexed = {
+    def: SegmentDef;
+    index: number;
+};
+/**
+ * The segments in runs of one `part` (a date, then a time), each with its
+ * index; segments with no part are runs of one, so they render flat.
+ */
+export declare function partsOf(segments: SegmentDef[]): Indexed[][];
+/** Whether the segments are in parts, which wrap whole onto a second row. */
+export declare const hasParts: (segments: SegmentDef[]) => boolean;
+/** A run of segments that stays on one row: a date, a time. A run with no part renders flat. */
+export declare function SegmentPart({ part, children, }: {
+    part: Indexed[];
+    children: ReactNode;
+}): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+export {};

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/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;
@@ -2289,6 +2290,7 @@ export declare const en: {
             apply: string;
             "no-range": string;
             "type-date": string;
+            "type-date-time": string;
             "type-range": string;
             "select-date": string;
             "select-dates": 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"
@@ -2279,6 +2280,7 @@ declare const _default: {
 		"apply": "Apply",
 		"no-range": "No dates yet",
 		"type-date": "Type the date",
+		"type-date-time": "Type the date and time",
 		"type-range": "Type the dates",
 		"select-date": "Select date",
 		"select-dates": "Select dates",

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;
@@ -2289,6 +2290,7 @@ export declare const fr: {
             apply: string;
             "no-range": string;
             "type-date": string;
+            "type-date-time": string;
             "type-range": string;
             "select-date": string;
             "select-dates": 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"
@@ -2279,6 +2280,7 @@ declare const _default: {
 		"apply": "Appliquer",
 		"no-range": "Aucune date",
 		"type-date": "Saisir la date",
+		"type-date-time": "Saisir la date et l’heure",
 		"type-range": "Saisir les dates",
 		"select-date": "Choisir la date",
 		"select-dates": "Choisir les dates",

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;
@@ -2287,6 +2288,7 @@ export declare const resources: {
                 apply: string;
                 "no-range": string;
                 "type-date": string;
+                "type-date-time": string;
                 "type-range": string;
                 "select-date": string;
                 "select-dates": string;
@@ -4888,6 +4890,7 @@ export declare const resources: {
                 "error-hint": string;
                 "bulk-action": string;
                 "bulk-action-name": string;
+                "bulk-more": string;
             };
             "list-empty": {
                 clear: string;
@@ -5101,6 +5104,7 @@ export declare const resources: {
                 apply: string;
                 "no-range": string;
                 "type-date": string;
+                "type-date-time": string;
                 "type-range": string;
                 "select-date": string;
                 "select-dates": string;