@procore/core-react 12.8.0 → 12.9.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/AnchorNavigation/AnchorNavigation.styles.js +3 -3
- 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 +10 -10
- package/dist/Box/Box.styles.js +1 -1
- package/dist/Breadcrumbs/Breadcrumbs.styles.js +4 -4
- package/dist/Button/Button.js +8 -1
- package/dist/Button/Button.js.map +1 -1
- package/dist/Button/Button.styles.js +15 -6
- package/dist/Button/Button.styles.js.map +1 -1
- package/dist/Button/Button.types.d.ts +1 -1
- package/dist/Button/Button.types.js.map +1 -1
- 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/Checkbox/CheckboxTooltip.js +1 -1
- 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 +8 -8
- package/dist/DetailPage/DetailPage.styles.js.map +1 -1
- 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 +14 -14
- package/dist/Form/StyledFormikForm.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.d.ts +7 -0
- package/dist/ListPage/ListPage.js +8 -0
- package/dist/ListPage/ListPage.js.map +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/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.d.ts +3 -1
- package/dist/PageLayout/PageLayout.styles.js +29 -23
- package/dist/PageLayout/PageLayout.styles.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.js +4 -3
- package/dist/Section/Section.js.map +1 -1
- package/dist/Section/Section.styles.d.ts +1 -0
- package/dist/Section/Section.styles.js +10 -6
- package/dist/Section/Section.styles.js.map +1 -1
- package/dist/Section/Section.types.d.ts +4 -0
- package/dist/Section/Section.types.js.map +1 -1
- 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/Slider/Slider.styles.js +5 -5
- package/dist/Spinner/Spinner.styles.js +7 -7
- package/dist/SplitViewCard/SplitViewCard.context.d.ts +3 -4
- package/dist/SplitViewCard/SplitViewCard.context.js +27 -9
- package/dist/SplitViewCard/SplitViewCard.context.js.map +1 -1
- package/dist/SplitViewCard/SplitViewCard.d.ts +23 -22
- package/dist/SplitViewCard/SplitViewCard.js +106 -39
- package/dist/SplitViewCard/SplitViewCard.js.map +1 -1
- package/dist/SplitViewCard/SplitViewCard.styles.d.ts +9 -3
- package/dist/SplitViewCard/SplitViewCard.styles.js +30 -18
- package/dist/SplitViewCard/SplitViewCard.styles.js.map +1 -1
- package/dist/SplitViewCard/SplitViewCard.types.d.ts +29 -6
- package/dist/SplitViewCard/SplitViewCard.types.js.map +1 -1
- package/dist/SplitViewCard/index.d.ts +0 -2
- package/dist/SplitViewCard/index.js +0 -2
- package/dist/SplitViewCard/index.js.map +1 -1
- package/dist/SuperSelect/SuperSelect.presets.styles.js +1 -1
- package/dist/SuperSelect/SuperSelect.styles.js +37 -37
- package/dist/Switch/Switch.styles.js +4 -4
- package/dist/Table/Table.styles.js +28 -28
- package/dist/TableShelf/TableShelf.styles.js +5 -5
- package/dist/Tabs/Tabs.js +3 -1
- package/dist/Tabs/Tabs.js.map +1 -1
- package/dist/Tabs/Tabs.styles.js +29 -24
- package/dist/Tabs/Tabs.styles.js.map +1 -1
- 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.d.ts +7 -0
- package/dist/ToolHeader/ToolHeader.js +8 -0
- package/dist/ToolHeader/ToolHeader.js.map +1 -1
- package/dist/ToolHeader/ToolHeader.styles.js +6 -6
- package/dist/ToolLandingPage/ToolLandingPage.d.ts +25 -0
- package/dist/ToolLandingPage/ToolLandingPage.js +78 -0
- package/dist/ToolLandingPage/ToolLandingPage.js.map +1 -0
- package/dist/ToolLandingPage/ToolLandingPage.styles.d.ts +4 -0
- package/dist/ToolLandingPage/ToolLandingPage.styles.js +16 -0
- package/dist/ToolLandingPage/ToolLandingPage.styles.js.map +1 -0
- package/dist/ToolLandingPage/ToolLandingPage.types.d.ts +11 -0
- package/dist/ToolLandingPage/ToolLandingPage.types.js +2 -0
- package/dist/ToolLandingPage/ToolLandingPage.types.js.map +1 -0
- package/dist/ToolLandingPage/index.d.ts +2 -0
- package/dist/ToolLandingPage/index.js +2 -0
- package/dist/ToolLandingPage/index.js.map +1 -0
- 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 +430 -0
- package/dist/_hooks/I18n.js +2 -0
- package/dist/_hooks/I18n.js.map +1 -1
- package/dist/_hooks/getI18nProviderLocale.js +1 -1
- package/dist/_hooks/getI18nProviderLocale.js.map +1 -1
- package/dist/_locales/de-DE.json +7 -2
- package/dist/_locales/en-AU.json +5 -0
- package/dist/_locales/en-CA.json +5 -0
- package/dist/_locales/en-GB.json +5 -0
- package/dist/_locales/es-ES.json +5 -0
- package/dist/_locales/es.json +10 -5
- package/dist/_locales/fr-CA.json +9 -4
- package/dist/_locales/fr-FR.json +12 -7
- package/dist/_locales/is-IS.json +5 -0
- package/dist/_locales/ja-JP.json +45 -40
- package/dist/_locales/pseudo.json +365 -0
- package/dist/_locales/pt-BR.json +7 -2
- package/dist/_locales/th-TH.json +5 -0
- package/dist/_locales/zh-SG.json +5 -0
- 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 +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 +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 +5 -5
- package/dist/_typedoc/Dropdown/Dropdown.types.json +39 -39
- package/dist/_typedoc/DropdownFlyout/DropdownFlyout.types.json +30 -30
- 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 +46 -46
- 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 +37 -37
- package/dist/_typedoc/OverlayTrigger/OverlayTrigger.types.json +31 -31
- 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 +38 -28
- 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 +24 -14
- package/dist/_typedoc/SegmentedController/SegmentedController.types.json +20 -20
- package/dist/_typedoc/Select/Select.types.json +58 -58
- 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 +134 -0
- package/dist/_typedoc/Switch/Switch.types.json +3 -3
- package/dist/_typedoc/Table/Table.types.json +99 -99
- package/dist/_typedoc/Tabs/Tabs.types.json +19 -19
- 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 +44 -44
- 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/ToolLandingPage/ToolLandingPage.types.json +84 -0
- 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 +9 -9
- package/dist/_typedoc/_utils/types.json +3 -3
- package/dist/_utils/propsTypedoc.d.ts +2 -0
- package/dist/_utils/propsTypedoc.js +2 -0
- package/dist/_utils/propsTypedoc.js.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/package.json +3 -1
- package/dist/NextListPage/NextListPage.d.ts +0 -24
- package/dist/NextListPage/NextListPage.js +0 -44
- package/dist/NextListPage/NextListPage.js.map +0 -1
- package/dist/NextListPage/NextListPage.types.d.ts +0 -3
- package/dist/NextListPage/NextListPage.types.js +0 -2
- package/dist/NextListPage/NextListPage.types.js.map +0 -1
- package/dist/NextListPage/index.d.ts +0 -2
- package/dist/NextListPage/index.js +0 -2
- package/dist/NextListPage/index.js.map +0 -1
- package/dist/SplitViewCard/useSplitViewCard.d.ts +0 -5
- package/dist/SplitViewCard/useSplitViewCard.js +0 -14
- package/dist/SplitViewCard/useSplitViewCard.js.map +0 -1
|
@@ -1,129 +1,196 @@
|
|
|
1
|
-
var _excluded = ["children"],
|
|
1
|
+
var _excluded = ["children", "isClosable", "isInitiallyOpen", "onClose"],
|
|
2
2
|
_excluded2 = ["children"],
|
|
3
3
|
_excluded3 = ["children"],
|
|
4
4
|
_excluded4 = ["children"],
|
|
5
|
-
_excluded5 = ["children"
|
|
5
|
+
_excluded5 = ["children"],
|
|
6
6
|
_excluded6 = ["children"],
|
|
7
7
|
_excluded7 = ["children"],
|
|
8
|
-
_excluded8 = ["children"]
|
|
8
|
+
_excluded8 = ["children"],
|
|
9
|
+
_excluded9 = ["children"];
|
|
10
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
11
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
12
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
13
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
14
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
15
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
9
16
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
10
17
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
11
18
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
12
19
|
import { Clear } from '@procore/core-icons';
|
|
13
20
|
import React from 'react';
|
|
14
21
|
import { Button } from '../Button';
|
|
22
|
+
import { StyledActions } from '../Content/Content.styles';
|
|
15
23
|
import { Section } from '../Section';
|
|
16
24
|
import { useI18nContext } from '../_hooks/I18n';
|
|
25
|
+
import { useResizeObserver } from '../_hooks/ResizeObserver';
|
|
17
26
|
import { addSubcomponents } from '../_utils/addSubcomponents';
|
|
27
|
+
import { mergeRefs } from '../_utils/mergeRefs';
|
|
28
|
+
import { SplitViewCardContextProvider, useSplitViewCard } from './SplitViewCard.context';
|
|
18
29
|
import { StyledSplitViewCardAside, StyledSplitViewCardBody, StyledSplitViewCardContainer, StyledSplitViewCardFooter, StyledSplitViewCardHeader, StyledSplitViewCardHeading, StyledSplitViewCardMain, StyledSplitViewCardTitle } from './SplitViewCard.styles';
|
|
19
|
-
import { useSplitViewCard } from './useSplitViewCard';
|
|
20
30
|
var SplitViewCard_ = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
21
31
|
var children = _ref.children,
|
|
32
|
+
_ref$isClosable = _ref.isClosable,
|
|
33
|
+
isClosable = _ref$isClosable === void 0 ? true : _ref$isClosable,
|
|
34
|
+
isInitiallyOpen = _ref.isInitiallyOpen,
|
|
35
|
+
onClose = _ref.onClose,
|
|
22
36
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
23
|
-
return /*#__PURE__*/React.createElement(
|
|
37
|
+
return /*#__PURE__*/React.createElement(SplitViewCardContextProvider, {
|
|
38
|
+
isInitiallyOpen: isInitiallyOpen,
|
|
39
|
+
onClose: onClose,
|
|
40
|
+
isClosable: isClosable
|
|
41
|
+
}, /*#__PURE__*/React.createElement(StyledSplitViewCardContainer, _extends({
|
|
24
42
|
ref: ref
|
|
25
|
-
}, props), children);
|
|
43
|
+
}, props), children));
|
|
26
44
|
});
|
|
27
45
|
export var Main = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
28
46
|
var children = _ref2.children,
|
|
29
47
|
props = _objectWithoutProperties(_ref2, _excluded2);
|
|
48
|
+
var _useSplitViewCard = useSplitViewCard(),
|
|
49
|
+
open = _useSplitViewCard.open;
|
|
30
50
|
return /*#__PURE__*/React.createElement(StyledSplitViewCardMain, _extends({
|
|
51
|
+
$open: open,
|
|
31
52
|
ref: ref
|
|
32
53
|
}, props), children);
|
|
33
54
|
});
|
|
34
|
-
export var
|
|
55
|
+
export var Panel = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
|
|
35
56
|
var children = _ref3.children,
|
|
36
57
|
props = _objectWithoutProperties(_ref3, _excluded3);
|
|
37
|
-
var
|
|
38
|
-
open =
|
|
58
|
+
var _useSplitViewCard2 = useSplitViewCard(),
|
|
59
|
+
open = _useSplitViewCard2.open;
|
|
60
|
+
var _React$useState = React.useState(false),
|
|
61
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
62
|
+
hasShadow = _React$useState2[0],
|
|
63
|
+
setHasShadow = _React$useState2[1];
|
|
64
|
+
var mainRef = React.useRef(null);
|
|
65
|
+
var handleResize = React.useCallback(function (entries) {
|
|
66
|
+
var element = entries[0];
|
|
67
|
+
if (element && element.target.clientWidth <= 400) {
|
|
68
|
+
setHasShadow(true);
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
setHasShadow(false);
|
|
72
|
+
}, []);
|
|
73
|
+
var setResize = useResizeObserver(handleResize);
|
|
74
|
+
React.useEffect(function () {
|
|
75
|
+
setResize(mainRef.current);
|
|
76
|
+
}, [setResize]);
|
|
39
77
|
return /*#__PURE__*/React.createElement(StyledSplitViewCardAside, _extends({
|
|
40
78
|
$open: open,
|
|
41
|
-
|
|
79
|
+
$hasShadow: hasShadow,
|
|
80
|
+
ref: mergeRefs(ref, mainRef)
|
|
42
81
|
}, props), children);
|
|
43
82
|
});
|
|
44
|
-
export var
|
|
83
|
+
export var PanelHeading = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
|
|
45
84
|
var children = _ref4.children,
|
|
46
85
|
props = _objectWithoutProperties(_ref4, _excluded4);
|
|
47
86
|
return /*#__PURE__*/React.createElement(StyledSplitViewCardHeading, _extends({
|
|
48
87
|
ref: ref
|
|
49
88
|
}, props), children);
|
|
50
89
|
});
|
|
51
|
-
export var
|
|
90
|
+
export var PanelTitle = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
|
|
52
91
|
var children = _ref5.children,
|
|
53
|
-
onClose = _ref5.onClose,
|
|
54
92
|
props = _objectWithoutProperties(_ref5, _excluded5);
|
|
55
93
|
var I18n = useI18nContext();
|
|
94
|
+
var _useSplitViewCard3 = useSplitViewCard(),
|
|
95
|
+
isClosable = _useSplitViewCard3.isClosable,
|
|
96
|
+
onClose = _useSplitViewCard3.onClose;
|
|
56
97
|
return /*#__PURE__*/React.createElement(StyledSplitViewCardTitle, _extends({
|
|
57
98
|
ref: ref
|
|
58
|
-
}, props), children, /*#__PURE__*/React.createElement(Button, {
|
|
99
|
+
}, props), /*#__PURE__*/React.createElement(StyledSplitViewCardHeading, null, children), isClosable && /*#__PURE__*/React.createElement(Button, {
|
|
59
100
|
"aria-label": I18n.t('core.splitViewCard.a11y.close'),
|
|
60
101
|
icon: /*#__PURE__*/React.createElement(Clear, null),
|
|
61
102
|
variant: "tertiary",
|
|
62
103
|
onClick: onClose
|
|
63
104
|
}));
|
|
64
105
|
});
|
|
65
|
-
export var
|
|
106
|
+
export var PanelHeader = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
|
|
66
107
|
var children = _ref6.children,
|
|
67
108
|
props = _objectWithoutProperties(_ref6, _excluded6);
|
|
68
109
|
return /*#__PURE__*/React.createElement(StyledSplitViewCardHeader, _extends({
|
|
69
110
|
ref: ref
|
|
70
111
|
}, props), children);
|
|
71
112
|
});
|
|
72
|
-
export var
|
|
113
|
+
export var PanelBody = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
|
|
73
114
|
var children = _ref7.children,
|
|
74
115
|
props = _objectWithoutProperties(_ref7, _excluded7);
|
|
116
|
+
var _useSplitViewCard4 = useSplitViewCard(),
|
|
117
|
+
setIsScrolling = _useSplitViewCard4.setIsScrolling;
|
|
118
|
+
var timer = React.useRef(null);
|
|
119
|
+
var handleScroll = React.useCallback(function () {
|
|
120
|
+
setIsScrolling(true);
|
|
121
|
+
if (timer.current) {
|
|
122
|
+
clearTimeout(timer.current);
|
|
123
|
+
}
|
|
124
|
+
timer.current = setTimeout(function () {
|
|
125
|
+
setIsScrolling(false);
|
|
126
|
+
}, 100);
|
|
127
|
+
}, [setIsScrolling]);
|
|
75
128
|
return /*#__PURE__*/React.createElement(StyledSplitViewCardBody, _extends({
|
|
76
129
|
ref: ref
|
|
77
|
-
}, props
|
|
130
|
+
}, props, {
|
|
131
|
+
onScroll: handleScroll,
|
|
132
|
+
tabIndex: 0
|
|
133
|
+
}), children);
|
|
78
134
|
});
|
|
79
|
-
export var
|
|
135
|
+
export var PanelFooter = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
|
|
80
136
|
var children = _ref8.children,
|
|
81
137
|
props = _objectWithoutProperties(_ref8, _excluded8);
|
|
138
|
+
var _useSplitViewCard5 = useSplitViewCard(),
|
|
139
|
+
isScrolling = _useSplitViewCard5.isScrolling;
|
|
82
140
|
return /*#__PURE__*/React.createElement(StyledSplitViewCardFooter, _extends({
|
|
141
|
+
$hasShadow: isScrolling,
|
|
142
|
+
ref: ref
|
|
143
|
+
}, props), children);
|
|
144
|
+
});
|
|
145
|
+
var Actions = /*#__PURE__*/React.forwardRef(function Actions(_ref9, ref) {
|
|
146
|
+
var children = _ref9.children,
|
|
147
|
+
props = _objectWithoutProperties(_ref9, _excluded9);
|
|
148
|
+
return /*#__PURE__*/React.createElement(StyledActions, _extends({
|
|
83
149
|
ref: ref
|
|
84
150
|
}, props), children);
|
|
85
151
|
});
|
|
86
152
|
SplitViewCard_.displayName = 'SplitViewCard';
|
|
87
153
|
Main.displayName = 'SplitViewCard.Main';
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
154
|
+
Panel.displayName = 'SplitViewCard.Panel';
|
|
155
|
+
PanelTitle.displayName = 'SplitViewCard.PanelTitle';
|
|
156
|
+
PanelHeader.displayName = 'SplitViewCard.PanelHeader';
|
|
157
|
+
PanelBody.displayName = 'SplitViewCard.PanelBody';
|
|
158
|
+
PanelFooter.displayName = 'SplitViewCard.PanelFooter';
|
|
159
|
+
Actions.displayName = 'SplitViewCard.Actions';
|
|
94
160
|
|
|
95
161
|
/**
|
|
96
162
|
|
|
97
|
-
A
|
|
163
|
+
A SplitViewCard component is used to display additional details
|
|
164
|
+
of an item from a collection inside a panel of a card.
|
|
98
165
|
|
|
99
166
|
- SplitViewCard
|
|
100
167
|
- SplitViewCard.Main
|
|
101
168
|
- SplitViewCard.Section
|
|
102
169
|
- Table or some other main content
|
|
103
|
-
- SplitViewCard.
|
|
104
|
-
- SplitViewCard.
|
|
105
|
-
- SplitViewCard.
|
|
106
|
-
-
|
|
107
|
-
- Title
|
|
170
|
+
- SplitViewCard.Panel
|
|
171
|
+
- SplitViewCard.PanelHeader
|
|
172
|
+
- SplitViewCard.PanelTitle
|
|
173
|
+
- text
|
|
108
174
|
- Tabs
|
|
109
|
-
- SplitViewCard.
|
|
175
|
+
- SplitViewCard.PanelBody
|
|
110
176
|
- Content
|
|
111
|
-
- SplitViewCard.
|
|
177
|
+
- SplitViewCard.PanelFooter
|
|
178
|
+
- SplitViewCard.Actions
|
|
112
179
|
|
|
113
|
-
@since 12.
|
|
180
|
+
@since 12.9.0
|
|
114
181
|
|
|
115
182
|
@see [Storybook](https://stories.core.procore.com/?path=/story/demos-splitviewcard--demo)
|
|
116
183
|
|
|
117
184
|
*/
|
|
118
185
|
|
|
119
186
|
export var SplitViewCard = addSubcomponents({
|
|
187
|
+
Actions: Actions,
|
|
120
188
|
Main: Main,
|
|
121
189
|
Section: Section,
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
Footer: Footer
|
|
190
|
+
Panel: Panel,
|
|
191
|
+
PanelTitle: PanelTitle,
|
|
192
|
+
PanelHeader: PanelHeader,
|
|
193
|
+
PanelBody: PanelBody,
|
|
194
|
+
PanelFooter: PanelFooter
|
|
128
195
|
}, SplitViewCard_);
|
|
129
196
|
//# sourceMappingURL=SplitViewCard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitViewCard.js","names":["Clear","React","Button","Section","useI18nContext","addSubcomponents","StyledSplitViewCardAside","StyledSplitViewCardBody","StyledSplitViewCardContainer","StyledSplitViewCardFooter","StyledSplitViewCardHeader","StyledSplitViewCardHeading","StyledSplitViewCardMain","StyledSplitViewCardTitle","useSplitViewCard","SplitViewCard_","forwardRef","_ref","ref","children","props","_objectWithoutProperties","_excluded","createElement","_extends","Main","_ref2","_excluded2","Aside","_ref3","_excluded3","_useSplitViewCard","open","$open","Heading","_ref4","_excluded4","Title","_ref5","onClose","_excluded5","I18n","t","icon","variant","onClick","Header","_ref6","_excluded6","Body","_ref7","_excluded7","Footer","_ref8","_excluded8","displayName","SplitViewCard"],"sources":["../../src/SplitViewCard/SplitViewCard.tsx"],"sourcesContent":["import { Clear } from '@procore/core-icons'\nimport React from 'react'\nimport { Button } from '../Button'\nimport { Section } from '../Section'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport type { Props } from '../_utils/types'\nimport {\n StyledSplitViewCardAside,\n StyledSplitViewCardBody,\n StyledSplitViewCardContainer,\n StyledSplitViewCardFooter,\n StyledSplitViewCardHeader,\n StyledSplitViewCardHeading,\n StyledSplitViewCardMain,\n StyledSplitViewCardTitle,\n} from './SplitViewCard.styles'\nimport type { SplitViewCardProps } from './SplitViewCard.types'\nimport { useSplitViewCard } from './useSplitViewCard'\n\nconst SplitViewCard_ = React.forwardRef<HTMLDivElement, Props>(\n ({ children, ...props }, ref) => (\n <StyledSplitViewCardContainer ref={ref} {...props}>\n {children}\n </StyledSplitViewCardContainer>\n )\n)\n\nexport const Main = React.forwardRef<HTMLDivElement, Props>(\n ({ children, ...props }, ref) => (\n <StyledSplitViewCardMain ref={ref} {...props}>\n {children}\n </StyledSplitViewCardMain>\n )\n)\n\nexport const Aside = React.forwardRef<HTMLDivElement, Props>(\n ({ children, ...props }, ref) => {\n const { open } = useSplitViewCard()\n\n return (\n <StyledSplitViewCardAside $open={open} ref={ref} {...props}>\n {children}\n </StyledSplitViewCardAside>\n )\n }\n)\n\nexport const Heading = React.forwardRef<HTMLDivElement, Props>(\n ({ children, ...props }, ref) => (\n <StyledSplitViewCardHeading ref={ref} {...props}>\n {children}\n </StyledSplitViewCardHeading>\n )\n)\n\nexport const Title = React.forwardRef<HTMLDivElement, SplitViewCardProps>(\n ({ children, onClose, ...props }, ref) => {\n const I18n = useI18nContext()\n\n return (\n <StyledSplitViewCardTitle ref={ref} {...props}>\n {children}\n <Button\n aria-label={I18n.t('core.splitViewCard.a11y.close')}\n icon={<Clear />}\n variant=\"tertiary\"\n onClick={onClose}\n />\n </StyledSplitViewCardTitle>\n )\n }\n)\n\nexport const Header = React.forwardRef<HTMLDivElement, Props>(\n ({ children, ...props }, ref) => (\n <StyledSplitViewCardHeader ref={ref} {...props}>\n {children}\n </StyledSplitViewCardHeader>\n )\n)\n\nexport const Body = React.forwardRef<HTMLDivElement, Props>(\n ({ children, ...props }, ref) => (\n <StyledSplitViewCardBody ref={ref} {...props}>\n {children}\n </StyledSplitViewCardBody>\n )\n)\n\nexport const Footer = React.forwardRef<HTMLDivElement, Props>(\n ({ children, ...props }, ref) => (\n <StyledSplitViewCardFooter ref={ref} {...props}>\n {children}\n </StyledSplitViewCardFooter>\n )\n)\n\nSplitViewCard_.displayName = 'SplitViewCard'\nMain.displayName = 'SplitViewCard.Main'\nAside.displayName = 'SplitViewCard.Aside'\nHeading.displayName = 'SplitViewCard.Heading'\nTitle.displayName = 'SplitViewCard.Title'\nHeader.displayName = 'SplitViewCard.Header'\nBody.displayName = 'SplitViewCard.Body'\nFooter.displayName = 'SplitViewCard.Footer'\n\n/**\n\n A split view card component is used to support a split view page layout.\n\n - SplitViewCard\n - SplitViewCard.Main\n - SplitViewCard.Section\n - Table or some other main content\n - SplitViewCard.Aside\n - SplitViewCard.Header\n - SplitViewCard.Title\n - SplitViewCard.Heading\n - Title\n - Tabs\n - SplitViewCard.Body\n - Content\n - SplitViewCard.Footer\n\n @since 12.4.2\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/demos-splitviewcard--demo)\n\n */\n\nexport const SplitViewCard = addSubcomponents(\n {\n Main,\n Section,\n Aside,\n Heading,\n Title,\n Header,\n Body,\n Footer,\n },\n SplitViewCard_\n)\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SplitViewCard.js","names":["Clear","React","Button","StyledActions","Section","useI18nContext","useResizeObserver","addSubcomponents","mergeRefs","SplitViewCardContextProvider","useSplitViewCard","StyledSplitViewCardAside","StyledSplitViewCardBody","StyledSplitViewCardContainer","StyledSplitViewCardFooter","StyledSplitViewCardHeader","StyledSplitViewCardHeading","StyledSplitViewCardMain","StyledSplitViewCardTitle","SplitViewCard_","forwardRef","_ref","ref","children","_ref$isClosable","isClosable","isInitiallyOpen","onClose","props","_objectWithoutProperties","_excluded","createElement","_extends","Main","_ref2","_excluded2","_useSplitViewCard","open","$open","Panel","_ref3","_excluded3","_useSplitViewCard2","_React$useState","useState","_React$useState2","_slicedToArray","hasShadow","setHasShadow","mainRef","useRef","handleResize","useCallback","entries","element","target","clientWidth","setResize","useEffect","current","$hasShadow","PanelHeading","_ref4","_excluded4","PanelTitle","_ref5","_excluded5","I18n","_useSplitViewCard3","t","icon","variant","onClick","PanelHeader","_ref6","_excluded6","PanelBody","_ref7","_excluded7","_useSplitViewCard4","setIsScrolling","timer","handleScroll","clearTimeout","setTimeout","onScroll","tabIndex","PanelFooter","_ref8","_excluded8","_useSplitViewCard5","isScrolling","Actions","_ref9","_excluded9","displayName","SplitViewCard"],"sources":["../../src/SplitViewCard/SplitViewCard.tsx"],"sourcesContent":["import { Clear } from '@procore/core-icons'\nimport React from 'react'\nimport { Button } from '../Button'\nimport { StyledActions } from '../Content/Content.styles'\nimport { Section } from '../Section'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { useResizeObserver } from '../_hooks/ResizeObserver'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport { mergeRefs } from '../_utils/mergeRefs'\nimport type { Props } from '../_utils/types'\nimport {\n SplitViewCardContextProvider,\n useSplitViewCard,\n} from './SplitViewCard.context'\nimport {\n StyledSplitViewCardAside,\n StyledSplitViewCardBody,\n StyledSplitViewCardContainer,\n StyledSplitViewCardFooter,\n StyledSplitViewCardHeader,\n StyledSplitViewCardHeading,\n StyledSplitViewCardMain,\n StyledSplitViewCardTitle,\n} from './SplitViewCard.styles'\nimport type { SplitViewCardProps } from './SplitViewCard.types'\n\nconst SplitViewCard_ = React.forwardRef<HTMLDivElement, SplitViewCardProps>(\n (\n { children, isClosable = true, isInitiallyOpen, onClose, ...props },\n ref\n ) => (\n <SplitViewCardContextProvider\n isInitiallyOpen={isInitiallyOpen}\n onClose={onClose}\n isClosable={isClosable}\n >\n <StyledSplitViewCardContainer ref={ref} {...props}>\n {children}\n </StyledSplitViewCardContainer>\n </SplitViewCardContextProvider>\n )\n)\n\nexport const Main = React.forwardRef<HTMLDivElement, Props>(\n ({ children, ...props }, ref) => {\n const { open } = useSplitViewCard()\n\n return (\n <StyledSplitViewCardMain $open={open} ref={ref} {...props}>\n {children}\n </StyledSplitViewCardMain>\n )\n }\n)\n\nexport const Panel = React.forwardRef<HTMLDivElement, Props>(\n ({ children, ...props }, ref) => {\n const { open } = useSplitViewCard()\n const [hasShadow, setHasShadow] = React.useState(false)\n\n const mainRef = React.useRef<HTMLDivElement>(null)\n\n const handleResize = React.useCallback((entries: ResizeObserverEntry[]) => {\n const element = entries[0]\n\n if (element && element.target.clientWidth <= 400) {\n setHasShadow(true)\n return\n }\n\n setHasShadow(false)\n }, [])\n\n const setResize = useResizeObserver(handleResize)\n\n React.useEffect(() => {\n setResize(mainRef.current)\n }, [setResize])\n\n return (\n <StyledSplitViewCardAside\n $open={open}\n $hasShadow={hasShadow}\n ref={mergeRefs(ref, mainRef)}\n {...props}\n >\n {children}\n </StyledSplitViewCardAside>\n )\n }\n)\n\nexport const PanelHeading = React.forwardRef<HTMLDivElement, Props>(\n ({ children, ...props }, ref) => (\n <StyledSplitViewCardHeading ref={ref} {...props}>\n {children}\n </StyledSplitViewCardHeading>\n )\n)\n\nexport const PanelTitle = React.forwardRef<HTMLDivElement, Props>(\n ({ children, ...props }, ref) => {\n const I18n = useI18nContext()\n const { isClosable, onClose } = useSplitViewCard()\n\n return (\n <StyledSplitViewCardTitle ref={ref} {...props}>\n <StyledSplitViewCardHeading>{children}</StyledSplitViewCardHeading>\n {isClosable && (\n <Button\n aria-label={I18n.t('core.splitViewCard.a11y.close')}\n icon={<Clear />}\n variant=\"tertiary\"\n onClick={onClose}\n />\n )}\n </StyledSplitViewCardTitle>\n )\n }\n)\n\nexport const PanelHeader = React.forwardRef<HTMLDivElement, Props>(\n ({ children, ...props }, ref) => (\n <StyledSplitViewCardHeader ref={ref} {...props}>\n {children}\n </StyledSplitViewCardHeader>\n )\n)\n\nexport const PanelBody = React.forwardRef<HTMLDivElement, Props>(\n ({ children, ...props }, ref) => {\n const { setIsScrolling } = useSplitViewCard()\n const timer = React.useRef<NodeJS.Timer | null>(null)\n\n const handleScroll = React.useCallback(() => {\n setIsScrolling(true)\n\n if (timer.current) {\n clearTimeout(timer.current)\n }\n\n timer.current = setTimeout(() => {\n setIsScrolling(false)\n }, 100)\n }, [setIsScrolling])\n\n return (\n <StyledSplitViewCardBody\n ref={ref}\n {...props}\n onScroll={handleScroll}\n tabIndex={0}\n >\n {children}\n </StyledSplitViewCardBody>\n )\n }\n)\n\nexport const PanelFooter = React.forwardRef<HTMLDivElement, Props>(\n ({ children, ...props }, ref) => {\n const { isScrolling } = useSplitViewCard()\n\n return (\n <StyledSplitViewCardFooter $hasShadow={isScrolling} ref={ref} {...props}>\n {children}\n </StyledSplitViewCardFooter>\n )\n }\n)\n\nconst Actions = React.forwardRef<HTMLDivElement, Props>(function Actions(\n { children, ...props },\n ref\n) {\n return (\n <StyledActions ref={ref} {...props}>\n {children}\n </StyledActions>\n )\n})\n\nSplitViewCard_.displayName = 'SplitViewCard'\nMain.displayName = 'SplitViewCard.Main'\nPanel.displayName = 'SplitViewCard.Panel'\nPanelTitle.displayName = 'SplitViewCard.PanelTitle'\nPanelHeader.displayName = 'SplitViewCard.PanelHeader'\nPanelBody.displayName = 'SplitViewCard.PanelBody'\nPanelFooter.displayName = 'SplitViewCard.PanelFooter'\nActions.displayName = 'SplitViewCard.Actions'\n\n/**\n\n A SplitViewCard component is used to display additional details\n of an item from a collection inside a panel of a card.\n\n - SplitViewCard\n - SplitViewCard.Main\n - SplitViewCard.Section\n - Table or some other main content\n - SplitViewCard.Panel\n - SplitViewCard.PanelHeader\n - SplitViewCard.PanelTitle\n - text\n - Tabs\n - SplitViewCard.PanelBody\n - Content\n - SplitViewCard.PanelFooter\n - SplitViewCard.Actions\n\n @since 12.9.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/demos-splitviewcard--demo)\n\n */\n\nexport const SplitViewCard = addSubcomponents(\n {\n Actions,\n Main,\n Section,\n Panel,\n PanelTitle,\n PanelHeader,\n PanelBody,\n PanelFooter,\n },\n SplitViewCard_\n)\n"],"mappings":"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"}
|
|
@@ -1,10 +1,16 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
export declare const StyledSplitViewCardContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
|
-
export declare const StyledSplitViewCardMain: import("styled-components").StyledComponent<"div", any, {
|
|
3
|
+
export declare const StyledSplitViewCardMain: import("styled-components").StyledComponent<"div", any, {
|
|
4
|
+
$open: boolean;
|
|
5
|
+
}, never>;
|
|
3
6
|
export declare const StyledSplitViewCardAside: import("styled-components").StyledComponent<"div", any, {
|
|
4
7
|
$open: boolean;
|
|
8
|
+
$hasShadow: boolean;
|
|
5
9
|
}, never>;
|
|
6
|
-
export declare const StyledSplitViewCardHeading: import("styled-components").StyledComponent<"
|
|
10
|
+
export declare const StyledSplitViewCardHeading: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Semantic/Semantic.types").HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>, any, {}, never>;
|
|
7
11
|
export declare const StyledSplitViewCardTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
12
|
export declare const StyledSplitViewCardHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
9
13
|
export declare const StyledSplitViewCardBody: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
|
-
export declare const StyledSplitViewCardFooter: import("styled-components").StyledComponent<"div", any, {
|
|
14
|
+
export declare const StyledSplitViewCardFooter: import("styled-components").StyledComponent<"div", any, {
|
|
15
|
+
$hasShadow?: boolean | undefined;
|
|
16
|
+
}, never>;
|
|
@@ -1,39 +1,51 @@
|
|
|
1
1
|
import styled, { css } from 'styled-components';
|
|
2
|
+
import { breakpointMinWidthValues, breakpointRawMinWidthValues } from '../Grid/Grid.constants';
|
|
3
|
+
import { H2 } from '../Semantic';
|
|
2
4
|
import { colors } from '../_styles/colors';
|
|
3
5
|
import { spacing } from '../_styles/spacing';
|
|
6
|
+
var MIN_CARD_HEIGHT = 364;
|
|
4
7
|
export var StyledSplitViewCardContainer = /*#__PURE__*/styled.div.withConfig({
|
|
5
8
|
displayName: "StyledSplitViewCardContainer",
|
|
6
|
-
componentId: "core-
|
|
7
|
-
})(["display:grid;grid-template-columns:1fr auto;border:
|
|
9
|
+
componentId: "core-12_9_0__sc-9hrkda-0"
|
|
10
|
+
})(["display:grid;grid-template-columns:1fr auto;border-radius:", "px;box-shadow:0 0 4px 0 rgba(0,0,0,0.25);min-height:", "px;overflow-y:auto;position:relative;width:100%;@media (max-width:", "){box-shadow:none;display:flex;flex-direction:column;padding:", "px;width:100%;}"], spacing.sm, MIN_CARD_HEIGHT, breakpointMinWidthValues.tabletMd, spacing.sm);
|
|
8
11
|
export var StyledSplitViewCardMain = /*#__PURE__*/styled.div.withConfig({
|
|
9
12
|
displayName: "StyledSplitViewCardMain",
|
|
10
|
-
componentId: "core-
|
|
11
|
-
})(["background-color:", ";position:relative;width:100%;"], colors.white)
|
|
13
|
+
componentId: "core-12_9_0__sc-9hrkda-1"
|
|
14
|
+
})(["background-color:", ";border-top-left-radius:", "px;border-bottom-left-radius:", "px;position:relative;width:60%;transition:all ease 500ms;@media (max-width:", "){box-shadow:0 0 4px 0 rgba(0,0,0,0.25);border-radius:", "px;margin-bottom:", "px;width:100%;}", ""], colors.white, spacing.sm, spacing.sm, breakpointMinWidthValues.tabletMd, spacing.sm, spacing.sm, function (_ref) {
|
|
15
|
+
var $open = _ref.$open;
|
|
16
|
+
return !$open && css(["border-radius:", "px;width:100%;"], spacing.sm);
|
|
17
|
+
});
|
|
12
18
|
export var StyledSplitViewCardAside = /*#__PURE__*/styled.div.withConfig({
|
|
13
19
|
displayName: "StyledSplitViewCardAside",
|
|
14
|
-
componentId: "core-
|
|
15
|
-
})(["background-color:", ";border-left:1px solid ", ";display:flex;flex-direction:column;min-width:400px;transition:all ease 500ms;", ""], colors.white, colors.gray85, function (
|
|
16
|
-
var $open =
|
|
17
|
-
return !$open && css(["border:none;overflow:hidden !important
|
|
20
|
+
componentId: "core-12_9_0__sc-9hrkda-2"
|
|
21
|
+
})(["background-color:", ";border-left:1px solid ", ";border-top-right-radius:", "px;border-bottom-right-radius:", "px;display:flex;flex-direction:column;height:100%;width:40%;min-height:", "px;min-width:400px;transition:all ease 500ms;z-index:2;position:absolute;top:0;right:0;@media screen and (max-width:", "px){min-width:unset;}@media (max-width:", "){box-shadow:0 0 4px 0 rgba(0,0,0,0.25);border:none;border-radius:", "px;position:relative;width:100%;}", " ", ""], colors.white, colors.gray85, spacing.sm, spacing.sm, MIN_CARD_HEIGHT, breakpointRawMinWidthValues.tabletSm, breakpointMinWidthValues.tabletMd, spacing.sm, function (_ref2) {
|
|
22
|
+
var $open = _ref2.$open;
|
|
23
|
+
return !$open && css(["border:none;border-radius:", "px;overflow:hidden !important;@media (min-width:", "){min-width:0;width:0 !important;}@media (max-width:", "){display:none;}"], spacing.sm, breakpointMinWidthValues.tabletMd, breakpointMinWidthValues.tabletMd);
|
|
24
|
+
}, function (_ref3) {
|
|
25
|
+
var $hasShadow = _ref3.$hasShadow;
|
|
26
|
+
return $hasShadow && css(["box-shadow:-2px 0 6px 0 rgba(0,0,0,0.1);"]);
|
|
18
27
|
});
|
|
19
|
-
export var StyledSplitViewCardHeading = /*#__PURE__*/styled.
|
|
28
|
+
export var StyledSplitViewCardHeading = /*#__PURE__*/styled(H2).withConfig({
|
|
20
29
|
displayName: "StyledSplitViewCardHeading",
|
|
21
|
-
componentId: "core-
|
|
22
|
-
})(["overflow:hidden;white-space:nowrap;width:100%;"]);
|
|
30
|
+
componentId: "core-12_9_0__sc-9hrkda-3"
|
|
31
|
+
})(["overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;"]);
|
|
23
32
|
export var StyledSplitViewCardTitle = /*#__PURE__*/styled.div.withConfig({
|
|
24
33
|
displayName: "StyledSplitViewCardTitle",
|
|
25
|
-
componentId: "core-
|
|
26
|
-
})(["display:flex;align-items:center;justify-content:space-between;margin-bottom:", "px;"], spacing.sm);
|
|
34
|
+
componentId: "core-12_9_0__sc-9hrkda-4"
|
|
35
|
+
})(["display:flex;align-items:center;justify-content:space-between;margin-bottom:", "px;min-height:36px;"], spacing.sm);
|
|
27
36
|
export var StyledSplitViewCardHeader = /*#__PURE__*/styled.div.withConfig({
|
|
28
37
|
displayName: "StyledSplitViewCardHeader",
|
|
29
|
-
componentId: "core-
|
|
38
|
+
componentId: "core-12_9_0__sc-9hrkda-5"
|
|
30
39
|
})(["border-bottom:1px solid ", ";display:flex;flex-direction:column;padding:", "px ", "px 0;"], colors.gray85, spacing.lg, spacing.lg);
|
|
31
40
|
export var StyledSplitViewCardBody = /*#__PURE__*/styled.div.withConfig({
|
|
32
41
|
displayName: "StyledSplitViewCardBody",
|
|
33
|
-
componentId: "core-
|
|
34
|
-
})(["
|
|
42
|
+
componentId: "core-12_9_0__sc-9hrkda-6"
|
|
43
|
+
})(["display:flex;flex-direction:column;flex:1;padding:", "px ", "px 0;min-height:400px;overflow-y:auto;"], spacing.lg, spacing.lg);
|
|
35
44
|
export var StyledSplitViewCardFooter = /*#__PURE__*/styled.div.withConfig({
|
|
36
45
|
displayName: "StyledSplitViewCardFooter",
|
|
37
|
-
componentId: "core-
|
|
38
|
-
})(["display:flex;align-items:center;justify-content:flex-end;padding:
|
|
46
|
+
componentId: "core-12_9_0__sc-9hrkda-7"
|
|
47
|
+
})(["display:flex;align-items:center;justify-content:flex-end;padding:", "px;", ""], spacing.lg, function (_ref4) {
|
|
48
|
+
var $hasShadow = _ref4.$hasShadow;
|
|
49
|
+
return $hasShadow && css(["box-shadow:0 -4px 6px 0 #0000001a;"]);
|
|
50
|
+
});
|
|
39
51
|
//# sourceMappingURL=SplitViewCard.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitViewCard.styles.js","names":["styled","css","colors","spacing","StyledSplitViewCardContainer","div","withConfig","displayName","componentId","
|
|
1
|
+
{"version":3,"file":"SplitViewCard.styles.js","names":["styled","css","breakpointMinWidthValues","breakpointRawMinWidthValues","H2","colors","spacing","MIN_CARD_HEIGHT","StyledSplitViewCardContainer","div","withConfig","displayName","componentId","sm","tabletMd","StyledSplitViewCardMain","white","_ref","$open","StyledSplitViewCardAside","gray85","tabletSm","_ref2","_ref3","$hasShadow","StyledSplitViewCardHeading","StyledSplitViewCardTitle","StyledSplitViewCardHeader","lg","StyledSplitViewCardBody","StyledSplitViewCardFooter","_ref4"],"sources":["../../src/SplitViewCard/SplitViewCard.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport {\n breakpointMinWidthValues,\n breakpointRawMinWidthValues,\n} from '../Grid/Grid.constants'\nimport { H2 } from '../Semantic'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\n\nconst MIN_CARD_HEIGHT = 364\n\nexport const StyledSplitViewCardContainer = styled.div`\n display: grid;\n grid-template-columns: 1fr auto;\n border-radius: ${spacing.sm}px;\n box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);\n min-height: ${MIN_CARD_HEIGHT}px;\n overflow-y: auto;\n position: relative;\n width: 100%;\n\n @media (max-width: ${breakpointMinWidthValues.tabletMd}) {\n box-shadow: none;\n display: flex;\n flex-direction: column;\n padding: ${spacing.sm}px;\n width: 100%;\n }\n`\n\nexport const StyledSplitViewCardMain = styled.div<{ $open: boolean }>`\n background-color: ${colors.white};\n border-top-left-radius: ${spacing.sm}px;\n border-bottom-left-radius: ${spacing.sm}px;\n position: relative;\n width: 60%;\n transition: all ease 500ms;\n\n @media (max-width: ${breakpointMinWidthValues.tabletMd}) {\n box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);\n border-radius: ${spacing.sm}px;\n margin-bottom: ${spacing.sm}px;\n width: 100%;\n }\n\n ${({ $open }) =>\n !$open &&\n css`\n border-radius: ${spacing.sm}px;\n width: 100%;\n `}\n`\n\nexport const StyledSplitViewCardAside = styled.div<{\n $open: boolean\n $hasShadow: boolean\n}>`\n background-color: ${colors.white};\n border-left: 1px solid ${colors.gray85};\n border-top-right-radius: ${spacing.sm}px;\n border-bottom-right-radius: ${spacing.sm}px;\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 40%;\n min-height: ${MIN_CARD_HEIGHT}px;\n min-width: 400px;\n transition: all ease 500ms;\n z-index: 2;\n position: absolute;\n top: 0;\n right: 0;\n\n @media screen and (max-width: ${breakpointRawMinWidthValues.tabletSm}px) {\n min-width: unset;\n }\n\n @media (max-width: ${breakpointMinWidthValues.tabletMd}) {\n box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);\n border: none;\n border-radius: ${spacing.sm}px;\n position: relative;\n width: 100%;\n }\n\n ${({ $open }) =>\n !$open &&\n css`\n border: none;\n border-radius: ${spacing.sm}px;\n overflow: hidden !important;\n\n @media (min-width: ${breakpointMinWidthValues.tabletMd}) {\n min-width: 0;\n width: 0 !important;\n }\n\n @media (max-width: ${breakpointMinWidthValues.tabletMd}) {\n display: none;\n }\n `}\n\n ${({ $hasShadow }) =>\n $hasShadow &&\n css`\n box-shadow: -2px 0 6px 0 rgba(0, 0, 0, 0.1);\n `}\n`\n\nexport const StyledSplitViewCardHeading = styled(H2)`\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n width: 100%;\n`\n\nexport const StyledSplitViewCardTitle = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: ${spacing.sm}px;\n min-height: 36px;\n`\n\nexport const StyledSplitViewCardHeader = styled.div`\n border-bottom: 1px solid ${colors.gray85};\n display: flex;\n flex-direction: column;\n padding: ${spacing.lg}px ${spacing.lg}px 0;\n`\n\nexport const StyledSplitViewCardBody = styled.div`\n display: flex;\n flex-direction: column;\n flex: 1;\n padding: ${spacing.lg}px ${spacing.lg}px 0;\n min-height: 400px;\n overflow-y: auto;\n`\n\nexport const StyledSplitViewCardFooter = styled.div<{ $hasShadow?: boolean }>`\n display: flex;\n align-items: center;\n justify-content: flex-end;\n padding: ${spacing.lg}px;\n\n ${({ $hasShadow }) =>\n $hasShadow &&\n css`\n box-shadow: 0 -4px 6px 0 #0000001a;\n `}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SACEC,wBAAwB,EACxBC,2BAA2B,QACtB,wBAAwB;AAC/B,SAASC,EAAE,QAAQ,aAAa;AAChC,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,IAAMC,eAAe,GAAG,GAAG;AAE3B,OAAO,IAAMC,4BAA4B,gBAAGR,MAAM,CAACS,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qRAGnCN,OAAO,CAACO,EAAE,EAEbN,eAAe,EAKRL,wBAAwB,CAACY,QAAQ,EAIzCR,OAAO,CAACO,EAAE,CAGxB;AAED,OAAO,IAAME,uBAAuB,gBAAGf,MAAM,CAACS,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4QAC3BP,MAAM,CAACW,KAAK,EACNV,OAAO,CAACO,EAAE,EACPP,OAAO,CAACO,EAAE,EAKlBX,wBAAwB,CAACY,QAAQ,EAEnCR,OAAO,CAACO,EAAE,EACVP,OAAO,CAACO,EAAE,EAI3B,UAAAI,IAAA;EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;EAAA,OACR,CAACA,KAAK,IACNjB,GAAG,uCACgBK,OAAO,CAACO,EAAE,CAE5B;AAAA,EACJ;AAED,OAAO,IAAMM,wBAAwB,gBAAGnB,MAAM,CAACS,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sdAI5BP,MAAM,CAACW,KAAK,EACPX,MAAM,CAACe,MAAM,EACXd,OAAO,CAACO,EAAE,EACPP,OAAO,CAACO,EAAE,EAK1BN,eAAe,EAQGJ,2BAA2B,CAACkB,QAAQ,EAI/CnB,wBAAwB,CAACY,QAAQ,EAGnCR,OAAO,CAACO,EAAE,EAK3B,UAAAS,KAAA;EAAA,IAAGJ,KAAK,GAAAI,KAAA,CAALJ,KAAK;EAAA,OACR,CAACA,KAAK,IACNjB,GAAG,iKAEgBK,OAAO,CAACO,EAAE,EAGNX,wBAAwB,CAACY,QAAQ,EAKjCZ,wBAAwB,CAACY,QAAQ,CAGvD;AAAA,GAED,UAAAS,KAAA;EAAA,IAAGC,UAAU,GAAAD,KAAA,CAAVC,UAAU;EAAA,OACbA,UAAU,IACVvB,GAAG,8CAEF;AAAA,EACJ;AAED,OAAO,IAAMwB,0BAA0B,gBAAGzB,MAAM,CAACI,EAAE,CAAC,CAAAM,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6EAKnD;AAED,OAAO,IAAMc,wBAAwB,gBAAG1B,MAAM,CAACS,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4GAI/BN,OAAO,CAACO,EAAE,CAE5B;AAED,OAAO,IAAMc,yBAAyB,gBAAG3B,MAAM,CAACS,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iGACtBP,MAAM,CAACe,MAAM,EAG7Bd,OAAO,CAACsB,EAAE,EAAMtB,OAAO,CAACsB,EAAE,CACtC;AAED,OAAO,IAAMC,uBAAuB,gBAAG7B,MAAM,CAACS,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4GAIpCN,OAAO,CAACsB,EAAE,EAAMtB,OAAO,CAACsB,EAAE,CAGtC;AAED,OAAO,IAAME,yBAAyB,gBAAG9B,MAAM,CAACS,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qFAItCN,OAAO,CAACsB,EAAE,EAEnB,UAAAG,KAAA;EAAA,IAAGP,UAAU,GAAAO,KAAA,CAAVP,UAAU;EAAA,OACbA,UAAU,IACVvB,GAAG,wCAEF;AAAA,EACJ"}
|
|
@@ -2,24 +2,47 @@ import type { Props } from '../_utils/types';
|
|
|
2
2
|
export interface SplitViewCardContextAPI {
|
|
3
3
|
/**
|
|
4
4
|
* If aside card is opened or not
|
|
5
|
-
* @since 12.
|
|
5
|
+
* @since 12.9.0
|
|
6
6
|
*/
|
|
7
7
|
open: boolean;
|
|
8
8
|
/**
|
|
9
9
|
* Open aside card
|
|
10
|
-
* @since 12.
|
|
10
|
+
* @since 12.9.0
|
|
11
11
|
*/
|
|
12
12
|
onOpen: () => void;
|
|
13
13
|
/**
|
|
14
14
|
* Close aside card
|
|
15
|
-
* @since 12.
|
|
15
|
+
* @since 12.9.0
|
|
16
16
|
*/
|
|
17
17
|
onClose: () => void;
|
|
18
|
+
/**
|
|
19
|
+
* Indicates whether the SplitViewCard can be closed
|
|
20
|
+
* */
|
|
21
|
+
isClosable?: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Indicates whether the user is actively scrolling within the SplitViewCard.Body
|
|
24
|
+
* @since 12.9.0
|
|
25
|
+
*/
|
|
26
|
+
isScrolling: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Callback to update the isScrolling flag
|
|
29
|
+
* @since 12.9.0
|
|
30
|
+
*/
|
|
31
|
+
setIsScrolling: (isScrolling: boolean) => void;
|
|
18
32
|
}
|
|
19
33
|
export interface SplitViewCardProps extends Props {
|
|
20
34
|
/**
|
|
21
|
-
*
|
|
22
|
-
*
|
|
35
|
+
* Indicates whether the SplitViewCard can be closed
|
|
36
|
+
* */
|
|
37
|
+
isClosable?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* If aside card is initially opened or not
|
|
40
|
+
* @since 12.9.0
|
|
23
41
|
*/
|
|
24
|
-
|
|
42
|
+
isInitiallyOpen?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* Callback for custom close event
|
|
45
|
+
* @since 12.9.0
|
|
46
|
+
*/
|
|
47
|
+
onClose?: () => void;
|
|
25
48
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitViewCard.types.js","names":[],"sources":["../../src/SplitViewCard/SplitViewCard.types.ts"],"sourcesContent":["import type { Props } from '../_utils/types'\n\nexport interface SplitViewCardContextAPI {\n /**\n * If aside card is opened or not\n * @since 12.
|
|
1
|
+
{"version":3,"file":"SplitViewCard.types.js","names":[],"sources":["../../src/SplitViewCard/SplitViewCard.types.ts"],"sourcesContent":["import type { Props } from '../_utils/types'\n\nexport interface SplitViewCardContextAPI {\n /**\n * If aside card is opened or not\n * @since 12.9.0\n */\n open: boolean\n /**\n * Open aside card\n * @since 12.9.0\n */\n onOpen: () => void\n /**\n * Close aside card\n * @since 12.9.0\n */\n onClose: () => void\n /**\n * Indicates whether the SplitViewCard can be closed\n * */\n isClosable?: boolean\n /**\n * Indicates whether the user is actively scrolling within the SplitViewCard.Body\n * @since 12.9.0\n */\n isScrolling: boolean\n\n /**\n * Callback to update the isScrolling flag\n * @since 12.9.0\n */\n setIsScrolling: (isScrolling: boolean) => void\n}\n\nexport interface SplitViewCardProps extends Props {\n /**\n * Indicates whether the SplitViewCard can be closed\n * */\n isClosable?: boolean\n /**\n * If aside card is initially opened or not\n * @since 12.9.0\n */\n isInitiallyOpen?: boolean\n /**\n * Callback for custom close event\n * @since 12.9.0\n */\n onClose?: () => void\n}\n"],"mappings":""}
|
|
@@ -1,4 +1,2 @@
|
|
|
1
1
|
export { SplitViewCard } from './SplitViewCard';
|
|
2
|
-
export { SplitViewCardContext, SplitViewCardContextProvider, } from './SplitViewCard.context';
|
|
3
2
|
export type { SplitViewCardContextAPI, SplitViewCardProps, } from './SplitViewCard.types';
|
|
4
|
-
export { useSplitViewCard } from './useSplitViewCard';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["SplitViewCard"
|
|
1
|
+
{"version":3,"file":"index.js","names":["SplitViewCard"],"sources":["../../src/SplitViewCard/index.ts"],"sourcesContent":["export { SplitViewCard } from './SplitViewCard'\nexport type {\n SplitViewCardContextAPI,\n SplitViewCardProps,\n} from './SplitViewCard.types'\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ,iBAAiB"}
|
|
@@ -3,6 +3,6 @@ import { Popover } from '../Popover';
|
|
|
3
3
|
import { spacing } from '../_styles/spacing';
|
|
4
4
|
export var StyledFilterPresetPopoverContent = /*#__PURE__*/styled(Popover.Content).withConfig({
|
|
5
5
|
displayName: "StyledFilterPresetPopoverContent",
|
|
6
|
-
componentId: "core-
|
|
6
|
+
componentId: "core-12_9_0__sc-y5qv7b-0"
|
|
7
7
|
})(["padding:", "px ", "px;"], spacing.sm, spacing.lg);
|
|
8
8
|
//# sourceMappingURL=SuperSelect.presets.styles.js.map
|