@atlaskit/editor-core 163.0.0 → 164.0.2

package/dist/es2019/plugins/tasks-and-decisions/pm-plugins/input-rules.js

@@ -3,11 +3,25 @@ import { canInsert } from 'prosemirror-utils';
 import { createRule, createPlugin } from '../../../utils/input-rules';
 import { leafNodeReplacementCharacter } from '@atlaskit/prosemirror-input-rules';
 import { INPUT_METHOD } from '../../analytics';
-import { changeInDepth, insertTaskDecisionWithAnalytics } from '../commands';
+import { changeInDepth, insertTaskDecisionAction, getListTypes } from '../commands';
 
 const createListRule = (regex, listType) => {
   return createRule(regex, (state, _match, start, end) => {
-    const insertTr = insertTaskDecisionWithAnalytics(state, listType, INPUT_METHOD.FORMATTING, addItem(start, end));
+    const {
+      paragraph
+    } = state.schema.nodes;
+    const {
+      list
+    } = getListTypes(listType, state.schema);
+    const $end = state.doc.resolve(end);
+    const $endOfParent = state.doc.resolve($end.after()); // Only allow creating list in nodes that support them.
+    // Parent must be a paragraph as we don't want this applying to headings
+
+    if ($end.parent.type !== paragraph || !canInsert($endOfParent, list.createAndFill())) {
+      return null;
+    }
+
+    const insertTr = insertTaskDecisionAction(state, listType, INPUT_METHOD.FORMATTING, addItem(start, end));
     return insertTr;
   });
 };
@@ -27,7 +41,6 @@ const addItem = (start, end) => ({
     schema
   } = state;
   const {
-    paragraph,
     hardBreak
   } = schema.nodes;
   const content = $from.node($from.depth).content;
@@ -37,13 +50,6 @@ const addItem = (start, end) => ({
       shouldBreakNode = true;
     }
   });
-  const $end = state.doc.resolve(end);
-  const $endOfParent = state.doc.resolve($end.after()); // Only allow creating list in nodes that support them.
-  // Parent must be a paragraph as we don't want this applying to headings
-
-  if ($end.parent.type !== paragraph || !canInsert($endOfParent, list.createAndFill())) {
-    return null;
-  }
 
   if (!shouldBreakNode) {
     tr.replaceRangeWith($from.before(), $from.after(), list.create({

package/dist/es2019/plugins/tasks-and-decisions/ui/ToolbarDecision/index.js

@@ -4,7 +4,7 @@ import { injectIntl } from 'react-intl-next';
 import DecisionIcon from '@atlaskit/icon/glyph/editor/decision';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import { messages } from '../../../insert-block/ui/ToolbarInsertBlock/messages';
-import { insertTaskDecision } from '../../commands';
+import { insertTaskDecisionCommand } from '../../commands';
 export class ToolbarDecision extends PureComponent {
   constructor(...args) {
     super(...args);
@@ -22,7 +22,7 @@ export class ToolbarDecision extends PureComponent {
         return false;
       }
 
-      insertTaskDecision(editorView, 'decisionList')(editorView.state, editorView.dispatch);
+      insertTaskDecisionCommand('decisionList')(editorView.state, editorView.dispatch);
       return true;
     });
   }

package/dist/es2019/plugins/tasks-and-decisions/ui/ToolbarTask/index.js

@@ -4,7 +4,7 @@ import { injectIntl } from 'react-intl-next';
 import TaskIcon from '@atlaskit/icon/glyph/editor/task';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import { messages } from '../../../insert-block/ui/ToolbarInsertBlock/messages';
-import { insertTaskDecision } from '../../commands';
+import { insertTaskDecisionCommand } from '../../commands';
 export class ToolbarTask extends PureComponent {
   constructor(...args) {
     super(...args);
@@ -22,7 +22,7 @@ export class ToolbarTask extends PureComponent {
         return false;
       }
 
-      insertTaskDecision(editorView, 'taskList')(editorView.state, editorView.dispatch);
+      insertTaskDecisionCommand('taskList')(editorView.state, editorView.dispatch);
       return true;
     });
   }

package/dist/es2019/plugins/text-color/ui/ToolbarTextColor/index.js

@@ -1,17 +1,20 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { defineMessages, injectIntl } from 'react-intl-next';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import ColorPalette from '../../../../ui/ColorPalette';
 import { textColorPalette as originalTextColors } from '../../../../ui/ColorPalette/Palettes/textColorPalette';
 import Dropdown from '../../../../ui/Dropdown';
-import { ExpandIconWrapper, MenuWrapper, Separator, TriggerWrapper } from '../../../../ui/styles';
+import { expandIconWrapperStyle, wrapperStyle, separatorStyles, triggerWrapperStyles } from '../../../../ui/styles';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../../analytics';
 import * as commands from '../../commands/change-color';
 import { EditorTextColorIcon } from './icon';
-import { disabledRainbow, rainbow, TextColorIconBar, TextColorIconWrapper } from './styles';
+import { backgroundDisabled, textColorIconBar, textColorIconWrapper } from './styles';
 const EXPERIMENT_NAME = 'editor.toolbarTextColor.moreColors';
 const EXPERIMENT_GROUP_CONTROL = 'control';
 export const messages = defineMessages({
@@ -125,7 +128,10 @@ export class ToolbarTextColor extends React.Component {
       fitWidth = 242;
     }
 
-    return /*#__PURE__*/React.createElement(MenuWrapper, null, /*#__PURE__*/React.createElement(Dropdown, {
+    const selectedColor = pluginState.color !== pluginState.defaultColor && pluginState.color;
+    return jsx("span", {
+      css: wrapperStyle
+    }, jsx(Dropdown, {
       mountTo: popupsMountPoint,
       boundariesElement: popupsBoundariesElement,
       scrollableElement: popupsScrollableElement,
@@ -134,7 +140,7 @@ export class ToolbarTextColor extends React.Component {
       handleEscapeKeydown: this.hide,
       zIndex: akEditorMenuZIndex,
       fitWidth: fitWidth,
-      trigger: /*#__PURE__*/React.createElement(ToolbarButton, {
+      trigger: jsx(ToolbarButton, {
         buttonId: TOOLBAR_BUTTON.TEXT_COLOR,
         spacing: isReducedSpacing ? 'none' : 'default',
         disabled: disabled || pluginState.disabled,
@@ -144,20 +150,27 @@ export class ToolbarTextColor extends React.Component {
         "aria-haspopup": true,
         title: labelTextColor,
         onClick: this.toggleOpen,
-        iconBefore: /*#__PURE__*/React.createElement(TriggerWrapper, null, /*#__PURE__*/React.createElement(TextColorIconWrapper, null, /*#__PURE__*/React.createElement(EditorTextColorIcon, null), /*#__PURE__*/React.createElement(TextColorIconBar, {
-          selectedColor: pluginState.color !== pluginState.defaultColor && pluginState.color,
-          gradientColors: pluginState.disabled ? disabledRainbow : rainbow
-        })), /*#__PURE__*/React.createElement(ExpandIconWrapper, null, /*#__PURE__*/React.createElement(ExpandIcon, {
+        iconBefore: jsx("div", {
+          css: triggerWrapperStyles
+        }, jsx("div", {
+          css: textColorIconWrapper
+        }, jsx(EditorTextColorIcon, null), jsx("div", {
+          css: [textColorIconBar, selectedColor ? `background: ${selectedColor};` : pluginState.disabled && backgroundDisabled]
+        })), jsx("span", {
+          css: expandIconWrapperStyle
+        }, jsx(ExpandIcon, {
           label: ""
         })))
       })
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       "data-testid": "text-color-palette"
-    }, /*#__PURE__*/React.createElement(ColorPalette, {
+    }, jsx(ColorPalette, {
       palette: palette,
       onClick: color => this.changeTextColor(color, pluginState.disabled),
       selectedColor: pluginState.color
-    }))), /*#__PURE__*/React.createElement(Separator, null));
+    }))), jsx("span", {
+      css: separatorStyles
+    }));
   }
 
   getCommonAnalyticsAttributes() {

package/dist/es2019/plugins/text-color/ui/ToolbarTextColor/styles.js

@@ -1,30 +1,6 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-export const TextColorIconWrapper = styled.div`
-  position: relative;
-`;
-export const TextColorIconBar = styled.div`
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 16px;
-  margin: auto;
-  width: 12px;
-  height: 3px;
-  border-radius: ${borderRadius() + 'px'};
-
-  ${({
-  gradientColors,
-  selectedColor
-}) => {
-  if (selectedColor) {
-    return `background: ${selectedColor}`;
-  }
-
-  return `background: ${gradientColors}`;
-}};
-`;
 
 const createSteppedRainbow = colors => {
   return `
@@ -51,5 +27,22 @@ const createSteppedRainbow = colors => {
     `;
 };
 
-export const rainbow = createSteppedRainbow([colors.P300, colors.T300, colors.Y400, colors.R400]);
-export const disabledRainbow = createSteppedRainbow([colors.N80, colors.N60, colors.N40, colors.N60]);
+const rainbow = createSteppedRainbow([colors.P300, colors.T300, colors.Y400, colors.R400]);
+const disabledRainbow = createSteppedRainbow([colors.N80, colors.N60, colors.N40, colors.N60]);
+export const textColorIconWrapper = css`
+  position: relative;
+`;
+export const textColorIconBar = css`
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 16px;
+  margin: auto;
+  width: 12px;
+  height: 3px;
+  border-radius: ${borderRadius() + 'px'};
+  background: ${rainbow};
+`;
+export const backgroundDisabled = css`
+  background: ${disabledRainbow};
+`;

package/dist/es2019/plugins/text-formatting/ui/Toolbar/hooks/clear-formatting-icon.js

@@ -1,5 +1,7 @@
-import React, { useMemo } from 'react';
-import { Shortcut } from '../../../../../ui/styles';
+/** @jsx jsx */
+import { useMemo } from 'react';
+import { jsx } from '@emotion/react';
+import { shortcutStyle } from '../../../../../ui/styles';
 import { toolbarMessages } from '../toolbar-messages';
 import { clearFormattingWithAnalytics } from '../../../commands/clear-formatting';
 import { pluginKey as clearFormattingPluginKey } from '../../../pm-plugins/clear-formatting';
@@ -28,7 +30,9 @@ export const useClearIcon = ({
       key: 'clearFormatting',
       command: clearFormattingToolbar,
       content: clearFormattingLabel,
-      elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(clearFormattingKeymap)),
+      elemAfter: jsx("div", {
+        css: shortcutStyle
+      }, tooltip(clearFormattingKeymap)),
       value: {
         name: 'clearFormatting'
       },

package/dist/es2019/plugins/text-formatting/ui/Toolbar/hooks/formatting-icons.js

@@ -1,7 +1,9 @@
+/** @jsx jsx */
 import React, { useMemo } from 'react';
+import { jsx } from '@emotion/react';
 import BoldIcon from '@atlaskit/icon/glyph/editor/bold';
 import ItalicIcon from '@atlaskit/icon/glyph/editor/italic';
-import { Shortcut } from '../../../../../ui/styles';
+import { shortcutStyle } from '../../../../../ui/styles';
 import { toolbarMessages } from '../toolbar-messages';
 import * as commands from '../../../commands/text-formatting';
 import { TOOLBAR_ACTION_SUBJECT_ID } from '../../../../../plugins/analytics/types/toolbar-button';
@@ -20,7 +22,7 @@ const IconButtons = {
     command: withToolbarInputMethod(commands.toggleStrongWithAnalytics),
     message: toolbarMessages.bold,
     tooltipKeymap: toggleBold,
-    component: () => /*#__PURE__*/React.createElement(BoldIcon, {
+    component: () => jsx(BoldIcon, {
       label: ""
     })
   },
@@ -29,7 +31,7 @@ const IconButtons = {
     command: withToolbarInputMethod(commands.toggleEmWithAnalytics),
     message: toolbarMessages.italic,
     tooltipKeymap: toggleItalic,
-    component: () => /*#__PURE__*/React.createElement(ItalicIcon, {
+    component: () => jsx(ItalicIcon, {
       label: ""
     })
   },
@@ -78,11 +80,13 @@ const getIcon = ({
     key: iconType,
     command: icon.command,
     iconElement: icon.component ? icon.component() : undefined,
-    tooltipElement: tooltipKeymap ? /*#__PURE__*/React.createElement(ToolTipContent, {
+    tooltipElement: tooltipKeymap ? jsx(ToolTipContent, {
       description: content,
       keymap: tooltipKeymap
     }) : undefined,
-    elemAfter: tooltipKeymap ? /*#__PURE__*/React.createElement(Shortcut, null, tooltip(tooltipKeymap)) : undefined,
+    elemAfter: tooltipKeymap ? jsx("div", {
+      css: shortcutStyle
+    }, tooltip(tooltipKeymap)) : undefined,
     value: {
       name: iconType
     },

package/dist/es2019/plugins/text-formatting/ui/Toolbar/index.js

@@ -1,6 +1,8 @@
+/** @jsx jsx */
 import React, { useMemo, useState, useEffect } from 'react';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import { Separator, Wrapper, ButtonGroup } from '../../../../ui/styles';
+import { separatorStyles, wrapperStyle, buttonGroupStyle } from '../../../../ui/styles';
 import { useFormattingIcons, useHasFormattingActived } from './hooks/formatting-icons';
 import { useClearIcon } from './hooks/clear-formatting-icon';
 import { useResponsiveToolbarButtons, useResponsiveIconTypeMenu } from './hooks/responsive-toolbar-buttons';
@@ -108,25 +110,27 @@ const ToolbarFormatting = ({
       setMessage(screenReaderMessage);
     }
   }, [screenReaderMessage]);
-  return /*#__PURE__*/React.createElement(ButtonGroup, {
-    width: isReducedSpacing ? 'small' : 'large'
-  }, message && /*#__PURE__*/React.createElement(Announcer, {
+  return jsx("span", {
+    css: buttonGroupStyle
+  }, message && jsx(Announcer, {
     ariaLive: "assertive",
     text: message,
     ariaRelevant: "additions",
     delay: 250
-  }), /*#__PURE__*/React.createElement(SingleToolbarButtons, {
+  }), jsx(SingleToolbarButtons, {
     items: singleItems,
     editorView: editorView,
     isReducedSpacing: isReducedSpacing
-  }), /*#__PURE__*/React.createElement(Wrapper, null, isToolbarDisabled ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(MoreButton, {
+  }), jsx("span", {
+    css: wrapperStyle
+  }, isToolbarDisabled ? jsx("div", null, jsx(MoreButton, {
     label: moreFormattingButtonLabel,
     isReducedSpacing: isReducedSpacing,
     isDisabled: true,
     isSelected: false,
     "aria-expanded": undefined,
     "aria-pressed": undefined
-  })) : /*#__PURE__*/React.createElement(FormattingTextDropdownMenu, {
+  })) : jsx(FormattingTextDropdownMenu, {
     popupsMountPoint: popupsMountPoint,
     popupsBoundariesElement: popupsBoundariesElement,
     popupsScrollableElement: popupsScrollableElement,
@@ -135,7 +139,9 @@ const ToolbarFormatting = ({
     moreButtonLabel: moreFormattingButtonLabel,
     hasFormattingActive: hasFormattingActive,
     items: items
-  }), /*#__PURE__*/React.createElement(Separator, null)));
+  }), jsx("span", {
+    css: separatorStyles
+  })));
 };
 
 class Toolbar extends React.PureComponent {
@@ -150,7 +156,7 @@ class Toolbar extends React.PureComponent {
       shouldUseResponsiveToolbar,
       intl
     } = this.props;
-    return /*#__PURE__*/React.createElement(ToolbarFormatting, {
+    return jsx(ToolbarFormatting, {
       popupsMountPoint: popupsMountPoint,
       popupsScrollableElement: popupsScrollableElement,
       toolbarSize: toolbarSize,

package/dist/es2019/plugins/text-formatting/ui/Toolbar/more-button.js

@@ -1,6 +1,8 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import MoreIcon from '@atlaskit/icon/glyph/editor/more';
-import { TriggerWrapper } from '../../../../ui/styles';
+import { triggerWrapperStyles } from '../../../../ui/styles';
 import ToolbarButton from '../../../../ui/ToolbarButton';
 export const MoreButton = /*#__PURE__*/React.memo(({
   label,
@@ -10,13 +12,15 @@ export const MoreButton = /*#__PURE__*/React.memo(({
   isDisabled,
   onClick
 }) => {
-  return /*#__PURE__*/React.createElement(ToolbarButton, {
+  return jsx(ToolbarButton, {
     disabled: isDisabled,
     selected: isSelected,
     onClick: onClick,
     spacing: isReducedSpacing ? 'none' : 'default',
     title: label,
-    iconBefore: /*#__PURE__*/React.createElement(TriggerWrapper, null, /*#__PURE__*/React.createElement(MoreIcon, {
+    iconBefore: jsx("div", {
+      css: triggerWrapperStyles
+    }, jsx(MoreIcon, {
       label: ""
     })),
     "aria-expanded": ariaExpanded,

package/dist/es2019/plugins/text-formatting/ui/Toolbar/single-toolbar-buttons.js

@@ -1,5 +1,7 @@
+/** @jsx jsx */
 import React, { useCallback } from 'react';
-import { ButtonGroup } from '../../../../ui/styles';
+import { jsx } from '@emotion/react';
+import { buttonGroupStyle } from '../../../../ui/styles';
 import ToolbarButton from '../../../../ui/ToolbarButton';
 export const SingleToolbarButtons = /*#__PURE__*/React.memo(({
   items,
@@ -12,9 +14,9 @@ export const SingleToolbarButtons = /*#__PURE__*/React.memo(({
       return false;
     };
   }, [editorView.state, editorView.dispatch]);
-  return /*#__PURE__*/React.createElement(ButtonGroup, {
-    width: isReducedSpacing ? 'small' : 'large'
-  }, items.map(item => /*#__PURE__*/React.createElement(ToolbarButton, {
+  return jsx("span", {
+    css: buttonGroupStyle
+  }, items.map(item => jsx(ToolbarButton, {
     key: item.key,
     buttonId: item.buttonId,
     spacing: isReducedSpacing ? 'none' : 'default',

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

@@ -1,10 +1,11 @@
-import React, { useRef, useEffect, useCallback } from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import React, { useRef, useEffect, useCallback, Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
 import { keyName as keyNameNormalized } from 'w3c-keyname';
 import { browser, ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import { CloseSelectionOptions, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
-const QuerySpan = styled.span`
+const querySpan = css`
   outline: none;
 `;
 
@@ -312,9 +313,16 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       });
     }
   }, [forceFocus, reopenQuery]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, triggerQueryPrefix, /*#__PURE__*/React.createElement(QuerySpan, {
+  /**
+    When we migrated to emotion from styled component, we started getting this error.
+    jsx-a11y/interactive-supports-focus
+    Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
+   */
+
+  return jsx(Fragment, null, triggerQueryPrefix, jsx("span", {
+    css: querySpan,
     contentEditable: true,
-    innerRef: ref,
+    ref: ref,
     onKeyUp: onKeyUp,
     onClick: onClick,
     role: "textbox",

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

@@ -1,13 +1,14 @@
+/** @jsx jsx */
 import React, { useCallback, useMemo, useRef, useLayoutEffect } from 'react';
+import { css, jsx } from '@emotion/react';
 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, { itemThemeNamespace } from '@atlaskit/item';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import styled from 'styled-components';
 import IconFallback from '../../quick-insert/assets/fallback';
-import { Shortcut } from '../../../ui/styles';
+import { shortcutStyle } from '../../../ui/styles';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 export const ICON_HEIGHT = 40;
 export const ICON_WIDTH = 40;
@@ -47,7 +48,7 @@ export const itemTheme = {
     }
   }
 };
-export const ItemIcon = styled.div`
+export const itemIcon = css`
   width: ${ICON_WIDTH}px;
   height: ${ICON_HEIGHT}px;
   overflow: hidden;
@@ -64,14 +65,14 @@ export const ItemIcon = styled.div`
     height: ${ICON_HEIGHT}px;
   }
 `;
-const ItemBody = styled.div`
+const itemBody = css`
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-between;
   line-height: 1.4;
 `;
-const ItemText = styled.div`
+const itemText = css`
   white-space: initial;
   .item-description {
     font-size: ${relativeFontSizeToBase16(11.67)};
@@ -79,7 +80,7 @@ const ItemText = styled.div`
     margin-top: 4px;
   }
 `;
-const ItemAfter = styled.div`
+const itemAfter = css`
   flex: 0 0 auto;
 `;
 const hidden = {
@@ -88,7 +89,7 @@ const hidden = {
 const FallbackIcon = /*#__PURE__*/React.memo(({
   label
 }) => {
-  return /*#__PURE__*/React.createElement(IconFallback, null);
+  return jsx(IconFallback, null);
 });
 
 const noop = () => {};
@@ -127,7 +128,9 @@ export const TypeAheadListItem = ({
     render: customRenderItem
   } = item;
   const elementIcon = useMemo(() => {
-    return /*#__PURE__*/React.createElement(ItemIcon, null, icon ? icon() : /*#__PURE__*/React.createElement(FallbackIcon, {
+    return jsx("div", {
+      css: itemIcon
+    }, icon ? icon() : jsx(FallbackIcon, {
       label: title
     }));
   }, [icon, title]);
@@ -140,14 +143,14 @@ export const TypeAheadListItem = ({
     }
 
     const Comp = customRenderItem;
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       "aria-selected": isSelected,
       "aria-label": title,
       role: "option",
       tabIndex: 0,
       style: hidden,
       onMouseMove: onMouseMove
-    }, /*#__PURE__*/React.createElement(Comp, {
+    }, jsx(Comp, {
       onClick: insertSelectedItem,
       isSelected: isSelected,
       onHover: noop
@@ -158,7 +161,7 @@ export const TypeAheadListItem = ({
     return customItem;
   }
 
-  return /*#__PURE__*/React.createElement(Item, {
+  return jsx(Item, {
     onClick: insertSelectedItem,
     onMouseMove: onMouseMove,
     elemBefore: elementIcon,
@@ -167,9 +170,17 @@ export const TypeAheadListItem = ({
     "aria-label": item.title,
     role: "option",
     theme: itemTheme
-  }, /*#__PURE__*/React.createElement(ItemBody, null, /*#__PURE__*/React.createElement(ItemText, null, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
+    css: itemBody
+  }, jsx("div", {
+    css: itemText
+  }, jsx("div", {
     className: "item-title"
-  }, item.title), item.description && /*#__PURE__*/React.createElement("div", {
+  }, item.title), item.description && jsx("div", {
     className: "item-description"
-  }, item.description)), /*#__PURE__*/React.createElement(ItemAfter, null, item.keyshortcut && /*#__PURE__*/React.createElement(Shortcut, null, item.keyshortcut))));
+  }, item.description)), jsx("div", {
+    css: itemAfter
+  }, item.keyshortcut && jsx("div", {
+    css: shortcutStyle
+  }, item.keyshortcut))));
 };

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

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import React, { useEffect, useMemo } from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
@@ -7,7 +8,7 @@ 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`
+const typeAheadContent = css`
   background: ${N0};
   border-radius: ${borderRadius()}px;
   box-shadow: 0 0 1px ${N60A}, 0 4px 8px -2px ${N50A};
@@ -96,7 +97,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
   // we need to send the event again
   // eslint-disable-next-line react-hooks/exhaustive-deps
   triggerHandler]);
-  return /*#__PURE__*/React.createElement(Popup, {
+  return jsx(Popup, {
     zIndex: akEditorFloatingDialogZIndex,
     target: anchorElement,
     mountTo: popupsMountPoint,
@@ -105,13 +106,14 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     fitHeight: 300,
     fitWidth: 340,
     offset: OFFSET
-  }, /*#__PURE__*/React.createElement(TypeAheadContent, {
+  }, jsx("div", {
+    css: typeAheadContent,
     tabIndex: 0,
     className: TYPE_AHEAD_POPUP_CONTENT_CLASS
-  }, /*#__PURE__*/React.createElement(Highlight, {
+  }, jsx(Highlight, {
     state: editorView.state,
     triggerHandler: triggerHandler
-  }), /*#__PURE__*/React.createElement(TypeAheadList, {
+  }), jsx(TypeAheadList, {
     items: items,
     selectedIndex: selectedIndex,
     onItemHover: setSelectedItem,