@allxsmith/bestax-bulma 5.66.2 → 5.67.1
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/bestax.css +1 -1
- package/dist/bestax.css.map +1 -1
- package/dist/esm/components/Command.js.map +1 -1
- package/dist/esm/components/Dropdown.js +8 -2
- package/dist/esm/components/Dropdown.js.map +1 -1
- package/dist/esm/components/HoverCard.js.map +1 -1
- package/dist/esm/components/Loading.js +3 -3
- package/dist/esm/components/Loading.js.map +1 -1
- package/dist/esm/components/Modal.js.map +1 -1
- package/dist/esm/components/Popover.js.map +1 -1
- package/dist/esm/components/Sidebar.js +21 -29
- package/dist/esm/components/Sidebar.js.map +1 -1
- package/dist/esm/components/Toast.js +6 -8
- package/dist/esm/components/Toast.js.map +1 -1
- package/dist/esm/elements/IconButton.js.map +1 -1
- package/dist/esm/form/Combobox.js.map +1 -1
- package/dist/esm/form/Control.js +2 -5
- package/dist/esm/form/Control.js.map +1 -1
- package/dist/esm/form/DateInputBase.js.map +1 -1
- package/dist/esm/form/DateRangeInputBase.js.map +1 -1
- package/dist/esm/form/DateTimeInputBase.js.map +1 -1
- package/dist/esm/form/Field.js +2 -4
- package/dist/esm/form/Field.js.map +1 -1
- package/dist/esm/form/TreeSelect.js.map +1 -1
- package/dist/esm/form/_pickerInternals/Calendar.js +12 -5
- package/dist/esm/form/_pickerInternals/Calendar.js.map +1 -1
- package/dist/esm/form/_pickerInternals/PickerPopover.js +6 -2
- package/dist/esm/form/_pickerInternals/PickerPopover.js.map +1 -1
- package/dist/esm/helpers/scrollLock.js +47 -11
- package/dist/esm/helpers/scrollLock.js.map +1 -1
- package/dist/esm/helpers/useAnchoredPosition.js +35 -11
- package/dist/esm/helpers/useAnchoredPosition.js.map +1 -1
- package/dist/esm/layout/Level.js +2 -2
- package/dist/esm/layout/Level.js.map +1 -1
- package/dist/extras.css +1 -1
- package/dist/extras.css.map +1 -1
- package/dist/index.cjs +139 -75
- package/dist/index.cjs.map +1 -1
- package/dist/types/components/Command.d.ts +5 -5
- package/dist/types/components/Dropdown.d.ts +5 -1
- package/dist/types/components/HoverCard.d.ts +2 -4
- package/dist/types/components/Modal.d.ts +6 -3
- package/dist/types/components/Popover.d.ts +1 -3
- package/dist/types/components/Sidebar.d.ts +6 -2
- package/dist/types/components/Toast.d.ts +3 -1
- package/dist/types/elements/IconButton.d.ts +2 -5
- package/dist/types/form/Combobox.d.ts +13 -13
- package/dist/types/form/DateInputBase.d.ts +8 -1
- package/dist/types/form/DateRangeInputBase.d.ts +5 -0
- package/dist/types/form/DateTimeInputBase.d.ts +8 -1
- package/dist/types/form/TreeSelect.d.ts +4 -4
- package/dist/types/helpers/scrollLock.d.ts +4 -4
- package/dist/types/helpers/useAnchoredPosition.d.ts +14 -12
- package/dist/types/layout/Level.d.ts +10 -0
- package/dist/types-cjs/components/Command.d.ts +5 -5
- package/dist/types-cjs/components/Dropdown.d.ts +5 -1
- package/dist/types-cjs/components/HoverCard.d.ts +2 -4
- package/dist/types-cjs/components/Modal.d.ts +6 -3
- package/dist/types-cjs/components/Popover.d.ts +1 -3
- package/dist/types-cjs/components/Sidebar.d.ts +6 -2
- package/dist/types-cjs/components/Toast.d.ts +3 -1
- package/dist/types-cjs/elements/IconButton.d.ts +2 -5
- package/dist/types-cjs/form/Combobox.d.ts +13 -13
- package/dist/types-cjs/form/DateInputBase.d.ts +8 -1
- package/dist/types-cjs/form/DateRangeInputBase.d.ts +5 -0
- package/dist/types-cjs/form/DateTimeInputBase.d.ts +8 -1
- package/dist/types-cjs/form/TreeSelect.d.ts +4 -4
- package/dist/types-cjs/helpers/scrollLock.d.ts +4 -4
- package/dist/types-cjs/helpers/useAnchoredPosition.d.ts +14 -12
- package/dist/types-cjs/layout/Level.d.ts +10 -0
- package/dist/versions/bestax-no-dark-mode.css +1 -1
- package/dist/versions/bestax-no-dark-mode.css.map +1 -1
- package/dist/versions/bestax-no-helpers-prefixed.css +1 -1
- package/dist/versions/bestax-no-helpers-prefixed.css.map +1 -1
- package/dist/versions/bestax-no-helpers.css +1 -1
- package/dist/versions/bestax-no-helpers.css.map +1 -1
- package/dist/versions/bestax-prefixed.css +1 -1
- package/dist/versions/bestax-prefixed.css.map +1 -1
- package/package.json +1 -1
- package/src/scss/components/_loading.scss +17 -3
- package/src/scss/form/_radio.scss +5 -2
|
@@ -95,7 +95,7 @@ export interface CommandActionsProps extends CommandBaseProps {
|
|
|
95
95
|
* @defaultValue 'No results'
|
|
96
96
|
*/
|
|
97
97
|
empty?: React.ReactNode;
|
|
98
|
-
/**
|
|
98
|
+
/** With `actions`, the Command renders its own parts. */
|
|
99
99
|
children?: never;
|
|
100
100
|
}
|
|
101
101
|
/** Props for a Command built from parts. */
|
|
@@ -108,13 +108,13 @@ export interface CommandPartsProps extends CommandBaseProps {
|
|
|
108
108
|
* with a warning in development.
|
|
109
109
|
*/
|
|
110
110
|
children?: React.ReactNode;
|
|
111
|
-
/**
|
|
111
|
+
/** Built from parts, the app renders the items. */
|
|
112
112
|
actions?: never;
|
|
113
|
-
/**
|
|
113
|
+
/** Built from parts, the app filters. */
|
|
114
114
|
filter?: never;
|
|
115
|
-
/**
|
|
115
|
+
/** Built from parts, `Command.Input` takes the placeholder. */
|
|
116
116
|
placeholder?: never;
|
|
117
|
-
/**
|
|
117
|
+
/** Built from parts, `Command.Empty` is the empty message. */
|
|
118
118
|
empty?: never;
|
|
119
119
|
}
|
|
120
120
|
/**
|
|
@@ -38,7 +38,11 @@ export interface DropdownProps extends Omit<React.HTMLAttributes<HTMLDivElement>
|
|
|
38
38
|
onActiveChange?: (active: boolean) => void;
|
|
39
39
|
/** Close dropdown when a menu item is clicked, or activated with Enter or Space. */
|
|
40
40
|
closeOnClick?: boolean;
|
|
41
|
-
/**
|
|
41
|
+
/**
|
|
42
|
+
* Root element ID. The trigger gets `<id>-trigger` and the menu `<id>-menu`,
|
|
43
|
+
* which the trigger's `aria-controls` and the menu's `aria-labelledby` point
|
|
44
|
+
* at. Without one, both ids come from `useId`.
|
|
45
|
+
*/
|
|
42
46
|
id?: string;
|
|
43
47
|
}
|
|
44
48
|
/**
|
|
@@ -90,10 +90,8 @@ export interface HoverCardProps extends Omit<React.HTMLAttributes<HTMLSpanElemen
|
|
|
90
90
|
* it only after the rest of the page, and focus leaving the trigger on the
|
|
91
91
|
* way closes it, so keyboard users can open it, read it and close it with
|
|
92
92
|
* Escape, and whatever it links to has to be reachable from the page as
|
|
93
|
-
* well.
|
|
94
|
-
*
|
|
95
|
-
* Theming variables set on an ancestor of the trigger reach it only when its
|
|
96
|
-
* container is inside that ancestor.
|
|
93
|
+
* well. Theming variables set on an ancestor of the trigger reach it only
|
|
94
|
+
* when its container is inside that ancestor.
|
|
97
95
|
* @defaultValue false
|
|
98
96
|
*/
|
|
99
97
|
appendToBody?: boolean;
|
|
@@ -48,9 +48,12 @@ export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
|
|
|
48
48
|
*/
|
|
49
49
|
closeOnEscape?: boolean;
|
|
50
50
|
/**
|
|
51
|
-
* Lock
|
|
52
|
-
*
|
|
53
|
-
*
|
|
51
|
+
* Lock page scroll while the modal is active, padding the page by the room
|
|
52
|
+
* its scrollbar took so the content stays put. An element fixed to the
|
|
53
|
+
* window's right edge, such as a `fixed` Navbar, isn't padded, and moves by
|
|
54
|
+
* the scrollbar's width while the page is locked. Ref-counted and shared
|
|
55
|
+
* with `Dialog`, `Sidebar` and `Loading`, so whichever overlay closes first
|
|
56
|
+
* does not unlock the page underneath one that is still open.
|
|
54
57
|
* @defaultValue true
|
|
55
58
|
*/
|
|
56
59
|
lockScroll?: boolean;
|
|
@@ -61,9 +61,7 @@ export interface PopoverProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
|
|
|
61
61
|
* `ConfigProvider` sets, `document.body` by default, fixed to the viewport,
|
|
62
62
|
* so an ancestor's `overflow`, `transform` or stacking context can't clip
|
|
63
63
|
* it. The panel then shows from the commit after hydration, never in server
|
|
64
|
-
* markup.
|
|
65
|
-
* and scroll, so it doesn't follow content that changes size while it is
|
|
66
|
-
* open. Theming variables set on an ancestor of the trigger reach it only
|
|
64
|
+
* markup. Theming variables set on an ancestor of the trigger reach it only
|
|
67
65
|
* when its container is inside that ancestor.
|
|
68
66
|
* @defaultValue false
|
|
69
67
|
*/
|
|
@@ -33,7 +33,7 @@ export interface SidebarProps extends Omit<React.HTMLAttributes<HTMLElement>, 'c
|
|
|
33
33
|
fullWidth?: boolean;
|
|
34
34
|
/**
|
|
35
35
|
* Show an overlay behind the sidebar, which makes it modal: it gets
|
|
36
|
-
* `aria-modal="true"`, locks
|
|
36
|
+
* `aria-modal="true"`, locks page scroll, and keeps Tab and Shift+Tab
|
|
37
37
|
* inside it while it is the topmost modal overlay. A Modal or Dialog opened
|
|
38
38
|
* over it, even one rendered inside it, holds Tab until it closes. Without
|
|
39
39
|
* an overlay the sidebar isn't modal and holds no Tab: on the page, Tab
|
|
@@ -60,7 +60,11 @@ export interface SidebarProps extends Omit<React.HTMLAttributes<HTMLElement>, 'c
|
|
|
60
60
|
canCancel?: boolean;
|
|
61
61
|
/** Content to display in the sidebar. */
|
|
62
62
|
children?: React.ReactNode;
|
|
63
|
-
/**
|
|
63
|
+
/**
|
|
64
|
+
* Renders inline instead of using a portal. Without it, the sidebar renders
|
|
65
|
+
* inline on the server and while hydrating, moving into the portal once the
|
|
66
|
+
* client takes over, so hydration matches.
|
|
67
|
+
*/
|
|
64
68
|
inline?: boolean;
|
|
65
69
|
}
|
|
66
70
|
/**
|
|
@@ -57,7 +57,9 @@ export interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
|
|
|
57
57
|
*/
|
|
58
58
|
container?: string | HTMLElement;
|
|
59
59
|
/**
|
|
60
|
-
* Renders inline instead of using a portal.
|
|
60
|
+
* Renders inline instead of using a portal. Without it, a toast renders
|
|
61
|
+
* inline on the server and while hydrating, moving into the portal once the
|
|
62
|
+
* client takes over, so hydration matches. Through `toast.show()`, a toast
|
|
61
63
|
* already renders inline in `ToastContainer`'s stack for its position, and
|
|
62
64
|
* `inline` keeps one with a `container` in that stack too.
|
|
63
65
|
*/
|
|
@@ -39,7 +39,7 @@ export interface IconButtonLabelledBy {
|
|
|
39
39
|
/** The id of the element whose text names the button, in place of `aria-label`. */
|
|
40
40
|
'aria-labelledby': string;
|
|
41
41
|
/**
|
|
42
|
-
*
|
|
42
|
+
* Not with `aria-labelledby`, which already names the button.
|
|
43
43
|
* Declared so the two can't be passed together.
|
|
44
44
|
*/
|
|
45
45
|
'aria-label'?: undefined;
|
|
@@ -54,10 +54,7 @@ export interface IconButtonLabel {
|
|
|
54
54
|
* development.
|
|
55
55
|
*/
|
|
56
56
|
'aria-label': string;
|
|
57
|
-
/**
|
|
58
|
-
* @internal Not with `aria-label`. Declared so the two can't be passed
|
|
59
|
-
* together.
|
|
60
|
-
*/
|
|
57
|
+
/** Not with `aria-label`. Declared so the two can't be passed together. */
|
|
61
58
|
'aria-labelledby'?: undefined;
|
|
62
59
|
}
|
|
63
60
|
/**
|
|
@@ -165,7 +165,7 @@ interface ComboboxDataBaseProps extends ComboboxBaseProps {
|
|
|
165
165
|
* `Combobox.Input`.
|
|
166
166
|
*/
|
|
167
167
|
'aria-labelledby'?: string;
|
|
168
|
-
/**
|
|
168
|
+
/** With `data`, the Combobox renders its own parts. */
|
|
169
169
|
children?: never;
|
|
170
170
|
}
|
|
171
171
|
/** Props for a Combobox given `data`, with one value. */
|
|
@@ -205,7 +205,7 @@ export interface ComboboxSingleDataProps extends ComboboxDataBaseProps {
|
|
|
205
205
|
* `multiple` the array.
|
|
206
206
|
*/
|
|
207
207
|
onChange?: (value: string | null) => void;
|
|
208
|
-
/**
|
|
208
|
+
/** With one value there are no tags to name. */
|
|
209
209
|
ariaCloseLabel?: never;
|
|
210
210
|
}
|
|
211
211
|
/** Props for a Combobox given `data`, with several values. */
|
|
@@ -253,27 +253,27 @@ export interface ComboboxPartsProps extends ComboboxBaseProps {
|
|
|
253
253
|
* @defaultValue false
|
|
254
254
|
*/
|
|
255
255
|
multiple?: boolean;
|
|
256
|
-
/**
|
|
256
|
+
/** Built from parts, there's no `data`. */
|
|
257
257
|
data?: never;
|
|
258
|
-
/**
|
|
258
|
+
/** Built from parts, the app keeps the value. */
|
|
259
259
|
value?: never;
|
|
260
|
-
/**
|
|
260
|
+
/** Built from parts, the app keeps the value. */
|
|
261
261
|
defaultValue?: never;
|
|
262
|
-
/**
|
|
262
|
+
/** Built from parts, `onSelect` reports a pick. */
|
|
263
263
|
onChange?: never;
|
|
264
|
-
/**
|
|
264
|
+
/** Built from parts, `Combobox.Input` takes the placeholder. */
|
|
265
265
|
placeholder?: never;
|
|
266
|
-
/**
|
|
266
|
+
/** Built from parts, the app posts the value. */
|
|
267
267
|
name?: never;
|
|
268
|
-
/**
|
|
268
|
+
/** Built from parts, `Combobox.Empty` is the empty message. */
|
|
269
269
|
empty?: never;
|
|
270
|
-
/**
|
|
270
|
+
/** Built from parts, `Combobox.Item` renders its own content. */
|
|
271
271
|
itemTemplate?: never;
|
|
272
|
-
/**
|
|
272
|
+
/** Built from parts, `Combobox.Input` takes `disabled`. */
|
|
273
273
|
disabled?: never;
|
|
274
|
-
/**
|
|
274
|
+
/** Built from parts, `Combobox.Input` takes `required`. */
|
|
275
275
|
required?: never;
|
|
276
|
-
/**
|
|
276
|
+
/** Built from parts, the app posts the value. */
|
|
277
277
|
form?: never;
|
|
278
278
|
}
|
|
279
279
|
/**
|
|
@@ -78,7 +78,14 @@ export interface DateInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
|
|
|
78
78
|
* the two can differ.
|
|
79
79
|
*/
|
|
80
80
|
locale?: string;
|
|
81
|
-
/**
|
|
81
|
+
/**
|
|
82
|
+
* Render the calendar inline (no popover).
|
|
83
|
+
* On a server-rendered page it marks today once the page hydrates, by
|
|
84
|
+
* the browser's clock rather than the server's. With no `value` or
|
|
85
|
+
* `defaultValue` it opens on the month the clock reads, and around the end
|
|
86
|
+
* of a month the server's clock and the browser's can read different
|
|
87
|
+
* months, so give it a date both render the same.
|
|
88
|
+
*/
|
|
82
89
|
inline?: boolean;
|
|
83
90
|
/**
|
|
84
91
|
* Use `<input type="date">` on coarse-pointer + small-viewport devices. At
|
|
@@ -65,6 +65,11 @@ export interface DateRangeInputBaseProps extends Omit<React.HTMLAttributes<HTMLD
|
|
|
65
65
|
/**
|
|
66
66
|
* Render the calendar inline, with no inputs and no popover. The hidden
|
|
67
67
|
* form inputs still carry the range.
|
|
68
|
+
* On a server-rendered page it marks today once the page hydrates, by
|
|
69
|
+
* the browser's clock rather than the server's. With no `value` or
|
|
70
|
+
* `defaultValue` it opens on the month the clock reads, and around the end
|
|
71
|
+
* of a month the server's clock and the browser's can read different
|
|
72
|
+
* months, so give it a date both render the same.
|
|
68
73
|
*/
|
|
69
74
|
inline?: boolean;
|
|
70
75
|
/**
|
|
@@ -59,7 +59,14 @@ export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<H
|
|
|
59
59
|
* the two can differ.
|
|
60
60
|
*/
|
|
61
61
|
locale?: string;
|
|
62
|
-
/**
|
|
62
|
+
/**
|
|
63
|
+
* Render the panel inline (no popover).
|
|
64
|
+
* On a server-rendered page it marks today once the page hydrates, by
|
|
65
|
+
* the browser's clock rather than the server's. With no `value` or
|
|
66
|
+
* `defaultValue` it opens on the month the clock reads, and around the end
|
|
67
|
+
* of a month the server's clock and the browser's can read different
|
|
68
|
+
* months, so give it a date both render the same.
|
|
69
|
+
*/
|
|
63
70
|
inline?: boolean;
|
|
64
71
|
/** Use `<input type="datetime-local">` on coarse-pointer devices. */
|
|
65
72
|
mobileNative?: boolean | 'auto';
|
|
@@ -209,9 +209,9 @@ export interface TreeSelectSingleProps extends TreeSelectBaseProps {
|
|
|
209
209
|
* @defaultValue true
|
|
210
210
|
*/
|
|
211
211
|
closeOnSelect?: boolean;
|
|
212
|
-
/**
|
|
212
|
+
/** Read with the checkbox modes only. */
|
|
213
213
|
checkedStrategy?: never;
|
|
214
|
-
/**
|
|
214
|
+
/** Read with the checkbox modes only. */
|
|
215
215
|
ariaCloseLabel?: never;
|
|
216
216
|
}
|
|
217
217
|
/** Props for a TreeSelect with a box on every item. */
|
|
@@ -253,9 +253,9 @@ export interface TreeSelectCheckboxProps extends TreeSelectBaseProps {
|
|
|
253
253
|
checkedStrategy?: TreeSelectCheckedStrategy;
|
|
254
254
|
/** Names each tag's button, in place of "Remove" and the item's label, as on Combobox. */
|
|
255
255
|
ariaCloseLabel?: string;
|
|
256
|
-
/**
|
|
256
|
+
/** Read with `'single'` only. */
|
|
257
257
|
parentsSelectable?: never;
|
|
258
|
-
/**
|
|
258
|
+
/** Read with `'single'` only: the panel stays open while boxes are checked. */
|
|
259
259
|
closeOnSelect?: never;
|
|
260
260
|
}
|
|
261
261
|
/**
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Locks (and ref-counted-ly unlocks)
|
|
3
|
-
*
|
|
4
|
-
*
|
|
2
|
+
* Locks (and ref-counted-ly unlocks) the page's scrolling while `active` is
|
|
3
|
+
* true. Safe to call from multiple components at once: the page is only
|
|
4
|
+
* given back once every active caller has released its lock.
|
|
5
5
|
*
|
|
6
6
|
* @function useScrollLock
|
|
7
|
-
* @param active - Whether this caller wants the
|
|
7
|
+
* @param active - Whether this caller wants the page's scrolling locked.
|
|
8
8
|
*/
|
|
9
9
|
export declare function useScrollLock(active: boolean): void;
|
|
@@ -62,11 +62,11 @@ export interface UseAnchoredPositionOptions {
|
|
|
62
62
|
*/
|
|
63
63
|
matchWidth?: boolean;
|
|
64
64
|
/**
|
|
65
|
-
* Measures again after each render of the component holding the hook,
|
|
66
|
-
*
|
|
67
|
-
*
|
|
68
|
-
*
|
|
69
|
-
*
|
|
65
|
+
* Measures again after each render of the component holding the hook,
|
|
66
|
+
* before the panel paints, for a panel whose content that component
|
|
67
|
+
* changes while it's open, as a filtered list's does. A change in size is
|
|
68
|
+
* followed without it too, but a frame later, so a panel above its anchor
|
|
69
|
+
* would show for a frame where its old height put it.
|
|
70
70
|
* @defaultValue false
|
|
71
71
|
*/
|
|
72
72
|
followContent?: boolean;
|
|
@@ -80,14 +80,16 @@ export declare function marginGap(panel: HTMLElement): number;
|
|
|
80
80
|
/**
|
|
81
81
|
* Places a floating panel against its anchor: resolves `auto` to a corner
|
|
82
82
|
* and, for a panel fixed to the viewport, works out its coordinates. It
|
|
83
|
-
* measures again on resize
|
|
84
|
-
* iframe's, when the anchor renders into one),
|
|
85
|
-
* anchor,
|
|
86
|
-
*
|
|
83
|
+
* measures again on resize, on any scroll of the anchor's window (an
|
|
84
|
+
* iframe's, when the anchor renders into one), and when the panel or the
|
|
85
|
+
* anchor changes size, so a fixed panel follows its anchor and its own
|
|
86
|
+
* content. Those measure once in the next frame, however many arrive before
|
|
87
|
+
* it. With `followContent` it also measures after each render. A
|
|
88
|
+
* measurement that changes nothing doesn't render again.
|
|
87
89
|
*
|
|
88
|
-
*
|
|
89
|
-
* paints. It needs both elements on the page while `active` is
|
|
90
|
-
* keeps the last placement when either is missing.
|
|
90
|
+
* The first measurement happens in a layout effect, so the panel is placed
|
|
91
|
+
* before it paints. It needs both elements on the page while `active` is
|
|
92
|
+
* on, and keeps the last placement when either is missing.
|
|
91
93
|
*
|
|
92
94
|
* @function useAnchoredPosition
|
|
93
95
|
* @param anchorRef - The element the panel opens from.
|
|
@@ -5,6 +5,16 @@ import { BulmaClassesProps, validColors } from '../helpers/useBulmaClasses.js';
|
|
|
5
5
|
* Props for the Level component.
|
|
6
6
|
*/
|
|
7
7
|
export interface LevelProps extends React.HTMLAttributes<HTMLElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
|
|
8
|
+
/**
|
|
9
|
+
* HTML element to render (default: `nav`, as in Bulma's markup). A `nav` is
|
|
10
|
+
* a `navigation` landmark, so keep it for a row of links. A row that is not
|
|
11
|
+
* navigation, such as figures or a toolbar, takes `div`, which is no
|
|
12
|
+
* landmark. `header` suits a level that opens a section and `footer` one
|
|
13
|
+
* that closes it. A `header` is a `banner` landmark, and a `footer` a
|
|
14
|
+
* `contentinfo` one, only when no `section`, `article`, `aside`, `nav` or
|
|
15
|
+
* `main` is around it.
|
|
16
|
+
*/
|
|
17
|
+
as?: 'nav' | 'div' | 'header' | 'footer';
|
|
8
18
|
/** Keeps the level horizontal on mobile (Bulma `is-mobile`). Without it
|
|
9
19
|
* the level stacks vertically below tablet. */
|
|
10
20
|
isMobile?: boolean;
|
|
@@ -95,7 +95,7 @@ export interface CommandActionsProps extends CommandBaseProps {
|
|
|
95
95
|
* @defaultValue 'No results'
|
|
96
96
|
*/
|
|
97
97
|
empty?: React.ReactNode;
|
|
98
|
-
/**
|
|
98
|
+
/** With `actions`, the Command renders its own parts. */
|
|
99
99
|
children?: never;
|
|
100
100
|
}
|
|
101
101
|
/** Props for a Command built from parts. */
|
|
@@ -108,13 +108,13 @@ export interface CommandPartsProps extends CommandBaseProps {
|
|
|
108
108
|
* with a warning in development.
|
|
109
109
|
*/
|
|
110
110
|
children?: React.ReactNode;
|
|
111
|
-
/**
|
|
111
|
+
/** Built from parts, the app renders the items. */
|
|
112
112
|
actions?: never;
|
|
113
|
-
/**
|
|
113
|
+
/** Built from parts, the app filters. */
|
|
114
114
|
filter?: never;
|
|
115
|
-
/**
|
|
115
|
+
/** Built from parts, `Command.Input` takes the placeholder. */
|
|
116
116
|
placeholder?: never;
|
|
117
|
-
/**
|
|
117
|
+
/** Built from parts, `Command.Empty` is the empty message. */
|
|
118
118
|
empty?: never;
|
|
119
119
|
}
|
|
120
120
|
/**
|
|
@@ -38,7 +38,11 @@ export interface DropdownProps extends Omit<React.HTMLAttributes<HTMLDivElement>
|
|
|
38
38
|
onActiveChange?: (active: boolean) => void;
|
|
39
39
|
/** Close dropdown when a menu item is clicked, or activated with Enter or Space. */
|
|
40
40
|
closeOnClick?: boolean;
|
|
41
|
-
/**
|
|
41
|
+
/**
|
|
42
|
+
* Root element ID. The trigger gets `<id>-trigger` and the menu `<id>-menu`,
|
|
43
|
+
* which the trigger's `aria-controls` and the menu's `aria-labelledby` point
|
|
44
|
+
* at. Without one, both ids come from `useId`.
|
|
45
|
+
*/
|
|
42
46
|
id?: string;
|
|
43
47
|
}
|
|
44
48
|
/**
|
|
@@ -90,10 +90,8 @@ export interface HoverCardProps extends Omit<React.HTMLAttributes<HTMLSpanElemen
|
|
|
90
90
|
* it only after the rest of the page, and focus leaving the trigger on the
|
|
91
91
|
* way closes it, so keyboard users can open it, read it and close it with
|
|
92
92
|
* Escape, and whatever it links to has to be reachable from the page as
|
|
93
|
-
* well.
|
|
94
|
-
*
|
|
95
|
-
* Theming variables set on an ancestor of the trigger reach it only when its
|
|
96
|
-
* container is inside that ancestor.
|
|
93
|
+
* well. Theming variables set on an ancestor of the trigger reach it only
|
|
94
|
+
* when its container is inside that ancestor.
|
|
97
95
|
* @defaultValue false
|
|
98
96
|
*/
|
|
99
97
|
appendToBody?: boolean;
|
|
@@ -48,9 +48,12 @@ export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
|
|
|
48
48
|
*/
|
|
49
49
|
closeOnEscape?: boolean;
|
|
50
50
|
/**
|
|
51
|
-
* Lock
|
|
52
|
-
*
|
|
53
|
-
*
|
|
51
|
+
* Lock page scroll while the modal is active, padding the page by the room
|
|
52
|
+
* its scrollbar took so the content stays put. An element fixed to the
|
|
53
|
+
* window's right edge, such as a `fixed` Navbar, isn't padded, and moves by
|
|
54
|
+
* the scrollbar's width while the page is locked. Ref-counted and shared
|
|
55
|
+
* with `Dialog`, `Sidebar` and `Loading`, so whichever overlay closes first
|
|
56
|
+
* does not unlock the page underneath one that is still open.
|
|
54
57
|
* @defaultValue true
|
|
55
58
|
*/
|
|
56
59
|
lockScroll?: boolean;
|
|
@@ -61,9 +61,7 @@ export interface PopoverProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
|
|
|
61
61
|
* `ConfigProvider` sets, `document.body` by default, fixed to the viewport,
|
|
62
62
|
* so an ancestor's `overflow`, `transform` or stacking context can't clip
|
|
63
63
|
* it. The panel then shows from the commit after hydration, never in server
|
|
64
|
-
* markup.
|
|
65
|
-
* and scroll, so it doesn't follow content that changes size while it is
|
|
66
|
-
* open. Theming variables set on an ancestor of the trigger reach it only
|
|
64
|
+
* markup. Theming variables set on an ancestor of the trigger reach it only
|
|
67
65
|
* when its container is inside that ancestor.
|
|
68
66
|
* @defaultValue false
|
|
69
67
|
*/
|
|
@@ -33,7 +33,7 @@ export interface SidebarProps extends Omit<React.HTMLAttributes<HTMLElement>, 'c
|
|
|
33
33
|
fullWidth?: boolean;
|
|
34
34
|
/**
|
|
35
35
|
* Show an overlay behind the sidebar, which makes it modal: it gets
|
|
36
|
-
* `aria-modal="true"`, locks
|
|
36
|
+
* `aria-modal="true"`, locks page scroll, and keeps Tab and Shift+Tab
|
|
37
37
|
* inside it while it is the topmost modal overlay. A Modal or Dialog opened
|
|
38
38
|
* over it, even one rendered inside it, holds Tab until it closes. Without
|
|
39
39
|
* an overlay the sidebar isn't modal and holds no Tab: on the page, Tab
|
|
@@ -60,7 +60,11 @@ export interface SidebarProps extends Omit<React.HTMLAttributes<HTMLElement>, 'c
|
|
|
60
60
|
canCancel?: boolean;
|
|
61
61
|
/** Content to display in the sidebar. */
|
|
62
62
|
children?: React.ReactNode;
|
|
63
|
-
/**
|
|
63
|
+
/**
|
|
64
|
+
* Renders inline instead of using a portal. Without it, the sidebar renders
|
|
65
|
+
* inline on the server and while hydrating, moving into the portal once the
|
|
66
|
+
* client takes over, so hydration matches.
|
|
67
|
+
*/
|
|
64
68
|
inline?: boolean;
|
|
65
69
|
}
|
|
66
70
|
/**
|
|
@@ -57,7 +57,9 @@ export interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
|
|
|
57
57
|
*/
|
|
58
58
|
container?: string | HTMLElement;
|
|
59
59
|
/**
|
|
60
|
-
* Renders inline instead of using a portal.
|
|
60
|
+
* Renders inline instead of using a portal. Without it, a toast renders
|
|
61
|
+
* inline on the server and while hydrating, moving into the portal once the
|
|
62
|
+
* client takes over, so hydration matches. Through `toast.show()`, a toast
|
|
61
63
|
* already renders inline in `ToastContainer`'s stack for its position, and
|
|
62
64
|
* `inline` keeps one with a `container` in that stack too.
|
|
63
65
|
*/
|
|
@@ -39,7 +39,7 @@ export interface IconButtonLabelledBy {
|
|
|
39
39
|
/** The id of the element whose text names the button, in place of `aria-label`. */
|
|
40
40
|
'aria-labelledby': string;
|
|
41
41
|
/**
|
|
42
|
-
*
|
|
42
|
+
* Not with `aria-labelledby`, which already names the button.
|
|
43
43
|
* Declared so the two can't be passed together.
|
|
44
44
|
*/
|
|
45
45
|
'aria-label'?: undefined;
|
|
@@ -54,10 +54,7 @@ export interface IconButtonLabel {
|
|
|
54
54
|
* development.
|
|
55
55
|
*/
|
|
56
56
|
'aria-label': string;
|
|
57
|
-
/**
|
|
58
|
-
* @internal Not with `aria-label`. Declared so the two can't be passed
|
|
59
|
-
* together.
|
|
60
|
-
*/
|
|
57
|
+
/** Not with `aria-label`. Declared so the two can't be passed together. */
|
|
61
58
|
'aria-labelledby'?: undefined;
|
|
62
59
|
}
|
|
63
60
|
/**
|
|
@@ -165,7 +165,7 @@ interface ComboboxDataBaseProps extends ComboboxBaseProps {
|
|
|
165
165
|
* `Combobox.Input`.
|
|
166
166
|
*/
|
|
167
167
|
'aria-labelledby'?: string;
|
|
168
|
-
/**
|
|
168
|
+
/** With `data`, the Combobox renders its own parts. */
|
|
169
169
|
children?: never;
|
|
170
170
|
}
|
|
171
171
|
/** Props for a Combobox given `data`, with one value. */
|
|
@@ -205,7 +205,7 @@ export interface ComboboxSingleDataProps extends ComboboxDataBaseProps {
|
|
|
205
205
|
* `multiple` the array.
|
|
206
206
|
*/
|
|
207
207
|
onChange?: (value: string | null) => void;
|
|
208
|
-
/**
|
|
208
|
+
/** With one value there are no tags to name. */
|
|
209
209
|
ariaCloseLabel?: never;
|
|
210
210
|
}
|
|
211
211
|
/** Props for a Combobox given `data`, with several values. */
|
|
@@ -253,27 +253,27 @@ export interface ComboboxPartsProps extends ComboboxBaseProps {
|
|
|
253
253
|
* @defaultValue false
|
|
254
254
|
*/
|
|
255
255
|
multiple?: boolean;
|
|
256
|
-
/**
|
|
256
|
+
/** Built from parts, there's no `data`. */
|
|
257
257
|
data?: never;
|
|
258
|
-
/**
|
|
258
|
+
/** Built from parts, the app keeps the value. */
|
|
259
259
|
value?: never;
|
|
260
|
-
/**
|
|
260
|
+
/** Built from parts, the app keeps the value. */
|
|
261
261
|
defaultValue?: never;
|
|
262
|
-
/**
|
|
262
|
+
/** Built from parts, `onSelect` reports a pick. */
|
|
263
263
|
onChange?: never;
|
|
264
|
-
/**
|
|
264
|
+
/** Built from parts, `Combobox.Input` takes the placeholder. */
|
|
265
265
|
placeholder?: never;
|
|
266
|
-
/**
|
|
266
|
+
/** Built from parts, the app posts the value. */
|
|
267
267
|
name?: never;
|
|
268
|
-
/**
|
|
268
|
+
/** Built from parts, `Combobox.Empty` is the empty message. */
|
|
269
269
|
empty?: never;
|
|
270
|
-
/**
|
|
270
|
+
/** Built from parts, `Combobox.Item` renders its own content. */
|
|
271
271
|
itemTemplate?: never;
|
|
272
|
-
/**
|
|
272
|
+
/** Built from parts, `Combobox.Input` takes `disabled`. */
|
|
273
273
|
disabled?: never;
|
|
274
|
-
/**
|
|
274
|
+
/** Built from parts, `Combobox.Input` takes `required`. */
|
|
275
275
|
required?: never;
|
|
276
|
-
/**
|
|
276
|
+
/** Built from parts, the app posts the value. */
|
|
277
277
|
form?: never;
|
|
278
278
|
}
|
|
279
279
|
/**
|
|
@@ -78,7 +78,14 @@ export interface DateInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
|
|
|
78
78
|
* the two can differ.
|
|
79
79
|
*/
|
|
80
80
|
locale?: string;
|
|
81
|
-
/**
|
|
81
|
+
/**
|
|
82
|
+
* Render the calendar inline (no popover).
|
|
83
|
+
* On a server-rendered page it marks today once the page hydrates, by
|
|
84
|
+
* the browser's clock rather than the server's. With no `value` or
|
|
85
|
+
* `defaultValue` it opens on the month the clock reads, and around the end
|
|
86
|
+
* of a month the server's clock and the browser's can read different
|
|
87
|
+
* months, so give it a date both render the same.
|
|
88
|
+
*/
|
|
82
89
|
inline?: boolean;
|
|
83
90
|
/**
|
|
84
91
|
* Use `<input type="date">` on coarse-pointer + small-viewport devices. At
|
|
@@ -65,6 +65,11 @@ export interface DateRangeInputBaseProps extends Omit<React.HTMLAttributes<HTMLD
|
|
|
65
65
|
/**
|
|
66
66
|
* Render the calendar inline, with no inputs and no popover. The hidden
|
|
67
67
|
* form inputs still carry the range.
|
|
68
|
+
* On a server-rendered page it marks today once the page hydrates, by
|
|
69
|
+
* the browser's clock rather than the server's. With no `value` or
|
|
70
|
+
* `defaultValue` it opens on the month the clock reads, and around the end
|
|
71
|
+
* of a month the server's clock and the browser's can read different
|
|
72
|
+
* months, so give it a date both render the same.
|
|
68
73
|
*/
|
|
69
74
|
inline?: boolean;
|
|
70
75
|
/**
|
|
@@ -59,7 +59,14 @@ export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<H
|
|
|
59
59
|
* the two can differ.
|
|
60
60
|
*/
|
|
61
61
|
locale?: string;
|
|
62
|
-
/**
|
|
62
|
+
/**
|
|
63
|
+
* Render the panel inline (no popover).
|
|
64
|
+
* On a server-rendered page it marks today once the page hydrates, by
|
|
65
|
+
* the browser's clock rather than the server's. With no `value` or
|
|
66
|
+
* `defaultValue` it opens on the month the clock reads, and around the end
|
|
67
|
+
* of a month the server's clock and the browser's can read different
|
|
68
|
+
* months, so give it a date both render the same.
|
|
69
|
+
*/
|
|
63
70
|
inline?: boolean;
|
|
64
71
|
/** Use `<input type="datetime-local">` on coarse-pointer devices. */
|
|
65
72
|
mobileNative?: boolean | 'auto';
|
|
@@ -209,9 +209,9 @@ export interface TreeSelectSingleProps extends TreeSelectBaseProps {
|
|
|
209
209
|
* @defaultValue true
|
|
210
210
|
*/
|
|
211
211
|
closeOnSelect?: boolean;
|
|
212
|
-
/**
|
|
212
|
+
/** Read with the checkbox modes only. */
|
|
213
213
|
checkedStrategy?: never;
|
|
214
|
-
/**
|
|
214
|
+
/** Read with the checkbox modes only. */
|
|
215
215
|
ariaCloseLabel?: never;
|
|
216
216
|
}
|
|
217
217
|
/** Props for a TreeSelect with a box on every item. */
|
|
@@ -253,9 +253,9 @@ export interface TreeSelectCheckboxProps extends TreeSelectBaseProps {
|
|
|
253
253
|
checkedStrategy?: TreeSelectCheckedStrategy;
|
|
254
254
|
/** Names each tag's button, in place of "Remove" and the item's label, as on Combobox. */
|
|
255
255
|
ariaCloseLabel?: string;
|
|
256
|
-
/**
|
|
256
|
+
/** Read with `'single'` only. */
|
|
257
257
|
parentsSelectable?: never;
|
|
258
|
-
/**
|
|
258
|
+
/** Read with `'single'` only: the panel stays open while boxes are checked. */
|
|
259
259
|
closeOnSelect?: never;
|
|
260
260
|
}
|
|
261
261
|
/**
|