@procore/core-react 12.38.0 → 12.40.0-beta.0

package/.jest/testShims.js

@@ -14,6 +14,12 @@ global.ResizeObserver = jest.fn(() => ({
   disconnect: jest.fn(),
 }))
 
+global.IntersectionObserver = jest.fn(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}))
+
 // TODO remove this eventually
 global['requestAnimationFrame'] = function requestAnimationFrame(callback) {
   setTimeout(callback, 0)

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # Change Log
 
+## 12.40.0
+
+### Minor Changes
+
+- 79d9a1d: Update Tab attributes and more overflow for keyboard and fix aria attributes. May cause friction with existing tests.
+  - `Tabs.Tab` now defaults to buttons if provided a click handler. Allows them to be in keyboard TAB order by default. It is preferred that consumers explicitly opt-in to button or link role.
+  - `Tabs.Tab role = link` now renders `a role = link` instead of `a role = button`. May break tests, to resolve update tests to target link rather than button.
+  - `Tabs` no longer renders a `nav` element. May break tests, to resolve update tests to target individual tabs, the group, or add data-qa attributes.
+  - Resolve "no nested controls" for overflow. The Tabs "More" overflow menu no longer is role = menu and menuitems with nested interactions, now renders `role = dialog` and relies on the children to be focusable for regular keyboard TAB navigation.
+- 28c4df6: New design pattern- `Panel.Title` and `SplitViewCard.PanelTitle` remove truncation and tooltip, allowing the text to wrap mutliple lines. Content text and left/right buttons align at the top.
+- fd506f5: Show `FileToken` error message inline instead of in a tooltip
+
+## 12.39.0
+
+### Minor Changes
+
+- 916989e: Improve date input accessibility by adding an `aria-label` prop
+- 3a1321e: Make `AvatarStack` avatar popovers keyboard accessible
+
+  - Changed avatar triggers from img/link roles to button role
+
+- 4ed0299: - Introduced a new hierarchical model for rendering grouped options across `Select`, `MultiSelect`, `GroupSelect`, and `Form` components which improves semantic HTML structure. Backward compatibility is maintained.
+  - The `groupHeaderRenderer` prop in `MultiSelect`, `Form.Select`, and `GroupSelect` is deprecated. Use `groupRenderer` instead, which now receives the group object and its `children` (the options).
+  - Passing group label as the `children` to `MenuImperative.Group` and `Select.OptGroup` is deprecated. Use the `label` prop for the group title and pass the options as `children`.
+- 82146ce: Improve `MultiSelect` accessibility:
+
+  - Add `aria-invalid` and `aria-describedby` support for error state
+  - Fix selected tokens announcing "selectable" by removing them from tab order
+  - Fix combobox input nested inside `role="list"` by separating structure from visual layout
+  - Add Delete key support for removing tokens
+  - Close dropdown when navigating tokens with arrow keys
+  - Add "None selected" announcement when no items are selected
+
+- d36f2ec: Make Tooltips announced by screen readers. User should still supply a focusable element like `Button`.
+
+  - `Tooltip` update default `trigger` to hover _and focus_
+  - `Tooltip` supports `trackAriaExpanded` prop to pass aria open state to children. Recommendation set to `true`, valid on elements like `button`. Currently false, possible future default it to true
+  - `Tooltip.Content` uses `aria-live` ~possible future: renders empty container, then inner content~
+  - `Tooltip` apply `role tooltip` to the overlay to handle `aria-describedby` and `id`. Allow for manual `aria-describedby` and `id`
+  - Update tooltips in `Checkbox`, `SegmentedController`, and `SourceItem`
+
+- 4bbe568: Added `onTransitionEnd` handler to Panel to unmount it from the DOM after the closing animation finishes
+
+### Patch Changes
+
+- 374386b: Demo and Coverage stories now wrap `DateSelect` with a visible `Label` ("Date") and `aria-labelledby`. Applies to Basic, Locales, and all variants (empty, with value, error, disabled)
+- f9ed3e9: In `Page.Aside` added optional focus management (`focusOnOpen`, `restoreFocusOnClose`) to move focus into the aside on open and restore it on close, without affecting existing behavior by default.
+- 578560c: Removing the tooltip on non-preview FileList item re: a11y
+- f9ed3e9: Remove scroll area from shifting on focus. Section and Tearsheet use outline instead of border for visible focus
+- b0da9a8: Enhance a11y for `CheckboxOutput` component by moving existing `aria-label` from the `span` wrapper to the `svg` icon.
+- 40ce870: remove intersection observer
+- fd6f808: Disable onClear when Select, TieredSelect, or PillSelect is disabled.
+
 ## 12.38.0
 
 ### Minor Changes
@@ -23,6 +76,8 @@
 
 ## 12.37.0
 
+**DO NOT USE 12.37.0** This release changed SuperSelect UI UX which caused issues. It has been reverted, please use `12.38.0` instead.
+
 ### Minor Changes
 
 - 26ca426: _Changes internal HTML structure_ Fix Delete control accessibility in Select components:

package/dist/AnchorNavigation/AnchorNavigation.styles.js

@@ -5,11 +5,11 @@ import { getEllipsis } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 export var StyledAnchorNavigation = /*#__PURE__*/styled.ul.withConfig({
   displayName: "StyledAnchorNavigation",
-  componentId: "core-12_38_0__sc-aacdj4-0"
+  componentId: "core-12_40_0-beta_0__sc-aacdj4-0"
 })(["max-width:200px;margin:0;padding-inline-start:0;"]);
 export var StyledAnchorSection = /*#__PURE__*/styled.li.withConfig({
   displayName: "StyledAnchorSection",
-  componentId: "core-12_38_0__sc-aacdj4-1"
+  componentId: "core-12_40_0-beta_0__sc-aacdj4-1"
 })(["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) {
   var $selected = _ref.$selected;
   return $selected ? colors.gray15 : colors.gray90;
@@ -22,7 +22,7 @@ export var StyledAnchorSection = /*#__PURE__*/styled.li.withConfig({
 }, colors.gray90);
 export var StyledAnchor = /*#__PURE__*/styled.a.withConfig({
   displayName: "StyledAnchor",
-  componentId: "core-12_38_0__sc-aacdj4-2"
+  componentId: "core-12_40_0-beta_0__sc-aacdj4-2"
 })(["width:100%;padding:6px ", "px;", " ", ";", " :focus-visible{box-shadow:inset 0 0 0 2px ", ";outline:none;}"], spacing.sm, getTypographyIntent('body'), function (_ref4) {
   var $selected = _ref4.$selected;
   return $selected ? css(["font-weight:600;"]) : '';

package/dist/Avatar/Avatar.styles.js

@@ -28,27 +28,27 @@ var iconSize = {
 };
 export var StyledAvatarOverlay = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAvatarOverlay",
-  componentId: "core-12_38_0__sc-7q2ydl-0"
+  componentId: "core-12_40_0-beta_0__sc-7q2ydl-0"
 })(["width:100%;height:100%;position:absolute;top:0;left:0;border-radius:100%;opacity:0;"]);
 export var StyledIconContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledIconContainer",
-  componentId: "core-12_38_0__sc-7q2ydl-1"
+  componentId: "core-12_40_0-beta_0__sc-7q2ydl-1"
 })(["display:inline-flex;"]);
 export var StyledLabelContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledLabelContainer",
-  componentId: "core-12_38_0__sc-7q2ydl-2"
+  componentId: "core-12_40_0-beta_0__sc-7q2ydl-2"
 })(["text-transform:uppercase;"]);
 export var StyledPortraitContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPortraitContainer",
-  componentId: "core-12_38_0__sc-7q2ydl-3"
+  componentId: "core-12_40_0-beta_0__sc-7q2ydl-3"
 })(["background-color:", ";background-position:center;background-repeat:no-repeat;background-size:cover;height:100%;width:100%;", ""], colors.white, function (_ref) {
   var $imageUrl = _ref.$imageUrl;
   return css(["background-image:url(", ");"], $imageUrl);
 });
 export var StyledAvatarContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAvatarContainer",
-  componentId: "core-12_38_0__sc-7q2ydl-4"
-})(["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) {
+  componentId: "core-12_40_0-beta_0__sc-7q2ydl-4"
+})(["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) {
   var _ref2$$size = _ref2.$size,
     $size = _ref2$$size === void 0 ? 'md' : _ref2$$size;
   return css(["font-size:", "px;font-weight:", ";height:", "px;width:", "px;min-height:", "px;min-width:", "px;", "{svg{height:", "px;width:", "px;}}"], fontSize[$size], fontWeights[$size], containerSize[$size], containerSize[$size], containerSize[$size], containerSize[$size], StyledIconContainer, iconSize[$size], iconSize[$size]);

package/dist/Avatar/Avatar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.styles.js","names":["styled","css","colors","getGapOutlineFocus","activeOverlayOpacity","containerSize","xl","lg","md","sm","fontSize","fontWeights","iconSize","StyledAvatarOverlay","div","withConfig","displayName","componentId","StyledIconContainer","StyledLabelContainer","StyledPortraitContainer","white","_ref","$imageUrl","StyledAvatarContainer","gray30","_ref2","_ref2$$size","$size","_ref3","$disabled","$clickable","black","gray85"],"sources":["../../src/Avatar/Avatar.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { colors } from '../_styles/colors'\nimport { getGapOutlineFocus } from '../_styles/mixins'\nimport type { BaseAvatarProps } from './Avatar.types'\n\ninterface StyledAvatarProps {\n  $clickable: BaseAvatarProps['clickable']\n  $disabled: BaseAvatarProps['disabled']\n  $size: BaseAvatarProps['size']\n}\n\nconst activeOverlayOpacity = 0.3\n\nconst containerSize = { xl: 96, lg: 40, md: 32, sm: 24 } as const\n\nconst fontSize = { xl: 40, lg: 14, md: 14, sm: 12 } as const\n\nconst fontWeights = { xl: 700, lg: 600, md: 600, sm: 600 } as const\n\nconst iconSize = { xl: 48, lg: 24, md: 16, sm: 16 } as const\n\nexport const StyledAvatarOverlay = styled.div`\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  border-radius: 100%;\n  opacity: 0;\n`\n\nexport const StyledIconContainer = styled.div`\n  display: inline-flex;\n`\n\nexport const StyledLabelContainer = styled.div`\n  text-transform: uppercase;\n`\n\nexport const StyledPortraitContainer = styled.div<{ $imageUrl: string }>`\n  background-color: ${colors.white};\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  height: 100%;\n  width: 100%;\n  ${({ $imageUrl }) =>\n    css`\n      background-image: url(${$imageUrl});\n    `}\n`\n\nexport const StyledAvatarContainer = styled.div<StyledAvatarProps>`\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 100%;\n  overflow: hidden;\n  position: relative;\n  cursor: default;\n  color: ${colors.white};\n  background-color: ${colors.gray30};\n  text-decoration: none;\n\n  a:has(> &) {\n    text-decoration: none;\n  }\n\n  &:focus {\n    ${getGapOutlineFocus}\n  }\n  // For safety, separate rule block with 'has' for supported browsers\n  // this supports any anchor directly wrapping an Avatar.\n  // 'outline' works better on display inline-block and inline-flex,\n  // elements, unfortunately anchors and inline by default.\n  a:focus:has(> &) {\n    ${getGapOutlineFocus}\n    border-radius: 100%;\n  }\n\n  ${({ $size = 'md' }) => css`\n    font-size: ${fontSize[$size]}px;\n    font-weight: ${fontWeights[$size]};\n    height: ${containerSize[$size]}px;\n    width: ${containerSize[$size]}px;\n    min-height: ${containerSize[$size]}px;\n    min-width: ${containerSize[$size]}px;\n\n    ${StyledIconContainer} {\n      svg {\n        height: ${iconSize[$size]}px;\n        width: ${iconSize[$size]}px;\n      }\n    }\n  `}\n\n  ${({ $disabled, $clickable }) => {\n    if (!$disabled && $clickable) {\n      return css`\n        cursor: pointer;\n\n        &:hover {\n          ${StyledAvatarOverlay} {\n            opacity: ${activeOverlayOpacity};\n          }\n        }\n\n        ${StyledAvatarOverlay} {\n          background-color: ${colors.black};\n        }\n      `\n    }\n\n    if ($disabled && !$clickable) {\n      return css`\n        background-color: ${colors.gray85};\n\n        ${StyledAvatarOverlay} {\n          background-color: ${colors.white};\n          opacity: ${activeOverlayOpacity};\n        }\n      `\n    }\n\n    if ($disabled && $clickable) {\n      return css`\n        cursor: pointer;\n        background-color: ${colors.gray85};\n\n        &:hover {\n          ${StyledAvatarOverlay} {\n            background-color: ${colors.black};\n            opacity: ${activeOverlayOpacity};\n          }\n        }\n\n        ${StyledAvatarOverlay} {\n          background-color: ${colors.white};\n          opacity: ${activeOverlayOpacity};\n        }\n      `\n    }\n  }};\n`\n"],"mappings":"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"}
+{"version":3,"file":"Avatar.styles.js","names":["styled","css","colors","getGapOutlineFocus","activeOverlayOpacity","containerSize","xl","lg","md","sm","fontSize","fontWeights","iconSize","StyledAvatarOverlay","div","withConfig","displayName","componentId","StyledIconContainer","StyledLabelContainer","StyledPortraitContainer","white","_ref","$imageUrl","StyledAvatarContainer","gray30","_ref2","_ref2$$size","$size","_ref3","$disabled","$clickable","black","gray85"],"sources":["../../src/Avatar/Avatar.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { colors } from '../_styles/colors'\nimport { getGapOutlineFocus } from '../_styles/mixins'\nimport type { BaseAvatarProps } from './Avatar.types'\n\ninterface StyledAvatarProps {\n  $clickable: BaseAvatarProps['clickable']\n  $disabled: BaseAvatarProps['disabled']\n  $size: BaseAvatarProps['size']\n}\n\nconst activeOverlayOpacity = 0.3\n\nconst containerSize = { xl: 96, lg: 40, md: 32, sm: 24 } as const\n\nconst fontSize = { xl: 40, lg: 14, md: 14, sm: 12 } as const\n\nconst fontWeights = { xl: 700, lg: 600, md: 600, sm: 600 } as const\n\nconst iconSize = { xl: 48, lg: 24, md: 16, sm: 16 } as const\n\nexport const StyledAvatarOverlay = styled.div`\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  border-radius: 100%;\n  opacity: 0;\n`\n\nexport const StyledIconContainer = styled.div`\n  display: inline-flex;\n`\n\nexport const StyledLabelContainer = styled.div`\n  text-transform: uppercase;\n`\n\nexport const StyledPortraitContainer = styled.div<{ $imageUrl: string }>`\n  background-color: ${colors.white};\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  height: 100%;\n  width: 100%;\n  ${({ $imageUrl }) =>\n    css`\n      background-image: url(${$imageUrl});\n    `}\n`\n\nexport const StyledAvatarContainer = styled.div<StyledAvatarProps>`\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 100%;\n  overflow: hidden;\n  position: relative;\n  cursor: default;\n  color: ${colors.white};\n  background-color: ${colors.gray30};\n  text-decoration: none;\n\n  a:has(> &) {\n    text-decoration: none;\n  }\n\n  &:focus {\n    ${getGapOutlineFocus('outside')}\n  }\n  // For safety, separate rule block with 'has' for supported browsers\n  // this supports any anchor directly wrapping an Avatar.\n  // 'outline' works better on display inline-block and inline-flex,\n  // elements, unfortunately anchors and inline by default.\n  a:focus:has(> &) {\n    ${getGapOutlineFocus('outside')}\n    border-radius: 100%;\n  }\n\n  ${({ $size = 'md' }) => css`\n    font-size: ${fontSize[$size]}px;\n    font-weight: ${fontWeights[$size]};\n    height: ${containerSize[$size]}px;\n    width: ${containerSize[$size]}px;\n    min-height: ${containerSize[$size]}px;\n    min-width: ${containerSize[$size]}px;\n\n    ${StyledIconContainer} {\n      svg {\n        height: ${iconSize[$size]}px;\n        width: ${iconSize[$size]}px;\n      }\n    }\n  `}\n\n  ${({ $disabled, $clickable }) => {\n    if (!$disabled && $clickable) {\n      return css`\n        cursor: pointer;\n\n        &:hover {\n          ${StyledAvatarOverlay} {\n            opacity: ${activeOverlayOpacity};\n          }\n        }\n\n        ${StyledAvatarOverlay} {\n          background-color: ${colors.black};\n        }\n      `\n    }\n\n    if ($disabled && !$clickable) {\n      return css`\n        background-color: ${colors.gray85};\n\n        ${StyledAvatarOverlay} {\n          background-color: ${colors.white};\n          opacity: ${activeOverlayOpacity};\n        }\n      `\n    }\n\n    if ($disabled && $clickable) {\n      return css`\n        cursor: pointer;\n        background-color: ${colors.gray85};\n\n        &:hover {\n          ${StyledAvatarOverlay} {\n            background-color: ${colors.black};\n            opacity: ${activeOverlayOpacity};\n          }\n        }\n\n        ${StyledAvatarOverlay} {\n          background-color: ${colors.white};\n          opacity: ${activeOverlayOpacity};\n        }\n      `\n    }\n  }};\n`\n"],"mappings":"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"}

package/dist/AvatarStack/AvatarStack.d.ts

@@ -17,7 +17,7 @@ export declare function AvatarContent({ imageUrl, initials, type, size, ...props
     type: AvatarStackItem['type'];
     size: AvatarStackSize;
 }): React.JSX.Element | null;
-export declare function FoldedAvatarStack<Item extends AvatarStackItem>({ items, onClickViewAll, size, restCountLabel, isViewAllNeeded, title, }: FoldedAvatarStackProps<Item>): React.JSX.Element;
+export declare function FoldedAvatarStack<Item extends AvatarStackItem>({ items, onClickViewAll, size, restCountLabel, isViewAllNeeded, title, viewMoreTriggerRef, }: FoldedAvatarStackProps<Item>): React.JSX.Element;
 export declare function ViewAllModal<Item extends AvatarStackItem>({ isOpen, onClose, title, items, }: ViewAllModalProps<Item>): React.JSX.Element;
 export declare function defaultInitials<Item extends AvatarStackItem>(item: Item): string;
 export declare function defaultGetImageUrl<Item extends AvatarStackItem>(item: Item): string;

package/dist/AvatarStack/AvatarStack.js

@@ -23,12 +23,22 @@ import { Button } from '../Button';
 import { ContactItem } from '../ContactItem';
 import { Link } from '../Link';
 import { Modal } from '../Modal';
+import { OverlayTrigger } from '../OverlayTrigger';
 import { Popover } from '../Popover';
 import { Typography } from '../Typography';
 import { useI18nContext } from '../_hooks/I18n';
+import { mergeRefs } from '../_utils/mergeRefs';
 import { colorsOrder, foldedItemsCap, restCountThreshold, visibleItemsCap } from './AvatarStack.constants';
 import { StyledAvatar, StyledContactItem, StyledContactItems, StyledModalBody, StyledViewAllWrapper, StyledWrapper } from './AvatarStack.styles';
-var defaultPopoverTrigger = ['hover', 'focus'];
+import { useAvatarPopover } from './useAvatarPopover';
+var OVERLAY_WRAPPER_SELECTOR = '[data-qa="core-overlay-trigger-overlay-wrapper"]';
+var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var POPOVER_TRIGGER = ['hover', 'focus'];
+var POPOVER_SHOW_KEYS = ['Enter', ' '];
+var POPOVER_HIDE_KEYS = {
+  overlay: ['Escape', 'Esc'],
+  target: ['Escape', 'Esc']
+};
 export function getOverflowValues(items) {
   var foldedItems = [];
   var restCountLabel = null;
@@ -145,20 +155,35 @@ function AvatarWithPopover(_ref4) {
   var item = _ref4.item,
     size = _ref4.size,
     colors = _ref4.colors;
-  var hasEnabledLink = item.linkUrl && !item.inactive;
-  var avatarProps = hasEnabledLink ? {
-    role: 'link',
-    href: item.linkUrl
-  } : {
-    role: 'img',
-    // Allow SR to open Popover as it cycles through. Keeps visual with audio.
-    // The link or image is labelled, and focus does not enter the Popover.
-    tabIndex: -1
-  };
-  return /*#__PURE__*/React.createElement(Popover, {
+  var _useAvatarPopover = useAvatarPopover({
+      focusableSelector: FOCUSABLE_SELECTOR,
+      overlayWrapperSelector: OVERLAY_WRAPPER_SELECTOR
+    }),
+    triggerRef = _useAvatarPopover.triggerRef,
+    popoverContentRef = _useAvatarPopover.popoverContentRef,
+    _beforeShow = _useAvatarPopover.beforeShow,
+    beforeHide = _useAvatarPopover.beforeHide,
+    afterHide = _useAvatarPopover.afterHide;
+  return /*#__PURE__*/React.createElement(OverlayTrigger, {
     key: item.id,
-    trigger: defaultPopoverTrigger,
-    overlay: /*#__PURE__*/React.createElement(Popover.Content, null, /*#__PURE__*/React.createElement(AvatarStackContactItem, {
+    trigger: POPOVER_TRIGGER,
+    showKeys: POPOVER_SHOW_KEYS,
+    hideKeys: POPOVER_HIDE_KEYS,
+    restoreFocusOnHide: false,
+    shrinkOverlay: true,
+    arrow: true,
+    trackAriaExpanded: true,
+    placement: "top",
+    beforeShow: function beforeShow(e) {
+      if (item.inactive) return false;
+      return _beforeShow(e);
+    },
+    beforeHide: beforeHide,
+    afterHide: afterHide,
+    overlay: /*#__PURE__*/React.createElement(Popover.Content, {
+      ref: popoverContentRef,
+      placement: "top"
+    }, /*#__PURE__*/React.createElement(AvatarStackContactItem, {
       id: item.id,
       type: item.type,
       imageUrl: item.imageUrl,
@@ -168,12 +193,14 @@ function AvatarWithPopover(_ref4) {
       linkUrl: item.linkUrl,
       description: item.description
     }))
-  }, /*#__PURE__*/React.createElement(StyledAvatar, _extends({}, avatarProps, {
+  }, /*#__PURE__*/React.createElement(StyledAvatar, {
+    ref: triggerRef,
+    role: "button",
     $color: colors.get(item.id),
     "aria-label": "".concat(item.name, ", ").concat(item.description),
     disabled: item.inactive,
     size: size
-  }), /*#__PURE__*/React.createElement(AvatarContent, {
+  }, /*#__PURE__*/React.createElement(AvatarContent, {
     imageUrl: item.imageUrl,
     initials: item.initials,
     type: item.type,
@@ -186,18 +213,36 @@ export function FoldedAvatarStack(_ref5) {
     size = _ref5.size,
     restCountLabel = _ref5.restCountLabel,
     isViewAllNeeded = _ref5.isViewAllNeeded,
-    title = _ref5.title;
+    title = _ref5.title,
+    viewMoreTriggerRef = _ref5.viewMoreTriggerRef;
   var I18n = useI18nContext();
-  var overlayRef = React.useRef(null);
   var restAvatarId = useId();
-  return /*#__PURE__*/React.createElement(Popover, {
+  var _useAvatarPopover2 = useAvatarPopover({
+      focusableSelector: FOCUSABLE_SELECTOR,
+      overlayWrapperSelector: OVERLAY_WRAPPER_SELECTOR
+    }),
+    triggerRef = _useAvatarPopover2.triggerRef,
+    popoverContentRef = _useAvatarPopover2.popoverContentRef,
+    beforeShow = _useAvatarPopover2.beforeShow,
+    beforeHide = _useAvatarPopover2.beforeHide,
+    afterHide = _useAvatarPopover2.afterHide;
+  return /*#__PURE__*/React.createElement(OverlayTrigger, {
     "aria-labelledby": restAvatarId,
-    overlayRef: overlayRef,
-    trigger: defaultPopoverTrigger,
-    beforeHide: function beforeHide(e) {
-      return e.type !== 'blur';
-    },
-    overlay: /*#__PURE__*/React.createElement(Popover.Content, null, /*#__PURE__*/React.createElement(StyledContactItems, null, items.map(function (item) {
+    trigger: POPOVER_TRIGGER,
+    showKeys: POPOVER_SHOW_KEYS,
+    hideKeys: POPOVER_HIDE_KEYS,
+    restoreFocusOnHide: false,
+    shrinkOverlay: true,
+    arrow: true,
+    trackAriaExpanded: true,
+    placement: "top",
+    beforeShow: beforeShow,
+    beforeHide: beforeHide,
+    afterHide: afterHide,
+    overlay: /*#__PURE__*/React.createElement(Popover.Content, {
+      ref: popoverContentRef,
+      placement: "top"
+    }, /*#__PURE__*/React.createElement(StyledContactItems, null, items.map(function (item) {
       return /*#__PURE__*/React.createElement(AvatarStackContactItem, {
         key: item.id,
         id: item.id,
@@ -216,8 +261,9 @@ export function FoldedAvatarStack(_ref5) {
       variant: "secondary"
     }, I18n.t('core.avatarStack.viewAll'))))
   }, /*#__PURE__*/React.createElement(StyledAvatar, {
+    ref: viewMoreTriggerRef ? mergeRefs(triggerRef, viewMoreTriggerRef) : triggerRef,
     role: "button",
-    onPress: onClickViewAll,
+    tabIndex: 0,
     id: restAvatarId,
     "aria-label": "".concat(restCountLabel, ", ").concat(title),
     "data-qa": "core-avatar-stack-folded-avatars-popover-trigger",
@@ -279,6 +325,7 @@ export function getTransformedItems(_ref7) {
     });
   });
 }
+var MODAL_CLOSE_FOCUS_DELAY_MS = 350;
 var _AvatarStack = function _AvatarStack(_ref8, ref) {
   var _items = _ref8.items,
     title = _ref8.title,
@@ -294,6 +341,21 @@ var _AvatarStack = function _AvatarStack(_ref8, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isModalOpen = _useState2[0],
     setIsModalOpen = _useState2[1];
+  var viewMoreTriggerRef = React.useRef(null);
+  var wasModalOpenRef = React.useRef(false);
+  React.useEffect(function () {
+    if (wasModalOpenRef.current && !isModalOpen) {
+      var id = setTimeout(function () {
+        var _viewMoreTriggerRef$c;
+        (_viewMoreTriggerRef$c = viewMoreTriggerRef.current) === null || _viewMoreTriggerRef$c === void 0 ? void 0 : _viewMoreTriggerRef$c.focus();
+      }, MODAL_CLOSE_FOCUS_DELAY_MS);
+      wasModalOpenRef.current = false;
+      return function () {
+        return clearTimeout(id);
+      };
+    }
+    wasModalOpenRef.current = isModalOpen;
+  }, [isModalOpen]);
   var items = useMemo(function () {
     return getTransformedItems({
       items: _items,
@@ -335,7 +397,8 @@ var _AvatarStack = function _AvatarStack(_ref8, ref) {
       return setIsModalOpen(true);
     },
     size: size,
-    title: title
+    title: title,
+    viewMoreTriggerRef: !onClickViewAll ? viewMoreTriggerRef : undefined
   })));
 };
 

package/dist/AvatarStack/AvatarStack.js.map

@@ -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","disabled","icon","key","Title","href","Description","AvatarContent","_ref3","props","_objectWithoutProperties","_excluded","avatarIcon","Portrait","_extends","Icon","Label","AvatarWithPopover","_ref4","colors","hasEnabledLink","avatarProps","role","tabIndex","trigger","overlay","Content","$color","get","FoldedAvatarStack","_ref5","onClickViewAll","title","I18n","overlayRef","useRef","restAvatarId","beforeHide","e","onClick","variant","t","onPress","ViewAllModal","_ref6","isOpen","onClose","labelId","text","open","Header","Heading","Footer","FooterButtons","defaultInitials","defaultGetImageUrl","getTransformedItems","_ref7","getInitials","getImageUrl","_objectSpread","_AvatarStack","_ref8","ref","_items","_ref8$size","_ref8$getInitials","_ref8$getImageUrl","_excluded2","_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'\nimport { Button } from '../Button'\nimport { ContactItem } from '../ContactItem'\nimport { Link } from '../Link'\nimport { Modal } from '../Modal'\nimport type { OverlayTriggerRef } from '../OverlayTrigger/OverlayTrigger.types'\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 {\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      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 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        $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    </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      aria-labelledby={restAvatarId}\n      overlayRef={overlayRef}\n      trigger={defaultPopoverTrigger}\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  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 _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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"}
+{"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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"}

package/dist/AvatarStack/AvatarStack.styles.js

@@ -7,32 +7,32 @@ import { spacing } from '../_styles/spacing';
 var maxModalWidth = 528;
 var StyledBaseAvatar = /*#__PURE__*/styled(Avatar).withConfig({
   displayName: "StyledBaseAvatar",
-  componentId: "core-12_38_0__sc-ft72hu-0"
-})(["border-color:", ";border-style:solid;border-width:1px;&:hover{z-index:1;}&[role='img']:focus{outline:none;}"], colors.white);
+  componentId: "core-12_40_0-beta_0__sc-ft72hu-0"
+})(["border-color:", ";border-style:solid;border-width:1px;&:hover{z-index:1;}"], colors.white);
 export var StyledAvatar = /*#__PURE__*/styled(StyledBaseAvatar).withConfig({
   displayName: "StyledAvatar",
-  componentId: "core-12_38_0__sc-ft72hu-1"
+  componentId: "core-12_40_0-beta_0__sc-ft72hu-1"
 })(["background-color:", ";"], function (props) {
   return colors[props.$color];
 });
 export var StyledContactItems = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledContactItems",
-  componentId: "core-12_38_0__sc-ft72hu-2"
+  componentId: "core-12_40_0-beta_0__sc-ft72hu-2"
 })(["padding-top:", "px;padding-bottom:", "px;padding-left:", "px;"], spacing.sm, spacing.sm, spacing.xs);
 export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledWrapper",
-  componentId: "core-12_38_0__sc-ft72hu-3"
+  componentId: "core-12_40_0-beta_0__sc-ft72hu-3"
 })(["display:flex;", " + ", "{margin-left:-", "px;}"], StyledAvatar, StyledAvatar, spacing.sm);
 export var StyledViewAllWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledViewAllWrapper",
-  componentId: "core-12_38_0__sc-ft72hu-4"
+  componentId: "core-12_40_0-beta_0__sc-ft72hu-4"
 })(["display:flex;margin-left:", "px;margin-bottom:", "px;"], spacing.md, spacing.lg);
 export var StyledModalBody = /*#__PURE__*/styled(Modal.Body).withConfig({
   displayName: "StyledModalBody",
-  componentId: "core-12_38_0__sc-ft72hu-5"
+  componentId: "core-12_40_0-beta_0__sc-ft72hu-5"
 })(["max-width:", "px;"], maxModalWidth);
 export var StyledContactItem = /*#__PURE__*/styled(ContactItem).withConfig({
   displayName: "StyledContactItem",
-  componentId: "core-12_38_0__sc-ft72hu-6"
+  componentId: "core-12_40_0-beta_0__sc-ft72hu-6"
 })(["flex-shrink:0;"]);
 //# sourceMappingURL=AvatarStack.styles.js.map

package/dist/AvatarStack/AvatarStack.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarStack.styles.js","names":["styled","Avatar","ContactItem","Modal","colors","spacing","maxModalWidth","StyledBaseAvatar","withConfig","displayName","componentId","white","StyledAvatar","props","$color","StyledContactItems","div","sm","xs","StyledWrapper","StyledViewAllWrapper","md","lg","StyledModalBody","Body","StyledContactItem"],"sources":["../../src/AvatarStack/AvatarStack.styles.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { Avatar } from '../Avatar'\nimport { ContactItem } from '../ContactItem'\nimport { Modal } from '../Modal'\nimport type { Color } from '../_styles/colors'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\n\nconst maxModalWidth = 528\n\nconst StyledBaseAvatar = styled(Avatar)`\n  border-color: ${colors.white};\n  border-style: solid;\n  border-width: 1px;\n\n  &:hover {\n    z-index: 1;\n  }\n  &[role='img']:focus {\n    outline: none;\n  }\n`\n\nexport const StyledAvatar = styled(StyledBaseAvatar)<{ $color: Color }>`\n  background-color: ${(props: { $color: Color }) => colors[props.$color]};\n`\n\nexport const StyledContactItems = styled.div`\n  padding-top: ${spacing.sm}px;\n  padding-bottom: ${spacing.sm}px;\n  padding-left: ${spacing.xs}px;\n`\n\nexport const StyledWrapper = styled.div`\n  display: flex;\n\n  ${StyledAvatar} + ${StyledAvatar} {\n    margin-left: -${spacing.sm}px;\n  }\n`\n\nexport const StyledViewAllWrapper = styled.div`\n  display: flex;\n  margin-left: ${spacing.md}px;\n  margin-bottom: ${spacing.lg}px;\n`\n\nexport const StyledModalBody = styled(Modal.Body)`\n  max-width: ${maxModalWidth}px;\n`\n\nexport const StyledContactItem = styled(ContactItem)`\n  flex-shrink: 0;\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,SAASC,KAAK,QAAQ,UAAU;AAEhC,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,IAAMC,aAAa,GAAG,GAAG;AAEzB,IAAMC,gBAAgB,gBAAGP,MAAM,CAACC,MAAM,CAAC,CAAAO,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oHACrBN,MAAM,CAACO,KAAK,CAU7B;AAED,OAAO,IAAMC,YAAY,gBAAGZ,MAAM,CAACO,gBAAgB,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+BAC9B,UAACG,KAAwB;EAAA,OAAKT,MAAM,CAACS,KAAK,CAACC,MAAM,CAAC;AAAA,EACvE;AAED,OAAO,IAAMC,kBAAkB,gBAAGf,MAAM,CAACgB,GAAG,CAAAR,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sEAC3BL,OAAO,CAACY,EAAE,EACPZ,OAAO,CAACY,EAAE,EACZZ,OAAO,CAACa,EAAE,CAC3B;AAED,OAAO,IAAMC,aAAa,gBAAGnB,MAAM,CAACgB,GAAG,CAAAR,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uDAGnCE,YAAY,EAAMA,YAAY,EACdP,OAAO,CAACY,EAAE,CAE7B;AAED,OAAO,IAAMG,oBAAoB,gBAAGpB,MAAM,CAACgB,GAAG,CAAAR,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8DAE7BL,OAAO,CAACgB,EAAE,EACRhB,OAAO,CAACiB,EAAE,CAC5B;AAED,OAAO,IAAMC,eAAe,gBAAGvB,MAAM,CAACG,KAAK,CAACqB,IAAI,CAAC,CAAAhB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0BAClCJ,aAAa,CAC3B;AAED,OAAO,IAAMmB,iBAAiB,gBAAGzB,MAAM,CAACE,WAAW,CAAC,CAAAM,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sBAEnD"}
+{"version":3,"file":"AvatarStack.styles.js","names":["styled","Avatar","ContactItem","Modal","colors","spacing","maxModalWidth","StyledBaseAvatar","withConfig","displayName","componentId","white","StyledAvatar","props","$color","StyledContactItems","div","sm","xs","StyledWrapper","StyledViewAllWrapper","md","lg","StyledModalBody","Body","StyledContactItem"],"sources":["../../src/AvatarStack/AvatarStack.styles.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { Avatar } from '../Avatar'\nimport { ContactItem } from '../ContactItem'\nimport { Modal } from '../Modal'\nimport type { Color } from '../_styles/colors'\nimport { colors } from '../_styles/colors'\nimport { spacing } from '../_styles/spacing'\n\nconst maxModalWidth = 528\n\nconst StyledBaseAvatar = styled(Avatar)`\n  border-color: ${colors.white};\n  border-style: solid;\n  border-width: 1px;\n\n  &:hover {\n    z-index: 1;\n  }\n`\n\nexport const StyledAvatar = styled(StyledBaseAvatar)<{ $color: Color }>`\n  background-color: ${(props: { $color: Color }) => colors[props.$color]};\n`\n\nexport const StyledContactItems = styled.div`\n  padding-top: ${spacing.sm}px;\n  padding-bottom: ${spacing.sm}px;\n  padding-left: ${spacing.xs}px;\n`\n\nexport const StyledWrapper = styled.div`\n  display: flex;\n\n  ${StyledAvatar} + ${StyledAvatar} {\n    margin-left: -${spacing.sm}px;\n  }\n`\n\nexport const StyledViewAllWrapper = styled.div`\n  display: flex;\n  margin-left: ${spacing.md}px;\n  margin-bottom: ${spacing.lg}px;\n`\n\nexport const StyledModalBody = styled(Modal.Body)`\n  max-width: ${maxModalWidth}px;\n`\n\nexport const StyledContactItem = styled(ContactItem)`\n  flex-shrink: 0;\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,SAASC,KAAK,QAAQ,UAAU;AAEhC,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,IAAMC,aAAa,GAAG,GAAG;AAEzB,IAAMC,gBAAgB,gBAAGP,MAAM,CAACC,MAAM,CAAC,CAAAO,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kFACrBN,MAAM,CAACO,KAAK,CAO7B;AAED,OAAO,IAAMC,YAAY,gBAAGZ,MAAM,CAACO,gBAAgB,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+BAC9B,UAACG,KAAwB;EAAA,OAAKT,MAAM,CAACS,KAAK,CAACC,MAAM,CAAC;AAAA,EACvE;AAED,OAAO,IAAMC,kBAAkB,gBAAGf,MAAM,CAACgB,GAAG,CAAAR,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sEAC3BL,OAAO,CAACY,EAAE,EACPZ,OAAO,CAACY,EAAE,EACZZ,OAAO,CAACa,EAAE,CAC3B;AAED,OAAO,IAAMC,aAAa,gBAAGnB,MAAM,CAACgB,GAAG,CAAAR,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uDAGnCE,YAAY,EAAMA,YAAY,EACdP,OAAO,CAACY,EAAE,CAE7B;AAED,OAAO,IAAMG,oBAAoB,gBAAGpB,MAAM,CAACgB,GAAG,CAAAR,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8DAE7BL,OAAO,CAACgB,EAAE,EACRhB,OAAO,CAACiB,EAAE,CAC5B;AAED,OAAO,IAAMC,eAAe,gBAAGvB,MAAM,CAACG,KAAK,CAACqB,IAAI,CAAC,CAAAhB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0BAClCJ,aAAa,CAC3B;AAED,OAAO,IAAMmB,iBAAiB,gBAAGzB,MAAM,CAACE,WAAW,CAAC,CAAAM,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sBAEnD"}

package/dist/AvatarStack/AvatarStack.types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type AvatarStackItemId = string | number;
 export declare type AvatarStackItemType = 'company' | 'user' | 'group';
 export interface AvatarStackItem {
@@ -103,6 +104,12 @@ export interface FoldedAvatarStackProps<Item extends AvatarStackItem> {
      * @since 11.13.0
      */
     title: string;
+    /**
+     * Optional ref for the view-more ("+N") trigger. Used to restore focus when
+     * closing the View All modal (e.g. after Escape) for keyboard accessibility.
+     * since 12.39.0
+     */
+    viewMoreTriggerRef?: React.RefObject<HTMLDivElement | null>;
 }
 export interface ViewAllModalProps<Item extends AvatarStackItem> {
     /**

package/dist/AvatarStack/AvatarStack.types.js.map

@@ -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 = 'sm' | '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":""}
+{"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 = 'sm' | '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   * Optional ref for the view-more (\"+N\") trigger. Used to restore focus when\n   * closing the View All modal (e.g. after Escape) for keyboard accessibility.\n   * since 12.39.0\n   */\n  viewMoreTriggerRef?: React.RefObject<HTMLDivElement | null>\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":""}