@procore/core-react 12.43.0 → 12.45.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/CHANGELOG.md +32 -0
- package/dist/AnchorNavigation/AnchorNavigation.js +12 -8
- package/dist/AnchorNavigation/AnchorNavigation.js.map +1 -1
- package/dist/AnchorNavigation/AnchorNavigation.styles.js +5 -5
- package/dist/AnchorNavigation/AnchorNavigation.styles.js.map +1 -1
- package/dist/AnchorNavigation/AnchorNavigation.types.d.ts +1 -0
- package/dist/AnchorNavigation/AnchorNavigation.types.js.map +1 -1
- package/dist/AnchorNavigation/AnchorNavigationProvider.js +11 -0
- package/dist/AnchorNavigation/AnchorNavigationProvider.js.map +1 -1
- package/dist/Avatar/Avatar.styles.js +5 -5
- package/dist/AvatarStack/AvatarStack.js +3 -1
- package/dist/AvatarStack/AvatarStack.js.map +1 -1
- package/dist/AvatarStack/AvatarStack.styles.js +7 -7
- package/dist/Badge/Badge.styles.js +2 -2
- package/dist/BadgePill/BadgePill.styles.js +4 -4
- package/dist/Banner/Banner.styles.js +10 -10
- package/dist/Box/Box.styles.js +1 -1
- package/dist/Breadcrumbs/Breadcrumbs.styles.js +4 -4
- package/dist/Button/Button.styles.js +5 -5
- package/dist/Button/Button.types.d.ts +5 -0
- package/dist/Button/Button.types.js.map +1 -1
- package/dist/Calendar/Calendar.styles.js +9 -9
- package/dist/Card/Card.styles.js +1 -1
- package/dist/Checkbox/Checkbox.styles.js +6 -6
- package/dist/ContactItem/ContactItem.styles.js +5 -5
- package/dist/Content/Content.styles.js +2 -2
- package/dist/DateInput/DateInput.styles.js +6 -6
- package/dist/DetailPage/DetailPage.styles.js +7 -7
- package/dist/Dropdown/Dropdown.js +5 -2
- package/dist/Dropdown/Dropdown.js.map +1 -1
- package/dist/Dropdown/Dropdown.styles.js +3 -3
- package/dist/Dropdown/Dropdown.types.d.ts +1 -1
- package/dist/Dropdown/Dropdown.types.js.map +1 -1
- 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 +3 -3
- package/dist/FileSelect/FileExplorer/FileExplorer.styles.js +9 -9
- package/dist/FileSelect/FileExplorer/FileExplorerSidebar.styles.js +3 -3
- package/dist/FileSelect/FileSelect.styles.js +2 -2
- package/dist/FileSelect/FileSelectDropzone/FileSelectDropzone.styles.js +3 -3
- package/dist/FileSelect/FileTokenList/FileTokenList.styles.js +2 -2
- package/dist/FileSelect/GridSource/GridSource.styles.js +6 -6
- package/dist/FileSelect/LocalSource/LocalSource.styles.js +4 -4
- package/dist/FileSelect/SourceItem/SourceItem.styles.js +3 -3
- package/dist/FileSelect/ThumbnailList/ThumbnailList.styles.js +6 -6
- package/dist/FileSelect/TreeSource/TreeSource.styles.js +1 -1
- package/dist/FileToken/FileToken.styles.js +6 -6
- package/dist/FilterToken/FilterToken.styles.js +5 -5
- package/dist/FlexList/FlexList.styles.js +1 -1
- package/dist/Form/Form.js +11 -4
- package/dist/Form/Form.js.map +1 -1
- package/dist/Form/Form.styles.d.ts +518 -8
- package/dist/Form/Form.styles.js +15 -15
- package/dist/Form/Form.styles.js.map +1 -1
- package/dist/Form/Form.types.d.ts +2 -3
- package/dist/Form/Form.types.js.map +1 -1
- package/dist/Form/StyledFormikForm.styles.js +2 -2
- package/dist/Form/stories/util.js +3 -14
- package/dist/Form/stories/util.js.map +1 -1
- 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.js +6 -4
- package/dist/MenuImperative/MenuImperative.js.map +1 -1
- package/dist/MenuImperative/MenuImperative.styles.js +13 -13
- package/dist/MenuImperative/MenuImperative.styles.js.map +1 -1
- package/dist/MenuImperative/MenuImperative.types.d.ts +2 -4
- package/dist/MenuImperative/MenuImperative.types.js.map +1 -1
- package/dist/Modal/Modal.styles.js +13 -13
- package/dist/MultiSelect/MultiSelect.js +0 -2
- package/dist/MultiSelect/MultiSelect.js.map +1 -1
- package/dist/MultiSelect/MultiSelect.styles.js +8 -8
- 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/OverlayTrigger/OverlayTrigger.js +6 -0
- package/dist/OverlayTrigger/OverlayTrigger.js.map +1 -1
- package/dist/PageLayout/PageLayout.styles.js +16 -16
- package/dist/PageTemplate/PageFooterTemplate/PageFooterTemplate.styles.js +1 -1
- package/dist/PageTemplate/PageHeaderTemplate/PageHeaderTemplate.styles.js +3 -3
- package/dist/PageTemplate/PagePaneTemplate/PagePaneTemplate.styles.js +2 -2
- package/dist/PageTemplate/PageTemplate/PageTemplate.styles.js +3 -3
- package/dist/Pagination/Pagination.styles.js +5 -5
- package/dist/Panel/Panel.styles.js +11 -11
- package/dist/Pill/Pill.styles.js +3 -3
- package/dist/PillSelect/PillSelect.js +0 -1
- package/dist/PillSelect/PillSelect.js.map +1 -1
- 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.js +2 -1
- package/dist/Select/Select.js.map +1 -1
- package/dist/Select/Select.styles.js +8 -8
- package/dist/Semantic/Semantic.styles.js +9 -9
- package/dist/Slider/Slider.js +4 -1
- package/dist/Slider/Slider.js.map +1 -1
- package/dist/Slider/Slider.styles.d.ts +5 -1
- package/dist/Slider/Slider.styles.js +16 -11
- package/dist/Slider/Slider.styles.js.map +1 -1
- package/dist/Spinner/Spinner.js +3 -1
- package/dist/Spinner/Spinner.js.map +1 -1
- package/dist/Spinner/Spinner.styles.js +7 -7
- package/dist/SplitViewCard/SplitViewCard.styles.js +8 -8
- package/dist/SuperSelect/SuperSelect.components.js +8 -1
- package/dist/SuperSelect/SuperSelect.components.js.map +1 -1
- package/dist/SuperSelect/SuperSelect.presets.styles.js +1 -1
- package/dist/SuperSelect/SuperSelect.styles.js +39 -39
- package/dist/Switch/Switch.styles.js +4 -4
- package/dist/Table/Table.js +19 -14
- package/dist/Table/Table.js.map +1 -1
- package/dist/Table/Table.styles.d.ts +10 -16
- package/dist/Table/Table.styles.js +83 -86
- package/dist/Table/Table.styles.js.map +1 -1
- package/dist/TableShelf/TableShelf.styles.js +5 -5
- package/dist/Tabs/Tabs.js +41 -28
- package/dist/Tabs/Tabs.js.map +1 -1
- package/dist/Tabs/Tabs.styles.d.ts +6 -0
- package/dist/Tabs/Tabs.styles.js +29 -20
- package/dist/Tabs/Tabs.styles.js.map +1 -1
- package/dist/Tabs/Tabs.types.d.ts +8 -0
- package/dist/Tabs/Tabs.types.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.js +4 -0
- package/dist/Thumbnail/Thumbnail.js.map +1 -1
- package/dist/Thumbnail/Thumbnail.styles.js +17 -17
- package/dist/Thumbnail/Thumbnail.types.d.ts +12 -0
- package/dist/Thumbnail/Thumbnail.types.js.map +1 -1
- package/dist/Thumbnail/ThumbnailCaption.d.ts +1 -1
- package/dist/Thumbnail/ThumbnailCaption.js +15 -7
- package/dist/Thumbnail/ThumbnailCaption.js.map +1 -1
- package/dist/ThumbnailGrid/ThumbnailGrid.styles.js +7 -7
- package/dist/TieredSelect/TieredSelect.styles.js +9 -9
- package/dist/Tile/Tile.styles.js +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 +3 -3
- package/dist/Tree/Tree.js +1 -1
- package/dist/Tree/Tree.styles.js +10 -10
- package/dist/Typeahead/Typeahead.styles.js +3 -3
- package/dist/Typography/Typography.styles.js +1 -1
- package/dist/Typography/Typography.table.story.js +2 -2
- package/dist/_hooks/I18n.d.ts +744 -30
- package/dist/_locales/de-DE.json +20 -2
- package/dist/_locales/en-AU.json +20 -2
- package/dist/_locales/en-CA.json +20 -2
- package/dist/_locales/en-GB.json +20 -2
- package/dist/_locales/en.json +1 -0
- package/dist/_locales/es-ES.json +21 -3
- package/dist/_locales/es.json +20 -2
- package/dist/_locales/fr-CA.json +21 -3
- package/dist/_locales/fr-FR.json +26 -8
- package/dist/_locales/is-IS.json +20 -2
- package/dist/_locales/it-IT.json +20 -2
- package/dist/_locales/ja-JP.json +21 -3
- package/dist/_locales/nb-NO.json +410 -1
- package/dist/_locales/pl-PL.json +20 -2
- package/dist/_locales/pseudo.json +1 -0
- package/dist/_locales/pt-BR.json +20 -2
- package/dist/_locales/pt-PT.json +23 -5
- package/dist/_locales/th-TH.json +20 -2
- package/dist/_locales/zh-SG.json +20 -2
- package/dist/_locales/zh-TW.json +23 -5
- package/dist/_storyHelpers_/components/Deprecation.styles.js +1 -1
- package/dist/_storyHelpers_/components/StoryGrid.js +3 -3
- package/dist/_typedoc/AnchorNavigation/AnchorNavigation.types.json +4 -4
- package/dist/_typedoc/Avatar/Avatar.types.json +20 -20
- package/dist/_typedoc/AvatarStack/AvatarStack.types.json +25 -25
- package/dist/_typedoc/Badge/Badge.types.json +6 -6
- package/dist/_typedoc/Banner/Banner.types.json +15 -15
- package/dist/_typedoc/Box/Box.types.json +68 -68
- package/dist/_typedoc/Breadcrumbs/Breadcrumbs.types.json +10 -10
- package/dist/_typedoc/Button/Button.types.json +24 -13
- package/dist/_typedoc/Calendar/Calendar.types.json +80 -80
- package/dist/_typedoc/Card/Card.types.json +6 -6
- package/dist/_typedoc/Checkbox/Checkbox.types.json +8 -8
- package/dist/_typedoc/ContactItem/ContactItem.types.json +9 -9
- package/dist/_typedoc/DateInput/DateInput.types.json +35 -35
- package/dist/_typedoc/DateSelect/DateSelect.types.json +13 -13
- package/dist/_typedoc/DetailPage/DetailPage.types.json +5 -5
- package/dist/_typedoc/Dropdown/Dropdown.types.json +50 -38
- package/dist/_typedoc/DropdownFlyout/DropdownFlyout.types.json +31 -31
- package/dist/_typedoc/Dropzone/Dropzone.types.json +44 -44
- package/dist/_typedoc/EmptyState/EmptyState.types.json +16 -16
- package/dist/_typedoc/FileList/FileList.types.json +9 -9
- package/dist/_typedoc/FileSelect/FileSelect.types.json +27 -27
- package/dist/_typedoc/FileSelect/GridSource/GridSource.types.json +20 -20
- package/dist/_typedoc/FileSelect/LocalSource/LocalSource.types.json +14 -14
- package/dist/_typedoc/FileSelect/TreeSource/TreeSource.types.json +9 -9
- package/dist/_typedoc/Flex/Flex.types.json +27 -27
- package/dist/_typedoc/FlexList/FlexList.types.json +30 -30
- package/dist/_typedoc/Form/Form.types.json +824 -824
- package/dist/_typedoc/GhostPlaceholder/GhostPlaceholder.types.json +12 -12
- package/dist/_typedoc/Grid/Grid.types.json +8 -8
- package/dist/_typedoc/GroupSelect/GroupSelect.types.json +54 -54
- package/dist/_typedoc/Input/Input.types.json +2 -2
- package/dist/_typedoc/Link/Link.types.json +1 -1
- package/dist/_typedoc/ListPage/ListPage.types.json +13 -13
- package/dist/_typedoc/Menu/Menu.types.json +62 -62
- package/dist/_typedoc/MenuImperative/MenuImperative.types.json +90 -88
- package/dist/_typedoc/Modal/Modal.types.json +48 -48
- package/dist/_typedoc/MultiSelect/MultiSelect.types.json +33 -33
- package/dist/_typedoc/NextTile/NextTile.types.json +32 -32
- package/dist/_typedoc/Notation/Notation.types.json +4 -4
- package/dist/_typedoc/NumberInput/NumberInput.types.json +48 -48
- package/dist/_typedoc/OverlayTrigger/OverlayTrigger.types.json +33 -33
- package/dist/_typedoc/PageLayout/PageLayout.types.json +28 -28
- package/dist/_typedoc/Pagination/Pagination.types.json +7 -7
- package/dist/_typedoc/Panel/Panel.types.json +38 -27
- package/dist/_typedoc/Pill/Pill.types.json +2 -2
- package/dist/_typedoc/PillSelect/PillSelect.types.json +49 -49
- package/dist/_typedoc/Popover/Popover.types.json +15 -15
- package/dist/_typedoc/ProgressBar/ProgressBar.types.json +7 -7
- package/dist/_typedoc/RadioButton/RadioButton.types.json +6 -6
- package/dist/_typedoc/Required/Required.types.json +5 -5
- package/dist/_typedoc/Search/Search.types.json +18 -18
- package/dist/_typedoc/Section/Section.types.json +15 -15
- package/dist/_typedoc/SegmentedController/SegmentedController.types.json +21 -21
- package/dist/_typedoc/Select/Select.types.json +67 -67
- package/dist/_typedoc/SettingsPage/SettingsPage.types.json +10 -10
- package/dist/_typedoc/Slider/Slider.types.json +6 -6
- package/dist/_typedoc/Spinner/Spinner.types.json +9 -9
- package/dist/_typedoc/SplitViewCard/SplitViewCard.types.json +14 -14
- package/dist/_typedoc/Table/Table.types.json +102 -102
- package/dist/_typedoc/Tabs/Tabs.types.json +23 -22
- package/dist/_typedoc/Tearsheet/Tearsheet.types.json +17 -17
- package/dist/_typedoc/TextArea/TextArea.types.json +3 -3
- package/dist/_typedoc/TextEditor/TextEditor.types.json +11 -11
- package/dist/_typedoc/TextEditorOutput/TextEditorOutput.types.json +4 -4
- package/dist/_typedoc/Thumbnail/Thumbnail.types.json +19 -19
- package/dist/_typedoc/TieredDropdown/TieredDropdown.types.json +43 -43
- package/dist/_typedoc/TieredSelect/TieredSelect.types.json +29 -29
- package/dist/_typedoc/Tile/Tile.types.json +8 -8
- package/dist/_typedoc/Title/Title.types.json +1 -1
- package/dist/_typedoc/Toast/Toast.types.json +4 -4
- package/dist/_typedoc/ToggleButton/ToggleButton.types.json +4 -4
- package/dist/_typedoc/Token/Token.types.json +7 -7
- package/dist/_typedoc/ToolHeader/ToolHeader.types.json +10 -10
- package/dist/_typedoc/ToolLandingPage/ToolLandingPage.types.json +8 -8
- package/dist/_typedoc/Tooltip/Tooltip.types.json +15 -15
- package/dist/_typedoc/Tree/Tree.types.json +88 -88
- package/dist/_typedoc/Typeahead/Typeahead.types.json +2 -2
- package/dist/_typedoc/Typography/Typography.types.json +9 -9
- package/dist/_typedoc/_utils/types.json +3 -3
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,37 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 12.45.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 6571236: Improve accessibility for `Search` in `MenuImperative` by changing the role from `"searchbox"` to `"combobox"` and adding `aria-haspopup="listbox"` and `aria-expanded`
|
|
8
|
+
- c2c1280: Update searchable `Dropdown` trigger accessibility semantics by removing dialog-specific ARIA attributes while preserving `aria-expanded` state and focus behavior.
|
|
9
|
+
- 1a44488: `Dropdown` and `Select` with a footer now contains focus and allows TAB nav inside the overlay. TAB no longer closes when a footer is present.
|
|
10
|
+
- 19abc32: `Table`: sortable column headers now use a `<button>` for the sort action, so the control has the correct role and keyboard behavior for assistive technologies.
|
|
11
|
+
- ae74dbb: The `Tabs` More overflow list renders semantic list markup. The more overflow button is conditionally rendered. Global Navigation update, Tabs role='navigation' adds semantic list markup, expects links as Tabs.Tab children. _Note:_ Most cases role=navigation is the wrong answer, do not mix Tab UX: Tab-links-with-panels, Tab-buttons-with-panels, and Tab-navigation-links.
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- 678be29: Added `gray50` border for `Slider` track to meet contrast requirements.
|
|
16
|
+
- da03165: Page `AnchorNavigation`: add `href` fragment links for each section so anchors expose a proper link role; `preventDefault` on click preserves provider scroll and focus behavior.
|
|
17
|
+
- c20fc61: Removed `tabIndex={-1}` to make the `Token` remove button keyboard accessible in `MultiSelect`
|
|
18
|
+
- e6751b8: `Form` `read` view label node renders span not label tag. Resolves invalid a11y. Read view tests should getByText
|
|
19
|
+
- de00318: `Thumbnail`: fix screen reader reading order for checkbox role by hiding visible content from the accessibility tree
|
|
20
|
+
- 339da74: `AvatarStack` add `role="group"` with `aria-label`
|
|
21
|
+
- 23c02da: Fix `Select` with overflowing label requiring two clicks to open
|
|
22
|
+
|
|
23
|
+
## 12.44.0
|
|
24
|
+
|
|
25
|
+
### Minor Changes
|
|
26
|
+
|
|
27
|
+
- 3ace1da: Page AnchorNavigation move focus to section heading when anchor navigation link is activated
|
|
28
|
+
|
|
29
|
+
### Patch Changes
|
|
30
|
+
|
|
31
|
+
- 708b0a9: Spinner aria hide `progressbar` and `StyledSpinnerOverlayLabel` from Screen Reader when `!loading`
|
|
32
|
+
- 35d9064: Add visually hidden labels in Multi SuperSelect for ScreenReaders to announce selected items
|
|
33
|
+
- 5760de9: `Table` Update arrows of basic table to more closely resemble datatable arrow pattern that is accessible
|
|
34
|
+
|
|
3
35
|
## 12.43.0
|
|
4
36
|
|
|
5
37
|
### Minor Changes
|
|
@@ -2,22 +2,25 @@ import React from 'react';
|
|
|
2
2
|
import { useI18nContext } from '../_hooks/I18n';
|
|
3
3
|
import { StyledAnchor, StyledAnchorNavigation, StyledAnchorNavigationLandmark, StyledAnchorSection } from './AnchorNavigation.styles';
|
|
4
4
|
var Anchor = function Anchor(_ref) {
|
|
5
|
-
var
|
|
5
|
+
var id = _ref.id,
|
|
6
|
+
label = _ref.label,
|
|
6
7
|
selected = _ref.selected,
|
|
7
8
|
onClick = _ref.onClick;
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
var href = "#".concat(encodeURIComponent(id));
|
|
10
|
+
var handleClick = function handleClick(event) {
|
|
11
|
+
if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
|
|
12
|
+
return;
|
|
11
13
|
}
|
|
14
|
+
event.preventDefault();
|
|
15
|
+
onClick();
|
|
12
16
|
};
|
|
13
17
|
return /*#__PURE__*/React.createElement(StyledAnchorSection, {
|
|
14
|
-
$selected: selected
|
|
15
|
-
onClick: onClick,
|
|
16
|
-
onKeyDown: handleKeyDown
|
|
18
|
+
$selected: selected
|
|
17
19
|
}, /*#__PURE__*/React.createElement(StyledAnchor, {
|
|
20
|
+
href: href,
|
|
18
21
|
"aria-current": selected ? 'page' : undefined,
|
|
19
22
|
$selected: selected,
|
|
20
|
-
|
|
23
|
+
onClick: handleClick
|
|
21
24
|
}, label));
|
|
22
25
|
};
|
|
23
26
|
export var AnchorNavigation = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
@@ -36,6 +39,7 @@ export var AnchorNavigation = /*#__PURE__*/React.forwardRef(function (_ref2, ref
|
|
|
36
39
|
label = _ref3.label;
|
|
37
40
|
return /*#__PURE__*/React.createElement(Anchor, {
|
|
38
41
|
key: id,
|
|
42
|
+
id: id,
|
|
39
43
|
onClick: function onClick() {
|
|
40
44
|
return onSelect(id);
|
|
41
45
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnchorNavigation.js","names":["React","useI18nContext","StyledAnchor","StyledAnchorNavigation","StyledAnchorNavigationLandmark","StyledAnchorSection","Anchor","_ref","label","selected","onClick","
|
|
1
|
+
{"version":3,"file":"AnchorNavigation.js","names":["React","useI18nContext","StyledAnchor","StyledAnchorNavigation","StyledAnchorNavigationLandmark","StyledAnchorSection","Anchor","_ref","id","label","selected","onClick","href","concat","encodeURIComponent","handleClick","event","button","metaKey","ctrlKey","shiftKey","altKey","preventDefault","createElement","$selected","undefined","AnchorNavigation","forwardRef","_ref2","ref","sections","onSelect","ariaLabelProp","i18n","navigationAriaLabel","t","map","_ref3","key"],"sources":["../../src/AnchorNavigation/AnchorNavigation.tsx"],"sourcesContent":["import React from 'react'\nimport { useI18nContext } from '../_hooks/I18n'\nimport {\n StyledAnchor,\n StyledAnchorNavigation,\n StyledAnchorNavigationLandmark,\n StyledAnchorSection,\n} from './AnchorNavigation.styles'\nimport type {\n AnchorNavigationProps,\n AnchorProps,\n} from './AnchorNavigation.types'\n\nconst Anchor = ({ id, label, selected, onClick }: AnchorProps) => {\n const href = `#${encodeURIComponent(id)}`\n\n const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n if (\n event.button !== 0 ||\n event.metaKey ||\n event.ctrlKey ||\n event.shiftKey ||\n event.altKey\n ) {\n return\n }\n event.preventDefault()\n onClick()\n }\n\n return (\n <StyledAnchorSection $selected={selected}>\n <StyledAnchor\n href={href}\n aria-current={selected ? 'page' : undefined}\n $selected={selected}\n onClick={handleClick}\n >\n {label}\n </StyledAnchor>\n </StyledAnchorSection>\n )\n}\n\nexport const AnchorNavigation = React.forwardRef<\n HTMLUListElement,\n AnchorNavigationProps\n>(({ sections, selected, onSelect, 'aria-label': ariaLabelProp }, ref) => {\n const i18n = useI18nContext()\n const navigationAriaLabel =\n ariaLabelProp ?? i18n.t('core.anchorNavigation.landmarkLabel')\n\n return (\n <StyledAnchorNavigationLandmark aria-label={navigationAriaLabel}>\n <StyledAnchorNavigation ref={ref}>\n {sections.map(({ id, label }) => {\n return (\n <Anchor\n key={id}\n id={id}\n onClick={() => onSelect(id)}\n selected={selected === id}\n label={label}\n />\n )\n })}\n </StyledAnchorNavigation>\n </StyledAnchorNavigationLandmark>\n )\n})\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,gBAAgB;AAC/C,SACEC,YAAY,EACZC,sBAAsB,EACtBC,8BAA8B,EAC9BC,mBAAmB,QACd,2BAA2B;AAMlC,IAAMC,MAAM,GAAG,SAATA,MAAMA,CAAAC,IAAA,EAAsD;EAAA,IAAhDC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAEC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;EAC5C,IAAMC,IAAI,OAAAC,MAAA,CAAOC,kBAAkB,CAACN,EAAE,CAAC,CAAE;EAEzC,IAAMO,WAAW,GAAG,SAAdA,WAAWA,CAAIC,KAA0C,EAAK;IAClE,IACEA,KAAK,CAACC,MAAM,KAAK,CAAC,IAClBD,KAAK,CAACE,OAAO,IACbF,KAAK,CAACG,OAAO,IACbH,KAAK,CAACI,QAAQ,IACdJ,KAAK,CAACK,MAAM,EACZ;MACA;IACF;IACAL,KAAK,CAACM,cAAc,CAAC,CAAC;IACtBX,OAAO,CAAC,CAAC;EACX,CAAC;EAED,oBACEX,KAAA,CAAAuB,aAAA,CAAClB,mBAAmB;IAACmB,SAAS,EAAEd;EAAS,gBACvCV,KAAA,CAAAuB,aAAA,CAACrB,YAAY;IACXU,IAAI,EAAEA,IAAK;IACX,gBAAcF,QAAQ,GAAG,MAAM,GAAGe,SAAU;IAC5CD,SAAS,EAAEd,QAAS;IACpBC,OAAO,EAAEI;EAAY,GAEpBN,KACW,CACK,CAAC;AAE1B,CAAC;AAED,OAAO,IAAMiB,gBAAgB,gBAAG1B,KAAK,CAAC2B,UAAU,CAG9C,UAAAC,KAAA,EAAgEC,GAAG,EAAK;EAAA,IAArEC,QAAQ,GAAAF,KAAA,CAARE,QAAQ;IAAEpB,QAAQ,GAAAkB,KAAA,CAARlB,QAAQ;IAAEqB,QAAQ,GAAAH,KAAA,CAARG,QAAQ;IAAgBC,aAAa,GAAAJ,KAAA,CAA3B,YAAY;EAC7C,IAAMK,IAAI,GAAGhC,cAAc,CAAC,CAAC;EAC7B,IAAMiC,mBAAmB,GACvBF,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAIC,IAAI,CAACE,CAAC,CAAC,qCAAqC,CAAC;EAEhE,oBACEnC,KAAA,CAAAuB,aAAA,CAACnB,8BAA8B;IAAC,cAAY8B;EAAoB,gBAC9DlC,KAAA,CAAAuB,aAAA,CAACpB,sBAAsB;IAAC0B,GAAG,EAAEA;EAAI,GAC9BC,QAAQ,CAACM,GAAG,CAAC,UAAAC,KAAA,EAAmB;IAAA,IAAhB7B,EAAE,GAAA6B,KAAA,CAAF7B,EAAE;MAAEC,KAAK,GAAA4B,KAAA,CAAL5B,KAAK;IACxB,oBACET,KAAA,CAAAuB,aAAA,CAACjB,MAAM;MACLgC,GAAG,EAAE9B,EAAG;MACRA,EAAE,EAAEA,EAAG;MACPG,OAAO,EAAE,SAATA,OAAOA,CAAA;QAAA,OAAQoB,QAAQ,CAACvB,EAAE,CAAC;MAAA,CAAC;MAC5BE,QAAQ,EAAEA,QAAQ,KAAKF,EAAG;MAC1BC,KAAK,EAAEA;IAAM,CACd,CAAC;EAEN,CAAC,CACqB,CACM,CAAC;AAErC,CAAC,CAAC"}
|
|
@@ -5,15 +5,15 @@ import { getEllipsis } from '../_styles/mixins';
|
|
|
5
5
|
import { spacing } from '../_styles/spacing';
|
|
6
6
|
export var StyledAnchorNavigationLandmark = /*#__PURE__*/styled.nav.withConfig({
|
|
7
7
|
displayName: "StyledAnchorNavigationLandmark",
|
|
8
|
-
componentId: "core-
|
|
8
|
+
componentId: "core-12_45_0__sc-aacdj4-0"
|
|
9
9
|
})([""]);
|
|
10
10
|
export var StyledAnchorNavigation = /*#__PURE__*/styled.ul.withConfig({
|
|
11
11
|
displayName: "StyledAnchorNavigation",
|
|
12
|
-
componentId: "core-
|
|
12
|
+
componentId: "core-12_45_0__sc-aacdj4-1"
|
|
13
13
|
})(["max-width:200px;margin:0;padding-inline-start:0;"]);
|
|
14
14
|
export var StyledAnchorSection = /*#__PURE__*/styled.li.withConfig({
|
|
15
15
|
displayName: "StyledAnchorSection",
|
|
16
|
-
componentId: "core-
|
|
16
|
+
componentId: "core-12_45_0__sc-aacdj4-2"
|
|
17
17
|
})(["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) {
|
|
18
18
|
var $selected = _ref.$selected;
|
|
19
19
|
return $selected ? colors.gray15 : colors.gray90;
|
|
@@ -26,8 +26,8 @@ export var StyledAnchorSection = /*#__PURE__*/styled.li.withConfig({
|
|
|
26
26
|
}, colors.gray90);
|
|
27
27
|
export var StyledAnchor = /*#__PURE__*/styled.a.withConfig({
|
|
28
28
|
displayName: "StyledAnchor",
|
|
29
|
-
componentId: "core-
|
|
30
|
-
})(["width:100%;padding:6px ", "px;", " ", ";", " :focus-visible{box-shadow:inset 0 0 0 2px ", ";outline:none;}"], spacing.sm, getTypographyIntent('body'), function (_ref4) {
|
|
29
|
+
componentId: "core-12_45_0__sc-aacdj4-3"
|
|
30
|
+
})(["box-sizing:border-box;display:block;flex:1;min-width:0;width:100%;padding:6px ", "px;color:inherit;text-decoration:none;&:visited{color:inherit;}", " ", ";", " :focus-visible{box-shadow:inset 0 0 0 2px ", ";outline:none;}"], spacing.sm, getTypographyIntent('body'), function (_ref4) {
|
|
31
31
|
var $selected = _ref4.$selected;
|
|
32
32
|
return $selected ? css(["font-weight:600;"]) : '';
|
|
33
33
|
}, getEllipsis(), colors.blue50);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnchorNavigation.styles.js","names":["styled","css","getTypographyIntent","colors","getEllipsis","spacing","StyledAnchorNavigationLandmark","nav","withConfig","displayName","componentId","StyledAnchorNavigation","ul","StyledAnchorSection","li","xs","_ref","$selected","gray15","gray90","_ref2","_ref3","gray60","StyledAnchor","a","sm","_ref4","blue50"],"sources":["../../src/AnchorNavigation/AnchorNavigation.styles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { getTypographyIntent } from '../Typography/Typography.styles'\nimport { colors } from '../_styles/colors'\nimport { getEllipsis } from '../_styles/mixins'\nimport { spacing } from '../_styles/spacing'\n\nexport const StyledAnchorNavigationLandmark = styled.nav``\n\nexport const StyledAnchorNavigation = styled.ul`\n max-width: 200px;\n margin: 0;\n padding-inline-start: 0;\n`\n\nexport const StyledAnchorSection = styled.li<{ $selected: boolean }>`\n display: flex;\n cursor: pointer;\n border-left: ${spacing.xs}px solid\n ${({ $selected }) => ($selected ? colors.gray15 : colors.gray90)};\n background-color: ${({ $selected }) =>\n $selected ? colors.gray90 : 'transparent'};\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px;\n\n :hover {\n border-left: ${spacing.xs}px solid\n ${({ $selected }) => ($selected ? colors.gray15 : colors.gray60)};\n background-color: ${colors.gray90};\n }\n`\nexport const StyledAnchor = styled.a<{ $selected: boolean }>`\n width: 100%;\n padding: 6px ${spacing.sm}px;\n ${getTypographyIntent('body')}\n\n ${({ $selected }) =>\n $selected\n ? css`\n font-weight: 600;\n `\n : ''};\n\n ${getEllipsis()}\n\n :focus-visible {\n box-shadow: inset 0 0 0 2px ${colors.blue50};\n outline: none;\n }\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,mBAAmB,QAAQ,iCAAiC;AACrE,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,OAAO,IAAMC,8BAA8B,gBAAGN,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAE;AAE1D,OAAO,IAAMC,sBAAsB,gBAAGX,MAAM,CAACY,EAAE,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wDAI9C;AAED,OAAO,IAAMG,mBAAmB,gBAAGb,MAAM,CAACc,EAAE,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gNAG3BL,OAAO,CAACU,EAAE,EACrB,UAAAC,IAAA;EAAA,IAAGC,SAAS,GAAAD,IAAA,CAATC,SAAS;EAAA,OAAQA,SAAS,GAAGd,MAAM,CAACe,MAAM,GAAGf,MAAM,CAACgB,MAAM;AAAA,CAAC,EAC9C,UAAAC,KAAA;EAAA,IAAGH,SAAS,GAAAG,KAAA,CAATH,SAAS;EAAA,OAC9BA,SAAS,GAAGd,MAAM,CAACgB,MAAM,GAAG,aAAa;AAAA,GAK1Bd,OAAO,CAACU,EAAE,EACrB,UAAAM,KAAA;EAAA,IAAGJ,SAAS,GAAAI,KAAA,CAATJ,SAAS;EAAA,OAAQA,SAAS,GAAGd,MAAM,CAACe,MAAM,GAAGf,MAAM,CAACmB,MAAM;AAAA,CAAC,EAC9CnB,MAAM,CAACgB,MAAM,CAEpC;AACD,OAAO,IAAMI,YAAY,gBAAGvB,MAAM,CAACwB,CAAC,CAAAhB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"AnchorNavigation.styles.js","names":["styled","css","getTypographyIntent","colors","getEllipsis","spacing","StyledAnchorNavigationLandmark","nav","withConfig","displayName","componentId","StyledAnchorNavigation","ul","StyledAnchorSection","li","xs","_ref","$selected","gray15","gray90","_ref2","_ref3","gray60","StyledAnchor","a","sm","_ref4","blue50"],"sources":["../../src/AnchorNavigation/AnchorNavigation.styles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { getTypographyIntent } from '../Typography/Typography.styles'\nimport { colors } from '../_styles/colors'\nimport { getEllipsis } from '../_styles/mixins'\nimport { spacing } from '../_styles/spacing'\n\nexport const StyledAnchorNavigationLandmark = styled.nav``\n\nexport const StyledAnchorNavigation = styled.ul`\n max-width: 200px;\n margin: 0;\n padding-inline-start: 0;\n`\n\nexport const StyledAnchorSection = styled.li<{ $selected: boolean }>`\n display: flex;\n cursor: pointer;\n border-left: ${spacing.xs}px solid\n ${({ $selected }) => ($selected ? colors.gray15 : colors.gray90)};\n background-color: ${({ $selected }) =>\n $selected ? colors.gray90 : 'transparent'};\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px;\n\n :hover {\n border-left: ${spacing.xs}px solid\n ${({ $selected }) => ($selected ? colors.gray15 : colors.gray60)};\n background-color: ${colors.gray90};\n }\n`\nexport const StyledAnchor = styled.a<{ $selected: boolean }>`\n box-sizing: border-box;\n display: block;\n flex: 1;\n min-width: 0;\n width: 100%;\n padding: 6px ${spacing.sm}px;\n color: inherit;\n text-decoration: none;\n\n &:visited {\n color: inherit;\n }\n\n ${getTypographyIntent('body')}\n\n ${({ $selected }) =>\n $selected\n ? css`\n font-weight: 600;\n `\n : ''};\n\n ${getEllipsis()}\n\n :focus-visible {\n box-shadow: inset 0 0 0 2px ${colors.blue50};\n outline: none;\n }\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,mBAAmB,QAAQ,iCAAiC;AACrE,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,OAAO,IAAMC,8BAA8B,gBAAGN,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAE;AAE1D,OAAO,IAAMC,sBAAsB,gBAAGX,MAAM,CAACY,EAAE,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wDAI9C;AAED,OAAO,IAAMG,mBAAmB,gBAAGb,MAAM,CAACc,EAAE,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gNAG3BL,OAAO,CAACU,EAAE,EACrB,UAAAC,IAAA;EAAA,IAAGC,SAAS,GAAAD,IAAA,CAATC,SAAS;EAAA,OAAQA,SAAS,GAAGd,MAAM,CAACe,MAAM,GAAGf,MAAM,CAACgB,MAAM;AAAA,CAAC,EAC9C,UAAAC,KAAA;EAAA,IAAGH,SAAS,GAAAG,KAAA,CAATH,SAAS;EAAA,OAC9BA,SAAS,GAAGd,MAAM,CAACgB,MAAM,GAAG,aAAa;AAAA,GAK1Bd,OAAO,CAACU,EAAE,EACrB,UAAAM,KAAA;EAAA,IAAGJ,SAAS,GAAAI,KAAA,CAATJ,SAAS;EAAA,OAAQA,SAAS,GAAGd,MAAM,CAACe,MAAM,GAAGf,MAAM,CAACmB,MAAM;AAAA,CAAC,EAC9CnB,MAAM,CAACgB,MAAM,CAEpC;AACD,OAAO,IAAMI,YAAY,gBAAGvB,MAAM,CAACwB,CAAC,CAAAhB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sOAMnBL,OAAO,CAACoB,EAAE,EAQvBvB,mBAAmB,CAAC,MAAM,CAAC,EAE3B,UAAAwB,KAAA;EAAA,IAAGT,SAAS,GAAAS,KAAA,CAATT,SAAS;EAAA,OACZA,SAAS,GACLhB,GAAG,yBAGH,EAAE;AAAA,GAENG,WAAW,CAAC,CAAC,EAGiBD,MAAM,CAACwB,MAAM,CAG9C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnchorNavigation.types.js","names":[],"sources":["../../src/AnchorNavigation/AnchorNavigation.types.tsx"],"sourcesContent":["export type AnchorNavigationSection = {\n id: string\n label: string\n}\n\nexport type AnchorNavigationElementSection = AnchorNavigationSection & {\n element: HTMLElement\n}\n\nexport interface AnchorNavigationProps {\n /**\n * An array of sections used in the anchor navigation.\n * @since 12.18.0\n */\n sections: AnchorNavigationSection[]\n /**\n * The ID of the currently selected section.\n * @since 12.18.0\n */\n selected: string\n /**\n * Callback function to update the selected section ID.\n * @since 12.18.0\n */\n onSelect: (id: string) => void\n /**\n * Accessible name for the navigation landmark. When omitted, the default\n * translated string `On this page` is used.\n * @since 12.42.0\n */\n 'aria-label'?: string\n}\n\nexport type AnchorProps = {\n label: string\n selected: boolean\n onClick: () => void\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"AnchorNavigation.types.js","names":[],"sources":["../../src/AnchorNavigation/AnchorNavigation.types.tsx"],"sourcesContent":["export type AnchorNavigationSection = {\n id: string\n label: string\n}\n\nexport type AnchorNavigationElementSection = AnchorNavigationSection & {\n element: HTMLElement\n}\n\nexport interface AnchorNavigationProps {\n /**\n * An array of sections used in the anchor navigation.\n * @since 12.18.0\n */\n sections: AnchorNavigationSection[]\n /**\n * The ID of the currently selected section.\n * @since 12.18.0\n */\n selected: string\n /**\n * Callback function to update the selected section ID.\n * @since 12.18.0\n */\n onSelect: (id: string) => void\n /**\n * Accessible name for the navigation landmark. When omitted, the default\n * translated string `On this page` is used.\n * @since 12.42.0\n */\n 'aria-label'?: string\n}\n\nexport type AnchorProps = {\n id: string\n label: string\n selected: boolean\n onClick: () => void\n}\n"],"mappings":""}
|
|
@@ -71,6 +71,17 @@ export function AnchorNavigationProvider(_ref) {
|
|
|
71
71
|
|
|
72
72
|
// Disable scroll listener to avoid changing active element
|
|
73
73
|
ref.current.blockScrollTimestamp = new Date().getTime();
|
|
74
|
+
|
|
75
|
+
// Move focus to the section heading for keyboard and screen reader users
|
|
76
|
+
var heading = element.querySelector('h1, h2, h3, h4, h5, h6');
|
|
77
|
+
if (heading instanceof HTMLElement) {
|
|
78
|
+
if (!heading.hasAttribute('tabindex')) {
|
|
79
|
+
heading.setAttribute('tabindex', '-1');
|
|
80
|
+
}
|
|
81
|
+
heading.focus({
|
|
82
|
+
preventScroll: true
|
|
83
|
+
});
|
|
84
|
+
}
|
|
74
85
|
}
|
|
75
86
|
};
|
|
76
87
|
React.useEffect(function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnchorNavigationProvider.js","names":["throttle","React","AnchorNavigationContext","createContext","offset","sections","selected","registerSection","unregisterSection","onSelect","useAnchorNavigationContext","useContext","findScrollContainer","element","parent","parentElement","_window$getComputedSt","window","getComputedStyle","overflow","split","every","o","document","documentElement","getElementScrollPosition","scroller","y","el","offsetTop","offsetParent","AnchorNavigationProvider","_ref","children","_ref$offset","_React$useState","useState","_React$useState2","_slicedToArray","setSelected","ref","useRef","blockScrollTimestamp","changeSelected","id","_sections$find","_ref$current","current","find","section","scrollTo","top","behavior","Date","getTime","useEffect","onScroll","event","_ref$current2","now","length","scrollTop","scrollY","_sections$","selectedIndex","findIndex","item","selectedElement","Math","max","throttleScrollEvent","addEventListener","capture","passive","removeEventListener","cancel","label","_ref$current3","index","push","splice","createElement","Provider","value"],"sources":["../../src/AnchorNavigation/AnchorNavigationProvider.tsx"],"sourcesContent":["import throttle from 'lodash.throttle'\nimport React from 'react'\nimport type { AnchorNavigationElementSection } from './AnchorNavigation.types'\n\nexport const AnchorNavigationContext = React.createContext<{\n offset: number\n sections: AnchorNavigationElementSection[]\n selected: string\n registerSection: (id: string, label: string, element: HTMLElement) => void\n unregisterSection: (id: string) => void\n onSelect: (id: string, withScroll?: boolean) => void\n}>({\n offset: 0,\n sections: [],\n selected: '',\n registerSection: () => {},\n unregisterSection: () => {},\n onSelect: () => {},\n})\n\nexport const useAnchorNavigationContext = () =>\n React.useContext(AnchorNavigationContext)\n\ninterface AnchorNavigationProviderProps {\n offset?: number\n}\n\nfunction findScrollContainer(element: HTMLElement): HTMLElement {\n let parent = element.parentElement\n while (parent) {\n const { overflow } = window.getComputedStyle(parent)\n if (overflow.split(' ').every((o) => o === 'auto' || o === 'scroll')) {\n return parent\n }\n parent = parent.parentElement\n }\n\n return document.documentElement\n}\n\nfunction getElementScrollPosition(\n element: HTMLElement,\n scroller: HTMLElement | null\n): number {\n let y = 0\n let el: HTMLElement | null = element\n\n do {\n y += el.offsetTop\n el = el.offsetParent as HTMLElement | null\n } while (el && el !== scroller)\n\n return y\n}\n\nexport function AnchorNavigationProvider({\n children,\n offset = 0,\n}: React.PropsWithChildren<AnchorNavigationProviderProps>) {\n const [selected, setSelected] = React.useState('')\n const ref = React.useRef<{\n sections: AnchorNavigationElementSection[]\n blockScrollTimestamp: number\n scroller: HTMLElement | null\n }>({\n sections: [],\n blockScrollTimestamp: 0,\n scroller: null,\n })\n\n const changeSelected = (id: string) => {\n const { sections, scroller } = ref.current\n setSelected(id)\n\n const element = sections.find((section) => section.id === id)?.element\n\n if (element) {\n ;(scroller || window).scrollTo({\n top: getElementScrollPosition(element, scroller) - offset,\n behavior: 'smooth',\n })\n\n // Disable scroll listener to avoid changing active element\n ref.current.blockScrollTimestamp = new Date().getTime()\n }\n }\n\n React.useEffect(() => {\n const onScroll = (event?: Event) => {\n const { blockScrollTimestamp, sections, scroller } = ref.current\n const now = new Date().getTime()\n\n if (!sections.length) return\n\n // Disable scroll event when auto scrolling by clicking on the anchor\n if (now - blockScrollTimestamp < 200) {\n ref.current.blockScrollTimestamp = now\n return\n }\n\n const y =\n (scroller\n ? scroller.scrollTop\n : window.scrollY || document.documentElement.scrollTop) + offset\n\n // Before the first element\n if (getElementScrollPosition(sections[0].element, scroller) > y) {\n if (event) {\n setSelected(sections[0]?.id)\n }\n return\n }\n\n // Get first element overflowing top, get the previous one\n const selectedIndex = sections.findIndex(\n (item) => getElementScrollPosition(item.element, scroller) > y\n )\n\n const selectedElement =\n selectedIndex === -1\n ? sections[sections.length - 1]\n : sections[Math.max(selectedIndex - 1, 0)]\n\n if (selectedElement) {\n setSelected(selectedElement.id)\n }\n }\n\n const throttleScrollEvent = throttle(onScroll, 100)\n addEventListener('scroll', throttleScrollEvent, {\n capture: false,\n passive: true,\n })\n onScroll()\n\n return () => {\n removeEventListener('scroll', throttleScrollEvent, { capture: false })\n throttleScrollEvent.cancel()\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n const registerSection = (id: string, label: string, element: HTMLElement) => {\n if (!ref.current.scroller) {\n ref.current.scroller = findScrollContainer(element)\n }\n\n const { sections, scroller } = ref.current\n\n if (sections.find((section) => section.id === id)) {\n return\n }\n\n const y = getElementScrollPosition(element, scroller)\n const index = sections.findIndex(\n (section) => getElementScrollPosition(section.element, scroller) > y\n )\n\n if (index === -1) {\n sections.push({ id, label, element })\n } else {\n sections.splice(index, 0, { id, label, element })\n }\n\n if (sections.length === 1) {\n setSelected(id)\n }\n }\n\n const unregisterSection = (id: string) => {\n const { sections } = ref.current\n const index = sections.findIndex((section) => section.id === id)\n if (index !== -1) {\n sections.splice(index, 1)\n }\n }\n\n return (\n <AnchorNavigationContext.Provider\n value={{\n offset,\n selected,\n sections: ref.current.sections,\n onSelect: changeSelected,\n registerSection,\n unregisterSection,\n }}\n >\n {children}\n </AnchorNavigationContext.Provider>\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"AnchorNavigationProvider.js","names":["throttle","React","AnchorNavigationContext","createContext","offset","sections","selected","registerSection","unregisterSection","onSelect","useAnchorNavigationContext","useContext","findScrollContainer","element","parent","parentElement","_window$getComputedSt","window","getComputedStyle","overflow","split","every","o","document","documentElement","getElementScrollPosition","scroller","y","el","offsetTop","offsetParent","AnchorNavigationProvider","_ref","children","_ref$offset","_React$useState","useState","_React$useState2","_slicedToArray","setSelected","ref","useRef","blockScrollTimestamp","changeSelected","id","_sections$find","_ref$current","current","find","section","scrollTo","top","behavior","Date","getTime","heading","querySelector","HTMLElement","hasAttribute","setAttribute","focus","preventScroll","useEffect","onScroll","event","_ref$current2","now","length","scrollTop","scrollY","_sections$","selectedIndex","findIndex","item","selectedElement","Math","max","throttleScrollEvent","addEventListener","capture","passive","removeEventListener","cancel","label","_ref$current3","index","push","splice","createElement","Provider","value"],"sources":["../../src/AnchorNavigation/AnchorNavigationProvider.tsx"],"sourcesContent":["import throttle from 'lodash.throttle'\nimport React from 'react'\nimport type { AnchorNavigationElementSection } from './AnchorNavigation.types'\n\nexport const AnchorNavigationContext = React.createContext<{\n offset: number\n sections: AnchorNavigationElementSection[]\n selected: string\n registerSection: (id: string, label: string, element: HTMLElement) => void\n unregisterSection: (id: string) => void\n onSelect: (id: string, withScroll?: boolean) => void\n}>({\n offset: 0,\n sections: [],\n selected: '',\n registerSection: () => {},\n unregisterSection: () => {},\n onSelect: () => {},\n})\n\nexport const useAnchorNavigationContext = () =>\n React.useContext(AnchorNavigationContext)\n\ninterface AnchorNavigationProviderProps {\n offset?: number\n}\n\nfunction findScrollContainer(element: HTMLElement): HTMLElement {\n let parent = element.parentElement\n while (parent) {\n const { overflow } = window.getComputedStyle(parent)\n if (overflow.split(' ').every((o) => o === 'auto' || o === 'scroll')) {\n return parent\n }\n parent = parent.parentElement\n }\n\n return document.documentElement\n}\n\nfunction getElementScrollPosition(\n element: HTMLElement,\n scroller: HTMLElement | null\n): number {\n let y = 0\n let el: HTMLElement | null = element\n\n do {\n y += el.offsetTop\n el = el.offsetParent as HTMLElement | null\n } while (el && el !== scroller)\n\n return y\n}\n\nexport function AnchorNavigationProvider({\n children,\n offset = 0,\n}: React.PropsWithChildren<AnchorNavigationProviderProps>) {\n const [selected, setSelected] = React.useState('')\n const ref = React.useRef<{\n sections: AnchorNavigationElementSection[]\n blockScrollTimestamp: number\n scroller: HTMLElement | null\n }>({\n sections: [],\n blockScrollTimestamp: 0,\n scroller: null,\n })\n\n const changeSelected = (id: string) => {\n const { sections, scroller } = ref.current\n setSelected(id)\n\n const element = sections.find((section) => section.id === id)?.element\n\n if (element) {\n ;(scroller || window).scrollTo({\n top: getElementScrollPosition(element, scroller) - offset,\n behavior: 'smooth',\n })\n\n // Disable scroll listener to avoid changing active element\n ref.current.blockScrollTimestamp = new Date().getTime()\n\n // Move focus to the section heading for keyboard and screen reader users\n const heading = element.querySelector('h1, h2, h3, h4, h5, h6')\n if (heading instanceof HTMLElement) {\n if (!heading.hasAttribute('tabindex')) {\n heading.setAttribute('tabindex', '-1')\n }\n heading.focus({ preventScroll: true })\n }\n }\n }\n\n React.useEffect(() => {\n const onScroll = (event?: Event) => {\n const { blockScrollTimestamp, sections, scroller } = ref.current\n const now = new Date().getTime()\n\n if (!sections.length) return\n\n // Disable scroll event when auto scrolling by clicking on the anchor\n if (now - blockScrollTimestamp < 200) {\n ref.current.blockScrollTimestamp = now\n return\n }\n\n const y =\n (scroller\n ? scroller.scrollTop\n : window.scrollY || document.documentElement.scrollTop) + offset\n\n // Before the first element\n if (getElementScrollPosition(sections[0].element, scroller) > y) {\n if (event) {\n setSelected(sections[0]?.id)\n }\n return\n }\n\n // Get first element overflowing top, get the previous one\n const selectedIndex = sections.findIndex(\n (item) => getElementScrollPosition(item.element, scroller) > y\n )\n\n const selectedElement =\n selectedIndex === -1\n ? sections[sections.length - 1]\n : sections[Math.max(selectedIndex - 1, 0)]\n\n if (selectedElement) {\n setSelected(selectedElement.id)\n }\n }\n\n const throttleScrollEvent = throttle(onScroll, 100)\n addEventListener('scroll', throttleScrollEvent, {\n capture: false,\n passive: true,\n })\n onScroll()\n\n return () => {\n removeEventListener('scroll', throttleScrollEvent, { capture: false })\n throttleScrollEvent.cancel()\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n const registerSection = (id: string, label: string, element: HTMLElement) => {\n if (!ref.current.scroller) {\n ref.current.scroller = findScrollContainer(element)\n }\n\n const { sections, scroller } = ref.current\n\n if (sections.find((section) => section.id === id)) {\n return\n }\n\n const y = getElementScrollPosition(element, scroller)\n const index = sections.findIndex(\n (section) => getElementScrollPosition(section.element, scroller) > y\n )\n\n if (index === -1) {\n sections.push({ id, label, element })\n } else {\n sections.splice(index, 0, { id, label, element })\n }\n\n if (sections.length === 1) {\n setSelected(id)\n }\n }\n\n const unregisterSection = (id: string) => {\n const { sections } = ref.current\n const index = sections.findIndex((section) => section.id === id)\n if (index !== -1) {\n sections.splice(index, 1)\n }\n }\n\n return (\n <AnchorNavigationContext.Provider\n value={{\n offset,\n selected,\n sections: ref.current.sections,\n onSelect: changeSelected,\n registerSection,\n unregisterSection,\n }}\n >\n {children}\n </AnchorNavigationContext.Provider>\n )\n}\n"],"mappings":"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"}
|
|
@@ -28,26 +28,26 @@ var iconSize = {
|
|
|
28
28
|
};
|
|
29
29
|
export var StyledAvatarOverlay = /*#__PURE__*/styled.div.withConfig({
|
|
30
30
|
displayName: "StyledAvatarOverlay",
|
|
31
|
-
componentId: "core-
|
|
31
|
+
componentId: "core-12_45_0__sc-7q2ydl-0"
|
|
32
32
|
})(["width:100%;height:100%;position:absolute;top:0;left:0;border-radius:100%;opacity:0;"]);
|
|
33
33
|
export var StyledIconContainer = /*#__PURE__*/styled.div.withConfig({
|
|
34
34
|
displayName: "StyledIconContainer",
|
|
35
|
-
componentId: "core-
|
|
35
|
+
componentId: "core-12_45_0__sc-7q2ydl-1"
|
|
36
36
|
})(["display:inline-flex;"]);
|
|
37
37
|
export var StyledLabelContainer = /*#__PURE__*/styled.div.withConfig({
|
|
38
38
|
displayName: "StyledLabelContainer",
|
|
39
|
-
componentId: "core-
|
|
39
|
+
componentId: "core-12_45_0__sc-7q2ydl-2"
|
|
40
40
|
})(["text-transform:uppercase;"]);
|
|
41
41
|
export var StyledPortraitContainer = /*#__PURE__*/styled.div.withConfig({
|
|
42
42
|
displayName: "StyledPortraitContainer",
|
|
43
|
-
componentId: "core-
|
|
43
|
+
componentId: "core-12_45_0__sc-7q2ydl-3"
|
|
44
44
|
})(["background-color:", ";background-position:center;background-repeat:no-repeat;background-size:cover;height:100%;width:100%;", ""], colors.white, function (_ref) {
|
|
45
45
|
var $imageUrl = _ref.$imageUrl;
|
|
46
46
|
return css(["background-image:url(", ");"], $imageUrl);
|
|
47
47
|
});
|
|
48
48
|
export var StyledAvatarContainer = /*#__PURE__*/styled.div.withConfig({
|
|
49
49
|
displayName: "StyledAvatarContainer",
|
|
50
|
-
componentId: "core-
|
|
50
|
+
componentId: "core-12_45_0__sc-7q2ydl-4"
|
|
51
51
|
})(["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('outside'), getGapOutlineFocus('outside'), function (_ref2) {
|
|
52
52
|
var _ref2$$size = _ref2.$size,
|
|
53
53
|
$size = _ref2$$size === void 0 ? 'md' : _ref2$$size;
|
|
@@ -374,7 +374,9 @@ var _AvatarStack = function _AvatarStack(_ref8, ref) {
|
|
|
374
374
|
return getColorOrder(visibleItems);
|
|
375
375
|
}, [visibleItems]);
|
|
376
376
|
return /*#__PURE__*/React.createElement("div", _extends({
|
|
377
|
-
ref: ref
|
|
377
|
+
ref: ref,
|
|
378
|
+
role: "group",
|
|
379
|
+
"aria-label": title
|
|
378
380
|
}, props), isViewAllNeeded && !onClickViewAll && /*#__PURE__*/React.createElement(ViewAllModal, {
|
|
379
381
|
isOpen: isModalOpen,
|
|
380
382
|
onClose: function onClose() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarStack.js","names":["Building","People","useId","React","forwardRef","useMemo","useState","Avatar","Button","ContactItem","Link","Modal","OverlayTrigger","Popover","Typography","useI18nContext","mergeRefs","colorsOrder","foldedItemsCap","restCountThreshold","visibleItemsCap","StyledAvatar","StyledContactItem","StyledContactItems","StyledModalBody","StyledViewAllWrapper","StyledWrapper","useAvatarPopover","OVERLAY_WRAPPER_SELECTOR","FOCUSABLE_SELECTOR","POPOVER_TRIGGER","POPOVER_SHOW_KEYS","POPOVER_HIDE_KEYS","overlay","target","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","disabled","icon","key","Title","href","Description","AvatarContent","_ref3","props","_objectWithoutProperties","_excluded","avatarIcon","Portrait","_extends","Icon","Label","AvatarWithPopover","_ref4","colors","_useAvatarPopover","focusableSelector","overlayWrapperSelector","triggerRef","popoverContentRef","beforeShow","beforeHide","afterHide","trigger","showKeys","hideKeys","restoreFocusOnHide","shrinkOverlay","arrow","trackAriaExpanded","placement","e","Content","ref","role","$color","get","FoldedAvatarStack","_ref5","onClickViewAll","title","viewMoreTriggerRef","I18n","restAvatarId","_useAvatarPopover2","onClick","variant","t","tabIndex","ViewAllModal","_ref6","isOpen","onClose","labelId","text","open","Header","Heading","Footer","FooterButtons","defaultInitials","defaultGetImageUrl","getTransformedItems","_ref7","getInitials","getImageUrl","_objectSpread","MODAL_CLOSE_FOCUS_DELAY_MS","_AvatarStack","_ref8","_items","_ref8$size","_ref8$getInitials","_ref8$getImageUrl","_excluded2","_useState","_useState2","_slicedToArray","isModalOpen","setIsModalOpen","useRef","wasModalOpenRef","useEffect","current","setTimeout","_viewMoreTriggerRef$c","focus","clearTimeout","_useMemo","visibleItemsColors","undefined","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'\nimport { Button } from '../Button'\nimport { ContactItem } from '../ContactItem'\nimport { Link } from '../Link'\nimport { Modal } from '../Modal'\nimport { OverlayTrigger } from '../OverlayTrigger'\nimport { Popover } from '../Popover'\nimport { Typography } from '../Typography'\nimport { useI18nContext } from '../_hooks/I18n'\nimport type { TriggerVariant } from '../_hooks/Trigger'\nimport type { Color } from '../_styles/colors'\nimport { mergeRefs } from '../_utils/mergeRefs'\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'\nimport { useAvatarPopover } from './useAvatarPopover'\n\nconst OVERLAY_WRAPPER_SELECTOR =\n '[data-qa=\"core-overlay-trigger-overlay-wrapper\"]'\n\nconst FOCUSABLE_SELECTOR =\n 'a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n\nconst POPOVER_TRIGGER = ['hover', 'focus'] as TriggerVariant[]\n\nconst POPOVER_SHOW_KEYS = ['Enter', ' ']\n\nconst POPOVER_HIDE_KEYS = {\n overlay: ['Escape', 'Esc'],\n target: ['Escape', 'Esc'],\n}\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 disabled={inactive}\n icon={getContactIcon(type)}\n imageUrl={imageUrl}\n initials={initials}\n key={id}\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 ...props\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 {...props} imageUrl={imageUrl} />\n }\n\n if (avatarIcon) {\n return <Avatar.Icon {...props} icon={avatarIcon} />\n }\n\n if (initials) {\n return <Avatar.Label {...props}>{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 { triggerRef, popoverContentRef, beforeShow, beforeHide, afterHide } =\n useAvatarPopover({\n focusableSelector: FOCUSABLE_SELECTOR,\n overlayWrapperSelector: OVERLAY_WRAPPER_SELECTOR,\n })\n\n return (\n <OverlayTrigger\n key={item.id}\n trigger={POPOVER_TRIGGER}\n showKeys={POPOVER_SHOW_KEYS}\n hideKeys={POPOVER_HIDE_KEYS}\n restoreFocusOnHide={false}\n shrinkOverlay\n arrow\n trackAriaExpanded\n placement=\"top\"\n beforeShow={(e) => {\n if (item.inactive) return false\n return beforeShow(e)\n }}\n beforeHide={beforeHide}\n afterHide={afterHide}\n overlay={\n <Popover.Content ref={popoverContentRef} placement=\"top\">\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 ref={triggerRef}\n role=\"button\"\n $color={colors.get(item.id) as Color}\n aria-label={`${item.name}, ${item.description}`}\n disabled={item.inactive}\n size={size}\n >\n <AvatarContent\n imageUrl={item.imageUrl}\n initials={item.initials}\n type={item.type}\n size={size}\n />\n </StyledAvatar>\n </OverlayTrigger>\n )\n}\n\nexport function FoldedAvatarStack<Item extends AvatarStackItem>({\n items,\n onClickViewAll,\n size,\n restCountLabel,\n isViewAllNeeded,\n title,\n viewMoreTriggerRef,\n}: FoldedAvatarStackProps<Item>) {\n const I18n = useI18nContext()\n const restAvatarId = useId()\n const { triggerRef, popoverContentRef, beforeShow, beforeHide, afterHide } =\n useAvatarPopover({\n focusableSelector: FOCUSABLE_SELECTOR,\n overlayWrapperSelector: OVERLAY_WRAPPER_SELECTOR,\n })\n\n return (\n <OverlayTrigger\n aria-labelledby={restAvatarId}\n trigger={POPOVER_TRIGGER}\n showKeys={POPOVER_SHOW_KEYS}\n hideKeys={POPOVER_HIDE_KEYS}\n restoreFocusOnHide={false}\n shrinkOverlay\n arrow\n trackAriaExpanded\n placement=\"top\"\n beforeShow={beforeShow}\n beforeHide={beforeHide}\n afterHide={afterHide}\n overlay={\n <Popover.Content ref={popoverContentRef} placement=\"top\">\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 ref={\n viewMoreTriggerRef\n ? mergeRefs(triggerRef, viewMoreTriggerRef)\n : triggerRef\n }\n role=\"button\"\n tabIndex={0}\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 </OverlayTrigger>\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 const text = `${title} (${items.length})`\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 <Modal.Heading id={labelId}>{text}</Modal.Heading>\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 MODAL_CLOSE_FOCUS_DELAY_MS = 350\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 const viewMoreTriggerRef = React.useRef<HTMLDivElement>(null)\n const wasModalOpenRef = React.useRef(false)\n\n React.useEffect(() => {\n if (wasModalOpenRef.current && !isModalOpen) {\n const id = setTimeout(() => {\n viewMoreTriggerRef.current?.focus()\n }, MODAL_CLOSE_FOCUS_DELAY_MS)\n wasModalOpenRef.current = false\n return () => clearTimeout(id)\n }\n wasModalOpenRef.current = isModalOpen\n }, [isModalOpen])\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 viewMoreTriggerRef={\n !onClickViewAll ? viewMoreTriggerRef : undefined\n }\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","OverlayTrigger","Popover","Typography","useI18nContext","mergeRefs","colorsOrder","foldedItemsCap","restCountThreshold","visibleItemsCap","StyledAvatar","StyledContactItem","StyledContactItems","StyledModalBody","StyledViewAllWrapper","StyledWrapper","useAvatarPopover","OVERLAY_WRAPPER_SELECTOR","FOCUSABLE_SELECTOR","POPOVER_TRIGGER","POPOVER_SHOW_KEYS","POPOVER_HIDE_KEYS","overlay","target","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","disabled","icon","key","Title","href","Description","AvatarContent","_ref3","props","_objectWithoutProperties","_excluded","avatarIcon","Portrait","_extends","Icon","Label","AvatarWithPopover","_ref4","colors","_useAvatarPopover","focusableSelector","overlayWrapperSelector","triggerRef","popoverContentRef","beforeShow","beforeHide","afterHide","trigger","showKeys","hideKeys","restoreFocusOnHide","shrinkOverlay","arrow","trackAriaExpanded","placement","e","Content","ref","role","$color","get","FoldedAvatarStack","_ref5","onClickViewAll","title","viewMoreTriggerRef","I18n","restAvatarId","_useAvatarPopover2","onClick","variant","t","tabIndex","ViewAllModal","_ref6","isOpen","onClose","labelId","text","open","Header","Heading","Footer","FooterButtons","defaultInitials","defaultGetImageUrl","getTransformedItems","_ref7","getInitials","getImageUrl","_objectSpread","MODAL_CLOSE_FOCUS_DELAY_MS","_AvatarStack","_ref8","_items","_ref8$size","_ref8$getInitials","_ref8$getImageUrl","_excluded2","_useState","_useState2","_slicedToArray","isModalOpen","setIsModalOpen","useRef","wasModalOpenRef","useEffect","current","setTimeout","_viewMoreTriggerRef$c","focus","clearTimeout","_useMemo","visibleItemsColors","undefined","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'\nimport { Button } from '../Button'\nimport { ContactItem } from '../ContactItem'\nimport { Link } from '../Link'\nimport { Modal } from '../Modal'\nimport { OverlayTrigger } from '../OverlayTrigger'\nimport { Popover } from '../Popover'\nimport { Typography } from '../Typography'\nimport { useI18nContext } from '../_hooks/I18n'\nimport type { TriggerVariant } from '../_hooks/Trigger'\nimport type { Color } from '../_styles/colors'\nimport { mergeRefs } from '../_utils/mergeRefs'\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'\nimport { useAvatarPopover } from './useAvatarPopover'\n\nconst OVERLAY_WRAPPER_SELECTOR =\n '[data-qa=\"core-overlay-trigger-overlay-wrapper\"]'\n\nconst FOCUSABLE_SELECTOR =\n 'a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n\nconst POPOVER_TRIGGER = ['hover', 'focus'] as TriggerVariant[]\n\nconst POPOVER_SHOW_KEYS = ['Enter', ' ']\n\nconst POPOVER_HIDE_KEYS = {\n overlay: ['Escape', 'Esc'],\n target: ['Escape', 'Esc'],\n}\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 disabled={inactive}\n icon={getContactIcon(type)}\n imageUrl={imageUrl}\n initials={initials}\n key={id}\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 ...props\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 {...props} imageUrl={imageUrl} />\n }\n\n if (avatarIcon) {\n return <Avatar.Icon {...props} icon={avatarIcon} />\n }\n\n if (initials) {\n return <Avatar.Label {...props}>{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 { triggerRef, popoverContentRef, beforeShow, beforeHide, afterHide } =\n useAvatarPopover({\n focusableSelector: FOCUSABLE_SELECTOR,\n overlayWrapperSelector: OVERLAY_WRAPPER_SELECTOR,\n })\n\n return (\n <OverlayTrigger\n key={item.id}\n trigger={POPOVER_TRIGGER}\n showKeys={POPOVER_SHOW_KEYS}\n hideKeys={POPOVER_HIDE_KEYS}\n restoreFocusOnHide={false}\n shrinkOverlay\n arrow\n trackAriaExpanded\n placement=\"top\"\n beforeShow={(e) => {\n if (item.inactive) return false\n return beforeShow(e)\n }}\n beforeHide={beforeHide}\n afterHide={afterHide}\n overlay={\n <Popover.Content ref={popoverContentRef} placement=\"top\">\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 ref={triggerRef}\n role=\"button\"\n $color={colors.get(item.id) as Color}\n aria-label={`${item.name}, ${item.description}`}\n disabled={item.inactive}\n size={size}\n >\n <AvatarContent\n imageUrl={item.imageUrl}\n initials={item.initials}\n type={item.type}\n size={size}\n />\n </StyledAvatar>\n </OverlayTrigger>\n )\n}\n\nexport function FoldedAvatarStack<Item extends AvatarStackItem>({\n items,\n onClickViewAll,\n size,\n restCountLabel,\n isViewAllNeeded,\n title,\n viewMoreTriggerRef,\n}: FoldedAvatarStackProps<Item>) {\n const I18n = useI18nContext()\n const restAvatarId = useId()\n const { triggerRef, popoverContentRef, beforeShow, beforeHide, afterHide } =\n useAvatarPopover({\n focusableSelector: FOCUSABLE_SELECTOR,\n overlayWrapperSelector: OVERLAY_WRAPPER_SELECTOR,\n })\n\n return (\n <OverlayTrigger\n aria-labelledby={restAvatarId}\n trigger={POPOVER_TRIGGER}\n showKeys={POPOVER_SHOW_KEYS}\n hideKeys={POPOVER_HIDE_KEYS}\n restoreFocusOnHide={false}\n shrinkOverlay\n arrow\n trackAriaExpanded\n placement=\"top\"\n beforeShow={beforeShow}\n beforeHide={beforeHide}\n afterHide={afterHide}\n overlay={\n <Popover.Content ref={popoverContentRef} placement=\"top\">\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 ref={\n viewMoreTriggerRef\n ? mergeRefs(triggerRef, viewMoreTriggerRef)\n : triggerRef\n }\n role=\"button\"\n tabIndex={0}\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 </OverlayTrigger>\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 const text = `${title} (${items.length})`\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 <Modal.Heading id={labelId}>{text}</Modal.Heading>\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 MODAL_CLOSE_FOCUS_DELAY_MS = 350\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 const viewMoreTriggerRef = React.useRef<HTMLDivElement>(null)\n const wasModalOpenRef = React.useRef(false)\n\n React.useEffect(() => {\n if (wasModalOpenRef.current && !isModalOpen) {\n const id = setTimeout(() => {\n viewMoreTriggerRef.current?.focus()\n }, MODAL_CLOSE_FOCUS_DELAY_MS)\n wasModalOpenRef.current = false\n return () => clearTimeout(id)\n }\n wasModalOpenRef.current = isModalOpen\n }, [isModalOpen])\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} role=\"group\" aria-label={title} {...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 viewMoreTriggerRef={\n !onClickViewAll ? viewMoreTriggerRef : undefined\n }\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_45_0__sc-ft72hu-0"
|
|
11
11
|
})(["border-color:", ";border-style:solid;border-width:1px;&:hover{z-index:1;}"], colors.white);
|
|
12
12
|
export var StyledAvatar = /*#__PURE__*/styled(StyledBaseAvatar).withConfig({
|
|
13
13
|
displayName: "StyledAvatar",
|
|
14
|
-
componentId: "core-
|
|
14
|
+
componentId: "core-12_45_0__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_45_0__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_45_0__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_45_0__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_45_0__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_45_0__sc-ft72hu-6"
|
|
37
37
|
})(["flex-shrink:0;"]);
|
|
38
38
|
//# sourceMappingURL=AvatarStack.styles.js.map
|
|
@@ -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_45_0__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_45_0__sc-rpertu-1"
|
|
9
9
|
})(["bottom:100%;position:absolute;right:0;transform:translateX(50%) translateY(50%);"]);
|
|
10
10
|
//# sourceMappingURL=Badge.styles.js.map
|
|
@@ -3,11 +3,11 @@ import { getTypographyIntent } from '../Typography';
|
|
|
3
3
|
import { colors } from '../_styles/colors';
|
|
4
4
|
export var StyledBadgeContainer = /*#__PURE__*/styled.div.withConfig({
|
|
5
5
|
displayName: "StyledBadgeContainer",
|
|
6
|
-
componentId: "core-
|
|
6
|
+
componentId: "core-12_45_0__sc-s2n9gd-0"
|
|
7
7
|
})(["display:inline-flex;position:relative;"]);
|
|
8
8
|
export var StyledBadgeContent = /*#__PURE__*/styled.div.withConfig({
|
|
9
9
|
displayName: "StyledBadgeContent",
|
|
10
|
-
componentId: "core-
|
|
10
|
+
componentId: "core-12_45_0__sc-s2n9gd-1"
|
|
11
11
|
})(["position:relative;", " ", " pointer-events:none;user-select:none;"], function (_ref) {
|
|
12
12
|
var $overlapping = _ref.$overlapping,
|
|
13
13
|
_ref$$xOffset = _ref.$xOffset,
|
|
@@ -20,13 +20,13 @@ export var StyledBadgeContent = /*#__PURE__*/styled.div.withConfig({
|
|
|
20
20
|
});
|
|
21
21
|
export var StyledBadgeDotIndicator = /*#__PURE__*/styled.div.withConfig({
|
|
22
22
|
displayName: "StyledBadgeDotIndicator",
|
|
23
|
-
componentId: "core-
|
|
23
|
+
componentId: "core-12_45_0__sc-s2n9gd-2"
|
|
24
24
|
})(["width:6px;height:6px;border-radius:50%;background-color:", ";"], colors.orange50);
|
|
25
25
|
var oneDigitStyles = "\n border-radius: 50%;\n padding: 2px;\n min-width: 21.5px;\n min-height: 21.5px;\n";
|
|
26
26
|
var multiDigitStyles = "\n border-radius: 10px;\n padding: 2px 8px;\n";
|
|
27
27
|
export var StyledBadgeCounter = /*#__PURE__*/styled.div.withConfig({
|
|
28
28
|
displayName: "StyledBadgeCounter",
|
|
29
|
-
componentId: "core-
|
|
29
|
+
componentId: "core-12_45_0__sc-s2n9gd-3"
|
|
30
30
|
})(["display:inline-flex;justify-content:center;align-items:center;color:", ";background-color:", ";", " ", ""], colors.white, colors.orange50, getTypographyIntent('small'), function (props) {
|
|
31
31
|
return props.$oneDigit ? oneDigitStyles : multiDigitStyles;
|
|
32
32
|
});
|