@procore/core-react 12.25.2 → 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,16 @@
 # 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

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_2__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_2__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_2__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.styles.js

@@ -28,26 +28,26 @@ var iconSize = {
 };
 export var StyledAvatarOverlay = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledAvatarOverlay",
-  componentId: "core-12_25_2__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_2__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_2__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_2__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_2__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.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_2__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_2__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_2__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_2__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_2__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_2__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_2__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[];