@nxgt/material 3.85.1 → 3.86.1

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

@@ -1,5 +1,5 @@
 import { AppSearchBarProps } from '../app-search/app-search.types.js';
-import { ShellHeaderOptions, ShellHeaderVariant, ShellNavigation, ShellNavigationOptions } from './activity-layout-navigation.types.js';
+import { ShellHeaderAlign, ShellHeaderOptions, ShellHeaderSize, ShellHeaderVariant, ShellNavigation, ShellNavigationOptions } from './activity-layout-navigation.types.js';
 /** What the shell draws today, and what an unset `navigation` resolves to. */
 export declare const DEFAULT_NAVIGATION: {
     readonly phone: "modal-drawer";
@@ -14,7 +14,12 @@ export type ResolvedNavigation = {
     persistKey?: string;
 };
 export type ResolvedHeader = {
-    variant: ShellHeaderVariant;
+    /** The bar's size; `'none'` when no header is drawn. */
+    size: ShellHeaderSize | 'none';
+    /** Where the title sits. */
+    align: ShellHeaderAlign;
+    /** The old spelling of `size` and `align`, kept for what still reads it. */
+    variant: 'small' | 'center' | 'medium' | 'large' | 'none';
     collapse: boolean;
     hideOnScroll: boolean;
     tabs: ShellHeaderOptions['tabs'];

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

@@ -8,6 +8,28 @@ export type ShellScrollState = {
     /** Whether the user asked for reduced motion: skip the slide and snap. */
     reducedMotion: boolean;
 };
+/**
+ * A scroll state that can be followed without rendering: `get` the latest,
+ * `subscribe` to every change. A bar that restyles itself per scroll frame
+ * (a collapse, a tint) reads this and writes to the DOM, so it never
+ * re-renders for a frame of scrolling.
+ */
+export type ShellScrollStore = {
+    get: () => ShellScrollState;
+    subscribe: (listener: (state: ShellScrollState) => void) => () => void;
+};
+/** Where a tracker publishes each new state; {@link createScrollStore} makes one. */
+export type ShellScrollPublisher = {
+    publish: (state: ShellScrollState) => void;
+};
+/** A {@link ShellScrollStore} holding `IDLE` until `publish` is called. */
+export declare function createScrollStore(): ShellScrollStore & {
+    publish: (state: ShellScrollState) => void;
+};
+/** The store {@link ShellScrollProvider} provides; `null` outside one (idle). */
+export declare const ShellScrollStoreContext: import('react').Context<ShellScrollStore | null>;
+/** The shell's scroll store, or `null` outside a provider. */
+export declare function useShellScrollStore(): ShellScrollStore | null;
 /** The shell's scroll state; idle outside a {@link ShellScrollProvider}. */
 export declare const ShellScrollContext: import('react').Context<ShellScrollState>;
 /** The shell's scroll direction and offset, for a header or bar that hides on scroll. */
@@ -25,7 +47,7 @@ export type ShellScrollOptions = {
  * only after `threshold` px of movement the other way (hysteresis). Idle on
  * the server and until mounted.
  */
-export declare function useScrollTracker({ container, threshold, enabled, }?: ShellScrollOptions): ShellScrollState;
+export declare function useScrollTracker({ container, threshold, enabled }?: ShellScrollOptions, publisher?: ShellScrollPublisher): ShellScrollState;
 /** Provides {@link useShellScroll} for one scroller (the window, or `container`). */
 export declare function ShellScrollProvider({ children, ...options }: ShellScrollOptions & {
     children: ReactNode;

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

@@ -0,0 +1,10 @@
+import { ShellTopAppBarProps } from './shell-top-app-bar.types.js';
+export type { ShellTopAppBarProps } from './shell-top-app-bar.types.js';
+/**
+ * The shell's bar, drawn with {@link TopAppBar}: the menu (a phone's burger,
+ * leading the bar) and the back arrow, the titles, the search, the actions
+ * and the account. `ActivityLayout` draws it as the page's `<header>`
+ * (banner); {@link useHeaderScroll} drives its collapse, its scrolled tint
+ * and its slide away.
+ */
+export declare function ShellTopAppBar({ className, size: sizeProp, align, collapse, hideOnScroll, title, titleId, subtitle, titleAfter, headline, tabs, search, actions, primaryAction, avatar, as, headerTitle, children, ...leading }: ShellTopAppBarProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/app-shell/shell-top-app-bar.parts.d.ts

@@ -0,0 +1,58 @@
+import { ReactNode, RefObject } from 'react';
+import { TopAppBarSize } from '../app-bar/top-app-bar/top-app-bar.types.js';
+import { ShellTopAppBarProps } from './shell-top-app-bar.types.js';
+/** The shell's bar keeps the `data-slot` names it always had (a planned rename waits for the next major). */
+export declare const SLOT_NAMES: {
+    readonly title: "app-header-page-title";
+    readonly titleBlock: "app-header-page-title-row";
+    readonly subtitle: "app-header-context";
+    readonly headline: "app-header-headline";
+    readonly collapsedTitle: "app-header-collapsed-title";
+    readonly tabs: "app-header-tabs";
+};
+/**
+ * The attributes the shell's bar carries for its state: the tabs, the
+ * collapse, the slide away (with tabs the bar stays on screen, so only its rows
+ * go inert), and the `data-variant` develop drew on a small bar that hides or
+ * has tabs (a plain small bar had none).
+ */
+export declare function barState({ size, align, hideOnScroll, collapses, hidden, hasTabs, }: {
+    size: TopAppBarSize;
+    align: 'start' | 'center';
+    hideOnScroll: boolean;
+    collapses: boolean;
+    hidden: boolean;
+    hasTabs: boolean;
+}): {
+    'data-collapsible': true | undefined;
+    'data-hidden': true | undefined;
+    inert: true | undefined;
+    'data-variant'?: string | undefined;
+    'data-tabs': true | undefined;
+};
+/** The tab row at the foot of the bar: its height is `--nxgt-header-tabs` (app-header.css). */
+export declare function HeaderTabs({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+type LeadingProps = Pick<ShellTopAppBarProps, 'back' | 'items' | 'linkComponent' | 'brand' | 'logo' | 'name' | 'context' | 'menuOpen' | 'onMenuOpenChange' | 'showMenuIcon' | 'topNav'>;
+/** The start of the row: the back arrow, the phone's menu button, the top navigation and the leading title. */
+export declare function ShellBarLeading({ back, items, linkComponent, brand, logo, name, context, menuOpen, onMenuOpenChange, showMenuIcon, topNav, }: LeadingProps): import("react").JSX.Element;
+/**
+ * What the bar derives from its options and the shell's scroll: the size it
+ * draws (a medium or large one without a title is a small one), whether it
+ * collapses, whether it has slid away, and the hooks that drive it.
+ */
+export declare function useShellBarState(bar: RefObject<HTMLElement | null>, { size: sizeProp, collapse, hideOnScroll, titled, tabs, }: {
+    size: TopAppBarSize;
+    collapse: boolean;
+    hideOnScroll: boolean;
+    titled: boolean;
+    tabs: ReactNode;
+}): {
+    size: TopAppBarSize;
+    collapses: boolean;
+    hidden: boolean;
+    hasTabs: boolean;
+    named: boolean;
+};
+export {};

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

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { TopAppBarAlign, TopAppBarPrimaryAction, TopAppBarSize } from '../app-bar/top-app-bar/top-app-bar.types.js';
+import { AppHeaderProps } from './app-header.js';
+export type ShellTopAppBarProps = Omit<AppHeaderProps, 'variant' | 'headline' | 'children'> & {
+    /** The bar's size. @default 'small' */
+    size?: TopAppBarSize;
+    /** Where a small bar puts its title. @default 'start' */
+    align?: TopAppBarAlign;
+    /** The page's heading, the bar's one `h1`. */
+    title?: ReactNode;
+    titleId?: string;
+    /** The muted line under the title (the tenant); hidden on a phone, where the menu sheet carries it. */
+    subtitle?: ReactNode;
+    /** Right after the title, outside the `h1`. */
+    titleAfter?: ReactNode;
+    /** The leading title (the active organisation), beside the menu; not a heading. */
+    headerTitle?: ReactNode;
+    /** The screen's main action: a `Button` from 768 px, a `Fab` on a phone. */
+    primaryAction?: TopAppBarPrimaryAction;
+    /** The deprecated `headline` of `AppHeader`: a title in a non-heading element. */
+    headline?: ReactNode;
+    /** `'header'` (the shell's bar, the page's banner) or `'div'`. @default 'header' */
+    as?: 'header' | 'div';
+    /** After the titles, before the actions. */
+    children?: ReactNode;
+};

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

@@ -1,19 +1,26 @@
 import { RefObject } from 'react';
-/** The CSS variable app-header.css reads: 0 expanded, 1 collapsed. */
+/** The CSS variable top-app-bar-collapse.css reads: 0 expanded, 1 collapsed. */
 export declare const PROGRESS_VAR = "--nxgt-header-progress";
+/** The CSS variable holding the headline row's measured height, in px. */
+export declare const EXTRA_VAR = "--nxgt-header-extra";
 /**
- * Drives an app bar from the shell's scroll ({@link useShellScroll}, the
- * window or the content region): how far its headline has collapsed, set as a
- * CSS variable on the element (never an inline style string), and whether it
- * has slid away. Idle (expanded, shown) on the server, outside a provider and
- * before mount. Focus inside a bar that goes away moves out and comes back ({@link useFocusWhileHidden}).
+ * Drives an app bar from the shell's scroll ({@link useShellScrollStore}, the
+ * window or the content region): how far its headline has collapsed, whether
+ * the page has scrolled at all, and whether the bar has slid away.
+ *
+ * The collapse and the scrolled tint are written straight to the element
+ * (`--nxgt-header-progress` through the CSSOM, `data-scrolled` as an
+ * attribute), so a frame of scrolling renders nothing; only `hidden`, which
+ * changes rarely, is React state. The collapse takes the headline row's
+ * measured height (`--nxgt-header-extra`, kept current by a
+ * `ResizeObserver`); `range` is the height used until it is measured. Under
+ * reduced motion the collapse snaps. Idle (expanded, not scrolled, shown) on
+ * the server, outside a provider and before mount. Focus inside a bar that goes away moves out and comes back ({@link useFocusWhileHidden}).
  */
 export declare function useHeaderScroll(ref: RefObject<HTMLElement | null>, { range, hideOnScroll, }: {
-    /** Px of scroll the collapse takes; 0: the bar does not collapse. */
+    /** Px of scroll the collapse takes before the headline is measured; 0: the bar does not collapse. */
     range: number;
     hideOnScroll: boolean;
 }): {
-    progress: number;
     hidden: boolean;
-    collapsed: boolean;
 };

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

@@ -15,6 +15,6 @@ export declare function useShellBack(): ShellBack | undefined;
  * `data-header-tabs`.
  */
 export declare function useHeaderRootAttributes(header?: ShellHeaderInput): {
-    'data-header': import('./activity-layout-navigation.types.js').ShellHeaderVariant | undefined;
+    'data-header': "center" | "small" | "none" | "medium" | "large" | undefined;
     'data-header-tabs': string | undefined;
 };

package/dist/lib/components/ui/primitives/tabs/tabs-press.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Tells a mouse press from keyboard focus. A press focuses the tab on
+ * mousedown; revealing it then moves it from under the pointer before the
+ * release and the click is lost (#2539). So `pressed()` is true from the
+ * pointer going down to it going up (the focus reveal is skipped), and the
+ * tab is revealed on its click instead.
+ */
+export declare function trackPress(list: HTMLElement, tabSelector: string, reveal: (tab: HTMLElement) => void): {
+    pressed: () => boolean;
+    dispose(): void;
+};

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

@@ -1537,6 +1537,10 @@ export declare const en: {
             badge: string;
             "badge-dot": string;
         };
+        "top-app-bar": {
+            account: string;
+            more: string;
+        };
         "app-header": {
             back: string;
             "back-to": string;

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

@@ -1527,6 +1527,10 @@ declare const _default: {
 		"badge": "{count} new",
 		"badge-dot": "new activity"
 	},
+	"top-app-bar": {
+		"account": "Account menu",
+		"more": "More"
+	},
 	"app-header": {
 		"back": "Back",
 		"back-to": "Back to {label}",

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

@@ -1537,6 +1537,10 @@ export declare const fr: {
             badge: string;
             "badge-dot": string;
         };
+        "top-app-bar": {
+            account: string;
+            more: string;
+        };
         "app-header": {
             back: string;
             "back-to": string;

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

@@ -1527,6 +1527,10 @@ declare const _default: {
 		"badge": "{count, plural, one {# nouveauté} other {# nouveautés}}",
 		"badge-dot": "nouveauté"
 	},
+	"top-app-bar": {
+		"account": "Menu du compte",
+		"more": "Plus"
+	},
 	"app-header": {
 		"back": "Retour",
 		"back-to": "Retour à {label}",

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

@@ -1535,6 +1535,10 @@ export declare const resources: {
                 badge: string;
                 "badge-dot": string;
             };
+            "top-app-bar": {
+                account: string;
+                more: string;
+            };
             "app-header": {
                 back: string;
                 "back-to": string;
@@ -5052,6 +5056,10 @@ export declare const resources: {
                 badge: string;
                 "badge-dot": string;
             };
+            "top-app-bar": {
+                account: string;
+                more: string;
+            };
             "app-header": {
                 back: string;
                 "back-to": string;