@med-o/ui 0.1.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +366 -150
- package/dist/index.js +1342 -944
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -0
- package/package.json +6 -7
- package/src/avatar/avatar.css +1 -1
- package/src/badge/badge.css +1 -1
- package/src/bottom-sheet/bottom-sheet.css +1 -1
- package/src/breadcrumbs/breadcrumbs.css +2 -2
- package/src/button/button.css +2 -2
- package/src/card/card.css +1 -1
- package/src/checkbox/choice.css +1 -1
- package/src/combobox/combobox.css +1 -1
- package/src/dialog/dialog.css +1 -1
- package/src/list/list.css +2 -2
- package/src/list-view/list-view.css +1 -1
- package/src/listbox/listbox.css +1 -1
- package/src/menu/menu.css +1 -1
- package/src/navigation/navigation.css +0 -1
- package/src/popover/popover.css +1 -1
- package/src/select/select.css +1 -1
- package/src/styles.css +48 -40
- package/src/switch/switch.css +1 -1
- package/src/table/table.css +11 -1
- package/src/tabs/tabs.css +1 -1
- package/src/tag/tag.css +1 -1
- package/src/text-field/input.css +1 -1
- package/src/toast/toast.css +1 -1
- package/src/toggle-button/toggle-button.css +1 -1
- package/src/tooltip/tooltip.css +1 -1
- package/src/upload/upload.css +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -23,7 +23,7 @@ interface ButtonProps extends Omit<ButtonProps$1, 'children' | 'className' | 'st
|
|
|
23
23
|
* Button – triggers an action. Built on React Aria: consistent press,
|
|
24
24
|
* hover and focus behaviour on mouse, touch, keyboard and screen readers.
|
|
25
25
|
* Use onPress instead of onClick and isDisabled instead of disabled.
|
|
26
|
-
* While saving, set isPending and change the label (
|
|
26
|
+
* While saving, set isPending and change the label (“Saving…”): the button keeps its look and size.
|
|
27
27
|
*/
|
|
28
28
|
declare function Button({ variant, size, startIcon, endIcon, className, children, ...props }: ButtonProps): react.JSX.Element;
|
|
29
29
|
interface ButtonGroupProps {
|
|
@@ -41,7 +41,7 @@ interface ButtonGroupProps {
|
|
|
41
41
|
declare function ButtonGroup({ context, children, destructive, className, ...props }: ButtonGroupProps): react.JSX.Element;
|
|
42
42
|
|
|
43
43
|
interface IconButtonProps extends Omit<ButtonProps$1, 'children' | 'className' | 'style'> {
|
|
44
|
-
/** Required: describes the action (
|
|
44
|
+
/** Required: describes the action (“Delete file”), because there is no visible label. */
|
|
45
45
|
'aria-label': string;
|
|
46
46
|
icon: ReactNode;
|
|
47
47
|
/**
|
|
@@ -57,9 +57,9 @@ interface IconButtonProps extends Omit<ButtonProps$1, 'children' | 'className' |
|
|
|
57
57
|
* Pass false to turn it off (e.g. when a visible label is next to the button).
|
|
58
58
|
*/
|
|
59
59
|
tooltip?: ReactNode | false;
|
|
60
|
-
/** Keyboard shortcut in aria-keyshortcuts syntax (e.g.
|
|
60
|
+
/** Keyboard shortcut in aria-keyshortcuts syntax (e.g. “Control+C”). Exposed to screen readers and shown in the tooltip. */
|
|
61
61
|
shortcut?: string;
|
|
62
|
-
/** Visible form of the shortcut. Default:
|
|
62
|
+
/** Visible form of the shortcut. Default: “Control+C” → “Ctrl C”, “Meta+C” → “⌘ C”. */
|
|
63
63
|
shortcutLabel?: string;
|
|
64
64
|
className?: string;
|
|
65
65
|
style?: CSSProperties;
|
|
@@ -69,8 +69,11 @@ declare function IconButton({ icon, variant, size, tooltip, shortcut, shortcutLa
|
|
|
69
69
|
|
|
70
70
|
type InputSize = 'sm' | 'md' | 'lg';
|
|
71
71
|
interface TextFieldProps extends Omit<TextFieldProps$1, 'children' | 'className' | 'style'> {
|
|
72
|
-
/**
|
|
73
|
-
|
|
72
|
+
/**
|
|
73
|
+
* Visible label. Always set one – a placeholder is no label. Without it set `aria-label` – only where the
|
|
74
|
+
* context names the field (a table row, a filter bar), like Select and NumberField.
|
|
75
|
+
*/
|
|
76
|
+
label?: ReactNode;
|
|
74
77
|
/** Helper text below the field. Replaced by the error message when invalid. */
|
|
75
78
|
description?: ReactNode;
|
|
76
79
|
/** Error text shown when the field is invalid (isInvalid or failed validation). */
|
|
@@ -148,7 +151,7 @@ interface RadioGroupProps extends Omit<RadioGroupProps$1, 'children' | 'classNam
|
|
|
148
151
|
declare function RadioGroup({ label, description, errorMessage, size, children, className, ...props }: RadioGroupProps): react.JSX.Element;
|
|
149
152
|
|
|
150
153
|
interface SwitchProps extends Omit<SwitchFieldProps, 'children' | 'className' | 'style'> {
|
|
151
|
-
/** Label. Describes the setting, never the state (
|
|
154
|
+
/** Label. Describes the setting, never the state (“Notifications”, not “On”). */
|
|
152
155
|
children: ReactNode;
|
|
153
156
|
description?: ReactNode;
|
|
154
157
|
/** md (36 × 20) · lg (44 × 24, mobile). */
|
|
@@ -177,7 +180,7 @@ declare function FieldFooter({ description, errorMessage, children, }: {
|
|
|
177
180
|
|
|
178
181
|
type BadgeTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
|
|
179
182
|
interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
180
|
-
/** Meaning: success, warning, danger, info. Brand for
|
|
183
|
+
/** Meaning: success, warning, danger, info. Brand for “New”, neutral for everything else. */
|
|
181
184
|
tone?: BadgeTone;
|
|
182
185
|
/** sm 20 px · md 24 px. */
|
|
183
186
|
size?: 'sm' | 'md';
|
|
@@ -195,14 +198,14 @@ interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
|
195
198
|
declare function Badge({ tone, size, dot, icon, className, children, ...props }: BadgeProps): react.JSX.Element;
|
|
196
199
|
interface BadgeCountProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
|
|
197
200
|
count: number;
|
|
198
|
-
/** Above this number the badge shows
|
|
201
|
+
/** Above this number the badge shows “99+”. */
|
|
199
202
|
max?: number;
|
|
200
203
|
tone?: 'danger' | 'brand' | 'neutral';
|
|
201
204
|
/** sm 16 px · md 20 px. */
|
|
202
205
|
size?: 'sm' | 'md';
|
|
203
206
|
/**
|
|
204
|
-
* Text for screen readers, e.g.
|
|
205
|
-
* Without it the number is hidden: then the parent names it (
|
|
207
|
+
* Text for screen readers, e.g. “3 unread messages”.
|
|
208
|
+
* Without it the number is hidden: then the parent names it (“Notifications, 3 unread”).
|
|
206
209
|
*/
|
|
207
210
|
label?: string;
|
|
208
211
|
}
|
|
@@ -210,7 +213,7 @@ interface BadgeCountProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'childre
|
|
|
210
213
|
declare function BadgeCount({ count, max, tone, size, label, className, ...props }: BadgeCountProps): react.JSX.Element | null;
|
|
211
214
|
interface BadgeDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
|
|
212
215
|
tone?: BadgeTone;
|
|
213
|
-
/** Text for screen readers (
|
|
216
|
+
/** Text for screen readers (“Unread”, “Online”). Without it the dot is decorative. */
|
|
214
217
|
label?: string;
|
|
215
218
|
}
|
|
216
219
|
/** Dot for unread or presence. Always pair it with text or a label. */
|
|
@@ -229,7 +232,7 @@ interface TagGroupProps<T> extends Omit<TagGroupProps$1, 'children' | 'className
|
|
|
229
232
|
items?: Iterable<T>;
|
|
230
233
|
/** Shown when there are no tags. */
|
|
231
234
|
renderEmptyState?: () => ReactNode;
|
|
232
|
-
/** Text announced after a removal. Default:
|
|
235
|
+
/** Text announced after a removal. Default: “{label} removed”. */
|
|
233
236
|
removedMessage?: (labels: string[]) => string;
|
|
234
237
|
className?: string;
|
|
235
238
|
}
|
|
@@ -241,7 +244,7 @@ interface TagGroupProps<T> extends Omit<TagGroupProps$1, 'children' | 'className
|
|
|
241
244
|
* - removable values: pass `onRemove`
|
|
242
245
|
* - filters: pass `selectionMode="multiple"` (or "single"). Click again to deselect.
|
|
243
246
|
*/
|
|
244
|
-
declare function TagGroup<T extends object>({ label, description, size, children, items, renderEmptyState, onRemove, removedMessage, className, ...props }: TagGroupProps<T>): react.JSX.Element;
|
|
247
|
+
declare function TagGroup<T extends object>({ label, description, size, children, items, renderEmptyState, onRemove, removedMessage: removedMessageProp, className, ...props }: TagGroupProps<T>): react.JSX.Element;
|
|
245
248
|
interface TagProps extends Omit<TagProps$1, 'children' | 'className'> {
|
|
246
249
|
/** Short label; long text is truncated at 200 px. */
|
|
247
250
|
children: ReactNode;
|
|
@@ -267,7 +270,7 @@ interface AvatarProps {
|
|
|
267
270
|
shape?: 'circle' | 'square';
|
|
268
271
|
/** Stable id (user id) for the initials colour, so it survives name changes. */
|
|
269
272
|
colorKey?: string;
|
|
270
|
-
/** Presence dot. Also added to the accessible name (
|
|
273
|
+
/** Presence dot. Also added to the accessible name (“Lea M., online”). */
|
|
271
274
|
status?: AvatarStatus;
|
|
272
275
|
/** Words for the status in the accessible name. */
|
|
273
276
|
statusLabels?: Partial<Record<AvatarStatus, string>>;
|
|
@@ -283,20 +286,20 @@ declare function Avatar({ name, src, size, shape, colorKey, status, statusLabels
|
|
|
283
286
|
interface AvatarGroupProps {
|
|
284
287
|
/** Avatars, most relevant first (owner, you). */
|
|
285
288
|
children: ReactNode;
|
|
286
|
-
/** Visible avatars before
|
|
289
|
+
/** Visible avatars before “+N”. */
|
|
287
290
|
max?: number;
|
|
288
291
|
/** xs · sm · md · lg. */
|
|
289
292
|
size?: Exclude<AvatarSize, 'xl' | '2xl'>;
|
|
290
|
-
/** Name of the group, e.g.
|
|
293
|
+
/** Name of the group, e.g. “Assignees”. */
|
|
291
294
|
'aria-label': string;
|
|
292
|
-
/** Opens the full list (e.g. a popover). Without it
|
|
295
|
+
/** Opens the full list (e.g. a popover). Without it “+N” is plain text. */
|
|
293
296
|
onMorePress?: () => void;
|
|
294
|
-
/** Accessible name of
|
|
297
|
+
/** Accessible name of “+N”. Default: “N more”. */
|
|
295
298
|
moreLabel?: (count: number) => string;
|
|
296
299
|
className?: string;
|
|
297
300
|
}
|
|
298
|
-
/** Overlapping avatars, max 4 +
|
|
299
|
-
declare function AvatarGroup({ children, max, size, onMorePress, moreLabel, className, ...props }: AvatarGroupProps): react.JSX.Element;
|
|
301
|
+
/** Overlapping avatars, max 4 + “+N”. */
|
|
302
|
+
declare function AvatarGroup({ children, max, size, onMorePress, moreLabel: moreLabelProp, className, ...props }: AvatarGroupProps): react.JSX.Element;
|
|
300
303
|
|
|
301
304
|
/**
|
|
302
305
|
* Wraps a focusable trigger (e.g. Button, IconButton) and its Tooltip.
|
|
@@ -307,7 +310,7 @@ declare function TooltipTrigger({ delay, closeDelay, ...props }: TooltipTriggerC
|
|
|
307
310
|
interface TooltipProps extends Omit<TooltipProps$1, 'children' | 'className'> {
|
|
308
311
|
/** A few words, at most one sentence. No links or buttons. */
|
|
309
312
|
children: ReactNode;
|
|
310
|
-
/** Keyboard shortcut, shown dimmed after the text (e.g.
|
|
313
|
+
/** Keyboard shortcut, shown dimmed after the text (e.g. “⌘C”). */
|
|
311
314
|
shortcut?: string;
|
|
312
315
|
className?: string;
|
|
313
316
|
}
|
|
@@ -321,7 +324,7 @@ interface SpinnerProps {
|
|
|
321
324
|
tone?: 'current' | 'brand' | 'neutral' | 'on-brand';
|
|
322
325
|
/** Name for screen readers. */
|
|
323
326
|
'aria-label'?: string;
|
|
324
|
-
/** Inside a control that already says what happens (
|
|
327
|
+
/** Inside a control that already says what happens (“Saving…”): hide the spinner from screen readers. */
|
|
325
328
|
decorative?: boolean;
|
|
326
329
|
className?: string;
|
|
327
330
|
style?: CSSProperties;
|
|
@@ -329,7 +332,7 @@ interface SpinnerProps {
|
|
|
329
332
|
/** Spinner – short wait of unknown length. */
|
|
330
333
|
declare function Spinner({ size, tone, decorative, className, style, ...props }: SpinnerProps): react.JSX.Element;
|
|
331
334
|
interface ProgressBarProps extends Omit<ProgressBarProps$1, 'children' | 'className' | 'style'> {
|
|
332
|
-
/** Visible label (
|
|
335
|
+
/** Visible label (“Uploading 3 files”). Without it, set aria-label. */
|
|
333
336
|
label?: ReactNode;
|
|
334
337
|
/** Helper below the bar: files, time left, or what to do after an error. */
|
|
335
338
|
description?: ReactNode;
|
|
@@ -337,14 +340,14 @@ interface ProgressBarProps extends Omit<ProgressBarProps$1, 'children' | 'classN
|
|
|
337
340
|
size?: 'sm' | 'md';
|
|
338
341
|
/** success when done, error when it failed. Announced politely. */
|
|
339
342
|
status?: 'default' | 'success' | 'error';
|
|
340
|
-
/** Show the value (
|
|
343
|
+
/** Show the value (“64 %”) next to the label. Hidden when indeterminate. */
|
|
341
344
|
showValue?: boolean;
|
|
342
345
|
className?: string;
|
|
343
346
|
style?: CSSProperties;
|
|
344
347
|
}
|
|
345
348
|
/**
|
|
346
349
|
* Progress bar – measurable or long work. Built on React Aria ProgressBar:
|
|
347
|
-
* role progressbar with value and value text. Use `valueLabel` for words (
|
|
350
|
+
* role progressbar with value and value text. Use `valueLabel` for words (“64 %, 2 of 3 files”).
|
|
348
351
|
*/
|
|
349
352
|
declare function ProgressBar({ label, description, size, status, showValue, className, style, ...props }: ProgressBarProps): react.JSX.Element;
|
|
350
353
|
interface SkeletonProps {
|
|
@@ -365,7 +368,7 @@ declare function Skeleton({ shape, lines, width, height, className }: SkeletonPr
|
|
|
365
368
|
|
|
366
369
|
type ToggleSize = 'sm' | 'md' | 'lg';
|
|
367
370
|
interface ToggleButtonProps extends Omit<ToggleButtonProps$1, 'children' | 'className' | 'style'> {
|
|
368
|
-
/** Visible label. It never changes with the state (
|
|
371
|
+
/** Visible label. It never changes with the state (“Bold” stays “Bold”). Leave out for icon only. */
|
|
369
372
|
children?: ReactNode;
|
|
370
373
|
/** Leading icon; alone it makes an icon-only toggle (then aria-label is required). */
|
|
371
374
|
icon?: ReactNode;
|
|
@@ -373,7 +376,7 @@ interface ToggleButtonProps extends Omit<ToggleButtonProps$1, 'children' | 'clas
|
|
|
373
376
|
size?: ToggleSize;
|
|
374
377
|
/** Icon only: tooltip text. Default: the aria-label. false turns it off. */
|
|
375
378
|
tooltip?: ReactNode | false;
|
|
376
|
-
/** Keyboard shortcut in aria-keyshortcuts syntax (e.g.
|
|
379
|
+
/** Keyboard shortcut in aria-keyshortcuts syntax (e.g. “Control+B”), shown in the tooltip. */
|
|
377
380
|
shortcut?: string;
|
|
378
381
|
className?: string;
|
|
379
382
|
style?: CSSProperties;
|
|
@@ -394,7 +397,7 @@ interface ToggleButtonGroupProps extends Omit<ToggleButtonGroupProps$1, 'childre
|
|
|
394
397
|
size?: 'md' | 'lg';
|
|
395
398
|
/** Segmented only: full width, items share the space (mobile). */
|
|
396
399
|
fullWidth?: boolean;
|
|
397
|
-
/** Required when there is no visible label: names the group (
|
|
400
|
+
/** Required when there is no visible label: names the group (“View”). */
|
|
398
401
|
'aria-label'?: string;
|
|
399
402
|
children: ReactNode;
|
|
400
403
|
className?: string;
|
|
@@ -406,7 +409,7 @@ interface ToggleButtonGroupProps extends Omit<ToggleButtonGroupProps$1, 'childre
|
|
|
406
409
|
*/
|
|
407
410
|
declare function ToggleButtonGroup({ variant, size, fullWidth, selectionMode, disallowEmptySelection, children, className, ...props }: ToggleButtonGroupProps): react.JSX.Element;
|
|
408
411
|
interface ToolbarProps extends Omit<ToolbarProps$1, 'className' | 'style'> {
|
|
409
|
-
/** Required: names the toolbar (
|
|
412
|
+
/** Required: names the toolbar (“Text formatting”). */
|
|
410
413
|
'aria-label': string;
|
|
411
414
|
className?: string;
|
|
412
415
|
style?: CSSProperties;
|
|
@@ -462,7 +465,6 @@ type SelectMode = 'single' | 'multiple';
|
|
|
462
465
|
type ValueOf<M extends SelectMode> = M extends 'multiple' ? Key[] : Key | null;
|
|
463
466
|
/** Where the options open. auto: popover on desktop; below 640 px native picker (single) or Bottom Sheet (multi). */
|
|
464
467
|
type SelectOverlay = 'auto' | 'popover' | 'sheet' | 'native';
|
|
465
|
-
|
|
466
468
|
interface SelectProps<T extends object, M extends SelectMode = 'single'> extends Omit<SelectProps$1<T, M>, 'children' | 'className' | 'style' | 'placeholder'> {
|
|
467
469
|
/** Visible label. Without it set `aria-label` – only where the context names the field (filter bars, toolbars). */
|
|
468
470
|
label?: ReactNode;
|
|
@@ -470,7 +472,7 @@ interface SelectProps<T extends object, M extends SelectMode = 'single'> extends
|
|
|
470
472
|
description?: ReactNode;
|
|
471
473
|
/** Error text shown when the field is invalid. Validate on submit or blur, not while open. */
|
|
472
474
|
errorMessage?: ReactNode;
|
|
473
|
-
/** A hint like
|
|
475
|
+
/** A hint like “Select…”. Never required information. */
|
|
474
476
|
placeholder?: string;
|
|
475
477
|
/** sm 32 · md 40 · lg 48 px. lg on mobile (opens the lg list). */
|
|
476
478
|
size?: InputSize;
|
|
@@ -493,7 +495,7 @@ interface SelectProps<T extends object, M extends SelectMode = 'single'> extends
|
|
|
493
495
|
commit?: 'live' | 'onClose';
|
|
494
496
|
/** commit="onClose": apply the selection (load results, write the URL …). */
|
|
495
497
|
onApply?: (value: ValueOf<M>) => void;
|
|
496
|
-
/** commit="onClose": label of the primary sheet button, ideally with the live result count (
|
|
498
|
+
/** commit="onClose": label of the primary sheet button, ideally with the live result count (“Show 128 results”). */
|
|
497
499
|
resultLabel?: (value: ValueOf<M>) => ReactNode;
|
|
498
500
|
className?: string;
|
|
499
501
|
}
|
|
@@ -502,7 +504,7 @@ interface SelectProps<T extends object, M extends SelectMode = 'single'> extends
|
|
|
502
504
|
* Built on React Aria Select with a hidden native select: forms, autofill and validation keep working.
|
|
503
505
|
* 2–4 options: Radio. 5–10: Select. More, or users know what to type: Combobox.
|
|
504
506
|
*/
|
|
505
|
-
declare function Select<T extends object, M extends SelectMode = 'single'>({ label, description, errorMessage, placeholder, size, leadingIcon, clearable, isReadOnly, items, children, overlay, commit, onApply, resultLabel, className, selectionMode, ...props }: SelectProps<T, M>): react.JSX.Element;
|
|
507
|
+
declare function Select<T extends object, M extends SelectMode = 'single'>({ label, description, errorMessage, placeholder: placeholderProp, size, leadingIcon, clearable, isReadOnly, items, children, overlay, commit, onApply, resultLabel: resultLabelProp, className, selectionMode, ...props }: SelectProps<T, M>): react.JSX.Element;
|
|
506
508
|
|
|
507
509
|
interface BottomSheetProps extends Omit<ModalOverlayProps, 'children' | 'className' | 'style'> {
|
|
508
510
|
/** Required: names the dialog (for a Select sheet: the field label). */
|
|
@@ -537,14 +539,14 @@ interface MenuTriggerProps extends Omit<MenuTriggerProps$1, 'children'> {
|
|
|
537
539
|
declare function MenuTrigger(props: MenuTriggerProps): react.JSX.Element;
|
|
538
540
|
/**
|
|
539
541
|
* Default trigger: ghost Icon Button with an ellipsis. The name includes the object
|
|
540
|
-
* (
|
|
542
|
+
* (“More actions for Q3-Report.pdf”); it looks pressed while the menu is open.
|
|
541
543
|
*/
|
|
542
544
|
declare function MenuButton({ 'aria-label': label, size }: {
|
|
543
545
|
'aria-label': string;
|
|
544
546
|
size?: 'sm' | 'md' | 'lg';
|
|
545
547
|
}): react.JSX.Element;
|
|
546
548
|
interface MenuProps<T> extends Omit<MenuProps$1<T>, 'className' | 'style'> {
|
|
547
|
-
/** Mobile sheet title: the object the actions apply to (
|
|
549
|
+
/** Mobile sheet title: the object the actions apply to (“Q3-Report.pdf”). */
|
|
548
550
|
title?: ReactNode;
|
|
549
551
|
/** auto: popover on desktop, Bottom Sheet below 640 px · popover · sheet. */
|
|
550
552
|
overlay?: 'auto' | 'popover' | 'sheet';
|
|
@@ -557,11 +559,11 @@ interface MenuProps<T> extends Omit<MenuProps$1<T>, 'className' | 'style'> {
|
|
|
557
559
|
*/
|
|
558
560
|
declare function Menu<T extends object>({ title, overlay, className, ...props }: MenuProps<T>): react.JSX.Element;
|
|
559
561
|
interface MenuItemProps extends Omit<MenuItemProps$1, 'children' | 'className' | 'style'> {
|
|
560
|
-
/** Label, starting with a verb (
|
|
562
|
+
/** Label, starting with a verb (“Duplicate”). “…” only when a dialog or second step follows. */
|
|
561
563
|
children: string;
|
|
562
564
|
/** Required: shows the action. Decorative for screen readers – the label carries the meaning. */
|
|
563
565
|
icon: ReactNode;
|
|
564
|
-
/** Keyboard shortcut in aria-keyshortcuts syntax;
|
|
566
|
+
/** Keyboard shortcut in aria-keyshortcuts syntax; “Mod” = ⌘ on Apple, Ctrl elsewhere. Desktop only. It must also work without the menu. */
|
|
565
567
|
shortcut?: string;
|
|
566
568
|
/** Destructive action: red, last in its own group. Irreversible actions open a confirmation dialog. */
|
|
567
569
|
variant?: 'default' | 'danger';
|
|
@@ -588,7 +590,7 @@ interface MenuSectionProps {
|
|
|
588
590
|
declare function MenuSection({ title, children, ...props }: MenuSectionProps): react.JSX.Element;
|
|
589
591
|
|
|
590
592
|
interface DialogAction {
|
|
591
|
-
/** Verb that says what happens (
|
|
593
|
+
/** Verb that says what happens (“Send invite”, “Delete”). Never “OK”, “Yes” or “Confirm”. */
|
|
592
594
|
label: string;
|
|
593
595
|
/**
|
|
594
596
|
* Runs on press, then the dialog closes. Return a promise to show the pending state until it
|
|
@@ -619,7 +621,7 @@ interface DialogDiscardText {
|
|
|
619
621
|
cancelLabel: string;
|
|
620
622
|
}
|
|
621
623
|
interface DialogProps extends OpenProps {
|
|
622
|
-
/** Required. Names the task (
|
|
624
|
+
/** Required. Names the task (“Invite member”). Screen readers announce it when the dialog opens. */
|
|
623
625
|
title: ReactNode;
|
|
624
626
|
/** One or two sentences under the title. */
|
|
625
627
|
description?: ReactNode;
|
|
@@ -636,10 +638,10 @@ interface DialogProps extends OpenProps {
|
|
|
636
638
|
showClose?: boolean;
|
|
637
639
|
/**
|
|
638
640
|
* Unsaved input. While true, a click on the scrim no longer closes, and X, Esc and Cancel
|
|
639
|
-
* first ask
|
|
641
|
+
* first ask “Discard changes?” (Alert dialog).
|
|
640
642
|
*/
|
|
641
643
|
isDirty?: boolean;
|
|
642
|
-
/** Text of the
|
|
644
|
+
/** Text of the “Discard changes?” Alert dialog. */
|
|
643
645
|
discardText?: Partial<DialogDiscardText>;
|
|
644
646
|
/** auto: dialog on desktop, `mobile` below 640 px · dialog · fullscreen · sheet. */
|
|
645
647
|
overlay?: 'auto' | 'dialog' | 'fullscreen' | 'sheet';
|
|
@@ -652,16 +654,16 @@ interface DialogProps extends OpenProps {
|
|
|
652
654
|
* Modal and Dialog: role dialog with aria-modal, the title names it, focus starts in the first field,
|
|
653
655
|
* stays inside and returns to the trigger; the page behind does not scroll. Use inside a DialogTrigger or with isOpen.
|
|
654
656
|
*/
|
|
655
|
-
declare function Dialog({ title, description, children, size, primaryAction, cancelLabel, closeLabel, showClose, isDirty, discardText, overlay, mobile, className, ...openProps }: DialogProps): react.JSX.Element;
|
|
657
|
+
declare function Dialog({ title, description, children, size, primaryAction, cancelLabel: cancelLabelProp, closeLabel: closeLabelProp, showClose, isDirty, discardText, overlay, mobile, className, ...openProps }: DialogProps): react.JSX.Element;
|
|
656
658
|
type AlertDialogTone = 'danger' | 'warning' | 'info';
|
|
657
659
|
interface AlertDialogProps extends OpenProps {
|
|
658
660
|
/** danger: irreversible or destructive · warning: risk of data loss · info: must be acknowledged. */
|
|
659
661
|
tone?: AlertDialogTone;
|
|
660
|
-
/** Required. A question (
|
|
662
|
+
/** Required. A question (“Delete Q3-Report.pdf?”). */
|
|
661
663
|
title: ReactNode;
|
|
662
|
-
/** The consequence (
|
|
664
|
+
/** The consequence (“This cannot be undone.”). */
|
|
663
665
|
children?: ReactNode;
|
|
664
|
-
/** Verb of the action (
|
|
666
|
+
/** Verb of the action (“Delete”). Danger tone: danger button, else primary. */
|
|
665
667
|
actionLabel: string;
|
|
666
668
|
/** Runs, then the dialog closes. A promise shows the pending state until it resolves. */
|
|
667
669
|
onAction?: () => void | Promise<unknown>;
|
|
@@ -673,7 +675,7 @@ interface AlertDialogProps extends OpenProps {
|
|
|
673
675
|
* role alertdialog, no X, a click on the scrim never closes, Esc = Cancel. Focus starts on Cancel,
|
|
674
676
|
* so an accidental Enter never deletes. Below 640 px: icon on top, buttons stacked (lg).
|
|
675
677
|
*/
|
|
676
|
-
declare function AlertDialog({ tone, title, children, actionLabel, onAction, cancelLabel, className, ...openProps }: AlertDialogProps): react.JSX.Element;
|
|
678
|
+
declare function AlertDialog({ tone, title, children, actionLabel, onAction, cancelLabel: cancelLabelProp, className, ...openProps }: AlertDialogProps): react.JSX.Element;
|
|
677
679
|
|
|
678
680
|
type ComboMode = 'single' | 'multiple';
|
|
679
681
|
interface ComboboxProps<T extends object, M extends ComboMode = 'single'> extends Omit<ComboBoxProps<T, M>, 'children' | 'className' | 'style' | 'placeholder' | 'menuTrigger'> {
|
|
@@ -683,7 +685,7 @@ interface ComboboxProps<T extends object, M extends ComboMode = 'single'> extend
|
|
|
683
685
|
description?: ReactNode;
|
|
684
686
|
/** Error text shown when the field is invalid. */
|
|
685
687
|
errorMessage?: ReactNode;
|
|
686
|
-
/** A hint like
|
|
688
|
+
/** A hint like “Search…”. */
|
|
687
689
|
placeholder?: string;
|
|
688
690
|
/** sm 32 · md 40 · lg 48 px. lg on mobile. */
|
|
689
691
|
size?: InputSize;
|
|
@@ -691,15 +693,15 @@ interface ComboboxProps<T extends object, M extends ComboMode = 'single'> extend
|
|
|
691
693
|
leadingIcon?: ReactNode;
|
|
692
694
|
/** Server search: shows a loading row (previous results stay) and marks the list busy. */
|
|
693
695
|
isLoading?: boolean;
|
|
694
|
-
/** Empty list text. Default:
|
|
696
|
+
/** Empty list text. Default: “No results for “…””. */
|
|
695
697
|
noResultsMessage?: (inputValue: string) => ReactNode;
|
|
696
|
-
/** Multi only: shows an
|
|
698
|
+
/** Multi only: shows an “Add …” row for text without an exact match. Return the key of the new item to select it. */
|
|
697
699
|
onCreate?: (text: string) => Key | void;
|
|
698
700
|
/** Option and ListBoxSection elements, or a render function with items / defaultItems. */
|
|
699
701
|
children: ReactNode | ((item: T) => ReactNode);
|
|
700
702
|
/** auto (default): popover on desktop, Bottom Sheet with search below 640 px · popover · sheet. */
|
|
701
703
|
overlay?: 'auto' | 'popover' | 'sheet';
|
|
702
|
-
/** Multi in the sheet: live (forms, footer
|
|
704
|
+
/** Multi in the sheet: live (forms, footer “Done”) · onClose (filters: onApply once when the sheet closes, if changed). */
|
|
703
705
|
commit?: 'live' | 'onClose';
|
|
704
706
|
/** commit="onClose": apply the selection (load results, write the URL …). */
|
|
705
707
|
onApply?: (value: Key[]) => void;
|
|
@@ -714,24 +716,24 @@ interface ComboboxProps<T extends object, M extends ComboMode = 'single'> extend
|
|
|
714
716
|
* Leaving without a selection restores the last valid value.
|
|
715
717
|
* Local data: `defaultItems` (filtered here). Server data: `items` + `inputValue` / `onInputChange` + `isLoading`.
|
|
716
718
|
*/
|
|
717
|
-
declare function Combobox<T extends object, M extends ComboMode = 'single'>({ label, description, errorMessage, placeholder, size, leadingIcon, isLoading, noResultsMessage, onCreate, children, overlay, commit, onApply, resultLabel, className, selectionMode, value: valueProp, defaultValue, onChange, onInputChange, ...props }: ComboboxProps<T, M>): react.JSX.Element;
|
|
719
|
+
declare function Combobox<T extends object, M extends ComboMode = 'single'>({ label, description, errorMessage, placeholder: placeholderProp, size, leadingIcon, isLoading, noResultsMessage: noResultsProp, onCreate, children, overlay, commit, onApply, resultLabel: resultLabelProp, className, selectionMode, value: valueProp, defaultValue, onChange, onInputChange, ...props }: ComboboxProps<T, M>): react.JSX.Element;
|
|
718
720
|
|
|
719
721
|
interface ToastAction {
|
|
720
|
-
/**
|
|
722
|
+
/** “Undo”, “View” or “Retry”. It must also be reachable elsewhere in the app. */
|
|
721
723
|
label: string;
|
|
722
724
|
onAction: () => void;
|
|
723
725
|
}
|
|
724
726
|
interface ToastOptions {
|
|
725
727
|
/** Max one action. Pressing it runs the action and closes the toast. */
|
|
726
728
|
action?: ToastAction;
|
|
727
|
-
/** Errors (
|
|
729
|
+
/** Errors (“Could not save”): stays until closed. Otherwise 5 s, with an action 8 s. */
|
|
728
730
|
persistent?: boolean;
|
|
729
731
|
/** Called when the toast closes (timeout, close button, Esc or action). */
|
|
730
732
|
onClose?: () => void;
|
|
731
733
|
}
|
|
732
734
|
/**
|
|
733
735
|
* Shows a toast: short, temporary feedback after an action.
|
|
734
|
-
* Write the result, not the process (
|
|
736
|
+
* Write the result, not the process (“Q3-Report.pdf deleted”), one line, max about 50 characters.
|
|
735
737
|
* Returns the key for `toast.close(key)`. The same message is never shown twice at once.
|
|
736
738
|
*/
|
|
737
739
|
declare function toast(message: string, { action, persistent, onClose }?: ToastOptions): string;
|
|
@@ -740,9 +742,9 @@ declare namespace toast {
|
|
|
740
742
|
var clear: () => void;
|
|
741
743
|
}
|
|
742
744
|
interface ToastRegionProps {
|
|
743
|
-
/** Accessible name of the landmark. Default:
|
|
745
|
+
/** Accessible name of the landmark. Default: “Notifications” (localized by React Aria). */
|
|
744
746
|
'aria-label'?: string;
|
|
745
|
-
/** Accessible name of the close buttons. Default:
|
|
747
|
+
/** Accessible name of the close buttons. Default: “Close” (localized by React Aria). */
|
|
746
748
|
closeLabel?: string;
|
|
747
749
|
}
|
|
748
750
|
/**
|
|
@@ -768,7 +770,7 @@ interface TabsProps extends Omit<TabsProps$1, 'className' | 'style' | 'orientati
|
|
|
768
770
|
*/
|
|
769
771
|
declare function Tabs({ size, fullWidth, className, ...props }: TabsProps): react.JSX.Element;
|
|
770
772
|
interface TabListProps<T> extends Omit<TabListProps$1<T>, 'className' | 'style'> {
|
|
771
|
-
/** Names the tabs when there is no visible heading (
|
|
773
|
+
/** Names the tabs when there is no visible heading (“Project”). */
|
|
772
774
|
'aria-label'?: string;
|
|
773
775
|
className?: string;
|
|
774
776
|
}
|
|
@@ -778,13 +780,13 @@ interface TabListProps<T> extends Omit<TabListProps$1<T>, 'className' | 'style'>
|
|
|
778
780
|
*/
|
|
779
781
|
declare function TabList<T extends object>({ className, ...props }: TabListProps<T>): react.JSX.Element;
|
|
780
782
|
interface TabProps extends Omit<TabProps$1, 'className' | 'style' | 'children'> {
|
|
781
|
-
/** Required. 1–2 words, a noun (
|
|
783
|
+
/** Required. 1–2 words, a noun (“Activity”). */
|
|
782
784
|
children: string;
|
|
783
785
|
/** Optional, then on all tabs. Decorative – the label carries the meaning. */
|
|
784
786
|
icon?: ReactNode;
|
|
785
787
|
/** Items waiting in the tab (Badge count, neutral). Hidden at 0. */
|
|
786
788
|
count?: number;
|
|
787
|
-
/** Screen-reader text of the count (
|
|
789
|
+
/** Screen-reader text of the count (“3 new”). Without it the number is read as part of the name. */
|
|
788
790
|
countLabel?: string;
|
|
789
791
|
}
|
|
790
792
|
/** One tab. The selected tab is a raised thumb that slides to the new tab with a snappy spring (no slide with reduced motion). */
|
|
@@ -827,9 +829,9 @@ interface PopoverProps {
|
|
|
827
829
|
* Opens on click, never on hover. Non-modal: the page stays usable; focus moves in, Esc or a click
|
|
828
830
|
* outside closes it and focus returns to the trigger. One topic per popover, one popover at a time.
|
|
829
831
|
*/
|
|
830
|
-
declare function Popover({ title, 'aria-label': ariaLabel, children, size, primaryAction, cancelLabel, closeLabel, overlay, placement, className, }: PopoverProps): react.JSX.Element;
|
|
832
|
+
declare function Popover({ title, 'aria-label': ariaLabel, children, size, primaryAction, cancelLabel: cancelLabelProp, closeLabel: closeLabelProp, overlay, placement, className, }: PopoverProps): react.JSX.Element;
|
|
831
833
|
interface ToggletipProps {
|
|
832
|
-
/** Required. Names the info button and the toggletip after the topic (
|
|
834
|
+
/** Required. Names the info button and the toggletip after the topic (“About billing email”). */
|
|
833
835
|
'aria-label': string;
|
|
834
836
|
/** One or two short sentences. Text only. */
|
|
835
837
|
children: ReactNode;
|
|
@@ -858,9 +860,9 @@ interface NavItemProps extends Omit<LinkProps$1, 'children' | 'className' | 'sty
|
|
|
858
860
|
isCurrent?: boolean;
|
|
859
861
|
/** Number in the item (Badge count, neutral). */
|
|
860
862
|
count?: number;
|
|
861
|
-
/** Screen-reader text of the count (
|
|
863
|
+
/** Screen-reader text of the count (“3 unread”, “12 projects”). */
|
|
862
864
|
countLabel?: string;
|
|
863
|
-
/** The count is new or unread: in the rail it turns into a dot. Plain totals (
|
|
865
|
+
/** The count is new or unread: in the rail it turns into a dot. Plain totals (“12 projects”) are hidden there. */
|
|
864
866
|
unread?: boolean;
|
|
865
867
|
}
|
|
866
868
|
/**
|
|
@@ -881,13 +883,13 @@ interface NavGroupProps {
|
|
|
881
883
|
/**
|
|
882
884
|
* A group of links behind a disclosure button (aria-expanded) – never a menu.
|
|
883
885
|
* Header: a dropdown panel on the popover surface; Tab moves through the links, Esc or a click outside closes.
|
|
884
|
-
* Sidebar and sheet: opens in place, one level. The parent shows
|
|
886
|
+
* Sidebar and sheet: opens in place, one level. The parent shows “current” only while it is closed.
|
|
885
887
|
*/
|
|
886
888
|
declare function NavGroup({ label, icon, children, defaultOpen }: NavGroupProps): react.JSX.Element;
|
|
887
889
|
interface NavListProps {
|
|
888
890
|
/** Form of the items: header (row) · sidebar · rail · sheet. */
|
|
889
891
|
variant?: NavVariant;
|
|
890
|
-
/** Name of the navigation region (
|
|
892
|
+
/** Name of the navigation region (“Footer”, “Account”). */
|
|
891
893
|
'aria-label': string;
|
|
892
894
|
children: ReactNode;
|
|
893
895
|
className?: string;
|
|
@@ -895,7 +897,7 @@ interface NavListProps {
|
|
|
895
897
|
/** A named navigation region with items of one form – for navigation outside the ready-made headers and bars. */
|
|
896
898
|
declare function NavList({ variant, 'aria-label': label, children, className }: NavListProps): react.JSX.Element;
|
|
897
899
|
interface NavSectionProps {
|
|
898
|
-
/** Overline heading (
|
|
900
|
+
/** Overline heading (“Workspace”). In the rail the section is divided by a line. */
|
|
899
901
|
title: string;
|
|
900
902
|
children: ReactNode;
|
|
901
903
|
}
|
|
@@ -906,18 +908,18 @@ interface SkipLinkProps {
|
|
|
906
908
|
href?: string;
|
|
907
909
|
children?: string;
|
|
908
910
|
}
|
|
909
|
-
/**
|
|
911
|
+
/** “Skip to content” – the first focusable element on every page (WCAG 2.4.1). Visible on focus only. */
|
|
910
912
|
declare function SkipLink({ href, children }: SkipLinkProps): react.JSX.Element;
|
|
911
913
|
interface NavAction {
|
|
912
914
|
label: string;
|
|
913
|
-
/** Usually a link (
|
|
915
|
+
/** Usually a link (“Log in”, “Get started”). */
|
|
914
916
|
href?: string;
|
|
915
917
|
onPress?: (e: PressEvent) => void;
|
|
916
918
|
/** primary: max one · secondary · ghost. */
|
|
917
919
|
variant?: 'primary' | 'secondary' | 'ghost';
|
|
918
920
|
}
|
|
919
921
|
interface SiteHeaderProps {
|
|
920
|
-
/** Logo link with a name (
|
|
922
|
+
/** Logo link with a name (“med.o home”). */
|
|
921
923
|
logo: ReactNode;
|
|
922
924
|
/** NavItems and NavGroups – max 5 links; more go into a group. */
|
|
923
925
|
children: ReactNode;
|
|
@@ -935,7 +937,7 @@ interface SiteHeaderProps {
|
|
|
935
937
|
* Website header: logo, links, actions. Sticky, with a divider once the page scrolls.
|
|
936
938
|
* Below 768 px only the logo, the primary action and a menu button remain; the menu opens fullscreen.
|
|
937
939
|
*/
|
|
938
|
-
declare function SiteHeader({ logo, children, actions, 'aria-label':
|
|
940
|
+
declare function SiteHeader({ logo, children, actions, 'aria-label': labelProp, menuLabel: menuLabelProp, closeLabel: closeLabelProp, layout }: SiteHeaderProps): react.JSX.Element;
|
|
939
941
|
interface AppHeaderProps {
|
|
940
942
|
/** Page title – the same name as the current nav item. */
|
|
941
943
|
title: ReactNode;
|
|
@@ -980,7 +982,7 @@ interface SideNavProps {
|
|
|
980
982
|
* collapses to a 64 px rail with tooltips. 640–1023 px: always a rail; expanding opens the full navigation
|
|
981
983
|
* as a Drawer on the left. Below 640 px it is hidden – use the BottomTabBar there.
|
|
982
984
|
*/
|
|
983
|
-
declare function SideNav({ logo, logoMark, children, user, isCollapsed, defaultCollapsed, onCollapsedChange, 'aria-label':
|
|
985
|
+
declare function SideNav({ logo, logoMark, children, user, isCollapsed, defaultCollapsed, onCollapsedChange, 'aria-label': labelProp, collapseLabel: collapseLabelProp, expandLabel: expandLabelProp, closeLabel: closeLabelProp, }: SideNavProps): react.JSX.Element;
|
|
984
986
|
interface BottomTabBarProps {
|
|
985
987
|
/** 3–5 TabBarItems; the last can be TabBarMore. */
|
|
986
988
|
children: ReactNode;
|
|
@@ -990,9 +992,9 @@ interface BottomTabBarProps {
|
|
|
990
992
|
}
|
|
991
993
|
/**
|
|
992
994
|
* Bottom tab bar: the main destinations of an app on phones, in thumb reach.
|
|
993
|
-
* Max 4 destinations +
|
|
995
|
+
* Max 4 destinations + “More”. Fixed to the bottom with the safe area; set `--medo-toast-offset` so toasts stay above it.
|
|
994
996
|
*/
|
|
995
|
-
declare function BottomTabBar({ children, 'aria-label':
|
|
997
|
+
declare function BottomTabBar({ children, 'aria-label': labelProp, display }: BottomTabBarProps): react.JSX.Element;
|
|
996
998
|
interface TabBarItemProps extends Omit<LinkProps$1, 'children' | 'className' | 'style'> {
|
|
997
999
|
/** Always visible – icons alone are ambiguous. */
|
|
998
1000
|
children: string;
|
|
@@ -1011,11 +1013,11 @@ interface TabBarMoreProps {
|
|
|
1011
1013
|
children: ReactNode;
|
|
1012
1014
|
closeLabel?: string;
|
|
1013
1015
|
}
|
|
1014
|
-
/**
|
|
1015
|
-
declare function TabBarMore({ label, children, closeLabel }: TabBarMoreProps): react.JSX.Element;
|
|
1016
|
+
/** “More”: opens the remaining destinations in the Nav sheet (Bottom Sheet). Shows “current” when one of them is. */
|
|
1017
|
+
declare function TabBarMore({ label: labelProp, children, closeLabel }: TabBarMoreProps): react.JSX.Element;
|
|
1016
1018
|
|
|
1017
1019
|
interface DrawerProps extends DirtyGuardProps {
|
|
1018
|
-
/** Says what it is (
|
|
1020
|
+
/** Says what it is (“Account”, “Filter”, “Invoice #1042”). Can be a logo for a navigation drawer – then set aria-label. */
|
|
1019
1021
|
title: ReactNode;
|
|
1020
1022
|
/** Name of the drawer when the title is not text (e.g. a logo). */
|
|
1021
1023
|
'aria-label'?: string;
|
|
@@ -1023,7 +1025,7 @@ interface DrawerProps extends DirtyGuardProps {
|
|
|
1023
1025
|
children: ReactNode | ((close: () => void) => ReactNode);
|
|
1024
1026
|
/**
|
|
1025
1027
|
* Only for decisions (Apply, Save) – usually a ButtonGroup. Links and switches act immediately.
|
|
1026
|
-
* A function gets `close` (after applying or saving, never asks) and `cancel` (asks
|
|
1028
|
+
* A function gets `close` (after applying or saving, never asks) and `cancel` (asks “Discard changes?” when isDirty).
|
|
1027
1029
|
*/
|
|
1028
1030
|
footer?: ReactNode | ((close: () => void, cancel: () => void) => ReactNode);
|
|
1029
1031
|
/** right: account, filters, details (default) · left: navigation only. */
|
|
@@ -1037,7 +1039,7 @@ interface DrawerProps extends DirtyGuardProps {
|
|
|
1037
1039
|
/**
|
|
1038
1040
|
* Drawer – a modal panel that slides in from the side. Same building blocks and behaviour
|
|
1039
1041
|
* as the Dialog (React Aria ModalOverlay + Modal + Dialog): scrim, focus trap, no page scroll, Esc and the close
|
|
1040
|
-
* button close it, focus returns to the trigger; `isDirty` asks
|
|
1042
|
+
* button close it, focus returns to the trigger; `isDirty` asks “Discard changes?”. Below 640 px it keeps its side,
|
|
1041
1043
|
* viewport − 56 px wide; a swipe towards the edge closes it. Use inside a DialogTrigger or with isOpen.
|
|
1042
1044
|
*/
|
|
1043
1045
|
declare function Drawer({ title, 'aria-label': ariaLabel, children, footer, side, size, closeLabel, isDirty, discardText, className, ...openProps }: DrawerProps): react.JSX.Element;
|
|
@@ -1056,12 +1058,12 @@ interface ListProps extends Omit<HTMLAttributes<HTMLUListElement | HTMLOListElem
|
|
|
1056
1058
|
/**
|
|
1057
1059
|
* List – a real list in running text: bullets, numbers or a feature list.
|
|
1058
1060
|
* Plain markup, no library needed. Markers are neutral (text/secondary) in their own column; long items
|
|
1059
|
-
* wrap flush with their first line. Level 2 (a List inside a ListItem) switches the marker: ring,
|
|
1061
|
+
* wrap flush with their first line. Level 2 (a List inside a ListItem) switches the marker: ring, “a.”.
|
|
1060
1062
|
*/
|
|
1061
1063
|
declare function List({ type, size, start, className, style, children, ...props }: ListProps): react.JSX.Element;
|
|
1062
1064
|
interface ListItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'children'> {
|
|
1063
1065
|
children: ReactNode;
|
|
1064
|
-
/** Feature list: not included – cross, muted text and a hidden
|
|
1066
|
+
/** Feature list: not included – cross, muted text and a hidden “Not included:” for screen readers. */
|
|
1065
1067
|
excluded?: boolean;
|
|
1066
1068
|
/** Hidden prefix of excluded items. */
|
|
1067
1069
|
excludedLabel?: string;
|
|
@@ -1077,16 +1079,16 @@ interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
|
|
|
1077
1079
|
/** Description list – term–value pairs for details of a record, an order or a profile. */
|
|
1078
1080
|
declare function DescriptionList({ layout, className, children, ...props }: DescriptionListProps): react.JSX.Element;
|
|
1079
1081
|
interface DescriptionItemProps {
|
|
1080
|
-
/** The term (
|
|
1082
|
+
/** The term (“Status”). */
|
|
1081
1083
|
term: ReactNode;
|
|
1082
|
-
/** The value (
|
|
1084
|
+
/** The value (“Active”). */
|
|
1083
1085
|
children: ReactNode;
|
|
1084
1086
|
}
|
|
1085
1087
|
/** One term–value pair (a div grouping dt and dd – valid inside dl). */
|
|
1086
1088
|
declare function DescriptionItem({ term, children }: DescriptionItemProps): react.JSX.Element;
|
|
1087
1089
|
|
|
1088
1090
|
interface ListViewProps<T> extends Omit<GridListProps<T>, 'className' | 'style' | 'layout' | 'keyboardNavigationBehavior'> {
|
|
1089
|
-
/** Required: names the list (
|
|
1091
|
+
/** Required: names the list (“Inbox”). */
|
|
1090
1092
|
'aria-label'?: string;
|
|
1091
1093
|
/** plain: full-page lists (inbox) · card: inside settings or dashboards (border, radius/lg) · cards: records on mobile (Table cards, use ListCard). */
|
|
1092
1094
|
variant?: 'plain' | 'card' | 'cards';
|
|
@@ -1101,7 +1103,7 @@ interface ListViewProps<T> extends Omit<GridListProps<T>, 'className' | 'style'
|
|
|
1101
1103
|
*. Built on React Aria GridList: ↑ ↓ move between rows, Enter opens a row, Tab reaches
|
|
1102
1104
|
* the controls inside a row (menu, switch, buttons). `selectionMode="multiple"` shows a checkbox per row and a click
|
|
1103
1105
|
* toggles the row – use it without `onAction` (React Aria would run the action on click instead).
|
|
1104
|
-
* Rows can have swipe actions on touch (`swipeActions`) – the same actions always sit in the row's
|
|
1106
|
+
* Rows can have swipe actions on touch (`swipeActions`) – the same actions always sit in the row's “…” menu.
|
|
1105
1107
|
*/
|
|
1106
1108
|
declare function ListView<T extends object>({ variant, isLoading, emptyState, className, children, items, ...props }: ListViewProps<T>): react.JSX.Element;
|
|
1107
1109
|
interface ListRowProps extends Omit<GridListItemProps, 'children' | 'className' | 'style' | 'textValue'> {
|
|
@@ -1115,17 +1117,17 @@ interface ListRowProps extends Omit<GridListItemProps, 'children' | 'className'
|
|
|
1115
1117
|
leading?: ReactNode;
|
|
1116
1118
|
/** Meta text (time, size) in caption. */
|
|
1117
1119
|
meta?: ReactNode;
|
|
1118
|
-
/** One trailing type per list: Badge, Menu (
|
|
1120
|
+
/** One trailing type per list: Badge, Menu (“…”), Switch or max 2 Button sm. With buttons the row has no action. */
|
|
1119
1121
|
trailing?: ReactNode;
|
|
1120
1122
|
/** The row navigates (href) – shows a chevron. */
|
|
1121
1123
|
chevron?: boolean;
|
|
1122
|
-
/** New or unread: title and excerpt strong, meta in brand, dot below the meta,
|
|
1124
|
+
/** New or unread: title and excerpt strong, meta in brand, dot below the meta, “Unread” for screen readers. */
|
|
1123
1125
|
unread?: boolean;
|
|
1124
1126
|
/** Screen-reader word for unread rows. */
|
|
1125
1127
|
unreadLabel?: string;
|
|
1126
1128
|
/**
|
|
1127
1129
|
* Touch only: end = swipe toward the start (left in LTR, e.g. Delete) · start = swipe toward the end (a safe action,
|
|
1128
|
-
* e.g. Archive). Always put the same actions into the row's
|
|
1130
|
+
* e.g. Archive). Always put the same actions into the row's “…” menu – swipe is a shortcut, never the only way.
|
|
1129
1131
|
*/
|
|
1130
1132
|
swipeActions?: {
|
|
1131
1133
|
start?: SwipeAction;
|
|
@@ -1133,10 +1135,10 @@ interface ListRowProps extends Omit<GridListItemProps, 'children' | 'className'
|
|
|
1133
1135
|
};
|
|
1134
1136
|
}
|
|
1135
1137
|
interface SwipeAction {
|
|
1136
|
-
/** Short verb (
|
|
1138
|
+
/** Short verb (“Delete”, “Archive”). */
|
|
1137
1139
|
label: string;
|
|
1138
1140
|
icon: ReactNode;
|
|
1139
|
-
/** Runs on a full swipe or a tap on the revealed action. Delete: remove at once and offer
|
|
1141
|
+
/** Runs on a full swipe or a tap on the revealed action. Delete: remove at once and offer “Undo” in a Toast. */
|
|
1140
1142
|
onAction: () => void;
|
|
1141
1143
|
/** danger: feedback/danger/solid (Delete) · primary: action/primary (Archive). */
|
|
1142
1144
|
tone?: 'danger' | 'primary';
|
|
@@ -1148,7 +1150,7 @@ declare function ListRowIcon({ children }: {
|
|
|
1148
1150
|
children: ReactNode;
|
|
1149
1151
|
}): react.JSX.Element;
|
|
1150
1152
|
interface ListCardProps extends Omit<GridListItemProps, 'children' | 'className' | 'style' | 'textValue'> {
|
|
1151
|
-
/** Required. The record (
|
|
1153
|
+
/** Required. The record (“INV-2026-0140”). Also the card's accessible name. */
|
|
1152
1154
|
title: string;
|
|
1153
1155
|
/** Key number on the right of the title (amount, count) – strong, never truncated. */
|
|
1154
1156
|
amount?: ReactNode;
|
|
@@ -1167,18 +1169,18 @@ interface ListCardProps extends Omit<GridListItemProps, 'children' | 'className'
|
|
|
1167
1169
|
declare function ListCard({ title, amount, description, meta, status, ...props }: ListCardProps): react.JSX.Element;
|
|
1168
1170
|
|
|
1169
1171
|
interface BulkAction {
|
|
1170
|
-
/** Verb (
|
|
1172
|
+
/** Verb (“Export”, “Archive”, “Delete”). */
|
|
1171
1173
|
label: string;
|
|
1172
1174
|
onAction: () => void;
|
|
1173
1175
|
/** danger: destructive – confirm it (Alert dialog) or offer Undo (Toast). Mobile: ghost danger. */
|
|
1174
1176
|
variant?: 'default' | 'danger';
|
|
1175
|
-
/** Icon for the
|
|
1177
|
+
/** Icon for the “…” menu (actions that do not fit in the bar). */
|
|
1176
1178
|
icon?: ReactNode;
|
|
1177
1179
|
}
|
|
1178
1180
|
interface BulkActionBarProps {
|
|
1179
1181
|
/** Number of selected items. 0 hides the bar. */
|
|
1180
1182
|
count: number;
|
|
1181
|
-
/**
|
|
1183
|
+
/** Desktop shows 3, mobile 2 (with more: 1 and “…”); the rest go into the “…” menu. Most important first, destructive last. */
|
|
1182
1184
|
actions: BulkAction[];
|
|
1183
1185
|
/** Clears the selection (× and Esc). */
|
|
1184
1186
|
onClear: () => void;
|
|
@@ -1196,16 +1198,16 @@ interface BulkActionBarProps {
|
|
|
1196
1198
|
* Appears with ≥ 1 selected item and floats, so selecting never shifts the layout. A toolbar: the count is
|
|
1197
1199
|
* announced, Esc or × clears the selection. Render it right after the list, so Tab reaches it next.
|
|
1198
1200
|
*/
|
|
1199
|
-
declare function BulkActionBar({ count, actions, onClear, variant, countLabel, clearLabel, moreLabel, 'aria-label':
|
|
1201
|
+
declare function BulkActionBar({ count, actions, onClear, variant, countLabel: countLabelProp, clearLabel: clearLabelProp, moreLabel: moreLabelProp, 'aria-label': ariaLabelProp, className, }: BulkActionBarProps): react.JSX.Element;
|
|
1200
1202
|
|
|
1201
1203
|
type EmptyStateType = 'first-use' | 'no-results' | 'error' | 'no-access' | 'all-done';
|
|
1202
1204
|
type EmptyStateSize = 'page' | 'section' | 'inline';
|
|
1203
1205
|
interface EmptyStateAction {
|
|
1204
|
-
/** Verb that says what happens (
|
|
1206
|
+
/** Verb that says what happens (“Create project”, “Clear filters”, “Try again”). */
|
|
1205
1207
|
label: string;
|
|
1206
1208
|
/** Runs the action. */
|
|
1207
1209
|
onPress?: () => void;
|
|
1208
|
-
/** Second action only: navigates – rendered as a Link (
|
|
1210
|
+
/** Second action only: navigates – rendered as a Link (“Learn more”, “View archive”). */
|
|
1209
1211
|
href?: string;
|
|
1210
1212
|
isDisabled?: boolean;
|
|
1211
1213
|
}
|
|
@@ -1214,11 +1216,11 @@ interface EmptyStateProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
|
|
|
1214
1216
|
type?: EmptyStateType;
|
|
1215
1217
|
/** page: a whole view · section: a card or panel · inline: inside a list or table (header stays). */
|
|
1216
1218
|
size?: EmptyStateSize;
|
|
1217
|
-
/** Required. The situation in plain words – never
|
|
1219
|
+
/** Required. The situation in plain words – never “No data”. */
|
|
1218
1220
|
title: ReactNode;
|
|
1219
1221
|
/** Why it is empty or what comes next, in one or two sentences. */
|
|
1220
1222
|
description?: ReactNode;
|
|
1221
|
-
/** Main action: primary for first use, secondary for all other types.
|
|
1223
|
+
/** Main action: primary for first use, secondary for all other types. “All done” needs none. */
|
|
1222
1224
|
action?: EmptyStateAction;
|
|
1223
1225
|
/** Second action as a text button, or a Link with `href`. */
|
|
1224
1226
|
secondaryAction?: EmptyStateAction;
|
|
@@ -1232,7 +1234,7 @@ interface EmptyStateProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
|
|
|
1232
1234
|
/**
|
|
1233
1235
|
* Empty state – what users see when there is nothing to show, and what they can do next.
|
|
1234
1236
|
* Page and section render a `<section>` named by its heading; inline renders a plain block, so it does not add
|
|
1235
|
-
* a landmark inside a list or table.
|
|
1237
|
+
* a landmark inside a list or table. “No results” puts its text in a polite status region; focus stays where it was.
|
|
1236
1238
|
*/
|
|
1237
1239
|
declare function EmptyState({ type, size, title, description, action, secondaryAction, icon, illustration, headingLevel, className, ...props }: EmptyStateProps): react.JSX.Element;
|
|
1238
1240
|
|
|
@@ -1243,15 +1245,15 @@ interface PaginationProps {
|
|
|
1243
1245
|
defaultPage?: number;
|
|
1244
1246
|
/** Called with the new page (apps). Not needed with `getPageHref`. */
|
|
1245
1247
|
onChange?: (page: number) => void;
|
|
1246
|
-
/** Websites: every page becomes a real link (
|
|
1248
|
+
/** Websites: every page becomes a real link (“?page=5”) – shareable, back button works. Works with RouterProvider. */
|
|
1247
1249
|
getPageHref?: (page: number) => string;
|
|
1248
1250
|
/** Number of pages. Default: totalItems / pageSize. With 1 page nothing is shown. */
|
|
1249
1251
|
totalPages?: number;
|
|
1250
|
-
/** Total count: shows the summary (
|
|
1252
|
+
/** Total count: shows the summary (“81–100 of 380”). */
|
|
1251
1253
|
totalItems?: number;
|
|
1252
1254
|
/** Rows per page. */
|
|
1253
1255
|
pageSize?: number;
|
|
1254
|
-
/** Shows
|
|
1256
|
+
/** Shows “Rows per page” (Select sm). */
|
|
1255
1257
|
onPageSizeChange?: (pageSize: number) => void;
|
|
1256
1258
|
pageSizeOptions?: number[];
|
|
1257
1259
|
/** auto: compact below 640 px · full: summary, rows per page and pages · compact: ‹ Page 5 of 19 › (narrow panels). */
|
|
@@ -1273,16 +1275,16 @@ interface PaginationProps {
|
|
|
1273
1275
|
/**
|
|
1274
1276
|
* Pagination – move through long lists page by page. A navigation region:
|
|
1275
1277
|
* buttons for apps (`onChange`) or real links for websites (`getPageHref`). Full on desktop, compact below 640 px.
|
|
1276
|
-
* After a change the app scrolls to the top of the list and focuses its heading.
|
|
1278
|
+
* After a change the app scrolls to the top of the list and focuses its heading. “Load more” is a Button, not a variant.
|
|
1277
1279
|
*/
|
|
1278
|
-
declare function Pagination({ page: pageProp, defaultPage, onChange, getPageHref, totalPages: totalPagesProp, totalItems, pageSize, onPageSizeChange, pageSizeOptions, variant, size, 'aria-label':
|
|
1280
|
+
declare function Pagination({ page: pageProp, defaultPage, onChange, getPageHref, totalPages: totalPagesProp, totalItems, pageSize, onPageSizeChange, pageSizeOptions, variant, size, 'aria-label': ariaLabelProp, summary: summaryProp, pageSizeLabel: pageSizeLabelProp, previousLabel: previousLabelProp, nextLabel: nextLabelProp, pageLabel: pageLabelProp, compactLabel: compactLabelProp, className, }: PaginationProps): react.JSX.Element | null;
|
|
1279
1281
|
|
|
1280
1282
|
interface SearchFieldProps extends Omit<SearchFieldProps$1, 'children' | 'className' | 'style'> {
|
|
1281
1283
|
/** Visible label. Without it set `aria-label` (e.g. in a table toolbar or the header). */
|
|
1282
1284
|
label?: ReactNode;
|
|
1283
1285
|
/** Helper text below the field. */
|
|
1284
1286
|
description?: ReactNode;
|
|
1285
|
-
/** A hint like
|
|
1287
|
+
/** A hint like “Search invoices”. Never the only label. */
|
|
1286
1288
|
placeholder?: string;
|
|
1287
1289
|
/** sm 32 (toolbars) · md 40 · lg 48 (search page, Quick search, mobile). */
|
|
1288
1290
|
size?: InputSize;
|
|
@@ -1308,13 +1310,13 @@ interface SearchResultProps {
|
|
|
1308
1310
|
href: string;
|
|
1309
1311
|
/** Search term: shown in bold in title and snippet (every match), never by colour alone. */
|
|
1310
1312
|
query?: string;
|
|
1311
|
-
/** Where it lives (
|
|
1313
|
+
/** Where it lives (“Help center › Billing”). */
|
|
1312
1314
|
path?: ReactNode;
|
|
1313
1315
|
/** Text around the match, max 2 lines. A string gets the highlight. */
|
|
1314
1316
|
snippet?: ReactNode;
|
|
1315
|
-
/** Type label as Badge sm (
|
|
1317
|
+
/** Type label as Badge sm (“Page”, “PDF”, “Video”). */
|
|
1316
1318
|
badge?: string;
|
|
1317
|
-
/** Meta text next to the badge (
|
|
1319
|
+
/** Meta text next to the badge (“Updated 3 days ago”). */
|
|
1318
1320
|
meta?: ReactNode;
|
|
1319
1321
|
/** Person: Avatar (sized lg automatically). Media: an image (4:3; 128 wide, 160 in aesthetic). Overrides the type icon. */
|
|
1320
1322
|
leading?: ReactNode;
|
|
@@ -1347,9 +1349,9 @@ interface QuickSearchProps<T extends object> {
|
|
|
1347
1349
|
items?: Iterable<T>;
|
|
1348
1350
|
/** Opens the highlighted hit (Enter or click). */
|
|
1349
1351
|
onAction?: (key: React.Key) => void;
|
|
1350
|
-
/**
|
|
1352
|
+
/** “All results”: the search page with the same term. */
|
|
1351
1353
|
allResultsHref?: (query: string) => string;
|
|
1352
|
-
/** Enter without a highlighted hit, and
|
|
1354
|
+
/** Enter without a highlighted hit, and “Search all content” when nothing matches. */
|
|
1353
1355
|
onSearch?: (query: string) => void;
|
|
1354
1356
|
/** Texts (localize). */
|
|
1355
1357
|
'aria-label'?: string;
|
|
@@ -1370,7 +1372,7 @@ interface QuickSearchProps<T extends object> {
|
|
|
1370
1372
|
* React Aria Autocomplete: focus stays in the field while ↑ ↓ move through the suggestions, Enter opens the
|
|
1371
1373
|
* highlighted hit, Esc closes and focus returns to the trigger. Desktop: overlay 640 wide · mobile: full screen with Cancel.
|
|
1372
1374
|
*/
|
|
1373
|
-
declare function QuickSearch<T extends object>({ isOpen, defaultOpen, onOpenChange, shortcut, inputValue, onInputChange, clientFilter, children, items, onAction, allResultsHref, onSearch, 'aria-label':
|
|
1375
|
+
declare function QuickSearch<T extends object>({ isOpen, defaultOpen, onOpenChange, shortcut, inputValue, onInputChange, clientFilter, children, items, onAction, allResultsHref, onSearch, 'aria-label': ariaLabelProp, placeholder: placeholderProp, cancelLabel: cancelLabelProp, suggestionsLabel: suggestionsLabelProp, allResultsLabel: allResultsLabelProp, noResultsLabel: noResultsLabelProp, searchAllLabel: searchAllLabelProp, hints: hintsProp, }: QuickSearchProps<T>): react.JSX.Element;
|
|
1374
1376
|
|
|
1375
1377
|
/** Shows the matching parts of a text in bold (`className` on each match). Visual only; screen readers read plain text. */
|
|
1376
1378
|
declare function Highlight({ text, query, all, as: Tag, className, }: {
|
|
@@ -1392,9 +1394,9 @@ interface BreadcrumbsProps {
|
|
|
1392
1394
|
items: BreadcrumbItem[];
|
|
1393
1395
|
/** sm: dense apps (caption, 24) · md: websites (body/sm, 28). */
|
|
1394
1396
|
size?: 'sm' | 'md';
|
|
1395
|
-
/** The first item shows a house icon; its label stays the accessible name (
|
|
1397
|
+
/** The first item shows a house icon; its label stays the accessible name (“Home”). */
|
|
1396
1398
|
homeIcon?: boolean;
|
|
1397
|
-
/** auto: full path, below 640 px only a link to the parent page · full · back. From 5 levels the middle collapses into
|
|
1399
|
+
/** auto: full path, below 640 px only a link to the parent page · full · back. From 5 levels the middle collapses into “…”. */
|
|
1398
1400
|
layout?: 'auto' | 'full' | 'back';
|
|
1399
1401
|
/** Texts (localize). */
|
|
1400
1402
|
'aria-label'?: string;
|
|
@@ -1406,7 +1408,7 @@ interface BreadcrumbsProps {
|
|
|
1406
1408
|
* Built on React Aria Breadcrumbs: a navigation region with an ordered list, the current page last with
|
|
1407
1409
|
* aria-current="page". Not on the start page; place it above the page title.
|
|
1408
1410
|
*/
|
|
1409
|
-
declare function Breadcrumbs({ items, size, homeIcon, layout, 'aria-label':
|
|
1411
|
+
declare function Breadcrumbs({ items, size, homeIcon, layout, 'aria-label': ariaLabelProp, moreLabel: moreLabelProp, className, }: BreadcrumbsProps): react.JSX.Element | null;
|
|
1410
1412
|
|
|
1411
1413
|
type AccordionSize = 'md' | 'lg';
|
|
1412
1414
|
interface AccordionProps extends Omit<DisclosureGroupProps, 'className' | 'style' | 'children'> {
|
|
@@ -1416,7 +1418,7 @@ interface AccordionProps extends Omit<DisclosureGroupProps, 'className' | 'style
|
|
|
1416
1418
|
headingLevel?: 2 | 3 | 4;
|
|
1417
1419
|
/** Several sections open at once (default). false: one at a time – only for short, mutually exclusive steps. */
|
|
1418
1420
|
allowsMultipleExpanded?: boolean;
|
|
1419
|
-
/**
|
|
1421
|
+
/** “Expand all” / “Collapse all” above groups with more than 6 sections (multiple only). */
|
|
1420
1422
|
expandAll?: boolean;
|
|
1421
1423
|
expandAllLabel?: string;
|
|
1422
1424
|
collapseAllLabel?: string;
|
|
@@ -1439,7 +1441,7 @@ interface AccordionItemProps {
|
|
|
1439
1441
|
description?: ReactNode;
|
|
1440
1442
|
/** Decorative icon before the title (20 md / 24 lg). */
|
|
1441
1443
|
icon?: ReactNode;
|
|
1442
|
-
/** Badge sm – part of the button name (
|
|
1444
|
+
/** Badge sm – part of the button name (“Billing, Payment failed”). */
|
|
1443
1445
|
badge?: ReactNode;
|
|
1444
1446
|
isDisabled?: boolean;
|
|
1445
1447
|
/** Panel content – text, a form or a list. No accordion inside. */
|
|
@@ -1452,7 +1454,7 @@ type Value = number | number[];
|
|
|
1452
1454
|
interface SliderProps<T extends Value = number> extends Omit<SliderProps$1<T>, 'children' | 'className' | 'style'> {
|
|
1453
1455
|
/** Visible label. Without it set `aria-label`. */
|
|
1454
1456
|
label?: ReactNode;
|
|
1455
|
-
/** Range: a name per thumb (
|
|
1457
|
+
/** Range: a name per thumb (“Minimum price”, “Maximum price”). Default: “Minimum” / “Maximum” + label. */
|
|
1456
1458
|
thumbLabels?: [string, string];
|
|
1457
1459
|
/** Tick marks for few fixed steps (≤ 10) – the thumb snaps to them. */
|
|
1458
1460
|
showTicks?: boolean;
|
|
@@ -1499,15 +1501,15 @@ interface NumberFieldProps extends Omit<NumberFieldProps$1, 'children' | 'classN
|
|
|
1499
1501
|
declare function NumberField({ label, description, errorMessage, placeholder, size, className, ...props }: NumberFieldProps): react.JSX.Element;
|
|
1500
1502
|
|
|
1501
1503
|
interface LinkProps extends Omit<LinkProps$1, 'children' | 'className'> {
|
|
1502
|
-
/** The text says where it goes (
|
|
1504
|
+
/** The text says where it goes (“Privacy policy”, not “click here”). */
|
|
1503
1505
|
children: ReactNode;
|
|
1504
1506
|
/** inline: inside running text, always underlined · standalone: own line, underline on hover. */
|
|
1505
1507
|
variant?: 'inline' | 'standalone';
|
|
1506
1508
|
/** Standalone only: sm (label/sm) · md (label/md). Inline links take the size of the surrounding text. */
|
|
1507
1509
|
size?: 'sm' | 'md';
|
|
1508
|
-
/** Another website: shows the external icon. With target="_blank" screen readers also hear
|
|
1510
|
+
/** Another website: shows the external icon. With target="_blank" screen readers also hear “opens in a new tab”. */
|
|
1509
1511
|
external?: boolean;
|
|
1510
|
-
/** Standalone only: arrow after the text (
|
|
1512
|
+
/** Standalone only: arrow after the text (“View all →”). */
|
|
1511
1513
|
arrow?: boolean;
|
|
1512
1514
|
/** Hidden text for links that open a new tab. */
|
|
1513
1515
|
newTabLabel?: string;
|
|
@@ -1525,7 +1527,7 @@ interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
|
1525
1527
|
tone?: AlertTone;
|
|
1526
1528
|
/** inline: in the content · banner: full width above the header, for app-wide states. */
|
|
1527
1529
|
variant?: 'inline' | 'banner';
|
|
1528
|
-
/** Required. Says what happened (
|
|
1530
|
+
/** Required. Says what happened (“Your trial ends in 3 days”). */
|
|
1529
1531
|
title: ReactNode;
|
|
1530
1532
|
/** What to do next. */
|
|
1531
1533
|
children?: ReactNode;
|
|
@@ -1589,6 +1591,8 @@ interface StaticTableProps {
|
|
|
1589
1591
|
/**
|
|
1590
1592
|
* Static table – a native, non-interactive table with the Table look.
|
|
1591
1593
|
* For content and simple data. Numbers: add className="medo-table__cell--number".
|
|
1594
|
+
* When it is wider than its container it scrolls sideways; the container then takes the keyboard focus
|
|
1595
|
+
* (arrow keys scroll) and is announced as a region named by the caption.
|
|
1592
1596
|
*/
|
|
1593
1597
|
declare function StaticTable({ children, caption, captionHidden, density, striped, plain, className, style }: StaticTableProps): react.JSX.Element;
|
|
1594
1598
|
interface TableProps extends Omit<TableProps$1, 'className' | 'style'> {
|
|
@@ -1644,9 +1648,9 @@ interface ColumnsMenuProps {
|
|
|
1644
1648
|
* Columns menu – shows or hides table columns. A ghost button sm in the
|
|
1645
1649
|
* table toolbar opens a Popover sm with checkboxes; locked columns stay visible. Render only the visible columns.
|
|
1646
1650
|
*/
|
|
1647
|
-
declare function ColumnsMenu({ columns, visibleColumns, onVisibleColumnsChange, label, title }: ColumnsMenuProps): react.JSX.Element;
|
|
1651
|
+
declare function ColumnsMenu({ columns, visibleColumns, onVisibleColumnsChange, label: labelProp, title: titleProp }: ColumnsMenuProps): react.JSX.Element;
|
|
1648
1652
|
|
|
1649
|
-
/**
|
|
1653
|
+
/** “2.4 MB”, “860 kB” – decimal units like the operating systems' file dialogs. */
|
|
1650
1654
|
declare function formatBytes(bytes: number, locale?: string): string;
|
|
1651
1655
|
interface UploadFile {
|
|
1652
1656
|
/** Stable id (e.g. crypto.randomUUID() when the file is added). */
|
|
@@ -1659,11 +1663,11 @@ interface UploadFile {
|
|
|
1659
1663
|
status: 'uploading' | 'done' | 'error';
|
|
1660
1664
|
/** Uploaded bytes (ProgressEvent.loaded). Without it the bar is indeterminate. */
|
|
1661
1665
|
loaded?: number;
|
|
1662
|
-
/** What happened and how to fix it (
|
|
1666
|
+
/** What happened and how to fix it (“Upload interrupted. Check your connection and retry.”). No error codes. */
|
|
1663
1667
|
error?: string;
|
|
1664
1668
|
/** Thumbnail (URL.createObjectURL(file) or the server URL). */
|
|
1665
1669
|
previewUrl?: string;
|
|
1666
|
-
/** false hides
|
|
1670
|
+
/** false hides “Retry” (e.g. the server rejected the file). Default true. */
|
|
1667
1671
|
canRetry?: boolean;
|
|
1668
1672
|
}
|
|
1669
1673
|
interface UploadTexts {
|
|
@@ -1680,7 +1684,7 @@ interface UploadTexts {
|
|
|
1680
1684
|
retryShort: string;
|
|
1681
1685
|
/** Name of the progress bar. */
|
|
1682
1686
|
uploading: (name: string) => string;
|
|
1683
|
-
/**
|
|
1687
|
+
/** “1.6 of 2.4 MB · 64 %” */
|
|
1684
1688
|
progress: (loaded: string, total: string, percent: number) => string;
|
|
1685
1689
|
/** Validation. */
|
|
1686
1690
|
typeNotAllowed: (names: string, types: string) => string;
|
|
@@ -1690,6 +1694,7 @@ interface UploadTexts {
|
|
|
1690
1694
|
uploaded: (name: string) => string;
|
|
1691
1695
|
failed: (name: string, error: string) => string;
|
|
1692
1696
|
}
|
|
1697
|
+
/** English defaults. The components use the texts of the current language (see i18n). */
|
|
1693
1698
|
declare const defaultUploadTexts: UploadTexts;
|
|
1694
1699
|
interface ItemActions {
|
|
1695
1700
|
onRemove: (id: string) => void;
|
|
@@ -1716,11 +1721,11 @@ interface FileTileProps extends ItemActions {
|
|
|
1716
1721
|
*/
|
|
1717
1722
|
declare function FileTile({ file, onRemove, onCancel, onRetry, texts: own, className }: FileTileProps): react.JSX.Element;
|
|
1718
1723
|
interface PickerProps {
|
|
1719
|
-
/** Accepted types as for <input accept>: [
|
|
1724
|
+
/** Accepted types as for <input accept>: [“.pdf”, “image/*”]. Checked again before upload. */
|
|
1720
1725
|
acceptedFileTypes?: string[];
|
|
1721
1726
|
/** Several files at once. Default true. */
|
|
1722
1727
|
allowsMultiple?: boolean;
|
|
1723
|
-
/** Mobile: open the camera first (
|
|
1728
|
+
/** Mobile: open the camera first (“environment” = back camera). */
|
|
1724
1729
|
defaultCamera?: 'user' | 'environment';
|
|
1725
1730
|
isDisabled?: boolean;
|
|
1726
1731
|
/** Types, size and count – shown before the user picks a file. */
|
|
@@ -1743,7 +1748,7 @@ interface DropzoneProps extends PickerProps {
|
|
|
1743
1748
|
declare function Dropzone({ acceptedFileTypes, allowsMultiple, defaultCamera, isDisabled, hint, errorMessage, onSelect, texts: own, className, ...props }: DropzoneProps): react.JSX.Element;
|
|
1744
1749
|
interface FileTriggerProps extends PickerProps {
|
|
1745
1750
|
label?: ReactNode;
|
|
1746
|
-
/** Visual marker; check
|
|
1751
|
+
/** Visual marker; check “at least one file” on submit and pass `errorMessage`. */
|
|
1747
1752
|
isRequired?: boolean;
|
|
1748
1753
|
}
|
|
1749
1754
|
/**
|
|
@@ -1765,14 +1770,14 @@ interface UploadFieldProps extends Omit<ItemActions, 'texts'> {
|
|
|
1765
1770
|
*/
|
|
1766
1771
|
layout?: 'auto' | 'list' | 'compact' | 'grid';
|
|
1767
1772
|
acceptedFileTypes?: string[];
|
|
1768
|
-
/** Readable form of the types for hint and message (
|
|
1773
|
+
/** Readable form of the types for hint and message (“PDF, JPG or PNG”). */
|
|
1769
1774
|
typesLabel?: string;
|
|
1770
1775
|
/** Max size per file in bytes. */
|
|
1771
1776
|
maxSize?: number;
|
|
1772
1777
|
/** Max number of files. 1 = single file picker. */
|
|
1773
1778
|
maxFiles?: number;
|
|
1774
1779
|
defaultCamera?: 'user' | 'environment';
|
|
1775
|
-
/** Default:
|
|
1780
|
+
/** Default: “{typesLabel} · max. {maxSize} each”. */
|
|
1776
1781
|
hint?: ReactNode;
|
|
1777
1782
|
/** Field error from the app (e.g. required on submit). Wins over the built-in validation message. */
|
|
1778
1783
|
errorMessage?: ReactNode;
|
|
@@ -1795,11 +1800,12 @@ interface CalendarTexts {
|
|
|
1795
1800
|
nextYear: string;
|
|
1796
1801
|
previousYears: string;
|
|
1797
1802
|
nextYears: string;
|
|
1798
|
-
/** Name of the month-and-year button:
|
|
1803
|
+
/** Name of the month-and-year button: “October 2026 – choose month and year”. */
|
|
1799
1804
|
chooseMonth: (title: string) => string;
|
|
1800
1805
|
chooseYear: (year: string) => string;
|
|
1801
1806
|
weekNumber: string;
|
|
1802
1807
|
}
|
|
1808
|
+
/** English defaults. The components use the texts of the current language (see i18n). */
|
|
1803
1809
|
declare const defaultCalendarTexts: CalendarTexts;
|
|
1804
1810
|
interface SharedProps {
|
|
1805
1811
|
/** md: 40 px days for desktop popovers · lg: 48 px for touch (Bottom Sheet). */
|
|
@@ -1841,13 +1847,13 @@ interface DateFieldProps<T extends DateValue> extends Omit<DateFieldProps$1<T>,
|
|
|
1841
1847
|
}
|
|
1842
1848
|
/**
|
|
1843
1849
|
* Date field – type a date without a calendar. React Aria DateField: every segment is a
|
|
1844
|
-
* spinbutton (
|
|
1850
|
+
* spinbutton (“day”, “month”, “year”), ↑ ↓ change it, ← → move, Backspace clears, a pasted date fills all.
|
|
1845
1851
|
* `granularity="minute"` adds the time. For a calendar use DatePicker.
|
|
1846
1852
|
*/
|
|
1847
1853
|
declare function DateField<T extends DateValue>({ label, description, errorMessage, size, className, ...props }: DateFieldProps<T>): react.JSX.Element;
|
|
1848
1854
|
interface TimeSlot {
|
|
1849
1855
|
value: TimeValue;
|
|
1850
|
-
/** Booked slots stay visible, disabled, with the reason (
|
|
1856
|
+
/** Booked slots stay visible, disabled, with the reason (“Booked”). */
|
|
1851
1857
|
isDisabled?: boolean;
|
|
1852
1858
|
reason?: string;
|
|
1853
1859
|
}
|
|
@@ -1861,19 +1867,223 @@ interface TimeFieldProps extends Omit<TimeFieldProps$1<TimeValue>, 'children' |
|
|
|
1861
1867
|
* Time field – type a time. HH:MM, 24 h in de – from the locale. Typing only;
|
|
1862
1868
|
* with `slots` a clock button opens a list of fixed times (bookings), booked ones disabled with a reason.
|
|
1863
1869
|
*/
|
|
1864
|
-
declare function TimeField({ label, description, errorMessage, size, slots, slotsLabel, className, defaultValue, onChange, ...props }: TimeFieldProps): react.JSX.Element;
|
|
1870
|
+
declare function TimeField({ label, description, errorMessage, size, slots, slotsLabel: slotsLabelProp, className, defaultValue, onChange, ...props }: TimeFieldProps): react.JSX.Element;
|
|
1871
|
+
|
|
1872
|
+
/**
|
|
1873
|
+
* Built-in texts of the components: button labels, screen-reader names, announcements, validation messages.
|
|
1874
|
+
* One object per language (en.ts, de.ts). TypeScript checks that every language has every text with the
|
|
1875
|
+
* right parameters. A component prop (e.g. `closeLabel`) always wins over these defaults.
|
|
1876
|
+
*/
|
|
1877
|
+
interface Messages {
|
|
1878
|
+
common: {
|
|
1879
|
+
close: string;
|
|
1880
|
+
cancel: string;
|
|
1881
|
+
back: string;
|
|
1882
|
+
more: string;
|
|
1883
|
+
done: string;
|
|
1884
|
+
search: string;
|
|
1885
|
+
showResults: string;
|
|
1886
|
+
loading: string;
|
|
1887
|
+
clear: string;
|
|
1888
|
+
clearAll: string;
|
|
1889
|
+
noResults: string;
|
|
1890
|
+
noResultsFor: (query: string) => string;
|
|
1891
|
+
/** Name of a chosen value list: “Assignee: selected”. */
|
|
1892
|
+
selected: (name: string) => string;
|
|
1893
|
+
/** Announcement after removing values: “Design removed”. */
|
|
1894
|
+
removed: (labels: string[]) => string;
|
|
1895
|
+
/** Combobox: row that creates a new value. */
|
|
1896
|
+
add: (text: string) => string;
|
|
1897
|
+
create: string;
|
|
1898
|
+
reset: string;
|
|
1899
|
+
/** Sheet footer: “3 selected”. */
|
|
1900
|
+
countSelected: (count: number) => string;
|
|
1901
|
+
/** Fallback name of chosen values without a text label. */
|
|
1902
|
+
selectedValues: string;
|
|
1903
|
+
};
|
|
1904
|
+
/** Key names in shortcuts (⌘, ⇧ and Alt are the same everywhere). */
|
|
1905
|
+
keys: {
|
|
1906
|
+
control: string;
|
|
1907
|
+
};
|
|
1908
|
+
accordion: {
|
|
1909
|
+
expandAll: string;
|
|
1910
|
+
collapseAll: string;
|
|
1911
|
+
};
|
|
1912
|
+
alert: {
|
|
1913
|
+
dismiss: string;
|
|
1914
|
+
};
|
|
1915
|
+
avatar: {
|
|
1916
|
+
status: Record<'online' | 'away' | 'busy' | 'offline', string>;
|
|
1917
|
+
unknownPerson: string;
|
|
1918
|
+
unknownOrganization: string;
|
|
1919
|
+
more: (count: number) => string;
|
|
1920
|
+
};
|
|
1921
|
+
breadcrumbs: {
|
|
1922
|
+
label: string;
|
|
1923
|
+
more: (count: number) => string;
|
|
1924
|
+
};
|
|
1925
|
+
bulkActionBar: {
|
|
1926
|
+
label: string;
|
|
1927
|
+
count: (count: number) => string;
|
|
1928
|
+
clear: string;
|
|
1929
|
+
more: string;
|
|
1930
|
+
};
|
|
1931
|
+
calendar: {
|
|
1932
|
+
previousMonth: string;
|
|
1933
|
+
nextMonth: string;
|
|
1934
|
+
previousYear: string;
|
|
1935
|
+
nextYear: string;
|
|
1936
|
+
previousYears: string;
|
|
1937
|
+
nextYears: string;
|
|
1938
|
+
chooseMonth: (title: string) => string;
|
|
1939
|
+
chooseYear: (year: string) => string;
|
|
1940
|
+
weekNumber: string;
|
|
1941
|
+
};
|
|
1942
|
+
datePicker: {
|
|
1943
|
+
openCalendar: string;
|
|
1944
|
+
time: string;
|
|
1945
|
+
presets: string;
|
|
1946
|
+
beforeMin: (date: string) => string;
|
|
1947
|
+
afterMax: (date: string) => string;
|
|
1948
|
+
unavailable: string;
|
|
1949
|
+
reversed: string;
|
|
1950
|
+
today: string;
|
|
1951
|
+
yesterday: string;
|
|
1952
|
+
last7Days: string;
|
|
1953
|
+
last14Days: string;
|
|
1954
|
+
last30Days: string;
|
|
1955
|
+
thisMonth: string;
|
|
1956
|
+
lastMonth: string;
|
|
1957
|
+
availableTimes: string;
|
|
1958
|
+
};
|
|
1959
|
+
dialog: {
|
|
1960
|
+
discardTitle: string;
|
|
1961
|
+
discardDescription: string;
|
|
1962
|
+
discardAction: string;
|
|
1963
|
+
discardCancel: string;
|
|
1964
|
+
};
|
|
1965
|
+
embed: {
|
|
1966
|
+
video: EmbedMessages;
|
|
1967
|
+
map: EmbedMessages;
|
|
1968
|
+
generic: EmbedMessages;
|
|
1969
|
+
privacy: string;
|
|
1970
|
+
};
|
|
1971
|
+
list: {
|
|
1972
|
+
notIncluded: string;
|
|
1973
|
+
};
|
|
1974
|
+
listView: {
|
|
1975
|
+
unread: string;
|
|
1976
|
+
};
|
|
1977
|
+
navigation: {
|
|
1978
|
+
skipToContent: string;
|
|
1979
|
+
main: string;
|
|
1980
|
+
app: string;
|
|
1981
|
+
menu: string;
|
|
1982
|
+
collapse: string;
|
|
1983
|
+
expand: string;
|
|
1984
|
+
};
|
|
1985
|
+
pagination: {
|
|
1986
|
+
label: string;
|
|
1987
|
+
summary: (from: number, to: number, total: number) => string;
|
|
1988
|
+
pageSize: string;
|
|
1989
|
+
previous: string;
|
|
1990
|
+
next: string;
|
|
1991
|
+
page: (page: number) => string;
|
|
1992
|
+
pageOf: (page: number, total: number) => string;
|
|
1993
|
+
};
|
|
1994
|
+
quickSearch: {
|
|
1995
|
+
placeholder: string;
|
|
1996
|
+
suggestions: string;
|
|
1997
|
+
allResults: (query: string) => string;
|
|
1998
|
+
noResults: (query: string) => string;
|
|
1999
|
+
searchAll: (query: string) => string;
|
|
2000
|
+
navigate: string;
|
|
2001
|
+
open: string;
|
|
2002
|
+
};
|
|
2003
|
+
searchField: {
|
|
2004
|
+
clear: string;
|
|
2005
|
+
};
|
|
2006
|
+
select: {
|
|
2007
|
+
placeholder: string;
|
|
2008
|
+
clearSelection: string;
|
|
2009
|
+
};
|
|
2010
|
+
combobox: {
|
|
2011
|
+
placeholder: string;
|
|
2012
|
+
};
|
|
2013
|
+
slider: {
|
|
2014
|
+
minimum: (label: string) => string;
|
|
2015
|
+
maximum: (label: string) => string;
|
|
2016
|
+
};
|
|
2017
|
+
/** scrollRegion: name of a table that scrolls sideways and has no caption. */
|
|
2018
|
+
table: {
|
|
2019
|
+
columns: string;
|
|
2020
|
+
showColumns: string;
|
|
2021
|
+
scrollRegion: string;
|
|
2022
|
+
};
|
|
2023
|
+
textField: {
|
|
2024
|
+
counter: (count: number, limit: number) => string;
|
|
2025
|
+
tooMany: (over: number) => string;
|
|
2026
|
+
/** Announcement after a pause. */
|
|
2027
|
+
charactersLeft: (left: number) => string;
|
|
2028
|
+
charactersTooMany: (over: number) => string;
|
|
2029
|
+
};
|
|
2030
|
+
upload: {
|
|
2031
|
+
title: string;
|
|
2032
|
+
dropTitle: string;
|
|
2033
|
+
chooseFiles: string;
|
|
2034
|
+
chooseFile: string;
|
|
2035
|
+
listLabel: string;
|
|
2036
|
+
cancel: (name: string) => string;
|
|
2037
|
+
remove: (name: string) => string;
|
|
2038
|
+
retry: (name: string) => string;
|
|
2039
|
+
retryShort: string;
|
|
2040
|
+
uploading: (name: string) => string;
|
|
2041
|
+
progress: (loaded: string, total: string, percent: number) => string;
|
|
2042
|
+
typeNotAllowed: (names: string, types: string) => string;
|
|
2043
|
+
tooLarge: (size: string, max: string) => string;
|
|
2044
|
+
tooMany: (max: number) => string;
|
|
2045
|
+
uploaded: (name: string) => string;
|
|
2046
|
+
failed: (name: string, error: string) => string;
|
|
2047
|
+
};
|
|
2048
|
+
}
|
|
2049
|
+
/** Texts of the Embed consent for one type. provider: the service (“Example Video”), to: who receives the data (“Example Inc.”). */
|
|
2050
|
+
interface EmbedMessages {
|
|
2051
|
+
title: string;
|
|
2052
|
+
body: (provider: string | undefined, to: string | undefined) => string;
|
|
2053
|
+
bodyCompact: (provider: string | undefined, company: string | undefined, to: string | undefined) => string;
|
|
2054
|
+
load: string;
|
|
2055
|
+
remember: (provider: string | undefined) => string;
|
|
2056
|
+
}
|
|
2057
|
+
|
|
2058
|
+
declare const de: Messages;
|
|
2059
|
+
|
|
2060
|
+
/** English (default and fallback). */
|
|
2061
|
+
declare const en: Messages;
|
|
2062
|
+
|
|
2063
|
+
/**
|
|
2064
|
+
* Own texts for all components below, e.g. another language or a different tone:
|
|
2065
|
+
* <MessagesProvider messages={{ ...enMessages, common: { ...enMessages.common, close: 'Fermer' } }}>
|
|
2066
|
+
* Wins over the built-in languages. Props of a single component still win over both.
|
|
2067
|
+
*/
|
|
2068
|
+
declare function MessagesProvider({ messages, children }: {
|
|
2069
|
+
messages: Messages;
|
|
2070
|
+
children: ReactNode;
|
|
2071
|
+
}): react.JSX.Element;
|
|
2072
|
+
/** The built-in texts for the current language. */
|
|
2073
|
+
declare function useMessages(): Messages;
|
|
1865
2074
|
|
|
1866
2075
|
interface DatePickerTexts extends CalendarTexts {
|
|
1867
2076
|
openCalendar: string;
|
|
1868
2077
|
done: string;
|
|
1869
2078
|
time: string;
|
|
1870
2079
|
presets: string;
|
|
1871
|
-
/** Validation – name the rule, never just
|
|
2080
|
+
/** Validation – name the rule, never just “invalid date”. */
|
|
1872
2081
|
beforeMin: (date: string) => string;
|
|
1873
2082
|
afterMax: (date: string) => string;
|
|
1874
2083
|
unavailable: string;
|
|
1875
2084
|
reversed: string;
|
|
1876
2085
|
}
|
|
2086
|
+
/** English defaults. The components use the texts of the current language (see i18n). */
|
|
1877
2087
|
declare const defaultDatePickerTexts: Omit<DatePickerTexts, keyof CalendarTexts>;
|
|
1878
2088
|
interface PickerBase {
|
|
1879
2089
|
label?: ReactNode;
|
|
@@ -1893,7 +2103,7 @@ interface DatePickerProps<T extends DateValue> extends Omit<DatePickerProps$1<T>
|
|
|
1893
2103
|
}
|
|
1894
2104
|
/**
|
|
1895
2105
|
* Date picker – type a date or pick it. The field is the main input, the calendar is a
|
|
1896
|
-
* helper: the button
|
|
2106
|
+
* helper: the button “Open calendar” (or Alt + ↓) opens it, picking a day closes it and focus returns to the
|
|
1897
2107
|
* field. `granularity="minute"` makes it a date + time picker with a time field in the panel.
|
|
1898
2108
|
*/
|
|
1899
2109
|
declare function DatePicker<T extends DateValue>({ label, description, errorMessage, size, overlay, showWeekNumbers, texts, className, ...props }: DatePickerProps<T>): react.JSX.Element;
|
|
@@ -1904,8 +2114,11 @@ interface DateRangePreset {
|
|
|
1904
2114
|
end: DateValue;
|
|
1905
2115
|
};
|
|
1906
2116
|
}
|
|
1907
|
-
/**
|
|
1908
|
-
|
|
2117
|
+
/**
|
|
2118
|
+
* The default presets (Today … Last month), relative to today in the local time zone.
|
|
2119
|
+
* Labels: own ones win, else those of `messages` (default English; the DateRangePicker passes the current language).
|
|
2120
|
+
*/
|
|
2121
|
+
declare function defaultDatePresets(labels?: Partial<Record<'today' | 'yesterday' | 'last7' | 'last14' | 'last30' | 'thisMonth' | 'lastMonth', string>>, messages?: Messages): DateRangePreset[];
|
|
1909
2122
|
interface DateRangePickerProps<T extends DateValue> extends Omit<DateRangePickerProps$1<T>, 'children' | 'className' | 'style'>, PickerBase {
|
|
1910
2123
|
/** true: the default presets (Today … Last month) · own list · none. Fits dashboards and filters. */
|
|
1911
2124
|
presets?: boolean | DateRangePreset[];
|
|
@@ -1968,7 +2181,7 @@ interface FigureProps {
|
|
|
1968
2181
|
children: ReactNode;
|
|
1969
2182
|
/** Describes what matters (adds to the image – never repeat the alt text). */
|
|
1970
2183
|
caption?: ReactNode;
|
|
1971
|
-
/** Names the source (
|
|
2184
|
+
/** Names the source (“© Photographer”). */
|
|
1972
2185
|
credit?: ReactNode;
|
|
1973
2186
|
className?: string;
|
|
1974
2187
|
}
|
|
@@ -1986,17 +2199,20 @@ interface EmbedTexts {
|
|
|
1986
2199
|
remember: string;
|
|
1987
2200
|
privacy: string;
|
|
1988
2201
|
}
|
|
1989
|
-
/**
|
|
1990
|
-
|
|
2202
|
+
/**
|
|
2203
|
+
* Texts per type. provider: the service (“Example Video”) · company: who runs it, when it differs (“Example Inc.”).
|
|
2204
|
+
* `messages`: the language (default English); the component passes the current one.
|
|
2205
|
+
*/
|
|
2206
|
+
declare function defaultEmbedTexts(type: EmbedType, provider?: string, company?: string, messages?: Messages): EmbedTexts;
|
|
1991
2207
|
interface EmbedConsentProps {
|
|
1992
2208
|
type?: EmbedType;
|
|
1993
|
-
/**
|
|
2209
|
+
/** Name of the service that provides the content (“Example Video”). */
|
|
1994
2210
|
provider?: string;
|
|
1995
|
-
/** Who receives the data, when it differs (
|
|
2211
|
+
/** Who receives the data, when it differs from the service (“Example Inc.”). */
|
|
1996
2212
|
company?: string;
|
|
1997
|
-
/** The embed URL – requested only after consent. Prefer privacy-friendly
|
|
2213
|
+
/** The embed URL – requested only after consent. Prefer the privacy-friendly embed URL of the service, if it offers one. */
|
|
1998
2214
|
src: string;
|
|
1999
|
-
/** Required: names the iframe (
|
|
2215
|
+
/** Required: names the iframe (“Video: Product tour”). */
|
|
2000
2216
|
title: string;
|
|
2001
2217
|
/** Ratio of the final embed. The placeholder may grow so text never clips. */
|
|
2002
2218
|
ratio?: Exclude<ImageRatio, 'original'>;
|
|
@@ -2004,9 +2220,9 @@ interface EmbedConsentProps {
|
|
|
2004
2220
|
privacyHref: string;
|
|
2005
2221
|
/** Stored consent from the consent manager – loads at once. */
|
|
2006
2222
|
isConsented?: boolean;
|
|
2007
|
-
/** The user clicked
|
|
2223
|
+
/** The user clicked “Load”; `remember` = “Always load …” checked – store it per provider in the consent manager. */
|
|
2008
2224
|
onConsent?: (remember: boolean) => void;
|
|
2009
|
-
/** iframe permissions, e.g.
|
|
2225
|
+
/** iframe permissions, e.g. “autoplay; encrypted-media; picture-in-picture; fullscreen”. */
|
|
2010
2226
|
allow?: string;
|
|
2011
2227
|
texts?: Partial<EmbedTexts>;
|
|
2012
2228
|
className?: string;
|
|
@@ -2018,4 +2234,4 @@ interface EmbedConsentProps {
|
|
|
2018
2234
|
*/
|
|
2019
2235
|
declare function EmbedConsent({ type, provider, company, src, title, ratio, privacyHref, isConsented, onConsent, allow, texts, className, }: EmbedConsentProps): react.JSX.Element;
|
|
2020
2236
|
|
|
2021
|
-
export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Alert, AlertDialog, type AlertDialogProps, type AlertDialogTone, type AlertProps, type AlertTone, AppHeader, type AppHeaderProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarStatus, Badge, BadgeCount, type BadgeCountProps, BadgeDot, type BadgeDotProps, type BadgeProps, type BadgeTone, BottomSheet, type BottomSheetProps, BottomTabBar, type BottomTabBarProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, type BulkAction, BulkActionBar, type BulkActionBarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, type CalendarTexts, Card, type CardProps, Cell, type CellProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type ChoiceSize, Column, type ColumnOption, type ColumnProps, ColumnsMenu, type ColumnsMenuProps, Combobox, type ComboboxProps, DateField, type DateFieldProps, DatePicker, type DatePickerProps, type DatePickerTexts, DateRangePicker, type DateRangePickerProps, type DateRangePreset, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListProps, Dialog, type DialogAction, type DialogDiscardText, type DialogProps, Drawer, type DrawerProps, Dropzone, type DropzoneProps, EmbedConsent, type EmbedConsentProps, type EmbedTexts, type EmbedType, EmptyState, type EmptyStateAction, type EmptyStateProps, type EmptyStateSize, type EmptyStateType, FieldFooter, FieldLabel, Figure, type FigureProps, FileItem, type FileItemProps, FileTile, type FileTileProps, FileTrigger, type FileTriggerProps, Highlight, IconButton, type IconButtonProps, Image, type ImageProps, type ImageRatio, InputAction, type InputActionProps, type InputSize, Link, type LinkProps, List, ListBox, ListBoxMessage, type ListBoxProps, ListBoxSection, type ListBoxSectionProps, type ListBoxSize, ListCard, type ListCardProps, ListItem, type ListItemProps, type ListProps, ListRow, ListRowIcon, type ListRowProps, type ListType, ListView, type ListViewProps, MediaPlayButton, type MediaPlayButtonProps, Menu, MenuButton, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuTrigger, type MenuTriggerProps, type NavAction, NavGroup, type NavGroupProps, NavItem, type NavItemProps, NavList, type NavListProps, NavSection, type NavSectionProps, type NavVariant, NumberField, type NumberFieldProps, Option, type OptionProps, Pagination, type PaginationProps, Popover, type PopoverProps, PopoverTrigger, ProgressBar, type ProgressBarProps, QuickSearch, type QuickSearchProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, Row, SearchField, type SearchFieldProps, SearchResult, type SearchResultProps, type SearchResultType, Select, type SelectOverlay, type SelectProps, SideNav, type SideNavProps, type SideNavUser, SiteHeader, type SiteHeaderProps, Skeleton, type SkeletonProps, SkipLink, type SkipLinkProps, Slider, SliderField, type SliderFieldProps, type SliderProps, Spinner, type SpinnerProps, StaticTable, type StaticTableProps, Submenu, type SubmenuProps, Switch, type SwitchProps, Tab, TabBarItem, type TabBarItemProps, TabBarMore, type TabBarMoreProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableHeader, type TableProps, Tabs, type TabsProps, Tag, TagGroup, type TagGroupProps, type TagProps, TextField, type TextFieldProps, TimeField, type TimeFieldProps, type TimeSlot, type ToastAction, type ToastOptions, ToastRegion, type ToastRegionProps, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Toggletip, type ToggletipProps, Toolbar, type ToolbarProps, ToolbarSeparator, Tooltip, type TooltipProps, TooltipTrigger, UploadField, type UploadFieldProps, type UploadFile, type UploadTexts, defaultCalendarTexts, defaultDatePickerTexts, defaultDatePresets, defaultEmbedTexts, defaultUploadTexts, formatBytes, initialsOf, toast };
|
|
2237
|
+
export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Alert, AlertDialog, type AlertDialogProps, type AlertDialogTone, type AlertProps, type AlertTone, AppHeader, type AppHeaderProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarStatus, Badge, BadgeCount, type BadgeCountProps, BadgeDot, type BadgeDotProps, type BadgeProps, type BadgeTone, BottomSheet, type BottomSheetProps, BottomTabBar, type BottomTabBarProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, type BulkAction, BulkActionBar, type BulkActionBarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, type CalendarTexts, Card, type CardProps, Cell, type CellProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type ChoiceSize, Column, type ColumnOption, type ColumnProps, ColumnsMenu, type ColumnsMenuProps, Combobox, type ComboboxProps, DateField, type DateFieldProps, DatePicker, type DatePickerProps, type DatePickerTexts, DateRangePicker, type DateRangePickerProps, type DateRangePreset, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListProps, Dialog, type DialogAction, type DialogDiscardText, type DialogProps, Drawer, type DrawerProps, Dropzone, type DropzoneProps, EmbedConsent, type EmbedConsentProps, type EmbedMessages, type EmbedTexts, type EmbedType, EmptyState, type EmptyStateAction, type EmptyStateProps, type EmptyStateSize, type EmptyStateType, FieldFooter, FieldLabel, Figure, type FigureProps, FileItem, type FileItemProps, FileTile, type FileTileProps, FileTrigger, type FileTriggerProps, Highlight, IconButton, type IconButtonProps, Image, type ImageProps, type ImageRatio, InputAction, type InputActionProps, type InputSize, Link, type LinkProps, List, ListBox, ListBoxMessage, type ListBoxProps, ListBoxSection, type ListBoxSectionProps, type ListBoxSize, ListCard, type ListCardProps, ListItem, type ListItemProps, type ListProps, ListRow, ListRowIcon, type ListRowProps, type ListType, ListView, type ListViewProps, MediaPlayButton, type MediaPlayButtonProps, Menu, MenuButton, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuTrigger, type MenuTriggerProps, type Messages, MessagesProvider, type NavAction, NavGroup, type NavGroupProps, NavItem, type NavItemProps, NavList, type NavListProps, NavSection, type NavSectionProps, type NavVariant, NumberField, type NumberFieldProps, Option, type OptionProps, Pagination, type PaginationProps, Popover, type PopoverProps, PopoverTrigger, ProgressBar, type ProgressBarProps, QuickSearch, type QuickSearchProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, Row, SearchField, type SearchFieldProps, SearchResult, type SearchResultProps, type SearchResultType, Select, type SelectOverlay, type SelectProps, SideNav, type SideNavProps, type SideNavUser, SiteHeader, type SiteHeaderProps, Skeleton, type SkeletonProps, SkipLink, type SkipLinkProps, Slider, SliderField, type SliderFieldProps, type SliderProps, Spinner, type SpinnerProps, StaticTable, type StaticTableProps, Submenu, type SubmenuProps, Switch, type SwitchProps, Tab, TabBarItem, type TabBarItemProps, TabBarMore, type TabBarMoreProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableHeader, type TableProps, Tabs, type TabsProps, Tag, TagGroup, type TagGroupProps, type TagProps, TextField, type TextFieldProps, TimeField, type TimeFieldProps, type TimeSlot, type ToastAction, type ToastOptions, ToastRegion, type ToastRegionProps, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Toggletip, type ToggletipProps, Toolbar, type ToolbarProps, ToolbarSeparator, Tooltip, type TooltipProps, TooltipTrigger, UploadField, type UploadFieldProps, type UploadFile, type UploadTexts, de as deMessages, defaultCalendarTexts, defaultDatePickerTexts, defaultDatePresets, defaultEmbedTexts, defaultUploadTexts, en as enMessages, formatBytes, initialsOf, toast, useMessages };
|