@procore/core-react 12.11.1 → 12.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AnchorNavigation/AnchorNavigation.styles.js +3 -3
- package/dist/Avatar/Avatar.styles.js +5 -5
- package/dist/AvatarStack/AvatarStack.d.ts +1 -1
- package/dist/AvatarStack/AvatarStack.js +4 -3
- package/dist/AvatarStack/AvatarStack.js.map +1 -1
- package/dist/AvatarStack/AvatarStack.styles.js +7 -7
- package/dist/AvatarStack/AvatarStack.types.d.ts +6 -0
- package/dist/AvatarStack/AvatarStack.types.js.map +1 -1
- 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.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/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.js +1 -1
- package/dist/DateInput/DateInput.js.map +1 -1
- 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.helpers.js +16 -0
- package/dist/DropdownFlyout/DropdownFlyout.helpers.js.map +1 -1
- package/dist/DropdownFlyout/DropdownFlyout.js +4 -1
- package/dist/DropdownFlyout/DropdownFlyout.js.map +1 -1
- package/dist/DropdownFlyout/DropdownFlyout.styles.js +4 -4
- package/dist/DropdownFlyout/DropdownFlyout.types.d.ts +3 -0
- package/dist/DropdownFlyout/DropdownFlyout.types.js.map +1 -1
- 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/GhostPlaceholder/GhostPlaceholder.styles.js +2 -2
- package/dist/Grid/Grid.styles.js +2 -2
- package/dist/GroupSelect/GroupSelect.styles.js +1 -1
- package/dist/Input/Input.styles.js +1 -1
- package/dist/Link/Link.styles.js +1 -1
- package/dist/ListPage/ListPage.styles.js +8 -8
- package/dist/Loader/Loader.styles.js +2 -2
- package/dist/MenuImperative/MenuImperative.styles.js +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.js +16 -16
- package/dist/Pagination/Pagination.styles.js +5 -5
- package/dist/Panel/Panel.d.ts +1 -1
- package/dist/Panel/Panel.js +30 -44
- package/dist/Panel/Panel.js.map +1 -1
- package/dist/Panel/Panel.styles.d.ts +2 -2
- package/dist/Panel/Panel.styles.js +14 -15
- package/dist/Panel/Panel.styles.js.map +1 -1
- package/dist/Panel/Panel.types.d.ts +5 -5
- package/dist/Panel/Panel.types.js.map +1 -1
- 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 +7 -7
- 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.styles.js +8 -8
- 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.styles.js +15 -15
- 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/Thumbnail/ThumbnailDocumentIcon.d.ts +1 -1
- package/dist/Thumbnail/ThumbnailDocumentIcon.js +23 -1
- package/dist/Thumbnail/ThumbnailDocumentIcon.js.map +1 -1
- package/dist/ThumbnailGrid/ThumbnailGrid.styles.js +7 -7
- package/dist/TieredSelect/TieredSelect.styles.js +9 -9
- package/dist/Tile/Tile.styles.js +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/ToolLandingPage/ToolLandingPage.styles.js +3 -3
- 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 +363 -1
- package/dist/_locales/en-AU.json +5 -5
- package/dist/_locales/en-CA.json +1 -1
- package/dist/_locales/en-GB.json +5 -5
- package/dist/_locales/en.json +1 -1
- package/dist/_locales/fr-CA.json +1 -1
- package/dist/_locales/fr-FR.json +1 -1
- package/dist/_locales/pl-PL.json +364 -2
- package/dist/_locales/pseudo.json +1 -1
- package/dist/_locales/pt-BR.json +2 -2
- package/dist/_typedoc/Avatar/Avatar.types.json +20 -20
- package/dist/_typedoc/AvatarStack/AvatarStack.types.json +33 -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 +5 -5
- 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 +730 -730
- package/dist/_typedoc/GhostPlaceholder/GhostPlaceholder.types.json +12 -12
- package/dist/_typedoc/Grid/Grid.types.json +8 -8
- package/dist/_typedoc/GroupSelect/GroupSelect.types.json +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 +33 -33
- package/dist/_typedoc/Pill/Pill.types.json +2 -2
- package/dist/_typedoc/PillSelect/PillSelect.types.json +48 -48
- 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 +15 -15
- 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 +12 -12
- package/dist/_typedoc/Switch/Switch.types.json +3 -3
- package/dist/_typedoc/Table/Table.types.json +100 -100
- 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 +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/ToolLandingPage/ToolLandingPage.types.json +7 -7
- 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/package.json +1 -1
|
@@ -5,11 +5,11 @@ import { getEllipsis } from '../_styles/mixins';
|
|
|
5
5
|
import { spacing } from '../_styles/spacing';
|
|
6
6
|
export var StyledAnchorNavigation = /*#__PURE__*/styled.ul.withConfig({
|
|
7
7
|
displayName: "StyledAnchorNavigation",
|
|
8
|
-
componentId: "core-
|
|
8
|
+
componentId: "core-12_12_1__sc-aacdj4-0"
|
|
9
9
|
})(["max-width:200px;margin:0;padding-inline-start:0;"]);
|
|
10
10
|
export var StyledAnchorSection = /*#__PURE__*/styled.li.withConfig({
|
|
11
11
|
displayName: "StyledAnchorSection",
|
|
12
|
-
componentId: "core-
|
|
12
|
+
componentId: "core-12_12_1__sc-aacdj4-1"
|
|
13
13
|
})(["display:flex;cursor:pointer;border-left:", "px solid ", ";background-color:", ";border-top-right-radius:4px;border-bottom-right-radius:4px;:hover{border-left:", "px solid ", ";background-color:", ";}"], spacing.xs, function (_ref) {
|
|
14
14
|
var $active = _ref.$active;
|
|
15
15
|
return $active ? colors.gray15 : colors.gray90;
|
|
@@ -22,7 +22,7 @@ export var StyledAnchorSection = /*#__PURE__*/styled.li.withConfig({
|
|
|
22
22
|
}, colors.gray90);
|
|
23
23
|
export var StyledAnchor = /*#__PURE__*/styled.a.withConfig({
|
|
24
24
|
displayName: "StyledAnchor",
|
|
25
|
-
componentId: "core-
|
|
25
|
+
componentId: "core-12_12_1__sc-aacdj4-2"
|
|
26
26
|
})(["width:100%;padding:6px ", "px;", " ", ";", " :focus-visible{box-shadow:inset 0 0 0 2px ", ";outline:none;}"], spacing.sm, getTypographyIntent('body'), function (_ref4) {
|
|
27
27
|
var $active = _ref4.$active;
|
|
28
28
|
return $active ? css(["font-weight:600;"]) : '';
|
|
@@ -24,26 +24,26 @@ var iconSize = {
|
|
|
24
24
|
};
|
|
25
25
|
export var StyledAvatarOverlay = /*#__PURE__*/styled.div.withConfig({
|
|
26
26
|
displayName: "StyledAvatarOverlay",
|
|
27
|
-
componentId: "core-
|
|
27
|
+
componentId: "core-12_12_1__sc-7q2ydl-0"
|
|
28
28
|
})(["width:100%;height:100%;position:absolute;top:0;left:0;border-radius:100%;opacity:0;"]);
|
|
29
29
|
export var StyledIconContainer = /*#__PURE__*/styled.div.withConfig({
|
|
30
30
|
displayName: "StyledIconContainer",
|
|
31
|
-
componentId: "core-
|
|
31
|
+
componentId: "core-12_12_1__sc-7q2ydl-1"
|
|
32
32
|
})(["display:inline-flex;"]);
|
|
33
33
|
export var StyledLabelContainer = /*#__PURE__*/styled.div.withConfig({
|
|
34
34
|
displayName: "StyledLabelContainer",
|
|
35
|
-
componentId: "core-
|
|
35
|
+
componentId: "core-12_12_1__sc-7q2ydl-2"
|
|
36
36
|
})(["text-transform:uppercase;"]);
|
|
37
37
|
export var StyledPortraitContainer = /*#__PURE__*/styled.div.withConfig({
|
|
38
38
|
displayName: "StyledPortraitContainer",
|
|
39
|
-
componentId: "core-
|
|
39
|
+
componentId: "core-12_12_1__sc-7q2ydl-3"
|
|
40
40
|
})(["background-color:", ";background-position:center;background-repeat:no-repeat;background-size:cover;height:100%;width:100%;", ""], colors.white, function (_ref) {
|
|
41
41
|
var $imageUrl = _ref.$imageUrl;
|
|
42
42
|
return css(["background-image:url(", ");"], $imageUrl);
|
|
43
43
|
});
|
|
44
44
|
export var StyledAvatarContainer = /*#__PURE__*/styled.div.withConfig({
|
|
45
45
|
displayName: "StyledAvatarContainer",
|
|
46
|
-
componentId: "core-
|
|
46
|
+
componentId: "core-12_12_1__sc-7q2ydl-4"
|
|
47
47
|
})(["display:inline-flex;justify-content:center;align-items:center;border-radius:100%;overflow:hidden;position:relative;cursor:default;color:", ";background-color:", ";text-decoration:none;a:has(> &){text-decoration:none;}&:focus{", "}a:focus:has(> &){", " border-radius:100%;}", " ", ";"], colors.white, colors.gray30, getGapOutlineFocus, getGapOutlineFocus, function (_ref2) {
|
|
48
48
|
var _ref2$$size = _ref2.$size,
|
|
49
49
|
$size = _ref2$$size === void 0 ? 'md' : _ref2$$size;
|
|
@@ -29,7 +29,7 @@ export declare function getTransformedItems<Item extends AvatarStackItem>({ item
|
|
|
29
29
|
initials: string;
|
|
30
30
|
imageUrl: string;
|
|
31
31
|
})[];
|
|
32
|
-
declare const _AvatarStack: <Item extends AvatarStackItem>({ items: _items, title, size, getInitials, getImageUrl, ...props }: AvatarStackProps<Item>, ref: React.ForwardedRef<HTMLDivElement>) => React.JSX.Element;
|
|
32
|
+
declare const _AvatarStack: <Item extends AvatarStackItem>({ items: _items, title, size, getInitials, getImageUrl, onClickViewAll, ...props }: AvatarStackProps<Item>, ref: React.ForwardedRef<HTMLDivElement>) => React.JSX.Element;
|
|
33
33
|
/**
|
|
34
34
|
|
|
35
35
|
We use avatars to visually represent our users, places, and things in the app.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
2
|
-
var _excluded = ["items", "title", "size", "getInitials", "getImageUrl"];
|
|
2
|
+
var _excluded = ["items", "title", "size", "getInitials", "getImageUrl", "onClickViewAll"];
|
|
3
3
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
4
4
|
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."); }
|
|
5
5
|
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); }
|
|
@@ -285,6 +285,7 @@ var _AvatarStack = function _AvatarStack(_ref8, ref) {
|
|
|
285
285
|
getInitials = _ref8$getInitials === void 0 ? defaultInitials : _ref8$getInitials,
|
|
286
286
|
_ref8$getImageUrl = _ref8.getImageUrl,
|
|
287
287
|
getImageUrl = _ref8$getImageUrl === void 0 ? defaultGetImageUrl : _ref8$getImageUrl,
|
|
288
|
+
onClickViewAll = _ref8.onClickViewAll,
|
|
288
289
|
props = _objectWithoutProperties(_ref8, _excluded);
|
|
289
290
|
var _useState = useState(false),
|
|
290
291
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -309,7 +310,7 @@ var _AvatarStack = function _AvatarStack(_ref8, ref) {
|
|
|
309
310
|
}, [visibleItems]);
|
|
310
311
|
return /*#__PURE__*/React.createElement("div", _extends({
|
|
311
312
|
ref: ref
|
|
312
|
-
}, props), isViewAllNeeded && /*#__PURE__*/React.createElement(ViewAllModal, {
|
|
313
|
+
}, props), isViewAllNeeded && !onClickViewAll && /*#__PURE__*/React.createElement(ViewAllModal, {
|
|
313
314
|
isOpen: isModalOpen,
|
|
314
315
|
onClose: function onClose() {
|
|
315
316
|
return setIsModalOpen(false);
|
|
@@ -327,7 +328,7 @@ var _AvatarStack = function _AvatarStack(_ref8, ref) {
|
|
|
327
328
|
restCountLabel: restCountLabel,
|
|
328
329
|
isViewAllNeeded: isViewAllNeeded,
|
|
329
330
|
items: foldedItems,
|
|
330
|
-
onClickViewAll: function
|
|
331
|
+
onClickViewAll: onClickViewAll || function () {
|
|
331
332
|
return setIsModalOpen(true);
|
|
332
333
|
},
|
|
333
334
|
size: size,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarStack.js","names":["Building","People","useId","React","forwardRef","useMemo","useState","Avatar","Button","ContactItem","Link","Modal","Popover","Typography","useI18nContext","colorsOrder","foldedItemsCap","restCountThreshold","visibleItemsCap","StyledAvatar","StyledContactItem","StyledContactItems","StyledModalBody","StyledViewAllWrapper","StyledWrapper","defaultPopoverTrigger","getOverflowValues","items","foldedItems","restCountLabel","isViewAllNeeded","visibleItems","length","slice","restItemsCount","concat","getIcon","type","size","createElement","getContactIcon","getAvatarIcon","avatarSize","getColorOrder","avatarItems","reduce","_ref","item","map","color","imageUrl","inactive","set","id","currentColorIndex","indexOf","nextColorIndex","Map","AvatarStackContactItem","_ref2","initials","name","linkUrl","description","key","icon","disabled","Title","href","Description","AvatarContent","_ref3","avatarIcon","Portrait","Icon","Label","AvatarWithPopover","_ref4","colors","hasEnabledLink","avatarProps","role","tabIndex","trigger","overlay","Content","_extends","$color","get","FoldedAvatarStack","_ref5","onClickViewAll","title","I18n","overlayRef","useRef","restAvatarId","beforeHide","e","onClick","variant","t","onPress","ViewAllModal","_ref6","isOpen","onClose","labelId","open","Header","Footer","FooterButtons","defaultInitials","defaultGetImageUrl","getTransformedItems","_ref7","getInitials","getImageUrl","_objectSpread","_AvatarStack","_ref8","ref","_items","_ref8$size","_ref8$getInitials","_ref8$getImageUrl","props","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","isModalOpen","setIsModalOpen","_useMemo","visibleItemsColors","AvatarStack","displayName"],"sources":["../../src/AvatarStack/AvatarStack.tsx"],"sourcesContent":["import { Building, People } from '@procore/core-icons'\nimport { useId } from '@react-aria/utils'\nimport React, { forwardRef, useMemo, useState } from 'react'\nimport { Avatar } from '../Avatar/Avatar'\nimport { Button } from '../Button/Button'\nimport { ContactItem } from '../ContactItem/ContactItem'\nimport { Link } from '../Link/Link'\nimport { Modal } from '../Modal/Modal'\nimport type { OverlayTriggerRef } from '../OverlayTrigger/OverlayTrigger.types'\nimport { Popover } from '../Popover/Popover'\nimport { Typography } from '../Typography/Typography'\nimport { useI18nContext } from '../_hooks/I18n'\nimport type { TriggerVariant } from '../_hooks/Trigger'\nimport type { Color } from '../_styles/colors'\nimport {\n colorsOrder,\n foldedItemsCap,\n restCountThreshold,\n visibleItemsCap,\n} from './AvatarStack.constants'\nimport {\n StyledAvatar,\n StyledContactItem,\n StyledContactItems,\n StyledModalBody,\n StyledViewAllWrapper,\n StyledWrapper,\n} from './AvatarStack.styles'\nimport type {\n AvatarStackItem,\n AvatarStackItemId,\n AvatarStackItemType,\n AvatarStackProps,\n AvatarStackSize,\n FoldedAvatarStackProps,\n ViewAllModalProps,\n} from './AvatarStack.types'\n\nconst defaultPopoverTrigger: TriggerVariant[] = ['hover', 'focus']\n\nexport function getOverflowValues<Item extends AvatarStackItem>(items: Item[]) {\n let foldedItems: Item[] = []\n let restCountLabel: string | null = null\n let isViewAllNeeded = false\n\n const visibleItems =\n items.length > visibleItemsCap ? items.slice(0, visibleItemsCap - 1) : items\n const restItemsCount = items.length - visibleItems.length\n\n if (restItemsCount > 0) {\n foldedItems = items.slice(\n visibleItems.length,\n visibleItems.length + foldedItemsCap\n )\n\n restCountLabel =\n restItemsCount > restCountThreshold\n ? `${restCountThreshold}+`\n : `+${restItemsCount}`\n\n isViewAllNeeded = restItemsCount > foldedItemsCap\n }\n\n return {\n visibleItems,\n foldedItems,\n restCountLabel,\n isViewAllNeeded,\n }\n}\n\nexport function getIcon(type: AvatarStackItemType, size: 'md' | 'sm') {\n switch (type) {\n case 'company':\n return <Building size={size} />\n\n case 'group':\n return <People size={size} />\n\n case 'user':\n default:\n return null\n }\n}\n\nfunction getContactIcon(type: AvatarStackItemType) {\n return getIcon(type, 'md')\n}\n\nexport function getAvatarIcon(\n type: AvatarStackItemType,\n size: AvatarStackSize\n) {\n const avatarSize = size === 'lg' ? 'md' : 'sm'\n return getIcon(type, avatarSize)\n}\n\nexport function getColorOrder(avatarItems: AvatarStackItem[]) {\n return avatarItems.reduce(\n ({ map, color }, item) => {\n if (item.imageUrl) {\n return {\n map,\n color,\n }\n }\n\n if (item.inactive) {\n map.set(item.id, 'gray70')\n\n return {\n map,\n color,\n }\n }\n\n map.set(item.id, color)\n\n const currentColorIndex = colorsOrder.indexOf(color)\n const nextColorIndex = (currentColorIndex + 1) % colorsOrder.length\n return {\n map,\n color: item.imageUrl ? color : colorsOrder[nextColorIndex],\n }\n },\n {\n map: new Map<AvatarStackItemId, Color>(),\n color: colorsOrder[0],\n }\n ).map\n}\n\nexport function AvatarStackContactItem({\n id,\n type,\n imageUrl,\n initials,\n inactive,\n name,\n linkUrl,\n description,\n}: AvatarStackItem) {\n return (\n <StyledContactItem\n key={id}\n imageUrl={imageUrl}\n initials={initials}\n icon={getContactIcon(type)}\n disabled={inactive}\n >\n <ContactItem.Title>\n {!inactive && linkUrl ? <Link href={linkUrl}>{name}</Link> : name}\n </ContactItem.Title>\n <ContactItem.Description>\n {type === 'group' ? (\n <Typography color=\"gray15\">{description}</Typography>\n ) : (\n description\n )}\n </ContactItem.Description>\n </StyledContactItem>\n )\n}\n\nexport function AvatarContent({\n imageUrl,\n initials,\n type,\n size,\n}: {\n imageUrl?: AvatarStackItem['imageUrl']\n initials: AvatarStackItem['initials']\n type: AvatarStackItem['type']\n size: AvatarStackSize\n}) {\n const avatarIcon = getAvatarIcon(type, size)\n\n if (imageUrl) {\n return <Avatar.Portrait imageUrl={imageUrl} />\n }\n\n if (avatarIcon) {\n return <Avatar.Icon icon={avatarIcon} />\n }\n\n if (initials) {\n return <Avatar.Label>{initials}</Avatar.Label>\n }\n\n return null\n}\n\nfunction AvatarWithPopover<Item extends AvatarStackItem>({\n item,\n size,\n colors,\n}: {\n item: Item\n size: AvatarStackSize\n colors: Map<AvatarStackItemId, Color>\n}) {\n const hasEnabledLink = item.linkUrl && !item.inactive\n const avatarProps = hasEnabledLink\n ? {\n role: 'link',\n href: item.linkUrl,\n }\n : {\n role: 'img',\n // Allow SR to open Popover as it cycles through. Keeps visual with audio.\n // The link or image is labelled, and focus does not enter the Popover.\n tabIndex: -1,\n }\n\n return (\n <Popover\n key={item.id}\n trigger={defaultPopoverTrigger}\n overlay={\n <Popover.Content>\n <AvatarStackContactItem\n id={item.id}\n type={item.type}\n imageUrl={item.imageUrl}\n initials={item.initials}\n inactive={item.inactive}\n name={item.name}\n linkUrl={item.linkUrl}\n description={item.description}\n />\n </Popover.Content>\n }\n >\n <StyledAvatar\n {...avatarProps}\n aria-label={`${item.name}, ${item.description}`}\n disabled={item.inactive}\n size={size}\n $color={colors.get(item.id) as Color}\n >\n <AvatarContent\n imageUrl={item.imageUrl}\n initials={item.initials}\n type={item.type}\n size={size}\n />\n </StyledAvatar>\n </Popover>\n )\n}\n\nexport function FoldedAvatarStack<Item extends AvatarStackItem>({\n items,\n onClickViewAll,\n size,\n restCountLabel,\n isViewAllNeeded,\n title,\n}: FoldedAvatarStackProps<Item>) {\n const I18n = useI18nContext()\n const overlayRef = React.useRef<OverlayTriggerRef>(null)\n const restAvatarId = useId()\n\n return (\n <Popover\n trigger={defaultPopoverTrigger}\n aria-labelledby={restAvatarId}\n overlayRef={overlayRef}\n beforeHide={(e) => {\n return e.type !== 'blur'\n }}\n overlay={\n <Popover.Content>\n <StyledContactItems>\n {items.map((item) => (\n <AvatarStackContactItem\n key={item.id}\n id={item.id}\n type={item.type}\n imageUrl={item.imageUrl}\n initials={item.initials}\n inactive={item.inactive}\n name={item.name}\n linkUrl={item.linkUrl}\n description={item.description}\n />\n ))}\n </StyledContactItems>\n {isViewAllNeeded && (\n <StyledViewAllWrapper>\n <Button\n data-qa=\"core-avatar-stack-view-all-modal-trigger\"\n onClick={onClickViewAll}\n size=\"sm\"\n variant=\"secondary\"\n >\n {I18n.t('core.avatarStack.viewAll')}\n </Button>\n </StyledViewAllWrapper>\n )}\n </Popover.Content>\n }\n >\n <StyledAvatar\n role=\"button\"\n onPress={onClickViewAll}\n id={restAvatarId}\n aria-label={`${restCountLabel}, ${title}`}\n data-qa=\"core-avatar-stack-folded-avatars-popover-trigger\"\n size={size}\n $color=\"gray85\"\n >\n <Avatar.Label aria-hidden>\n <Typography color=\"black\">{restCountLabel}</Typography>\n </Avatar.Label>\n </StyledAvatar>\n </Popover>\n )\n}\n\nexport function ViewAllModal<Item extends AvatarStackItem>({\n isOpen,\n onClose,\n title,\n items,\n}: ViewAllModalProps<Item>) {\n const I18n = useI18nContext()\n const labelId = useId()\n\n return (\n <Modal\n role=\"dialog\"\n aria-labelledby={labelId}\n open={isOpen}\n onClose={onClose}\n >\n <Modal.Header onClose={onClose}>\n <span id={labelId}>\n {title} ({items.length})\n </span>\n </Modal.Header>\n <StyledModalBody>\n {items.map((item) => (\n <AvatarStackContactItem\n key={item.id}\n id={item.id}\n type={item.type}\n imageUrl={item.imageUrl}\n initials={item.initials}\n inactive={item.inactive}\n name={item.name}\n linkUrl={item.linkUrl}\n description={item.description}\n />\n ))}\n </StyledModalBody>\n <Modal.Footer>\n <Modal.FooterButtons>\n <Button onClick={onClose}>{I18n.t('core.avatarStack.close')}</Button>\n </Modal.FooterButtons>\n </Modal.Footer>\n </Modal>\n )\n}\n\nexport function defaultInitials<Item extends AvatarStackItem>(item: Item) {\n return item.initials as string\n}\n\nexport function defaultGetImageUrl<Item extends AvatarStackItem>(item: Item) {\n return item.imageUrl as string\n}\n\nexport function getTransformedItems<Item extends AvatarStackItem>({\n items,\n getInitials,\n getImageUrl,\n}: {\n items: Item[]\n getInitials: AvatarStackProps<Item>['getInitials']\n getImageUrl: AvatarStackProps<Item>['getImageUrl']\n}) {\n return items.map((item) => ({\n ...item,\n initials: getInitials!(item),\n imageUrl: getImageUrl!(item),\n }))\n}\n\nconst _AvatarStack = <Item extends AvatarStackItem>(\n {\n items: _items,\n title,\n size = 'lg',\n getInitials = defaultInitials,\n getImageUrl = defaultGetImageUrl,\n ...props\n }: AvatarStackProps<Item>,\n ref: React.ForwardedRef<HTMLDivElement>\n) => {\n const [isModalOpen, setIsModalOpen] = useState(false)\n\n const items = useMemo(\n () =>\n getTransformedItems({\n items: _items,\n getInitials,\n getImageUrl,\n }),\n [_items]\n )\n\n const { visibleItems, foldedItems, restCountLabel, isViewAllNeeded } =\n useMemo(() => getOverflowValues(items), [items])\n\n const visibleItemsColors = useMemo(\n () => getColorOrder(visibleItems),\n [visibleItems]\n )\n\n return (\n <div ref={ref} {...props}>\n {isViewAllNeeded && (\n <ViewAllModal\n isOpen={isModalOpen}\n onClose={() => setIsModalOpen(false)}\n title={title}\n items={items}\n />\n )}\n <StyledWrapper>\n {visibleItems.map((item) => {\n return (\n <AvatarWithPopover\n colors={visibleItemsColors}\n item={item}\n key={`${item.name}_${item.id}`}\n size={size}\n />\n )\n })}\n {foldedItems.length > 0 && (\n <FoldedAvatarStack\n restCountLabel={restCountLabel as string}\n isViewAllNeeded={isViewAllNeeded}\n items={foldedItems}\n onClickViewAll={() => setIsModalOpen(true)}\n size={size}\n title={title}\n />\n )}\n </StyledWrapper>\n </div>\n )\n}\n\n/**\n\n We use avatars to visually represent our users, places, and things in the app.\n These can be in the form of rich media or representative illustrations.\n\n @since 10.19.0\n\n @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-avatarstack--demo)\n\n @see [Design Guidelines](https://design.procore.com/avatar-stack)\n */\nexport const AvatarStack = forwardRef(_AvatarStack) as <\n Item extends AvatarStackItem\n>(\n props: AvatarStackProps<Item> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => ReturnType<typeof _AvatarStack>\n\n// @ts-ignore\nAvatarStack.displayName = 'AvatarStack'\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"AvatarStack.js","names":["Building","People","useId","React","forwardRef","useMemo","useState","Avatar","Button","ContactItem","Link","Modal","Popover","Typography","useI18nContext","colorsOrder","foldedItemsCap","restCountThreshold","visibleItemsCap","StyledAvatar","StyledContactItem","StyledContactItems","StyledModalBody","StyledViewAllWrapper","StyledWrapper","defaultPopoverTrigger","getOverflowValues","items","foldedItems","restCountLabel","isViewAllNeeded","visibleItems","length","slice","restItemsCount","concat","getIcon","type","size","createElement","getContactIcon","getAvatarIcon","avatarSize","getColorOrder","avatarItems","reduce","_ref","item","map","color","imageUrl","inactive","set","id","currentColorIndex","indexOf","nextColorIndex","Map","AvatarStackContactItem","_ref2","initials","name","linkUrl","description","key","icon","disabled","Title","href","Description","AvatarContent","_ref3","avatarIcon","Portrait","Icon","Label","AvatarWithPopover","_ref4","colors","hasEnabledLink","avatarProps","role","tabIndex","trigger","overlay","Content","_extends","$color","get","FoldedAvatarStack","_ref5","onClickViewAll","title","I18n","overlayRef","useRef","restAvatarId","beforeHide","e","onClick","variant","t","onPress","ViewAllModal","_ref6","isOpen","onClose","labelId","open","Header","Footer","FooterButtons","defaultInitials","defaultGetImageUrl","getTransformedItems","_ref7","getInitials","getImageUrl","_objectSpread","_AvatarStack","_ref8","ref","_items","_ref8$size","_ref8$getInitials","_ref8$getImageUrl","props","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","isModalOpen","setIsModalOpen","_useMemo","visibleItemsColors","AvatarStack","displayName"],"sources":["../../src/AvatarStack/AvatarStack.tsx"],"sourcesContent":["import { Building, People } from '@procore/core-icons'\nimport { useId } from '@react-aria/utils'\nimport React, { forwardRef, useMemo, useState } from 'react'\nimport { Avatar } from '../Avatar/Avatar'\nimport { Button } from '../Button/Button'\nimport { ContactItem } from '../ContactItem/ContactItem'\nimport { Link } from '../Link/Link'\nimport { Modal } from '../Modal/Modal'\nimport type { OverlayTriggerRef } from '../OverlayTrigger/OverlayTrigger.types'\nimport { Popover } from '../Popover/Popover'\nimport { Typography } from '../Typography/Typography'\nimport { useI18nContext } from '../_hooks/I18n'\nimport type { TriggerVariant } from '../_hooks/Trigger'\nimport type { Color } from '../_styles/colors'\nimport {\n colorsOrder,\n foldedItemsCap,\n restCountThreshold,\n visibleItemsCap,\n} from './AvatarStack.constants'\nimport {\n StyledAvatar,\n StyledContactItem,\n StyledContactItems,\n StyledModalBody,\n StyledViewAllWrapper,\n StyledWrapper,\n} from './AvatarStack.styles'\nimport type {\n AvatarStackItem,\n AvatarStackItemId,\n AvatarStackItemType,\n AvatarStackProps,\n AvatarStackSize,\n FoldedAvatarStackProps,\n ViewAllModalProps,\n} from './AvatarStack.types'\n\nconst defaultPopoverTrigger: TriggerVariant[] = ['hover', 'focus']\n\nexport function getOverflowValues<Item extends AvatarStackItem>(items: Item[]) {\n let foldedItems: Item[] = []\n let restCountLabel: string | null = null\n let isViewAllNeeded = false\n\n const visibleItems =\n items.length > visibleItemsCap ? items.slice(0, visibleItemsCap - 1) : items\n const restItemsCount = items.length - visibleItems.length\n\n if (restItemsCount > 0) {\n foldedItems = items.slice(\n visibleItems.length,\n visibleItems.length + foldedItemsCap\n )\n\n restCountLabel =\n restItemsCount > restCountThreshold\n ? `${restCountThreshold}+`\n : `+${restItemsCount}`\n\n isViewAllNeeded = restItemsCount > foldedItemsCap\n }\n\n return {\n visibleItems,\n foldedItems,\n restCountLabel,\n isViewAllNeeded,\n }\n}\n\nexport function getIcon(type: AvatarStackItemType, size: 'md' | 'sm') {\n switch (type) {\n case 'company':\n return <Building size={size} />\n\n case 'group':\n return <People size={size} />\n\n case 'user':\n default:\n return null\n }\n}\n\nfunction getContactIcon(type: AvatarStackItemType) {\n return getIcon(type, 'md')\n}\n\nexport function getAvatarIcon(\n type: AvatarStackItemType,\n size: AvatarStackSize\n) {\n const avatarSize = size === 'lg' ? 'md' : 'sm'\n return getIcon(type, avatarSize)\n}\n\nexport function getColorOrder(avatarItems: AvatarStackItem[]) {\n return avatarItems.reduce(\n ({ map, color }, item) => {\n if (item.imageUrl) {\n return {\n map,\n color,\n }\n }\n\n if (item.inactive) {\n map.set(item.id, 'gray70')\n\n return {\n map,\n color,\n }\n }\n\n map.set(item.id, color)\n\n const currentColorIndex = colorsOrder.indexOf(color)\n const nextColorIndex = (currentColorIndex + 1) % colorsOrder.length\n return {\n map,\n color: item.imageUrl ? color : colorsOrder[nextColorIndex],\n }\n },\n {\n map: new Map<AvatarStackItemId, Color>(),\n color: colorsOrder[0],\n }\n ).map\n}\n\nexport function AvatarStackContactItem({\n id,\n type,\n imageUrl,\n initials,\n inactive,\n name,\n linkUrl,\n description,\n}: AvatarStackItem) {\n return (\n <StyledContactItem\n key={id}\n imageUrl={imageUrl}\n initials={initials}\n icon={getContactIcon(type)}\n disabled={inactive}\n >\n <ContactItem.Title>\n {!inactive && linkUrl ? <Link href={linkUrl}>{name}</Link> : name}\n </ContactItem.Title>\n <ContactItem.Description>\n {type === 'group' ? (\n <Typography color=\"gray15\">{description}</Typography>\n ) : (\n description\n )}\n </ContactItem.Description>\n </StyledContactItem>\n )\n}\n\nexport function AvatarContent({\n imageUrl,\n initials,\n type,\n size,\n}: {\n imageUrl?: AvatarStackItem['imageUrl']\n initials: AvatarStackItem['initials']\n type: AvatarStackItem['type']\n size: AvatarStackSize\n}) {\n const avatarIcon = getAvatarIcon(type, size)\n\n if (imageUrl) {\n return <Avatar.Portrait imageUrl={imageUrl} />\n }\n\n if (avatarIcon) {\n return <Avatar.Icon icon={avatarIcon} />\n }\n\n if (initials) {\n return <Avatar.Label>{initials}</Avatar.Label>\n }\n\n return null\n}\n\nfunction AvatarWithPopover<Item extends AvatarStackItem>({\n item,\n size,\n colors,\n}: {\n item: Item\n size: AvatarStackSize\n colors: Map<AvatarStackItemId, Color>\n}) {\n const hasEnabledLink = item.linkUrl && !item.inactive\n const avatarProps = hasEnabledLink\n ? {\n role: 'link',\n href: item.linkUrl,\n }\n : {\n role: 'img',\n // Allow SR to open Popover as it cycles through. Keeps visual with audio.\n // The link or image is labelled, and focus does not enter the Popover.\n tabIndex: -1,\n }\n\n return (\n <Popover\n key={item.id}\n trigger={defaultPopoverTrigger}\n overlay={\n <Popover.Content>\n <AvatarStackContactItem\n id={item.id}\n type={item.type}\n imageUrl={item.imageUrl}\n initials={item.initials}\n inactive={item.inactive}\n name={item.name}\n linkUrl={item.linkUrl}\n description={item.description}\n />\n </Popover.Content>\n }\n >\n <StyledAvatar\n {...avatarProps}\n aria-label={`${item.name}, ${item.description}`}\n disabled={item.inactive}\n size={size}\n $color={colors.get(item.id) as Color}\n >\n <AvatarContent\n imageUrl={item.imageUrl}\n initials={item.initials}\n type={item.type}\n size={size}\n />\n </StyledAvatar>\n </Popover>\n )\n}\n\nexport function FoldedAvatarStack<Item extends AvatarStackItem>({\n items,\n onClickViewAll,\n size,\n restCountLabel,\n isViewAllNeeded,\n title,\n}: FoldedAvatarStackProps<Item>) {\n const I18n = useI18nContext()\n const overlayRef = React.useRef<OverlayTriggerRef>(null)\n const restAvatarId = useId()\n\n return (\n <Popover\n trigger={defaultPopoverTrigger}\n aria-labelledby={restAvatarId}\n overlayRef={overlayRef}\n beforeHide={(e) => {\n return e.type !== 'blur'\n }}\n overlay={\n <Popover.Content>\n <StyledContactItems>\n {items.map((item) => (\n <AvatarStackContactItem\n key={item.id}\n id={item.id}\n type={item.type}\n imageUrl={item.imageUrl}\n initials={item.initials}\n inactive={item.inactive}\n name={item.name}\n linkUrl={item.linkUrl}\n description={item.description}\n />\n ))}\n </StyledContactItems>\n {isViewAllNeeded && (\n <StyledViewAllWrapper>\n <Button\n data-qa=\"core-avatar-stack-view-all-modal-trigger\"\n onClick={onClickViewAll}\n size=\"sm\"\n variant=\"secondary\"\n >\n {I18n.t('core.avatarStack.viewAll')}\n </Button>\n </StyledViewAllWrapper>\n )}\n </Popover.Content>\n }\n >\n <StyledAvatar\n role=\"button\"\n onPress={onClickViewAll}\n id={restAvatarId}\n aria-label={`${restCountLabel}, ${title}`}\n data-qa=\"core-avatar-stack-folded-avatars-popover-trigger\"\n size={size}\n $color=\"gray85\"\n >\n <Avatar.Label aria-hidden>\n <Typography color=\"black\">{restCountLabel}</Typography>\n </Avatar.Label>\n </StyledAvatar>\n </Popover>\n )\n}\n\nexport function ViewAllModal<Item extends AvatarStackItem>({\n isOpen,\n onClose,\n title,\n items,\n}: ViewAllModalProps<Item>) {\n const I18n = useI18nContext()\n const labelId = useId()\n\n return (\n <Modal\n role=\"dialog\"\n aria-labelledby={labelId}\n open={isOpen}\n onClose={onClose}\n >\n <Modal.Header onClose={onClose}>\n <span id={labelId}>\n {title} ({items.length})\n </span>\n </Modal.Header>\n <StyledModalBody>\n {items.map((item) => (\n <AvatarStackContactItem\n key={item.id}\n id={item.id}\n type={item.type}\n imageUrl={item.imageUrl}\n initials={item.initials}\n inactive={item.inactive}\n name={item.name}\n linkUrl={item.linkUrl}\n description={item.description}\n />\n ))}\n </StyledModalBody>\n <Modal.Footer>\n <Modal.FooterButtons>\n <Button onClick={onClose}>{I18n.t('core.avatarStack.close')}</Button>\n </Modal.FooterButtons>\n </Modal.Footer>\n </Modal>\n )\n}\n\nexport function defaultInitials<Item extends AvatarStackItem>(item: Item) {\n return item.initials as string\n}\n\nexport function defaultGetImageUrl<Item extends AvatarStackItem>(item: Item) {\n return item.imageUrl as string\n}\n\nexport function getTransformedItems<Item extends AvatarStackItem>({\n items,\n getInitials,\n getImageUrl,\n}: {\n items: Item[]\n getInitials: AvatarStackProps<Item>['getInitials']\n getImageUrl: AvatarStackProps<Item>['getImageUrl']\n}) {\n return items.map((item) => ({\n ...item,\n initials: getInitials!(item),\n imageUrl: getImageUrl!(item),\n }))\n}\n\nconst _AvatarStack = <Item extends AvatarStackItem>(\n {\n items: _items,\n title,\n size = 'lg',\n getInitials = defaultInitials,\n getImageUrl = defaultGetImageUrl,\n onClickViewAll,\n ...props\n }: AvatarStackProps<Item>,\n ref: React.ForwardedRef<HTMLDivElement>\n) => {\n const [isModalOpen, setIsModalOpen] = useState(false)\n\n const items = useMemo(\n () =>\n getTransformedItems({\n items: _items,\n getInitials,\n getImageUrl,\n }),\n [_items]\n )\n\n const { visibleItems, foldedItems, restCountLabel, isViewAllNeeded } =\n useMemo(() => getOverflowValues(items), [items])\n\n const visibleItemsColors = useMemo(\n () => getColorOrder(visibleItems),\n [visibleItems]\n )\n\n return (\n <div ref={ref} {...props}>\n {isViewAllNeeded && !onClickViewAll && (\n <ViewAllModal\n isOpen={isModalOpen}\n onClose={() => setIsModalOpen(false)}\n title={title}\n items={items}\n />\n )}\n <StyledWrapper>\n {visibleItems.map((item) => {\n return (\n <AvatarWithPopover\n colors={visibleItemsColors}\n item={item}\n key={`${item.name}_${item.id}`}\n size={size}\n />\n )\n })}\n {foldedItems.length > 0 && (\n <FoldedAvatarStack\n restCountLabel={restCountLabel as string}\n isViewAllNeeded={isViewAllNeeded}\n items={foldedItems}\n onClickViewAll={onClickViewAll || (() => setIsModalOpen(true))}\n size={size}\n title={title}\n />\n )}\n </StyledWrapper>\n </div>\n )\n}\n\n/**\n\n We use avatars to visually represent our users, places, and things in the app.\n These can be in the form of rich media or representative illustrations.\n\n @since 10.19.0\n\n @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-avatarstack--demo)\n\n @see [Design Guidelines](https://design.procore.com/avatar-stack)\n */\nexport const AvatarStack = forwardRef(_AvatarStack) as <\n Item extends AvatarStackItem\n>(\n props: AvatarStackProps<Item> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => ReturnType<typeof _AvatarStack>\n\n// @ts-ignore\nAvatarStack.displayName = 'AvatarStack'\n"],"mappings":"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"}
|
|
@@ -7,32 +7,32 @@ import { spacing } from '../_styles/spacing';
|
|
|
7
7
|
var maxModalWidth = 528;
|
|
8
8
|
var StyledBaseAvatar = /*#__PURE__*/styled(Avatar).withConfig({
|
|
9
9
|
displayName: "StyledBaseAvatar",
|
|
10
|
-
componentId: "core-
|
|
10
|
+
componentId: "core-12_12_1__sc-ft72hu-0"
|
|
11
11
|
})(["border-color:", ";border-style:solid;border-width:1px;&:hover{z-index:1;}&[role='img']:focus{outline:none;}"], colors.white);
|
|
12
12
|
export var StyledAvatar = /*#__PURE__*/styled(StyledBaseAvatar).withConfig({
|
|
13
13
|
displayName: "StyledAvatar",
|
|
14
|
-
componentId: "core-
|
|
14
|
+
componentId: "core-12_12_1__sc-ft72hu-1"
|
|
15
15
|
})(["background-color:", ";"], function (props) {
|
|
16
16
|
return colors[props.$color];
|
|
17
17
|
});
|
|
18
18
|
export var StyledContactItems = /*#__PURE__*/styled.div.withConfig({
|
|
19
19
|
displayName: "StyledContactItems",
|
|
20
|
-
componentId: "core-
|
|
20
|
+
componentId: "core-12_12_1__sc-ft72hu-2"
|
|
21
21
|
})(["padding-top:", "px;padding-bottom:", "px;padding-left:", "px;"], spacing.sm, spacing.sm, spacing.xs);
|
|
22
22
|
export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
23
23
|
displayName: "StyledWrapper",
|
|
24
|
-
componentId: "core-
|
|
24
|
+
componentId: "core-12_12_1__sc-ft72hu-3"
|
|
25
25
|
})(["display:flex;", " + ", "{margin-left:-", "px;}"], StyledAvatar, StyledAvatar, spacing.sm);
|
|
26
26
|
export var StyledViewAllWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
27
27
|
displayName: "StyledViewAllWrapper",
|
|
28
|
-
componentId: "core-
|
|
28
|
+
componentId: "core-12_12_1__sc-ft72hu-4"
|
|
29
29
|
})(["display:flex;margin-left:", "px;margin-bottom:", "px;"], spacing.md, spacing.lg);
|
|
30
30
|
export var StyledModalBody = /*#__PURE__*/styled(Modal.Body).withConfig({
|
|
31
31
|
displayName: "StyledModalBody",
|
|
32
|
-
componentId: "core-
|
|
32
|
+
componentId: "core-12_12_1__sc-ft72hu-5"
|
|
33
33
|
})(["max-width:", "px;"], maxModalWidth);
|
|
34
34
|
export var StyledContactItem = /*#__PURE__*/styled(ContactItem).withConfig({
|
|
35
35
|
displayName: "StyledContactItem",
|
|
36
|
-
componentId: "core-
|
|
36
|
+
componentId: "core-12_12_1__sc-ft72hu-6"
|
|
37
37
|
})(["flex-shrink:0;"]);
|
|
38
38
|
//# sourceMappingURL=AvatarStack.styles.js.map
|
|
@@ -71,6 +71,12 @@ export interface AvatarStackProps<Item extends AvatarStackItem = AvatarStackItem
|
|
|
71
71
|
* @since 10.19.0
|
|
72
72
|
*/
|
|
73
73
|
size?: AvatarStackSize;
|
|
74
|
+
/**
|
|
75
|
+
* The callback to run when user clicks on view all button.
|
|
76
|
+
* If provided, the modal with all items will not be shown.
|
|
77
|
+
* @since 12.12.0
|
|
78
|
+
*/
|
|
79
|
+
onClickViewAll?: () => void;
|
|
74
80
|
}
|
|
75
81
|
export interface FoldedAvatarStackProps<Item extends AvatarStackItem> {
|
|
76
82
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarStack.types.js","names":[],"sources":["../../src/AvatarStack/AvatarStack.types.ts"],"sourcesContent":["export type AvatarStackItemId = string | number\n\nexport type AvatarStackItemType = 'company' | 'user' | 'group'\n\nexport interface AvatarStackItem {\n /**\n * Avatar ID\n * @since 10.19.0\n */\n id: AvatarStackItemId\n /**\n * Avatar name\n * @since 10.19.0\n */\n name: string\n /**\n * Avatar type\n * @since 10.19.0\n */\n type: AvatarStackItemType\n /**\n * Avatar description\n * @since 10.19.0\n */\n description?: string\n /**\n * Avatar image URL\n * @since 10.19.0\n */\n imageUrl?: string\n /**\n * Avatar link URL\n * @since 10.19.0\n */\n linkUrl?: string\n /**\n * Avatar initials\n * @since 10.19.0\n */\n initials?: string\n /**\n * Avatar inactive state\n * @defaultValue false\n * @since 10.19.0\n */\n inactive?: boolean\n}\n\nexport type AvatarStackSize = 'md' | 'lg'\n\nexport interface AvatarStackProps<\n Item extends AvatarStackItem = AvatarStackItem\n> {\n /**\n * Avatar stack items\n * @since 10.22.0\n */\n items: Item[]\n /**\n * Avatar item imageURL getter\n * @since 10.22.0\n */\n getImageUrl?: (item: Item) => string\n /**\n * Avatar item initials getter\n * @since 10.22.0\n */\n getInitials?: (item: Item) => string\n /**\n * Avatar stack title\n * @since 10.19.0\n */\n title: string\n\n /**\n * Avatar stack size\n * @defaultValue lg\n * @since 10.19.0\n */\n size?: AvatarStackSize\n}\n\nexport interface FoldedAvatarStackProps<Item extends AvatarStackItem> {\n /**\n * @since 10.22.0\n */\n items: Item[]\n /**\n * @since 10.19.0\n */\n onClickViewAll: () => void\n /**\n * @since 10.19.0\n */\n size: AvatarStackSize\n /**\n * @since 10.19.0\n */\n restCountLabel: string\n /**\n * @since 10.19.0\n */\n isViewAllNeeded: boolean\n /**\n * @since 11.13.0\n */\n title: string\n}\n\nexport interface ViewAllModalProps<Item extends AvatarStackItem> {\n /**\n * @since 10.22.0\n */\n items: Item[]\n /**\n * @since 10.19.0\n */\n onClose: () => void\n /**\n * @since 10.19.0\n */\n isOpen: boolean\n /**\n * @since 10.19.0\n */\n title: string\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"AvatarStack.types.js","names":[],"sources":["../../src/AvatarStack/AvatarStack.types.ts"],"sourcesContent":["export type AvatarStackItemId = string | number\n\nexport type AvatarStackItemType = 'company' | 'user' | 'group'\n\nexport interface AvatarStackItem {\n /**\n * Avatar ID\n * @since 10.19.0\n */\n id: AvatarStackItemId\n /**\n * Avatar name\n * @since 10.19.0\n */\n name: string\n /**\n * Avatar type\n * @since 10.19.0\n */\n type: AvatarStackItemType\n /**\n * Avatar description\n * @since 10.19.0\n */\n description?: string\n /**\n * Avatar image URL\n * @since 10.19.0\n */\n imageUrl?: string\n /**\n * Avatar link URL\n * @since 10.19.0\n */\n linkUrl?: string\n /**\n * Avatar initials\n * @since 10.19.0\n */\n initials?: string\n /**\n * Avatar inactive state\n * @defaultValue false\n * @since 10.19.0\n */\n inactive?: boolean\n}\n\nexport type AvatarStackSize = 'md' | 'lg'\n\nexport interface AvatarStackProps<\n Item extends AvatarStackItem = AvatarStackItem\n> {\n /**\n * Avatar stack items\n * @since 10.22.0\n */\n items: Item[]\n /**\n * Avatar item imageURL getter\n * @since 10.22.0\n */\n getImageUrl?: (item: Item) => string\n /**\n * Avatar item initials getter\n * @since 10.22.0\n */\n getInitials?: (item: Item) => string\n /**\n * Avatar stack title\n * @since 10.19.0\n */\n title: string\n\n /**\n * Avatar stack size\n * @defaultValue lg\n * @since 10.19.0\n */\n size?: AvatarStackSize\n\n /**\n * The callback to run when user clicks on view all button.\n * If provided, the modal with all items will not be shown.\n * @since 12.12.0\n */\n onClickViewAll?: () => void\n}\n\nexport interface FoldedAvatarStackProps<Item extends AvatarStackItem> {\n /**\n * @since 10.22.0\n */\n items: Item[]\n /**\n * @since 10.19.0\n */\n onClickViewAll: () => void\n /**\n * @since 10.19.0\n */\n size: AvatarStackSize\n /**\n * @since 10.19.0\n */\n restCountLabel: string\n /**\n * @since 10.19.0\n */\n isViewAllNeeded: boolean\n /**\n * @since 11.13.0\n */\n title: string\n}\n\nexport interface ViewAllModalProps<Item extends AvatarStackItem> {\n /**\n * @since 10.22.0\n */\n items: Item[]\n /**\n * @since 10.19.0\n */\n onClose: () => void\n /**\n * @since 10.19.0\n */\n isOpen: boolean\n /**\n * @since 10.19.0\n */\n title: string\n}\n"],"mappings":""}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
2
|
export var StyledBadge = /*#__PURE__*/styled.div.withConfig({
|
|
3
3
|
displayName: "StyledBadge",
|
|
4
|
-
componentId: "core-
|
|
4
|
+
componentId: "core-12_12_1__sc-rpertu-0"
|
|
5
5
|
})(["display:inline-block;position:relative;"]);
|
|
6
6
|
export var StyledBadgeLabel = /*#__PURE__*/styled.span.withConfig({
|
|
7
7
|
displayName: "StyledBadgeLabel",
|
|
8
|
-
componentId: "core-
|
|
8
|
+
componentId: "core-12_12_1__sc-rpertu-1"
|
|
9
9
|
})(["bottom:100%;position:absolute;right:0;transform:translateX(50%) translateY(50%);"]);
|
|
10
10
|
//# sourceMappingURL=Badge.styles.js.map
|
|
@@ -39,7 +39,7 @@ var expandContent = function expandContent(maxHeight) {
|
|
|
39
39
|
};
|
|
40
40
|
export var StyledBannerContainer = /*#__PURE__*/styled.div.withConfig({
|
|
41
41
|
displayName: "StyledBannerContainer",
|
|
42
|
-
componentId: "core-
|
|
42
|
+
componentId: "core-12_12_1__sc-149wm7c-0"
|
|
43
43
|
})(["align-items:center;border-left:", "px solid;border-radius:", "px;color:", ";display:flex;justify-content:space-between;min-height:52px;padding:0 ", "px;", " ", " ", ""], bannerLeft, borderRadius.md, colors.gray15, spacing.lg, bannerShadow, function (_ref) {
|
|
44
44
|
var variant = _ref.variant;
|
|
45
45
|
var _bannerVariantColors$ = bannerVariantColors[variant],
|
|
@@ -52,15 +52,15 @@ export var StyledBannerContainer = /*#__PURE__*/styled.div.withConfig({
|
|
|
52
52
|
});
|
|
53
53
|
export var StyledContent = /*#__PURE__*/styled.div.withConfig({
|
|
54
54
|
displayName: "StyledContent",
|
|
55
|
-
componentId: "core-
|
|
55
|
+
componentId: "core-12_12_1__sc-149wm7c-1"
|
|
56
56
|
})(["align-self:center;margin:", "px ", "px;width:100%;"], spacing.sm, spacing.lg);
|
|
57
57
|
export var StyledExpandableContentContainer = /*#__PURE__*/styled(Flex).withConfig({
|
|
58
58
|
displayName: "StyledExpandableContentContainer",
|
|
59
|
-
componentId: "core-
|
|
59
|
+
componentId: "core-12_12_1__sc-149wm7c-2"
|
|
60
60
|
})(["color:", ";min-height:52px;padding:0 ", "px;position:relative;z-index:1;", ""], colors.gray15, spacing.lg, bannerShadow);
|
|
61
61
|
export var StyledExpandableContent = /*#__PURE__*/styled(Flex).withConfig({
|
|
62
62
|
displayName: "StyledExpandableContent",
|
|
63
|
-
componentId: "core-
|
|
63
|
+
componentId: "core-12_12_1__sc-149wm7c-3"
|
|
64
64
|
})(["animation-duration:450ms;animation-fill-mode:forwards;animation-timing-function:ease-out;background-color:", ";box-sizing:border-box;font-size:14px;font-weight:500;letter-spacing:0.25px;line-height:20px;overflow-y:auto;padding:0 ", "px;position:relative;z-index:0;", " ", ""], colors.white, spacing.xl * 2 + spacing.sm, function (_ref3) {
|
|
65
65
|
var isOverflowingY = _ref3.isOverflowingY;
|
|
66
66
|
return isOverflowingY && focusable;
|
|
@@ -70,23 +70,23 @@ export var StyledExpandableContent = /*#__PURE__*/styled(Flex).withConfig({
|
|
|
70
70
|
});
|
|
71
71
|
export var StyledTitle = /*#__PURE__*/styled.div.withConfig({
|
|
72
72
|
displayName: "StyledTitle",
|
|
73
|
-
componentId: "core-
|
|
73
|
+
componentId: "core-12_12_1__sc-149wm7c-4"
|
|
74
74
|
})(["", " color:", ";font-weight:", ";"], getTypographyIntent('body'), colors.gray15, typographyWeights.semibold);
|
|
75
75
|
export var StyledBody = /*#__PURE__*/styled.div.withConfig({
|
|
76
76
|
displayName: "StyledBody",
|
|
77
|
-
componentId: "core-
|
|
77
|
+
componentId: "core-12_12_1__sc-149wm7c-5"
|
|
78
78
|
})(["", " color:", ";"], getTypographyIntent('body'), colors.gray15);
|
|
79
79
|
export var StyledIconContainer = /*#__PURE__*/styled.div.withConfig({
|
|
80
80
|
displayName: "StyledIconContainer",
|
|
81
|
-
componentId: "core-
|
|
81
|
+
componentId: "core-12_12_1__sc-149wm7c-6"
|
|
82
82
|
})(["flex:0 0 auto;margin:", "px 0;"], spacing.lg);
|
|
83
83
|
export var StyledActionsTrigger = /*#__PURE__*/styled(DropdownButton).withConfig({
|
|
84
84
|
displayName: "StyledActionsTrigger",
|
|
85
|
-
componentId: "core-
|
|
85
|
+
componentId: "core-12_12_1__sc-149wm7c-7"
|
|
86
86
|
})(["flex-shrink:0;& + ", ",& + ", "{margin-left:", "px;}"], StyledButton, StyledLinkButton, spacing.sm);
|
|
87
87
|
export var StyledAction = /*#__PURE__*/styled.div.withConfig({
|
|
88
88
|
displayName: "StyledAction",
|
|
89
|
-
componentId: "core-
|
|
89
|
+
componentId: "core-12_12_1__sc-149wm7c-8"
|
|
90
90
|
})(["margin:", "px 0;& + ", ",& + ", ",& + ", "{margin-left:", "px;}", ",", "{background:rgba(0,0,0,0.05);color:", ";&:hover{background:", ";color:", ";}}"], spacing.sm, StyledButton, StyledLinkButton, StyledActionsTrigger, spacing.sm, StyledButton, StyledLinkButton, colors.gray15, colors.gray85, colors.gray15);
|
|
91
91
|
function getMiniBannerIconColor(_ref5) {
|
|
92
92
|
var variant = _ref5.variant;
|
|
@@ -94,6 +94,6 @@ function getMiniBannerIconColor(_ref5) {
|
|
|
94
94
|
}
|
|
95
95
|
export var StyledMiniBannerContainer = /*#__PURE__*/styled.div.withConfig({
|
|
96
96
|
displayName: "StyledMiniBannerContainer",
|
|
97
|
-
componentId: "core-
|
|
97
|
+
componentId: "core-12_12_1__sc-149wm7c-9"
|
|
98
98
|
})(["align-items:center;background-color:", ";display:flex;justify-content:space-between;padding:0 ", "px;", " ", " & ", "{margin:", "px;}"], colors.gray96, spacing.md, getTypographyIntent('small'), getMiniBannerIconColor, StyledContent, spacing.sm);
|
|
99
99
|
//# sourceMappingURL=Banner.styles.js.map
|
package/dist/Box/Box.styles.js
CHANGED
|
@@ -21,7 +21,7 @@ function sizeToPx(size) {
|
|
|
21
21
|
}
|
|
22
22
|
export var StyledBox = /*#__PURE__*/styled.div.withConfig({
|
|
23
23
|
displayName: "StyledBox",
|
|
24
|
-
componentId: "core-
|
|
24
|
+
componentId: "core-12_12_1__sc-fgsy0p-0"
|
|
25
25
|
})(["", " ", ""], function (_ref) {
|
|
26
26
|
var $as = _ref.$as;
|
|
27
27
|
if ($as === 'ol' || $as === 'ul') {
|
|
@@ -4,19 +4,19 @@ import { colors } from '../_styles/colors';
|
|
|
4
4
|
import { spacing } from '../_styles/spacing';
|
|
5
5
|
export var StyledContainer = /*#__PURE__*/styled.nav.withConfig({
|
|
6
6
|
displayName: "StyledContainer",
|
|
7
|
-
componentId: "core-
|
|
7
|
+
componentId: "core-12_12_1__sc-1q6nqfz-0"
|
|
8
8
|
})(["color:", ";display:flex;align-items:center;a,a:hover{display:inline-flex;text-decoration:none;}"], colors.gray50);
|
|
9
9
|
export var StyledList = /*#__PURE__*/styled.ol.withConfig({
|
|
10
10
|
displayName: "StyledList",
|
|
11
|
-
componentId: "core-
|
|
11
|
+
componentId: "core-12_12_1__sc-1q6nqfz-1"
|
|
12
12
|
})(["display:flex;margin:0;padding-left:0;"]);
|
|
13
13
|
export var StyledSeparator = /*#__PURE__*/styled.div.withConfig({
|
|
14
14
|
displayName: "StyledSeparator",
|
|
15
|
-
componentId: "core-
|
|
15
|
+
componentId: "core-12_12_1__sc-1q6nqfz-2"
|
|
16
16
|
})(["align-items:center;display:inline-flex;justify-content:center;margin:0px ", "px;"], spacing.xs);
|
|
17
17
|
export var StyledCrumb = /*#__PURE__*/styled.li.withConfig({
|
|
18
18
|
displayName: "StyledCrumb",
|
|
19
|
-
componentId: "core-
|
|
19
|
+
componentId: "core-12_12_1__sc-1q6nqfz-3"
|
|
20
20
|
})(["", " align-items:center;color:", ";display:inline-flex;min-height:24px;text-decoration:none;&:hover{cursor:", ";text-decoration:", ";}> a{color:", ";", "}", ""], getTypographyIntent('body'), colors.gray45, function (_ref) {
|
|
21
21
|
var active = _ref.active;
|
|
22
22
|
return active ? 'default' : 'pointer';
|
|
@@ -93,11 +93,11 @@ function getColors(loading, variant) {
|
|
|
93
93
|
}
|
|
94
94
|
export var StyledContent = /*#__PURE__*/styled.span.withConfig({
|
|
95
95
|
displayName: "StyledContent",
|
|
96
|
-
componentId: "core-
|
|
96
|
+
componentId: "core-12_12_1__sc-c5bhwh-0"
|
|
97
97
|
})(["align-items:center;display:flex;overflow:hidden;"]);
|
|
98
98
|
export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
|
|
99
99
|
displayName: "StyledSpinner",
|
|
100
|
-
componentId: "core-
|
|
100
|
+
componentId: "core-12_12_1__sc-c5bhwh-1"
|
|
101
101
|
})(["box-sizing:border-box;display:none;position:absolute;transform:translateZ(0);@media ", "{left:50%;top:50%;", "}"], mediaIE11Hack, function (_ref) {
|
|
102
102
|
var size = _ref.size;
|
|
103
103
|
var margin = -1 * (spinnerDimensions[size !== null && size !== void 0 ? size : defaultSpinnerSize] / 2);
|
|
@@ -105,14 +105,14 @@ export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
|
|
|
105
105
|
});
|
|
106
106
|
export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
|
|
107
107
|
displayName: "StyledLabel",
|
|
108
|
-
componentId: "core-
|
|
108
|
+
componentId: "core-12_12_1__sc-c5bhwh-2"
|
|
109
109
|
})(["overflow:hidden;padding:0 6px;text-overflow:ellipsis;white-space:nowrap;& + span{padding-left:0;}"]);
|
|
110
110
|
function getButtonStyles(block, disabled, loading, size, variant) {
|
|
111
111
|
return css(["", " ", " ", " ", " align-items:center;border-radius:", "px;border:0;box-sizing:border-box;cursor:pointer;display:inline-flex;flex-direction:row;flex-shrink:0;font-family:inherit;font-weight:", ";height:", "px;justify-content:center;margin:0;overflow:hidden;padding:0 ", "px;position:relative;pointer-events:", ";text-overflow:ellipsis;user-select:", ";vertical-align:middle;white-space:nowrap;width:", ";[data-icon-prop='true']{pointer-events:none;height:", "px;width:", "px;}", ""], getTypographyIntent(typographySizes[size]), focusable, variant === 'UNSAFE_helixNav' && css(["&.focus,&:focus{outline:none;box-shadow:0 0 0 2px ", ";}"], colors.blue70), getColors(loading, variant), borderRadius.md, typographyWeights.semibold, heights[size], paddingX[size], disabled || loading ? 'none' : 'inherit', disabled || loading ? 'none' : 'inherit', block && '100%', size === 'sm' ? 16 : 24, size === 'sm' ? 16 : 24, loading && css(["", "{pointer-events:none;visibility:hidden;}", "{display:block;}"], StyledContent, StyledSpinner));
|
|
112
112
|
}
|
|
113
113
|
export var StyledButton = /*#__PURE__*/styled.button.withConfig({
|
|
114
114
|
displayName: "StyledButton",
|
|
115
|
-
componentId: "core-
|
|
115
|
+
componentId: "core-12_12_1__sc-c5bhwh-3"
|
|
116
116
|
})(["", ""], function (_ref2) {
|
|
117
117
|
var $block = _ref2.$block,
|
|
118
118
|
disabled = _ref2.disabled,
|
|
@@ -123,7 +123,7 @@ export var StyledButton = /*#__PURE__*/styled.button.withConfig({
|
|
|
123
123
|
});
|
|
124
124
|
export var StyledLinkButton = /*#__PURE__*/styled.a.withConfig({
|
|
125
125
|
displayName: "StyledLinkButton",
|
|
126
|
-
componentId: "core-
|
|
126
|
+
componentId: "core-12_12_1__sc-c5bhwh-4"
|
|
127
127
|
})(["&,&:hover{text-decoration:none;}", ""], function (_ref3) {
|
|
128
128
|
var $block = _ref3.$block,
|
|
129
129
|
$disabled = _ref3.$disabled,
|
|
@@ -8,31 +8,31 @@ var cellSize = 36; // TODO one-off size
|
|
|
8
8
|
|
|
9
9
|
export var StyledContainer = /*#__PURE__*/styled.div.withConfig({
|
|
10
10
|
displayName: "StyledContainer",
|
|
11
|
-
componentId: "core-
|
|
11
|
+
componentId: "core-12_12_1__sc-1kkl86t-0"
|
|
12
12
|
})(["", ";display:inline-flex;flex-direction:column;padding:", "px ", "px ", "px;"], getTypographyIntent('small'), spacing.lg, spacing.md, spacing.md);
|
|
13
13
|
export var StyledPaginator = /*#__PURE__*/styled(Button).withConfig({
|
|
14
14
|
displayName: "StyledPaginator",
|
|
15
|
-
componentId: "core-
|
|
15
|
+
componentId: "core-12_12_1__sc-1kkl86t-1"
|
|
16
16
|
})(["flex:0 0 auto;"]);
|
|
17
17
|
export var StyledSelect = /*#__PURE__*/styled.div.withConfig({
|
|
18
18
|
displayName: "StyledSelect",
|
|
19
|
-
componentId: "core-
|
|
19
|
+
componentId: "core-12_12_1__sc-1kkl86t-2"
|
|
20
20
|
})(["display:inline-flex;flex:1 1 0;margin-left:", "px;> div{font-size:12px;}"], spacing.sm);
|
|
21
21
|
export var StyledNavigation = /*#__PURE__*/styled.div.withConfig({
|
|
22
22
|
displayName: "StyledNavigation",
|
|
23
|
-
componentId: "core-
|
|
23
|
+
componentId: "core-12_12_1__sc-1kkl86t-3"
|
|
24
24
|
})(["display:inline-flex;margin-bottom:", "px;", " + ", ",", " + ", "{margin-left:", "px;}"], spacing.sm, StyledPaginator, StyledSelect, StyledSelect, StyledPaginator, spacing.sm);
|
|
25
25
|
export var StyledCell = /*#__PURE__*/styled.div.withConfig({
|
|
26
26
|
displayName: "StyledCell",
|
|
27
|
-
componentId: "core-
|
|
27
|
+
componentId: "core-12_12_1__sc-1kkl86t-4"
|
|
28
28
|
})(["align-items:center;display:inline-flex;height:", "px;justify-content:center;width:", "px;"], cellSize, cellSize);
|
|
29
29
|
export var StyledDayHeaderCell = /*#__PURE__*/styled(StyledCell).withConfig({
|
|
30
30
|
displayName: "StyledDayHeaderCell",
|
|
31
|
-
componentId: "core-
|
|
31
|
+
componentId: "core-12_12_1__sc-1kkl86t-5"
|
|
32
32
|
})(["cursor:default;font-weight:", ";"], typographyWeights.semibold);
|
|
33
33
|
export var StyledDayCell = /*#__PURE__*/styled(StyledCell).withConfig({
|
|
34
34
|
displayName: "StyledDayCell",
|
|
35
|
-
componentId: "core-
|
|
35
|
+
componentId: "core-12_12_1__sc-1kkl86t-6"
|
|
36
36
|
})(["", ""], function (_ref) {
|
|
37
37
|
var _ref$$disabled = _ref.$disabled,
|
|
38
38
|
$disabled = _ref$$disabled === void 0 ? false : _ref$$disabled,
|
|
@@ -55,6 +55,6 @@ export var StyledDayCell = /*#__PURE__*/styled(StyledCell).withConfig({
|
|
|
55
55
|
});
|
|
56
56
|
export var StyledWeekRow = /*#__PURE__*/styled.div.withConfig({
|
|
57
57
|
displayName: "StyledWeekRow",
|
|
58
|
-
componentId: "core-
|
|
58
|
+
componentId: "core-12_12_1__sc-1kkl86t-7"
|
|
59
59
|
})(["display:inline-flex;padding-bottom:2px;user-select:none;&:last-child{padding-bottom:0;}", "{&:first-child{border-top-left-radius:", "px;border-bottom-left-radius:", "px;}&:last-child{border-top-right-radius:", "px;border-bottom-right-radius:", "px;}}"], StyledCell, borderRadius.md, borderRadius.md, borderRadius.md, borderRadius.md);
|
|
60
60
|
//# sourceMappingURL=Calendar.styles.js.map
|
package/dist/Card/Card.styles.js
CHANGED
|
@@ -4,7 +4,7 @@ import { colors } from '../_styles/colors';
|
|
|
4
4
|
import { getShadow } from '../_styles/shadows';
|
|
5
5
|
export var StyledCardContainer = /*#__PURE__*/styled.div.withConfig({
|
|
6
6
|
displayName: "StyledCardContainer",
|
|
7
|
-
componentId: "core-
|
|
7
|
+
componentId: "core-12_12_1__sc-2fii7b-0"
|
|
8
8
|
})(["background-color:", ";border-radius:", "px;transition:box-shadow 0.2s ease-in-out;", " ", ""], colors.white, borderRadius.md, function (_ref) {
|
|
9
9
|
var $level = _ref.$level,
|
|
10
10
|
$shadowStrength = _ref.$shadowStrength;
|
|
@@ -9,7 +9,7 @@ export var dataQa = {
|
|
|
9
9
|
export var checkboxSize = 20;
|
|
10
10
|
export var StyledCheckboxContainer = /*#__PURE__*/styled.div.withConfig({
|
|
11
11
|
displayName: "StyledCheckboxContainer",
|
|
12
|
-
componentId: "core-
|
|
12
|
+
componentId: "core-12_12_1__sc-u63tye-0"
|
|
13
13
|
})(["color:", ";display:block;position:relative;& + &{margin-top:", "px;}"], colors.gray15, spacing.md);
|
|
14
14
|
function StyledIndeterminate() {
|
|
15
15
|
return css(["background-color:", ";content:'';height:2px;left:5px;position:absolute;top:9px;width:10px;border:none;"], colors.white);
|
|
@@ -48,18 +48,18 @@ function StyledFakeIndeterminate() {
|
|
|
48
48
|
}
|
|
49
49
|
export var StyledCheckboxLabelWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
50
50
|
displayName: "StyledCheckboxLabelWrapper",
|
|
51
|
-
componentId: "core-
|
|
51
|
+
componentId: "core-12_12_1__sc-u63tye-1"
|
|
52
52
|
})(["padding-left:", "px;min-height:", "px;position:relative;", ""], function (_ref) {
|
|
53
53
|
var $hasLabel = _ref.$hasLabel;
|
|
54
54
|
return $hasLabel ? checkboxSize + spacing.md : checkboxSize;
|
|
55
55
|
}, checkboxSize, getTypographyIntent('body'));
|
|
56
56
|
export var StyledCheckboxLabel = /*#__PURE__*/styled.label.withConfig({
|
|
57
57
|
displayName: "StyledCheckboxLabel",
|
|
58
|
-
componentId: "core-
|
|
58
|
+
componentId: "core-12_12_1__sc-u63tye-2"
|
|
59
59
|
})(["user-select:none;&:before{background-color:", ";border-radius:2px;border:2px solid ", ";content:'';display:inline-block;height:", "px;width:", "px;min-width:", "px;top:0;left:0;position:absolute;}"], colors.white, colors.gray70, checkboxSize, checkboxSize, checkboxSize);
|
|
60
60
|
export var StyledCheckboxInput = /*#__PURE__*/styled.input.withConfig({
|
|
61
61
|
displayName: "StyledCheckboxInput",
|
|
62
|
-
componentId: "core-
|
|
62
|
+
componentId: "core-12_12_1__sc-u63tye-3"
|
|
63
63
|
})(["left:0;opacity:0;position:absolute;top:0;&:disabled:checked + ", " > ", ":before{background-color:", ";border-color:", ";}&:disabled + ", " > ", ":before{background-color:", ";border-color:", ";}", " &:checked + ", " > ", "{&:before{background-color:", ";border-color:", ";color:", ";}&:after{", "}}&:focus:not(:disabled),&[data-qa=", "]:not(:disabled){+ ", " > ", ":before{", "}}", ""], StyledCheckboxLabelWrapper, StyledCheckboxLabel, colors.blue85, colors.blue85, StyledCheckboxLabelWrapper, StyledCheckboxLabel, function (_ref2) {
|
|
64
64
|
var $indeterminate = _ref2.$indeterminate;
|
|
65
65
|
return $indeterminate ? colors.gray85 : colors.white;
|
|
@@ -83,7 +83,7 @@ export var StyledCheckboxInput = /*#__PURE__*/styled.input.withConfig({
|
|
|
83
83
|
});
|
|
84
84
|
export var StyledFakeCheckboxLabel = /*#__PURE__*/styled.span.withConfig({
|
|
85
85
|
displayName: "StyledFakeCheckboxLabel",
|
|
86
|
-
componentId: "core-
|
|
86
|
+
componentId: "core-12_12_1__sc-u63tye-4"
|
|
87
87
|
})(["", " display:block;min-height:", "px;padding-left:", "px;position:relative;user-select:none;cursor:pointer;", ""], getTypographyIntent('body'), checkboxSize, function (_ref7) {
|
|
88
88
|
var children = _ref7.children;
|
|
89
89
|
return children ? checkboxSize + spacing.md : checkboxSize;
|
|
@@ -99,7 +99,7 @@ export var StyledFakeCheckboxLabel = /*#__PURE__*/styled.span.withConfig({
|
|
|
99
99
|
});
|
|
100
100
|
export var StyledFakeCheckboxInput = /*#__PURE__*/styled.div.withConfig({
|
|
101
101
|
displayName: "StyledFakeCheckboxInput",
|
|
102
|
-
componentId: "core-
|
|
102
|
+
componentId: "core-12_12_1__sc-u63tye-5"
|
|
103
103
|
})(["width:", "px;height:", "px;border-radius:2px;border:2px solid ", ";position:absolute;", " ", " ", " ", ""], checkboxSize, checkboxSize, colors.gray70, function (_ref9) {
|
|
104
104
|
var $checked = _ref9.$checked,
|
|
105
105
|
$disabled = _ref9.$disabled,
|
|
@@ -21,6 +21,6 @@ export var CheckboxTooltip = function CheckboxTooltip(props) {
|
|
|
21
21
|
};
|
|
22
22
|
var StyledCheckboxTooltipIcon = /*#__PURE__*/styled(Help).withConfig({
|
|
23
23
|
displayName: "StyledCheckboxTooltipIcon",
|
|
24
|
-
componentId: "core-
|
|
24
|
+
componentId: "core-12_12_1__sc-1qa1ncf-0"
|
|
25
25
|
})(["margin-left:", "px;color:", ";vertical-align:middle;&:focus-visible{border-radius:50%;", " outline-offset:0;}"], spacing.sm, colors.gray45, getGapOutlineFocus);
|
|
26
26
|
//# sourceMappingURL=CheckboxTooltip.js.map
|
|
@@ -7,23 +7,23 @@ import { getLineClamp } from '../_styles/mixins';
|
|
|
7
7
|
import { spacing } from '../_styles/spacing';
|
|
8
8
|
export var ContactItemAvatarWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
9
9
|
displayName: "ContactItemAvatarWrapper",
|
|
10
|
-
componentId: "core-
|
|
10
|
+
componentId: "core-12_12_1__sc-1c4z9pn-0"
|
|
11
11
|
})(["display:inline-flex;align-self:flex-start;"]);
|
|
12
12
|
export var ContactItemAvatar = /*#__PURE__*/styled(Avatar).withConfig({
|
|
13
13
|
displayName: "ContactItemAvatar",
|
|
14
|
-
componentId: "core-
|
|
14
|
+
componentId: "core-12_12_1__sc-1c4z9pn-1"
|
|
15
15
|
})(["cursor:inherit;font-weight:", ";"], typographyWeights.bold);
|
|
16
16
|
export var ContactItemTextWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
17
17
|
displayName: "ContactItemTextWrapper",
|
|
18
|
-
componentId: "core-
|
|
18
|
+
componentId: "core-12_12_1__sc-1c4z9pn-2"
|
|
19
19
|
})(["overflow:hidden;margin-left:", "px;"], spacing.sm);
|
|
20
20
|
export var ContactItemText = /*#__PURE__*/styled(Typography).withConfig({
|
|
21
21
|
displayName: "ContactItemText",
|
|
22
|
-
componentId: "core-
|
|
22
|
+
componentId: "core-12_12_1__sc-1c4z9pn-3"
|
|
23
23
|
})(["display:flex;", ""], getLineClamp());
|
|
24
24
|
export var ContactItemWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
25
25
|
displayName: "ContactItemWrapper",
|
|
26
|
-
componentId: "core-
|
|
26
|
+
componentId: "core-12_12_1__sc-1c4z9pn-4"
|
|
27
27
|
})(["display:flex;flex-direction:row;align-items:center;padding:", "px ", "px ", "px ", "px;", " ", " ", ""], spacing.sm, spacing.lg, spacing.sm, spacing.sm, function (_ref) {
|
|
28
28
|
var $disabled = _ref.$disabled,
|
|
29
29
|
$clickable = _ref.$clickable;
|