@procore/core-react 11.28.0 → 11.30.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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/Banner/Banner.styles.js +13 -13
- package/dist/Banner/Banner.styles.js.map +1 -1
- 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 +8 -8
- package/dist/Card/Card.styles.js +1 -1
- package/dist/Checkbox/Checkbox.styles.js +6 -6
- 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/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.styles.js +4 -4
- 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 +4 -4
- package/dist/FilterToken/FilterToken.styles.js +2 -2
- package/dist/FlexList/FlexList.styles.js +1 -1
- package/dist/Form/Form.styles.js +16 -16
- 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 +10 -10
- package/dist/Modal/Modal.styles.js +13 -13
- package/dist/Modal/useInitializeModalFocus.js +1 -1
- package/dist/Modal/useInitializeModalFocus.js.map +1 -1
- package/dist/MultiSelect/MultiSelect.styles.js +6 -6
- package/dist/NextMenu/NextMenu.styles.js +3 -3
- 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 +14 -14
- package/dist/PageLayout/PageLayout.styles.js.map +1 -1
- package/dist/PageLayout/PageLayout.utils.js +1 -1
- package/dist/PageLayout/PageLayout.utils.js.map +1 -1
- package/dist/Pagination/Pagination.styles.js +5 -5
- package/dist/Panel/Panel.styles.js +11 -11
- package/dist/Pill/Pill.styles.js +2 -2
- package/dist/PillSelect/PillSelect.styles.js +4 -4
- package/dist/Popover/Popover.styles.js +2 -2
- 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 +6 -6
- package/dist/SegmentedController/SegmentedController.styles.js +4 -4
- package/dist/Select/Select.styles.js +7 -7
- package/dist/Semantic/Semantic.styles.js +9 -9
- package/dist/Sidebar/Sidebar.styles.js +7 -7
- package/dist/Slider/Slider.styles.js +5 -5
- package/dist/Spinner/Spinner.styles.js +7 -7
- package/dist/SuperSelect/SuperSelect.presets.styles.js +1 -1
- package/dist/SuperSelect/SuperSelect.styles.d.ts +1 -0
- package/dist/SuperSelect/SuperSelect.styles.js +39 -38
- package/dist/SuperSelect/SuperSelect.styles.js.map +1 -1
- package/dist/SuperSelect/SuperSelect.types.d.ts +1 -0
- package/dist/SuperSelect/SuperSelect.types.js.map +1 -1
- package/dist/SuperSelect/useSuperSelect.d.ts +1 -1
- package/dist/SuperSelect/useSuperSelect.js +15 -6
- package/dist/SuperSelect/useSuperSelect.js.map +1 -1
- package/dist/Switch/Switch.styles.js +4 -4
- package/dist/Table/Table.js +24 -2
- package/dist/Table/Table.js.map +1 -1
- package/dist/Table/Table.styles.js +28 -28
- package/dist/Table/Table.types.d.ts +17 -1
- package/dist/Table/Table.types.js.map +1 -1
- package/dist/TableShelf/TableShelf.styles.js +5 -5
- package/dist/Tabs/Tabs.styles.js +8 -8
- 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.styles.js +17 -17
- package/dist/ThumbnailGrid/ThumbnailGrid.styles.js +7 -7
- package/dist/TieredSelect/TieredSelect.styles.js +9 -9
- package/dist/Tile/Tile.styles.js +8 -8
- package/dist/Title/Title.styles.js +7 -7
- package/dist/Toast/Toast.styles.js +3 -3
- package/dist/ToggleButton/ToggleButton.styles.js +1 -1
- package/dist/Token/Token.styles.js +3 -3
- package/dist/ToolHeader/ToolHeader.styles.js +6 -6
- package/dist/Tooltip/Tooltip.styles.js +2 -2
- package/dist/Tree/Tree.styles.js +9 -9
- 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/I18n.d.ts +26 -26
- package/dist/_locales/de-DE.json +2 -2
- package/dist/_locales/en-AU.json +2 -2
- package/dist/_locales/en-CA.json +2 -2
- package/dist/_locales/en-GB.json +2 -2
- package/dist/_locales/es-ES.json +2 -2
- package/dist/_locales/es.json +3 -3
- package/dist/_locales/fr-CA.json +2 -2
- package/dist/_locales/fr-FR.json +2 -2
- package/dist/_locales/is-IS.json +2 -2
- package/dist/_locales/ja-JP.json +28 -28
- package/dist/_locales/pt-BR.json +3 -3
- package/dist/_locales/th-TH.json +2 -2
- package/dist/_locales/zh-SG.json +2 -2
- package/dist/_typedoc/Avatar/Avatar.types.json +20 -20
- package/dist/_typedoc/AvatarStack/AvatarStack.types.json +23 -23
- package/dist/_typedoc/Badge/Badge.types.json +6 -6
- package/dist/_typedoc/Banner/Banner.types.json +13 -13
- 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 +12 -12
- 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 +9 -9
- 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 +13 -13
- package/dist/_typedoc/DetailPage/DetailPage.types.json +4 -4
- package/dist/_typedoc/Dropdown/Dropdown.types.json +37 -37
- package/dist/_typedoc/DropdownFlyout/DropdownFlyout.types.json +29 -29
- package/dist/_typedoc/Dropzone/Dropzone.types.json +41 -41
- package/dist/_typedoc/EmptyState/EmptyState.types.json +14 -14
- package/dist/_typedoc/FileList/FileList.types.json +9 -9
- package/dist/_typedoc/FileSelect/FileSelect.types.json +26 -26
- 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 +726 -726
- package/dist/_typedoc/Grid/Grid.types.json +8 -8
- package/dist/_typedoc/GroupSelect/GroupSelect.types.json +52 -52
- package/dist/_typedoc/Input/Input.types.json +2 -2
- package/dist/_typedoc/Link/Link.types.json +4 -4
- 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 +74 -74
- package/dist/_typedoc/Modal/Modal.types.json +41 -41
- package/dist/_typedoc/MultiSelect/MultiSelect.types.json +31 -31
- package/dist/_typedoc/Notation/Notation.types.json +4 -4
- package/dist/_typedoc/NumberInput/NumberInput.types.json +38 -38
- package/dist/_typedoc/OverlayTrigger/OverlayTrigger.types.json +31 -31
- package/dist/_typedoc/PageLayout/PageLayout.types.json +22 -22
- package/dist/_typedoc/Pagination/Pagination.types.json +7 -7
- package/dist/_typedoc/Panel/Panel.types.json +27 -27
- package/dist/_typedoc/Pill/Pill.types.json +2 -2
- package/dist/_typedoc/PillSelect/PillSelect.types.json +47 -47
- package/dist/_typedoc/Popover/Popover.types.json +14 -14
- package/dist/_typedoc/ProgressBar/ProgressBar.types.json +6 -6
- 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 +14 -14
- package/dist/_typedoc/SegmentedController/SegmentedController.types.json +20 -20
- package/dist/_typedoc/Select/Select.types.json +57 -57
- package/dist/_typedoc/Slider/Slider.types.json +6 -6
- package/dist/_typedoc/Spinner/Spinner.types.json +9 -9
- package/dist/_typedoc/Switch/Switch.types.json +3 -3
- package/dist/_typedoc/Table/Table.types.json +121 -99
- package/dist/_typedoc/Tabs/Tabs.types.json +17 -17
- package/dist/_typedoc/Tearsheet/Tearsheet.types.json +16 -16
- package/dist/_typedoc/TextArea/TextArea.types.json +3 -3
- package/dist/_typedoc/TextEditor/TextEditor.types.json +9 -9
- package/dist/_typedoc/TextEditorOutput/TextEditorOutput.types.json +4 -4
- package/dist/_typedoc/Thumbnail/Thumbnail.types.json +19 -19
- package/dist/_typedoc/TieredDropdown/TieredDropdown.types.json +42 -42
- package/dist/_typedoc/TieredSelect/TieredSelect.types.json +28 -28
- package/dist/_typedoc/Tile/Tile.types.json +30 -30
- 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 +3 -3
- package/dist/_typedoc/Token/Token.types.json +4 -4
- package/dist/_typedoc/ToolHeader/ToolHeader.types.json +10 -10
- package/dist/_typedoc/Tooltip/Tooltip.types.json +13 -13
- package/dist/_typedoc/Tree/Tree.types.json +86 -86
- package/dist/_typedoc/Typeahead/Typeahead.types.json +2 -2
- package/dist/_typedoc/Typography/Typography.types.json +8 -8
- package/dist/_typedoc/_utils/types.json +3 -3
- package/dist/_typedoc/deprecations.json +1 -1
- package/package.json +4 -4
|
@@ -3,19 +3,19 @@ import { colors } from '../_styles/colors';
|
|
|
3
3
|
import { spacing } from '../_styles/spacing';
|
|
4
4
|
export var StyledListPageMain = /*#__PURE__*/styled.div.withConfig({
|
|
5
5
|
displayName: "StyledListPageMain",
|
|
6
|
-
componentId: "core-
|
|
6
|
+
componentId: "core-11_30_0__sc-1eq7fzi-0"
|
|
7
7
|
})(["display:flex;flex:1 0 auto;flex-direction:column;min-width:0;padding:", "px ", "px;width:100%;"], spacing.lg, spacing.xl);
|
|
8
8
|
export var StyledListPageBanner = /*#__PURE__*/styled.div.withConfig({
|
|
9
9
|
displayName: "StyledListPageBanner",
|
|
10
|
-
componentId: "core-
|
|
10
|
+
componentId: "core-11_30_0__sc-1eq7fzi-1"
|
|
11
11
|
})(["flex:0 0 auto;"]);
|
|
12
12
|
export var StyledListPageToolHeader = /*#__PURE__*/styled.div.withConfig({
|
|
13
13
|
displayName: "StyledListPageToolHeader",
|
|
14
|
-
componentId: "core-
|
|
14
|
+
componentId: "core-11_30_0__sc-1eq7fzi-2"
|
|
15
15
|
})(["flex:0 0 auto;padding-bottom:", "px;"], spacing.lg);
|
|
16
16
|
export var StyledListPageControl = /*#__PURE__*/styled.div.withConfig({
|
|
17
17
|
displayName: "StyledListPageControl",
|
|
18
|
-
componentId: "core-
|
|
18
|
+
componentId: "core-11_30_0__sc-1eq7fzi-3"
|
|
19
19
|
})(["flex:", ";", " ", ""], function (_ref) {
|
|
20
20
|
var $block = _ref.$block;
|
|
21
21
|
return $block ? '1 0 auto' : '0 0 auto';
|
|
@@ -32,18 +32,18 @@ export var StyledListPageControl = /*#__PURE__*/styled.div.withConfig({
|
|
|
32
32
|
});
|
|
33
33
|
export var StyledListPageContentControls = /*#__PURE__*/styled.div.withConfig({
|
|
34
34
|
displayName: "StyledListPageContentControls",
|
|
35
|
-
componentId: "core-
|
|
35
|
+
componentId: "core-11_30_0__sc-1eq7fzi-4"
|
|
36
36
|
})(["align-items:center;display:flex;flex:0 0 auto;justify-content:space-between;padding:", "px 0;", " + ", "{margin-left:", "px;}"], spacing.md, StyledListPageControl, StyledListPageControl, spacing.lg);
|
|
37
37
|
export var StyledListPageBody = /*#__PURE__*/styled.div.withConfig({
|
|
38
38
|
displayName: "StyledListPageBody",
|
|
39
|
-
componentId: "core-
|
|
39
|
+
componentId: "core-11_30_0__sc-1eq7fzi-5"
|
|
40
40
|
})(["display:flex;flex:1 0 auto;padding-top:", "px;"], spacing.md);
|
|
41
41
|
export var StyledListPageBodyContent = /*#__PURE__*/styled.div.withConfig({
|
|
42
42
|
displayName: "StyledListPageBodyContent",
|
|
43
|
-
componentId: "core-
|
|
43
|
+
componentId: "core-11_30_0__sc-1eq7fzi-6"
|
|
44
44
|
})(["flex:1 1 auto;"]);
|
|
45
45
|
export var StyledListPage = /*#__PURE__*/styled.div.withConfig({
|
|
46
46
|
displayName: "StyledListPage",
|
|
47
|
-
componentId: "core-
|
|
47
|
+
componentId: "core-11_30_0__sc-1eq7fzi-7"
|
|
48
48
|
})(["display:flex;flex-direction:row;height:100%;width:100%;", " + ", "{padding-top:", "px;}", " + ", "{border-top-color:", ";border-top-style:solid;border-top-width:1px;}", " + ", ",", " + ", "{border-top-color:", ";border-top-style:solid;border-top-width:1px;}", " + ", "{padding-top:0;}"], StyledListPageBanner, StyledListPageToolHeader, spacing.lg, StyledListPageContentControls, StyledListPageContentControls, colors.gray85, StyledListPageToolHeader, StyledListPageContentControls, StyledListPageToolHeader, StyledListPageBody, colors.gray85, StyledListPageContentControls, StyledListPageBody);
|
|
49
49
|
//# sourceMappingURL=ListPage.styles.js.map
|
|
@@ -7,11 +7,11 @@ export var loaderTransitionDuration = 250;
|
|
|
7
7
|
var movingStripes = /*#__PURE__*/keyframes(["from{background-position:", "px 0;}100%{background-position:0 ", "px;}"], backgroundSize, backgroundSize);
|
|
8
8
|
export var StyledLoader = /*#__PURE__*/styled.div.withConfig({
|
|
9
9
|
displayName: "StyledLoader",
|
|
10
|
-
componentId: "core-
|
|
10
|
+
componentId: "core-11_30_0__sc-wgvjj9-0"
|
|
11
11
|
})(["display:block;height:100%;left:0;min-width:12px;position:absolute;transition:width ", "ms ease-out;top:0;"], loaderTransitionDuration);
|
|
12
12
|
export var StyledGradient = /*#__PURE__*/styled.div.withConfig({
|
|
13
13
|
displayName: "StyledGradient",
|
|
14
|
-
componentId: "core-
|
|
14
|
+
componentId: "core-11_30_0__sc-wgvjj9-1"
|
|
15
15
|
})(["height:100%;", ""], function (_ref) {
|
|
16
16
|
var $animated = _ref.$animated;
|
|
17
17
|
return $animated ? css(["animation:", " 0.5s linear infinite;background-image:linear-gradient( 45deg,", " 26%,", " 25%,", " 51%,", " 50%,", " 76%,", " 75%,", " );background-size:", "px ", "px;"], movingStripes, color1, color2, color2, color1, color1, color2, color2, backgroundSize, backgroundSize) : css(["background-color:", ";"], colors.blue50);
|
|
@@ -11,15 +11,15 @@ var optionMinHeight = 32;
|
|
|
11
11
|
// Do not merge with StyledMenu, needed for max-height working in IE
|
|
12
12
|
export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
13
13
|
displayName: "StyledWrapper",
|
|
14
|
-
componentId: "core-
|
|
14
|
+
componentId: "core-11_30_0__sc-z984sz-0"
|
|
15
15
|
})(["border-radius:inherit;display:flex;max-height:inherit;min-width:inherit;outline:none;width:inherit;"]);
|
|
16
16
|
export var StyledMenu = /*#__PURE__*/styled.div.withConfig({
|
|
17
17
|
displayName: "StyledMenu",
|
|
18
|
-
componentId: "core-
|
|
18
|
+
componentId: "core-11_30_0__sc-z984sz-1"
|
|
19
19
|
})(["border-radius:inherit;display:flex;flex-direction:column;outline:0;width:100%;"]);
|
|
20
20
|
export var StyledOptions = /*#__PURE__*/styled.div.withConfig({
|
|
21
21
|
displayName: "StyledOptions",
|
|
22
|
-
componentId: "core-
|
|
22
|
+
componentId: "core-11_30_0__sc-z984sz-2"
|
|
23
23
|
})(["flex-basis:auto;flex-grow:1;flex-shrink:1;min-height:", "px;", ";padding:", "px 0;position:relative;&:focus-visible{", " margin:-1px;}"], optionMinHeight, function (_ref) {
|
|
24
24
|
var _ref$$scrollable = _ref.$scrollable,
|
|
25
25
|
$scrollable = _ref$$scrollable === void 0 ? true : _ref$$scrollable;
|
|
@@ -27,26 +27,26 @@ export var StyledOptions = /*#__PURE__*/styled.div.withConfig({
|
|
|
27
27
|
}, spacing.sm, getFocus());
|
|
28
28
|
export var StyledGrip = /*#__PURE__*/styled.div.withConfig({
|
|
29
29
|
displayName: "StyledGrip",
|
|
30
|
-
componentId: "core-
|
|
30
|
+
componentId: "core-11_30_0__sc-z984sz-3"
|
|
31
31
|
})(["padding:0 2px;height:24px;visibility:hidden;"]);
|
|
32
32
|
export var StyledHeader = /*#__PURE__*/styled.div.withConfig({
|
|
33
33
|
displayName: "StyledHeader",
|
|
34
|
-
componentId: "core-
|
|
34
|
+
componentId: "core-11_30_0__sc-z984sz-4"
|
|
35
35
|
})([""]);
|
|
36
36
|
export var StyledSearch = /*#__PURE__*/styled.div.withConfig({
|
|
37
37
|
displayName: "StyledSearch",
|
|
38
|
-
componentId: "core-
|
|
38
|
+
componentId: "core-11_30_0__sc-z984sz-5"
|
|
39
39
|
})(["padding:", "px ", "px ", "px;", " > *{pointer-events:none;}"], spacing.lg, spacing.lg, spacing.sm, StyledButton);
|
|
40
40
|
export var StyledGroup = /*#__PURE__*/styled.div.withConfig({
|
|
41
41
|
displayName: "StyledGroup",
|
|
42
|
-
componentId: "core-
|
|
42
|
+
componentId: "core-11_30_0__sc-z984sz-6"
|
|
43
43
|
})(["", " color:", ";cursor:", ";font-weight:", ";padding:", "px ", "px;&:not(:first-child){padding-top:", "px;}"], getTypographyIntent('body'), colors.gray15, function (_ref2) {
|
|
44
44
|
var $clickable = _ref2.$clickable;
|
|
45
45
|
return $clickable ? 'pointer' : 'default';
|
|
46
46
|
}, typographyWeights.semibold, spacing.xs, spacing.lg, spacing.md + spacing.xs);
|
|
47
47
|
export var StyledItem = /*#__PURE__*/styled.div.withConfig({
|
|
48
48
|
displayName: "StyledItem",
|
|
49
|
-
componentId: "core-
|
|
49
|
+
componentId: "core-11_30_0__sc-z984sz-7"
|
|
50
50
|
})(["", ";", " cursor:pointer;list-style-type:none;padding:", "px ", "px;a{color:", ";display:block;margin:-", "px -", "px;padding:", "px ", "px;text-decoration:none;&:hover{color:", ";text-decoration:none;}}&[data-highlighted='true']{background-color:", ";}", " &:hover,&:active{", "{visibility:visible;}}", "{color:inherit;cursor:pointer;}", " ", " ", ""], getTypographyIntent('body'), function (_ref3) {
|
|
51
51
|
var as = _ref3.as;
|
|
52
52
|
return as === 'a' && css(["display:block;text-decoration:none;"]);
|
|
@@ -75,10 +75,10 @@ export var StyledItem = /*#__PURE__*/styled.div.withConfig({
|
|
|
75
75
|
});
|
|
76
76
|
export var StyledDroppable = /*#__PURE__*/styled.div.withConfig({
|
|
77
77
|
displayName: "StyledDroppable",
|
|
78
|
-
componentId: "core-
|
|
78
|
+
componentId: "core-11_30_0__sc-z984sz-8"
|
|
79
79
|
})(["", ",", "{padding-left:28px;}"], StyledGroup, StyledItem);
|
|
80
80
|
export var StyledFooter = /*#__PURE__*/styled(Box).withConfig({
|
|
81
81
|
displayName: "StyledFooter",
|
|
82
|
-
componentId: "core-
|
|
82
|
+
componentId: "core-11_30_0__sc-z984sz-9"
|
|
83
83
|
})(["border-top:1px solid ", ";border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;"], colors.gray85);
|
|
84
84
|
//# sourceMappingURL=MenuImperative.styles.js.map
|
|
@@ -18,15 +18,15 @@ export var modalPixelWidths = {
|
|
|
18
18
|
};
|
|
19
19
|
export var StyledModal = /*#__PURE__*/styled.div.withConfig({
|
|
20
20
|
displayName: "StyledModal",
|
|
21
|
-
componentId: "core-
|
|
21
|
+
componentId: "core-11_30_0__sc-1ijdug2-0"
|
|
22
22
|
})(["display:flex;height:100vh;position:absolute;opacity:0;transition:0.3s opacity ease;width:100vw;z-index:0;&.", "{opacity:1;}&.", "{opacity:0;}"], fadeInClassName, fadeOutClassName);
|
|
23
23
|
export var StyledModalButtons = /*#__PURE__*/styled.div.withConfig({
|
|
24
24
|
displayName: "StyledModalButtons",
|
|
25
|
-
componentId: "core-
|
|
25
|
+
componentId: "core-11_30_0__sc-1ijdug2-1"
|
|
26
26
|
})(["display:flex;flex:0 0 auto;margin-left:", "px;> * + *{margin-left:", "px;}"], spacing.lg, spacing.sm);
|
|
27
27
|
export var StyledModalContainer = /*#__PURE__*/styled(Card).withConfig({
|
|
28
28
|
displayName: "StyledModalContainer",
|
|
29
|
-
componentId: "core-
|
|
29
|
+
componentId: "core-11_30_0__sc-1ijdug2-2"
|
|
30
30
|
})(["display:flex;flex-direction:row;position:absolute;z-index:2;", " ", ""], function (_ref) {
|
|
31
31
|
var $placement = _ref.$placement;
|
|
32
32
|
if ($placement === 'top') {
|
|
@@ -44,11 +44,11 @@ export var StyledModalContainer = /*#__PURE__*/styled(Card).withConfig({
|
|
|
44
44
|
});
|
|
45
45
|
export var StyledModalFooter = /*#__PURE__*/styled.div.withConfig({
|
|
46
46
|
displayName: "StyledModalFooter",
|
|
47
|
-
componentId: "core-
|
|
47
|
+
componentId: "core-11_30_0__sc-1ijdug2-3"
|
|
48
48
|
})(["align-items:center;display:flex;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end;padding:", "px ", "px ", "px;"], spacing.xl, spacing.xxl, spacing.xxl);
|
|
49
49
|
export var StyledModalBody = /*#__PURE__*/styled.div.withConfig({
|
|
50
50
|
displayName: "StyledModalBody",
|
|
51
|
-
componentId: "core-
|
|
51
|
+
componentId: "core-11_30_0__sc-1ijdug2-4"
|
|
52
52
|
})(["", " box-sizing:border-box;color:", ";display:flex;flex-direction:column;max-width:", ";overflow:auto;", " > ", "{padding-left:0;padding-right:0;&:first-child > ", "{padding-top:0;}}", ""], getTypographyIntent('body'), colors.gray15, modalMaxWidth, function (_ref3) {
|
|
53
53
|
var noSideSpacing = _ref3.noSideSpacing;
|
|
54
54
|
return css(["padding:", "px ", "px;"], spacing.xl, noSideSpacing ? 0 : spacing.xxl);
|
|
@@ -58,37 +58,37 @@ export var StyledModalBody = /*#__PURE__*/styled.div.withConfig({
|
|
|
58
58
|
});
|
|
59
59
|
export var StyledModalContent = /*#__PURE__*/styled.div.withConfig({
|
|
60
60
|
displayName: "StyledModalContent",
|
|
61
|
-
componentId: "core-
|
|
61
|
+
componentId: "core-11_30_0__sc-1ijdug2-5"
|
|
62
62
|
})(["display:flex;flex-direction:column;max-height:90vh;overflow:hidden;width:100%;"]);
|
|
63
63
|
export var StyledModalFooterNotation = /*#__PURE__*/styled(Typography).withConfig({
|
|
64
64
|
displayName: "StyledModalFooterNotation",
|
|
65
|
-
componentId: "core-
|
|
65
|
+
componentId: "core-11_30_0__sc-1ijdug2-6"
|
|
66
66
|
})(["flex-grow:1;"]);
|
|
67
67
|
export var StyledModalHeader = /*#__PURE__*/styled.div.withConfig({
|
|
68
68
|
displayName: "StyledModalHeader",
|
|
69
|
-
componentId: "core-
|
|
69
|
+
componentId: "core-11_30_0__sc-1ijdug2-7"
|
|
70
70
|
})(["align-items:flex-start;color:", ";display:flex;flex:0 0 auto;padding:", "px ", "px;position:relative;", ""], colors.gray10, spacing.xl, spacing.xxl, function (_ref5) {
|
|
71
71
|
var $isBodyScrolled = _ref5.$isBodyScrolled;
|
|
72
72
|
return css(["border-bottom:1px solid ", ";"], $isBodyScrolled ? colors.gray85 : 'transparent');
|
|
73
73
|
});
|
|
74
74
|
export var StyledModalHeading = /*#__PURE__*/styled.div.withConfig({
|
|
75
75
|
displayName: "StyledModalHeading",
|
|
76
|
-
componentId: "core-
|
|
76
|
+
componentId: "core-11_30_0__sc-1ijdug2-8"
|
|
77
77
|
})(["", " align-items:center;display:flex;flex:1 1 auto;min-height:36px;padding-right:", "px;"], getTypographyIntent('h2'), spacing.lg);
|
|
78
78
|
export var StyledModalCancel = /*#__PURE__*/styled.div.withConfig({
|
|
79
79
|
displayName: "StyledModalCancel",
|
|
80
|
-
componentId: "core-
|
|
80
|
+
componentId: "core-11_30_0__sc-1ijdug2-9"
|
|
81
81
|
})(["flex:0 0 auto;"]);
|
|
82
82
|
export var StyledModalScrim = /*#__PURE__*/styled.div.withConfig({
|
|
83
83
|
displayName: "StyledModalScrim",
|
|
84
|
-
componentId: "core-
|
|
84
|
+
componentId: "core-11_30_0__sc-1ijdug2-10"
|
|
85
85
|
})(["background:hsla(200,8%,10%,0.6);height:100vh;left:0;position:absolute;top:0;width:100vw;z-index:1;"]);
|
|
86
86
|
export var StyledModalWarningIcon = /*#__PURE__*/styled(Warning).withConfig({
|
|
87
87
|
displayName: "StyledModalWarningIcon",
|
|
88
|
-
componentId: "core-
|
|
88
|
+
componentId: "core-11_30_0__sc-1ijdug2-11"
|
|
89
89
|
})(["color:", ";margin-right:", "px;"], colors.yellow40, spacing.sm);
|
|
90
90
|
export var StyledModalFooterSummary = /*#__PURE__*/styled.div.withConfig({
|
|
91
91
|
displayName: "StyledModalFooterSummary",
|
|
92
|
-
componentId: "core-
|
|
92
|
+
componentId: "core-11_30_0__sc-1ijdug2-12"
|
|
93
93
|
})(["", " border-top:1px solid ", ";border-bottom:1px solid ", ";padding:", "px ", "px;color:", ";font-style:italic;background-color:", ";margin:-", "px -", "px ", "px -", "px;flex:1 1 100%;"], getTypographyIntent('small'), colors.gray85, colors.gray85, spacing.md, spacing.xxl, colors.gray15, colors.gray98, spacing.xl, spacing.xxl, spacing.xl, spacing.xxl);
|
|
94
94
|
//# sourceMappingURL=Modal.styles.js.map
|
|
@@ -24,7 +24,7 @@ export function useInitializeModalFocus(_ref) {
|
|
|
24
24
|
}
|
|
25
25
|
// if there is a footer section the focus on the left most interactive element
|
|
26
26
|
} else if ((_childrenRegistryStat6 = childrenRegistryStatus.closeableButtons) !== null && _childrenRegistryStat6 !== void 0 && _childrenRegistryStat6.current) {
|
|
27
|
-
focusManager.focusNext({
|
|
27
|
+
focusManager === null || focusManager === void 0 ? void 0 : focusManager.focusNext({
|
|
28
28
|
from: closeButtonElement !== null && closeButtonElement !== void 0 ? closeButtonElement : undefined
|
|
29
29
|
});
|
|
30
30
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useInitializeModalFocus.js","names":["useFocusManager","useEffect","useModalChildRegistryContext","useInitializeModalFocus","_ref","modalContainerRef","hasOnClose","focusManager","childrenRegistryStatus","_modalContainerRef$cu","_childrenRegistryStat","_childrenRegistryStat2","_childrenRegistryStat3","_childrenRegistryStat6","closeButtonElement","current","querySelector","anyFocusedItem","body","_childrenRegistryStat4","_childrenRegistryStat5","focus","closeableButtons","focusNext","from","undefined"],"sources":["../../src/Modal/useInitializeModalFocus.ts"],"sourcesContent":["import { useFocusManager } from '@react-aria/focus'\nimport { useEffect } from 'react'\nimport { useModalChildRegistryContext } from './ChildRegistry.context'\n\ninterface InitializeModalFocusProps {\n modalContainerRef: React.RefObject<HTMLDivElement>\n hasOnClose: boolean\n}\n\nexport function useInitializeModalFocus({\n modalContainerRef,\n hasOnClose,\n}: InitializeModalFocusProps) {\n const focusManager = useFocusManager()\n const childrenRegistryStatus = useModalChildRegistryContext()\n\n useEffect(() => {\n // the same reason that Modal has a FocusScope with autoFocus={!!onClose}\n if (!hasOnClose) return\n const closeButtonElement = modalContainerRef?.current?.querySelector(\n '[data-internal=\"close-button\"]'\n )\n const anyFocusedItem =\n childrenRegistryStatus.body?.current?.querySelector(':focus')\n\n if (closeButtonElement == null) {\n // if no focus header button is represented then no need to change focus on next elements\n return\n }\n if (childrenRegistryStatus.body?.current) {\n // if nothing has been focused within body then focus in the scrollable body\n if (anyFocusedItem == null) {\n childrenRegistryStatus.body?.current?.focus()\n }\n // if there is a footer section the focus on the left most interactive element\n } else if (childrenRegistryStatus.closeableButtons?.current) {\n focusManager
|
|
1
|
+
{"version":3,"file":"useInitializeModalFocus.js","names":["useFocusManager","useEffect","useModalChildRegistryContext","useInitializeModalFocus","_ref","modalContainerRef","hasOnClose","focusManager","childrenRegistryStatus","_modalContainerRef$cu","_childrenRegistryStat","_childrenRegistryStat2","_childrenRegistryStat3","_childrenRegistryStat6","closeButtonElement","current","querySelector","anyFocusedItem","body","_childrenRegistryStat4","_childrenRegistryStat5","focus","closeableButtons","focusNext","from","undefined"],"sources":["../../src/Modal/useInitializeModalFocus.ts"],"sourcesContent":["import { useFocusManager } from '@react-aria/focus'\nimport { useEffect } from 'react'\nimport { useModalChildRegistryContext } from './ChildRegistry.context'\n\ninterface InitializeModalFocusProps {\n modalContainerRef: React.RefObject<HTMLDivElement>\n hasOnClose: boolean\n}\n\nexport function useInitializeModalFocus({\n modalContainerRef,\n hasOnClose,\n}: InitializeModalFocusProps) {\n const focusManager = useFocusManager()\n const childrenRegistryStatus = useModalChildRegistryContext()\n\n useEffect(() => {\n // the same reason that Modal has a FocusScope with autoFocus={!!onClose}\n if (!hasOnClose) return\n const closeButtonElement = modalContainerRef?.current?.querySelector(\n '[data-internal=\"close-button\"]'\n )\n const anyFocusedItem =\n childrenRegistryStatus.body?.current?.querySelector(':focus')\n\n if (closeButtonElement == null) {\n // if no focus header button is represented then no need to change focus on next elements\n return\n }\n if (childrenRegistryStatus.body?.current) {\n // if nothing has been focused within body then focus in the scrollable body\n if (anyFocusedItem == null) {\n childrenRegistryStatus.body?.current?.focus()\n }\n // if there is a footer section the focus on the left most interactive element\n } else if (childrenRegistryStatus.closeableButtons?.current) {\n focusManager?.focusNext({\n from: closeButtonElement ?? undefined,\n })\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [childrenRegistryStatus])\n}\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,mBAAmB;AACnD,SAASC,SAAS,QAAQ,OAAO;AACjC,SAASC,4BAA4B,QAAQ,yBAAyB;AAOtE,OAAO,SAASC,uBAAuBA,CAAAC,IAAA,EAGT;EAAA,IAF5BC,iBAAiB,GAAAD,IAAA,CAAjBC,iBAAiB;IACjBC,UAAU,GAAAF,IAAA,CAAVE,UAAU;EAEV,IAAMC,YAAY,GAAGP,eAAe,CAAC,CAAC;EACtC,IAAMQ,sBAAsB,GAAGN,4BAA4B,CAAC,CAAC;EAE7DD,SAAS,CAAC,YAAM;IAAA,IAAAQ,qBAAA,EAAAC,qBAAA,EAAAC,sBAAA,EAAAC,sBAAA,EAAAC,sBAAA;IACd;IACA,IAAI,CAACP,UAAU,EAAE;IACjB,IAAMQ,kBAAkB,GAAGT,iBAAiB,aAAjBA,iBAAiB,wBAAAI,qBAAA,GAAjBJ,iBAAiB,CAAEU,OAAO,cAAAN,qBAAA,uBAA1BA,qBAAA,CAA4BO,aAAa,CAClE,gCACF,CAAC;IACD,IAAMC,cAAc,IAAAP,qBAAA,GAClBF,sBAAsB,CAACU,IAAI,cAAAR,qBAAA,wBAAAC,sBAAA,GAA3BD,qBAAA,CAA6BK,OAAO,cAAAJ,sBAAA,uBAApCA,sBAAA,CAAsCK,aAAa,CAAC,QAAQ,CAAC;IAE/D,IAAIF,kBAAkB,IAAI,IAAI,EAAE;MAC9B;MACA;IACF;IACA,KAAAF,sBAAA,GAAIJ,sBAAsB,CAACU,IAAI,cAAAN,sBAAA,eAA3BA,sBAAA,CAA6BG,OAAO,EAAE;MACxC;MACA,IAAIE,cAAc,IAAI,IAAI,EAAE;QAAA,IAAAE,sBAAA,EAAAC,sBAAA;QAC1B,CAAAD,sBAAA,GAAAX,sBAAsB,CAACU,IAAI,cAAAC,sBAAA,wBAAAC,sBAAA,GAA3BD,sBAAA,CAA6BJ,OAAO,cAAAK,sBAAA,uBAApCA,sBAAA,CAAsCC,KAAK,CAAC,CAAC;MAC/C;MACA;IACF,CAAC,MAAM,KAAAR,sBAAA,GAAIL,sBAAsB,CAACc,gBAAgB,cAAAT,sBAAA,eAAvCA,sBAAA,CAAyCE,OAAO,EAAE;MAC3DR,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEgB,SAAS,CAAC;QACtBC,IAAI,EAAEV,kBAAkB,aAAlBA,kBAAkB,cAAlBA,kBAAkB,GAAIW;MAC9B,CAAC,CAAC;IACJ;;IAEA;EACF,CAAC,EAAE,CAACjB,sBAAsB,CAAC,CAAC;AAC9B"}
|
|
@@ -6,26 +6,26 @@ import { getFocus } from '../_styles/mixins';
|
|
|
6
6
|
import { spacing } from '../_styles/spacing';
|
|
7
7
|
export var StyledMultiSelectValues = /*#__PURE__*/styled.div.withConfig({
|
|
8
8
|
displayName: "StyledMultiSelectValues",
|
|
9
|
-
componentId: "core-
|
|
9
|
+
componentId: "core-11_30_0__sc-s9ym9q-0"
|
|
10
10
|
})(["display:flex;flex-wrap:wrap;margin-bottom:2px;margin-left:", "px;margin-right:", "px;margin-top:2px;min-width:0;width:100%;"], spacing.md, spacing.xs);
|
|
11
11
|
export var StyledMultiSelectToken = /*#__PURE__*/styled.div.withConfig({
|
|
12
12
|
displayName: "StyledMultiSelectToken",
|
|
13
|
-
componentId: "core-
|
|
13
|
+
componentId: "core-11_30_0__sc-s9ym9q-1"
|
|
14
14
|
})(["margin-bottom:2px;margin-right:", "px;margin-top:2px;flex:0 1 auto;> div{max-width:178px;width:100%;}"], spacing.xs);
|
|
15
15
|
export var StyledMultiSelectSearchInput = /*#__PURE__*/styled.input.withConfig({
|
|
16
16
|
displayName: "StyledMultiSelectSearchInput",
|
|
17
|
-
componentId: "core-
|
|
17
|
+
componentId: "core-11_30_0__sc-s9ym9q-2"
|
|
18
18
|
})(["background-color:transparent;border-width:0;font-family:inherit;padding:0;height:24px;width:100%;", " ", " &::-ms-clear{display:none;}&:focus{box-shadow:none;outline:none;}&::placeholder{color:", ";}"], getTypographyIntent('body'), function (_ref) {
|
|
19
19
|
var $isNavigatingTokens = _ref.$isNavigatingTokens;
|
|
20
20
|
return $isNavigatingTokens && css(["color:transparent;"]);
|
|
21
21
|
}, colors.gray45);
|
|
22
22
|
export var StyledMultiSelectSearch = /*#__PURE__*/styled.div.withConfig({
|
|
23
23
|
displayName: "StyledMultiSelectSearch",
|
|
24
|
-
componentId: "core-
|
|
24
|
+
componentId: "core-11_30_0__sc-s9ym9q-3"
|
|
25
25
|
})(["margin-bottom:2px;margin-right:", "px;margin-top:2px;flex:1;max-width:100%;min-width:24px;"], spacing.xs);
|
|
26
26
|
export var StyledMultiSelectSearchIcon = /*#__PURE__*/styled.div.withConfig({
|
|
27
27
|
displayName: "StyledMultiSelectSearchIcon",
|
|
28
|
-
componentId: "core-
|
|
28
|
+
componentId: "core-11_30_0__sc-s9ym9q-4"
|
|
29
29
|
})(["align-items:center;align-self:flex-start;display:flex;height:34px;justify-content:flex-end;margin-left:", "px;margin-right:", "px;min-width:40px;width:40px;"], spacing.xs, spacing.md);
|
|
30
30
|
export var StyledMultiSelectClearIcon = StyledSelectClearIcon;
|
|
31
31
|
export var StyledMultiSelectArrowContainer = StyledSelectArrowContainer;
|
|
@@ -33,7 +33,7 @@ export var StyledMultiSelectArrow = StyledSelectArrow;
|
|
|
33
33
|
export var StyledMultiSelectMenu = StyledSelectMenu;
|
|
34
34
|
export var StyledMultiSelectButton = /*#__PURE__*/styled(StyledSelectButton).withConfig({
|
|
35
35
|
displayName: "StyledMultiSelectButton",
|
|
36
|
-
componentId: "core-
|
|
36
|
+
componentId: "core-11_30_0__sc-s9ym9q-5"
|
|
37
37
|
})(["height:auto;padding:0;white-space:normal;&:focus-within{", "}", ""], getFocus(), function (_ref2) {
|
|
38
38
|
var $emptyValue = _ref2.$emptyValue;
|
|
39
39
|
return $emptyValue && css(["", "{cursor:pointer;}"], StyledMultiSelectSearchInput);
|
|
@@ -6,14 +6,14 @@ export var optionMinHeight = 32;
|
|
|
6
6
|
export var defaultMenuHeight = 64;
|
|
7
7
|
export var StyledOptions = /*#__PURE__*/styled.div.withConfig({
|
|
8
8
|
displayName: "StyledOptions",
|
|
9
|
-
componentId: "core-
|
|
9
|
+
componentId: "core-11_30_0__sc-3o6zya-0"
|
|
10
10
|
})([""]);
|
|
11
11
|
export var StyledItem = /*#__PURE__*/styled.div.withConfig({
|
|
12
12
|
displayName: "StyledItem",
|
|
13
|
-
componentId: "core-
|
|
13
|
+
componentId: "core-11_30_0__sc-3o6zya-1"
|
|
14
14
|
})(["", ";padding:", "px ", "px;cursor:pointer;list-style-type:none;"], getTypographyIntent('body'), spacing.xs, spacing.md);
|
|
15
15
|
export var StyledGroup = /*#__PURE__*/styled.div.withConfig({
|
|
16
16
|
displayName: "StyledGroup",
|
|
17
|
-
componentId: "core-
|
|
17
|
+
componentId: "core-11_30_0__sc-3o6zya-2"
|
|
18
18
|
})(["", ";padding:", "px ", "px ", "px;font-weight:", ";background:white;list-style-type:none;"], getTypographyIntent('body'), spacing.md, spacing.md, spacing.xs, typographyWeights.semibold);
|
|
19
19
|
//# sourceMappingURL=NextMenu.styles.js.map
|
|
@@ -14,7 +14,7 @@ var variantColorMap = {
|
|
|
14
14
|
};
|
|
15
15
|
var StyledNotation = /*#__PURE__*/styled.i.withConfig({
|
|
16
16
|
displayName: "StyledNotation",
|
|
17
|
-
componentId: "core-
|
|
17
|
+
componentId: "core-11_30_0__sc-160q1m6-0"
|
|
18
18
|
})(["", " color:", ";font-style:italic;"], getTypographyIntent('small'), function (_ref) {
|
|
19
19
|
var variant = _ref.variant;
|
|
20
20
|
return variant ? colors[variantColorMap[variant]] : colors.gray15;
|
|
@@ -12,37 +12,37 @@ var inputBgColor = colors.white;
|
|
|
12
12
|
var inputBorder = "".concat(colors.gray70, " solid 1px");
|
|
13
13
|
var StyledRootAddon = /*#__PURE__*/styled.span.withConfig({
|
|
14
14
|
displayName: "StyledRootAddon",
|
|
15
|
-
componentId: "core-
|
|
15
|
+
componentId: "core-11_30_0__sc-1782nvg-0"
|
|
16
16
|
})(["display:inline-flex;align-items:center;height:100%;position:absolute;top:0;color:", ";", ";"], function (_ref) {
|
|
17
17
|
var disabled = _ref.disabled;
|
|
18
18
|
return disabled ? colors.gray70 : colors.gray45;
|
|
19
19
|
}, getTypographyIntent('body'));
|
|
20
20
|
export var StyledPrefix = /*#__PURE__*/styled(StyledRootAddon).withConfig({
|
|
21
21
|
displayName: "StyledPrefix",
|
|
22
|
-
componentId: "core-
|
|
22
|
+
componentId: "core-11_30_0__sc-1782nvg-1"
|
|
23
23
|
})(["left:", "px;"], spacing.md);
|
|
24
24
|
export var StyledSuffix = /*#__PURE__*/styled(StyledRootAddon).withConfig({
|
|
25
25
|
displayName: "StyledSuffix",
|
|
26
|
-
componentId: "core-
|
|
26
|
+
componentId: "core-11_30_0__sc-1782nvg-2"
|
|
27
27
|
})(["right:", "px;"], function (_ref2) {
|
|
28
28
|
var withIncrementer = _ref2.withIncrementer;
|
|
29
29
|
return withIncrementer ? spacing.md + incrementerWidth : spacing.md;
|
|
30
30
|
});
|
|
31
31
|
export var StyledIncrementerWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
32
32
|
displayName: "StyledIncrementerWrapper",
|
|
33
|
-
componentId: "core-
|
|
33
|
+
componentId: "core-11_30_0__sc-1782nvg-3"
|
|
34
34
|
})(["display:flex;flex-direction:column;position:absolute;top:1px;right:1px;height:100%;"]);
|
|
35
35
|
export var StyledIncrementerButton = /*#__PURE__*/styled.button.withConfig({
|
|
36
36
|
displayName: "StyledIncrementerButton",
|
|
37
|
-
componentId: "core-
|
|
37
|
+
componentId: "core-11_30_0__sc-1782nvg-4"
|
|
38
38
|
})(["display:inline-flex;justify-content:center;align-items:center;width:", "px;height:calc(50% - 1px);border:none;border-radius:0px;outline:none;background-color:", ";padding:0;cursor:pointer;&:first-child,&:last-child{border-left:", ";&:disabled{border-color:", ";background-color:", ";}}&:first-child{border-top-right-radius:2px;}&:last-child{border-top:", ";border-bottom-right-radius:2px;}svg{fill:", ";}&:hover{svg{fill:", ";}}&:disabled{cursor:default;svg{fill:", ";}}"], incrementerWidth, inputBgColor, inputBorder, colors.gray70, colors.gray94, inputBorder, colors.gray45, colors.gray10, colors.gray70);
|
|
39
39
|
export var StyledInput = /*#__PURE__*/styled(Input).withConfig({
|
|
40
40
|
displayName: "StyledInput",
|
|
41
|
-
componentId: "core-
|
|
41
|
+
componentId: "core-11_30_0__sc-1782nvg-5"
|
|
42
42
|
})([""]);
|
|
43
43
|
export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
44
44
|
displayName: "StyledWrapper",
|
|
45
|
-
componentId: "core-
|
|
45
|
+
componentId: "core-11_30_0__sc-1782nvg-6"
|
|
46
46
|
})(["position:relative;", ""], function (_ref3) {
|
|
47
47
|
var hasIncrementer = _ref3.hasIncrementer;
|
|
48
48
|
return hasIncrementer && css(["", "{padding-right:", "px;}"], StyledInput, spacing.md + incrementerWidth);
|
|
@@ -2,6 +2,6 @@ import styled from 'styled-components';
|
|
|
2
2
|
export var arrowSize = 8;
|
|
3
3
|
export var StyledArrow = /*#__PURE__*/styled.div.withConfig({
|
|
4
4
|
displayName: "StyledArrow",
|
|
5
|
-
componentId: "core-
|
|
5
|
+
componentId: "core-11_30_0__sc-1epxw7u-0"
|
|
6
6
|
})(["position:absolute;background:inherit;width:", "px;height:", "px;transform:rotate(45deg);"], arrowSize, arrowSize);
|
|
7
7
|
//# sourceMappingURL=OverlayArrow.styles.js.map
|
|
@@ -16,34 +16,34 @@ var headerCSS = /*#__PURE__*/css(["padding-top:", "px;margin-left:", "px;margin-
|
|
|
16
16
|
});
|
|
17
17
|
export var StyledPageHeader = /*#__PURE__*/styled.div.withConfig({
|
|
18
18
|
displayName: "StyledPageHeader",
|
|
19
|
-
componentId: "core-
|
|
19
|
+
componentId: "core-11_30_0__sc-1cvdbsv-0"
|
|
20
20
|
})(["", ""], headerCSS);
|
|
21
21
|
export var StyledPageTitle = /*#__PURE__*/styled.div.withConfig({
|
|
22
22
|
displayName: "StyledPageTitle",
|
|
23
|
-
componentId: "core-
|
|
23
|
+
componentId: "core-11_30_0__sc-1cvdbsv-1"
|
|
24
24
|
})(["margin-top:", "px;&:last-child{padding-bottom:", "px;}&:first-child{margin-top:0;}"], spacing.lg, spacing.lg);
|
|
25
25
|
export var StyledPageBreadcrumbs = /*#__PURE__*/styled(Breadcrumbs).withConfig({
|
|
26
26
|
displayName: "StyledPageBreadcrumbs",
|
|
27
|
-
componentId: "core-
|
|
27
|
+
componentId: "core-11_30_0__sc-1cvdbsv-2"
|
|
28
28
|
})(["margin-top:", "px;&:first-child{margin-top:0;}"], spacing.lg);
|
|
29
29
|
export var StyledPageBanner = /*#__PURE__*/styled.div.withConfig({
|
|
30
30
|
displayName: "StyledPageBanner",
|
|
31
|
-
componentId: "core-
|
|
31
|
+
componentId: "core-11_30_0__sc-1cvdbsv-3"
|
|
32
32
|
})(["margin-top:", "px;&:first-child{margin-top:0;}"], spacing.lg);
|
|
33
33
|
export var getActions = function getActions() {
|
|
34
34
|
return css(["flex-shrink:0;padding-left:", "px;> button,> a{&:first-child{margin-left:0;}margin-left:", "px;}"], spacing.xl, spacing.sm);
|
|
35
35
|
};
|
|
36
36
|
export var StyledPageActions = /*#__PURE__*/styled.div.withConfig({
|
|
37
37
|
displayName: "StyledPageActions",
|
|
38
|
-
componentId: "core-
|
|
38
|
+
componentId: "core-11_30_0__sc-1cvdbsv-4"
|
|
39
39
|
})(["", ""], getActions());
|
|
40
40
|
export var StyledPageTabs = /*#__PURE__*/styled.div.withConfig({
|
|
41
41
|
displayName: "StyledPageTabs",
|
|
42
|
-
componentId: "core-
|
|
42
|
+
componentId: "core-11_30_0__sc-1cvdbsv-5"
|
|
43
43
|
})(["margin-top:", "px;"], spacing.sm);
|
|
44
44
|
export var StyledBody = /*#__PURE__*/styled.div.withConfig({
|
|
45
45
|
displayName: "StyledBody",
|
|
46
|
-
componentId: "core-
|
|
46
|
+
componentId: "core-11_30_0__sc-1cvdbsv-6"
|
|
47
47
|
})(["padding-top:", "px;"], spacing.xl);
|
|
48
48
|
var panelWidth = 400;
|
|
49
49
|
var zIndexes = {
|
|
@@ -56,7 +56,7 @@ export var animationDuration = {
|
|
|
56
56
|
};
|
|
57
57
|
export var StyledFooter = /*#__PURE__*/styled.div.withConfig({
|
|
58
58
|
displayName: "StyledFooter",
|
|
59
|
-
componentId: "core-
|
|
59
|
+
componentId: "core-11_30_0__sc-1cvdbsv-7"
|
|
60
60
|
})(["background-color:", ";margin:0 ", "px;", " position:sticky;bottom:0;z-index:", ";", ""], colors.white, outerPageSpacing * -1, function (_ref2) {
|
|
61
61
|
var $hasShadow = _ref2.$hasShadow;
|
|
62
62
|
return $hasShadow && getShadow(2, 'top');
|
|
@@ -66,7 +66,7 @@ export var StyledFooter = /*#__PURE__*/styled.div.withConfig({
|
|
|
66
66
|
});
|
|
67
67
|
export var StyledAside = /*#__PURE__*/styled.div.withConfig({
|
|
68
68
|
displayName: "StyledAside",
|
|
69
|
-
componentId: "core-
|
|
69
|
+
componentId: "core-11_30_0__sc-1cvdbsv-8"
|
|
70
70
|
})(["", " @media ", "{position:absolute;right:0;}"], function (_ref4) {
|
|
71
71
|
var $closed = _ref4.$closed,
|
|
72
72
|
$open = _ref4.$open;
|
|
@@ -86,7 +86,7 @@ var getPanelAnimation = function getPanelAnimation() {
|
|
|
86
86
|
};
|
|
87
87
|
export var StyledAsidePanel = /*#__PURE__*/styled.div.withConfig({
|
|
88
88
|
displayName: "StyledAsidePanel",
|
|
89
|
-
componentId: "core-
|
|
89
|
+
componentId: "core-11_30_0__sc-1cvdbsv-9"
|
|
90
90
|
})(["", " @media ", "{", "}", " ", " border-left:1px solid ", ";width:", "px;position:fixed;background-color:", ";overflow:auto;z-index:", ";", " ", ""], function (_ref7) {
|
|
91
91
|
var $rightOffset = _ref7.$rightOffset;
|
|
92
92
|
return css(["@media ", "{", " border-left:0;z-index:", ";right:", "px;}"], getSmallScreenBreakpointValue(), getShadow(2), zIndexes.panelNarrowScreen, $rightOffset);
|
|
@@ -98,14 +98,14 @@ export var StyledAsidePanel = /*#__PURE__*/styled.div.withConfig({
|
|
|
98
98
|
return $closed && css(["display:none;"]);
|
|
99
99
|
}, colors.gray85, panelWidth, colors.gray96, zIndexes.panelWideScreen, function (_ref10) {
|
|
100
100
|
var $minusHeight = _ref10.$minusHeight;
|
|
101
|
-
return css(["height:calc(
|
|
101
|
+
return css(["height:calc(100dvh - ", "px);"], $minusHeight);
|
|
102
102
|
}, function (_ref11) {
|
|
103
103
|
var $offsetTop = _ref11.$offsetTop;
|
|
104
104
|
return $offsetTop !== null && css(["top:", "px;"], $offsetTop);
|
|
105
105
|
});
|
|
106
106
|
export var StyledPageMain = /*#__PURE__*/styled.div.withConfig({
|
|
107
107
|
displayName: "StyledPageMain",
|
|
108
|
-
componentId: "core-
|
|
108
|
+
componentId: "core-11_30_0__sc-1cvdbsv-10"
|
|
109
109
|
})(["position:relative;padding:0 ", "px;max-width:100%;background-color:", ";", " ", ""], outerPageSpacing, colors.gray96, function () {
|
|
110
110
|
return isIE11() && css(["flex:1 0 0%;"]);
|
|
111
111
|
}, function (_ref12) {
|
|
@@ -120,13 +120,13 @@ export var StyledPageMain = /*#__PURE__*/styled.div.withConfig({
|
|
|
120
120
|
});
|
|
121
121
|
export var StyledPageContainer = /*#__PURE__*/styled.div.withConfig({
|
|
122
122
|
displayName: "StyledPageContainer",
|
|
123
|
-
componentId: "core-
|
|
123
|
+
componentId: "core-11_30_0__sc-1cvdbsv-11"
|
|
124
124
|
})(["display:grid;grid-template-columns:1fr auto;", ""], function () {
|
|
125
125
|
return isIE11() && css(["display:flex;flex-wrap:wrap;"]);
|
|
126
126
|
});
|
|
127
127
|
export var StyledAsideFluidContainer = /*#__PURE__*/styled.div.withConfig({
|
|
128
128
|
displayName: "StyledAsideFluidContainer",
|
|
129
|
-
componentId: "core-
|
|
129
|
+
componentId: "core-11_30_0__sc-1cvdbsv-12"
|
|
130
130
|
})(["", ""], function (_ref13) {
|
|
131
131
|
var $closed = _ref13.$closed,
|
|
132
132
|
$open = _ref13.$open;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageLayout.styles.js","names":["styled","css","keyframes","Breadcrumbs","minScrimSize","colors","getShadow","spacing","isIE11","getSmallScreenBreakpointValue","outerPageSpacing","xl","adjustMaxWidth","breakpointMinWidth","headerCSS","lg","_ref","$transparent","white","StyledPageHeader","div","withConfig","displayName","componentId","StyledPageTitle","StyledPageBreadcrumbs","StyledPageBanner","getActions","sm","StyledPageActions","StyledPageTabs","StyledBody","panelWidth","zIndexes","panelWideScreen","panelNarrowScreen","footer","animationDuration","panel","StyledFooter","_ref2","$hasShadow","_ref3","$isAsideOpen","StyledAside","_ref4","$closed","$open","slideDistance","slideIn","slideOut","getPanelAnimation","_ref5","$opening","_ref6","$closing","StyledAsidePanel","_ref7","$rightOffset","_ref8","$altAnimation","_ref9","gray85","gray96","_ref10","$minusHeight","_ref11","$offsetTop","StyledPageMain","_ref12","$tearsheetPlacement","includes","StyledPageContainer","StyledAsideFluidContainer","_ref13"],"sources":["../../src/PageLayout/PageLayout.styles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport { Breadcrumbs } from '../Breadcrumbs/Breadcrumbs'\nimport { minScrimSize } from '../Tearsheet/Tearsheet.styles'\nimport type { Placement } from '../Tearsheet/Tearsheet.types'\nimport { colors } from '../_styles/colors'\nimport { getShadow } from '../_styles/shadows'\nimport { spacing } from '../_styles/spacing'\nimport { isIE11 } from '../_utils/isIE11'\nimport { getSmallScreenBreakpointValue } from './PageLayout.utils'\n\nconst outerPageSpacing = spacing.xl\n\nexport const adjustMaxWidth = (breakpointMinWidth: number) =>\n breakpointMinWidth - 0.02\n\nconst headerCSS = css<{ $transparent?: boolean }>`\n // use padding instead of margin to divide the headers to maintain the background color\n padding-top: ${spacing.lg}px;\n\n margin-left: ${outerPageSpacing * -1}px;\n margin-right: ${outerPageSpacing * -1}px;\n padding-right: ${outerPageSpacing}px;\n padding-left: ${outerPageSpacing}px;\n\n ${({ $transparent }) =>\n !$transparent &&\n css`\n ${getShadow(1.5)}\n background-color: ${colors.white};\n `}\n`\n\nexport const StyledPageHeader = styled.div`\n ${headerCSS}\n`\n\nexport const StyledPageTitle = styled.div`\n margin-top: ${spacing.lg}px;\n\n &:last-child {\n padding-bottom: ${spacing.lg}px;\n }\n\n &:first-child {\n margin-top: 0;\n }\n`\n\nexport const StyledPageBreadcrumbs = styled(Breadcrumbs)`\n margin-top: ${spacing.lg}px;\n\n &:first-child {\n margin-top: 0;\n }\n`\n\nexport const StyledPageBanner = styled.div`\n margin-top: ${spacing.lg}px;\n\n &:first-child {\n margin-top: 0;\n }\n`\n\nexport const getActions = () => css`\n flex-shrink: 0;\n padding-left: ${spacing.xl}px;\n\n > button,\n > a {\n &:first-child {\n margin-left: 0;\n }\n\n margin-left: ${spacing.sm}px;\n }\n`\n\nexport const StyledPageActions = styled.div`\n ${getActions()}\n`\n\nexport const StyledPageTabs = styled.div`\n margin-top: ${spacing.sm}px;\n`\n\nexport const StyledBody = styled.div`\n padding-top: ${spacing.xl}px;\n`\n\nconst panelWidth = 400\nconst zIndexes = {\n panelWideScreen: 3,\n panelNarrowScreen: 1,\n footer: 2,\n}\n\nexport const animationDuration = {\n panel: 600,\n}\n\nexport const StyledFooter = styled.div<{\n $isAsideOpen: boolean\n $hasShadow: boolean\n}>`\n background-color: ${colors.white};\n margin: 0 ${outerPageSpacing * -1}px;\n\n ${({ $hasShadow }) => $hasShadow && getShadow(2, 'top')}\n\n position: sticky;\n bottom: 0;\n z-index: ${zIndexes.footer};\n\n ${({ $isAsideOpen }) =>\n $isAsideOpen &&\n css`\n @media ${getSmallScreenBreakpointValue()} {\n z-index: ${zIndexes.footer};\n }\n `}\n`\n\nexport const StyledAside = styled.div<{ $open: boolean; $closed: boolean }>`\n ${({ $closed, $open }) =>\n isIE11() &&\n css`\n display: flex;\n flex-grow: 0;\n flex-shrink: 0;\n flex-basis: 0;\n\n transition: flex-basis ${animationDuration.panel}ms;\n\n ${$closed &&\n css`\n flex-basis: 0;\n `}\n\n ${$open &&\n css`\n flex-basis: ${panelWidth}px;\n `}\n `}\n\n // remove aside block from the main flow on smaller screens, enabling overlay-like positioning\n @media ${getSmallScreenBreakpointValue()} {\n position: absolute;\n right: 0;\n }\n`\n\nconst slideDistance = '100%'\n\nconst slideIn = keyframes`\n from {\n transform: translateX(${slideDistance});\n }\n to {\n transform: translateX(0);\n }\n`\n\nconst slideOut = keyframes`\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(${slideDistance});\n }\n`\n\nconst getPanelAnimation = () => css<{ $opening: boolean; $closing: boolean }>`\n ${({ $opening }) =>\n $opening &&\n css`\n animation: ${slideIn} ease-out ${animationDuration.panel}ms;\n `}\n\n ${({ $closing }) =>\n $closing &&\n css`\n animation: ${slideOut} ease-out ${animationDuration.panel}ms;\n `}\n`\n\nexport const StyledAsidePanel = styled.div<{\n $offsetTop: number | null\n $minusHeight: number\n $closing: boolean\n $closed: boolean\n $opening: boolean\n $rightOffset: number\n $altAnimation: boolean\n}>`\n // position panel behind the page sticky footer on smaller screens\n ${({ $rightOffset }) => css`\n @media ${getSmallScreenBreakpointValue()} {\n ${getShadow(2)}\n border-left: 0;\n z-index: ${zIndexes.panelNarrowScreen};\n right: ${$rightOffset}px;\n }\n `}\n\n /*\n * On smaller screens, the panel is positioned absolutely,\n * so the animation needs to happen here\n */\n @media ${getSmallScreenBreakpointValue()} {\n ${getPanelAnimation()}\n }\n\n ${({ $altAnimation }) => $altAnimation && getPanelAnimation()}\n\n ${({ $closed }) =>\n $closed &&\n css`\n display: none;\n `}\n\n border-left: 1px solid ${colors.gray85};\n width: ${panelWidth}px;\n position: fixed;\n background-color: ${colors.gray96};\n\n overflow: auto;\n z-index: ${zIndexes.panelWideScreen};\n\n ${({ $minusHeight }) => {\n return css`\n height: calc(100vh - ${$minusHeight}px);\n `\n }}\n\n ${({ $offsetTop }) =>\n $offsetTop !== null &&\n css`\n top: ${$offsetTop}px;\n `}\n`\n\nexport const StyledPageMain = styled.div<{\n $tearsheetPlacement: Placement | null\n}>`\n position: relative;\n padding: 0 ${outerPageSpacing}px;\n max-width: 100%;\n background-color: ${colors.gray96};\n\n ${() =>\n isIE11() &&\n css`\n flex: 1 0 0%;\n `}\n\n ${({ $tearsheetPlacement }) => {\n if (!$tearsheetPlacement) {\n return ''\n }\n\n if (['top', 'bottom'].includes($tearsheetPlacement)) {\n return css`\n min-height: calc(100vh - ${minScrimSize}px);\n `\n }\n\n return css`\n min-height: 100vh;\n `\n }}\n`\n\nexport const StyledPageContainer = styled.div`\n display: grid;\n grid-template-columns: 1fr auto;\n ${() =>\n isIE11() &&\n css`\n display: flex;\n flex-wrap: wrap;\n `}\n`\n\nexport const StyledAsideFluidContainer = styled.div<{\n $open: boolean\n $closed: boolean\n}>`\n ${({ $closed, $open }) =>\n !isIE11() &&\n css`\n transition: width ${animationDuration.panel}ms;\n\n ${$closed &&\n css`\n width: 0;\n `}\n\n ${$open &&\n css`\n width: ${panelWidth}px;\n `}\n `}\n`\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PageLayout.styles.js","names":["styled","css","keyframes","Breadcrumbs","minScrimSize","colors","getShadow","spacing","isIE11","getSmallScreenBreakpointValue","outerPageSpacing","xl","adjustMaxWidth","breakpointMinWidth","headerCSS","lg","_ref","$transparent","white","StyledPageHeader","div","withConfig","displayName","componentId","StyledPageTitle","StyledPageBreadcrumbs","StyledPageBanner","getActions","sm","StyledPageActions","StyledPageTabs","StyledBody","panelWidth","zIndexes","panelWideScreen","panelNarrowScreen","footer","animationDuration","panel","StyledFooter","_ref2","$hasShadow","_ref3","$isAsideOpen","StyledAside","_ref4","$closed","$open","slideDistance","slideIn","slideOut","getPanelAnimation","_ref5","$opening","_ref6","$closing","StyledAsidePanel","_ref7","$rightOffset","_ref8","$altAnimation","_ref9","gray85","gray96","_ref10","$minusHeight","_ref11","$offsetTop","StyledPageMain","_ref12","$tearsheetPlacement","includes","StyledPageContainer","StyledAsideFluidContainer","_ref13"],"sources":["../../src/PageLayout/PageLayout.styles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport { Breadcrumbs } from '../Breadcrumbs/Breadcrumbs'\nimport { minScrimSize } from '../Tearsheet/Tearsheet.styles'\nimport type { Placement } from '../Tearsheet/Tearsheet.types'\nimport { colors } from '../_styles/colors'\nimport { getShadow } from '../_styles/shadows'\nimport { spacing } from '../_styles/spacing'\nimport { isIE11 } from '../_utils/isIE11'\nimport { getSmallScreenBreakpointValue } from './PageLayout.utils'\n\nconst outerPageSpacing = spacing.xl\n\nexport const adjustMaxWidth = (breakpointMinWidth: number) =>\n breakpointMinWidth - 0.02\n\nconst headerCSS = css<{ $transparent?: boolean }>`\n // use padding instead of margin to divide the headers to maintain the background color\n padding-top: ${spacing.lg}px;\n\n margin-left: ${outerPageSpacing * -1}px;\n margin-right: ${outerPageSpacing * -1}px;\n padding-right: ${outerPageSpacing}px;\n padding-left: ${outerPageSpacing}px;\n\n ${({ $transparent }) =>\n !$transparent &&\n css`\n ${getShadow(1.5)}\n background-color: ${colors.white};\n `}\n`\n\nexport const StyledPageHeader = styled.div`\n ${headerCSS}\n`\n\nexport const StyledPageTitle = styled.div`\n margin-top: ${spacing.lg}px;\n\n &:last-child {\n padding-bottom: ${spacing.lg}px;\n }\n\n &:first-child {\n margin-top: 0;\n }\n`\n\nexport const StyledPageBreadcrumbs = styled(Breadcrumbs)`\n margin-top: ${spacing.lg}px;\n\n &:first-child {\n margin-top: 0;\n }\n`\n\nexport const StyledPageBanner = styled.div`\n margin-top: ${spacing.lg}px;\n\n &:first-child {\n margin-top: 0;\n }\n`\n\nexport const getActions = () => css`\n flex-shrink: 0;\n padding-left: ${spacing.xl}px;\n\n > button,\n > a {\n &:first-child {\n margin-left: 0;\n }\n\n margin-left: ${spacing.sm}px;\n }\n`\n\nexport const StyledPageActions = styled.div`\n ${getActions()}\n`\n\nexport const StyledPageTabs = styled.div`\n margin-top: ${spacing.sm}px;\n`\n\nexport const StyledBody = styled.div`\n padding-top: ${spacing.xl}px;\n`\n\nconst panelWidth = 400\nconst zIndexes = {\n panelWideScreen: 3,\n panelNarrowScreen: 1,\n footer: 2,\n}\n\nexport const animationDuration = {\n panel: 600,\n}\n\nexport const StyledFooter = styled.div<{\n $isAsideOpen: boolean\n $hasShadow: boolean\n}>`\n background-color: ${colors.white};\n margin: 0 ${outerPageSpacing * -1}px;\n\n ${({ $hasShadow }) => $hasShadow && getShadow(2, 'top')}\n\n position: sticky;\n bottom: 0;\n z-index: ${zIndexes.footer};\n\n ${({ $isAsideOpen }) =>\n $isAsideOpen &&\n css`\n @media ${getSmallScreenBreakpointValue()} {\n z-index: ${zIndexes.footer};\n }\n `}\n`\n\nexport const StyledAside = styled.div<{ $open: boolean; $closed: boolean }>`\n ${({ $closed, $open }) =>\n isIE11() &&\n css`\n display: flex;\n flex-grow: 0;\n flex-shrink: 0;\n flex-basis: 0;\n\n transition: flex-basis ${animationDuration.panel}ms;\n\n ${$closed &&\n css`\n flex-basis: 0;\n `}\n\n ${$open &&\n css`\n flex-basis: ${panelWidth}px;\n `}\n `}\n\n // remove aside block from the main flow on smaller screens, enabling overlay-like positioning\n @media ${getSmallScreenBreakpointValue()} {\n position: absolute;\n right: 0;\n }\n`\n\nconst slideDistance = '100%'\n\nconst slideIn = keyframes`\n from {\n transform: translateX(${slideDistance});\n }\n to {\n transform: translateX(0);\n }\n`\n\nconst slideOut = keyframes`\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(${slideDistance});\n }\n`\n\nconst getPanelAnimation = () => css<{ $opening: boolean; $closing: boolean }>`\n ${({ $opening }) =>\n $opening &&\n css`\n animation: ${slideIn} ease-out ${animationDuration.panel}ms;\n `}\n\n ${({ $closing }) =>\n $closing &&\n css`\n animation: ${slideOut} ease-out ${animationDuration.panel}ms;\n `}\n`\n\nexport const StyledAsidePanel = styled.div<{\n $offsetTop: number | null\n $minusHeight: number\n $closing: boolean\n $closed: boolean\n $opening: boolean\n $rightOffset: number\n $altAnimation: boolean\n}>`\n // position panel behind the page sticky footer on smaller screens\n ${({ $rightOffset }) => css`\n @media ${getSmallScreenBreakpointValue()} {\n ${getShadow(2)}\n border-left: 0;\n z-index: ${zIndexes.panelNarrowScreen};\n right: ${$rightOffset}px;\n }\n `}\n\n /*\n * On smaller screens, the panel is positioned absolutely,\n * so the animation needs to happen here\n */\n @media ${getSmallScreenBreakpointValue()} {\n ${getPanelAnimation()}\n }\n\n ${({ $altAnimation }) => $altAnimation && getPanelAnimation()}\n\n ${({ $closed }) =>\n $closed &&\n css`\n display: none;\n `}\n\n border-left: 1px solid ${colors.gray85};\n width: ${panelWidth}px;\n position: fixed;\n background-color: ${colors.gray96};\n\n overflow: auto;\n z-index: ${zIndexes.panelWideScreen};\n\n ${({ $minusHeight }) => {\n return css`\n height: calc(100dvh - ${$minusHeight}px);\n `\n }}\n\n ${({ $offsetTop }) =>\n $offsetTop !== null &&\n css`\n top: ${$offsetTop}px;\n `}\n`\n\nexport const StyledPageMain = styled.div<{\n $tearsheetPlacement: Placement | null\n}>`\n position: relative;\n padding: 0 ${outerPageSpacing}px;\n max-width: 100%;\n background-color: ${colors.gray96};\n\n ${() =>\n isIE11() &&\n css`\n flex: 1 0 0%;\n `}\n\n ${({ $tearsheetPlacement }) => {\n if (!$tearsheetPlacement) {\n return ''\n }\n\n if (['top', 'bottom'].includes($tearsheetPlacement)) {\n return css`\n min-height: calc(100vh - ${minScrimSize}px);\n `\n }\n\n return css`\n min-height: 100vh;\n `\n }}\n`\n\nexport const StyledPageContainer = styled.div`\n display: grid;\n grid-template-columns: 1fr auto;\n ${() =>\n isIE11() &&\n css`\n display: flex;\n flex-wrap: wrap;\n `}\n`\n\nexport const StyledAsideFluidContainer = styled.div<{\n $open: boolean\n $closed: boolean\n}>`\n ${({ $closed, $open }) =>\n !isIE11() &&\n css`\n transition: width ${animationDuration.panel}ms;\n\n ${$closed &&\n css`\n width: 0;\n `}\n\n ${$open &&\n css`\n width: ${panelWidth}px;\n `}\n `}\n`\n"],"mappings":"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"}
|
|
@@ -14,7 +14,7 @@ export var wait = function wait(ms) {
|
|
|
14
14
|
};
|
|
15
15
|
export function getBottomOffsetForFooterUseCase(footerEl, globalBottomOffset) {
|
|
16
16
|
var _footerRect$y;
|
|
17
|
-
var viewportHeight =
|
|
17
|
+
var viewportHeight = globalThis.innerHeight;
|
|
18
18
|
var footerRect = footerEl.getBoundingClientRect();
|
|
19
19
|
var footerTop = (_footerRect$y = footerRect.y) !== null && _footerRect$y !== void 0 ? _footerRect$y : footerRect.top;
|
|
20
20
|
var footerHeight = footerRect.height;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageLayout.utils.js","names":["breakpointRawMinWidthValues","adjustMaxWidth","getSmallScreenBreakpointValue","concat","tabletMd","getIsUsingSmallScreen","_globalThis$matchMedi","globalThis","matchMedia","call","matches","wait","ms","Promise","resolve","setTimeout","getBottomOffsetForFooterUseCase","footerEl","globalBottomOffset","_footerRect$y","viewportHeight","
|
|
1
|
+
{"version":3,"file":"PageLayout.utils.js","names":["breakpointRawMinWidthValues","adjustMaxWidth","getSmallScreenBreakpointValue","concat","tabletMd","getIsUsingSmallScreen","_globalThis$matchMedi","globalThis","matchMedia","call","matches","wait","ms","Promise","resolve","setTimeout","getBottomOffsetForFooterUseCase","footerEl","globalBottomOffset","_footerRect$y","viewportHeight","innerHeight","footerRect","getBoundingClientRect","footerTop","y","top","footerHeight","height","isSmallScreen","isPageFooterSticky","dataset","sticky","bottom","getGlobalBottomOffset","containerEl","lowerBoundary","lowerBoundaryTopOffset","document","documentElement","clientHeight","Math","max","getGlobalTopOffset","_upperBoundary$y","upperBoundary","upperBoundaryTopOffset","getRightOffset","containerRight","right","viewportWidth","clientWidth","getIsIntersectingVertically","upperEl","lowerEl"],"sources":["../../src/PageLayout/PageLayout.utils.ts"],"sourcesContent":["import { breakpointRawMinWidthValues } from '../Grid/Grid.constants'\nimport { adjustMaxWidth } from './PageLayout.styles'\n\nexport const getSmallScreenBreakpointValue = () =>\n `(max-width: ${adjustMaxWidth(breakpointRawMinWidthValues.tabletMd)}px)`\n\nexport const getIsUsingSmallScreen = () => {\n return globalThis.matchMedia?.(getSmallScreenBreakpointValue()).matches\n}\n\nexport const wait = (ms: number) =>\n new Promise<void>((resolve) => setTimeout(resolve, ms))\n\nexport function getBottomOffsetForFooterUseCase(\n footerEl: HTMLDivElement,\n globalBottomOffset: number\n) {\n const viewportHeight = globalThis.innerHeight\n const footerRect = footerEl.getBoundingClientRect()\n const footerTop = footerRect.y ?? footerRect.top\n const footerHeight = footerRect.height\n const isSmallScreen = getIsUsingSmallScreen()\n const isPageFooterSticky = footerEl.dataset.sticky === 'sticky'\n\n if (isSmallScreen) {\n if (isPageFooterSticky) {\n return globalBottomOffset + viewportHeight - footerTop\n }\n\n return globalBottomOffset + footerHeight\n }\n\n if (isPageFooterSticky) {\n // align with the sticky footer in the rest of use cases\n return viewportHeight - footerRect.bottom\n }\n\n return null\n}\n\nexport function getGlobalBottomOffset(containerEl: HTMLDivElement) {\n const lowerBoundary = containerEl.getBoundingClientRect()\n const lowerBoundaryTopOffset = lowerBoundary.bottom\n const viewportHeight = document.documentElement.clientHeight\n return Math.max(viewportHeight - lowerBoundaryTopOffset, 0)\n}\n\nexport function getGlobalTopOffset(containerEl: HTMLDivElement) {\n const upperBoundary = containerEl.getBoundingClientRect()\n const upperBoundaryTopOffset = upperBoundary.y ?? upperBoundary.top\n return Math.max(upperBoundaryTopOffset, 0)\n}\n\nexport function getRightOffset(containerEl: HTMLDivElement) {\n const containerRight = containerEl.getBoundingClientRect().right\n const viewportWidth = document.documentElement.clientWidth\n\n return viewportWidth - containerRight\n}\n\nexport function getIsIntersectingVertically(\n upperEl: HTMLElement,\n lowerEl: HTMLElement\n) {\n return (\n upperEl.getBoundingClientRect().bottom > lowerEl.getBoundingClientRect().top\n )\n}\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-11_30_0__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-11_30_0__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-11_30_0__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-11_30_0__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-11_30_0__sc-fy34i1-4"
|
|
25
25
|
})(["max-height:300px;max-width:248px;"]);
|
|
26
26
|
//# sourceMappingURL=Pagination.styles.js.map
|