@hgdc/ui 0.12.0 → 0.12.2

package/dist/product-rail.d.ts

@@ -8,7 +8,8 @@ export declare const PRODUCT_RAIL_OPEN_DELAY = 150;
  * d'intention) ou au focus clavier, elle s'élargit et écrit le nom de chaque produit. Elle ne
  * recouvre jamais la page : `AppShell` plie la barre latérale du produit le temps du survol, la
  * barre prend exactement la place libérée (248 px) ; si la barre latérale est déjà pliée, elle
- * pousse la page (220 px). Tout revient dès que la souris sort.
+ * pousse la page (220 px). Un menu ouvert depuis la barre (sélecteur d'organisation) la garde
+ * élargie ; tout revient quand la souris est sortie et que le menu est fermé.
  */
 export declare function ProductRail({ current, organization, accountHref, catalog, onExpandedChange, }: {
     /** Le mot du produit affiché (« host ») : marqué en teinte. */

package/dist/product-rail.js

@@ -15,17 +15,24 @@ function ProductLink({ entry }) {
  * d'intention) ou au focus clavier, elle s'élargit et écrit le nom de chaque produit. Elle ne
  * recouvre jamais la page : `AppShell` plie la barre latérale du produit le temps du survol, la
  * barre prend exactement la place libérée (248 px) ; si la barre latérale est déjà pliée, elle
- * pousse la page (220 px). Tout revient dès que la souris sort.
+ * pousse la page (220 px). Un menu ouvert depuis la barre (sélecteur d'organisation) la garde
+ * élargie ; tout revient quand la souris est sortie et que le menu est fermé.
  */
 export function ProductRail({ current, organization, accountHref, catalog, onExpandedChange, }) {
-    const [expanded, setExpanded] = useState(false);
+    // Trois raisons de rester élargie : le survol (après le délai d'intention), le focus clavier, et
+    // un menu ouvert depuis la barre (sélecteur d'organisation ou tout autre) : la souris qui quitte
+    // la barre pour aller dans le menu ne doit pas la replier sous elle.
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const [menuOpen, setMenuOpen] = useState(false);
+    const expanded = hovered || focused || menuOpen;
     useEffect(() => {
         onExpandedChange?.(expanded);
     }, [expanded, onExpandedChange]);
     const ref = useRef(null);
     const { products, account } = productRailEntries({ current, accountHref, catalog });
-    // Écouteurs natifs : la barre est un repère `nav`, pas un contrôle ; c'est son survol et le
-    // focus de ses liens qui l'élargissent.
+    // Écouteurs natifs : la barre est un repère `nav`, pas un contrôle ; c'est son survol, le focus
+    // de ses liens et les menus qu'elle ouvre qui l'élargissent.
     useEffect(() => {
         const rail = ref.current;
         if (!rail)
@@ -39,27 +46,44 @@ export function ProductRail({ current, organization, accountHref, catalog, onExp
             if (event.pointerType !== "mouse")
                 return;
             cancel();
-            timer = window.setTimeout(() => setExpanded(true), PRODUCT_RAIL_OPEN_DELAY);
+            timer = window.setTimeout(() => setHovered(true), PRODUCT_RAIL_OPEN_DELAY);
         };
         const onLeave = () => {
             cancel();
-            setExpanded(false);
+            setHovered(false);
+        };
+        // Au clavier seulement : un clic de souris ne laisse pas la barre ouverte, ni le focus rendu au
+        // déclencheur quand un menu ouvert à la souris se ferme. La dernière interaction fait foi.
+        let keyboard = false;
+        const onDocKey = () => {
+            keyboard = true;
+        };
+        const onDocPointer = () => {
+            keyboard = false;
         };
-        // Au clavier seulement : un clic de souris ne laisse pas la barre ouverte.
         const onFocusIn = (event) => {
-            if (event.target && focusVisible(event.target))
-                setExpanded(true);
+            if (keyboard && event.target && focusVisible(event.target))
+                setFocused(true);
         };
         const onFocusOut = (event) => {
             if (!(event.relatedTarget instanceof Node) || !rail.contains(event.relatedTarget))
-                setExpanded(false);
+                setFocused(false);
         };
         const onKey = (event) => {
             if (event.key !== "Escape")
                 return;
             cancel();
-            setExpanded(false);
+            setHovered(false);
+            setFocused(false);
         };
+        // Un menu ouvert depuis la barre : son déclencheur porte `aria-expanded="true"` (Base UI, Radix,
+        // natif). Le menu lui-même vit dans un portail, hors de la barre : on suit donc le déclencheur.
+        const syncMenu = () => setMenuOpen(rail.querySelector('[aria-expanded="true"]') !== null);
+        const observer = new MutationObserver(syncMenu);
+        observer.observe(rail, { subtree: true, attributes: true, attributeFilter: ["aria-expanded"], childList: true });
+        syncMenu();
+        document.addEventListener("keydown", onDocKey, true);
+        document.addEventListener("pointerdown", onDocPointer, true);
         rail.addEventListener("pointerenter", onEnter);
         rail.addEventListener("pointerleave", onLeave);
         rail.addEventListener("focusin", onFocusIn);
@@ -67,6 +91,9 @@ export function ProductRail({ current, organization, accountHref, catalog, onExp
         rail.addEventListener("keydown", onKey);
         return () => {
             cancel();
+            observer.disconnect();
+            document.removeEventListener("keydown", onDocKey, true);
+            document.removeEventListener("pointerdown", onDocPointer, true);
             rail.removeEventListener("pointerenter", onEnter);
             rail.removeEventListener("pointerleave", onLeave);
             rail.removeEventListener("focusin", onFocusIn);

package/package.json

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

package/styles.css

@@ -485,17 +485,16 @@
   opacity: 0;
   animation: family-loader-in var(--duration-base) var(--ease-out) var(--family-loader-delay, 200ms) forwards;
 }
-.family-loader [data-piece] {
-  animation: 1.8s infinite both;
-}
+/* Le nom dans chaque raccourci : sans lui, lightningcss (minification de Vite) réduit
+   `animation: 1.8s infinite both` à `animation: none`. */
 .family-loader [data-piece="left"] {
-  animation-name: family-loader-left;
+  animation: family-loader-left 1.8s infinite both;
 }
 .family-loader [data-piece="bar"] {
-  animation-name: family-loader-bar;
+  animation: family-loader-bar 1.8s infinite both;
 }
 .family-loader [data-piece="right"] {
-  animation-name: family-loader-right;
+  animation: family-loader-right 1.8s infinite both;
 }
 @keyframes family-loader-in {
   to {