@atlaskit/editor-core 162.0.1 → 163.0.0

package/dist/es2019/plugins/status/nodeviews/status.js

@@ -1,95 +1,58 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import { Status } from '@atlaskit/status/element';
-import { ReactNodeView } from '../../../nodeviews';
 import { messages } from './messages';
 export const StyledStatus = styled.span`
   opacity: ${props => props.placeholderStyle ? 0.5 : 1};
 `;
 
-class StatusContainerView extends React.Component {
-  constructor(props) {
-    super(props);
+const StatusContainerView = props => {
+  const {
+    text,
+    color,
+    localId,
+    style,
+    intl: {
+      formatMessage
+    }
+  } = props;
+  const statusText = text ? text : formatMessage(messages.placeholder);
+
+  const handleClick = event => {
+    if (event.nativeEvent.stopImmediatePropagation) {
+      event.nativeEvent.stopImmediatePropagation();
+    } // handling of popup is done in plugin.apply on selection change.
 
-    _defineProperty(this, "handleClick", event => {
-      if (event.nativeEvent.stopImmediatePropagation) {
-        event.nativeEvent.stopImmediatePropagation();
-      } // handling of popup is done in plugin.apply on selection change.
-
-    });
-  }
-
-  render() {
-    const {
-      text,
-      color,
-      localId,
-      style,
-      intl: {
-        formatMessage
-      }
-    } = this.props;
-    const statusText = text ? text : formatMessage(messages.placeholder);
-    return /*#__PURE__*/React.createElement(StyledStatus, {
-      placeholderStyle: !text
-    }, /*#__PURE__*/React.createElement(Status, {
-      text: statusText,
-      color: color,
-      localId: localId,
-      style: style,
-      onClick: this.handleClick
-    }));
-  }
-
-}
+  };
 
-_defineProperty(StatusContainerView, "displayName", 'StatusContainerView');
+  return /*#__PURE__*/React.createElement(StyledStatus, {
+    placeholderStyle: !text
+  }, /*#__PURE__*/React.createElement(Status, {
+    text: statusText,
+    color: color,
+    localId: localId,
+    style: style,
+    onClick: handleClick
+  }));
+};
 
 export const IntlStatusContainerView = injectIntl(StatusContainerView);
-export class StatusNodeView extends ReactNodeView {
-  createDomRef() {
-    return super.createDomRef();
-  }
-
-  setDomAttrs(node, element) {
-    const {
-      color,
-      localId,
-      style
-    } = node.attrs;
-    element.dataset.color = color;
-    element.dataset.localId = localId;
-    element.dataset.style = style;
-  }
-
-  render(props) {
-    const {
-      options
-    } = props;
-    const {
-      text,
-      color,
-      localId,
-      style
-    } = this.node.attrs;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, options && options.allowZeroWidthSpaceAfter && ZERO_WIDTH_SPACE, /*#__PURE__*/React.createElement(IntlStatusContainerView, {
-      view: this.view,
-      text: text,
-      color: color,
-      style: style,
-      localId: localId
-    }), options && options.allowZeroWidthSpaceAfter && ZERO_WIDTH_SPACE);
-  }
-
-}
-export default function statusNodeView(portalProviderAPI, eventDispatcher, options) {
-  return (node, view, getPos) => {
-    const hasIntlContext = true;
-    return new StatusNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
-      options
-    }, undefined, undefined, undefined, hasIntlContext).init();
-  };
-}
+export const StatusNodeView = props => {
+  const {
+    view
+  } = props;
+  const {
+    text,
+    color,
+    localId,
+    style
+  } = props.node.attrs;
+  return /*#__PURE__*/React.createElement(IntlStatusContainerView, {
+    view: view,
+    text: text,
+    color: color,
+    style: style,
+    localId: localId
+  });
+};

package/dist/es2019/plugins/status/plugin.js

@@ -1,11 +1,12 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { NodeSelection, TextSelection } from 'prosemirror-state';
-import statusNodeView from './nodeviews/status';
+import { getInlineNodeViewProducer } from '../../nodeviews/getInlineNodeViewProducer';
+import { StatusNodeView } from './nodeviews/status';
 import { pluginKey } from './plugin-key';
 import { isEmptyStatus, mayGetStatusAtSelection } from './utils';
 export { pluginKey, pluginKeyName } from './plugin-key';
 
-const createPlugin = (dispatch, portalProviderAPI, eventDispatcher, options) => new SafePlugin({
+const createPlugin = (pmPluginFactoryParams, options) => new SafePlugin({
   state: {
     init: () => ({
       isNew: false,
@@ -19,7 +20,7 @@ const createPlugin = (dispatch, portalProviderAPI, eventDispatcher, options) =>
         const newState = { ...state,
           ...meta
         };
-        dispatch(pluginKey, newState);
+        pmPluginFactoryParams.dispatch(pluginKey, newState);
         return newState;
       }
 
@@ -34,7 +35,7 @@ const createPlugin = (dispatch, portalProviderAPI, eventDispatcher, options) =>
         };
 
         if (newState.showStatusPickerAt !== state.showStatusPickerAt) {
-          dispatch(pluginKey, newState);
+          pmPluginFactoryParams.dispatch(pluginKey, newState);
           return newState;
         }
       }
@@ -54,7 +55,7 @@ const createPlugin = (dispatch, portalProviderAPI, eventDispatcher, options) =>
             isNew: false,
             showStatusPickerAt
           };
-          dispatch(pluginKey, newState);
+          pmPluginFactoryParams.dispatch(pluginKey, newState);
           return newState;
         }
       }
@@ -102,7 +103,13 @@ const createPlugin = (dispatch, portalProviderAPI, eventDispatcher, options) =>
   key: pluginKey,
   props: {
     nodeViews: {
-      status: statusNodeView(portalProviderAPI, eventDispatcher, options)
+      status: getInlineNodeViewProducer({
+        pmPluginFactoryParams,
+        Component: StatusNodeView,
+        extraComponentProps: {
+          options
+        }
+      })
     }
   }
 });

package/dist/es2019/plugins/status/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { StatusSharedCssClassName, TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const statusStyles = css`
@@ -15,13 +15,7 @@ export const statusStyles = css`
     }
   }
   .${StatusSharedCssClassName.STATUS_CONTAINER} {
-    // these two styles can be removed when displayInlineBlockForInlineNodes is enabled by default
-    // as it will make all inline nodes inline-block by default
-    display: inline-block;
-    user-select: all;
-
     > span {
-      display: inline-block;
       cursor: pointer;
       line-height: 0; /* Prevent responsive layouts increasing height of container. */
     }

package/dist/es2019/plugins/table/index.js

@@ -230,7 +230,7 @@ const tablesPlugin = options => ({
       id: 'table',
       title: formatMessage(messages.table),
       description: formatMessage(messages.tableDescription),
-      keywords: ['cell'],
+      keywords: ['cell', 'table'],
       priority: 600,
       keyshortcut: tooltip(toggleTable),
       icon: () => /*#__PURE__*/React.createElement(IconTable, null),

package/dist/es2019/plugins/table/ui/FloatingContextualButton/index.js

@@ -1,8 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { findDomRefAtPos } from 'prosemirror-utils';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingOverlapPanelZIndex, akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
@@ -15,9 +17,6 @@ import { CONTENT_COMPONENT } from '../../../analytics/types';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../../analytics';
 import { tableFloatingCellButtonStyles } from './styles';
 import { ErrorBoundary } from '../../../../ui/ErrorBoundary';
-const ButtonWrapper = styled.div`
-  ${tableFloatingCellButtonStyles}
-`;
 export class FloatingContextualButtonInner extends React.Component {
   constructor(...args) {
     super(...args);
@@ -84,12 +83,14 @@ export class FloatingContextualButtonInner extends React.Component {
 
     const tableWrapper = closestElement(targetCellRef, `.${ClassName.TABLE_NODE_WRAPPER}`);
     const labelCellOptions = formatMessage(messages.cellOptions);
-    const button = /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ToolbarButton, {
+    const button = jsx("div", {
+      css: tableFloatingCellButtonStyles
+    }, jsx(ToolbarButton, {
       className: ClassName.CONTEXTUAL_MENU_BUTTON,
       selected: isContextualMenuOpen,
       title: labelCellOptions,
       onClick: this.handleClick,
-      iconBefore: /*#__PURE__*/React.createElement(ExpandIcon, {
+      iconBefore: jsx(ExpandIcon, {
         label: ""
       }),
       "aria-label": labelCellOptions
@@ -98,7 +99,7 @@ export class FloatingContextualButtonInner extends React.Component {
 
     if (this.props.stickyHeader && parentSticky) {
       const pos = targetCellRef.getBoundingClientRect();
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         style: {
           position: 'fixed',
           top: this.props.stickyHeader.top + this.props.stickyHeader.padding + 3 + 3,
@@ -108,7 +109,7 @@ export class FloatingContextualButtonInner extends React.Component {
       }, button);
     }
 
-    return /*#__PURE__*/React.createElement(Popup, {
+    return jsx(Popup, {
       alignX: "right",
       alignY: "start",
       target: targetCellRef,
@@ -132,9 +133,9 @@ _defineProperty(FloatingContextualButtonInner, "displayName", 'FloatingContextua
 
 const FloatingContextualButton = injectIntl(FloatingContextualButtonInner);
 export default function (props) {
-  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+  return jsx(ErrorBoundary, {
     component: ACTION_SUBJECT.FLOATING_CONTEXTUAL_BUTTON,
     dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
     fallbackComponent: null
-  }, /*#__PURE__*/React.createElement(FloatingContextualButton, props));
+  }, jsx(FloatingContextualButton, props));
 }

package/dist/es2019/plugins/table/ui/FloatingContextualButton/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { N0, N20 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { contextualMenuTriggerSize } from '../consts';

package/dist/es2019/plugins/table/ui/FloatingContextualMenu/index.js

@@ -1,17 +1,14 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { findDomRefAtPos } from 'prosemirror-utils';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
-import styled from 'styled-components';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { pluginKey } from '../../pm-plugins/plugin-key';
 import { contextualMenuDropdownWidth, contextualMenuTriggerSize } from '../consts';
 import { tablePopupStyles } from './styles';
-import ContextualMenu from './ContextualMenu';
-const MenuWrapper = styled.div`
-  ${tablePopupStyles}
-`; // offset of the contextual menu dropdown
+import ContextualMenu from './ContextualMenu'; // offset of the contextual menu dropdown
 
 const calculateOffset = (targetCellRef, state) => {
   const {
@@ -65,7 +62,7 @@ const FloatingContextualMenu = ({
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(Popup, {
+  return jsx(Popup, {
     alignX: "right",
     alignY: "top",
     target: targetCellRef,
@@ -79,7 +76,9 @@ const FloatingContextualMenu = ({
     zIndex: akEditorFloatingOverlapPanelZIndex,
     forcePlacement: true,
     offset: [-7, 0]
-  }, /*#__PURE__*/React.createElement(MenuWrapper, null, /*#__PURE__*/React.createElement(ContextualMenu, {
+  }, jsx("div", {
+    css: tablePopupStyles
+  }, jsx(ContextualMenu, {
     editorView: editorView,
     offset: calculateOffset(targetCellRef, editorView.state),
     isOpen: isOpen,

package/dist/es2019/plugins/table/ui/FloatingContextualMenu/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
 import { N60A, N90 } from '@atlaskit/theme/colors';
 import { contextualMenuDropdownWidth } from '../consts';

package/dist/es2019/plugins/table/ui/common-styles.js

@@ -580,6 +580,10 @@ export const tableStyles = props => {
   .ProseMirror.${ClassName.RESIZE_CURSOR} {
     cursor: col-resize;
   }
+
+  .ProseMirror .pm-table-cell-content-wrap ol[data-child-count='100+'] {
+    padding-left: revert;
+  }
 `;
 };
 export const tableFullPageEditorStyles = css`

package/dist/es2019/plugins/tasks-and-decisions/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const taskDecisionStyles = css`

package/dist/es2019/plugins/type-ahead/constants.js

@@ -1,5 +1,6 @@
 export const TYPE_AHEAD_DECORATION_KEY = 'typeahead_decoration_key';
 export const TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE = 'typeaheadDecoration';
+export const TYPE_AHEAD_POPUP_CONTENT_CLASS = 'fabric-editor-typeahead';
 export let NavigationDirection;
 
 (function (NavigationDirection) {

package/dist/es2019/plugins/type-ahead/ui/InputQuery.js

@@ -2,7 +2,7 @@ import React, { useRef, useEffect, useCallback } from 'react';
 import styled from 'styled-components';
 import { keyName as keyNameNormalized } from 'w3c-keyname';
 import { browser, ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
-import { CloseSelectionOptions } from '../constants';
+import { CloseSelectionOptions, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 const QuerySpan = styled.span`
   outline: none;
@@ -181,6 +181,16 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     };
 
     const onFocusOut = event => {
+      const {
+        relatedTarget
+      } = event; // Given the user is changing the focus
+      // When the target is inside the TypeAhead Popup
+      // Then the popup should stay open
+
+      if (relatedTarget instanceof HTMLElement && relatedTarget.closest && relatedTarget.closest(`.${TYPE_AHEAD_POPUP_CONTENT_CLASS}`)) {
+        return;
+      }
+
       cancel({
         addPrefixTrigger: true,
         text: cleanedInputContent(),

package/dist/es2019/plugins/type-ahead/ui/TypeAheadList.js

@@ -1,55 +1,18 @@
+/** @jsx jsx */
 import React, { useMemo, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
-import { text as colorsText, N200, N20, DN70, N800, DN600, DN300 } from '@atlaskit/theme/colors'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+import { jsx, css } from '@emotion/react'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
-import { ItemGroup, itemThemeNamespace } from '@atlaskit/item';
-import { themed } from '@atlaskit/theme/components';
-import { ThemeProvider } from 'styled-components';
-import { ICON_HEIGHT } from './TypeAheadListItem';
+import { ItemGroup } from '@atlaskit/item';
+import { ICON_HEIGHT, itemTheme, ITEM_PADDING } from './TypeAheadListItem';
 import { VariableSizeList as List } from 'react-window';
 import { ResizeObserverProvider } from './hooks/use-resize-observer';
 import { useDynamicListHeightCalculation } from './hooks/use-dynamic-list-height-calculation';
 import { DynamicHeightListItem, SelectedIndexContext, ListItemActionsContext, UpdateListItemHeightContext } from './DynamicHeightListItem';
 import { injectIntl } from 'react-intl-next';
 import { typeAheadListMessages } from '../messages';
-const ITEM_PADDING = 12;
 const LIST_ITEM_ESTIMATED_HEIGHT = ICON_HEIGHT + ITEM_PADDING * 2;
 const LIST_MAX_HEIGHT = 380;
 const LIST_WIDTH = 320;
-const itemTheme = {
-  [itemThemeNamespace]: {
-    padding: {
-      default: {
-        bottom: ITEM_PADDING,
-        left: ITEM_PADDING,
-        right: ITEM_PADDING,
-        top: ITEM_PADDING
-      }
-    },
-    beforeItemSpacing: {
-      default: () => ITEM_PADDING
-    },
-    borderRadius: () => 0,
-    hover: {
-      // background: colors.transparent, transparent is not a thing
-      text: colorsText,
-      secondaryText: N200
-    },
-    selected: {
-      background: themed({
-        light: N20,
-        dark: DN70
-      }),
-      text: themed({
-        light: N800,
-        dark: DN600
-      }),
-      secondaryText: themed({
-        light: N200,
-        dark: DN300
-      })
-    }
-  }
-};
 const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   items,
   selectedIndex,
@@ -137,20 +100,19 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
 
   const estimatedHeight = items.length * LIST_ITEM_ESTIMATED_HEIGHT;
   const height = Math.min(typeof renderedListHeight === 'number' ? renderedListHeight : estimatedHeight, LIST_MAX_HEIGHT);
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: itemTheme
-  }, /*#__PURE__*/React.createElement(ItemGroup, {
+  return jsx(ItemGroup, {
     role: "listbox",
     "aria-live": "polite",
     "aria-label": intl.formatMessage(typeAheadListMessages.typeAheadResultLabel),
-    "aria-relevant": "additions removals"
-  }, /*#__PURE__*/React.createElement(ResizeObserverProvider, null, /*#__PURE__*/React.createElement(UpdateListItemHeightContext.Provider, {
+    "aria-relevant": "additions removals",
+    theme: itemTheme
+  }, jsx(ResizeObserverProvider, null, jsx(UpdateListItemHeightContext.Provider, {
     value: setListItemHeight
-  }, /*#__PURE__*/React.createElement(ListItemActionsContext.Provider, {
+  }, jsx(ListItemActionsContext.Provider, {
     value: actions
-  }, /*#__PURE__*/React.createElement(SelectedIndexContext.Provider, {
+  }, jsx(SelectedIndexContext.Provider, {
     value: selectedIndex
-  }, /*#__PURE__*/React.createElement(List, {
+  }, jsx(List, {
     useIsScrolling: true,
     ref: listRef,
     itemData: items,
@@ -161,8 +123,14 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     itemSize: getListItemHeight,
     width: LIST_WIDTH,
     height: height,
-    overscanCount: 3
-  }, DynamicHeightListItem)))))));
+    overscanCount: 3,
+    css: css`
+                    // temporary solution before we migrated off dst/item
+                    & span[class^='ItemParts__Before'] {
+                      margin-right: 12px;
+                    }
+                  `
+  }, DynamicHeightListItem))))));
 });
 export const TypeAheadList = injectIntl(TypeAheadListComponent);
 TypeAheadList.displayName = 'TypeAheadList';

package/dist/es2019/plugins/type-ahead/ui/TypeAheadListItem.js

@@ -1,8 +1,9 @@
 import React, { useCallback, useMemo, useRef, useLayoutEffect } from 'react';
-import { N200 } from '@atlaskit/theme/colors';
+import { text as colorsText, N200, N20, DN70, N800, DN600, DN300 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
-import Item from '@atlaskit/item';
+import Item, { itemThemeNamespace } from '@atlaskit/item';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import styled from 'styled-components';
 import IconFallback from '../../quick-insert/assets/fallback';
@@ -10,6 +11,42 @@ import { Shortcut } from '../../../ui/styles';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 export const ICON_HEIGHT = 40;
 export const ICON_WIDTH = 40;
+export const ITEM_PADDING = 12;
+export const itemTheme = {
+  [itemThemeNamespace]: {
+    padding: {
+      default: {
+        bottom: ITEM_PADDING,
+        left: ITEM_PADDING,
+        right: ITEM_PADDING,
+        top: ITEM_PADDING
+      }
+    },
+    beforeItemSpacing: {
+      default: () => ITEM_PADDING
+    },
+    borderRadius: () => 0,
+    hover: {
+      // background: colors.transparent, transparent is not a thing
+      text: colorsText,
+      secondaryText: N200
+    },
+    selected: {
+      background: themed({
+        light: N20,
+        dark: DN70
+      }),
+      text: themed({
+        light: N800,
+        dark: DN600
+      }),
+      secondaryText: themed({
+        light: N200,
+        dark: DN300
+      })
+    }
+  }
+};
 export const ItemIcon = styled.div`
   width: ${ICON_WIDTH}px;
   height: ${ICON_HEIGHT}px;
@@ -128,7 +165,8 @@ export const TypeAheadListItem = ({
     isSelected: isSelected,
     "aria-selected": isSelected,
     "aria-label": item.title,
-    role: "option"
+    role: "option",
+    theme: itemTheme
   }, /*#__PURE__*/React.createElement(ItemBody, null, /*#__PURE__*/React.createElement(ItemText, null, /*#__PURE__*/React.createElement("div", {
     className: "item-title"
   }, item.title), item.description && /*#__PURE__*/React.createElement("div", {

package/dist/es2019/plugins/type-ahead/ui/TypeAheadPopup.js

@@ -5,6 +5,7 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { N0, N60A, N50A } from '@atlaskit/theme/colors';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics';
+import { TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
 import { TypeAheadList } from './TypeAheadList';
 const TypeAheadContent = styled.div`
   background: ${N0};
@@ -105,7 +106,8 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     fitWidth: 340,
     offset: OFFSET
   }, /*#__PURE__*/React.createElement(TypeAheadContent, {
-    className: "fabric-editor-typeahead"
+    tabIndex: 0,
+    className: TYPE_AHEAD_POPUP_CONTENT_CLASS
   }, /*#__PURE__*/React.createElement(Highlight, {
     state: editorView.state,
     triggerHandler: triggerHandler

package/dist/es2019/plugins/unsupported-content/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const UnsupportedSharedCssClassName = {
   BLOCK_CONTAINER: 'unsupportedBlockView-content-wrap',

package/dist/es2019/profiler/render-count.js

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import uuid from 'uuid';
-import { useComponentRenderTracking } from '../utils/react-hooks/use-component-renderer-tracking';
+import { useComponentRenderTracking } from '@atlaskit/editor-common/utils';
 import { RenderCountProfiler as RenderCountProfilerClass } from '@atlaskit/editor-common/utils';
 export let ProfiledComponentIds;
 

package/dist/es2019/ui/Appearance/Comment/Toolbar.js

@@ -24,8 +24,10 @@ export const MainToolbarWrapper = styled.div`
 `;
 MainToolbarWrapper.displayName = 'MainToolbar';
 const StickyToolbarWrapper = styled(MainToolbarWrapper)`
+  /* stylelint-disable declaration-block-no-duplicate-properties */
   position: relative;
   position: sticky;
+  /* stylelint-enable declaration-block-no-duplicate-properties */
   top: ${props => `${props.top}px`};
   padding-bottom: ${gridSize()}px;
   z-index: ${akEditorGridLineZIndex + akEditorMenuZIndex};

package/dist/es2019/ui/Appearance/FullPage/FullPage.js

@@ -102,7 +102,6 @@ export class FullPageEditor extends React.Component {
       showKeyline: showKeyline,
       featureFlags: featureFlags
     }), /*#__PURE__*/React.createElement(FullPageContentArea, {
-      allowAnnotation: props.allowAnnotation,
       appearance: props.appearance,
       contentArea: this.contentArea,
       contentAreaRef: this.contentAreaRef,

package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js

@@ -19,7 +19,6 @@ const Content = /*#__PURE__*/React.memo(props => {
     positionedOverEditor: positionedOverEditor
   }, /*#__PURE__*/React.createElement(ScrollContainer, {
     innerRef: props.scrollContainerRef,
-    allowAnnotation: props.allowAnnotation,
     className: "fabric-editor-popup-scroll-parent"
   }, /*#__PURE__*/React.createElement(ClickAreaBlock, {
     editorView: props.editorView

package/dist/es2019/ui/Appearance/FullPage/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export default defineMessages({
   toolbarLabel: {
     id: 'fabric.editor.toolbarLabel',