@nxgt/material 3.16.0 → 3.18.0

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

@@ -1329,6 +1329,7 @@ export declare const en: {
             bar: {
                 label: string;
                 search: string;
+                "search-min": string;
                 active: string;
                 locked: string;
                 "locked-reason": string;
@@ -2674,5 +2675,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

@@ -1319,6 +1319,7 @@ declare const _default: {
 		"bar": {
 			"label": "Filters",
 			"search": "Search",
+			"search-min": "Type at least {min, plural, one {# character} other {# characters}} to search",
 			"active": "Active filters",
 			"locked": "Locked",
 			"locked-reason": "Locked: {reason}",
@@ -2663,6 +2664,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

@@ -1329,6 +1329,7 @@ export declare const fr: {
             bar: {
                 label: string;
                 search: string;
+                "search-min": string;
                 active: string;
                 locked: string;
                 "locked-reason": string;
@@ -2674,5 +2675,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

@@ -1319,6 +1319,7 @@ declare const _default: {
 		"bar": {
 			"label": "Filtres",
 			"search": "Rechercher",
+			"search-min": "Saisissez au moins {min, plural, one {# caractère} other {# caractères}} pour rechercher",
 			"active": "Filtres actifs",
 			"locked": "Verrouillé",
 			"locked-reason": "Verrouillé : {reason}",
@@ -2663,6 +2664,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

@@ -1327,6 +1327,7 @@ export declare const resources: {
                 bar: {
                     label: string;
                     search: string;
+                    "search-min": string;
                     active: string;
                     locked: string;
                     "locked-reason": string;
@@ -2672,6 +2673,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: {
@@ -3996,6 +4007,7 @@ export declare const resources: {
                 bar: {
                     label: string;
                     search: string;
+                    "search-min": string;
                     active: string;
                     locked: string;
                     "locked-reason": string;
@@ -5341,6 +5353,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;
+            };
         };
     };
 };