@nxgt/material 3.65.0 → 3.67.0

package/dist/lib/components/ui/primitives/link/router-link.d.ts

@@ -0,0 +1,25 @@
+import { ComponentProps } from 'react';
+import { LinkProps } from 'react-router';
+import { LinkComponent } from './link-component.js';
+export type RouterLinkProps = Pick<LinkProps, 'to' | 'replace' | 'state' | 'target' | 'reloadDocument' | 'preventScrollReset'> & {
+    /**
+     * @deprecated Use ActivityLayout's route transition (React's
+     * `<ViewTransition>`); removed after React Router v9.
+     */
+    viewTransition?: LinkProps['viewTransition'];
+    /** Saves the target instead of opening it: `true`, or the file name. */
+    download?: boolean | string;
+    /**
+     * Renders the link with this component instead of React Router's `Link`;
+     * it wins over `LinkComponentProvider`. It receives `to` as `href`, with
+     * `target`, `download` and the button's classes; `replace`, `state`,
+     * `reloadDocument` and `preventScrollReset` are router-only and not passed.
+     */
+    linkComponent?: LinkComponent;
+};
+export declare const ROUTER_KEYS: ReadonlyArray<keyof RouterLinkProps>;
+export declare function splitLinkProps<P extends RouterLinkProps>(props: P): {
+    link: RouterLinkProps;
+    rest: Omit<P, keyof RouterLinkProps>;
+};
+export declare function ButtonLink({ to, replace, state, reloadDocument, preventScrollReset, viewTransition, linkComponent, ...props }: RouterLinkProps & ComponentProps<'a'>): import("react").JSX.Element;

package/dist/lib/components/ui/primitives/tabs/index.d.ts

@@ -1 +1,3 @@
 export * from './tabs.js';
+export * from './tabs-nav.js';
+export * from './use-tab-param.js';

package/dist/lib/components/ui/primitives/tabs/internal.d.ts

@@ -0,0 +1,2 @@
+export { TABS_OVERFLOW_FADE } from './tabs-overflow-classes.js';
+export { useTabsOverflow } from './use-tabs-overflow.js';

package/dist/lib/components/ui/primitives/tabs/partials/tabs-nav-link.d.ts

@@ -0,0 +1,22 @@
+import { ComponentProps, ReactNode } from 'react';
+import { RouterLinkProps } from '../../link/router-link.js';
+/** What a `TabsNav` tells its links: the current value. */
+export declare const TabsNavCurrent: {
+    Provider: import('react').Provider<string | undefined>;
+    useIsCurrent: (value: string | undefined, current: boolean | undefined) => boolean;
+};
+export type TabsNavLinkProps = RouterLinkProps & Omit<ComponentProps<'a'>, 'href'> & {
+    /** Matched against the `TabsNav`'s `value` to mark this link current. */
+    value?: string;
+    /** Marks this link current (or not), whatever the `TabsNav`'s `value` says. */
+    current?: boolean;
+    /** Shown before the label. */
+    icon?: ReactNode;
+};
+/**
+ * One link of a `TabsNav`, wearing the tab look. The current one carries
+ * `aria-current="page"` and `data-state="active"`. It renders the router's
+ * link (or the `LinkComponentProvider`'s), `to` being the target and
+ * `preventScrollReset` on, so changing tab keeps the scroll position.
+ */
+export declare function TabsNavLink({ value, current, icon, className, children, ...props }: TabsNavLinkProps): import("react").JSX.Element;

package/dist/lib/components/ui/primitives/tabs/tab-param-url.d.ts

@@ -0,0 +1,53 @@
+export type TabValues = readonly [string, ...string[]];
+export type TabParamOptions<V extends TabValues = TabValues> = {
+    /** The search param holding the tab (`tab`). */
+    param?: string;
+    /** The tabs a URL may name, in display order. */
+    values: V;
+    /** The tab shown when the param is absent or unknown (the first value). */
+    defaultValue?: V[number];
+};
+/** The default tab: `defaultValue` when it is one of `values`, else the first. */
+export declare function defaultTab({ values, defaultValue }: TabParamOptions): string;
+/** The param's value if it names a tab, else the default (an unknown value falls back). */
+export declare function resolveTab(raw: string | null, options: TabParamOptions): string;
+/**
+ * The `to` of a tab: the location's path and its other params kept, the param
+ * set to `tab`. The hash is dropped, unless `keepHash` is on: React Router's
+ * `ScrollRestoration` scrolls to a hash even with `preventScrollReset`. The
+ * default tab writes no param, unless `explicitDefault` is on (another param
+ * implies a tab, so the default must be spelled out to stay pickable).
+ */
+export declare function tabHref(location: {
+    pathname: string;
+    search: string;
+    hash: string;
+}, tab: string, options: TabParamOptions & {
+    explicitDefault?: boolean;
+    keepHash?: boolean;
+}): string;
+/**
+ * The ids a tab and its panel carry, stable for tests:
+ * `<prefix>-<value>` and `<prefix>-panel-<value>`. The value must be id-safe
+ * (no spaces); the prefix keeps two tab sets on one page apart.
+ */
+export declare function tabIds(value: string, prefix?: string): {
+    tab: string;
+    panel: string;
+};
+/** True when the two URLs differ by that search param only (the hash is ignored). */
+export declare function onlyParamChanged(current: URL, next: URL, param: string): boolean;
+/** The slice of React Router's `ShouldRevalidateFunctionArgs` that `skipTabChange` reads. */
+export type RevalidateArgs = {
+    currentUrl: URL;
+    nextUrl: URL;
+    defaultShouldRevalidate: boolean;
+    formMethod?: string;
+    actionResult?: unknown;
+};
+/**
+ * `false` for a plain navigation that changed only the tab param; otherwise
+ * `defaultShouldRevalidate`, so a same-URL, fetcher or manual revalidation,
+ * and any submission, still reloads.
+ */
+export declare function shouldSkipTabChange(args: RevalidateArgs, param: string): boolean;

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

@@ -0,0 +1,22 @@
+import { ComponentProps, ReactNode } from 'react';
+import { TabsNavLink } from './partials/tabs-nav-link.js';
+import { TabsLook } from './tabs-classes.js';
+export type { TabsNavLinkProps } from './partials/tabs-nav-link.js';
+export type TabsNavProps = Omit<ComponentProps<'nav'>, 'aria-label'> & {
+    /** Names the navigation for assistive technology ("Account sections"). */
+    'aria-label': string;
+    /** The current link's `value`; a link's own `current` overrides it. */
+    value?: string;
+    /** `underline` (the default) or `segmented`, as `Tabs`. */
+    variant?: TabsLook;
+    children?: ReactNode;
+};
+/**
+ * Route tabs as links: a `<nav>` of `TabsNavLink`s in the `Tabs` look, with
+ * its sliding indicator and its scroll cue on a phone. Each link is a plain
+ * link (open in a new tab, copy the address, Tab moves between them), the
+ * current one marked `aria-current="page"`. Use `Tabs` when the panels are
+ * on the page, `TabsNav` when each tab is a place to go.
+ */
+declare function TabsNav({ value, variant, className, children, ref, ...props }: TabsNavProps): import("react").JSX.Element;
+export { TabsNav, TabsNavLink };

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

@@ -0,0 +1,8 @@
+/**
+ * What the sliding indicator and the overflow cue measure: a `Tabs` trigger
+ * (`role="tab"`) or a `TabsNav` link, which is a plain link and has no tab
+ * role but wears the same `data-slot`.
+ */
+export declare const TAB = "[role=\"tab\"], [data-slot=\"tabs-trigger\"]";
+/** The selected one of them. */
+export declare const ACTIVE_TAB = "[role=\"tab\"][data-state=\"active\"], [data-slot=\"tabs-trigger\"][data-state=\"active\"]";

package/dist/lib/components/ui/primitives/tabs/use-tab-param.d.ts

@@ -0,0 +1,35 @@
+import { ShouldRevalidateFunction } from 'react-router';
+import { TabParamOptions, TabValues } from './tab-param-url.js';
+export type { TabParamOptions, TabValues } from './tab-param-url.js';
+export { tabIds } from './tab-param-url.js';
+export type UseTabParamOptions<V extends TabValues = TabValues> = TabParamOptions<V> & {
+    /**
+     * Write the default tab's param out too. Turn it on when another param
+     * implies a tab, so the default tab can still be picked.
+     */
+    explicitDefault?: boolean;
+    /**
+     * Keep the location's hash in a tab's `to`. Off by default: React Router's
+     * `ScrollRestoration` jumps to a hash even with `preventScrollReset`.
+     */
+    keepHash?: boolean;
+};
+/**
+ * The current tab kept in a search param, for `TabsNav` / `SegmentedNav`.
+ * `value` is the param if it names one of `values`, else `defaultValue`, else
+ * the first value. `hrefFor(tab)` is the `to` of a tab: the path and the other
+ * params are kept, the hash is dropped (`keepHash` keeps it) and the default
+ * tab writes no param. `values` is read as literal types, so `value` and
+ * `hrefFor` take only those tabs.
+ */
+export declare function useTabParam<const V extends TabValues>(options: UseTabParamOptions<V>): {
+    value: V[number];
+    hrefFor: (tab: V[number]) => string;
+};
+/**
+ * For a route's `shouldRevalidate`: skips the loaders when a navigation
+ * changed only the tab param. A same-URL, fetcher or manual revalidation, and
+ * any submission, keep `defaultShouldRevalidate`. Parent routes' loaders still
+ * revalidate unless they export it too.
+ */
+export declare function skipTabChange(param?: string): ShouldRevalidateFunction;

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

@@ -23,4 +23,7 @@ export declare function revealTab(list: HTMLElement, tab: HTMLElement, behavior?
  * in `useFollowScroll` and runs only while the list overflows. The same
  * effect keeps the active tab (and the focused one) in view.
  */
-export declare function useTabsOverflow(ref: RefObject<HTMLElement | null>): TabsOverflow;
+export declare function useTabsOverflow(ref: RefObject<HTMLElement | null>, selectors?: {
+    tab: string;
+    active: string;
+}): TabsOverflow;

package/dist/lib/components/ui/primitives/toggle-group/index.d.ts

@@ -1 +1,2 @@
+export * from './segmented-nav.js';
 export * from './toggle-group.js';

package/dist/lib/components/ui/primitives/toggle-group/segmented-nav-item.d.ts

@@ -0,0 +1,20 @@
+import { ComponentProps } from 'react';
+import { RouterLinkProps } from '../link/router-link.js';
+/** What a `SegmentedNav` tells its items: the current value. */
+export declare const SegmentedNavCurrent: {
+    Provider: import('react').Provider<string | undefined>;
+    useIsCurrent: (value: string | undefined, current: boolean | undefined) => boolean;
+};
+export type SegmentedNavItemProps = RouterLinkProps & Omit<ComponentProps<'a'>, 'href'> & {
+    /** Matched against the `SegmentedNav`'s `value` to mark this item current. */
+    value?: string;
+    /** Marks this item current (or not), whatever the `SegmentedNav`'s `value` says. */
+    current?: boolean;
+};
+/**
+ * One link of a `SegmentedNav`, wearing the segmented item look. The current
+ * one carries `aria-current="page"` and its pill. It renders the router's
+ * link (or the `LinkComponentProvider`'s), `to` being the target and
+ * `preventScrollReset` on, so changing segment keeps the scroll position.
+ */
+export declare function SegmentedNavItem({ value, current, className, ...props }: SegmentedNavItemProps): import("react").JSX.Element;

package/dist/lib/components/ui/primitives/toggle-group/segmented-nav.d.ts

@@ -0,0 +1,22 @@
+import { ComponentProps, ReactNode } from 'react';
+import { SegmentedNavItem } from './segmented-nav-item.js';
+import { ToggleGroupSize } from './toggle-group.variants.js';
+export type { SegmentedNavItemProps } from './segmented-nav-item.js';
+export type SegmentedNavProps = Omit<ComponentProps<'nav'>, 'aria-label'> & {
+    /** Names the navigation for assistive technology ("Period"). */
+    'aria-label': string;
+    /** The current item's `value`; an item's own `current` overrides it. */
+    value?: string;
+    /** `sm`, `md` (the default) or `lg`, as `ToggleGroup`. */
+    size?: Exclude<ToggleGroupSize, 'default'> | null;
+    children?: ReactNode;
+};
+/**
+ * The segmented `ToggleGroup` look as a `<nav>` of links: a period or a view
+ * kept in the address. Each item is a real link, the current one marked
+ * `aria-current="page"` and drawn as the selected pill. Tab moves from link
+ * to link. A nav wider than its container scrolls inside itself, with an
+ * edge fade. Use `ToggleGroup` for a choice that stays on the page.
+ */
+declare function SegmentedNav({ value, size, className, children, ref, ...props }: SegmentedNavProps): import("react").JSX.Element;
+export { SegmentedNav, SegmentedNavItem };

package/dist/lib/components/ui/primitives/toggle-group/toggle-group.d.ts

@@ -24,9 +24,10 @@ export type ToggleGroupItemProps = ComponentProps<typeof ToggleGroupPrimitive.It
  * One toggle. Its children are its content: a label, an icon, or both. An
  * icon alone needs an `aria-label` (or `aria-labelledby`): only then is the
  * item drawn as a square icon button. Selected, a label-only item of a
- * connected group draws a check at its start without growing. With `asChild`
- * (a link per period, say), the child becomes the item and the check goes
- * inside it, before the child's own content.
+ * connected group draws a check at its start without growing. With `asChild`,
+ * the child becomes the item and the check goes inside it, before the child's
+ * own content. For one link per period or view, use `SegmentedNav`: its items
+ * are real links with `aria-current`, not radios.
  */
 declare function ToggleGroupItem({ className, children, variant: _variant, size: _size, ...props }: ToggleGroupItemProps): import("react").JSX.Element;
 declare function ToggleGroupSeparator({ className, ...props }: Omit<SeparatorProps, 'orientation'>): import("react").JSX.Element;

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

@@ -1315,6 +1315,8 @@ export declare const en: {
         "number-field": {
             decrease: string;
             increase: string;
+            "decrease-named": string;
+            "increase-named": string;
         };
         "textarea-field": {
             count: string;
@@ -1367,6 +1369,9 @@ export declare const en: {
             "page-failed-title": string;
             "back-to-start": string;
         };
+        share: {
+            share: string;
+        };
         "language-switcher": {
             label: string;
         };

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

@@ -1304,7 +1304,9 @@ declare const _default: {
 	},
 	"number-field": {
 		"decrease": "Decrease",
-		"increase": "Increase"
+		"increase": "Increase",
+		"decrease-named": "Decrease {label}",
+		"increase-named": "Increase {label}"
 	},
 	"textarea-field": {
 		"count": "{count}/{max}"
@@ -1357,6 +1359,9 @@ declare const _default: {
 		"page-failed-title": "This page could not be loaded",
 		"back-to-start": "Back to the start"
 	},
+	"share": {
+		"share": "Share"
+	},
 	"language-switcher": {
 		"label": "Language"
 	},

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

@@ -1315,6 +1315,8 @@ export declare const fr: {
         "number-field": {
             decrease: string;
             increase: string;
+            "decrease-named": string;
+            "increase-named": string;
         };
         "textarea-field": {
             count: string;
@@ -1367,6 +1369,9 @@ export declare const fr: {
             "page-failed-title": string;
             "back-to-start": string;
         };
+        share: {
+            share: string;
+        };
         "language-switcher": {
             label: string;
         };

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

@@ -1304,7 +1304,9 @@ declare const _default: {
 	},
 	"number-field": {
 		"decrease": "Diminuer",
-		"increase": "Augmenter"
+		"increase": "Augmenter",
+		"decrease-named": "Diminuer {label}",
+		"increase-named": "Augmenter {label}"
 	},
 	"textarea-field": {
 		"count": "{count}/{max}"
@@ -1357,6 +1359,9 @@ declare const _default: {
 		"page-failed-title": "Cette page n’a pas pu être chargée",
 		"back-to-start": "Retour au début"
 	},
+	"share": {
+		"share": "Partager"
+	},
 	"language-switcher": {
 		"label": "Langue"
 	},

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

@@ -1313,6 +1313,8 @@ export declare const resources: {
             "number-field": {
                 decrease: string;
                 increase: string;
+                "decrease-named": string;
+                "increase-named": string;
             };
             "textarea-field": {
                 count: string;
@@ -1365,6 +1367,9 @@ export declare const resources: {
                 "page-failed-title": string;
                 "back-to-start": string;
             };
+            share: {
+                share: string;
+            };
             "language-switcher": {
                 label: string;
             };
@@ -4289,6 +4294,8 @@ export declare const resources: {
             "number-field": {
                 decrease: string;
                 increase: string;
+                "decrease-named": string;
+                "increase-named": string;
             };
             "textarea-field": {
                 count: string;
@@ -4341,6 +4348,9 @@ export declare const resources: {
                 "page-failed-title": string;
                 "back-to-start": string;
             };
+            share: {
+                share: string;
+            };
             "language-switcher": {
                 label: string;
             };