@zevra/ui 0.43.0 → 0.44.0

package/dist/grille.js

@@ -22,10 +22,12 @@ import { DataTable, colonnesAffichees, epinglage } from './data-table.js';
 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';
+import { Mono } from './typography.js';
 import { cx } from './cx.js';
 export { usePersistedState };
 /** Identifiant réservé de la colonne de cases. */
@@ -45,6 +47,11 @@ export const TEXTES_GRILLE = {
     min: 'Min.',
     max: 'Max.',
     effacer: 'Effacer le filtre',
+    effacerFiltres: 'Effacer les filtres',
+    toutAfficher: 'Tout afficher',
+    aucun: 'Aucun',
+    rechercherValeur: 'Rechercher une valeur',
+    aucuneValeur: 'Aucune valeur.',
     periodes: 'Périodes',
     aujourdhui: "Aujourd'hui",
     septJours: '7 derniers jours',
@@ -191,15 +198,22 @@ const nombre = (s) => {
     const n = Number(s.replace(',', '.'));
     return Number.isFinite(n) ? n : null;
 };
+/** Sans casse ni accents : « decision » trouve « Décision ». */
+export function normaliser(v) {
+    return String(v ?? '')
+        .toLowerCase()
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '');
+}
 /** Le filtre de toutes les colonnes de la grille : il lit la FORME de la
  *  valeur, pas la colonne. Bornes comprises. */
 export const filtreGrille = (ligne, colonne, filtre) => {
     const brut = ligne.getValue(colonne);
     switch (filtre?.type) {
         case 'texte':
-            return String(brut ?? '').toLowerCase().includes(filtre.valeur.trim().toLowerCase());
+            return normaliser(brut).includes(normaliser(filtre.valeur.trim()));
         case 'choix':
-            return String(brut ?? '') === filtre.valeur;
+            return filtre.valeurs.includes(String(brut ?? ''));
         case 'nombre': {
             const v = typeof brut === 'number' ? brut : nombre(String(brut ?? ''));
             const min = nombre(filtre.min);
@@ -220,7 +234,7 @@ export const filtreGrille = (ligne, colonne, filtre) => {
 };
 filtreGrille.autoRemove = (f) => !f ||
     (f.type === 'texte' && f.valeur.trim() === '') ||
-    (f.type === 'choix' && f.valeur === '') ||
+    (f.type === 'choix' && f.valeurs.length === 0) ||
     (f.type === 'nombre' && f.min === '' && f.max === '') ||
     (f.type === 'date' && f.du === '' && f.au === '');
 /** Ne garde d'une saisie que ce qui peut faire un nombre : chiffres, un
@@ -393,21 +407,22 @@ function PoigneeLargeur({ colonne, table, nom, t, }) {
         // une valeur, et les flèches pour la changer.
         role: "separator", "aria-orientation": "vertical", "aria-label": t.largeur(nom), "aria-valuenow": Math.round(reglee ?? colonne.getSize()), "aria-valuemin": min, tabIndex: 0, title: t.largeurAide, className: cx('zv-colhead__resize', actif && 'zv-colhead__resize--actif'), onPointerDown: appui, onPointerMove: mouvement, onPointerUp: fin, onPointerCancel: fin, onDoubleClick: rendre, onKeyDown: clavier, onClick: (e) => e.stopPropagation() }));
 }
-/* ─── Cases de sélection ─────────────────────────────────────────────── */
-function CaseTout({ table, t }) {
+function CaseTout({ table, t, options }) {
     // Une enveloppe plutôt qu'une ref sur la case : `Checkbox` ne transmet
     // pas de ref sous React 18, que le paquet accepte encore.
     const ref = useRef(null);
     const partiel = table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected();
     // `indeterminate` n'a pas d'attribut HTML : seule la propriété DOM existe.
+    // Sans elle, « 3 sur 40 cochées » ressemble à « aucune ».
     useEffect(() => {
         const caseTout = ref.current?.querySelector('input');
         if (caseTout)
             caseTout.indeterminate = partiel;
     }, [partiel]);
-    return (_jsx("span", { ref: ref, className: "zv-cell--case", children: _jsx(Checkbox, { checked: table.getIsAllRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler(), "aria-label": t.toutSelectionner }) }));
+    const aucune = !table.getPrePaginationRowModel().rows.some((r) => r.getCanSelect());
+    return (_jsx("span", { ref: ref, className: "zv-cell--case", children: _jsx(Checkbox, { checked: table.getIsAllRowsSelected(), disabled: aucune || options.current?.desactivee, onChange: table.getToggleAllRowsSelectedHandler(), "aria-label": t.toutSelectionner, title: t.toutSelectionner }) }));
 }
-function colonneSelection(t) {
+function colonneSelection(t, options) {
     return {
         id: COLONNE_SELECTION,
         size: 40,
@@ -418,11 +433,13 @@ function colonneSelection(t) {
         enableColumnFilter: false,
         enableGlobalFilter: false,
         enablePinning: false,
-        header: ({ table }) => _jsx(CaseTout, { table: table, t: t }),
-        cell: ({ row }) => (_jsx(Checkbox, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), 
-            // La case vit dans une ligne cliquable : sans ces deux arrêts, cocher
-            // ouvrirait aussi la ligne, et Espace l'ouvrirait au clavier.
-            onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), "aria-label": t.selectionnerLigne })),
+        header: ({ table }) => _jsx(CaseTout, { table: table, t: t, options: options }),
+        // Une ligne qui ne se sélectionne pas n'a PAS de case : une case grisée
+        // promettrait une action qui n'existe pas pour elle.
+        cell: ({ row }) => row.getCanSelect() ? (_jsx(Checkbox, { checked: row.getIsSelected(), disabled: options.current?.desactivee, onChange: row.getToggleSelectedHandler(), 
+            // La case vit dans une ligne cliquable : sans ces deux arrêts,
+            // cocher ouvrirait aussi la ligne, et Espace l'ouvrirait au clavier.
+            onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), "aria-label": options.current?.label?.(row.original) ?? t.selectionnerLigne })) : null,
         meta: { classe: 'zv-cell--case' },
     };
 }
@@ -454,74 +471,51 @@ function MenuColonnes({ table, t }) {
         };
     }, [ouvert]);
     const colonnes = table.getAllLeafColumns().filter((c) => c.id !== COLONNE_SELECTION);
-    return (_jsx("div", { ref: ancre, children: _jsxs(SelectAnchor, { children: [_jsx(Button, { variante: "fantome", compact: true, icone: "reglages", "aria-expanded": ouvert, "aria-haspopup": "true", onClick: () => setOuvert((o) => !o), children: t.colonnes }), ouvert && (_jsx(Menu, { role: "group", "aria-label": t.colonnesAffichees, className: "zv-grille__menu", children: colonnes.map((c) => {
-                        const nom = libelleColonne(c);
-                        const cote = c.getIsPinned();
-                        const suivant = cote === false ? 'left' : cote === 'left' ? 'right' : false;
-                        return (_jsxs("div", { className: "zv-grille__menu-ligne", children: [_jsxs("label", { className: "zv-menu__item zv-grille__menu-case", children: [_jsx(Checkbox, { checked: c.getIsVisible(), disabled: !c.getCanHide(), onChange: c.getToggleVisibilityHandler() }), _jsx("span", { children: nom }), cote && (_jsx(Meta, { taille: "sm", children: cote === 'left' ? t.aGauche : t.aDroite }))] }), c.getCanPin() && (_jsx(IconButton, { icone: "epingle", taille: "sm", className: "zv-grille__epingle", "aria-pressed": cote !== false, label: suivant === 'left'
-                                        ? t.epinglerGauche(nom)
-                                        : suivant === 'right'
-                                            ? t.epinglerDroite(nom)
-                                            : t.detacher(nom), onClick: () => c.pin(suivant) }))] }, c.id));
-                    }) }))] }) }));
+    return (_jsx("div", { ref: ancre, children: _jsxs(SelectAnchor, { children: [_jsx(Button, { variante: "fantome", compact: true, icone: "reglages", "aria-expanded": ouvert, "aria-haspopup": "true", onClick: () => setOuvert((o) => !o), children: t.colonnes }), ouvert && (_jsxs(Menu, { role: "group", "aria-label": t.colonnesAffichees, className: "zv-grille__menu", children: [colonnes.some((c) => !c.getIsVisible()) && (_jsx(Button, { variante: "fantome", compact: true, onClick: () => table.setColumnVisibility((v) => Object.fromEntries(Object.keys(v).map((k) => [k, true]))), children: t.toutAfficher })), colonnes.map((c) => {
+                            const nom = libelleColonne(c);
+                            const cote = c.getIsPinned();
+                            const suivant = cote === false ? 'left' : cote === 'left' ? 'right' : false;
+                            return (_jsxs("div", { className: "zv-grille__menu-ligne", children: [_jsxs("label", { className: "zv-menu__item zv-grille__menu-case", children: [_jsx(Checkbox, { checked: c.getIsVisible(), disabled: !c.getCanHide(), onChange: c.getToggleVisibilityHandler() }), _jsx("span", { children: nom }), cote && (_jsx(Meta, { taille: "sm", children: cote === 'left' ? t.aGauche : t.aDroite }))] }), c.getCanPin() && (_jsx(IconButton, { icone: "epingle", taille: "sm", className: "zv-grille__epingle", "aria-pressed": cote !== false, label: suivant === 'left'
+                                            ? t.epinglerGauche(nom)
+                                            : suivant === 'right'
+                                                ? t.epinglerDroite(nom)
+                                                : t.detacher(nom), onClick: () => c.pin(suivant) }))] }, c.id));
+                        })] }))] }) }));
 }
 /* ─── Filtres de colonne ────────────────────────────────────────────── */
 function FiltreColonne({ colonne, type, t, }) {
     const nom = libelleColonne(colonne);
     const filtre = colonne.getFilterValue();
-    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 (_jsxs(Select, { className: "zv-table__filtre", value: valeur, onChange: (e) => colonne.setFilterValue({ type: 'choix', valeur: e.target.value }), "aria-label": t.filtrerColonne(nom), children: [_jsx("option", { value: "", children: t.tous }), options.map((o) => (_jsx("option", { value: o, children: o }, o)))] }));
-    }
+    if (type === 'choix')
+        return _jsx(FiltreChoix, { colonne: colonne, nom: nom, t: t });
     if (type === 'nombre' || type === 'date') {
         return _jsx(FiltrePlage, { colonne: colonne, type: type, nom: nom, t: t });
     }
     return (_jsx(Input, { className: "zv-table__filtre", value: filtre?.type === 'texte' ? filtre.valeur : '', onChange: (e) => colonne.setFilterValue({ type: 'texte', valeur: e.target.value }), placeholder: t.filtrer, "aria-label": t.filtrerColonne(nom) }));
 }
 /**
- * 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({ colonne, type, nom, t, }) {
+function FiltreFlottant({ libelle, resume, vide, icone, role, panneau: contenu, }) {
     const [ouvert, setOuvert] = useState(false);
     const [position, setPosition] = useState(null);
     const declencheur = useRef(null);
     const panneau = useRef(null);
-    const idChamp = useId();
-    const filtre = colonne.getFilterValue();
-    const [a, b] = filtre?.type === 'nombre' ? [filtre.min, filtre.max] : filtre?.type === 'date' ? [filtre.du, filtre.au] : ['', ''];
-    const ecrire = (bas, haut) => 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([a, b]);
-    useEffect(() => {
-        setBrouillon([a, b]);
-    }, [a, b]);
-    const saisir = (bas, haut) => {
-        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
+    const fermer = useCallback(() => {
+        setOuvert(false);
+        declencheur.current?.focus();
+    }, []);
+    // Placé AVANT l'affichage (layout effect) : sinon le panneau apparaît un
     // instant en haut à gauche de la page.
     useLayoutEffect(() => {
         if (!ouvert) {
@@ -537,8 +531,8 @@ function FiltrePlage({ colonne, type, nom, t, }) {
             const largeur = panneau.current?.firstElementChild?.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();
@@ -561,10 +555,8 @@ function FiltrePlage({ colonne, type, nom, t, }) {
                 setOuvert(false);
         };
         const echap = (e) => {
-            if (e.key === 'Escape') {
-                setOuvert(false);
-                declencheur.current?.focus();
-            }
+            if (e.key === 'Escape')
+                fermer();
         };
         doc.addEventListener('mousedown', dehors);
         doc.addEventListener('keydown', echap);
@@ -572,15 +564,70 @@ function FiltrePlage({ colonne, type, nom, t, }) {
             doc.removeEventListener('mousedown', dehors);
             doc.removeEventListener('keydown', echap);
         };
-    }, [ouvert]);
-    // 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.
+    }, [ouvert, fermer]);
+    // 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('[aria-selected="true"]') ?? p?.querySelector('input, button'))?.focus();
     }, [ouvert, place]);
+    return (_jsxs(_Fragment, { children: [_jsxs("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), children: [_jsx("span", { className: "zv-colhead__label", children: resume }), _jsx(Icon, { nom: icone, taille: "sm", discret: true })] }), ouvert &&
+                createPortal(_jsx("div", { ref: panneau, className: "zv-grille__flottant", style: position ? { top: position.top, left: position.left } : { visibility: 'hidden' }, children: contenu(fermer) }), declencheur.current?.ownerDocument.body ?? document.body)] }));
+}
+function FiltreChoix({ colonne, nom, t }) {
+    const filtre = colonne.getFilterValue();
+    const choisies = filtre?.type === 'choix' ? filtre.valeurs : [];
+    // Les valeurs du modèle FACETTÉ, avec leur nombre de lignes : celles que
+    // les autres filtres laissent encore passer. Une option qui ne rendrait
+    // aucune ligne n'est pas offerte, sauf si elle est déjà cochée : sinon
+    // la liste mentirait sur ce qui filtre.
+    const comptes = colonne.getFacetedUniqueValues();
+    const options = [...comptes.keys()]
+        .filter((v) => v != null && v !== '')
+        .map(String)
+        .sort((a, b) => a.localeCompare(b, 'fr', { numeric: true }));
+    for (const c of choisies)
+        if (!options.includes(c))
+            options.unshift(c);
+    const ecrire = (valeurs) => colonne.setFilterValue({ type: 'choix', valeurs });
+    const resume = choisies.length === 0 ? t.tous : choisies.length === 1 ? (choisies[0] ?? t.tous) : `${choisies.length} / ${options.length}`;
+    return (_jsx(FiltreFlottant, { libelle: t.filtrerColonne(nom), resume: resume, vide: choisies.length === 0, icone: "chevron-bas", role: "dialog", panneau: () => _jsx(ListeChoix, { options: options, comptes: comptes, choisies: choisies, ecrire: ecrire, nom: nom, t: t }) }));
+}
+/** Plusieurs valeurs à la fois (« Acte » OU « Contrat ») : des cases, avec
+ *  le nombre de lignes de chacune, une recherche au-delà de huit options,
+ *  et « Tout » / « Aucun » sur ce que la recherche montre. */
+function ListeChoix({ options, comptes, choisies, ecrire, nom, t, }) {
+    const [q, setQ] = useState('');
+    const vues = q.trim() ? options.filter((o) => normaliser(o).includes(normaliser(q.trim()))) : options;
+    return (_jsxs(Popover, { className: "zv-grille__plage", role: "dialog", "aria-label": t.filtrerColonne(nom), children: [options.length > 8 && (_jsx(Search, { value: q, onChange: (e) => setQ(e.target.value), placeholder: t.rechercherValeur, "aria-label": t.rechercherValeur })), _jsxs("div", { className: "zv-grille__menu-ligne", children: [_jsx(Button, { variante: "fantome", compact: true, onClick: () => ecrire([...new Set([...choisies, ...vues])]), children: t.tous }), _jsx(Button, { variante: "fantome", compact: true, onClick: () => ecrire(choisies.filter((c) => !vues.includes(c))), children: t.aucun })] }), _jsxs("div", { className: "zv-grille__liste", role: "group", "aria-label": t.filtrerColonne(nom), children: [vues.map((o) => {
+                        const pris = choisies.includes(o);
+                        return (_jsxs("label", { className: "zv-menu__item zv-grille__menu-case", children: [_jsx(Checkbox, { checked: pris, onChange: () => ecrire(pris ? choisies.filter((c) => c !== o) : [...choisies, o]) }), _jsx("span", { className: "zv-colhead__label", children: o }), _jsx(Meta, { taille: "sm", discret: true, className: "zv-grille__compte", children: comptes.get(o) ?? 0 })] }, o));
+                    }), vues.length === 0 && _jsx(Meta, { taille: "sm", children: t.aucuneValeur })] }), choisies.length > 0 && (_jsx(Button, { variante: "fantome", compact: true, icone: "fermer", onClick: () => ecrire([]), children: t.effacer }))] }));
+}
+function FiltrePlage({ colonne, type, nom, t, }) {
+    const idChamp = useId();
+    const filtre = colonne.getFilterValue();
+    const [a, b] = filtre?.type === 'nombre' ? [filtre.min, filtre.max] : filtre?.type === 'date' ? [filtre.du, filtre.au] : ['', ''];
+    const ecrire = (bas, haut) => 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([a, b]);
+    useEffect(() => {
+        setBrouillon([a, b]);
+    }, [a, b]);
+    const saisir = (bas, haut) => {
+        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, changer, suffixe, bornes) => type === 'date' ? (_jsx(Input, { id: idChamp + suffixe, type: "date", value: valeur, 
         // Le calendrier natif grise ce qui rendrait la plage incohérente :
         // « Au » ne peut pas précéder « Du ».
@@ -589,15 +636,13 @@ function FiltrePlage({ colonne, type, nom, t, }) {
         // française selon la langue du système. Le clavier numérique vient
         // d'`inputMode`, le refus des lettres de `saisieNombre`.
         inputMode: "decimal", autoComplete: "off", value: valeur, onChange: (e) => changer(saisieNombre(e.target.value)) }));
-    return (_jsxs(_Fragment, { children: [_jsxs("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), children: [_jsx("span", { className: "zv-colhead__label", children: resume }), _jsx(Icon, { nom: type === 'date' ? 'calendrier' : 'filtre', taille: "sm", discret: true })] }), ouvert &&
-                createPortal(_jsx("div", { ref: panneau, role: "dialog", "aria-label": t.filtrerColonne(nom), className: "zv-grille__flottant", style: position ? { top: position.top, left: position.left } : { visibility: 'hidden' }, children: _jsxs(Popover, { className: "zv-grille__plage", children: [type === 'date' && (_jsx("div", { className: "zv-grille__periodes", role: "group", "aria-label": t.periodes, children: ['aujourdhui', 'septJours', 'trenteJours', 'ceMois', 'cetteAnnee'].map((cle) => {
-                                    const [du, au] = periodes(new Date())[cle];
-                                    const actif = a === du && b === au;
-                                    return (_jsx(MenuItem, { actif: actif, onClick: () => saisir(du, au), children: t[cle] }, cle));
-                                }) })), _jsxs("div", { className: "zv-grille__bornes", children: [_jsx(Field, { label: type === 'date' ? t.du : t.min, htmlFor: idChamp + 'a', children: champ(brouillon[0], (v) => saisir(v, brouillon[1]), 'a', { max: brouillon[1] }) }), _jsx(Field, { label: type === 'date' ? t.au : t.max, htmlFor: idChamp + 'b', children: champ(brouillon[1], (v) => saisir(brouillon[0], v), 'b', { min: brouillon[0] }) })] }), !vide && (_jsx(Button, { variante: "fantome", compact: true, icone: "fermer", onClick: () => saisir('', ''), children: t.effacer }))] }) }), declencheur.current?.ownerDocument.body ?? document.body)] }));
+    return (_jsx(FiltreFlottant, { libelle: t.filtrerColonne(nom), resume: resume, vide: vide, icone: type === 'date' ? 'calendrier' : 'filtre', role: "dialog", panneau: () => (_jsxs(Popover, { className: "zv-grille__plage", role: "dialog", "aria-label": t.filtrerColonne(nom), children: [type === 'date' && (_jsx("div", { className: "zv-grille__periodes", role: "group", "aria-label": t.periodes, children: ['aujourdhui', 'septJours', 'trenteJours', 'ceMois', 'cetteAnnee'].map((cle) => {
+                        const [du, au] = periodes(new Date())[cle];
+                        return (_jsx(MenuItem, { role: "button", actif: a === du && b === au, "aria-selected": undefined, "aria-pressed": a === du && b === au, onClick: () => saisir(du, au), children: t[cle] }, cle));
+                    }) })), _jsxs("div", { className: "zv-grille__bornes", children: [_jsx(Field, { label: type === 'date' ? t.du : t.min, htmlFor: idChamp + 'a', children: champ(brouillon[0], (v) => saisir(v, brouillon[1]), 'a', { max: brouillon[1] }) }), _jsx(Field, { label: type === 'date' ? t.au : t.max, htmlFor: idChamp + 'b', children: champ(brouillon[1], (v) => saisir(brouillon[0], v), 'b', { min: brouillon[0] }) })] }), !vide && (_jsx(Button, { variante: "fantome", compact: true, icone: "fermer", onClick: () => saisir('', ''), children: t.effacer }))] })) }));
 }
 /* ─── La grille ──────────────────────────────────────────────────────── */
-export function DataGrid({ tableId, data, columns, onRowClick, getRowId, selection = false, onSelectionChange, parPage = 25, recherche = true, filtres = true, exportCsv = true, vueInitiale, vide, outils, textes, className, }) {
+export function DataGrid({ tableId, data, columns, onRowClick, ligneActive, getRowId, selection = false, onSelectionChange, triServeur, onRowContextMenu, onRowDoubleClick, onRowDragStart, ligneSaisie, groupe, rang, pied, dense, remplir, apresLignes, envelopperTableau, barre = true, champRecherche, visibilite, onVisibilite, onLignesAffichees, parPage = 25, recherche = true, filtres = true, exportCsv = true, vueInitiale, vide, outils, textes, className, }) {
     const t = { ...TEXTES_GRILLE, ...textes };
     const ids = useMemo(() => columns.map((c) => idDeColonne(c)).filter((id) => id != null), [columns]);
     const cleIds = ids.join('\u0000');
@@ -622,34 +667,73 @@ export function DataGrid({ tableId, data, columns, onRowClick, getRowId, selecti
     const [vue, setVue, reinitialiserVue] = usePersistedState(`table:${tableId}:v1`, defaut, reconcilier);
     const [columnFilters, setColumnFilters] = useState([]);
     const [globalFilter, setGlobalFilter] = useState('');
-    const [rowSelection, setRowSelection] = useState({});
+    const [selectionInterne, setSelectionInterne] = useState({});
     const [pageIndex, setPageIndex] = useState(0);
     const champ = (k) => (u) => setVue((v) => ({ ...v, [k]: appliquer(u, v[k]) }));
+    /* Sélection. Tenue par la grille (`true`) ou par l'app (un objet) : dans le
+     * second cas, l'état de TanStack se DÉDUIT des clés de l'app à chaque rendu,
+     * et chaque changement lui est rendu en clés. */
+    const avecCases = selection !== false;
+    const externe = typeof selection === 'object' ? selection : null;
+    const idLigne = (l, i) => getRowId?.(l, i) ?? String(i);
+    const cleDe = (l, i) => externe?.cle?.(l) ?? idLigne(l, i);
+    const rowSelection = externe
+        ? Object.fromEntries(
+        // Une ligne sans case ne se peint pas cochée, même si sa clé est
+        // dans l'ensemble de l'app : on la verrait choisie sans pouvoir
+        // la décocher.
+        data.flatMap((l, i) => externe.choisies.has(cleDe(l, i)) && externe.selectionnable?.(l) !== false
+            ? [[idLigne(l, i), true]]
+            : []))
+        : selectionInterne;
+    const surSelectionLignes = (u) => {
+        if (!externe)
+            return setSelectionInterne(u);
+        const n = appliquer(u, rowSelection);
+        const suite = new Set(externe.choisies);
+        // Seules les clés des lignes PRÉSENTES changent : une ligne cochée puis
+        // filtrée hors de l'écran, ou sur une autre page, reste cochée.
+        data.forEach((l, i) => {
+            if (externe.selectionnable?.(l) === false)
+                return;
+            const cle = cleDe(l, i);
+            if (n[idLigne(l, i)])
+                suite.add(cle);
+            else
+                suite.delete(cle);
+        });
+        externe.onChoisir(suite);
+    };
     // La colonne de cases est épinglée à gauche, toujours, et n'entre pas dans
     // la vue enregistrée : elle dépend de la prop, pas de l'utilisateur.
     const pinning = {
-        left: selection ? [COLONNE_SELECTION, ...(vue.columnPinning.left ?? [])] : vue.columnPinning.left,
+        left: avecCases ? [COLONNE_SELECTION, ...(vue.columnPinning.left ?? [])] : vue.columnPinning.left,
         right: vue.columnPinning.right,
     };
     const pagination = {
         pageIndex,
         pageSize: parPage === false ? Math.max(data.length, 1) : vue.pageSize,
     };
+    // L'option de sélection est lue AU RENDU par les cases : les colonnes n'ont
+    // pas à se recalculer à chaque case cochée.
+    const optionsCases = useRef(externe);
+    optionsCases.current = externe;
     const colonnes = useMemo(() => {
         const avecFiltre = columns.map((c) => (c.filterFn ? c : { ...c, filterFn: filtreGrille }));
-        return selection ? [colonneSelection(t), ...avecFiltre] : avecFiltre;
+        return avecCases ? [colonneSelection(t, optionsCases), ...avecFiltre] : avecFiltre;
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [columns, selection, t.toutSelectionner, t.selectionnerLigne]);
+    }, [columns, avecCases, t.toutSelectionner, t.selectionnerLigne]);
+    const visibiliteCourante = visibilite ?? vue.columnVisibility;
     const table = useReactTable({
         data,
         columns: colonnes,
         getRowId,
         state: {
             columnOrder: vue.columnOrder,
-            columnVisibility: vue.columnVisibility,
+            columnVisibility: visibiliteCourante,
             columnSizing: vue.columnSizing,
             columnPinning: pinning,
-            sorting: vue.sorting,
+            sorting: triServeur ? triServeur.tri : vue.sorting,
             columnFilters,
             globalFilter,
             rowSelection,
@@ -657,12 +741,17 @@ export function DataGrid({ tableId, data, columns, onRowClick, getRowId, selecti
         },
         defaultColumn: { size: 150, minSize: 60 },
         onColumnOrderChange: champ('columnOrder'),
-        onColumnVisibilityChange: champ('columnVisibility'),
+        onColumnVisibilityChange: onVisibilite
+            ? (u) => onVisibilite((v) => appliquer(u, v))
+            : champ('columnVisibility'),
         onColumnSizingChange: champ('columnSizing'),
-        onSortingChange: champ('sorting'),
+        onSortingChange: triServeur
+            ? (u) => triServeur.onTri(appliquer(u, triServeur.tri))
+            : champ('sorting'),
+        manualSorting: Boolean(triServeur),
         onColumnPinningChange: (u) => setVue((v) => {
             const actuel = {
-                left: selection ? [COLONNE_SELECTION, ...(v.columnPinning.left ?? [])] : v.columnPinning.left,
+                left: avecCases ? [COLONNE_SELECTION, ...(v.columnPinning.left ?? [])] : v.columnPinning.left,
                 right: v.columnPinning.right,
             };
             const n = appliquer(u, actuel);
@@ -676,7 +765,7 @@ export function DataGrid({ tableId, data, columns, onRowClick, getRowId, selecti
         }),
         onColumnFiltersChange: setColumnFilters,
         onGlobalFilterChange: setGlobalFilter,
-        onRowSelectionChange: setRowSelection,
+        onRowSelectionChange: surSelectionLignes,
         onPaginationChange: (u) => {
             const n = appliquer(u, pagination);
             setPageIndex(n.pageIndex);
@@ -684,14 +773,17 @@ export function DataGrid({ tableId, data, columns, onRowClick, getRowId, selecti
                 setVue((v) => ({ ...v, pageSize: n.pageSize }));
             }
         },
-        enableRowSelection: selection,
+        enableRowSelection: externe?.selectionnable
+            ? (r) => externe.selectionnable(r.original)
+            : avecCases,
         enableMultiSort: true,
         enableColumnResizing: true,
         columnResizeMode: 'onChange',
         enableColumnPinning: true,
-        globalFilterFn: 'includesString',
+        // Sans casse ni accents, comme les filtres de colonne.
+        globalFilterFn: (ligne, colonne, q) => normaliser(ligne.getValue(colonne)).includes(normaliser(String(q).trim())),
         getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
+        getSortedRowModel: triServeur ? undefined : getSortedRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
         getPaginationRowModel: getPaginationRowModel(),
         getFacetedRowModel: getFacetedRowModel(),
@@ -702,9 +794,11 @@ export function DataGrid({ tableId, data, columns, onRowClick, getRowId, selecti
     const surSelection = useRef(onSelectionChange);
     surSelection.current = onSelectionChange;
     useEffect(() => {
+        if (externe)
+            return;
         surSelection.current?.(table.getSelectedRowModel().rows.map((r) => r.original));
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [rowSelection]);
+    }, [selectionInterne]);
     // Une page au-delà de la dernière (filtre resserré, données rechargées)
     // afficherait la ligne d'absence alors que des lignes existent.
     const nbPages = table.getPageCount();
@@ -712,17 +806,22 @@ export function DataGrid({ tableId, data, columns, onRowClick, getRowId, selecti
         if (pageIndex > 0 && pageIndex >= nbPages)
             setPageIndex(Math.max(0, nbPages - 1));
     }, [pageIndex, nbPages]);
-    const reinitialiser = () => {
-        reinitialiserVue();
+    const effacerFiltres = () => {
         setColumnFilters([]);
         setGlobalFilter('');
+    };
+    const reinitialiser = () => {
+        reinitialiserVue();
+        if (onVisibilite)
+            onVisibilite(() => defaut.columnVisibility);
+        effacerFiltres();
         setPageIndex(0);
     };
     /* Glisser-déposer des en-têtes. */
     const idDnd = useId();
     const capteurs = useSensors(
-    // 4 px avant de saisir : sans ce seuil, un simple clic sur la poignée
-    // démarre un déplacement.
+    // 4 px avant de saisir : sans ce seuil, un simple clic sur l'en-tête
+    // démarre un déplacement au lieu de trier.
     useSensor(PointerSensor, { activationConstraint: { distance: 4 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
     const deplacables = table.getCenterVisibleLeafColumns().map((c) => c.id);
     const nomDe = (id) => {
@@ -759,22 +858,62 @@ export function DataGrid({ tableId, data, columns, onRowClick, getRowId, selecti
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [lignesBase, colonnes]);
     const filtrables = table.getVisibleLeafColumns().some((c) => c.getCanFilter() && types[c.id]);
-    const rangeeFiltres = filtres && filtrables ? (_jsx("div", { className: "zv-table__head zv-table__head--filtres", children: colonnesAffichees(table).map((c) => {
+    /** Une rangée qui suit les colonnes affichées (ordre, épinglage) : les
+     *  filtres, la ligne de saisie, le pied. */
+    const rangee = (classe, contenu) => (_jsx("div", { className: classe, children: colonnesAffichees(table).map((c) => {
             const pin = epinglage(c, table);
+            const registre = c.columnDef.meta?.registre;
+            return (_jsx("div", { className: cx('zv-cell', registre === 'num' && 'zv-cell--num', registre === 'nom' && 'zv-cell--name', pin.classes), style: pin.style, children: contenu(c) }, c.id));
+        }) }));
+    const rangeeFiltres = filtres && filtrables
+        ? rangee('zv-table__head zv-table__head--filtres', (c) => {
             const type = c.getCanFilter() ? types[c.id] : false;
-            return (_jsx("div", { className: cx('zv-cell', pin.classes), style: pin.style, children: type && _jsx(FiltreColonne, { colonne: c, type: type, t: t }) }, c.id));
-        }) })) : null;
-    const total = table.getPrePaginationRowModel().rows.length;
+            return type ? _jsx(FiltreColonne, { colonne: c, type: type, t: t }) : null;
+        })
+        : null;
+    /* Lignes : le rang (des lignes gardées en tête), puis les intitulés de
+     * groupe et le pied, calculés sur ce qui est AFFICHÉ. */
+    const lignesTriees = table.getRowModel().rows;
+    const lignesRendues = useMemo(() => {
+        if (!rang)
+            return lignesTriees;
+        return lignesTriees
+            .map((r, i) => ({ r, i, k: rang(r.original) }))
+            .sort((a, b) => a.k - b.k || a.i - b.i)
+            .map((x) => x.r);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [lignesTriees, rang]);
+    const affichees = table.getPrePaginationRowModel().rows.map((r) => r.original);
+    const filtre = columnFilters.length > 0 || globalFilter.trim() !== '';
+    const surAffichees = useRef(onLignesAffichees);
+    surAffichees.current = onLignesAffichees;
+    const signatureAffichees = `${filtre}|${lignesRendues.map((r) => r.id).join('\u0001')}`;
+    useEffect(() => {
+        surAffichees.current?.(lignesRendues.map((r) => r.original), filtre);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [signatureAffichees]);
+    const intercalaire = groupe
+        ? (ligne, precedente) => {
+            const cle = groupe.de(ligne.original);
+            if (precedente && groupe.de(precedente.original) === cle)
+                return null;
+            const membres = lignesRendues.filter((r) => groupe.de(r.original) === cle).map((r) => r.original);
+            return (_jsx("div", { className: "zv-row zv-row--groupe", children: groupe.rendu ? groupe.rendu(cle, membres) : _jsx(Mono, { ton: "label", children: cle }) }));
+        }
+        : undefined;
+    const casesPied = pied && lignesRendues.length > 0 ? pied(affichees) : null;
+    const total = affichees.length;
     const { pageIndex: page, pageSize } = table.getState().pagination;
     const debut = total === 0 ? 0 : page * pageSize + 1;
     const fin = Math.min(total, (page + 1) * pageSize);
-    const nbChoisies = Object.keys(rowSelection).length;
-    const filtre = columnFilters.length > 0 || globalFilter !== '';
-    return (_jsxs("div", { className: cx('zv-grille', className), children: [_jsxs("div", { className: "zv-grille__outils", children: [recherche ? (_jsx(Search, { value: globalFilter, onChange: (e) => setGlobalFilter(e.target.value), placeholder: t.rechercher, "aria-label": t.rechercher })) : (_jsx("span", {})), _jsxs("div", { className: "zv-grille__actions", children: [selection && nbChoisies > 0 && (_jsx(Meta, { children: t.choisies(nbChoisies) })), outils, _jsx(MenuColonnes, { table: table, t: t }), exportCsv !== false && (_jsx(Button, { variante: "fantome", compact: true, icone: "telecharger", onClick: () => telecharger(versCsv(table), typeof exportCsv === 'string' ? exportCsv : tableId), children: t.exporter })), _jsx(Button, { variante: "fantome", compact: true, icone: "rembobiner", onClick: reinitialiser, children: t.reinitialiser })] })] }), _jsx(DndContext, { id: idDnd, sensors: capteurs, collisionDetection: closestCenter, modifiers: [axeHorizontal], onDragEnd: finDeplacement, accessibility: {
-                    announcements: annonces,
-                    screenReaderInstructions: {
-                        draggable: t.dndInstructions,
-                    },
-                }, children: _jsx(SortableContext, { items: deplacables, strategy: horizontalListSortingStrategy, children: _jsx(DataTable, { table: table, className: "zv-table--grille", celluleEntete: (p) => _jsx(EnteteColonne, { ...p, t: t }), sousEntete: rangeeFiltres, onRowClick: onRowClick, vide: vide ?? (_jsx(Empty, { children: data.length === 0 ? t.aucuneDonnee : filtre ? t.aucunResultat : t.aucuneLigne })) }) }) }), parPage !== false && (_jsxs(Pager, { pied: true, "aria-label": t.pagination, children: [_jsx(Meta, { children: t.compte(debut, fin, total) }), _jsxs("div", { className: "zv-grille__pied", children: [_jsx(Select, { className: "zv-grille__taille", "aria-label": t.lignesParPage, value: pageSize, onChange: (e) => table.setPageSize(Number(e.target.value)), children: TAILLES_PAGE.map((taille) => (_jsx("option", { value: taille, children: t.parPage(taille) }, taille))) }), _jsx(PagerArrow, { "aria-label": t.pagePrecedente, desactive: !table.getCanPreviousPage(), onClick: () => table.getCanPreviousPage() && table.previousPage(), children: "\u2039" }), _jsx(Meta, { children: t.page(nbPages === 0 ? 0 : page + 1, nbPages) }), _jsx(PagerArrow, { "aria-label": t.pageSuivante, desactive: !table.getCanNextPage(), onClick: () => table.getCanNextPage() && table.nextPage(), children: "\u203A" })] })] }))] }));
+    const nbChoisies = externe ? externe.choisies.size : Object.keys(selectionInterne).length;
+    const tableau = (_jsx(DndContext, { id: idDnd, sensors: capteurs, collisionDetection: closestCenter, modifiers: [axeHorizontal], onDragEnd: finDeplacement, accessibility: {
+            announcements: annonces,
+            screenReaderInstructions: {
+                draggable: t.dndInstructions,
+            },
+        }, children: _jsx(SortableContext, { items: deplacables, strategy: horizontalListSortingStrategy, children: _jsx(DataTable, { table: table, className: "zv-table--grille", celluleEntete: (p) => _jsx(EnteteColonne, { ...p, t: t }), sousEntete: rangeeFiltres, onRowClick: onRowClick, ligneActive: ligneActive, onRowContextMenu: onRowContextMenu, onRowDoubleClick: onRowDoubleClick, onRowDragStart: onRowDragStart, lignes: rang ? lignesRendues : undefined, intercalaire: intercalaire, avantLignes: ligneSaisie ? rangee('zv-row zv-row--saisie', (c) => ligneSaisie[c.id] ?? null) : undefined, apresLignes: _jsxs(_Fragment, { children: [casesPied && rangee('zv-row zv-row--pied', (c) => casesPied[c.id] ?? null), apresLignes] }), dense: dense, remplir: remplir, vide: vide && !filtre ? (vide) : (_jsxs(Empty, { children: [data.length === 0 ? t.aucuneDonnee : filtre ? t.aucunResultat : t.aucuneLigne, ' ', filtre && (_jsx(Button, { variante: "fantome", compact: true, onClick: effacerFiltres, children: t.effacerFiltres }))] })) }) }) }));
+    return (_jsxs("div", { className: cx('zv-grille', remplir && 'zv-grille--remplir', className), children: [barre && (_jsxs("div", { className: "zv-grille__outils", children: [champRecherche ??
+                        (recherche !== false ? (_jsx(Search, { value: globalFilter, onChange: (e) => setGlobalFilter(e.target.value), placeholder: typeof recherche === 'string' ? recherche : t.rechercher, "aria-label": t.rechercher })) : (_jsx("span", {}))), _jsxs("div", { className: "zv-grille__actions", children: [avecCases && nbChoisies > 0 && _jsx(Meta, { children: t.choisies(nbChoisies) }), outils, !onVisibilite && _jsx(MenuColonnes, { table: table, t: t }), exportCsv !== false && (_jsx(Button, { variante: "fantome", compact: true, icone: "telecharger", onClick: () => telecharger(versCsv(table), typeof exportCsv === 'string' ? exportCsv : tableId), children: t.exporter })), _jsx(Button, { variante: "fantome", compact: true, icone: "rembobiner", onClick: reinitialiser, children: t.reinitialiser })] })] })), envelopperTableau ? envelopperTableau(tableau) : tableau, parPage !== false && (_jsxs(Pager, { pied: true, "aria-label": t.pagination, children: [_jsx(Meta, { children: t.compte(debut, fin, total) }), _jsxs("div", { className: "zv-grille__pied", children: [_jsx(SelectMenu, { className: "zv-grille__taille", label: t.lignesParPage, valeur: String(pageSize), options: TAILLES_PAGE.map((taille) => ({ valeur: String(taille), label: t.parPage(taille) })), onChange: (v) => table.setPageSize(Number(v)) }), _jsx(PagerArrow, { "aria-label": t.pagePrecedente, desactive: !table.getCanPreviousPage(), onClick: () => table.getCanPreviousPage() && table.previousPage(), children: "\u2039" }), _jsx(Meta, { children: t.page(nbPages === 0 ? 0 : page + 1, nbPages) }), _jsx(PagerArrow, { "aria-label": t.pageSuivante, desactive: !table.getCanNextPage(), onClick: () => table.getCanNextPage() && table.nextPage(), children: "\u203A" })] })] }))] }));
 }
 //# sourceMappingURL=grille.js.map