@procore/core-react 11.12.1-rc.0 → 11.13.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/dist/Avatar/Avatar.js +20 -4
  2. package/dist/Avatar/Avatar.js.map +1 -1
  3. package/dist/Modal/Modal.d.ts +3 -1
  4. package/dist/Modal/Modal.js +72 -19
  5. package/dist/Modal/Modal.js.map +1 -1
  6. package/dist/Modal/Modal.types.d.ts +59 -3
  7. package/dist/OverlayTrigger/OverlayTrigger.d.ts +6 -6
  8. package/dist/OverlayTrigger/OverlayTrigger.js +43 -32
  9. package/dist/OverlayTrigger/OverlayTrigger.js.map +1 -1
  10. package/dist/OverlayTrigger/OverlayTrigger.types.d.ts +15 -7
  11. package/dist/OverlayTrigger/a11yPresets.d.ts +202 -1
  12. package/dist/OverlayTrigger/a11yPresets.js +210 -0
  13. package/dist/OverlayTrigger/a11yPresets.js.map +1 -1
  14. package/dist/Popover/Popover.d.ts +24 -2
  15. package/dist/Popover/Popover.js +6 -4
  16. package/dist/Popover/Popover.js.map +1 -1
  17. package/dist/Popover/Popover.types.d.ts +15 -2
  18. package/dist/Portal/Portal.d.ts +1 -1
  19. package/dist/Portal/Portal.js +24 -2
  20. package/dist/Portal/Portal.js.map +1 -1
  21. package/dist/Section/Section.d.ts +4 -0
  22. package/dist/Section/Section.js +12 -6
  23. package/dist/Section/Section.js.map +1 -1
  24. package/dist/Semantic/Semantic.d.ts +8 -0
  25. package/dist/Semantic/Semantic.js +28 -0
  26. package/dist/Semantic/Semantic.js.map +1 -1
  27. package/dist/Semantic/Semantic.types.d.ts +1 -1
  28. package/dist/Tearsheet/Tearsheet.d.ts +7 -1
  29. package/dist/Tearsheet/Tearsheet.js +32 -19
  30. package/dist/Tearsheet/Tearsheet.js.map +1 -1
  31. package/dist/Tearsheet/Tearsheet.types.d.ts +24 -0
  32. package/dist/_hooks/I18n.d.ts +1 -0
  33. package/dist/_locales/en.json +2 -1
  34. package/dist/_typedoc/Avatar/Avatar.types.json +28 -28
  35. package/dist/_typedoc/AvatarStack/AvatarStack.types.json +22 -22
  36. package/dist/_typedoc/Badge/Badge.types.json +10 -10
  37. package/dist/_typedoc/Banner/Banner.types.json +19 -19
  38. package/dist/_typedoc/Box/Box.types.json +70 -70
  39. package/dist/_typedoc/Breadcrumbs/Breadcrumbs.types.json +14 -14
  40. package/dist/_typedoc/Button/Button.types.json +11 -11
  41. package/dist/_typedoc/Calendar/Calendar.types.json +98 -98
  42. package/dist/_typedoc/Card/Card.types.json +8 -8
  43. package/dist/_typedoc/Checkbox/Checkbox.types.json +7 -7
  44. package/dist/_typedoc/ContactItem/ContactItem.types.json +11 -11
  45. package/dist/_typedoc/DateInput/DateInput.types.json +37 -37
  46. package/dist/_typedoc/DateSelect/DateSelect.types.json +13 -13
  47. package/dist/_typedoc/DetailPage/DetailPage.types.json +6 -6
  48. package/dist/_typedoc/Dropdown/Dropdown.types.json +37 -37
  49. package/dist/_typedoc/DropdownFlyout/DropdownFlyout.types.json +31 -31
  50. package/dist/_typedoc/Dropzone/Dropzone.types.json +41 -41
  51. package/dist/_typedoc/EmptyState/EmptyState.types.json +22 -22
  52. package/dist/_typedoc/FileList/FileList.types.json +9 -9
  53. package/dist/_typedoc/FileSelect/FileSelect.types.json +26 -26
  54. package/dist/_typedoc/FileSelect/GridSource/GridSource.types.json +20 -20
  55. package/dist/_typedoc/FileSelect/LocalSource/LocalSource.types.json +14 -14
  56. package/dist/_typedoc/FileSelect/TreeSource/TreeSource.types.json +9 -9
  57. package/dist/_typedoc/Flex/Flex.types.json +29 -29
  58. package/dist/_typedoc/FlexList/FlexList.types.json +32 -32
  59. package/dist/_typedoc/Form/Form.types.json +698 -698
  60. package/dist/_typedoc/Grid/Grid.types.json +8 -8
  61. package/dist/_typedoc/GroupSelect/GroupSelect.types.json +54 -54
  62. package/dist/_typedoc/Input/Input.types.json +2 -2
  63. package/dist/_typedoc/Link/Link.types.json +6 -6
  64. package/dist/_typedoc/ListPage/ListPage.types.json +19 -19
  65. package/dist/_typedoc/Menu/Menu.types.json +68 -68
  66. package/dist/_typedoc/MenuImperative/MenuImperative.types.json +75 -75
  67. package/dist/_typedoc/Modal/Modal.types.json +213 -70
  68. package/dist/_typedoc/MultiSelect/MultiSelect.types.json +31 -31
  69. package/dist/_typedoc/Notation/Notation.types.json +6 -6
  70. package/dist/_typedoc/NumberInput/NumberInput.types.json +38 -38
  71. package/dist/_typedoc/OverlayTrigger/OverlayTrigger.types.json +76 -34
  72. package/dist/_typedoc/PageLayout/PageLayout.types.json +32 -32
  73. package/dist/_typedoc/Pagination/Pagination.types.json +9 -9
  74. package/dist/_typedoc/Panel/Panel.types.json +29 -29
  75. package/dist/_typedoc/Pill/Pill.types.json +1 -1
  76. package/dist/_typedoc/PillSelect/PillSelect.types.json +46 -46
  77. package/dist/_typedoc/Popover/Popover.types.json +60 -38
  78. package/dist/_typedoc/ProgressBar/ProgressBar.types.json +8 -8
  79. package/dist/_typedoc/RadioButton/RadioButton.types.json +8 -8
  80. package/dist/_typedoc/Required/Required.types.json +5 -5
  81. package/dist/_typedoc/Search/Search.types.json +18 -18
  82. package/dist/_typedoc/Section/Section.types.json +16 -16
  83. package/dist/_typedoc/SegmentedController/SegmentedController.types.json +26 -26
  84. package/dist/_typedoc/Select/Select.types.json +32 -32
  85. package/dist/_typedoc/Slider/Slider.types.json +6 -6
  86. package/dist/_typedoc/Spinner/Spinner.types.json +11 -11
  87. package/dist/_typedoc/Switch/Switch.types.json +5 -5
  88. package/dist/_typedoc/Table/Table.types.json +116 -116
  89. package/dist/_typedoc/Tabs/Tabs.types.json +21 -21
  90. package/dist/_typedoc/Tearsheet/Tearsheet.types.json +70 -10
  91. package/dist/_typedoc/TextArea/TextArea.types.json +3 -3
  92. package/dist/_typedoc/TextEditor/TextEditor.types.json +9 -9
  93. package/dist/_typedoc/TextEditorOutput/TextEditorOutput.types.json +3 -3
  94. package/dist/_typedoc/Thumbnail/Thumbnail.types.json +21 -21
  95. package/dist/_typedoc/TieredDropdown/TieredDropdown.types.json +42 -42
  96. package/dist/_typedoc/TieredSelect/TieredSelect.types.json +28 -28
  97. package/dist/_typedoc/Tile/Tile.types.json +42 -42
  98. package/dist/_typedoc/Toast/Toast.types.json +6 -6
  99. package/dist/_typedoc/ToggleButton/ToggleButton.types.json +3 -3
  100. package/dist/_typedoc/Token/Token.types.json +4 -4
  101. package/dist/_typedoc/ToolHeader/ToolHeader.types.json +14 -14
  102. package/dist/_typedoc/Tooltip/Tooltip.types.json +17 -17
  103. package/dist/_typedoc/Tree/Tree.types.json +88 -88
  104. package/dist/_typedoc/Typeahead/Typeahead.types.json +2 -2
  105. package/dist/_typedoc/Typography/Typography.types.json +8 -8
  106. package/dist/_typedoc/_utils/types.json +5 -5
  107. package/dist/_utils/polymorphic.d.ts +4 -4
  108. package/dist/_utils/types.d.ts +0 -3
  109. package/package.json +3 -2
@@ -9,6 +9,10 @@ export declare type PickedTriggerProps = Pick<TriggerRenderProps, 'children' | '
9
9
  export declare type PickedTriggerRenderProps = Pick<TriggerRenderProps, 'children'>;
10
10
  export declare type PickedVisibilityProps = Pick<VisibilityConfig, 'afterHide' | 'afterShow' | 'initialIsVisible'>;
11
11
  export interface OverlayTriggerProps extends PickedOverlayProps, PickedTriggerProps, PickedTriggerRenderProps, PickedVisibilityProps {
12
+ ['aria-labelledby']?: string;
13
+ ['aria-label']?: string;
14
+ ['aria-describedby']?: string;
15
+ ['aria-details']?: string;
12
16
  /**
13
17
  * The callback to run before the overlay is hidden. Returning
14
18
  * `false` will prevent hiding.
@@ -37,11 +41,13 @@ export interface OverlayTriggerProps extends PickedOverlayProps, PickedTriggerPr
37
41
  * @since 10.19.0
38
42
  */
39
43
  hideDelay?: number;
44
+ /**
45
+ * Keys to hide the overlay when the overlay is focused
46
+ * @a11y OverlayTrigger by default closes on tab. To remove tab from closing
47
+ * and have only Esc keys, set "containFocus" to true, or opt-in to a full dialog role.
48
+ * @since 10.19.0
49
+ */
40
50
  hideKeys?: {
41
- /**
42
- * Keys to hide the overlay when the overlay is focused
43
- * @since 10.19.0
44
- */
45
51
  overlay: string[];
46
52
  target: string[];
47
53
  };
@@ -68,12 +74,14 @@ export interface OverlayTriggerProps extends PickedOverlayProps, PickedTriggerPr
68
74
  */
69
75
  overlayRef?: React.Ref<OverlayTriggerRef>;
70
76
  /**
71
- * Accessibility props
77
+ * Accessibility props.
78
+ * @a11y May opionate "autoFocus" and "containFocus"
72
79
  * @since 11.2.0
73
80
  */
74
81
  role?: OverlayTriggerRole;
75
82
  /**
76
83
  * Whether to auto focus the first focusable element in the overlay on mount.
84
+ * True by default for role "dialog"
77
85
  * @since 11.5.0
78
86
  */
79
87
  autoFocus?: boolean;
@@ -84,8 +92,8 @@ export interface OverlayTriggerProps extends PickedOverlayProps, PickedTriggerPr
84
92
  * */
85
93
  containFocus?: boolean;
86
94
  /**
87
- * By default, role and id are applied to wrapper.
88
- * Set to true, if you want to manually place them on correct place in your overlay component.
95
+ * By default, role and id are applied to wrapper. But has knowledge of
96
+ * Set to true, if you want OverlayTrigger to place them on your overlay component.
89
97
  *
90
98
  * @default false
91
99
  * @since 11.5.0
@@ -1,4 +1,4 @@
1
- import { AriaAttributes } from 'react';
1
+ import React, { AriaAttributes } from 'react';
2
2
  import { OverlayTriggerRole } from './OverlayTrigger.types';
3
3
  declare type GetA11yProps = (props: {
4
4
  role: OverlayTriggerRole;
@@ -11,4 +11,205 @@ export declare function getA11yPreset(role?: OverlayTriggerRole): {
11
11
  getOverlayProps: GetA11yProps;
12
12
  getTriggerProps: GetA11yProps;
13
13
  };
14
+ declare type LabelConfig = {
15
+ 'aria-describedby'?: string;
16
+ 'aria-details'?: string;
17
+ 'aria-labelledby'?: string;
18
+ 'aria-label'?: string;
19
+ /**
20
+ * ID for the widget itself
21
+ */
22
+ id?: string;
23
+ };
24
+ declare type DialogBase = LabelConfig & {
25
+ isOpen: boolean;
26
+ role?: 'dialog';
27
+ };
28
+ declare type NonModalDialogConfig = DialogBase & {
29
+ isModal?: never | false;
30
+ };
31
+ declare type ModalDialogConfig = DialogBase & {
32
+ /**
33
+ *
34
+ * To enable `ariaHideOutside`. Set `isModal` to false to disable.
35
+ * @a11y Replicates `aria-modal` inert outside content
36
+ * @default false
37
+ */
38
+ isModal: true;
39
+ ref: React.RefObject<HTMLElement>;
40
+ };
41
+ declare type ModalDialogLikeConfig = NonModalDialogConfig | ModalDialogConfig;
42
+ declare type OverlayTriggerA11yConfig = LabelConfig & {
43
+ /**
44
+ * Assure `aria-hidden` is not applied. A code side-effect
45
+ * from `ariaHideOutside` hiding everthing outside the scope.
46
+ */
47
+ alwaysAriaVisible?: boolean;
48
+ /**
49
+ * When properties should be passed to the overlay UI itself,
50
+ * and not the wrapper element.
51
+ */
52
+ canPropOverlayUp: boolean;
53
+ isOpen: boolean;
54
+ role?: OverlayTriggerRole;
55
+ };
56
+ /**
57
+ * Manages labelling for an element and the other DOM. Defaults an ID for `aria-labelledby` usage.
58
+ *
59
+ * When `aria-label` and `aria-labelledby` both exist, it combines them into `aria-labelledby` for a screen reader chain.
60
+ * @link [W3 naming with aria-labelledby](https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/#naming_with_aria-labelledby)
61
+ */
62
+ export declare function useLabelled(props?: LabelConfig): {
63
+ descriptionProps: {
64
+ id: string | undefined;
65
+ };
66
+ labelProps: {
67
+ id: string | undefined;
68
+ };
69
+ widgetProps: {
70
+ 'aria-describedby': string | undefined;
71
+ 'aria-details': string | undefined;
72
+ id?: string | undefined;
73
+ 'aria-label'?: string | undefined;
74
+ 'aria-labelledby'?: string | undefined;
75
+ };
76
+ };
77
+ /**
78
+ * Cover the label links for the trigger (button), the popup element (dialog), and the popup element title (heading).
79
+ * Similar to [React Aria useOverlayTrigger](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/useOverlayTrigger.ts)
80
+ * but with element title support.
81
+ * @link [MDN aria-haspopup](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup)
82
+ */
83
+ export declare function useLabelledPopup({ 'aria-describedby': ariaDescribedby, 'aria-details': ariaDetails, 'aria-labelledby': ariaLabelledby, 'aria-label': ariaLabel, id: id_, isOpen, type, popupRole, popupId: popupId_, }: LabelConfig & {
84
+ isOpen: boolean;
85
+ popupId?: string;
86
+ type?: 'button' | 'combobox';
87
+ popupRole: 'dialog' | 'menu' | 'listbox';
88
+ }): {
89
+ labelProps: {
90
+ id: string | undefined;
91
+ };
92
+ popupProps: {
93
+ 'aria-activedescendant'?: string | undefined;
94
+ 'aria-atomic'?: boolean | "true" | "false" | undefined;
95
+ 'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
96
+ 'aria-busy'?: boolean | "true" | "false" | undefined;
97
+ 'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
98
+ 'aria-colcount'?: number | undefined;
99
+ 'aria-colindex'?: number | undefined;
100
+ 'aria-colspan'?: number | undefined;
101
+ 'aria-controls'?: string | undefined;
102
+ 'aria-current'?: boolean | "time" | "true" | "false" | "step" | "page" | "location" | "date" | undefined;
103
+ 'aria-describedby': string | undefined;
104
+ 'aria-details': string | undefined;
105
+ 'aria-disabled'?: boolean | "true" | "false" | undefined;
106
+ 'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
107
+ 'aria-errormessage'?: string | undefined;
108
+ 'aria-expanded'?: boolean | "true" | "false" | undefined;
109
+ 'aria-flowto'?: string | undefined;
110
+ 'aria-grabbed'?: boolean | "true" | "false" | undefined;
111
+ 'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "listbox" | "tree" | "grid" | undefined;
112
+ 'aria-hidden'?: boolean | "true" | "false" | undefined;
113
+ 'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
114
+ 'aria-keyshortcuts'?: string | undefined;
115
+ 'aria-label'?: string | undefined;
116
+ 'aria-labelledby'?: string | undefined;
117
+ 'aria-level'?: number | undefined;
118
+ 'aria-live'?: "off" | "assertive" | "polite" | undefined;
119
+ 'aria-modal'?: boolean | "true" | "false" | undefined;
120
+ 'aria-multiline'?: boolean | "true" | "false" | undefined;
121
+ 'aria-multiselectable'?: boolean | "true" | "false" | undefined;
122
+ 'aria-orientation'?: "horizontal" | "vertical" | undefined;
123
+ 'aria-owns'?: string | undefined;
124
+ 'aria-placeholder'?: string | undefined;
125
+ 'aria-posinset'?: number | undefined;
126
+ 'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
127
+ 'aria-readonly'?: boolean | "true" | "false" | undefined;
128
+ 'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
129
+ 'aria-required'?: boolean | "true" | "false" | undefined;
130
+ 'aria-roledescription'?: string | undefined;
131
+ 'aria-rowcount'?: number | undefined;
132
+ 'aria-rowindex'?: number | undefined;
133
+ 'aria-rowspan'?: number | undefined;
134
+ 'aria-selected'?: boolean | "true" | "false" | undefined;
135
+ 'aria-setsize'?: number | undefined;
136
+ 'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
137
+ 'aria-valuemax'?: number | undefined;
138
+ 'aria-valuemin'?: number | undefined;
139
+ 'aria-valuenow'?: number | undefined;
140
+ 'aria-valuetext'?: string | undefined;
141
+ id?: string | undefined;
142
+ role: "dialog" | "menu" | "listbox";
143
+ };
144
+ triggerProps: React.AriaAttributes & {
145
+ id?: string | undefined;
146
+ };
147
+ };
148
+ /**
149
+ * For dialog experiences:
150
+ * - Has role dialog and aria linked title props
151
+ * - Focus management props to work with FocusScope
152
+ *
153
+ * For modal dialog experiences (full screen locked experiences):
154
+ * - Hides old and new content outside with aria-hidden with ariaHideOutside (like aria-modal)
155
+ * - (it will in breaking) Prevent scroll
156
+ *
157
+ * For either experiences, you still MUST support:
158
+ * - have Escape key to close (It should!)
159
+ * - have click outside, like scrim click
160
+ *
161
+ * _More about 'modal dialog' and `isModal` not using `aria-modal`:_
162
+ * Setting aria-modal="true" tells assistive technologies to let the user know the ability to interact with,
163
+ * or access other content on the page requires the modal dialog to be closed or otherwise lose focus.
164
+ * Modal dialogs are when content is displayed and the user's interaction is limited to only that section until it is dismissed.
165
+ * [MDN aria modal](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal).
166
+ * To support the most, like Narrator in Edge, Core React uses `ariaHideOutside` to set `aria-hidden` on
167
+ * all elements outside the dialog, and **all elements outside added while opened**, so the dialog will act as a
168
+ * _modal_ even without `aria-modal` on the dialog itself. See Future Considerations below.
169
+ * [Screen Reader aria modal support table](https://a11ysupport.io/tech/aria/aria-modal_attribute) - [MS Narrator Edge aria modal support](https://a11ysupport.io/tests/apg__modal-dialog-example/aria__aria-modal_attribute/convey_presence/narrator/edge)
170
+ * _Future Considerations:_ Replace ariaHideOutside with aria-modal="true".
171
+ * Using aria-modal, then we would need to involve Portal and so tooltips
172
+ * or Toasts could mount within the visible aria-modal container.
173
+ */
174
+ export declare function useModalDialogLike({ 'aria-describedby': ariaDescribedby, 'aria-details': ariaDetails, 'aria-labelledby': ariaLabelledby, 'aria-label': ariaLabel, id, isModal, isOpen, ref, role, }: ModalDialogLikeConfig): {
175
+ dialogProps: {
176
+ id: string | undefined;
177
+ role: "dialog";
178
+ tabIndex: number;
179
+ 'aria-describedby': string | undefined;
180
+ 'aria-details': string | undefined;
181
+ 'aria-label'?: string | undefined;
182
+ 'aria-labelledby'?: string | undefined;
183
+ };
184
+ labelProps: {
185
+ id: string | undefined;
186
+ };
187
+ focusScopeProps: {
188
+ autoFocus: boolean;
189
+ contain: boolean;
190
+ restoreFocus: boolean;
191
+ };
192
+ };
193
+ /**
194
+ * Takes many roles and determines props necessary for DOM/components.
195
+ * **Side effect of role="dialog"**, current and any content added later
196
+ * outside of the element (like by portals) will get `aria-hidden=true`
197
+ * to replace the `aria-modal=true` `inert` nature.
198
+ * @see useModalDialogLike */
199
+ export declare function useOverlayTriggerA11y({ alwaysAriaVisible, 'aria-describedby': ariaDescribedby, 'aria-details': ariaDetails, 'aria-labelledby': ariaLabelledby, 'aria-label': ariaLabel, canPropOverlayUp, id: id_, isOpen, role, }: OverlayTriggerA11yConfig): {
200
+ focusScopeProps: {
201
+ autoFocus?: boolean | undefined;
202
+ contain?: boolean | undefined;
203
+ restoreFocus?: boolean | undefined;
204
+ };
205
+ labelProps: {
206
+ id: string | undefined;
207
+ };
208
+ overlayProps: {};
209
+ portalProps: {};
210
+ triggerProps: React.AriaAttributes & {
211
+ id?: string | undefined;
212
+ };
213
+ wrapperProps: {};
214
+ };
14
215
  export {};
@@ -1,3 +1,18 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ import { ariaHideOutside } from '@react-aria/overlays';
13
+ import { useId, useLabels } from '@react-aria/utils';
14
+ import React from 'react';
15
+ var emptyObj = {};
1
16
  var returnEmpty = function () { return ({}); };
2
17
  var a11yPresets = {
3
18
  haspopup: {
@@ -55,4 +70,199 @@ export function getA11yPreset(role) {
55
70
  };
56
71
  }
57
72
  }
73
+ /**
74
+ * Manages labelling for an element and the other DOM. Defaults an ID for `aria-labelledby` usage.
75
+ *
76
+ * When `aria-label` and `aria-labelledby` both exist, it combines them into `aria-labelledby` for a screen reader chain.
77
+ * @link [W3 naming with aria-labelledby](https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/#naming_with_aria-labelledby)
78
+ */
79
+ export function useLabelled(props) {
80
+ var _a = props || emptyObj, ariaDescribedby = _a["aria-describedby"], ariaDetails = _a["aria-details"], ariaLabelledby = _a["aria-labelledby"], ariaLabel = _a["aria-label"], id = _a.id;
81
+ var ariaLabelOnly = ariaLabel && !ariaLabelledby;
82
+ // Generate an ID. We want to use this unless they are using only aria-label
83
+ var labelledId = useId(ariaLabelledby);
84
+ // Merges aria-label and aria-labelledby into aria-labelledby when both exist
85
+ var widgetId = useId(id);
86
+ var fieldProps = useLabels({
87
+ 'aria-label': ariaLabel,
88
+ 'aria-labelledby': ariaLabelOnly ? undefined : labelledId,
89
+ id: widgetId,
90
+ });
91
+ return {
92
+ descriptionProps: { id: ariaDescribedby },
93
+ labelProps: { id: ariaLabelOnly ? undefined : labelledId },
94
+ widgetProps: __assign(__assign({}, fieldProps), { 'aria-describedby': ariaDescribedby, 'aria-details': ariaDetails }),
95
+ };
96
+ }
97
+ /**
98
+ * Cover the label links for the trigger (button), the popup element (dialog), and the popup element title (heading).
99
+ * Similar to [React Aria useOverlayTrigger](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/useOverlayTrigger.ts)
100
+ * but with element title support.
101
+ * @link [MDN aria-haspopup](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup)
102
+ */
103
+ export function useLabelledPopup(_a) {
104
+ var _b, _c, _d, _e;
105
+ var ariaDescribedby = _a["aria-describedby"], ariaDetails = _a["aria-details"], ariaLabelledby = _a["aria-labelledby"], ariaLabel = _a["aria-label"], id_ = _a.id, isOpen = _a.isOpen, _f = _a.type, type = _f === void 0 ? 'button' : _f, popupRole = _a.popupRole, popupId_ = _a.popupId;
106
+ /** Web spec default for aria-haspopup=true is menu, unless element has role combobox, which have an implicit aria-haspopup value of listbox. */
107
+ // const popupRole = popupRole_ || type === 'combobox' ? 'listbox' : 'menu'
108
+ var id = useId(id_);
109
+ var popupId = useId(popupId_);
110
+ var presetArgs = {
111
+ isVisible: isOpen,
112
+ role: popupRole,
113
+ overlayId: popupId,
114
+ };
115
+ var triggerProps = (_c = (_b = getA11yPreset(popupRole)).getTriggerProps) === null || _c === void 0 ? void 0 : _c.call(_b, presetArgs);
116
+ var overlayProps = (_e = (_d = getA11yPreset(popupRole)).getOverlayProps) === null || _e === void 0 ? void 0 : _e.call(_d, presetArgs);
117
+ var _g = useLabelled({
118
+ 'aria-describedby': ariaDescribedby,
119
+ 'aria-details': ariaDetails,
120
+ 'aria-labelledby': ariaLabelledby,
121
+ 'aria-label': ariaLabel,
122
+ id: id,
123
+ }), labelProps = _g.labelProps, widgetProps = _g.widgetProps;
124
+ return {
125
+ labelProps: labelProps,
126
+ popupProps: __assign(__assign({ role: popupRole }, widgetProps), overlayProps),
127
+ triggerProps: triggerProps,
128
+ };
129
+ }
130
+ /**
131
+ * For dialog experiences:
132
+ * - Has role dialog and aria linked title props
133
+ * - Focus management props to work with FocusScope
134
+ *
135
+ * For modal dialog experiences (full screen locked experiences):
136
+ * - Hides old and new content outside with aria-hidden with ariaHideOutside (like aria-modal)
137
+ * - (it will in breaking) Prevent scroll
138
+ *
139
+ * For either experiences, you still MUST support:
140
+ * - have Escape key to close (It should!)
141
+ * - have click outside, like scrim click
142
+ *
143
+ * _More about 'modal dialog' and `isModal` not using `aria-modal`:_
144
+ * Setting aria-modal="true" tells assistive technologies to let the user know the ability to interact with,
145
+ * or access other content on the page requires the modal dialog to be closed or otherwise lose focus.
146
+ * Modal dialogs are when content is displayed and the user's interaction is limited to only that section until it is dismissed.
147
+ * [MDN aria modal](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal).
148
+ * To support the most, like Narrator in Edge, Core React uses `ariaHideOutside` to set `aria-hidden` on
149
+ * all elements outside the dialog, and **all elements outside added while opened**, so the dialog will act as a
150
+ * _modal_ even without `aria-modal` on the dialog itself. See Future Considerations below.
151
+ * [Screen Reader aria modal support table](https://a11ysupport.io/tech/aria/aria-modal_attribute) - [MS Narrator Edge aria modal support](https://a11ysupport.io/tests/apg__modal-dialog-example/aria__aria-modal_attribute/convey_presence/narrator/edge)
152
+ * _Future Considerations:_ Replace ariaHideOutside with aria-modal="true".
153
+ * Using aria-modal, then we would need to involve Portal and so tooltips
154
+ * or Toasts could mount within the visible aria-modal container.
155
+ */
156
+ export function useModalDialogLike(_a) {
157
+ var ariaDescribedby = _a["aria-describedby"], ariaDetails = _a["aria-details"], ariaLabelledby = _a["aria-labelledby"], ariaLabel = _a["aria-label"], id = _a.id, isModal = _a.isModal, isOpen = _a.isOpen,
158
+ // @ts-expect-error
159
+ ref = _a.ref, _b = _a.role, role = _b === void 0 ? 'dialog' : _b;
160
+ var _c = useLabelled({
161
+ 'aria-describedby': ariaDescribedby,
162
+ 'aria-details': ariaDetails,
163
+ 'aria-labelledby': ariaLabelledby,
164
+ 'aria-label': ariaLabel,
165
+ }), labelProps = _c.labelProps, widgetProps = _c.widgetProps;
166
+ var dialogProps = __assign(__assign({}, widgetProps), { id: id, role: role, tabIndex: -1 });
167
+ // usePreventScroll({
168
+ // isDisabled: isModal ? !isOpen : true,
169
+ // })
170
+ // Fills aria-modal=true
171
+ React.useLayoutEffect(function () {
172
+ if (isModal && isOpen && ref.current) {
173
+ // Could add additional visible element refs here
174
+ return ariaHideOutside([ref.current]);
175
+ }
176
+ }, [isModal, isOpen, ref]);
177
+ return {
178
+ dialogProps: dialogProps,
179
+ labelProps: labelProps,
180
+ focusScopeProps: {
181
+ autoFocus: true,
182
+ contain: true,
183
+ restoreFocus: true,
184
+ },
185
+ };
186
+ }
187
+ /**
188
+ * Takes many roles and determines props necessary for DOM/components.
189
+ * **Side effect of role="dialog"**, current and any content added later
190
+ * outside of the element (like by portals) will get `aria-hidden=true`
191
+ * to replace the `aria-modal=true` `inert` nature.
192
+ * @see useModalDialogLike */
193
+ export function useOverlayTriggerA11y(_a) {
194
+ var alwaysAriaVisible = _a.alwaysAriaVisible, ariaDescribedby = _a["aria-describedby"], ariaDetails = _a["aria-details"], ariaLabelledby = _a["aria-labelledby"], ariaLabel = _a["aria-label"],
195
+ // can we remove this? have it role based? be optional?
196
+ canPropOverlayUp = _a.canPropOverlayUp, id_ = _a.id, isOpen = _a.isOpen, role = _a.role;
197
+ var isDialog = role === 'dialog';
198
+ var id = useId(id_);
199
+ var _b = getA11yPreset(role), getTriggerProps = _b.getTriggerProps, getOverlayProps = _b.getOverlayProps;
200
+ var triggerProps = getTriggerProps === null || getTriggerProps === void 0 ? void 0 : getTriggerProps({
201
+ isVisible: isOpen,
202
+ role: role,
203
+ overlayId: id,
204
+ });
205
+ var overlayA11yProps = getOverlayProps === null || getOverlayProps === void 0 ? void 0 : getOverlayProps({
206
+ isVisible: isOpen,
207
+ role: role,
208
+ overlayId: id,
209
+ });
210
+ var wrapperA11yProps = !canPropOverlayUp ? overlayA11yProps : emptyObj;
211
+ var overlayProps = canPropOverlayUp ? overlayA11yProps : emptyObj;
212
+ var _c = useModalDialogLike({
213
+ 'aria-describedby': ariaDescribedby,
214
+ 'aria-details': ariaDetails,
215
+ 'aria-labelledby': ariaLabelledby,
216
+ 'aria-label': ariaLabel,
217
+ id: id,
218
+ isModal: false,
219
+ isOpen: isOpen,
220
+ }), dialogProps = _c.dialogProps, labelProps = _c.labelProps, focusScopeProps = _c.focusScopeProps;
221
+ /** This is a code side-effect from ariaHideOutside hiding everthing */
222
+ var portalProps = role === 'tooltip' || alwaysAriaVisible // || !role
223
+ ? { 'data-react-aria-top-layer': true, 'data-live-announcer': true }
224
+ : emptyObj;
225
+ /**
226
+ * If it is a dialog, we can merge the dialog props with any haspopup props
227
+ */
228
+ var wrapperFinalProps = isDialog
229
+ ? __assign(__assign({}, wrapperA11yProps), dialogProps) : wrapperA11yProps;
230
+ /**
231
+ * If it is a dialog, we have opinions on `FocusScope` props.
232
+ */
233
+ var focusScopeFinalProps = isDialog
234
+ ? focusScopeProps
235
+ : emptyObj;
236
+ return {
237
+ focusScopeProps: focusScopeFinalProps,
238
+ labelProps: labelProps,
239
+ overlayProps: overlayProps,
240
+ portalProps: portalProps,
241
+ triggerProps: triggerProps,
242
+ wrapperProps: wrapperFinalProps,
243
+ };
244
+ }
245
+ // WIP Example combobox
246
+ // function useCombox({
247
+ // controls,
248
+ // isOpen = false,
249
+ // }: {
250
+ // controls: 'dialog' | 'menu' | 'listbox'
251
+ // isOpen: boolean
252
+ // }) {
253
+ // const { labelProps, popupProps, triggerProps } = useLabelledPopup({
254
+ // role: controls,
255
+ // type: 'combobox',
256
+ // isOpen,
257
+ // })
258
+ // dispatch between elements.
259
+ // NOTE combobox has two labels, that could be different
260
+ // one for the trigger input (typically the form label)
261
+ // second for the thing it controls (listbox, dialog)
262
+ // - label id=1
263
+ // - input role='combobox' aria-labelledby=1
264
+ // - div role={controls} aria-label
265
+ // Also, any icon only buttons like clear or open should have a
266
+ // label and -1 tabindex. No nested interactive roles.
267
+ // }
58
268
  //# sourceMappingURL=a11yPresets.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"a11yPresets.js","sourceRoot":"","sources":["../../src/OverlayTrigger/a11yPresets.ts"],"names":[],"mappings":"AAGA,IAAM,WAAW,GAAiB,cAAM,OAAA,CAAC,EAAE,CAAC,EAAJ,CAAI,CAAA;AAQ5C,IAAM,WAAW,GAMb;IACF,QAAQ,EAAE;QACR,eAAe,EAAE,UAAC,EAAmB;gBAAjB,IAAI,UAAA,EAAE,SAAS,eAAA;YAAO,OAAA,CAAC;gBACzC,EAAE,EAAE,SAAS;gBACb,IAAI,MAAA;aACL,CAAC;QAHwC,CAGxC;QACF,eAAe,EAAE,UAAC,EAA8B;gBAA5B,IAAI,UAAA,EAAE,SAAS,eAAA,EAAE,SAAS,eAAA;YAAO,OAAA,CAAC;gBACpD,eAAe,EAAE,SAAS;gBAC1B,eAAe,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;gBAClD,eAAe,EAAE,IAAqC;aACvD,CAAC;QAJmD,CAInD;KACH;IACD,OAAO,EAAE;QACP,eAAe,EAAE,UAAC,EAAa;gBAAX,SAAS,eAAA;YAAO,OAAA,CAAC;gBACnC,IAAI,EAAE,SAAS;gBACf,EAAE,EAAE,SAAS;aACd,CAAC;QAHkC,CAGlC;QACF,eAAe,EAAE,UAAC,EAAwB;gBAAtB,SAAS,eAAA,EAAE,SAAS,eAAA;YACtC,OAAA,SAAS;gBACP,CAAC,CAAC;oBACE,kBAAkB,EAAE,SAAS;iBAC9B;gBACH,CAAC,CAAC,EAAE;QAJN,CAIM;KACT;CACF,CAAA;AAED,MAAM,UAAU,aAAa,CAAC,IAAyB;IACrD,QAAQ,IAAI,EAAE;QACZ,KAAK,QAAQ,CAAC;QACd,KAAK,SAAS,CAAC;QACf,KAAK,MAAM;YACT,OAAO,WAAW,CAAC,QAAQ,CAAA;QAC7B,KAAK,SAAS;YACZ,OAAO,WAAW,CAAC,OAAO,CAAA;QAC5B,KAAK,MAAM;YACT,OAAO;gBACL,eAAe,EAAE,CAAC,cAAM,OAAA,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAlB,CAAkB,CAAiB;gBAC3D,eAAe,EAAE,WAAW;aAC7B,CAAA;QACH;YACE,OAAO;gBACL,eAAe,EAAE,WAAW;gBAC5B,eAAe,EAAE,WAAW;aAC7B,CAAA;KACJ;AACH,CAAC"}
1
+ {"version":3,"file":"a11yPresets.js","sourceRoot":"","sources":["../../src/OverlayTrigger/a11yPresets.ts"],"names":[],"mappings":"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"}
@@ -1,6 +1,28 @@
1
1
  import React from 'react';
2
2
  import { DivAttributes } from '../_utils/types';
3
- import { PopoverContentProps, PopoverProps } from './Popover.types';
4
- export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLElement>> & {
3
+ import { PopoverContentProps, PopoverProps, PopoverRole } from './Popover.types';
4
+ /**
5
+
6
+ We use popovers to display more of an item’s information or details on hover.
7
+ This may be used to show additional fields in an item’s form that aren’t shown
8
+ by default in the UI. Oftentimes, there will be a visual queue to indicate that
9
+ more information is available.
10
+
11
+ Do not use popovers to display large amounts of information, perform data
12
+ entry, or use as a replacement for an overflow, menu, or modal.
13
+
14
+ If you want to show descriptive / educational information about an item,
15
+ use a tooltip.
16
+
17
+ @since 10.19.0
18
+
19
+ @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/demos-popover--demo)
20
+
21
+ @see [Design Guidelines](https://design.procore.com/popover)
22
+
23
+ */
24
+ declare function PopoverInner<Role extends PopoverRole>({ children, initialIsVisible, restoreFocusOnHide, placement, overlay, overlayRef, role, ...props }: PopoverProps<Role>, ref: React.ForwardedRef<HTMLElement>): JSX.Element;
25
+ export declare const Popover: (<Role extends PopoverRole>(props: PopoverProps<Role>) => ReturnType<typeof PopoverInner>) & {
5
26
  Content: React.ForwardRefExoticComponent<DivAttributes & PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
6
27
  };
28
+ export {};
@@ -50,11 +50,13 @@ var Content = React.forwardRef(function Content(_a, ref) {
50
50
  @see [Design Guidelines](https://design.procore.com/popover)
51
51
 
52
52
  */
53
- var Popover_ = React.forwardRef(function Popover(_a, ref) {
54
- var children = _a.children, _b = _a.initialIsVisible, initialIsVisible = _b === void 0 ? false : _b, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, overlay = _a.overlay, overlayRef = _a.overlayRef, props = __rest(_a, ["children", "initialIsVisible", "placement", "overlay", "overlayRef"]);
53
+ function PopoverInner(_a, ref) {
54
+ var children = _a.children, _b = _a.initialIsVisible, initialIsVisible = _b === void 0 ? false : _b, _c = _a.restoreFocusOnHide, restoreFocusOnHide = _c === void 0 ? false : _c, _d = _a.placement, placement = _d === void 0 ? 'top' : _d, overlay = _a.overlay, overlayRef = _a.overlayRef, role = _a.role, props = __rest(_a, ["children", "initialIsVisible", "restoreFocusOnHide", "placement", "overlay", "overlayRef", "role"]);
55
55
  var overlayNode = isReactElement(overlay) ? (React.cloneElement(overlay, { placement: placement })) : (React.createElement(React.Fragment, null));
56
- return (React.createElement(OverlayTrigger, __assign({}, __assign(__assign({}, props), { initialIsVisible: initialIsVisible, overlay: overlayNode, placement: placement, ref: ref, restoreFocusOnHide: false, shrinkOverlay: true, arrow: true, overlayRef: overlayRef })), children));
57
- });
56
+ return (React.createElement(OverlayTrigger, __assign({}, __assign(__assign({}, props), { initialIsVisible: initialIsVisible, overlay: overlayNode, placement: placement, role: role, ref: ref, restoreFocusOnHide: restoreFocusOnHide, shrinkOverlay: true, arrow: true, overlayRef: overlayRef })), children));
57
+ }
58
+ var Popover_ = React.forwardRef(PopoverInner);
59
+ // @ts-expect-error
58
60
  Popover_.displayName = 'Popover';
59
61
  Content.displayName = 'Popover.Content';
60
62
  export var Popover = addSubcomponents({ Content: Content }, Popover_);
@@ -1 +1 @@
1
- {"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAA;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAEzD,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAGtE,IAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAG9B,SAAS,OAAO,CAChB,EAAwD,EACxD,GAAG;IADD,IAAA,QAAQ,cAAA,EAAE,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA,EAAE,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EAAK,KAAK,cAAtD,kCAAwD,CAAF;IAGtD,OAAO,CACL,oBAAC,aAAa,IAAC,GAAG,EAAE,GAAG;QACrB,oBAAC,oBAAoB,eAAK,KAAK,cAAU,KAAK,gBAAc,SAAS,KAClE,QAAQ,CACY,CACT,CACjB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,IAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAA4B,SAAS,OAAO,CAC3E,EAOC,EACD,GAAG;IAPD,IAAA,QAAQ,cAAA,EACR,wBAAwB,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EACxB,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,OAAO,aAAA,EACP,UAAU,gBAAA,EACP,KAAK,cANV,sEAOC,CADS;IAIV,IAAM,WAAW,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAC5C,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,SAAS,WAAA,EAAE,CAAC,CAC3C,CAAC,CAAC,CAAC,CACF,oBAAC,KAAK,CAAC,QAAQ,OAAG,CACnB,CAAA;IAED,OAAO,CACL,oBAAC,cAAc,qCAER,KAAK,KACR,gBAAgB,kBAAA,EAChB,OAAO,EAAE,WAAW,EACpB,SAAS,WAAA,EACT,GAAG,KAAA,EACH,kBAAkB,EAAE,KAAK,EACzB,aAAa,EAAE,IAAI,EACnB,KAAK,EAAE,IAAI,EACX,UAAU,YAAA,MAGX,QAAQ,CACM,CAClB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,WAAW,GAAG,SAAS,CAAA;AAEhC,OAAO,CAAC,WAAW,GAAG,iBAAiB,CAAA;AAEvC,MAAM,CAAC,IAAM,OAAO,GAAG,gBAAgB,CAAC,EAAE,OAAO,SAAA,EAAE,EAAE,QAAQ,CAAC,CAAA"}
1
+ {"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAA;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAEzD,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAGtE,IAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAG9B,SAAS,OAAO,CAChB,EAAwD,EACxD,GAAG;IADD,IAAA,QAAQ,cAAA,EAAE,aAAa,EAAb,KAAK,mBAAG,KAAK,KAAA,EAAE,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EAAK,KAAK,cAAtD,kCAAwD,CAAF;IAGtD,OAAO,CACL,oBAAC,aAAa,IAAC,GAAG,EAAE,GAAG;QACrB,oBAAC,oBAAoB,eAAK,KAAK,cAAU,KAAK,gBAAc,SAAS,KAClE,QAAQ,CACY,CACT,CACjB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,SAAS,YAAY,CACnB,EASqB,EACrB,GAAoC;IATlC,IAAA,QAAQ,cAAA,EACR,wBAAwB,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EACxB,0BAA0B,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EAC1B,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,OAAO,aAAA,EACP,UAAU,gBAAA,EACV,IAAI,UAAA,EACD,KAAK,cARV,oGASC,CADS;IAIV,IAAM,WAAW,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAC5C,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,SAAS,WAAA,EAAE,CAAC,CAC3C,CAAC,CAAC,CAAC,CACF,oBAAC,KAAK,CAAC,QAAQ,OAAG,CACnB,CAAA;IAED,OAAO,CACL,oBAAC,cAAc,qCAER,KAAK,KACR,gBAAgB,kBAAA,EAChB,OAAO,EAAE,WAAW,EACpB,SAAS,WAAA,EACT,IAAI,MAAA,EACJ,GAAG,KAAA,EACH,kBAAkB,oBAAA,EAClB,aAAa,EAAE,IAAI,EACnB,KAAK,EAAE,IAAI,EACX,UAAU,YAAA,MAGX,QAAQ,CACM,CAClB,CAAA;AACH,CAAC;AAED,IAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAEV,CAAA;AAEpC,mBAAmB;AACnB,QAAQ,CAAC,WAAW,GAAG,SAAS,CAAA;AAEhC,OAAO,CAAC,WAAW,GAAG,iBAAiB,CAAA;AAEvC,MAAM,CAAC,IAAM,OAAO,GAAG,gBAAgB,CAAC,EAAE,OAAO,SAAA,EAAE,EAAE,QAAQ,CAAC,CAAA"}
@@ -2,7 +2,7 @@
2
2
  import { OverlayTriggerRef } from '../OverlayTrigger/OverlayTrigger.types';
3
3
  import { TriggerVariant } from '../_hooks/Trigger';
4
4
  import { Placement } from '../_utils/placement';
5
- import { Props } from '../_utils/types';
5
+ import { AriaLabelled, Props } from '../_utils/types';
6
6
  export interface PopoverContentProps {
7
7
  /**
8
8
  * @since 10.19.0
@@ -13,7 +13,8 @@ export interface PopoverContentProps {
13
13
  */
14
14
  placement?: Placement;
15
15
  }
16
- export interface PopoverProps extends Props {
16
+ export declare type PopoverRole = 'dialog' | undefined;
17
+ export interface PopoverBaseProps<Role extends PopoverRole = undefined> extends Props {
17
18
  /**
18
19
  * Whether to show the overlay on initial render
19
20
  * @defaultValue false
@@ -33,6 +34,13 @@ export interface PopoverProps extends Props {
33
34
  * @since 10.19.0
34
35
  */
35
36
  placement?: Placement;
37
+ /**
38
+ * Return focus to trigger after the closing popover modal dialog
39
+ * @a11y Should be set to true.
40
+ * @defaultValue false
41
+ * @since 11.8.0
42
+ */
43
+ restoreFocusOnHide?: boolean;
36
44
  /**
37
45
  * The event to trigger the overlay
38
46
  * @defaultValue click
@@ -44,4 +52,9 @@ export interface PopoverProps extends Props {
44
52
  * @since 11.2.0
45
53
  */
46
54
  overlayRef?: React.Ref<OverlayTriggerRef>;
55
+ /**
56
+ * @since 11.11.0
57
+ */
58
+ role?: Role;
47
59
  }
60
+ export declare type PopoverProps<Role extends PopoverRole = undefined> = Role extends 'dialog' ? AriaLabelled<PopoverBaseProps<'dialog'>> : PopoverBaseProps<undefined>;
@@ -5,4 +5,4 @@ import { PortalProps } from './Portal.types';
5
5
  * @deprecated Intended for internal library development.
6
6
  * @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/coverage-portal--defaults)
7
7
  */
8
- export declare function Portal({ children, container, }: PortalProps): React.ReactPortal;
8
+ export declare function Portal({ children, container, ...props }: PortalProps): React.ReactPortal;
@@ -1,3 +1,25 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ var __rest = (this && this.__rest) || function (s, e) {
13
+ var t = {};
14
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
+ t[p] = s[p];
16
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
+ t[p[i]] = s[p[i]];
20
+ }
21
+ return t;
22
+ };
1
23
  import React from 'react';
2
24
  import ReactDOM from 'react-dom';
3
25
  import { useZIndexContext } from '../_hooks/ZIndex';
@@ -8,8 +30,8 @@ import { StyledPortal } from './Portal.styles';
8
30
  * @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/coverage-portal--defaults)
9
31
  */
10
32
  export function Portal(_a) {
11
- var children = _a.children, container = _a.container;
33
+ var children = _a.children, container = _a.container, props = __rest(_a, ["children", "container"]);
12
34
  var zIndexCtx = useZIndexContext();
13
- return ReactDOM.createPortal(React.createElement(StyledPortal, { style: { zIndex: zIndexCtx.value } }, children), container || document.body);
35
+ return ReactDOM.createPortal(React.createElement(StyledPortal, __assign({}, props, { style: { zIndex: zIndexCtx.value } }), children), container || document.body);
14
36
  }
15
37
  //# sourceMappingURL=Portal.js.map