@atlaskit/editor-core 162.0.2 → 164.0.1

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

@@ -7,39 +7,22 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.rainbow = exports.disabledRainbow = exports.TextColorIconWrapper = exports.TextColorIconBar = void 0;
+exports.textColorIconWrapper = exports.textColorIconBar = exports.backgroundDisabled = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var TextColorIconWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
-
-exports.TextColorIconWrapper = TextColorIconWrapper;
-
-var TextColorIconBar = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.borderRadius)() + 'px', function (_ref) {
-  var gradientColors = _ref.gradientColors,
-      selectedColor = _ref.selectedColor;
-
-  if (selectedColor) {
-    return "background: ".concat(selectedColor);
-  }
-
-  return "background: ".concat(gradientColors);
-});
-
-exports.TextColorIconBar = TextColorIconBar;
-
 var createSteppedRainbow = function createSteppedRainbow(colors) {
   return "\n    linear-gradient(\n      to right,\n      ".concat(colors.map(function (color, i) {
     var inc = 100 / colors.length;
@@ -58,6 +41,10 @@ var createSteppedRainbow = function createSteppedRainbow(colors) {
 };
 
 var rainbow = createSteppedRainbow([colors.P300, colors.T300, colors.Y400, colors.R400]);
-exports.rainbow = rainbow;
 var disabledRainbow = createSteppedRainbow([colors.N80, colors.N60, colors.N40, colors.N60]);
-exports.disabledRainbow = disabledRainbow;
+var textColorIconWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
+exports.textColorIconWrapper = textColorIconWrapper;
+var textColorIconBar = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.borderRadius)() + 'px', rainbow);
+exports.textColorIconBar = textColorIconBar;
+var backgroundDisabled = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n"])), disabledRainbow);
+exports.backgroundDisabled = backgroundDisabled;

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

@@ -1,13 +1,13 @@
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useClearIcon = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
 
 var _styles = require("../../../../../ui/styles");
 
@@ -21,10 +21,7 @@ var _keymaps = require("../../../../../keymaps");
 
 var _enums = require("../../../../analytics/types/enums");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+/** @jsx jsx */
 var clearFormattingToolbar = (0, _clearFormatting.clearFormattingWithAnalytics)(_enums.INPUT_METHOD.TOOLBAR);
 
 var useClearFormattingPluginState = function useClearFormattingPluginState(editorState) {
@@ -49,7 +46,9 @@ var useClearIcon = function useClearIcon(_ref) {
       key: 'clearFormatting',
       command: clearFormattingToolbar,
       content: clearFormattingLabel,
-      elemAfter: /*#__PURE__*/_react.default.createElement(_styles.Shortcut, null, (0, _keymaps.tooltip)(_keymaps.clearFormatting)),
+      elemAfter: (0, _react2.jsx)("div", {
+        css: _styles.shortcutStyle
+      }, (0, _keymaps.tooltip)(_keymaps.clearFormatting)),
       value: {
         name: 'clearFormatting'
       },

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

@@ -13,6 +13,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _bold = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/bold"));
 
 var _italic = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/italic"));
@@ -52,7 +54,7 @@ var IconButtons = {
     message: _toolbarMessages.toolbarMessages.bold,
     tooltipKeymap: _keymaps.toggleBold,
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_bold.default, {
+      return (0, _react2.jsx)(_bold.default, {
         label: ""
       });
     }
@@ -63,7 +65,7 @@ var IconButtons = {
     message: _toolbarMessages.toolbarMessages.italic,
     tooltipKeymap: _keymaps.toggleItalic,
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_italic.default, {
+      return (0, _react2.jsx)(_italic.default, {
         label: ""
       });
     }
@@ -110,11 +112,13 @@ var getIcon = function getIcon(_ref) {
     key: iconType,
     command: icon.command,
     iconElement: icon.component ? icon.component() : undefined,
-    tooltipElement: tooltipKeymap ? /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+    tooltipElement: tooltipKeymap ? (0, _react2.jsx)(_keymaps.ToolTipContent, {
       description: content,
       keymap: tooltipKeymap
     }) : undefined,
-    elemAfter: tooltipKeymap ? /*#__PURE__*/_react.default.createElement(_styles.Shortcut, null, (0, _keymaps.tooltip)(tooltipKeymap)) : undefined,
+    elemAfter: tooltipKeymap ? (0, _react2.jsx)("div", {
+      css: _styles.shortcutStyle
+    }, (0, _keymaps.tooltip)(tooltipKeymap)) : undefined,
     value: {
       name: iconType
     },

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

@@ -25,6 +25,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _reactIntlNext = require("react-intl-next");
 
 var _styles = require("../../../../ui/styles");
@@ -161,25 +163,27 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
       setMessage(screenReaderMessage);
     }
   }, [screenReaderMessage]);
-  return /*#__PURE__*/_react.default.createElement(_styles.ButtonGroup, {
-    width: isReducedSpacing ? 'small' : 'large'
-  }, message && /*#__PURE__*/_react.default.createElement(_announcer.default, {
+  return (0, _react2.jsx)("span", {
+    css: _styles.buttonGroupStyle
+  }, message && (0, _react2.jsx)(_announcer.default, {
     ariaLive: "assertive",
     text: message,
     ariaRelevant: "additions",
     delay: 250
-  }), /*#__PURE__*/_react.default.createElement(_singleToolbarButtons.SingleToolbarButtons, {
+  }), (0, _react2.jsx)(_singleToolbarButtons.SingleToolbarButtons, {
     items: singleItems,
     editorView: editorView,
     isReducedSpacing: isReducedSpacing
-  }), /*#__PURE__*/_react.default.createElement(_styles.Wrapper, null, isToolbarDisabled ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_moreButton.MoreButton, {
+  }), (0, _react2.jsx)("span", {
+    css: _styles.wrapperStyle
+  }, isToolbarDisabled ? (0, _react2.jsx)("div", null, (0, _react2.jsx)(_moreButton.MoreButton, {
     label: moreFormattingButtonLabel,
     isReducedSpacing: isReducedSpacing,
     isDisabled: true,
     isSelected: false,
     "aria-expanded": undefined,
     "aria-pressed": undefined
-  })) : /*#__PURE__*/_react.default.createElement(_dropdownMenu.FormattingTextDropdownMenu, {
+  })) : (0, _react2.jsx)(_dropdownMenu.FormattingTextDropdownMenu, {
     popupsMountPoint: popupsMountPoint,
     popupsBoundariesElement: popupsBoundariesElement,
     popupsScrollableElement: popupsScrollableElement,
@@ -188,7 +192,9 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
     moreButtonLabel: moreFormattingButtonLabel,
     hasFormattingActive: hasFormattingActive,
     items: items
-  }), /*#__PURE__*/_react.default.createElement(_styles.Separator, null)));
+  }), (0, _react2.jsx)("span", {
+    css: _styles.separatorStyles
+  })));
 };
 
 var Toolbar = /*#__PURE__*/function (_React$PureComponent) {
@@ -213,7 +219,7 @@ var Toolbar = /*#__PURE__*/function (_React$PureComponent) {
           isToolbarDisabled = _this$props.isToolbarDisabled,
           shouldUseResponsiveToolbar = _this$props.shouldUseResponsiveToolbar,
           intl = _this$props.intl;
-      return /*#__PURE__*/_react.default.createElement(ToolbarFormatting, {
+      return (0, _react2.jsx)(ToolbarFormatting, {
         popupsMountPoint: popupsMountPoint,
         popupsScrollableElement: popupsScrollableElement,
         toolbarSize: toolbarSize,

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

@@ -9,12 +9,15 @@ exports.MoreButton = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _more = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/more"));
 
 var _styles = require("../../../../ui/styles");
 
 var _ToolbarButton = _interopRequireDefault(require("../../../../ui/ToolbarButton"));
 
+/** @jsx jsx */
 var MoreButton = /*#__PURE__*/_react.default.memo(function (_ref) {
   var label = _ref.label,
       ariaExpanded = _ref['aria-expanded'],
@@ -22,13 +25,15 @@ var MoreButton = /*#__PURE__*/_react.default.memo(function (_ref) {
       isSelected = _ref.isSelected,
       isDisabled = _ref.isDisabled,
       onClick = _ref.onClick;
-  return /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+  return (0, _react2.jsx)(_ToolbarButton.default, {
     disabled: isDisabled,
     selected: isSelected,
     onClick: onClick,
     spacing: isReducedSpacing ? 'none' : 'default',
     title: label,
-    iconBefore: /*#__PURE__*/_react.default.createElement(_styles.TriggerWrapper, null, /*#__PURE__*/_react.default.createElement(_more.default, {
+    iconBefore: (0, _react2.jsx)("div", {
+      css: _styles.triggerWrapperStyles
+    }, (0, _react2.jsx)(_more.default, {
       label: ""
     })),
     "aria-expanded": ariaExpanded,

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

@@ -11,6 +11,8 @@ exports.SingleToolbarButtons = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _styles = require("../../../../ui/styles");
 
 var _ToolbarButton = _interopRequireDefault(require("../../../../ui/ToolbarButton"));
@@ -19,6 +21,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+/** @jsx jsx */
 var SingleToolbarButtons = /*#__PURE__*/_react.default.memo(function (_ref) {
   var items = _ref.items,
       isReducedSpacing = _ref.isReducedSpacing,
@@ -29,10 +32,10 @@ var SingleToolbarButtons = /*#__PURE__*/_react.default.memo(function (_ref) {
       return false;
     };
   }, [editorView.state, editorView.dispatch]);
-  return /*#__PURE__*/_react.default.createElement(_styles.ButtonGroup, {
-    width: isReducedSpacing ? 'small' : 'large'
+  return (0, _react2.jsx)("span", {
+    css: _styles.buttonGroupStyle
   }, items.map(function (item) {
-    return /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+    return (0, _react2.jsx)(_ToolbarButton.default, {
       key: item.key,
       buttonId: item.buttonId,
       spacing: isReducedSpacing ? 'none' : 'default',

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

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TYPE_AHEAD_DECORATION_KEY = exports.TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE = exports.NavigationDirection = exports.CloseSelectionOptions = void 0;
+exports.TYPE_AHEAD_POPUP_CONTENT_CLASS = exports.TYPE_AHEAD_DECORATION_KEY = exports.TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE = exports.NavigationDirection = exports.CloseSelectionOptions = void 0;
 var TYPE_AHEAD_DECORATION_KEY = 'typeahead_decoration_key';
 exports.TYPE_AHEAD_DECORATION_KEY = TYPE_AHEAD_DECORATION_KEY;
 var TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE = 'typeaheadDecoration';
 exports.TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE = TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE;
+var TYPE_AHEAD_POPUP_CONTENT_CLASS = 'fabric-editor-typeahead';
+exports.TYPE_AHEAD_POPUP_CONTENT_CLASS = TYPE_AHEAD_POPUP_CONTENT_CLASS;
 var NavigationDirection;
 exports.NavigationDirection = NavigationDirection;
 

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

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _w3cKeyname = require("w3c-keyname");
 
@@ -29,7 +29,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var QuerySpan = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n"])));
+var querySpan = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n"])));
 
 var isNavigationKey = function isNavigationKey(event) {
   return ['Enter', 'Tab', 'ArrowDown', 'ArrowUp'].includes(event.key);
@@ -201,15 +201,11 @@ var InputQuery = /*#__PURE__*/_react.default.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 (_utils.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(_constants.TYPE_AHEAD_POPUP_CONTENT_CLASS))) {
         return;
       }
 
@@ -330,9 +326,16 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
       });
     }
   }, [forceFocus, reopenQuery]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, triggerQueryPrefix, /*#__PURE__*/_react.default.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 (0, _react2.jsx)(_react.Fragment, null, triggerQueryPrefix, (0, _react2.jsx)("span", {
+    css: querySpan,
     contentEditable: true,
-    innerRef: ref,
+    ref: ref,
     onKeyUp: onKeyUp,
     onClick: onClick,
     role: "textbox",

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

@@ -9,18 +9,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TypeAheadList = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _colors = require("@atlaskit/theme/colors");
+var _react2 = require("@emotion/react");
 
 var _item = require("@atlaskit/item");
 
-var _components = require("@atlaskit/theme/components");
-
-var _styledComponents = require("styled-components");
-
 var _TypeAheadListItem = require("./TypeAheadListItem");
 
 var _reactWindow = require("react-window");
@@ -35,52 +31,15 @@ var _reactIntlNext = require("react-intl-next");
 
 var _messages = require("../messages");
 
+var _templateObject;
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-var ITEM_PADDING = 12;
-var LIST_ITEM_ESTIMATED_HEIGHT = _TypeAheadListItem.ICON_HEIGHT + ITEM_PADDING * 2;
+var LIST_ITEM_ESTIMATED_HEIGHT = _TypeAheadListItem.ICON_HEIGHT + _TypeAheadListItem.ITEM_PADDING * 2;
 var LIST_MAX_HEIGHT = 380;
 var LIST_WIDTH = 320;
-var itemTheme = (0, _defineProperty2.default)({}, _item.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: _colors.text,
-    secondaryText: _colors.N200
-  },
-  selected: {
-    background: (0, _components.themed)({
-      light: _colors.N20,
-      dark: _colors.DN70
-    }),
-    text: (0, _components.themed)({
-      light: _colors.N800,
-      dark: _colors.DN600
-    }),
-    secondaryText: (0, _components.themed)({
-      light: _colors.N200,
-      dark: _colors.DN300
-    })
-  }
-});
 
 var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref) {
   var items = _ref.items,
@@ -169,20 +128,19 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.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.default.createElement(_styledComponents.ThemeProvider, {
-    theme: itemTheme
-  }, /*#__PURE__*/_react.default.createElement(_item.ItemGroup, {
+  return (0, _react2.jsx)(_item.ItemGroup, {
     role: "listbox",
     "aria-live": "polite",
     "aria-label": intl.formatMessage(_messages.typeAheadListMessages.typeAheadResultLabel),
-    "aria-relevant": "additions removals"
-  }, /*#__PURE__*/_react.default.createElement(_useResizeObserver.ResizeObserverProvider, null, /*#__PURE__*/_react.default.createElement(_DynamicHeightListItem.UpdateListItemHeightContext.Provider, {
+    "aria-relevant": "additions removals",
+    theme: _TypeAheadListItem.itemTheme
+  }, (0, _react2.jsx)(_useResizeObserver.ResizeObserverProvider, null, (0, _react2.jsx)(_DynamicHeightListItem.UpdateListItemHeightContext.Provider, {
     value: setListItemHeight
-  }, /*#__PURE__*/_react.default.createElement(_DynamicHeightListItem.ListItemActionsContext.Provider, {
+  }, (0, _react2.jsx)(_DynamicHeightListItem.ListItemActionsContext.Provider, {
     value: actions
-  }, /*#__PURE__*/_react.default.createElement(_DynamicHeightListItem.SelectedIndexContext.Provider, {
+  }, (0, _react2.jsx)(_DynamicHeightListItem.SelectedIndexContext.Provider, {
     value: selectedIndex
-  }, /*#__PURE__*/_react.default.createElement(_reactWindow.VariableSizeList, {
+  }, (0, _react2.jsx)(_reactWindow.VariableSizeList, {
     useIsScrolling: true,
     ref: listRef,
     itemData: items,
@@ -193,8 +151,9 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref) {
     itemSize: getListItemHeight,
     width: LIST_WIDTH,
     height: height,
-    overscanCount: 3
-  }, _DynamicHeightListItem.DynamicHeightListItem)))))));
+    overscanCount: 3,
+    css: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n                    // temporary solution before we migrated off dst/item\n                    & span[class^='ItemParts__Before'] {\n                      margin-right: 12px;\n                    }\n                  "])))
+  }, _DynamicHeightListItem.DynamicHeightListItem))))));
 });
 
 var TypeAheadList = (0, _reactIntlNext.injectIntl)(TypeAheadListComponent);

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

@@ -7,22 +7,26 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TypeAheadListItem = exports.ItemIcon = exports.ICON_WIDTH = exports.ICON_HEIGHT = void 0;
+exports.itemTheme = exports.itemIcon = exports.TypeAheadListItem = exports.ITEM_PADDING = exports.ICON_WIDTH = exports.ICON_HEIGHT = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireWildcard(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _colors = require("@atlaskit/theme/colors");
 
+var _components = require("@atlaskit/theme/components");
+
 var _constants = require("@atlaskit/theme/constants");
 
-var _item = _interopRequireDefault(require("@atlaskit/item"));
+var _item = _interopRequireWildcard(require("@atlaskit/item"));
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _fallback = _interopRequireDefault(require("../../quick-insert/assets/fallback"));
 
 var _styles = require("../../../ui/styles");
@@ -39,24 +43,58 @@ var ICON_HEIGHT = 40;
 exports.ICON_HEIGHT = ICON_HEIGHT;
 var ICON_WIDTH = 40;
 exports.ICON_WIDTH = ICON_WIDTH;
-
-var ItemIcon = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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, (0, _constants.borderRadius)(), ICON_WIDTH, ICON_HEIGHT);
-
-exports.ItemIcon = ItemIcon;
-
-var ItemBody = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n"])));
-
-var ItemText = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  white-space: initial;\n  .item-description {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(11.67), _colors.N200);
-
-var ItemAfter = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n"])));
-
+var ITEM_PADDING = 12;
+exports.ITEM_PADDING = ITEM_PADDING;
+var itemTheme = (0, _defineProperty2.default)({}, _item.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: _colors.text,
+    secondaryText: _colors.N200
+  },
+  selected: {
+    background: (0, _components.themed)({
+      light: _colors.N20,
+      dark: _colors.DN70
+    }),
+    text: (0, _components.themed)({
+      light: _colors.N800,
+      dark: _colors.DN600
+    }),
+    secondaryText: (0, _components.themed)({
+      light: _colors.N200,
+      dark: _colors.DN300
+    })
+  }
+});
+exports.itemTheme = itemTheme;
+var itemIcon = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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, (0, _constants.borderRadius)(), ICON_WIDTH, ICON_HEIGHT);
+exports.itemIcon = itemIcon;
+var itemBody = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n"])));
+var itemText = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  white-space: initial;\n  .item-description {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(11.67), _colors.N200);
+var itemAfter = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n"])));
 var hidden = {
   overflow: 'hidden'
 };
 
 var FallbackIcon = /*#__PURE__*/_react.default.memo(function (_ref) {
   var label = _ref.label;
-  return /*#__PURE__*/_react.default.createElement(_fallback.default, null);
+  return (0, _react2.jsx)(_fallback.default, null);
 });
 
 var noop = function noop() {};
@@ -92,7 +130,9 @@ var TypeAheadListItem = function TypeAheadListItem(_ref2) {
       title = item.title,
       customRenderItem = item.render;
   var elementIcon = (0, _react.useMemo)(function () {
-    return /*#__PURE__*/_react.default.createElement(ItemIcon, null, icon ? icon() : /*#__PURE__*/_react.default.createElement(FallbackIcon, {
+    return (0, _react2.jsx)("div", {
+      css: itemIcon
+    }, icon ? icon() : (0, _react2.jsx)(FallbackIcon, {
       label: title
     }));
   }, [icon, title]);
@@ -105,14 +145,14 @@ var TypeAheadListItem = function TypeAheadListItem(_ref2) {
     }
 
     var Comp = customRenderItem;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return (0, _react2.jsx)("div", {
       "aria-selected": isSelected,
       "aria-label": title,
       role: "option",
       tabIndex: 0,
       style: hidden,
       onMouseMove: onMouseMove
-    }, /*#__PURE__*/_react.default.createElement(Comp, {
+    }, (0, _react2.jsx)(Comp, {
       onClick: insertSelectedItem,
       isSelected: isSelected,
       onHover: noop
@@ -123,19 +163,28 @@ var TypeAheadListItem = function TypeAheadListItem(_ref2) {
     return customItem;
   }
 
-  return /*#__PURE__*/_react.default.createElement(_item.default, {
+  return (0, _react2.jsx)(_item.default, {
     onClick: insertSelectedItem,
     onMouseMove: onMouseMove,
     elemBefore: elementIcon,
     isSelected: isSelected,
     "aria-selected": isSelected,
     "aria-label": item.title,
-    role: "option"
-  }, /*#__PURE__*/_react.default.createElement(ItemBody, null, /*#__PURE__*/_react.default.createElement(ItemText, null, /*#__PURE__*/_react.default.createElement("div", {
+    role: "option",
+    theme: itemTheme
+  }, (0, _react2.jsx)("div", {
+    css: itemBody
+  }, (0, _react2.jsx)("div", {
+    css: itemText
+  }, (0, _react2.jsx)("div", {
     className: "item-title"
-  }, item.title), item.description && /*#__PURE__*/_react.default.createElement("div", {
+  }, item.title), item.description && (0, _react2.jsx)("div", {
     className: "item-description"
-  }, item.description)), /*#__PURE__*/_react.default.createElement(ItemAfter, null, item.keyshortcut && /*#__PURE__*/_react.default.createElement(_styles.Shortcut, null, item.keyshortcut))));
+  }, item.description)), (0, _react2.jsx)("div", {
+    css: itemAfter
+  }, item.keyshortcut && (0, _react2.jsx)("div", {
+    css: _styles.shortcutStyle
+  }, item.keyshortcut))));
 };
 
 exports.TypeAheadListItem = TypeAheadListItem;