@sia-ui/cli 0.3.2 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @sia-ui/cli
 
+## 0.5.0
+
+### Patch Changes
+
+- Erreurs serveur dans les formulaires, client HTTP plus sûr, registre vérifié.
+
+  ## Défauts
+  - **Registre `drawer`** — `context.ts` et la dépendance `icons` manquaient :
+    `sia-ui add app-shell` produisait un projet qui ne compilait pas. Un test
+    vérifie désormais que chaque import relatif de chaque entrée est apporté par
+    son installation.
+  - **`sia-ui.css`** pose `box-sizing: border-box` (spécificité nulle). Sans
+    reset côté projet, `AppShell` débordait de 32 px.
+  - **`@sia-ui/api`** ne rejoue plus d'office que `GET` et `HEAD`
+    (`retryMethods`). Une écriture n'est rejouée que si l'appel pose `retry`.
+  - Plus aucun avertissement `react-hooks/exhaustive-deps` dans les composants.
+
+  ## Formulaires et erreurs serveur
+  - `Form` intercepte un envoi rejeté : erreurs de champ sous les champs, le
+    reste dans une alerte. `onSubmit` peut aussi rendre `{ champ: message }`
+    (`FormSubmitResult`), dans `useLocalForm`, `Form`, `CrudPage` et
+    l'adaptateur react-hook-form. `CrudPage` garde alors sa boîte ouverte.
+  - Les erreurs posées par `setErrors` survivent à la validation locale jusqu'à
+    la modification de leur champ.
+  - `HttpError.toFormErrors()`, option `fieldErrors` du client et préréglage
+    `nestFieldErrors` (class-validator). `readSubmitError` et `hasFormErrors`
+    dans `@sia-ui/headless`.
+  - La pagination à plat `{ data, total, page, limit }` est reconnue, et `get`
+    ne déballe plus `data` quand l'objet porte une pagination.
+
+  ## Tableaux
+  - `searchDelay` sur `DataTable` et `CrudPage`.
+  - `CrudPage` place les `extraRowActions` avant « Supprimer ».
+
+## 0.4.0
+
+### Minor Changes
+
+- Aligne tous les packages publics SIA UI sur la version 0.4.0 afin de fournir
+  un ensemble cohérent à installer, documenter et maintenir.
+
 ## 0.3.2
 
 ### Patch Changes

package/README.md

@@ -1,5 +1,5 @@
-<p align="center"><img src="https://beatjo.github.io/sia-ui-site/brand/sia-ui-logo.png" alt="SIA UI" width="320"></p>
-
+<p align="center"><img src="https://beatjo.github.io/sia-ui-site/brand/sia-ui-logo.png" alt="SIA UI" width="320"></p>
+
 # @sia-ui/cli
 
 Installer les composants SIA UI dans une application, comme shadcn/ui.
@@ -51,22 +51,76 @@ add  src/components/DataTable/styles.css
 
 Une chose s'écrit au niveau le plus bas où elle a du sens, et une seule fois.
 Voir [la documentation](https://beatjo.github.io/sia-ui-site).
-
-## Contribuer
-
-Le code source principal de SIA UI est privé pour le moment. Les retours publics passent par le dépôt `BeatJo/sia-ui-site` : bugs, demandes de composants, corrections de documentation et questions d'usage.
-
-- Signaler un bug : https://github.com/BeatJo/sia-ui-site/issues
-- Lire la documentation : https://beatjo.github.io/sia-ui-site/
-- Voir la démonstration : https://beatjo.github.io/sia-ui-site/preview/
-
-Les contributions directes au code des packages se font sur invitation dans le dépôt source privé.
-## Journal des changements
-
-Le contenu ci-dessous reprend intégralement `CHANGELOG.md` pour rester visible sur npm.
-
+
+## Contribuer
+
+Le code source principal de SIA UI est privé pour le moment. Les retours publics passent par le dépôt `BeatJo/sia-ui-site` : bugs, demandes de composants, corrections de documentation et questions d'usage.
+
+- Signaler un bug : https://github.com/BeatJo/sia-ui-site/issues
+- Lire la documentation : https://beatjo.github.io/sia-ui-site/
+- Voir la démonstration : https://beatjo.github.io/sia-ui-site/preview/
+
+Les contributions directes au code des packages se font sur invitation dans le dépôt source privé.
+## Journal des changements
+
+Le contenu ci-dessous reprend intégralement `CHANGELOG.md` pour rester visible sur npm.
+
+<!-- sia:changelog:start -->
 # @sia-ui/cli
 
+## 0.5.0
+
+### Patch Changes
+
+- Erreurs serveur dans les formulaires, client HTTP plus sûr, registre vérifié.
+
+  ## Défauts
+  - **Registre `drawer`** — `context.ts` et la dépendance `icons` manquaient :
+    `sia-ui add app-shell` produisait un projet qui ne compilait pas. Un test
+    vérifie désormais que chaque import relatif de chaque entrée est apporté par
+    son installation.
+  - **`sia-ui.css`** pose `box-sizing: border-box` (spécificité nulle). Sans
+    reset côté projet, `AppShell` débordait de 32 px.
+  - **`@sia-ui/api`** ne rejoue plus d'office que `GET` et `HEAD`
+    (`retryMethods`). Une écriture n'est rejouée que si l'appel pose `retry`.
+  - Plus aucun avertissement `react-hooks/exhaustive-deps` dans les composants.
+
+  ## Formulaires et erreurs serveur
+  - `Form` intercepte un envoi rejeté : erreurs de champ sous les champs, le
+    reste dans une alerte. `onSubmit` peut aussi rendre `{ champ: message }`
+    (`FormSubmitResult`), dans `useLocalForm`, `Form`, `CrudPage` et
+    l'adaptateur react-hook-form. `CrudPage` garde alors sa boîte ouverte.
+  - Les erreurs posées par `setErrors` survivent à la validation locale jusqu'à
+    la modification de leur champ.
+  - `HttpError.toFormErrors()`, option `fieldErrors` du client et préréglage
+    `nestFieldErrors` (class-validator). `readSubmitError` et `hasFormErrors`
+    dans `@sia-ui/headless`.
+  - La pagination à plat `{ data, total, page, limit }` est reconnue, et `get`
+    ne déballe plus `data` quand l'objet porte une pagination.
+
+  ## Tableaux
+  - `searchDelay` sur `DataTable` et `CrudPage`.
+  - `CrudPage` place les `extraRowActions` avant « Supprimer ».
+
+## 0.4.0
+
+### Minor Changes
+
+- Aligne tous les packages publics SIA UI sur la version 0.4.0 afin de fournir
+  un ensemble cohérent à installer, documenter et maintenir.
+
+## 0.3.2
+
+### Patch Changes
+
+- Ajoute l’identité visuelle officielle de SIA UI et améliore la documentation publique, les changelogs et les ressources de contribution.
+
+## 0.3.1
+
+### Patch Changes
+
+- Expose public contribution flow on npm
+
 ## 0.3.0
 
 ### Minor Changes
@@ -226,8 +280,9 @@ Le contenu ci-dessous reprend intégralement `CHANGELOG.md` pour rester visible
 
 ### Patch Changes
 
-- Include component styles when installing registry components
-
-## Licence
+- Include component styles when installing registry components
+<!-- sia:changelog:end -->
+
+## Licence
 
 MIT

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

@@ -3,6 +3,8 @@ import {
   useMemo,
   useState,
   type CSSProperties,
+  type ElementType,
+  type HTMLAttributes,
   type ReactNode,
 } from "react";
 import { cn } from "@sia-ui/utils";
@@ -53,6 +55,87 @@ export type AppShellMobileNav = "drawer" | "tabs" | "both";
 
 export type AppShellContentWidth = "wide" | "narrow" | "full";
 
+export interface AppShellBrandProps extends HTMLAttributes<HTMLDivElement> {
+  /** Symbole conservé lorsque la navigation devient un rail. */
+  icon: ReactNode;
+  /** Nom du produit, masqué automatiquement dans le rail. */
+  name: ReactNode;
+  /** Ligne secondaire facultative, masquée avec le nom. */
+  description?: ReactNode;
+}
+
+/**
+ * Identité de produit adaptée au rail de l'`AppShell`.
+ *
+ * L'application fournit le symbole et le texte une seule fois. Le composant
+ * masque sa copie dès que son parent reçoit `data-collapsed`.
+ */
+export function AppShellBrand({
+  icon,
+  name,
+  description,
+  className,
+  ...props
+}: AppShellBrandProps) {
+  return (
+    <div className={cn("sia-shell-brand", className)} {...props}>
+      <span className="sia-shell-brand__icon" aria-hidden="true">
+        {icon}
+      </span>
+      <span className="sia-shell-brand__copy">
+        <span className="sia-shell-brand__name">{name}</span>
+        {description !== undefined && (
+          <span className="sia-shell-brand__description">{description}</span>
+        )}
+      </span>
+    </div>
+  );
+}
+
+export interface AppShellRailItemProps extends HTMLAttributes<HTMLElement> {
+  /** Élément rendu : contenu simple, action ou lien. */
+  as?: "div" | "button" | "a";
+  /** Symbole toujours visible dans le rail. */
+  icon: ReactNode;
+  /** Libellé masqué visuellement dans le rail et conservé comme nom accessible. */
+  label: string;
+  href?: string;
+  type?: "button" | "submit" | "reset";
+  disabled?: boolean;
+}
+
+/** Contenu icône + libellé qui s'adapte automatiquement au rail. */
+export function AppShellRailItem({
+  as = "div",
+  icon,
+  label,
+  className,
+  href,
+  type = "button",
+  disabled,
+  ...props
+}: AppShellRailItemProps) {
+  const Component: ElementType = as;
+  const elementProps = {
+    ...props,
+    ...(as === "a" && href ? { href } : {}),
+    ...(as === "button" ? { type, disabled } : {}),
+  };
+
+  return (
+    <Component
+      className={cn("sia-shell-rail-item", className)}
+      aria-label={props["aria-label"] ?? (as !== "div" ? label : undefined)}
+      {...elementProps}
+    >
+      <span className="sia-shell-rail-item__icon" aria-hidden="true">
+        {icon}
+      </span>
+      <span className="sia-shell-rail-item__label">{label}</span>
+    </Component>
+  );
+}
+
 export interface AppShellProps {
   nav: SidebarEntry[];
   children: ReactNode;
@@ -97,8 +180,8 @@ export interface AppShellProps {
   /**
    * En tête de barre latérale : logo, nom du produit, sélecteur d'entité.
    *
-   * Reçoit `data-collapsed` en mode rail, comme `sidebarFooter` : sans quoi
-   * un nom de produit écrit en toutes lettres déborde des quatre rem du rail.
+   * `AppShellBrand` masque son texte automatiquement dans le rail. Un contenu
+   * entièrement personnalisé reçoit toujours `data-collapsed` sur son parent.
    */
   brand?: ReactNode;
 
@@ -107,8 +190,8 @@ export interface AppShellProps {
    *
    * C'est la place de la déconnexion et des réglages du compte — ce qui sort
    * de l'application, par opposition à l'en-tête, réservé à ce qui agit sur
-   * l'écran courant. Reçoit `data-collapsed` en mode rail, de quoi masquer un
-   * libellé sans changer de composant.
+   * l'écran courant. `AppShellRailItem` masque son libellé automatiquement ;
+   * un contenu personnalisé peut encore lire `data-collapsed` sur son parent.
    */
   sidebarFooter?: ReactNode;
 
@@ -306,7 +389,9 @@ export function AppShell({
       {/* Sur petit écran, la barre latérale n'a pas la place de rester
           ouverte : elle devient un tiroir. Sans lui, l'arborescence complète
           ne serait atteignable que par « Plus », ce qui ne se devine pas. */}
-      {!compact && !masquee && <aside className="sia-shell__aside">{barre}</aside>}
+      {!compact && !masquee && (
+        <aside className="sia-shell__aside">{barre}</aside>
+      )}
 
       <div className="sia-shell__main">
         {(header || collapsible !== false || (compact && montrerTiroir)) && (
@@ -348,7 +433,12 @@ export function AppShell({
           </header>
         )}
 
-        <main className={cn("sia-shell__content", `sia-shell__content--${contentWidth}`)}>
+        <main
+          className={cn(
+            "sia-shell__content",
+            `sia-shell__content--${contentWidth}`,
+          )}
+        >
           {page && <div className="sia-shell__page">{page}</div>}
           {children}
         </main>
@@ -374,7 +464,11 @@ export function AppShell({
           size="sm"
           className="sia-shell__drawer"
         >
-          {barre}
+          <Drawer.Header>
+            <Drawer.Title>Navigation</Drawer.Title>
+            <Drawer.Close />
+          </Drawer.Header>
+          <Drawer.Body>{barre}</Drawer.Body>
         </Drawer>
       )}
     </div>

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

@@ -57,6 +57,92 @@
   padding: .5rem;
 }
 
+/* Les contenus standards de la barre connaissent le rail. L'application
+   fournit une icône et un texte une seule fois ; AppShell porte l'état sur le
+   parent, et ces primitives prennent en charge la présentation. */
+.sia-shell-brand,
+.sia-shell-rail-item {
+  display: flex;
+  align-items: center;
+  gap: .625rem;
+  min-width: 0;
+}
+
+.sia-shell-brand { padding: .25rem; }
+
+.sia-shell-brand__icon {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 2.75rem;
+  height: 2.75rem;
+}
+
+.sia-shell-brand__icon > img,
+.sia-shell-brand__icon > svg {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.sia-shell-brand__copy { min-width: 0; }
+.sia-shell-brand__name,
+.sia-shell-brand__description {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sia-shell-brand__name { font-weight: 700; }
+.sia-shell-brand__description {
+  margin-top: .1rem;
+  color: var(--sia-muted);
+  font-size: .72rem;
+}
+
+.sia-shell-rail-item {
+  width: 100%;
+  padding: .375rem;
+  border: 0;
+  border-radius: var(--sia-radius);
+  background: transparent;
+  color: var(--sia-muted);
+  font: inherit;
+  font-size: .75rem;
+  text-decoration: none;
+}
+.sia-shell-rail-item:is(button, a) { cursor: pointer; }
+.sia-shell-rail-item:is(button, a):hover {
+  background: var(--sia-surface-raised, var(--sia-surface));
+  color: var(--sia-foreground);
+}
+.sia-shell-rail-item:disabled { opacity: .55; cursor: not-allowed; }
+.sia-shell-rail-item:is(button, a):focus-visible {
+  outline: 2px solid var(--sia-primary);
+  outline-offset: 2px;
+}
+.sia-shell-rail-item__icon {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.sia-shell-rail-item__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-collapsed] .sia-shell-brand,
+[data-collapsed] .sia-shell-rail-item {
+  justify-content: center;
+  gap: 0;
+}
+[data-collapsed] .sia-shell-brand__copy,
+[data-collapsed] .sia-shell-rail-item__label { display: none; }
+
 .sia-shell__main {
   display: flex;
   flex-direction: column;
@@ -154,6 +240,7 @@
   padding-bottom: calc(var(--sia-shell-tabs) + env(safe-area-inset-bottom, 0px));
 }
 
+.sia-shell__drawer .sia-drawer-body { flex:1; min-height:0; padding:.5rem; overflow:hidden; }
 .sia-shell__drawer .sia-sidebar { height: 100%; }
 
 /* ── La barre d'onglets ─────────────────────────────────────────────────── */

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

@@ -1,4 +1,4 @@
-import { useMemo, useState, type ReactNode } from "react";
+import { useCallback, useMemo, useState, type ReactNode } from "react";
 import { cn, toneClass } from "@sia-ui/utils";
 import type { ComponentTone } from "@sia-ui/tokens";
 import { ChevronLeftIcon, ChevronRightIcon } from "../Icons";
@@ -119,10 +119,10 @@ export function Calendar({
     if (mode === undefined) setPanelMode(next);
     onPanelChange?.(monthIso(controlledMonth), next);
   };
-  const isDisabled = (date: string) => Boolean(
+  const isDisabled = useCallback((date: string) => Boolean(
     disabledDate?.(date) ||
     (validRange && (date < validRange[0] || date > validRange[1])),
-  );
+  ), [disabledDate, validRange]);
   const selectDate = (date: string) => {
     if (isDisabled(date)) return;
     if (selectionMode === "range") {
@@ -160,7 +160,7 @@ export function Calendar({
         ...(rangeEdge ? { rangeEdge } : {}),
       };
     });
-  }, [year, monthIndex, firstDayOfWeek, disabledDate, validRange, currentValue, currentRange.start, currentRange.end]);
+  }, [year, monthIndex, firstDayOfWeek, isDisabled, currentValue, currentRange.start, currentRange.end]);
   const weekdays = Array.from({ length: 7 }, (_, index) => new Intl.DateTimeFormat(locale, { weekday: "short" }).format(new Date(2024, 0, 7 + firstDayOfWeek + index)));
   const monthName = new Intl.DateTimeFormat(locale, { month: "long" }).format(controlledMonth);
   const updateFromString = (next: string) => setMonth(parseMonth(next));

package/dist/registry/package/components/CrudPage/dialogs.tsx

@@ -1,7 +1,16 @@
 import { type Key, type ReactNode } from "react";
-import type { FormValidator } from "@sia-ui/headless";
+import {
+  hasFormErrors,
+  type FormSubmitResult,
+  type FormValidator,
+} from "@sia-ui/headless";
 import { Modal } from "../Modal";
-import { Form, type FormEntry, type FormShape } from "../Form";
+import {
+  Form,
+  formFieldNames,
+  type FormEntry,
+  type FormShape,
+} from "../Form";
 import { Descriptions } from "../Descriptions";
 import type { DataTableColumn } from "../DataTable/types";
 import { renduCellule } from "../DataTable/values";
@@ -29,24 +38,12 @@ export interface CrudDialogOptions {
 }
 
 /**
- * Les noms de champs, groupes aplatis.
- *
- * Servent à fabriquer un formulaire vide : sans valeur initiale déclarée, un
- * champ non contrôlé le devient à la première frappe, et React s'en plaint à
- * juste titre.
+ * Un formulaire vide : sans valeur initiale déclarée, un champ non contrôlé
+ * le devient à la première frappe, et React s'en plaint à juste titre.
  */
-function nomsDeChamps(fields: FormEntry[]): string[] {
-  const noms: string[] = [];
-  for (const entree of fields) {
-    if ("group" in entree) noms.push(...entree.fields.map((f) => f.name));
-    else noms.push(entree.name);
-  }
-  return noms;
-}
-
 export function valeursVides(fields: FormEntry[]): FormShape {
   const valeurs: FormShape = {};
-  for (const nom of nomsDeChamps(fields)) valeurs[nom] = "";
+  for (const nom of formFieldNames(fields)) valeurs[nom] = "";
   return valeurs;
 }
 
@@ -60,7 +57,7 @@ export function valeursVides(fields: FormEntry[]): FormShape {
 export function valeursDeLigne<T>(row: T, fields: FormEntry[]): FormShape {
   const source = row as Record<string, unknown>;
   const valeurs: FormShape = {};
-  for (const nom of nomsDeChamps(fields)) {
+  for (const nom of formFieldNames(fields)) {
     const valeur = source[nom];
     valeurs[nom] =
       typeof valeur === "string" ||
@@ -84,7 +81,7 @@ export interface CrudDialogsProps<T> {
     | ((
         values: FormShape,
         context: { mode: "create" | "edit"; row?: T; index?: number },
-      ) => void | Promise<void>)
+      ) => FormSubmitResult<FormShape> | Promise<FormSubmitResult<FormShape>>)
     | undefined;
 
   createDefaults?: FormShape | undefined;
@@ -177,11 +174,14 @@ export function CrudDialogs<T>({
             // conviennent.
             requireDirty={modification}
             onSubmit={async (values) => {
-              await onSubmit?.(values, {
+              const resultat = await onSubmit?.(values, {
                 mode: creation ? "create" : "edit",
                 ...(state?.row !== undefined ? { row: state.row } : {}),
                 ...(state?.index !== undefined ? { index: state.index } : {}),
               });
+              // Refusé par le serveur : la boîte reste ouverte, les erreurs
+              // sous les champs. La fermer perdrait la saisie.
+              if (hasFormErrors(resultat)) return resultat;
               onClose();
             }}
           />

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

@@ -1,6 +1,10 @@
 import { useMemo, useState, type Key, type ReactNode } from "react";
 import { cn } from "@sia-ui/utils";
-import type { FormValidator, PermissionRule } from "@sia-ui/headless";
+import type {
+  FormSubmitResult,
+  FormValidator,
+  PermissionRule,
+} from "@sia-ui/headless";
 import { PageHeader } from "../PageHeader";
 import { Button } from "../Button";
 import { Pagination } from "../Pagination";
@@ -98,11 +102,16 @@ interface CrudPageBase<T> {
    */
   fields?: FormEntry[];
 
-  /** Ce que la page fait d'un formulaire envoyé. */
+  /**
+   * Ce que la page fait d'un formulaire envoyé.
+   *
+   * Rendre des erreurs par champ, ou lever une `HttpError`, garde la boîte
+   * ouverte avec les erreurs affichées ; sinon elle se ferme.
+   */
   onSubmit?: (
     values: FormShape,
     context: { mode: "create" | "edit"; row?: T; index?: number },
-  ) => void | Promise<void>;
+  ) => FormSubmitResult<FormShape> | Promise<FormSubmitResult<FormShape>>;
 
   /**
    * La validation, sous la même forme que `Form`.
@@ -164,6 +173,8 @@ interface CrudPageBase<T> {
   searchKeys?: string[];
   searchPlaceholder?: string;
   onSearch?: (query: string) => void;
+  /** Temporise `onSearch` — voir `DataTable`. 300 pour une recherche serveur. */
+  searchDelay?: number;
 
   loading?: boolean;
   error?: ReactNode;
@@ -173,6 +184,11 @@ interface CrudPageBase<T> {
   page?: number;
   totalPages?: number;
   onPageChange?: (page: number) => void;
+  /** Avec `onPageSizeChange`, ajoute le choix du nombre de lignes par page. */
+  pageSize?: number;
+  onPageSizeChange?: (pageSize: number) => void;
+  /** Les tailles proposées — voir `Pagination`. */
+  pageSizeOptions?: number[];
 
   /**
    * Ce qui n'a pas de raccourci ici passe au tableau tel quel — densité,
@@ -266,6 +282,7 @@ export function CrudPage<T>({
   searchKeys: clesDeRecherche,
   searchPlaceholder,
   onSearch,
+  searchDelay,
   loading = false,
   error,
   onRetry,
@@ -273,6 +290,9 @@ export function CrudPage<T>({
   page,
   totalPages,
   onPageChange,
+  pageSize,
+  onPageSizeChange,
+  pageSizeOptions,
   table,
   children,
   className,
@@ -416,11 +436,17 @@ export function CrudPage<T>({
       return actionsDeLigne.length > 0 ? actionsDeLigne : undefined;
     }
 
+    // Les ajouts se glissent avant « Supprimer » : la destruction reste la
+    // dernière action, là où on ne la vise pas par mégarde.
+    const suppression = actionsDeLigne.filter((a) => a.key === "delete");
+    const autres = actionsDeLigne.filter((a) => a.key !== "delete");
+
     return (row: T, index: number) => [
-      ...actionsDeLigne,
+      ...autres,
       ...(typeof extraRowActions === "function"
         ? extraRowActions(row, index)
         : extraRowActions),
+      ...suppression,
     ];
   }, [actionsDeLigne, extraRowActions]);
 
@@ -471,6 +497,7 @@ export function CrudPage<T>({
           {...(searchKeys ? { searchKeys } : {})}
           {...(searchPlaceholder ? { searchPlaceholder } : {})}
           {...(onSearch ? { onSearch } : {})}
+          {...(searchDelay !== undefined ? { searchDelay } : {})}
           {...(toutesLesActions ? { rowActions: toutesLesActions } : {})}
           {...(can ? { can } : {})}
           loading={loading}
@@ -543,6 +570,9 @@ export function CrudPage<T>({
           totalPages={totalPages}
           onPageChange={onPageChange}
           showTotal
+          {...(pageSize !== undefined ? { pageSize } : {})}
+          {...(onPageSizeChange ? { onPageSizeChange } : {})}
+          {...(pageSizeOptions ? { pageSizeOptions } : {})}
         />
       )}
     </section>

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

@@ -54,6 +54,7 @@ export function DataTable<T>({
   searchKeys,
   searchPlaceholder,
   onSearch,
+  searchDelay = 0,
   layout = "auto",
   maxHeight,
   stickyHeader = false,
@@ -210,9 +211,12 @@ export function DataTable<T>({
               <SearchInput
                 value={recherche}
                 placeholder={searchPlaceholder ?? locale.search}
+                // Avec un délai, c'est le champ qui temporise : il sait aussi
+                // déclencher tout de suite sur Entrée et à l'effacement.
+                {...(onSearch && searchDelay > 0 ? { onSearch, searchDelay } : {})}
                 onValueChange={(v) => {
                   setRecherche(v);
-                  onSearch?.(v);
+                  if (searchDelay <= 0) onSearch?.(v);
                 }}
               />
             )}

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

@@ -107,6 +107,14 @@ export interface DataTableProps<T> {
   searchPlaceholder?: string;
   /** Recherche déléguée. Fournie, le tableau cesse de filtrer lui-même. */
   onSearch?: (query: string) => void;
+  /**
+   * Millisecondes d'inactivité avant d'appeler `onSearch`.
+   *
+   * `0` — le défaut — l'appelle à chaque frappe, ce qui convient à un
+   * filtrage local. Pour une recherche serveur, 300 évite une requête par
+   * lettre ; Entrée et l'effacement déclenchent sans attendre.
+   */
+  searchDelay?: number;
 
   /* ─────────────────────────────────────────────────────── mise en page */