@nxgt/material 3.17.0 → 3.19.0

package/dist/lib/components/ui/selection/switcher/partials/switcher-sheet.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { SwitcherPanelProps } from '../types.js';
+type Props = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    panel: SwitcherPanelProps;
+    wrap: (trigger: ReactNode) => ReactNode;
+    trigger: ReactNode;
+};
+/** The phone panel: a bottom sheet, or, expressive, a full-height sheet with a close button. */
+export declare function SwitcherSheet({ open, onOpenChange, panel, wrap, trigger, }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/selection/switcher/partials/switcher-tile.d.ts

@@ -0,0 +1,7 @@
+import { SwitcherItem } from '../types.js';
+/** The tile of an option: its icon, or its initial(s), in its tone's container. It always renders. */
+export declare function SwitcherTile({ item, className, shape, }: {
+    item: SwitcherItem;
+    className?: string;
+    shape?: string;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/selection/switcher/partials/switcher-tooltip.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { SwitcherItem } from '../types.js';
+/** The full title (and subtitle) of the chosen option, on hover or focus, only while its title is clipped and the panel is closed. */
+export declare function SwitcherTooltip({ selected, clipped, panelOpen, children, }: {
+    selected?: SwitcherItem;
+    clipped: boolean;
+    panelOpen: boolean;
+    children: ReactElement;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/selection/switcher/partials/switcher-trigger.d.ts

@@ -0,0 +1,17 @@
+import { ComponentProps, Ref } from 'react';
+import { SwitcherItem, SwitcherProps } from '../types.js';
+type Props = Omit<ComponentProps<'button'>, 'value' | 'onChange' | 'children'> & {
+    selected?: SwitcherItem;
+    label: SwitcherProps['label'];
+    expressive: boolean;
+    titleRef: Ref<HTMLSpanElement>;
+    /** The title is clipped by an ellipsis: it carries the full title as `aria-label` (what `expectNoTextOverflow` reads), the tooltip shows the rest. */
+    clipped: boolean;
+};
+/**
+ * The trigger: a 44px card tile (initial or icon, title, subtitle, up-down
+ * chevron), or, expressive, a pill. Its accessible name is its content: the
+ * label, the full title (the ellipsis is only CSS) and the subtitle.
+ */
+export declare function SwitcherTrigger({ selected, label, expressive, titleRef, clipped, className, name, ...props }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/selection/switcher/switcher.d.ts

@@ -1,15 +1,10 @@
-import { ComponentProps, ReactNode } from 'react';
-import { DropdownMenuTrigger } from '../../overlays/dropdown-menu/dropdown-menu.js';
-export type SwitcherItem = {
-    id: string;
-    icon?: ReactNode;
-    title: string;
-    subtitle?: string;
-};
-export type SwitcherProps = {
-    options: SwitcherItem[];
-    label: ReactNode;
-    value: string;
-    onValueChange?: (value: string) => void;
-} & Omit<ComponentProps<typeof DropdownMenuTrigger>, 'value'>;
-export declare function Switcher({ value, onValueChange, options, label, className, ...props }: SwitcherProps): import("react").JSX.Element;
+import { SwitcherProps } from './types.js';
+export type { SwitcherFooter, SwitcherItem, SwitcherProps, } from './types.js';
+/**
+ * Switches between a few things the page is about (a workspace, an
+ * establishment, a class). Up to 7 options open a menu; from 8 (or with
+ * `searchable`) a panel with a search, a combobox over a listbox, and groups;
+ * on a phone, a bottom sheet. `variant="expressive"` is a pill with a larger
+ * panel and a "Recent" strip. With `getHref` the options are links.
+ */
+export declare function Switcher({ options, label, value, onValueChange, variant, searchable, recent, getHref, linkComponent, footer, emptyLabel, sheet, ...props }: SwitcherProps): import("react").JSX.Element;

package/dist/lib/components/ui/selection/switcher/switcher.utils.d.ts

@@ -0,0 +1,13 @@
+import { SwitcherItem } from './types.js';
+export type SwitcherGroup = {
+    name: string | undefined;
+    items: SwitcherItem[];
+};
+/** The options whose title, subtitle or group match the query (accents and case ignored). */
+export declare function filterItems(items: SwitcherItem[], query: string): SwitcherItem[];
+/** Groups in order of first appearance; the options with no group come first. */
+export declare function groupItems(items: SwitcherItem[]): SwitcherGroup[];
+/** The option ids behind `recent`, in order, at most 3, each one an existing, enabled option. */
+export declare function recentItems(options: SwitcherItem[], recent?: string[]): SwitcherItem[];
+/** The letter(s) of an option's tile when it has no icon. */
+export declare function initialOf(item: SwitcherItem): string;

package/dist/lib/components/ui/selection/switcher/types.d.ts

@@ -0,0 +1,73 @@
+import { ComponentProps, ReactNode } from 'react';
+import { LinkComponent } from '../../primitives/link/link-component.js';
+import { Tone } from '../../tones.js';
+export type SwitcherItem = {
+    id: string;
+    /** Drawn in the tile instead of the initial. */
+    icon?: ReactNode;
+    title: string;
+    subtitle?: string;
+    /** The header of the group the option sits under (options with none come first). */
+    group?: string;
+    /** The letter(s) of the tile when there is no `icon`; default: the title's first letter. */
+    initial?: string;
+    /** The tile's colours (a named tone, or one the app declared). */
+    tone?: Tone;
+    /** A soft badge after the title (a count, "New"). Put a fact here or in the subtitle, not in both. */
+    badge?: ReactNode;
+    /** The link of this option in link mode, when `getHref` returns nothing for it. Link mode itself is on only with `getHref`. */
+    href?: string;
+    disabled?: boolean;
+};
+/** The footer of the panel ("Manage…"): a button, or a link with `href`. */
+export type SwitcherFooter = {
+    /** Default: "Manage…" (`material.switcher.manage`). */
+    label?: ReactNode;
+    onSelect?: () => void;
+    href?: string;
+};
+export type SwitcherProps = {
+    options: SwitcherItem[];
+    /** What is switched ("Workspace", "Class"): names the trigger, the panel and the list. */
+    label: ReactNode;
+    value: string;
+    onValueChange?: (value: string) => void;
+    /** `default` is the tile trigger and menu; `expressive` is the pill and the large panel. */
+    variant?: 'default' | 'expressive';
+    /** A search field in the panel; default: from 8 options (always, when expressive). */
+    searchable?: boolean;
+    /** Up to 3 option ids shown as tiles above the groups while nothing is typed (expressive). */
+    recent?: string[];
+    /** Turns on link mode: each option is a link to this address (pass `(item) => item.href` to use the options' own) (`aria-current="page"` on the chosen one). */
+    getHref?: (item: SwitcherItem) => string | undefined;
+    /** The link element of link mode (your router's, wrapped as in the app shell). Default: `<a>`. */
+    linkComponent?: LinkComponent;
+    footer?: SwitcherFooter;
+    /** Shown when the search matches nothing. Default: `material.switcher.empty`. */
+    emptyLabel?: ReactNode;
+    /** `true` always opens a sheet, `false` never; default: a sheet on a phone. */
+    sheet?: boolean;
+} & Omit<ComponentProps<'button'>, 'value' | 'onChange' | 'children'>;
+/** What the inside of the panel (menu apart) reads, whatever the variant. */
+export type SwitcherPanelProps = {
+    options: SwitcherItem[];
+    value: string;
+    label: ReactNode;
+    /** The id of the element that holds the label (names the dialog, the list and the nav). */
+    labelId: string;
+    expressive: boolean;
+    searchable: boolean;
+    recent: SwitcherItem[];
+    linkMode: boolean;
+    hrefOf: (item: SwitcherItem) => string | undefined;
+    linkComponent?: LinkComponent;
+    footer?: SwitcherFooter;
+    emptyLabel?: ReactNode;
+    onSelect: (item: SwitcherItem) => void;
+    /** Closes the panel (the footer's action). */
+    onClose: () => void;
+    /** The trigger's `name`: prefixes the options' `data-pw` (`<name>-<index>`). */
+    name?: string;
+    autoFocus?: boolean;
+    className?: string;
+};

package/dist/lib/components/ui/selection/switcher/use-clipped.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from 'react';
+/** Whether the element's text is clipped by an ellipsis, kept up to date as it resizes. */
+export declare function useClipped(ref: RefObject<HTMLElement | null>, text: unknown, key?: unknown): boolean;

package/dist/lib/components/ui/selection/switcher/use-switcher-list.d.ts

@@ -0,0 +1,21 @@
+import { KeyboardEvent } from 'react';
+import { SwitcherPanelProps } from './types.js';
+type Params = Pick<SwitcherPanelProps, 'options' | 'value' | 'recent' | 'linkMode' | 'searchable' | 'onSelect' | 'autoFocus'>;
+/** The state and the keys of the panel's list: search, the active option, arrows, Enter. */
+export declare function useSwitcherList({ options, value, recent, linkMode, searchable, onSelect, autoFocus, }: Params): {
+    uid: string;
+    rootRef: import('react').RefObject<HTMLDivElement | null>;
+    inputRef: import('react').RefObject<HTMLInputElement | null>;
+    listRef: import('react').RefObject<HTMLDivElement | null>;
+    query: string;
+    setQuery: (next: string) => void;
+    filtered: import('./types.js').SwitcherItem[];
+    groups: import('./switcher.utils.js').SwitcherGroup[];
+    recents: import('./types.js').SwitcherItem[];
+    active: string;
+    setActiveKey: import('react').Dispatch<import('react').SetStateAction<string | undefined>>;
+    optionId: (key: string) => string;
+    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+};
+export type SwitcherListState = ReturnType<typeof useSwitcherList>;
+export {};

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

@@ -517,6 +517,8 @@ export declare const en: {
             pagination: {
                 previous: string;
                 next: string;
+                "previous-page": string;
+                "next-page": string;
                 "go-to-next-page": string;
                 "go-to-previous-page": string;
                 "go-to-first-page": string;
@@ -2675,5 +2677,15 @@ export declare const en: {
         "list-details": {
             back: string;
         };
+        switcher: {
+            search: string;
+            "search-placeholder": string;
+            clear: string;
+            empty: string;
+            results: string;
+            recent: string;
+            manage: string;
+            choose: string;
+        };
     };
 };

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

@@ -507,6 +507,8 @@ declare const _default: {
 		"pagination": {
 			"previous": "Previous",
 			"next": "Next",
+			"previous-page": "Previous page",
+			"next-page": "Next page",
 			"go-to-next-page": "Go to next page",
 			"go-to-previous-page": "Go to previous page",
 			"go-to-first-page": "Go to first page",
@@ -2664,6 +2666,16 @@ declare const _default: {
 	},
 	"list-details": {
 		"back": "Back to the list"
+	},
+	"switcher": {
+		"search": "Search",
+		"search-placeholder": "Search…",
+		"clear": "Clear the search",
+		"empty": "No results for “{query}”",
+		"results": "{count, plural, =0 {No results} one {# result} other {# results}}",
+		"recent": "Recent",
+		"manage": "Manage…",
+		"choose": "Choose"
 	}
 }
 ;

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

@@ -517,6 +517,8 @@ export declare const fr: {
             pagination: {
                 previous: string;
                 next: string;
+                "previous-page": string;
+                "next-page": string;
                 "go-to-next-page": string;
                 "go-to-previous-page": string;
                 "go-to-first-page": string;
@@ -2675,5 +2677,15 @@ export declare const fr: {
         "list-details": {
             back: string;
         };
+        switcher: {
+            search: string;
+            "search-placeholder": string;
+            clear: string;
+            empty: string;
+            results: string;
+            recent: string;
+            manage: string;
+            choose: string;
+        };
     };
 };

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

@@ -507,6 +507,8 @@ declare const _default: {
 		"pagination": {
 			"previous": "Précédent",
 			"next": "Suivant",
+			"previous-page": "Page précédente",
+			"next-page": "Page suivante",
 			"go-to-next-page": "Aller à la page suivante",
 			"go-to-previous-page": "Aller à la page précédente",
 			"go-to-first-page": "Aller à la première page",
@@ -2664,6 +2666,16 @@ declare const _default: {
 	},
 	"list-details": {
 		"back": "Retour à la liste"
+	},
+	"switcher": {
+		"search": "Rechercher",
+		"search-placeholder": "Rechercher…",
+		"clear": "Effacer la recherche",
+		"empty": "Aucun résultat pour « {query} »",
+		"results": "{count, plural, =0 {Aucun résultat} one {# résultat} other {# résultats}}",
+		"recent": "Récents",
+		"manage": "Gérer…",
+		"choose": "Choisir"
 	}
 }
 ;

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

@@ -515,6 +515,8 @@ export declare const resources: {
                 pagination: {
                     previous: string;
                     next: string;
+                    "previous-page": string;
+                    "next-page": string;
                     "go-to-next-page": string;
                     "go-to-previous-page": string;
                     "go-to-first-page": string;
@@ -2673,6 +2675,16 @@ export declare const resources: {
             "list-details": {
                 back: string;
             };
+            switcher: {
+                search: string;
+                "search-placeholder": string;
+                clear: string;
+                empty: string;
+                results: string;
+                recent: string;
+                manage: string;
+                choose: string;
+            };
         };
     };
     fr: {
@@ -3185,6 +3197,8 @@ export declare const resources: {
                 pagination: {
                     previous: string;
                     next: string;
+                    "previous-page": string;
+                    "next-page": string;
                     "go-to-next-page": string;
                     "go-to-previous-page": string;
                     "go-to-first-page": string;
@@ -5343,6 +5357,16 @@ export declare const resources: {
             "list-details": {
                 back: string;
             };
+            switcher: {
+                search: string;
+                "search-placeholder": string;
+                clear: string;
+                empty: string;
+                results: string;
+                recent: string;
+                manage: string;
+                choose: string;
+            };
         };
     };
 };