@sia-ui/cli 0.6.0 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sia-ui/cli
 
+## 0.7.1
+
+### Patch Changes
+
+- Aligne les packages publics de SIA UI sur la version 0.7.1 afin que les huit packages restent sur une version commune.
+
+## 0.7.0
+
+### Minor Changes
+
+- Aligne les packages publics de SIA UI sur la version 0.7.0 afin que les huit packages restent sur une version commune.
+
 ## 0.6.0
 
 ### Minor Changes

package/README.md

@@ -68,6 +68,18 @@ Le contenu ci-dessous reprend intégralement `CHANGELOG.md` pour rester visible
 <!-- sia:changelog:start -->
 # @sia-ui/cli
 
+## 0.7.1
+
+### Patch Changes
+
+- Aligne les packages publics de SIA UI sur la version 0.7.1 afin que les huit packages restent sur une version commune.
+
+## 0.7.0
+
+### Minor Changes
+
+- Aligne les packages publics de SIA UI sur la version 0.7.0 afin que les huit packages restent sur une version commune.
+
 ## 0.6.0
 
 ### Minor Changes

package/dist/registry/package/components/DataTable/index.tsx

@@ -19,8 +19,10 @@ import { renduCellule, valeurDe } from "./values";
 import "./styles.css";
 
 export {
+  createTanStackRouterStorage,
   createUrlTableStorage,
   useDataTableQuery,
+  type TanStackRouterLike,
   type UseDataTableQueryOptions,
 } from "./query";
 

package/dist/registry/package/components/DataTable/query.ts

@@ -33,6 +33,74 @@ export function createUrlTableStorage(
   };
 }
 
+/**
+ * Ce que l'adaptateur demande d'un routeur : la forme du `router` de
+ * TanStack Router, sans en dépendre. Méthodes écrites en syntaxe de méthode :
+ * leurs paramètres se comparent alors de façon bivariante, et le routeur typé
+ * de l'application s'y passe sans transtypage.
+ */
+export interface TanStackRouterLike {
+  state: { location: { search: object } };
+  navigate(options: {
+    to: string;
+    search: Record<string, unknown>;
+    replace: boolean;
+  }): unknown;
+  subscribe(event: "onResolved", listener: () => void): () => void;
+}
+
+/** `"2"` → `2`, mais jamais `"007"`, `"1e5"` ni `""` : la conversion est sans perte. */
+function nombreCanonique(valeur: string): string | number {
+  const nombre = Number(valeur);
+  return valeur !== "" && Number.isFinite(nombre) && String(nombre) === valeur
+    ? nombre
+    : valeur;
+}
+
+/**
+ * L'état du tableau dans les paramètres de TanStack Router.
+ *
+ * Deux pièges de la recette qu'on écrivait à la main :
+ *
+ * - TanStack Router sérialise les paramètres en JSON. Une chaîne qui a l'air
+ *   d'un nombre y est mise entre guillemets — `page=2` devenait
+ *   `page=%222%22`. L'adaptateur passe donc de vrais nombres ; les autres
+ *   valeurs restent des chaînes, que le routeur relit à l'identique.
+ * - La lecture part de l'objet déjà décodé par le routeur, jamais de la chaîne
+ *   brute, qui porte ces guillemets.
+ *
+ * Les paramètres étrangers au tableau sont gardés par `useTableQuery`, qui
+ * n'écrit que ses propres clés.
+ */
+export function createTanStackRouterStorage(
+  router: TanStackRouterLike,
+  mode: "replace" | "push" = "replace",
+): TableQueryStorage {
+  return {
+    read: () => {
+      const params = new URLSearchParams();
+      for (const [cle, valeur] of Object.entries(router.state.location.search)) {
+        if (valeur === undefined || valeur === null) continue;
+        for (const v of Array.isArray(valeur) ? valeur : [valeur]) {
+          params.append(cle, typeof v === "object" ? JSON.stringify(v) : String(v));
+        }
+      }
+      return params.toString();
+    },
+    write: (value) => {
+      const search: Record<string, unknown> = {};
+      for (const [cle, brut] of new URLSearchParams(value)) {
+        const valeur = nombreCanonique(brut);
+        const deja = search[cle];
+        search[cle] =
+          deja === undefined ? valeur : [...(Array.isArray(deja) ? deja : [deja]), valeur];
+      }
+      router.navigate({ to: ".", search, replace: mode === "replace" });
+    },
+    subscribe: (listener) => router.subscribe("onResolved", listener),
+  };
+}
+
 export interface UseDataTableQueryOptions {
   defaultState?: Partial<TableQueryState>;
   /** `false` garde l'état en mémoire — utile dans une modale. */
@@ -50,6 +118,11 @@ export interface UseDataTableQueryOptions {
    * remplace celui de l'URL, et `syncUrl` / `history` sont ignorés.
    */
   storage?: TableQueryStorage;
+  /**
+   * Le routeur TanStack Router de l'application. Raccourci de
+   * `storage: createTanStackRouterStorage(router)` ; `history` s'applique.
+   */
+  router?: TanStackRouterLike;
   /** Les noms des paramètres serveur — `limit`, `sort` + `order`… */
   serverParams?: TableParamsMapping;
 }
@@ -69,14 +142,21 @@ export function useDataTableQuery(
     history = "replace",
     prefix,
     storage: fourni,
+    router,
     serverParams,
   } = options;
 
   // Créé une fois : un objet reconstruit à chaque rendu réabonnerait
   // l'écouteur `popstate` en boucle.
   const storage = useMemo(
-    () => fourni ?? (syncUrl ? createUrlTableStorage(history) : undefined),
-    [fourni, history, syncUrl],
+    () =>
+      fourni ??
+      (router
+        ? createTanStackRouterStorage(router, history)
+        : syncUrl
+          ? createUrlTableStorage(history)
+          : undefined),
+    [fourni, history, router, syncUrl],
   );
 
   return useTableQuery({

package/dist/registry/package/components/SecretFields/index.tsx

@@ -191,3 +191,56 @@ export function SecretFields({
     </div>
   );
 }
+
+/** Ce qu'il faut envoyer au serveur après une saisie dans `SecretFields`. */
+export interface SecretChanges {
+  /** À créer ou à remplacer (rotation) : nom → nouvelle valeur. */
+  set: Record<string, string>;
+  /** Noms enregistrés retirés de la liste : à supprimer. */
+  remove: string[];
+  /**
+   * Noms nouveaux restés sans valeur. Rien à envoyer pour eux — mais les
+   * ignorer sans le dire perdrait une saisie : à signaler avant l'envoi.
+   */
+  missing: string[];
+}
+
+/**
+ * Ce qui change, calculé une fois pour tous les projets.
+ *
+ * Un nom enregistré laissé vide est inchangé ; saisi, il est remplacé. Un nom
+ * enregistré absent de la liste est à supprimer — y compris quand il a été
+ * renommé : l'ancien part, le nouveau arrive avec sa valeur. Les lignes sans
+ * nom sont ignorées ; un nom en double garde sa dernière valeur saisie.
+ *
+ * ```ts
+ * const { set, remove, missing } = secretChanges(secrets, enregistres);
+ * if (missing.length) return; // à compléter
+ * await api.patch(`/projets/${id}/secrets`, { body: { set, remove } });
+ * setSecrets(clearSecretValues(secrets));
+ * ```
+ */
+export function secretChanges(
+  entries: SecretEntry[],
+  storedKeys: string[] = [],
+): SecretChanges {
+  const enregistres = new Set(storedKeys);
+  const presents = new Set<string>();
+  const set: Record<string, string> = {};
+  const missing: string[] = [];
+
+  for (const { key, value } of entries) {
+    const nom = key.trim();
+    if (!nom) continue;
+    presents.add(nom);
+    if (value !== "") set[nom] = value;
+    else if (!enregistres.has(nom) && !missing.includes(nom)) missing.push(nom);
+  }
+
+  // Un nom saisi plus loin avec une valeur n'est plus manquant.
+  return {
+    set,
+    remove: storedKeys.filter((nom) => !presents.has(nom)),
+    missing: missing.filter((nom) => !(nom in set)),
+  };
+}

package/dist/registry/package/components/Select/index.tsx

@@ -191,6 +191,16 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select
     if (searchable || fetcher) window.setTimeout(() => searchRef.current?.focus(), 0);
   }, [currentValue, fetcher, open, searchable, visibleOptions]);
 
+  // L'option active reste visible : au clavier, descendre au-delà du bas de
+  // la liste la laissait hors champ, et l'on choisissait à l'aveugle.
+  // `nearest` ne fait défiler que si elle sort de la zone visible.
+  useEffect(() => {
+    if (!open || activeIndex < 0) return;
+    document
+      .getElementById(`${listboxId}-${activeIndex}`)
+      ?.scrollIntoView?.({ block: "nearest" });
+  }, [activeIndex, listboxId, open]);
+
   const setTriggerRef = (node: HTMLButtonElement | null) => {
     triggerRef.current = node;
     if (typeof forwardedRef === "function") forwardedRef(node);

package/dist/registry/package/components/Select/styles.css

@@ -12,10 +12,13 @@
 .sia-select__clear:hover { color:var(--sia-foreground); background:var(--sia-surface); }
 .sia-select__chevron { transform:translateY(-.5rem); font-size:1.1rem; }
 .sia-select__overlay { overflow:hidden; border:1px solid var(--sia-border); border-radius:var(--sia-radius); color:var(--sia-foreground); background:var(--sia-background); box-shadow:0 14px 36px rgb(15 23 42 / .16); }
-.sia-select__panel { display:grid; min-width:12rem; max-height:min(22rem,calc(100vh - 1rem)); }
-.sia-select__search-wrap { display:flex; align-items:center; gap:.5rem; padding:.55rem .65rem; color:var(--sia-muted); border-bottom:1px solid var(--sia-border); }
+/* Colonne flex, pas grille : un enfant de grille garde une hauteur minimale
+   égale à son contenu, la liste débordait alors du panneau au lieu de
+   défiler — et l'overlay, en overflow:hidden, la coupait. */
+.sia-select__panel { display:flex; flex-direction:column; min-width:12rem; max-height:min(22rem,calc(100vh - 1rem)); }
+.sia-select__search-wrap { flex:none; display:flex; align-items:center; gap:.5rem; padding:.55rem .65rem; color:var(--sia-muted); border-bottom:1px solid var(--sia-border); }
 .sia-select__search { min-width:0; width:100%; padding:.2rem 0; border:0; outline:0; color:var(--sia-foreground); background:transparent; font:inherit; }
-.sia-select__options { overflow-y:auto; padding:.35rem; }
+.sia-select__options { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:.35rem; }
 .sia-select__option { display:flex; align-items:center; justify-content:space-between; gap:.75rem; width:100%; padding:.55rem .65rem; border:0; border-radius:calc(var(--sia-radius) * .7); color:inherit; background:transparent; font:inherit; text-align:left; cursor:pointer; }
 .sia-select__option:hover:not(:disabled),.sia-select__option--active:not(:disabled) { background:var(--sia-surface); }
 .sia-select__option[aria-selected="true"] { color:var(--sia-primary); background:color-mix(in srgb,var(--sia-primary) 10%,transparent); }

package/dist/registry/registry.json

@@ -452,7 +452,7 @@
       "name": "data-table",
       "description": "Data table: row actions with permissions and confirmation, selection, card view, density and sorting.",
       "type": "component",
-      "version": "0.4.0",
+      "version": "0.5.0",
       "status": "stable",
       "source": "package",
       "files": [
@@ -1415,7 +1415,7 @@
       "name": "secret-fields",
       "description": "Write-only key/value secrets editor: stored names shown, values never read back.",
       "type": "component",
-      "version": "0.3.0",
+      "version": "0.4.0",
       "status": "experimental",
       "source": "package",
       "files": [
@@ -1437,7 +1437,7 @@
       "name": "select",
       "description": "Accessible searchable select with positioned overlay and async option loading.",
       "type": "component",
-      "version": "0.3.0",
+      "version": "0.3.1",
       "status": "stable",
       "source": "package",
       "files": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sia-ui/cli",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "Install SIA UI components progressively into an application.",
   "keywords": [
     "sia-ui",
@@ -39,10 +39,10 @@
     "react-dom": "^19.2.3",
     "typescript": "^5.9.3",
     "vitest": "^4.0.16",
-    "@sia-ui/headless": "0.6.0",
-    "@sia-ui/react": "0.6.0",
-    "@sia-ui/utils": "0.6.0",
-    "@sia-ui/tokens": "0.6.0"
+    "@sia-ui/headless": "0.7.1",
+    "@sia-ui/react": "0.7.1",
+    "@sia-ui/tokens": "0.7.1",
+    "@sia-ui/utils": "0.7.1"
   },
   "scripts": {
     "build": "node scripts/build.mjs",