@zevra/ui 0.50.0 → 0.50.1

package/react/overlays.tsx

@@ -66,8 +66,14 @@ export function useOverlay({ ouvert, onClose, panneau, verrouille = true }: UseO
 
     // ⚠️ La valeur PRÉCÉDENTE est restaurée, pas remise à '' : une page qui
     // gérait déjà son propre défilement serait cassée par un reset aveugle.
-    const overflowPrecedent = verrouille ? docu.body.style.overflow : null
-    if (verrouille) docu.body.style.overflow = 'hidden'
+    // ⚠️ Sur `html`, JAMAIS sur `body` (DECISIONS, 03/11/2026) : overlays.css
+    // verrouille déjà `html` ; un `overflow` de plus sur `body` ne remonte
+    // alors plus au viewport, `body` devient un conteneur de défilement à
+    // zéro, et toute colonne `sticky` de la page saute en haut de `body`,
+    // hors de l'écran.
+    const racine = docu.documentElement
+    const overflowPrecedent = verrouille ? racine.style.overflow : null
+    if (verrouille) racine.style.overflow = 'hidden'
 
     const premier = cible?.querySelector<HTMLElement>(FOCUSABLES)
     premier?.focus()
@@ -99,7 +105,7 @@ export function useOverlay({ ouvert, onClose, panneau, verrouille = true }: UseO
     docu.addEventListener('keydown', onKey)
     return () => {
       docu.removeEventListener('keydown', onKey)
-      if (overflowPrecedent !== null) docu.body.style.overflow = overflowPrecedent
+      if (overflowPrecedent !== null) racine.style.overflow = overflowPrecedent
       origine.current?.focus?.()
     }
   }, [ouvert, panneau, verrouille])

package/react/select-menu.tsx

@@ -20,7 +20,8 @@
 // liste système est plus rapide à manipuler que n'importe quelle liste
 // maison, et où le clavier logiciel s'adapte tout seul.
 
-import { useCallback, useEffect, useId, useRef, useState } from 'react'
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from 'react'
+import type { CSSProperties } from 'react'
 import type { ReactNode } from 'react'
 import { cx } from './cx.js'
 import { Icon } from './icon.js'
@@ -118,13 +119,70 @@ export function SelectMenu<T extends string = string>({
     return () => doc.removeEventListener('pointerdown', dehors)
   }, [ouvert])
 
+  // La place de la liste à l'écran (DECISIONS, 03/11/2026) : en `fixed`, elle
+  // échappe à tout conteneur qui rogne (un tableau qui défile, une carte en
+  // `overflow: hidden`). Calculée d'après la boîte du déclencheur, et
+  // recalculée quand la page ou un conteneur défile, ou que la fenêtre change.
+  const [place, setPlace] = useState<CSSProperties | null>(null)
+  useLayoutEffect(() => {
+    if (!ouvert) {
+      setPlace(null)
+      return
+    }
+    const vue = declencheur.current?.ownerDocument.defaultView ?? window
+    const ECART = 5
+    const MARGE = 8
+    function placer(e?: Event) {
+      // Le défilement de la liste ELLE-MÊME ne la déplace pas : sans ce
+      // filtre, chaque tour de molette dans une longue liste la replaçait.
+      if (e && e.target === liste.current) return
+      const d = declencheur.current
+      if (!d) return
+      const r = d.getBoundingClientRect()
+      // La largeur AVANT la mesure : sans elle, la liste vaut encore 100 % de
+      // la fenêtre au premier passage, et le garde-fou de droite la plaque à
+      // gauche de l'écran.
+      liste.current?.style.setProperty('--zv-menu-largeur', `${r.width}px`)
+      const hauteur = liste.current?.scrollHeight ?? 0
+      const largeur = Math.max(liste.current?.offsetWidth ?? 0, r.width)
+      const dessous = vue.innerHeight - r.bottom - ECART - MARGE
+      const dessus = r.top - ECART - MARGE
+      // Au-dessus seulement si la liste ne tient pas dessous ET qu'il y a
+      // davantage de place au-dessus : sinon on garde le sens attendu.
+      const enHaut = hauteur > dessous && dessus > dessous
+      const dispo = Math.max(120, enHaut ? dessus : dessous)
+      const visible = Math.min(hauteur, dispo)
+      setPlace({
+        position: 'fixed',
+        top: enHaut ? r.top - ECART - visible : r.bottom + ECART,
+        // Jamais hors de la fenêtre à droite.
+        left: Math.max(MARGE, Math.min(r.left, vue.innerWidth - largeur - MARGE)),
+        maxHeight: dispo,
+        '--zv-menu-largeur': `${r.width}px`,
+      } as CSSProperties)
+    }
+    placer()
+    vue.addEventListener('scroll', placer, true)
+    vue.addEventListener('resize', placer)
+    return () => {
+      vue.removeEventListener('scroll', placer, true)
+      vue.removeEventListener('resize', placer)
+    }
+  }, [ouvert, options.length])
+
   // L'option active reste visible quand on parcourt une liste plus haute que
-  // son cadre.
+  // son cadre. `place` : la liste n'est bornée (hauteur maximale) qu'une fois
+  // placée ; avant, il n'y a rien à faire défiler, et une liste longue
+  // s'ouvrait en haut (« Algérie ») au lieu de l'option choisie (« France »).
+  // Sur le PASSAGE à « placée », pas sur chaque nouvelle place : la place
+  // change à chaque défilement de la page, et ramener l'option active à
+  // chaque fois contrarierait qui parcourt la liste.
+  const placee = place !== null
   useEffect(() => {
-    if (!ouvert) return
+    if (!ouvert || !placee) return
     const el = liste.current?.children[actif] as HTMLElement | undefined
     el?.scrollIntoView({ block: 'nearest' })
-  }, [ouvert, actif])
+  }, [ouvert, actif, placee])
 
   function suivant(depuis: number, pas: number): number {
     const n = options.length
@@ -221,7 +279,15 @@ export function SelectMenu<T extends string = string>({
       </button>
 
       {ouvert && (
-        <div ref={liste} id={idListe} role="listbox" className="zv-menu">
+        <div
+          ref={liste}
+          id={idListe}
+          role="listbox"
+          className="zv-menu zv-menu--place"
+          // Tant que la place n'est pas calculée (premier rendu), la liste est
+          // posée mais invisible : elle ne clignote pas à sa place d'origine.
+          style={place ?? { position: 'fixed', visibility: 'hidden' }}
+        >
           {options.map((o, i) => (
             <button
               key={o.valeur}

package/src/forms.css

@@ -383,8 +383,21 @@
 }
 
 .zv-select-anchor--block .zv-menu {
-  width: 100%;
-  min-width: 0;
+  /* En `fixed` (DECISIONS, 03/11/2026), 100 % vaudrait la fenêtre : la
+   * largeur du déclencheur arrive par `--zv-menu-largeur`. La liste en est
+   * le MINIMUM, pas la mesure : sous un déclencheur calé sur son contenu
+   * (« Membre »), l'option longue (« Administrateur ») débordait. Elle prend
+   * la largeur de ses options, jamais plus que la fenêtre. */
+  width: max-content;
+  min-width: var(--zv-menu-largeur, 100%);
+  max-width: calc(100vw - 16px);
+}
+
+/* La liste de SelectMenu, placée par le composant (`fixed`, haut, gauche,
+ * hauteur maximale) : elle défile au-delà de la place disponible. */
+.zv-menu--place {
+  overflow-y: auto;
+  overscroll-behavior: contain;
 }
 
 /* ─── Déclencheur de sélection DESSINÉE ─────────────────────────────────