gridsmith-ui 0.17.3 → 0.19.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/README.md +19 -13
- 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-5PDTHKW3.js} +17 -9
- package/dist/chunk-5PDTHKW3.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-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.js +3 -3
- package/dist/editor.js.map +1 -1
- package/dist/index.d.ts +155 -55
- package/dist/index.js +576 -207
- 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 +2 -2
- 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,73 @@ 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
|
+
interface FieldProps {
|
|
110
|
+
label: ReactNode;
|
|
111
|
+
/** The single form control. Receives id, aria-describedby, aria-invalid/error and required automatically. */
|
|
112
|
+
children: ReactElement | ((props: FieldControlProps) => ReactNode);
|
|
113
|
+
/** Persistent help text (format requirements, why a field is disabled). Shown below the control, above any error. */
|
|
114
|
+
hint?: ReactNode;
|
|
115
|
+
/** Current validation error. Rendered as InlineFieldError (role="alert") and linked via aria-describedby. Wins over `validate`. */
|
|
116
|
+
error?: string | null | false;
|
|
117
|
+
/**
|
|
118
|
+
* The field's check: the message for what is wrong with its value, or nothing (`validate={(v) => v ? undefined :
|
|
119
|
+
* "Enter a title"}`). It gets the control's `value` (or `checked`); a closure over your own state works as well.
|
|
120
|
+
* Inside a FormWrapper it runs at the project's validation timing (forms.validationTiming, through the form):
|
|
121
|
+
* - `onBlur`: when the field is left;
|
|
122
|
+
* - `onChange`: as the value changes, once the field has been left;
|
|
123
|
+
* - `onSubmit`: on submit only.
|
|
124
|
+
*
|
|
125
|
+
* Whatever the timing, it runs on every submit, and FormWrapper's `onSubmit` gets its message under this Field's
|
|
126
|
+
* `id`. A message that shows is checked again as the value changes, so it goes as soon as the value is right. Focus
|
|
127
|
+
* moving into the control's own popup (a Dropdown's list, a DatePicker's calendar) is not leaving the field. Outside
|
|
128
|
+
* a FormWrapper it runs when the field is left (round 26, R26-2).
|
|
129
|
+
*/
|
|
130
|
+
validate?: (value: unknown) => string | undefined | null | false;
|
|
131
|
+
required?: boolean;
|
|
132
|
+
/** Slot to the right of the label, e.g. a "Forgot password?" Link. */
|
|
133
|
+
labelAction?: ReactNode;
|
|
134
|
+
/** Explicit id for the control; generated when omitted. */
|
|
135
|
+
id?: string;
|
|
136
|
+
className?: string;
|
|
137
|
+
}
|
|
138
|
+
/**
|
|
139
|
+
* Label + control + hint + error, wired together. Guarantees the label is
|
|
140
|
+
* associated (htmlFor/id), that hint and error are announced
|
|
141
|
+
* (aria-describedby), that the control is marked invalid, and that the error
|
|
142
|
+
* sits directly below the field (forms-002/006/009/010). Use one Field per
|
|
143
|
+
* control; do not add a separate <Label> or a label prop on the child.
|
|
144
|
+
*
|
|
145
|
+
* In a SettingsLayout panel a Field keeps the narrow page's reading width however wide the page is (the panel's
|
|
146
|
+
* --ds-form-max, Sprint 25.9); a `max-w-*` class of your own wins.
|
|
147
|
+
*/
|
|
148
|
+
declare function Field({ label, children, hint, error, required, labelAction, id: idProp, validate, className }: FieldProps): react_jsx_runtime.JSX.Element;
|
|
149
|
+
|
|
88
150
|
interface Option {
|
|
89
151
|
id: string;
|
|
90
152
|
label: string;
|
|
91
153
|
group?: string;
|
|
92
154
|
}
|
|
93
155
|
type DropdownSize = "sm" | "md" | "lg";
|
|
94
|
-
interface DropdownProps {
|
|
156
|
+
interface DropdownProps extends FieldControlWiring {
|
|
95
157
|
options: Option[];
|
|
96
158
|
value: string | string[];
|
|
97
159
|
onChange: (value: string | string[]) => void;
|
|
@@ -110,14 +172,14 @@ interface DropdownProps {
|
|
|
110
172
|
/** Accessible name for the trigger, for when there is no visible `label` (e.g. in a toolbar). */
|
|
111
173
|
"aria-label"?: string;
|
|
112
174
|
}
|
|
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;
|
|
175
|
+
declare function Dropdown({ options, value, onChange, label, disabled, placeholder, multiple, searchable, size: sizeProp, className, ref, container, error, showChips, "aria-label": ariaLabel, ...wiring }: DropdownProps): react_jsx_runtime.JSX.Element;
|
|
114
176
|
|
|
115
177
|
interface ComboboxOption {
|
|
116
178
|
value: string;
|
|
117
179
|
label: string;
|
|
118
180
|
disabled?: boolean;
|
|
119
181
|
}
|
|
120
|
-
interface ComboboxProps {
|
|
182
|
+
interface ComboboxProps extends FieldControlWiring {
|
|
121
183
|
value: string;
|
|
122
184
|
onChange: (value: string) => void;
|
|
123
185
|
options: ComboboxOption[];
|
|
@@ -130,7 +192,7 @@ interface ComboboxProps {
|
|
|
130
192
|
error?: boolean;
|
|
131
193
|
size?: ControlSize;
|
|
132
194
|
}
|
|
133
|
-
declare function Combobox({ value, onChange, options, placeholder, disabled, loading, className, ref, container, error, size: sizeProp }: ComboboxProps): react_jsx_runtime.JSX.Element;
|
|
195
|
+
declare function Combobox({ value, onChange, options, placeholder, disabled, loading, className, ref, container, error, size: sizeProp, ...wiring }: ComboboxProps): react_jsx_runtime.JSX.Element;
|
|
134
196
|
|
|
135
197
|
type CheckboxSize = "sm" | "md";
|
|
136
198
|
interface CheckboxProps {
|
|
@@ -177,7 +239,7 @@ interface RadioGroupProps {
|
|
|
177
239
|
}
|
|
178
240
|
declare function RadioGroup({ value, onChange, options, orientation, className, label }: RadioGroupProps): react_jsx_runtime.JSX.Element;
|
|
179
241
|
|
|
180
|
-
interface DatePickerProps {
|
|
242
|
+
interface DatePickerProps extends Omit<FieldControlWiring, "id"> {
|
|
181
243
|
value: Date | null;
|
|
182
244
|
onChange: (date: Date | null) => void;
|
|
183
245
|
placeholder?: string;
|
|
@@ -204,7 +266,7 @@ interface DatePickerProps {
|
|
|
204
266
|
end?: Date | null;
|
|
205
267
|
};
|
|
206
268
|
}
|
|
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;
|
|
269
|
+
declare function DatePicker({ value, onChange, placeholder, disabled, className, ref, container, error, label, id, size: sizeProp, min, max, range, ...wiring }: DatePickerProps): react_jsx_runtime.JSX.Element;
|
|
208
270
|
|
|
209
271
|
interface DateRange {
|
|
210
272
|
start: Date | null;
|
|
@@ -215,7 +277,7 @@ interface DateRangePreset {
|
|
|
215
277
|
/** Returns the range to apply; evaluated when clicked so "Last 7 days" is always relative to now. */
|
|
216
278
|
range: () => DateRange;
|
|
217
279
|
}
|
|
218
|
-
interface DateRangePickerProps {
|
|
280
|
+
interface DateRangePickerProps extends Omit<FieldControlWiring, "id"> {
|
|
219
281
|
value: DateRange;
|
|
220
282
|
onChange: (range: DateRange) => void;
|
|
221
283
|
placeholder?: string;
|
|
@@ -243,7 +305,7 @@ declare const DEFAULT_DATE_RANGE_PRESETS: DateRangePreset[];
|
|
|
243
305
|
* the end (clicking before the start restarts the selection). Closes on
|
|
244
306
|
* Escape or outside click. Pair with <Field> for label/hint/error wiring.
|
|
245
307
|
*/
|
|
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;
|
|
308
|
+
declare function DateRangePicker({ value, onChange, placeholder, disabled, error, label, id, className, ref, container, min, max, presets, weekStartsOn, size: sizeProp, ...wiring }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
|
|
247
309
|
|
|
248
310
|
interface FileUploadProps {
|
|
249
311
|
onFiles: (files: File[]) => void;
|
|
@@ -302,7 +364,7 @@ interface SliderRangeProps {
|
|
|
302
364
|
}
|
|
303
365
|
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;
|
|
304
366
|
|
|
305
|
-
interface TimePickerProps {
|
|
367
|
+
interface TimePickerProps extends Omit<FieldControlWiring, "id"> {
|
|
306
368
|
value: string;
|
|
307
369
|
onChange: (time: string) => void;
|
|
308
370
|
use24Hour?: boolean;
|
|
@@ -316,7 +378,7 @@ interface TimePickerProps {
|
|
|
316
378
|
id?: string;
|
|
317
379
|
size?: ControlSize;
|
|
318
380
|
}
|
|
319
|
-
declare function TimePicker({ value, onChange, use24Hour, minuteStep, disabled, className, ref, container, error, id, size: sizeProp, }: TimePickerProps): react_jsx_runtime.JSX.Element;
|
|
381
|
+
declare function TimePicker({ value, onChange, use24Hour, minuteStep, disabled, className, ref, container, error, id, size: sizeProp, ...wiring }: TimePickerProps): react_jsx_runtime.JSX.Element;
|
|
320
382
|
|
|
321
383
|
interface NumberInputProps {
|
|
322
384
|
value: number;
|
|
@@ -397,54 +459,28 @@ interface InlineFieldErrorProps {
|
|
|
397
459
|
}
|
|
398
460
|
declare function InlineFieldError({ message, id, className }: InlineFieldErrorProps): react_jsx_runtime.JSX.Element;
|
|
399
461
|
|
|
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
|
-
|
|
462
|
+
/** When a form's fields check themselves: the project's forms.validationTiming, through FormWrapper. */
|
|
436
463
|
type ValidationMode = "onBlur" | "onSubmit" | "onChange";
|
|
437
464
|
interface FormErrors {
|
|
438
465
|
[field: string]: string | undefined;
|
|
439
466
|
}
|
|
467
|
+
/** A field's check: the message for what is wrong with its value now, or nothing. */
|
|
468
|
+
type FieldCheck = () => string | undefined;
|
|
440
469
|
interface FormContextValue {
|
|
441
470
|
errors: FormErrors;
|
|
442
471
|
setError: (field: string, message: string | undefined) => void;
|
|
443
472
|
clearErrors: () => void;
|
|
444
473
|
validationMode: ValidationMode;
|
|
445
474
|
submitted: boolean;
|
|
475
|
+
/**
|
|
476
|
+
* A Field given `validate` registers its check under its id, and the form runs every check on each submit (round 26,
|
|
477
|
+
* R26-2: the forms of both runs checked their fields only on submit, although the project said on blur). Returns
|
|
478
|
+
* the unregister.
|
|
479
|
+
*/
|
|
480
|
+
register: (field: string, check: FieldCheck) => () => void;
|
|
446
481
|
}
|
|
447
482
|
declare function useFormContext(): FormContextValue;
|
|
483
|
+
|
|
448
484
|
/** An invalid field as the form finds it in its own DOM after a submit. */
|
|
449
485
|
interface FormFieldError {
|
|
450
486
|
id: string;
|
|
@@ -452,6 +488,11 @@ interface FormFieldError {
|
|
|
452
488
|
message: string;
|
|
453
489
|
}
|
|
454
490
|
interface FormWrapperProps {
|
|
491
|
+
/**
|
|
492
|
+
* Called on each submit with the fields' errors, by Field id: the message of every Field whose `validate` finds its
|
|
493
|
+
* value wrong, undefined for the rest. Save only when there are none. Checks of your own that set a Field's `error`
|
|
494
|
+
* still work, and the form reads them from the page as before.
|
|
495
|
+
*/
|
|
455
496
|
onSubmit: (errors: FormErrors) => void;
|
|
456
497
|
validationMode?: ValidationMode;
|
|
457
498
|
children: ReactNode;
|
|
@@ -470,11 +511,14 @@ interface FormWrapperProps {
|
|
|
470
511
|
onCancel?: () => void;
|
|
471
512
|
/** The Cancel button's label (default "Cancel"). */
|
|
472
513
|
cancelLabel?: string;
|
|
473
|
-
/**
|
|
514
|
+
/**
|
|
515
|
+
* After a failed submit, move focus to what needs fixing (default on): the error summary when it shows (GOV.UK's
|
|
516
|
+
* error summary takes focus), else the first invalid field — a group's chosen or first option.
|
|
517
|
+
*/
|
|
474
518
|
focusFirstError?: boolean;
|
|
475
519
|
/**
|
|
476
520
|
* 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.
|
|
521
|
+
* It answers a submit, so it never shows before the first one. A function renders your own from the list.
|
|
478
522
|
*/
|
|
479
523
|
errorSummary?: boolean | ((errors: FormFieldError[]) => ReactNode);
|
|
480
524
|
/**
|
|
@@ -585,6 +629,45 @@ interface DataListProps {
|
|
|
585
629
|
}
|
|
586
630
|
declare function DataList({ items, columns, className }: DataListProps): react_jsx_runtime.JSX.Element;
|
|
587
631
|
|
|
632
|
+
interface CardGridProps extends HTMLAttributes<HTMLDivElement> {
|
|
633
|
+
/** The narrowest a card may be, as a CSS length. The grid takes as many columns as fit at it. Default "14rem". */
|
|
634
|
+
minWidth?: string;
|
|
635
|
+
/** The most cards in a row, however wide the grid is. Default 4. A comparison (`compare`) takes all its cards instead. */
|
|
636
|
+
maxColumns?: number;
|
|
637
|
+
/**
|
|
638
|
+
* The cards are read against each other (plans, tiers, options): all of them in one row when each gets `minWidth`, or
|
|
639
|
+
* one per row, never a partial row, and their header, content and footer line up across the row (round 27, the owner:
|
|
640
|
+
* "when cards are needed for comparison then two plus one or any other combo just won't work"). A collection (files,
|
|
641
|
+
* projects) leaves it off and flows: fewer per row as the room shrinks. The cards must be the grid's direct children
|
|
642
|
+
* in the page (a fragment or a component that returns them is fine; a wrapper element around one is not lined up).
|
|
643
|
+
*/
|
|
644
|
+
compare?: boolean;
|
|
645
|
+
/**
|
|
646
|
+
* The space between the cards, as a CSS length. Default the theme's space-4. The columns are worked out from it, so
|
|
647
|
+
* the gap is this prop, never a `gap-*` class (which would leave the columns measured for another gap).
|
|
648
|
+
*/
|
|
649
|
+
gap?: string;
|
|
650
|
+
children: ReactNode;
|
|
651
|
+
ref?: Ref<HTMLDivElement>;
|
|
652
|
+
}
|
|
653
|
+
/**
|
|
654
|
+
* A grid of cards that takes as many columns as fit at the card's minimum width, up to `maxColumns` (round 27, R27-13,
|
|
655
|
+
* the owner: "the cards should always just respond nicely anyway and have a min width applied"). It reads the width it
|
|
656
|
+
* 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
|
|
657
|
+
* card never gets narrower than its minimum: with less room there are fewer per row. Run 70's builder set four columns
|
|
658
|
+
* at a container breakpoint and its file cards got 130 px each.
|
|
659
|
+
*
|
|
660
|
+
* A collection's template is DescriptionList's: each column is at least `minWidth` (or the whole row, when the row is
|
|
661
|
+
* narrower) and at least a `maxColumns`-th of the row, so a wide row never holds more than `maxColumns`.
|
|
662
|
+
*
|
|
663
|
+
* A comparison's (`compare`): n columns (every card the grid draws) each an nth of the row while n minimums and their
|
|
664
|
+
* gaps fit, and the whole row below that. The column minimum switches at exactly that width, with no breakpoint:
|
|
665
|
+
* `(n × minWidth + gaps − 100%) × 999` is below zero while they fit, and far above the row once they do not. The cards
|
|
666
|
+
* share three rows (header, content, footer), so their parts line up; a child that is not a Card fills its three rows
|
|
667
|
+
* without lining anything up.
|
|
668
|
+
*/
|
|
669
|
+
declare function CardGrid({ minWidth, maxColumns, compare, gap, className, style, children, ref, ...props }: CardGridProps): react_jsx_runtime.JSX.Element;
|
|
670
|
+
|
|
588
671
|
interface DescriptionItem {
|
|
589
672
|
label: string;
|
|
590
673
|
value: ReactNode;
|
|
@@ -682,16 +765,23 @@ interface TableProps {
|
|
|
682
765
|
* The table's title inside its frame (Sprint 25.9, A1): a heading in CardTitle's style at CardHeader's inset, in a band
|
|
683
766
|
* above the scroll area that never scrolls sideways, and the `<table>`'s name. Title a table this way or with a
|
|
684
767
|
* SectionHeading above it — the same way as the blocks beside it (page_composition#45). In card mode, and while it
|
|
685
|
-
* loads or is empty there, the same heading sits above the cards. Without a title the
|
|
768
|
+
* loads or is empty there, the same heading sits above the cards. Without a title the frame holds the scroll area
|
|
769
|
+
* alone.
|
|
686
770
|
*/
|
|
687
771
|
title?: string;
|
|
688
772
|
/** A line under the title, which also describes the `<table>` (aria-describedby). Needs `title`. */
|
|
689
773
|
description?: string;
|
|
690
774
|
/** The table's buttons, at the end of the title band as in a CardHeader. Needs `title`. */
|
|
691
775
|
actions?: ReactNode;
|
|
776
|
+
/**
|
|
777
|
+
* The table's name for assistive tech when it has no title (a title names a titled one): the `<table>`'s label, and
|
|
778
|
+
* its scroll region's while it scrolls, which is otherwise "Table". Two untitled tables on one page need a name each,
|
|
779
|
+
* or their regions share one (Sprint 25.10 review).
|
|
780
|
+
*/
|
|
781
|
+
"aria-label"?: string;
|
|
692
782
|
ref?: Ref<HTMLDivElement>;
|
|
693
783
|
}
|
|
694
|
-
declare function Table({ columns, data, className, sortable, sortKey: controlledSortKey, sortDir: controlledSortDir, onSortChange, selectable, selectedRows, onSelectionChange, expandable, renderExpanded, density, stickyHeader, striped, loading, emptyState, onRowClick, mobileBreakpoint: mobileBreakpointProp, title, description, actions, ref, }: TableProps): react_jsx_runtime.JSX.Element;
|
|
784
|
+
declare function Table({ columns, data, className, sortable, sortKey: controlledSortKey, sortDir: controlledSortDir, onSortChange, selectable, selectedRows, onSelectionChange, expandable, renderExpanded, density, stickyHeader, striped, loading, emptyState, onRowClick, mobileBreakpoint: mobileBreakpointProp, title, description, actions, "aria-label": ariaLabel, ref, }: TableProps): react_jsx_runtime.JSX.Element;
|
|
695
785
|
|
|
696
786
|
interface CalendarEvent {
|
|
697
787
|
id: string;
|
|
@@ -942,7 +1032,14 @@ declare function TableToolbar({ search, primaryFilter, filters, filtersOpen, onF
|
|
|
942
1032
|
interface TimelineItem {
|
|
943
1033
|
title: string;
|
|
944
1034
|
description?: string;
|
|
1035
|
+
/** What the item shows for its time: "2 hours ago", "Mon 14:05". */
|
|
945
1036
|
timestamp?: string;
|
|
1037
|
+
/**
|
|
1038
|
+
* The item's exact time (an ISO string or a Date). The timestamp is then a <time> element, with the exact date and
|
|
1039
|
+
* time on hover, so a relative time can always be read as a date (round 27, R27-5: run 69's activity feed showed
|
|
1040
|
+
* "2 hours ago" with no way to the date). Without a timestamp, the exact date is shown.
|
|
1041
|
+
*/
|
|
1042
|
+
dateTime?: string | Date;
|
|
946
1043
|
/** Takes the dot's place — the actor's Avatar (size="sm") on an activity feed, or an Icon. `variant` colours the dot only. */
|
|
947
1044
|
icon?: ReactNode;
|
|
948
1045
|
variant?: "default" | "success" | "warning" | "error";
|
|
@@ -2135,7 +2232,7 @@ interface SegmentedControlOption {
|
|
|
2135
2232
|
disabled?: boolean;
|
|
2136
2233
|
}
|
|
2137
2234
|
type SegmentedControlSize = "xs" | "sm" | "md" | "lg";
|
|
2138
|
-
interface SegmentedControlProps {
|
|
2235
|
+
interface SegmentedControlProps extends FieldControlWiring {
|
|
2139
2236
|
value: string;
|
|
2140
2237
|
onChange: (value: string) => void;
|
|
2141
2238
|
options: SegmentedControlOption[];
|
|
@@ -2150,7 +2247,10 @@ interface SegmentedControlProps {
|
|
|
2150
2247
|
*/
|
|
2151
2248
|
onHoverChange?: (value: string | null) => void;
|
|
2152
2249
|
className?: string;
|
|
2153
|
-
/**
|
|
2250
|
+
/**
|
|
2251
|
+
* Accessible name for the radiogroup, for when there is no visible label (e.g. in a toolbar). A control with a visible
|
|
2252
|
+
* label sits in a Field instead, which names it and stacks the label above: `<Field label="Status"><SegmentedControl …/></Field>`.
|
|
2253
|
+
*/
|
|
2154
2254
|
"aria-label"?: string;
|
|
2155
2255
|
/**
|
|
2156
2256
|
* Above this many options the control renders a Dropdown with the same value, onChange and options — a row of
|
|
@@ -2160,7 +2260,7 @@ interface SegmentedControlProps {
|
|
|
2160
2260
|
*/
|
|
2161
2261
|
maxOptions?: number;
|
|
2162
2262
|
}
|
|
2163
|
-
declare function SegmentedControl({ value, onChange, options, size: sizeProp, variant, fullWidth, onHoverChange, className, "aria-label": ariaLabel, maxOptions, }: SegmentedControlProps): react_jsx_runtime.JSX.Element;
|
|
2263
|
+
declare function SegmentedControl({ value, onChange, options, size: sizeProp, variant, fullWidth, onHoverChange, className, "aria-label": ariaLabel, maxOptions, ...wiring }: SegmentedControlProps): react_jsx_runtime.JSX.Element;
|
|
2164
2264
|
|
|
2165
2265
|
interface BottomNavItem {
|
|
2166
2266
|
label: string;
|
|
@@ -3175,4 +3275,4 @@ interface UseTextOverflowResult {
|
|
|
3175
3275
|
*/
|
|
3176
3276
|
declare function useTextOverflow(options?: UseTextOverflowOptions): UseTextOverflowResult;
|
|
3177
3277
|
|
|
3178
|
-
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 };
|
|
3278
|
+
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, 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 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 };
|