@procore/core-react 12.53.4 → 12.54.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Change Log
 
+## 12.54.0
+
+### Minor Changes
+
+- a193c97: Overlays built on `OverlayTrigger` (`Dropdown`, `Select`, `MultiSelect`, `TieredDropdown`, `TieredSelect`, `DateSelect`, `Pagination`, `SuperSelect`, `DropdownFlyout`, and more) now lock background scroll while open by default, so content no longer overflow constrained containers or drift out of place while the page scrolls. Aligns with native OS and modern web libraries.
+  - `OverlayTrigger` gains a `scrollLock` prop, **defaulting to `true`**. Hover/focus-triggered overlays (`Tooltip`, `Popover`, `AvatarStack`) opt out with `scrollLock={false}` at the moment.
+  - `Modal` and `Tearsheet` replace custom scroll-locking with React Aria's [`usePreventScroll`](https://react-spectrum.adobe.com/react-aria/usePreventScroll.html)
+- b3df87a: Reflow fixes for smaller breakpoints / high browser zoom (400% and 200%):
+  - `Title` first moves actions below and then stacks them.
+  - `Modal` dialog take the full screen.
+  - `Banner` stacks its icon and title, text and actions.
+  - `Panel` places back, close, and other actions above the heading.
+  - `SplitViewCard` drops its minimum height.
+  - `Tabs` shows its "More" menu when even the first tab does not fit.
+  - `Table.Container` scrolls sideways.
+  - `Page.Aside` becomes a full-width sheet.
+  - `Breadcrumbs` allows wrapping.
+  - Sticky page footers scroll with the page.
+  - Rows of buttons and toolbars wrap instead of widening the page.
+- 270e56a: Add `SuccessBanner`
+
+### Patch Changes
+
+- 39f8633: `Select` only sets `aria-controls` on the combobox while its listbox is open.
+- 49bdcd2: Fix: pressing Escape with an open `DateSelect` (or other `OverlayTrigger` overlay) no longer also closes a parent `Tearsheet` or `Modal`.
+- b7af222: Fix `SuperSelect` overlay not flipping to open above the trigger when its content grows after the initial open (e.g. options arriving asynchronously). The overlay no longer stays clamped to the space available for the placement chosen while content was still small, so it correctly flips instead of getting cut off.
+- b9f3b8c: Fixed `Select` briefly flashing its label-overflow tooltip when the trigger is programmatically focused as the menu opens, which was visible in data-table inline select cell editors.
+- 968dcba: Fix `useI18nContext` typed `t`/`translate` for pluralized keys. `count` is no longer treated as a string interpolation variable, so keys whose forms use `%{count}` accept any `number` (previously a `zero` form narrowed `count` to `0 | 1`). Forms that a key doesn't define no longer loosen the required interpolation params, and pluralized keys now return `string` instead of the pluralization object type.
+
 ## 12.53.4
 
 ### Patch Changes

package/dist/AnchorNavigation/AnchorNavigation.styles.js

@@ -5,15 +5,15 @@ import { getEllipsis } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 export var StyledAnchorNavigationLandmark = /*#__PURE__*/styled.nav.withConfig({
   displayName: "StyledAnchorNavigationLandmark",
-  componentId: "core-12_53_4__sc-aacdj4-0"
+  componentId: "core-12_54_0__sc-aacdj4-0"
 })([""]);
 export var StyledAnchorNavigation = /*#__PURE__*/styled.ul.withConfig({
   displayName: "StyledAnchorNavigation",
-  componentId: "core-12_53_4__sc-aacdj4-1"
+  componentId: "core-12_54_0__sc-aacdj4-1"
 })(["max-width:200px;margin:0;padding-inline-start:0;"]);
 export var StyledAnchorSection = /*#__PURE__*/styled.li.withConfig({
   displayName: "StyledAnchorSection",
-  componentId: "core-12_53_4__sc-aacdj4-2"
+  componentId: "core-12_54_0__sc-aacdj4-2"
 })(["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;
@@ -26,7 +26,7 @@ export var StyledAnchorSection = /*#__PURE__*/styled.li.withConfig({
 }, colors.gray90);
 export var StyledAnchor = /*#__PURE__*/styled.a.withConfig({
   displayName: "StyledAnchor",
-  componentId: "core-12_53_4__sc-aacdj4-3"
+  componentId: "core-12_54_0__sc-aacdj4-3"
 })(["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) {
   var $selected = _ref4.$selected;
   return $selected ? css(["font-weight:600;"]) : '';

package/dist/Avatar/Avatar.styles.js

@@ -28,26 +28,26 @@ var iconSize = {
 };
 export var StyledAvatarOverlay = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAvatarOverlay",
-  componentId: "core-12_53_4__sc-7q2ydl-0"
+  componentId: "core-12_54_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_53_4__sc-7q2ydl-1"
+  componentId: "core-12_54_0__sc-7q2ydl-1"
 })(["display:inline-flex;"]);
 export var StyledLabelContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledLabelContainer",
-  componentId: "core-12_53_4__sc-7q2ydl-2"
+  componentId: "core-12_54_0__sc-7q2ydl-2"
 })(["text-transform:uppercase;"]);
 export var StyledPortraitContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledPortraitContainer",
-  componentId: "core-12_53_4__sc-7q2ydl-3"
+  componentId: "core-12_54_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_53_4__sc-7q2ydl-4"
+  componentId: "core-12_54_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;

package/dist/AvatarStack/AvatarStack.js

@@ -174,6 +174,7 @@ function AvatarWithPopover(_ref4) {
     arrow: true,
     trackAriaExpanded: true,
     placement: "top",
+    scrollLock: false,
     beforeShow: beforeShow,
     beforeHide: beforeHide,
     afterHide: afterHide,
@@ -236,6 +237,7 @@ export function FoldedAvatarStack(_ref5) {
     arrow: true,
     trackAriaExpanded: true,
     placement: "top",
+    scrollLock: false,
     beforeShow: beforeShow,
     beforeHide: beforeHide,
     afterHide: afterHide,

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","OverlayTrigger","Popover","Typography","useI18nContext","mergeRefs","colorsOrder","foldedItemsCap","restCountThreshold","visibleItemsCap","StyledAvatar","StyledContactItem","StyledContactItems","StyledFoldedPopoverContent","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","Content","ref","role","$color","get","tabIndex","FoldedAvatarStack","_ref5","onClickViewAll","title","viewMoreTriggerRef","I18n","restAvatarId","_useAvatarPopover2","onClick","variant","t","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  StyledFoldedPopoverContent,\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={beforeShow}\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        {...(item.inactive ? { tabIndex: 0 } : {})}\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          <StyledFoldedPopoverContent>\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          </StyledFoldedPopoverContent>\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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","ignoreList":[]}
+{"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","StyledFoldedPopoverContent","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","scrollLock","Content","ref","role","$color","get","tabIndex","FoldedAvatarStack","_ref5","onClickViewAll","title","viewMoreTriggerRef","I18n","restAvatarId","_useAvatarPopover2","onClick","variant","t","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  StyledFoldedPopoverContent,\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      scrollLock={false}\n      beforeShow={beforeShow}\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        {...(item.inactive ? { tabIndex: 0 } : {})}\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      scrollLock={false}\n      beforeShow={beforeShow}\n      beforeHide={beforeHide}\n      afterHide={afterHide}\n      overlay={\n        <Popover.Content ref={popoverContentRef} placement=\"top\">\n          <StyledFoldedPopoverContent>\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          </StyledFoldedPopoverContent>\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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","ignoreList":[]}

package/dist/AvatarStack/AvatarStack.styles.js

@@ -8,36 +8,36 @@ import { spacing } from '../_styles/spacing';
 var maxModalWidth = 528;
 var StyledBaseAvatar = /*#__PURE__*/styled(Avatar).withConfig({
   displayName: "StyledBaseAvatar",
-  componentId: "core-12_53_4__sc-ft72hu-0"
+  componentId: "core-12_54_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_53_4__sc-ft72hu-1"
+  componentId: "core-12_54_0__sc-ft72hu-1"
 })(["background-color:", ";"], function (props) {
   return colors[props.$color];
 });
 export var StyledFoldedPopoverContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledFoldedPopoverContent",
-  componentId: "core-12_53_4__sc-ft72hu-2"
+  componentId: "core-12_54_0__sc-ft72hu-2"
 })(["display:flex;flex-direction:column;max-height:var(", ",100vh);"], OVERLAY_AVAILABLE_HEIGHT_VAR);
 export var StyledContactItems = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledContactItems",
-  componentId: "core-12_53_4__sc-ft72hu-3"
+  componentId: "core-12_54_0__sc-ft72hu-3"
 })(["padding-top:", "px;padding-left:", "px;flex:1 1 auto;min-height:0;overflow-y:auto;"], spacing.sm, spacing.xs);
 export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledWrapper",
-  componentId: "core-12_53_4__sc-ft72hu-4"
+  componentId: "core-12_54_0__sc-ft72hu-4"
 })(["display:flex;", " + ", "{margin-left:-", "px;}"], StyledAvatar, StyledAvatar, spacing.sm);
 export var StyledViewAllWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledViewAllWrapper",
-  componentId: "core-12_53_4__sc-ft72hu-5"
+  componentId: "core-12_54_0__sc-ft72hu-5"
 })(["display:flex;margin-left:", "px;margin-top:", "px;margin-bottom:", "px;"], spacing.md, spacing.md, spacing.md);
 export var StyledModalBody = /*#__PURE__*/styled(Modal.Body).withConfig({
   displayName: "StyledModalBody",
-  componentId: "core-12_53_4__sc-ft72hu-6"
+  componentId: "core-12_54_0__sc-ft72hu-6"
 })(["max-width:", "px;"], maxModalWidth);
 export var StyledContactItem = /*#__PURE__*/styled(ContactItem).withConfig({
   displayName: "StyledContactItem",
-  componentId: "core-12_53_4__sc-ft72hu-7"
+  componentId: "core-12_54_0__sc-ft72hu-7"
 })(["flex-shrink:0;"]);
 //# sourceMappingURL=AvatarStack.styles.js.map

package/dist/Badge/Badge.styles.js

@@ -1,10 +1,10 @@
 import styled from 'styled-components';
 export var StyledBadge = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBadge",
-  componentId: "core-12_53_4__sc-rpertu-0"
+  componentId: "core-12_54_0__sc-rpertu-0"
 })(["display:inline-block;position:relative;"]);
 export var StyledBadgeLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledBadgeLabel",
-  componentId: "core-12_53_4__sc-rpertu-1"
+  componentId: "core-12_54_0__sc-rpertu-1"
 })(["bottom:100%;position:absolute;right:0;transform:translateX(50%) translateY(50%);"]);
 //# sourceMappingURL=Badge.styles.js.map

package/dist/BadgePill/BadgePill.styles.js

@@ -3,11 +3,11 @@ import { getTypographyIntent } from '../Typography';
 import { colors } from '../_styles/colors';
 export var StyledBadgeContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBadgeContainer",
-  componentId: "core-12_53_4__sc-s2n9gd-0"
+  componentId: "core-12_54_0__sc-s2n9gd-0"
 })(["display:inline-flex;position:relative;"]);
 export var StyledBadgeContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBadgeContent",
-  componentId: "core-12_53_4__sc-s2n9gd-1"
+  componentId: "core-12_54_0__sc-s2n9gd-1"
 })(["position:relative;", " ", " pointer-events:none;user-select:none;"], function (_ref) {
   var $overlapping = _ref.$overlapping,
     _ref$$xOffset = _ref.$xOffset,
@@ -20,13 +20,13 @@ export var StyledBadgeContent = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledBadgeDotIndicator = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBadgeDotIndicator",
-  componentId: "core-12_53_4__sc-s2n9gd-2"
+  componentId: "core-12_54_0__sc-s2n9gd-2"
 })(["width:6px;height:6px;border-radius:50%;background-color:", ";"], colors.orange50);
 var oneDigitStyles = "\n  border-radius: 50%;\n  padding: 2px;\n  min-width: 21.5px;\n  min-height: 21.5px;\n";
 var multiDigitStyles = "\n  border-radius: 10px;\n  padding: 2px 8px;\n";
 export var StyledBadgeCounter = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledBadgeCounter",
-  componentId: "core-12_53_4__sc-s2n9gd-3"
+  componentId: "core-12_54_0__sc-s2n9gd-3"
 })(["display:inline-flex;justify-content:center;align-items:center;color:", ";background-color:", ";", " ", ""], colors.white, colors.orange50, getTypographyIntent('small'), function (props) {
   return props.$oneDigit ? oneDigitStyles : multiDigitStyles;
 });

package/dist/Banner/Banner.d.ts

@@ -3,6 +3,7 @@ import type { Props } from '../_utils/types';
 import type { BannerExpandableContentProps, BannerExpandActionButtonProps, BannerIconProps, BannerProps, BannerVariant } from './Banner.types';
 export declare const ErrorBanner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & Omit<BannerProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
 export declare const InfoBanner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & Omit<BannerProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SuccessBanner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & Omit<BannerProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
 /**
  * @since 11.26.0
  */

package/dist/Banner/Banner.js

@@ -12,7 +12,8 @@ var _excluded = ["children", "role", "variant"],
   _excluded10 = ["children"],
   _excluded11 = ["children"],
   _excluded12 = ["children"],
-  _excluded13 = ["children", "variant"];
+  _excluded13 = ["children"],
+  _excluded14 = ["children", "variant"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -22,20 +23,19 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { Clear, EllipsisVertical, Error, Info, Warning } from '@procore/core-icons/dist';
+import { Check, Clear, EllipsisVertical, Error, Info, Warning } from '@procore/core-icons/dist';
 import { useId } from '@react-aria/utils';
 import { partition } from 'ramda';
 import React from 'react';
 import { Button } from '../Button';
 import { Card } from '../Card';
-import { Flex } from '../Flex';
 import { Menu, useMenu } from '../Menu/Menu';
 import { OverlayTrigger } from '../OverlayTrigger';
 import { useI18nContext } from '../_hooks/I18n';
 import { OverflowObserver } from '../_hooks/OverflowObserver';
 import { addSubcomponents } from '../_utils/addSubcomponents';
 import { mergeRefs } from '../_utils/mergeRefs';
-import { StyledAction, StyledActionsTrigger, StyledBannerContainer, StyledBody, StyledContent, StyledExpandableContent, StyledExpandableContentContainer, StyledIconContainer, StyledMiniBannerContainer, StyledTitle } from './Banner.styles';
+import { StyledAction, StyledActionsTrigger, StyledBannerContainer, StyledBannerDismiss, StyledBannerRow, StyledBody, StyledContent, StyledExpandableContent, StyledExpandableContentContainer, StyledIconContainer, StyledMiniBannerContainer, StyledTitle } from './Banner.styles';
 var BannerA11yContext = /*#__PURE__*/React.createContext(null);
 var defaultIcons = {
   error: /*#__PURE__*/React.createElement(Error, {
@@ -47,6 +47,9 @@ var defaultIcons = {
   info: /*#__PURE__*/React.createElement(Info, {
     size: "lg"
   }),
+  success: /*#__PURE__*/React.createElement(Check, {
+    size: "lg"
+  }),
   UNSAFE_attention_emphasized: /*#__PURE__*/React.createElement(Warning, {
     size: "lg"
   })
@@ -113,6 +116,7 @@ var Banner_ = /*#__PURE__*/React.forwardRef(function Banner(_ref2, ref) {
     error: I18n.t('core.banner.defaultLabels.error'),
     attention: I18n.t('core.banner.defaultLabels.attention'),
     info: I18n.t('core.banner.defaultLabels.info'),
+    success: I18n.t('core.banner.defaultLabels.success'),
     UNSAFE_attention_emphasized: I18n.t('core.banner.defaultLabels.unsafeAttentionEmphasized')
   };
   var _getBannerA11yProps = getBannerA11yProps({
@@ -139,7 +143,7 @@ var Banner_ = /*#__PURE__*/React.forwardRef(function Banner(_ref2, ref) {
     gap: "lg"
   }, !hasCustomIcon && /*#__PURE__*/React.createElement(Icon, {
     icon: defaultIcons[variant]
-  }), content), expandableContentNodes) : /*#__PURE__*/React.createElement(Flex, {
+  }), content), expandableContentNodes) : /*#__PURE__*/React.createElement(StyledBannerRow, {
     justifyContent: "flex-start",
     alignItems: "center",
     gap: "lg",
@@ -281,7 +285,7 @@ var Dismiss = /*#__PURE__*/React.forwardRef(function Dismiss(_ref15, ref) {
   var children = _ref15.children,
     props = _objectWithoutProperties(_ref15, _excluded1);
   var I18n = useI18nContext();
-  return /*#__PURE__*/React.createElement(Button, _extends({
+  return /*#__PURE__*/React.createElement(StyledBannerDismiss, _extends({
     "aria-label": I18n.t('core.banner.dismissAlert'),
     ref: ref
   }, props, {
@@ -313,13 +317,25 @@ export var InfoBanner = /*#__PURE__*/React.forwardRef(function InfoBanner(_ref17
     })
   }), children);
 });
+export var SuccessBanner = /*#__PURE__*/React.forwardRef(function SuccessBanner(_ref18, ref) {
+  var children = _ref18.children,
+    props = _objectWithoutProperties(_ref18, _excluded12);
+  return /*#__PURE__*/React.createElement(Banner, _extends({
+    ref: ref,
+    variant: "success"
+  }, props), /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(Check, {
+      size: "lg"
+    })
+  }), children);
+});
 
 /**
  * @since 11.26.0
  */
-export var AttentionBanner = /*#__PURE__*/React.forwardRef(function AttentionBanner(_ref18, ref) {
-  var children = _ref18.children,
-    props = _objectWithoutProperties(_ref18, _excluded12);
+export var AttentionBanner = /*#__PURE__*/React.forwardRef(function AttentionBanner(_ref19, ref) {
+  var children = _ref19.children,
+    props = _objectWithoutProperties(_ref19, _excluded13);
   return /*#__PURE__*/React.createElement(Banner, _extends({
     ref: ref,
     variant: "attention"
@@ -334,11 +350,11 @@ export var AttentionBanner = /*#__PURE__*/React.forwardRef(function AttentionBan
  * @deprecatedSince 11.26.0
  */
 export var ActionBanner = AttentionBanner;
-export var UNSAFE_MiniBanner = /*#__PURE__*/React.forwardRef(function MiniBanner(_ref19, ref) {
-  var children = _ref19.children,
-    _ref19$variant = _ref19.variant,
-    variant = _ref19$variant === void 0 ? 'info' : _ref19$variant,
-    props = _objectWithoutProperties(_ref19, _excluded13);
+export var UNSAFE_MiniBanner = /*#__PURE__*/React.forwardRef(function MiniBanner(_ref20, ref) {
+  var children = _ref20.children,
+    _ref20$variant = _ref20.variant,
+    variant = _ref20$variant === void 0 ? 'info' : _ref20$variant,
+    props = _objectWithoutProperties(_ref20, _excluded14);
   return /*#__PURE__*/React.createElement(StyledMiniBannerContainer, _extends({
     ref: ref,
     variant: variant
@@ -357,6 +373,7 @@ Icon.displayName = 'Banner.Icon';
 Dismiss.displayName = 'Banner.Dismiss';
 ErrorBanner.displayName = 'ErrorBanner';
 InfoBanner.displayName = 'InfoBanner';
+SuccessBanner.displayName = 'SuccessBanner';
 AttentionBanner.displayName = 'AttentionBanner';
 ActionBanner.displayName = 'ActionBanner';
 UNSAFE_MiniBanner.displayName = 'MiniBanner';