@sia-ui/react-web 0.1.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/README.md +57 -57
- package/dist/index.cjs +3911 -2315
- package/dist/index.css +1590 -940
- package/dist/index.d.cts +1835 -488
- package/dist/index.d.ts +1835 -488
- package/dist/index.js +3903 -2321
- package/package.json +6 -6
package/dist/index.d.cts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import { ReactNode, RefObject, ImgHTMLAttributes, HTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes, Key, ForwardRefExoticComponent, RefAttributes,
|
|
3
|
+
import { ReactNode, ReactElement, RefObject, ImgHTMLAttributes, HTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes, Key, TextareaHTMLAttributes, ForwardRefExoticComponent, RefAttributes, SVGProps, CSSProperties, PropsWithChildren } from 'react';
|
|
4
4
|
import { ComponentTone, ComponentSize } from '@sia-ui/tokens';
|
|
5
5
|
import * as _sia_ui_headless from '@sia-ui/headless';
|
|
6
|
-
import {
|
|
6
|
+
import { PermissionRule, Placement, SliderValue, FormAdapter, FormValidator, TableQueryStorage, TableQueryState, TableQuery, SessionStore, SessionState, ToastPlacement, ToastId, ToastOptions } from '@sia-ui/headless';
|
|
7
7
|
export { SliderValue, ToastId, ToastOptions, ToastPlacement, ToastTone, toast, toastStore } from '@sia-ui/headless';
|
|
8
|
+
import { Rule } from '@sia-ui/utils/validation';
|
|
8
9
|
|
|
9
10
|
interface AccordionItem {
|
|
10
11
|
key: string;
|
|
@@ -62,6 +63,13 @@ interface AlertProps {
|
|
|
62
63
|
onDismiss?: () => void;
|
|
63
64
|
className?: string;
|
|
64
65
|
}
|
|
66
|
+
/**
|
|
67
|
+
* Un message qui reste à l'écran.
|
|
68
|
+
*
|
|
69
|
+
* À la différence d'une annonce, il ne part pas tout seul : il décrit un
|
|
70
|
+
* état de la page — un solde insuffisant, une synchronisation en retard —
|
|
71
|
+
* et disparaît quand cet état change, pas au bout de cinq secondes.
|
|
72
|
+
*/
|
|
65
73
|
declare function Alert({ tone, title, children, action, dismissLabel: dismissLabelProp, onDismiss, className }: AlertProps): react_jsx_runtime.JSX.Element;
|
|
66
74
|
|
|
67
75
|
interface AmountDisplayProps {
|
|
@@ -74,18 +82,276 @@ interface AmountDisplayProps {
|
|
|
74
82
|
tone?: ComponentTone;
|
|
75
83
|
className?: string;
|
|
76
84
|
}
|
|
85
|
+
/**
|
|
86
|
+
* Un montant, lisible d'un coup d'œil.
|
|
87
|
+
*
|
|
88
|
+
* Le signe est porté par la mise en forme et non par le nombre : un débit
|
|
89
|
+
* de 12 000 francs s'écrit « -12 000 F CFA », jamais « 12 000 F CFA » en
|
|
90
|
+
* rouge seul. La couleur peut manquer — un daltonien, une impression en
|
|
91
|
+
* noir et blanc — le signe, lui, reste.
|
|
92
|
+
*/
|
|
77
93
|
declare function AmountDisplay({ value, currency, locale, label, secondary, sign, tone, className }: AmountDisplayProps): react_jsx_runtime.JSX.Element;
|
|
78
94
|
|
|
79
|
-
interface
|
|
80
|
-
|
|
81
|
-
|
|
95
|
+
interface SidebarItem {
|
|
96
|
+
key: string;
|
|
97
|
+
label: ReactNode;
|
|
98
|
+
icon?: ReactNode;
|
|
99
|
+
/** Rend l'entrée comme un lien. Sans lui, c'est un bouton. */
|
|
100
|
+
href?: string;
|
|
101
|
+
/**
|
|
102
|
+
* Une pastille — un nombre de messages, d'alertes.
|
|
103
|
+
*
|
|
104
|
+
* Sur le rail réduit il ne reste pas la place de la lire : elle devient un
|
|
105
|
+
* point, et le compte exact revient dans le volet.
|
|
106
|
+
*/
|
|
107
|
+
badge?: ReactNode;
|
|
108
|
+
disabled?: boolean;
|
|
109
|
+
/**
|
|
110
|
+
* La règle qui autorise l'entrée, évaluée par `can`.
|
|
111
|
+
*
|
|
112
|
+
* > Ceci masque une entrée de menu; ça ne protège pas la route.
|
|
113
|
+
*/
|
|
114
|
+
permission?: PermissionRule;
|
|
115
|
+
/** Garde le parent même si toute sa descendance est filtrée. */
|
|
116
|
+
keepWhenEmpty?: boolean;
|
|
117
|
+
/** Sous-entrées, sans limite de profondeur. */
|
|
118
|
+
items?: SidebarItem[];
|
|
119
|
+
onClick?: () => void;
|
|
120
|
+
}
|
|
121
|
+
interface SidebarSection {
|
|
122
|
+
key: string;
|
|
123
|
+
/** Le titre du groupe. Réduit à un trait en mode rail. */
|
|
124
|
+
title: ReactNode;
|
|
125
|
+
permission?: PermissionRule;
|
|
126
|
+
items: SidebarItem[];
|
|
127
|
+
}
|
|
128
|
+
type SidebarEntry = SidebarItem | SidebarSection;
|
|
129
|
+
/**
|
|
130
|
+
* Le point d'extension pour brancher un routeur.
|
|
131
|
+
*
|
|
132
|
+
* Sans lui, un `<a href>` est rendu — ce qui permet d'afficher la navigation
|
|
133
|
+
* hors de tout contexte de routage, en story comme en test. Avec lui, un
|
|
134
|
+
* `<Link>` de n'importe quelle bibliothèque, sans que le composant en dépende.
|
|
135
|
+
*
|
|
136
|
+
* À stabiliser avec `useCallback` : les nœuds sont mémoïsés, et une fonction
|
|
137
|
+
* recréée à chaque rendu annule cette mémoïsation.
|
|
138
|
+
*/
|
|
139
|
+
type SidebarRenderLink = (args: {
|
|
140
|
+
item: SidebarItem;
|
|
141
|
+
children: ReactNode;
|
|
142
|
+
/**
|
|
143
|
+
* À répandre tel quel sur le lien : `<Link {...props}>{children}</Link>`.
|
|
144
|
+
*
|
|
145
|
+
* Regroupés plutôt qu'éparpillés parce que `aria-current` en faisait
|
|
146
|
+
* partie : passé à côté, il se perdait sans bruit, et l'entrée courante
|
|
147
|
+
* n'était plus annoncée aux lecteurs d'écran.
|
|
148
|
+
*/
|
|
149
|
+
props: {
|
|
150
|
+
className: string;
|
|
151
|
+
onClick: () => void;
|
|
152
|
+
"aria-current"?: "page";
|
|
153
|
+
title?: string;
|
|
154
|
+
};
|
|
155
|
+
}) => ReactElement;
|
|
156
|
+
interface SidebarProps {
|
|
157
|
+
items: SidebarEntry[];
|
|
158
|
+
/** La clé de l'entrée courante. Sa branche s'ouvre d'elle-même. */
|
|
159
|
+
activeKey?: string;
|
|
160
|
+
/**
|
|
161
|
+
* Le rail : les libellés disparaissent, les sous-menus passent en volet.
|
|
162
|
+
*
|
|
163
|
+
* Ils y restent atteignables — c'est tout l'objet du volet. Un menu réduit
|
|
164
|
+
* qui enferme ses enfants n'est pas réduit, il est cassé.
|
|
165
|
+
*/
|
|
166
|
+
collapsed?: boolean;
|
|
167
|
+
/** De quel côté sortent les volets du rail. */
|
|
168
|
+
side?: "left" | "right";
|
|
169
|
+
variant?: "default" | "filled" | "floating";
|
|
170
|
+
size?: "sm" | "md" | "lg";
|
|
171
|
+
tone?: ComponentTone;
|
|
172
|
+
/**
|
|
173
|
+
* Évalue les règles de permission des entrées.
|
|
174
|
+
*
|
|
175
|
+
* Vient d'un `createAccessLayer` de `@sia-ui/headless`, ou de n'importe
|
|
176
|
+
* quelle fonction. Absent, aucune entrée n'est filtrée.
|
|
177
|
+
*/
|
|
178
|
+
can?: (rule: PermissionRule) => boolean;
|
|
179
|
+
/** Les branches ouvertes. Non fourni, le composant les gère lui-même. */
|
|
180
|
+
openKeys?: string[];
|
|
181
|
+
defaultOpenKeys?: string[];
|
|
182
|
+
onOpenKeysChange?: (keys: string[]) => void;
|
|
183
|
+
/** Une seule branche ouverte par niveau. */
|
|
184
|
+
accordion?: boolean;
|
|
185
|
+
renderLink?: SidebarRenderLink;
|
|
82
186
|
header?: ReactNode;
|
|
187
|
+
footer?: ReactNode;
|
|
188
|
+
onNavigate?: (item: SidebarItem) => void;
|
|
189
|
+
ariaLabel?: string;
|
|
190
|
+
className?: string;
|
|
191
|
+
}
|
|
192
|
+
/**
|
|
193
|
+
* La navigation principale.
|
|
194
|
+
*
|
|
195
|
+
* Trois choses la distinguent d'une liste de liens : elle descend aussi
|
|
196
|
+
* profond que l'arborescence du produit, elle se réduit sans enfermer ses
|
|
197
|
+
* sous-menus, et elle ne montre que ce que la session a le droit de voir.
|
|
198
|
+
*/
|
|
199
|
+
declare function Sidebar({ items, activeKey, collapsed, side, variant, size, tone, can, openKeys, defaultOpenKeys, onOpenKeysChange, accordion, renderLink, header, footer, onNavigate, ariaLabel, className, }: SidebarProps): react_jsx_runtime.JSX.Element;
|
|
200
|
+
|
|
201
|
+
interface BottomTabsProps {
|
|
202
|
+
/** Attendu déjà filtré : la coquille a fait le tri une seule fois. */
|
|
203
|
+
items: SidebarItem[];
|
|
204
|
+
activeKey?: string;
|
|
205
|
+
/**
|
|
206
|
+
* Nombre d'onglets avant le bouton « Plus ».
|
|
207
|
+
*
|
|
208
|
+
* Quatre au maximum sur un téléphone : au-delà, les cibles tactiles
|
|
209
|
+
* descendent sous les quarante-quatre pixels recommandés, et on rate
|
|
210
|
+
* l'onglet voisin une fois sur trois.
|
|
211
|
+
*/
|
|
212
|
+
max?: number;
|
|
213
|
+
renderLink?: SidebarRenderLink;
|
|
214
|
+
onNavigate?: (item: SidebarItem) => void;
|
|
215
|
+
/** Le bouton qui ouvre l'arborescence complète. */
|
|
216
|
+
more?: ReactNode;
|
|
217
|
+
onMore?: () => void;
|
|
218
|
+
moreLabel?: string;
|
|
219
|
+
className?: string;
|
|
220
|
+
}
|
|
221
|
+
/**
|
|
222
|
+
* La navigation d'un téléphone.
|
|
223
|
+
*
|
|
224
|
+
* Un rail d'icônes muettes n'est pas utilisable au comptoir : sur petit écran
|
|
225
|
+
* la navigation descend en bas, à portée du pouce, avec des libellés.
|
|
226
|
+
*
|
|
227
|
+
* Les onglets ne montrent que des **feuilles**. Un onglet qui ouvrirait un
|
|
228
|
+
* sous-menu depuis une barre basse serait un piège tactile — on vise une
|
|
229
|
+
* destination, on obtient un menu. Le reste de l'arborescence passe par
|
|
230
|
+
* « Plus ».
|
|
231
|
+
*/
|
|
232
|
+
declare const BottomTabs: react.NamedExoticComponent<BottomTabsProps>;
|
|
233
|
+
|
|
234
|
+
/**
|
|
235
|
+
* L'état de la barre latérale sur grand écran.
|
|
236
|
+
*
|
|
237
|
+
* Trois valeurs et non un booléen : « réduite » et « masquée » sont deux
|
|
238
|
+
* intentions différentes, et une application qui veut l'une ne veut
|
|
239
|
+
* généralement pas l'autre. Sous le seuil mobile, l'état est ignoré — la
|
|
240
|
+
* barre cède la place à la navigation basse.
|
|
241
|
+
*/
|
|
242
|
+
type SidebarState = "expanded" | "collapsed" | "hidden";
|
|
243
|
+
/**
|
|
244
|
+
* Ce que fait le bouton de bascule.
|
|
245
|
+
*
|
|
246
|
+
* `icon` alterne déployé et rail, `offcanvas` alterne déployé et masqué,
|
|
247
|
+
* `false` retire le bouton.
|
|
248
|
+
*/
|
|
249
|
+
type AppShellCollapsible = "icon" | "offcanvas" | false;
|
|
250
|
+
/**
|
|
251
|
+
* La navigation sous le seuil mobile.
|
|
252
|
+
*
|
|
253
|
+
* `both` n'est pas un défaut par hasard : deux systèmes de navigation
|
|
254
|
+
* simultanés se disputent l'attention, et l'utilisateur ne sait plus lequel
|
|
255
|
+
* fait autorité.
|
|
256
|
+
*/
|
|
257
|
+
type AppShellMobileNav = "drawer" | "tabs" | "both";
|
|
258
|
+
type AppShellContentWidth = "wide" | "narrow" | "full";
|
|
259
|
+
interface AppShellProps {
|
|
260
|
+
nav: SidebarEntry[];
|
|
83
261
|
children: ReactNode;
|
|
262
|
+
/**
|
|
263
|
+
* La clé de l'entrée courante.
|
|
264
|
+
*
|
|
265
|
+
* Laissée vide, elle est déduite de `currentPath`. La fournir explicitement
|
|
266
|
+
* ne sert que si les clés ne correspondent à aucune adresse.
|
|
267
|
+
*/
|
|
268
|
+
activeKey?: string;
|
|
269
|
+
/**
|
|
270
|
+
* L'adresse courante — **le point d'accroche du routeur**.
|
|
271
|
+
*
|
|
272
|
+
* Une seule chaîne, que tous savent produire :
|
|
273
|
+
*
|
|
274
|
+
* ```tsx
|
|
275
|
+
* const { pathname } = useLocation(); // React Router
|
|
276
|
+
* const pathname = usePathname(); // Next.js
|
|
277
|
+
* const [pathname] = useLocation(); // wouter
|
|
278
|
+
* ```
|
|
279
|
+
*
|
|
280
|
+
* De là, la coquille déduit l'entrée active par le préfixe le plus long, et
|
|
281
|
+
* referme le tiroir mobile à chaque navigation — sans jamais importer de
|
|
282
|
+
* routeur.
|
|
283
|
+
*/
|
|
284
|
+
currentPath?: string;
|
|
285
|
+
/** Branche les liens sur le routeur. À stabiliser avec `useCallback`. */
|
|
286
|
+
renderLink?: SidebarRenderLink;
|
|
287
|
+
onNavigate?: (item: SidebarItem) => void;
|
|
288
|
+
/**
|
|
289
|
+
* Évalue les règles de permission.
|
|
290
|
+
*
|
|
291
|
+
* Le filtrage est fait **une seule fois** ici : ni la barre latérale ni les
|
|
292
|
+
* onglets ne doivent avoir leur propre idée de ce qui est visible.
|
|
293
|
+
*/
|
|
294
|
+
can?: (rule: PermissionRule) => boolean;
|
|
295
|
+
/**
|
|
296
|
+
* En tête de barre latérale : logo, nom du produit, sélecteur d'entité.
|
|
297
|
+
*
|
|
298
|
+
* Reçoit `data-collapsed` en mode rail, comme `sidebarFooter` : sans quoi
|
|
299
|
+
* un nom de produit écrit en toutes lettres déborde des quatre rem du rail.
|
|
300
|
+
*/
|
|
301
|
+
brand?: ReactNode;
|
|
302
|
+
/**
|
|
303
|
+
* Bas de la barre latérale, sous la navigation.
|
|
304
|
+
*
|
|
305
|
+
* C'est la place de la déconnexion et des réglages du compte — ce qui sort
|
|
306
|
+
* de l'application, par opposition à l'en-tête, réservé à ce qui agit sur
|
|
307
|
+
* l'écran courant. Reçoit `data-collapsed` en mode rail, de quoi masquer un
|
|
308
|
+
* libellé sans changer de composant.
|
|
309
|
+
*/
|
|
310
|
+
sidebarFooter?: ReactNode;
|
|
311
|
+
/** La barre du haut : recherche, notifications, avatar de compte. */
|
|
312
|
+
header?: ReactNode;
|
|
313
|
+
/**
|
|
314
|
+
* Au-dessus du contenu, pleine largeur de la zone.
|
|
315
|
+
*
|
|
316
|
+
* L'endroit d'un `PageHeader`. La coquille ne prend pas de `title` : un
|
|
317
|
+
* `<h1>` rendu par la coquille force chaque page à passer par ses props, et
|
|
318
|
+
* une page qui veut deux titres ou une mise en page à elle doit se battre.
|
|
319
|
+
*/
|
|
320
|
+
page?: ReactNode;
|
|
84
321
|
footer?: ReactNode;
|
|
85
|
-
|
|
322
|
+
/**
|
|
323
|
+
* La largeur de la zone de contenu.
|
|
324
|
+
*
|
|
325
|
+
* Décidée ici plutôt qu'écran par écran : des largeurs posées page après
|
|
326
|
+
* page finissent par diverger, et personne ne sait laquelle fait foi.
|
|
327
|
+
*/
|
|
328
|
+
contentWidth?: AppShellContentWidth;
|
|
329
|
+
side?: "left" | "right";
|
|
330
|
+
variant?: "default" | "filled" | "floating";
|
|
331
|
+
/** L'en-tête suit-il le défilement. */
|
|
332
|
+
stickyHeader?: boolean;
|
|
333
|
+
sidebarState?: SidebarState;
|
|
334
|
+
defaultSidebarState?: SidebarState;
|
|
335
|
+
onSidebarStateChange?: (state: SidebarState) => void;
|
|
336
|
+
collapsible?: AppShellCollapsible;
|
|
337
|
+
/** Toute valeur CSS : `16rem`, `280px`, `min(20vw, 320px)`. */
|
|
338
|
+
sidebarWidth?: string;
|
|
339
|
+
sidebarCollapsedWidth?: string;
|
|
340
|
+
mobileNav?: AppShellMobileNav;
|
|
341
|
+
/** Sous cette largeur, la barre latérale cède la place. */
|
|
342
|
+
mobileBreakpoint?: number;
|
|
343
|
+
ariaLabel?: string;
|
|
86
344
|
className?: string;
|
|
87
345
|
}
|
|
88
|
-
|
|
346
|
+
/**
|
|
347
|
+
* La coquille d'une application.
|
|
348
|
+
*
|
|
349
|
+
* Elle n'invente rien : la navigation est le `Sidebar`, le tiroir est le
|
|
350
|
+
* `Drawer`, les droits viennent de `@sia-ui/headless`. Ce qu'elle apporte est
|
|
351
|
+
* l'assemblage — trois états de barre, une bascule mobile, et une seule
|
|
352
|
+
* source de vérité pour ce qui est visible et pour ce qui est actif.
|
|
353
|
+
*/
|
|
354
|
+
declare function AppShell({ nav, children, activeKey, currentPath, renderLink, onNavigate, can, brand, sidebarFooter, header, page, footer, contentWidth, side, variant, stickyHeader, sidebarState, defaultSidebarState, onSidebarStateChange, collapsible, sidebarWidth, sidebarCollapsedWidth, mobileNav, mobileBreakpoint, ariaLabel, className, }: AppShellProps): react_jsx_runtime.JSX.Element;
|
|
89
355
|
|
|
90
356
|
interface AspectRatioProps {
|
|
91
357
|
/** Le rapport largeur / hauteur. `16 / 9`, `1`, `4 / 3`. */
|
|
@@ -112,6 +378,13 @@ interface AsyncStateProps {
|
|
|
112
378
|
onRetry?: () => void;
|
|
113
379
|
children: ReactNode;
|
|
114
380
|
}
|
|
381
|
+
/**
|
|
382
|
+
* Les trois états d'un chargement, au même endroit.
|
|
383
|
+
*
|
|
384
|
+
* En attente, en erreur, ou vide : ce sont les mêmes trois cas à chaque
|
|
385
|
+
* écran, et les écrire à la main en oublie toujours un — le plus souvent le
|
|
386
|
+
* vide, qui ressemble à un chargement qui n'en finit pas.
|
|
387
|
+
*/
|
|
115
388
|
declare function AsyncState({ loading, error, empty, emptyTitle, emptyDescription, onRetry, children }: AsyncStateProps): react_jsx_runtime.JSX.Element;
|
|
116
389
|
|
|
117
390
|
interface AuditEvent {
|
|
@@ -127,6 +400,14 @@ interface AuditMetaProps {
|
|
|
127
400
|
emptyLabel?: ReactNode;
|
|
128
401
|
className?: string;
|
|
129
402
|
}
|
|
403
|
+
/**
|
|
404
|
+
* Qui a fait quoi, et quand.
|
|
405
|
+
*
|
|
406
|
+
* Une liste d'événements plutôt qu'un dernier état : savoir qu'une facture
|
|
407
|
+
* a été validée n'apprend rien si l'on ignore qu'elle avait été rejetée la
|
|
408
|
+
* veille. Les dates sont relatives — « il y a deux jours » se compare sans
|
|
409
|
+
* calcul mental.
|
|
410
|
+
*/
|
|
130
411
|
declare function AuditMeta({ events, locale, title, emptyLabel, className }: AuditMetaProps): react_jsx_runtime.JSX.Element;
|
|
131
412
|
|
|
132
413
|
interface AuthLayoutProps {
|
|
@@ -138,9 +419,24 @@ interface AuthLayoutProps {
|
|
|
138
419
|
footer?: ReactNode;
|
|
139
420
|
className?: string;
|
|
140
421
|
}
|
|
422
|
+
/**
|
|
423
|
+
* La page qui précède l'application : connexion, inscription, mot de passe
|
|
424
|
+
* oublié.
|
|
425
|
+
*
|
|
426
|
+
* Elle n'a ni navigation ni coquille, et c'est délibéré : tout ce qui mène
|
|
427
|
+
* ailleurs est hors de portée de quelqu'un qui n'est pas encore entré.
|
|
428
|
+
*/
|
|
141
429
|
declare function AuthLayout({ title, description, logo, aside, children, footer, className, }: AuthLayoutProps): react_jsx_runtime.JSX.Element;
|
|
142
430
|
|
|
143
|
-
|
|
431
|
+
/**
|
|
432
|
+
* Les douze placements du moteur de géométrie.
|
|
433
|
+
*
|
|
434
|
+
* Ce composant n'en exposait que quatre — haut et bas — parce qu'il calculait
|
|
435
|
+
* lui-même sa position, en vertical seulement. Le calcul vit dans
|
|
436
|
+
* `@sia-ui/headless`, sait basculer et recadrer dans les deux axes, et sert
|
|
437
|
+
* déjà le natif : le refaire ici privait tous les flottants des côtés.
|
|
438
|
+
*/
|
|
439
|
+
type OverlayPlacement = Placement;
|
|
144
440
|
interface OverlayProps {
|
|
145
441
|
open: boolean;
|
|
146
442
|
anchorRef: RefObject<HTMLElement | null>;
|
|
@@ -154,6 +450,16 @@ interface OverlayProps {
|
|
|
154
450
|
id?: string;
|
|
155
451
|
role?: string;
|
|
156
452
|
}
|
|
453
|
+
/**
|
|
454
|
+
* Ce qui flotte à côté d'un élément.
|
|
455
|
+
*
|
|
456
|
+
* Le socle des menus, des listes déroulantes et des infobulles. Il place le
|
|
457
|
+
* panneau parmi douze positions, le retourne quand le bord de la fenêtre
|
|
458
|
+
* approche, et le ramène dans la vue plutôt que de le laisser déborder.
|
|
459
|
+
*
|
|
460
|
+
* Le calcul vit dans `@sia-ui/headless` : il ne dépend d'aucun rendu, et
|
|
461
|
+
* sert donc aussi à ce qui n'est pas le DOM.
|
|
462
|
+
*/
|
|
157
463
|
declare function Overlay({ open, anchorRef, onOpenChange, children, placement, offset, matchAnchorWidth, viewportPadding, className, ...props }: OverlayProps): react.ReactPortal | null;
|
|
158
464
|
|
|
159
465
|
interface SelectOption {
|
|
@@ -192,6 +498,17 @@ interface SelectProps {
|
|
|
192
498
|
"aria-invalid"?: boolean;
|
|
193
499
|
"aria-required"?: boolean;
|
|
194
500
|
}
|
|
501
|
+
/**
|
|
502
|
+
* Un choix parmi une liste.
|
|
503
|
+
*
|
|
504
|
+
* Le champ n'est pas un `<select>` natif : celui-ci ne sait ni chercher, ni
|
|
505
|
+
* afficher une description sous chaque option, ni charger ses choix à la
|
|
506
|
+
* demande. Le comportement clavier du natif, lui, est reproduit — flèches,
|
|
507
|
+
* première lettre, échappement.
|
|
508
|
+
*
|
|
509
|
+
* `fetcher` sert les listes qu'on ne peut pas descendre en entier : la
|
|
510
|
+
* requête part après la frappe et s'annule si l'on continue à taper.
|
|
511
|
+
*/
|
|
195
512
|
declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
|
|
196
513
|
|
|
197
514
|
interface AutocompleteProps {
|
|
@@ -209,14 +526,94 @@ interface AutocompleteProps {
|
|
|
209
526
|
"aria-invalid"?: boolean;
|
|
210
527
|
"aria-required"?: boolean;
|
|
211
528
|
}
|
|
529
|
+
/**
|
|
530
|
+
* Un champ qui propose, sans imposer.
|
|
531
|
+
*
|
|
532
|
+
* `allowCustomValue` est vrai par défaut : la liste aide à trouver, elle ne
|
|
533
|
+
* dit pas ce qui existe. Un nom de client absent du référentiel reste
|
|
534
|
+
* saisissable, quitte à être créé ensuite.
|
|
535
|
+
*/
|
|
212
536
|
declare function Autocomplete({ id, options, value, defaultValue, onValueChange, placeholder: placeholderProp, allowCustomValue, disabled, className, ...ariaProps }: AutocompleteProps): react_jsx_runtime.JSX.Element;
|
|
213
537
|
|
|
214
|
-
|
|
538
|
+
type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
|
|
539
|
+
type AvatarShape = "circle" | "rounded" | "square";
|
|
540
|
+
type AvatarVariant = "soft" | "solid" | "outline";
|
|
541
|
+
/**
|
|
542
|
+
* La présence d'une personne.
|
|
543
|
+
*
|
|
544
|
+
* Quatre états et pas davantage : au-delà, la pastille devient un code que
|
|
545
|
+
* personne ne retient, et il faut une légende pour la lire.
|
|
546
|
+
*/
|
|
547
|
+
type AvatarStatus = "online" | "offline" | "busy" | "away";
|
|
548
|
+
/**
|
|
549
|
+
* Les teintes dérivées du nom.
|
|
550
|
+
*
|
|
551
|
+
* Deux personnes aux mêmes initiales doivent se distinguer : dans une liste
|
|
552
|
+
* de participants, six pastilles identiques ne valent pas mieux qu'aucune.
|
|
553
|
+
* La couleur est donc déterministe — la même personne garde la sienne d'un
|
|
554
|
+
* écran à l'autre, d'une session à l'autre.
|
|
555
|
+
*/
|
|
556
|
+
declare const TEINTES: readonly ["primary", "info", "success", "warning", "danger", "secondary"];
|
|
557
|
+
type AvatarTint = (typeof TEINTES)[number];
|
|
558
|
+
declare function tintForName(name: string): AvatarTint;
|
|
559
|
+
declare function initialsOf(name: string, count?: number): string;
|
|
560
|
+
interface AvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "children" | "width" | "height"> {
|
|
561
|
+
/** Le nom de la personne : il sert au repli, à la couleur et à l'annonce. */
|
|
215
562
|
name: string;
|
|
216
|
-
size?:
|
|
217
|
-
|
|
563
|
+
size?: AvatarSize;
|
|
564
|
+
shape?: AvatarShape;
|
|
565
|
+
variant?: AvatarVariant;
|
|
566
|
+
/** Force la teinte au lieu de la dériver du nom. */
|
|
567
|
+
tint?: AvatarTint;
|
|
568
|
+
/** Remplace les initiales — une icône, un emoji, deux lettres à soi. */
|
|
569
|
+
fallback?: ReactNode;
|
|
570
|
+
/** Nombre d'initiales quand le repli est automatique. */
|
|
571
|
+
initials?: 1 | 2;
|
|
572
|
+
status?: AvatarStatus;
|
|
573
|
+
/** Le libellé du statut, pour les lecteurs d'écran. */
|
|
574
|
+
statusLabel?: string;
|
|
575
|
+
/** Un liseré qui détache l'avatar de son fond. */
|
|
576
|
+
ring?: boolean;
|
|
577
|
+
/** Rend l'avatar actionnable — un menu de compte, par exemple. */
|
|
578
|
+
onPress?: () => void;
|
|
579
|
+
}
|
|
580
|
+
/**
|
|
581
|
+
* Le portrait d'une personne, ou ce qui le remplace.
|
|
582
|
+
*
|
|
583
|
+
* Une image met du temps à arriver, échoue parfois, et manque souvent. Les
|
|
584
|
+
* trois cas sont traités sans que la mise en page bouge : l'espace est réservé
|
|
585
|
+
* d'emblée, le repli est peint dessous, et l'image se fond par-dessus quand
|
|
586
|
+
* elle arrive.
|
|
587
|
+
*/
|
|
588
|
+
declare function Avatar({ name, size, shape, variant, tint, fallback, initials, status, statusLabel, ring, onPress, className, src, alt, onError, onLoad, style, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
|
|
589
|
+
interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
|
|
590
|
+
children: ReactNode;
|
|
591
|
+
/**
|
|
592
|
+
* Au-delà, les suivants sont résumés par un compteur.
|
|
593
|
+
*
|
|
594
|
+
* Sans limite, une réunion de quarante personnes déborde de sa ligne et
|
|
595
|
+
* n'apprend plus rien : au-delà de cinq visages, on ne lit plus des gens,
|
|
596
|
+
* on lit une foule.
|
|
597
|
+
*/
|
|
598
|
+
max?: number;
|
|
599
|
+
size?: AvatarSize;
|
|
600
|
+
shape?: AvatarShape;
|
|
601
|
+
variant?: AvatarVariant;
|
|
602
|
+
/** Le chevauchement, de 0 (côte à côte) à 1 (fortement empilés). */
|
|
603
|
+
overlap?: number;
|
|
604
|
+
/** Écarte les avatars au survol, pour les distinguer. */
|
|
605
|
+
spreadOnHover?: boolean;
|
|
606
|
+
/** Ce qu'affiche le compteur. Par défaut `+N`. */
|
|
607
|
+
renderOverflow?: (count: number) => ReactNode;
|
|
218
608
|
}
|
|
219
|
-
|
|
609
|
+
/**
|
|
610
|
+
* Plusieurs personnes, sur une ligne.
|
|
611
|
+
*
|
|
612
|
+
* Les avatars se chevauchent — c'est ce qui dit « un groupe » plutôt qu'« une
|
|
613
|
+
* liste ». Chacun porte un liseré de la couleur du fond, sans quoi la pile
|
|
614
|
+
* devient une bouillie dès que deux teintes se ressemblent.
|
|
615
|
+
*/
|
|
616
|
+
declare function AvatarGroup({ children, max, size, shape, variant, overlap, spreadOnHover, renderOverflow, className, style, ...props }: AvatarGroupProps): react_jsx_runtime.JSX.Element;
|
|
220
617
|
|
|
221
618
|
interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
|
|
222
619
|
label?: string;
|
|
@@ -224,6 +621,13 @@ interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
|
|
|
224
621
|
variant?: "dots" | "ring" | "double-ring";
|
|
225
622
|
tone?: ComponentTone | "current";
|
|
226
623
|
}
|
|
624
|
+
/**
|
|
625
|
+
* Une attente sans durée connue.
|
|
626
|
+
*
|
|
627
|
+
* Quand la durée est connue, une barre de progression en dit plus. Le ton
|
|
628
|
+
* `current` reprend la couleur du texte environnant : un indicateur posé
|
|
629
|
+
* dans un bouton doit suivre la couleur du bouton, pas celle du thème.
|
|
630
|
+
*/
|
|
227
631
|
declare function Spinner({ label: labelProp, size: sizeProp, variant: variantProp, tone: toneProp, className, ...props }: SpinnerProps): react_jsx_runtime.JSX.Element;
|
|
228
632
|
|
|
229
633
|
interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
@@ -235,6 +639,13 @@ interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
|
235
639
|
loadingLabel?: string;
|
|
236
640
|
spinnerProps?: Omit<SpinnerProps, "label">;
|
|
237
641
|
}
|
|
642
|
+
/**
|
|
643
|
+
* Une étiquette d'état, courte et dense.
|
|
644
|
+
*
|
|
645
|
+
* Elle porte un ton, jamais une action : un badge cliquable se confond avec
|
|
646
|
+
* un bouton petit, et l'on découvre qu'il ne l'était pas en cliquant. Ce
|
|
647
|
+
* qui agit est un bouton.
|
|
648
|
+
*/
|
|
238
649
|
declare function Badge({ tone: toneProp, variant: variantProp, left, right, loading, loadingLabel: loadingLabelProp, spinnerProps, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
|
|
239
650
|
|
|
240
651
|
interface BreadcrumbItem {
|
|
@@ -308,6 +719,13 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
308
719
|
leftIcon?: ReactNode;
|
|
309
720
|
rightIcon?: ReactNode;
|
|
310
721
|
}
|
|
722
|
+
/**
|
|
723
|
+
* L'action, sous toutes ses formes.
|
|
724
|
+
*
|
|
725
|
+
* Le chargement y est un état et non un remplacement : le bouton garde sa
|
|
726
|
+
* taille et son libellé pendant l'appel. Un bouton qui devient un rond
|
|
727
|
+
* tournant fait bouger la mise en page, et le clic suivant tombe à côté.
|
|
728
|
+
*/
|
|
311
729
|
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
312
730
|
|
|
313
731
|
interface CalendarDay {
|
|
@@ -358,8 +776,27 @@ interface CalendarProps {
|
|
|
358
776
|
tone?: ComponentTone;
|
|
359
777
|
className?: string;
|
|
360
778
|
}
|
|
779
|
+
/**
|
|
780
|
+
* Un mois de dates, sélectionnables une à une ou par plage.
|
|
781
|
+
*
|
|
782
|
+
* Trois panneaux — jours, mois, années — plutôt qu'un défilement infini :
|
|
783
|
+
* choisir une date de naissance demande de remonter trente ans, et trente
|
|
784
|
+
* ans de défilement ne sont pas une navigation.
|
|
785
|
+
*
|
|
786
|
+
* Les dates circulent en chaînes `AAAA-MM-JJ`, jamais en objets `Date` : un
|
|
787
|
+
* `Date` porte une heure et un fuseau dont une date de facture n'a que
|
|
788
|
+
* faire, et qui la décalent d'un jour une fois sur deux.
|
|
789
|
+
*/
|
|
361
790
|
declare function Calendar({ value, defaultValue, range, defaultRange, selectionMode, month, defaultMonth, mode, defaultMode, onValueChange, onRangeChange, onSelect, onMonthChange, onPanelChange, disabledDate, validRange, renderDay, cellRender, headerRender, renderExtraFooter, locale, firstDayOfWeek, showWeek, fullscreen, tone, className, }: CalendarProps): react_jsx_runtime.JSX.Element;
|
|
362
791
|
|
|
792
|
+
/**
|
|
793
|
+
* Une surface qui regroupe ce qui va ensemble.
|
|
794
|
+
*
|
|
795
|
+
* Quatre parties séparées — `Card`, `CardHeader`, `CardBody`, `CardFooter` —
|
|
796
|
+
* plutôt que des props `title` et `footer` : dès qu'un en-tête doit porter
|
|
797
|
+
* deux boutons et une pastille, une prop ne suffit plus, et l'on se retrouve
|
|
798
|
+
* à passer du JSX à travers une chaîne.
|
|
799
|
+
*/
|
|
363
800
|
declare function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
364
801
|
declare function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
365
802
|
declare function CardBody({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
@@ -432,6 +869,14 @@ interface CheckboxGroupProps {
|
|
|
432
869
|
className?: string;
|
|
433
870
|
children: ReactNode;
|
|
434
871
|
}
|
|
872
|
+
/**
|
|
873
|
+
* Une case, ou un groupe de cases.
|
|
874
|
+
*
|
|
875
|
+
* `CheckboxGroup` gère la liste des valeurs cochées; la case seule gère la
|
|
876
|
+
* sienne. L'état indéterminé est une troisième valeur, pas un entre-deux
|
|
877
|
+
* visuel : il dit « certains enfants sont cochés », ce qu'aucun booléen ne
|
|
878
|
+
* sait exprimer.
|
|
879
|
+
*/
|
|
435
880
|
declare function CheckboxGroup({ value, defaultValue, onValueChange, disabled, variant, orientation, size, tone, className, children, }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
|
|
436
881
|
interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "size"> {
|
|
437
882
|
value?: CheckboxValue;
|
|
@@ -449,6 +894,13 @@ interface ColorPickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "
|
|
|
449
894
|
onValueChange?: (value: string) => void;
|
|
450
895
|
showValue?: boolean;
|
|
451
896
|
}
|
|
897
|
+
/**
|
|
898
|
+
* Le choix d'une couleur.
|
|
899
|
+
*
|
|
900
|
+
* La valeur hexadécimale est affichée à côté du nuancier : deux bleus
|
|
901
|
+
* voisins ne se distinguent pas à l'œil sur un écran mal calibré, alors que
|
|
902
|
+
* leurs codes, si.
|
|
903
|
+
*/
|
|
452
904
|
declare const ColorPicker: react.ForwardRefExoticComponent<ColorPickerProps & react.RefAttributes<HTMLInputElement>>;
|
|
453
905
|
|
|
454
906
|
interface CommandItem {
|
|
@@ -468,6 +920,13 @@ interface CommandPaletteProps {
|
|
|
468
920
|
emptyLabel?: string;
|
|
469
921
|
className?: string;
|
|
470
922
|
}
|
|
923
|
+
/**
|
|
924
|
+
* Tout ce que l'application sait faire, au clavier.
|
|
925
|
+
*
|
|
926
|
+
* La recherche porte aussi sur des mots-clés invisibles : quelqu'un qui tape
|
|
927
|
+
* « facture » doit trouver « Nouvelle vente » sans avoir appris comment
|
|
928
|
+
* l'action s'appelle ici.
|
|
929
|
+
*/
|
|
471
930
|
declare function CommandPalette({ open, onOpenChange, items, placeholder, emptyLabel, className }: CommandPaletteProps): react_jsx_runtime.JSX.Element | null;
|
|
472
931
|
|
|
473
932
|
interface ConfirmDialogProps {
|
|
@@ -481,8 +940,22 @@ interface ConfirmDialogProps {
|
|
|
481
940
|
loading?: boolean;
|
|
482
941
|
onConfirm: () => void | Promise<void>;
|
|
483
942
|
}
|
|
943
|
+
/**
|
|
944
|
+
* La question qu'on pose avant de détruire.
|
|
945
|
+
*
|
|
946
|
+
* `onConfirm` peut rendre une promesse : le bouton reste occupé tant qu'elle
|
|
947
|
+
* n'a pas abouti. Sans cela, la boîte se referme sur un appel encore en
|
|
948
|
+
* vol, et l'on ignore si la suppression a eu lieu.
|
|
949
|
+
*/
|
|
484
950
|
declare function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel: confirmLabelProp, cancelLabel: cancelLabelProp, tone, loading, onConfirm }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
|
|
485
951
|
|
|
952
|
+
/**
|
|
953
|
+
* La largeur de lecture, et l'espacement vertical.
|
|
954
|
+
*
|
|
955
|
+
* Deux réglages posés une fois pour toutes plutôt qu'une marge inventée
|
|
956
|
+
* écran par écran : des largeurs décidées page après page finissent par
|
|
957
|
+
* diverger, et personne ne sait plus laquelle fait foi.
|
|
958
|
+
*/
|
|
486
959
|
declare function Container({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
487
960
|
declare function Stack({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
488
961
|
|
|
@@ -505,98 +978,225 @@ interface TimeParts {
|
|
|
505
978
|
declare function parseTimeValue(value?: string): TimeParts;
|
|
506
979
|
declare function formatTimeValue(parts: TimeParts, showSeconds?: boolean): string;
|
|
507
980
|
declare function formatDuration(milliseconds: number, showMilliseconds?: boolean): string;
|
|
981
|
+
/**
|
|
982
|
+
* Un temps qui s'écoule, dans un sens ou dans l'autre.
|
|
983
|
+
*
|
|
984
|
+
* L'intervalle est réglable et vaut 250 ms par défaut : une pendule au
|
|
985
|
+
* dixième de seconde redessine quarante fois par seconde pour un chiffre
|
|
986
|
+
* que personne ne lit.
|
|
987
|
+
*/
|
|
508
988
|
declare function Timer({ duration, initialValue, direction, running, interval, onChange, onFinish, format, className }: TimerProps): react_jsx_runtime.JSX.Element;
|
|
509
989
|
|
|
510
990
|
type CountdownProps = Omit<TimerProps, "direction">;
|
|
991
|
+
/**
|
|
992
|
+
* Un `Timer` qui descend.
|
|
993
|
+
*
|
|
994
|
+
* Le compte à rebours est assez fréquent — une session qui expire, un code
|
|
995
|
+
* à usage unique — pour mériter son nom plutôt qu'une prop à ne pas
|
|
996
|
+
* oublier.
|
|
997
|
+
*/
|
|
511
998
|
declare function Countdown(props: CountdownProps): react_jsx_runtime.JSX.Element;
|
|
512
999
|
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
page?: number;
|
|
524
|
-
totalPages?: number;
|
|
525
|
-
onPageChange?: (page: number) => void;
|
|
526
|
-
className?: string;
|
|
527
|
-
}
|
|
528
|
-
declare function CrudPage({ title, description, actions, toolbar, children, loading, error, empty, emptyTitle, page, totalPages, onPageChange, className }: CrudPageProps): react_jsx_runtime.JSX.Element;
|
|
529
|
-
|
|
530
|
-
interface CurrencyInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "inputMode"> {
|
|
531
|
-
value?: number | null;
|
|
532
|
-
defaultValue?: number | null;
|
|
533
|
-
currency?: string;
|
|
534
|
-
locale?: string;
|
|
535
|
-
onValueChange?: (value: number | null) => void;
|
|
536
|
-
invalid?: boolean;
|
|
537
|
-
}
|
|
538
|
-
declare const CurrencyInput: react.ForwardRefExoticComponent<CurrencyInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
539
|
-
|
|
1000
|
+
/** Liste dense, ou grille de cartes. */
|
|
1001
|
+
type DataTableView = "table" | "cards";
|
|
1002
|
+
/**
|
|
1003
|
+
* Le rôle d'une colonne dans la carte.
|
|
1004
|
+
*
|
|
1005
|
+
* `title` sert d'en-tête — la première colonne le prend si rien n'est
|
|
1006
|
+
* déclaré. `meta` s'affiche en paire libellé / valeur. `hidden` reste au
|
|
1007
|
+
* tableau seul : une carte qui recopie douze colonnes n'est plus une carte.
|
|
1008
|
+
*/
|
|
1009
|
+
type ColumnCardRole = "title" | "meta" | "hidden";
|
|
540
1010
|
interface DataTableColumn<T> {
|
|
541
1011
|
key: string;
|
|
542
1012
|
header: ReactNode;
|
|
543
|
-
|
|
544
|
-
|
|
1013
|
+
/**
|
|
1014
|
+
* Où lire la valeur : une clé de l'objet, ou une fonction pour les valeurs
|
|
1015
|
+
* calculées. Sert au rendu par défaut, à la carte et à la recherche locale.
|
|
1016
|
+
*/
|
|
1017
|
+
accessor?: keyof T | ((row: T) => unknown);
|
|
1018
|
+
/** Rendu personnalisé. Prioritaire sur `accessor`. */
|
|
1019
|
+
cell?: (row: T, index: number) => ReactNode;
|
|
1020
|
+
align?: "start" | "center" | "end";
|
|
1021
|
+
/**
|
|
1022
|
+
* Largeur suggérée — `120px`, `20%`.
|
|
1023
|
+
*
|
|
1024
|
+
* En `layout="auto"` (défaut) le navigateur n'y voit qu'une indication.
|
|
1025
|
+
* Pour qu'elle soit tenue, passer en `layout="fixed"`.
|
|
1026
|
+
*/
|
|
545
1027
|
width?: string;
|
|
546
|
-
|
|
1028
|
+
minWidth?: string;
|
|
1029
|
+
/** Coupe au lieu d'élargir. Indispensable en `layout="fixed"`. */
|
|
1030
|
+
truncate?: boolean;
|
|
1031
|
+
/** Retire la colonne du tableau sans toucher à la carte. */
|
|
1032
|
+
hidden?: boolean;
|
|
1033
|
+
/** Rend l'en-tête cliquable. Le tri lui-même reste au serveur. */
|
|
547
1034
|
sortable?: boolean;
|
|
548
1035
|
/** Le champ envoyé au serveur, si différent de `key`. */
|
|
549
1036
|
sortKey?: string;
|
|
1037
|
+
/** Place de la colonne dans la carte. */
|
|
1038
|
+
card?: ColumnCardRole;
|
|
1039
|
+
headerClassName?: string;
|
|
1040
|
+
cellClassName?: string;
|
|
1041
|
+
}
|
|
1042
|
+
interface RowAction<T> {
|
|
1043
|
+
key: string;
|
|
1044
|
+
label: ReactNode;
|
|
1045
|
+
icon?: ReactNode;
|
|
1046
|
+
tone?: ComponentTone;
|
|
1047
|
+
/** Masque l'action pour cette ligne — un solde nul, un envoi déjà annulé. */
|
|
1048
|
+
hidden?: (row: T, index: number) => boolean;
|
|
1049
|
+
disabled?: (row: T, index: number) => boolean;
|
|
1050
|
+
/** Même grammaire de droits que la navigation. */
|
|
1051
|
+
permission?: PermissionRule;
|
|
1052
|
+
/** Demande confirmation. Obligatoire pour tout ce qui détruit. */
|
|
1053
|
+
confirm?: {
|
|
1054
|
+
title: ReactNode;
|
|
1055
|
+
description?: ReactNode;
|
|
1056
|
+
confirmLabel?: string;
|
|
1057
|
+
cancelLabel?: string;
|
|
1058
|
+
destructive?: boolean;
|
|
1059
|
+
};
|
|
1060
|
+
onSelect: (row: T, index: number) => void | Promise<void>;
|
|
550
1061
|
}
|
|
551
1062
|
interface DataTableProps<T> {
|
|
552
1063
|
columns: Array<DataTableColumn<T>>;
|
|
553
1064
|
data: T[];
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
1065
|
+
/** La clé d'une ligne. Sans elle, l'index — à éviter si les lignes bougent. */
|
|
1066
|
+
getRowKey?: (row: T, index: number) => Key;
|
|
1067
|
+
title?: ReactNode;
|
|
1068
|
+
description?: ReactNode;
|
|
1069
|
+
/** Zone libre : filtres, sélecteur de période. */
|
|
1070
|
+
toolbar?: ReactNode;
|
|
1071
|
+
/** Actions globales, à droite. */
|
|
1072
|
+
actions?: ReactNode;
|
|
1073
|
+
/**
|
|
1074
|
+
* Les clés sur lesquelles porte la recherche.
|
|
1075
|
+
*
|
|
1076
|
+
* Absente, aucun champ n'est affiché : un tableau sans champ déclaré n'a
|
|
1077
|
+
* rien à chercher. Le filtrage est local, sur les lignes déjà chargées.
|
|
1078
|
+
*/
|
|
1079
|
+
searchKeys?: string[];
|
|
1080
|
+
searchPlaceholder?: string;
|
|
1081
|
+
/** Recherche déléguée. Fournie, le tableau cesse de filtrer lui-même. */
|
|
1082
|
+
onSearch?: (query: string) => void;
|
|
1083
|
+
layout?: "auto" | "fixed";
|
|
1084
|
+
/** Hauteur du corps. Sans elle, `stickyHeader` n'a rien où se coller. */
|
|
1085
|
+
maxHeight?: string;
|
|
1086
|
+
stickyHeader?: boolean;
|
|
1087
|
+
density?: "compact" | "default" | "comfortable";
|
|
1088
|
+
/** Un fond alterné, une ligne sur deux. */
|
|
1089
|
+
striped?: boolean;
|
|
1090
|
+
bordered?: boolean;
|
|
1091
|
+
rowActions?: Array<RowAction<T>> | ((row: T, index: number) => Array<RowAction<T>>);
|
|
1092
|
+
/** Au-delà, les actions passent dans un menu. */
|
|
1093
|
+
inlineActionsLimit?: number;
|
|
1094
|
+
actionsHeader?: ReactNode;
|
|
1095
|
+
/** `icon` garde la colonne étroite sur un tableau déjà large. */
|
|
1096
|
+
actionsDisplay?: "icon" | "label";
|
|
1097
|
+
/** Évalue les règles de permission des actions. */
|
|
1098
|
+
can?: (rule: PermissionRule) => boolean;
|
|
1099
|
+
view?: DataTableView;
|
|
1100
|
+
defaultView?: DataTableView;
|
|
1101
|
+
onViewChange?: (view: DataTableView) => void;
|
|
1102
|
+
showViewToggle?: boolean;
|
|
1103
|
+
/**
|
|
1104
|
+
* Bascule en cartes sous le point de rupture. Actif par défaut : un
|
|
1105
|
+
* tableau à sept colonnes est illisible sur un téléphone.
|
|
1106
|
+
*/
|
|
1107
|
+
responsive?: boolean;
|
|
1108
|
+
cardsBreakpoint?: number;
|
|
1109
|
+
/** Rendu complet d'une carte. Sans lui, elle est déduite des colonnes. */
|
|
1110
|
+
renderCard?: (row: T, index: number) => ReactNode;
|
|
557
1111
|
loading?: boolean;
|
|
558
|
-
/**
|
|
559
|
-
|
|
1112
|
+
/** Lignes fantômes pendant le premier chargement. */
|
|
1113
|
+
skeletonRows?: number;
|
|
1114
|
+
error?: ReactNode;
|
|
1115
|
+
onRetry?: () => void;
|
|
1116
|
+
empty?: {
|
|
1117
|
+
title?: ReactNode;
|
|
1118
|
+
description?: ReactNode;
|
|
1119
|
+
action?: ReactNode;
|
|
1120
|
+
};
|
|
1121
|
+
/**
|
|
1122
|
+
* Ajoute une colonne de cases à cocher.
|
|
1123
|
+
*
|
|
1124
|
+
* Sur une liste paginée côté serveur, la case d'en-tête ne porte que sur la
|
|
1125
|
+
* page affichée : le composant ne connaît pas les lignes qu'il n'a pas
|
|
1126
|
+
* reçues, et prétendre « tout sélectionner » serait un mensonge.
|
|
1127
|
+
*/
|
|
1128
|
+
selectable?: boolean;
|
|
1129
|
+
selectedKeys?: Key[];
|
|
1130
|
+
defaultSelectedKeys?: Key[];
|
|
1131
|
+
onSelectionChange?: (keys: Key[], rows: T[]) => void;
|
|
1132
|
+
isRowSelectable?: (row: T, index: number) => boolean;
|
|
1133
|
+
/** Barre affichée dès qu'une ligne est cochée. */
|
|
1134
|
+
selectionActions?: (context: {
|
|
1135
|
+
keys: Key[];
|
|
1136
|
+
rows: T[];
|
|
1137
|
+
clear: () => void;
|
|
1138
|
+
}) => ReactNode;
|
|
1139
|
+
sort?: {
|
|
1140
|
+
field: string;
|
|
1141
|
+
direction: "asc" | "desc";
|
|
1142
|
+
} | null;
|
|
560
1143
|
onSortChange?: (field: string) => void;
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
rowClassName?: (row: T) => string | undefined;
|
|
1144
|
+
onRowClick?: (row: T, index: number) => void;
|
|
1145
|
+
rowClassName?: (row: T, index: number) => string | undefined;
|
|
1146
|
+
caption?: string;
|
|
565
1147
|
className?: string;
|
|
566
1148
|
}
|
|
567
|
-
|
|
568
|
-
|
|
1149
|
+
|
|
1150
|
+
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
1151
|
+
invalid?: boolean;
|
|
1152
|
+
left?: ReactNode;
|
|
1153
|
+
right?: ReactNode;
|
|
1154
|
+
loading?: boolean;
|
|
1155
|
+
loadingLabel?: string;
|
|
1156
|
+
spinnerProps?: Omit<SpinnerProps, "label">;
|
|
1157
|
+
variant?: "solid" | "outline" | "ghost" | "underline";
|
|
1158
|
+
tone?: ComponentTone;
|
|
1159
|
+
inputSize?: "sm" | "md" | "lg";
|
|
1160
|
+
radius?: "default" | "none" | "sm" | "lg" | "full";
|
|
1161
|
+
}
|
|
1162
|
+
/**
|
|
1163
|
+
* La saisie d'une ligne de texte.
|
|
569
1164
|
*
|
|
570
|
-
*
|
|
571
|
-
*
|
|
572
|
-
*
|
|
573
|
-
* ne fait qu'afficher ce qu'on lui rend.
|
|
1165
|
+
* `left` et `right` accueillent ce qui accompagne la valeur — une unité,
|
|
1166
|
+
* une icône de recherche, un bouton de réinitialisation — à l'intérieur du
|
|
1167
|
+
* cadre. Posés à côté, ils s'en désalignent dès que la taille change.
|
|
574
1168
|
*/
|
|
575
|
-
declare
|
|
1169
|
+
declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
|
|
1170
|
+
|
|
1171
|
+
interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
1172
|
+
invalid?: boolean;
|
|
1173
|
+
resize?: "none" | "vertical" | "horizontal" | "both";
|
|
1174
|
+
}
|
|
576
1175
|
/**
|
|
577
|
-
*
|
|
1176
|
+
* La saisie de plusieurs lignes.
|
|
578
1177
|
*
|
|
579
|
-
*
|
|
580
|
-
*
|
|
581
|
-
*
|
|
1178
|
+
* Elle garde la hauteur qu'on lui donne : un redimensionnement automatique
|
|
1179
|
+
* fait sauter la page à chaque retour à la ligne, et déplace ce qu'on
|
|
1180
|
+
* s'apprêtait à cliquer.
|
|
582
1181
|
*/
|
|
583
|
-
declare
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
1182
|
+
declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
|
|
1183
|
+
|
|
1184
|
+
interface CurrencyInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "inputMode"> {
|
|
1185
|
+
value?: number | null;
|
|
1186
|
+
defaultValue?: number | null;
|
|
1187
|
+
currency?: string;
|
|
1188
|
+
locale?: string;
|
|
1189
|
+
onValueChange?: (value: number | null) => void;
|
|
1190
|
+
invalid?: boolean;
|
|
592
1191
|
}
|
|
593
1192
|
/**
|
|
594
|
-
*
|
|
1193
|
+
* La saisie d'un montant.
|
|
595
1194
|
*
|
|
596
|
-
*
|
|
597
|
-
*
|
|
1195
|
+
* La valeur rendue est un nombre, jamais la chaîne affichée : les espaces
|
|
1196
|
+
* de milliers et le symbole appartiennent à l'affichage, et un serveur qui
|
|
1197
|
+
* reçoit « 1 250 000 F CFA » ne peut rien en faire.
|
|
598
1198
|
*/
|
|
599
|
-
declare
|
|
1199
|
+
declare const CurrencyInput: react.ForwardRefExoticComponent<CurrencyInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
600
1200
|
|
|
601
1201
|
interface DatePickerProps extends Pick<CalendarProps, "locale" | "firstDayOfWeek" | "disabledDate" | "cellRender" | "showWeek"> {
|
|
602
1202
|
id?: string;
|
|
@@ -625,39 +1225,15 @@ interface DatePickerProps extends Pick<CalendarProps, "locale" | "firstDayOfWeek
|
|
|
625
1225
|
"aria-invalid"?: boolean;
|
|
626
1226
|
"aria-required"?: boolean;
|
|
627
1227
|
}
|
|
1228
|
+
/**
|
|
1229
|
+
* Une date, choisie au calendrier ou saisie au clavier.
|
|
1230
|
+
*
|
|
1231
|
+
* La valeur est une chaîne `AAAA-MM-JJ` : un objet `Date` porte une heure
|
|
1232
|
+
* et un fuseau dont une date d'échéance n'a que faire, et qui la décalent
|
|
1233
|
+
* d'un jour selon l'endroit d'où on la lit.
|
|
1234
|
+
*/
|
|
628
1235
|
declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLButtonElement>>;
|
|
629
1236
|
|
|
630
|
-
type DateRangeValue = CalendarRangeValue;
|
|
631
|
-
interface DateRangePickerProps extends Pick<CalendarProps, "locale" | "firstDayOfWeek" | "disabledDate" | "cellRender" | "showWeek"> {
|
|
632
|
-
value?: DateRangeValue;
|
|
633
|
-
defaultValue?: DateRangeValue;
|
|
634
|
-
onValueChange?: (value: DateRangeValue) => void;
|
|
635
|
-
min?: string;
|
|
636
|
-
max?: string;
|
|
637
|
-
startLabel?: string;
|
|
638
|
-
endLabel?: string;
|
|
639
|
-
allowClear?: boolean;
|
|
640
|
-
placement?: OverlayPlacement;
|
|
641
|
-
tone?: ComponentTone;
|
|
642
|
-
invalid?: boolean;
|
|
643
|
-
disabled?: boolean;
|
|
644
|
-
className?: string;
|
|
645
|
-
}
|
|
646
|
-
declare function DateRangePicker({ value, defaultValue, onValueChange, min, max, startLabel, endLabel, allowClear, placement, tone, invalid, disabled, locale, firstDayOfWeek, disabledDate, cellRender, showWeek, className }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
|
|
647
|
-
|
|
648
|
-
interface DateRangePreset {
|
|
649
|
-
label: ReactNode;
|
|
650
|
-
value: DateRangeValue;
|
|
651
|
-
}
|
|
652
|
-
interface DateRangeFilterProps {
|
|
653
|
-
value: DateRangeValue;
|
|
654
|
-
onValueChange: (value: DateRangeValue) => void;
|
|
655
|
-
presets?: DateRangePreset[];
|
|
656
|
-
onClear?: () => void;
|
|
657
|
-
className?: string;
|
|
658
|
-
}
|
|
659
|
-
declare function DateRangeFilter({ value, onValueChange, presets, onClear, className }: DateRangeFilterProps): react_jsx_runtime.JSX.Element;
|
|
660
|
-
|
|
661
1237
|
interface TimePickerProps {
|
|
662
1238
|
id?: string;
|
|
663
1239
|
name?: string;
|
|
@@ -689,6 +1265,13 @@ interface TimePickerProps {
|
|
|
689
1265
|
"aria-invalid"?: boolean;
|
|
690
1266
|
"aria-required"?: boolean;
|
|
691
1267
|
}
|
|
1268
|
+
/**
|
|
1269
|
+
* Une heure, au pas voulu.
|
|
1270
|
+
*
|
|
1271
|
+
* `minuteStep` évite de faire défiler soixante minutes pour un rendez-vous
|
|
1272
|
+
* qui tombe au quart d'heure. Les secondes ne s'affichent que si on les
|
|
1273
|
+
* demande — la plupart des heures métier n'en ont pas.
|
|
1274
|
+
*/
|
|
692
1275
|
declare const TimePicker: react.ForwardRefExoticComponent<TimePickerProps & react.RefAttributes<HTMLButtonElement>>;
|
|
693
1276
|
|
|
694
1277
|
interface DateTimeValue {
|
|
@@ -713,287 +1296,107 @@ interface DateTimePickerProps {
|
|
|
713
1296
|
timeProps?: Omit<TimePickerProps, "value" | "defaultValue" | "onValueChange" | "tone" | "invalid" | "disabled">;
|
|
714
1297
|
className?: string;
|
|
715
1298
|
}
|
|
1299
|
+
/**
|
|
1300
|
+
* Une date et une heure, dans un seul champ.
|
|
1301
|
+
*
|
|
1302
|
+
* `needConfirm` existe parce que l'heure se choisit après la date : sans
|
|
1303
|
+
* validation explicite, le panneau se referme sur la date et l'heure reste
|
|
1304
|
+
* celle de la veille.
|
|
1305
|
+
*/
|
|
716
1306
|
declare function DateTimePicker({ value, defaultValue, onValueChange, minuteStep, secondStep, showSeconds, hourFormat, needConfirm, minDate, maxDate, tone, invalid, disabled, dateProps, timeProps, className }: DateTimePickerProps): react_jsx_runtime.JSX.Element;
|
|
717
1307
|
|
|
718
|
-
interface
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
value
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
columns?: 1 | 2 | 3;
|
|
728
|
-
bordered?: boolean;
|
|
1308
|
+
interface MultiSelectProps {
|
|
1309
|
+
id?: string;
|
|
1310
|
+
options: SelectOption[];
|
|
1311
|
+
value?: string[];
|
|
1312
|
+
defaultValue?: string[];
|
|
1313
|
+
onValueChange?: (value: string[]) => void;
|
|
1314
|
+
placeholder?: string;
|
|
1315
|
+
searchable?: boolean;
|
|
1316
|
+
disabled?: boolean;
|
|
729
1317
|
className?: string;
|
|
1318
|
+
"aria-describedby"?: string;
|
|
1319
|
+
"aria-labelledby"?: string;
|
|
1320
|
+
"aria-invalid"?: boolean;
|
|
1321
|
+
"aria-required"?: boolean;
|
|
730
1322
|
}
|
|
731
|
-
|
|
1323
|
+
/**
|
|
1324
|
+
* Plusieurs choix dans une liste.
|
|
1325
|
+
*
|
|
1326
|
+
* Les valeurs retenues s'affichent dans le champ, retirables une à une :
|
|
1327
|
+
* un compte seul — « 3 sélectionnés » — oblige à rouvrir la liste pour
|
|
1328
|
+
* savoir lesquels.
|
|
1329
|
+
*/
|
|
1330
|
+
declare function MultiSelect({ id, options, value, defaultValue, onValueChange, placeholder, searchable, disabled, className, ...ariaProps }: MultiSelectProps): react_jsx_runtime.JSX.Element;
|
|
732
1331
|
|
|
733
|
-
|
|
1332
|
+
type RadioValue = string | number;
|
|
1333
|
+
interface RadioGroupProps {
|
|
1334
|
+
id?: string;
|
|
1335
|
+
name?: string;
|
|
1336
|
+
label?: ReactNode;
|
|
1337
|
+
value?: RadioValue;
|
|
1338
|
+
defaultValue?: RadioValue;
|
|
1339
|
+
onValueChange?: (value: RadioValue) => void;
|
|
734
1340
|
orientation?: "horizontal" | "vertical";
|
|
735
|
-
decorative?: boolean;
|
|
736
|
-
}
|
|
737
|
-
declare function Divider({ orientation, decorative, className, ...props }: DividerProps): react_jsx_runtime.JSX.Element;
|
|
738
|
-
|
|
739
|
-
/** Ce que la réf impérative expose — ouvrir un tiroir depuis l'extérieur. */
|
|
740
|
-
type DrawerRef = {
|
|
741
|
-
open: () => void;
|
|
742
|
-
close: () => void;
|
|
743
|
-
toggle: () => void;
|
|
744
|
-
isOpen: () => boolean;
|
|
745
|
-
};
|
|
746
|
-
type DrawerPosition = "left" | "right" | "top" | "bottom";
|
|
747
|
-
type DrawerSize = "sm" | "md" | "lg" | "xl";
|
|
748
|
-
interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
749
|
-
open?: boolean;
|
|
750
|
-
defaultOpen?: boolean;
|
|
751
|
-
onOpenChange?: (open: boolean) => void;
|
|
752
|
-
position?: DrawerPosition;
|
|
753
|
-
size?: DrawerSize;
|
|
754
|
-
closeOnOutsideClick?: boolean;
|
|
755
|
-
closeOnEsc?: boolean;
|
|
756
|
-
}
|
|
757
|
-
/** Alias historique, attendu par les composants venus du registre. */
|
|
758
|
-
type IDrawerProps = DrawerProps;
|
|
759
|
-
type DrawerComponent = ForwardRefExoticComponent<IDrawerProps & RefAttributes<DrawerRef>> & {
|
|
760
|
-
Header: typeof DrawerHeader;
|
|
761
|
-
Body: typeof DrawerBody;
|
|
762
|
-
Footer: typeof DrawerFooter;
|
|
763
|
-
Title: typeof DrawerTitle;
|
|
764
|
-
Close: typeof DrawerClose;
|
|
765
|
-
};
|
|
766
|
-
declare const Drawer: DrawerComponent;
|
|
767
|
-
declare function DrawerHeader({ children }: {
|
|
768
|
-
children: React.ReactNode;
|
|
769
|
-
}): react_jsx_runtime.JSX.Element;
|
|
770
|
-
declare function DrawerTitle({ children }: {
|
|
771
|
-
children: React.ReactNode;
|
|
772
|
-
}): react_jsx_runtime.JSX.Element;
|
|
773
|
-
declare function DrawerBody({ children }: {
|
|
774
|
-
children: React.ReactNode;
|
|
775
|
-
}): react_jsx_runtime.JSX.Element;
|
|
776
|
-
declare function DrawerFooter({ children }: {
|
|
777
|
-
children: React.ReactNode;
|
|
778
|
-
}): react_jsx_runtime.JSX.Element;
|
|
779
|
-
declare function DrawerClose(): react_jsx_runtime.JSX.Element | null;
|
|
780
|
-
|
|
781
|
-
interface MenuItem {
|
|
782
|
-
key: string;
|
|
783
|
-
label: ReactNode;
|
|
784
|
-
icon?: ReactNode;
|
|
785
|
-
/** Un raccourci affiché à droite. Purement indicatif : rien n'est écouté. */
|
|
786
|
-
shortcut?: string;
|
|
787
1341
|
disabled?: boolean;
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
1342
|
+
size?: "sm" | "md" | "lg";
|
|
1343
|
+
tone?: ComponentTone;
|
|
1344
|
+
className?: string;
|
|
1345
|
+
"aria-describedby"?: string;
|
|
1346
|
+
"aria-labelledby"?: string;
|
|
1347
|
+
"aria-invalid"?: boolean;
|
|
1348
|
+
"aria-required"?: boolean;
|
|
1349
|
+
children: ReactNode;
|
|
793
1350
|
}
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
1351
|
+
/**
|
|
1352
|
+
* Un choix parmi plusieurs, tous visibles.
|
|
1353
|
+
*
|
|
1354
|
+
* Au-delà de cinq ou six options, une liste déroulante lit mieux : des
|
|
1355
|
+
* boutons radio en montrent la totalité, ce qui est leur intérêt tant qu'on
|
|
1356
|
+
* peut encore les embrasser du regard.
|
|
1357
|
+
*/
|
|
1358
|
+
declare function RadioGroup({ id, name, label, value, defaultValue, onValueChange, orientation, disabled, size, tone, className, children, ...ariaProps }: RadioGroupProps): react_jsx_runtime.JSX.Element;
|
|
1359
|
+
interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "name" | "value" | "size"> {
|
|
1360
|
+
value: RadioValue;
|
|
1361
|
+
label?: ReactNode;
|
|
1362
|
+
children?: ReactNode;
|
|
797
1363
|
}
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
1364
|
+
declare function Radio({ value, label, children, className, disabled, onChange, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
|
|
1365
|
+
interface RadioButtonProps {
|
|
1366
|
+
value: RadioValue;
|
|
1367
|
+
disabled?: boolean;
|
|
1368
|
+
children: ReactNode;
|
|
1369
|
+
className?: string;
|
|
802
1370
|
}
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
onActiveIndexChange: (index: number) => void;
|
|
811
|
-
id?: string | undefined;
|
|
812
|
-
className?: string | undefined;
|
|
1371
|
+
declare function RadioButton({ value, disabled, children, className }: RadioButtonProps): react_jsx_runtime.JSX.Element;
|
|
1372
|
+
|
|
1373
|
+
interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
|
|
1374
|
+
checked?: boolean;
|
|
1375
|
+
defaultChecked?: boolean;
|
|
1376
|
+
label?: ReactNode;
|
|
1377
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
813
1378
|
}
|
|
814
1379
|
/**
|
|
815
|
-
*
|
|
1380
|
+
* Une bascule à effet immédiat.
|
|
816
1381
|
*
|
|
817
|
-
*
|
|
818
|
-
*
|
|
1382
|
+
* À la différence d'une case à cocher, elle n'attend pas de validation :
|
|
1383
|
+
* ce qu'on bascule s'applique tout de suite. Une case dans un formulaire,
|
|
1384
|
+
* une bascule dans des réglages.
|
|
819
1385
|
*/
|
|
820
|
-
declare
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
}>;
|
|
827
|
-
onSelect?: (item: MenuItem) => void;
|
|
828
|
-
open?: boolean;
|
|
829
|
-
defaultOpen?: boolean;
|
|
830
|
-
onOpenChange?: (open: boolean) => void;
|
|
831
|
-
placement?: OverlayPlacement;
|
|
832
|
-
matchTriggerWidth?: boolean;
|
|
833
|
-
className?: string;
|
|
1386
|
+
declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
|
|
1387
|
+
|
|
1388
|
+
interface FileUploadProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
|
|
1389
|
+
label?: string;
|
|
1390
|
+
description?: string;
|
|
1391
|
+
onFilesChange?: (files: File[]) => void;
|
|
834
1392
|
}
|
|
835
1393
|
/**
|
|
836
|
-
* Un
|
|
1394
|
+
* Un dépôt de fichiers, par clic ou par glisser.
|
|
837
1395
|
*
|
|
838
|
-
*
|
|
839
|
-
*
|
|
840
|
-
*
|
|
1396
|
+
* Le glisser-déposer seul exclut le clavier et le tactile; le bouton seul
|
|
1397
|
+
* ignore le geste que tout le monde essaie d'abord. Les deux mènent au même
|
|
1398
|
+
* champ natif.
|
|
841
1399
|
*/
|
|
842
|
-
declare function DropdownMenu({ items, children, onSelect, open: openProp, defaultOpen, onOpenChange, placement, matchTriggerWidth, className, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
|
|
843
|
-
interface ContextMenuProps {
|
|
844
|
-
items: MenuEntry[];
|
|
845
|
-
children: ReactNode;
|
|
846
|
-
onSelect?: (item: MenuItem) => void;
|
|
847
|
-
className?: string;
|
|
848
|
-
}
|
|
849
|
-
/**
|
|
850
|
-
* Le même menu, ouvert au clic droit sur une zone.
|
|
851
|
-
*
|
|
852
|
-
* L'ancre est un point, pas un élément : un repère de taille nulle est posé
|
|
853
|
-
* aux coordonnées du pointeur et confié à `Overlay`, qui ne voit pas la
|
|
854
|
-
* différence. C'est ce qui évite un second moteur de placement.
|
|
855
|
-
*/
|
|
856
|
-
declare function ContextMenu({ items, children, onSelect, className, }: ContextMenuProps): react_jsx_runtime.JSX.Element;
|
|
857
|
-
|
|
858
|
-
interface DurationDisplayProps {
|
|
859
|
-
milliseconds: number;
|
|
860
|
-
locale?: string;
|
|
861
|
-
style?: "short" | "long" | "clock";
|
|
862
|
-
className?: string;
|
|
863
|
-
}
|
|
864
|
-
declare function DurationDisplay({ milliseconds, locale, style, className }: DurationDisplayProps): react_jsx_runtime.JSX.Element;
|
|
865
|
-
|
|
866
|
-
interface EmptyStateProps {
|
|
867
|
-
icon?: ReactNode;
|
|
868
|
-
title: ReactNode;
|
|
869
|
-
description?: ReactNode;
|
|
870
|
-
action?: ReactNode;
|
|
871
|
-
compact?: boolean;
|
|
872
|
-
className?: string;
|
|
873
|
-
}
|
|
874
|
-
declare function EmptyState({ icon, title, description, action, compact, className }: EmptyStateProps): react_jsx_runtime.JSX.Element;
|
|
875
|
-
|
|
876
|
-
interface EntityMetaProps {
|
|
877
|
-
createdAt?: Date | string | number;
|
|
878
|
-
updatedAt?: Date | string | number;
|
|
879
|
-
createdBy?: ReactNode;
|
|
880
|
-
updatedBy?: ReactNode;
|
|
881
|
-
identifier?: string;
|
|
882
|
-
status?: ReactNode;
|
|
883
|
-
locale?: string;
|
|
884
|
-
className?: string;
|
|
885
|
-
}
|
|
886
|
-
declare function EntityMeta({ createdAt, updatedAt, createdBy, updatedBy, identifier, status, locale, className }: EntityMetaProps): react_jsx_runtime.JSX.Element;
|
|
887
|
-
|
|
888
|
-
interface ErrorStateProps {
|
|
889
|
-
title?: ReactNode;
|
|
890
|
-
description?: ReactNode;
|
|
891
|
-
error?: unknown;
|
|
892
|
-
action?: ReactNode;
|
|
893
|
-
onRetry?: () => void;
|
|
894
|
-
retryLabel?: string;
|
|
895
|
-
compact?: boolean;
|
|
896
|
-
className?: string;
|
|
897
|
-
}
|
|
898
|
-
declare function ErrorState({ title: titleProp, description, error, action, onRetry, retryLabel: retryLabelProp, compact, className }: ErrorStateProps): react_jsx_runtime.JSX.Element;
|
|
899
|
-
|
|
900
|
-
interface CalendarEvent {
|
|
901
|
-
id: string;
|
|
902
|
-
date: string;
|
|
903
|
-
title: string;
|
|
904
|
-
tone?: ComponentTone;
|
|
905
|
-
}
|
|
906
|
-
interface EventCalendarProps extends Omit<CalendarProps, "renderDay"> {
|
|
907
|
-
events: CalendarEvent[];
|
|
908
|
-
maxEventsPerDay?: number;
|
|
909
|
-
onEventClick?: (event: CalendarEvent) => void;
|
|
910
|
-
}
|
|
911
|
-
declare function EventCalendar({ events, maxEventsPerDay, onEventClick, ...props }: EventCalendarProps): react_jsx_runtime.JSX.Element;
|
|
912
|
-
|
|
913
|
-
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
914
|
-
invalid?: boolean;
|
|
915
|
-
left?: ReactNode;
|
|
916
|
-
right?: ReactNode;
|
|
917
|
-
loading?: boolean;
|
|
918
|
-
loadingLabel?: string;
|
|
919
|
-
spinnerProps?: Omit<SpinnerProps, "label">;
|
|
920
|
-
variant?: "solid" | "outline" | "ghost" | "underline";
|
|
921
|
-
tone?: ComponentTone;
|
|
922
|
-
inputSize?: "sm" | "md" | "lg";
|
|
923
|
-
radius?: "default" | "none" | "sm" | "lg" | "full";
|
|
924
|
-
}
|
|
925
|
-
declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
|
|
926
|
-
|
|
927
|
-
interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
928
|
-
invalid?: boolean;
|
|
929
|
-
resize?: "none" | "vertical" | "horizontal" | "both";
|
|
930
|
-
}
|
|
931
|
-
declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
|
|
932
|
-
|
|
933
|
-
interface MultiSelectProps {
|
|
934
|
-
id?: string;
|
|
935
|
-
options: SelectOption[];
|
|
936
|
-
value?: string[];
|
|
937
|
-
defaultValue?: string[];
|
|
938
|
-
onValueChange?: (value: string[]) => void;
|
|
939
|
-
placeholder?: string;
|
|
940
|
-
searchable?: boolean;
|
|
941
|
-
disabled?: boolean;
|
|
942
|
-
className?: string;
|
|
943
|
-
"aria-describedby"?: string;
|
|
944
|
-
"aria-labelledby"?: string;
|
|
945
|
-
"aria-invalid"?: boolean;
|
|
946
|
-
"aria-required"?: boolean;
|
|
947
|
-
}
|
|
948
|
-
declare function MultiSelect({ id, options, value, defaultValue, onValueChange, placeholder, searchable, disabled, className, ...ariaProps }: MultiSelectProps): react_jsx_runtime.JSX.Element;
|
|
949
|
-
|
|
950
|
-
type RadioValue = string | number;
|
|
951
|
-
interface RadioGroupProps {
|
|
952
|
-
id?: string;
|
|
953
|
-
name?: string;
|
|
954
|
-
label?: ReactNode;
|
|
955
|
-
value?: RadioValue;
|
|
956
|
-
defaultValue?: RadioValue;
|
|
957
|
-
onValueChange?: (value: RadioValue) => void;
|
|
958
|
-
orientation?: "horizontal" | "vertical";
|
|
959
|
-
disabled?: boolean;
|
|
960
|
-
size?: "sm" | "md" | "lg";
|
|
961
|
-
tone?: ComponentTone;
|
|
962
|
-
className?: string;
|
|
963
|
-
"aria-describedby"?: string;
|
|
964
|
-
"aria-labelledby"?: string;
|
|
965
|
-
"aria-invalid"?: boolean;
|
|
966
|
-
"aria-required"?: boolean;
|
|
967
|
-
children: ReactNode;
|
|
968
|
-
}
|
|
969
|
-
declare function RadioGroup({ id, name, label, value, defaultValue, onValueChange, orientation, disabled, size, tone, className, children, ...ariaProps }: RadioGroupProps): react_jsx_runtime.JSX.Element;
|
|
970
|
-
interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "name" | "value" | "size"> {
|
|
971
|
-
value: RadioValue;
|
|
972
|
-
label?: ReactNode;
|
|
973
|
-
children?: ReactNode;
|
|
974
|
-
}
|
|
975
|
-
declare function Radio({ value, label, children, className, disabled, onChange, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
|
|
976
|
-
interface RadioButtonProps {
|
|
977
|
-
value: RadioValue;
|
|
978
|
-
disabled?: boolean;
|
|
979
|
-
children: ReactNode;
|
|
980
|
-
className?: string;
|
|
981
|
-
}
|
|
982
|
-
declare function RadioButton({ value, disabled, children, className }: RadioButtonProps): react_jsx_runtime.JSX.Element;
|
|
983
|
-
|
|
984
|
-
interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
|
|
985
|
-
checked?: boolean;
|
|
986
|
-
defaultChecked?: boolean;
|
|
987
|
-
label?: ReactNode;
|
|
988
|
-
onCheckedChange?: (checked: boolean) => void;
|
|
989
|
-
}
|
|
990
|
-
declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
|
|
991
|
-
|
|
992
|
-
interface FileUploadProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
|
|
993
|
-
label?: string;
|
|
994
|
-
description?: string;
|
|
995
|
-
onFilesChange?: (files: File[]) => void;
|
|
996
|
-
}
|
|
997
1400
|
declare function FileUpload({ label, description, onFilesChange, className, multiple, accept, disabled, ...props }: FileUploadProps): react_jsx_runtime.JSX.Element;
|
|
998
1401
|
|
|
999
1402
|
interface ImageUploadProps extends Omit<FileUploadProps, "accept" | "onFilesChange"> {
|
|
@@ -1002,6 +1405,13 @@ interface ImageUploadProps extends Omit<FileUploadProps, "accept" | "onFilesChan
|
|
|
1002
1405
|
onValueChange?: (file: File | null, previewUrl?: string) => void;
|
|
1003
1406
|
previewAlt?: string;
|
|
1004
1407
|
}
|
|
1408
|
+
/**
|
|
1409
|
+
* Un dépôt de fichier qui montre ce qu'on vient de choisir.
|
|
1410
|
+
*
|
|
1411
|
+
* L'aperçu est local, construit avant tout envoi : attendre le retour du
|
|
1412
|
+
* serveur pour afficher l'image laisse un carré vide au moment précis où
|
|
1413
|
+
* l'on veut vérifier qu'on n'a pas pris la mauvaise.
|
|
1414
|
+
*/
|
|
1005
1415
|
declare function ImageUpload({ accept, value, onValueChange, previewAlt, className, ...props }: ImageUploadProps): react_jsx_runtime.JSX.Element;
|
|
1006
1416
|
|
|
1007
1417
|
type SliderRangeValue = [number, number];
|
|
@@ -1062,6 +1472,12 @@ interface RatingProps {
|
|
|
1062
1472
|
"aria-invalid"?: boolean;
|
|
1063
1473
|
"aria-required"?: boolean;
|
|
1064
1474
|
}
|
|
1475
|
+
/**
|
|
1476
|
+
* Une note, en étoiles.
|
|
1477
|
+
*
|
|
1478
|
+
* `allowClear` rend la note réversible : sans lui, cliquer une étoile par
|
|
1479
|
+
* erreur est définitif, puisqu'aucune étoile ne vaut « aucune note ».
|
|
1480
|
+
*/
|
|
1065
1481
|
declare function Rating({ id, value, defaultValue, onValueChange, max, allowHalf, allowClear, disabled, label, className, ...ariaProps }: RatingProps): react_jsx_runtime.JSX.Element;
|
|
1066
1482
|
|
|
1067
1483
|
interface RichTextEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
|
|
@@ -1071,6 +1487,13 @@ interface RichTextEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, "onCh
|
|
|
1071
1487
|
placeholder?: string;
|
|
1072
1488
|
disabled?: boolean;
|
|
1073
1489
|
}
|
|
1490
|
+
/**
|
|
1491
|
+
* Une saisie de texte mis en forme.
|
|
1492
|
+
*
|
|
1493
|
+
* Elle rend du HTML, pas une structure à elle : ce qui sort se stocke, se
|
|
1494
|
+
* renvoie et s'affiche partout ailleurs sans qu'un convertisseur soit
|
|
1495
|
+
* nécessaire.
|
|
1496
|
+
*/
|
|
1074
1497
|
declare function RichTextEditor({ value, defaultValue, onValueChange, placeholder, disabled, className, ...props }: RichTextEditorProps): react_jsx_runtime.JSX.Element;
|
|
1075
1498
|
|
|
1076
1499
|
interface MarkdownEditorProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "defaultValue" | "onChange"> {
|
|
@@ -1079,6 +1502,13 @@ interface MarkdownEditorProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaEl
|
|
|
1079
1502
|
onValueChange?: (value: string) => void;
|
|
1080
1503
|
preview?: (value: string) => ReactNode;
|
|
1081
1504
|
}
|
|
1505
|
+
/**
|
|
1506
|
+
* Une saisie Markdown, avec son aperçu.
|
|
1507
|
+
*
|
|
1508
|
+
* Le rendu n'est pas fourni : `preview` reçoit le texte et rend ce qu'il
|
|
1509
|
+
* veut. Embarquer un moteur Markdown imposerait le nôtre à un projet qui a
|
|
1510
|
+
* déjà le sien — et ferait grossir le paquet pour tous les autres.
|
|
1511
|
+
*/
|
|
1082
1512
|
declare function MarkdownEditor({ value, defaultValue, onValueChange, preview, className, ...props }: MarkdownEditorProps): react_jsx_runtime.JSX.Element;
|
|
1083
1513
|
|
|
1084
1514
|
interface JsonEditorProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "defaultValue" | "onChange"> {
|
|
@@ -1087,6 +1517,13 @@ interface JsonEditorProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElemen
|
|
|
1087
1517
|
onValueChange?: (value: string, parsed: unknown | undefined) => void;
|
|
1088
1518
|
formatOnBlur?: boolean;
|
|
1089
1519
|
}
|
|
1520
|
+
/**
|
|
1521
|
+
* Une zone de saisie qui connaît la forme de ce qu'on y écrit.
|
|
1522
|
+
*
|
|
1523
|
+
* Elle signale une syntaxe invalide pendant la frappe et rend l'objet
|
|
1524
|
+
* analysé à côté du texte : l'appelant reçoit donc les deux, et n'a pas à
|
|
1525
|
+
* refaire un `JSON.parse` dans un `try`.
|
|
1526
|
+
*/
|
|
1090
1527
|
declare function JsonEditor({ value, defaultValue, onValueChange, formatOnBlur, className, ...props }: JsonEditorProps): react_jsx_runtime.JSX.Element;
|
|
1091
1528
|
|
|
1092
1529
|
interface OtpInputProps {
|
|
@@ -1104,6 +1541,13 @@ interface OtpInputProps {
|
|
|
1104
1541
|
"aria-invalid"?: boolean;
|
|
1105
1542
|
"aria-required"?: boolean;
|
|
1106
1543
|
}
|
|
1544
|
+
/**
|
|
1545
|
+
* Un code à usage unique, chiffre par chiffre.
|
|
1546
|
+
*
|
|
1547
|
+
* Le collage d'un code entier remplit toutes les cases d'un coup : c'est
|
|
1548
|
+
* ainsi qu'on le récupère d'un SMS, et le forcer à être retapé serait une
|
|
1549
|
+
* punition pour rien.
|
|
1550
|
+
*/
|
|
1107
1551
|
declare function OtpInput({ id, value, defaultValue, onValueChange, length, inputMode, mask, disabled, className, ...ariaProps }: OtpInputProps): react_jsx_runtime.JSX.Element;
|
|
1108
1552
|
|
|
1109
1553
|
interface TagsInputProps {
|
|
@@ -1121,6 +1565,13 @@ interface TagsInputProps {
|
|
|
1121
1565
|
"aria-invalid"?: boolean;
|
|
1122
1566
|
"aria-required"?: boolean;
|
|
1123
1567
|
}
|
|
1568
|
+
/**
|
|
1569
|
+
* Une liste de mots, saisis à la volée.
|
|
1570
|
+
*
|
|
1571
|
+
* Les séparateurs sont déclarés : la virgule et l'entrée par défaut, parce
|
|
1572
|
+
* que ce sont les deux touches que l'on presse sans y penser après avoir
|
|
1573
|
+
* tapé un mot.
|
|
1574
|
+
*/
|
|
1124
1575
|
declare function TagsInput({ id, value, defaultValue, onValueChange, placeholder, separators, maxTags, disabled, className, ...ariaProps }: TagsInputProps): react_jsx_runtime.JSX.Element;
|
|
1125
1576
|
|
|
1126
1577
|
interface ReferenceOption extends SelectOption {
|
|
@@ -1129,6 +1580,13 @@ interface ReferenceOption extends SelectOption {
|
|
|
1129
1580
|
interface ReferenceSelectProps extends Omit<AutocompleteProps, "options"> {
|
|
1130
1581
|
options: ReferenceOption[];
|
|
1131
1582
|
}
|
|
1583
|
+
/**
|
|
1584
|
+
* Un choix parmi des objets métier, pas parmi des mots.
|
|
1585
|
+
*
|
|
1586
|
+
* Chaque option porte une description : deux clients peuvent s'appeler
|
|
1587
|
+
* « Entreprise Alpha », et seule la ligne en dessous — la ville, le numéro
|
|
1588
|
+
* de compte — dit lequel on vise.
|
|
1589
|
+
*/
|
|
1132
1590
|
declare function ReferenceSelect({ options, ...props }: ReferenceSelectProps): react_jsx_runtime.JSX.Element;
|
|
1133
1591
|
|
|
1134
1592
|
type FieldType = "text" | "textarea" | "email" | "password" | "phone" | "number" | "currency" | "date" | "time" | "datetime" | "select" | "multiselect" | "radio" | "checkbox" | "switch" | "file" | "image" | "slider" | "rating" | "color" | "rich-text" | "markdown" | "json" | "otp" | "tags" | "autocomplete" | "reference" | "hidden";
|
|
@@ -1191,104 +1649,841 @@ interface FieldProps {
|
|
|
1191
1649
|
htmlFor?: string;
|
|
1192
1650
|
orientation?: "vertical" | "horizontal";
|
|
1193
1651
|
className?: string;
|
|
1194
|
-
name?: string;
|
|
1195
|
-
value?: FieldValue;
|
|
1196
|
-
defaultValue?: FieldValue;
|
|
1197
|
-
onValueChange?: (value: FieldValue) => void;
|
|
1198
|
-
options?: SelectOption[];
|
|
1199
|
-
referenceOptions?: ReferenceOption[];
|
|
1200
|
-
controlLabel?: ReactNode;
|
|
1201
|
-
placeholder?: string;
|
|
1202
|
-
disabled?: boolean;
|
|
1203
|
-
controlProps?: ControlProps;
|
|
1204
|
-
children?: ReactElement<FieldControlProps>;
|
|
1652
|
+
name?: string;
|
|
1653
|
+
value?: FieldValue;
|
|
1654
|
+
defaultValue?: FieldValue;
|
|
1655
|
+
onValueChange?: (value: FieldValue) => void;
|
|
1656
|
+
options?: SelectOption[];
|
|
1657
|
+
referenceOptions?: ReferenceOption[];
|
|
1658
|
+
controlLabel?: ReactNode;
|
|
1659
|
+
placeholder?: string;
|
|
1660
|
+
disabled?: boolean;
|
|
1661
|
+
controlProps?: ControlProps;
|
|
1662
|
+
children?: ReactElement<FieldControlProps>;
|
|
1663
|
+
}
|
|
1664
|
+
/**
|
|
1665
|
+
* Le champ, et tout ce qui l'entoure.
|
|
1666
|
+
*
|
|
1667
|
+
* Un libellé, un contrôle, un message d'erreur, et les attributs qui les
|
|
1668
|
+
* relient — `id`, `aria-describedby`, `aria-invalid`. Ce câblage est
|
|
1669
|
+
* toujours le même et toujours oublié quelque part : ici il est fait une
|
|
1670
|
+
* fois.
|
|
1671
|
+
*
|
|
1672
|
+
* `type` choisit le contrôle parmi les vingt-sept que la bibliothèque
|
|
1673
|
+
* fournit. Le champ ne les réimplémente pas : il les monte et leur passe le
|
|
1674
|
+
* branchement.
|
|
1675
|
+
*/
|
|
1676
|
+
declare function Field(rawProps: FieldProps): react_jsx_runtime.JSX.Element;
|
|
1677
|
+
|
|
1678
|
+
/** Un champ du formulaire : les props de `Field`, plus sa place. */
|
|
1679
|
+
interface FormFieldConfig extends Omit<FieldProps, "field" | "name"> {
|
|
1680
|
+
/** La clé dans les valeurs. C'est elle qui branche le champ. */
|
|
1681
|
+
name: string;
|
|
1682
|
+
/** Nombre de colonnes occupées. Ignoré sur une seule colonne. */
|
|
1683
|
+
colSpan?: number;
|
|
1684
|
+
rowSpan?: number;
|
|
1685
|
+
}
|
|
1686
|
+
/** Un groupe de champs, avec son titre et sa propre grille. */
|
|
1687
|
+
interface FormFieldGroup {
|
|
1688
|
+
group: string;
|
|
1689
|
+
description?: ReactNode;
|
|
1690
|
+
columns?: number;
|
|
1691
|
+
fields: FormFieldConfig[];
|
|
1692
|
+
}
|
|
1693
|
+
type FormEntry = FormFieldConfig | FormFieldGroup;
|
|
1694
|
+
/**
|
|
1695
|
+
* Les valeurs qu'un formulaire déclaratif peut porter.
|
|
1696
|
+
*
|
|
1697
|
+
* Plus étroit que `FormValues` volontairement : ce formulaire rend ses
|
|
1698
|
+
* champs avec `Field`, qui ne sait afficher que ces types-là. Un objet
|
|
1699
|
+
* imbriqué n'aurait pas de contrôle pour le montrer.
|
|
1700
|
+
*/
|
|
1701
|
+
type FormShape = Record<string, FieldValue>;
|
|
1702
|
+
interface FormProps<TValues extends FormShape = FormShape> {
|
|
1703
|
+
fields: FormEntry[];
|
|
1704
|
+
/**
|
|
1705
|
+
* L'adaptateur de formulaire.
|
|
1706
|
+
*
|
|
1707
|
+
* Sans lui, un `useLocalForm` est monté en interne à partir de
|
|
1708
|
+
* `defaultValues`, `validate` et `onSubmit`. Avec lui — react-hook-form,
|
|
1709
|
+
* Formik, votre propre magasin — le formulaire ne fait plus que rendre.
|
|
1710
|
+
*/
|
|
1711
|
+
form?: FormAdapter<TValues>;
|
|
1712
|
+
defaultValues?: TValues;
|
|
1713
|
+
/** La validation. Un schéma Zod s'y branche en cinq lignes. */
|
|
1714
|
+
validate?: FormValidator<TValues>;
|
|
1715
|
+
onSubmit?: (values: TValues) => void | Promise<void>;
|
|
1716
|
+
columns?: number;
|
|
1717
|
+
submitText?: ReactNode;
|
|
1718
|
+
clearText?: ReactNode;
|
|
1719
|
+
showClear?: boolean;
|
|
1720
|
+
submitProps?: ButtonProps;
|
|
1721
|
+
/** Remplace entièrement la barre de boutons. */
|
|
1722
|
+
actions?: ReactNode;
|
|
1723
|
+
loading?: boolean;
|
|
1724
|
+
/** Désactive l'envoi tant que rien n'a changé. */
|
|
1725
|
+
requireDirty?: boolean;
|
|
1726
|
+
/** Désactive l'envoi tant qu'une erreur est en vigueur. */
|
|
1727
|
+
requireValid?: boolean;
|
|
1728
|
+
className?: string;
|
|
1729
|
+
}
|
|
1730
|
+
/**
|
|
1731
|
+
* Un formulaire décrit par ses champs.
|
|
1732
|
+
*
|
|
1733
|
+
* Il ne connaît aucune bibliothèque de formulaires : il reçoit un
|
|
1734
|
+
* `FormAdapter`, ou en monte un lui-même. C'est ce qui lui permet de servir un
|
|
1735
|
+
* projet sous react-hook-form et un projet sans rien, avec le même code.
|
|
1736
|
+
*
|
|
1737
|
+
* ```tsx
|
|
1738
|
+
* <Form
|
|
1739
|
+
* columns={2}
|
|
1740
|
+
* defaultValues={{ nom: "", email: "" }}
|
|
1741
|
+
* validate={createValidator({ nom: [required()], email: [required(), email()] })}
|
|
1742
|
+
* onSubmit={(values) => api.post("/clients", { body: values })}
|
|
1743
|
+
* fields={[
|
|
1744
|
+
* { name: "nom", label: "Nom du client", required: true },
|
|
1745
|
+
* { name: "email", label: "Adresse e-mail", type: "email", required: true },
|
|
1746
|
+
* ]}
|
|
1747
|
+
* />
|
|
1748
|
+
* ```
|
|
1749
|
+
*/
|
|
1750
|
+
declare function Form<TValues extends FormShape = FormShape>({ fields, form: adapter, defaultValues, validate, onSubmit, columns, submitText, clearText, showClear, submitProps, actions, loading, requireDirty, requireValid, className, }: FormProps<TValues>): react_jsx_runtime.JSX.Element;
|
|
1751
|
+
|
|
1752
|
+
/**
|
|
1753
|
+
* La description d'un objet métier, écrite une seule fois.
|
|
1754
|
+
*
|
|
1755
|
+
* Une page de liste décrit le même objet trois fois : en colonnes pour le
|
|
1756
|
+
* tableau, en champs pour le formulaire, en lignes pour le détail. Plus la
|
|
1757
|
+
* validation, les clés de recherche et la règle de droits par opération. Ces
|
|
1758
|
+
* descriptions divergent, et toujours dans le même sens — c'est le formulaire
|
|
1759
|
+
* qui oublie le champ que le tableau affiche.
|
|
1760
|
+
*
|
|
1761
|
+
* `defineResource` la décrit une fois; tout le reste en est dérivé. Ce module
|
|
1762
|
+
* n'exporte donc pas de composant, mais les fonctions qui font cette
|
|
1763
|
+
* dérivation : `CrudPage` les appelle, et chacune reste remplaçable par la
|
|
1764
|
+
* prop correspondante.
|
|
1765
|
+
*/
|
|
1766
|
+
|
|
1767
|
+
/**
|
|
1768
|
+
* Une propriété d'une ressource.
|
|
1769
|
+
*
|
|
1770
|
+
* Elle est déclarée **une fois** et sert partout : colonne du tableau, champ
|
|
1771
|
+
* du formulaire, ligne de la vue de détail, règle de validation, clé de
|
|
1772
|
+
* recherche. C'est l'objet de toute cette déclaration — trois descriptions du
|
|
1773
|
+
* même client finissent toujours par diverger, et c'est le formulaire qui
|
|
1774
|
+
* oublie le champ que le tableau affiche.
|
|
1775
|
+
*/
|
|
1776
|
+
interface ResourceField<T = unknown> {
|
|
1777
|
+
/** Le contrôle de saisie et le rendu par défaut. `text` sans précision. */
|
|
1778
|
+
type?: FieldType;
|
|
1779
|
+
/** À défaut, la clé de la propriété, première lettre en capitale. */
|
|
1780
|
+
label?: ReactNode;
|
|
1781
|
+
description?: ReactNode;
|
|
1782
|
+
helpText?: ReactNode;
|
|
1783
|
+
placeholder?: string;
|
|
1784
|
+
required?: boolean;
|
|
1785
|
+
/** Les règles en plus de `required`. Celles du type sont ajoutées seules. */
|
|
1786
|
+
rules?: Array<Rule<never>>;
|
|
1787
|
+
/** Les choix d'un `select`, `radio` ou `multiselect`. */
|
|
1788
|
+
options?: SelectOption[];
|
|
1789
|
+
/** Valeur de départ d'une création. */
|
|
1790
|
+
defaultValue?: FieldValue;
|
|
1791
|
+
/**
|
|
1792
|
+
* Lu, mais pas saisi : un identifiant, une date de création, un total.
|
|
1793
|
+
*
|
|
1794
|
+
* Reste au tableau et au détail, disparaît du formulaire. Sans quoi une
|
|
1795
|
+
* page de modification renverrait au serveur des champs qu'il calcule
|
|
1796
|
+
* lui-même.
|
|
1797
|
+
*/
|
|
1798
|
+
readOnly?: boolean;
|
|
1799
|
+
/** Par défaut, tout sauf les types trop longs pour une cellule. */
|
|
1800
|
+
inTable?: boolean;
|
|
1801
|
+
/** Par défaut, tout sauf `readOnly`. */
|
|
1802
|
+
inForm?: boolean;
|
|
1803
|
+
/** Par défaut, tout. */
|
|
1804
|
+
inDetail?: boolean;
|
|
1805
|
+
/** Par défaut, les types textuels. */
|
|
1806
|
+
searchable?: boolean;
|
|
1807
|
+
sortable?: boolean;
|
|
1808
|
+
align?: "start" | "center" | "end";
|
|
1809
|
+
width?: string;
|
|
1810
|
+
truncate?: boolean;
|
|
1811
|
+
card?: ColumnCardRole;
|
|
1812
|
+
/** Place du champ dans la grille du formulaire. */
|
|
1813
|
+
colSpan?: number;
|
|
1814
|
+
/** Le groupe de formulaire où ranger le champ. */
|
|
1815
|
+
group?: string;
|
|
1816
|
+
/** La devise d'un montant. */
|
|
1817
|
+
currency?: string;
|
|
1818
|
+
/** Le nombre de décimales d'un `number`. */
|
|
1819
|
+
decimals?: number;
|
|
1820
|
+
/**
|
|
1821
|
+
* Le ton d'une valeur de `select`, par valeur.
|
|
1822
|
+
*
|
|
1823
|
+
* Déclaré, la colonne rend une pastille plutôt qu'un mot : un statut se lit
|
|
1824
|
+
* alors d'un balayage, sans qu'on écrive une fonction de rendu.
|
|
1825
|
+
*/
|
|
1826
|
+
tones?: Record<string, ComponentTone>;
|
|
1827
|
+
/** Le rendu en tableau et en détail. Écrase celui déduit du type. */
|
|
1828
|
+
render?: (row: T, index: number) => ReactNode;
|
|
1829
|
+
}
|
|
1830
|
+
interface ResourceDefinition<T> {
|
|
1831
|
+
/** L'identifiant technique — sert aux droits et aux clés de cache. */
|
|
1832
|
+
name: string;
|
|
1833
|
+
/**
|
|
1834
|
+
* Comment la ressource se nomme à l'écran.
|
|
1835
|
+
*
|
|
1836
|
+
* `create` est déclaré plutôt que fabriqué : « Nouvelle facture » et
|
|
1837
|
+
* « Nouveau client » ne se déduisent pas du singulier sans connaître le
|
|
1838
|
+
* genre, et se tromper une fois sur deux est pire que d'écrire « Créer ».
|
|
1839
|
+
*/
|
|
1840
|
+
label?: {
|
|
1841
|
+
singular?: ReactNode;
|
|
1842
|
+
plural?: ReactNode;
|
|
1843
|
+
create?: ReactNode;
|
|
1844
|
+
};
|
|
1845
|
+
description?: ReactNode;
|
|
1846
|
+
/** La propriété qui identifie une ligne. `id` par défaut. */
|
|
1847
|
+
key?: (keyof T & string) | ((row: T, index: number) => Key);
|
|
1848
|
+
/** Les propriétés, dans l'ordre où elles s'affichent. */
|
|
1849
|
+
fields: Record<string, ResourceField<T>>;
|
|
1850
|
+
/**
|
|
1851
|
+
* Les droits des quatre opérations.
|
|
1852
|
+
*
|
|
1853
|
+
* `"auto"` les dérive du nom : `facture.creer`, `facture.modifier`,
|
|
1854
|
+
* `facture.supprimer`, `facture.lire`. C'est une convention, pas une
|
|
1855
|
+
* obligation — chaque règle se déclare aussi à la main.
|
|
1856
|
+
*/
|
|
1857
|
+
permissions?: "auto" | {
|
|
1858
|
+
create?: PermissionRule;
|
|
1859
|
+
view?: PermissionRule;
|
|
1860
|
+
edit?: PermissionRule;
|
|
1861
|
+
delete?: PermissionRule;
|
|
1862
|
+
};
|
|
1863
|
+
/** Colonnes de la grille du formulaire. */
|
|
1864
|
+
formColumns?: number;
|
|
1865
|
+
}
|
|
1866
|
+
/**
|
|
1867
|
+
* Déclarer une ressource.
|
|
1868
|
+
*
|
|
1869
|
+
* ```ts
|
|
1870
|
+
* const factures = defineResource<Facture>({
|
|
1871
|
+
* name: "facture",
|
|
1872
|
+
* label: { singular: "Facture", plural: "Factures" },
|
|
1873
|
+
* fields: {
|
|
1874
|
+
* reference: { label: "Référence", required: true },
|
|
1875
|
+
* client: { label: "Client", required: true },
|
|
1876
|
+
* montant: { type: "currency", currency: "XOF", align: "end" },
|
|
1877
|
+
* statut: {
|
|
1878
|
+
* type: "select",
|
|
1879
|
+
* options: [{ value: "payee", label: "Payée" }],
|
|
1880
|
+
* tones: { payee: "success" },
|
|
1881
|
+
* },
|
|
1882
|
+
* },
|
|
1883
|
+
* });
|
|
1884
|
+
* ```
|
|
1885
|
+
*
|
|
1886
|
+
* La fonction ne transforme rien : elle sert à ce que TypeScript vérifie la
|
|
1887
|
+
* déclaration au moment où on l'écrit, plutôt qu'au moment où on la passe à
|
|
1888
|
+
* `CrudPage`. Le message d'erreur y gagne dix lignes de lisibilité.
|
|
1889
|
+
*/
|
|
1890
|
+
declare function defineResource<T>(definition: ResourceDefinition<T>): ResourceDefinition<T>;
|
|
1891
|
+
/** Les colonnes du tableau, dans l'ordre de déclaration. */
|
|
1892
|
+
declare function resourceColumns<T>(resource: ResourceDefinition<T>): Array<DataTableColumn<T>>;
|
|
1893
|
+
/**
|
|
1894
|
+
* Les lignes de la vue de détail.
|
|
1895
|
+
*
|
|
1896
|
+
* Tenues à part des colonnes : une note de trois phrases n'a pas sa place
|
|
1897
|
+
* dans une cellule, mais c'est précisément au détail qu'on va la lire. Les
|
|
1898
|
+
* dériver du tableau priverait la vue de détail de tout ce qui est long, ce
|
|
1899
|
+
* qui est exactement ce qu'elle existe pour montrer.
|
|
1900
|
+
*/
|
|
1901
|
+
declare function resourceDetailColumns<T>(resource: ResourceDefinition<T>): Array<DataTableColumn<T>>;
|
|
1902
|
+
/** Les champs du formulaire, groupés si la déclaration les groupe. */
|
|
1903
|
+
declare function resourceFormFields<T>(resource: ResourceDefinition<T>): FormEntry[];
|
|
1904
|
+
/**
|
|
1905
|
+
* La validation, dérivée des types et des `required`.
|
|
1906
|
+
*
|
|
1907
|
+
* Un champ `email` valide une adresse sans qu'on le demande : le type le dit
|
|
1908
|
+
* déjà. Les règles déclarées s'y ajoutent, elles ne les remplacent pas.
|
|
1909
|
+
*/
|
|
1910
|
+
declare function resourceValidator<T>(resource: ResourceDefinition<T>): FormValidator<FormShape> | undefined;
|
|
1911
|
+
/** Les clés que la recherche locale parcourt. */
|
|
1912
|
+
declare function resourceSearchKeys<T>(resource: ResourceDefinition<T>): string[];
|
|
1913
|
+
/** Les valeurs de départ d'une création. */
|
|
1914
|
+
declare function resourceDefaults<T>(resource: ResourceDefinition<T>): FormShape;
|
|
1915
|
+
/** Comment lire la clé d'une ligne. */
|
|
1916
|
+
declare function resourceRowKey<T>(resource: ResourceDefinition<T>): (row: T, index: number) => Key;
|
|
1917
|
+
/**
|
|
1918
|
+
* Les droits des quatre opérations.
|
|
1919
|
+
*
|
|
1920
|
+
* `"auto"` applique la convention `<ressource>.<verbe>` — la seule chose
|
|
1921
|
+
* qu'une convention doit faire : éviter d'écrire quatre fois ce qui se
|
|
1922
|
+
* déduit une fois.
|
|
1923
|
+
*/
|
|
1924
|
+
declare function resourcePermissions<T>(resource: ResourceDefinition<T>): {
|
|
1925
|
+
create?: PermissionRule;
|
|
1926
|
+
view?: PermissionRule;
|
|
1927
|
+
edit?: PermissionRule;
|
|
1928
|
+
delete?: PermissionRule;
|
|
1929
|
+
};
|
|
1930
|
+
|
|
1931
|
+
/** Laquelle des trois boîtes est ouverte, et sur quelle ligne. */
|
|
1932
|
+
interface CrudDialogState<T> {
|
|
1933
|
+
mode: "create" | "edit" | "view";
|
|
1934
|
+
row?: T;
|
|
1935
|
+
index?: number;
|
|
1936
|
+
}
|
|
1937
|
+
/** Les titres et la forme des boîtes. Tout est facultatif. */
|
|
1938
|
+
interface CrudDialogOptions {
|
|
1939
|
+
createTitle?: ReactNode;
|
|
1940
|
+
createDescription?: ReactNode;
|
|
1941
|
+
editTitle?: ReactNode;
|
|
1942
|
+
editDescription?: ReactNode;
|
|
1943
|
+
viewTitle?: ReactNode;
|
|
1944
|
+
viewDescription?: ReactNode;
|
|
1945
|
+
submitText?: ReactNode;
|
|
1946
|
+
/** Colonnes du formulaire. Deux, au-delà de quatre ou cinq champs. */
|
|
1947
|
+
columns?: number;
|
|
1948
|
+
/** Colonnes de la vue de détail. */
|
|
1949
|
+
detailColumns?: 1 | 2 | 3;
|
|
1950
|
+
}
|
|
1951
|
+
interface CrudDialogsProps<T> {
|
|
1952
|
+
state: CrudDialogState<T> | null;
|
|
1953
|
+
onClose: () => void;
|
|
1954
|
+
columns: Array<DataTableColumn<T>>;
|
|
1955
|
+
fields?: FormEntry[] | undefined;
|
|
1956
|
+
validate?: FormValidator<FormShape> | undefined;
|
|
1957
|
+
onSubmit?: ((values: FormShape, context: {
|
|
1958
|
+
mode: "create" | "edit";
|
|
1959
|
+
row?: T;
|
|
1960
|
+
index?: number;
|
|
1961
|
+
}) => void | Promise<void>) | undefined;
|
|
1962
|
+
createDefaults?: FormShape | undefined;
|
|
1963
|
+
toFormValues?: ((row: T) => FormShape) | undefined;
|
|
1964
|
+
renderDetail?: ((row: T, index: number) => ReactNode) | undefined;
|
|
1965
|
+
getRowKey?: ((row: T, index: number) => Key) | undefined;
|
|
1966
|
+
dialog?: CrudDialogOptions | undefined;
|
|
1967
|
+
}
|
|
1968
|
+
/**
|
|
1969
|
+
* Les boîtes du CRUD : créer, modifier, consulter.
|
|
1970
|
+
*
|
|
1971
|
+
* Elles n'inventent rien — `Modal` pour la boîte, `Form` pour la saisie,
|
|
1972
|
+
* `Descriptions` pour la lecture. Ce qu'elles apportent est de savoir
|
|
1973
|
+
* laquelle ouvrir, avec quelles valeurs, et de refermer une fois l'envoi
|
|
1974
|
+
* passé.
|
|
1975
|
+
*/
|
|
1976
|
+
declare function CrudDialogs<T>({ state, onClose, columns, fields, validate, onSubmit, createDefaults, toFormValues, renderDetail, getRowKey, dialog, }: CrudDialogsProps<T>): react_jsx_runtime.JSX.Element;
|
|
1977
|
+
|
|
1978
|
+
/**
|
|
1979
|
+
* La personnalisation d'une action standard.
|
|
1980
|
+
*
|
|
1981
|
+
* Tout est facultatif : fournir le gestionnaire suffit à obtenir un bouton
|
|
1982
|
+
* qui marche. Ce qui est ici ne sert qu'à s'écarter du défaut — un autre
|
|
1983
|
+
* libellé, une règle de droits, une confirmation en plus ou en moins.
|
|
1984
|
+
*/
|
|
1985
|
+
interface CrudActionOptions<T> {
|
|
1986
|
+
label?: ReactNode;
|
|
1987
|
+
icon?: ReactNode;
|
|
1988
|
+
permission?: PermissionRule;
|
|
1989
|
+
hidden?: (row: T, index: number) => boolean;
|
|
1990
|
+
disabled?: (row: T, index: number) => boolean;
|
|
1991
|
+
/** `false` retire la confirmation que `delete` a par défaut. */
|
|
1992
|
+
confirm?: RowAction<T>["confirm"] | false;
|
|
1993
|
+
}
|
|
1994
|
+
interface CrudCreateOptions {
|
|
1995
|
+
label?: ReactNode;
|
|
1996
|
+
icon?: ReactNode;
|
|
1997
|
+
permission?: PermissionRule;
|
|
1998
|
+
disabled?: boolean;
|
|
1999
|
+
}
|
|
2000
|
+
interface CrudPageBase<T> {
|
|
2001
|
+
/** À défaut, le pluriel de la ressource. */
|
|
2002
|
+
title?: ReactNode;
|
|
2003
|
+
description?: ReactNode;
|
|
2004
|
+
eyebrow?: ReactNode;
|
|
2005
|
+
data: T[];
|
|
2006
|
+
getRowKey?: (row: T, index: number) => Key;
|
|
2007
|
+
/**
|
|
2008
|
+
* Ce que fait le bouton de création.
|
|
2009
|
+
*
|
|
2010
|
+
* Facultatif : avec `fields`, la page ouvre elle-même son formulaire. Le
|
|
2011
|
+
* fournir sert à partir ailleurs — une page dédiée, un assistant en
|
|
2012
|
+
* plusieurs étapes — et prend alors le pas sur la boîte.
|
|
2013
|
+
*/
|
|
2014
|
+
onCreate?: () => void;
|
|
2015
|
+
/** Idem : sans lui, la boîte de détail s'ouvre. */
|
|
2016
|
+
onView?: (row: T, index: number) => void;
|
|
2017
|
+
/** Idem : sans lui, le formulaire s'ouvre prérempli. */
|
|
2018
|
+
onEdit?: (row: T, index: number) => void;
|
|
2019
|
+
/** Confirmée d'office. Détruire sans demander est une faute. */
|
|
2020
|
+
onDelete?: (row: T, index: number) => void | Promise<void>;
|
|
2021
|
+
/**
|
|
2022
|
+
* Les champs de création et de modification.
|
|
2023
|
+
*
|
|
2024
|
+
* Les déclarer suffit à obtenir un CRUD complet : le bouton « Créer » ouvre
|
|
2025
|
+
* un formulaire vide, « Modifier » le même prérempli, « Consulter » la
|
|
2026
|
+
* ligne en lecture. C'est la même description que `Form` — aucun schéma
|
|
2027
|
+
* propre à cette page, aucune bibliothèque imposée.
|
|
2028
|
+
*/
|
|
2029
|
+
fields?: FormEntry[];
|
|
2030
|
+
/** Ce que la page fait d'un formulaire envoyé. */
|
|
2031
|
+
onSubmit?: (values: FormShape, context: {
|
|
2032
|
+
mode: "create" | "edit";
|
|
2033
|
+
row?: T;
|
|
2034
|
+
index?: number;
|
|
2035
|
+
}) => void | Promise<void>;
|
|
2036
|
+
/**
|
|
2037
|
+
* La validation, sous la même forme que `Form`.
|
|
2038
|
+
*
|
|
2039
|
+
* `createValidator` de `@sia-ui/utils/validation` en produit une; un Zod s'y
|
|
2040
|
+
* branche en cinq lignes, sans que le composant connaisse Zod.
|
|
2041
|
+
*/
|
|
2042
|
+
validate?: FormValidator<FormShape>;
|
|
2043
|
+
/** Valeurs de départ d'une création. Par défaut, des champs vides. */
|
|
2044
|
+
createDefaults?: FormShape;
|
|
2045
|
+
/**
|
|
2046
|
+
* Comment une ligne devient des valeurs de formulaire.
|
|
2047
|
+
*
|
|
2048
|
+
* Par défaut, les champs de même nom sont repris tels quels. À fournir dès
|
|
2049
|
+
* que la ligne et le formulaire ne parlent pas la même langue — une date
|
|
2050
|
+
* ISO à découper, un objet lié à réduire à son identifiant.
|
|
2051
|
+
*/
|
|
2052
|
+
toFormValues?: (row: T) => FormShape;
|
|
2053
|
+
/**
|
|
2054
|
+
* La vue de détail.
|
|
2055
|
+
*
|
|
2056
|
+
* Par défaut dérivée des colonnes, qui disent déjà quoi montrer. Une
|
|
2057
|
+
* fonction la remplace, `false` la retire avec son action.
|
|
2058
|
+
*/
|
|
2059
|
+
detail?: boolean | ((row: T, index: number) => ReactNode);
|
|
2060
|
+
/** Titres, largeur et nombre de colonnes des boîtes. */
|
|
2061
|
+
dialog?: CrudDialogOptions;
|
|
2062
|
+
/**
|
|
2063
|
+
* De quoi s'écarter des défauts.
|
|
2064
|
+
*
|
|
2065
|
+
* `false` retire une action alors même que son gestionnaire existe — utile
|
|
2066
|
+
* quand le gestionnaire sert ailleurs, par exemple à un raccourci clavier.
|
|
2067
|
+
*/
|
|
2068
|
+
operations?: {
|
|
2069
|
+
create?: CrudCreateOptions | false;
|
|
2070
|
+
view?: CrudActionOptions<T> | false;
|
|
2071
|
+
edit?: CrudActionOptions<T> | false;
|
|
2072
|
+
delete?: CrudActionOptions<T> | false;
|
|
2073
|
+
};
|
|
2074
|
+
/** Des actions de ligne en plus des quatre standard. */
|
|
2075
|
+
extraRowActions?: Array<RowAction<T>> | ((row: T, index: number) => Array<RowAction<T>>);
|
|
2076
|
+
/** Suppression groupée. Ajoute la sélection et sa barre d'actions. */
|
|
2077
|
+
onBulkDelete?: (keys: Key[], rows: T[]) => void | Promise<void>;
|
|
2078
|
+
can?: (rule: PermissionRule) => boolean;
|
|
2079
|
+
/** Actions de page, à droite du titre. S'ajoute au bouton de création. */
|
|
2080
|
+
headerActions?: ReactNode;
|
|
2081
|
+
toolbar?: ReactNode;
|
|
2082
|
+
searchKeys?: string[];
|
|
2083
|
+
searchPlaceholder?: string;
|
|
2084
|
+
onSearch?: (query: string) => void;
|
|
2085
|
+
loading?: boolean;
|
|
2086
|
+
error?: ReactNode;
|
|
2087
|
+
onRetry?: () => void;
|
|
2088
|
+
empty?: DataTableProps<T>["empty"];
|
|
2089
|
+
page?: number;
|
|
2090
|
+
totalPages?: number;
|
|
2091
|
+
onPageChange?: (page: number) => void;
|
|
2092
|
+
/**
|
|
2093
|
+
* Ce qui n'a pas de raccourci ici passe au tableau tel quel — densité,
|
|
2094
|
+
* mode cartes, tri, colonnes figées.
|
|
2095
|
+
*/
|
|
2096
|
+
table?: Partial<Omit<DataTableProps<T>, "columns" | "data">>;
|
|
2097
|
+
/** Remplace le tableau. Le reste de la page continue de fonctionner. */
|
|
2098
|
+
children?: ReactNode;
|
|
2099
|
+
className?: string;
|
|
2100
|
+
}
|
|
2101
|
+
/**
|
|
2102
|
+
* Les props de la page.
|
|
2103
|
+
*
|
|
2104
|
+
* Deux façons de la remplir, et une seule des deux à la fois : une ressource
|
|
2105
|
+
* déclarée, d'où tout se déduit, ou des colonnes écrites à la main. L'union
|
|
2106
|
+
* est là pour que TypeScript exige l'une ou l'autre — une page sans colonnes
|
|
2107
|
+
* ni ressource ne montrerait rien, et le dirait à l'exécution.
|
|
2108
|
+
*/
|
|
2109
|
+
type CrudPageProps<T> = CrudPageBase<T> & ({
|
|
2110
|
+
/**
|
|
2111
|
+
* La ressource, déclarée une fois avec `defineResource`.
|
|
2112
|
+
*
|
|
2113
|
+
* Colonnes, formulaire, détail, validation, recherche, clé de ligne
|
|
2114
|
+
* et droits en sont dérivés. Chacun reste remplaçable — `columns`,
|
|
2115
|
+
* `fields`, `validate`, `searchKeys` passent devant la dérivation.
|
|
2116
|
+
*/
|
|
2117
|
+
resource: ResourceDefinition<T>;
|
|
2118
|
+
columns?: Array<DataTableColumn<T>>;
|
|
2119
|
+
} | {
|
|
2120
|
+
resource?: undefined;
|
|
2121
|
+
columns: Array<DataTableColumn<T>>;
|
|
2122
|
+
});
|
|
2123
|
+
/**
|
|
2124
|
+
* Une page de liste, avec ses quatre opérations.
|
|
2125
|
+
*
|
|
2126
|
+
* Créer, consulter, modifier, supprimer : ce sont les mêmes partout, et les
|
|
2127
|
+
* réécrire à chaque écran produit quatre variantes qui divergent — celle qui
|
|
2128
|
+
* oublie la confirmation, celle qui ne vérifie pas les droits, celle dont le
|
|
2129
|
+
* bouton ne se désactive pas pendant l'appel.
|
|
2130
|
+
*
|
|
2131
|
+
* Ici, fournir le gestionnaire suffit. Ne pas le fournir retire l'action.
|
|
2132
|
+
*/
|
|
2133
|
+
declare function CrudPage<T>({ resource, title, description, eyebrow, columns: colonnesFournies, data, getRowKey: cleFournie, onCreate, onView, onEdit, onDelete, fields: champsFournis, onSubmit, validate: validationFournie, createDefaults, toFormValues, detail, dialog, operations, extraRowActions, onBulkDelete, can, headerActions, toolbar, searchKeys: clesDeRecherche, searchPlaceholder, onSearch, loading, error, onRetry, empty, page, totalPages, onPageChange, table, children, className, }: CrudPageProps<T>): react_jsx_runtime.JSX.Element;
|
|
2134
|
+
|
|
2135
|
+
/**
|
|
2136
|
+
* L'état du tableau dans la barre d'adresse.
|
|
2137
|
+
*
|
|
2138
|
+
* `history.replaceState` plutôt que `pushState` : trier une colonne trois
|
|
2139
|
+
* fois de suite ne doit pas demander trois retours en arrière pour revenir
|
|
2140
|
+
* d'où l'on vient.
|
|
2141
|
+
*/
|
|
2142
|
+
declare function createUrlTableStorage(mode?: "replace" | "push"): TableQueryStorage;
|
|
2143
|
+
interface UseDataTableQueryOptions {
|
|
2144
|
+
defaultState?: Partial<TableQueryState>;
|
|
2145
|
+
/** `false` garde l'état en mémoire — utile dans une modale. */
|
|
2146
|
+
syncUrl?: boolean;
|
|
2147
|
+
/** Empile une entrée d'historique à chaque changement. */
|
|
2148
|
+
history?: "replace" | "push";
|
|
2149
|
+
/** Préfixe des clés, pour deux tableaux sur la même page. */
|
|
2150
|
+
prefix?: string;
|
|
2151
|
+
}
|
|
2152
|
+
/**
|
|
2153
|
+
* Tri, filtres et pagination d'un tableau, synchronisés avec l'URL.
|
|
2154
|
+
*
|
|
2155
|
+
* Le calcul vit dans `@sia-ui/headless`; il n'y a ici que le branchement sur
|
|
2156
|
+
* la barre d'adresse, qui est la seule partie propre au navigateur.
|
|
2157
|
+
*/
|
|
2158
|
+
declare function useDataTableQuery(options?: UseDataTableQueryOptions): TableQuery;
|
|
2159
|
+
|
|
2160
|
+
/**
|
|
2161
|
+
* Un tableau de données.
|
|
2162
|
+
*
|
|
2163
|
+
* Il n'ordonne rien lui-même : à partir de quelques centaines de lignes,
|
|
2164
|
+
* trier côté client veut dire les avoir toutes téléchargées. Le tri est une
|
|
2165
|
+
* intention envoyée au serveur, et le tableau affiche ce qu'on lui rend.
|
|
2166
|
+
*
|
|
2167
|
+
* La recherche fait exception, et seulement par défaut : sans `onSearch`,
|
|
2168
|
+
* elle filtre les lignes déjà chargées — ce qui suffit tant que tout tient
|
|
2169
|
+
* sur une page.
|
|
2170
|
+
*/
|
|
2171
|
+
declare function DataTable<T>({ columns, data, getRowKey, title, description, toolbar, actions, searchKeys, searchPlaceholder, onSearch, layout, maxHeight, stickyHeader, density, striped, bordered, rowActions, inlineActionsLimit, actionsHeader, actionsDisplay, can, view: viewProp, defaultView, onViewChange, showViewToggle, responsive, cardsBreakpoint, renderCard, loading, skeletonRows, error, onRetry, empty, selectable, selectedKeys: selectedProp, defaultSelectedKeys, onSelectionChange, isRowSelectable, selectionActions, sort, onSortChange, onRowClick, rowClassName, caption, className, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
2172
|
+
|
|
2173
|
+
type DateRangeValue = CalendarRangeValue;
|
|
2174
|
+
interface DateRangePickerProps extends Pick<CalendarProps, "locale" | "firstDayOfWeek" | "disabledDate" | "cellRender" | "showWeek"> {
|
|
2175
|
+
value?: DateRangeValue;
|
|
2176
|
+
defaultValue?: DateRangeValue;
|
|
2177
|
+
onValueChange?: (value: DateRangeValue) => void;
|
|
2178
|
+
min?: string;
|
|
2179
|
+
max?: string;
|
|
2180
|
+
startLabel?: string;
|
|
2181
|
+
endLabel?: string;
|
|
2182
|
+
allowClear?: boolean;
|
|
2183
|
+
placement?: OverlayPlacement;
|
|
2184
|
+
tone?: ComponentTone;
|
|
2185
|
+
invalid?: boolean;
|
|
2186
|
+
disabled?: boolean;
|
|
2187
|
+
className?: string;
|
|
2188
|
+
}
|
|
2189
|
+
/**
|
|
2190
|
+
* Un début et une fin, choisis ensemble.
|
|
2191
|
+
*
|
|
2192
|
+
* Deux champs séparés laissent poser une fin antérieure au début, et il
|
|
2193
|
+
* faut alors décider lequel des deux avait tort. Ici les deux bornes sont
|
|
2194
|
+
* une seule valeur, et le calendrier les tient dans l'ordre.
|
|
2195
|
+
*/
|
|
2196
|
+
declare function DateRangePicker({ value, defaultValue, onValueChange, min, max, startLabel, endLabel, allowClear, placement, tone, invalid, disabled, locale, firstDayOfWeek, disabledDate, cellRender, showWeek, className }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
|
|
2197
|
+
|
|
2198
|
+
interface DateRangePreset {
|
|
2199
|
+
label: ReactNode;
|
|
2200
|
+
value: DateRangeValue;
|
|
2201
|
+
}
|
|
2202
|
+
interface DateRangeFilterProps {
|
|
2203
|
+
value: DateRangeValue;
|
|
2204
|
+
onValueChange: (value: DateRangeValue) => void;
|
|
2205
|
+
presets?: DateRangePreset[];
|
|
2206
|
+
onClear?: () => void;
|
|
2207
|
+
className?: string;
|
|
2208
|
+
}
|
|
2209
|
+
/**
|
|
2210
|
+
* Une période, avec ses raccourcis.
|
|
2211
|
+
*
|
|
2212
|
+
* Les périodes utiles se comptent sur une main — ce mois, le trimestre,
|
|
2213
|
+
* l'exercice — et les proposer évite de saisir deux dates pour la question
|
|
2214
|
+
* que tout le monde pose en premier.
|
|
2215
|
+
*/
|
|
2216
|
+
declare function DateRangeFilter({ value, onValueChange, presets, onClear, className }: DateRangeFilterProps): react_jsx_runtime.JSX.Element;
|
|
2217
|
+
|
|
2218
|
+
interface DescriptionItem {
|
|
2219
|
+
key: string;
|
|
2220
|
+
label: ReactNode;
|
|
2221
|
+
value: ReactNode;
|
|
2222
|
+
span?: 1 | 2 | 3;
|
|
2223
|
+
}
|
|
2224
|
+
interface DescriptionsProps {
|
|
2225
|
+
items: DescriptionItem[];
|
|
2226
|
+
title?: ReactNode;
|
|
2227
|
+
columns?: 1 | 2 | 3;
|
|
2228
|
+
bordered?: boolean;
|
|
2229
|
+
className?: string;
|
|
2230
|
+
}
|
|
2231
|
+
/**
|
|
2232
|
+
* Des paires libellé / valeur, en colonnes.
|
|
2233
|
+
*
|
|
2234
|
+
* C'est la forme d'une fiche en lecture — ce qu'un formulaire montre quand
|
|
2235
|
+
* il n'y a rien à saisir. `span` laisse une valeur longue occuper toute la
|
|
2236
|
+
* ligne plutôt que d'être coupée dans une colonne étroite.
|
|
2237
|
+
*/
|
|
2238
|
+
declare function Descriptions({ items, title, columns, bordered, className }: DescriptionsProps): react_jsx_runtime.JSX.Element;
|
|
2239
|
+
|
|
2240
|
+
interface DividerProps extends HTMLAttributes<HTMLDivElement> {
|
|
2241
|
+
orientation?: "horizontal" | "vertical";
|
|
2242
|
+
decorative?: boolean;
|
|
2243
|
+
}
|
|
2244
|
+
/**
|
|
2245
|
+
* Un trait entre deux choses.
|
|
2246
|
+
*
|
|
2247
|
+
* `decorative` décide s'il compte pour un lecteur d'écran. Un trait qui
|
|
2248
|
+
* sépare deux groupes de sens est une information; un trait qui aère ne
|
|
2249
|
+
* l'est pas, et l'annoncer ajoute du bruit à chaque parcours.
|
|
2250
|
+
*/
|
|
2251
|
+
declare function Divider({ orientation, decorative, className, ...props }: DividerProps): react_jsx_runtime.JSX.Element;
|
|
2252
|
+
|
|
2253
|
+
/** Ce que la réf impérative expose — ouvrir un tiroir depuis l'extérieur. */
|
|
2254
|
+
type DrawerRef = {
|
|
2255
|
+
open: () => void;
|
|
2256
|
+
close: () => void;
|
|
2257
|
+
toggle: () => void;
|
|
2258
|
+
isOpen: () => boolean;
|
|
2259
|
+
};
|
|
2260
|
+
type DrawerPosition = "left" | "right" | "top" | "bottom";
|
|
2261
|
+
type DrawerSize = "sm" | "md" | "lg" | "xl";
|
|
2262
|
+
interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
2263
|
+
open?: boolean;
|
|
2264
|
+
defaultOpen?: boolean;
|
|
2265
|
+
onOpenChange?: (open: boolean) => void;
|
|
2266
|
+
position?: DrawerPosition;
|
|
2267
|
+
size?: DrawerSize;
|
|
2268
|
+
closeOnOutsideClick?: boolean;
|
|
2269
|
+
closeOnEsc?: boolean;
|
|
2270
|
+
}
|
|
2271
|
+
/** Alias historique, attendu par les composants venus du registre. */
|
|
2272
|
+
type IDrawerProps = DrawerProps;
|
|
2273
|
+
type DrawerComponent = ForwardRefExoticComponent<IDrawerProps & RefAttributes<DrawerRef>> & {
|
|
2274
|
+
Header: typeof DrawerHeader;
|
|
2275
|
+
Body: typeof DrawerBody;
|
|
2276
|
+
Footer: typeof DrawerFooter;
|
|
2277
|
+
Title: typeof DrawerTitle;
|
|
2278
|
+
Close: typeof DrawerClose;
|
|
2279
|
+
};
|
|
2280
|
+
/**
|
|
2281
|
+
* Un panneau qui entre par un bord.
|
|
2282
|
+
*
|
|
2283
|
+
* Il sert là où une boîte modale serait trop : un filtre qu'on ajuste en
|
|
2284
|
+
* regardant la liste derrière, un formulaire qu'on remplit sans perdre sa
|
|
2285
|
+
* place. Le focus y est enfermé tant qu'il est ouvert, comme dans un
|
|
2286
|
+
* modal — sans quoi la tabulation continue dans la page cachée.
|
|
2287
|
+
*/
|
|
2288
|
+
declare const Drawer: DrawerComponent;
|
|
2289
|
+
declare function DrawerHeader({ children }: {
|
|
2290
|
+
children: React.ReactNode;
|
|
2291
|
+
}): react_jsx_runtime.JSX.Element;
|
|
2292
|
+
declare function DrawerTitle({ children }: {
|
|
2293
|
+
children: React.ReactNode;
|
|
2294
|
+
}): react_jsx_runtime.JSX.Element;
|
|
2295
|
+
declare function DrawerBody({ children }: {
|
|
2296
|
+
children: React.ReactNode;
|
|
2297
|
+
}): react_jsx_runtime.JSX.Element;
|
|
2298
|
+
declare function DrawerFooter({ children }: {
|
|
2299
|
+
children: React.ReactNode;
|
|
2300
|
+
}): react_jsx_runtime.JSX.Element;
|
|
2301
|
+
declare function DrawerClose(): react_jsx_runtime.JSX.Element | null;
|
|
2302
|
+
|
|
2303
|
+
interface MenuItem {
|
|
2304
|
+
key: string;
|
|
2305
|
+
label: ReactNode;
|
|
2306
|
+
icon?: ReactNode;
|
|
2307
|
+
/** Un raccourci affiché à droite. Purement indicatif : rien n'est écouté. */
|
|
2308
|
+
shortcut?: string;
|
|
2309
|
+
disabled?: boolean;
|
|
2310
|
+
danger?: boolean;
|
|
2311
|
+
/** Affiche une coche. `undefined` : l'entrée n'est pas cochable. */
|
|
2312
|
+
checked?: boolean;
|
|
2313
|
+
description?: ReactNode;
|
|
2314
|
+
onSelect?: () => void;
|
|
2315
|
+
}
|
|
2316
|
+
interface MenuSeparator {
|
|
2317
|
+
key: string;
|
|
2318
|
+
type: "separator";
|
|
2319
|
+
}
|
|
2320
|
+
interface MenuLabel {
|
|
2321
|
+
key: string;
|
|
2322
|
+
type: "label";
|
|
2323
|
+
label: ReactNode;
|
|
2324
|
+
}
|
|
2325
|
+
type MenuEntry = MenuItem | MenuSeparator | MenuLabel;
|
|
2326
|
+
interface MenuListProps {
|
|
2327
|
+
items: MenuEntry[];
|
|
2328
|
+
onSelect: (item: MenuItem) => void;
|
|
2329
|
+
onClose: () => void;
|
|
2330
|
+
/** Index actif, piloté par le parent pour que le clavier suive. */
|
|
2331
|
+
activeIndex: number;
|
|
2332
|
+
onActiveIndexChange: (index: number) => void;
|
|
2333
|
+
id?: string | undefined;
|
|
2334
|
+
className?: string | undefined;
|
|
2335
|
+
}
|
|
2336
|
+
/**
|
|
2337
|
+
* Le panneau seul, sans déclencheur.
|
|
2338
|
+
*
|
|
2339
|
+
* Extrait parce que `DropdownMenu` et `ContextMenu` n'ont en commun que lui :
|
|
2340
|
+
* tout le reste — l'ancrage, le geste d'ouverture — diffère.
|
|
2341
|
+
*/
|
|
2342
|
+
declare function MenuList({ items, onSelect, onClose, activeIndex, onActiveIndexChange, id, className, }: MenuListProps): react_jsx_runtime.JSX.Element;
|
|
2343
|
+
interface DropdownMenuProps {
|
|
2344
|
+
items: MenuEntry[];
|
|
2345
|
+
children: ReactElement<{
|
|
2346
|
+
onClick?: () => void;
|
|
2347
|
+
"aria-expanded"?: boolean;
|
|
2348
|
+
}>;
|
|
2349
|
+
onSelect?: (item: MenuItem) => void;
|
|
2350
|
+
open?: boolean;
|
|
2351
|
+
defaultOpen?: boolean;
|
|
2352
|
+
onOpenChange?: (open: boolean) => void;
|
|
2353
|
+
placement?: OverlayPlacement;
|
|
2354
|
+
matchTriggerWidth?: boolean;
|
|
2355
|
+
className?: string;
|
|
2356
|
+
}
|
|
2357
|
+
/**
|
|
2358
|
+
* Un menu accroché à un bouton.
|
|
2359
|
+
*
|
|
2360
|
+
* Il repose sur `Overlay` : le repositionnement quand la place manque en bas,
|
|
2361
|
+
* la fermeture au clic extérieur et à Échap sont déjà là et ne sont pas
|
|
2362
|
+
* réécrites ici.
|
|
2363
|
+
*/
|
|
2364
|
+
declare function DropdownMenu({ items, children, onSelect, open: openProp, defaultOpen, onOpenChange, placement, matchTriggerWidth, className, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
|
|
2365
|
+
interface ContextMenuProps {
|
|
2366
|
+
items: MenuEntry[];
|
|
2367
|
+
children: ReactNode;
|
|
2368
|
+
onSelect?: (item: MenuItem) => void;
|
|
2369
|
+
className?: string;
|
|
2370
|
+
}
|
|
2371
|
+
/**
|
|
2372
|
+
* Le même menu, ouvert au clic droit sur une zone.
|
|
2373
|
+
*
|
|
2374
|
+
* L'ancre est un point, pas un élément : un repère de taille nulle est posé
|
|
2375
|
+
* aux coordonnées du pointeur et confié à `Overlay`, qui ne voit pas la
|
|
2376
|
+
* différence. C'est ce qui évite un second moteur de placement.
|
|
2377
|
+
*/
|
|
2378
|
+
declare function ContextMenu({ items, children, onSelect, className, }: ContextMenuProps): react_jsx_runtime.JSX.Element;
|
|
2379
|
+
|
|
2380
|
+
interface DurationDisplayProps {
|
|
2381
|
+
milliseconds: number;
|
|
2382
|
+
locale?: string;
|
|
2383
|
+
style?: "short" | "long" | "clock";
|
|
2384
|
+
className?: string;
|
|
1205
2385
|
}
|
|
1206
|
-
|
|
2386
|
+
/**
|
|
2387
|
+
* Une durée, en mots ou en pendule.
|
|
2388
|
+
*
|
|
2389
|
+
* Trois styles pour trois usages : `clock` pour un chronomètre qu'on lit en
|
|
2390
|
+
* continu, `short` pour une colonne de tableau, `long` pour une phrase.
|
|
2391
|
+
*/
|
|
2392
|
+
declare function DurationDisplay({ milliseconds, locale, style, className }: DurationDisplayProps): react_jsx_runtime.JSX.Element;
|
|
1207
2393
|
|
|
1208
|
-
interface
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
resetLabel?: string;
|
|
2394
|
+
interface EmptyStateProps {
|
|
2395
|
+
icon?: ReactNode;
|
|
2396
|
+
title: ReactNode;
|
|
2397
|
+
description?: ReactNode;
|
|
2398
|
+
action?: ReactNode;
|
|
2399
|
+
compact?: boolean;
|
|
1215
2400
|
className?: string;
|
|
1216
2401
|
}
|
|
1217
|
-
|
|
2402
|
+
/**
|
|
2403
|
+
* Ce qu'on montre quand il n'y a rien.
|
|
2404
|
+
*
|
|
2405
|
+
* Une liste vide sans explication ressemble à un chargement bloqué. Elle
|
|
2406
|
+
* porte donc une action : le vide initial est le meilleur moment pour
|
|
2407
|
+
* proposer de créer le premier élément.
|
|
2408
|
+
*/
|
|
2409
|
+
declare function EmptyState({ icon, title, description, action, compact, className }: EmptyStateProps): react_jsx_runtime.JSX.Element;
|
|
1218
2410
|
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
2411
|
+
interface EntityMetaProps {
|
|
2412
|
+
createdAt?: Date | string | number;
|
|
2413
|
+
updatedAt?: Date | string | number;
|
|
2414
|
+
createdBy?: ReactNode;
|
|
2415
|
+
updatedBy?: ReactNode;
|
|
2416
|
+
identifier?: string;
|
|
2417
|
+
status?: ReactNode;
|
|
2418
|
+
locale?: string;
|
|
2419
|
+
className?: string;
|
|
1226
2420
|
}
|
|
1227
|
-
/**
|
|
1228
|
-
|
|
1229
|
-
|
|
2421
|
+
/**
|
|
2422
|
+
* Les traces d'un objet : créé le, modifié par, identifiant.
|
|
2423
|
+
*
|
|
2424
|
+
* L'identifiant est normalisé pour être lu à voix haute au téléphone —
|
|
2425
|
+
* c'est la première chose qu'on demande à un client, et une chaîne de
|
|
2426
|
+
* trente-six caractères ne se dicte pas.
|
|
2427
|
+
*/
|
|
2428
|
+
declare function EntityMeta({ createdAt, updatedAt, createdBy, updatedBy, identifier, status, locale, className }: EntityMetaProps): react_jsx_runtime.JSX.Element;
|
|
2429
|
+
|
|
2430
|
+
interface ErrorStateProps {
|
|
2431
|
+
title?: ReactNode;
|
|
1230
2432
|
description?: ReactNode;
|
|
1231
|
-
|
|
1232
|
-
|
|
2433
|
+
error?: unknown;
|
|
2434
|
+
action?: ReactNode;
|
|
2435
|
+
onRetry?: () => void;
|
|
2436
|
+
retryLabel?: string;
|
|
2437
|
+
compact?: boolean;
|
|
2438
|
+
className?: string;
|
|
1233
2439
|
}
|
|
1234
|
-
type FormEntry = FormFieldConfig | FormFieldGroup;
|
|
1235
2440
|
/**
|
|
1236
|
-
*
|
|
2441
|
+
* Un échec, et de quoi en sortir.
|
|
1237
2442
|
*
|
|
1238
|
-
*
|
|
1239
|
-
*
|
|
1240
|
-
*
|
|
2443
|
+
* `error` accepte n'importe quoi : une `Error`, une réponse HTTP, une
|
|
2444
|
+
* chaîne. Ce qui arrive d'un appel réseau n'a pas de forme garantie, et
|
|
2445
|
+
* exiger un type ferait écrire un `try` autour de chaque affichage
|
|
2446
|
+
* d'erreur.
|
|
1241
2447
|
*/
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
2448
|
+
declare function ErrorState({ title: titleProp, description, error, action, onRetry, retryLabel: retryLabelProp, compact, className }: ErrorStateProps): react_jsx_runtime.JSX.Element;
|
|
2449
|
+
|
|
2450
|
+
interface CalendarEvent {
|
|
2451
|
+
id: string;
|
|
2452
|
+
date: string;
|
|
2453
|
+
title: string;
|
|
2454
|
+
tone?: ComponentTone;
|
|
2455
|
+
}
|
|
2456
|
+
interface EventCalendarProps extends Omit<CalendarProps, "renderDay"> {
|
|
2457
|
+
events: CalendarEvent[];
|
|
2458
|
+
maxEventsPerDay?: number;
|
|
2459
|
+
onEventClick?: (event: CalendarEvent) => void;
|
|
2460
|
+
}
|
|
2461
|
+
/**
|
|
2462
|
+
* Un calendrier qui porte des événements.
|
|
2463
|
+
*
|
|
2464
|
+
* `maxEventsPerDay` plafonne l'affichage : une journée à douze rendez-vous
|
|
2465
|
+
* déformerait toute la grille, et les douze ne se lisent de toute façon pas
|
|
2466
|
+
* dans une case de calendrier.
|
|
2467
|
+
*/
|
|
2468
|
+
declare function EventCalendar({ events, maxEventsPerDay, onEventClick, ...props }: EventCalendarProps): react_jsx_runtime.JSX.Element;
|
|
2469
|
+
|
|
2470
|
+
interface FiltersBarProps {
|
|
2471
|
+
search?: ReactNode;
|
|
2472
|
+
filters?: ReactNode;
|
|
1263
2473
|
actions?: ReactNode;
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
/** Désactive l'envoi tant qu'une erreur est en vigueur. */
|
|
1268
|
-
requireValid?: boolean;
|
|
2474
|
+
activeCount?: number;
|
|
2475
|
+
onReset?: () => void;
|
|
2476
|
+
resetLabel?: string;
|
|
1269
2477
|
className?: string;
|
|
1270
2478
|
}
|
|
1271
2479
|
/**
|
|
1272
|
-
*
|
|
1273
|
-
*
|
|
1274
|
-
* Il ne connaît aucune bibliothèque de formulaires : il reçoit un
|
|
1275
|
-
* `FormAdapter`, ou en monte un lui-même. C'est ce qui lui permet de servir un
|
|
1276
|
-
* projet sous react-hook-form et un projet sans rien, avec le même code.
|
|
2480
|
+
* La barre au-dessus d'une liste : recherche, filtres, actions.
|
|
1277
2481
|
*
|
|
1278
|
-
*
|
|
1279
|
-
*
|
|
1280
|
-
*
|
|
1281
|
-
* defaultValues={{ nom: "", email: "" }}
|
|
1282
|
-
* validate={createValidator({ nom: [required()], email: [required(), email()] })}
|
|
1283
|
-
* onSubmit={(values) => api.post("/clients", { body: values })}
|
|
1284
|
-
* fields={[
|
|
1285
|
-
* { name: "nom", label: "Nom du client", required: true },
|
|
1286
|
-
* { name: "email", label: "Adresse e-mail", type: "email", required: true },
|
|
1287
|
-
* ]}
|
|
1288
|
-
* />
|
|
1289
|
-
* ```
|
|
2482
|
+
* `activeCount` affiche combien de filtres sont en vigueur. Sans ce compte,
|
|
2483
|
+
* une liste filtrée ressemble à une liste vide, et l'on cherche la panne
|
|
2484
|
+
* avant de penser au filtre posé la veille.
|
|
1290
2485
|
*/
|
|
1291
|
-
declare function
|
|
2486
|
+
declare function FiltersBar({ search, filters, actions, activeCount, onReset, resetLabel: resetLabelProp, className }: FiltersBarProps): react_jsx_runtime.JSX.Element;
|
|
1292
2487
|
|
|
1293
2488
|
interface HoverCardProps {
|
|
1294
2489
|
content: ReactNode;
|
|
@@ -1326,6 +2521,14 @@ interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
1326
2521
|
radius?: "default" | "none" | "sm" | "lg" | "full";
|
|
1327
2522
|
tooltip?: Omit<TooltipProps, "children">;
|
|
1328
2523
|
}
|
|
2524
|
+
/**
|
|
2525
|
+
* Une action réduite à son icône.
|
|
2526
|
+
*
|
|
2527
|
+
* `label` est obligatoire : une icône seule n'a pas de nom, et un lecteur
|
|
2528
|
+
* d'écran annoncerait « bouton » sans dire lequel. Le libellé sert aussi
|
|
2529
|
+
* d'infobulle — ce que l'icône signifie doit rester atteignable à la
|
|
2530
|
+
* souris comme au clavier.
|
|
2531
|
+
*/
|
|
1329
2532
|
declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
1330
2533
|
|
|
1331
2534
|
type IconProps = SVGProps<SVGSVGElement>;
|
|
@@ -1377,6 +2580,13 @@ declare const InputNumber: react.ForwardRefExoticComponent<InputNumberProps & re
|
|
|
1377
2580
|
interface KpiGridProps extends HTMLAttributes<HTMLDivElement> {
|
|
1378
2581
|
columns?: 1 | 2 | 3 | 4;
|
|
1379
2582
|
}
|
|
2583
|
+
/**
|
|
2584
|
+
* Une rangée d'indicateurs.
|
|
2585
|
+
*
|
|
2586
|
+
* Le nombre de colonnes est déclaré, pas déduit du nombre de cartes : trois
|
|
2587
|
+
* indicateurs sur quatre colonnes laissent un trou, et ce trou dit qu'il
|
|
2588
|
+
* manque une donnée.
|
|
2589
|
+
*/
|
|
1380
2590
|
declare function KpiGrid({ columns, className, ...props }: KpiGridProps): react_jsx_runtime.JSX.Element;
|
|
1381
2591
|
|
|
1382
2592
|
interface LabelProps extends react.LabelHTMLAttributes<HTMLLabelElement> {
|
|
@@ -1389,8 +2599,22 @@ interface LabelProps extends react.LabelHTMLAttributes<HTMLLabelElement> {
|
|
|
1389
2599
|
}
|
|
1390
2600
|
/** Alias historique, attendu par les composants venus du registre. */
|
|
1391
2601
|
type ILabelProps = LabelProps;
|
|
2602
|
+
/**
|
|
2603
|
+
* Le nom d'un champ.
|
|
2604
|
+
*
|
|
2605
|
+
* L'astérisque d'obligation est portée par une prop plutôt qu'écrite dans
|
|
2606
|
+
* le texte : elle reçoit ainsi un `aria-hidden`, et le champ est annoncé
|
|
2607
|
+
* « obligatoire » plutôt que « nom étoile ».
|
|
2608
|
+
*/
|
|
1392
2609
|
declare const Label: react.ForwardRefExoticComponent<LabelProps & react.RefAttributes<HTMLLabelElement>>;
|
|
1393
2610
|
|
|
2611
|
+
/**
|
|
2612
|
+
* Le même calendrier, en plus petit.
|
|
2613
|
+
*
|
|
2614
|
+
* Une variante de taille et non un composant à part : deux calendriers
|
|
2615
|
+
* séparés auraient divergé sur la sélection de plage, les jours désactivés
|
|
2616
|
+
* ou le premier jour de la semaine.
|
|
2617
|
+
*/
|
|
1394
2618
|
declare function MiniCalendar({ className, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
|
|
1395
2619
|
|
|
1396
2620
|
interface ModalProps {
|
|
@@ -1404,12 +2628,27 @@ interface ModalProps {
|
|
|
1404
2628
|
closeLabel?: string;
|
|
1405
2629
|
className?: string;
|
|
1406
2630
|
}
|
|
2631
|
+
/**
|
|
2632
|
+
* Une boîte qui interrompt.
|
|
2633
|
+
*
|
|
2634
|
+
* Elle enferme le focus et bloque le défilement de la page : sans cela, la
|
|
2635
|
+
* tabulation continue derrière le voile, et l'on remplit un formulaire
|
|
2636
|
+
* qu'on ne voit pas. L'échappement la referme toujours — c'est la sortie
|
|
2637
|
+
* que tout le monde essaie en premier.
|
|
2638
|
+
*/
|
|
1407
2639
|
declare function Modal({ open, onOpenChange, title, description, children, footer, closeOnBackdrop, closeLabel: closeLabelProp, className }: ModalProps): react.ReactPortal | null;
|
|
1408
2640
|
|
|
1409
2641
|
interface MonthPickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
|
|
1410
2642
|
onValueChange?: (value: string) => void;
|
|
1411
2643
|
invalid?: boolean;
|
|
1412
2644
|
}
|
|
2645
|
+
/**
|
|
2646
|
+
* Un mois, sans le jour.
|
|
2647
|
+
*
|
|
2648
|
+
* C'est le grain d'un exercice comptable ou d'un rapport mensuel : demander
|
|
2649
|
+
* un jour obligerait à en choisir un arbitrairement, et le premier du mois
|
|
2650
|
+
* finirait par être pris pour une vraie date.
|
|
2651
|
+
*/
|
|
1413
2652
|
declare const MonthPicker: react.ForwardRefExoticComponent<MonthPickerProps & react.RefAttributes<HTMLInputElement>>;
|
|
1414
2653
|
|
|
1415
2654
|
interface PageHeaderProps {
|
|
@@ -1419,6 +2658,13 @@ interface PageHeaderProps {
|
|
|
1419
2658
|
actions?: ReactNode;
|
|
1420
2659
|
className?: string;
|
|
1421
2660
|
}
|
|
2661
|
+
/**
|
|
2662
|
+
* Le titre d'un écran, et ses actions.
|
|
2663
|
+
*
|
|
2664
|
+
* Un seul `<h1>` par page, rendu ici : la hiérarchie des titres est ce qui
|
|
2665
|
+
* permet de parcourir un écran au lecteur d'écran, et deux `<h1>` la
|
|
2666
|
+
* cassent sans que rien ne se voie.
|
|
2667
|
+
*/
|
|
1422
2668
|
declare function PageHeader({ title, description, eyebrow, actions, className }: PageHeaderProps): react_jsx_runtime.JSX.Element;
|
|
1423
2669
|
|
|
1424
2670
|
interface PaginationProps {
|
|
@@ -1482,6 +2728,12 @@ interface PermissionGateProps {
|
|
|
1482
2728
|
fallback?: ReactNode;
|
|
1483
2729
|
children: ReactNode;
|
|
1484
2730
|
}
|
|
2731
|
+
/**
|
|
2732
|
+
* Ce qui n'apparaît qu'avec le droit correspondant.
|
|
2733
|
+
*
|
|
2734
|
+
* > Ceci masque une portion d'écran; **ça ne protège pas une API**. Le
|
|
2735
|
+
* > serveur reste seul juge, et doit refuser la même chose.
|
|
2736
|
+
*/
|
|
1485
2737
|
declare function PermissionGate({ permissions, require, mode, fallback, children }: PermissionGateProps): react_jsx_runtime.JSX.Element;
|
|
1486
2738
|
|
|
1487
2739
|
interface PhoneCountry {
|
|
@@ -1546,6 +2798,13 @@ interface PopoverProps {
|
|
|
1546
2798
|
disabled?: boolean;
|
|
1547
2799
|
className?: string;
|
|
1548
2800
|
}
|
|
2801
|
+
/**
|
|
2802
|
+
* Un panneau attaché à un élément, avec du contenu qu'on peut viser.
|
|
2803
|
+
*
|
|
2804
|
+
* À la différence d'une infobulle, il reste ouvert : on y met un lien, un
|
|
2805
|
+
* bouton, un petit formulaire. Une infobulle qui contient un bouton est une
|
|
2806
|
+
* infobulle cassée — elle disparaît dès qu'on va vers lui.
|
|
2807
|
+
*/
|
|
1549
2808
|
declare function Popover({ content, title, children, open: openProp, defaultOpen, onOpenChange, placement, trigger, variant, tone, disabled, className }: PopoverProps): react_jsx_runtime.JSX.Element;
|
|
1550
2809
|
|
|
1551
2810
|
interface ProgressProps {
|
|
@@ -1579,6 +2838,13 @@ interface QRCodeProps {
|
|
|
1579
2838
|
render?: (value: string, size: number) => ReactNode;
|
|
1580
2839
|
className?: string;
|
|
1581
2840
|
}
|
|
2841
|
+
/**
|
|
2842
|
+
* Un code à scanner.
|
|
2843
|
+
*
|
|
2844
|
+
* Le rendu est délégué à `render` : embarquer un encodeur ajouterait une
|
|
2845
|
+
* dépendance à tous ceux qui ne s'en servent pas, alors que les projets qui
|
|
2846
|
+
* en ont besoin ont déjà le leur.
|
|
2847
|
+
*/
|
|
1582
2848
|
declare function QRCode({ value, size, label, render, className }: QRCodeProps): react_jsx_runtime.JSX.Element;
|
|
1583
2849
|
|
|
1584
2850
|
interface RelativeTimeProps extends Omit<HTMLAttributes<HTMLTimeElement>, "dateTime"> {
|
|
@@ -1587,6 +2853,12 @@ interface RelativeTimeProps extends Omit<HTMLAttributes<HTMLTimeElement>, "dateT
|
|
|
1587
2853
|
prefix?: string;
|
|
1588
2854
|
refreshInterval?: number;
|
|
1589
2855
|
}
|
|
2856
|
+
/**
|
|
2857
|
+
* Une date, dite par rapport à maintenant.
|
|
2858
|
+
*
|
|
2859
|
+
* Elle se rafraîchit d'elle-même : « il y a une minute » affiché une heure
|
|
2860
|
+
* plus tard est faux, et rien ne le signale à qui lit l'écran resté ouvert.
|
|
2861
|
+
*/
|
|
1590
2862
|
declare function RelativeTime({ value, locale, prefix, refreshInterval, className, title, ...props }: RelativeTimeProps): react_jsx_runtime.JSX.Element | null;
|
|
1591
2863
|
|
|
1592
2864
|
interface RequireSessionProps<TUser, TTenant, TRule> {
|
|
@@ -1655,6 +2927,13 @@ interface ResizablePanelProps {
|
|
|
1655
2927
|
direction?: "horizontal" | "vertical";
|
|
1656
2928
|
className?: string;
|
|
1657
2929
|
}
|
|
2930
|
+
/**
|
|
2931
|
+
* Deux zones, et une poignée entre elles.
|
|
2932
|
+
*
|
|
2933
|
+
* Les bornes `minSize` et `maxSize` empêchent de réduire un panneau à
|
|
2934
|
+
* rien : une zone à zéro pour cent disparaît avec sa poignée, et on ne peut
|
|
2935
|
+
* plus la rouvrir.
|
|
2936
|
+
*/
|
|
1658
2937
|
declare function ResizablePanel({ first, second, defaultSize, minSize, maxSize, direction, className }: ResizablePanelProps): react_jsx_runtime.JSX.Element;
|
|
1659
2938
|
|
|
1660
2939
|
interface ScrollAreaProps {
|
|
@@ -1698,46 +2977,15 @@ interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "
|
|
|
1698
2977
|
searchLabel?: string;
|
|
1699
2978
|
clearLabel?: string;
|
|
1700
2979
|
}
|
|
1701
|
-
declare const SearchInput: react.ForwardRefExoticComponent<SearchInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
1702
|
-
|
|
1703
|
-
interface SidebarItem {
|
|
1704
|
-
key: string;
|
|
1705
|
-
label: ReactNode;
|
|
1706
|
-
icon?: ReactNode;
|
|
1707
|
-
/** Rend l'entrée comme un lien. Sans lui, c'est un bouton. */
|
|
1708
|
-
href?: string;
|
|
1709
|
-
badge?: ReactNode;
|
|
1710
|
-
disabled?: boolean;
|
|
1711
|
-
/** Sous-entrées. Une seule profondeur : au-delà, c'est un menu, pas une barre. */
|
|
1712
|
-
items?: Array<Omit<SidebarItem, "items">>;
|
|
1713
|
-
onClick?: () => void;
|
|
1714
|
-
}
|
|
1715
|
-
interface SidebarSection {
|
|
1716
|
-
key: string;
|
|
1717
|
-
/** Le titre du groupe. Masqué en mode réduit. */
|
|
1718
|
-
title: ReactNode;
|
|
1719
|
-
items: SidebarItem[];
|
|
1720
|
-
}
|
|
1721
|
-
type SidebarEntry = SidebarItem | SidebarSection;
|
|
1722
|
-
interface SidebarProps {
|
|
1723
|
-
items: SidebarEntry[];
|
|
1724
|
-
/** La clé de l'entrée courante. Un parent s'ouvre si un enfant l'est. */
|
|
1725
|
-
activeKey?: string;
|
|
1726
|
-
collapsed?: boolean;
|
|
1727
|
-
header?: ReactNode;
|
|
1728
|
-
footer?: ReactNode;
|
|
1729
|
-
onNavigate?: (item: SidebarItem) => void;
|
|
1730
|
-
ariaLabel?: string;
|
|
1731
|
-
className?: string;
|
|
1732
|
-
}
|
|
1733
2980
|
/**
|
|
1734
|
-
*
|
|
2981
|
+
* Une recherche, avec son délai.
|
|
1735
2982
|
*
|
|
1736
|
-
*
|
|
1737
|
-
*
|
|
1738
|
-
* ce
|
|
2983
|
+
* `searchDelay` vaut zéro par défaut : la recherche ne part qu'à la
|
|
2984
|
+
* validation. C'est le réglage sûr — une requête à chaque frappe se paie en
|
|
2985
|
+
* appels serveur, et le défaut ne doit pas engager ce coût sans qu'on l'ait
|
|
2986
|
+
* demandé.
|
|
1739
2987
|
*/
|
|
1740
|
-
declare
|
|
2988
|
+
declare const SearchInput: react.ForwardRefExoticComponent<SearchInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
1741
2989
|
|
|
1742
2990
|
interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
|
|
1743
2991
|
width?: CSSProperties["width"];
|
|
@@ -1745,6 +2993,13 @@ interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1745
2993
|
radius?: CSSProperties["borderRadius"];
|
|
1746
2994
|
circle?: boolean;
|
|
1747
2995
|
}
|
|
2996
|
+
/**
|
|
2997
|
+
* La forme de ce qui n'est pas encore là.
|
|
2998
|
+
*
|
|
2999
|
+
* Aux dimensions du contenu attendu, et non d'une taille générique : c'est
|
|
3000
|
+
* ce qui évite le sursaut de mise en page à l'arrivée des données, lequel
|
|
3001
|
+
* fait cliquer à côté.
|
|
3002
|
+
*/
|
|
1748
3003
|
declare function Skeleton({ className, width, height, radius, circle, style, ...props }: SkeletonProps): react_jsx_runtime.JSX.Element;
|
|
1749
3004
|
|
|
1750
3005
|
interface StatisticProps {
|
|
@@ -1759,6 +3014,13 @@ interface StatisticProps {
|
|
|
1759
3014
|
trend?: number;
|
|
1760
3015
|
className?: string;
|
|
1761
3016
|
}
|
|
3017
|
+
/**
|
|
3018
|
+
* Un nombre qu'on lit d'un coup d'œil.
|
|
3019
|
+
*
|
|
3020
|
+
* La tendance est un écart, pas une flèche : c'est le signe du nombre qui
|
|
3021
|
+
* décide du sens et de la couleur. Une flèche passée en prop finit par
|
|
3022
|
+
* pointer vers le haut sur une baisse.
|
|
3023
|
+
*/
|
|
1762
3024
|
declare function Statistic({ value, label, format, locale, currency, precision, prefix, suffix, trend, className }: StatisticProps): react_jsx_runtime.JSX.Element;
|
|
1763
3025
|
|
|
1764
3026
|
interface StatCardProps extends StatisticProps {
|
|
@@ -1766,6 +3028,13 @@ interface StatCardProps extends StatisticProps {
|
|
|
1766
3028
|
description?: ReactNode;
|
|
1767
3029
|
action?: ReactNode;
|
|
1768
3030
|
}
|
|
3031
|
+
/**
|
|
3032
|
+
* Un indicateur, dans une carte.
|
|
3033
|
+
*
|
|
3034
|
+
* L'assemblage d'une `Card` et d'un `Statistic` — la forme qu'ils prennent
|
|
3035
|
+
* presque toujours ensemble, et qu'il serait fastidieux de recomposer à
|
|
3036
|
+
* chaque tableau de bord.
|
|
3037
|
+
*/
|
|
1769
3038
|
declare function StatCard({ icon, description, action, className, ...statisticProps }: StatCardProps): react_jsx_runtime.JSX.Element;
|
|
1770
3039
|
|
|
1771
3040
|
type StepStatus = "done" | "current" | "upcoming" | "error";
|
|
@@ -1803,6 +3072,13 @@ interface TabsProps {
|
|
|
1803
3072
|
className?: string;
|
|
1804
3073
|
children: ReactNode;
|
|
1805
3074
|
}
|
|
3075
|
+
/**
|
|
3076
|
+
* Des vues qui se remplacent au même endroit.
|
|
3077
|
+
*
|
|
3078
|
+
* Elles servent à des contenus de même rang — jamais à des étapes, qui ont
|
|
3079
|
+
* un ordre et des `Steps`, ni à une navigation entre écrans, qui change
|
|
3080
|
+
* l'adresse.
|
|
3081
|
+
*/
|
|
1806
3082
|
declare function Tabs({ value, defaultValue, onValueChange, className, children }: TabsProps): react_jsx_runtime.JSX.Element;
|
|
1807
3083
|
declare function TabsList({ className, children }: {
|
|
1808
3084
|
className?: string;
|
|
@@ -1835,6 +3111,12 @@ interface TimeRangePickerProps extends Pick<TimePickerProps, "minuteStep" | "sec
|
|
|
1835
3111
|
disabled?: boolean;
|
|
1836
3112
|
className?: string;
|
|
1837
3113
|
}
|
|
3114
|
+
/**
|
|
3115
|
+
* Une heure de début et une heure de fin.
|
|
3116
|
+
*
|
|
3117
|
+
* `order` impose que la fin suive le début. On peut le lever — une garde
|
|
3118
|
+
* de nuit finit le lendemain — mais il faut l'avoir écrit.
|
|
3119
|
+
*/
|
|
1838
3120
|
declare function TimeRangePicker({ value, defaultValue, onValueChange, order, startLabel: startLabelProp, endLabel: endLabelProp, minuteStep, secondStep, showSeconds, hourFormat, needConfirm, allowClear, tone, invalid, disabled, className }: TimeRangePickerProps): react_jsx_runtime.JSX.Element;
|
|
1839
3121
|
|
|
1840
3122
|
interface TimelineItem {
|
|
@@ -1849,6 +3131,13 @@ interface TimelineProps {
|
|
|
1849
3131
|
pending?: ReactNode;
|
|
1850
3132
|
className?: string;
|
|
1851
3133
|
}
|
|
3134
|
+
/**
|
|
3135
|
+
* Une suite d'événements, dans l'ordre.
|
|
3136
|
+
*
|
|
3137
|
+
* Le ton porte le sens de chaque étape : une chronologie de paiement se lit
|
|
3138
|
+
* d'abord par ses couleurs — ce qui a abouti, ce qui a échoué — avant qu'on
|
|
3139
|
+
* en lise les libellés.
|
|
3140
|
+
*/
|
|
1852
3141
|
declare function Timeline({ items, pending, className }: TimelineProps): react_jsx_runtime.JSX.Element;
|
|
1853
3142
|
|
|
1854
3143
|
interface ToasterProps {
|
|
@@ -1974,6 +3263,13 @@ interface TourProps {
|
|
|
1974
3263
|
onStepChange?: (step: number) => void;
|
|
1975
3264
|
className?: string;
|
|
1976
3265
|
}
|
|
3266
|
+
/**
|
|
3267
|
+
* Une visite guidée de l'écran.
|
|
3268
|
+
*
|
|
3269
|
+
* Chaque étape vise un élément par son sélecteur plutôt que par une
|
|
3270
|
+
* référence : une visite se déclare souvent loin des composants qu'elle
|
|
3271
|
+
* montre, et parfois avant qu'ils n'existent.
|
|
3272
|
+
*/
|
|
1977
3273
|
declare function Tour({ open, onOpenChange, steps, initialStep, onStepChange, className }: TourProps): react.ReactPortal | null;
|
|
1978
3274
|
|
|
1979
3275
|
interface TransferItem {
|
|
@@ -1989,6 +3285,13 @@ interface TransferProps {
|
|
|
1989
3285
|
targetTitle?: string;
|
|
1990
3286
|
className?: string;
|
|
1991
3287
|
}
|
|
3288
|
+
/**
|
|
3289
|
+
* Deux listes, et ce qui passe de l'une à l'autre.
|
|
3290
|
+
*
|
|
3291
|
+
* La forme qui convient quand le choix se compte en dizaines : une liste à
|
|
3292
|
+
* cocher de deux cents lignes ne montre plus ce qui est retenu, alors que
|
|
3293
|
+
* la colonne de droite ne contient que cela.
|
|
3294
|
+
*/
|
|
1992
3295
|
declare function Transfer({ items, targetKeys, onChange, sourceTitle, targetTitle, className }: TransferProps): react_jsx_runtime.JSX.Element;
|
|
1993
3296
|
|
|
1994
3297
|
interface TreeNode {
|
|
@@ -2004,6 +3307,13 @@ interface TreeProps {
|
|
|
2004
3307
|
onSelect?: ((node: TreeNode) => void) | undefined;
|
|
2005
3308
|
className?: string;
|
|
2006
3309
|
}
|
|
3310
|
+
/**
|
|
3311
|
+
* Une arborescence qu'on déplie.
|
|
3312
|
+
*
|
|
3313
|
+
* Les branches ouvertes sont un état à part de la sélection : replier un
|
|
3314
|
+
* nœud ne désélectionne pas ce qu'il contient, et rouvrir l'écran ne doit
|
|
3315
|
+
* pas tout refermer.
|
|
3316
|
+
*/
|
|
2007
3317
|
declare function Tree({ nodes, defaultExpandedKeys, selectedKey, onSelect, className }: TreeProps): react_jsx_runtime.JSX.Element;
|
|
2008
3318
|
|
|
2009
3319
|
interface TreeSelectProps {
|
|
@@ -2013,12 +3323,27 @@ interface TreeSelectProps {
|
|
|
2013
3323
|
placeholder?: string;
|
|
2014
3324
|
className?: string;
|
|
2015
3325
|
}
|
|
3326
|
+
/**
|
|
3327
|
+
* Un choix dans une arborescence.
|
|
3328
|
+
*
|
|
3329
|
+
* Là où une liste plate perdrait le chemin : « Ventes › Règlements › En
|
|
3330
|
+
* attente » ne se réduit pas à « En attente » sans devenir ambigu dès qu'un
|
|
3331
|
+
* autre nœud porte le même nom.
|
|
3332
|
+
*/
|
|
2016
3333
|
declare function TreeSelect({ nodes, value, onValueChange, placeholder: placeholderProp, className }: TreeSelectProps): react_jsx_runtime.JSX.Element;
|
|
2017
3334
|
|
|
2018
3335
|
interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
|
|
2019
3336
|
level?: 1 | 2 | 3 | 4 | 5 | 6;
|
|
2020
3337
|
size?: "sm" | "md" | "lg" | "xl";
|
|
2021
3338
|
}
|
|
3339
|
+
/**
|
|
3340
|
+
* Un titre.
|
|
3341
|
+
*
|
|
3342
|
+
* Le niveau et la taille sont deux props distinctes : le niveau dit la
|
|
3343
|
+
* place dans la hiérarchie du document, la taille ce qu'on voit. Les lier
|
|
3344
|
+
* forcerait à sauter un niveau pour obtenir un titre plus petit — et à
|
|
3345
|
+
* casser le parcours au lecteur d'écran.
|
|
3346
|
+
*/
|
|
2022
3347
|
declare function Heading({ level, size, className, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
|
|
2023
3348
|
interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
|
|
2024
3349
|
tone?: ComponentTone;
|
|
@@ -2031,6 +3356,14 @@ interface UnsavedChangesGuardProps {
|
|
|
2031
3356
|
when: boolean;
|
|
2032
3357
|
message?: string;
|
|
2033
3358
|
}
|
|
3359
|
+
/**
|
|
3360
|
+
* L'avertissement avant de quitter une saisie en cours.
|
|
3361
|
+
*
|
|
3362
|
+
* Le navigateur n'autorise cette interruption que sur un geste explicite de
|
|
3363
|
+
* quitter, et impose son propre libellé : le message passé ici sert à la
|
|
3364
|
+
* confirmation interne, que `confirmUnsavedNavigation` déclenche avant une
|
|
3365
|
+
* navigation du routeur.
|
|
3366
|
+
*/
|
|
2034
3367
|
declare function UnsavedChangesGuard({ when, message }: UnsavedChangesGuardProps): null;
|
|
2035
3368
|
declare function confirmUnsavedNavigation(when: boolean, message?: string): boolean;
|
|
2036
3369
|
|
|
@@ -2038,6 +3371,13 @@ interface WeekPickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "t
|
|
|
2038
3371
|
onValueChange?: (value: string) => void;
|
|
2039
3372
|
invalid?: boolean;
|
|
2040
3373
|
}
|
|
3374
|
+
/**
|
|
3375
|
+
* Une semaine, désignée par son numéro.
|
|
3376
|
+
*
|
|
3377
|
+
* Le numéro de semaine est l'unité des plannings et des relevés d'activité,
|
|
3378
|
+
* et il ne se déduit pas d'une date sans convention — celle du navigateur
|
|
3379
|
+
* est celle de la norme ISO.
|
|
3380
|
+
*/
|
|
2041
3381
|
declare const WeekPicker: react.ForwardRefExoticComponent<WeekPickerProps & react.RefAttributes<HTMLInputElement>>;
|
|
2042
3382
|
|
|
2043
3383
|
interface YearPickerProps {
|
|
@@ -2048,6 +3388,13 @@ interface YearPickerProps {
|
|
|
2048
3388
|
onValueChange?: (year: number) => void;
|
|
2049
3389
|
className?: string;
|
|
2050
3390
|
}
|
|
3391
|
+
/**
|
|
3392
|
+
* Une année, choisie dans une plage.
|
|
3393
|
+
*
|
|
3394
|
+
* Les bornes sont déclarées parce qu'elles dépendent du sujet : une année
|
|
3395
|
+
* d'exercice comptable et une année de naissance n'ouvrent pas la même
|
|
3396
|
+
* liste.
|
|
3397
|
+
*/
|
|
2051
3398
|
declare function YearPicker({ value, defaultValue, min, max, onValueChange, className }: YearPickerProps): react_jsx_runtime.JSX.Element;
|
|
2052
3399
|
|
|
2053
|
-
export { Accordion, type AccordionItem, type AccordionProps, Alert, AlertCircleIcon, type AlertProps, AmountDisplay, type AmountDisplayProps, AppShell, type AppShellProps, ArrowRightIcon, AspectRatio, type AspectRatioProps, AsyncState, type AsyncStateProps, type AuditEvent, AuditMeta, type AuditMetaProps, AuthLayout, type AuthLayoutProps, Autocomplete, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarDay, type CalendarEvent, CalendarIcon, type CalendarMode, type CalendarProps, type CalendarRangeValue, Can, type CanProps, Card, CardBody, CardFooter, CardHeader, Chart, type ChartProps, type ChartSeries, CheckIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, Collapse, type CollapseProps, ColorPicker, type ColorPickerProps, type CommandItem, CommandPalette, type CommandPaletteProps, ConfirmDialog, type ConfirmDialogProps, Container, ContextMenu, type ContextMenuProps, Countdown, type CountdownProps, CrudPage, type CrudPageProps, CurrencyInput, type CurrencyInputProps, DEFAULT_COUNTRIES, DataTable, type DataTableColumn, type DataTableProps, DatePicker, type DatePickerProps, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeValue, DateTimePicker, type DateTimePickerProps, type DateTimeValue, type DescriptionItem, Descriptions, type DescriptionsProps, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, type DrawerComponent, DrawerFooter, DrawerHeader, type DrawerPosition, type DrawerProps, type DrawerRef, type DrawerSize, DrawerTitle, DropdownMenu, type DropdownMenuProps, DurationDisplay, type DurationDisplayProps, EmptyState, type EmptyStateProps, EntityMeta, type EntityMetaProps, ErrorState, type ErrorStateProps, EventCalendar, type EventCalendarProps, EyeIcon, EyeOffIcon, Field, type FieldBindingLike, type FieldProps, type FieldStatus, type FieldType, type FieldValue, FileUpload, type FileUploadProps, FiltersBar, type FiltersBarProps, Form, type FormEntry, Field as FormField, type FormFieldConfig, type FormFieldGroup, type FieldProps as FormFieldProps, type FormProps, type FormShape, Heading, type HeadingProps, HoverCard, type HoverCardProps, type IDrawerProps, type ILabelProps, type ITooltipProps, type ITooltipVariant, IconButton, type IconButtonProps, ImageUpload, type ImageUploadProps, InfoIcon, InlineCode, Input, InputNumber, type InputNumberProps, type InputProps, JsonEditor, type JsonEditorProps, KpiGrid, type KpiGridProps, Label, type LabelProps, MarkdownEditor, type MarkdownEditorProps, type MenuEntry, type MenuItem, type MenuLabel, MenuList, type MenuListProps, type MenuSeparator, MiniCalendar, MinusIcon, Modal, type ModalProps, MonthPicker, type MonthPickerProps, MoreHorizontalIcon, MultiSelect, type MultiSelectProps, OtpInput, type OtpInputProps, Overlay, type OverlayPlacement, type OverlayProps, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, type PasswordStrength, PermissionGate, type PermissionGateProps, type PhoneCountry, PhoneInput, type PhoneInputProps, PlusIcon, Popover, type PopoverProps, Progress, type ProgressProps, QRCode, type QRCodeProps, Radio, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type ReferenceOption, ReferenceSelect, type ReferenceSelectProps, RelativeTime, type RelativeTimeProps, RequireSession, type RequireSessionProps, ResizablePanel, type ResizablePanelProps, RichTextEditor, type RichTextEditorProps, ScrollArea, type ScrollAreaProps, SearchIcon, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, Sidebar, type SidebarEntry, type SidebarItem, type SidebarProps, type SidebarSection, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderRangeValue, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, StarIcon, StatCard, type StatCardProps, Statistic, type StatisticProps, type StepItem, type StepStatus, Steps, type StepsProps, Switch, type SwitchProps, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, TagsInput, type TagsInputProps, Text, type TextProps, Textarea, type TextareaProps, type TimeParts, TimePicker, type TimePickerProps, TimeRangePicker, type TimeRangePickerProps, type TimeRangeValue, Timeline, type TimelineItem, type TimelineProps, Timer, type TimerProps, ToastProvider, type ToastProviderProps, Toaster, type ToasterProps, Toggle, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleProps, Tooltip, type TooltipProps, type TooltipVariant, Tour, type TourProps, type TourStep, Transfer, type TransferItem, type TransferProps, TrashIcon, Tree, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, UnsavedChangesGuard, type UnsavedChangesGuardProps, UploadIcon, type UseDataTableQueryOptions, WeekPicker, type WeekPickerProps, XIcon, YearPicker, type YearPickerProps, confirmUnsavedNavigation, createUrlTableStorage, formatDuration, formatTimeValue, parseTimeValue, useDataTableQuery, useToast };
|
|
3400
|
+
export { Accordion, type AccordionItem, type AccordionProps, Alert, AlertCircleIcon, type AlertProps, AmountDisplay, type AmountDisplayProps, AppShell, type AppShellCollapsible, type AppShellContentWidth, type AppShellMobileNav, type AppShellProps, ArrowRightIcon, AspectRatio, type AspectRatioProps, AsyncState, type AsyncStateProps, type AuditEvent, AuditMeta, type AuditMetaProps, AuthLayout, type AuthLayoutProps, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, type AvatarTint, type AvatarVariant, Badge, type BadgeProps, BottomTabs, type BottomTabsProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarDay, type CalendarEvent, CalendarIcon, type CalendarMode, type CalendarProps, type CalendarRangeValue, Can, type CanProps, Card, CardBody, CardFooter, CardHeader, Chart, type ChartProps, type ChartSeries, CheckIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, Collapse, type CollapseProps, ColorPicker, type ColorPickerProps, type ColumnCardRole, type CommandItem, CommandPalette, type CommandPaletteProps, ConfirmDialog, type ConfirmDialogProps, Container, ContextMenu, type ContextMenuProps, Countdown, type CountdownProps, type CrudActionOptions, type CrudCreateOptions, type CrudDialogOptions, type CrudDialogState, CrudDialogs, CrudPage, type CrudPageProps, CurrencyInput, type CurrencyInputProps, DEFAULT_COUNTRIES, DataTable, type DataTableColumn, type DataTableProps, type DataTableView, DatePicker, type DatePickerProps, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeValue, DateTimePicker, type DateTimePickerProps, type DateTimeValue, type DescriptionItem, Descriptions, type DescriptionsProps, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, type DrawerComponent, DrawerFooter, DrawerHeader, type DrawerPosition, type DrawerProps, type DrawerRef, type DrawerSize, DrawerTitle, DropdownMenu, type DropdownMenuProps, DurationDisplay, type DurationDisplayProps, EmptyState, type EmptyStateProps, EntityMeta, type EntityMetaProps, ErrorState, type ErrorStateProps, EventCalendar, type EventCalendarProps, EyeIcon, EyeOffIcon, Field, type FieldBindingLike, type FieldProps, type FieldStatus, type FieldType, type FieldValue, FileUpload, type FileUploadProps, FiltersBar, type FiltersBarProps, Form, type FormEntry, Field as FormField, type FormFieldConfig, type FormFieldGroup, type FieldProps as FormFieldProps, type FormProps, type FormShape, Heading, type HeadingProps, HoverCard, type HoverCardProps, type IDrawerProps, type ILabelProps, type ITooltipProps, type ITooltipVariant, IconButton, type IconButtonProps, ImageUpload, type ImageUploadProps, InfoIcon, InlineCode, Input, InputNumber, type InputNumberProps, type InputProps, JsonEditor, type JsonEditorProps, KpiGrid, type KpiGridProps, Label, type LabelProps, MarkdownEditor, type MarkdownEditorProps, type MenuEntry, type MenuItem, type MenuLabel, MenuList, type MenuListProps, type MenuSeparator, MiniCalendar, MinusIcon, Modal, type ModalProps, MonthPicker, type MonthPickerProps, MoreHorizontalIcon, MultiSelect, type MultiSelectProps, OtpInput, type OtpInputProps, Overlay, type OverlayPlacement, type OverlayProps, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, type PasswordStrength, PermissionGate, type PermissionGateProps, type PhoneCountry, PhoneInput, type PhoneInputProps, PlusIcon, Popover, type PopoverProps, Progress, type ProgressProps, QRCode, type QRCodeProps, Radio, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type ReferenceOption, ReferenceSelect, type ReferenceSelectProps, RelativeTime, type RelativeTimeProps, RequireSession, type RequireSessionProps, ResizablePanel, type ResizablePanelProps, type ResourceDefinition, type ResourceField, RichTextEditor, type RichTextEditorProps, type RowAction, ScrollArea, type ScrollAreaProps, SearchIcon, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, Sidebar, type SidebarEntry, type SidebarItem, type SidebarProps, type SidebarRenderLink, type SidebarSection, type SidebarState, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderRangeValue, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, StarIcon, StatCard, type StatCardProps, Statistic, type StatisticProps, type StepItem, type StepStatus, Steps, type StepsProps, Switch, type SwitchProps, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, TagsInput, type TagsInputProps, Text, type TextProps, Textarea, type TextareaProps, type TimeParts, TimePicker, type TimePickerProps, TimeRangePicker, type TimeRangePickerProps, type TimeRangeValue, Timeline, type TimelineItem, type TimelineProps, Timer, type TimerProps, ToastProvider, type ToastProviderProps, Toaster, type ToasterProps, Toggle, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleProps, Tooltip, type TooltipProps, type TooltipVariant, Tour, type TourProps, type TourStep, Transfer, type TransferItem, type TransferProps, TrashIcon, Tree, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, UnsavedChangesGuard, type UnsavedChangesGuardProps, UploadIcon, type UseDataTableQueryOptions, WeekPicker, type WeekPickerProps, XIcon, YearPicker, type YearPickerProps, confirmUnsavedNavigation, createUrlTableStorage, defineResource, formatDuration, formatTimeValue, initialsOf, parseTimeValue, resourceColumns, resourceDefaults, resourceDetailColumns, resourceFormFields, resourcePermissions, resourceRowKey, resourceSearchKeys, resourceValidator, tintForName, useDataTableQuery, useToast };
|