@atlaskit/editor-common 65.0.0 → 66.0.2

package/dist/esm/utils/compare-props.js

@@ -0,0 +1,115 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+import React from 'react';
+export var getKeys = Object.keys;
+export var getKeysAddedRemovedCommon = function getKeysAddedRemovedCommon(object1, object2) {
+  var oldKeys = object1 !== null ? getKeys(object1) : [];
+  var newKeys = object2 !== null ? getKeys(object2) : [];
+  var removed = oldKeys.filter(function (key) {
+    return !newKeys.includes(key);
+  });
+  var added = newKeys.filter(function (key) {
+    return !oldKeys.includes(key);
+  });
+  var common = oldKeys.filter(function (key) {
+    return newKeys.includes(key);
+  });
+  return {
+    added: added,
+    common: common,
+    removed: removed
+  };
+};
+export var serializeValue = function serializeValue(value) {
+  var valueType = _typeof(value);
+
+  if (value === null) {
+    return 'null';
+  } else if (value === undefined) {
+    return 'undefined';
+  } else if (valueType === 'string' || valueType === 'number') {
+    return value;
+  } else if (valueType === 'symbol') {
+    return value.toString();
+  } // Calling toString of function returns whole function text with body.
+  // So, just return function with name.
+  else if (valueType === 'function') {
+    return "function:".concat(value.name);
+  } else if (valueType === 'object') {
+    return {
+      type: 'object',
+      keys: Object.keys(value)
+    };
+  }
+};
+export var getPropsDifference = function getPropsDifference(object1, object2) {
+  var curDepth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var maxDepth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 2;
+  var keysToIgnore = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+
+  var _getKeysAddedRemovedC = getKeysAddedRemovedCommon(object1, object2),
+      added = _getKeysAddedRemovedC.added,
+      common = _getKeysAddedRemovedC.common,
+      removed = _getKeysAddedRemovedC.removed;
+
+  var changed = [];
+  common.forEach(function (key) {
+    var value1 = object1[key];
+    var value2 = object2[key];
+
+    var value1Type = _typeof(value1);
+
+    var value2Type = _typeof(value2); // Do comparision only if values doesn't match (or reference to same object in memory).
+    // Or if key does not exist in keys to ignore.
+
+
+    if (value1 !== value2 && keysToIgnore.indexOf(key) === -1) {
+      // if both key value are objects and not referencing same object in memory.
+      //  then get recursive difference.
+      if ( /*#__PURE__*/React.isValidElement(value1) || /*#__PURE__*/React.isValidElement(value2)) {
+        changed.push({
+          key: key,
+          reactElementChanged: true
+        });
+      } else if (value1Type === 'object' && value2Type === 'object') {
+        if (curDepth <= maxDepth) {
+          var difference = getPropsDifference(value1, value2, curDepth + 1, maxDepth);
+          changed.push({
+            key: key,
+            difference: difference
+          });
+        } else {
+          changed.push({
+            key: key,
+            maxDepthReached: true
+          });
+        }
+      } else {
+        changed.push({
+          key: key,
+          oldValue: serializeValue(value1),
+          newValue: serializeValue(value2)
+        });
+      }
+    }
+  });
+  return {
+    added: added,
+    changed: changed,
+    removed: removed
+  };
+};
+export var getShallowPropsDifference = function getShallowPropsDifference(object1, object2) {
+  var _getKeysAddedRemovedC2 = getKeysAddedRemovedCommon(object1, object2),
+      added = _getKeysAddedRemovedC2.added,
+      common = _getKeysAddedRemovedC2.common,
+      removed = _getKeysAddedRemovedC2.removed;
+
+  var changed = common.filter(function (key) {
+    return object1[key] !== object2[key];
+  });
+  return {
+    added: added,
+    changed: changed,
+    removed: removed
+  };
+};

package/dist/esm/utils/index.js

@@ -23,4 +23,6 @@ export { shouldForceTracking } from './should-force-tracking';
 export { getModeFromTheme } from './getModeFromTheme';
 export { sniffUserBrowserExtensions } from './browser-extensions';
 export { RenderCountProfiler } from './profiler/render-count';
-export { validateADFEntity, validationErrorHandler } from './validate-using-spec';
+export { validateADFEntity, validationErrorHandler } from './validate-using-spec';
+export { getShallowPropsDifference, getPropsDifference } from './compare-props';
+export { useComponentRenderTracking } from './performance/hooks/use-component-render-tracking';

package/dist/esm/utils/performance/hooks/use-component-render-tracking/index.js

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from 'react';
+import { uuid } from '@atlaskit/adf-schema';
+import { getPropsDifference, getShallowPropsDifference } from '../../../compare-props';
+export function useComponentRenderTracking(_ref) {
+  var onRender = _ref.onRender,
+      propsDiffingOptions = _ref.propsDiffingOptions,
+      _ref$zeroBasedCount = _ref.zeroBasedCount,
+      zeroBasedCount = _ref$zeroBasedCount === void 0 ? true : _ref$zeroBasedCount;
+  var propsRef = useRef();
+  var renderCountRef = useRef(zeroBasedCount ? 0 : 1);
+
+  var _useRef = useRef(uuid.generate()),
+      componentId = _useRef.current;
+
+  useEffect(function () {
+    var lastProps = propsRef.current;
+    var renderCount = renderCountRef.current;
+    var propsDifference;
+
+    if (propsDiffingOptions !== null && propsDiffingOptions !== void 0 && propsDiffingOptions.enabled && lastProps) {
+      propsDifference = propsDiffingOptions !== null && propsDiffingOptions !== void 0 && propsDiffingOptions.useShallow ? getShallowPropsDifference(lastProps, propsDiffingOptions.props) : getPropsDifference(lastProps, propsDiffingOptions.props, 0, 2, propsDiffingOptions === null || propsDiffingOptions === void 0 ? void 0 : propsDiffingOptions.propsToIgnore);
+    }
+
+    var result = {
+      renderCount: renderCount,
+      propsDifference: propsDifference,
+      componentId: componentId
+    };
+    onRender(result);
+
+    if (propsDiffingOptions !== null && propsDiffingOptions !== void 0 && propsDiffingOptions.enabled) {
+      propsRef.current = propsDiffingOptions.props;
+    }
+
+    renderCountRef.current = renderCountRef.current + 1;
+  }); // No dependencies run on each render
+}

package/dist/esm/utils/validator.js

@@ -5,7 +5,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import { defaultSchema, inlineNodes, isSafeUrl, PanelType, generateUuid as uuid } from '@atlaskit/adf-schema';
+import { inlineNodes, isSafeUrl, PanelType, generateUuid as uuid } from '@atlaskit/adf-schema';
+import { defaultSchema } from '@atlaskit/adf-schema/schema-default';
 export var ADFStages = {
   FINAL: 'final',
   STAGE_0: 'stage0'
@@ -370,7 +371,7 @@ export var getValidNode = function getValidNode(originalNode) {
             mediaCollection = collection;
           }
 
-          if (mediaId && mediaCollection && adfStage === 'stage0') {
+          if (mediaId && mediaCollection) {
             return {
               type: type,
               attrs: attrs,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "65.0.0",
+	"version": "66.0.2",
 	"sideEffects": false
 }

package/dist/types/extensions/types/field-definitions.d.ts

@@ -11,7 +11,7 @@ export declare type Option = {
      */
     icon?: string | React.ReactNode;
 };
-import { SmartUserPickerProps } from '@atlaskit/user-picker';
+import { Props as SmartUserPickerProps } from '@atlaskit/smart-user-picker';
 export declare type UserFieldContext = Pick<SmartUserPickerProps, 'siteId' | 'principalId' | 'fieldId' | 'productKey' | 'containerId' | 'objectId' | 'childObjectId' | 'productAttributes' | 'includeUsers'>;
 interface BaseFieldDefinition {
     description?: string;

package/dist/types/i18n/en.d.ts

@@ -0,0 +1,19 @@
+declare const _default: {
+    'fabric.editor.captionPlaceholder': string;
+    'fabric.editor.codeBidiWarningLabel': string;
+    'fabric.editor.collapseNode': string;
+    'fabric.editor.expandDefaultTitle': string;
+    'fabric.editor.expandNode': string;
+    'fabric.editor.expandPlaceholder': string;
+    'fabric.editor.openLink': string;
+    'fabric.editor.unsupportedBlockContent': string;
+    'fabric.editor.unsupportedContentTooltip': string;
+    'fabric.editor.unsupportedInlineContent': string;
+};
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+export default _default;

package/dist/types/i18n/en_GB.d.ts

@@ -0,0 +1,19 @@
+declare const _default: {
+    'fabric.editor.captionPlaceholder': string;
+    'fabric.editor.codeBidiWarningLabel': string;
+    'fabric.editor.collapseNode': string;
+    'fabric.editor.expandDefaultTitle': string;
+    'fabric.editor.expandNode': string;
+    'fabric.editor.expandPlaceholder': string;
+    'fabric.editor.openLink': string;
+    'fabric.editor.unsupportedBlockContent': string;
+    'fabric.editor.unsupportedContentTooltip': string;
+    'fabric.editor.unsupportedInlineContent': string;
+};
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+export default _default;

package/dist/types/normalize-feature-flags.d.ts

@@ -1,4 +1,5 @@
-declare type NormalizedFeatureFlags = Record<string, boolean>;
+declare type BooleanFlags = Record<string, boolean>;
+declare type NormalizedFeatureFlags<ObjectFlags> = Partial<ObjectFlags & BooleanFlags>;
 /**
  * Normalise and filter a free Record<string, unknown> to match
  * the rules for feature flags in editor and renderer
@@ -9,9 +10,11 @@ declare type NormalizedFeatureFlags = Record<string, boolean>;
  *
  * Output matches
  * 1. cased in camelCase (match [a-zA-Z])
- * 2. has boolean value
+ * 2. has boolean value or object {} value
  *
  * @param rawFeatureFlags
  */
-export declare function normalizeFeatureFlags(rawFeatureFlags?: Record<string, unknown>): NormalizedFeatureFlags;
+export declare function normalizeFeatureFlags<ObjectFlags>(rawFeatureFlags?: Record<string, unknown>, options?: {
+    objectFlagKeys: string[];
+}): NormalizedFeatureFlags<ObjectFlags>;
 export {};

package/dist/types/panel.d.ts

@@ -0,0 +1 @@
+export { getPanelTypeBackground, darkPanelColors, getPanelDarkColor, panelSharedStyles, panelSharedStylesWithoutPrefix, PanelSharedCssClassName, PanelSharedSelectors, getPanelBackgroundDarkModeColors, } from './styles/shared/panel';

package/dist/types/provider-factory/media-provider.d.ts

@@ -1,5 +1,5 @@
-import { MediaClientConfig } from '@atlaskit/media-core/auth';
-import { UploadParams } from '@atlaskit/media-picker/types';
+import type { MediaClientConfig } from '@atlaskit/media-core/auth';
+import type { UploadParams } from '@atlaskit/media-picker/types';
 export declare type MediaProvider = {
     uploadParams?: UploadParams;
     /**

package/dist/types/provider-factory/types.d.ts

@@ -1,5 +1,5 @@
 import { ActivityProvider } from '@atlaskit/activity-provider';
-import { EmojiProvider } from '@atlaskit/emoji/types';
+import type { EmojiProvider } from '@atlaskit/emoji/types';
 import { MentionProvider } from '@atlaskit/mention/types';
 import { TaskDecisionProvider } from '@atlaskit/task-decision/types';
 import { CollabEditProvider } from '../collab/types';

package/dist/types/styles/index.d.ts

@@ -5,7 +5,6 @@ export { columnLayoutSharedStyle } from './shared/column-layout';
 export { mediaSingleSharedStyle, richMediaClassName, } from './shared/media-single';
 export { blockquoteSharedStyles } from './shared/blockquote';
 export { headingsSharedStyles } from './shared/headings';
-export { getPanelTypeBackground, darkPanelColors, getPanelDarkColor, panelSharedStyles, PanelSharedCssClassName, PanelSharedSelectors, getPanelBackgroundDarkModeColors, } from './shared/panel';
 export { ruleSharedStyles } from './shared/rule';
 export { whitespaceSharedStyles } from './shared/whitespace';
 export { paragraphSharedStyles } from './shared/paragraph';

package/dist/types/styles/shared/link.d.ts

@@ -1,2 +1,2 @@
-declare const linkSharedStyle: import("styled-components").InterpolationValue[];
+declare const linkSharedStyle: import("@emotion/react").SerializedStyles;
 export { linkSharedStyle };

package/dist/types/styles/shared/panel.d.ts

@@ -79,4 +79,5 @@ export declare const PanelSharedSelectors: {
     yellowWarningIcon: string;
 };
 export declare const getPanelTypeBackground: (panelType: Exclude<PanelType, PanelType.CUSTOM>, props?: ThemeProps) => string;
-export declare const panelSharedStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<ThemeProps, any>>[];
+export declare const panelSharedStylesWithoutPrefix: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const panelSharedStyles: (props: ThemeProps) => import("@emotion/react").SerializedStyles;

package/dist/types/styles/shared/rule.d.ts

@@ -1 +1,2 @@
-export declare const ruleSharedStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<import("@atlaskit/theme").ThemeProps, any>>[];
+import { ThemeProps } from '@atlaskit/theme/types';
+export declare const ruleSharedStyles: (props: ThemeProps) => import("@emotion/react").SerializedStyles;

package/dist/types/ui/EventHandlers/index.d.ts

@@ -1,6 +1,6 @@
 import { SyntheticEvent } from 'react';
-import { CardEvent } from '@atlaskit/media-card';
-import { Identifier } from '@atlaskit/media-client';
+import type { CardEvent } from '@atlaskit/media-card';
+import type { Identifier } from '@atlaskit/media-client';
 export interface CardSurroundings {
     collectionName: string;
     list: Identifier[];

package/dist/types/ui/Expand/index.d.ts

@@ -1,4 +1,7 @@
-/// <reference types="react" />
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { ThemeProps } from '@atlaskit/theme/types';
 export declare const messages: {
     collapseNode: {
         id: string;
@@ -27,15 +30,14 @@ export interface StyleProps {
     'data-node-type'?: 'expand' | 'nestedExpand';
     'data-title'?: string;
 }
-export declare const ExpandIconWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+export declare const ExpandIconWrapper: ({ children, expanded, }: React.HTMLAttributes<HTMLDivElement> & {
     expanded: boolean;
-}, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    expanded: boolean;
-}>;
-export declare const ExpandLayoutWrapper: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+}) => jsx.JSX.Element;
+export declare const expandLayoutWrapperStyle: import("@emotion/react").SerializedStyles;
+export declare const ExpandLayoutWrapperWithRef: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<any>>;
 export declare const sharedExpandStyles: {
-    TitleInputStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<import("@atlaskit/theme").ThemeProps, any>>[];
-    TitleContainerStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<import("@atlaskit/theme").ThemeProps, any>>[];
-    ContainerStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<StyleProps, any>>[];
-    ContentStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<StyleProps, any>>[];
+    titleInputStyles: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+    titleContainerStyles: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+    containerStyles: (styleProps: StyleProps) => (themeProps: ThemeProps) => import("@emotion/react").SerializedStyles;
+    contentStyles: (styleProps: StyleProps) => (themeProps: ThemeProps) => import("@emotion/react").SerializedStyles;
 };

package/dist/types/ui/{IntlNextErrorBoundary → IntlErrorBoundary}/index.d.ts

@@ -5,7 +5,7 @@ interface ErrorBoundaryState {
     missingIntlProviderInAncestry: boolean;
 }
 export declare const REACT_INTL_ERROR_MESSAGE = "<IntlProvider> needs to exist in the component ancestry";
-export declare class IntlNextErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+export declare class IntlErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
     state: {
         missingIntlProviderInAncestry: boolean;
     };

package/dist/types/ui/MediaSingle/index.d.ts

@@ -1,4 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { RichMediaLayout as MediaSingleLayout, RichMediaLayout } from '@atlaskit/adf-schema';
 export declare const DEFAULT_IMAGE_WIDTH = 250;
 export declare const DEFAULT_IMAGE_HEIGHT = 200;
@@ -16,7 +18,7 @@ export interface Props {
     nodeType?: string;
     fullWidthMode?: boolean;
     hasFallbackContainer?: boolean;
-    handleMediaSingleRef?: React.RefObject<HTMLElement>;
+    handleMediaSingleRef?: React.RefObject<HTMLDivElement>;
 }
 export declare const shouldAddDefaultWrappedWidth: (layout: RichMediaLayout, width?: number | undefined, lineLength?: number | undefined) => boolean | 0 | undefined;
-export default function MediaSingle({ layout, width, height, containerWidth, isLoading, pctWidth, className, children: propsChildren, nodeType, fullWidthMode, lineLength, hasFallbackContainer, handleMediaSingleRef, }: Props): JSX.Element;
+export default function MediaSingle({ layout, width, height, containerWidth, isLoading, pctWidth, className, children: propsChildren, nodeType, fullWidthMode, lineLength, hasFallbackContainer, handleMediaSingleRef, }: Props): jsx.JSX.Element;

package/dist/types/ui/MediaSingle/styled.d.ts

@@ -1,4 +1,6 @@
-import React, { HTMLAttributes, RefObject } from 'react';
+/** @jsx jsx */
+import React, { RefObject } from 'react';
+import { jsx } from '@emotion/react';
 import { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
 /**
  * Calculates the image width for non-resized images.
@@ -22,17 +24,20 @@ export interface MediaSingleWrapperProps {
     layout: MediaSingleLayout;
     pctWidth?: number;
     width?: number;
-    innerRef?: ((elem: HTMLElement) => void) | RefObject<HTMLElement>;
+    innerRef?: ((elem: HTMLDivElement) => void) | RefObject<HTMLDivElement>;
 }
 /**
  * Can't use `.attrs` to handle highly dynamic styles because we are still
  * supporting `styled-components` v1.
  */
-export declare const MediaSingleDimensionHelper: ({ containerWidth, fullWidthMode, isResized, layout, pctWidth, width, }: MediaSingleWrapperProps) => import("styled-components").InterpolationValue[];
+export declare const MediaSingleDimensionHelper: ({ containerWidth, fullWidthMode, isResized, layout, pctWidth, width, }: MediaSingleWrapperProps) => import("@emotion/react").SerializedStyles;
 export interface MediaWrapperProps {
     paddingBottom?: string;
     height?: number;
     hasFallbackContainer?: boolean;
 }
-export declare const MediaWrapper: React.ComponentClass<HTMLAttributes<{}> & MediaWrapperProps>;
-export declare const MediaSingleWrapper: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & MediaSingleWrapperProps, any, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & MediaSingleWrapperProps>;
+export declare const mediaWrapperStyle: (props: MediaWrapperProps) => import("@emotion/react").SerializedStyles;
+export declare const MediaWrapper: {
+    ({ children, ...rest }: React.HTMLAttributes<HTMLDivElement> & MediaWrapperProps): jsx.JSX.Element;
+    displayName: string;
+};

package/dist/types/ui/Popup/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="resize-observer-browser" />
 import React from 'react';
 import { Position } from './utils';
 export interface Props {
@@ -27,6 +28,7 @@ export interface State {
 }
 export default class Popup extends React.Component<Props, State> {
     scrollElement: undefined | false | HTMLElement;
+    scrollParentElement: undefined | false | HTMLElement;
     static defaultProps: {
         offset: number[];
         allowOutOfBound: boolean;
@@ -48,6 +50,7 @@ export default class Popup extends React.Component<Props, State> {
     private scheduledUpdatePosition;
     onResize: () => void;
     UNSAFE_componentWillReceiveProps(newProps: Props): void;
+    resizeObserver: ResizeObserver | undefined;
     componentDidMount(): void;
     componentWillUnmount(): void;
     private renderPopup;

package/dist/types/ui/index.d.ts

@@ -17,10 +17,8 @@ export type { WidthConsumerContext, Breakpoints } from './WidthProvider';
 export { default as overflowShadow, shadowClassNames } from './OverflowShadow';
 export type { OverflowShadowOptions, OverflowShadowProps, OverflowShadowState, } from './OverflowShadow';
 export { WithCreateAnalyticsEvent } from './WithCreateAnalyticsEvent';
-export { messages as expandMessages, sharedExpandStyles, ExpandIconWrapper, ExpandLayoutWrapper, } from './Expand';
+export { messages as expandMessages, sharedExpandStyles, ExpandIconWrapper, expandLayoutWrapperStyle, ExpandLayoutWrapperWithRef, } from './Expand';
 export type { StyleProps as ExpandStyleProps } from './Expand';
 export { ErrorMessage, HelperMessage, ValidMessage } from './Messages';
 export { clearNextSiblingMarginTopStyle } from './clear-next-sibling-margin-top';
-export { IntlNextErrorBoundary, REACT_INTL_ERROR_MESSAGE, } from './IntlNextErrorBoundary';
-export { IntlLegacyFallbackProvider } from './IntlLegacyFallbackProvider';
-export { LegacyToNextIntlProvider } from './LegacyToNextIntlProvider';
+export { IntlErrorBoundary, REACT_INTL_ERROR_MESSAGE, } from './IntlErrorBoundary';

package/dist/types/utils/compare-props.d.ts

@@ -0,0 +1,32 @@
+declare type ChangedData<T> = {
+    key: keyof T;
+    difference?: any;
+    maxDepthReached?: boolean;
+    newValue?: any;
+    oldValue?: any;
+    reactElementChanged?: boolean;
+};
+declare type Changed<T> = Array<ChangedData<T>>;
+export declare type PropsDifference<T> = {
+    removed: Array<keyof T>;
+    added: Array<keyof T>;
+    changed: Changed<T>;
+};
+export declare type ShallowPropsDifference<T> = {
+    removed: Array<keyof T>;
+    added: Array<keyof T>;
+    changed: Array<keyof T>;
+};
+export declare const getKeys: <T>(obj: T) => (keyof T)[];
+export declare const getKeysAddedRemovedCommon: <T>(object1: T, object2: T) => {
+    added: (keyof T)[];
+    common: (keyof T)[];
+    removed: (keyof T)[];
+};
+export declare const serializeValue: <T>(value: T[keyof T]) => string | T[keyof T] | {
+    type: string;
+    keys: string[];
+} | undefined;
+export declare const getPropsDifference: <T>(object1: T, object2: T, curDepth?: number, maxDepth?: number, keysToIgnore?: (keyof T)[]) => PropsDifference<T>;
+export declare const getShallowPropsDifference: <T>(object1: T, object2: T) => ShallowPropsDifference<T>;
+export {};

package/dist/types/utils/index.d.ts

@@ -32,3 +32,7 @@ export type { UserBrowserExtensionResults } from './browser-extensions';
 export { sniffUserBrowserExtensions } from './browser-extensions';
 export { RenderCountProfiler } from './profiler/render-count';
 export { validateADFEntity, validationErrorHandler, } from './validate-using-spec';
+export { getShallowPropsDifference, getPropsDifference } from './compare-props';
+export type { ShallowPropsDifference, PropsDifference } from './compare-props';
+export { useComponentRenderTracking } from './performance/hooks/use-component-render-tracking';
+export type { UseComponentRenderTrackingArgs } from './performance/hooks/use-component-render-tracking';

package/dist/types/utils/performance/hooks/use-component-render-tracking/index.d.ts

@@ -0,0 +1,19 @@
+import { PropsDifference, ShallowPropsDifference } from '../../../compare-props';
+declare type PropsDiff<Props> = ShallowPropsDifference<Props> | PropsDifference<Props>;
+declare type OnRenderCb<Props = undefined> = ({ renderCount, propsDifference, }: {
+    renderCount: number;
+    propsDifference: PropsDiff<Props> | undefined;
+    componentId: string;
+}) => void;
+export declare type UseComponentRenderTrackingArgs<Props = undefined> = {
+    onRender: OnRenderCb<Props>;
+    propsDiffingOptions?: {
+        enabled: boolean;
+        props?: Props;
+        propsToIgnore?: Array<keyof Props>;
+        useShallow?: boolean;
+    };
+    zeroBasedCount?: boolean;
+};
+export declare function useComponentRenderTracking<Props = undefined>({ onRender, propsDiffingOptions, zeroBasedCount, }: UseComponentRenderTrackingArgs<Props>): void;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "65.0.0",
+  "version": "66.0.2",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -39,32 +39,33 @@
     "./mention": "./src/mention.ts",
     "./provider-helpers": "./src/provider-helpers/index.ts",
     "./icons": "./src/icons/index.ts",
-    "./safe-plugin": "./src/safe-plugin/index.ts"
+    "./safe-plugin": "./src/safe-plugin/index.ts",
+    "./panel": "./src/panel.ts"
   },
   "dependencies": {
     "@atlaskit/activity-provider": "^2.3.0",
-    "@atlaskit/adf-schema": "^22.0.0",
+    "@atlaskit/adf-schema": "^23.0.0",
     "@atlaskit/adf-utils": "^16.0.0",
     "@atlaskit/analytics-namespaced-context": "^6.4.0",
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/code": "^14.3.0",
     "@atlaskit/editor-json-transformer": "^8.7.0",
     "@atlaskit/editor-shared-styles": "^2.0.0",
-    "@atlaskit/emoji": "^64.2.0",
+    "@atlaskit/emoji": "^64.5.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/in-product-testing": "^0.1.0",
-    "@atlaskit/media-card": "^73.3.0",
-    "@atlaskit/media-client": "^14.4.0",
-    "@atlaskit/media-picker": "^59.1.0",
+    "@atlaskit/media-card": "^73.5.0",
+    "@atlaskit/media-client": "^15.0.0",
+    "@atlaskit/media-picker": "^61.0.0",
     "@atlaskit/mention": "^21.0.0",
-    "@atlaskit/profilecard": "^16.3.0",
-    "@atlaskit/smart-card": "^17.7.0",
-    "@atlaskit/task-decision": "^17.3.0",
+    "@atlaskit/profilecard": "^16.4.0",
+    "@atlaskit/smart-card": "^18.0.0",
+    "@atlaskit/smart-user-picker": "^5.0.2",
+    "@atlaskit/task-decision": "^17.4.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/ufo": "^0.1.0",
-    "@atlaskit/user-picker": "^8.8.0",
-    "@atlaskit/width-detector": "^3.0.0",
+    "@atlaskit/width-detector": "^4.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@types/prosemirror-model": "^1.11.0",
@@ -83,17 +84,15 @@
     "react-loadable": "^5.1.0"
   },
   "peerDependencies": {
-    "@atlaskit/media-core": "^32.2.0",
+    "@atlaskit/media-core": "^32.3.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-intl": "^2.6.0",
-    "react-intl-next": "npm:react-intl@^5.18.1",
-    "styled-components": "^3.2.6"
+    "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
     "@atlaskit/editor-json-transformer": "^8.7.0",
-    "@atlaskit/editor-test-helpers": "^16.1.0",
-    "@atlaskit/media-core": "^32.2.0",
+    "@atlaskit/editor-test-helpers": "^17.0.0",
+    "@atlaskit/media-core": "^32.3.0",
     "@atlaskit/util-data-test": "^17.2.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -107,7 +106,7 @@
     "react": "^16.8.0",
     "react-test-renderer": "^16.8.0",
     "sinon": "^2.2.0",
-    "typescript": "3.9.6"
+    "typescript": "3.9.10"
   },
   "techstack": {
     "@atlassian/frontend": {

package/panel/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/editor-common/panel",
+  "main": "../dist/cjs/panel.js",
+  "module": "../dist/esm/panel.js",
+  "module:es2019": "../dist/es2019/panel.js",
+  "types": "../dist/types/panel.d.ts"
+}