@allxsmith/bestax-bulma 5.67.2 → 5.67.4
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/Card.js +3 -14
- package/dist/esm/components/Card.js.map +1 -1
- package/dist/esm/components/Command.js +14 -3
- package/dist/esm/components/Command.js.map +1 -1
- package/dist/esm/components/ContextMenu.js +10 -10
- package/dist/esm/components/ContextMenu.js.map +1 -1
- package/dist/esm/components/Dialog.js +7 -3
- package/dist/esm/components/Dialog.js.map +1 -1
- package/dist/esm/components/HoverCard.js +2 -2
- package/dist/esm/components/HoverCard.js.map +1 -1
- package/dist/esm/components/Menu.js +2 -1
- package/dist/esm/components/Menu.js.map +1 -1
- package/dist/esm/components/Modal.js +11 -9
- package/dist/esm/components/Modal.js.map +1 -1
- package/dist/esm/components/Popover.js +2 -2
- package/dist/esm/components/Popover.js.map +1 -1
- package/dist/esm/components/Tabs.js +4 -3
- package/dist/esm/components/Tabs.js.map +1 -1
- package/dist/esm/elements/CopyButton.js +6 -3
- package/dist/esm/elements/CopyButton.js.map +1 -1
- package/dist/esm/elements/IconButton.js +3 -2
- package/dist/esm/elements/IconButton.js.map +1 -1
- package/dist/esm/elements/Stat.js +3 -2
- package/dist/esm/elements/Stat.js.map +1 -1
- package/dist/esm/form/ColorInputBase.js.map +1 -1
- package/dist/esm/form/Combobox.js +2 -2
- package/dist/esm/form/Combobox.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 +6 -6
- package/dist/esm/form/Field.js.map +1 -1
- package/dist/esm/form/TimeInputBase.js.map +1 -1
- package/dist/esm/form/TreeSelect.js.map +1 -1
- package/dist/esm/form/_pickerInternals/Calendar.js +19 -12
- package/dist/esm/form/_pickerInternals/Calendar.js.map +1 -1
- package/dist/esm/form/_pickerInternals/PickerPopover.js +3 -3
- package/dist/esm/form/_pickerInternals/PickerPopover.js.map +1 -1
- package/dist/esm/helpers/Config.js.map +1 -1
- package/dist/esm/helpers/elementType.js +42 -0
- package/dist/esm/helpers/elementType.js.map +1 -0
- package/dist/esm/helpers/portal.js +57 -1
- package/dist/esm/helpers/portal.js.map +1 -1
- package/dist/esm/helpers/useAnchoredPosition.js +23 -12
- package/dist/esm/helpers/useAnchoredPosition.js.map +1 -1
- package/dist/esm/helpers/withSubComponents.js +1 -1
- package/dist/esm/helpers/withSubComponents.js.map +1 -1
- package/dist/esm/layout/AppFrame.js +4 -3
- package/dist/esm/layout/AppFrame.js.map +1 -1
- package/dist/esm/layout/Splitter.js +3 -2
- package/dist/esm/layout/Splitter.js.map +1 -1
- package/dist/extras.css +1 -1
- package/dist/extras.css.map +1 -1
- package/dist/index.cjs +196 -81
- package/dist/index.cjs.map +1 -1
- package/dist/types/components/HoverCard.d.ts +9 -8
- package/dist/types/components/Popover.d.ts +6 -5
- package/dist/types/form/ColorInputBase.d.ts +2 -1
- package/dist/types/form/Combobox.d.ts +6 -7
- package/dist/types/form/DateInputBase.d.ts +6 -2
- package/dist/types/form/DateRangeInputBase.d.ts +6 -2
- package/dist/types/form/DateTimeInputBase.d.ts +6 -2
- package/dist/types/form/TimeInputBase.d.ts +2 -1
- package/dist/types/form/TreeSelect.d.ts +1 -1
- package/dist/types/helpers/Config.d.ts +6 -3
- package/dist/types/helpers/elementType.d.ts +20 -0
- package/dist/types/helpers/portal.d.ts +44 -0
- package/dist/types/helpers/useAnchoredPosition.d.ts +3 -1
- package/dist/types/helpers/withSubComponents.d.ts +1 -1
- package/dist/types-cjs/components/HoverCard.d.ts +9 -8
- package/dist/types-cjs/components/Popover.d.ts +6 -5
- package/dist/types-cjs/form/ColorInputBase.d.ts +2 -1
- package/dist/types-cjs/form/Combobox.d.ts +6 -7
- package/dist/types-cjs/form/DateInputBase.d.ts +6 -2
- package/dist/types-cjs/form/DateRangeInputBase.d.ts +6 -2
- package/dist/types-cjs/form/DateTimeInputBase.d.ts +6 -2
- package/dist/types-cjs/form/TimeInputBase.d.ts +2 -1
- package/dist/types-cjs/form/TreeSelect.d.ts +1 -1
- package/dist/types-cjs/helpers/Config.d.ts +6 -3
- package/dist/types-cjs/helpers/elementType.d.ts +20 -0
- package/dist/types-cjs/helpers/portal.d.ts +44 -0
- package/dist/types-cjs/helpers/useAnchoredPosition.d.ts +3 -1
- package/dist/types-cjs/helpers/withSubComponents.d.ts +1 -1
- 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/_menu.scss +16 -2
- package/src/scss/form/_dateinput.scss +1 -1
|
@@ -81,14 +81,15 @@ export interface HoverCardProps extends Omit<React.HTMLAttributes<HTMLSpanElemen
|
|
|
81
81
|
position?: HoverCardPosition;
|
|
82
82
|
/**
|
|
83
83
|
* Render the card through `Portal`, into the `portalContainer` a
|
|
84
|
-
* `ConfigProvider` sets,
|
|
85
|
-
*
|
|
86
|
-
*
|
|
87
|
-
*
|
|
88
|
-
*
|
|
89
|
-
*
|
|
90
|
-
*
|
|
91
|
-
*
|
|
84
|
+
* `ConfigProvider` sets, else the `Modal`, `Dialog` or `Command.Dialog`
|
|
85
|
+
* it's in, else `document.body`, fixed to the viewport, so an ancestor's
|
|
86
|
+
* `overflow`, `transform` or stacking context can't clip it. A trigger in
|
|
87
|
+
* running text needs it too, since the card's block content can't sit
|
|
88
|
+
* inside a `<p>`. The card then shows from the commit after hydration,
|
|
89
|
+
* never in server markup, and it sits in the Tab order where its container
|
|
90
|
+
* is. At the end of `<body>` or of a dialog, Tab reaches it only after the
|
|
91
|
+
* rest of the page or the dialog, and focus leaving the trigger on the way
|
|
92
|
+
* closes it, so keyboard users can open it, read it and close it with
|
|
92
93
|
* Escape, and whatever it links to has to be reachable from the page as
|
|
93
94
|
* well. Theming variables set on an ancestor of the trigger reach it only
|
|
94
95
|
* when its container is inside that ancestor.
|
|
@@ -58,11 +58,12 @@ export interface PopoverProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
|
|
|
58
58
|
position?: PopoverPosition;
|
|
59
59
|
/**
|
|
60
60
|
* Render the panel through `Portal`, into the `portalContainer` a
|
|
61
|
-
* `ConfigProvider` sets,
|
|
62
|
-
*
|
|
63
|
-
*
|
|
64
|
-
*
|
|
65
|
-
*
|
|
61
|
+
* `ConfigProvider` sets, else the `Modal`, `Dialog` or `Command.Dialog`
|
|
62
|
+
* it's in, else `document.body`, fixed to the viewport, so an ancestor's
|
|
63
|
+
* `overflow`, `transform` or stacking context can't clip it. The panel
|
|
64
|
+
* then shows from the commit after hydration, never in server markup.
|
|
65
|
+
* Theming variables set on an ancestor of the trigger reach it only when
|
|
66
|
+
* its container is inside that ancestor.
|
|
66
67
|
* @defaultValue false
|
|
67
68
|
*/
|
|
68
69
|
appendToBody?: boolean;
|
|
@@ -73,7 +73,8 @@ export interface ColorInputBaseProps extends Omit<React.InputHTMLAttributes<HTML
|
|
|
73
73
|
position?: PickerPosition;
|
|
74
74
|
/**
|
|
75
75
|
* Renders the panel through a portal, into the `portalContainer` a
|
|
76
|
-
* `ConfigProvider` sets, `
|
|
76
|
+
* `ConfigProvider` sets, else the `Modal`, `Dialog` or `Command.Dialog` it's
|
|
77
|
+
* in, else `document.body`.
|
|
77
78
|
*/
|
|
78
79
|
appendToBody?: boolean;
|
|
79
80
|
/** Bulma color modifier for the field. */
|
|
@@ -94,13 +94,12 @@ interface ComboboxBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
|
|
|
94
94
|
position?: PopoverPosition;
|
|
95
95
|
/**
|
|
96
96
|
* Renders the menu through `Portal`, into the `portalContainer` a
|
|
97
|
-
* `ConfigProvider` sets,
|
|
98
|
-
*
|
|
99
|
-
*
|
|
100
|
-
*
|
|
101
|
-
*
|
|
102
|
-
*
|
|
103
|
-
* assistive tech.
|
|
97
|
+
* `ConfigProvider` sets, else the `Modal`, `Dialog` or `Command.Dialog`
|
|
98
|
+
* it's in, else `document.body`, fixed to the viewport at the field, so a
|
|
99
|
+
* container that clips its overflow can't cut it off. It then shows from
|
|
100
|
+
* the commit after hydration, never in server markup. Theming variables set
|
|
101
|
+
* on an ancestor reach it only when the portal's container is inside that
|
|
102
|
+
* ancestor, as with Popover.
|
|
104
103
|
* @defaultValue false
|
|
105
104
|
*/
|
|
106
105
|
appendToBody?: boolean;
|
|
@@ -128,7 +128,8 @@ export interface DateInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
|
|
|
128
128
|
position?: PickerPosition;
|
|
129
129
|
/**
|
|
130
130
|
* Render the popover through a portal, into the `portalContainer` a
|
|
131
|
-
* `ConfigProvider` sets, `
|
|
131
|
+
* `ConfigProvider` sets, else the `Modal`, `Dialog` or `Command.Dialog` it's
|
|
132
|
+
* in, else `document.body`.
|
|
132
133
|
*/
|
|
133
134
|
appendToBody?: boolean;
|
|
134
135
|
/**
|
|
@@ -163,7 +164,10 @@ export interface DateInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
|
|
|
163
164
|
* on the day the week does. With them, an unset `firstDayOfWeek` stays
|
|
164
165
|
* Sunday even inside a `LocaleProvider`, so names written Sunday first keep
|
|
165
166
|
* matching their columns; to start on the locale's day, set
|
|
166
|
-
* `firstDayOfWeek` too and list the names from that day.
|
|
167
|
+
* `firstDayOfWeek` too and list the names from that day. They also name
|
|
168
|
+
* the columns for assistive technology. Without them each column is named
|
|
169
|
+
* by its full weekday in the picker's locale, which a server-rendered
|
|
170
|
+
* calendar adds once the page hydrates.
|
|
167
171
|
*/
|
|
168
172
|
dayNames?: string[];
|
|
169
173
|
/** Override the 12 month-name labels. */
|
|
@@ -113,7 +113,8 @@ export interface DateRangeInputBaseProps extends Omit<React.HTMLAttributes<HTMLD
|
|
|
113
113
|
position?: PickerPosition;
|
|
114
114
|
/**
|
|
115
115
|
* Render the popover through a portal, into the `portalContainer` a
|
|
116
|
-
* `ConfigProvider` sets, `
|
|
116
|
+
* `ConfigProvider` sets, else the `Modal`, `Dialog` or `Command.Dialog` it's
|
|
117
|
+
* in, else `document.body`.
|
|
117
118
|
*/
|
|
118
119
|
appendToBody?: boolean;
|
|
119
120
|
/**
|
|
@@ -157,7 +158,10 @@ export interface DateRangeInputBaseProps extends Omit<React.HTMLAttributes<HTMLD
|
|
|
157
158
|
* on the day the week does. With them, an unset `firstDayOfWeek` stays
|
|
158
159
|
* Sunday even inside a `LocaleProvider`, so names written Sunday first keep
|
|
159
160
|
* matching their columns; to start on the locale's day, set
|
|
160
|
-
* `firstDayOfWeek` too and list the names from that day.
|
|
161
|
+
* `firstDayOfWeek` too and list the names from that day. They also name
|
|
162
|
+
* the columns for assistive technology. Without them each column is named
|
|
163
|
+
* by its full weekday in the picker's locale, which a server-rendered
|
|
164
|
+
* calendar adds once the page hydrates.
|
|
161
165
|
*/
|
|
162
166
|
dayNames?: string[];
|
|
163
167
|
/** Override the 12 month-name labels. */
|
|
@@ -101,7 +101,8 @@ export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<H
|
|
|
101
101
|
position?: PickerPosition;
|
|
102
102
|
/**
|
|
103
103
|
* Render the popover through a portal, into the `portalContainer` a
|
|
104
|
-
* `ConfigProvider` sets, `
|
|
104
|
+
* `ConfigProvider` sets, else the `Modal`, `Dialog` or `Command.Dialog` it's
|
|
105
|
+
* in, else `document.body`.
|
|
105
106
|
*/
|
|
106
107
|
appendToBody?: boolean;
|
|
107
108
|
/**
|
|
@@ -140,7 +141,10 @@ export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<H
|
|
|
140
141
|
* on the day the week does. With them, an unset `firstDayOfWeek` stays
|
|
141
142
|
* Sunday even inside a `LocaleProvider`, so names written Sunday first keep
|
|
142
143
|
* matching their columns; to start on the locale's day, set
|
|
143
|
-
* `firstDayOfWeek` too and list the names from that day.
|
|
144
|
+
* `firstDayOfWeek` too and list the names from that day. They also name
|
|
145
|
+
* the columns for assistive technology. Without them each column is named
|
|
146
|
+
* by its full weekday in the picker's locale, which a server-rendered
|
|
147
|
+
* calendar adds once the page hydrates.
|
|
144
148
|
*/
|
|
145
149
|
dayNames?: string[];
|
|
146
150
|
/** Override the 12 month-name labels. */
|
|
@@ -75,7 +75,8 @@ export interface TimeInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
|
|
|
75
75
|
position?: PickerPosition;
|
|
76
76
|
/**
|
|
77
77
|
* Render the popover through a portal, into the `portalContainer` a
|
|
78
|
-
* `ConfigProvider` sets, `
|
|
78
|
+
* `ConfigProvider` sets, else the `Modal`, `Dialog` or `Command.Dialog` it's
|
|
79
|
+
* in, else `document.body`. On a narrow screen
|
|
79
80
|
* an in-place popover spans the bottom of the viewport, while a portaled
|
|
80
81
|
* one stays on its `position` corner.
|
|
81
82
|
*/
|
|
@@ -164,7 +164,7 @@ interface TreeSelectBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
|
|
|
164
164
|
* @defaultValue 'bottom-left'
|
|
165
165
|
*/
|
|
166
166
|
position?: PickerPosition;
|
|
167
|
-
/** Renders the panel through a portal, into a `ConfigProvider`'s `portalContainer`, `
|
|
167
|
+
/** Renders the panel through a portal, into a `ConfigProvider`'s `portalContainer`, else the `Modal`, `Dialog` or `Command.Dialog` it's in, else `document.body`. */
|
|
168
168
|
appendToBody?: boolean;
|
|
169
169
|
/** The visible and accessible strings, in your app's language. */
|
|
170
170
|
labels?: TreeSelectLabels;
|
|
@@ -35,9 +35,12 @@ export interface ConfigProviderProps {
|
|
|
35
35
|
* portal, such as Popover's `appendToBody` panel, a `Modal` with `portal`
|
|
36
36
|
* set to `true`, or a `Toast`. An element, or a `document.querySelector`
|
|
37
37
|
* selector. Unset, or a selector that matches nothing, that content goes to
|
|
38
|
-
* `document.body
|
|
39
|
-
* `
|
|
40
|
-
*
|
|
38
|
+
* `document.body`, except a popup, such as Popover's panel or a picker's,
|
|
39
|
+
* opened inside a `Modal`, `Dialog` or `Command.Dialog`: that goes into the
|
|
40
|
+
* dialog, where screen readers that honor its `aria-modal` reach it. Set,
|
|
41
|
+
* it takes those popups too. A target a component is given, such as a
|
|
42
|
+
* `Toast`'s `container`, still wins, and nothing portals that would
|
|
43
|
+
* otherwise render in place.
|
|
41
44
|
*
|
|
42
45
|
* The overlays and panels this moves are `position: fixed`, so pick an
|
|
43
46
|
* element with no ancestor that has a `transform`, `filter`,
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* The component an element renders, read through a lazy type.
|
|
4
|
+
*
|
|
5
|
+
* A client component written in a React Server Component reaches the client
|
|
6
|
+
* as a client reference, whose element type is lazy rather than the
|
|
7
|
+
* component's own function, so `child.type === Part` is never true there
|
|
8
|
+
* (#1500). This resolves a lazy type the way React does when it renders one:
|
|
9
|
+
* a module that has loaded gives its component, one still loading throws, so
|
|
10
|
+
* the caller suspends at the boundary the element itself would have, and one
|
|
11
|
+
* that failed throws its error. A lazy type without those fields comes back
|
|
12
|
+
* as it is, so a part goes unrecognized, which is what happened before.
|
|
13
|
+
*/
|
|
14
|
+
export declare function elementType(element: React.ReactElement): unknown;
|
|
15
|
+
/**
|
|
16
|
+
* Whether `node` is an element of one of `types`, including one written in a
|
|
17
|
+
* Server Component. A parent tells its parts apart with this, never by
|
|
18
|
+
* comparing `child.type`.
|
|
19
|
+
*/
|
|
20
|
+
export declare function isElementOf<P = unknown>(node: React.ReactNode, ...types: readonly unknown[]): node is React.ReactElement<P>;
|
|
@@ -30,6 +30,39 @@ export declare function resolvePortalContainer(container?: string | HTMLElement)
|
|
|
30
30
|
* returns the DOM node to portal into.
|
|
31
31
|
*/
|
|
32
32
|
export declare function usePortalContainer(): (container?: string | HTMLElement) => HTMLElement;
|
|
33
|
+
/**
|
|
34
|
+
* INTERNAL, deliberately not exported from `src/index.ts`. Makes `node` where
|
|
35
|
+
* the popups inside it portal, unless a `ConfigProvider` sets a
|
|
36
|
+
* `portalContainer`. Modal, Dialog and Command.Dialog wrap their content in
|
|
37
|
+
* it, each with the element that carries their `aria-modal`, since a screen
|
|
38
|
+
* reader that honors it hides everything outside that element. The nearest
|
|
39
|
+
* one wins, so a Dialog's own box wins over the Modal it renders.
|
|
40
|
+
*
|
|
41
|
+
* @function PortalScope
|
|
42
|
+
* @param props - `node`, the element popups portal into, and `children`.
|
|
43
|
+
* @returns The children, inside the scope.
|
|
44
|
+
*/
|
|
45
|
+
export declare function PortalScope({ node, children, }: {
|
|
46
|
+
node: HTMLElement | null;
|
|
47
|
+
children?: React.ReactNode;
|
|
48
|
+
}): React.JSX.Element;
|
|
49
|
+
/**
|
|
50
|
+
* INTERNAL. Where a popup portals, a panel a component opens against
|
|
51
|
+
* something on the page, such as Popover's: the `portalContainer` a
|
|
52
|
+
* `ConfigProvider` sets, else the overlay it's in (see `PortalScope`), else
|
|
53
|
+
* `undefined`, which `resolvePortalContainer` reads as `document.body`.
|
|
54
|
+
*
|
|
55
|
+
* The overlay's element only exists once it has mounted, so a popup open as
|
|
56
|
+
* the overlay first renders mounts in `document.body`, and moves into the
|
|
57
|
+
* overlay in the update that follows, before the browser paints. Moving
|
|
58
|
+
* remounts it, as any change of portal target does. It isn't held back
|
|
59
|
+
* instead, because the popups measure their panel against the trigger as
|
|
60
|
+
* they open, and a panel that isn't there yet is never placed.
|
|
61
|
+
*
|
|
62
|
+
* @function usePopupContainer
|
|
63
|
+
* @returns The popup's container, `undefined` for `document.body`.
|
|
64
|
+
*/
|
|
65
|
+
export declare function usePopupContainer(): string | HTMLElement | undefined;
|
|
33
66
|
/**
|
|
34
67
|
* What a component that takes Modal's `portal` prop does with it now. See
|
|
35
68
|
* `usePortalProp`.
|
|
@@ -151,3 +184,14 @@ export interface PortalProps {
|
|
|
151
184
|
* </Portal>
|
|
152
185
|
*/
|
|
153
186
|
export declare function Portal({ children, container, disabled }: PortalProps): React.JSX.Element | null;
|
|
187
|
+
/**
|
|
188
|
+
* INTERNAL. `Portal` for a popup, into the container `usePopupContainer`
|
|
189
|
+
* names, so a popup opened inside a Modal, Dialog or Command.Dialog stays
|
|
190
|
+
* inside it. `disabled` renders the children in place, as `Portal`'s does.
|
|
191
|
+
*
|
|
192
|
+
* @function PopupPortal
|
|
193
|
+
* @param props - The children, and `disabled`.
|
|
194
|
+
* @returns The portal, the children in place when `disabled`, or nothing
|
|
195
|
+
* before hydration.
|
|
196
|
+
*/
|
|
197
|
+
export declare function PopupPortal({ children, disabled, }: Omit<PortalProps, 'container'>): React.JSX.Element;
|
|
@@ -85,7 +85,9 @@ export declare function marginGap(panel: HTMLElement): number;
|
|
|
85
85
|
* anchor changes size, so a fixed panel follows its anchor and its own
|
|
86
86
|
* content. Those measure once in the next frame, however many arrive before
|
|
87
87
|
* it. With `followContent` it also measures after each render. A
|
|
88
|
-
* measurement that changes nothing doesn't render again.
|
|
88
|
+
* measurement that changes nothing doesn't render again. A panel that's
|
|
89
|
+
* replaced while it's open, as a portal moving to another target replaces
|
|
90
|
+
* it, is watched from the next measurement on.
|
|
89
91
|
*
|
|
90
92
|
* The first measurement happens in a layout effect, so the panel is placed
|
|
91
93
|
* before it paints. It needs both elements on the page while `active` is
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*
|
|
5
5
|
* Internal helper — it MUST mutate and return the same function object
|
|
6
6
|
* (`Object.assign`), never wrap the base in a new function: identity checks
|
|
7
|
-
* like `child
|
|
7
|
+
* like `isElementOf(child, ModalCard)` (Modal) and Field's displayName-based
|
|
8
8
|
* child detection rely on the attached component being the same object as
|
|
9
9
|
* the separately exported one.
|
|
10
10
|
*
|
|
@@ -81,14 +81,15 @@ export interface HoverCardProps extends Omit<React.HTMLAttributes<HTMLSpanElemen
|
|
|
81
81
|
position?: HoverCardPosition;
|
|
82
82
|
/**
|
|
83
83
|
* Render the card through `Portal`, into the `portalContainer` a
|
|
84
|
-
* `ConfigProvider` sets,
|
|
85
|
-
*
|
|
86
|
-
*
|
|
87
|
-
*
|
|
88
|
-
*
|
|
89
|
-
*
|
|
90
|
-
*
|
|
91
|
-
*
|
|
84
|
+
* `ConfigProvider` sets, else the `Modal`, `Dialog` or `Command.Dialog`
|
|
85
|
+
* it's in, else `document.body`, fixed to the viewport, so an ancestor's
|
|
86
|
+
* `overflow`, `transform` or stacking context can't clip it. A trigger in
|
|
87
|
+
* running text needs it too, since the card's block content can't sit
|
|
88
|
+
* inside a `<p>`. The card then shows from the commit after hydration,
|
|
89
|
+
* never in server markup, and it sits in the Tab order where its container
|
|
90
|
+
* is. At the end of `<body>` or of a dialog, Tab reaches it only after the
|
|
91
|
+
* rest of the page or the dialog, and focus leaving the trigger on the way
|
|
92
|
+
* closes it, so keyboard users can open it, read it and close it with
|
|
92
93
|
* Escape, and whatever it links to has to be reachable from the page as
|
|
93
94
|
* well. Theming variables set on an ancestor of the trigger reach it only
|
|
94
95
|
* when its container is inside that ancestor.
|
|
@@ -58,11 +58,12 @@ export interface PopoverProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
|
|
|
58
58
|
position?: PopoverPosition;
|
|
59
59
|
/**
|
|
60
60
|
* Render the panel through `Portal`, into the `portalContainer` a
|
|
61
|
-
* `ConfigProvider` sets,
|
|
62
|
-
*
|
|
63
|
-
*
|
|
64
|
-
*
|
|
65
|
-
*
|
|
61
|
+
* `ConfigProvider` sets, else the `Modal`, `Dialog` or `Command.Dialog`
|
|
62
|
+
* it's in, else `document.body`, fixed to the viewport, so an ancestor's
|
|
63
|
+
* `overflow`, `transform` or stacking context can't clip it. The panel
|
|
64
|
+
* then shows from the commit after hydration, never in server markup.
|
|
65
|
+
* Theming variables set on an ancestor of the trigger reach it only when
|
|
66
|
+
* its container is inside that ancestor.
|
|
66
67
|
* @defaultValue false
|
|
67
68
|
*/
|
|
68
69
|
appendToBody?: boolean;
|
|
@@ -73,7 +73,8 @@ export interface ColorInputBaseProps extends Omit<React.InputHTMLAttributes<HTML
|
|
|
73
73
|
position?: PickerPosition;
|
|
74
74
|
/**
|
|
75
75
|
* Renders the panel through a portal, into the `portalContainer` a
|
|
76
|
-
* `ConfigProvider` sets, `
|
|
76
|
+
* `ConfigProvider` sets, else the `Modal`, `Dialog` or `Command.Dialog` it's
|
|
77
|
+
* in, else `document.body`.
|
|
77
78
|
*/
|
|
78
79
|
appendToBody?: boolean;
|
|
79
80
|
/** Bulma color modifier for the field. */
|
|
@@ -94,13 +94,12 @@ interface ComboboxBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
|
|
|
94
94
|
position?: PopoverPosition;
|
|
95
95
|
/**
|
|
96
96
|
* Renders the menu through `Portal`, into the `portalContainer` a
|
|
97
|
-
* `ConfigProvider` sets,
|
|
98
|
-
*
|
|
99
|
-
*
|
|
100
|
-
*
|
|
101
|
-
*
|
|
102
|
-
*
|
|
103
|
-
* assistive tech.
|
|
97
|
+
* `ConfigProvider` sets, else the `Modal`, `Dialog` or `Command.Dialog`
|
|
98
|
+
* it's in, else `document.body`, fixed to the viewport at the field, so a
|
|
99
|
+
* container that clips its overflow can't cut it off. It then shows from
|
|
100
|
+
* the commit after hydration, never in server markup. Theming variables set
|
|
101
|
+
* on an ancestor reach it only when the portal's container is inside that
|
|
102
|
+
* ancestor, as with Popover.
|
|
104
103
|
* @defaultValue false
|
|
105
104
|
*/
|
|
106
105
|
appendToBody?: boolean;
|
|
@@ -128,7 +128,8 @@ export interface DateInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
|
|
|
128
128
|
position?: PickerPosition;
|
|
129
129
|
/**
|
|
130
130
|
* Render the popover through a portal, into the `portalContainer` a
|
|
131
|
-
* `ConfigProvider` sets, `
|
|
131
|
+
* `ConfigProvider` sets, else the `Modal`, `Dialog` or `Command.Dialog` it's
|
|
132
|
+
* in, else `document.body`.
|
|
132
133
|
*/
|
|
133
134
|
appendToBody?: boolean;
|
|
134
135
|
/**
|
|
@@ -163,7 +164,10 @@ export interface DateInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
|
|
|
163
164
|
* on the day the week does. With them, an unset `firstDayOfWeek` stays
|
|
164
165
|
* Sunday even inside a `LocaleProvider`, so names written Sunday first keep
|
|
165
166
|
* matching their columns; to start on the locale's day, set
|
|
166
|
-
* `firstDayOfWeek` too and list the names from that day.
|
|
167
|
+
* `firstDayOfWeek` too and list the names from that day. They also name
|
|
168
|
+
* the columns for assistive technology. Without them each column is named
|
|
169
|
+
* by its full weekday in the picker's locale, which a server-rendered
|
|
170
|
+
* calendar adds once the page hydrates.
|
|
167
171
|
*/
|
|
168
172
|
dayNames?: string[];
|
|
169
173
|
/** Override the 12 month-name labels. */
|
|
@@ -113,7 +113,8 @@ export interface DateRangeInputBaseProps extends Omit<React.HTMLAttributes<HTMLD
|
|
|
113
113
|
position?: PickerPosition;
|
|
114
114
|
/**
|
|
115
115
|
* Render the popover through a portal, into the `portalContainer` a
|
|
116
|
-
* `ConfigProvider` sets, `
|
|
116
|
+
* `ConfigProvider` sets, else the `Modal`, `Dialog` or `Command.Dialog` it's
|
|
117
|
+
* in, else `document.body`.
|
|
117
118
|
*/
|
|
118
119
|
appendToBody?: boolean;
|
|
119
120
|
/**
|
|
@@ -157,7 +158,10 @@ export interface DateRangeInputBaseProps extends Omit<React.HTMLAttributes<HTMLD
|
|
|
157
158
|
* on the day the week does. With them, an unset `firstDayOfWeek` stays
|
|
158
159
|
* Sunday even inside a `LocaleProvider`, so names written Sunday first keep
|
|
159
160
|
* matching their columns; to start on the locale's day, set
|
|
160
|
-
* `firstDayOfWeek` too and list the names from that day.
|
|
161
|
+
* `firstDayOfWeek` too and list the names from that day. They also name
|
|
162
|
+
* the columns for assistive technology. Without them each column is named
|
|
163
|
+
* by its full weekday in the picker's locale, which a server-rendered
|
|
164
|
+
* calendar adds once the page hydrates.
|
|
161
165
|
*/
|
|
162
166
|
dayNames?: string[];
|
|
163
167
|
/** Override the 12 month-name labels. */
|
|
@@ -101,7 +101,8 @@ export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<H
|
|
|
101
101
|
position?: PickerPosition;
|
|
102
102
|
/**
|
|
103
103
|
* Render the popover through a portal, into the `portalContainer` a
|
|
104
|
-
* `ConfigProvider` sets, `
|
|
104
|
+
* `ConfigProvider` sets, else the `Modal`, `Dialog` or `Command.Dialog` it's
|
|
105
|
+
* in, else `document.body`.
|
|
105
106
|
*/
|
|
106
107
|
appendToBody?: boolean;
|
|
107
108
|
/**
|
|
@@ -140,7 +141,10 @@ export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<H
|
|
|
140
141
|
* on the day the week does. With them, an unset `firstDayOfWeek` stays
|
|
141
142
|
* Sunday even inside a `LocaleProvider`, so names written Sunday first keep
|
|
142
143
|
* matching their columns; to start on the locale's day, set
|
|
143
|
-
* `firstDayOfWeek` too and list the names from that day.
|
|
144
|
+
* `firstDayOfWeek` too and list the names from that day. They also name
|
|
145
|
+
* the columns for assistive technology. Without them each column is named
|
|
146
|
+
* by its full weekday in the picker's locale, which a server-rendered
|
|
147
|
+
* calendar adds once the page hydrates.
|
|
144
148
|
*/
|
|
145
149
|
dayNames?: string[];
|
|
146
150
|
/** Override the 12 month-name labels. */
|
|
@@ -75,7 +75,8 @@ export interface TimeInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
|
|
|
75
75
|
position?: PickerPosition;
|
|
76
76
|
/**
|
|
77
77
|
* Render the popover through a portal, into the `portalContainer` a
|
|
78
|
-
* `ConfigProvider` sets, `
|
|
78
|
+
* `ConfigProvider` sets, else the `Modal`, `Dialog` or `Command.Dialog` it's
|
|
79
|
+
* in, else `document.body`. On a narrow screen
|
|
79
80
|
* an in-place popover spans the bottom of the viewport, while a portaled
|
|
80
81
|
* one stays on its `position` corner.
|
|
81
82
|
*/
|
|
@@ -164,7 +164,7 @@ interface TreeSelectBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
|
|
|
164
164
|
* @defaultValue 'bottom-left'
|
|
165
165
|
*/
|
|
166
166
|
position?: PickerPosition;
|
|
167
|
-
/** Renders the panel through a portal, into a `ConfigProvider`'s `portalContainer`, `
|
|
167
|
+
/** Renders the panel through a portal, into a `ConfigProvider`'s `portalContainer`, else the `Modal`, `Dialog` or `Command.Dialog` it's in, else `document.body`. */
|
|
168
168
|
appendToBody?: boolean;
|
|
169
169
|
/** The visible and accessible strings, in your app's language. */
|
|
170
170
|
labels?: TreeSelectLabels;
|
|
@@ -35,9 +35,12 @@ export interface ConfigProviderProps {
|
|
|
35
35
|
* portal, such as Popover's `appendToBody` panel, a `Modal` with `portal`
|
|
36
36
|
* set to `true`, or a `Toast`. An element, or a `document.querySelector`
|
|
37
37
|
* selector. Unset, or a selector that matches nothing, that content goes to
|
|
38
|
-
* `document.body
|
|
39
|
-
* `
|
|
40
|
-
*
|
|
38
|
+
* `document.body`, except a popup, such as Popover's panel or a picker's,
|
|
39
|
+
* opened inside a `Modal`, `Dialog` or `Command.Dialog`: that goes into the
|
|
40
|
+
* dialog, where screen readers that honor its `aria-modal` reach it. Set,
|
|
41
|
+
* it takes those popups too. A target a component is given, such as a
|
|
42
|
+
* `Toast`'s `container`, still wins, and nothing portals that would
|
|
43
|
+
* otherwise render in place.
|
|
41
44
|
*
|
|
42
45
|
* The overlays and panels this moves are `position: fixed`, so pick an
|
|
43
46
|
* element with no ancestor that has a `transform`, `filter`,
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* The component an element renders, read through a lazy type.
|
|
4
|
+
*
|
|
5
|
+
* A client component written in a React Server Component reaches the client
|
|
6
|
+
* as a client reference, whose element type is lazy rather than the
|
|
7
|
+
* component's own function, so `child.type === Part` is never true there
|
|
8
|
+
* (#1500). This resolves a lazy type the way React does when it renders one:
|
|
9
|
+
* a module that has loaded gives its component, one still loading throws, so
|
|
10
|
+
* the caller suspends at the boundary the element itself would have, and one
|
|
11
|
+
* that failed throws its error. A lazy type without those fields comes back
|
|
12
|
+
* as it is, so a part goes unrecognized, which is what happened before.
|
|
13
|
+
*/
|
|
14
|
+
export declare function elementType(element: React.ReactElement): unknown;
|
|
15
|
+
/**
|
|
16
|
+
* Whether `node` is an element of one of `types`, including one written in a
|
|
17
|
+
* Server Component. A parent tells its parts apart with this, never by
|
|
18
|
+
* comparing `child.type`.
|
|
19
|
+
*/
|
|
20
|
+
export declare function isElementOf<P = unknown>(node: React.ReactNode, ...types: readonly unknown[]): node is React.ReactElement<P>;
|
|
@@ -30,6 +30,39 @@ export declare function resolvePortalContainer(container?: string | HTMLElement)
|
|
|
30
30
|
* returns the DOM node to portal into.
|
|
31
31
|
*/
|
|
32
32
|
export declare function usePortalContainer(): (container?: string | HTMLElement) => HTMLElement;
|
|
33
|
+
/**
|
|
34
|
+
* INTERNAL, deliberately not exported from `src/index.ts`. Makes `node` where
|
|
35
|
+
* the popups inside it portal, unless a `ConfigProvider` sets a
|
|
36
|
+
* `portalContainer`. Modal, Dialog and Command.Dialog wrap their content in
|
|
37
|
+
* it, each with the element that carries their `aria-modal`, since a screen
|
|
38
|
+
* reader that honors it hides everything outside that element. The nearest
|
|
39
|
+
* one wins, so a Dialog's own box wins over the Modal it renders.
|
|
40
|
+
*
|
|
41
|
+
* @function PortalScope
|
|
42
|
+
* @param props - `node`, the element popups portal into, and `children`.
|
|
43
|
+
* @returns The children, inside the scope.
|
|
44
|
+
*/
|
|
45
|
+
export declare function PortalScope({ node, children, }: {
|
|
46
|
+
node: HTMLElement | null;
|
|
47
|
+
children?: React.ReactNode;
|
|
48
|
+
}): React.JSX.Element;
|
|
49
|
+
/**
|
|
50
|
+
* INTERNAL. Where a popup portals, a panel a component opens against
|
|
51
|
+
* something on the page, such as Popover's: the `portalContainer` a
|
|
52
|
+
* `ConfigProvider` sets, else the overlay it's in (see `PortalScope`), else
|
|
53
|
+
* `undefined`, which `resolvePortalContainer` reads as `document.body`.
|
|
54
|
+
*
|
|
55
|
+
* The overlay's element only exists once it has mounted, so a popup open as
|
|
56
|
+
* the overlay first renders mounts in `document.body`, and moves into the
|
|
57
|
+
* overlay in the update that follows, before the browser paints. Moving
|
|
58
|
+
* remounts it, as any change of portal target does. It isn't held back
|
|
59
|
+
* instead, because the popups measure their panel against the trigger as
|
|
60
|
+
* they open, and a panel that isn't there yet is never placed.
|
|
61
|
+
*
|
|
62
|
+
* @function usePopupContainer
|
|
63
|
+
* @returns The popup's container, `undefined` for `document.body`.
|
|
64
|
+
*/
|
|
65
|
+
export declare function usePopupContainer(): string | HTMLElement | undefined;
|
|
33
66
|
/**
|
|
34
67
|
* What a component that takes Modal's `portal` prop does with it now. See
|
|
35
68
|
* `usePortalProp`.
|
|
@@ -151,3 +184,14 @@ export interface PortalProps {
|
|
|
151
184
|
* </Portal>
|
|
152
185
|
*/
|
|
153
186
|
export declare function Portal({ children, container, disabled }: PortalProps): React.JSX.Element | null;
|
|
187
|
+
/**
|
|
188
|
+
* INTERNAL. `Portal` for a popup, into the container `usePopupContainer`
|
|
189
|
+
* names, so a popup opened inside a Modal, Dialog or Command.Dialog stays
|
|
190
|
+
* inside it. `disabled` renders the children in place, as `Portal`'s does.
|
|
191
|
+
*
|
|
192
|
+
* @function PopupPortal
|
|
193
|
+
* @param props - The children, and `disabled`.
|
|
194
|
+
* @returns The portal, the children in place when `disabled`, or nothing
|
|
195
|
+
* before hydration.
|
|
196
|
+
*/
|
|
197
|
+
export declare function PopupPortal({ children, disabled, }: Omit<PortalProps, 'container'>): React.JSX.Element;
|
|
@@ -85,7 +85,9 @@ export declare function marginGap(panel: HTMLElement): number;
|
|
|
85
85
|
* anchor changes size, so a fixed panel follows its anchor and its own
|
|
86
86
|
* content. Those measure once in the next frame, however many arrive before
|
|
87
87
|
* it. With `followContent` it also measures after each render. A
|
|
88
|
-
* measurement that changes nothing doesn't render again.
|
|
88
|
+
* measurement that changes nothing doesn't render again. A panel that's
|
|
89
|
+
* replaced while it's open, as a portal moving to another target replaces
|
|
90
|
+
* it, is watched from the next measurement on.
|
|
89
91
|
*
|
|
90
92
|
* The first measurement happens in a layout effect, so the panel is placed
|
|
91
93
|
* before it paints. It needs both elements on the page while `active` is
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*
|
|
5
5
|
* Internal helper — it MUST mutate and return the same function object
|
|
6
6
|
* (`Object.assign`), never wrap the base in a new function: identity checks
|
|
7
|
-
* like `child
|
|
7
|
+
* like `isElementOf(child, ModalCard)` (Modal) and Field's displayName-based
|
|
8
8
|
* child detection rely on the attached component being the same object as
|
|
9
9
|
* the separately exported one.
|
|
10
10
|
*
|