@atlaskit/editor-core 162.0.0 → 164.0.0

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

@@ -1,4 +1,3 @@
-import { autoJoin } from 'prosemirror-commands';
 import { NodeRange } from 'prosemirror-model';
 import { TextSelection } from 'prosemirror-state';
 import { findParentNodeOfType, hasParentNodeOfType, replaceParentNodeOfType, safeInsert, setTextSelection } from 'prosemirror-utils';
@@ -7,6 +6,7 @@ import { uuid } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE, INPUT_METHOD, USER_CONTEXT } from '../analytics';
 import { GapCursorSelection } from '../selection/gap-cursor-selection';
 import { stateKey as taskDecisionStateKey } from './pm-plugins/plugin-key';
+import { autoJoinTr } from '../../utils/prosemirror/autojoin';
 
 const getContextData = (contextProvider = {}) => {
   const {
@@ -72,10 +72,16 @@ export const getListTypes = (listType, schema) => {
     item: decisionItem
   };
 };
+/*
+ * @deprecated - [ED-13182] insertTaskDecision has been depreciated in favor of insertTaskDecisionCommand
+ */
+
 export const insertTaskDecision = (view, listType, inputMethod = INPUT_METHOD.TOOLBAR, listLocalId, itemLocalId) => {
-  const {
-    state
-  } = view;
+  // eslint-disable-next-line no-console
+  console.warn('insertTaskDecision has been depreciated in favor of insertTaskDecisionCommand');
+  return insertTaskDecisionCommand(listType, inputMethod, undefined, listLocalId, itemLocalId);
+};
+export const insertTaskDecisionAction = (state, listType, inputMethod = INPUT_METHOD.TOOLBAR, addItem, listLocalId, itemLocalId) => {
   const {
     schema
   } = state;
@@ -107,18 +113,24 @@ export const insertTaskDecision = (view, listType, inputMethod = INPUT_METHOD.TO
     }]).setSelection(new TextSelection(tr.doc.resolve(newItemParagraphPos)));
   };
 
-  const tr = insertTaskDecisionWithAnalytics(state, listType, inputMethod, addAndCreateList, addToList, listLocalId, itemLocalId);
-  return autoJoin((state, dispatch) => {
-    if (tr) {
-      if (dispatch) {
-        dispatch(tr);
-      }
+  const addAndCreateListFn = addItem !== null && addItem !== void 0 ? addItem : addAndCreateList;
+  const tr = insertTaskDecisionWithAnalytics(state, listType, inputMethod, addAndCreateListFn, addToList, listLocalId, itemLocalId);
 
-      return true;
-    }
+  if (!tr) {
+    return state.tr;
+  }
+
+  autoJoinTr(tr, ['taskList', 'decisionList']);
+  return tr;
+};
+export const insertTaskDecisionCommand = (listType, inputMethod = INPUT_METHOD.TOOLBAR, addItem, listLocalId, itemLocalId) => (state, dispatch) => {
+  const tr = insertTaskDecisionAction(state, listType, inputMethod, addItem, listLocalId, itemLocalId);
+
+  if (dispatch) {
+    dispatch(tr);
+  }
 
-    return false;
-  }, ['taskList', 'decisionList']);
+  return true;
 };
 export const insertTaskDecisionWithAnalytics = (state, listType, inputMethod, addAndCreateList, addToList, listLocalId, itemLocalId) => {
   const {

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

@@ -1,35 +1,32 @@
-import React from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { decisionItem, decisionList, taskItem, taskList } from '@atlaskit/adf-schema';
 import { INPUT_METHOD } from '../analytics';
 import { messages as insertBlockMessages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 import { IconAction, IconDecision } from '../quick-insert/assets';
-import { getListTypes, insertTaskDecisionWithAnalytics } from './commands';
+import { insertTaskDecisionAction, getListTypes } from './commands';
 import inputRulePlugin from './pm-plugins/input-rules';
 import keymap from './pm-plugins/keymaps';
 import { createPlugin } from './pm-plugins/main';
 import ToolbarDecision from './ui/ToolbarDecision';
 import ToolbarTask from './ui/ToolbarTask';
-const TaskDecisionToolbarGroup = styled.div`
+const taskDecisionToolbarGroup = css`
   display: flex;
 `;
 
-const quickInsertItem = (insert, state, listType) => {
+const addItem = (insert, listType, schema) => ({
+  listLocalId,
+  itemLocalId
+}) => {
   const {
     list,
     item
-  } = getListTypes(listType, state.schema);
-
-  const addItem = ({
-    listLocalId,
-    itemLocalId
-  }) => insert(list.createChecked({
+  } = getListTypes(listType, schema);
+  return insert(list.createChecked({
     localId: listLocalId
   }, item.createChecked({
     localId: itemLocalId
   })));
-
-  return insertTaskDecisionWithAnalytics(state, listType, INPUT_METHOD.QUICK_INSERT, addItem);
 };
 
 const tasksAndDecisionsPlugin = ({
@@ -85,11 +82,13 @@ const tasksAndDecisionsPlugin = ({
     editorView,
     disabled
   }) {
-    return /*#__PURE__*/React.createElement(TaskDecisionToolbarGroup, null, /*#__PURE__*/React.createElement(ToolbarDecision, {
+    return jsx("div", {
+      css: taskDecisionToolbarGroup
+    }, jsx(ToolbarDecision, {
       editorView: editorView,
       isDisabled: disabled,
       isReducedSpacing: true
-    }), /*#__PURE__*/React.createElement(ToolbarTask, {
+    }), jsx(ToolbarTask, {
       editorView: editorView,
       isDisabled: disabled,
       isReducedSpacing: true
@@ -106,10 +105,10 @@ const tasksAndDecisionsPlugin = ({
       priority: 100,
       keywords: ['checkbox', 'task', 'todo'],
       keyshortcut: '[]',
-      icon: () => /*#__PURE__*/React.createElement(IconAction, null),
+      icon: () => jsx(IconAction, null),
 
       action(insert, state) {
-        return quickInsertItem(insert, state, 'taskList');
+        return insertTaskDecisionAction(state, 'taskList', INPUT_METHOD.QUICK_INSERT, addItem(insert, 'taskList', state.schema));
       }
 
     }, {
@@ -118,10 +117,10 @@ const tasksAndDecisionsPlugin = ({
       description: formatMessage(insertBlockMessages.decisionDescription),
       priority: 900,
       keyshortcut: '<>',
-      icon: () => /*#__PURE__*/React.createElement(IconDecision, null),
+      icon: () => jsx(IconDecision, null),
 
       action(insert, state) {
-        return quickInsertItem(insert, state, 'decisionList');
+        return insertTaskDecisionAction(state, 'decisionList', INPUT_METHOD.QUICK_INSERT, addItem(insert, 'decisionList', state.schema));
       }
 
     }]

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/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/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/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

@@ -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 } from '../constants';
+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;
 `;
 
@@ -181,6 +182,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(),
@@ -302,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",