gridsmith-ui 0.18.0 → 0.20.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/dist/charts.js +3 -3
- package/dist/charts.js.map +1 -1
- package/dist/chat.js +4 -4
- package/dist/{chunk-CIVSNXFG.js → chunk-6MXHGH3D.js} +54 -15
- package/dist/chunk-6MXHGH3D.js.map +1 -0
- package/dist/{chunk-XGSQOMEY.js → chunk-EQDR57AM.js} +4 -4
- package/dist/{chunk-XGSQOMEY.js.map → chunk-EQDR57AM.js.map} +1 -1
- package/dist/{chunk-EMCSARQO.js → chunk-ILIODA7W.js} +3 -3
- package/dist/{chunk-EMCSARQO.js.map → chunk-ILIODA7W.js.map} +1 -1
- package/dist/{chunk-OENJCGTJ.js → chunk-JN37OVTP.js} +4 -4
- package/dist/{chunk-OENJCGTJ.js.map → chunk-JN37OVTP.js.map} +1 -1
- package/dist/{chunk-4KVFH5KC.js → chunk-M2QRNBDQ.js} +4 -3
- package/dist/chunk-M2QRNBDQ.js.map +1 -0
- package/dist/{chunk-Z63OSN64.js → chunk-NCIZQYXQ.js} +7 -4
- package/dist/chunk-NCIZQYXQ.js.map +1 -0
- package/dist/chunk-XVB55M3N.js +42 -0
- package/dist/chunk-XVB55M3N.js.map +1 -0
- package/dist/{chunk-PVTGMCVR.js → chunk-XYDIBW3J.js} +4 -4
- package/dist/{chunk-PVTGMCVR.js.map → chunk-XYDIBW3J.js.map} +1 -1
- package/dist/data-grid.js +3 -3
- package/dist/editor.d.ts +38 -2
- package/dist/editor.js +86 -10
- package/dist/editor.js.map +1 -1
- package/dist/index.d.ts +332 -92
- package/dist/index.js +1404 -542
- package/dist/index.js.map +1 -1
- package/dist/kanban.js +3 -3
- package/dist/resizable.d.ts +8 -1
- package/dist/resizable.js +35 -15
- package/dist/resizable.js.map +1 -1
- package/dist/roots.css +164 -2
- package/dist/tailwind.css +14 -0
- package/dist/utils.js +1 -1
- package/dist/virtualized.js +1 -1
- package/dist-static/tailwind.css +14 -0
- package/package.json +1 -1
- package/dist/chunk-4KVFH5KC.js.map +0 -1
- package/dist/chunk-CIVSNXFG.js.map +0 -1
- package/dist/chunk-Z63OSN64.js.map +0 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, LabelHTMLAttributes, TextareaHTMLAttributes, Ref,
|
|
2
|
+
import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, LabelHTMLAttributes, TextareaHTMLAttributes, Ref, ReactElement, CSSProperties, HTMLAttributes, RefObject, KeyboardEvent, AnchorHTMLAttributes, ComponentType } from 'react';
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
4
|
import { IconName } from './icons.js';
|
|
5
5
|
import { C as ColumnKind, B as BreakpointKey } from './table-utils-GounRE6s.js';
|
|
@@ -47,6 +47,8 @@ interface BulkAction {
|
|
|
47
47
|
label: string;
|
|
48
48
|
icon?: IconName;
|
|
49
49
|
onClick: () => void;
|
|
50
|
+
/** "destructive": the phone menu draws it as a destructive item. On the bar it is a secondary button like the others,
|
|
51
|
+
* since it opens a confirmation whose confirm carries the red. */
|
|
50
52
|
variant?: "default" | "destructive";
|
|
51
53
|
}
|
|
52
54
|
interface BulkActionBarProps {
|
|
@@ -85,13 +87,85 @@ declare function Toggle({ checked, onChange, label, disabled, error, layout, siz
|
|
|
85
87
|
"aria-labelledby"?: string;
|
|
86
88
|
} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange">): react_jsx_runtime.JSX.Element;
|
|
87
89
|
|
|
90
|
+
interface FieldControlProps {
|
|
91
|
+
id: string;
|
|
92
|
+
"aria-describedby"?: string;
|
|
93
|
+
"aria-invalid"?: true;
|
|
94
|
+
"aria-required"?: true;
|
|
95
|
+
required?: boolean;
|
|
96
|
+
/** Set on Gridsmith form components (Input, Textarea, Dropdown, DatePicker, …). */
|
|
97
|
+
error?: boolean;
|
|
98
|
+
}
|
|
99
|
+
/** The wiring a control may be given as props: by a Field's clone, or by a page that labels it itself. */
|
|
100
|
+
interface FieldControlWiring {
|
|
101
|
+
id?: string;
|
|
102
|
+
"aria-labelledby"?: string;
|
|
103
|
+
"aria-describedby"?: string;
|
|
104
|
+
"aria-invalid"?: boolean | "true" | "false";
|
|
105
|
+
"aria-required"?: boolean | "true" | "false";
|
|
106
|
+
required?: boolean;
|
|
107
|
+
error?: boolean;
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* A field's label: any text or element, never nothing. Sprint 25.12 A31 (R28-59): run 75 labelled only the first of its
|
|
111
|
+
* repeated rows (`label={index === 0 ? … : undefined}`), and every other row's fields had no name. A label that
|
|
112
|
+
* shouldn't show takes `hideLabel`; repeated rows use AddAnother, which shows each label once.
|
|
113
|
+
*/
|
|
114
|
+
type FieldLabel = Exclude<ReactNode, null | undefined | boolean>;
|
|
115
|
+
interface FieldProps {
|
|
116
|
+
label: FieldLabel;
|
|
117
|
+
/**
|
|
118
|
+
* The label is read out but not shown (Sprint 25.12 A31): for a field whose purpose the page shows another way, such
|
|
119
|
+
* as a column heading above repeated rows. In an AddAnother group it shows again when the group stacks its rows.
|
|
120
|
+
*/
|
|
121
|
+
hideLabel?: boolean;
|
|
122
|
+
/** The single form control. Receives id, aria-describedby, aria-invalid/error and required automatically. */
|
|
123
|
+
children: ReactElement | ((props: FieldControlProps) => ReactNode);
|
|
124
|
+
/** Persistent help text (format requirements, why a field is disabled). Shown below the control, above any error. */
|
|
125
|
+
hint?: ReactNode;
|
|
126
|
+
/** Current validation error. Rendered as InlineFieldError (role="alert") and linked via aria-describedby. Wins over `validate`. */
|
|
127
|
+
error?: string | null | false;
|
|
128
|
+
/**
|
|
129
|
+
* The field's check: the message for what is wrong with its value, or nothing (`validate={(v) => v ? undefined :
|
|
130
|
+
* "Enter a title"}`). It gets the control's `value` (or `checked`); a closure over your own state works as well.
|
|
131
|
+
* Inside a FormWrapper it runs at the project's validation timing (forms.validationTiming, through the form):
|
|
132
|
+
* - `onBlur`: when the field is left;
|
|
133
|
+
* - `onChange`: as the value changes, once the field has been left;
|
|
134
|
+
* - `onSubmit`: on submit only.
|
|
135
|
+
*
|
|
136
|
+
* Whatever the timing, it runs on every submit, and FormWrapper's `onSubmit` gets its message under this Field's
|
|
137
|
+
* `id`, or no key at all when the value passes, so an empty `errors` means the form is valid. A message that shows is
|
|
138
|
+
* checked again as the value changes, so it goes as soon as the value is right. Focus
|
|
139
|
+
* moving into the control's own popup (a Dropdown's list, a DatePicker's calendar) is not leaving the field. Outside
|
|
140
|
+
* a FormWrapper it runs when the field is left (round 26, R26-2).
|
|
141
|
+
*/
|
|
142
|
+
validate?: (value: unknown) => string | undefined | null | false;
|
|
143
|
+
required?: boolean;
|
|
144
|
+
/** Slot to the right of the label, e.g. a "Forgot password?" Link. */
|
|
145
|
+
labelAction?: ReactNode;
|
|
146
|
+
/** Explicit id for the control; generated when omitted. */
|
|
147
|
+
id?: string;
|
|
148
|
+
className?: string;
|
|
149
|
+
}
|
|
150
|
+
/**
|
|
151
|
+
* Label + control + hint + error, wired together. Guarantees the label is
|
|
152
|
+
* associated (htmlFor/id), that hint and error are announced
|
|
153
|
+
* (aria-describedby), that the control is marked invalid, and that the error
|
|
154
|
+
* sits directly below the field (forms-002/006/009/010). Use one Field per
|
|
155
|
+
* control; do not add a separate <Label> or a label prop on the child.
|
|
156
|
+
*
|
|
157
|
+
* In a SettingsLayout panel a Field keeps the narrow page's reading width however wide the page is (the panel's
|
|
158
|
+
* --ds-form-max, Sprint 25.9); a `max-w-*` class of your own wins.
|
|
159
|
+
*/
|
|
160
|
+
declare function Field({ label, children, hint, error, required, labelAction, hideLabel, id: idProp, validate, className }: FieldProps): react_jsx_runtime.JSX.Element;
|
|
161
|
+
|
|
88
162
|
interface Option {
|
|
89
163
|
id: string;
|
|
90
164
|
label: string;
|
|
91
165
|
group?: string;
|
|
92
166
|
}
|
|
93
167
|
type DropdownSize = "sm" | "md" | "lg";
|
|
94
|
-
interface DropdownProps {
|
|
168
|
+
interface DropdownProps extends FieldControlWiring {
|
|
95
169
|
options: Option[];
|
|
96
170
|
value: string | string[];
|
|
97
171
|
onChange: (value: string | string[]) => void;
|
|
@@ -110,14 +184,14 @@ interface DropdownProps {
|
|
|
110
184
|
/** Accessible name for the trigger, for when there is no visible `label` (e.g. in a toolbar). */
|
|
111
185
|
"aria-label"?: string;
|
|
112
186
|
}
|
|
113
|
-
declare function Dropdown({ options, value, onChange, label, disabled, placeholder, multiple, searchable, size: sizeProp, className, ref, container, error, showChips, "aria-label": ariaLabel, }: DropdownProps): react_jsx_runtime.JSX.Element;
|
|
187
|
+
declare function Dropdown({ options, value, onChange: onChangeProp, label, disabled, placeholder, multiple, searchable, size: sizeProp, className, ref, container, error, showChips, "aria-label": ariaLabel, ...wiring }: DropdownProps): react_jsx_runtime.JSX.Element;
|
|
114
188
|
|
|
115
189
|
interface ComboboxOption {
|
|
116
190
|
value: string;
|
|
117
191
|
label: string;
|
|
118
192
|
disabled?: boolean;
|
|
119
193
|
}
|
|
120
|
-
interface ComboboxProps {
|
|
194
|
+
interface ComboboxProps extends FieldControlWiring {
|
|
121
195
|
value: string;
|
|
122
196
|
onChange: (value: string) => void;
|
|
123
197
|
options: ComboboxOption[];
|
|
@@ -130,7 +204,7 @@ interface ComboboxProps {
|
|
|
130
204
|
error?: boolean;
|
|
131
205
|
size?: ControlSize;
|
|
132
206
|
}
|
|
133
|
-
declare function Combobox({ value, onChange, options, placeholder, disabled, loading, className, ref, container, error, size: sizeProp }: ComboboxProps): react_jsx_runtime.JSX.Element;
|
|
207
|
+
declare function Combobox({ value, onChange: onChangeProp, options, placeholder, disabled, loading, className, ref, container, error, size: sizeProp, ...wiring }: ComboboxProps): react_jsx_runtime.JSX.Element;
|
|
134
208
|
|
|
135
209
|
type CheckboxSize = "sm" | "md";
|
|
136
210
|
interface CheckboxProps {
|
|
@@ -143,7 +217,7 @@ interface CheckboxProps {
|
|
|
143
217
|
className?: string;
|
|
144
218
|
ref?: Ref<HTMLInputElement>;
|
|
145
219
|
}
|
|
146
|
-
declare function Checkbox({ checked, onChange, label, size, disabled, indeterminate, className, ref }: CheckboxProps): react_jsx_runtime.JSX.Element;
|
|
220
|
+
declare function Checkbox({ checked, onChange: onChangeProp, label, size, disabled, indeterminate, className, ref }: CheckboxProps): react_jsx_runtime.JSX.Element;
|
|
147
221
|
interface CheckboxGroupProps {
|
|
148
222
|
value: string[];
|
|
149
223
|
onChange: (value: string[]) => void;
|
|
@@ -175,9 +249,9 @@ interface RadioGroupProps {
|
|
|
175
249
|
className?: string;
|
|
176
250
|
label?: string;
|
|
177
251
|
}
|
|
178
|
-
declare function RadioGroup({ value, onChange, options, orientation, className, label }: RadioGroupProps): react_jsx_runtime.JSX.Element;
|
|
252
|
+
declare function RadioGroup({ value, onChange: onChangeProp, options, orientation, className, label }: RadioGroupProps): react_jsx_runtime.JSX.Element;
|
|
179
253
|
|
|
180
|
-
interface DatePickerProps {
|
|
254
|
+
interface DatePickerProps extends Omit<FieldControlWiring, "id"> {
|
|
181
255
|
value: Date | null;
|
|
182
256
|
onChange: (date: Date | null) => void;
|
|
183
257
|
placeholder?: string;
|
|
@@ -204,7 +278,7 @@ interface DatePickerProps {
|
|
|
204
278
|
end?: Date | null;
|
|
205
279
|
};
|
|
206
280
|
}
|
|
207
|
-
declare function DatePicker({ value, onChange, placeholder, disabled, className, ref, container, error, label, id, size: sizeProp, min, max, range }: DatePickerProps): react_jsx_runtime.JSX.Element;
|
|
281
|
+
declare function DatePicker({ value, onChange: onChangeProp, placeholder, disabled, className, ref, container, error, label, id, size: sizeProp, min, max, range, ...wiring }: DatePickerProps): react_jsx_runtime.JSX.Element;
|
|
208
282
|
|
|
209
283
|
interface DateRange {
|
|
210
284
|
start: Date | null;
|
|
@@ -215,7 +289,7 @@ interface DateRangePreset {
|
|
|
215
289
|
/** Returns the range to apply; evaluated when clicked so "Last 7 days" is always relative to now. */
|
|
216
290
|
range: () => DateRange;
|
|
217
291
|
}
|
|
218
|
-
interface DateRangePickerProps {
|
|
292
|
+
interface DateRangePickerProps extends Omit<FieldControlWiring, "id"> {
|
|
219
293
|
value: DateRange;
|
|
220
294
|
onChange: (range: DateRange) => void;
|
|
221
295
|
placeholder?: string;
|
|
@@ -243,10 +317,55 @@ declare const DEFAULT_DATE_RANGE_PRESETS: DateRangePreset[];
|
|
|
243
317
|
* the end (clicking before the start restarts the selection). Closes on
|
|
244
318
|
* Escape or outside click. Pair with <Field> for label/hint/error wiring.
|
|
245
319
|
*/
|
|
246
|
-
declare function DateRangePicker({ value, onChange, placeholder, disabled, error, label, id, className, ref, container, min, max, presets, weekStartsOn, size: sizeProp, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
|
|
320
|
+
declare function DateRangePicker({ value, onChange: onChangeProp, placeholder, disabled, error, label, id, className, ref, container, min, max, presets, weekStartsOn, size: sizeProp, ...wiring }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
|
|
247
321
|
|
|
322
|
+
type FileUploadStatus = "added" | "queued" | "uploading" | "done" | "error";
|
|
323
|
+
/** One file in the list: the page's own (`files`), or FileUpload's (the file was picked here). */
|
|
324
|
+
interface FileUploadItem {
|
|
325
|
+
/** The page's id for the file (with `files`), or FileUpload's own. */
|
|
326
|
+
id: string;
|
|
327
|
+
name: string;
|
|
328
|
+
/** In bytes. */
|
|
329
|
+
size?: number;
|
|
330
|
+
/**
|
|
331
|
+
* "added": picked, with nothing uploading it (a FileUpload with only onFiles); "queued": waiting its turn;
|
|
332
|
+
* "uploading"; "done"; "error".
|
|
333
|
+
*/
|
|
334
|
+
status: FileUploadStatus;
|
|
335
|
+
/** 0–100 while uploading. */
|
|
336
|
+
progress?: number;
|
|
337
|
+
/** Why it failed, in words ("The file is over 10 MB"). */
|
|
338
|
+
error?: string;
|
|
339
|
+
/** The picked File, when FileUpload has it. */
|
|
340
|
+
file?: File;
|
|
341
|
+
}
|
|
342
|
+
interface FileUploadRequestOptions {
|
|
343
|
+
/** Report progress, 0–100. */
|
|
344
|
+
onProgress: (percent: number) => void;
|
|
345
|
+
/** Aborted when the user cancels, the FileUpload goes, or its overlay closes: stop the request. */
|
|
346
|
+
signal: AbortSignal;
|
|
347
|
+
}
|
|
248
348
|
interface FileUploadProps {
|
|
249
|
-
|
|
349
|
+
/** The files the user picked or dropped, after the accept and size checks. */
|
|
350
|
+
onFiles?: (files: File[]) => void;
|
|
351
|
+
/**
|
|
352
|
+
* The page's uploads as they really are (Sprint 25.12 A33, R28-63): each file's status, progress and error. The list
|
|
353
|
+
* shows exactly these; the page adds what onFiles gives it, and answers onCancel, onRetry and onRemove. Pass `files`
|
|
354
|
+
* or `upload`, not both.
|
|
355
|
+
*/
|
|
356
|
+
files?: FileUploadItem[];
|
|
357
|
+
/**
|
|
358
|
+
* Uploads one file. FileUpload runs it for each picked file, at most three at once while the rest wait, and keeps the
|
|
359
|
+
* list itself: report progress with onProgress, resolve when done, reject to fail (the error's message says why), and
|
|
360
|
+
* stop when the signal aborts. Cancel aborts; Retry runs it again with a fresh signal.
|
|
361
|
+
*/
|
|
362
|
+
upload?: (file: File, options: FileUploadRequestOptions) => Promise<unknown>;
|
|
363
|
+
/** A running upload's Cancel. With `upload`, FileUpload has already aborted it and taken it off the list. */
|
|
364
|
+
onCancel?: (item: FileUploadItem) => void;
|
|
365
|
+
/** A failed upload's Retry. With `upload`, FileUpload runs it again itself. */
|
|
366
|
+
onRetry?: (item: FileUploadItem) => void;
|
|
367
|
+
/** A file's Remove. With `files` the page takes it off its list; otherwise FileUpload does, and tells the page. */
|
|
368
|
+
onRemove?: (item: FileUploadItem) => void;
|
|
250
369
|
/**
|
|
251
370
|
* The types the zone takes, as for an `<input type="file">`: ".csv", "image/*", "application/pdf". The zone says them
|
|
252
371
|
* in words ("CSV files"), and a picked or dropped file that isn't one gets a message instead of reaching onFiles.
|
|
@@ -266,7 +385,7 @@ interface FileUploadProps {
|
|
|
266
385
|
/** The file input's id. A Field passes its own, so its label opens the picker. */
|
|
267
386
|
id?: string;
|
|
268
387
|
}
|
|
269
|
-
declare function FileUpload({ onFiles, accept, multiple, maxSize, className, error, label, id }: FileUploadProps): react_jsx_runtime.JSX.Element;
|
|
388
|
+
declare function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accept, multiple, maxSize, className, error, label, id }: FileUploadProps): react_jsx_runtime.JSX.Element;
|
|
270
389
|
|
|
271
390
|
interface SliderRangeProps {
|
|
272
391
|
/**
|
|
@@ -300,9 +419,9 @@ interface SliderRangeProps {
|
|
|
300
419
|
*/
|
|
301
420
|
formatValue?: (value: number) => string;
|
|
302
421
|
}
|
|
303
|
-
declare function SliderRange({ value, onChange, min, max, step, disabled, showValue, className, ref, error, label, "aria-label": ariaLabel, "aria-describedby": describedByProp, trackStyle, formatValue }: SliderRangeProps): react_jsx_runtime.JSX.Element;
|
|
422
|
+
declare function SliderRange({ value, onChange: onChangeProp, min, max, step, disabled, showValue, className, ref, error, label, "aria-label": ariaLabel, "aria-describedby": describedByProp, trackStyle, formatValue }: SliderRangeProps): react_jsx_runtime.JSX.Element;
|
|
304
423
|
|
|
305
|
-
interface TimePickerProps {
|
|
424
|
+
interface TimePickerProps extends Omit<FieldControlWiring, "id"> {
|
|
306
425
|
value: string;
|
|
307
426
|
onChange: (time: string) => void;
|
|
308
427
|
use24Hour?: boolean;
|
|
@@ -316,7 +435,7 @@ interface TimePickerProps {
|
|
|
316
435
|
id?: string;
|
|
317
436
|
size?: ControlSize;
|
|
318
437
|
}
|
|
319
|
-
declare function TimePicker({ value, onChange, use24Hour, minuteStep, disabled, className, ref, container, error, id, size: sizeProp, }: TimePickerProps): react_jsx_runtime.JSX.Element;
|
|
438
|
+
declare function TimePicker({ value, onChange: onChangeProp, use24Hour, minuteStep, disabled, className, ref, container, error, id, size: sizeProp, ...wiring }: TimePickerProps): react_jsx_runtime.JSX.Element;
|
|
320
439
|
|
|
321
440
|
interface NumberInputProps {
|
|
322
441
|
value: number;
|
|
@@ -336,7 +455,7 @@ interface NumberInputProps {
|
|
|
336
455
|
/** Forwarded to the inner input element so a Label htmlFor can be associated. */
|
|
337
456
|
id?: string;
|
|
338
457
|
}
|
|
339
|
-
declare function NumberInput({ value, onChange, min, max, step, disabled, placeholder, prefix, suffix, size: sizeProp, className, error, allowDecimals, id, }: NumberInputProps): react_jsx_runtime.JSX.Element;
|
|
458
|
+
declare function NumberInput({ value, onChange: onChangeProp, min, max, step, disabled, placeholder, prefix, suffix, size: sizeProp, className, error, allowDecimals, id, }: NumberInputProps): react_jsx_runtime.JSX.Element;
|
|
340
459
|
|
|
341
460
|
interface TagInputProps {
|
|
342
461
|
value: string[];
|
|
@@ -351,7 +470,7 @@ interface TagInputProps {
|
|
|
351
470
|
/** Accessible name for the input when no visible Label is associated via id. Default "Add tag". */
|
|
352
471
|
"aria-label"?: string;
|
|
353
472
|
}
|
|
354
|
-
declare function TagInput({ value, onChange, placeholder, maxTags, disabled, className, error, id, "aria-label": ariaLabel }: TagInputProps): react_jsx_runtime.JSX.Element;
|
|
473
|
+
declare function TagInput({ value, onChange: onChangeProp, placeholder, maxTags, disabled, className, error, id, "aria-label": ariaLabel }: TagInputProps): react_jsx_runtime.JSX.Element;
|
|
355
474
|
|
|
356
475
|
interface PinInputProps {
|
|
357
476
|
value: string;
|
|
@@ -365,7 +484,7 @@ interface PinInputProps {
|
|
|
365
484
|
/** Forwarded to the first pin box so a Label htmlFor can be associated. */
|
|
366
485
|
id?: string;
|
|
367
486
|
}
|
|
368
|
-
declare function PinInput({ value, onChange, length, mask, disabled, size: sizeProp, className, error, id, }: PinInputProps): react_jsx_runtime.JSX.Element;
|
|
487
|
+
declare function PinInput({ value, onChange: onChangeProp, length, mask, disabled, size: sizeProp, className, error, id, }: PinInputProps): react_jsx_runtime.JSX.Element;
|
|
369
488
|
|
|
370
489
|
interface RatingProps {
|
|
371
490
|
value: number;
|
|
@@ -377,7 +496,7 @@ interface RatingProps {
|
|
|
377
496
|
className?: string;
|
|
378
497
|
error?: boolean;
|
|
379
498
|
}
|
|
380
|
-
declare function Rating({ value, onChange, max, allowHalf, readOnly, size, className, error, }: RatingProps): react_jsx_runtime.JSX.Element;
|
|
499
|
+
declare function Rating({ value, onChange: onChangeProp, max, allowHalf, readOnly, size, className, error, }: RatingProps): react_jsx_runtime.JSX.Element;
|
|
381
500
|
|
|
382
501
|
interface ColorPickerProps {
|
|
383
502
|
value: string;
|
|
@@ -388,7 +507,7 @@ interface ColorPickerProps {
|
|
|
388
507
|
className?: string;
|
|
389
508
|
error?: boolean;
|
|
390
509
|
}
|
|
391
|
-
declare function ColorPicker({ value, onChange, showAlpha, swatches, disabled, className, error, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
|
|
510
|
+
declare function ColorPicker({ value, onChange: onChangeProp, showAlpha, swatches, disabled, className, error, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
|
|
392
511
|
|
|
393
512
|
interface InlineFieldErrorProps {
|
|
394
513
|
message: string;
|
|
@@ -397,54 +516,28 @@ interface InlineFieldErrorProps {
|
|
|
397
516
|
}
|
|
398
517
|
declare function InlineFieldError({ message, id, className }: InlineFieldErrorProps): react_jsx_runtime.JSX.Element;
|
|
399
518
|
|
|
400
|
-
|
|
401
|
-
id: string;
|
|
402
|
-
"aria-describedby"?: string;
|
|
403
|
-
"aria-invalid"?: true;
|
|
404
|
-
"aria-required"?: true;
|
|
405
|
-
required?: boolean;
|
|
406
|
-
/** Set on Gridsmith form components (Input, Textarea, Dropdown, DatePicker, …). */
|
|
407
|
-
error?: boolean;
|
|
408
|
-
}
|
|
409
|
-
interface FieldProps {
|
|
410
|
-
label: ReactNode;
|
|
411
|
-
/** The single form control. Receives id, aria-describedby, aria-invalid/error and required automatically. */
|
|
412
|
-
children: ReactElement | ((props: FieldControlProps) => ReactNode);
|
|
413
|
-
/** Persistent help text (format requirements, why a field is disabled). Shown below the control, above any error. */
|
|
414
|
-
hint?: ReactNode;
|
|
415
|
-
/** Current validation error. Rendered as InlineFieldError (role="alert") and linked via aria-describedby. */
|
|
416
|
-
error?: string | null | false;
|
|
417
|
-
required?: boolean;
|
|
418
|
-
/** Slot to the right of the label, e.g. a "Forgot password?" Link. */
|
|
419
|
-
labelAction?: ReactNode;
|
|
420
|
-
/** Explicit id for the control; generated when omitted. */
|
|
421
|
-
id?: string;
|
|
422
|
-
className?: string;
|
|
423
|
-
}
|
|
424
|
-
/**
|
|
425
|
-
* Label + control + hint + error, wired together. Guarantees the label is
|
|
426
|
-
* associated (htmlFor/id), that hint and error are announced
|
|
427
|
-
* (aria-describedby), that the control is marked invalid, and that the error
|
|
428
|
-
* sits directly below the field (forms-002/006/009/010). Use one Field per
|
|
429
|
-
* control; do not add a separate <Label> or a label prop on the child.
|
|
430
|
-
*
|
|
431
|
-
* In a SettingsLayout panel a Field keeps the narrow page's reading width however wide the page is (the panel's
|
|
432
|
-
* --ds-form-max, Sprint 25.9); a `max-w-*` class of your own wins.
|
|
433
|
-
*/
|
|
434
|
-
declare function Field({ label, children, hint, error, required, labelAction, id: idProp, className }: FieldProps): react_jsx_runtime.JSX.Element;
|
|
435
|
-
|
|
519
|
+
/** When a form's fields check themselves: the project's forms.validationTiming, through FormWrapper. */
|
|
436
520
|
type ValidationMode = "onBlur" | "onSubmit" | "onChange";
|
|
437
521
|
interface FormErrors {
|
|
438
522
|
[field: string]: string | undefined;
|
|
439
523
|
}
|
|
524
|
+
/** A field's check: the message for what is wrong with its value now, or nothing. */
|
|
525
|
+
type FieldCheck = () => string | undefined;
|
|
440
526
|
interface FormContextValue {
|
|
441
527
|
errors: FormErrors;
|
|
442
528
|
setError: (field: string, message: string | undefined) => void;
|
|
443
529
|
clearErrors: () => void;
|
|
444
530
|
validationMode: ValidationMode;
|
|
445
531
|
submitted: boolean;
|
|
532
|
+
/**
|
|
533
|
+
* A Field given `validate` registers its check under its id, and the form runs every check on each submit (round 26,
|
|
534
|
+
* R26-2: the forms of both runs checked their fields only on submit, although the project said on blur). Returns
|
|
535
|
+
* the unregister.
|
|
536
|
+
*/
|
|
537
|
+
register: (field: string, check: FieldCheck) => () => void;
|
|
446
538
|
}
|
|
447
539
|
declare function useFormContext(): FormContextValue;
|
|
540
|
+
|
|
448
541
|
/** An invalid field as the form finds it in its own DOM after a submit. */
|
|
449
542
|
interface FormFieldError {
|
|
450
543
|
id: string;
|
|
@@ -452,7 +545,17 @@ interface FormFieldError {
|
|
|
452
545
|
message: string;
|
|
453
546
|
}
|
|
454
547
|
interface FormWrapperProps {
|
|
455
|
-
|
|
548
|
+
/**
|
|
549
|
+
* Called on each submit, valid or not, with the fields that failed, by Field id: the message of every Field whose
|
|
550
|
+
* `validate` finds its value wrong. A field that passes has no key, so save when `errors` is empty
|
|
551
|
+
* (`Object.keys(errors).length === 0`). Checks of your own that set a Field's `error` still work, and the form reads
|
|
552
|
+
* them from the page as before.
|
|
553
|
+
*
|
|
554
|
+
* In a Drawer, Dialog or Sheet, return the save's promise: the overlay stops asking before discarding once it
|
|
555
|
+
* resolves, and keeps asking if it's rejected. Returning nothing works for a save that keeps the form on screen; a
|
|
556
|
+
* submit that moves on to another step keeps the overlay's changes until the flow saves (Sprint 25.12 A15).
|
|
557
|
+
*/
|
|
558
|
+
onSubmit: (errors: FormErrors) => unknown;
|
|
456
559
|
validationMode?: ValidationMode;
|
|
457
560
|
children: ReactNode;
|
|
458
561
|
/**
|
|
@@ -462,19 +565,22 @@ interface FormWrapperProps {
|
|
|
462
565
|
actions?: ReactNode;
|
|
463
566
|
actionsAlign?: "start" | "end";
|
|
464
567
|
/**
|
|
465
|
-
* Renders a secondary Cancel before the actions. Inside a Drawer, a Dialog
|
|
466
|
-
*
|
|
568
|
+
* Renders a secondary Cancel before the actions. Inside a Drawer, a Dialog or a Sheet, it closes the overlay through
|
|
569
|
+
* its unsaved-changes check — the question Escape and the close control ask once the user has changed something —
|
|
467
570
|
* and then this function runs, unless it is the overlay's own onClose; it does not run when the user keeps editing.
|
|
468
571
|
* Anywhere else this function runs. Never hand-wire a Cancel to the overlay's close: it skips the question (round 21).
|
|
469
572
|
*/
|
|
470
573
|
onCancel?: () => void;
|
|
471
574
|
/** The Cancel button's label (default "Cancel"). */
|
|
472
575
|
cancelLabel?: string;
|
|
473
|
-
/**
|
|
576
|
+
/**
|
|
577
|
+
* After a failed submit, move focus to what needs fixing (default on): the error summary when it shows (GOV.UK's
|
|
578
|
+
* error summary takes focus), else the first invalid field — a group's chosen or first option.
|
|
579
|
+
*/
|
|
474
580
|
focusFirstError?: boolean;
|
|
475
581
|
/**
|
|
476
582
|
* When two or more fields are invalid after a submit, an error summary above the form links to each (default on).
|
|
477
|
-
* A function renders your own from the list.
|
|
583
|
+
* It answers a submit, so it never shows before the first one. A function renders your own from the list.
|
|
478
584
|
*/
|
|
479
585
|
errorSummary?: boolean | ((errors: FormFieldError[]) => ReactNode);
|
|
480
586
|
/**
|
|
@@ -486,6 +592,40 @@ interface FormWrapperProps {
|
|
|
486
592
|
}
|
|
487
593
|
declare function FormWrapper({ onSubmit, validationMode: validationModeProp, children, actions: actionsProp, actionsAlign: actionsAlignProp, onCancel, cancelLabel, focusFirstError, errorSummary, className, ref }: FormWrapperProps): react_jsx_runtime.JSX.Element;
|
|
488
594
|
|
|
595
|
+
interface AddAnotherProps<T> {
|
|
596
|
+
/** The rows. Each keeps its own id (`getId`), never its index, so its values, field ids and errors stay with it when another row goes. */
|
|
597
|
+
items: T[];
|
|
598
|
+
getId: (item: T) => string;
|
|
599
|
+
/** A row's name in words, from its position: `(i) => \`person ${i + 1}\``. It names every field in the row ("Email address, person 2") and the row's Remove button. */
|
|
600
|
+
itemName: (index: number) => string;
|
|
601
|
+
/** The fields' labels, in order. They show once, as the group's column headings; on a narrow group each field shows its own. */
|
|
602
|
+
columns: string[];
|
|
603
|
+
/**
|
|
604
|
+
* A row's fields. `label(column)` names a field for its row: wrap each control in
|
|
605
|
+
* `<Field hideLabel label={label("Email address")}>`, so it's read out in full while the heading shows it once.
|
|
606
|
+
*/
|
|
607
|
+
renderRow: (item: T, index: number, label: (column: string) => string) => ReactNode;
|
|
608
|
+
onAdd: () => void;
|
|
609
|
+
onRemove: (id: string) => void;
|
|
610
|
+
/** The Add button's text (default "Add another"). */
|
|
611
|
+
addLabel?: string;
|
|
612
|
+
/** The group's own label, as a legend above it (for example "Team members"). */
|
|
613
|
+
label?: string;
|
|
614
|
+
/** Fewest rows kept (default 1): a row can't be removed below it. */
|
|
615
|
+
minItems?: number;
|
|
616
|
+
/** Most rows allowed: Add goes once there are this many. */
|
|
617
|
+
maxItems?: number;
|
|
618
|
+
className?: string;
|
|
619
|
+
}
|
|
620
|
+
/**
|
|
621
|
+
* Repeated rows of fields: MOJ's "Add another" (Sprint 25.12 A31, R28-59; the owner's P24). Builders dropped the labels
|
|
622
|
+
* of every row but the first to avoid repeating them on screen, and those fields had no name. Here the labels show
|
|
623
|
+
* once, as column headings, while every field is named for its row; Add and Remove name the row they act on, and
|
|
624
|
+
* focus moves to the new row after an add, or to the previous row after a removal. On a narrow group the rows stack,
|
|
625
|
+
* the headings go, and each field shows its own label.
|
|
626
|
+
*/
|
|
627
|
+
declare function AddAnother<T>({ items, getId, itemName, columns, renderRow, onAdd, onRemove, addLabel, label, minItems, maxItems, className }: AddAnotherProps<T>): react_jsx_runtime.JSX.Element;
|
|
628
|
+
|
|
489
629
|
interface TransferItem {
|
|
490
630
|
id: string;
|
|
491
631
|
label: string;
|
|
@@ -501,7 +641,7 @@ interface TransferListProps {
|
|
|
501
641
|
className?: string;
|
|
502
642
|
ref?: Ref<HTMLDivElement>;
|
|
503
643
|
}
|
|
504
|
-
declare function TransferList({ available, selected, onChange, availableTitle, selectedTitle, searchable, className, ref, }: TransferListProps): react_jsx_runtime.JSX.Element;
|
|
644
|
+
declare function TransferList({ available, selected, onChange: onChangeProp, availableTitle, selectedTitle, searchable, className, ref, }: TransferListProps): react_jsx_runtime.JSX.Element;
|
|
505
645
|
|
|
506
646
|
interface MentionSuggestion {
|
|
507
647
|
id: string;
|
|
@@ -518,7 +658,7 @@ interface MentionInputProps {
|
|
|
518
658
|
disabled?: boolean;
|
|
519
659
|
className?: string;
|
|
520
660
|
}
|
|
521
|
-
declare function MentionInput({ value: controlledValue, onChange, suggestions, trigger, placeholder, disabled, className, }: MentionInputProps): react_jsx_runtime.JSX.Element;
|
|
661
|
+
declare function MentionInput({ value: controlledValue, onChange: onChangeProp, suggestions, trigger, placeholder, disabled, className, }: MentionInputProps): react_jsx_runtime.JSX.Element;
|
|
522
662
|
|
|
523
663
|
type CardVariant = "default" | "featured" | "interactive" | "outline" | "ghost";
|
|
524
664
|
type CardSelectType = "radio" | "checkbox" | "toggle";
|
|
@@ -585,6 +725,45 @@ interface DataListProps {
|
|
|
585
725
|
}
|
|
586
726
|
declare function DataList({ items, columns, className }: DataListProps): react_jsx_runtime.JSX.Element;
|
|
587
727
|
|
|
728
|
+
interface CardGridProps extends HTMLAttributes<HTMLDivElement> {
|
|
729
|
+
/** The narrowest a card may be, as a CSS length. The grid takes as many columns as fit at it. Default "14rem". */
|
|
730
|
+
minWidth?: string;
|
|
731
|
+
/** The most cards in a row, however wide the grid is. Default 4. A comparison (`compare`) takes all its cards instead. */
|
|
732
|
+
maxColumns?: number;
|
|
733
|
+
/**
|
|
734
|
+
* The cards are read against each other (plans, tiers, options): all of them in one row when each gets `minWidth`, or
|
|
735
|
+
* one per row, never a partial row, and their header, content and footer line up across the row (round 27, the owner:
|
|
736
|
+
* "when cards are needed for comparison then two plus one or any other combo just won't work"). A collection (files,
|
|
737
|
+
* projects) leaves it off and flows: fewer per row as the room shrinks. The cards must be the grid's direct children
|
|
738
|
+
* in the page (a fragment or a component that returns them is fine; a wrapper element around one is not lined up).
|
|
739
|
+
*/
|
|
740
|
+
compare?: boolean;
|
|
741
|
+
/**
|
|
742
|
+
* The space between the cards, as a CSS length. Default the theme's space-4. The columns are worked out from it, so
|
|
743
|
+
* the gap is this prop, never a `gap-*` class (which would leave the columns measured for another gap).
|
|
744
|
+
*/
|
|
745
|
+
gap?: string;
|
|
746
|
+
children: ReactNode;
|
|
747
|
+
ref?: Ref<HTMLDivElement>;
|
|
748
|
+
}
|
|
749
|
+
/**
|
|
750
|
+
* A grid of cards that takes as many columns as fit at the card's minimum width, up to `maxColumns` (round 27, R27-13,
|
|
751
|
+
* the owner: "the cards should always just respond nicely anyway and have a min width applied"). It reads the width it
|
|
752
|
+
* is given, not the viewport, so the same cards fit a full page, a pane beside a tree and an aside, and a phone, and a
|
|
753
|
+
* card never gets narrower than its minimum: with less room there are fewer per row. Run 70's builder set four columns
|
|
754
|
+
* at a container breakpoint and its file cards got 130 px each.
|
|
755
|
+
*
|
|
756
|
+
* A collection's template is DescriptionList's: each column is at least `minWidth` (or the whole row, when the row is
|
|
757
|
+
* narrower) and at least a `maxColumns`-th of the row, so a wide row never holds more than `maxColumns`.
|
|
758
|
+
*
|
|
759
|
+
* A comparison's (`compare`): n columns (every card the grid draws) each an nth of the row while n minimums and their
|
|
760
|
+
* gaps fit, and the whole row below that. The column minimum switches at exactly that width, with no breakpoint:
|
|
761
|
+
* `(n × minWidth + gaps − 100%) × 999` is below zero while they fit, and far above the row once they do not. The cards
|
|
762
|
+
* share three rows (header, content, footer), so their parts line up; a child that is not a Card fills its three rows
|
|
763
|
+
* without lining anything up.
|
|
764
|
+
*/
|
|
765
|
+
declare function CardGrid({ minWidth, maxColumns, compare, gap, className, style, children, ref, ...props }: CardGridProps): react_jsx_runtime.JSX.Element;
|
|
766
|
+
|
|
588
767
|
interface DescriptionItem {
|
|
589
768
|
label: string;
|
|
590
769
|
value: ReactNode;
|
|
@@ -614,7 +793,12 @@ declare const DescriptionList: react.ForwardRefExoticComponent<DescriptionListPr
|
|
|
614
793
|
type StatusDotVariant = "success" | "warning" | "error" | "info" | "neutral" | "offline";
|
|
615
794
|
interface StatusDotProps {
|
|
616
795
|
variant?: StatusDotVariant;
|
|
617
|
-
|
|
796
|
+
/**
|
|
797
|
+
* The status in words ("Online", "Healthy"), drawn beside the dot and read as the status. Required: a dot alone would
|
|
798
|
+
* show the status by colour only (WCAG 1.4.1). Words a page already writes beside a dot are its label: pass them here
|
|
799
|
+
* and never write them again (Sprint 25.12 A48, R28-87).
|
|
800
|
+
*/
|
|
801
|
+
label: string;
|
|
618
802
|
pulse?: boolean;
|
|
619
803
|
className?: string;
|
|
620
804
|
}
|
|
@@ -949,7 +1133,14 @@ declare function TableToolbar({ search, primaryFilter, filters, filtersOpen, onF
|
|
|
949
1133
|
interface TimelineItem {
|
|
950
1134
|
title: string;
|
|
951
1135
|
description?: string;
|
|
1136
|
+
/** What the item shows for its time: "2 hours ago", "Mon 14:05". */
|
|
952
1137
|
timestamp?: string;
|
|
1138
|
+
/**
|
|
1139
|
+
* The item's exact time (an ISO string or a Date). The timestamp is then a <time> element, with the exact date and
|
|
1140
|
+
* time on hover, so a relative time can always be read as a date (round 27, R27-5: run 69's activity feed showed
|
|
1141
|
+
* "2 hours ago" with no way to the date). Without a timestamp, the exact date is shown.
|
|
1142
|
+
*/
|
|
1143
|
+
dateTime?: string | Date;
|
|
953
1144
|
/** Takes the dot's place — the actor's Avatar (size="sm") on an activity feed, or an Icon. `variant` colours the dot only. */
|
|
954
1145
|
icon?: ReactNode;
|
|
955
1146
|
variant?: "default" | "success" | "warning" | "error";
|
|
@@ -2142,7 +2333,7 @@ interface SegmentedControlOption {
|
|
|
2142
2333
|
disabled?: boolean;
|
|
2143
2334
|
}
|
|
2144
2335
|
type SegmentedControlSize = "xs" | "sm" | "md" | "lg";
|
|
2145
|
-
interface SegmentedControlProps {
|
|
2336
|
+
interface SegmentedControlProps extends FieldControlWiring {
|
|
2146
2337
|
value: string;
|
|
2147
2338
|
onChange: (value: string) => void;
|
|
2148
2339
|
options: SegmentedControlOption[];
|
|
@@ -2157,7 +2348,10 @@ interface SegmentedControlProps {
|
|
|
2157
2348
|
*/
|
|
2158
2349
|
onHoverChange?: (value: string | null) => void;
|
|
2159
2350
|
className?: string;
|
|
2160
|
-
/**
|
|
2351
|
+
/**
|
|
2352
|
+
* Accessible name for the radiogroup, for when there is no visible label (e.g. in a toolbar). A control with a visible
|
|
2353
|
+
* label sits in a Field instead, which names it and stacks the label above: `<Field label="Status"><SegmentedControl …/></Field>`.
|
|
2354
|
+
*/
|
|
2161
2355
|
"aria-label"?: string;
|
|
2162
2356
|
/**
|
|
2163
2357
|
* Above this many options the control renders a Dropdown with the same value, onChange and options — a row of
|
|
@@ -2167,7 +2361,7 @@ interface SegmentedControlProps {
|
|
|
2167
2361
|
*/
|
|
2168
2362
|
maxOptions?: number;
|
|
2169
2363
|
}
|
|
2170
|
-
declare function SegmentedControl({ value, onChange, options, size: sizeProp, variant, fullWidth, onHoverChange, className, "aria-label": ariaLabel, maxOptions, }: SegmentedControlProps): react_jsx_runtime.JSX.Element;
|
|
2364
|
+
declare function SegmentedControl({ value, onChange: onChangeProp, options, size: sizeProp, variant, fullWidth, onHoverChange, className, "aria-label": ariaLabel, maxOptions, ...wiring }: SegmentedControlProps): react_jsx_runtime.JSX.Element;
|
|
2171
2365
|
|
|
2172
2366
|
interface BottomNavItem {
|
|
2173
2367
|
label: string;
|
|
@@ -2618,36 +2812,63 @@ type ToastVariant = "default" | "success" | "warning" | "error";
|
|
|
2618
2812
|
type ToastPosition = "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center";
|
|
2619
2813
|
interface ToastAction {
|
|
2620
2814
|
label: string;
|
|
2621
|
-
|
|
2815
|
+
/** Runs once when pressed; the toast then closes. It may return a promise (useDestructiveAction's Undo confirms itself when it settles). */
|
|
2816
|
+
onClick: () => unknown;
|
|
2622
2817
|
}
|
|
2623
2818
|
interface ToastProps {
|
|
2624
2819
|
variant?: ToastVariant;
|
|
2625
2820
|
message: ReactNode;
|
|
2626
2821
|
visible: boolean;
|
|
2627
2822
|
onDismiss: () => void;
|
|
2823
|
+
/** Milliseconds a plain toast stays. 0 or Infinity keeps it until dismissed. */
|
|
2628
2824
|
duration?: number;
|
|
2629
2825
|
pauseOnHover?: boolean;
|
|
2826
|
+
/**
|
|
2827
|
+
* The toast's action. Sprint 25.12 A40 (the sourced overlays#18): a toast with an action never closes on a timer while
|
|
2828
|
+
* the action can still be taken. With `actionWindow` the action lapses after that long, and the toast stays as a plain
|
|
2829
|
+
* message for its `duration`; without one it stays until the user acts or dismisses it.
|
|
2830
|
+
*/
|
|
2630
2831
|
action?: ToastAction;
|
|
2832
|
+
/** How long the action is offered once the toast shows, in ms (an Undo's window). */
|
|
2833
|
+
actionWindow?: number;
|
|
2631
2834
|
position?: ToastPosition;
|
|
2632
2835
|
mode?: "light" | "dark";
|
|
2633
2836
|
container?: Element | DocumentFragment;
|
|
2634
2837
|
/**
|
|
2635
|
-
* Render only the toast card, without the portal
|
|
2636
|
-
*
|
|
2637
|
-
*
|
|
2838
|
+
* Render only the toast card, without the portal, the fixed position or a live region of its own. ToastProvider
|
|
2839
|
+
* renders cards this way: it owns their stacking, their timers' pause and their announcements. Standalone use
|
|
2840
|
+
* leaves this unset, and the toast announces itself.
|
|
2638
2841
|
*/
|
|
2639
2842
|
inline?: boolean;
|
|
2843
|
+
/** ToastProvider: every timer pauses while the stack is hovered or holds focus. */
|
|
2844
|
+
paused?: boolean;
|
|
2845
|
+
/** ToastProvider: the action's window ran out (the provider drops the action and the plain time starts). */
|
|
2846
|
+
onActionLapse?: () => void;
|
|
2847
|
+
/** ToastProvider: the action was pressed (the provider runs it once and closes the toast). */
|
|
2848
|
+
onAction?: () => void;
|
|
2849
|
+
/** ToastProvider: a new value restarts the toast's time (a toast for the same item replaced this one). */
|
|
2850
|
+
restartKey?: number;
|
|
2640
2851
|
}
|
|
2641
|
-
declare function Toast({ variant, message, visible, onDismiss, duration, pauseOnHover, action, position, mode, container, inline }: ToastProps): react_jsx_runtime.JSX.Element | null;
|
|
2852
|
+
declare function Toast({ variant, message, visible, onDismiss, duration, pauseOnHover, action, actionWindow, position, mode, container, inline, paused, onActionLapse, onAction, restartKey }: ToastProps): react_jsx_runtime.JSX.Element | null;
|
|
2642
2853
|
|
|
2643
2854
|
interface ToastOptions {
|
|
2644
2855
|
variant?: ToastVariant;
|
|
2645
|
-
/** Milliseconds
|
|
2856
|
+
/** Milliseconds a plain toast stays once shown. 0 or Infinity keeps it until dismissed. */
|
|
2646
2857
|
duration?: number;
|
|
2858
|
+
/**
|
|
2859
|
+
* An action (Undo, Retry). A toast with an action stays until the user acts or dismisses it, or until its action
|
|
2860
|
+
* lapses (`actionWindow`); pressing it runs it once and closes the toast (Sprint 25.12 A40, A41).
|
|
2861
|
+
*/
|
|
2647
2862
|
action?: ToastAction;
|
|
2863
|
+
/** How long the action is offered once the toast shows, in ms (an Undo's window); the toast then stays as a plain message for its `duration`. */
|
|
2864
|
+
actionWindow?: number;
|
|
2648
2865
|
/** Supply to update an existing toast in place instead of adding a new one. */
|
|
2649
2866
|
id?: string;
|
|
2650
|
-
/**
|
|
2867
|
+
/**
|
|
2868
|
+
* The item this toast is about (Sprint 25.12 A7, D28): a new toast with the same key takes the place of the one on
|
|
2869
|
+
* screen, or the one waiting, and its time starts again — six flips of one switch give one toast. Toasts without a
|
|
2870
|
+
* key never merge, whatever their wording; toasts with an action, and errors, never merge.
|
|
2871
|
+
*/
|
|
2651
2872
|
key?: string;
|
|
2652
2873
|
}
|
|
2653
2874
|
interface PromiseToastMessages<T> {
|
|
@@ -2656,7 +2877,7 @@ interface PromiseToastMessages<T> {
|
|
|
2656
2877
|
error: ReactNode | ((error: unknown) => ReactNode);
|
|
2657
2878
|
}
|
|
2658
2879
|
interface ToastApi {
|
|
2659
|
-
/**
|
|
2880
|
+
/** Show a toast (it waits behind the stack when the stack is full). Returns its id. */
|
|
2660
2881
|
toast: (message: ReactNode, options?: ToastOptions) => string;
|
|
2661
2882
|
success: (message: ReactNode, options?: Omit<ToastOptions, "variant">) => string;
|
|
2662
2883
|
warning: (message: ReactNode, options?: Omit<ToastOptions, "variant">) => string;
|
|
@@ -2670,31 +2891,38 @@ interface ToastApi {
|
|
|
2670
2891
|
}
|
|
2671
2892
|
interface ToastProviderProps {
|
|
2672
2893
|
children: ReactNode;
|
|
2673
|
-
/**
|
|
2894
|
+
/**
|
|
2895
|
+
* Most toasts shown at once (the project's notifications.toastMaxVisible). The rest wait behind a "+N" count, their
|
|
2896
|
+
* time starting only when shown. Default 3 (Sprint 25.12 A40, the owner's R28-81: every deletion's confirmation
|
|
2897
|
+
* shows); 1 is the least.
|
|
2898
|
+
*/
|
|
2674
2899
|
maxVisible?: number;
|
|
2675
2900
|
/** Where the stack is anchored. Default "bottom-right". */
|
|
2676
2901
|
position?: ToastPosition;
|
|
2677
|
-
/** Default
|
|
2902
|
+
/** Default time a plain toast stays, in ms. Default 5000. */
|
|
2678
2903
|
duration?: number;
|
|
2679
|
-
/**
|
|
2680
|
-
* Round 15 (the owner's 52.4): ten toggle flips queued ten toasts, each waiting its full duration. While the visible
|
|
2681
|
-
* slots are full, a new toast replaces the queued toast that shares its key (the variant by default) — the user sees
|
|
2682
|
-
* the current one and the latest, never a backlog. Default true.
|
|
2683
|
-
*/
|
|
2904
|
+
/** Toasts with the same explicit `key` replace each other (D28). Default true. */
|
|
2684
2905
|
coalesce?: boolean;
|
|
2685
2906
|
/** Independent colour mode for toasts, when the theme configures one. */
|
|
2686
2907
|
mode?: "light" | "dark";
|
|
2687
|
-
/** Pause
|
|
2908
|
+
/** Pause every toast's time while the stack is hovered (focus inside it always pauses). Default true. */
|
|
2688
2909
|
pauseOnHover?: boolean;
|
|
2689
2910
|
}
|
|
2690
2911
|
declare function useToast(): ToastApi;
|
|
2691
2912
|
/** The toast API when a ToastProvider is above, else null — for components that can do without one (useDestructiveAction in dialog mode). */
|
|
2692
2913
|
declare function useToastOptional(): ToastApi | null;
|
|
2693
2914
|
/**
|
|
2694
|
-
*
|
|
2695
|
-
*
|
|
2696
|
-
*
|
|
2697
|
-
*
|
|
2915
|
+
* Toasts for the whole app. Wrap it once (get_app_shell does), then call useToast() anywhere (Sprint 25.12 A40):
|
|
2916
|
+
* - up to `maxVisible` show at once; the rest wait behind a "+N" count, their time starting only when shown, with
|
|
2917
|
+
* toasts that carry an action and errors ahead of plain confirmations; "Clear all" empties the stack;
|
|
2918
|
+
* - only toasts for the same item (the same `key`) replace each other (D28);
|
|
2919
|
+
* - hovering the stack, or focus inside it, pauses every toast's time, an Undo's window included;
|
|
2920
|
+
* - two live regions, polite and assertive, present from the start, announce each toast once as it comes; the cards
|
|
2921
|
+
* themselves stay quiet;
|
|
2922
|
+
* - F8 moves focus to the stack (a region named "Notifications"), and a toast with an action says so as it's announced;
|
|
2923
|
+
* when an action or the dismiss button closes a toast, focus returns where it was, else to the next toast, else
|
|
2924
|
+
* to the page's main content;
|
|
2925
|
+
* - on a phone the stack sits above the bottom tab bar.
|
|
2698
2926
|
*/
|
|
2699
2927
|
declare function ToastProvider({ children, maxVisible, position, duration, mode, pauseOnHover, coalesce }: ToastProviderProps): react_jsx_runtime.JSX.Element;
|
|
2700
2928
|
|
|
@@ -3016,10 +3244,22 @@ interface DestructiveActionOptions {
|
|
|
3016
3244
|
typeToConfirm?: string;
|
|
3017
3245
|
/** Performs the action. In undo mode it runs at once. */
|
|
3018
3246
|
onConfirm: () => void | Promise<void>;
|
|
3019
|
-
/**
|
|
3020
|
-
|
|
3021
|
-
|
|
3247
|
+
/**
|
|
3248
|
+
* Restores what the action removed; the Undo toast's action in undo mode. Without it the toast has no Undo. It may
|
|
3249
|
+
* return a promise: once it resolves the hook confirms with a toast (`restoredMessage`), and a rejection shows an
|
|
3250
|
+
* error toast (Sprint 25.12 A41).
|
|
3251
|
+
*/
|
|
3252
|
+
onUndo?: () => unknown;
|
|
3253
|
+
/**
|
|
3254
|
+
* The completed action's message, in both modes ("Office removed"): the confirmation toast in dialog mode, and the
|
|
3255
|
+
* text beside Undo in undo mode. Without it the hook says the action's verb in the past tense ("Removed"). A page
|
|
3256
|
+
* that shows its own toast during `onConfirm` isn't given a second one (Sprint 25.12 A34).
|
|
3257
|
+
*/
|
|
3258
|
+
doneMessage?: ReactNode;
|
|
3259
|
+
/** The older name of `doneMessage`, for undo mode. */
|
|
3022
3260
|
undoMessage?: ReactNode;
|
|
3261
|
+
/** The toast once an Undo has worked ("Office restored"); "Restored" without one. */
|
|
3262
|
+
restoredMessage?: ReactNode;
|
|
3023
3263
|
/** `high` always confirms in a dialog, even in undo mode; the preference's high-severity list does the same by key. */
|
|
3024
3264
|
severity?: "low" | "high";
|
|
3025
3265
|
}
|
|
@@ -3182,4 +3422,4 @@ interface UseTextOverflowResult {
|
|
|
3182
3422
|
*/
|
|
3183
3423
|
declare function useTextOverflow(options?: UseTextOverflowOptions): UseTextOverflowResult;
|
|
3184
3424
|
|
|
3185
|
-
export { Accordion, ActionPanel, ActionPanelGroup, Alert, type AlertPlacement, AppShell, type AppShellContextValue, type AppShellFocus, type AppShellPreferences, type AppShellTheme, AsidePanel, type AsidePanelProps, type AsidePanelSide, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarStatus, Badge, type BadgePaletteColor, type BadgeSeverity, type BadgeSize, type BadgeVariant, BottomNav, type BottomNavItem, type BreadcrumbItem$1 as BreadcrumbItem, Breadcrumbs, type BreadcrumbsSeparator, type BreadcrumbsSize, type BreadcrumbsVariant, BreakpointKey, BulkActionBar, Button, ButtonSizeContext, Calendar, type CalendarDay, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardSelectType, CardTitle, type CardVariant, Carousel, type ChatMessage, type ChatMessageAction, type ChatMessageLayout, ChatMessageList, type ChatMessageSender, type ChatMessageSource, type ChatMessageStatus, ChatPanel, type ChatPanelProps, type ChatPanelStatusTone, Checkbox, CheckboxGroup, CheckboxGroupItem, CodeBlock, Collapsible, ColorPicker, type Column, Combobox, CommandPalette, ContextMenu, type ControlSize, ControlSizeContext, CornerPanel, type CornerPanelEdge, type CornerPanelProps, DEFAULT_DATE_RANGE_PRESETS, DataList, type DateInput, DatePicker, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeWords, type DescriptionItem, DescriptionList, type DescriptionListOrientation, type DescriptionListSize, type DestructiveActionHandle, type DestructiveActionOptions, Dialog, Divider, Dock, Drawer, Dropdown, DropdownMenu, type DropdownMenuDivider, type DropdownMenuEntry, type DropdownMenuItem, EmptyState, EntityCell, Field, type FieldControlProps, type FieldProps, FileUpload, type FitLabelsOptions, type FittedLabel, FormWrapper, Gantt, type GanttGroup, type GanttItem, type GanttProps, type GanttStatus, type GanttTone, type GridKeyboard, type GridKeyboardOptions, HoverCard, InlineFieldError, Input, Kbd, Label, type LabelBox, Launcher, type LauncherEdge, type LauncherProps, type LauncherVariant, type LauncherWhenOpen, Link, type LinkProps, MentionInput, MobileHeaderMenu, type MobileHeaderMenuItemData, type MobileHeaderMenuType, NavItem, type NavItemProps, type NavItemType, NavMenu, type NavMenuItem, Navbar, type NavbarSize, type NavbarType, type NavbarVariant, NotificationCenter, NumberInput, PageContainer, type PageContainerWidth, PageHeader, type PageHeaderBehavior, type PageHeaderIntensity, type PageHeaderProps, type PageHeaderVariant, type Pager, Pagination, type PaginationOptions, PinInput, Popover, PreferencesContext, Progress, type PromiseToastMessages, RadioGroup, Rating, type ResolvedPreferences, ScrollArea, SectionHeading, type SectionHeadingProps, SegmentedControl, SettingsLayout, type SettingsLayoutProps, type SettingsSection, Sheet, Sidebar, type SidebarContextValue, type SidebarItem, SidebarNav, type SidebarNavSize, type SidebarPosition, type SidebarSection, type SidebarType, Skeleton, SkipLink, SliderRange, Spinner, StackedList, type StackedListVariant, StatsCard, StatusDot, type StatusDotVariant, Stepper, TIME_ZOOMS, type Tab, Table, type TableDensity, type TableProps, TableToolbar, type TableToolbarActiveFilter, type TableToolbarFilterOption, Tabs, Tag, TagInput, type TagPaletteColor, type TagVariant, TextOverflow, type TextOverflowProps, Textarea, TimeBar, type TimeBarProps, TimePicker, TimeRow, type TimeRowProps, type TimeScale, TimeScaleHeader, type TimeScaleHeaderProps, type TimeScaleOptions, type TimeTick, TimeViewport, type TimeViewportHandle, type TimeViewportLayout, type TimeViewportProps, type TimeViewportState, type TimeZoom, Timeline, Toast, type ToastAction, type ToastApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastVariant, Toggle, Tooltip, Tour, TransferList, TreeView, type Trend, type UseTextOverflowOptions, type UseTextOverflowResult, dateOfDay, dayOf, endDayOf, fitLabel, fitLabels, formatDateRange, preferenceActionKey, timeExtent, useAppShell, useContentWidth, useDestructiveAction, useFittedLabels, useFormContext, useGridKeyboard, usePagination, usePreferences, useSidebar, useTextMeasure, useTextOverflow, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional, useUnsavedChanges };
|
|
3425
|
+
export { Accordion, ActionPanel, ActionPanelGroup, AddAnother, type AddAnotherProps, Alert, type AlertPlacement, AppShell, type AppShellContextValue, type AppShellFocus, type AppShellPreferences, type AppShellTheme, AsidePanel, type AsidePanelProps, type AsidePanelSide, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarStatus, Badge, type BadgePaletteColor, type BadgeSeverity, type BadgeSize, type BadgeVariant, BottomNav, type BottomNavItem, type BreadcrumbItem$1 as BreadcrumbItem, Breadcrumbs, type BreadcrumbsSeparator, type BreadcrumbsSize, type BreadcrumbsVariant, BreakpointKey, BulkActionBar, Button, ButtonSizeContext, Calendar, type CalendarDay, Card, CardContent, CardDescription, CardFooter, CardGrid, type CardGridProps, CardHeader, type CardSelectType, CardTitle, type CardVariant, Carousel, type ChatMessage, type ChatMessageAction, type ChatMessageLayout, ChatMessageList, type ChatMessageSender, type ChatMessageSource, type ChatMessageStatus, ChatPanel, type ChatPanelProps, type ChatPanelStatusTone, Checkbox, CheckboxGroup, CheckboxGroupItem, CodeBlock, Collapsible, ColorPicker, type Column, Combobox, CommandPalette, ContextMenu, type ControlSize, ControlSizeContext, CornerPanel, type CornerPanelEdge, type CornerPanelProps, DEFAULT_DATE_RANGE_PRESETS, DataList, type DateInput, DatePicker, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeWords, type DescriptionItem, DescriptionList, type DescriptionListOrientation, type DescriptionListSize, type DestructiveActionHandle, type DestructiveActionOptions, Dialog, Divider, Dock, Drawer, Dropdown, DropdownMenu, type DropdownMenuDivider, type DropdownMenuEntry, type DropdownMenuItem, EmptyState, EntityCell, Field, type FieldControlProps, type FieldLabel, type FieldProps, FileUpload, type FileUploadItem, type FileUploadRequestOptions, type FileUploadStatus, type FitLabelsOptions, type FittedLabel, FormWrapper, Gantt, type GanttGroup, type GanttItem, type GanttProps, type GanttStatus, type GanttTone, type GridKeyboard, type GridKeyboardOptions, HoverCard, InlineFieldError, Input, Kbd, Label, type LabelBox, Launcher, type LauncherEdge, type LauncherProps, type LauncherVariant, type LauncherWhenOpen, Link, type LinkProps, MentionInput, MobileHeaderMenu, type MobileHeaderMenuItemData, type MobileHeaderMenuType, NavItem, type NavItemProps, type NavItemType, NavMenu, type NavMenuItem, Navbar, type NavbarSize, type NavbarType, type NavbarVariant, NotificationCenter, NumberInput, PageContainer, type PageContainerWidth, PageHeader, type PageHeaderBehavior, type PageHeaderIntensity, type PageHeaderProps, type PageHeaderVariant, type Pager, Pagination, type PaginationOptions, PinInput, Popover, PreferencesContext, Progress, type PromiseToastMessages, RadioGroup, Rating, type ResolvedPreferences, ScrollArea, SectionHeading, type SectionHeadingProps, SegmentedControl, SettingsLayout, type SettingsLayoutProps, type SettingsSection, Sheet, Sidebar, type SidebarContextValue, type SidebarItem, SidebarNav, type SidebarNavSize, type SidebarPosition, type SidebarSection, type SidebarType, Skeleton, SkipLink, SliderRange, Spinner, StackedList, type StackedListVariant, StatsCard, StatusDot, type StatusDotVariant, Stepper, TIME_ZOOMS, type Tab, Table, type TableDensity, type TableProps, TableToolbar, type TableToolbarActiveFilter, type TableToolbarFilterOption, Tabs, Tag, TagInput, type TagPaletteColor, type TagVariant, TextOverflow, type TextOverflowProps, Textarea, TimeBar, type TimeBarProps, TimePicker, TimeRow, type TimeRowProps, type TimeScale, TimeScaleHeader, type TimeScaleHeaderProps, type TimeScaleOptions, type TimeTick, TimeViewport, type TimeViewportHandle, type TimeViewportLayout, type TimeViewportProps, type TimeViewportState, type TimeZoom, Timeline, Toast, type ToastAction, type ToastApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastVariant, Toggle, Tooltip, Tour, TransferList, TreeView, type Trend, type UseTextOverflowOptions, type UseTextOverflowResult, dateOfDay, dayOf, endDayOf, fitLabel, fitLabels, formatDateRange, preferenceActionKey, timeExtent, useAppShell, useContentWidth, useDestructiveAction, useFittedLabels, useFormContext, useGridKeyboard, usePagination, usePreferences, useSidebar, useTextMeasure, useTextOverflow, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional, useUnsavedChanges };
|