@atlaskit/editor-core 162.0.2 → 164.0.1

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

@@ -14,19 +14,21 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @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';
 var EXPERIMENT_NAME = 'editor.toolbarTextColor.moreColors';
 var EXPERIMENT_GROUP_CONTROL = 'control';
 export var messages = defineMessages({
@@ -156,7 +158,10 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         fitWidth = 242;
       }
 
-      return /*#__PURE__*/React.createElement(MenuWrapper, null, /*#__PURE__*/React.createElement(Dropdown, {
+      var selectedColor = pluginState.color !== pluginState.defaultColor && pluginState.color;
+      return jsx("span", {
+        css: wrapperStyle
+      }, jsx(Dropdown, {
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
         scrollableElement: popupsScrollableElement,
@@ -165,7 +170,7 @@ export var ToolbarTextColor = /*#__PURE__*/function (_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,
@@ -175,22 +180,29 @@ export var ToolbarTextColor = /*#__PURE__*/function (_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: ".concat(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: function onClick(color) {
           return _this2.changeTextColor(color, pluginState.disabled);
         },
         selectedColor: pluginState.color
-      }))), /*#__PURE__*/React.createElement(Separator, null));
+      }))), jsx("span", {
+        css: separatorStyles
+      }));
     }
   }, {
     key: "getCommonAnalyticsAttributes",

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

@@ -1,21 +1,10 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-export var TextColorIconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-export var TextColorIconBar = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 16px;\n  margin: auto;\n  width: 12px;\n  height: 3px;\n  border-radius: ", ";\n\n  ", ";\n"])), borderRadius() + 'px', function (_ref) {
-  var gradientColors = _ref.gradientColors,
-      selectedColor = _ref.selectedColor;
-
-  if (selectedColor) {
-    return "background: ".concat(selectedColor);
-  }
-
-  return "background: ".concat(gradientColors);
-});
 
 var createSteppedRainbow = function createSteppedRainbow(colors) {
   return "\n    linear-gradient(\n      to right,\n      ".concat(colors.map(function (color, i) {
@@ -34,5 +23,8 @@ var createSteppedRainbow = function createSteppedRainbow(colors) {
   }).join('\n'), "\n    );\n    ");
 };
 
-export var rainbow = createSteppedRainbow([colors.P300, colors.T300, colors.Y400, colors.R400]);
-export var disabledRainbow = createSteppedRainbow([colors.N80, colors.N60, colors.N40, colors.N60]);
+var rainbow = createSteppedRainbow([colors.P300, colors.T300, colors.Y400, colors.R400]);
+var disabledRainbow = createSteppedRainbow([colors.N80, colors.N60, colors.N40, colors.N60]);
+export var textColorIconWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+export var textColorIconBar = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 16px;\n  margin: auto;\n  width: 12px;\n  height: 3px;\n  border-radius: ", ";\n  background: ", ";\n"])), borderRadius() + 'px', rainbow);
+export var backgroundDisabled = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: ", ";\n"])), disabledRainbow);

package/dist/esm/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';
@@ -29,7 +31,9 @@ export var useClearIcon = function useClearIcon(_ref) {
       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/esm/plugins/text-formatting/ui/Toolbar/hooks/formatting-icons.js

@@ -2,10 +2,12 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 var _IconsMarkSchema;
 
+/** @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';
@@ -27,7 +29,7 @@ var IconButtons = {
     message: toolbarMessages.bold,
     tooltipKeymap: toggleBold,
     component: function component() {
-      return /*#__PURE__*/React.createElement(BoldIcon, {
+      return jsx(BoldIcon, {
         label: ""
       });
     }
@@ -38,7 +40,7 @@ var IconButtons = {
     message: toolbarMessages.italic,
     tooltipKeymap: toggleItalic,
     component: function component() {
-      return /*#__PURE__*/React.createElement(ItalicIcon, {
+      return jsx(ItalicIcon, {
         label: ""
       });
     }
@@ -85,11 +87,13 @@ var getIcon = function getIcon(_ref) {
     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/esm/plugins/text-formatting/ui/Toolbar/index.js

@@ -10,9 +10,11 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @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';
@@ -129,25 +131,27 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
       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,
@@ -156,7 +160,9 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
     moreButtonLabel: moreFormattingButtonLabel,
     hasFormattingActive: hasFormattingActive,
     items: items
-  }), /*#__PURE__*/React.createElement(Separator, null)));
+  }), jsx("span", {
+    css: separatorStyles
+  })));
 };
 
 var Toolbar = /*#__PURE__*/function (_React$PureComponent) {
@@ -182,7 +188,7 @@ var Toolbar = /*#__PURE__*/function (_React$PureComponent) {
           isToolbarDisabled = _this$props.isToolbarDisabled,
           shouldUseResponsiveToolbar = _this$props.shouldUseResponsiveToolbar,
           intl = _this$props.intl;
-      return /*#__PURE__*/React.createElement(ToolbarFormatting, {
+      return jsx(ToolbarFormatting, {
         popupsMountPoint: popupsMountPoint,
         popupsScrollableElement: popupsScrollableElement,
         toolbarSize: toolbarSize,

package/dist/esm/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 var MoreButton = /*#__PURE__*/React.memo(function (_ref) {
   var label = _ref.label,
@@ -9,13 +11,15 @@ export var MoreButton = /*#__PURE__*/React.memo(function (_ref) {
       isSelected = _ref.isSelected,
       isDisabled = _ref.isDisabled,
       onClick = _ref.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/esm/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 var SingleToolbarButtons = /*#__PURE__*/React.memo(function (_ref) {
   var items = _ref.items,
@@ -11,10 +13,10 @@ export var SingleToolbarButtons = /*#__PURE__*/React.memo(function (_ref) {
       return false;
     };
   }, [editorView.state, editorView.dispatch]);
-  return /*#__PURE__*/React.createElement(ButtonGroup, {
-    width: isReducedSpacing ? 'small' : 'large'
+  return jsx("span", {
+    css: buttonGroupStyle
   }, items.map(function (item) {
-    return /*#__PURE__*/React.createElement(ToolbarButton, {
+    return jsx(ToolbarButton, {
       key: item.key,
       buttonId: item.buttonId,
       spacing: isReducedSpacing ? 'none' : 'default',

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

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

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

@@ -2,13 +2,14 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-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';
-var QuerySpan = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n"])));
+var querySpan = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n"])));
 
 var isNavigationKey = function isNavigationKey(event) {
   return ['Enter', 'Tab', 'ArrowDown', 'ArrowUp'].includes(event.key);
@@ -180,15 +181,11 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     };
 
     var onFocusOut = function onFocusOut(event) {
-      var _window$getSelection;
-
-      // See ED-14909: Chrome may emit focusout events where an input
-      // device was not directly responsible. (This rears in react v17+ consumers
-      // where react-managed node removal now appears to propagate focusout events to
-      // our event listener). As this path is strictly for click or other typeahead
-      // dismissals that don't involve typeahead item selection, we carve out an
-      // exception for Chrome-specific events where an input device was not the initiator.
-      if (browser.chrome && !(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range') && !(event !== null && event !== void 0 && event.sourceCapabilities)) {
+      var relatedTarget = event.relatedTarget; // 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(".".concat(TYPE_AHEAD_POPUP_CONTENT_CLASS))) {
         return;
       }
 
@@ -309,9 +306,16 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
       });
     }
   }, [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/esm/plugins/type-ahead/ui/TypeAheadList.js

@@ -1,60 +1,22 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @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';
-var ITEM_PADDING = 12;
 var LIST_ITEM_ESTIMATED_HEIGHT = ICON_HEIGHT + ITEM_PADDING * 2;
 var LIST_MAX_HEIGHT = 380;
 var LIST_WIDTH = 320;
-
-var itemTheme = _defineProperty({}, itemThemeNamespace, {
-  padding: {
-    default: {
-      bottom: ITEM_PADDING,
-      left: ITEM_PADDING,
-      right: ITEM_PADDING,
-      top: ITEM_PADDING
-    }
-  },
-  beforeItemSpacing: {
-    default: function _default() {
-      return ITEM_PADDING;
-    }
-  },
-  borderRadius: function borderRadius() {
-    return 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
-    })
-  }
-});
-
 var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref) {
   var items = _ref.items,
       selectedIndex = _ref.selectedIndex,
@@ -142,20 +104,19 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref) {
 
   var estimatedHeight = items.length * LIST_ITEM_ESTIMATED_HEIGHT;
   var 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,
@@ -166,8 +127,9 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref) {
     itemSize: getListItemHeight,
     width: LIST_WIDTH,
     height: height,
-    overscanCount: 3
-  }, DynamicHeightListItem)))))));
+    overscanCount: 3,
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                    // temporary solution before we migrated off dst/item\n                    & span[class^='ItemParts__Before'] {\n                      margin-right: 12px;\n                    }\n                  "])))
+  }, DynamicHeightListItem))))));
 });
 export var TypeAheadList = injectIntl(TypeAheadListComponent);
 TypeAheadList.displayName = 'TypeAheadList';

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

@@ -1,29 +1,70 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
+/** @jsx jsx */
 import React, { useCallback, useMemo, useRef, useLayoutEffect } from 'react';
-import { N200 } from '@atlaskit/theme/colors';
+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 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';
-import { Shortcut } from '../../../ui/styles';
+import { shortcutStyle } from '../../../ui/styles';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 export var ICON_HEIGHT = 40;
 export var ICON_WIDTH = 40;
-export var ItemIcon = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  border: 1px solid rgba(223, 225, 229, 0.5); /* N60 at 50% */\n  border-radius: ", "px;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  div {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), ICON_WIDTH, ICON_HEIGHT, borderRadius(), ICON_WIDTH, ICON_HEIGHT);
-var ItemBody = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n"])));
-var ItemText = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  white-space: initial;\n  .item-description {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n  }\n"])), relativeFontSizeToBase16(11.67), N200);
-var ItemAfter = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n"])));
+export var ITEM_PADDING = 12;
+export var itemTheme = _defineProperty({}, itemThemeNamespace, {
+  padding: {
+    default: {
+      bottom: ITEM_PADDING,
+      left: ITEM_PADDING,
+      right: ITEM_PADDING,
+      top: ITEM_PADDING
+    }
+  },
+  beforeItemSpacing: {
+    default: function _default() {
+      return ITEM_PADDING;
+    }
+  },
+  borderRadius: function borderRadius() {
+    return 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 var itemIcon = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  border: 1px solid rgba(223, 225, 229, 0.5); /* N60 at 50% */\n  border-radius: ", "px;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  div {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), ICON_WIDTH, ICON_HEIGHT, borderRadius(), ICON_WIDTH, ICON_HEIGHT);
+var itemBody = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n"])));
+var itemText = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  white-space: initial;\n  .item-description {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n  }\n"])), relativeFontSizeToBase16(11.67), N200);
+var itemAfter = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n"])));
 var hidden = {
   overflow: 'hidden'
 };
 var FallbackIcon = /*#__PURE__*/React.memo(function (_ref) {
   var label = _ref.label;
-  return /*#__PURE__*/React.createElement(IconFallback, null);
+  return jsx(IconFallback, null);
 });
 
 var noop = function noop() {};
@@ -59,7 +100,9 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref2) {
       title = item.title,
       customRenderItem = item.render;
   var elementIcon = useMemo(function () {
-    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]);
@@ -72,14 +115,14 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref2) {
     }
 
     var 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
@@ -90,17 +133,26 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref2) {
     return customItem;
   }
 
-  return /*#__PURE__*/React.createElement(Item, {
+  return jsx(Item, {
     onClick: insertSelectedItem,
     onMouseMove: onMouseMove,
     elemBefore: elementIcon,
     isSelected: isSelected,
     "aria-selected": isSelected,
     "aria-label": item.title,
-    role: "option"
-  }, /*#__PURE__*/React.createElement(ItemBody, null, /*#__PURE__*/React.createElement(ItemText, null, /*#__PURE__*/React.createElement("div", {
+    role: "option",
+    theme: itemTheme
+  }, 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))));
 };