@procore/core-react 12.47.1 → 12.48.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (237) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/AnchorNavigation/AnchorNavigation.styles.js +4 -4
  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/CheckboxGroup/CheckboxGroup.js +9 -3
  15. package/dist/CheckboxGroup/CheckboxGroup.js.map +1 -1
  16. package/dist/CheckboxGroup/checkboxGroupTileNavigation.d.ts +12 -0
  17. package/dist/CheckboxGroup/checkboxGroupTileNavigation.js +224 -0
  18. package/dist/CheckboxGroup/checkboxGroupTileNavigation.js.map +1 -0
  19. package/dist/ContactItem/ContactItem.styles.js +5 -5
  20. package/dist/Content/Content.styles.js +2 -2
  21. package/dist/DateInput/DateInput.styles.js +6 -6
  22. package/dist/DateSelect/DateSelect.js +5 -4
  23. package/dist/DateSelect/DateSelect.js.map +1 -1
  24. package/dist/DateSelect/DateSelect.types.d.ts +1 -1
  25. package/dist/DateSelect/DateSelect.types.js.map +1 -1
  26. package/dist/DetailPage/DetailPage.styles.js +7 -7
  27. package/dist/Dropdown/Dropdown.styles.js +3 -3
  28. package/dist/DropdownFlyout/DropdownFlyout.styles.js +4 -4
  29. package/dist/Dropzone/Dropzone.js +1 -1
  30. package/dist/Dropzone/Dropzone.styles.js +9 -9
  31. package/dist/EmptyState/EmptyState.styles.js +6 -6
  32. package/dist/Field/Field.styles.js +3 -3
  33. package/dist/FileList/FileList.js +4 -0
  34. package/dist/FileList/FileList.js.map +1 -1
  35. package/dist/FileList/FileList.styles.js +3 -3
  36. package/dist/FileList/storybook/fileListMockData.js +14 -14
  37. package/dist/FileList/storybook/fileListMockData.js.map +1 -1
  38. package/dist/FileSelect/FileExplorer/FileExplorer.styles.js +9 -9
  39. package/dist/FileSelect/FileExplorer/FileExplorerSidebar.styles.js +3 -3
  40. package/dist/FileSelect/FileSelect.styles.js +2 -2
  41. package/dist/FileSelect/FileSelectDropzone/FileSelectDropzone.styles.js +3 -3
  42. package/dist/FileSelect/FileTokenList/FileTokenList.styles.js +2 -2
  43. package/dist/FileSelect/GridSource/GridSource.styles.js +6 -6
  44. package/dist/FileSelect/LocalSource/LocalSource.styles.js +4 -4
  45. package/dist/FileSelect/SourceItem/SourceItem.styles.js +3 -3
  46. package/dist/FileSelect/ThumbnailList/ThumbnailList.styles.js +6 -6
  47. package/dist/FileSelect/TreeSource/TreeSource.styles.js +1 -1
  48. package/dist/FileToken/FileToken.styles.js +6 -6
  49. package/dist/FilterToken/FilterToken.styles.js +5 -5
  50. package/dist/FlexList/FlexList.styles.js +1 -1
  51. package/dist/Form/Form.styles.js +13 -13
  52. package/dist/Form/StyledFormikForm.styles.js +2 -2
  53. package/dist/GhostPlaceholder/GhostPlaceholder.styles.js +2 -2
  54. package/dist/Grid/Grid.styles.js +2 -2
  55. package/dist/GroupSelect/GroupSelect.styles.js +1 -1
  56. package/dist/Input/Input.styles.js +1 -1
  57. package/dist/Link/Link.styles.js +1 -1
  58. package/dist/ListPage/ListPage.styles.js +8 -8
  59. package/dist/Loader/Loader.styles.js +2 -2
  60. package/dist/MenuImperative/MenuImperative.styles.js +11 -11
  61. package/dist/Modal/Modal.styles.js +13 -13
  62. package/dist/MultiSelect/MultiSelect.styles.js +8 -8
  63. package/dist/NextMenu/NextMenu.styles.js +3 -3
  64. package/dist/NextTile/NextTile.d.ts +24 -0
  65. package/dist/NextTile/NextTile.js +275 -90
  66. package/dist/NextTile/NextTile.js.map +1 -1
  67. package/dist/NextTile/NextTile.styles.d.ts +16 -0
  68. package/dist/NextTile/NextTile.styles.js +136 -0
  69. package/dist/NextTile/NextTile.styles.js.map +1 -0
  70. package/dist/NextTile/NextTile.types.d.ts +14 -2
  71. package/dist/NextTile/NextTile.types.js.map +1 -1
  72. package/dist/Notation/Notation.js +1 -1
  73. package/dist/NumberInput/NumberInput.styles.js +7 -7
  74. package/dist/Overlay/OverlayArrow.styles.js +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.js +2 -1
  81. package/dist/Pagination/Pagination.js.map +1 -1
  82. package/dist/Pagination/Pagination.styles.js +5 -5
  83. package/dist/Pagination/PaginationSelect.js +15 -2
  84. package/dist/Pagination/PaginationSelect.js.map +1 -1
  85. package/dist/Panel/Panel.styles.js +11 -11
  86. package/dist/Pill/Pill.styles.js +3 -3
  87. package/dist/PillSelect/PillSelect.styles.js +4 -4
  88. package/dist/Popover/Popover.js +2 -3
  89. package/dist/Popover/Popover.js.map +1 -1
  90. package/dist/Popover/Popover.styles.js +2 -2
  91. package/dist/Popover/Popover.types.d.ts +4 -3
  92. package/dist/Popover/Popover.types.js.map +1 -1
  93. package/dist/Portal/Portal.styles.js +1 -1
  94. package/dist/ProgressBar/ProgressBar.styles.js +2 -2
  95. package/dist/RadioButton/RadioButton.styles.js +3 -3
  96. package/dist/Required/Required.styles.js +3 -3
  97. package/dist/Search/Search.styles.js +5 -5
  98. package/dist/Section/Section.styles.js +7 -7
  99. package/dist/SegmentedController/SegmentedController.styles.js +4 -4
  100. package/dist/Select/Select.styles.js +8 -8
  101. package/dist/Semantic/Semantic.styles.js +9 -9
  102. package/dist/Slider/Slider.styles.js +5 -5
  103. package/dist/Spinner/Spinner.styles.js +8 -8
  104. package/dist/Spinner/Spinner.styles.js.map +1 -1
  105. package/dist/SplitViewCard/SplitViewCard.styles.js +8 -8
  106. package/dist/SuperSelect/SuperSelect.presets.styles.js +1 -1
  107. package/dist/SuperSelect/SuperSelect.styles.js +40 -40
  108. package/dist/Switch/Switch.styles.js +4 -4
  109. package/dist/Table/Table.styles.js +29 -29
  110. package/dist/TableShelf/TableShelf.styles.js +5 -5
  111. package/dist/Tabs/Tabs.styles.js +16 -16
  112. package/dist/Tearsheet/Tearsheet.styles.js +5 -5
  113. package/dist/TextArea/TextArea.styles.js +1 -1
  114. package/dist/TextEditorOutput/TextEditorOutput.styles.js +1 -1
  115. package/dist/Thumbnail/Thumbnail.hooks.d.ts +13 -7
  116. package/dist/Thumbnail/Thumbnail.hooks.js +15 -5
  117. package/dist/Thumbnail/Thumbnail.hooks.js.map +1 -1
  118. package/dist/Thumbnail/Thumbnail.js +8 -4
  119. package/dist/Thumbnail/Thumbnail.js.map +1 -1
  120. package/dist/Thumbnail/Thumbnail.styles.d.ts +13 -5
  121. package/dist/Thumbnail/Thumbnail.styles.js +42 -24
  122. package/dist/Thumbnail/Thumbnail.styles.js.map +1 -1
  123. package/dist/Thumbnail/Thumbnail.types.d.ts +12 -10
  124. package/dist/Thumbnail/Thumbnail.types.js.map +1 -1
  125. package/dist/Thumbnail/Thumbnail.utils.d.ts +1 -0
  126. package/dist/Thumbnail/Thumbnail.utils.js +7 -0
  127. package/dist/Thumbnail/Thumbnail.utils.js.map +1 -1
  128. package/dist/Thumbnail/ThumbnailCaption.js +85 -40
  129. package/dist/Thumbnail/ThumbnailCaption.js.map +1 -1
  130. package/dist/ThumbnailGrid/ThumbnailGrid.styles.js +7 -7
  131. package/dist/TieredSelect/TieredSelect.styles.js +9 -9
  132. package/dist/Tile/Tile.styles.js +10 -10
  133. package/dist/Tile/Tile.styles.js.map +1 -1
  134. package/dist/Title/Title.styles.js +7 -7
  135. package/dist/Toast/Toast.styles.js +3 -3
  136. package/dist/ToggleButton/ToggleButton.styles.js +5 -3
  137. package/dist/ToggleButton/ToggleButton.styles.js.map +1 -1
  138. package/dist/Token/Token.styles.js +5 -5
  139. package/dist/ToolHeader/ToolHeader.styles.js +6 -6
  140. package/dist/ToolLandingPage/ToolLandingPage.styles.js +3 -3
  141. package/dist/Tooltip/Tooltip.styles.js +3 -3
  142. package/dist/Tree/Tree.js +1 -1
  143. package/dist/Tree/Tree.styles.js +10 -10
  144. package/dist/Typeahead/Typeahead.styles.js +3 -3
  145. package/dist/Typography/Typography.styles.js +1 -1
  146. package/dist/Typography/Typography.table.story.js +2 -2
  147. package/dist/_hooks/ClickOutside.js +8 -3
  148. package/dist/_hooks/ClickOutside.js.map +1 -1
  149. package/dist/_hooks/I18n.d.ts +2 -0
  150. package/dist/_locales/en.json +1 -0
  151. package/dist/_locales/pseudo.json +1 -0
  152. package/dist/_storyHelpers_/components/Deprecation.styles.js +1 -1
  153. package/dist/_storyHelpers_/components/StoryGrid.js +3 -3
  154. package/dist/_typedoc/AnchorNavigation/AnchorNavigation.types.json +4 -4
  155. package/dist/_typedoc/Avatar/Avatar.types.json +20 -20
  156. package/dist/_typedoc/AvatarStack/AvatarStack.types.json +25 -25
  157. package/dist/_typedoc/Badge/Badge.types.json +6 -6
  158. package/dist/_typedoc/Banner/Banner.types.json +15 -15
  159. package/dist/_typedoc/Box/Box.types.json +68 -68
  160. package/dist/_typedoc/Breadcrumbs/Breadcrumbs.types.json +10 -10
  161. package/dist/_typedoc/Button/Button.types.json +14 -14
  162. package/dist/_typedoc/Calendar/Calendar.types.json +80 -80
  163. package/dist/_typedoc/Card/Card.types.json +6 -6
  164. package/dist/_typedoc/Checkbox/Checkbox.types.json +8 -8
  165. package/dist/_typedoc/ContactItem/ContactItem.types.json +9 -9
  166. package/dist/_typedoc/DateInput/DateInput.types.json +35 -35
  167. package/dist/_typedoc/DateSelect/DateSelect.types.json +23 -13
  168. package/dist/_typedoc/DetailPage/DetailPage.types.json +5 -5
  169. package/dist/_typedoc/Dropdown/Dropdown.types.json +38 -38
  170. package/dist/_typedoc/DropdownFlyout/DropdownFlyout.types.json +31 -31
  171. package/dist/_typedoc/Dropzone/Dropzone.types.json +44 -44
  172. package/dist/_typedoc/EmptyState/EmptyState.types.json +18 -18
  173. package/dist/_typedoc/FileList/FileList.types.json +9 -9
  174. package/dist/_typedoc/FileSelect/FileSelect.types.json +27 -27
  175. package/dist/_typedoc/FileSelect/GridSource/GridSource.types.json +20 -20
  176. package/dist/_typedoc/FileSelect/LocalSource/LocalSource.types.json +14 -14
  177. package/dist/_typedoc/FileSelect/TreeSource/TreeSource.types.json +9 -9
  178. package/dist/_typedoc/Flex/Flex.types.json +27 -27
  179. package/dist/_typedoc/FlexList/FlexList.types.json +30 -30
  180. package/dist/_typedoc/Form/Form.types.json +780 -760
  181. package/dist/_typedoc/GhostPlaceholder/GhostPlaceholder.types.json +12 -12
  182. package/dist/_typedoc/Grid/Grid.types.json +8 -8
  183. package/dist/_typedoc/GroupSelect/GroupSelect.types.json +54 -54
  184. package/dist/_typedoc/Input/Input.types.json +2 -2
  185. package/dist/_typedoc/Link/Link.types.json +1 -1
  186. package/dist/_typedoc/ListPage/ListPage.types.json +13 -13
  187. package/dist/_typedoc/Menu/Menu.types.json +62 -62
  188. package/dist/_typedoc/MenuImperative/MenuImperative.types.json +84 -84
  189. package/dist/_typedoc/Modal/Modal.types.json +48 -48
  190. package/dist/_typedoc/MultiSelect/MultiSelect.types.json +33 -33
  191. package/dist/_typedoc/NextTile/NextTile.types.json +42 -32
  192. package/dist/_typedoc/Notation/Notation.types.json +4 -4
  193. package/dist/_typedoc/NumberInput/NumberInput.types.json +48 -48
  194. package/dist/_typedoc/OverlayTrigger/OverlayTrigger.types.json +33 -33
  195. package/dist/_typedoc/PageLayout/PageLayout.types.json +28 -28
  196. package/dist/_typedoc/Pagination/Pagination.types.json +7 -7
  197. package/dist/_typedoc/Panel/Panel.types.json +28 -28
  198. package/dist/_typedoc/Pill/Pill.types.json +2 -2
  199. package/dist/_typedoc/PillSelect/PillSelect.types.json +49 -49
  200. package/dist/_typedoc/Popover/Popover.types.json +19 -19
  201. package/dist/_typedoc/ProgressBar/ProgressBar.types.json +7 -7
  202. package/dist/_typedoc/RadioButton/RadioButton.types.json +6 -6
  203. package/dist/_typedoc/Required/Required.types.json +5 -5
  204. package/dist/_typedoc/Search/Search.types.json +18 -18
  205. package/dist/_typedoc/Section/Section.types.json +15 -15
  206. package/dist/_typedoc/SegmentedController/SegmentedController.types.json +21 -21
  207. package/dist/_typedoc/Select/Select.types.json +67 -67
  208. package/dist/_typedoc/SettingsPage/SettingsPage.types.json +10 -10
  209. package/dist/_typedoc/Slider/Slider.types.json +6 -6
  210. package/dist/_typedoc/Spinner/Spinner.types.json +9 -9
  211. package/dist/_typedoc/SplitViewCard/SplitViewCard.types.json +14 -14
  212. package/dist/_typedoc/Table/Table.types.json +114 -104
  213. package/dist/_typedoc/Tabs/Tabs.types.json +21 -21
  214. package/dist/_typedoc/Tearsheet/Tearsheet.types.json +17 -17
  215. package/dist/_typedoc/TextArea/TextArea.types.json +3 -3
  216. package/dist/_typedoc/TextEditor/TextEditor.types.json +11 -11
  217. package/dist/_typedoc/TextEditorOutput/TextEditorOutput.types.json +4 -4
  218. package/dist/_typedoc/Thumbnail/Thumbnail.types.json +23 -23
  219. package/dist/_typedoc/TieredDropdown/TieredDropdown.types.json +43 -43
  220. package/dist/_typedoc/TieredSelect/TieredSelect.types.json +29 -29
  221. package/dist/_typedoc/Tile/Tile.types.json +8 -8
  222. package/dist/_typedoc/Title/Title.types.json +1 -1
  223. package/dist/_typedoc/Toast/Toast.types.json +4 -4
  224. package/dist/_typedoc/ToggleButton/ToggleButton.types.json +4 -4
  225. package/dist/_typedoc/Token/Token.types.json +7 -7
  226. package/dist/_typedoc/ToolHeader/ToolHeader.types.json +10 -10
  227. package/dist/_typedoc/ToolLandingPage/ToolLandingPage.types.json +8 -8
  228. package/dist/_typedoc/Tooltip/Tooltip.types.json +15 -15
  229. package/dist/_typedoc/Tree/Tree.types.json +88 -88
  230. package/dist/_typedoc/Typeahead/Typeahead.types.json +2 -2
  231. package/dist/_typedoc/Typography/Typography.types.json +9 -9
  232. package/dist/_typedoc/_utils/types.json +3 -3
  233. package/dist/_typedoc/a11y-tips.json +1 -1
  234. package/dist/index.d.ts +1 -0
  235. package/dist/index.js +1 -0
  236. package/dist/index.js.map +1 -1
  237. package/package.json +16 -16
@@ -5,16 +5,16 @@ import { colors } from '../../_styles/colors';
5
5
  import { spacing } from '../../_styles/spacing';
6
6
  export var StyledPageHeader = /*#__PURE__*/styled(Page.Header).withConfig({
7
7
  displayName: "StyledPageHeader",
8
- componentId: "core-12_47_1__sc-1d5kop0-0"
8
+ componentId: "core-12_48_1__sc-1d5kop0-0"
9
9
  })(["border-bottom:1px solid ", ";padding-top:", "px;", ""], colors.gray85, spacing.lg, function (p) {
10
10
  return p.$hasPaddingBottom && "padding-bottom: ".concat(spacing.lg, "px;");
11
11
  });
12
12
  export var StyledActions = /*#__PURE__*/styled(Box).withConfig({
13
13
  displayName: "StyledActions",
14
- componentId: "core-12_47_1__sc-1d5kop0-1"
14
+ componentId: "core-12_48_1__sc-1d5kop0-1"
15
15
  })(["width:fit-content;"]);
16
16
  export var StyledToggleActionBox = /*#__PURE__*/styled(Box).withConfig({
17
17
  displayName: "StyledToggleActionBox",
18
- componentId: "core-12_47_1__sc-1d5kop0-2"
18
+ componentId: "core-12_48_1__sc-1d5kop0-2"
19
19
  })(["bottom:", "px;position:relative;padding-left:48px;"], spacing.lg);
20
20
  //# sourceMappingURL=PageHeaderTemplate.styles.js.map
@@ -10,10 +10,10 @@ var panelWidthSmall = 360;
10
10
  export var mobileBreakpoint = 440;
11
11
  export var StyledPageAside = /*#__PURE__*/styled(Page.Aside).withConfig({
12
12
  displayName: "StyledPageAside",
13
- componentId: "core-12_47_1__sc-1p7nu53-0"
13
+ componentId: "core-12_48_1__sc-1p7nu53-0"
14
14
  })(["position:sticky;top:0;right:0;max-height:100vh;width:100%;height:100%;@media ", "{position:sticky;max-width:", "px;flex-basis:", "px;}", "{@media ", "{max-width:", "px;}}", "{position:sticky;top:0;right:0;box-shadow:none;animation:none;padding-bottom:68px;@media ", "{width:", "px;}@media (max-width:", "px){padding-bottom:0;}}", "{position:fixed;bottom:0;display:flex;width:100%;max-width:400px;@media ", "{max-width:", "px;}}"], mediaBreakpointsDown.tabletLg, panelWidthSmall, panelWidthSmall, StyledAsideFluidContainer, mediaBreakpointsDown.tabletLg, panelWidthSmall, StyledAsidePanel, mediaBreakpointsDown.tabletLg, panelWidthSmall, mobileBreakpoint, StyledPanelFooter, mediaBreakpointsDown.tabletLg, panelWidthSmall);
15
15
  export var StyledModal = /*#__PURE__*/styled(Modal).withConfig({
16
16
  displayName: "StyledModal",
17
- componentId: "core-12_47_1__sc-1p7nu53-1"
17
+ componentId: "core-12_48_1__sc-1p7nu53-1"
18
18
  })(["top:", "px;bottom:", "px;max-width:416px;transform:none;", "{max-height:100vh;}@media (max-width:", "px){top:0;bottom:0;left:0;right:0;max-width:100%;}"], spacing.md, spacing.md, StyledModalContent, mobileBreakpoint);
19
19
  //# sourceMappingURL=PagePaneTemplate.styles.js.map
@@ -5,14 +5,14 @@ import { spacing } from '../../_styles/spacing';
5
5
  export var mobileBreakpoint = 440;
6
6
  export var StyledPageWrapper = /*#__PURE__*/styled.div.withConfig({
7
7
  displayName: "StyledPageWrapper",
8
- componentId: "core-12_47_1__sc-uuo7st-0"
8
+ componentId: "core-12_48_1__sc-uuo7st-0"
9
9
  })(["display:flex;flex-direction:column;"]);
10
10
  export var StyledPageBodyWrapper = /*#__PURE__*/styled.div.withConfig({
11
11
  displayName: "StyledPageBodyWrapper",
12
- componentId: "core-12_47_1__sc-uuo7st-1"
12
+ componentId: "core-12_48_1__sc-uuo7st-1"
13
13
  })(["display:grid;grid-template-columns:1fr auto;"]);
14
14
  export var StyledPageBody = /*#__PURE__*/styled(Page.Body).withConfig({
15
15
  displayName: "StyledPageBody",
16
- componentId: "core-12_47_1__sc-uuo7st-2"
16
+ componentId: "core-12_48_1__sc-uuo7st-2"
17
17
  })(["padding-bottom:", "px;@media ", "{padding:", "px;}"], spacing.lg, mediaBreakpointsDown.desktopMd, spacing.md);
18
18
  //# sourceMappingURL=PageTemplate.styles.js.map
@@ -89,7 +89,8 @@ export var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(_ref2,
89
89
  return /*#__PURE__*/React.createElement(StyledContainer, _extends({
90
90
  ref: ref
91
91
  }, props), /*#__PURE__*/React.createElement(StyledPageCount, {
92
- ref: ref,
92
+ "aria-atomic": true,
93
+ "aria-live": "polite",
93
94
  italic: true,
94
95
  color: "gray45"
95
96
  }, i18n.t('core.pagination.notation', {
@@ -1 +1 @@
1
- {"version":3,"file":"Pagination.js","names":["ChevronLeft","ChevronRight","NumberFormatter","useId","React","useI18nContext","StyledButton","StyledContainer","StyledCurrentPage","StyledPageCount","PaginationSelect","noop","usePagination","_ref","_ref$activePage","activePage","_ref$items","items","_ref$onSelectPage","onSelectPage","_ref$perPage","perPage","pages","Math","ceil","end","min","isFirst","isLast","selectNext","selectPage","selection","item","selectPrev","start","max","Pagination","forwardRef","_ref2","ref","_ref2$activePage","_ref2$onSelectPage","_ref2$perPage","props","_objectWithoutProperties","_excluded","_usePagination","i18n","labelId","selectId","formattedNumber","formatter","locale","formatNumber","createElement","_extends","italic","color","t","totalItems","id","concat","disabled","onSelect","variant","icon","onClick","displayName"],"sources":["../../src/Pagination/Pagination.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@procore/core-icons/dist'\nimport { NumberFormatter } from '@procore/globalization-toolkit'\nimport { useId } from '@react-aria/utils'\nimport React from 'react'\nimport type { Selection } from '../MenuImperative/MenuImperative.types'\nimport { useI18nContext } from '../_hooks/I18n'\nimport {\n StyledButton,\n StyledContainer,\n StyledCurrentPage,\n StyledPageCount,\n} from './Pagination.styles'\nimport type {\n PaginationHook,\n PaginationHookConfig,\n PresetPaginationProps,\n} from './Pagination.types'\nimport { PaginationSelect } from './PaginationSelect'\n\nfunction noop() {}\n\nconst usePagination = ({\n activePage = 0,\n items = 0,\n onSelectPage = () => {},\n perPage = 0,\n}: PaginationHookConfig): PaginationHook => {\n const pages = Math.ceil(items / perPage)\n activePage = pages === 0 ? 0 : activePage\n\n return {\n end: Math.min(activePage * perPage, items),\n isFirst: activePage < 2,\n isLast: activePage === pages,\n pages,\n selectNext: () => onSelectPage(activePage + 1),\n selectPage: (selection: Selection) => onSelectPage(selection.item),\n selectPrev: () => onSelectPage(activePage - 1),\n start: Math.max((activePage - 1) * perPage + 1, 0),\n }\n}\n\n/**\n\n We paginate pages that display large data sets to our users. This helps reduce\n page load time and makes the data easier to navigate.\n\n Pagination is commonly seen on tool landing pages, where we display 150 objects\n or table rows per page.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/demos-pagination--demo)\n\n @see [Design Guidelines](https://design.procore.com/pagination)\n\n */\nexport const Pagination = React.forwardRef<\n HTMLDivElement,\n PresetPaginationProps\n>(function Pagination(\n { activePage = 1, items, onSelectPage = noop, perPage = 50, ...props },\n ref\n) {\n const {\n end,\n isFirst,\n isLast,\n pages,\n selectNext,\n selectPage,\n selectPrev,\n start,\n } = usePagination({\n activePage,\n items,\n onSelectPage,\n perPage,\n })\n\n const i18n = useI18nContext()\n const labelId = useId()\n const selectId = useId()\n\n function formattedNumber(items: number) {\n const formatter = new NumberFormatter({ locale: i18n.locale })\n\n return formatter.formatNumber(items)\n }\n\n return (\n <StyledContainer ref={ref} {...props}>\n <StyledPageCount ref={ref} italic color=\"gray45\">\n {i18n.t('core.pagination.notation', {\n end: formattedNumber(end),\n start: formattedNumber(start),\n totalItems: formattedNumber(items || 0),\n })}\n </StyledPageCount>\n <StyledCurrentPage id={labelId}>\n {i18n.t('core.pagination.page')}\n </StyledCurrentPage>\n <PaginationSelect\n activePage={activePage}\n aria-labelledby={`${labelId} ${selectId}`}\n disabled={pages <= 1}\n id={selectId}\n onSelect={selectPage}\n pages={pages}\n />\n <StyledButton\n disabled={isFirst}\n variant=\"tertiary\"\n aria-label={i18n.t('core.pagination.prevPage')}\n icon={<ChevronLeft />}\n onClick={selectPrev}\n />\n <StyledButton\n disabled={isLast}\n variant=\"tertiary\"\n aria-label={i18n.t('core.pagination.nextPage')}\n icon={<ChevronRight />}\n onClick={selectNext}\n />\n </StyledContainer>\n )\n})\n\nPagination.displayName = 'Pagination'\n"],"mappings":"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"}
1
+ {"version":3,"file":"Pagination.js","names":["ChevronLeft","ChevronRight","NumberFormatter","useId","React","useI18nContext","StyledButton","StyledContainer","StyledCurrentPage","StyledPageCount","PaginationSelect","noop","usePagination","_ref","_ref$activePage","activePage","_ref$items","items","_ref$onSelectPage","onSelectPage","_ref$perPage","perPage","pages","Math","ceil","end","min","isFirst","isLast","selectNext","selectPage","selection","item","selectPrev","start","max","Pagination","forwardRef","_ref2","ref","_ref2$activePage","_ref2$onSelectPage","_ref2$perPage","props","_objectWithoutProperties","_excluded","_usePagination","i18n","labelId","selectId","formattedNumber","formatter","locale","formatNumber","createElement","_extends","italic","color","t","totalItems","id","concat","disabled","onSelect","variant","icon","onClick","displayName"],"sources":["../../src/Pagination/Pagination.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@procore/core-icons/dist'\nimport { NumberFormatter } from '@procore/globalization-toolkit'\nimport { useId } from '@react-aria/utils'\nimport React from 'react'\nimport type { Selection } from '../MenuImperative/MenuImperative.types'\nimport { useI18nContext } from '../_hooks/I18n'\nimport {\n StyledButton,\n StyledContainer,\n StyledCurrentPage,\n StyledPageCount,\n} from './Pagination.styles'\nimport type {\n PaginationHook,\n PaginationHookConfig,\n PresetPaginationProps,\n} from './Pagination.types'\nimport { PaginationSelect } from './PaginationSelect'\n\nfunction noop() {}\n\nconst usePagination = ({\n activePage = 0,\n items = 0,\n onSelectPage = () => {},\n perPage = 0,\n}: PaginationHookConfig): PaginationHook => {\n const pages = Math.ceil(items / perPage)\n activePage = pages === 0 ? 0 : activePage\n\n return {\n end: Math.min(activePage * perPage, items),\n isFirst: activePage < 2,\n isLast: activePage === pages,\n pages,\n selectNext: () => onSelectPage(activePage + 1),\n selectPage: (selection: Selection) => onSelectPage(selection.item),\n selectPrev: () => onSelectPage(activePage - 1),\n start: Math.max((activePage - 1) * perPage + 1, 0),\n }\n}\n\n/**\n\n We paginate pages that display large data sets to our users. This helps reduce\n page load time and makes the data easier to navigate.\n\n Pagination is commonly seen on tool landing pages, where we display 150 objects\n or table rows per page.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/demos-pagination--demo)\n\n @see [Design Guidelines](https://design.procore.com/pagination)\n\n */\nexport const Pagination = React.forwardRef<\n HTMLDivElement,\n PresetPaginationProps\n>(function Pagination(\n { activePage = 1, items, onSelectPage = noop, perPage = 50, ...props },\n ref\n) {\n const {\n end,\n isFirst,\n isLast,\n pages,\n selectNext,\n selectPage,\n selectPrev,\n start,\n } = usePagination({\n activePage,\n items,\n onSelectPage,\n perPage,\n })\n\n const i18n = useI18nContext()\n const labelId = useId()\n const selectId = useId()\n\n function formattedNumber(items: number) {\n const formatter = new NumberFormatter({ locale: i18n.locale })\n\n return formatter.formatNumber(items)\n }\n\n return (\n <StyledContainer ref={ref} {...props}>\n <StyledPageCount aria-atomic aria-live=\"polite\" italic color=\"gray45\">\n {i18n.t('core.pagination.notation', {\n end: formattedNumber(end),\n start: formattedNumber(start),\n totalItems: formattedNumber(items || 0),\n })}\n </StyledPageCount>\n <StyledCurrentPage id={labelId}>\n {i18n.t('core.pagination.page')}\n </StyledCurrentPage>\n <PaginationSelect\n activePage={activePage}\n aria-labelledby={`${labelId} ${selectId}`}\n disabled={pages <= 1}\n id={selectId}\n onSelect={selectPage}\n pages={pages}\n />\n <StyledButton\n disabled={isFirst}\n variant=\"tertiary\"\n aria-label={i18n.t('core.pagination.prevPage')}\n icon={<ChevronLeft />}\n onClick={selectPrev}\n />\n <StyledButton\n disabled={isLast}\n variant=\"tertiary\"\n aria-label={i18n.t('core.pagination.nextPage')}\n icon={<ChevronRight />}\n onClick={selectNext}\n />\n </StyledContainer>\n )\n})\n\nPagination.displayName = 'Pagination'\n"],"mappings":"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"}
@@ -5,22 +5,22 @@ import { Typography } from '../Typography/Typography';
5
5
  import { spacing } from '../_styles/spacing';
6
6
  export var StyledContainer = /*#__PURE__*/styled.div.withConfig({
7
7
  displayName: "StyledContainer",
8
- componentId: "core-12_47_1__sc-fy34i1-0"
8
+ componentId: "core-12_48_1__sc-fy34i1-0"
9
9
  })(["display:flex;align-items:center;"]);
10
10
  export var StyledPageCount = /*#__PURE__*/styled(Typography).withConfig({
11
11
  displayName: "StyledPageCount",
12
- componentId: "core-12_47_1__sc-fy34i1-1"
12
+ componentId: "core-12_48_1__sc-fy34i1-1"
13
13
  })(["margin-right:", "px;"], spacing.xl);
14
14
  export var StyledCurrentPage = /*#__PURE__*/styled(Typography).withConfig({
15
15
  displayName: "StyledCurrentPage",
16
- componentId: "core-12_47_1__sc-fy34i1-2"
16
+ componentId: "core-12_48_1__sc-fy34i1-2"
17
17
  })(["margin-right:", "px;"], spacing.sm);
18
18
  export var StyledButton = /*#__PURE__*/styled(Button).withConfig({
19
19
  displayName: "StyledButton",
20
- componentId: "core-12_47_1__sc-fy34i1-3"
20
+ componentId: "core-12_48_1__sc-fy34i1-3"
21
21
  })(["margin-left:", "px;"], spacing.sm);
22
22
  export var StyledOverlay = /*#__PURE__*/styled(Card).withConfig({
23
23
  displayName: "StyledOverlay",
24
- componentId: "core-12_47_1__sc-fy34i1-4"
24
+ componentId: "core-12_48_1__sc-fy34i1-4"
25
25
  })(["min-height:80px;max-height:300px;max-width:248px;"]);
26
26
  //# sourceMappingURL=Pagination.styles.js.map
@@ -38,6 +38,7 @@ var PaginationMenu = /*#__PURE__*/React.forwardRef(function PaginationMenu(_ref,
38
38
  pages = _ref.pages,
39
39
  props = _objectWithoutProperties(_ref, _excluded);
40
40
  var ctx = useOverlayTriggerContext();
41
+ var overlayElRef = React.useRef(null);
41
42
  var lastItemRef = React.useRef(null);
42
43
  var hasFooter = pages > 10;
43
44
  React.useEffect(function () {
@@ -68,6 +69,16 @@ var PaginationMenu = /*#__PURE__*/React.forwardRef(function PaginationMenu(_ref,
68
69
  }
69
70
  }
70
71
  }
72
+
73
+ // Close on Tab
74
+ function onBlur(event) {
75
+ var _overlayElRef$current;
76
+ var newTarget = event.relatedTarget;
77
+ if (newTarget && (_overlayElRef$current = overlayElRef.current) !== null && _overlayElRef$current !== void 0 && _overlayElRef$current.contains(newTarget)) {
78
+ return;
79
+ }
80
+ ctx.hide(event);
81
+ }
71
82
  function onSelect(selection) {
72
83
  onSelect_(selection);
73
84
  ctx.hide(selection.event);
@@ -85,9 +96,10 @@ var PaginationMenu = /*#__PURE__*/React.forwardRef(function PaginationMenu(_ref,
85
96
  maxHeight: maxHeight
86
97
  } : undefined;
87
98
  return /*#__PURE__*/React.createElement(StyledOverlay, {
88
- ref: ref,
99
+ ref: mergeRefs(ref, overlayElRef),
89
100
  shadowStrength: 2,
90
- style: overlayStyle
101
+ style: overlayStyle,
102
+ onBlur: onBlur
91
103
  }, /*#__PURE__*/React.createElement(MenuImperative, _extends({
92
104
  circular: true
93
105
  }, props, {
@@ -170,6 +182,7 @@ export var PaginationSelect = /*#__PURE__*/React.forwardRef(function PaginationS
170
182
  autoFocus: true,
171
183
  afterShow: afterShow,
172
184
  afterHide: afterHide,
185
+ restoreFocusOnHide: "react-aria-focus-scope",
173
186
  overlay: /*#__PURE__*/React.createElement(PaginationMenu, {
174
187
  activePage: activePage,
175
188
  maxHeight: maxHeight,
@@ -1 +1 @@
1
- {"version":3,"file":"PaginationSelect.js","names":["times","React","DropdownButton","MenuImperative","OverlayTrigger","useOverlayTriggerContext","mergeRefs","StyledOverlay","noop","DEFAULT_MAX_HEIGHT","VIEWPORT_PADDING","computeAvailableHeight","triggerEl","rect","getBoundingClientRect","viewportHeight","window","innerHeight","spaceBelow","bottom","spaceAbove","top","availableSpace","Math","max","min","PaginationMenu","forwardRef","_ref","ref","activePage","maxHeight","menuRef","_ref$onSelect","onSelect","onSelect_","pages","props","_objectWithoutProperties","_excluded","ctx","lastItemRef","useRef","hasFooter","useEffect","_menuRef$current","current","highlightFirst","_menuRef$current2","_menuRef$current3","highlightSuggested","highlightSelected","onKeyDown","event","_menuRef$current4","currentPage","highlighted","key","_menuRef$current5","highlight","_menuRef$current6","stopPropagation","highlightLast","selection","hide","children","index","page","createElement","Item","item","selected","overlayStyle","undefined","shadowStrength","style","_extends","circular","Fragment","Options","slice","Footer","padding","length","PaginationSelect","_ref2","_ref2$activePage","ariaLabelledby","disabled","id","_ref2$pages","triggerRef","_React$useState","useState","_React$useState2","_slicedToArray","setMaxHeight","_React$useState3","_React$useState4","isOpen","setIsOpen","handleResize","addEventListener","removeEventListener","afterShow","_menuRef$current7","_menuRef$current7$el","_menuRef$current7$el$","el","firstChild","focus","afterHide","e","_menuRef$current8","preventDefault","prev","_menuRef$current9","next","_menuRef$current0","select","role","passA11yPropsToOverlay","autoFocus","overlay","placement","trigger","arrow","variant"],"sources":["../../src/Pagination/PaginationSelect.tsx"],"sourcesContent":["import { times } from 'ramda'\nimport React from 'react'\nimport { DropdownButton } from '../Dropdown/Dropdown'\nimport { MenuImperative } from '../MenuImperative/MenuImperative'\nimport type { MenuRef, Selection } from '../MenuImperative/MenuImperative.types'\nimport {\n OverlayTrigger,\n useOverlayTriggerContext,\n} from '../OverlayTrigger/OverlayTrigger'\nimport { mergeRefs } from '../_utils/mergeRefs'\nimport { StyledOverlay } from './Pagination.styles'\nimport type { PageSelectProps, PaginationMenuProps } from './Pagination.types'\n\nconst noop = () => {}\n\nconst DEFAULT_MAX_HEIGHT = 300\nconst VIEWPORT_PADDING = 16\n\nfunction computeAvailableHeight(triggerEl: HTMLElement | null): number {\n if (!triggerEl) {\n return DEFAULT_MAX_HEIGHT\n }\n\n const rect = triggerEl.getBoundingClientRect()\n const viewportHeight = window.innerHeight\n\n const spaceBelow = viewportHeight - rect.bottom - VIEWPORT_PADDING\n const spaceAbove = rect.top - VIEWPORT_PADDING\n\n const availableSpace = Math.max(spaceBelow, spaceAbove)\n\n return Math.min(DEFAULT_MAX_HEIGHT, availableSpace)\n}\n\nconst PaginationMenu = React.forwardRef<HTMLDivElement, PaginationMenuProps>(\n function PaginationMenu(\n {\n activePage,\n maxHeight,\n menuRef,\n onSelect: onSelect_ = noop,\n pages,\n ...props\n },\n ref\n ) {\n const ctx = useOverlayTriggerContext()\n\n const lastItemRef = React.useRef<HTMLDivElement>(null)\n\n const hasFooter = pages > 10\n\n React.useEffect(() => {\n menuRef.current?.highlightFirst()\n }, [menuRef])\n\n React.useEffect(() => {\n menuRef.current?.highlightSuggested()\n menuRef.current?.highlightSelected()\n }, [menuRef])\n\n function onKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n const currentPage = menuRef.current?.highlighted()\n\n if (event.key === 'ArrowDown' || event.key === 'Down') {\n // when on the second to last item, want to jump to the last item (in the footer)\n if (currentPage === pages - 1 && lastItemRef.current) {\n menuRef.current?.highlight(lastItemRef.current)\n }\n } else if (event.key === 'ArrowUp' || event.key === 'Up') {\n // on the last item (in the footer), want to jump back to the second to last\n // item back in the menu\n if (hasFooter && currentPage === pages) {\n event.stopPropagation()\n menuRef.current?.highlightLast()\n }\n }\n }\n\n function onSelect(selection: Selection) {\n onSelect_(selection)\n\n ctx.hide(selection.event)\n }\n\n const children = times((index: number) => {\n const page = index + 1\n\n return (\n <MenuImperative.Item\n item={page}\n key={index}\n selected={page === activePage}\n ref={lastItemRef}\n >\n {page}\n </MenuImperative.Item>\n )\n }, pages)\n\n const overlayStyle = maxHeight ? { maxHeight } : undefined\n\n return (\n <StyledOverlay ref={ref} shadowStrength={2} style={overlayStyle}>\n <MenuImperative\n circular\n {...props}\n ref={menuRef}\n onKeyDown={onKeyDown}\n onSelect={onSelect}\n >\n {hasFooter ? (\n <>\n <MenuImperative.Options>\n {children.slice(0, -1)}\n </MenuImperative.Options>\n <MenuImperative.Footer padding=\"xs none\">\n {children[children.length - 1]}\n </MenuImperative.Footer>\n </>\n ) : (\n <MenuImperative.Options>{children}</MenuImperative.Options>\n )}\n </MenuImperative>\n </StyledOverlay>\n )\n }\n)\n\nexport const PaginationSelect = React.forwardRef<\n HTMLButtonElement,\n PageSelectProps\n>(function PaginationSelect(\n {\n activePage = 1,\n [`aria-labelledby`]: ariaLabelledby,\n disabled,\n id,\n onSelect,\n pages = 0,\n ...props\n },\n ref\n) {\n const menuRef = React.useRef<MenuRef>(null)\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const [maxHeight, setMaxHeight] = React.useState<number | undefined>(\n undefined\n )\n const [isOpen, setIsOpen] = React.useState(false)\n\n // Recompute height on viewport resize\n React.useEffect(() => {\n if (!isOpen) return\n\n function handleResize() {\n setMaxHeight(computeAvailableHeight(triggerRef.current))\n }\n\n window.addEventListener('resize', handleResize)\n return () => window.removeEventListener('resize', handleResize)\n }, [isOpen])\n\n // Safari has an issue with giving focus to buttons after clicking on them\n // if the button or menu do not have focus, the keyboard navigation does not work,\n // so just focus the menu when we open it\n function afterShow() {\n // this is brittle, if MenuImperative dom structure changes this could break\n // but super specific to pagination, not really a concern elsewhere\n ;(menuRef.current?.el?.firstChild as HTMLDivElement)?.focus()\n\n // Compute available height\n setIsOpen(true)\n setMaxHeight(computeAvailableHeight(triggerRef.current))\n }\n\n function afterHide() {\n setIsOpen(false)\n setMaxHeight(undefined)\n }\n\n function onKeyDown(e: React.KeyboardEvent<HTMLButtonElement>) {\n if (e.key === 'Up' || e.key === 'ArrowUp') {\n e.preventDefault()\n menuRef.current?.prev()\n } else if (e.key === 'Down' || e.key === 'ArrowDown') {\n e.preventDefault()\n menuRef.current?.next()\n } else if (e.key === 'Enter') {\n e.preventDefault()\n menuRef.current?.select(e)\n }\n }\n\n return (\n <OverlayTrigger\n role=\"listbox\"\n passA11yPropsToOverlay\n autoFocus\n afterShow={afterShow}\n afterHide={afterHide}\n overlay={\n <PaginationMenu\n activePage={activePage}\n maxHeight={maxHeight}\n menuRef={menuRef}\n onSelect={onSelect}\n pages={pages}\n />\n }\n placement=\"bottom-left\"\n ref={mergeRefs(ref, triggerRef)}\n trigger=\"click\"\n {...props}\n >\n <DropdownButton\n aria-labelledby={ariaLabelledby}\n arrow\n disabled={disabled}\n id={id}\n onKeyDown={onKeyDown}\n role=\"combobox\"\n variant=\"tertiary\"\n >\n {activePage}\n </DropdownButton>\n </OverlayTrigger>\n )\n})\n"],"mappings":"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"}
1
+ {"version":3,"file":"PaginationSelect.js","names":["times","React","DropdownButton","MenuImperative","OverlayTrigger","useOverlayTriggerContext","mergeRefs","StyledOverlay","noop","DEFAULT_MAX_HEIGHT","VIEWPORT_PADDING","computeAvailableHeight","triggerEl","rect","getBoundingClientRect","viewportHeight","window","innerHeight","spaceBelow","bottom","spaceAbove","top","availableSpace","Math","max","min","PaginationMenu","forwardRef","_ref","ref","activePage","maxHeight","menuRef","_ref$onSelect","onSelect","onSelect_","pages","props","_objectWithoutProperties","_excluded","ctx","overlayElRef","useRef","lastItemRef","hasFooter","useEffect","_menuRef$current","current","highlightFirst","_menuRef$current2","_menuRef$current3","highlightSuggested","highlightSelected","onKeyDown","event","_menuRef$current4","currentPage","highlighted","key","_menuRef$current5","highlight","_menuRef$current6","stopPropagation","highlightLast","onBlur","_overlayElRef$current","newTarget","relatedTarget","contains","hide","selection","children","index","page","createElement","Item","item","selected","overlayStyle","undefined","shadowStrength","style","_extends","circular","Fragment","Options","slice","Footer","padding","length","PaginationSelect","_ref2","_ref2$activePage","ariaLabelledby","disabled","id","_ref2$pages","triggerRef","_React$useState","useState","_React$useState2","_slicedToArray","setMaxHeight","_React$useState3","_React$useState4","isOpen","setIsOpen","handleResize","addEventListener","removeEventListener","afterShow","_menuRef$current7","_menuRef$current7$el","_menuRef$current7$el$","el","firstChild","focus","afterHide","e","_menuRef$current8","preventDefault","prev","_menuRef$current9","next","_menuRef$current0","select","role","passA11yPropsToOverlay","autoFocus","restoreFocusOnHide","overlay","placement","trigger","arrow","variant"],"sources":["../../src/Pagination/PaginationSelect.tsx"],"sourcesContent":["import { times } from 'ramda'\nimport React from 'react'\nimport { DropdownButton } from '../Dropdown/Dropdown'\nimport { MenuImperative } from '../MenuImperative/MenuImperative'\nimport type { MenuRef, Selection } from '../MenuImperative/MenuImperative.types'\nimport {\n OverlayTrigger,\n useOverlayTriggerContext,\n} from '../OverlayTrigger/OverlayTrigger'\nimport { mergeRefs } from '../_utils/mergeRefs'\nimport { StyledOverlay } from './Pagination.styles'\nimport type { PageSelectProps, PaginationMenuProps } from './Pagination.types'\n\nconst noop = () => {}\n\nconst DEFAULT_MAX_HEIGHT = 300\nconst VIEWPORT_PADDING = 16\n\nfunction computeAvailableHeight(triggerEl: HTMLElement | null): number {\n if (!triggerEl) {\n return DEFAULT_MAX_HEIGHT\n }\n\n const rect = triggerEl.getBoundingClientRect()\n const viewportHeight = window.innerHeight\n\n const spaceBelow = viewportHeight - rect.bottom - VIEWPORT_PADDING\n const spaceAbove = rect.top - VIEWPORT_PADDING\n\n const availableSpace = Math.max(spaceBelow, spaceAbove)\n\n return Math.min(DEFAULT_MAX_HEIGHT, availableSpace)\n}\n\nconst PaginationMenu = React.forwardRef<HTMLDivElement, PaginationMenuProps>(\n function PaginationMenu(\n {\n activePage,\n maxHeight,\n menuRef,\n onSelect: onSelect_ = noop,\n pages,\n ...props\n },\n ref\n ) {\n const ctx = useOverlayTriggerContext()\n\n const overlayElRef = React.useRef<HTMLDivElement>(null)\n const lastItemRef = React.useRef<HTMLDivElement>(null)\n\n const hasFooter = pages > 10\n\n React.useEffect(() => {\n menuRef.current?.highlightFirst()\n }, [menuRef])\n\n React.useEffect(() => {\n menuRef.current?.highlightSuggested()\n menuRef.current?.highlightSelected()\n }, [menuRef])\n\n function onKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n const currentPage = menuRef.current?.highlighted()\n\n if (event.key === 'ArrowDown' || event.key === 'Down') {\n // when on the second to last item, want to jump to the last item (in the footer)\n if (currentPage === pages - 1 && lastItemRef.current) {\n menuRef.current?.highlight(lastItemRef.current)\n }\n } else if (event.key === 'ArrowUp' || event.key === 'Up') {\n // on the last item (in the footer), want to jump back to the second to last\n // item back in the menu\n if (hasFooter && currentPage === pages) {\n event.stopPropagation()\n menuRef.current?.highlightLast()\n }\n }\n }\n\n // Close on Tab\n function onBlur(event: React.FocusEvent<HTMLDivElement>) {\n const newTarget = event.relatedTarget as HTMLElement | null\n if (newTarget && overlayElRef.current?.contains(newTarget)) {\n return\n }\n ctx.hide(event)\n }\n\n function onSelect(selection: Selection) {\n onSelect_(selection)\n\n ctx.hide(selection.event)\n }\n\n const children = times((index: number) => {\n const page = index + 1\n\n return (\n <MenuImperative.Item\n item={page}\n key={index}\n selected={page === activePage}\n ref={lastItemRef}\n >\n {page}\n </MenuImperative.Item>\n )\n }, pages)\n\n const overlayStyle = maxHeight ? { maxHeight } : undefined\n\n return (\n <StyledOverlay\n ref={mergeRefs(ref, overlayElRef)}\n shadowStrength={2}\n style={overlayStyle}\n onBlur={onBlur}\n >\n <MenuImperative\n circular\n {...props}\n ref={menuRef}\n onKeyDown={onKeyDown}\n onSelect={onSelect}\n >\n {hasFooter ? (\n <>\n <MenuImperative.Options>\n {children.slice(0, -1)}\n </MenuImperative.Options>\n <MenuImperative.Footer padding=\"xs none\">\n {children[children.length - 1]}\n </MenuImperative.Footer>\n </>\n ) : (\n <MenuImperative.Options>{children}</MenuImperative.Options>\n )}\n </MenuImperative>\n </StyledOverlay>\n )\n }\n)\n\nexport const PaginationSelect = React.forwardRef<\n HTMLButtonElement,\n PageSelectProps\n>(function PaginationSelect(\n {\n activePage = 1,\n [`aria-labelledby`]: ariaLabelledby,\n disabled,\n id,\n onSelect,\n pages = 0,\n ...props\n },\n ref\n) {\n const menuRef = React.useRef<MenuRef>(null)\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const [maxHeight, setMaxHeight] = React.useState<number | undefined>(\n undefined\n )\n const [isOpen, setIsOpen] = React.useState(false)\n\n // Recompute height on viewport resize\n React.useEffect(() => {\n if (!isOpen) return\n\n function handleResize() {\n setMaxHeight(computeAvailableHeight(triggerRef.current))\n }\n\n window.addEventListener('resize', handleResize)\n return () => window.removeEventListener('resize', handleResize)\n }, [isOpen])\n\n // Safari has an issue with giving focus to buttons after clicking on them\n // if the button or menu do not have focus, the keyboard navigation does not work,\n // so just focus the menu when we open it\n function afterShow() {\n // this is brittle, if MenuImperative dom structure changes this could break\n // but super specific to pagination, not really a concern elsewhere\n ;(menuRef.current?.el?.firstChild as HTMLDivElement)?.focus()\n\n // Compute available height\n setIsOpen(true)\n setMaxHeight(computeAvailableHeight(triggerRef.current))\n }\n\n function afterHide() {\n setIsOpen(false)\n setMaxHeight(undefined)\n }\n\n function onKeyDown(e: React.KeyboardEvent<HTMLButtonElement>) {\n if (e.key === 'Up' || e.key === 'ArrowUp') {\n e.preventDefault()\n menuRef.current?.prev()\n } else if (e.key === 'Down' || e.key === 'ArrowDown') {\n e.preventDefault()\n menuRef.current?.next()\n } else if (e.key === 'Enter') {\n e.preventDefault()\n menuRef.current?.select(e)\n }\n }\n\n return (\n <OverlayTrigger\n role=\"listbox\"\n passA11yPropsToOverlay\n autoFocus\n afterShow={afterShow}\n afterHide={afterHide}\n restoreFocusOnHide=\"react-aria-focus-scope\"\n overlay={\n <PaginationMenu\n activePage={activePage}\n maxHeight={maxHeight}\n menuRef={menuRef}\n onSelect={onSelect}\n pages={pages}\n />\n }\n placement=\"bottom-left\"\n ref={mergeRefs(ref, triggerRef)}\n trigger=\"click\"\n {...props}\n >\n <DropdownButton\n aria-labelledby={ariaLabelledby}\n arrow\n disabled={disabled}\n id={id}\n onKeyDown={onKeyDown}\n role=\"combobox\"\n variant=\"tertiary\"\n >\n {activePage}\n </DropdownButton>\n </OverlayTrigger>\n )\n})\n"],"mappings":"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"}
@@ -11,15 +11,15 @@ var gutter = /*#__PURE__*/css(["> * + *{margin-left:", "px;}"], spacing.sm);
11
11
  var panel = /*#__PURE__*/css(["display:flex;padding:", "px;background:", ";"], spacing.lg, colors.white);
12
12
  export var StyledHeader = /*#__PURE__*/styled.div.withConfig({
13
13
  displayName: "StyledHeader",
14
- componentId: "core-12_47_1__sc-lidix2-0"
14
+ componentId: "core-12_48_1__sc-lidix2-0"
15
15
  })(["border-bottom:1px solid ", ";", ""], colors.gray85, panel);
16
16
  export var StyledTitle = /*#__PURE__*/styled(H2).withConfig({
17
17
  displayName: "StyledTitle",
18
- componentId: "core-12_47_1__sc-lidix2-1"
18
+ componentId: "core-12_48_1__sc-lidix2-1"
19
19
  })(["flex-grow:1;"]);
20
20
  export var StyledHeaderBackAction = /*#__PURE__*/styled.div.withConfig({
21
21
  displayName: "StyledHeaderBackAction",
22
- componentId: "core-12_47_1__sc-lidix2-2"
22
+ componentId: "core-12_48_1__sc-lidix2-2"
23
23
  })(["transition:all 300ms ease-out;flex-shrink:0;width:", "px;margin-right:", "px;opacity:", ";transform:translateX( ", "px );"], function (_ref) {
24
24
  var $active = _ref.$active;
25
25
  return $active ? headerActionSize : 0;
@@ -35,38 +35,38 @@ export var StyledHeaderBackAction = /*#__PURE__*/styled.div.withConfig({
35
35
  });
36
36
  export var StyledMoreMenu = /*#__PURE__*/styled(Card).withConfig({
37
37
  displayName: "StyledMoreMenu",
38
- componentId: "core-12_47_1__sc-lidix2-3"
38
+ componentId: "core-12_48_1__sc-lidix2-3"
39
39
  })(["max-height:128px;"]);
40
40
  export var StyledHeaderActions = /*#__PURE__*/styled.div.withConfig({
41
41
  displayName: "StyledHeaderActions",
42
- componentId: "core-12_47_1__sc-lidix2-4"
42
+ componentId: "core-12_48_1__sc-lidix2-4"
43
43
  })(["display:flex;margin-left:", "px;flex-shrink:0;", ""], spacing.lg, gutter);
44
44
  export var StyledCloseButton = /*#__PURE__*/styled.div.withConfig({
45
45
  displayName: "StyledCloseButton",
46
- componentId: "core-12_47_1__sc-lidix2-5"
46
+ componentId: "core-12_48_1__sc-lidix2-5"
47
47
  })(["margin-left:", "px;"], spacing.sm);
48
48
  export var StyledBody = /*#__PURE__*/styled.div.withConfig({
49
49
  displayName: "StyledBody",
50
- componentId: "core-12_47_1__sc-lidix2-6"
50
+ componentId: "core-12_48_1__sc-lidix2-6"
51
51
  })(["height:100%;background:", ";overflow-y:auto;&:focus-visible{", "}> ", "{padding-left:", "px;padding-right:", "px;", "{padding-left:0;padding-right:0;}&:first-child > ", "{padding-top:", "px;}}"], function (_ref5) {
52
52
  var secondaryBgColor = _ref5.secondaryBgColor;
53
53
  return secondaryBgColor ? colors.gray96 : colors.white;
54
54
  }, getFocusInset(), StyledSection, spacing.lg, spacing.lg, StyledSection, StyledSectionInner, spacing.lg);
55
55
  export var StyledPanel = /*#__PURE__*/styled.aside.withConfig({
56
56
  displayName: "StyledPanel",
57
- componentId: "core-12_47_1__sc-lidix2-7"
57
+ componentId: "core-12_48_1__sc-lidix2-7"
58
58
  })(["display:flex;flex-direction:column;width:100%;height:100%;background:", ";overflow:hidden;"], colors.white);
59
59
  export var StyledFooterNotation = /*#__PURE__*/styled.div.withConfig({
60
60
  displayName: "StyledFooterNotation",
61
- componentId: "core-12_47_1__sc-lidix2-8"
61
+ componentId: "core-12_48_1__sc-lidix2-8"
62
62
  })(["flex-grow:1;"]);
63
63
  export var StyledFooterActions = /*#__PURE__*/styled.div.withConfig({
64
64
  displayName: "StyledFooterActions",
65
- componentId: "core-12_47_1__sc-lidix2-9"
65
+ componentId: "core-12_48_1__sc-lidix2-9"
66
66
  })(["", ""], gutter);
67
67
  export var StyledFooter = /*#__PURE__*/styled.div.withConfig({
68
68
  displayName: "StyledFooter",
69
- componentId: "core-12_47_1__sc-lidix2-10"
69
+ componentId: "core-12_48_1__sc-lidix2-10"
70
70
  })(["border-top:1px solid ", ";justify-content:flex-end;", " ", ""], colors.gray85, panel, function (_ref6) {
71
71
  var $hasShadow = _ref6.$hasShadow;
72
72
  return $hasShadow && css(["box-shadow:0 -4px 6px 0 #0000001a;z-index:1;"]);
@@ -6,18 +6,18 @@ import { PillColorPalets } from './Pill.colorPalette';
6
6
  var pillButtonSize = 16;
7
7
  export var StyledPill = /*#__PURE__*/styled.span.withConfig({
8
8
  displayName: "StyledPill",
9
- componentId: "core-12_47_1__sc-99e1t5-0"
9
+ componentId: "core-12_48_1__sc-99e1t5-0"
10
10
  })(["", " display:inline-block;padding:1px ", "px;border:1px solid;border-radius:10px;font-weight:600;& + &{margin-left:", "px;}", ""], getTypographyIntent('small'), spacing.sm, spacing.xs, function (_ref) {
11
11
  var $color = _ref.$color;
12
12
  return css(["background-color:", ";border-color:", ";color:", ";"], PillColorPalets[$color].backgroundColor, PillColorPalets[$color].borderColor, PillColorPalets[$color].color);
13
13
  });
14
14
  export var StyledRemove = /*#__PURE__*/styled(Clear).withConfig({
15
15
  displayName: "StyledRemove",
16
- componentId: "core-12_47_1__sc-99e1t5-1"
16
+ componentId: "core-12_48_1__sc-99e1t5-1"
17
17
  })(["border-radius:100%;cursor:pointer;flex:0 0 auto;height:", "px;width:", "px;vertical-align:top;"], pillButtonSize, pillButtonSize);
18
18
  export var StyledRemoveButton = /*#__PURE__*/styled.button.withConfig({
19
19
  displayName: "StyledRemoveButton",
20
- componentId: "core-12_47_1__sc-99e1t5-2"
20
+ componentId: "core-12_48_1__sc-99e1t5-2"
21
21
  })(["border:0;padding:0;border-radius:100%;margin:0 -", "px 0 ", "px;color:inherit;", ""], pillButtonSize / 2 - spacing.xxs, spacing.xxs, function (_ref2) {
22
22
  var $color = _ref2.$color;
23
23
  return css(["&:hover{background:", ";color:", ";}"], PillColorPalets[$color].color, PillColorPalets[$color].backgroundColor);
@@ -6,19 +6,19 @@ import { spacing } from '../_styles/spacing';
6
6
  var checkedIconPlaceholderWidth = 32;
7
7
  export var PillSelectOptionWrapper = /*#__PURE__*/styled.div.withConfig({
8
8
  displayName: "PillSelectOptionWrapper",
9
- componentId: "core-12_47_1__sc-1ai2ze0-0"
9
+ componentId: "core-12_48_1__sc-1ai2ze0-0"
10
10
  })(["display:flex;align-items:center;justify-content:space-between;"]);
11
11
  export var PillSelectCheckedContainer = /*#__PURE__*/styled.div.withConfig({
12
12
  displayName: "PillSelectCheckedContainer",
13
- componentId: "core-12_47_1__sc-1ai2ze0-1"
13
+ componentId: "core-12_48_1__sc-1ai2ze0-1"
14
14
  })(["align-items:center;color:", ";display:inline-flex;padding-left:", "px;width:", "px;"], colors.blue50, spacing.sm, checkedIconPlaceholderWidth);
15
15
  export var PillSelectLabel = /*#__PURE__*/styled(Pill).withConfig({
16
16
  displayName: "PillSelectLabel",
17
- componentId: "core-12_47_1__sc-1ai2ze0-2"
17
+ componentId: "core-12_48_1__sc-1ai2ze0-2"
18
18
  })(["", ""], getEllipsis);
19
19
  export var PillSelectLabelWrapper = /*#__PURE__*/styled.div.withConfig({
20
20
  displayName: "PillSelectLabelWrapper",
21
- componentId: "core-12_47_1__sc-1ai2ze0-3"
21
+ componentId: "core-12_48_1__sc-1ai2ze0-3"
22
22
  })(["display:flex;max-width:100%;pointer-events:auto;", ""], function (_ref) {
23
23
  var disabled = _ref.disabled;
24
24
  return disabled && css(["pointer-events:none;"]);
@@ -35,8 +35,7 @@ function PopoverInner(_ref2, ref) {
35
35
  var children = _ref2.children,
36
36
  _ref2$initialIsVisibl = _ref2.initialIsVisible,
37
37
  initialIsVisible = _ref2$initialIsVisibl === void 0 ? false : _ref2$initialIsVisibl,
38
- _ref2$restoreFocusOnH = _ref2.restoreFocusOnHide,
39
- restoreFocusOnHide = _ref2$restoreFocusOnH === void 0 ? false : _ref2$restoreFocusOnH,
38
+ restoreFocusOnHide = _ref2.restoreFocusOnHide,
40
39
  _ref2$placement = _ref2.placement,
41
40
  placement = _ref2$placement === void 0 ? 'top' : _ref2$placement,
42
41
  overlay = _ref2.overlay,
@@ -52,7 +51,7 @@ function PopoverInner(_ref2, ref) {
52
51
  placement: placement,
53
52
  role: role,
54
53
  ref: ref,
55
- restoreFocusOnHide: restoreFocusOnHide,
54
+ restoreFocusOnHide: restoreFocusOnHide !== null && restoreFocusOnHide !== void 0 ? restoreFocusOnHide : role === 'dialog',
56
55
  shrinkOverlay: true,
57
56
  arrow: true,
58
57
  overlayRef: overlayRef,
@@ -1 +1 @@
1
- {"version":3,"file":"Popover.js","names":["React","OverlayTrigger","addSubcomponents","isReactElement","StyledPopover","StyledPopoverContent","Content","forwardRef","_ref","ref","children","_ref$block","block","_ref$fluid","fluid","_ref$placement","placement","props","_objectWithoutProperties","_excluded","createElement","_extends","$block","$fluid","$placement","PopoverInner","_ref2","_ref2$initialIsVisibl","initialIsVisible","_ref2$restoreFocusOnH","restoreFocusOnHide","_ref2$placement","overlay","overlayRef","role","_excluded2","overlayNode","cloneElement","Fragment","_objectSpread","shrinkOverlay","arrow","trackAriaExpanded","Popover_","displayName","Popover"],"sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import React from 'react'\nimport { OverlayTrigger } from '../OverlayTrigger/OverlayTrigger'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport { isReactElement } from '../_utils/isReactElement'\nimport { StyledPopover, StyledPopoverContent } from './Popover.styles'\nimport type {\n PopoverContentProps,\n PopoverProps,\n PopoverRole,\n} from './Popover.types'\n\nconst Content = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement> & PopoverContentProps\n>(function Content(\n { children, block = false, fluid = false, placement = 'top', ...props },\n ref\n) {\n return (\n <StyledPopover ref={ref}>\n <StyledPopoverContent\n {...props}\n $block={block}\n $fluid={fluid}\n $placement={placement}\n >\n {children}\n </StyledPopoverContent>\n </StyledPopover>\n )\n})\n\nfunction PopoverInner<Role extends PopoverRole>(\n {\n children,\n initialIsVisible = false,\n restoreFocusOnHide = false,\n placement = 'top',\n overlay,\n overlayRef,\n role,\n ...props\n }: PopoverProps<Role>,\n ref: React.ForwardedRef<HTMLElement>\n) {\n const overlayNode = isReactElement(overlay) ? (\n React.cloneElement(overlay, { placement })\n ) : (\n <React.Fragment />\n )\n\n return (\n <OverlayTrigger\n {...{\n ...props,\n initialIsVisible,\n overlay: overlayNode,\n placement,\n role,\n ref,\n restoreFocusOnHide,\n shrinkOverlay: true,\n arrow: true,\n overlayRef,\n trackAriaExpanded: true,\n }}\n >\n {children}\n </OverlayTrigger>\n )\n}\n\nconst Popover_ = React.forwardRef(PopoverInner) as <Role extends PopoverRole>(\n props: PopoverProps<Role>\n) => ReturnType<typeof PopoverInner>\n\n// @ts-expect-error\nPopover_.displayName = 'Popover'\n\nContent.displayName = 'Popover.Content'\n\n/**\n\n We use popovers to display more of an item’s information or details on hover.\n This may be used to show additional fields in an item’s form that aren’t shown\n by default in the UI. Oftentimes, there will be a visual queue to indicate that\n more information is available.\n\n Do not use popovers to display large amounts of information, perform data\n entry, or use as a replacement for an overflow, menu, or modal.\n\n If you want to show descriptive / educational information about an item,\n use a tooltip.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-popover--demo)\n\n @see [Design Guidelines](https://design.procore.com/popover)\n\n*/\nexport const Popover = addSubcomponents({ Content }, Popover_)\n"],"mappings":"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"}
1
+ {"version":3,"file":"Popover.js","names":["React","OverlayTrigger","addSubcomponents","isReactElement","StyledPopover","StyledPopoverContent","Content","forwardRef","_ref","ref","children","_ref$block","block","_ref$fluid","fluid","_ref$placement","placement","props","_objectWithoutProperties","_excluded","createElement","_extends","$block","$fluid","$placement","PopoverInner","_ref2","_ref2$initialIsVisibl","initialIsVisible","restoreFocusOnHide","_ref2$placement","overlay","overlayRef","role","_excluded2","overlayNode","cloneElement","Fragment","_objectSpread","shrinkOverlay","arrow","trackAriaExpanded","Popover_","displayName","Popover"],"sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import React from 'react'\nimport { OverlayTrigger } from '../OverlayTrigger/OverlayTrigger'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport { isReactElement } from '../_utils/isReactElement'\nimport { StyledPopover, StyledPopoverContent } from './Popover.styles'\nimport type {\n PopoverContentProps,\n PopoverProps,\n PopoverRole,\n} from './Popover.types'\n\nconst Content = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement> & PopoverContentProps\n>(function Content(\n { children, block = false, fluid = false, placement = 'top', ...props },\n ref\n) {\n return (\n <StyledPopover ref={ref}>\n <StyledPopoverContent\n {...props}\n $block={block}\n $fluid={fluid}\n $placement={placement}\n >\n {children}\n </StyledPopoverContent>\n </StyledPopover>\n )\n})\n\nfunction PopoverInner<Role extends PopoverRole>(\n {\n children,\n initialIsVisible = false,\n restoreFocusOnHide,\n placement = 'top',\n overlay,\n overlayRef,\n role,\n ...props\n }: PopoverProps<Role>,\n ref: React.ForwardedRef<HTMLElement>\n) {\n const overlayNode = isReactElement(overlay) ? (\n React.cloneElement(overlay, { placement })\n ) : (\n <React.Fragment />\n )\n\n return (\n <OverlayTrigger\n {...{\n ...props,\n initialIsVisible,\n overlay: overlayNode,\n placement,\n role,\n ref,\n restoreFocusOnHide: restoreFocusOnHide ?? role === 'dialog',\n shrinkOverlay: true,\n arrow: true,\n overlayRef,\n trackAriaExpanded: true,\n }}\n >\n {children}\n </OverlayTrigger>\n )\n}\n\nconst Popover_ = React.forwardRef(PopoverInner) as <Role extends PopoverRole>(\n props: PopoverProps<Role>\n) => ReturnType<typeof PopoverInner>\n\n// @ts-expect-error\nPopover_.displayName = 'Popover'\n\nContent.displayName = 'Popover.Content'\n\n/**\n\n We use popovers to display more of an item’s information or details on hover.\n This may be used to show additional fields in an item’s form that aren’t shown\n by default in the UI. Oftentimes, there will be a visual queue to indicate that\n more information is available.\n\n Do not use popovers to display large amounts of information, perform data\n entry, or use as a replacement for an overflow, menu, or modal.\n\n If you want to show descriptive / educational information about an item,\n use a tooltip.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-popover--demo)\n\n @see [Design Guidelines](https://design.procore.com/popover)\n\n*/\nexport const Popover = addSubcomponents({ Content }, Popover_)\n"],"mappings":"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"}
@@ -5,7 +5,7 @@ import { getShadow } from '../_styles/shadows';
5
5
  export var popoverArrowSize = 6;
6
6
  export var StyledPopoverContent = /*#__PURE__*/styled.span.withConfig({
7
7
  displayName: "StyledPopoverContent",
8
- componentId: "core-12_47_1__sc-1cd0ihn-0"
8
+ componentId: "core-12_48_1__sc-1cd0ihn-0"
9
9
  })(["background-color:", ";border-radius:inherit;color:", ";display:inline-block;max-width:250px;position:relative;", ""], colors.white, colors.gray15, function (_ref) {
10
10
  var $block = _ref.$block,
11
11
  $fluid = _ref.$fluid;
@@ -15,6 +15,6 @@ export var StyledPopoverContent = /*#__PURE__*/styled.span.withConfig({
15
15
  });
16
16
  export var StyledPopover = /*#__PURE__*/styled.div.withConfig({
17
17
  displayName: "StyledPopover",
18
- componentId: "core-12_47_1__sc-1cd0ihn-1"
18
+ componentId: "core-12_48_1__sc-1cd0ihn-1"
19
19
  })(["display:inline-block;border-radius:", "px;", " & + [data-overlay-arrow]{background:", ";}"], borderRadius.md, getShadow(3), colors.white);
20
20
  //# sourceMappingURL=Popover.styles.js.map
@@ -42,9 +42,10 @@ export interface PopoverBaseProps<Role extends PopoverRole = undefined> extends
42
42
  */
43
43
  placement?: Placement;
44
44
  /**
45
- * Return focus to trigger after the closing popover modal dialog
46
- * @a11y Should be set to true.
47
- * @defaultValue false
45
+ * Return focus to the trigger after the Popover closes.
46
+ * @a11y Required for `role="dialog"` (WCAG 2.4.3). Defaults to `true` when
47
+ * `role="dialog"`, `false` otherwise. Override only with intent.
48
+ * @defaultValue `true` when `role="dialog"`, otherwise `false`
48
49
  * @since 11.8.0
49
50
  */
50
51
  restoreFocusOnHide?: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"Popover.types.js","names":[],"sources":["../../src/Popover/Popover.types.ts"],"sourcesContent":["import type { OverlayTriggerRef } from '../OverlayTrigger/OverlayTrigger.types'\nimport type { BeforeCallback } from '../_hooks/DelayedCallback'\nimport type { TriggerConfig } from '../_hooks/Trigger'\nimport type { Placement } from '../_utils/placement'\nimport type { AriaLabelled, Props } from '../_utils/types'\n\nexport interface PopoverContentProps {\n /**\n * @since 12.18.0\n * */\n block?: boolean\n /**\n * @since 10.19.0\n * @deprecatedSince 12.18.0\n * @deprecated Use `block` as a drop-in replacement\n */\n fluid?: boolean\n /**\n * @since 10.19.0\n */\n placement?: Placement\n}\n\nexport type PopoverRole = 'dialog' | undefined\n\nexport interface PopoverBaseProps<Role extends PopoverRole = undefined>\n extends Props {\n /**\n * Whether to show the overlay on initial render\n * @defaultValue false\n * @since 10.19.0\n */\n initialIsVisible?: boolean\n /**\n * The tip we want to display\n * @since 10.19.0\n */\n overlay?: React.ReactElement<{ placement?: Placement }>\n /**\n * Determines the position of the arrow\n * @defaultValue top\n * @since 10.19.0\n */\n placement?: Placement\n /**\n * Return focus to trigger after the closing popover modal dialog\n * @a11y Should be set to true.\n * @defaultValue false\n * @since 11.8.0\n */\n restoreFocusOnHide?: boolean\n /**\n * The event to trigger the overlay\n * @defaultValue click\n * @since 10.19.0\n */\n trigger?: TriggerConfig['trigger']\n\n /**\n * Toggles overlay visibility\n * @since 11.2.0\n */\n overlayRef?: React.Ref<OverlayTriggerRef>\n /**\n * @since 11.11.0\n */\n role?: Role\n\n /**\n * The callback to run before the overlay is hidden. Returning\n * `false` will prevent hiding.\n * ```\n * (e: event) => boolean | Promise | undefined\n * ```\n * @since 11.15.0\n */\n beforeHide?: BeforeCallback\n\n /**\n * The callback to run before the overlay is shown. Returning\n * `false` will prevent showing.\n * ```\n * (e: event) => boolean | Promise | undefined\n * ```\n * @since 11.15.0\n */\n beforeShow?: BeforeCallback\n}\n\nexport type PopoverProps<Role extends PopoverRole = undefined> =\n Role extends 'dialog'\n ? AriaLabelled<PopoverBaseProps<'dialog'>>\n : PopoverBaseProps<undefined>\n"],"mappings":""}
1
+ {"version":3,"file":"Popover.types.js","names":[],"sources":["../../src/Popover/Popover.types.ts"],"sourcesContent":["import type { OverlayTriggerRef } from '../OverlayTrigger/OverlayTrigger.types'\nimport type { BeforeCallback } from '../_hooks/DelayedCallback'\nimport type { TriggerConfig } from '../_hooks/Trigger'\nimport type { Placement } from '../_utils/placement'\nimport type { AriaLabelled, Props } from '../_utils/types'\n\nexport interface PopoverContentProps {\n /**\n * @since 12.18.0\n * */\n block?: boolean\n /**\n * @since 10.19.0\n * @deprecatedSince 12.18.0\n * @deprecated Use `block` as a drop-in replacement\n */\n fluid?: boolean\n /**\n * @since 10.19.0\n */\n placement?: Placement\n}\n\nexport type PopoverRole = 'dialog' | undefined\n\nexport interface PopoverBaseProps<Role extends PopoverRole = undefined>\n extends Props {\n /**\n * Whether to show the overlay on initial render\n * @defaultValue false\n * @since 10.19.0\n */\n initialIsVisible?: boolean\n /**\n * The tip we want to display\n * @since 10.19.0\n */\n overlay?: React.ReactElement<{ placement?: Placement }>\n /**\n * Determines the position of the arrow\n * @defaultValue top\n * @since 10.19.0\n */\n placement?: Placement\n /**\n * Return focus to the trigger after the Popover closes.\n * @a11y Required for `role=\"dialog\"` (WCAG 2.4.3). Defaults to `true` when\n * `role=\"dialog\"`, `false` otherwise. Override only with intent.\n * @defaultValue `true` when `role=\"dialog\"`, otherwise `false`\n * @since 11.8.0\n */\n restoreFocusOnHide?: boolean\n /**\n * The event to trigger the overlay\n * @defaultValue click\n * @since 10.19.0\n */\n trigger?: TriggerConfig['trigger']\n\n /**\n * Toggles overlay visibility\n * @since 11.2.0\n */\n overlayRef?: React.Ref<OverlayTriggerRef>\n /**\n * @since 11.11.0\n */\n role?: Role\n\n /**\n * The callback to run before the overlay is hidden. Returning\n * `false` will prevent hiding.\n * ```\n * (e: event) => boolean | Promise | undefined\n * ```\n * @since 11.15.0\n */\n beforeHide?: BeforeCallback\n\n /**\n * The callback to run before the overlay is shown. Returning\n * `false` will prevent showing.\n * ```\n * (e: event) => boolean | Promise | undefined\n * ```\n * @since 11.15.0\n */\n beforeShow?: BeforeCallback\n}\n\nexport type PopoverProps<Role extends PopoverRole = undefined> =\n Role extends 'dialog'\n ? AriaLabelled<PopoverBaseProps<'dialog'>>\n : PopoverBaseProps<undefined>\n"],"mappings":""}
@@ -1,6 +1,6 @@
1
1
  import styled from 'styled-components';
2
2
  export var StyledPortal = /*#__PURE__*/styled.div.withConfig({
3
3
  displayName: "StyledPortal",
4
- componentId: "core-12_47_1__sc-15o1h2-0"
4
+ componentId: "core-12_48_1__sc-15o1h2-0"
5
5
  })(["left:0;pointer-events:none;position:fixed;top:0;> *{pointer-events:all;}"]);
6
6
  //# sourceMappingURL=Portal.styles.js.map
@@ -7,11 +7,11 @@ var animationDelay = '300ms';
7
7
  var fadeIn = /*#__PURE__*/keyframes(["from{opacity:1;}to{opacity:0;}"]);
8
8
  export var StyledProgressBarLoader = /*#__PURE__*/styled(Loader).withConfig({
9
9
  displayName: "StyledProgressBarLoader",
10
- componentId: "core-12_47_1__sc-vdy2wl-0"
10
+ componentId: "core-12_48_1__sc-vdy2wl-0"
11
11
  })([""]);
12
12
  export var StyledProgressBar = /*#__PURE__*/styled.div.withConfig({
13
13
  displayName: "StyledProgressBar",
14
- componentId: "core-12_47_1__sc-vdy2wl-1"
14
+ componentId: "core-12_48_1__sc-vdy2wl-1"
15
15
  })(["background-color:", ";border-radius:", "px;border:1px solid ", ";display:block;height:", "px;margin:", "px 0;overflow:hidden;position:relative;transition:background-color 0s linear;", " ", ";"], function (_ref) {
16
16
  var $complete = _ref.$complete;
17
17
  return $complete ? colors.blue50 : colors.gray94;
@@ -9,7 +9,7 @@ export var dataQa = {
9
9
  var radioButtonSize = 20;
10
10
  export var StyledRadioButton = /*#__PURE__*/styled.label.withConfig({
11
11
  displayName: "StyledRadioButton",
12
- componentId: "core-12_47_1__sc-nd95zs-0"
12
+ componentId: "core-12_48_1__sc-nd95zs-0"
13
13
  })(["color:", ";display:flex;position:relative;vertical-align:middle;& + &{margin-top:", "px;}", " ", ""], colors.gray15, spacing.md, function (_ref) {
14
14
  var $error = _ref.$error;
15
15
  return $error && css(["", ":before,", ":checked:not(:disabled) + ", ":before{border-color:", ";}", ":checked:disabled + ", ":before{border-color:", ";}"], StyledRadioButtonLabel, StyledRadioButtonInput, StyledRadioButtonLabel, colors.red50, StyledRadioButtonInput, StyledRadioButtonLabel, colors.gray85);
@@ -19,10 +19,10 @@ export var StyledRadioButton = /*#__PURE__*/styled.label.withConfig({
19
19
  });
20
20
  export var StyledRadioButtonLabel = /*#__PURE__*/styled.span.withConfig({
21
21
  displayName: "StyledRadioButtonLabel",
22
- componentId: "core-12_47_1__sc-nd95zs-1"
22
+ componentId: "core-12_48_1__sc-nd95zs-1"
23
23
  })(["", ";cursor:default;display:flex;&:before{background:", ";border-radius:100%;border:2px solid ", ";content:'';display:inline-block;flex:0;height:", "px;min-width:", "px;width:", "px;}"], getTypographyIntent('body'), colors.white, colors.gray50, radioButtonSize, radioButtonSize, radioButtonSize);
24
24
  export var StyledRadioButtonInput = /*#__PURE__*/styled.input.withConfig({
25
25
  displayName: "StyledRadioButtonInput",
26
- componentId: "core-12_47_1__sc-nd95zs-2"
26
+ componentId: "core-12_48_1__sc-nd95zs-2"
27
27
  })(["left:0;margin:0;opacity:0;padding:0;position:absolute;top:0;&:focus:not(:checked),&[data-qa=", "]:not(:checked){&:not(:disabled) + ", ":before{", "}}&:focus:checked:not(:disabled),&[data-qa=", "]:checked:not(:disabled){+ ", ":before{box-shadow:0 0 0 2px ", ";}}&:checked + ", ":before{border:6px solid ", ";}&:disabled + ", ":before{border-color:", ";}&:disabled:checked + ", ":before{border-color:", ";}"], dataQa.focused, StyledRadioButtonLabel, getFocus(), dataQa.focused, StyledRadioButtonLabel, colors.blue40, StyledRadioButtonLabel, colors.blue50, StyledRadioButtonLabel, colors.gray85, StyledRadioButtonLabel, colors.blue85);
28
28
  //# sourceMappingURL=RadioButton.styles.js.map
@@ -5,7 +5,7 @@ import { colors } from '../_styles/colors';
5
5
  import { spacing } from '../_styles/spacing';
6
6
  export var StyledRequiredMark = /*#__PURE__*/styled.span.withConfig({
7
7
  displayName: "StyledRequiredMark",
8
- componentId: "core-12_47_1__sc-bja1ql-0"
8
+ componentId: "core-12_48_1__sc-bja1ql-0"
9
9
  })(["color:", ";", ""], colors.red50, function (_ref) {
10
10
  var $showLabel = _ref.$showLabel;
11
11
  if ($showLabel) {
@@ -15,10 +15,10 @@ export var StyledRequiredMark = /*#__PURE__*/styled.span.withConfig({
15
15
  });
16
16
  export var StyledRequiredContainer = /*#__PURE__*/styled.span.withConfig({
17
17
  displayName: "StyledRequiredContainer",
18
- componentId: "core-12_47_1__sc-bja1ql-1"
18
+ componentId: "core-12_48_1__sc-bja1ql-1"
19
19
  })(["", " ", " > &{margin-left:", "px;}"], getTypographyIntent('small'), StyledCheckboxLabel, spacing.xs);
20
20
  export var StyledRequiredText = /*#__PURE__*/styled.span.withConfig({
21
21
  displayName: "StyledRequiredText",
22
- componentId: "core-12_47_1__sc-bja1ql-2"
22
+ componentId: "core-12_48_1__sc-bja1ql-2"
23
23
  })(["font-style:italic;color:", ";margin-left:4px;"], colors.gray45);
24
24
  //# sourceMappingURL=Required.styles.js.map
@@ -33,22 +33,22 @@ export function getSearchInputStyles() {
33
33
  }
34
34
  export var StyledInput = /*#__PURE__*/styled.input.withConfig({
35
35
  displayName: "StyledInput",
36
- componentId: "core-12_47_1__sc-3j8khv-0"
36
+ componentId: "core-12_48_1__sc-3j8khv-0"
37
37
  })(["", ""], getSearchInputStyles);
38
38
  var StyledButton = /*#__PURE__*/styled(Button).withConfig({
39
39
  displayName: "StyledButton",
40
- componentId: "core-12_47_1__sc-3j8khv-1"
40
+ componentId: "core-12_48_1__sc-3j8khv-1"
41
41
  })(["position:absolute;top:", "px;"], buttonTop);
42
42
  export var StyledSearchButton = /*#__PURE__*/styled(StyledButton).withConfig({
43
43
  displayName: "StyledSearchButton",
44
- componentId: "core-12_47_1__sc-3j8khv-2"
44
+ componentId: "core-12_48_1__sc-3j8khv-2"
45
45
  })([""]);
46
46
  export var StyledClearButton = /*#__PURE__*/styled(StyledButton).withConfig({
47
47
  displayName: "StyledClearButton",
48
- componentId: "core-12_47_1__sc-3j8khv-3"
48
+ componentId: "core-12_48_1__sc-3j8khv-3"
49
49
  })([""]);
50
50
  export var StyledSearch = /*#__PURE__*/styled.div.withConfig({
51
51
  displayName: "StyledSearch",
52
- componentId: "core-12_47_1__sc-3j8khv-4"
52
+ componentId: "core-12_48_1__sc-3j8khv-4"
53
53
  })(["position:relative;width:100%;", "{padding-right:", "px;}", "{right:", "px;}", "{right:", "px;}"], StyledInput, inputRight, StyledSearchButton, searchRight, StyledClearButton, clearRight);
54
54
  //# sourceMappingURL=Search.styles.js.map