@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.
- package/CHANGELOG.md +24 -0
- package/dist/AnchorNavigation/AnchorNavigation.styles.js +4 -4
- package/dist/Avatar/Avatar.styles.js +5 -5
- package/dist/AvatarStack/AvatarStack.styles.js +7 -7
- package/dist/Badge/Badge.styles.js +2 -2
- package/dist/BadgePill/BadgePill.styles.js +4 -4
- package/dist/Banner/Banner.styles.js +10 -10
- package/dist/Box/Box.styles.js +1 -1
- package/dist/Breadcrumbs/Breadcrumbs.styles.js +4 -4
- package/dist/Button/Button.styles.js +5 -5
- package/dist/Calendar/Calendar.styles.js +9 -9
- package/dist/Card/Card.styles.js +1 -1
- package/dist/Checkbox/Checkbox.styles.js +6 -6
- package/dist/CheckboxGroup/CheckboxGroup.js +9 -3
- package/dist/CheckboxGroup/CheckboxGroup.js.map +1 -1
- package/dist/CheckboxGroup/checkboxGroupTileNavigation.d.ts +12 -0
- package/dist/CheckboxGroup/checkboxGroupTileNavigation.js +224 -0
- package/dist/CheckboxGroup/checkboxGroupTileNavigation.js.map +1 -0
- package/dist/ContactItem/ContactItem.styles.js +5 -5
- package/dist/Content/Content.styles.js +2 -2
- package/dist/DateInput/DateInput.styles.js +6 -6
- package/dist/DateSelect/DateSelect.js +5 -4
- package/dist/DateSelect/DateSelect.js.map +1 -1
- package/dist/DateSelect/DateSelect.types.d.ts +1 -1
- package/dist/DateSelect/DateSelect.types.js.map +1 -1
- package/dist/DetailPage/DetailPage.styles.js +7 -7
- package/dist/Dropdown/Dropdown.styles.js +3 -3
- package/dist/DropdownFlyout/DropdownFlyout.styles.js +4 -4
- package/dist/Dropzone/Dropzone.js +1 -1
- package/dist/Dropzone/Dropzone.styles.js +9 -9
- package/dist/EmptyState/EmptyState.styles.js +6 -6
- package/dist/Field/Field.styles.js +3 -3
- package/dist/FileList/FileList.js +4 -0
- package/dist/FileList/FileList.js.map +1 -1
- package/dist/FileList/FileList.styles.js +3 -3
- package/dist/FileList/storybook/fileListMockData.js +14 -14
- package/dist/FileList/storybook/fileListMockData.js.map +1 -1
- package/dist/FileSelect/FileExplorer/FileExplorer.styles.js +9 -9
- package/dist/FileSelect/FileExplorer/FileExplorerSidebar.styles.js +3 -3
- package/dist/FileSelect/FileSelect.styles.js +2 -2
- package/dist/FileSelect/FileSelectDropzone/FileSelectDropzone.styles.js +3 -3
- package/dist/FileSelect/FileTokenList/FileTokenList.styles.js +2 -2
- package/dist/FileSelect/GridSource/GridSource.styles.js +6 -6
- package/dist/FileSelect/LocalSource/LocalSource.styles.js +4 -4
- package/dist/FileSelect/SourceItem/SourceItem.styles.js +3 -3
- package/dist/FileSelect/ThumbnailList/ThumbnailList.styles.js +6 -6
- package/dist/FileSelect/TreeSource/TreeSource.styles.js +1 -1
- package/dist/FileToken/FileToken.styles.js +6 -6
- package/dist/FilterToken/FilterToken.styles.js +5 -5
- package/dist/FlexList/FlexList.styles.js +1 -1
- package/dist/Form/Form.styles.js +13 -13
- package/dist/Form/StyledFormikForm.styles.js +2 -2
- package/dist/GhostPlaceholder/GhostPlaceholder.styles.js +2 -2
- package/dist/Grid/Grid.styles.js +2 -2
- package/dist/GroupSelect/GroupSelect.styles.js +1 -1
- package/dist/Input/Input.styles.js +1 -1
- package/dist/Link/Link.styles.js +1 -1
- package/dist/ListPage/ListPage.styles.js +8 -8
- package/dist/Loader/Loader.styles.js +2 -2
- package/dist/MenuImperative/MenuImperative.styles.js +11 -11
- package/dist/Modal/Modal.styles.js +13 -13
- package/dist/MultiSelect/MultiSelect.styles.js +8 -8
- package/dist/NextMenu/NextMenu.styles.js +3 -3
- package/dist/NextTile/NextTile.d.ts +24 -0
- package/dist/NextTile/NextTile.js +275 -90
- package/dist/NextTile/NextTile.js.map +1 -1
- package/dist/NextTile/NextTile.styles.d.ts +16 -0
- package/dist/NextTile/NextTile.styles.js +136 -0
- package/dist/NextTile/NextTile.styles.js.map +1 -0
- package/dist/NextTile/NextTile.types.d.ts +14 -2
- package/dist/NextTile/NextTile.types.js.map +1 -1
- package/dist/Notation/Notation.js +1 -1
- package/dist/NumberInput/NumberInput.styles.js +7 -7
- package/dist/Overlay/OverlayArrow.styles.js +1 -1
- package/dist/PageLayout/PageLayout.styles.js +16 -16
- package/dist/PageTemplate/PageFooterTemplate/PageFooterTemplate.styles.js +1 -1
- package/dist/PageTemplate/PageHeaderTemplate/PageHeaderTemplate.styles.js +3 -3
- package/dist/PageTemplate/PagePaneTemplate/PagePaneTemplate.styles.js +2 -2
- package/dist/PageTemplate/PageTemplate/PageTemplate.styles.js +3 -3
- package/dist/Pagination/Pagination.js +2 -1
- package/dist/Pagination/Pagination.js.map +1 -1
- package/dist/Pagination/Pagination.styles.js +5 -5
- package/dist/Pagination/PaginationSelect.js +15 -2
- package/dist/Pagination/PaginationSelect.js.map +1 -1
- package/dist/Panel/Panel.styles.js +11 -11
- package/dist/Pill/Pill.styles.js +3 -3
- package/dist/PillSelect/PillSelect.styles.js +4 -4
- package/dist/Popover/Popover.js +2 -3
- package/dist/Popover/Popover.js.map +1 -1
- package/dist/Popover/Popover.styles.js +2 -2
- package/dist/Popover/Popover.types.d.ts +4 -3
- package/dist/Popover/Popover.types.js.map +1 -1
- package/dist/Portal/Portal.styles.js +1 -1
- package/dist/ProgressBar/ProgressBar.styles.js +2 -2
- package/dist/RadioButton/RadioButton.styles.js +3 -3
- package/dist/Required/Required.styles.js +3 -3
- package/dist/Search/Search.styles.js +5 -5
- package/dist/Section/Section.styles.js +7 -7
- package/dist/SegmentedController/SegmentedController.styles.js +4 -4
- package/dist/Select/Select.styles.js +8 -8
- package/dist/Semantic/Semantic.styles.js +9 -9
- package/dist/Slider/Slider.styles.js +5 -5
- package/dist/Spinner/Spinner.styles.js +8 -8
- package/dist/Spinner/Spinner.styles.js.map +1 -1
- package/dist/SplitViewCard/SplitViewCard.styles.js +8 -8
- package/dist/SuperSelect/SuperSelect.presets.styles.js +1 -1
- package/dist/SuperSelect/SuperSelect.styles.js +40 -40
- package/dist/Switch/Switch.styles.js +4 -4
- package/dist/Table/Table.styles.js +29 -29
- package/dist/TableShelf/TableShelf.styles.js +5 -5
- package/dist/Tabs/Tabs.styles.js +16 -16
- package/dist/Tearsheet/Tearsheet.styles.js +5 -5
- package/dist/TextArea/TextArea.styles.js +1 -1
- package/dist/TextEditorOutput/TextEditorOutput.styles.js +1 -1
- package/dist/Thumbnail/Thumbnail.hooks.d.ts +13 -7
- package/dist/Thumbnail/Thumbnail.hooks.js +15 -5
- package/dist/Thumbnail/Thumbnail.hooks.js.map +1 -1
- package/dist/Thumbnail/Thumbnail.js +8 -4
- package/dist/Thumbnail/Thumbnail.js.map +1 -1
- package/dist/Thumbnail/Thumbnail.styles.d.ts +13 -5
- package/dist/Thumbnail/Thumbnail.styles.js +42 -24
- package/dist/Thumbnail/Thumbnail.styles.js.map +1 -1
- package/dist/Thumbnail/Thumbnail.types.d.ts +12 -10
- package/dist/Thumbnail/Thumbnail.types.js.map +1 -1
- package/dist/Thumbnail/Thumbnail.utils.d.ts +1 -0
- package/dist/Thumbnail/Thumbnail.utils.js +7 -0
- package/dist/Thumbnail/Thumbnail.utils.js.map +1 -1
- package/dist/Thumbnail/ThumbnailCaption.js +85 -40
- package/dist/Thumbnail/ThumbnailCaption.js.map +1 -1
- package/dist/ThumbnailGrid/ThumbnailGrid.styles.js +7 -7
- package/dist/TieredSelect/TieredSelect.styles.js +9 -9
- package/dist/Tile/Tile.styles.js +10 -10
- package/dist/Tile/Tile.styles.js.map +1 -1
- package/dist/Title/Title.styles.js +7 -7
- package/dist/Toast/Toast.styles.js +3 -3
- package/dist/ToggleButton/ToggleButton.styles.js +5 -3
- package/dist/ToggleButton/ToggleButton.styles.js.map +1 -1
- package/dist/Token/Token.styles.js +5 -5
- package/dist/ToolHeader/ToolHeader.styles.js +6 -6
- package/dist/ToolLandingPage/ToolLandingPage.styles.js +3 -3
- package/dist/Tooltip/Tooltip.styles.js +3 -3
- package/dist/Tree/Tree.js +1 -1
- package/dist/Tree/Tree.styles.js +10 -10
- package/dist/Typeahead/Typeahead.styles.js +3 -3
- package/dist/Typography/Typography.styles.js +1 -1
- package/dist/Typography/Typography.table.story.js +2 -2
- package/dist/_hooks/ClickOutside.js +8 -3
- package/dist/_hooks/ClickOutside.js.map +1 -1
- package/dist/_hooks/I18n.d.ts +2 -0
- package/dist/_locales/en.json +1 -0
- package/dist/_locales/pseudo.json +1 -0
- package/dist/_storyHelpers_/components/Deprecation.styles.js +1 -1
- package/dist/_storyHelpers_/components/StoryGrid.js +3 -3
- package/dist/_typedoc/AnchorNavigation/AnchorNavigation.types.json +4 -4
- package/dist/_typedoc/Avatar/Avatar.types.json +20 -20
- package/dist/_typedoc/AvatarStack/AvatarStack.types.json +25 -25
- package/dist/_typedoc/Badge/Badge.types.json +6 -6
- package/dist/_typedoc/Banner/Banner.types.json +15 -15
- package/dist/_typedoc/Box/Box.types.json +68 -68
- package/dist/_typedoc/Breadcrumbs/Breadcrumbs.types.json +10 -10
- package/dist/_typedoc/Button/Button.types.json +14 -14
- package/dist/_typedoc/Calendar/Calendar.types.json +80 -80
- package/dist/_typedoc/Card/Card.types.json +6 -6
- package/dist/_typedoc/Checkbox/Checkbox.types.json +8 -8
- package/dist/_typedoc/ContactItem/ContactItem.types.json +9 -9
- package/dist/_typedoc/DateInput/DateInput.types.json +35 -35
- package/dist/_typedoc/DateSelect/DateSelect.types.json +23 -13
- package/dist/_typedoc/DetailPage/DetailPage.types.json +5 -5
- package/dist/_typedoc/Dropdown/Dropdown.types.json +38 -38
- package/dist/_typedoc/DropdownFlyout/DropdownFlyout.types.json +31 -31
- package/dist/_typedoc/Dropzone/Dropzone.types.json +44 -44
- package/dist/_typedoc/EmptyState/EmptyState.types.json +18 -18
- package/dist/_typedoc/FileList/FileList.types.json +9 -9
- package/dist/_typedoc/FileSelect/FileSelect.types.json +27 -27
- package/dist/_typedoc/FileSelect/GridSource/GridSource.types.json +20 -20
- package/dist/_typedoc/FileSelect/LocalSource/LocalSource.types.json +14 -14
- package/dist/_typedoc/FileSelect/TreeSource/TreeSource.types.json +9 -9
- package/dist/_typedoc/Flex/Flex.types.json +27 -27
- package/dist/_typedoc/FlexList/FlexList.types.json +30 -30
- package/dist/_typedoc/Form/Form.types.json +780 -760
- package/dist/_typedoc/GhostPlaceholder/GhostPlaceholder.types.json +12 -12
- package/dist/_typedoc/Grid/Grid.types.json +8 -8
- package/dist/_typedoc/GroupSelect/GroupSelect.types.json +54 -54
- package/dist/_typedoc/Input/Input.types.json +2 -2
- package/dist/_typedoc/Link/Link.types.json +1 -1
- package/dist/_typedoc/ListPage/ListPage.types.json +13 -13
- package/dist/_typedoc/Menu/Menu.types.json +62 -62
- package/dist/_typedoc/MenuImperative/MenuImperative.types.json +84 -84
- package/dist/_typedoc/Modal/Modal.types.json +48 -48
- package/dist/_typedoc/MultiSelect/MultiSelect.types.json +33 -33
- package/dist/_typedoc/NextTile/NextTile.types.json +42 -32
- package/dist/_typedoc/Notation/Notation.types.json +4 -4
- package/dist/_typedoc/NumberInput/NumberInput.types.json +48 -48
- package/dist/_typedoc/OverlayTrigger/OverlayTrigger.types.json +33 -33
- package/dist/_typedoc/PageLayout/PageLayout.types.json +28 -28
- package/dist/_typedoc/Pagination/Pagination.types.json +7 -7
- package/dist/_typedoc/Panel/Panel.types.json +28 -28
- package/dist/_typedoc/Pill/Pill.types.json +2 -2
- package/dist/_typedoc/PillSelect/PillSelect.types.json +49 -49
- package/dist/_typedoc/Popover/Popover.types.json +19 -19
- package/dist/_typedoc/ProgressBar/ProgressBar.types.json +7 -7
- package/dist/_typedoc/RadioButton/RadioButton.types.json +6 -6
- package/dist/_typedoc/Required/Required.types.json +5 -5
- package/dist/_typedoc/Search/Search.types.json +18 -18
- package/dist/_typedoc/Section/Section.types.json +15 -15
- package/dist/_typedoc/SegmentedController/SegmentedController.types.json +21 -21
- package/dist/_typedoc/Select/Select.types.json +67 -67
- package/dist/_typedoc/SettingsPage/SettingsPage.types.json +10 -10
- package/dist/_typedoc/Slider/Slider.types.json +6 -6
- package/dist/_typedoc/Spinner/Spinner.types.json +9 -9
- package/dist/_typedoc/SplitViewCard/SplitViewCard.types.json +14 -14
- package/dist/_typedoc/Table/Table.types.json +114 -104
- package/dist/_typedoc/Tabs/Tabs.types.json +21 -21
- package/dist/_typedoc/Tearsheet/Tearsheet.types.json +17 -17
- package/dist/_typedoc/TextArea/TextArea.types.json +3 -3
- package/dist/_typedoc/TextEditor/TextEditor.types.json +11 -11
- package/dist/_typedoc/TextEditorOutput/TextEditorOutput.types.json +4 -4
- package/dist/_typedoc/Thumbnail/Thumbnail.types.json +23 -23
- package/dist/_typedoc/TieredDropdown/TieredDropdown.types.json +43 -43
- package/dist/_typedoc/TieredSelect/TieredSelect.types.json +29 -29
- package/dist/_typedoc/Tile/Tile.types.json +8 -8
- package/dist/_typedoc/Title/Title.types.json +1 -1
- package/dist/_typedoc/Toast/Toast.types.json +4 -4
- package/dist/_typedoc/ToggleButton/ToggleButton.types.json +4 -4
- package/dist/_typedoc/Token/Token.types.json +7 -7
- package/dist/_typedoc/ToolHeader/ToolHeader.types.json +10 -10
- package/dist/_typedoc/ToolLandingPage/ToolLandingPage.types.json +8 -8
- package/dist/_typedoc/Tooltip/Tooltip.types.json +15 -15
- package/dist/_typedoc/Tree/Tree.types.json +88 -88
- package/dist/_typedoc/Typeahead/Typeahead.types.json +2 -2
- package/dist/_typedoc/Typography/Typography.types.json +9 -9
- package/dist/_typedoc/_utils/types.json +3 -3
- package/dist/_typedoc/a11y-tips.json +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- 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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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
|
+
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-
|
|
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
|
-
|
|
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
|
|
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-
|
|
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
|
+
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-
|
|
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-
|
|
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-
|
|
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":";;;;;;;;;;AAAA,SAASA,KAAK,QAAQ,OAAO;AAC7B,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SAASC,cAAc,QAAQ,kCAAkC;AAEjE,SACEC,cAAc,EACdC,wBAAwB,QACnB,kCAAkC;AACzC,SAASC,SAAS,QAAQ,qBAAqB;AAC/C,SAASC,aAAa,QAAQ,qBAAqB;AAGnD,IAAMC,IAAI,GAAG,SAAPA,IAAIA,CAAA,EAAS,CAAC,CAAC;AAErB,IAAMC,kBAAkB,GAAG,GAAG;AAC9B,IAAMC,gBAAgB,GAAG,EAAE;AAE3B,SAASC,sBAAsBA,CAACC,SAA6B,EAAU;EACrE,IAAI,CAACA,SAAS,EAAE;IACd,OAAOH,kBAAkB;EAC3B;EAEA,IAAMI,IAAI,GAAGD,SAAS,CAACE,qBAAqB,CAAC,CAAC;EAC9C,IAAMC,cAAc,GAAGC,MAAM,CAACC,WAAW;EAEzC,IAAMC,UAAU,GAAGH,cAAc,GAAGF,IAAI,CAACM,MAAM,GAAGT,gBAAgB;EAClE,IAAMU,UAAU,GAAGP,IAAI,CAACQ,GAAG,GAAGX,gBAAgB;EAE9C,IAAMY,cAAc,GAAGC,IAAI,CAACC,GAAG,CAACN,UAAU,EAAEE,UAAU,CAAC;EAEvD,OAAOG,IAAI,CAACE,GAAG,CAAChB,kBAAkB,EAAEa,cAAc,CAAC;AACrD;AAEA,IAAMI,cAAc,gBAAGzB,KAAK,CAAC0B,UAAU,CACrC,SAASD,cAAcA,CAAAE,IAAA,EASrBC,GAAG,EACH;EAAA,IAREC,UAAU,GAAAF,IAAA,CAAVE,UAAU;IACVC,SAAS,GAAAH,IAAA,CAATG,SAAS;IACTC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IAAAC,aAAA,GAAAL,IAAA,CACPM,QAAQ;IAAEC,SAAS,GAAAF,aAAA,cAAGzB,IAAI,GAAAyB,aAAA;IAC1BG,KAAK,GAAAR,IAAA,CAALQ,KAAK;IACFC,KAAK,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA;EAIV,IAAMC,GAAG,GAAGnC,wBAAwB,CAAC,CAAC;EAEtC,IAAMoC,WAAW,GAAGxC,KAAK,CAACyC,MAAM,CAAiB,IAAI,CAAC;EAEtD,IAAMC,SAAS,GAAGP,KAAK,GAAG,EAAE;EAE5BnC,KAAK,CAAC2C,SAAS,CAAC,YAAM;IAAA,IAAAC,gBAAA;IACpB,CAAAA,gBAAA,GAAAb,OAAO,CAACc,OAAO,cAAAD,gBAAA,uBAAfA,gBAAA,CAAiBE,cAAc,CAAC,CAAC;EACnC,CAAC,EAAE,CAACf,OAAO,CAAC,CAAC;EAEb/B,KAAK,CAAC2C,SAAS,CAAC,YAAM;IAAA,IAAAI,iBAAA,EAAAC,iBAAA;IACpB,CAAAD,iBAAA,GAAAhB,OAAO,CAACc,OAAO,cAAAE,iBAAA,uBAAfA,iBAAA,CAAiBE,kBAAkB,CAAC,CAAC;IACrC,CAAAD,iBAAA,GAAAjB,OAAO,CAACc,OAAO,cAAAG,iBAAA,uBAAfA,iBAAA,CAAiBE,iBAAiB,CAAC,CAAC;EACtC,CAAC,EAAE,CAACnB,OAAO,CAAC,CAAC;EAEb,SAASoB,SAASA,CAACC,KAA0C,EAAE;IAAA,IAAAC,iBAAA;IAC7D,IAAMC,WAAW,IAAAD,iBAAA,GAAGtB,OAAO,CAACc,OAAO,cAAAQ,iBAAA,uBAAfA,iBAAA,CAAiBE,WAAW,CAAC,CAAC;IAElD,IAAIH,KAAK,CAACI,GAAG,KAAK,WAAW,IAAIJ,KAAK,CAACI,GAAG,KAAK,MAAM,EAAE;MACrD;MACA,IAAIF,WAAW,KAAKnB,KAAK,GAAG,CAAC,IAAIK,WAAW,CAACK,OAAO,EAAE;QAAA,IAAAY,iBAAA;QACpD,CAAAA,iBAAA,GAAA1B,OAAO,CAACc,OAAO,cAAAY,iBAAA,uBAAfA,iBAAA,CAAiBC,SAAS,CAAClB,WAAW,CAACK,OAAO,CAAC;MACjD;IACF,CAAC,MAAM,IAAIO,KAAK,CAACI,GAAG,KAAK,SAAS,IAAIJ,KAAK,CAACI,GAAG,KAAK,IAAI,EAAE;MACxD;MACA;MACA,IAAId,SAAS,IAAIY,WAAW,KAAKnB,KAAK,EAAE;QAAA,IAAAwB,iBAAA;QACtCP,KAAK,CAACQ,eAAe,CAAC,CAAC;QACvB,CAAAD,iBAAA,GAAA5B,OAAO,CAACc,OAAO,cAAAc,iBAAA,uBAAfA,iBAAA,CAAiBE,aAAa,CAAC,CAAC;MAClC;IACF;EACF;EAEA,SAAS5B,QAAQA,CAAC6B,SAAoB,EAAE;IACtC5B,SAAS,CAAC4B,SAAS,CAAC;IAEpBvB,GAAG,CAACwB,IAAI,CAACD,SAAS,CAACV,KAAK,CAAC;EAC3B;EAEA,IAAMY,QAAQ,GAAGjE,KAAK,CAAC,UAACkE,KAAa,EAAK;IACxC,IAAMC,IAAI,GAAGD,KAAK,GAAG,CAAC;IAEtB,oBACEjE,KAAA,CAAAmE,aAAA,CAACjE,cAAc,CAACkE,IAAI;MAClBC,IAAI,EAAEH,IAAK;MACXV,GAAG,EAAES,KAAM;MACXK,QAAQ,EAAEJ,IAAI,KAAKrC,UAAW;MAC9BD,GAAG,EAAEY;IAAY,GAEhB0B,IACkB,CAAC;EAE1B,CAAC,EAAE/B,KAAK,CAAC;EAET,IAAMoC,YAAY,GAAGzC,SAAS,GAAG;IAAEA,SAAS,EAATA;EAAU,CAAC,GAAG0C,SAAS;EAE1D,oBACExE,KAAA,CAAAmE,aAAA,CAAC7D,aAAa;IAACsB,GAAG,EAAEA,GAAI;IAAC6C,cAAc,EAAE,CAAE;IAACC,KAAK,EAAEH;EAAa,gBAC9DvE,KAAA,CAAAmE,aAAA,CAACjE,cAAc,EAAAyE,QAAA;IACbC,QAAQ;EAAA,GACJxC,KAAK;IACTR,GAAG,EAAEG,OAAQ;IACboB,SAAS,EAAEA,SAAU;IACrBlB,QAAQ,EAAEA;EAAS,IAElBS,SAAS,gBACR1C,KAAA,CAAAmE,aAAA,CAAAnE,KAAA,CAAA6E,QAAA,qBACE7E,KAAA,CAAAmE,aAAA,CAACjE,cAAc,CAAC4E,OAAO,QACpBd,QAAQ,CAACe,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CACC,CAAC,eACzB/E,KAAA,CAAAmE,aAAA,CAACjE,cAAc,CAAC8E,MAAM;IAACC,OAAO,EAAC;EAAS,GACrCjB,QAAQ,CAACA,QAAQ,CAACkB,MAAM,GAAG,CAAC,CACR,CACvB,CAAC,gBAEHlF,KAAA,CAAAmE,aAAA,CAACjE,cAAc,CAAC4E,OAAO,QAAEd,QAAiC,CAE9C,CACH,CAAC;AAEpB,CACF,CAAC;AAED,OAAO,IAAMmB,gBAAgB,gBAAGnF,KAAK,CAAC0B,UAAU,CAG9C,SAASyD,gBAAgBA,CAAAC,KAAA,EAUzBxD,GAAG,EACH;EAAA,IAAAyD,gBAAA,GAAAD,KAAA,CATEvD,UAAU;IAAVA,UAAU,GAAAwD,gBAAA,cAAG,CAAC,GAAAA,gBAAA;IACOC,cAAc,GAAAF,KAAA;IACnCG,QAAQ,GAAAH,KAAA,CAARG,QAAQ;IACRC,EAAE,GAAAJ,KAAA,CAAFI,EAAE;IACFvD,QAAQ,GAAAmD,KAAA,CAARnD,QAAQ;IAAAwD,WAAA,GAAAL,KAAA,CACRjD,KAAK;IAALA,KAAK,GAAAsD,WAAA,cAAG,CAAC,GAAAA,WAAA;IACNrD,KAAK,GAAAC,wBAAA,CAAA+C,KAAA;EAIV,IAAMrD,OAAO,GAAG/B,KAAK,CAACyC,MAAM,CAAU,IAAI,CAAC;EAC3C,IAAMiD,UAAU,GAAG1F,KAAK,CAACyC,MAAM,CAAoB,IAAI,CAAC;EACxD,IAAAkD,eAAA,GAAkC3F,KAAK,CAAC4F,QAAQ,CAC9CpB,SACF,CAAC;IAAAqB,gBAAA,GAAAC,cAAA,CAAAH,eAAA;IAFM7D,SAAS,GAAA+D,gBAAA;IAAEE,YAAY,GAAAF,gBAAA;EAG9B,IAAAG,gBAAA,GAA4BhG,KAAK,CAAC4F,QAAQ,CAAC,KAAK,CAAC;IAAAK,gBAAA,GAAAH,cAAA,CAAAE,gBAAA;IAA1CE,MAAM,GAAAD,gBAAA;IAAEE,SAAS,GAAAF,gBAAA;;EAExB;EACAjG,KAAK,CAAC2C,SAAS,CAAC,YAAM;IACpB,IAAI,CAACuD,MAAM,EAAE;IAEb,SAASE,YAAYA,CAAA,EAAG;MACtBL,YAAY,CAACrF,sBAAsB,CAACgF,UAAU,CAAC7C,OAAO,CAAC,CAAC;IAC1D;IAEA9B,MAAM,CAACsF,gBAAgB,CAAC,QAAQ,EAAED,YAAY,CAAC;IAC/C,OAAO;MAAA,OAAMrF,MAAM,CAACuF,mBAAmB,CAAC,QAAQ,EAAEF,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,CAACF,MAAM,CAAC,CAAC;;EAEZ;EACA;EACA;EACA,SAASK,SAASA,CAAA,EAAG;IAAA,IAAAC,iBAAA,EAAAC,oBAAA,EAAAC,qBAAA;IACnB;IACA;IACA;IAAC,CAAAF,iBAAA,GAACzE,OAAO,CAACc,OAAO,cAAA2D,iBAAA,wBAAAC,oBAAA,GAAfD,iBAAA,CAAiBG,EAAE,cAAAF,oBAAA,wBAAAC,qBAAA,GAAnBD,oBAAA,CAAqBG,UAAU,cAAAF,qBAAA,uBAAhCA,qBAAA,CAAqDG,KAAK,CAAC,CAAC;;IAE7D;IACAV,SAAS,CAAC,IAAI,CAAC;IACfJ,YAAY,CAACrF,sBAAsB,CAACgF,UAAU,CAAC7C,OAAO,CAAC,CAAC;EAC1D;EAEA,SAASiE,SAASA,CAAA,EAAG;IACnBX,SAAS,CAAC,KAAK,CAAC;IAChBJ,YAAY,CAACvB,SAAS,CAAC;EACzB;EAEA,SAASrB,SAASA,CAAC4D,CAAyC,EAAE;IAC5D,IAAIA,CAAC,CAACvD,GAAG,KAAK,IAAI,IAAIuD,CAAC,CAACvD,GAAG,KAAK,SAAS,EAAE;MAAA,IAAAwD,iBAAA;MACzCD,CAAC,CAACE,cAAc,CAAC,CAAC;MAClB,CAAAD,iBAAA,GAAAjF,OAAO,CAACc,OAAO,cAAAmE,iBAAA,uBAAfA,iBAAA,CAAiBE,IAAI,CAAC,CAAC;IACzB,CAAC,MAAM,IAAIH,CAAC,CAACvD,GAAG,KAAK,MAAM,IAAIuD,CAAC,CAACvD,GAAG,KAAK,WAAW,EAAE;MAAA,IAAA2D,iBAAA;MACpDJ,CAAC,CAACE,cAAc,CAAC,CAAC;MAClB,CAAAE,iBAAA,GAAApF,OAAO,CAACc,OAAO,cAAAsE,iBAAA,uBAAfA,iBAAA,CAAiBC,IAAI,CAAC,CAAC;IACzB,CAAC,MAAM,IAAIL,CAAC,CAACvD,GAAG,KAAK,OAAO,EAAE;MAAA,IAAA6D,iBAAA;MAC5BN,CAAC,CAACE,cAAc,CAAC,CAAC;MAClB,CAAAI,iBAAA,GAAAtF,OAAO,CAACc,OAAO,cAAAwE,iBAAA,uBAAfA,iBAAA,CAAiBC,MAAM,CAACP,CAAC,CAAC;IAC5B;EACF;EAEA,oBACE/G,KAAA,CAAAmE,aAAA,CAAChE,cAAc,EAAAwE,QAAA;IACb4C,IAAI,EAAC,SAAS;IACdC,sBAAsB;IACtBC,SAAS;IACTlB,SAAS,EAAEA,SAAU;IACrBO,SAAS,EAAEA,SAAU;IACrBY,OAAO,eACL1H,KAAA,CAAAmE,aAAA,CAAC1C,cAAc;MACbI,UAAU,EAAEA,UAAW;MACvBC,SAAS,EAAEA,SAAU;MACrBC,OAAO,EAAEA,OAAQ;MACjBE,QAAQ,EAAEA,QAAS;MACnBE,KAAK,EAAEA;IAAM,CACd,CACF;IACDwF,SAAS,EAAC,aAAa;IACvB/F,GAAG,EAAEvB,SAAS,CAACuB,GAAG,EAAE8D,UAAU,CAAE;IAChCkC,OAAO,EAAC;EAAO,GACXxF,KAAK,gBAETpC,KAAA,CAAAmE,aAAA,CAAClE,cAAc;IACb,mBAAiBqF,cAAe;IAChCuC,KAAK;IACLtC,QAAQ,EAAEA,QAAS;IACnBC,EAAE,EAAEA,EAAG;IACPrC,SAAS,EAAEA,SAAU;IACrBoE,IAAI,EAAC,UAAU;IACfO,OAAO,EAAC;EAAU,GAEjBjG,UACa,CACF,CAAC;AAErB,CAAC,CAAC"}
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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;"]);
|
package/dist/Pill/Pill.styles.js
CHANGED
|
@@ -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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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;"]);
|
package/dist/Popover/Popover.js
CHANGED
|
@@ -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
|
-
|
|
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","
|
|
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-
|
|
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-
|
|
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
|
|
46
|
-
* @a11y
|
|
47
|
-
*
|
|
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
|
|
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-
|
|
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-
|
|
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-
|
|
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
|
+
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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
|