@zevra/ui 0.41.0 → 0.43.0

package/dist/grille.js

@@ -0,0 +1,780 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// La grille de données : un tableau qu'on OPÈRE (trier, filtrer, réordonner,
+// élargir, épingler, cocher, exporter), et qui se souvient de sa vue.
+//
+// ⚠️ CE N'EST PAS UN SECOND TABLEAU. TanStack Table calcule, `DataTable`
+// rend (les mêmes .zv-table / .zv-row / .zv-cell que partout), et
+// l'outillage vient des composants du paquet. Ce fichier ne fait que les
+// brancher ensemble. L'arbitrage complet, ce qu'elle fait, ce qu'elle ne
+// fait PAS et pourquoi : DECISIONS.md, « La grille de données ».
+//
+// ⚠️ SOUS-CHEMIN DÉDIÉ, hors du barrel, pour la même raison que
+// `react/table` : TanStack et dnd-kit sont des dépendances OPTIONNELLES.
+//
+//     import { DataGrid } from '@zevra/ui/react/grille'
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { getCoreRowModel, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useDndMonitor, useSensor, useSensors, } from '@dnd-kit/core';
+import { SortableContext, arrayMove, horizontalListSortingStrategy, sortableKeyboardCoordinates, useSortable, } from '@dnd-kit/sortable';
+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 { Menu, MenuItem, Pager, PagerArrow, Popover } from './navigation.js';
+import { Empty } from './feedback.js';
+import { Meta } from './data.js';
+import { cx } from './cx.js';
+export { usePersistedState };
+/** Identifiant réservé de la colonne de cases. */
+export const COLONNE_SELECTION = '__selection';
+/** Les tailles de page proposées au pied. */
+export const TAILLES_PAGE = [25, 50, 100];
+export const TEXTES_GRILLE = {
+    rechercher: 'Rechercher dans le tableau',
+    colonnes: 'Colonnes',
+    colonnesAffichees: 'Colonnes affichées',
+    exporter: 'Exporter',
+    reinitialiser: 'Réinitialiser la vue',
+    filtrer: 'Filtrer',
+    tous: 'Tous',
+    du: 'Du',
+    au: 'Au',
+    min: 'Min.',
+    max: 'Max.',
+    effacer: 'Effacer le filtre',
+    periodes: 'Périodes',
+    aujourdhui: "Aujourd'hui",
+    septJours: '7 derniers jours',
+    trenteJours: '30 derniers jours',
+    ceMois: 'Ce mois-ci',
+    cetteAnnee: 'Cette année',
+    resumeNombres: (min, max) => min && max ? `${min} – ${max}` : min ? `≥ ${min}` : max ? `≤ ${max}` : 'Tous',
+    resumeDates: (du, au) => {
+        const fr = (d) => d.split('-').reverse().join('/');
+        return du && au ? `${fr(du)} → ${fr(au)}` : du ? `dès le ${fr(du)}` : au ? `jusqu'au ${fr(au)}` : 'Toutes';
+    },
+    filtrerColonne: (nom) => `Filtrer la colonne ${nom}`,
+    deplacer: (nom) => `Déplacer la colonne ${nom}`,
+    largeur: (nom) => `Largeur de la colonne ${nom}`,
+    largeurAide: "Glisser pour élargir. Double-clic : largeur d'origine.",
+    epinglerGauche: (nom) => `Épingler ${nom} à gauche`,
+    epinglerDroite: (nom) => `Épingler ${nom} à droite`,
+    detacher: (nom) => `Détacher ${nom}`,
+    aGauche: 'à gauche',
+    aDroite: 'à droite',
+    toutSelectionner: 'Sélectionner toutes les lignes',
+    selectionnerLigne: 'Sélectionner la ligne',
+    choisies: (n) => (n > 1 ? `${n} lignes choisies` : `${n} ligne choisie`),
+    aucuneDonnee: 'Aucune ligne pour le moment.',
+    aucunResultat: 'Aucune ligne ne correspond à ces filtres.',
+    aucuneLigne: 'Aucune ligne.',
+    compte: (debut, fin, total) => (total === 0 ? '0 ligne' : `${debut} – ${fin} sur ${total}`),
+    parPage: (n) => `${n} par page`,
+    lignesParPage: 'Lignes par page',
+    pagination: 'Pagination du tableau',
+    pagePrecedente: 'Page précédente',
+    pageSuivante: 'Page suivante',
+    page: (page, pages) => `p. ${page} / ${pages}`,
+    dndInstructions: 'Pour déplacer la colonne, appuyez sur Espace, puis sur les flèches gauche et droite. Espace pour la poser, Échap pour annuler.',
+    dndSaisie: (nom) => `Colonne ${nom} saisie.`,
+    dndSurvol: (nom, cible) => `Colonne ${nom} à la place de ${cible}.`,
+    dndHors: (nom) => `Colonne ${nom} hors des colonnes.`,
+    dndPose: (nom, cible) => `Colonne ${nom} posée à la place de ${cible}.`,
+    dndReposee: (nom) => `Colonne ${nom} reposée.`,
+    dndAnnule: (nom) => `Déplacement annulé : la colonne ${nom} reprend sa place.`,
+};
+/* ─── Fonctions pures (testées) ──────────────────────────────────────── */
+/** L'identifiant d'une définition de colonne, tel que TanStack le dérive. */
+export function idDeColonne(c) {
+    if (c.id)
+        return c.id;
+    const cle = c.accessorKey;
+    return typeof cle === 'string' ? cle.replace(/\./g, '_') : undefined;
+}
+const estObjet = (v) => typeof v === 'object' && v !== null && !Array.isArray(v);
+const listeIds = (v, connus) => Array.isArray(v)
+    ? [...new Set(v.filter((x) => typeof x === 'string' && connus.has(x)))]
+    : [];
+/**
+ * Adapte une vue LUE (d'une version précédente du code, ou abîmée) aux
+ * colonnes d'aujourd'hui : un identifiant qui n'existe plus est ignoré, une
+ * colonne nouvelle s'ajoute en FIN d'ordre. Sans cela, ajouter une colonne
+ * au code la ferait disparaître chez tous ceux qui avaient déplacé une
+ * colonne avant. Rend `undefined` si rien n'est exploitable.
+ */
+export function reconcilierVue(lu, defaut, ids) {
+    if (!estObjet(lu))
+        return undefined;
+    const connus = new Set(ids);
+    const ordreLu = listeIds(lu.columnOrder, connus);
+    const columnOrder = ordreLu.length
+        ? [...ordreLu, ...ids.filter((id) => !ordreLu.includes(id))]
+        : defaut.columnOrder;
+    const filtrer = (objet, garder) => {
+        const sortie = {};
+        if (estObjet(objet)) {
+            for (const [k, v] of Object.entries(objet))
+                if (connus.has(k) && garder(v))
+                    sortie[k] = v;
+        }
+        return sortie;
+    };
+    const columnVisibility = estObjet(lu.columnVisibility)
+        ? filtrer(lu.columnVisibility, (v) => typeof v === 'boolean')
+        : defaut.columnVisibility;
+    const columnSizing = filtrer(lu.columnSizing, (v) => typeof v === 'number' && Number.isFinite(v) && v > 0);
+    let columnPinning = defaut.columnPinning;
+    if (estObjet(lu.columnPinning)) {
+        const left = listeIds(lu.columnPinning.left, connus);
+        const right = listeIds(lu.columnPinning.right, connus).filter((id) => !left.includes(id));
+        columnPinning = { left, right };
+    }
+    const sorting = Array.isArray(lu.sorting)
+        ? lu.sorting
+            .filter((s) => estObjet(s) && typeof s.id === 'string' && connus.has(s.id) && typeof s.desc === 'boolean')
+            .map((s) => ({ id: s.id, desc: s.desc }))
+        : defaut.sorting;
+    const pageSize = TAILLES_PAGE.includes(lu.pageSize)
+        ? lu.pageSize
+        : defaut.pageSize;
+    return { columnOrder, columnVisibility, columnSizing, columnPinning, sorting, pageSize };
+}
+/** Une valeur ramenée au jour, `AAAA-MM-JJ`, dans le fuseau du NAVIGATEUR :
+ *  une échéance au 3 mars à 23 h 30 à Paris est le 3 mars, pas le 4 qu'en
+ *  dirait `toISOString()`. Rend `null` pour ce qui n'est pas une date. */
+export function versJour(v) {
+    if (v instanceof Date) {
+        if (Number.isNaN(v.getTime()))
+            return null;
+        const deux = (n) => String(n).padStart(2, '0');
+        return `${v.getFullYear()}-${deux(v.getMonth() + 1)}-${deux(v.getDate())}`;
+    }
+    if (typeof v === 'string' && /^\d{4}-\d{2}-\d{2}/.test(v))
+        return v.slice(0, 10);
+    return null;
+}
+/** Au-delà, une liste déroulante devient plus longue à parcourir qu'un mot
+ *  à taper : la colonne reste en texte libre. */
+export const CHOIX_MAX = 20;
+/**
+ * La famille de filtre d'une colonne, d'après ses valeurs : `meta.filtre`
+ * d'abord, puis un nombre (registre `num`, ou valeurs numériques), une date
+ * (objets `Date` ou chaînes ISO), un CHOIX quand les valeurs distinctes sont
+ * peu nombreuses ET se répètent (sinon chaque ligne serait une option), du
+ * texte enfin.
+ */
+export function typeDeFiltre(meta, valeurs) {
+    if (meta?.filtre !== undefined)
+        return meta.filtre;
+    if (meta?.registre === 'num')
+        return 'nombre';
+    const presentes = valeurs.filter((v) => v != null && v !== '');
+    if (presentes.length === 0)
+        return 'texte';
+    if (presentes.every((v) => typeof v === 'number'))
+        return 'nombre';
+    if (presentes.every((v) => versJour(v) !== null))
+        return 'date';
+    if (meta?.registre !== 'nom' && presentes.every((v) => typeof v === 'string' || typeof v === 'boolean')) {
+        const distinctes = new Set(presentes.map(String)).size;
+        if (distinctes <= CHOIX_MAX && distinctes < presentes.length)
+            return 'choix';
+    }
+    return 'texte';
+}
+const nombre = (s) => {
+    if (s.trim() === '')
+        return null;
+    const n = Number(s.replace(',', '.'));
+    return Number.isFinite(n) ? n : null;
+};
+/** 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());
+        case 'choix':
+            return String(brut ?? '') === filtre.valeur;
+        case 'nombre': {
+            const v = typeof brut === 'number' ? brut : nombre(String(brut ?? ''));
+            const min = nombre(filtre.min);
+            const max = nombre(filtre.max);
+            if (v == null)
+                return min == null && max == null;
+            return (min == null || v >= min) && (max == null || v <= max);
+        }
+        case 'date': {
+            const jourLigne = versJour(brut);
+            if (jourLigne == null)
+                return !filtre.du && !filtre.au;
+            return (!filtre.du || jourLigne >= filtre.du) && (!filtre.au || jourLigne <= filtre.au);
+        }
+        default:
+            return true;
+    }
+};
+filtreGrille.autoRemove = (f) => !f ||
+    (f.type === 'texte' && f.valeur.trim() === '') ||
+    (f.type === 'choix' && f.valeur === '') ||
+    (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
+ *  signe moins en tête, un séparateur décimal. Les lettres ne s'écrivent
+ *  pas, plutôt que de s'écrire puis d'être refusées. */
+export function saisieNombre(texte) {
+    const signe = texte.trimStart().startsWith('-') ? '-' : '';
+    const [entier, ...reste] = texte.replace(/[^\d.,]/g, '').split(/[.,]/);
+    return signe + entier + (reste.length ? ',' + reste.join('') : '');
+}
+/** Une date saisie est-elle COMPLÈTE ? Le champ date natif rend une valeur
+ *  dès que les trois segments sont remplis, y compris pendant qu'on tape
+ *  l'année : « 0002 », puis « 0020 », puis « 0202 ». Filtrer sur ces états
+ *  intermédiaires faisait disparaître puis revenir toutes les lignes à
+ *  chaque chiffre. On n'applique qu'une année plausible. */
+export function dateComplete(v) {
+    return v === '' || (/^\d{4}-\d{2}-\d{2}$/.test(v) && Number(v.slice(0, 4)) >= 1900);
+}
+/** Les raccourcis de période, en jours ISO, calculés depuis `maintenant`. */
+export function periodes(maintenant) {
+    const jour = (d) => versJour(d);
+    const decale = (n) => {
+        const d = new Date(maintenant);
+        d.setDate(d.getDate() - n);
+        return jour(d);
+    };
+    const aujourdhui = jour(maintenant);
+    return {
+        aujourdhui: [aujourdhui, aujourdhui],
+        septJours: [decale(6), aujourdhui],
+        trenteJours: [decale(29), aujourdhui],
+        ceMois: [jour(new Date(maintenant.getFullYear(), maintenant.getMonth(), 1)), aujourdhui],
+        cetteAnnee: [jour(new Date(maintenant.getFullYear(), 0, 1)), aujourdhui],
+    };
+}
+/** L'intitulé lisible d'une colonne : pour les menus, l'export, les annonces. */
+export function libelleColonne(c) {
+    const h = c.columnDef.header;
+    return typeof h === 'string' ? h : (c.columnDef.meta?.label ?? c.id);
+}
+/** Les lignes filtrées et triées, colonnes visibles, en CSV : point-virgule
+ *  (le séparateur qu'Excel attend en français), guillemets doublés, dates en
+ *  ISO. Les VALEURS, pas le rendu : une pastille d'état s'exporte par son
+ *  libellé de données, pas par son HTML. */
+export function versCsv(table) {
+    const colonnes = colonnesAffichees(table).filter((c) => c.id !== COLONNE_SELECTION);
+    const echapper = (v) => {
+        const s = v == null ? '' : v instanceof Date ? v.toISOString().slice(0, 10) : String(v);
+        return /[";\r\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+    };
+    const lignes = table.getPrePaginationRowModel().rows;
+    return [
+        colonnes.map((c) => echapper(libelleColonne(c))).join(';'),
+        ...lignes.map((l) => colonnes.map((c) => echapper(l.getValue(c.id))).join(';')),
+    ].join('\r\n');
+}
+function telecharger(texte, nom) {
+    // BOM UTF-8 : sans lui, Excel ouvre le fichier en Windows-1252 et
+    // « Déposé » devient « Déposé ».
+    const url = URL.createObjectURL(new Blob(['' + texte], { type: 'text/csv;charset=utf-8' }));
+    const lien = document.createElement('a');
+    lien.href = url;
+    lien.download = `${nom}.csv`;
+    lien.click();
+    setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+const appliquer = (u, ancien) => typeof u === 'function' ? u(ancien) : u;
+/* ─── En-tête : poignée de déplacement et poignée de largeur ─────────── */
+// Le glisser-déposer ne bouge que sur l'axe des colonnes : sans ce
+// modificateur, l'en-tête saisi suit le pointeur en hauteur et sort du cadre.
+const axeHorizontal = ({ transform }) => ({ ...transform, y: 0 });
+function EnteteColonne(p) {
+    const colonne = p.entete.column;
+    const table = p.entete.getContext().table;
+    const nom = libelleColonne(colonne);
+    const t = p.t;
+    // Ni la colonne de cases ni une colonne épinglée ne se déplacent : elles
+    // ont une place fixe, et TanStack les rend hors de l'ordre de toute façon.
+    const deplacable = colonne.id !== COLONNE_SELECTION && !colonne.getIsPinned();
+    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({ id: colonne.id, disabled: !deplacable });
+    // Tout l'en-tête se saisit, comme dans un tableur : viser une poignée de
+    // dix pixels n'est pas un geste qu'on devine. Le clic simple TRIE toujours,
+    // le seuil de 4 px du capteur les départage. Le CLAVIER, lui, passe par la
+    // poignée : c'est le seul élément focusable qui porte ce rôle.
+    const { onPointerDown, onKeyDown } = (listeners ?? {});
+    // Au lâcher, le navigateur émet un clic sur ce qui est sous le pointeur :
+    // un intitulé, qui trierait. On l'avale pendant un instant, sur TOUS les
+    // en-têtes, puisque la colonne peut être posée sur n'importe lequel.
+    const finDeplacement = useRef(0);
+    useDndMonitor({
+        onDragEnd: () => {
+            finDeplacement.current = Date.now();
+        },
+        onDragCancel: () => {
+            finDeplacement.current = Date.now();
+        },
+    });
+    const style = {
+        ...p.style,
+        transform: transform ? `translate3d(${Math.round(transform.x)}px, 0, 0)` : undefined,
+        transition,
+    };
+    return (_jsxs("div", { ref: setNodeRef, className: cx(p.className, 'zv-colhead', deplacable && 'zv-colhead--deplacable', isDragging && 'zv-colhead--drag', colonne.columnDef.meta?.classe), style: style, "aria-sort": p['aria-sort'], onPointerDown: deplacable ? onPointerDown : undefined, onClickCapture: (e) => {
+            if (Date.now() - finDeplacement.current < 250) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        }, children: [deplacable && (_jsx("button", { type: "button", ref: setActivatorNodeRef, className: "zv-colhead__grip", ...attributes, onKeyDown: onKeyDown, "aria-label": t.deplacer(nom), children: _jsx(Icon, { nom: "menu", taille: "sm" }) })), p.children, colonne.getCanResize() && _jsx(PoigneeLargeur, { colonne: colonne, table: table, nom: nom, t: t })] }));
+}
+/**
+ * Le redimensionnement est ÉCRIT ICI, pas confié à `header.getResizeHandler()` :
+ * celui-ci part de `getSize()`, qui vaut le plancher (150 px) pour une colonne
+ * souple quelle que soit sa largeur à l'écran, et le premier geste faisait
+ * sauter la colonne. On mesure la largeur RÉELLE à l'appui, puis on écrit
+ * `columnSizing` à chaque mouvement : c'est le mode `onChange`.
+ */
+function PoigneeLargeur({ colonne, table, nom, t, }) {
+    const ref = useRef(null);
+    const depart = useRef(null);
+    const [actif, setActif] = useState(false);
+    const min = colonne.columnDef.minSize ?? 60;
+    const max = colonne.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER;
+    const largeurActuelle = () => table.getState().columnSizing[colonne.id] ??
+        ref.current?.parentElement?.getBoundingClientRect().width ??
+        colonne.getSize();
+    const regler = (largeur) => {
+        const l = Math.round(Math.min(max, Math.max(min, largeur)));
+        table.setColumnSizing((ancien) => ({ ...ancien, [colonne.id]: l }));
+    };
+    const rendre = () => table.setColumnSizing((ancien) => {
+        const { [colonne.id]: _retire, ...reste } = ancien;
+        return reste;
+    });
+    const appui = (e) => {
+        if (e.button !== 0)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        depart.current = { x: e.clientX, largeur: largeurActuelle() };
+        setActif(true);
+    };
+    const mouvement = (e) => {
+        if (!depart.current)
+            return;
+        regler(depart.current.largeur + e.clientX - depart.current.x);
+    };
+    const fin = (e) => {
+        if (!depart.current)
+            return;
+        depart.current = null;
+        setActif(false);
+        if (e.currentTarget.hasPointerCapture(e.pointerId))
+            e.currentTarget.releasePointerCapture(e.pointerId);
+    };
+    const clavier = (e) => {
+        const pas = e.shiftKey ? 50 : 10;
+        if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+            e.preventDefault();
+            regler(largeurActuelle() + (e.key === 'ArrowRight' ? pas : -pas));
+        }
+        else if (e.key === 'Enter' || e.key === 'Delete' || e.key === 'Backspace') {
+            e.preventDefault();
+            rendre();
+        }
+    };
+    const reglee = table.getState().columnSizing[colonne.id];
+    return (_jsx("span", { ref: ref, 
+        // Le motif ARIA du séparateur DÉPLAÇABLE (window splitter) : focusable,
+        // 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 }) {
+    // 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.
+    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 }) }));
+}
+function colonneSelection(t) {
+    return {
+        id: COLONNE_SELECTION,
+        size: 40,
+        minSize: 40,
+        enableSorting: false,
+        enableHiding: false,
+        enableResizing: false,
+        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 })),
+        meta: { classe: 'zv-cell--case' },
+    };
+}
+/* ─── Menu des colonnes : visibilité et épinglage ────────────────────── */
+function MenuColonnes({ table, t }) {
+    const [ouvert, setOuvert] = useState(false);
+    const ancre = useRef(null);
+    // Fermeture au clic extérieur et à Échap, focus rendu au déclencheur :
+    // c'est à l'appelant de le faire, le Menu du paquet ne fait qu'afficher.
+    useEffect(() => {
+        if (!ouvert)
+            return;
+        const document_ = ancre.current?.ownerDocument ?? document;
+        const dehors = (e) => {
+            if (!ancre.current?.contains(e.target))
+                setOuvert(false);
+        };
+        const echap = (e) => {
+            if (e.key === 'Escape') {
+                setOuvert(false);
+                ancre.current?.querySelector('button')?.focus();
+            }
+        };
+        document_.addEventListener('mousedown', dehors);
+        document_.addEventListener('keydown', echap);
+        return () => {
+            document_.removeEventListener('mousedown', dehors);
+            document_.removeEventListener('keydown', echap);
+        };
+    }, [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));
+                    }) }))] }) }));
+}
+/* ─── 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 === '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.
+ *
+ * ⚠️ LE POPOVER SORT DU CADRE, par un portail. `.zv-table` défile
+ * horizontalement, et `overflow-x: auto` force `overflow-y` : un popover
+ * 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.
+ */
+function FiltrePlage({ colonne, type, nom, t, }) {
+    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
+    // instant en haut à gauche de la page.
+    useLayoutEffect(() => {
+        if (!ouvert) {
+            setPosition(null);
+            return;
+        }
+        const placer = () => {
+            const r = declencheur.current?.getBoundingClientRect();
+            if (!r)
+                return;
+            // Le panneau est absolu dans son enveloppe fixe : c'est LUI qu'on
+            // mesure, l'enveloppe n'a pas de largeur.
+            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.
+            setPosition({ top: r.bottom, left: Math.max(0, Math.min(r.left, droite - largeur - 8)) });
+        };
+        placer();
+        const vue = declencheur.current?.ownerDocument.defaultView;
+        vue?.addEventListener('resize', placer);
+        // `true` : le défilement du CADRE du tableau, pas seulement de la page.
+        vue?.addEventListener('scroll', placer, true);
+        return () => {
+            vue?.removeEventListener('resize', placer);
+            vue?.removeEventListener('scroll', placer, true);
+        };
+    }, [ouvert]);
+    useEffect(() => {
+        if (!ouvert)
+            return;
+        const doc = declencheur.current?.ownerDocument ?? document;
+        const dehors = (e) => {
+            const cible = e.target;
+            if (!panneau.current?.contains(cible) && !declencheur.current?.contains(cible))
+                setOuvert(false);
+        };
+        const echap = (e) => {
+            if (e.key === 'Escape') {
+                setOuvert(false);
+                declencheur.current?.focus();
+            }
+        };
+        doc.addEventListener('mousedown', dehors);
+        doc.addEventListener('keydown', echap);
+        return () => {
+            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.
+    const place = position !== null;
+    useEffect(() => {
+        if (ouvert && place)
+            panneau.current?.querySelector('input')?.focus();
+    }, [ouvert, place]);
+    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 ».
+        min: bornes.min || undefined, max: bornes.max || undefined, onChange: (e) => changer(e.target.value) })) : (_jsx(Input, { id: idChamp + suffixe, 
+        // Pas `type="number"` : il accepte « e », « + » et refuse la virgule
+        // 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)] }));
+}
+/* ─── 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, }) {
+    const t = { ...TEXTES_GRILLE, ...textes };
+    const ids = useMemo(() => columns.map((c) => idDeColonne(c)).filter((id) => id != null), [columns]);
+    const cleIds = ids.join('\u0000');
+    // La vue par défaut ne change qu'avec les colonnes : stable sinon, pour
+    // que le hook ne la prenne pas pour une vue nouvelle à chaque rendu.
+    const defaut = useMemo(() => ({
+        columnOrder: ids,
+        columnVisibility: Object.fromEntries((vueInitiale?.masquees ?? []).map((id) => [id, false])),
+        columnSizing: {},
+        columnPinning: {
+            left: vueInitiale?.epingleesGauche ?? [],
+            right: vueInitiale?.epingleesDroite ?? [],
+        },
+        sorting: vueInitiale?.tri ?? [],
+        pageSize: parPage || TAILLES_PAGE[0],
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [cleIds, JSON.stringify(vueInitiale ?? null), parPage]);
+    const reconcilier = useCallback((lu, d) => reconcilierVue(lu, d, ids), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [cleIds]);
+    const [vue, setVue, reinitialiserVue] = usePersistedState(`table:${tableId}:v1`, defaut, reconcilier);
+    const [columnFilters, setColumnFilters] = useState([]);
+    const [globalFilter, setGlobalFilter] = useState('');
+    const [rowSelection, setRowSelection] = useState({});
+    const [pageIndex, setPageIndex] = useState(0);
+    const champ = (k) => (u) => setVue((v) => ({ ...v, [k]: appliquer(u, v[k]) }));
+    // 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,
+        right: vue.columnPinning.right,
+    };
+    const pagination = {
+        pageIndex,
+        pageSize: parPage === false ? Math.max(data.length, 1) : vue.pageSize,
+    };
+    const colonnes = useMemo(() => {
+        const avecFiltre = columns.map((c) => (c.filterFn ? c : { ...c, filterFn: filtreGrille }));
+        return selection ? [colonneSelection(t), ...avecFiltre] : avecFiltre;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [columns, selection, t.toutSelectionner, t.selectionnerLigne]);
+    const table = useReactTable({
+        data,
+        columns: colonnes,
+        getRowId,
+        state: {
+            columnOrder: vue.columnOrder,
+            columnVisibility: vue.columnVisibility,
+            columnSizing: vue.columnSizing,
+            columnPinning: pinning,
+            sorting: vue.sorting,
+            columnFilters,
+            globalFilter,
+            rowSelection,
+            pagination,
+        },
+        defaultColumn: { size: 150, minSize: 60 },
+        onColumnOrderChange: champ('columnOrder'),
+        onColumnVisibilityChange: champ('columnVisibility'),
+        onColumnSizingChange: champ('columnSizing'),
+        onSortingChange: champ('sorting'),
+        onColumnPinningChange: (u) => setVue((v) => {
+            const actuel = {
+                left: selection ? [COLONNE_SELECTION, ...(v.columnPinning.left ?? [])] : v.columnPinning.left,
+                right: v.columnPinning.right,
+            };
+            const n = appliquer(u, actuel);
+            return {
+                ...v,
+                columnPinning: {
+                    left: (n.left ?? []).filter((id) => id !== COLONNE_SELECTION),
+                    right: (n.right ?? []).filter((id) => id !== COLONNE_SELECTION),
+                },
+            };
+        }),
+        onColumnFiltersChange: setColumnFilters,
+        onGlobalFilterChange: setGlobalFilter,
+        onRowSelectionChange: setRowSelection,
+        onPaginationChange: (u) => {
+            const n = appliquer(u, pagination);
+            setPageIndex(n.pageIndex);
+            if (parPage !== false && n.pageSize !== vue.pageSize) {
+                setVue((v) => ({ ...v, pageSize: n.pageSize }));
+            }
+        },
+        enableRowSelection: selection,
+        enableMultiSort: true,
+        enableColumnResizing: true,
+        columnResizeMode: 'onChange',
+        enableColumnPinning: true,
+        globalFilterFn: 'includesString',
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getFacetedRowModel: getFacetedRowModel(),
+        getFacetedUniqueValues: getFacetedUniqueValues(),
+    });
+    // La sélection se remonte en LIGNES, pas en identifiants : c'est ce que
+    // l'app veut traiter (supprimer, exporter, assigner).
+    const surSelection = useRef(onSelectionChange);
+    surSelection.current = onSelectionChange;
+    useEffect(() => {
+        surSelection.current?.(table.getSelectedRowModel().rows.map((r) => r.original));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [rowSelection]);
+    // 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();
+    useEffect(() => {
+        if (pageIndex > 0 && pageIndex >= nbPages)
+            setPageIndex(Math.max(0, nbPages - 1));
+    }, [pageIndex, nbPages]);
+    const reinitialiser = () => {
+        reinitialiserVue();
+        setColumnFilters([]);
+        setGlobalFilter('');
+        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.
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    const deplacables = table.getCenterVisibleLeafColumns().map((c) => c.id);
+    const nomDe = (id) => {
+        const c = table.getColumn(String(id));
+        return c ? libelleColonne(c) : String(id);
+    };
+    const annonces = {
+        onDragStart: ({ active }) => t.dndSaisie(nomDe(active.id)),
+        onDragOver: ({ active, over }) => over ? t.dndSurvol(nomDe(active.id), nomDe(over.id)) : t.dndHors(nomDe(active.id)),
+        onDragEnd: ({ active, over }) => over ? t.dndPose(nomDe(active.id), nomDe(over.id)) : t.dndReposee(nomDe(active.id)),
+        onDragCancel: ({ active }) => t.dndAnnule(nomDe(active.id)),
+    };
+    const finDeplacement = ({ active, over }) => {
+        if (!over || active.id === over.id)
+            return;
+        table.setColumnOrder((ordre) => {
+            const depuis = ordre.indexOf(String(active.id));
+            const vers = ordre.indexOf(String(over.id));
+            return depuis < 0 || vers < 0 ? ordre : arrayMove(ordre, depuis, vers);
+        });
+    };
+    /* Rangée de filtres. La famille de chaque colonne se déduit des données
+     * BRUTES (le modèle de base, pas le filtré) : sinon un filtre qui ne laisse
+     * qu'une valeur ferait changer la colonne de famille sous le doigt. */
+    const lignesBase = table.getCoreRowModel().flatRows;
+    const types = useMemo(() => {
+        const sortie = {};
+        for (const c of table.getAllLeafColumns()) {
+            if (c.id === COLONNE_SELECTION)
+                continue;
+            sortie[c.id] = typeDeFiltre(c.columnDef.meta, lignesBase.map((l) => l.getValue(c.id)));
+        }
+        return sortie;
+        // 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) => {
+            const pin = epinglage(c, table);
+            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;
+    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" })] })] }))] }));
+}
+//# sourceMappingURL=grille.js.map