@allxsmith/bestax-bulma 5.67.2 → 5.67.3

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.
Files changed (93) hide show
  1. package/dist/bestax.css +1 -1
  2. package/dist/bestax.css.map +1 -1
  3. package/dist/esm/components/Card.js +3 -14
  4. package/dist/esm/components/Card.js.map +1 -1
  5. package/dist/esm/components/Command.js +14 -3
  6. package/dist/esm/components/Command.js.map +1 -1
  7. package/dist/esm/components/ContextMenu.js +10 -10
  8. package/dist/esm/components/ContextMenu.js.map +1 -1
  9. package/dist/esm/components/Dialog.js +7 -3
  10. package/dist/esm/components/Dialog.js.map +1 -1
  11. package/dist/esm/components/HoverCard.js +2 -2
  12. package/dist/esm/components/HoverCard.js.map +1 -1
  13. package/dist/esm/components/Menu.js +2 -1
  14. package/dist/esm/components/Menu.js.map +1 -1
  15. package/dist/esm/components/Modal.js +11 -9
  16. package/dist/esm/components/Modal.js.map +1 -1
  17. package/dist/esm/components/Popover.js +2 -2
  18. package/dist/esm/components/Popover.js.map +1 -1
  19. package/dist/esm/components/Tabs.js +4 -3
  20. package/dist/esm/components/Tabs.js.map +1 -1
  21. package/dist/esm/elements/CopyButton.js +6 -3
  22. package/dist/esm/elements/CopyButton.js.map +1 -1
  23. package/dist/esm/elements/IconButton.js +3 -2
  24. package/dist/esm/elements/IconButton.js.map +1 -1
  25. package/dist/esm/elements/Stat.js +3 -2
  26. package/dist/esm/elements/Stat.js.map +1 -1
  27. package/dist/esm/form/ColorInputBase.js.map +1 -1
  28. package/dist/esm/form/Combobox.js +2 -2
  29. package/dist/esm/form/Combobox.js.map +1 -1
  30. package/dist/esm/form/DateInputBase.js.map +1 -1
  31. package/dist/esm/form/DateRangeInputBase.js.map +1 -1
  32. package/dist/esm/form/DateTimeInputBase.js.map +1 -1
  33. package/dist/esm/form/Field.js +6 -6
  34. package/dist/esm/form/Field.js.map +1 -1
  35. package/dist/esm/form/TimeInputBase.js.map +1 -1
  36. package/dist/esm/form/TreeSelect.js.map +1 -1
  37. package/dist/esm/form/_pickerInternals/PickerPopover.js +3 -3
  38. package/dist/esm/form/_pickerInternals/PickerPopover.js.map +1 -1
  39. package/dist/esm/helpers/Config.js.map +1 -1
  40. package/dist/esm/helpers/elementType.js +42 -0
  41. package/dist/esm/helpers/elementType.js.map +1 -0
  42. package/dist/esm/helpers/portal.js +57 -1
  43. package/dist/esm/helpers/portal.js.map +1 -1
  44. package/dist/esm/helpers/useAnchoredPosition.js +23 -12
  45. package/dist/esm/helpers/useAnchoredPosition.js.map +1 -1
  46. package/dist/esm/helpers/withSubComponents.js +1 -1
  47. package/dist/esm/helpers/withSubComponents.js.map +1 -1
  48. package/dist/esm/layout/AppFrame.js +4 -3
  49. package/dist/esm/layout/AppFrame.js.map +1 -1
  50. package/dist/esm/layout/Splitter.js +3 -2
  51. package/dist/esm/layout/Splitter.js.map +1 -1
  52. package/dist/extras.css +1 -1
  53. package/dist/extras.css.map +1 -1
  54. package/dist/index.cjs +177 -69
  55. package/dist/index.cjs.map +1 -1
  56. package/dist/types/components/HoverCard.d.ts +9 -8
  57. package/dist/types/components/Popover.d.ts +6 -5
  58. package/dist/types/form/ColorInputBase.d.ts +2 -1
  59. package/dist/types/form/Combobox.d.ts +6 -7
  60. package/dist/types/form/DateInputBase.d.ts +2 -1
  61. package/dist/types/form/DateRangeInputBase.d.ts +2 -1
  62. package/dist/types/form/DateTimeInputBase.d.ts +2 -1
  63. package/dist/types/form/TimeInputBase.d.ts +2 -1
  64. package/dist/types/form/TreeSelect.d.ts +1 -1
  65. package/dist/types/helpers/Config.d.ts +6 -3
  66. package/dist/types/helpers/elementType.d.ts +20 -0
  67. package/dist/types/helpers/portal.d.ts +44 -0
  68. package/dist/types/helpers/useAnchoredPosition.d.ts +3 -1
  69. package/dist/types/helpers/withSubComponents.d.ts +1 -1
  70. package/dist/types-cjs/components/HoverCard.d.ts +9 -8
  71. package/dist/types-cjs/components/Popover.d.ts +6 -5
  72. package/dist/types-cjs/form/ColorInputBase.d.ts +2 -1
  73. package/dist/types-cjs/form/Combobox.d.ts +6 -7
  74. package/dist/types-cjs/form/DateInputBase.d.ts +2 -1
  75. package/dist/types-cjs/form/DateRangeInputBase.d.ts +2 -1
  76. package/dist/types-cjs/form/DateTimeInputBase.d.ts +2 -1
  77. package/dist/types-cjs/form/TimeInputBase.d.ts +2 -1
  78. package/dist/types-cjs/form/TreeSelect.d.ts +1 -1
  79. package/dist/types-cjs/helpers/Config.d.ts +6 -3
  80. package/dist/types-cjs/helpers/elementType.d.ts +20 -0
  81. package/dist/types-cjs/helpers/portal.d.ts +44 -0
  82. package/dist/types-cjs/helpers/useAnchoredPosition.d.ts +3 -1
  83. package/dist/types-cjs/helpers/withSubComponents.d.ts +1 -1
  84. package/dist/versions/bestax-no-dark-mode.css +1 -1
  85. package/dist/versions/bestax-no-dark-mode.css.map +1 -1
  86. package/dist/versions/bestax-no-helpers-prefixed.css +1 -1
  87. package/dist/versions/bestax-no-helpers-prefixed.css.map +1 -1
  88. package/dist/versions/bestax-no-helpers.css +1 -1
  89. package/dist/versions/bestax-no-helpers.css.map +1 -1
  90. package/dist/versions/bestax-prefixed.css +1 -1
  91. package/dist/versions/bestax-prefixed.css.map +1 -1
  92. package/package.json +1 -1
  93. package/src/scss/components/_menu.scss +16 -2
@@ -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, `document.body` by default, fixed to the viewport,
85
- * so an ancestor's `overflow`, `transform` or stacking context can't clip
86
- * it. A trigger in running text needs it too, since the card's block
87
- * content can't sit inside a `<p>`. The card then shows from the commit
88
- * after hydration, never in server markup, and it sits in the Tab order
89
- * where its container is. At the end of `<body>`, the default, Tab reaches
90
- * it only after the rest of the page, and focus leaving the trigger on the
91
- * way closes it, so keyboard users can open it, read it and close it with
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, `document.body` by default, fixed to the viewport,
62
- * so an ancestor's `overflow`, `transform` or stacking context can't clip
63
- * it. The panel then shows from the commit after hydration, never in server
64
- * markup. Theming variables set on an ancestor of the trigger reach it only
65
- * when its container is inside that ancestor.
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, `document.body` by default.
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, `document.body` by default, fixed to the viewport
98
- * at the field, so a container that clips its overflow can't cut it off.
99
- * It then shows from the commit after hydration, never in server markup.
100
- * Theming variables set on an ancestor reach it only when the portal's
101
- * container is inside that ancestor, as with Popover. In a `Modal`, point
102
- * `portalContainer` inside the modal, so the list stays in the dialog for
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, `document.body` by default.
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
  /**
@@ -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, `document.body` by default.
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
  /**
@@ -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, `document.body` by default.
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
  /**
@@ -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, `document.body` by default. On a narrow screen
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`, `document.body` by default. */
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`. A target a component is given, such as a `Toast`'s
39
- * `container`, still wins, and nothing portals that would otherwise render
40
- * in place.
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.type === ModalCard` (Modal) and Field's displayName-based
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, `document.body` by default, fixed to the viewport,
85
- * so an ancestor's `overflow`, `transform` or stacking context can't clip
86
- * it. A trigger in running text needs it too, since the card's block
87
- * content can't sit inside a `<p>`. The card then shows from the commit
88
- * after hydration, never in server markup, and it sits in the Tab order
89
- * where its container is. At the end of `<body>`, the default, Tab reaches
90
- * it only after the rest of the page, and focus leaving the trigger on the
91
- * way closes it, so keyboard users can open it, read it and close it with
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, `document.body` by default, fixed to the viewport,
62
- * so an ancestor's `overflow`, `transform` or stacking context can't clip
63
- * it. The panel then shows from the commit after hydration, never in server
64
- * markup. Theming variables set on an ancestor of the trigger reach it only
65
- * when its container is inside that ancestor.
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, `document.body` by default.
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, `document.body` by default, fixed to the viewport
98
- * at the field, so a container that clips its overflow can't cut it off.
99
- * It then shows from the commit after hydration, never in server markup.
100
- * Theming variables set on an ancestor reach it only when the portal's
101
- * container is inside that ancestor, as with Popover. In a `Modal`, point
102
- * `portalContainer` inside the modal, so the list stays in the dialog for
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, `document.body` by default.
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
  /**
@@ -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, `document.body` by default.
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
  /**
@@ -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, `document.body` by default.
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
  /**
@@ -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, `document.body` by default. On a narrow screen
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`, `document.body` by default. */
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`. A target a component is given, such as a `Toast`'s
39
- * `container`, still wins, and nothing portals that would otherwise render
40
- * in place.
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.type === ModalCard` (Modal) and Field's displayName-based
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
  *