@procore/core-react 12.41.0 → 12.42.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 (215) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/AnchorNavigation/AnchorNavigation.styles.js +3 -3
  3. package/dist/Avatar/Avatar.styles.js +5 -5
  4. package/dist/AvatarStack/AvatarStack.styles.js +7 -7
  5. package/dist/Badge/Badge.styles.js +2 -2
  6. package/dist/BadgePill/BadgePill.styles.js +4 -4
  7. package/dist/Banner/Banner.styles.js +10 -10
  8. package/dist/Box/Box.styles.js +1 -1
  9. package/dist/Breadcrumbs/Breadcrumbs.styles.js +4 -4
  10. package/dist/Button/Button.styles.js +5 -5
  11. package/dist/Calendar/Calendar.styles.js +9 -9
  12. package/dist/Card/Card.styles.js +1 -1
  13. package/dist/Checkbox/Checkbox.styles.js +6 -6
  14. package/dist/ContactItem/ContactItem.js +7 -3
  15. package/dist/ContactItem/ContactItem.js.map +1 -1
  16. package/dist/ContactItem/ContactItem.styles.js +5 -5
  17. package/dist/Content/Content.styles.js +2 -2
  18. package/dist/DateInput/DateInput.styles.js +6 -6
  19. package/dist/DetailPage/DetailPage.styles.js +7 -7
  20. package/dist/Dropdown/Dropdown.styles.js +3 -3
  21. package/dist/DropdownFlyout/DropdownFlyout.styles.js +4 -4
  22. package/dist/Dropzone/Dropzone.js +1 -1
  23. package/dist/Dropzone/Dropzone.styles.js +9 -9
  24. package/dist/EmptyState/EmptyState.styles.js +6 -6
  25. package/dist/Field/Field.styles.js +3 -3
  26. package/dist/FileList/FileList.styles.js +3 -3
  27. package/dist/FileSelect/FileExplorer/FileExplorer.styles.js +9 -9
  28. package/dist/FileSelect/FileExplorer/FileExplorerSidebar.styles.js +3 -3
  29. package/dist/FileSelect/FileSelect.styles.js +2 -2
  30. package/dist/FileSelect/FileSelectDropzone/FileSelectDropzone.styles.js +3 -3
  31. package/dist/FileSelect/FileTokenList/FileTokenList.styles.js +2 -2
  32. package/dist/FileSelect/GridSource/GridSource.styles.js +6 -6
  33. package/dist/FileSelect/LocalSource/LocalSource.styles.js +4 -4
  34. package/dist/FileSelect/SourceItem/SourceItem.styles.js +3 -3
  35. package/dist/FileSelect/ThumbnailList/ThumbnailList.styles.js +6 -6
  36. package/dist/FileSelect/TreeSource/TreeSource.styles.js +1 -1
  37. package/dist/FileToken/FileToken.styles.js +6 -6
  38. package/dist/FilterToken/FilterToken.styles.js +5 -5
  39. package/dist/FlexList/FlexList.styles.js +1 -1
  40. package/dist/Form/Form.styles.js +13 -13
  41. package/dist/Form/StyledFormikForm.styles.js +2 -2
  42. package/dist/GhostPlaceholder/GhostPlaceholder.styles.js +2 -2
  43. package/dist/Grid/Grid.styles.js +2 -2
  44. package/dist/GroupSelect/GroupSelect.styles.js +1 -1
  45. package/dist/Input/Input.styles.js +1 -1
  46. package/dist/Link/Link.styles.js +1 -1
  47. package/dist/ListPage/ListPage.styles.js +8 -8
  48. package/dist/Loader/Loader.styles.js +2 -2
  49. package/dist/MenuImperative/MenuImperative.d.ts +1 -1
  50. package/dist/MenuImperative/MenuImperative.js +126 -34
  51. package/dist/MenuImperative/MenuImperative.js.map +1 -1
  52. package/dist/MenuImperative/MenuImperative.styles.js +15 -15
  53. package/dist/MenuImperative/MenuImperative.styles.js.map +1 -1
  54. package/dist/MenuImperative/MenuImperative.types.d.ts +36 -0
  55. package/dist/MenuImperative/MenuImperative.types.js.map +1 -1
  56. package/dist/MenuImperative/sensors.d.ts +6 -3
  57. package/dist/MenuImperative/sensors.js +42 -34
  58. package/dist/MenuImperative/sensors.js.map +1 -1
  59. package/dist/Modal/Modal.d.ts +4 -0
  60. package/dist/Modal/Modal.js +23 -13
  61. package/dist/Modal/Modal.js.map +1 -1
  62. package/dist/Modal/Modal.styles.js +13 -13
  63. package/dist/Modal/Modal.types.d.ts +28 -5
  64. package/dist/Modal/Modal.types.js.map +1 -1
  65. package/dist/Modal/index.d.ts +1 -1
  66. package/dist/Modal/index.js.map +1 -1
  67. package/dist/MultiSelect/MultiSelect.styles.js +8 -8
  68. package/dist/NextMenu/NextMenu.styles.js +3 -3
  69. package/dist/Notation/Notation.js +1 -1
  70. package/dist/NumberInput/NumberInput.styles.js +7 -7
  71. package/dist/Overlay/OverlayArrow.styles.js +1 -1
  72. package/dist/OverlayTrigger/a11yPresets.d.ts +17 -24
  73. package/dist/OverlayTrigger/a11yPresets.js +29 -27
  74. package/dist/OverlayTrigger/a11yPresets.js.map +1 -1
  75. package/dist/PageLayout/PageLayout.styles.js +16 -16
  76. package/dist/PageTemplate/PageFooterTemplate/PageFooterTemplate.styles.js +1 -1
  77. package/dist/PageTemplate/PageHeaderTemplate/PageHeaderTemplate.styles.js +3 -3
  78. package/dist/PageTemplate/PagePaneTemplate/PagePaneTemplate.styles.js +2 -2
  79. package/dist/PageTemplate/PageTemplate/PageTemplate.styles.js +3 -3
  80. package/dist/Pagination/Pagination.styles.js +5 -5
  81. package/dist/Panel/Panel.styles.js +11 -11
  82. package/dist/Pill/Pill.styles.js +3 -3
  83. package/dist/PillSelect/PillSelect.styles.js +4 -4
  84. package/dist/Popover/Popover.styles.js +2 -2
  85. package/dist/Portal/Portal.styles.js +1 -1
  86. package/dist/ProgressBar/ProgressBar.styles.js +4 -4
  87. package/dist/ProgressBar/ProgressBar.styles.js.map +1 -1
  88. package/dist/RadioButton/RadioButton.styles.js +3 -3
  89. package/dist/Required/Required.styles.js +3 -3
  90. package/dist/Search/Search.styles.js +5 -5
  91. package/dist/Section/Section.styles.js +7 -7
  92. package/dist/SegmentedController/SegmentedController.styles.js +4 -4
  93. package/dist/Select/Select.styles.js +8 -8
  94. package/dist/Semantic/Semantic.styles.js +9 -9
  95. package/dist/Slider/Slider.styles.js +5 -5
  96. package/dist/Spinner/Spinner.styles.js +7 -7
  97. package/dist/SplitViewCard/SplitViewCard.styles.js +8 -8
  98. package/dist/SuperSelect/SuperSelect.presets.styles.js +1 -1
  99. package/dist/SuperSelect/SuperSelect.styles.js +38 -38
  100. package/dist/SuperSelect/useSuperSelect.js +2 -2
  101. package/dist/SuperSelect/useSuperSelect.js.map +1 -1
  102. package/dist/Switch/Switch.styles.js +4 -4
  103. package/dist/Table/Table.styles.js +28 -28
  104. package/dist/TableShelf/TableShelf.styles.js +5 -5
  105. package/dist/Tabs/Tabs.styles.js +15 -15
  106. package/dist/Tearsheet/Tearsheet.js +1 -1
  107. package/dist/Tearsheet/Tearsheet.js.map +1 -1
  108. package/dist/Tearsheet/Tearsheet.styles.js +5 -5
  109. package/dist/Tearsheet/storybook/PageLayoutDemo.js +1 -0
  110. package/dist/Tearsheet/storybook/PageLayoutDemo.js.map +1 -1
  111. package/dist/TextArea/TextArea.styles.js +1 -1
  112. package/dist/TextEditorOutput/TextEditorOutput.styles.js +1 -1
  113. package/dist/Thumbnail/Thumbnail.styles.js +17 -17
  114. package/dist/ThumbnailGrid/ThumbnailGrid.styles.js +7 -7
  115. package/dist/TieredSelect/TieredSelect.styles.js +9 -9
  116. package/dist/Tile/Tile.styles.js +8 -8
  117. package/dist/Title/Title.styles.js +7 -7
  118. package/dist/Toast/Toast.styles.js +3 -3
  119. package/dist/ToggleButton/ToggleButton.styles.js +1 -1
  120. package/dist/Token/Token.styles.js +3 -3
  121. package/dist/ToolHeader/ToolHeader.styles.js +6 -6
  122. package/dist/ToolLandingPage/ToolLandingPage.styles.js +3 -3
  123. package/dist/Tooltip/Tooltip.styles.js +3 -3
  124. package/dist/Tree/Tree.js +1 -1
  125. package/dist/Tree/Tree.styles.js +10 -10
  126. package/dist/Typeahead/Typeahead.styles.js +3 -3
  127. package/dist/Typography/Typography.styles.js +1 -1
  128. package/dist/Typography/Typography.table.story.js +2 -2
  129. package/dist/_hooks/I18n.d.ts +14 -0
  130. package/dist/_locales/en.json +8 -1
  131. package/dist/_locales/pseudo.json +8 -1
  132. package/dist/_storyHelpers_/components/Deprecation.styles.js +1 -1
  133. package/dist/_storyHelpers_/components/StoryGrid.js +3 -3
  134. package/dist/_styles/colors.js +1 -3
  135. package/dist/_styles/colors.js.map +1 -1
  136. package/dist/_typedoc/AnchorNavigation/AnchorNavigation.types.json +3 -3
  137. package/dist/_typedoc/Avatar/Avatar.types.json +20 -20
  138. package/dist/_typedoc/AvatarStack/AvatarStack.types.json +25 -25
  139. package/dist/_typedoc/Badge/Badge.types.json +6 -6
  140. package/dist/_typedoc/Banner/Banner.types.json +15 -15
  141. package/dist/_typedoc/Box/Box.types.json +68 -68
  142. package/dist/_typedoc/Breadcrumbs/Breadcrumbs.types.json +10 -10
  143. package/dist/_typedoc/Button/Button.types.json +13 -13
  144. package/dist/_typedoc/Calendar/Calendar.types.json +80 -80
  145. package/dist/_typedoc/Card/Card.types.json +6 -6
  146. package/dist/_typedoc/Checkbox/Checkbox.types.json +8 -8
  147. package/dist/_typedoc/ContactItem/ContactItem.types.json +9 -9
  148. package/dist/_typedoc/DateInput/DateInput.types.json +35 -35
  149. package/dist/_typedoc/DateSelect/DateSelect.types.json +13 -13
  150. package/dist/_typedoc/DetailPage/DetailPage.types.json +5 -5
  151. package/dist/_typedoc/Dropdown/Dropdown.types.json +37 -37
  152. package/dist/_typedoc/DropdownFlyout/DropdownFlyout.types.json +31 -31
  153. package/dist/_typedoc/Dropzone/Dropzone.types.json +44 -44
  154. package/dist/_typedoc/EmptyState/EmptyState.types.json +16 -16
  155. package/dist/_typedoc/FileList/FileList.types.json +9 -9
  156. package/dist/_typedoc/FileSelect/FileSelect.types.json +27 -27
  157. package/dist/_typedoc/FileSelect/GridSource/GridSource.types.json +20 -20
  158. package/dist/_typedoc/FileSelect/LocalSource/LocalSource.types.json +14 -14
  159. package/dist/_typedoc/FileSelect/TreeSource/TreeSource.types.json +9 -9
  160. package/dist/_typedoc/Flex/Flex.types.json +27 -27
  161. package/dist/_typedoc/FlexList/FlexList.types.json +30 -30
  162. package/dist/_typedoc/Form/Form.types.json +760 -760
  163. package/dist/_typedoc/GhostPlaceholder/GhostPlaceholder.types.json +12 -12
  164. package/dist/_typedoc/Grid/Grid.types.json +8 -8
  165. package/dist/_typedoc/GroupSelect/GroupSelect.types.json +54 -54
  166. package/dist/_typedoc/Input/Input.types.json +2 -2
  167. package/dist/_typedoc/Link/Link.types.json +1 -1
  168. package/dist/_typedoc/ListPage/ListPage.types.json +13 -13
  169. package/dist/_typedoc/Menu/Menu.types.json +62 -62
  170. package/dist/_typedoc/MenuImperative/MenuImperative.types.json +147 -77
  171. package/dist/_typedoc/Modal/Modal.types.json +96 -68
  172. package/dist/_typedoc/MultiSelect/MultiSelect.types.json +33 -33
  173. package/dist/_typedoc/NextTile/NextTile.types.json +32 -32
  174. package/dist/_typedoc/Notation/Notation.types.json +4 -4
  175. package/dist/_typedoc/NumberInput/NumberInput.types.json +48 -48
  176. package/dist/_typedoc/OverlayTrigger/OverlayTrigger.types.json +33 -33
  177. package/dist/_typedoc/PageLayout/PageLayout.types.json +28 -28
  178. package/dist/_typedoc/Pagination/Pagination.types.json +7 -7
  179. package/dist/_typedoc/Panel/Panel.types.json +27 -27
  180. package/dist/_typedoc/Pill/Pill.types.json +2 -2
  181. package/dist/_typedoc/PillSelect/PillSelect.types.json +49 -49
  182. package/dist/_typedoc/Popover/Popover.types.json +15 -15
  183. package/dist/_typedoc/ProgressBar/ProgressBar.types.json +7 -7
  184. package/dist/_typedoc/RadioButton/RadioButton.types.json +6 -6
  185. package/dist/_typedoc/Required/Required.types.json +5 -5
  186. package/dist/_typedoc/Search/Search.types.json +18 -18
  187. package/dist/_typedoc/Section/Section.types.json +15 -15
  188. package/dist/_typedoc/SegmentedController/SegmentedController.types.json +21 -21
  189. package/dist/_typedoc/Select/Select.types.json +67 -67
  190. package/dist/_typedoc/SettingsPage/SettingsPage.types.json +10 -10
  191. package/dist/_typedoc/Slider/Slider.types.json +6 -6
  192. package/dist/_typedoc/Spinner/Spinner.types.json +9 -9
  193. package/dist/_typedoc/SplitViewCard/SplitViewCard.types.json +14 -14
  194. package/dist/_typedoc/Table/Table.types.json +102 -102
  195. package/dist/_typedoc/Tabs/Tabs.types.json +21 -21
  196. package/dist/_typedoc/Tearsheet/Tearsheet.types.json +17 -17
  197. package/dist/_typedoc/TextArea/TextArea.types.json +3 -3
  198. package/dist/_typedoc/TextEditor/TextEditor.types.json +11 -11
  199. package/dist/_typedoc/TextEditorOutput/TextEditorOutput.types.json +4 -4
  200. package/dist/_typedoc/Thumbnail/Thumbnail.types.json +19 -19
  201. package/dist/_typedoc/TieredDropdown/TieredDropdown.types.json +43 -43
  202. package/dist/_typedoc/TieredSelect/TieredSelect.types.json +29 -29
  203. package/dist/_typedoc/Tile/Tile.types.json +8 -8
  204. package/dist/_typedoc/Title/Title.types.json +1 -1
  205. package/dist/_typedoc/Toast/Toast.types.json +4 -4
  206. package/dist/_typedoc/ToggleButton/ToggleButton.types.json +4 -4
  207. package/dist/_typedoc/Token/Token.types.json +7 -7
  208. package/dist/_typedoc/ToolHeader/ToolHeader.types.json +10 -10
  209. package/dist/_typedoc/ToolLandingPage/ToolLandingPage.types.json +8 -8
  210. package/dist/_typedoc/Tooltip/Tooltip.types.json +15 -15
  211. package/dist/_typedoc/Tree/Tree.types.json +88 -88
  212. package/dist/_typedoc/Typeahead/Typeahead.types.json +2 -2
  213. package/dist/_typedoc/Typography/Typography.types.json +9 -9
  214. package/dist/_typedoc/_utils/types.json +3 -3
  215. package/package.json +2 -2
@@ -10,7 +10,7 @@ export declare type ModalWidth = 'sm' | 'md' | 'lg' | 'xl';
10
10
  */
11
11
  export declare type ModalOptionalCloseStartegy = 'x' | 'footer-button' | 'scrim';
12
12
  declare type ModalCloseStragety = 'esc' | ModalOptionalCloseStartegy;
13
- declare type ModalOnClose = (event: React.MouseEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLElement>, how: ModalCloseStragety) => void;
13
+ export declare type ModalOnClose = (event: React.MouseEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLElement>, how: ModalCloseStragety) => void;
14
14
  export interface ModalCloseContextApi {
15
15
  /**
16
16
  * Escape key will always close a dialog. This adds additional UI or UX to close.
@@ -44,6 +44,12 @@ export interface ModalProps extends Props {
44
44
  * @since 11.12.0
45
45
  */
46
46
  'aria-label'?: string;
47
+ /**
48
+ * @a11y Should be used for a single true modal. Cannot open nested modals.
49
+ * @experimental Core-React does not support multiple or nested `aria-modal`s for Tearsheets, Modals, or ConfirmModals.
50
+ * @since 12.42.0
51
+ */
52
+ 'aria-modal'?: boolean;
47
53
  /**
48
54
  * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY
49
55
  * @defaultValue false
@@ -65,7 +71,8 @@ export interface ModalProps extends Props {
65
71
  */
66
72
  id?: string;
67
73
  /**
68
- * Callback for clicking the overlay
74
+ * @deprecated Use `howToClose={['scrim']}` with `onClose` instead.
75
+ * @deprecatedSince 12.41.0
69
76
  * @since 10.19.0
70
77
  */
71
78
  onClickOverlay?: (event: React.MouseEvent<HTMLDivElement>) => void;
@@ -85,7 +92,7 @@ export interface ModalProps extends Props {
85
92
  /**
86
93
  * Enable dialog props. REQUIRES `onClose` to enable Escape key and focus management. MUST be labelled, prefer `aria-labelledby` over `aria-label`.
87
94
  */
88
- role?: 'dialog';
95
+ role?: 'dialog' | 'alertdialog';
89
96
  /**
90
97
  * Vertical placement of the modal.
91
98
  * Positioning modal at the top ensures that variable height modal won't shift position during content loading,
@@ -124,10 +131,24 @@ export interface ConfirmModalProps extends Omit<ModalProps, 'onClose'> {
124
131
  */
125
132
  headline?: string;
126
133
  /**
127
- * The dismiss onClick callback
134
+ * Callback when the ConfirmModal is dismissed.
135
+ *
136
+ * @a11y **Accessible pattern (recommended):** Use with `role="dialog"` and `howToClose={['x']}`.
137
+ * This enables focus management, Escape key support, and proper dialog semantics.
138
+ * The callback signature is `(event, how) => void`.
139
+ *
140
+ * **Legacy pattern:** `(event: MouseEvent<HTMLButtonElement>) => void` — only handles X button click,
141
+ * no focus management or Escape key support.
142
+ *
128
143
  * @since 10.19.0
129
144
  */
130
- onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
145
+ onClose?: ModalOnClose | ((event: React.MouseEvent<HTMLButtonElement>) => void);
146
+ /**
147
+ *
148
+ * @a11y Recommended to use. When using alertdialog should be a `aria-modal` because of their urgent nature. **Cannot open nested modals.**
149
+ * @since 12.42.0
150
+ */
151
+ 'aria-modal'?: boolean;
131
152
  }
132
153
  /**
133
154
  * NOTE: Using howToClose 'x' requires the `Modal.Header` component.
@@ -135,6 +156,8 @@ export interface ConfirmModalProps extends Omit<ModalProps, 'onClose'> {
135
156
  */
136
157
  export interface ModalCloseableHeaderProps extends Props {
137
158
  /**
159
+ * @deprecated Use `Modal onClose` with `howToClose={['x']}` instead.
160
+ * @deprecatedSince 12.41.0
138
161
  * @since 10.19.0
139
162
  */
140
163
  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.types.js","names":[],"sources":["../../src/Modal/Modal.types.ts"],"sourcesContent":["import type React from 'react'\nimport type { Props } from '../_utils/types'\n\nexport type ModalPlacement = 'top' | 'center'\nexport type ModalWidth = 'sm' | 'md' | 'lg' | 'xl'\n\n/**\n * Additional UI/UX to dismiss. (In addition to the Esc key)\n * - `x` Close Button in the Modal Header\n * - `scrim` Overlay dimmed scrim\n * - `footer-button` Cancel Button in the Modal Footer Actions\n */\nexport type ModalOptionalCloseStartegy = 'x' | 'footer-button' | 'scrim'\ntype ModalCloseStragety = 'esc' | ModalOptionalCloseStartegy\n\ntype ModalOnClose = (\n event: // clicked scrim\n | React.MouseEvent<HTMLDivElement>\n // clicked x button\n | React.MouseEvent<HTMLButtonElement>\n // pressed escape key\n | React.KeyboardEvent<HTMLElement>,\n how: ModalCloseStragety\n) => void\n\nexport interface ModalCloseContextApi {\n /**\n * Escape key will always close a dialog. This adds additional UI or UX to close.\n */\n howToClose: ModalOptionalCloseStartegy[] | undefined\n onClose: ModalOnClose | undefined\n}\n\nexport interface ModalCloseableHeaderProps\n extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY\n * @defaultValue false\n * @since 12.8.0\n */\n compact?: boolean\n qa?: { closeButton?: string }\n}\n\nexport interface ModalProps extends Props {\n 'aria-describedby'?: string\n 'aria-details'?: string\n /**\n * @a11y Automatially created when using `Modal.Heading`. The `role='dialog'` MUST be labelled. Prefer `aria-labelledby` over `aria-label`.\n * @since 11.12.0\n */\n 'aria-labelledby'?: string\n /**\n * @a11y `role='dialog'` MUST be labelled. Prefer `aria-labelledby` over `aria-label`.\n * If using an `aria-label` instead of a node, be sure give the modal an `id` so\n * other regions can reference it.\n * @since 11.12.0\n */\n 'aria-label'?: string\n /**\n * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY\n * @defaultValue false\n * @since 12.8.0\n */\n compact?: boolean\n /**\n * This adds additional UI or UX to close. Escape key will always close a dialog, see `onClose`.\n *\n * NOTE 'footer-button': Footer Cancel button still requires at least a rendered self closing `Modal.FooterButtons`.\n *\n * NOTE 'x': The X button still requires a rendered `Modal.Header` component.\n * @defaultValue []\n * @since 11.12.0\n */\n howToClose?: ModalOptionalCloseStartegy[]\n /**\n * Aligns with `role` and `ref` location.\n */\n id?: string\n /**\n * Callback for clicking the overlay\n * @since 10.19.0\n */\n onClickOverlay?: (event: React.MouseEvent<HTMLDivElement>) => void\n /**\n * When a user closes the Modal by some approved `howToClose` method or the Escape key. This also opts-in to dialog focus management.\n * @a11y Future default! Moves focus into and cycles focus in the Modal, and returning focus\n * to the trigger when closed. Also enables the Escape key to close the Modal.\n * @since 11.6.0\n */\n onClose?: ModalOnClose\n /**\n * Modal open state\n * @defaultValue false\n * @since 10.19.0\n */\n open?: boolean\n /**\n * Enable dialog props. REQUIRES `onClose` to enable Escape key and focus management. MUST be labelled, prefer `aria-labelledby` over `aria-label`.\n */\n role?: 'dialog'\n /**\n * Vertical placement of the modal.\n * Positioning modal at the top ensures that variable height modal won't shift position during content loading,\n * providing a more stable user experience.\n * @defaultValue center\n * @since 10.19.0\n */\n placement?: ModalPlacement\n /**\n * Sets a width on the container and uses next centering.\n * Future will default to `md`\n * @since 10.19.0\n */\n width?: ModalWidth\n}\n\nexport interface ModalContainerProps extends Props {\n /**\n * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY\n * @defaultValue false\n * @since 12.8.0\n */\n compact?: boolean\n /**\n * @since 10.19.0\n */\n placement: ModalPlacement\n /**\n * @since 10.19.0\n */\n width?: ModalWidth\n}\n\nexport interface ConfirmModalProps extends Omit<ModalProps, 'onClose'> {\n /**\n * Headline message\n * @since 10.19.0\n */\n headline?: string\n\n /**\n * The dismiss onClick callback\n * @since 10.19.0\n */\n onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void\n}\n\n/**\n * NOTE: Using howToClose 'x' requires the `Modal.Header` component.\n * @a11y This component is a not semantic heading! For that, see `Modal.Heading`.\n */\nexport interface ModalCloseableHeaderProps extends Props {\n /**\n * @since 10.19.0\n */\n onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void\n /**\n * @since 10.19.0\n */\n qa?: { closeButton?: string }\n}\n\nexport interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY\n * @defaultValue false\n * @since 12.8.0\n */\n compact?: boolean\n /**\n * Removes left, right paddings from the modal body when true\n * @defaultValue false\n * @since 10.19.0\n */\n noSideSpacing?: boolean\n}\n"],"mappings":""}
1
+ {"version":3,"file":"Modal.types.js","names":[],"sources":["../../src/Modal/Modal.types.ts"],"sourcesContent":["import type React from 'react'\nimport type { Props } from '../_utils/types'\n\nexport type ModalPlacement = 'top' | 'center'\nexport type ModalWidth = 'sm' | 'md' | 'lg' | 'xl'\n\n/**\n * Additional UI/UX to dismiss. (In addition to the Esc key)\n * - `x` Close Button in the Modal Header\n * - `scrim` Overlay dimmed scrim\n * - `footer-button` Cancel Button in the Modal Footer Actions\n */\nexport type ModalOptionalCloseStartegy = 'x' | 'footer-button' | 'scrim'\ntype ModalCloseStragety = 'esc' | ModalOptionalCloseStartegy\n\nexport type ModalOnClose = (\n event: // clicked scrim\n | React.MouseEvent<HTMLDivElement>\n // clicked x button\n | React.MouseEvent<HTMLButtonElement>\n // pressed escape key\n | React.KeyboardEvent<HTMLElement>,\n how: ModalCloseStragety\n) => void\n\nexport interface ModalCloseContextApi {\n /**\n * Escape key will always close a dialog. This adds additional UI or UX to close.\n */\n howToClose: ModalOptionalCloseStartegy[] | undefined\n onClose: ModalOnClose | undefined\n}\n\nexport interface ModalCloseableHeaderProps\n extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY\n * @defaultValue false\n * @since 12.8.0\n */\n compact?: boolean\n qa?: { closeButton?: string }\n}\n\nexport interface ModalProps extends Props {\n 'aria-describedby'?: string\n 'aria-details'?: string\n /**\n * @a11y Automatially created when using `Modal.Heading`. The `role='dialog'` MUST be labelled. Prefer `aria-labelledby` over `aria-label`.\n * @since 11.12.0\n */\n 'aria-labelledby'?: string\n /**\n * @a11y `role='dialog'` MUST be labelled. Prefer `aria-labelledby` over `aria-label`.\n * If using an `aria-label` instead of a node, be sure give the modal an `id` so\n * other regions can reference it.\n * @since 11.12.0\n */\n 'aria-label'?: string\n /**\n * @a11y Should be used for a single true modal. Cannot open nested modals.\n * @experimental Core-React does not support multiple or nested `aria-modal`s for Tearsheets, Modals, or ConfirmModals.\n * @since 12.42.0\n */\n 'aria-modal'?: boolean\n /**\n * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY\n * @defaultValue false\n * @since 12.8.0\n */\n compact?: boolean\n /**\n * This adds additional UI or UX to close. Escape key will always close a dialog, see `onClose`.\n *\n * NOTE 'footer-button': Footer Cancel button still requires at least a rendered self closing `Modal.FooterButtons`.\n *\n * NOTE 'x': The X button still requires a rendered `Modal.Header` component.\n * @defaultValue []\n * @since 11.12.0\n */\n howToClose?: ModalOptionalCloseStartegy[]\n /**\n * Aligns with `role` and `ref` location.\n */\n id?: string\n /**\n * @deprecated Use `howToClose={['scrim']}` with `onClose` instead.\n * @deprecatedSince 12.41.0\n * @since 10.19.0\n */\n onClickOverlay?: (event: React.MouseEvent<HTMLDivElement>) => void\n /**\n * When a user closes the Modal by some approved `howToClose` method or the Escape key. This also opts-in to dialog focus management.\n * @a11y Future default! Moves focus into and cycles focus in the Modal, and returning focus\n * to the trigger when closed. Also enables the Escape key to close the Modal.\n * @since 11.6.0\n */\n onClose?: ModalOnClose\n /**\n * Modal open state\n * @defaultValue false\n * @since 10.19.0\n */\n open?: boolean\n /**\n * Enable dialog props. REQUIRES `onClose` to enable Escape key and focus management. MUST be labelled, prefer `aria-labelledby` over `aria-label`.\n */\n role?: 'dialog' | 'alertdialog'\n /**\n * Vertical placement of the modal.\n * Positioning modal at the top ensures that variable height modal won't shift position during content loading,\n * providing a more stable user experience.\n * @defaultValue center\n * @since 10.19.0\n */\n placement?: ModalPlacement\n /**\n * Sets a width on the container and uses next centering.\n * Future will default to `md`\n * @since 10.19.0\n */\n width?: ModalWidth\n}\n\nexport interface ModalContainerProps extends Props {\n /**\n * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY\n * @defaultValue false\n * @since 12.8.0\n */\n compact?: boolean\n /**\n * @since 10.19.0\n */\n placement: ModalPlacement\n /**\n * @since 10.19.0\n */\n width?: ModalWidth\n}\n\nexport interface ConfirmModalProps extends Omit<ModalProps, 'onClose'> {\n /**\n * Headline message\n * @since 10.19.0\n */\n headline?: string\n\n /**\n * Callback when the ConfirmModal is dismissed.\n *\n * @a11y **Accessible pattern (recommended):** Use with `role=\"dialog\"` and `howToClose={['x']}`.\n * This enables focus management, Escape key support, and proper dialog semantics.\n * The callback signature is `(event, how) => void`.\n *\n * **Legacy pattern:** `(event: MouseEvent<HTMLButtonElement>) => void` — only handles X button click,\n * no focus management or Escape key support.\n *\n * @since 10.19.0\n */\n onClose?:\n | ModalOnClose\n | ((event: React.MouseEvent<HTMLButtonElement>) => void)\n /**\n *\n * @a11y Recommended to use. When using alertdialog should be a `aria-modal` because of their urgent nature. **Cannot open nested modals.**\n * @since 12.42.0\n */\n 'aria-modal'?: boolean\n}\n\n/**\n * NOTE: Using howToClose 'x' requires the `Modal.Header` component.\n * @a11y This component is a not semantic heading! For that, see `Modal.Heading`.\n */\nexport interface ModalCloseableHeaderProps extends Props {\n /**\n * @deprecated Use `Modal onClose` with `howToClose={['x']}` instead.\n * @deprecatedSince 12.41.0\n * @since 10.19.0\n */\n onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void\n /**\n * @since 10.19.0\n */\n qa?: { closeButton?: string }\n}\n\nexport interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * @deprecated @experimental Changes the UI of modal to work on mobile breakpoints, to be used on Helix Header ONLY\n * @defaultValue false\n * @since 12.8.0\n */\n compact?: boolean\n /**\n * Removes left, right paddings from the modal body when true\n * @defaultValue false\n * @since 10.19.0\n */\n noSideSpacing?: boolean\n}\n"],"mappings":""}
@@ -1,2 +1,2 @@
1
1
  export { ConfirmModal, Modal } from './Modal';
2
- export type { ConfirmModalProps, ModalProps } from './Modal.types';
2
+ export type { ConfirmModalProps, ModalOnClose, ModalProps } from './Modal.types';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["ConfirmModal","Modal"],"sources":["../../src/Modal/index.ts"],"sourcesContent":["export { ConfirmModal, Modal } from './Modal'\nexport type { ConfirmModalProps, ModalProps } from './Modal.types'\n"],"mappings":"AAAA,SAASA,YAAY,EAAEC,KAAK,QAAQ,SAAS"}
1
+ {"version":3,"file":"index.js","names":["ConfirmModal","Modal"],"sources":["../../src/Modal/index.ts"],"sourcesContent":["export { ConfirmModal, Modal } from './Modal'\nexport type { ConfirmModalProps, ModalOnClose, ModalProps } from './Modal.types'\n"],"mappings":"AAAA,SAASA,YAAY,EAAEC,KAAK,QAAQ,SAAS"}
@@ -8,34 +8,34 @@ import { getFocus } from '../_styles/mixins';
8
8
  import { spacing } from '../_styles/spacing';
9
9
  export var StyledMultiSelectInner = /*#__PURE__*/styled.div.withConfig({
10
10
  displayName: "StyledMultiSelectInner",
11
- componentId: "core-12_41_0__sc-s9ym9q-0"
11
+ componentId: "core-12_42_0__sc-s9ym9q-0"
12
12
  })(["display:flex;flex-wrap:wrap;margin-bottom:2px;margin-left:", "px;margin-right:", "px;margin-top:2px;min-width:0;width:100%;"], spacing.md, spacing.xs);
13
13
  export var StyledMultiSelectValues = /*#__PURE__*/styled.div.withConfig({
14
14
  displayName: "StyledMultiSelectValues",
15
- componentId: "core-12_41_0__sc-s9ym9q-1"
15
+ componentId: "core-12_42_0__sc-s9ym9q-1"
16
16
  })(["display:contents;"]);
17
17
  export var StyledMultiSelectToken = /*#__PURE__*/styled.div.withConfig({
18
18
  displayName: "StyledMultiSelectToken",
19
- componentId: "core-12_41_0__sc-s9ym9q-2"
19
+ componentId: "core-12_42_0__sc-s9ym9q-2"
20
20
  })(["margin-bottom:2px;margin-right:", "px;margin-top:2px;flex:0 1 auto;> div{max-width:178px;width:100%;}"], spacing.xs);
21
21
  export var StyledMultiSelectSearchInput = /*#__PURE__*/styled.input.withConfig({
22
22
  displayName: "StyledMultiSelectSearchInput",
23
- componentId: "core-12_41_0__sc-s9ym9q-3"
23
+ componentId: "core-12_42_0__sc-s9ym9q-3"
24
24
  })(["background-color:transparent;border-width:0;font-family:inherit;padding:0;height:24px;width:100%;", " ", " &::-ms-clear{display:none;}&:focus{box-shadow:none;outline:none;}&::placeholder{color:", ";}"], getTypographyIntent('body'), function (_ref) {
25
25
  var $isNavigatingTokens = _ref.$isNavigatingTokens;
26
26
  return $isNavigatingTokens && css(["color:transparent;"]);
27
27
  }, colors.gray45);
28
28
  export var StyledMultiSelectSearch = /*#__PURE__*/styled.div.withConfig({
29
29
  displayName: "StyledMultiSelectSearch",
30
- componentId: "core-12_41_0__sc-s9ym9q-4"
30
+ componentId: "core-12_42_0__sc-s9ym9q-4"
31
31
  })(["margin-bottom:2px;margin-right:", "px;margin-top:2px;flex:1;max-width:100%;min-width:24px;"], spacing.xs);
32
32
  export var StyledMultiSelectSearchIcon = /*#__PURE__*/styled.div.withConfig({
33
33
  displayName: "StyledMultiSelectSearchIcon",
34
- componentId: "core-12_41_0__sc-s9ym9q-5"
34
+ componentId: "core-12_42_0__sc-s9ym9q-5"
35
35
  })(["align-items:center;align-self:flex-start;display:flex;height:34px;justify-content:flex-end;margin-left:", "px;margin-right:", "px;min-width:40px;width:40px;"], spacing.xs, spacing.md);
36
36
  export var StyledMultiSelectClearIcon = /*#__PURE__*/styled(Button).withConfig({
37
37
  displayName: "StyledMultiSelectClearIcon",
38
- componentId: "core-12_41_0__sc-s9ym9q-6"
38
+ componentId: "core-12_42_0__sc-s9ym9q-6"
39
39
  })(["", " ", "{pointer-events:none;}"], function (_ref2) {
40
40
  var $show = _ref2.$show;
41
41
  return css(["opacity:", ";"], $show ? 1 : 0);
@@ -45,7 +45,7 @@ export var StyledMultiSelectArrow = StyledSelectArrow;
45
45
  export var StyledMultiSelectMenu = StyledSelectMenu;
46
46
  export var StyledMultiSelectButton = /*#__PURE__*/styled(StyledSelectButton).withConfig({
47
47
  displayName: "StyledMultiSelectButton",
48
- componentId: "core-12_41_0__sc-s9ym9q-7"
48
+ componentId: "core-12_42_0__sc-s9ym9q-7"
49
49
  })(["height:auto;padding:0;white-space:normal;&:focus-within{", "}", ""], getFocus(), function (_ref3) {
50
50
  var $emptyValue = _ref3.$emptyValue;
51
51
  return $emptyValue && css(["", "{cursor:pointer;}"], StyledMultiSelectSearchInput);
@@ -6,14 +6,14 @@ export var optionMinHeight = 32;
6
6
  export var defaultMenuHeight = 64;
7
7
  export var StyledOptions = /*#__PURE__*/styled.div.withConfig({
8
8
  displayName: "StyledOptions",
9
- componentId: "core-12_41_0__sc-3o6zya-0"
9
+ componentId: "core-12_42_0__sc-3o6zya-0"
10
10
  })([""]);
11
11
  export var StyledItem = /*#__PURE__*/styled.div.withConfig({
12
12
  displayName: "StyledItem",
13
- componentId: "core-12_41_0__sc-3o6zya-1"
13
+ componentId: "core-12_42_0__sc-3o6zya-1"
14
14
  })(["", ";padding:", "px ", "px;cursor:pointer;list-style-type:none;"], getTypographyIntent('body'), spacing.xs, spacing.md);
15
15
  export var StyledGroup = /*#__PURE__*/styled.div.withConfig({
16
16
  displayName: "StyledGroup",
17
- componentId: "core-12_41_0__sc-3o6zya-2"
17
+ componentId: "core-12_42_0__sc-3o6zya-2"
18
18
  })(["", ";padding:", "px ", "px ", "px;font-weight:", ";background:white;list-style-type:none;"], getTypographyIntent('body'), spacing.md, spacing.md, spacing.xs, typographyWeights.semibold);
19
19
  //# sourceMappingURL=NextMenu.styles.js.map
@@ -14,7 +14,7 @@ var variantColorMap = {
14
14
  };
15
15
  var StyledNotation = /*#__PURE__*/styled.i.withConfig({
16
16
  displayName: "StyledNotation",
17
- componentId: "core-12_41_0__sc-160q1m6-0"
17
+ componentId: "core-12_42_0__sc-160q1m6-0"
18
18
  })(["", " color:", ";font-style:italic;"], getTypographyIntent('small'), function (_ref) {
19
19
  var $variant = _ref.$variant;
20
20
  return $variant ? colors[variantColorMap[$variant]] : colors.gray15;
@@ -12,37 +12,37 @@ var inputBgColor = colors.white;
12
12
  var inputBorder = "".concat(colors.gray50, " solid 1px");
13
13
  var StyledRootAddon = /*#__PURE__*/styled.span.withConfig({
14
14
  displayName: "StyledRootAddon",
15
- componentId: "core-12_41_0__sc-1782nvg-0"
15
+ componentId: "core-12_42_0__sc-1782nvg-0"
16
16
  })(["display:inline-flex;align-items:center;height:100%;position:absolute;top:0;color:", ";", ";"], function (_ref) {
17
17
  var disabled = _ref.disabled;
18
18
  return disabled ? colors.gray70 : colors.gray45;
19
19
  }, getTypographyIntent('body'));
20
20
  export var StyledPrefix = /*#__PURE__*/styled(StyledRootAddon).withConfig({
21
21
  displayName: "StyledPrefix",
22
- componentId: "core-12_41_0__sc-1782nvg-1"
22
+ componentId: "core-12_42_0__sc-1782nvg-1"
23
23
  })(["left:", "px;"], spacing.md);
24
24
  export var StyledSuffix = /*#__PURE__*/styled(StyledRootAddon).withConfig({
25
25
  displayName: "StyledSuffix",
26
- componentId: "core-12_41_0__sc-1782nvg-2"
26
+ componentId: "core-12_42_0__sc-1782nvg-2"
27
27
  })(["right:", "px;"], function (_ref2) {
28
28
  var $withIncrementer = _ref2.$withIncrementer;
29
29
  return $withIncrementer ? spacing.md + incrementerWidth : spacing.md;
30
30
  });
31
31
  export var StyledIncrementerWrapper = /*#__PURE__*/styled.div.withConfig({
32
32
  displayName: "StyledIncrementerWrapper",
33
- componentId: "core-12_41_0__sc-1782nvg-3"
33
+ componentId: "core-12_42_0__sc-1782nvg-3"
34
34
  })(["display:flex;flex-direction:column;position:absolute;top:1px;right:1px;height:100%;"]);
35
35
  export var StyledIncrementerButton = /*#__PURE__*/styled.button.withConfig({
36
36
  displayName: "StyledIncrementerButton",
37
- componentId: "core-12_41_0__sc-1782nvg-4"
37
+ componentId: "core-12_42_0__sc-1782nvg-4"
38
38
  })(["display:inline-flex;justify-content:center;align-items:center;width:", "px;height:calc(50% - 1px);border:none;border-radius:0px;outline:none;background-color:", ";padding:0;cursor:pointer;&:first-child,&:last-child{border-left:", ";&:disabled{border-color:", ";background-color:", ";}}&:first-child{border-top-right-radius:2px;}&:last-child{border-top:", ";border-bottom-right-radius:2px;}svg{fill:", ";}&:hover{svg{fill:", ";}}&:disabled{cursor:default;svg{fill:", ";}}"], incrementerWidth, inputBgColor, inputBorder, colors.gray50, colors.gray94, inputBorder, colors.gray45, colors.gray10, colors.gray70);
39
39
  export var StyledInput = /*#__PURE__*/styled(Input).withConfig({
40
40
  displayName: "StyledInput",
41
- componentId: "core-12_41_0__sc-1782nvg-5"
41
+ componentId: "core-12_42_0__sc-1782nvg-5"
42
42
  })([""]);
43
43
  export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
44
44
  displayName: "StyledWrapper",
45
- componentId: "core-12_41_0__sc-1782nvg-6"
45
+ componentId: "core-12_42_0__sc-1782nvg-6"
46
46
  })(["position:relative;", ""], function (_ref3) {
47
47
  var $hasIncrementer = _ref3.$hasIncrementer;
48
48
  return $hasIncrementer && css(["", "{padding-right:", "px;}"], StyledInput, spacing.md + incrementerWidth);
@@ -2,6 +2,6 @@ import styled from 'styled-components';
2
2
  export var arrowSize = 8;
3
3
  export var StyledArrow = /*#__PURE__*/styled.div.withConfig({
4
4
  displayName: "StyledArrow",
5
- componentId: "core-12_41_0__sc-1epxw7u-0"
5
+ componentId: "core-12_42_0__sc-1epxw7u-0"
6
6
  })(["position:absolute;background:inherit;width:", "px;height:", "px;transform:rotate(45deg);"], arrowSize, arrowSize);
7
7
  //# sourceMappingURL=OverlayArrow.styles.js.map
@@ -1,5 +1,4 @@
1
1
  import type { AriaAttributes } from 'react';
2
- import React from 'react';
3
2
  import type { OverlayTriggerRole } from './OverlayTrigger.types';
4
3
  declare type GetA11yProps = (props: {
5
4
  role: OverlayTriggerRole;
@@ -8,7 +7,7 @@ declare type GetA11yProps = (props: {
8
7
  }) => AriaAttributes & {
9
8
  id?: string;
10
9
  };
11
- export declare function getA11yPreset(role?: OverlayTriggerRole): {
10
+ export declare function getA11yPreset(role?: OverlayTriggerRole | 'alertdialog'): {
12
11
  getOverlayProps: GetA11yProps;
13
12
  getTriggerProps: GetA11yProps;
14
13
  };
@@ -24,20 +23,18 @@ declare type LabelConfig = {
24
23
  };
25
24
  declare type DialogBase = LabelConfig & {
26
25
  isOpen: boolean;
27
- role?: 'dialog';
26
+ role?: 'dialog' | 'alertdialog';
28
27
  };
29
28
  declare type NonModalDialogConfig = DialogBase & {
30
- isModal?: never | false;
29
+ 'aria-modal'?: never | false;
31
30
  };
32
31
  declare type ModalDialogConfig = DialogBase & {
33
32
  /**
34
- *
35
- * To enable `ariaHideOutside`. Set `isModal` to false to disable.
36
- * @a11y Replicates `aria-modal` inert outside content
33
+ * @a11y This will add `aria-modal={true}` and rely on browsers to
34
+ * handle making outside content inert.
37
35
  * @default false
38
36
  */
39
- isModal: true;
40
- ref: React.RefObject<HTMLElement>;
37
+ 'aria-modal': true;
41
38
  };
42
39
  declare type ModalDialogLikeConfig = NonModalDialogConfig | ModalDialogConfig;
43
40
  declare type OverlayTriggerA11yConfig = LabelConfig & {
@@ -157,35 +154,31 @@ export declare function useLabelledPopup({ 'aria-describedby': ariaDescribedby,
157
154
  * - Focus management props to work with FocusScope
158
155
  *
159
156
  * For modal dialog experiences (full screen locked experiences):
160
- * - Hides old and new content outside with aria-hidden with ariaHideOutside (like aria-modal)
161
- * - (it will in breaking) Prevent scroll
157
+ * - what dialog above does
158
+ * - adds aria-modal="true"
159
+ * - this hook does not determine where to mount or how many modals are open
162
160
  *
163
- * For either experiences, you still MUST support:
164
- * - have Escape key to close (It should!)
165
- * - have click outside, like scrim click
161
+ * For either experiences, you still MUST support a way to close by mouse and keyboard.
162
+ *
163
+ * Using `aria-modal`, you need to keep additional overlay content inside, so
164
+ * portals must be smart enough to know where other overlays
165
+ * like tooltips or toasts should go to remain visible to screen readers (inside the aria-modal).
166
166
  *
167
- * _More about 'modal dialog' and `isModal` not using `aria-modal`:_
168
167
  * Setting aria-modal="true" tells assistive technologies to let the user know the ability to interact with,
169
168
  * or access other content on the page requires the modal dialog to be closed or otherwise lose focus.
170
169
  * Modal dialogs are when content is displayed and the user's interaction is limited to only that section until it is dismissed.
171
170
  * [MDN aria modal](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal).
172
- * To support the most, like Narrator in Edge, Core React uses `ariaHideOutside` to set `aria-hidden` on
173
- * all elements outside the dialog, and **all elements outside added while opened**, so the dialog will act as a
174
- * _modal_ even without `aria-modal` on the dialog itself. See Future Considerations below.
175
- * [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)
176
- * _Future Considerations:_ Replace ariaHideOutside with aria-modal="true".
177
- * Using aria-modal, then we would need to involve Portal and so tooltips
178
- * or Toasts could mount within the visible aria-modal container.
179
171
  */
180
- export declare function useModalDialogLike({ 'aria-describedby': ariaDescribedby, 'aria-details': ariaDetails, 'aria-labelledby': ariaLabelledby, 'aria-label': ariaLabel, id, isModal, isOpen, ref, role, }: ModalDialogLikeConfig): {
172
+ export declare function useModalDialogLike({ 'aria-describedby': ariaDescribedby, 'aria-details': ariaDetails, 'aria-labelledby': ariaLabelledby, 'aria-label': ariaLabel, 'aria-modal': ariaModal, id, isOpen, role, }: ModalDialogLikeConfig): {
181
173
  dialogProps: {
182
174
  id: string | undefined;
183
- role: "dialog";
175
+ role: "dialog" | "alertdialog";
184
176
  tabIndex: number;
185
177
  'aria-describedby': string | undefined;
186
178
  'aria-details': string | undefined;
187
179
  'aria-label'?: string | undefined;
188
180
  'aria-labelledby'?: string | undefined;
181
+ 'aria-modal': boolean | undefined;
189
182
  };
190
183
  labelProps: {
191
184
  id: string | undefined;
@@ -4,9 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
4
4
  function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
5
5
  function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
6
6
  function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
7
- import { ariaHideOutside } from '@react-aria/overlays';
8
7
  import { useId, useLabels } from '@react-aria/utils';
9
- import React from 'react';
10
8
  var emptyObj = {};
11
9
  var returnEmpty = function returnEmpty() {
12
10
  return {};
@@ -53,6 +51,7 @@ var a11yPresets = {
53
51
 
54
52
  export function getA11yPreset(role) {
55
53
  switch (role) {
54
+ case 'alertdialog':
56
55
  case 'dialog':
57
56
  case 'listbox':
58
57
  case 'menu':
@@ -167,36 +166,29 @@ export function useLabelledPopup(_ref6) {
167
166
  * - Focus management props to work with FocusScope
168
167
  *
169
168
  * For modal dialog experiences (full screen locked experiences):
170
- * - Hides old and new content outside with aria-hidden with ariaHideOutside (like aria-modal)
171
- * - (it will in breaking) Prevent scroll
169
+ * - what dialog above does
170
+ * - adds aria-modal="true"
171
+ * - this hook does not determine where to mount or how many modals are open
172
172
  *
173
- * For either experiences, you still MUST support:
174
- * - have Escape key to close (It should!)
175
- * - have click outside, like scrim click
173
+ * For either experiences, you still MUST support a way to close by mouse and keyboard.
174
+ *
175
+ * Using `aria-modal`, you need to keep additional overlay content inside, so
176
+ * portals must be smart enough to know where other overlays
177
+ * like tooltips or toasts should go to remain visible to screen readers (inside the aria-modal).
176
178
  *
177
- * _More about 'modal dialog' and `isModal` not using `aria-modal`:_
178
179
  * Setting aria-modal="true" tells assistive technologies to let the user know the ability to interact with,
179
180
  * or access other content on the page requires the modal dialog to be closed or otherwise lose focus.
180
181
  * Modal dialogs are when content is displayed and the user's interaction is limited to only that section until it is dismissed.
181
182
  * [MDN aria modal](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal).
182
- * To support the most, like Narrator in Edge, Core React uses `ariaHideOutside` to set `aria-hidden` on
183
- * all elements outside the dialog, and **all elements outside added while opened**, so the dialog will act as a
184
- * _modal_ even without `aria-modal` on the dialog itself. See Future Considerations below.
185
- * [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)
186
- * _Future Considerations:_ Replace ariaHideOutside with aria-modal="true".
187
- * Using aria-modal, then we would need to involve Portal and so tooltips
188
- * or Toasts could mount within the visible aria-modal container.
189
183
  */
190
-
191
184
  export function useModalDialogLike(_ref7) {
192
185
  var ariaDescribedby = _ref7['aria-describedby'],
193
186
  ariaDetails = _ref7['aria-details'],
194
187
  ariaLabelledby = _ref7['aria-labelledby'],
195
188
  ariaLabel = _ref7['aria-label'],
189
+ ariaModal = _ref7['aria-modal'],
196
190
  id = _ref7.id,
197
- isModal = _ref7.isModal,
198
191
  isOpen = _ref7.isOpen,
199
- ref = _ref7.ref,
200
192
  _ref7$role = _ref7.role,
201
193
  role = _ref7$role === void 0 ? 'dialog' : _ref7$role;
202
194
  var _useLabelled2 = useLabelled({
@@ -207,23 +199,27 @@ export function useModalDialogLike(_ref7) {
207
199
  }),
208
200
  labelProps = _useLabelled2.labelProps,
209
201
  widgetProps = _useLabelled2.widgetProps;
210
- var dialogProps = _objectSpread(_objectSpread({}, widgetProps), {}, {
202
+ var dialogProps = _objectSpread(_objectSpread({
203
+ 'aria-modal': ariaModal
204
+ }, widgetProps), {}, {
211
205
  id: id,
212
206
  role: role,
213
207
  tabIndex: -1
214
208
  });
215
209
 
216
210
  // usePreventScroll({
217
- // isDisabled: isModal ? !isOpen : true,
211
+ // isDisabled: ariaModal ? !isOpen : true,
218
212
  // })
219
213
 
220
214
  // Fills aria-modal=true
221
- React.useLayoutEffect(function () {
222
- if (isModal && isOpen && ref.current) {
223
- // Could add additional visible element refs here
224
- return ariaHideOutside([ref.current]);
225
- }
226
- }, [isModal, isOpen, ref]);
215
+ // import { ariaHideOutside } from '@react-aria/overlays'
216
+ // React.useLayoutEffect(() => {
217
+ // if (isModal && isOpen && ref.current) {
218
+ // // Could add additional visible element refs here
219
+ // return ariaHideOutside([ref.current])
220
+ // }
221
+ // }, [isModal, isOpen, ref])
222
+
227
223
  return {
228
224
  dialogProps: dialogProps,
229
225
  labelProps: labelProps,
@@ -251,6 +247,11 @@ export function useOverlayTriggerA11y(_ref8) {
251
247
  id_ = _ref8.id,
252
248
  isOpen = _ref8.isOpen,
253
249
  role = _ref8.role;
250
+ if (
251
+ // @ts-expect-error Checking for invalid usage
252
+ role === 'alertdialog') {
253
+ console.error('@procore/core-react: useOverlayTriggerA11y role alertdialog is not supported because it requires aria-modal to be true. This is intended for non-modal dialogs.');
254
+ }
254
255
  var isDialog = role === 'dialog';
255
256
  var id = useId(id_);
256
257
  var _getA11yPreset3 = getA11yPreset(role),
@@ -273,8 +274,9 @@ export function useOverlayTriggerA11y(_ref8) {
273
274
  'aria-details': ariaDetails,
274
275
  'aria-labelledby': ariaLabelledby,
275
276
  'aria-label': ariaLabel,
277
+ 'aria-modal': undefined,
278
+ // OverlayTrigger only supports non-modal dialogs
276
279
  id: id,
277
- isModal: false,
278
280
  isOpen: isOpen
279
281
  }),
280
282
  dialogProps = _useModalDialogLike.dialogProps,
@@ -1 +1 @@
1
- {"version":3,"file":"a11yPresets.js","names":["ariaHideOutside","useId","useLabels","React","emptyObj","returnEmpty","a11yPresets","haspopup","getOverlayProps","_ref","role","overlayId","id","getTriggerProps","_ref2","isVisible","undefined","tooltip","_ref3","_ref4","getA11yPreset","useLabelled","props","_ref5","ariaDescribedby","ariaDetails","ariaLabelledby","ariaLabel","ariaLabelOnly","labelledId","widgetId","fieldProps","descriptionProps","labelProps","widgetProps","_objectSpread","useLabelledPopup","_ref6","_getA11yPreset$getTri","_getA11yPreset","_getA11yPreset$getOve","_getA11yPreset2","id_","isOpen","_ref6$type","type","popupRole","popupId_","popupId","presetArgs","triggerProps","call","overlayProps","_useLabelled","popupProps","useModalDialogLike","_ref7","isModal","ref","_ref7$role","_useLabelled2","dialogProps","tabIndex","useLayoutEffect","current","focusScopeProps","autoFocus","contain","restoreFocus","useOverlayTriggerA11y","_ref8","alwaysAriaVisible","canPropOverlayUp","isDialog","_getA11yPreset3","overlayA11yProps","wrapperA11yProps","_useModalDialogLike","portalProps","wrapperFinalProps","focusScopeFinalProps","wrapperProps"],"sources":["../../src/OverlayTrigger/a11yPresets.ts"],"sourcesContent":["import { ariaHideOutside } from '@react-aria/overlays'\nimport { useId, useLabels } from '@react-aria/utils'\nimport type { AriaAttributes } from 'react'\nimport React from 'react'\nimport type { OverlayTriggerRole } from './OverlayTrigger.types'\n\nconst emptyObj = {}\nconst returnEmpty: GetA11yProps = () => ({})\n\ntype GetA11yProps = (props: {\n role: OverlayTriggerRole\n isVisible: boolean\n overlayId: string\n}) => AriaAttributes & { id?: string }\n\nconst a11yPresets: Record<\n 'tooltip' | 'haspopup',\n {\n getOverlayProps: GetA11yProps\n getTriggerProps: GetA11yProps\n }\n> = {\n haspopup: {\n getOverlayProps: ({ role, overlayId }) => ({\n id: overlayId,\n role,\n }),\n getTriggerProps: ({ role, isVisible, overlayId }) => ({\n 'aria-expanded': isVisible,\n 'aria-controls': isVisible ? overlayId : undefined,\n 'aria-haspopup': role as 'dialog' | 'listbox' | 'menu',\n }),\n },\n tooltip: {\n getOverlayProps: ({ overlayId }) => ({\n role: 'tooltip',\n id: overlayId,\n }),\n getTriggerProps: ({ isVisible, overlayId }) => ({\n 'aria-describedby': isVisible ? overlayId : undefined,\n // 'aria-expanded': isVisible,\n }),\n },\n}\n\nexport function getA11yPreset(role?: OverlayTriggerRole) {\n switch (role) {\n case 'dialog':\n case 'listbox':\n case 'menu':\n return a11yPresets.haspopup\n case 'tooltip':\n return a11yPresets.tooltip\n case 'none':\n return {\n getOverlayProps: (() => ({ role: 'none' })) as GetA11yProps,\n getTriggerProps: returnEmpty,\n }\n default:\n return {\n getOverlayProps: returnEmpty,\n getTriggerProps: returnEmpty,\n }\n }\n}\n\ntype LabelConfig = {\n 'aria-describedby'?: string\n 'aria-details'?: string\n 'aria-labelledby'?: string\n 'aria-label'?: string\n /**\n * ID for the widget itself\n */\n id?: string\n}\n\ntype DialogBase = LabelConfig & {\n isOpen: boolean\n role?: 'dialog'\n}\n\ntype NonModalDialogConfig = DialogBase & {\n isModal?: never | false\n}\n\ntype ModalDialogConfig = DialogBase & {\n /**\n *\n * To enable `ariaHideOutside`. Set `isModal` to false to disable.\n * @a11y Replicates `aria-modal` inert outside content\n * @default false\n */\n isModal: true\n ref: React.RefObject<HTMLElement>\n}\n\ntype ModalDialogLikeConfig = NonModalDialogConfig | ModalDialogConfig\n\ntype OverlayTriggerA11yConfig = LabelConfig & {\n /**\n * Assure `aria-hidden` is not applied. A code side-effect\n * from `ariaHideOutside` hiding everthing outside the scope.\n */\n alwaysAriaVisible?: boolean\n /**\n * When properties should be passed to the overlay UI itself,\n * and not the wrapper element.\n */\n canPropOverlayUp: boolean\n isOpen: boolean\n role?: OverlayTriggerRole\n // ref: React.RefObject<HTMLElement> // Only necessary for modal\n}\n\n/**\n * Manages labelling for an element and the other DOM. Defaults an ID for `aria-labelledby` usage.\n *\n * When `aria-label` and `aria-labelledby` both exist, it combines them into `aria-labelledby` for a screen reader chain.\n * @link [W3 naming with aria-labelledby](https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/#naming_with_aria-labelledby)\n */\nexport function useLabelled(props?: LabelConfig) {\n const {\n 'aria-describedby': ariaDescribedby,\n 'aria-details': ariaDetails,\n 'aria-labelledby': ariaLabelledby,\n 'aria-label': ariaLabel,\n id,\n } = props || (emptyObj as LabelConfig)\n const ariaLabelOnly = ariaLabel && !ariaLabelledby\n\n // Generate an ID. We want to use this unless they are using only aria-label\n const labelledId = useId(ariaLabelledby)\n\n // Merges aria-label and aria-labelledby into aria-labelledby when both exist\n const widgetId = useId(id)\n let fieldProps = useLabels({\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelOnly ? undefined : labelledId,\n id: widgetId,\n })\n\n return {\n descriptionProps: { id: ariaDescribedby },\n labelProps: { id: ariaLabelOnly ? undefined : labelledId },\n widgetProps: {\n ...fieldProps,\n 'aria-describedby': ariaDescribedby,\n 'aria-details': ariaDetails,\n },\n }\n}\n\n/**\n * Cover the label links for the trigger (button), the popup element (dialog), and the popup element title (heading).\n * Similar to [React Aria useOverlayTrigger](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/useOverlayTrigger.ts)\n * but with element title support.\n * @link [MDN aria-haspopup](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup)\n */\nexport function useLabelledPopup({\n 'aria-describedby': ariaDescribedby,\n 'aria-details': ariaDetails,\n 'aria-labelledby': ariaLabelledby,\n 'aria-label': ariaLabel,\n id: id_,\n isOpen,\n type = 'button',\n popupRole,\n popupId: popupId_,\n}: LabelConfig & {\n isOpen: boolean\n popupId?: string\n type?: 'button' | 'combobox' // Role? Not used. Show concept that popups manage 2 roles\n popupRole: 'dialog' | 'menu' | 'listbox'\n}) {\n /** Web spec default for aria-haspopup=true is menu, unless element has role combobox, which have an implicit aria-haspopup value of listbox. */\n // const popupRole = popupRole_ || type === 'combobox' ? 'listbox' : 'menu'\n const id = useId(id_)\n const popupId = useId(popupId_)\n\n const presetArgs = {\n isVisible: isOpen,\n role: popupRole,\n overlayId: popupId,\n }\n\n const triggerProps = getA11yPreset(popupRole).getTriggerProps?.(presetArgs)\n const overlayProps = getA11yPreset(popupRole).getOverlayProps?.(presetArgs)\n\n const { labelProps, widgetProps } = useLabelled({\n 'aria-describedby': ariaDescribedby,\n 'aria-details': ariaDetails,\n 'aria-labelledby': ariaLabelledby,\n 'aria-label': ariaLabel,\n id,\n })\n\n return {\n labelProps,\n popupProps: { role: popupRole, ...widgetProps, ...overlayProps },\n triggerProps,\n }\n}\n\n/**\n * For dialog experiences:\n * - Has role dialog and aria linked title props\n * - Focus management props to work with FocusScope\n *\n * For modal dialog experiences (full screen locked experiences):\n * - Hides old and new content outside with aria-hidden with ariaHideOutside (like aria-modal)\n * - (it will in breaking) Prevent scroll\n *\n * For either experiences, you still MUST support:\n * - have Escape key to close (It should!)\n * - have click outside, like scrim click\n *\n * _More about 'modal dialog' and `isModal` not using `aria-modal`:_\n * Setting aria-modal=\"true\" tells assistive technologies to let the user know the ability to interact with,\n * or access other content on the page requires the modal dialog to be closed or otherwise lose focus.\n * Modal dialogs are when content is displayed and the user's interaction is limited to only that section until it is dismissed.\n * [MDN aria modal](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal).\n * To support the most, like Narrator in Edge, Core React uses `ariaHideOutside` to set `aria-hidden` on\n * all elements outside the dialog, and **all elements outside added while opened**, so the dialog will act as a\n * _modal_ even without `aria-modal` on the dialog itself. See Future Considerations below.\n * [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)\n * _Future Considerations:_ Replace ariaHideOutside with aria-modal=\"true\".\n * Using aria-modal, then we would need to involve Portal and so tooltips\n * or Toasts could mount within the visible aria-modal container.\n */\n\nexport function useModalDialogLike({\n 'aria-describedby': ariaDescribedby,\n 'aria-details': ariaDetails,\n 'aria-labelledby': ariaLabelledby,\n 'aria-label': ariaLabel,\n id,\n isModal,\n isOpen,\n // @ts-expect-error\n ref,\n role = 'dialog',\n}: ModalDialogLikeConfig) {\n const { labelProps, widgetProps } = useLabelled({\n 'aria-describedby': ariaDescribedby,\n 'aria-details': ariaDetails,\n 'aria-labelledby': ariaLabelledby,\n 'aria-label': ariaLabel,\n })\n\n const dialogProps = {\n // 'aria-modal': true,\n ...widgetProps,\n id,\n role,\n tabIndex: -1,\n }\n\n // usePreventScroll({\n // isDisabled: isModal ? !isOpen : true,\n // })\n\n // Fills aria-modal=true\n React.useLayoutEffect(() => {\n if (isModal && isOpen && ref.current) {\n // Could add additional visible element refs here\n return ariaHideOutside([ref.current])\n }\n }, [isModal, isOpen, ref])\n\n return {\n dialogProps,\n labelProps,\n focusScopeProps: {\n autoFocus: true,\n contain: true,\n restoreFocus: true,\n },\n }\n}\n\n/**\n * Takes many roles and determines props necessary for DOM/components.\n * **Side effect of role=\"dialog\"**, current and any content added later\n * outside of the element (like by portals) will get `aria-hidden=true`\n * to replace the `aria-modal=true` `inert` nature.\n * @see useModalDialogLike */\nexport function useOverlayTriggerA11y({\n alwaysAriaVisible,\n 'aria-describedby': ariaDescribedby,\n 'aria-details': ariaDetails,\n 'aria-labelledby': ariaLabelledby,\n 'aria-label': ariaLabel,\n // can we remove this? have it role based? be optional?\n canPropOverlayUp,\n id: id_,\n isOpen,\n role,\n}: OverlayTriggerA11yConfig) {\n const isDialog = role === 'dialog'\n\n const id = useId(id_)\n\n const { getTriggerProps, getOverlayProps } = getA11yPreset(role)\n\n const triggerProps = getTriggerProps?.({\n isVisible: isOpen,\n role: role!,\n overlayId: id,\n })\n\n const overlayA11yProps = getOverlayProps?.({\n isVisible: isOpen,\n role: role!,\n overlayId: id,\n })\n\n const wrapperA11yProps = !canPropOverlayUp ? overlayA11yProps : emptyObj\n const overlayProps = canPropOverlayUp ? overlayA11yProps : emptyObj\n\n const { dialogProps, labelProps, focusScopeProps } = useModalDialogLike({\n 'aria-describedby': ariaDescribedby,\n 'aria-details': ariaDetails,\n 'aria-labelledby': ariaLabelledby,\n 'aria-label': ariaLabel,\n id,\n isModal: false,\n isOpen,\n })\n\n /** This is a code side-effect from ariaHideOutside hiding everthing */\n const portalProps =\n role === 'tooltip' || alwaysAriaVisible // || !role\n ? { 'data-react-aria-top-layer': true, 'data-live-announcer': true }\n : emptyObj\n\n /**\n * If it is a dialog, we can merge the dialog props with any haspopup props\n */\n const wrapperFinalProps = isDialog\n ? {\n ...wrapperA11yProps,\n ...dialogProps,\n }\n : wrapperA11yProps\n\n /**\n * If it is a dialog, we have opinions on `FocusScope` props.\n */\n const focusScopeFinalProps = isDialog\n ? focusScopeProps\n : (emptyObj as {\n autoFocus?: boolean\n contain?: boolean\n restoreFocus?: boolean\n })\n\n return {\n focusScopeProps: focusScopeFinalProps,\n labelProps,\n overlayProps,\n portalProps,\n triggerProps,\n wrapperProps: wrapperFinalProps,\n }\n}\n\n// WIP Example combobox\n// function useCombox({\n// controls,\n// isOpen = false,\n// }: {\n// controls: 'dialog' | 'menu' | 'listbox'\n// isOpen: boolean\n// }) {\n// const { labelProps, popupProps, triggerProps } = useLabelledPopup({\n// role: controls,\n// type: 'combobox',\n// isOpen,\n// })\n// dispatch between elements.\n// NOTE combobox has two labels, that could be different\n// one for the trigger input (typically the form label)\n// second for the thing it controls (listbox, dialog)\n// - label id=1\n// - input role='combobox' aria-labelledby=1\n// - div role={controls} aria-label\n// Also, any icon only buttons like clear or open should have a\n// label and -1 tabindex. No nested interactive roles.\n// }\n"],"mappings":"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"}
1
+ {"version":3,"file":"a11yPresets.js","names":["useId","useLabels","emptyObj","returnEmpty","a11yPresets","haspopup","getOverlayProps","_ref","role","overlayId","id","getTriggerProps","_ref2","isVisible","undefined","tooltip","_ref3","_ref4","getA11yPreset","useLabelled","props","_ref5","ariaDescribedby","ariaDetails","ariaLabelledby","ariaLabel","ariaLabelOnly","labelledId","widgetId","fieldProps","descriptionProps","labelProps","widgetProps","_objectSpread","useLabelledPopup","_ref6","_getA11yPreset$getTri","_getA11yPreset","_getA11yPreset$getOve","_getA11yPreset2","id_","isOpen","_ref6$type","type","popupRole","popupId_","popupId","presetArgs","triggerProps","call","overlayProps","_useLabelled","popupProps","useModalDialogLike","_ref7","ariaModal","_ref7$role","_useLabelled2","dialogProps","tabIndex","focusScopeProps","autoFocus","contain","restoreFocus","useOverlayTriggerA11y","_ref8","alwaysAriaVisible","canPropOverlayUp","console","error","isDialog","_getA11yPreset3","overlayA11yProps","wrapperA11yProps","_useModalDialogLike","portalProps","wrapperFinalProps","focusScopeFinalProps","wrapperProps"],"sources":["../../src/OverlayTrigger/a11yPresets.ts"],"sourcesContent":["import { useId, useLabels } from '@react-aria/utils'\nimport type { AriaAttributes } from 'react'\nimport type { OverlayTriggerRole } from './OverlayTrigger.types'\n\nconst emptyObj = {}\nconst returnEmpty: GetA11yProps = () => ({})\n\ntype GetA11yProps = (props: {\n role: OverlayTriggerRole\n isVisible: boolean\n overlayId: string\n}) => AriaAttributes & { id?: string }\n\nconst a11yPresets: Record<\n 'tooltip' | 'haspopup',\n {\n getOverlayProps: GetA11yProps\n getTriggerProps: GetA11yProps\n }\n> = {\n haspopup: {\n getOverlayProps: ({ role, overlayId }) => ({\n id: overlayId,\n role,\n }),\n getTriggerProps: ({ role, isVisible, overlayId }) => ({\n 'aria-expanded': isVisible,\n 'aria-controls': isVisible ? overlayId : undefined,\n 'aria-haspopup': role as 'dialog' | 'listbox' | 'menu',\n }),\n },\n tooltip: {\n getOverlayProps: ({ overlayId }) => ({\n role: 'tooltip',\n id: overlayId,\n }),\n getTriggerProps: ({ isVisible, overlayId }) => ({\n 'aria-describedby': isVisible ? overlayId : undefined,\n // 'aria-expanded': isVisible,\n }),\n },\n}\n\nexport function getA11yPreset(role?: OverlayTriggerRole | 'alertdialog') {\n switch (role) {\n case 'alertdialog':\n case 'dialog':\n case 'listbox':\n case 'menu':\n return a11yPresets.haspopup\n case 'tooltip':\n return a11yPresets.tooltip\n case 'none':\n return {\n getOverlayProps: (() => ({ role: 'none' })) as GetA11yProps,\n getTriggerProps: returnEmpty,\n }\n default:\n return {\n getOverlayProps: returnEmpty,\n getTriggerProps: returnEmpty,\n }\n }\n}\n\ntype LabelConfig = {\n 'aria-describedby'?: string\n 'aria-details'?: string\n 'aria-labelledby'?: string\n 'aria-label'?: string\n /**\n * ID for the widget itself\n */\n id?: string\n}\n\ntype DialogBase = LabelConfig & {\n isOpen: boolean\n role?: 'dialog' | 'alertdialog'\n}\n\ntype NonModalDialogConfig = DialogBase & {\n 'aria-modal'?: never | false\n}\n\ntype ModalDialogConfig = DialogBase & {\n /**\n * @a11y This will add `aria-modal={true}` and rely on browsers to\n * handle making outside content inert.\n * @default false\n */\n 'aria-modal': true\n // ref: React.RefObject<HTMLElement>\n}\n\ntype ModalDialogLikeConfig = NonModalDialogConfig | ModalDialogConfig\n\ntype OverlayTriggerA11yConfig = LabelConfig & {\n /**\n * Assure `aria-hidden` is not applied. A code side-effect\n * from `ariaHideOutside` hiding everthing outside the scope.\n */\n alwaysAriaVisible?: boolean\n /**\n * When properties should be passed to the overlay UI itself,\n * and not the wrapper element.\n */\n canPropOverlayUp: boolean\n isOpen: boolean\n role?: OverlayTriggerRole\n}\n\n/**\n * Manages labelling for an element and the other DOM. Defaults an ID for `aria-labelledby` usage.\n *\n * When `aria-label` and `aria-labelledby` both exist, it combines them into `aria-labelledby` for a screen reader chain.\n * @link [W3 naming with aria-labelledby](https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/#naming_with_aria-labelledby)\n */\nexport function useLabelled(props?: LabelConfig) {\n const {\n 'aria-describedby': ariaDescribedby,\n 'aria-details': ariaDetails,\n 'aria-labelledby': ariaLabelledby,\n 'aria-label': ariaLabel,\n id,\n } = props || (emptyObj as LabelConfig)\n const ariaLabelOnly = ariaLabel && !ariaLabelledby\n\n // Generate an ID. We want to use this unless they are using only aria-label\n const labelledId = useId(ariaLabelledby)\n\n // Merges aria-label and aria-labelledby into aria-labelledby when both exist\n const widgetId = useId(id)\n let fieldProps = useLabels({\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelOnly ? undefined : labelledId,\n id: widgetId,\n })\n\n return {\n descriptionProps: { id: ariaDescribedby },\n labelProps: { id: ariaLabelOnly ? undefined : labelledId },\n widgetProps: {\n ...fieldProps,\n 'aria-describedby': ariaDescribedby,\n 'aria-details': ariaDetails,\n },\n }\n}\n\n/**\n * Cover the label links for the trigger (button), the popup element (dialog), and the popup element title (heading).\n * Similar to [React Aria useOverlayTrigger](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/useOverlayTrigger.ts)\n * but with element title support.\n * @link [MDN aria-haspopup](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup)\n */\nexport function useLabelledPopup({\n 'aria-describedby': ariaDescribedby,\n 'aria-details': ariaDetails,\n 'aria-labelledby': ariaLabelledby,\n 'aria-label': ariaLabel,\n id: id_,\n isOpen,\n type = 'button',\n popupRole,\n popupId: popupId_,\n}: LabelConfig & {\n isOpen: boolean\n popupId?: string\n type?: 'button' | 'combobox' // Role? Not used. Show concept that popups manage 2 roles\n popupRole: 'dialog' | 'menu' | 'listbox'\n}) {\n /** Web spec default for aria-haspopup=true is menu, unless element has role combobox, which have an implicit aria-haspopup value of listbox. */\n // const popupRole = popupRole_ || type === 'combobox' ? 'listbox' : 'menu'\n const id = useId(id_)\n const popupId = useId(popupId_)\n\n const presetArgs = {\n isVisible: isOpen,\n role: popupRole,\n overlayId: popupId,\n }\n\n const triggerProps = getA11yPreset(popupRole).getTriggerProps?.(presetArgs)\n const overlayProps = getA11yPreset(popupRole).getOverlayProps?.(presetArgs)\n\n const { labelProps, widgetProps } = useLabelled({\n 'aria-describedby': ariaDescribedby,\n 'aria-details': ariaDetails,\n 'aria-labelledby': ariaLabelledby,\n 'aria-label': ariaLabel,\n id,\n })\n\n return {\n labelProps,\n popupProps: { role: popupRole, ...widgetProps, ...overlayProps },\n triggerProps,\n }\n}\n\n/**\n * For dialog experiences:\n * - Has role dialog and aria linked title props\n * - Focus management props to work with FocusScope\n *\n * For modal dialog experiences (full screen locked experiences):\n * - what dialog above does\n * - adds aria-modal=\"true\"\n * - this hook does not determine where to mount or how many modals are open\n *\n * For either experiences, you still MUST support a way to close by mouse and keyboard.\n *\n * Using `aria-modal`, you need to keep additional overlay content inside, so\n * portals must be smart enough to know where other overlays\n * like tooltips or toasts should go to remain visible to screen readers (inside the aria-modal).\n *\n * Setting aria-modal=\"true\" tells assistive technologies to let the user know the ability to interact with,\n * or access other content on the page requires the modal dialog to be closed or otherwise lose focus.\n * Modal dialogs are when content is displayed and the user's interaction is limited to only that section until it is dismissed.\n * [MDN aria modal](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal).\n */\nexport function useModalDialogLike({\n 'aria-describedby': ariaDescribedby,\n 'aria-details': ariaDetails,\n 'aria-labelledby': ariaLabelledby,\n 'aria-label': ariaLabel,\n 'aria-modal': ariaModal,\n id,\n isOpen,\n role = 'dialog',\n}: ModalDialogLikeConfig) {\n const { labelProps, widgetProps } = useLabelled({\n 'aria-describedby': ariaDescribedby,\n 'aria-details': ariaDetails,\n 'aria-labelledby': ariaLabelledby,\n 'aria-label': ariaLabel,\n })\n\n const dialogProps = {\n 'aria-modal': ariaModal,\n ...widgetProps,\n id,\n role,\n tabIndex: -1,\n }\n\n // usePreventScroll({\n // isDisabled: ariaModal ? !isOpen : true,\n // })\n\n // Fills aria-modal=true\n // import { ariaHideOutside } from '@react-aria/overlays'\n // React.useLayoutEffect(() => {\n // if (isModal && isOpen && ref.current) {\n // // Could add additional visible element refs here\n // return ariaHideOutside([ref.current])\n // }\n // }, [isModal, isOpen, ref])\n\n return {\n dialogProps,\n labelProps,\n focusScopeProps: {\n autoFocus: true,\n contain: true,\n restoreFocus: true,\n },\n }\n}\n\n/**\n * Takes many roles and determines props necessary for DOM/components.\n * **Side effect of role=\"dialog\"**, current and any content added later\n * outside of the element (like by portals) will get `aria-hidden=true`\n * to replace the `aria-modal=true` `inert` nature.\n * @see useModalDialogLike */\nexport function useOverlayTriggerA11y({\n alwaysAriaVisible,\n 'aria-describedby': ariaDescribedby,\n 'aria-details': ariaDetails,\n 'aria-labelledby': ariaLabelledby,\n 'aria-label': ariaLabel,\n // can we remove this? have it role based? be optional?\n canPropOverlayUp,\n id: id_,\n isOpen,\n role,\n}: OverlayTriggerA11yConfig) {\n if (\n // @ts-expect-error Checking for invalid usage\n role === 'alertdialog'\n ) {\n console.error(\n '@procore/core-react: useOverlayTriggerA11y role alertdialog is not supported because it requires aria-modal to be true. This is intended for non-modal dialogs.'\n )\n }\n const isDialog = role === 'dialog'\n\n const id = useId(id_)\n\n const { getTriggerProps, getOverlayProps } = getA11yPreset(role)\n\n const triggerProps = getTriggerProps?.({\n isVisible: isOpen,\n role: role!,\n overlayId: id,\n })\n\n const overlayA11yProps = getOverlayProps?.({\n isVisible: isOpen,\n role: role!,\n overlayId: id,\n })\n\n const wrapperA11yProps = !canPropOverlayUp ? overlayA11yProps : emptyObj\n const overlayProps = canPropOverlayUp ? overlayA11yProps : emptyObj\n\n const { dialogProps, labelProps, focusScopeProps } = useModalDialogLike({\n 'aria-describedby': ariaDescribedby,\n 'aria-details': ariaDetails,\n 'aria-labelledby': ariaLabelledby,\n 'aria-label': ariaLabel,\n 'aria-modal': undefined, // OverlayTrigger only supports non-modal dialogs\n id,\n isOpen,\n })\n\n /** This is a code side-effect from ariaHideOutside hiding everthing */\n const portalProps =\n role === 'tooltip' || alwaysAriaVisible // || !role\n ? { 'data-react-aria-top-layer': true, 'data-live-announcer': true }\n : emptyObj\n\n /**\n * If it is a dialog, we can merge the dialog props with any haspopup props\n */\n const wrapperFinalProps = isDialog\n ? {\n ...wrapperA11yProps,\n ...dialogProps,\n }\n : wrapperA11yProps\n\n /**\n * If it is a dialog, we have opinions on `FocusScope` props.\n */\n const focusScopeFinalProps = isDialog\n ? focusScopeProps\n : (emptyObj as {\n autoFocus?: boolean\n contain?: boolean\n restoreFocus?: boolean\n })\n\n return {\n focusScopeProps: focusScopeFinalProps,\n labelProps,\n overlayProps,\n portalProps,\n triggerProps,\n wrapperProps: wrapperFinalProps,\n }\n}\n\n// WIP Example combobox\n// function useCombox({\n// controls,\n// isOpen = false,\n// }: {\n// controls: 'dialog' | 'menu' | 'listbox'\n// isOpen: boolean\n// }) {\n// const { labelProps, popupProps, triggerProps } = useLabelledPopup({\n// role: controls,\n// type: 'combobox',\n// isOpen,\n// })\n// dispatch between elements.\n// NOTE combobox has two labels, that could be different\n// one for the trigger input (typically the form label)\n// second for the thing it controls (listbox, dialog)\n// - label id=1\n// - input role='combobox' aria-labelledby=1\n// - div role={controls} aria-label\n// Also, any icon only buttons like clear or open should have a\n// label and -1 tabindex. No nested interactive roles.\n// }\n"],"mappings":";;;;;;AAAA,SAASA,KAAK,EAAEC,SAAS,QAAQ,mBAAmB;AAIpD,IAAMC,QAAQ,GAAG,CAAC,CAAC;AACnB,IAAMC,WAAyB,GAAG,SAA5BA,WAAyBA,CAAA;EAAA,OAAU,CAAC,CAAC;AAAA,CAAC;AAQ5C,IAAMC,WAML,GAAG;EACFC,QAAQ,EAAE;IACRC,eAAe,EAAE,SAAjBA,eAAeA,CAAAC,IAAA;MAAA,IAAKC,IAAI,GAAAD,IAAA,CAAJC,IAAI;QAAEC,SAAS,GAAAF,IAAA,CAATE,SAAS;MAAA,OAAQ;QACzCC,EAAE,EAAED,SAAS;QACbD,IAAI,EAAJA;MACF,CAAC;IAAA,CAAC;IACFG,eAAe,EAAE,SAAjBA,eAAeA,CAAAC,KAAA;MAAA,IAAKJ,IAAI,GAAAI,KAAA,CAAJJ,IAAI;QAAEK,SAAS,GAAAD,KAAA,CAATC,SAAS;QAAEJ,SAAS,GAAAG,KAAA,CAATH,SAAS;MAAA,OAAQ;QACpD,eAAe,EAAEI,SAAS;QAC1B,eAAe,EAAEA,SAAS,GAAGJ,SAAS,GAAGK,SAAS;QAClD,eAAe,EAAEN;MACnB,CAAC;IAAA;EACH,CAAC;EACDO,OAAO,EAAE;IACPT,eAAe,EAAE,SAAjBA,eAAeA,CAAAU,KAAA;MAAA,IAAKP,SAAS,GAAAO,KAAA,CAATP,SAAS;MAAA,OAAQ;QACnCD,IAAI,EAAE,SAAS;QACfE,EAAE,EAAED;MACN,CAAC;IAAA,CAAC;IACFE,eAAe,EAAE,SAAjBA,eAAeA,CAAAM,KAAA;MAAA,IAAKJ,SAAS,GAAAI,KAAA,CAATJ,SAAS;QAAEJ,SAAS,GAAAQ,KAAA,CAATR,SAAS;MAAA,OAAQ;QAC9C,kBAAkB,EAAEI,SAAS,GAAGJ,SAAS,GAAGK;QAC5C;MACF,CAAC;IAAA;EACH;AACF,CAAC;;AAED,OAAO,SAASI,aAAaA,CAACV,IAAyC,EAAE;EACvE,QAAQA,IAAI;IACV,KAAK,aAAa;IAClB,KAAK,QAAQ;IACb,KAAK,SAAS;IACd,KAAK,MAAM;MACT,OAAOJ,WAAW,CAACC,QAAQ;IAC7B,KAAK,SAAS;MACZ,OAAOD,WAAW,CAACW,OAAO;IAC5B,KAAK,MAAM;MACT,OAAO;QACLT,eAAe,EAAG,SAAAA,CAAA;UAAA,OAAO;YAAEE,IAAI,EAAE;UAAO,CAAC;QAAA,CAAkB;QAC3DG,eAAe,EAAER;MACnB,CAAC;IACH;MACE,OAAO;QACLG,eAAe,EAAEH,WAAW;QAC5BQ,eAAe,EAAER;MACnB,CAAC;EACL;AACF;AAiDA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASgB,WAAWA,CAACC,KAAmB,EAAE;EAC/C,IAAAC,KAAA,GAMID,KAAK,IAAKlB,QAAwB;IALhBoB,eAAe,GAAAD,KAAA,CAAnC,kBAAkB;IACFE,WAAW,GAAAF,KAAA,CAA3B,cAAc;IACKG,cAAc,GAAAH,KAAA,CAAjC,iBAAiB;IACHI,SAAS,GAAAJ,KAAA,CAAvB,YAAY;IACZX,EAAE,GAAAW,KAAA,CAAFX,EAAE;EAEJ,IAAMgB,aAAa,GAAGD,SAAS,IAAI,CAACD,cAAc;;EAElD;EACA,IAAMG,UAAU,GAAG3B,KAAK,CAACwB,cAAc,CAAC;;EAExC;EACA,IAAMI,QAAQ,GAAG5B,KAAK,CAACU,EAAE,CAAC;EAC1B,IAAImB,UAAU,GAAG5B,SAAS,CAAC;IACzB,YAAY,EAAEwB,SAAS;IACvB,iBAAiB,EAAEC,aAAa,GAAGZ,SAAS,GAAGa,UAAU;IACzDjB,EAAE,EAAEkB;EACN,CAAC,CAAC;EAEF,OAAO;IACLE,gBAAgB,EAAE;MAAEpB,EAAE,EAAEY;IAAgB,CAAC;IACzCS,UAAU,EAAE;MAAErB,EAAE,EAAEgB,aAAa,GAAGZ,SAAS,GAAGa;IAAW,CAAC;IAC1DK,WAAW,EAAAC,aAAA,CAAAA,aAAA,KACNJ,UAAU;MACb,kBAAkB,EAAEP,eAAe;MACnC,cAAc,EAAEC;IAAW;EAE/B,CAAC;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASW,gBAAgBA,CAAAC,KAAA,EAe7B;EAAA,IAAAC,qBAAA,EAAAC,cAAA,EAAAC,qBAAA,EAAAC,eAAA;EAAA,IAdmBjB,eAAe,GAAAa,KAAA,CAAnC,kBAAkB;IACFZ,WAAW,GAAAY,KAAA,CAA3B,cAAc;IACKX,cAAc,GAAAW,KAAA,CAAjC,iBAAiB;IACHV,SAAS,GAAAU,KAAA,CAAvB,YAAY;IACRK,GAAG,GAAAL,KAAA,CAAPzB,EAAE;IACF+B,MAAM,GAAAN,KAAA,CAANM,MAAM;IAAAC,UAAA,GAAAP,KAAA,CACNQ,IAAI;IAAJA,IAAI,GAAAD,UAAA,cAAG,QAAQ,GAAAA,UAAA;IACfE,SAAS,GAAAT,KAAA,CAATS,SAAS;IACAC,QAAQ,GAAAV,KAAA,CAAjBW,OAAO;EAOP;EACA;EACA,IAAMpC,EAAE,GAAGV,KAAK,CAACwC,GAAG,CAAC;EACrB,IAAMM,OAAO,GAAG9C,KAAK,CAAC6C,QAAQ,CAAC;EAE/B,IAAME,UAAU,GAAG;IACjBlC,SAAS,EAAE4B,MAAM;IACjBjC,IAAI,EAAEoC,SAAS;IACfnC,SAAS,EAAEqC;EACb,CAAC;EAED,IAAME,YAAY,IAAAZ,qBAAA,GAAG,CAAAC,cAAA,GAAAnB,aAAa,CAAC0B,SAAS,CAAC,EAACjC,eAAe,cAAAyB,qBAAA,uBAAxCA,qBAAA,CAAAa,IAAA,CAAAZ,cAAA,EAA2CU,UAAU,CAAC;EAC3E,IAAMG,YAAY,IAAAZ,qBAAA,GAAG,CAAAC,eAAA,GAAArB,aAAa,CAAC0B,SAAS,CAAC,EAACtC,eAAe,cAAAgC,qBAAA,uBAAxCA,qBAAA,CAAAW,IAAA,CAAAV,eAAA,EAA2CQ,UAAU,CAAC;EAE3E,IAAAI,YAAA,GAAoChC,WAAW,CAAC;MAC9C,kBAAkB,EAAEG,eAAe;MACnC,cAAc,EAAEC,WAAW;MAC3B,iBAAiB,EAAEC,cAAc;MACjC,YAAY,EAAEC,SAAS;MACvBf,EAAE,EAAFA;IACF,CAAC,CAAC;IANMqB,UAAU,GAAAoB,YAAA,CAAVpB,UAAU;IAAEC,WAAW,GAAAmB,YAAA,CAAXnB,WAAW;EAQ/B,OAAO;IACLD,UAAU,EAAVA,UAAU;IACVqB,UAAU,EAAAnB,aAAA,CAAAA,aAAA;MAAIzB,IAAI,EAAEoC;IAAS,GAAKZ,WAAW,GAAKkB,YAAY,CAAE;IAChEF,YAAY,EAAZA;EACF,CAAC;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASK,kBAAkBA,CAAAC,KAAA,EASR;EAAA,IARJhC,eAAe,GAAAgC,KAAA,CAAnC,kBAAkB;IACF/B,WAAW,GAAA+B,KAAA,CAA3B,cAAc;IACK9B,cAAc,GAAA8B,KAAA,CAAjC,iBAAiB;IACH7B,SAAS,GAAA6B,KAAA,CAAvB,YAAY;IACEC,SAAS,GAAAD,KAAA,CAAvB,YAAY;IACZ5C,EAAE,GAAA4C,KAAA,CAAF5C,EAAE;IACF+B,MAAM,GAAAa,KAAA,CAANb,MAAM;IAAAe,UAAA,GAAAF,KAAA,CACN9C,IAAI;IAAJA,IAAI,GAAAgD,UAAA,cAAG,QAAQ,GAAAA,UAAA;EAEf,IAAAC,aAAA,GAAoCtC,WAAW,CAAC;MAC9C,kBAAkB,EAAEG,eAAe;MACnC,cAAc,EAAEC,WAAW;MAC3B,iBAAiB,EAAEC,cAAc;MACjC,YAAY,EAAEC;IAChB,CAAC,CAAC;IALMM,UAAU,GAAA0B,aAAA,CAAV1B,UAAU;IAAEC,WAAW,GAAAyB,aAAA,CAAXzB,WAAW;EAO/B,IAAM0B,WAAW,GAAAzB,aAAA,CAAAA,aAAA;IACf,YAAY,EAAEsB;EAAS,GACpBvB,WAAW;IACdtB,EAAE,EAAFA,EAAE;IACFF,IAAI,EAAJA,IAAI;IACJmD,QAAQ,EAAE,CAAC;EAAC,EACb;;EAED;EACA;EACA;;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EAEA,OAAO;IACLD,WAAW,EAAXA,WAAW;IACX3B,UAAU,EAAVA,UAAU;IACV6B,eAAe,EAAE;MACfC,SAAS,EAAE,IAAI;MACfC,OAAO,EAAE,IAAI;MACbC,YAAY,EAAE;IAChB;EACF,CAAC;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,qBAAqBA,CAAAC,KAAA,EAWR;EAAA,IAV3BC,iBAAiB,GAAAD,KAAA,CAAjBC,iBAAiB;IACG5C,eAAe,GAAA2C,KAAA,CAAnC,kBAAkB;IACF1C,WAAW,GAAA0C,KAAA,CAA3B,cAAc;IACKzC,cAAc,GAAAyC,KAAA,CAAjC,iBAAiB;IACHxC,SAAS,GAAAwC,KAAA,CAAvB,YAAY;IAEZE,gBAAgB,GAAAF,KAAA,CAAhBE,gBAAgB;IACZ3B,GAAG,GAAAyB,KAAA,CAAPvD,EAAE;IACF+B,MAAM,GAAAwB,KAAA,CAANxB,MAAM;IACNjC,IAAI,GAAAyD,KAAA,CAAJzD,IAAI;EAEJ;EACE;EACAA,IAAI,KAAK,aAAa,EACtB;IACA4D,OAAO,CAACC,KAAK,CACX,iKACF,CAAC;EACH;EACA,IAAMC,QAAQ,GAAG9D,IAAI,KAAK,QAAQ;EAElC,IAAME,EAAE,GAAGV,KAAK,CAACwC,GAAG,CAAC;EAErB,IAAA+B,eAAA,GAA6CrD,aAAa,CAACV,IAAI,CAAC;IAAxDG,eAAe,GAAA4D,eAAA,CAAf5D,eAAe;IAAEL,eAAe,GAAAiE,eAAA,CAAfjE,eAAe;EAExC,IAAM0C,YAAY,GAAGrC,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAG;IACrCE,SAAS,EAAE4B,MAAM;IACjBjC,IAAI,EAAEA,IAAK;IACXC,SAAS,EAAEC;EACb,CAAC,CAAC;EAEF,IAAM8D,gBAAgB,GAAGlE,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAG;IACzCO,SAAS,EAAE4B,MAAM;IACjBjC,IAAI,EAAEA,IAAK;IACXC,SAAS,EAAEC;EACb,CAAC,CAAC;EAEF,IAAM+D,gBAAgB,GAAG,CAACN,gBAAgB,GAAGK,gBAAgB,GAAGtE,QAAQ;EACxE,IAAMgD,YAAY,GAAGiB,gBAAgB,GAAGK,gBAAgB,GAAGtE,QAAQ;EAEnE,IAAAwE,mBAAA,GAAqDrB,kBAAkB,CAAC;MACtE,kBAAkB,EAAE/B,eAAe;MACnC,cAAc,EAAEC,WAAW;MAC3B,iBAAiB,EAAEC,cAAc;MACjC,YAAY,EAAEC,SAAS;MACvB,YAAY,EAAEX,SAAS;MAAE;MACzBJ,EAAE,EAAFA,EAAE;MACF+B,MAAM,EAANA;IACF,CAAC,CAAC;IARMiB,WAAW,GAAAgB,mBAAA,CAAXhB,WAAW;IAAE3B,UAAU,GAAA2C,mBAAA,CAAV3C,UAAU;IAAE6B,eAAe,GAAAc,mBAAA,CAAfd,eAAe;;EAUhD;EACA,IAAMe,WAAW,GACfnE,IAAI,KAAK,SAAS,IAAI0D,iBAAiB,CAAC;EAAA,EACpC;IAAE,2BAA2B,EAAE,IAAI;IAAE,qBAAqB,EAAE;EAAK,CAAC,GAClEhE,QAAQ;;EAEd;AACF;AACA;EACE,IAAM0E,iBAAiB,GAAGN,QAAQ,GAAArC,aAAA,CAAAA,aAAA,KAEzBwC,gBAAgB,GAChBf,WAAW,IAEhBe,gBAAgB;;EAEpB;AACF;AACA;EACE,IAAMI,oBAAoB,GAAGP,QAAQ,GACjCV,eAAe,GACd1D,QAIC;EAEN,OAAO;IACL0D,eAAe,EAAEiB,oBAAoB;IACrC9C,UAAU,EAAVA,UAAU;IACVmB,YAAY,EAAZA,YAAY;IACZyB,WAAW,EAAXA,WAAW;IACX3B,YAAY,EAAZA,YAAY;IACZ8B,YAAY,EAAEF;EAChB,CAAC;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}