@hgdc/ui 0.32.0 → 0.33.0

package/README.md

@@ -48,7 +48,7 @@ Primitives déjà là : `avatar` `badge` `button` `dialog` `drawer` `dropdown-me
 | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `app-shell`        | `<AppShell product="mail" organization={<OrgSwitcher …/>} nav={<SidebarNav label="Projet">…</SidebarNav>} links={{ documentation: "/docs", settings: { render: <Link to="/settings" /> } }} account={<AccountMenu …/>} onSearch={() => setOpen(true)} assistant={{ open, onOpenChange: setOpen, panel: <Conversation /> }}>` : Documentation, Réglages et État du service (la page de statut par défaut) juste au-dessus du compte ; bouton Assistant à côté de la recherche, panneau dans une colonne à droite (la page se rétrécit, vue dédiée sous 1280 px, Échap ferme, `shortcut: "j"` facultatif). `sidebarFooter` est déprécié |
 |                    | `<SidebarNavItem icon={Rocket01Icon} label="Déploiements" render={<Link to="/deployments" />} />`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-|                    | Navigation imbriquée (l'espace d'une page, d'un projet) : `<SidebarNavBack label="Retour aux pages" render={<Link to="/pages" />} />` en tête, puis `<SidebarNavGroup label="Réglages">…</SidebarNavGroup>` (titre muet, trait en rail)                                                                                                                                                                                                                                                                                                                                                                                               |
+|                    | Navigation imbriquée (l'espace d'une page, d'un projet) : `<SidebarNavBack label="Retour aux pages" render={<Link to="/pages" />} />` en tête, puis `<SidebarNavGroup label="Suivi">…</SidebarNavGroup>` (titre muet, trait en rail), ou `<SidebarNavGroup label="Réglages" collapsible icon={…} active={…}>` (entrée à flèche qui déroule ses rubriques, fermée par défaut, ouverte sur une rubrique active, mémorisée par navigateur)                                                                                                                                                                                               |
 | `org-switcher`     | `<OrgSwitcher organizations={orgs} activeId={org.id} onSelect={go} createHref="/organisations/nouvelle" />`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 | `project-switcher` | `<ProjectSwitcher projects={projects} activeId={project?.id} activeName={params.project} allHref="/o/acme" createHref="/o/acme/new" renderLink={(href) => <Link to={href} />} />` : projet actif ou « Tous les projets », marque du projet (`ProjectMark`), « Nouveau projet »                                                                                                                                                                                                                                                                                                                                                        |
 | `account-menu`     | `<AccountMenu user={user} onProfile={…} onSecurity={…} onSignOut={signOut} product="Mail" />` : Account et les produits ouverts du catalogue, Mail coché. Dans l'ordre : identité, Profil, Sécurité, Thème (Système, Clair, Sombre, `ThemeSwitch`), entrées du produit, Se déconnecter. Ni « État du service » ni raccourcis : la coque pose le premier au-dessus du compte, l'aide garde sa touche `?`                                                                                                                                                                                                                               |

package/dist/app-shell.d.ts

@@ -52,10 +52,33 @@ export declare function SidebarNavBack({ label, href, render, }: {
 /**
  * Un groupe titré de la barre : « Suivi », « Réglages ». Ses `SidebarNavItem` en enfants. Le titre
  * nomme la liste pour les lecteurs d'écran ; en rail, il cède la place à un trait.
+ *
+ * Avec `collapsible`, le titre devient une entrée à flèche qui déroule ses rubriques : fermé par
+ * défaut, ouvert dès qu'une de ses rubriques est la page ouverte, puis tel que la personne l'a
+ * laissé (mémorisé par navigateur). En rail, ses rubriques restent visibles, sous un trait.
  */
-export declare function SidebarNavGroup({ label, children }: {
+export declare function SidebarNavGroup(props: {
     label: string;
     children: ReactNode;
+    /** Le titre déroule ou replie le groupe. */
+    collapsible?: false;
+}): React.JSX.Element;
+export declare function SidebarNavGroup(props: {
+    label: string;
+    children: ReactNode;
+    collapsible: true;
+    /** Icône de l'entrée qui déroule le groupe, comme une rubrique. */
+    icon?: IconSvgElement;
+    /**
+     * Une rubrique du groupe est la page ouverte : le groupe s'ouvre, dès le rendu serveur. Sans cette
+     * valeur, la coque le lit dans les liens (`aria-current="page"`, `data-status="active"`) après
+     * l'hydratation.
+     */
+    active?: boolean;
+    /** Ouvert tant que la personne n'a rien choisi. Fermé par défaut. */
+    defaultOpen?: boolean;
+    /** Clé de mémorisation, par défaut le titre : à donner quand deux groupes portent le même. */
+    storageKey?: string;
 }): React.JSX.Element;
 /**
  * Un accès commun de la barre : une adresse, ou un lien du routeur (`{ render: <Link to="/settings" /> }`,

package/dist/app-shell.js

@@ -2,6 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import Activity01Icon from "@hugeicons/core-free-icons/Activity01Icon";
 import AiMagicIcon from "@hugeicons/core-free-icons/AiMagicIcon";
 import ArrowLeft01Icon from "@hugeicons/core-free-icons/ArrowLeft01Icon";
+import ArrowRight01Icon from "@hugeicons/core-free-icons/ArrowRight01Icon";
 import BookOpen01Icon from "@hugeicons/core-free-icons/BookOpen01Icon";
 import Cancel01Icon from "@hugeicons/core-free-icons/Cancel01Icon";
 import Menu01Icon from "@hugeicons/core-free-icons/Menu01Icon";
@@ -133,11 +134,99 @@ export function SidebarNavBack({ label, href, render, }) {
     });
     return (_jsx("li", { className: "pb-2", children: _jsxs(Tooltip, { disabled: !rail, children: [_jsx(TooltipTrigger, { render: link }), _jsx(TooltipContent, { side: "right", children: label })] }) }));
 }
-/**
- * Un groupe titré de la barre : « Suivi », « Réglages ». Ses `SidebarNavItem` en enfants. Le titre
- * nomme la liste pour les lecteurs d'écran ; en rail, il cède la place à un trait.
- */
-export function SidebarNavGroup({ label, children }) {
+// ── Groupes repliables : ouverts ou fermés par la personne, mémorisés par navigateur ──────
+const GROUP_KEY_PREFIX = "sidebar-group:";
+const GROUP_EVENT = "sidebargroupchange";
+function subscribeGroups(onChange) {
+    window.addEventListener(GROUP_EVENT, onChange);
+    window.addEventListener("storage", onChange);
+    return () => {
+        window.removeEventListener(GROUP_EVENT, onChange);
+        window.removeEventListener("storage", onChange);
+    };
+}
+function readGroup(key) {
+    try {
+        const value = localStorage.getItem(GROUP_KEY_PREFIX + key);
+        return value === "open" ? true : value === "closed" ? false : null;
+    }
+    catch {
+        return null;
+    }
+}
+function writeGroup(key, open) {
+    try {
+        localStorage.setItem(GROUP_KEY_PREFIX + key, open ? "open" : "closed");
+    }
+    catch {
+        // Stockage bloqué : le choix vaut pour cette page seulement.
+    }
+    window.dispatchEvent(new Event(GROUP_EVENT));
+}
+/** Une entrée de la liste est-elle la page ouverte ? Suit les attributs que pose le routeur. */
+function useActiveDescendant(ref) {
+    const [active, setActive] = useState(false);
+    useLayoutEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        const read = () => setActive(element.querySelector('[aria-current="page"], [data-status="active"]') !== null);
+        read();
+        const observer = new MutationObserver(read);
+        observer.observe(element, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            attributeFilter: ["aria-current", "data-status"],
+        });
+        return () => observer.disconnect();
+    }, [ref]);
+    return active;
+}
+export function SidebarNavGroup(props) {
+    if (props.collapsible)
+        return _jsx(CollapsibleNavGroup, { ...props });
+    return _jsx(TitledNavGroup, { label: props.label, children: props.children });
+}
+function CollapsibleNavGroup({ label, children, icon, active, defaultOpen = false, storageKey, }) {
+    const key = storageKey ?? label;
+    const buttonId = useId();
+    const listId = useId();
+    const listRef = useRef(null);
+    const stored = useSyncExternalStore(subscribeGroups, () => readGroup(key), () => null);
+    const activeInDom = useActiveDescendant(listRef);
+    const current = active ?? activeInDom;
+    // Refermé par la personne alors qu'une de ses rubriques est ouverte : il le reste jusqu'à ce
+    // qu'elle en sorte. La navigation suivante vers une rubrique du groupe le rouvre.
+    const [dismissed, setDismissed] = useState(false);
+    const [wasCurrent, setWasCurrent] = useState(current);
+    if (wasCurrent !== current) {
+        setWasCurrent(current);
+        setDismissed(false);
+    }
+    const open = current ? !dismissed : (stored ?? defaultOpen);
+    // Pas d'animation au premier rendu : l'état lu dans le navigateur s'applique sans glisser.
+    const [ready, setReady] = useState(false);
+    useEffect(() => {
+        const frame = requestAnimationFrame(() => setReady(true));
+        return () => cancelAnimationFrame(frame);
+    }, []);
+    const toggle = () => {
+        const next = !open;
+        if (current)
+            setDismissed(!next);
+        writeGroup(key, next);
+    };
+    return (_jsxs("li", { "data-slot": "sidebar-nav-group", "data-collapsible": "", "data-open": open ? "" : undefined, className: "pt-1 first:pt-0", children: [_jsx("span", { "aria-hidden": true, className: "mx-auto mt-3 mb-2 hidden h-px w-6 bg-border lg:rail:block" }), _jsxs("button", { type: "button", id: buttonId, "aria-expanded": open, "aria-controls": listId, onClick: toggle, className: cn("group/disclosure flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm font-medium whitespace-nowrap text-muted-foreground outline-none transition-colors duration-(--duration-fast) ease-out", "hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50", "min-h-11 lg:min-h-9 coarse:min-h-11 lg:gap-2.5 lg:py-2 lg:text-shell-muted lg:hover:bg-shell-hover lg:hover:text-shell-foreground", 
+                // Une rubrique du groupe est ouverte et le groupe est replié : l'entrée le dit, sans fond.
+                current && !open && "text-foreground lg:text-shell-foreground", "lg:rail:hidden"), children: [icon ? (_jsx(HugeiconsIcon, { icon: icon, strokeWidth: 1.8, "aria-hidden": true, className: "size-5 shrink-0 lg:size-[1.125rem]" })) : null, _jsx("span", { className: "truncate", children: label }), _jsx(HugeiconsIcon, { icon: ArrowRight01Icon, strokeWidth: 2, "aria-hidden": true, className: cn("ml-auto size-4 shrink-0 opacity-70 transition-transform duration-(--duration-base) ease-ios motion-reduce:transition-none lg:size-3.5", open && "rotate-90") })] }), _jsx("div", { "data-slot": "sidebar-nav-group-panel", className: cn("grid", open ? "visible grid-rows-[1fr]" : "invisible grid-rows-[0fr]", ready &&
+                    "transition-[grid-template-rows,visibility] duration-(--duration-base) ease-ios motion-reduce:transition-none", 
+                // En rail, les rubriques restent là, sous le trait : seules leurs icônes se voient.
+                "lg:rail:visible lg:rail:grid-rows-[1fr]"), children: _jsx("ul", { ref: listRef, id: listId, "aria-labelledby": buttonId, className: cn("grid min-h-0 gap-0.5 overflow-hidden", 
+                    // Rubriques en retrait, sous un filet aligné sur l'icône du titre.
+                    icon ? "ml-[1.375rem] border-l border-border pl-2 lg:ml-5" : "pl-2", "pt-0.5 lg:rail:ml-0 lg:rail:border-l-0 lg:rail:pt-0 lg:rail:pl-0"), children: children }) })] }));
+}
+function TitledNavGroup({ label, children }) {
     const id = useId();
     return (_jsxs("li", { "data-slot": "sidebar-nav-group", className: "pt-4 first:pt-0", children: [_jsx("p", { id: id, className: "px-3 pb-1.5 text-xs font-medium text-muted-foreground lg:text-shell-muted lg:rail:sr-only", children: label }), _jsx("span", { "aria-hidden": true, className: "mx-auto mb-2 hidden h-px w-6 bg-border lg:rail:block" }), _jsx("ul", { "aria-labelledby": id, className: "grid gap-0.5", children: children })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "description": "Interface de la H Collection : jetons de la DA, thèmes, polices et composants.",
   "license": "UNLICENSED",
   "homepage": "https://github.com/hugogebel-boop/hgdc-kit/tree/main/packages/ui#readme",