@zevra/ui 0.43.1 → 0.44.1

package/react/use-persisted-state.ts

@@ -27,9 +27,11 @@ import type { Dispatch, SetStateAction } from 'react'
  *
  * Rend `[valeur, setValeur, reinitialiser]` : `reinitialiser` vide la clé et
  * revient à `initial`.
+ *
+ * Une clé `null` : un état ordinaire, qui ne lit ni n'écrit rien.
  */
 export function usePersistedState<S>(
-  key: string,
+  key: string | null,
   initial: S,
   reconcilier?: (lu: unknown, initial: S) => S | undefined,
 ): [S, Dispatch<SetStateAction<S>>, () => void] {
@@ -53,7 +55,7 @@ export function usePersistedState<S>(
   useEffect(() => {
     let valeur: S | undefined
     try {
-      const brut = window.localStorage.getItem(key)
+      const brut = key === null ? null : window.localStorage.getItem(key)
       if (brut != null) {
         const parse: unknown = JSON.parse(brut)
         valeur = reconcilierRef.current
@@ -72,7 +74,7 @@ export function usePersistedState<S>(
   useEffect(() => {
     // Avant la lecture, l'état est `initial` : l'écrire écraserait la vue
     // enregistrée par la vue par défaut, au premier rendu de chaque page.
-    if (!lu) return
+    if (!lu || key === null) return
     const texte = serialiser(etat)
     if (texte === null || texte === enregistre.current) return
     try {
@@ -85,7 +87,7 @@ export function usePersistedState<S>(
 
   const reinitialiser = useCallback(() => {
     try {
-      window.localStorage.removeItem(key)
+      if (key !== null) window.localStorage.removeItem(key)
     } catch {
       // Rien à vider qu'on puisse atteindre : on revient quand même au défaut.
     }

package/src/data.css

@@ -1039,8 +1039,8 @@
  * du cadre pendant que les cellules continuent. --zv-cols-somme et
  * --zv-cols-n sont posés par le composant (largeurs choisies par
  * l'utilisateur, pas des valeurs de charte). */
-.zv-table--grille > .zv-table__head,
-.zv-table--grille > .zv-row {
+.zv-table--grille .zv-table__head,
+.zv-table--grille .zv-row {
   min-width: calc(
     var(--zv-cols-somme, 0px) + 2 * var(--zv-grille-pad) +
       (var(--zv-cols-n, 1) - 1) * var(--zv-grille-gap)
@@ -1360,6 +1360,74 @@
   padding-inline: 8px;
 }
 
+/* ─── Remplir son parent ────────────────────────────────────────────────
+ * La grille prend la hauteur d'une colonne flex bornée : seules les lignes
+ * défilent. Les intitulés et les filtres sont groupés dans un bloc COLLANT
+ * (.zv-table__haut) : collées une à une, les deux rangées se poseraient au
+ * même endroit et la seconde recouvrirait la première. */
+.zv-grille--remplir {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.zv-table--remplir {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.zv-table__haut {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+/* ─── Densité ───────────────────────────────────────────────────────────
+ * Un tableau secondaire, posé dans une fiche : les rangées se resserrent,
+ * rien d'autre ne change. Dérivé (6 px : la rangée de filtres). */
+.zv-table--dense .zv-row,
+.zv-table--dense .zv-table__head {
+  padding-block: 6px;
+}
+
+/* ─── Rangées qui ne sont pas des lignes ────────────────────────────────
+ * Un intitulé de groupe, une ligne de saisie, un pied de totaux : sur le
+ * fond du survol, et inertes (ni pointeur ni survol). */
+.zv-row--groupe,
+.zv-row--saisie,
+.zv-row--pied {
+  background: var(--panel);
+  cursor: default;
+}
+
+.zv-row--groupe:hover,
+.zv-row--saisie:hover,
+.zv-row--pied:hover {
+  background: var(--panel);
+}
+
+.zv-row--groupe {
+  display: block;
+  padding-block: 6px;
+}
+
+.zv-row--pied {
+  font-weight: 600;
+}
+
+/* Des champs à la hauteur d'une ligne, pas d'un formulaire. */
+.zv-row--saisie .zv-input {
+  padding-block: 5px;
+}
+
+/* Le nombre de lignes d'une valeur, au bout de son option. */
+.zv-grille__compte {
+  margin-left: auto;
+  flex: none;
+}
+
 /* Le pied : compte à gauche, taille de page et sens à droite. */
 .zv-grille__pied {
   display: flex;
@@ -1370,7 +1438,7 @@
 @media (max-width: 767px) {
   /* En cartes, l'épinglage, les poignées et la largeur minimale n'ont plus
    * de sens : la carte prend la largeur de l'écran. */
-  .zv-table--grille > .zv-row {
+  .zv-table--grille .zv-row {
     min-width: 0;
   }