@procore/core-react 12.25.1 → 12.26.0

package/.jest/ckeditorMock.js

@@ -0,0 +1,67 @@
+/** @file CKEditor5 mock for Jest tests */
+
+const React = require('react')
+
+class MockCommand {
+  constructor() {
+    this.editor = null
+  }
+}
+
+class MockPlugin {
+  constructor() {
+    this.pluginName = this.constructor.name
+  }
+}
+
+const MockCKEditor = React.forwardRef((props, ref) => {
+  return React.createElement('div', {
+    'data-testid': 'ckeditor',
+    ref,
+    ...props,
+  })
+})
+
+MockCKEditor.displayName = 'CKEditor'
+
+module.exports = {
+  CKEditor: MockCKEditor,
+  Command: MockCommand,
+  Plugin: class extends MockPlugin {},
+  Bold: class extends MockPlugin {},
+  Italic: class extends MockPlugin {},
+  Underline: class extends MockPlugin {},
+  Link: class extends MockPlugin {},
+  List: class extends MockPlugin {},
+  Table: class extends MockPlugin {},
+  Strikethrough: class extends MockPlugin {},
+  Code: class extends MockPlugin {},
+  Subscript: class extends MockPlugin {},
+  Superscript: class extends MockPlugin {},
+  Highlight: class extends MockPlugin {},
+  BlockQuote: class extends MockPlugin {},
+  Heading: class extends MockPlugin {},
+  Image: class extends MockPlugin {},
+  MediaEmbed: class extends MockPlugin {},
+  HorizontalLine: class extends MockPlugin {},
+  PageBreak: class extends MockPlugin {},
+  Alignment: class extends MockPlugin {},
+  Font: class extends MockPlugin {},
+  Indent: class extends MockPlugin {},
+  RemoveFormat: class extends MockPlugin {},
+  SpecialCharacters: class extends MockPlugin {},
+  WordCount: class extends MockPlugin {},
+  FindAndReplace: class extends MockPlugin {},
+  SourceEditing: class extends MockPlugin {},
+  RestrictedEditing: class extends MockPlugin {},
+  Style: class extends MockPlugin {},
+  ShowBlocks: class extends MockPlugin {},
+  CodeBlock: class extends MockPlugin {},
+  AutoFormat: class extends MockPlugin {},
+  Autolink: class extends MockPlugin {},
+  Autosave: class extends MockPlugin {},
+  Bookmark: class extends MockPlugin {},
+  Emoji: class extends MockPlugin {},
+  Fullscreen: class extends MockPlugin {},
+  Language: class extends MockPlugin {},
+}

package/.jest/esToolkitMock.js

@@ -0,0 +1,23 @@
+/** @file es-toolkit mock */
+
+module.exports = {
+  isEqual: (a, b) => a === b,
+  cloneDeep: (obj) => JSON.parse(JSON.stringify(obj)),
+  merge: (target, ...sources) => Object.assign(target, ...sources),
+  debounce: (func, wait) => func,
+  throttle: (func, wait) => func,
+  isEmpty: (value) => {
+    if (value == null) return true
+    if (Array.isArray(value) || typeof value === 'string')
+      return value.length === 0
+    if (typeof value === 'object') return Object.keys(value).length === 0
+    return false
+  },
+  isObject: (value) => value !== null && typeof value === 'object',
+  isArray: Array.isArray,
+  isString: (value) => typeof value === 'string',
+  isNumber: (value) => typeof value === 'number',
+  isFunction: (value) => typeof value === 'function',
+  noop: () => {},
+  identity: (value) => value,
+}

package/.jest/example.test.js

@@ -0,0 +1,5 @@
+describe('1 + 1', () => {
+  it('equals 2', () => {
+    expect(1 + 1).toBe(2)
+  })
+})

package/.jest/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub'

package/.jest/setupTests.js

@@ -0,0 +1,31 @@
+import '@testing-library/jest-dom/'
+import '@testing-library/jest-dom/extend-expect'
+import * as TestingLibrary from '@testing-library/react'
+import 'jest-styled-components'
+import { setStyleSheetSerializerOptions } from 'jest-styled-components/serializer'
+
+setStyleSheetSerializerOptions({
+  addStyles: false,
+})
+
+TestingLibrary.configure({
+  testIdAttribute: 'data-qa',
+})
+
+window.scrollTo = (x, y) => {
+  document.documentElement.scrollTop = y
+}
+
+Date.now = jest.fn(() => 1667848889001)
+
+// Debug unknown props on DOM elements
+// emulateStyledComponentsV6Props();
+
+// TODO breaking change, remove polyfills from lib and rely on test env for support
+// class ResizeObserver {
+//   observe() {}
+//   unobserve() {}
+//   disconnect() {}
+// }
+
+// window.ResizeObserver = ResizeObserver

package/.jest/snapshotResolver.js

@@ -0,0 +1,47 @@
+const path = require('path')
+
+// copied from jest internals, to support default functionality and
+// to keep existing snapshots in their current location. We can remove this
+// as we migrate away from the centralized __tests__ location.
+function defaultResolveSnapshotPath(testPath, snapshotExtension) {
+  return path.join(
+    path.join(path.dirname(testPath), '__snapshots__'),
+    path.basename(testPath) + snapshotExtension
+  )
+}
+
+function defaultResolveTestPath(snapshotPath, snapshotExtension) {
+  return path.resolve(
+    path.dirname(snapshotPath),
+    '..',
+    path.basename(snapshotPath, snapshotExtension)
+  )
+}
+
+// helper to check if we should use default resolver functionality
+function isLegacyDirectory(path) {
+  return (
+    path.includes('src/components/__tests__') ||
+    path.includes('src/layouts/__tests__')
+  )
+}
+
+module.exports = {
+  testPathForConsistencyCheck: '.jest/example.test.js',
+
+  resolveSnapshotPath(testPath, snapshotExtension) {
+    if (isLegacyDirectory(testPath)) {
+      return defaultResolveSnapshotPath(testPath, snapshotExtension)
+    }
+
+    return testPath + snapshotExtension
+  },
+
+  resolveTestPath(snapshotFilePath, snapshotExtension) {
+    if (isLegacyDirectory(snapshotFilePath)) {
+      return defaultResolveTestPath(snapshotFilePath, snapshotExtension)
+    }
+
+    return snapshotFilePath.slice(0, -snapshotExtension.length)
+  },
+}

package/.jest/styleMock.js

@@ -0,0 +1 @@
+module.exports = {}

package/.jest/styledV6PropsMock.js

@@ -0,0 +1,23 @@
+// Emulate styled components v6 props behavior - pass down all non-transient components by default
+export const emulateStyledComponentsV6Props = () => {
+  jest.mock('styled-components', () => {
+    const originalModule = jest.requireActual('styled-components')
+
+    const styledProxy = new Proxy(originalModule.default, {
+      get(target, prop) {
+        if (typeof target[prop] === 'function') {
+          return target[prop].withConfig({
+            shouldForwardProp: (propName) => !propName.startsWith('$'),
+          })
+        }
+        return target[prop]
+      },
+    })
+
+    return {
+      __esModule: true,
+      ...originalModule,
+      default: styledProxy,
+    }
+  })
+}

package/.jest/svgTransform.js

@@ -0,0 +1,10 @@
+const path = require('path')
+
+module.exports = {
+  process(src, filename) {
+    const basename = path.basename(filename)
+    return {
+      code: `module.exports = ${JSON.stringify(basename)};`,
+    }
+  },
+}

package/.jest/testShims.js

@@ -0,0 +1,22 @@
+// These polyfills are helpful for unit testing of pragmatic-drag-and-drop
+// More info: https://atlassian.design/components/pragmatic-drag-and-drop/optional-packages/unit-testing/about
+import '@atlaskit/pragmatic-drag-and-drop-unit-testing/dom-rect-polyfill'
+import '@atlaskit/pragmatic-drag-and-drop-unit-testing/drag-event-polyfill'
+
+import { TextDecoder, TextEncoder } from 'util'
+
+global.TextEncoder = TextEncoder
+global.TextDecoder = TextDecoder
+
+global.ResizeObserver = jest.fn(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}))
+
+// TODO remove this eventually
+global['requestAnimationFrame'] = function requestAnimationFrame(callback) {
+  setTimeout(callback, 0)
+
+  return 0
+}

package/.jest/translationMock.js

@@ -0,0 +1,3 @@
+/** @file CKEditor5 translation mock */
+
+module.exports = {}

package/.jest/videoMock.js

@@ -0,0 +1 @@
+module.exports = ''

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Change Log
 
+## 12.26.0
+
+### Minor Changes
+
+- b341ca9: Migration of the TextEditor component from TinyMCE to CKEditor, while providing backward compatibility with the old editor API with tinyMCE prop. See coreReactJestConfig for test setup compatibility.
+
+### Patch Changes
+
+- 7407d2a: Fix Dropdown loading Spinner being clipped
+- 8243b84: Fix focus styles for scroll areas
+
+## 12.25.2
+
+### Patch Changes
+
+- 69492f6: Added an appropriate role for Remove buttons in pill component
+- 16e7f49: Fix `Modal.Heading` IDs automatically linking to the dialog and scroll region without duplicating `id`
+- ecba76f: Fixes closing DropdownFlyout on click outside
+- 50649d7: Convert `Token.Remove` component into the button with improved accessibility
+- 9e3d226: Use React.HTMLElement helpers directly rather than an internal alias. Remove previous patch exports
+- 202fb05: Fix border radius in Popover
+- 63ac8fa: Added an accessible role and label to the scrollable regions of the components (Modal, Panel, SplitViewCard, Tearsheet)
+
 ## 12.25.1
 
 ### Patch Changes

package/README.md

@@ -83,6 +83,14 @@ We use Storybook to develop. Stories are broken into two categories, Demos for i
 yarn storybook
 ```
 
+Additional testing includes Visual Regression Testing (VRT) that is ran in CI, which compares pixel snapshots of Storybook Coverage stories.
+
+## Building
+
+```
+yarn build
+```
+
 ## Testing
 
 Testing currently consists of Jest snapshots and React Testing Library tests.
@@ -91,12 +99,50 @@ Testing currently consists of Jest snapshots and React Testing Library tests.
 yarn test
 ```
 
-Additional testing includes Visual Regression Testing (VRT) that is ran in CI, which compares pixel snapshots of Storybook Coverage stories.
+## Jest Configuration
 
-## Building
+To ensure your Jest tests work seamlessly with `@procore/core-react`, we provide a configuration wrapper that you can easily use in your Jest setup.
+
+### Using Jest config file
+
+`jest.config.js`
 
+```javascript
+const { coreReactJestConfig } = require('@procore/core-react/jestConfig');
+
+module.exports = coreReactJestConfig({
+  // Your existing Jest config
+});
 ```
-yarn build
+
+### Using Hammer
+
+`hammer.config.js`
+
+```javascript
+import { coreReactJestConfig } from '@procore/core-react/jestConfig';
+
+export default {
+  testJest: (defaultConfig) => coreReactJestConfig({
+    ...defaultConfig,
+    // Your existing Jest config
+  })
+};
+```
+
+### Using Core Scripts
+
+`procore.config.js`
+
+```javascript
+const { coreReactJestConfig } = require('@procore/core-react/jestConfig');
+
+module.exports = () => ({
+  jestOverride: (defaultConfig) => coreReactJestConfig({
+    ...defaultConfig,
+    // Your existing Jest config
+  }),
+});
 ```
 
 ## Contributing and Styleguide

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_25_1__sc-aacdj4-0"
+  componentId: "core-12_26_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_25_1__sc-aacdj4-1"
+  componentId: "core-12_26_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_25_1__sc-aacdj4-2"
+  componentId: "core-12_26_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.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
-import type { DivAttributes } from '../_utils/types';
 import type { AvatarIconProps, AvatarLabelProps, AvatarPortraitProps, AvatarProps, AvatarRef, AvatarRoles, AvatarRoleType, BaseAvatarProps } from './Avatar.types';
 declare function AvatarInner({ as, clickable, disabled, href, size, children, onBlur, onFocus, rel, role, target, ...props }: AvatarProps<AvatarRoleType>, ref: AvatarRef<AvatarRoleType>): React.JSX.Element;
-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 Icon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & AvatarIconProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Label: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & AvatarLabelProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Portrait: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & AvatarPortraitProps & React.RefAttributes<HTMLDivElement>>;
 /**
 
  We use avatars to visually represent our users, places, and things in the app.
@@ -20,9 +19,9 @@ export declare const Portrait: React.ForwardRefExoticComponent<DivAttributes & A
 
  */
 export declare const NextAvatar: (<Role extends AvatarRoles>(props: AvatarProps<Role>) => ReturnType<typeof AvatarInner>) & {
-    Icon: React.ForwardRefExoticComponent<DivAttributes & AvatarIconProps & React.RefAttributes<HTMLDivElement>>;
-    Label: React.ForwardRefExoticComponent<DivAttributes & AvatarLabelProps & React.RefAttributes<HTMLDivElement>>;
-    Portrait: React.ForwardRefExoticComponent<DivAttributes & AvatarPortraitProps & React.RefAttributes<HTMLDivElement>>;
+    Icon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & AvatarIconProps & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & AvatarLabelProps & React.RefAttributes<HTMLDivElement>>;
+    Portrait: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & AvatarPortraitProps & React.RefAttributes<HTMLDivElement>>;
 };
 /**
 
@@ -41,8 +40,8 @@ export declare const NextAvatar: (<Role extends AvatarRoles>(props: AvatarProps<
 export declare const Avatar: (<Role extends AvatarRoles>(props: AvatarProps<Role> | (BaseAvatarProps & {
     ref?: React.ComponentPropsWithRef<'div'>['ref'];
 })) => ReturnType<typeof AvatarInner>) & {
-    Icon: React.ForwardRefExoticComponent<DivAttributes & AvatarIconProps & React.RefAttributes<HTMLDivElement>>;
-    Label: React.ForwardRefExoticComponent<DivAttributes & AvatarLabelProps & React.RefAttributes<HTMLDivElement>>;
-    Portrait: React.ForwardRefExoticComponent<DivAttributes & AvatarPortraitProps & React.RefAttributes<HTMLDivElement>>;
+    Icon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & AvatarIconProps & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & AvatarLabelProps & React.RefAttributes<HTMLDivElement>>;
+    Portrait: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & AvatarPortraitProps & React.RefAttributes<HTMLDivElement>>;
 };
 export {};

package/dist/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":["useButton","React","addSubcomponents","StyledAvatarContainer","StyledAvatarOverlay","StyledIconContainer","StyledLabelContainer","StyledPortraitContainer","AvatarInner","_ref","ref","as","clickable","disabled","href","size","children","onBlur","onFocus","rel","role","target","props","_objectWithoutProperties","_excluded","_ref2","onPress","_useButton","_objectSpread","elementType","isDisabled","type","buttonProps","linkDisabled","a11yProps","$clickable","_defineProperty","undefined","createElement","_extends","$disabled","$size","Children","only","Avatar_","forwardRef","NextAvatar_","Icon","_ref5","icon","_excluded2","Label","_ref6","_excluded3","Portrait","_ref7","imageUrl","_excluded4","$imageUrl","displayName","NextAvatar","Avatar"],"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["import { useButton } from '@react-aria/button'\nimport React from 'react'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport type { DivAttributes } from '../_utils/types'\nimport {\n  StyledAvatarContainer,\n  StyledAvatarOverlay,\n  StyledIconContainer,\n  StyledLabelContainer,\n  StyledPortraitContainer,\n} from './Avatar.styles'\nimport type {\n  AvatarIconProps,\n  AvatarLabelProps,\n  AvatarPortraitProps,\n  AvatarProps,\n  AvatarRef,\n  AvatarRoles,\n  AvatarRoleType,\n  BaseAvatarProps,\n} from './Avatar.types'\n\nfunction AvatarInner(\n  {\n    as,\n    clickable,\n    disabled,\n    // @ts-ignore link only\n    href,\n    size,\n    children,\n    onBlur,\n    onFocus,\n    // @ts-ignore link only\n    rel,\n    // @ts-ignore not on legacy\n    role,\n    // @ts-ignore link only\n    target,\n    ...props\n  }: AvatarProps<AvatarRoleType>,\n  ref: AvatarRef<AvatarRoleType>\n) {\n  const { onPress } = props as AvatarProps<'button'>\n\n  let { buttonProps } = useButton(\n    {\n      ...props,\n      onBlur: onBlur as (e: React.FocusEvent) => void,\n      onFocus: onFocus as (e: React.FocusEvent) => void,\n      elementType: (as as any as string) === 'a' ? 'a' : 'div',\n      href,\n      isDisabled: disabled,\n      onPress,\n      rel,\n      target,\n      type: 'button',\n    },\n    ref as any // TODO fix\n  )\n\n  const linkDisabled = disabled || (role === 'link' && !href)\n\n  const a11yProps =\n    role === 'button'\n      ? { ...buttonProps, as: as || 'div', $clickable: !disabled }\n      : role === 'link'\n      ? {\n          ['aria-disabled']: linkDisabled ? true : undefined,\n          as: as || 'a',\n          $clickable: !linkDisabled,\n          href: linkDisabled ? undefined : href,\n          onBlur,\n          onFocus,\n          rel,\n          role: 'link',\n          target,\n        }\n      : role === 'img'\n      ? {\n          ['aria-disabled']: disabled ? true : undefined,\n          role: 'img',\n          onBlur,\n          onFocus,\n        }\n      : { onBlur, onFocus }\n\n  return (\n    <StyledAvatarContainer\n      ref={ref as any}\n      $clickable={clickable}\n      $disabled={disabled}\n      $size={size}\n      data-qa=\"core-avatar\"\n      {...a11yProps}\n      {...(props as any)} // TODO fix\n    >\n      {React.Children.only(children)}\n      <StyledAvatarOverlay aria-hidden />\n    </StyledAvatarContainer>\n  )\n}\n\nconst Avatar_ = React.forwardRef(AvatarInner) as <Role extends AvatarRoles>(\n  props:\n    | AvatarProps<Role>\n    // Legacy\n    | (BaseAvatarProps & { ref?: React.ComponentPropsWithRef<'div'>['ref'] })\n) => ReturnType<typeof AvatarInner>\n\nconst NextAvatar_ = React.forwardRef(AvatarInner) as <Role extends AvatarRoles>(\n  props: AvatarProps<Role>\n) => ReturnType<typeof AvatarInner>\n\nexport const Icon = React.forwardRef<\n  HTMLDivElement,\n  DivAttributes & AvatarIconProps\n>(function Icon({ icon, ...props }, ref) {\n  return (\n    <StyledIconContainer ref={ref} {...props}>\n      {icon}\n    </StyledIconContainer>\n  )\n})\n\nexport const Label = React.forwardRef<\n  HTMLDivElement,\n  DivAttributes & AvatarLabelProps\n>(function Label({ children, ...props }, ref) {\n  // Breaking change: Option to make aria-hidden since parent requires a label.\n  // Can add in major once labelling is enforced\n  return (\n    <StyledLabelContainer ref={ref} {...props}>\n      {children}\n    </StyledLabelContainer>\n  )\n})\n\nexport const Portrait = React.forwardRef<\n  HTMLDivElement,\n  DivAttributes & AvatarPortraitProps\n>(function Portrait({ imageUrl, ...props }, ref) {\n  return (\n    <StyledPortraitContainer ref={ref} $imageUrl={imageUrl} {...props}>\n      <StyledAvatarOverlay />\n    </StyledPortraitContainer>\n  )\n})\n\n// @ts-ignore\nAvatar_.displayName = 'Avatar'\n\nIcon.displayName = 'Avatar.Icon'\n\nLabel.displayName = 'Avatar.Label'\n\nPortrait.displayName = 'Avatar.Portrait'\n\n// @ts-ignore\nNextAvatar_.displayName = 'Avatar'\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://stories.core.procore.com/?path=/story/core-react_demos-avatar--demo)\n\n @see [Design Guidelines](https://design.procore.com/avatar)\n\n @a11y Avatar's need a `aria-label` and can be enhanced with `role` for interaction. If decorative only, add `aria-hidden`. The inaccessible `clickable` prop is for UI only\n\n */\nexport const NextAvatar = addSubcomponents(\n  {\n    Icon,\n    Label,\n    Portrait,\n  },\n  NextAvatar_\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://stories.core.procore.com/?path=/story/core-react_demos-avatar--demo)\n\n @see [Design Guidelines](https://design.procore.com/avatar)\n\n @a11y Avatar's need a `aria-label` and can be enhanced with `role` for interaction. If decorative only, add `aria-hidden`. The inaccessible `clickable` prop is for UI only\n\n */\nexport const Avatar = addSubcomponents(\n  {\n    Icon,\n    Label,\n    Portrait,\n  },\n  Avatar_\n)\n"],"mappings":"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"}
+{"version":3,"file":"Avatar.js","names":["useButton","React","addSubcomponents","StyledAvatarContainer","StyledAvatarOverlay","StyledIconContainer","StyledLabelContainer","StyledPortraitContainer","AvatarInner","_ref","ref","as","clickable","disabled","href","size","children","onBlur","onFocus","rel","role","target","props","_objectWithoutProperties","_excluded","_ref2","onPress","_useButton","_objectSpread","elementType","isDisabled","type","buttonProps","linkDisabled","a11yProps","$clickable","_defineProperty","undefined","createElement","_extends","$disabled","$size","Children","only","Avatar_","forwardRef","NextAvatar_","Icon","_ref5","icon","_excluded2","Label","_ref6","_excluded3","Portrait","_ref7","imageUrl","_excluded4","$imageUrl","displayName","NextAvatar","Avatar"],"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["import { useButton } from '@react-aria/button'\nimport React from 'react'\nimport { addSubcomponents } from '../_utils/addSubcomponents'\nimport {\n  StyledAvatarContainer,\n  StyledAvatarOverlay,\n  StyledIconContainer,\n  StyledLabelContainer,\n  StyledPortraitContainer,\n} from './Avatar.styles'\nimport type {\n  AvatarIconProps,\n  AvatarLabelProps,\n  AvatarPortraitProps,\n  AvatarProps,\n  AvatarRef,\n  AvatarRoles,\n  AvatarRoleType,\n  BaseAvatarProps,\n} from './Avatar.types'\n\nfunction AvatarInner(\n  {\n    as,\n    clickable,\n    disabled,\n    // @ts-ignore link only\n    href,\n    size,\n    children,\n    onBlur,\n    onFocus,\n    // @ts-ignore link only\n    rel,\n    // @ts-ignore not on legacy\n    role,\n    // @ts-ignore link only\n    target,\n    ...props\n  }: AvatarProps<AvatarRoleType>,\n  ref: AvatarRef<AvatarRoleType>\n) {\n  const { onPress } = props as AvatarProps<'button'>\n\n  let { buttonProps } = useButton(\n    {\n      ...props,\n      onBlur: onBlur as (e: React.FocusEvent) => void,\n      onFocus: onFocus as (e: React.FocusEvent) => void,\n      elementType: (as as any as string) === 'a' ? 'a' : 'div',\n      href,\n      isDisabled: disabled,\n      onPress,\n      rel,\n      target,\n      type: 'button',\n    },\n    ref as any // TODO fix\n  )\n\n  const linkDisabled = disabled || (role === 'link' && !href)\n\n  const a11yProps =\n    role === 'button'\n      ? { ...buttonProps, as: as || 'div', $clickable: !disabled }\n      : role === 'link'\n      ? {\n          ['aria-disabled']: linkDisabled ? true : undefined,\n          as: as || 'a',\n          $clickable: !linkDisabled,\n          href: linkDisabled ? undefined : href,\n          onBlur,\n          onFocus,\n          rel,\n          role: 'link',\n          target,\n        }\n      : role === 'img'\n      ? {\n          ['aria-disabled']: disabled ? true : undefined,\n          role: 'img',\n          onBlur,\n          onFocus,\n        }\n      : { onBlur, onFocus }\n\n  return (\n    <StyledAvatarContainer\n      ref={ref as any}\n      $clickable={clickable}\n      $disabled={disabled}\n      $size={size}\n      data-qa=\"core-avatar\"\n      {...a11yProps}\n      {...(props as any)} // TODO fix\n    >\n      {React.Children.only(children)}\n      <StyledAvatarOverlay aria-hidden />\n    </StyledAvatarContainer>\n  )\n}\n\nconst Avatar_ = React.forwardRef(AvatarInner) as <Role extends AvatarRoles>(\n  props:\n    | AvatarProps<Role>\n    // Legacy\n    | (BaseAvatarProps & { ref?: React.ComponentPropsWithRef<'div'>['ref'] })\n) => ReturnType<typeof AvatarInner>\n\nconst NextAvatar_ = React.forwardRef(AvatarInner) as <Role extends AvatarRoles>(\n  props: AvatarProps<Role>\n) => ReturnType<typeof AvatarInner>\n\nexport const Icon = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & AvatarIconProps\n>(function Icon({ icon, ...props }, ref) {\n  return (\n    <StyledIconContainer ref={ref} {...props}>\n      {icon}\n    </StyledIconContainer>\n  )\n})\n\nexport const Label = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & AvatarLabelProps\n>(function Label({ children, ...props }, ref) {\n  // Breaking change: Option to make aria-hidden since parent requires a label.\n  // Can add in major once labelling is enforced\n  return (\n    <StyledLabelContainer ref={ref} {...props}>\n      {children}\n    </StyledLabelContainer>\n  )\n})\n\nexport const Portrait = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & AvatarPortraitProps\n>(function Portrait({ imageUrl, ...props }, ref) {\n  return (\n    <StyledPortraitContainer ref={ref} $imageUrl={imageUrl} {...props}>\n      <StyledAvatarOverlay />\n    </StyledPortraitContainer>\n  )\n})\n\n// @ts-ignore\nAvatar_.displayName = 'Avatar'\n\nIcon.displayName = 'Avatar.Icon'\n\nLabel.displayName = 'Avatar.Label'\n\nPortrait.displayName = 'Avatar.Portrait'\n\n// @ts-ignore\nNextAvatar_.displayName = 'Avatar'\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://stories.core.procore.com/?path=/story/core-react_demos-avatar--demo)\n\n @see [Design Guidelines](https://design.procore.com/avatar)\n\n @a11y Avatar's need a `aria-label` and can be enhanced with `role` for interaction. If decorative only, add `aria-hidden`. The inaccessible `clickable` prop is for UI only\n\n */\nexport const NextAvatar = addSubcomponents(\n  {\n    Icon,\n    Label,\n    Portrait,\n  },\n  NextAvatar_\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://stories.core.procore.com/?path=/story/core-react_demos-avatar--demo)\n\n @see [Design Guidelines](https://design.procore.com/avatar)\n\n @a11y Avatar's need a `aria-label` and can be enhanced with `role` for interaction. If decorative only, add `aria-hidden`. The inaccessible `clickable` prop is for UI only\n\n */\nexport const Avatar = addSubcomponents(\n  {\n    Icon,\n    Label,\n    Portrait,\n  },\n  Avatar_\n)\n"],"mappings":"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"}

package/dist/Avatar/Avatar.styles.js

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

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

@@ -1678,6 +1678,6 @@ export declare const StyledModalBody: import("styled-components/dist/types").ISt
 export declare const StyledContactItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("../ContactItem").ContactItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("../ContactItem").ContactItemProps & import("react").RefAttributes<HTMLDivElement>> & {
-    Title: import("react").ForwardRefExoticComponent<import("..").SpanAttributes & import("..").TypographyProps & import("react").RefAttributes<HTMLDivElement>>;
-    Description: import("react").ForwardRefExoticComponent<import("..").SpanAttributes & import("..").TypographyProps & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("..").TypographyProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Description: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("..").TypographyProps & import("react").RefAttributes<HTMLSpanElement>>;
 }, keyof import("react").Component<any, {}, any>>;

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_25_1__sc-ft72hu-0"
+  componentId: "core-12_26_0__sc-ft72hu-0"
 })(["border-color:", ";border-style:solid;border-width:1px;&:hover{z-index:1;}&[role='img']:focus{outline:none;}"], colors.white);
 export var StyledAvatar = /*#__PURE__*/styled(StyledBaseAvatar).withConfig({
   displayName: "StyledAvatar",
-  componentId: "core-12_25_1__sc-ft72hu-1"
+  componentId: "core-12_26_0__sc-ft72hu-1"
 })(["background-color:", ";"], function (props) {
   return colors[props.$color];
 });
 export var StyledContactItems = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledContactItems",
-  componentId: "core-12_25_1__sc-ft72hu-2"
+  componentId: "core-12_26_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_25_1__sc-ft72hu-3"
+  componentId: "core-12_26_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_25_1__sc-ft72hu-4"
+  componentId: "core-12_26_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_25_1__sc-ft72hu-5"
+  componentId: "core-12_26_0__sc-ft72hu-5"
 })(["max-width:", "px;"], maxModalWidth);
 export var StyledContactItem = /*#__PURE__*/styled(ContactItem).withConfig({
   displayName: "StyledContactItem",
-  componentId: "core-12_25_1__sc-ft72hu-6"
+  componentId: "core-12_26_0__sc-ft72hu-6"
 })(["flex-shrink:0;"]);
 //# sourceMappingURL=AvatarStack.styles.js.map

package/dist/AvatarStack/mocks/getAvatarMocks.d.ts

@@ -0,0 +1,25 @@
+import type { AvatarStackItem } from '../AvatarStack.types';
+export declare const groups: AvatarStackItem[];
+export declare const companies: AvatarStackItem[];
+export declare const users: AvatarStackItem[];
+export declare const withoutImage: (item: AvatarStackItem) => {
+    imageUrl: undefined;
+    id: import("../AvatarStack.types").AvatarStackItemId;
+    name: string;
+    type: import("../AvatarStack.types").AvatarStackItemType;
+    description?: string | undefined;
+    linkUrl?: string | undefined;
+    initials?: string | undefined;
+    inactive?: boolean | undefined;
+};
+export declare const inactive: (item: AvatarStackItem) => {
+    inactive: boolean;
+    id: import("../AvatarStack.types").AvatarStackItemId;
+    name: string;
+    type: import("../AvatarStack.types").AvatarStackItemType;
+    description?: string | undefined;
+    imageUrl?: string | undefined;
+    linkUrl?: string | undefined;
+    initials?: string | undefined;
+};
+export declare const getAvatarMocks: (slice?: number) => AvatarStackItem[];