@procore/core-react 10.30.0 → 11.0.0-rc.2

package/README.md

@@ -1,35 +1,76 @@
 ## CORE React ![npm](https://img.shields.io/npm/v/@procore/core-react.svg) ![npm](https://img.shields.io/npm/dt/@procore/core-react.svg)
 
-A set of React components implementing the `core-css` spec.
+A set of React components implementing the design system spec.
 
 ## Requirements
 
-Node 10+
+Node 14+
 NPM or Yarn
 
-#### Peer Dependencies
+## Usage
 
-`react@^16.8.0`
-`react-dom@^16.8.0`
+### Install
 
-## Developing
+Install `@procore/core-react` from [NPM](https://www.npmjs.com/package/@procore/core-react).
+
+```sh
+yarn add @procore/core-react
+```
+
+or
+
+```sh
+npm install @procore/core-react
+```
 
-To get started, type the following from the root directory:
+Install the peer dependencies.
 
+```sh
+yarn add formik styled-components react react-dom
 ```
+
+### Imports
+
+Named imports support tree shaking and types.
+
+```tsx
+import { Button, ButtonProps } from '@procore/core-react'
+import { Cog } from '@procore/core-react/icons'
+
+export function ButtonCustom(props: ButtonProps) {
+  return <Button {...props} icon={<Cog />} />
+}
+```
+
+## Developing
+
+To get started, type the following from the project root directory:
+
+```sh
 yarn
-yarn dev
 ```
 
-## Testing
+All commands below will be ran in the package directory:
+
+```sh
+cd packages/core-react
+```
 
-Testing currently consists of Jest snapshot testing on our React components. To run the test suite use the following command:
+We use Storybook to develop. Stories are broken into two categories, Demos for interactions and Coverage for displaying variants.
 
+```sh
+yarn storybook
 ```
+
+## Testing
+
+Testing currently consists of Jest snapshots, Enzyme tests, and React Testing Library tests.
+
+```sh
 yarn test
 ```
 
-Note that `core-react` requires `react-utils` to be built before running tests.
+Visual Regression Testing is ran in CI, pixel snapshots of Coverage stories.
 
 ## Building
 
@@ -57,8 +98,6 @@ The package is available under the [Procore Developers License](https://develope
   width="250px"
 />
 
-CORE Icons is maintained by Procore Technologies.
-
 Procore - building the software that builds the world.
 
 Learn more about the #1 most widely used construction management software at [procore.com](https://www.procore.com/)

package/dist/Avatar/Avatar.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { DivAttributes } from '../_utils/types';
+import { AvatarIconProps, AvatarPortraitProps, AvatarLabelProps, AvatarProps } from './Avatar.types';
+export declare const Icon: React.ForwardRefExoticComponent<DivAttributes & AvatarIconProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Label: React.ForwardRefExoticComponent<DivAttributes & AvatarLabelProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Portrait: React.ForwardRefExoticComponent<DivAttributes & AvatarPortraitProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & DivAttributes & React.RefAttributes<HTMLDivElement>> & {
+    Icon: React.ForwardRefExoticComponent<DivAttributes & AvatarIconProps & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<DivAttributes & AvatarLabelProps & React.RefAttributes<HTMLDivElement>>;
+    Portrait: React.ForwardRefExoticComponent<DivAttributes & AvatarPortraitProps & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/Avatar/Avatar.js

@@ -0,0 +1,66 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { addSubcomponents } from '../_utils/addSubcomponents';
+import { StyledAvatarContainer, StyledAvatarOverlay, StyledIconContainer, StyledLabelContainer, StyledPortraitContainer, } from './Avatar.styles';
+/**
+
+ We use avatars to visually represent our users, places, and things in the app.
+ These can be in the form of rich media or representative illustrations.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-avatar--demo)
+
+ @see [Design Guidelines](https://design.procore.com/avatar)
+
+ */
+var Avatar_ = React.forwardRef(function Avatar(_a, ref) {
+    var clickable = _a.clickable, disabled = _a.disabled, size = _a.size, children = _a.children, props = __rest(_a, ["clickable", "disabled", "size", "children"]);
+    return (React.createElement(StyledAvatarContainer, __assign({ ref: ref, "$clickable": clickable, "$disabled": disabled, "$size": size, "data-qa": "core-avatar" }, props),
+        React.Children.only(children),
+        React.createElement(StyledAvatarOverlay, null)));
+});
+export var Icon = React.forwardRef(function Icon(_a, ref) {
+    var icon = _a.icon, props = __rest(_a, ["icon"]);
+    return (React.createElement(StyledIconContainer, __assign({ ref: ref }, props), icon));
+});
+export var Label = React.forwardRef(function Label(_a, ref) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement(StyledLabelContainer, __assign({ ref: ref }, props), children));
+});
+export var Portrait = React.forwardRef(function Portrait(_a, ref) {
+    var imageUrl = _a.imageUrl, props = __rest(_a, ["imageUrl"]);
+    return (React.createElement(StyledPortraitContainer, __assign({ ref: ref, "$imageUrl": imageUrl }, props),
+        React.createElement(StyledAvatarOverlay, null)));
+});
+Avatar_.displayName = 'Avatar';
+Icon.displayName = 'Avatar.Icon';
+Label.displayName = 'Avatar.Label';
+Portrait.displayName = 'Avatar.Portrait';
+export var Avatar = addSubcomponents({
+    Icon: Icon,
+    Label: Label,
+    Portrait: Portrait,
+}, Avatar_);
+//# sourceMappingURL=Avatar.js.map

package/dist/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAE7D,OAAO,EACL,qBAAqB,EACrB,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACpB,uBAAuB,GACxB,MAAM,iBAAiB,CAAA;AAQxB;;;;;;;;;;;GAWG;AACH,IAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAC9B,SAAS,MAAM,CAAC,EAAiD,EAAE,GAAG;IAApD,IAAA,SAAS,eAAA,EAAE,QAAQ,cAAA,EAAE,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAK,KAAK,cAA/C,6CAAiD,CAAF;IAC7D,OAAO,CACL,oBAAC,qBAAqB,aACpB,GAAG,EAAE,GAAG,gBACI,SAAS,eACV,QAAQ,WACZ,IAAI,aACH,aAAa,IACjB,KAAK;QAER,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC9B,oBAAC,mBAAmB,OAAG,CACD,CACzB,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,CAAC,IAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAGlC,SAAS,IAAI,CAAC,EAAkB,EAAE,GAAG;IAArB,IAAA,IAAI,UAAA,EAAK,KAAK,cAAhB,QAAkB,CAAF;IAC9B,OAAO,CACL,oBAAC,mBAAmB,aAAC,GAAG,EAAE,GAAG,IAAM,KAAK,GACrC,IAAI,CACe,CACvB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,IAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAGnC,SAAS,KAAK,CAAC,EAAsB,EAAE,GAAG;IAAzB,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IACnC,OAAO,CACL,oBAAC,oBAAoB,aAAC,GAAG,EAAE,GAAG,IAAM,KAAK,GACtC,QAAQ,CACY,CACxB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,IAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAGtC,SAAS,QAAQ,CAAC,EAAsB,EAAE,GAAG;IAAzB,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IACtC,OAAO,CACL,oBAAC,uBAAuB,aAAC,GAAG,EAAE,GAAG,eAAa,QAAQ,IAAM,KAAK;QAC/D,oBAAC,mBAAmB,OAAG,CACC,CAC3B,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,OAAO,CAAC,WAAW,GAAG,QAAQ,CAAA;AAE9B,IAAI,CAAC,WAAW,GAAG,aAAa,CAAA;AAEhC,KAAK,CAAC,WAAW,GAAG,cAAc,CAAA;AAElC,QAAQ,CAAC,WAAW,GAAG,iBAAiB,CAAA;AAExC,MAAM,CAAC,IAAM,MAAM,GAAG,gBAAgB,CACpC;IACE,IAAI,MAAA;IACJ,KAAK,OAAA;IACL,QAAQ,UAAA;CACT,EACD,OAAO,CACR,CAAA"}

package/dist/Avatar/Avatar.styles.js

@@ -0,0 +1,36 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css } from 'styled-components';
+import { colors } from '../_styles/colors';
+var activeOverlayOpacity = 0.3;
+var containerSize = { xl: 96, lg: 40, md: 32 };
+var fontSize = { xl: 40, lg: 14, md: 14 };
+var fontWeights = { xl: 700, lg: 600, md: 600 };
+var iconSize = { xl: 48, lg: 24, md: 16 };
+var iconSizeLegacy = { xl: 40, lg: 14, md: 14 };
+export var StyledAvatarOverlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  border-radius: 100%;\n  opacity: 0;\n"], ["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  border-radius: 100%;\n  opacity: 0;\n"])));
+export var StyledIconContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-flex;\n"], ["\n  display: inline-flex;\n"])));
+export var StyledLabelContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  text-transform: uppercase;\n"], ["\n  text-transform: uppercase;\n"])));
+export var StyledPortraitContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  height: 100%;\n  width: 100%;\n  background-image: url(", ");\n"], ["\n  background-color: ", ";\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  height: 100%;\n  width: 100%;\n  background-image: url(", ");\n"])), colors.white, function (_a) {
+    var $imageUrl = _a.$imageUrl;
+    return $imageUrl;
+});
+export var StyledAvatarContainer = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\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: ", ";\n  background-color: ", ";\n\n  ", "\n\n  ", ";\n"], ["\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: ", ";\n  background-color: ", ";\n\n  ", "\n\n  ", ";\n"])), colors.white, colors.gray30, function (_a) {
+    var _b = _a.$size, $size = _b === void 0 ? 'md' : _b;
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-size: ", "px;\n    font-weight: ", ";\n    height: ", "px;\n    width: ", "px;\n    min-height: ", "px;\n    min-width: ", "px;\n\n    ", " {\n      svg {\n        height: ", "px;\n        width: ", "px;\n      }\n    }\n  "], ["\n    font-size: ", "px;\n    font-weight: ", ";\n    height: ", "px;\n    width: ", "px;\n    min-height: ", "px;\n    min-width: ", "px;\n\n    ", " {\n      svg {\n        height: ", "px;\n        width: ", "px;\n      }\n    }\n  "])), fontSize[$size], fontWeights[$size], containerSize[$size], containerSize[$size], containerSize[$size], containerSize[$size], StyledIconContainer, iconSize[$size], iconSize[$size]);
+}, function (_a) {
+    var $disabled = _a.$disabled, $clickable = _a.$clickable;
+    if (!$disabled && $clickable) {
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        cursor: pointer;\n\n        &:hover {\n          ", " {\n            opacity: ", ";\n          }\n        }\n\n        ", " {\n          background-color: ", ";\n        }\n      "], ["\n        cursor: pointer;\n\n        &:hover {\n          ", " {\n            opacity: ", ";\n          }\n        }\n\n        ", " {\n          background-color: ", ";\n        }\n      "])), StyledAvatarOverlay, activeOverlayOpacity, StyledAvatarOverlay, colors.black);
+    }
+    if ($disabled && !$clickable) {
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        background-color: ", ";\n\n        ", " {\n          background-color: ", ";\n          opacity: ", ";\n        }\n      "], ["\n        background-color: ", ";\n\n        ", " {\n          background-color: ", ";\n          opacity: ", ";\n        }\n      "])), colors.gray85, StyledAvatarOverlay, colors.white, activeOverlayOpacity);
+    }
+    if ($disabled && $clickable) {
+        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        cursor: pointer;\n        background-color: ", ";\n\n        &:hover {\n          ", " {\n            background-color: ", ";\n            opacity: ", ";\n          }\n        }\n\n        ", " {\n          background-color: ", ";\n          opacity: ", ";\n        }\n      "], ["\n        cursor: pointer;\n        background-color: ", ";\n\n        &:hover {\n          ", " {\n            background-color: ", ";\n            opacity: ", ";\n          }\n        }\n\n        ", " {\n          background-color: ", ";\n          opacity: ", ";\n        }\n      "])), colors.gray85, StyledAvatarOverlay, colors.black, activeOverlayOpacity, StyledAvatarOverlay, colors.white, activeOverlayOpacity);
+    }
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+//# sourceMappingURL=Avatar.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.styles.js","sourceRoot":"","sources":["../../src/Avatar/Avatar.styles.ts"],"names":[],"mappings":"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"}

package/dist/Avatar/Avatar.types.d.ts

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+import { Props, Size } from '../_utils/types';
+export declare type AvatarSize = Extract<Size, 'md' | 'lg' | 'xl'>;
+export interface AvatarProps extends Props {
+    /**
+     * Sets the avatar's clickable state
+     *
+     * @since 10.19.0
+     * @defaultValue false
+     */
+    clickable?: boolean;
+    /**
+     * Sets the avatar's disabled state
+     *
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * Sets the avatar's size
+     *
+     * @defaultValue md
+     *
+     * @deprecated
+     *
+     * Size "xl" has been deprecated and will be removed in a future version.
+     * Please use "lg" instead of "xl".
+     *
+     * **Before**
+     *
+     * `<Avatar size="xl" />`
+     *
+     * **After**
+     *
+     * `<Avatar size="lg" />`
+     *
+     * @deprecatedSince 10.20.0
+     * @since 10.19.0
+     */
+    size?: AvatarSize;
+}
+export interface AvatarIconProps extends Props {
+    /**
+     * The icon to display
+     *
+     * @since 10.19.0
+     */
+    icon: React.ReactNode;
+}
+export interface AvatarPortraitProps extends Props {
+    /**
+     * The avatar rich media url
+     * @since 10.19.0
+     */
+    imageUrl: string;
+}
+export interface AvatarLabelProps extends Props {
+}

package/dist/Avatar/Avatar.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.types.js","sourceRoot":"","sources":["../../src/Avatar/Avatar.types.ts"],"names":[],"mappings":""}

package/dist/Avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar';
+export { AvatarIconProps, AvatarPortraitProps, AvatarProps, } from './Avatar.types';

package/dist/Avatar/index.js

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar';
+//# sourceMappingURL=index.js.map

package/dist/Avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA"}

package/dist/AvatarStack/AvatarStack.constants.d.ts

@@ -0,0 +1,5 @@
+import { Color } from '../_styles/colors';
+export declare const visibleItemsCap = 5;
+export declare const foldedItemsCap = 4;
+export declare const restCountThreshold = 99;
+export declare const colorsOrder: Color[];

package/dist/AvatarStack/AvatarStack.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarStack.constants.js","sourceRoot":"","sources":["../../src/AvatarStack/AvatarStack.constants.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,IAAM,eAAe,GAAG,CAAC,CAAA;AAEhC,MAAM,CAAC,IAAM,cAAc,GAAG,CAAC,CAAA;AAE/B,MAAM,CAAC,IAAM,kBAAkB,GAAG,EAAE,CAAA;AAEpC,MAAM,CAAC,IAAM,WAAW,GAAY,CAAC,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAA"}

package/dist/AvatarStack/AvatarStack.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Color } from '../_styles/colors';
+import { AvatarStackProps, AvatarStackItemId, AvatarStackItemType, AvatarStackItem, AvatarStackSize, FoldedAvatarStackProps, ViewAllModalProps } from './AvatarStack.types';
+export declare function getOverflowValues<Item extends AvatarStackItem>(items: Item[]): {
+    visibleItems: Item[];
+    foldedItems: Item[];
+    restCountLabel: string | null;
+    isViewAllNeeded: boolean;
+};
+export declare function getIcon(type: AvatarStackItemType, size: 'md' | 'sm'): JSX.Element | null;
+export declare function getAvatarIcon(type: AvatarStackItemType, size: AvatarStackSize): JSX.Element | null;
+export declare function getColorOrder(avatarItems: AvatarStackItem[]): Map<AvatarStackItemId, Color>;
+export declare function AvatarStackContactItem({ id, type, imageUrl, initials, inactive, name, linkUrl, description, }: AvatarStackItem): JSX.Element;
+export declare function AvatarContent({ imageUrl, initials, type, size, }: {
+    imageUrl?: AvatarStackItem['imageUrl'];
+    initials: AvatarStackItem['initials'];
+    type: AvatarStackItem['type'];
+    size: AvatarStackSize;
+}): JSX.Element | null;
+export declare function BaseAvatarStack<Item extends AvatarStackItem>({ items, size, colors, }: {
+    items: Item[];
+    colors: Map<AvatarStackItemId, Color>;
+    size: AvatarStackSize;
+}): JSX.Element;
+export declare function FoldedAvatarStack<Item extends AvatarStackItem>({ items, onClickViewAll, size, restCountLabel, isViewAllNeeded, }: FoldedAvatarStackProps<Item>): JSX.Element;
+export declare function ViewAllModal<Item extends AvatarStackItem>({ isOpen, onClose, title, items, }: ViewAllModalProps<Item>): JSX.Element;
+export declare function defaultInitials<Item extends AvatarStackItem>(item: Item): string;
+export declare function defaultGetImageUrl<Item extends AvatarStackItem>(item: Item): string;
+export declare function getTransformedItems<Item extends AvatarStackItem>({ items, getInitials, getImageUrl, }: {
+    items: Item[];
+    getInitials: AvatarStackProps<Item>['getInitials'];
+    getImageUrl: AvatarStackProps<Item>['getImageUrl'];
+}): (Item & {
+    initials: string;
+    imageUrl: string;
+})[];
+declare const _AvatarStack: <Item extends AvatarStackItem>({ items: _items, title, size, getInitials, getImageUrl, ...props }: AvatarStackProps<Item>, ref: React.ForwardedRef<HTMLDivElement>) => JSX.Element;
+/**
+
+ We use avatars to visually represent our users, places, and things in the app.
+ These can be in the form of rich media or representative illustrations.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-avatarstack--demo)
+
+ @see [Design Guidelines](https://design.procore.com/avatar-stack)
+ */
+export declare const AvatarStack: <Item extends AvatarStackItem>(props: AvatarStackProps<Item> & {
+    ref?: React.ForwardedRef<HTMLDivElement> | undefined;
+}) => ReturnType<typeof _AvatarStack>;
+export {};

package/dist/AvatarStack/AvatarStack.js

@@ -0,0 +1,198 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef, useMemo, useState } from 'react';
+import { Building, People } from '@procore/core-icons/dist';
+import { Modal } from '../Modal';
+import { Avatar } from '../Avatar';
+import { Button } from '../Button';
+import { ContactItem } from '../ContactItem';
+import { Link } from '../Link';
+import { Popover } from '../Popover';
+import { Typography } from '../Typography';
+import { StyledAvatar, StyledViewAllWrapper, StyledWrapper, StyledContactItems, StyledViewAll, StyledModalBody, StyledContactItem, } from './AvatarStack.styles';
+import { colorsOrder, foldedItemsCap, restCountThreshold, visibleItemsCap, } from './AvatarStack.constants';
+import { useI18nContext } from '../_hooks/I18n';
+export function getOverflowValues(items) {
+    var foldedItems = [];
+    var restCountLabel = null;
+    var isViewAllNeeded = false;
+    var visibleItems = items.length > visibleItemsCap ? items.slice(0, visibleItemsCap - 1) : items;
+    var restItemsCount = items.length - visibleItems.length;
+    if (restItemsCount > 0) {
+        foldedItems = items.slice(visibleItems.length, visibleItems.length + foldedItemsCap);
+        restCountLabel =
+            restItemsCount > restCountThreshold
+                ? "".concat(restCountThreshold, "+")
+                : "+".concat(restItemsCount);
+        isViewAllNeeded = restItemsCount > foldedItemsCap;
+    }
+    return {
+        visibleItems: visibleItems,
+        foldedItems: foldedItems,
+        restCountLabel: restCountLabel,
+        isViewAllNeeded: isViewAllNeeded,
+    };
+}
+export function getIcon(type, size) {
+    switch (type) {
+        case 'company':
+            return React.createElement(Building, { size: size });
+        case 'group':
+            return React.createElement(People, { size: size });
+        case 'user':
+        default:
+            return null;
+    }
+}
+function getContactIcon(type) {
+    return getIcon(type, 'md');
+}
+export function getAvatarIcon(type, size) {
+    var avatarSize = size === 'lg' ? 'md' : 'sm';
+    return getIcon(type, avatarSize);
+}
+export function getColorOrder(avatarItems) {
+    return avatarItems.reduce(function (_a, item) {
+        var map = _a.map, color = _a.color;
+        if (item.imageUrl) {
+            return {
+                map: map,
+                color: color,
+            };
+        }
+        if (item.inactive) {
+            map.set(item.id, 'gray70');
+            return {
+                map: map,
+                color: color,
+            };
+        }
+        map.set(item.id, color);
+        var currentColorIndex = colorsOrder.indexOf(color);
+        var nextColorIndex = (currentColorIndex + 1) % colorsOrder.length;
+        return {
+            map: map,
+            color: item.imageUrl ? color : colorsOrder[nextColorIndex],
+        };
+    }, {
+        map: new Map(),
+        color: colorsOrder[0],
+    }).map;
+}
+export function AvatarStackContactItem(_a) {
+    var id = _a.id, type = _a.type, imageUrl = _a.imageUrl, initials = _a.initials, inactive = _a.inactive, name = _a.name, linkUrl = _a.linkUrl, description = _a.description;
+    return (React.createElement(StyledContactItem, { key: id, imageUrl: imageUrl, initials: initials, icon: getContactIcon(type), disabled: inactive },
+        React.createElement(ContactItem.Title, null, !inactive && linkUrl ? React.createElement(Link, { href: linkUrl }, name) : name),
+        React.createElement(ContactItem.Description, null, type === 'group' ? (React.createElement(Typography, { color: "gray15" }, description)) : (description))));
+}
+export function AvatarContent(_a) {
+    var imageUrl = _a.imageUrl, initials = _a.initials, type = _a.type, size = _a.size;
+    var avatarIcon = getAvatarIcon(type, size);
+    if (imageUrl) {
+        return React.createElement(Avatar.Portrait, { imageUrl: imageUrl });
+    }
+    if (avatarIcon) {
+        return React.createElement(Avatar.Icon, { icon: avatarIcon });
+    }
+    if (initials) {
+        return React.createElement(Avatar.Label, null, initials);
+    }
+    return null;
+}
+export function BaseAvatarStack(_a) {
+    var items = _a.items, size = _a.size, colors = _a.colors;
+    return (React.createElement(React.Fragment, null, items.map(function (item) {
+        return (React.createElement(Popover, { key: item.id, trigger: "hover", overlay: React.createElement(Popover.Content, null,
+                React.createElement(AvatarStackContactItem, { id: item.id, type: item.type, imageUrl: item.imageUrl, initials: item.initials, inactive: item.inactive, name: item.name, linkUrl: item.linkUrl, description: item.description })) },
+            React.createElement(StyledAvatar, { clickable: true, size: size, "$color": colors.get(item.id), disabled: item.inactive },
+                React.createElement(AvatarContent, { imageUrl: item.imageUrl, initials: item.initials, type: item.type, size: size }))));
+    })));
+}
+export function FoldedAvatarStack(_a) {
+    var items = _a.items, onClickViewAll = _a.onClickViewAll, size = _a.size, restCountLabel = _a.restCountLabel, isViewAllNeeded = _a.isViewAllNeeded;
+    var I18n = useI18nContext();
+    return (React.createElement(Popover, { trigger: "hover", overlay: React.createElement(Popover.Content, null,
+            React.createElement(StyledContactItems, null, items.map(function (item) { return (React.createElement(AvatarStackContactItem, { key: item.id, id: item.id, type: item.type, imageUrl: item.imageUrl, initials: item.initials, inactive: item.inactive, name: item.name, linkUrl: item.linkUrl, description: item.description })); })),
+            isViewAllNeeded && (React.createElement(StyledViewAllWrapper, null,
+                React.createElement(StyledViewAll, { "data-qa": "core-avatar-stack-view-all-modal-trigger", color: "blue50", onClick: onClickViewAll }, I18n.t('core.avatarStack.viewAll'))))) },
+        React.createElement(StyledAvatar, { "data-qa": "core-avatar-stack-folded-avatars-popover-trigger", size: size, "$color": "gray85", clickable: true },
+            React.createElement(Avatar.Label, null,
+                React.createElement(Typography, { color: "black" }, restCountLabel)))));
+}
+export function ViewAllModal(_a) {
+    var isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title, items = _a.items;
+    var I18n = useI18nContext();
+    return (React.createElement(Modal, { open: isOpen },
+        React.createElement(Modal.Header, { onClose: onClose },
+            title,
+            " (",
+            items.length,
+            ")"),
+        React.createElement(StyledModalBody, null, items.map(function (item) { return (React.createElement(AvatarStackContactItem, { key: item.id, id: item.id, type: item.type, imageUrl: item.imageUrl, initials: item.initials, inactive: item.inactive, name: item.name, linkUrl: item.linkUrl, description: item.description })); })),
+        React.createElement(Modal.Footer, null,
+            React.createElement(Modal.FooterButtons, null,
+                React.createElement(Button, { onClick: onClose }, I18n.t('core.avatarStack.close'))))));
+}
+export function defaultInitials(item) {
+    return item.initials;
+}
+export function defaultGetImageUrl(item) {
+    return item.imageUrl;
+}
+export function getTransformedItems(_a) {
+    var items = _a.items, getInitials = _a.getInitials, getImageUrl = _a.getImageUrl;
+    return items.map(function (item) { return (__assign(__assign({}, item), { initials: getInitials(item), imageUrl: getImageUrl(item) })); });
+}
+var _AvatarStack = function (_a, ref) {
+    var _items = _a.items, title = _a.title, _b = _a.size, size = _b === void 0 ? 'lg' : _b, _c = _a.getInitials, getInitials = _c === void 0 ? defaultInitials : _c, _d = _a.getImageUrl, getImageUrl = _d === void 0 ? defaultGetImageUrl : _d, props = __rest(_a, ["items", "title", "size", "getInitials", "getImageUrl"]);
+    var _e = useState(false), isModalOpen = _e[0], setIsModalOpen = _e[1];
+    var items = useMemo(function () {
+        return getTransformedItems({
+            items: _items,
+            getInitials: getInitials,
+            getImageUrl: getImageUrl,
+        });
+    }, [_items]);
+    var _f = useMemo(function () { return getOverflowValues(items); }, [items]), visibleItems = _f.visibleItems, foldedItems = _f.foldedItems, restCountLabel = _f.restCountLabel, isViewAllNeeded = _f.isViewAllNeeded;
+    var visibleItemsColors = useMemo(function () { return getColorOrder(visibleItems); }, [visibleItems]);
+    return (React.createElement("div", __assign({ ref: ref }, props),
+        isViewAllNeeded && (React.createElement(ViewAllModal, { isOpen: isModalOpen, onClose: function () { return setIsModalOpen(false); }, title: title, items: items })),
+        React.createElement(StyledWrapper, null,
+            React.createElement(BaseAvatarStack, { items: visibleItems, colors: visibleItemsColors, size: size }),
+            foldedItems.length > 0 && (React.createElement(FoldedAvatarStack, { restCountLabel: restCountLabel, isViewAllNeeded: isViewAllNeeded, items: foldedItems, onClickViewAll: function () { return setIsModalOpen(true); }, size: size })))));
+};
+/**
+
+ We use avatars to visually represent our users, places, and things in the app.
+ These can be in the form of rich media or representative illustrations.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-avatarstack--demo)
+
+ @see [Design Guidelines](https://design.procore.com/avatar-stack)
+ */
+export var AvatarStack = forwardRef(_AvatarStack);
+// @ts-ignore
+AvatarStack.displayName = 'AvatarStack';
+//# sourceMappingURL=AvatarStack.js.map

package/dist/AvatarStack/AvatarStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarStack.js","sourceRoot":"","sources":["../../src/AvatarStack/AvatarStack.tsx"],"names":[],"mappings":"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"}

package/dist/AvatarStack/AvatarStack.styles.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { Color } from '../_styles/colors';
+export declare const StyledAvatar: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Avatar").AvatarProps & import("../_utils/types").DivAttributes & import("react").RefAttributes<HTMLDivElement>> & {
+    Icon: import("react").ForwardRefExoticComponent<import("../_utils/types").DivAttributes & import("../Avatar").AvatarIconProps & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<import("../_utils/types").DivAttributes & import("../Avatar/Avatar.types").AvatarLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+    Portrait: import("react").ForwardRefExoticComponent<import("../_utils/types").DivAttributes & import("../Avatar").AvatarPortraitProps & import("react").RefAttributes<HTMLDivElement>>;
+}, any, {
+    $color: Color;
+}, never>;
+export declare const StyledContactItems: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledViewAllWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledViewAll: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../_utils/types").SpanAttributes & import("../Typography").TypographyProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const StyledModalBody: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Modal/Modal.types").ModalBodyProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledContactItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../ContactItem").ContactItemProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Title: import("react").ForwardRefExoticComponent<import("../_utils/types").SpanAttributes & import("../Typography").TypographyProps & import("react").RefAttributes<HTMLDivElement>>;
+    Description: import("react").ForwardRefExoticComponent<import("../_utils/types").SpanAttributes & import("../Typography").TypographyProps & import("react").RefAttributes<HTMLDivElement>>;
+}, any, {}, never>;

package/dist/AvatarStack/AvatarStack.styles.js

@@ -0,0 +1,21 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+import { ContactItem } from '../ContactItem';
+import { colors } from '../_styles/colors';
+import { spacing } from '../_styles/spacing';
+import { Avatar } from '../Avatar';
+import { Modal } from '../Modal';
+import { Typography } from '../Typography';
+var maxModalWidth = 528;
+export var StyledAvatar = styled(Avatar)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: pointer;\n  border-color: ", ";\n  border-style: solid;\n  border-width: 1px;\n  background-color: ", ";\n\n  &:hover {\n    z-index: 1;\n  }\n"], ["\n  cursor: pointer;\n  border-color: ", ";\n  border-style: solid;\n  border-width: 1px;\n  background-color: ", ";\n\n  &:hover {\n    z-index: 1;\n  }\n"])), colors.white, function (props) { return colors[props.$color]; });
+export var StyledContactItems = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-top: ", "px;\n  padding-bottom: ", "px;\n  padding-left: ", "px;\n"], ["\n  padding-top: ", "px;\n  padding-bottom: ", "px;\n  padding-left: ", "px;\n"])), spacing.sm, spacing.sm, spacing.xs);
+export var StyledWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n\n  ", " + ", " {\n    margin-left: -", "px;\n  }\n"], ["\n  display: flex;\n\n  ", " + ", " {\n    margin-left: -", "px;\n  }\n"])), StyledAvatar, StyledAvatar, spacing.sm);
+export var StyledViewAllWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  margin-left: ", "px;\n  margin-bottom: ", "px;\n"], ["\n  display: flex;\n  margin-left: ", "px;\n  margin-bottom: ", "px;\n"])), spacing.md, spacing.lg);
+export var StyledViewAll = styled(Typography)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
+export var StyledModalBody = styled(Modal.Body)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  max-width: ", "px;\n"], ["\n  max-width: ", "px;\n"])), maxModalWidth);
+export var StyledContactItem = styled(ContactItem)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  flex-shrink: 0;\n"], ["\n  flex-shrink: 0;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+//# sourceMappingURL=AvatarStack.styles.js.map