@zevra/ui 0.43.0 → 0.43.1

package/react/data-table.tsx

@@ -81,6 +81,10 @@ export interface DataTableProps<T> {
   /** Appelé au clic sur une ligne. Sans lui, la ligne n'est pas cliquable :
    *  et elle ne doit pas en avoir l'air. */
   onRowClick?: (ligne: T) => void
+  /** La ligne dont on regarde le détail (l'aperçu ouvert à côté de la
+   *  liste). Elle porte un filet d'accent à gauche, distinct de la ligne
+   *  COCHÉE, qui est une sélection pour agir. */
+  ligneActive?: (ligne: T) => boolean
   className?: string
 }
 
@@ -139,6 +143,7 @@ export function DataTable<T>({
   onRowClick,
   celluleEntete,
   sousEntete,
+  ligneActive,
   className,
 }: DataTableProps<T>) {
   const grille = table.options.enableColumnResizing === true
@@ -219,7 +224,12 @@ export function DataTable<T>({
         : lignes.map((ligne) => (
             <div
               key={ligne.id}
-              className={cx('zv-row', ligne.getIsSelected() && 'zv-row--selected')}
+              className={cx(
+                'zv-row',
+                ligne.getIsSelected() && 'zv-row--selected',
+                ligneActive?.(ligne.original) && 'zv-row--on',
+              )}
+              aria-current={ligneActive?.(ligne.original) || undefined}
               // Le clavier suit le clic : une ligne cliquable qui n'est pas
               // atteignable au clavier est une action inaccessible.
               role={onRowClick ? 'button' : undefined}

package/react/grille.tsx

@@ -70,7 +70,8 @@ import { DataTable, colonnesAffichees, epinglage, type CelluleEnteteProps } from
 import { usePersistedState } from './use-persisted-state.js'
 import { Button } from './actions.js'
 import { Icon, IconButton } from './icon.js'
-import { Checkbox, Field, Input, Search, Select, SelectAnchor } from './forms.js'
+import { Checkbox, Field, Input, Search, SelectAnchor } from './forms.js'
+import { SelectMenu } from './select-menu.js'
 import { Menu, MenuItem, Pager, PagerArrow, Popover } from './navigation.js'
 import { Empty } from './feedback.js'
 import { Meta } from './data.js'
@@ -227,6 +228,8 @@ export interface DataGridProps<T> {
   /** Clic (ou Entrée) sur une ligne. Sans lui, la ligne n'est pas
    *  cliquable, et elle n'en a pas l'air. */
   onRowClick?: (ligne: T) => void
+  /** La ligne dont l'aperçu est ouvert : filet d'accent à gauche. */
+  ligneActive?: (ligne: T) => boolean
   /** Identifiant de ligne. Indispensable avec `selection` dès que les
    *  données se rechargent : par défaut c'est l'INDEX, et une ligne cochée
    *  deviendrait une autre ligne après un tri côté serveur. */
@@ -832,38 +835,10 @@ function FiltreColonne<T>({
   const nom = libelleColonne(colonne)
   const filtre = colonne.getFilterValue() as ValeurFiltre | undefined
 
-  if (type === 'choix') {
-    // Les valeurs du modèle FACETTÉ : celles que les autres filtres laissent
-    // encore passer. Une option qui ne rendrait aucune ligne n'est pas offerte.
-    const options = [...colonne.getFacetedUniqueValues().keys()]
-      .filter((v) => v != null && v !== '')
-      .map(String)
-      .sort((a, b) => a.localeCompare(b, 'fr'))
-    const valeur = filtre?.type === 'choix' ? filtre.valeur : ''
-    // L'option choisie reste dans la liste même si un autre filtre l'a
-    // fait disparaître : sinon le <select> afficherait « Tous » en mentant.
-    if (valeur && !options.includes(valeur)) options.unshift(valeur)
-    return (
-      <Select
-        className="zv-table__filtre"
-        value={valeur}
-        onChange={(e) => colonne.setFilterValue({ type: 'choix', valeur: e.target.value })}
-        aria-label={t.filtrerColonne(nom)}
-      >
-        <option value="">{t.tous}</option>
-        {options.map((o) => (
-          <option key={o} value={o}>
-            {o}
-          </option>
-        ))}
-      </Select>
-    )
-  }
-
+  if (type === 'choix') return <FiltreChoix colonne={colonne} nom={nom} t={t} />
   if (type === 'nombre' || type === 'date') {
     return <FiltrePlage colonne={colonne} type={type} nom={nom} t={t} />
   }
-
   return (
     <Input
       className="zv-table__filtre"
@@ -876,55 +851,45 @@ function FiltreColonne<T>({
 }
 
 /**
- * Une plage (deux bornes) ne tient pas dans une cellule de 90 px : le champ
- * de la rangée RÉSUME la plage, et l'ouvre dans un popover.
+ * Un filtre qui s'ouvre : le champ de la rangée RÉSUME la valeur, et ouvre
+ * un panneau (une liste de choix, une plage) sous lui.
  *
- * ⚠️ LE POPOVER SORT DU CADRE, par un portail. `.zv-table` défile
- * horizontalement, et `overflow-x: auto` force `overflow-y` : un popover
+ * ⚠️ LE PANNEAU SORT DU CADRE, par un portail. `.zv-table` défile
+ * horizontalement, et `overflow-x: auto` force `overflow-y` : un panneau
  * posé dans la cellule serait rogné par le bas du tableau, invisible sur un
- * tableau de trois lignes. Il est donc rendu dans le <body> et placé sous
- * son déclencheur, en coordonnées d'écran.
+ * tableau de trois lignes. Il est rendu dans le <body> et placé sous son
+ * déclencheur, en coordonnées d'écran.
+ *
+ * ⚠️ AUCUN <select> NATIF ICI : sa liste est peinte par le SYSTÈME, hors
+ * charte (menu noir sous macOS sombre), et certaines apps l'interdisent.
  */
-function FiltrePlage<T>({
-  colonne,
-  type,
-  nom,
-  t,
+function FiltreFlottant({
+  libelle,
+  resume,
+  vide,
+  icone,
+  role,
+  panneau: contenu,
 }: {
-  colonne: Column<T, unknown>
-  type: 'nombre' | 'date'
-  nom: string
-  t: TextesGrille
+  libelle: string
+  resume: string
+  vide: boolean
+  icone: 'calendrier' | 'filtre' | 'chevron-bas'
+  role: 'dialog' | 'listbox'
+  /** Le contenu ; reçoit de quoi refermer le panneau. */
+  panneau: (fermer: () => void) => ReactNode
 }) {
   const [ouvert, setOuvert] = useState(false)
   const [position, setPosition] = useState<{ top: number; left: number } | null>(null)
   const declencheur = useRef<HTMLButtonElement>(null)
   const panneau = useRef<HTMLDivElement>(null)
-  const idChamp = useId()
 
-  const filtre = colonne.getFilterValue() as ValeurFiltre | undefined
-  const [a, b] =
-    filtre?.type === 'nombre' ? [filtre.min, filtre.max] : filtre?.type === 'date' ? [filtre.du, filtre.au] : ['', '']
-  const ecrire = (bas: string, haut: string) =>
-    colonne.setFilterValue(
-      type === 'nombre' ? { type, min: bas, max: haut } : { type, du: bas, au: haut },
-    )
+  const fermer = useCallback(() => {
+    setOuvert(false)
+    declencheur.current?.focus()
+  }, [])
 
-  // Ce qui est TAPÉ, distinct de ce qui est APPLIQUÉ : une date en cours de
-  // saisie s'affiche dans le champ sans filtrer le tableau. Resynchronisé
-  // quand le filtre change d'ailleurs (« Réinitialiser la vue »).
-  const [brouillon, setBrouillon] = useState<[string, string]>([a, b])
-  useEffect(() => {
-    setBrouillon([a, b])
-  }, [a, b])
-  const saisir = (bas: string, haut: string) => {
-    setBrouillon([bas, haut])
-    if (type === 'nombre' || (dateComplete(bas) && dateComplete(haut))) ecrire(bas, haut)
-  }
-  const resume = type === 'nombre' ? t.resumeNombres(a, b) : t.resumeDates(a, b)
-  const vide = !a && !b
-
-  // Placé AVANT l'affichage (layout effect) : sinon le popover apparaît un
+  // Placé AVANT l'affichage (layout effect) : sinon le panneau apparaît un
   // instant en haut à gauche de la page.
   useLayoutEffect(() => {
     if (!ouvert) {
@@ -939,8 +904,8 @@ function FiltrePlage<T>({
       const largeur = (panneau.current?.firstElementChild as HTMLElement | null)?.offsetWidth ?? 0
       const vue = declencheur.current?.ownerDocument.defaultView
       const droite = vue ? vue.innerWidth : r.right + largeur
-      // Le décalage de 5 px sous le déclencheur est celui de .zv-popover
-      // (top: calc(100% + 5px)) : l'enveloppe se pose au ras du champ.
+      // Le décalage de 5 px sous le déclencheur est celui de .zv-popover et
+      // de .zv-menu (top: calc(100% + 5px)) : l'enveloppe se pose au ras.
       setPosition({ top: r.bottom, left: Math.max(0, Math.min(r.left, droite - largeur - 8)) })
     }
     placer()
@@ -962,10 +927,7 @@ function FiltrePlage<T>({
       if (!panneau.current?.contains(cible) && !declencheur.current?.contains(cible)) setOuvert(false)
     }
     const echap = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        setOuvert(false)
-        declencheur.current?.focus()
-      }
+      if (e.key === 'Escape') fermer()
     }
     doc.addEventListener('mousedown', dehors)
     doc.addEventListener('keydown', echap)
@@ -973,16 +935,136 @@ function FiltrePlage<T>({
       doc.removeEventListener('mousedown', dehors)
       doc.removeEventListener('keydown', echap)
     }
-  }, [ouvert])
+  }, [ouvert, fermer])
 
-  // Le focus entre dans le premier champ une fois le panneau PLACÉ : avant,
-  // il est en `visibility: hidden`, et le navigateur refuse le focus à un
-  // élément invisible. La frappe partait alors dans le vide.
+  // Le focus entre dans le panneau une fois PLACÉ : avant, il est en
+  // `visibility: hidden`, et le navigateur refuse le focus à un élément
+  // invisible. La frappe partait alors dans le vide. L'option choisie
+  // d'abord, sinon le premier champ ou la première option.
   const place = position !== null
   useEffect(() => {
-    if (ouvert && place) panneau.current?.querySelector('input')?.focus()
+    if (!ouvert || !place) return
+    const p = panneau.current
+    ;(p?.querySelector<HTMLElement>('[aria-selected="true"]') ?? p?.querySelector<HTMLElement>('input, button'))?.focus()
   }, [ouvert, place])
 
+  return (
+    <>
+      <button
+        ref={declencheur}
+        type="button"
+        className="zv-input zv-input--trigger zv-table__filtre"
+        data-vide={vide ? 'oui' : undefined}
+        aria-expanded={ouvert}
+        aria-haspopup={role}
+        aria-label={`${libelle} : ${resume}`}
+        onClick={() => setOuvert((o) => !o)}
+      >
+        <span className="zv-colhead__label">{resume}</span>
+        <Icon nom={icone} taille="sm" discret />
+      </button>
+      {ouvert &&
+        createPortal(
+          <div
+            ref={panneau}
+            className="zv-grille__flottant"
+            style={position ? { top: position.top, left: position.left } : { visibility: 'hidden' }}
+          >
+            {contenu(fermer)}
+          </div>,
+          declencheur.current?.ownerDocument.body ?? document.body,
+        )}
+    </>
+  )
+}
+
+/** Les flèches promènent le focus d'une option à l'autre, Origine et Fin
+ *  vont aux extrémités : le parcours clavier d'une liste, que le <select>
+ *  natif donnait et qu'une liste dessinée doit rendre. */
+function parcourirListe(e: EvenementClavier<HTMLElement>) {
+  const options = [...e.currentTarget.querySelectorAll<HTMLElement>('[role="option"]')]
+  const i = options.indexOf(e.target as HTMLElement)
+  const vers =
+    e.key === 'ArrowDown' ? i + 1 : e.key === 'ArrowUp' ? i - 1 : e.key === 'Home' ? 0 : e.key === 'End' ? options.length - 1 : null
+  if (vers === null) return
+  e.preventDefault()
+  options[Math.max(0, Math.min(options.length - 1, vers))]?.focus()
+}
+
+function FiltreChoix<T>({ colonne, nom, t }: { colonne: Column<T, unknown>; nom: string; t: TextesGrille }) {
+  const filtre = colonne.getFilterValue() as ValeurFiltre | undefined
+  // Les valeurs du modèle FACETTÉ : celles que les autres filtres laissent
+  // encore passer. Une option qui ne rendrait aucune ligne n'est pas offerte.
+  const options = [...colonne.getFacetedUniqueValues().keys()]
+    .filter((v) => v != null && v !== '')
+    .map(String)
+    .sort((a, b) => a.localeCompare(b, 'fr'))
+  const valeur = filtre?.type === 'choix' ? filtre.valeur : ''
+  // L'option choisie reste dans la liste même si un autre filtre l'a fait
+  // disparaître : sinon la liste afficherait « Tous » en mentant.
+  if (valeur && !options.includes(valeur)) options.unshift(valeur)
+
+  return (
+    <FiltreFlottant
+      libelle={t.filtrerColonne(nom)}
+      resume={valeur || t.tous}
+      vide={!valeur}
+      icone="chevron-bas"
+      role="listbox"
+      panneau={(fermer) => (
+        <Menu role="listbox" aria-label={t.filtrerColonne(nom)} className="zv-grille__liste" onKeyDown={parcourirListe}>
+          {['', ...options].map((o) => (
+            <MenuItem
+              key={o || '\u0000'}
+              actif={o === valeur}
+              onClick={() => {
+                colonne.setFilterValue({ type: 'choix', valeur: o })
+                fermer()
+              }}
+            >
+              {o || t.tous}
+            </MenuItem>
+          ))}
+        </Menu>
+      )}
+    />
+  )
+}
+
+function FiltrePlage<T>({
+  colonne,
+  type,
+  nom,
+  t,
+}: {
+  colonne: Column<T, unknown>
+  type: 'nombre' | 'date'
+  nom: string
+  t: TextesGrille
+}) {
+  const idChamp = useId()
+  const filtre = colonne.getFilterValue() as ValeurFiltre | undefined
+  const [a, b] =
+    filtre?.type === 'nombre' ? [filtre.min, filtre.max] : filtre?.type === 'date' ? [filtre.du, filtre.au] : ['', '']
+  const ecrire = (bas: string, haut: string) =>
+    colonne.setFilterValue(
+      type === 'nombre' ? { type, min: bas, max: haut } : { type, du: bas, au: haut },
+    )
+
+  // Ce qui est TAPÉ, distinct de ce qui est APPLIQUÉ : une date en cours de
+  // saisie s'affiche dans le champ sans filtrer le tableau. Resynchronisé
+  // quand le filtre change d'ailleurs (« Réinitialiser la vue »).
+  const [brouillon, setBrouillon] = useState<[string, string]>([a, b])
+  useEffect(() => {
+    setBrouillon([a, b])
+  }, [a, b])
+  const saisir = (bas: string, haut: string) => {
+    setBrouillon([bas, haut])
+    if (type === 'nombre' || (dateComplete(bas) && dateComplete(haut))) ecrire(bas, haut)
+  }
+  const resume = type === 'nombre' ? t.resumeNombres(a, b) : t.resumeDates(a, b)
+  const vide = !a && !b
+
   const champ = (
     valeur: string,
     changer: (v: string) => void,
@@ -1014,61 +1096,51 @@ function FiltrePlage<T>({
     )
 
   return (
-    <>
-      <button
-        ref={declencheur}
-        type="button"
-        className="zv-input zv-input--trigger zv-table__filtre"
-        data-vide={vide ? 'oui' : undefined}
-        aria-expanded={ouvert}
-        aria-haspopup="dialog"
-        aria-label={`${t.filtrerColonne(nom)} : ${resume}`}
-        onClick={() => setOuvert((o) => !o)}
-      >
-        <span className="zv-colhead__label">{resume}</span>
-        <Icon nom={type === 'date' ? 'calendrier' : 'filtre'} taille="sm" discret />
-      </button>
-      {ouvert &&
-        createPortal(
-          <div
-            ref={panneau}
-            role="dialog"
-            aria-label={t.filtrerColonne(nom)}
-            className="zv-grille__flottant"
-            style={position ? { top: position.top, left: position.left } : { visibility: 'hidden' }}
-          >
-            <Popover className="zv-grille__plage">
-              {type === 'date' && (
-                <div className="zv-grille__periodes" role="group" aria-label={t.periodes}>
-                  {(['aujourdhui', 'septJours', 'trenteJours', 'ceMois', 'cetteAnnee'] as const).map((cle) => {
-                    const [du, au] = periodes(new Date())[cle]
-                    const actif = a === du && b === au
-                    return (
-                      <MenuItem key={cle} actif={actif} onClick={() => saisir(du, au)}>
-                        {t[cle]}
-                      </MenuItem>
-                    )
-                  })}
-                </div>
-              )}
-              <div className="zv-grille__bornes">
-                <Field label={type === 'date' ? t.du : t.min} htmlFor={idChamp + 'a'}>
-                  {champ(brouillon[0], (v) => saisir(v, brouillon[1]), 'a', { max: brouillon[1] })}
-                </Field>
-                <Field label={type === 'date' ? t.au : t.max} htmlFor={idChamp + 'b'}>
-                  {champ(brouillon[1], (v) => saisir(brouillon[0], v), 'b', { min: brouillon[0] })}
-                </Field>
-              </div>
-              {!vide && (
-                <Button variante="fantome" compact icone="fermer" onClick={() => saisir('', '')}>
-                  {t.effacer}
-                </Button>
-              )}
-            </Popover>
-          </div>,
-          declencheur.current?.ownerDocument.body ?? document.body,
-        )}
-    </>
+    <FiltreFlottant
+      libelle={t.filtrerColonne(nom)}
+      resume={resume}
+      vide={vide}
+      icone={type === 'date' ? 'calendrier' : 'filtre'}
+      role="dialog"
+      panneau={() => (
+        <Popover className="zv-grille__plage" role="dialog" aria-label={t.filtrerColonne(nom)}>
+          {type === 'date' && (
+            <div className="zv-grille__periodes" role="group" aria-label={t.periodes}>
+              {(['aujourdhui', 'septJours', 'trenteJours', 'ceMois', 'cetteAnnee'] as const).map((cle) => {
+                const [du, au] = periodes(new Date())[cle]
+                return (
+                  // `role="button"` : ces raccourcis sont des ACTIONS, pas
+                  // les options d'une liste (le rôle par défaut de MenuItem).
+                  <MenuItem
+                    key={cle}
+                    role="button"
+                    actif={a === du && b === au}
+                    aria-selected={undefined}
+                    aria-pressed={a === du && b === au}
+                    onClick={() => saisir(du, au)}
+                  >
+                    {t[cle]}
+                  </MenuItem>
+                )
+              })}
+            </div>
+          )}
+          <div className="zv-grille__bornes">
+            <Field label={type === 'date' ? t.du : t.min} htmlFor={idChamp + 'a'}>
+              {champ(brouillon[0], (v) => saisir(v, brouillon[1]), 'a', { max: brouillon[1] })}
+            </Field>
+            <Field label={type === 'date' ? t.au : t.max} htmlFor={idChamp + 'b'}>
+              {champ(brouillon[1], (v) => saisir(brouillon[0], v), 'b', { min: brouillon[0] })}
+            </Field>
+          </div>
+          {!vide && (
+            <Button variante="fantome" compact icone="fermer" onClick={() => saisir('', '')}>
+              {t.effacer}
+            </Button>
+          )}
+        </Popover>
+      )}
+    />
   )
 }
 
@@ -1079,6 +1151,7 @@ export function DataGrid<T>({
   data,
   columns,
   onRowClick,
+  ligneActive,
   getRowId,
   selection = false,
   onSelectionChange,
@@ -1361,6 +1434,7 @@ export function DataGrid<T>({
             celluleEntete={(p) => <EnteteColonne {...p} t={t} />}
             sousEntete={rangeeFiltres}
             onRowClick={onRowClick}
+            ligneActive={ligneActive}
             vide={
               vide ?? (
                 <Empty>
@@ -1376,18 +1450,13 @@ export function DataGrid<T>({
         <Pager pied aria-label={t.pagination}>
           <Meta>{t.compte(debut, fin, total)}</Meta>
           <div className="zv-grille__pied">
-            <Select
+            <SelectMenu
               className="zv-grille__taille"
-              aria-label={t.lignesParPage}
-              value={pageSize}
-              onChange={(e) => table.setPageSize(Number(e.target.value))}
-            >
-              {TAILLES_PAGE.map((taille) => (
-                <option key={taille} value={taille}>
-                  {t.parPage(taille)}
-                </option>
-              ))}
-            </Select>
+              label={t.lignesParPage}
+              valeur={String(pageSize)}
+              options={TAILLES_PAGE.map((taille) => ({ valeur: String(taille), label: t.parPage(taille) }))}
+              onChange={(v) => table.setPageSize(Number(v))}
+            />
             <PagerArrow
               aria-label={t.pagePrecedente}
               desactive={!table.getCanPreviousPage()}

package/src/data.css

@@ -198,9 +198,11 @@
   outline-offset: -2px;
 }
 
-/* ⚠️ Ni état sélectionné, ni :focus-within, ni ligne active : la source n'en
- * contient aucun, et les inventer ferait apparaître un fond de plus dans un
- * système qui n'en a que deux (blanc, survol). */
+/* ⚠️ La source ne contient ni état sélectionné, ni :focus-within, ni ligne
+ * active : une liste à LIRE n'en a pas besoin. Une grille qu'on OPÈRE, si :
+ * la ligne cochée (--selected) et la ligne active (--on) sont arbitrées
+ * plus bas, section « Grille de données », HORS RELEVÉ, sans troisième
+ * gris (l'une sur --accent-soft, l'autre sur le fond du survol). */
 
 /* ─── En-tête triable ──────────────────────────────────────────────────
  * ⚠️ HORS RELEVÉ : ajouté le 25/08/2026 avec l'adaptateur TanStack Table.
@@ -1212,7 +1214,8 @@
 }
 
 .zv-table__head .zv-cell--pin,
-.zv-row:hover .zv-cell--pin {
+.zv-row:hover .zv-cell--pin,
+.zv-row--on .zv-cell--pin {
   --zv-pin-fond: var(--panel);
 }
 
@@ -1229,6 +1232,19 @@
   --zv-pin-fond: var(--accent-soft);
 }
 
+/* ─── Ligne active ──────────────────────────────────────────────────────
+ * La ligne dont on regarde le détail (un aperçu ouvert à côté de la liste).
+ * ⚠️ HORS RELEVÉ, repris de Sunday (24/09/2026), qui le peignait dans son
+ * propre CSS faute de l'avoir ici. Aucun troisième fond : le fond du
+ * survol, et un filet d'accent à gauche. En ombre INTÉRIEURE et non en
+ * bordure : une bordure décalerait toute la rangée de trois pixels au
+ * moment du clic. Distincte de la ligne cochée (--selected), qui est une
+ * sélection pour agir. */
+.zv-row--on {
+  background: var(--panel);
+  box-shadow: inset 3px 0 0 var(--accent);
+}
+
 /* La case de sélection : centrée dans sa piste, sans troncature. */
 .zv-cell--case {
   display: flex;
@@ -1279,11 +1295,18 @@
   color: var(--accent);
 }
 
-/* La taille de page : le <select> du paquet, à sa largeur de contenu. */
+/* La taille de page : le SelectMenu du paquet, à sa largeur de contenu
+ * (il prend la largeur de son conteneur par défaut). */
 .zv-grille__taille {
   width: auto;
-  padding-block: 5px;
-  font-size: var(--app-sm);
+}
+
+/* La liste d'un filtre à choix : le .zv-menu du paquet, posé dans
+ * l'enveloppe flottante. Il défile au-delà d'une douzaine d'options plutôt
+ * que de couvrir la page. */
+.zv-grille__liste {
+  max-height: min(320px, 60vh);
+  overflow-y: auto;
 }
 
 /* Le résumé d'une plage (nombres, dates) dans la rangée de filtres : un