@atlaskit/editor-core 163.0.0 → 164.0.2

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/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);
@@ -326,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/TypeAheadListItem.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.itemTheme = exports.TypeAheadListItem = exports.ItemIcon = exports.ITEM_PADDING = 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"));
 
@@ -15,6 +15,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _colors = require("@atlaskit/theme/colors");
 
 var _components = require("@atlaskit/theme/components");
@@ -25,8 +27,6 @@ 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");
@@ -83,24 +83,18 @@ var itemTheme = (0, _defineProperty2.default)({}, _item.itemThemeNamespace, {
   }
 });
 exports.itemTheme = itemTheme;
-
-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 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() {};
@@ -136,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]);
@@ -149,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
@@ -167,7 +163,7 @@ 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,
@@ -176,11 +172,19 @@ var TypeAheadListItem = function TypeAheadListItem(_ref2) {
     "aria-label": item.title,
     role: "option",
     theme: itemTheme
-  }, /*#__PURE__*/_react.default.createElement(ItemBody, null, /*#__PURE__*/_react.default.createElement(ItemText, null, /*#__PURE__*/_react.default.createElement("div", {
+  }, (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;

package/dist/cjs/plugins/type-ahead/ui/TypeAheadPopup.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 _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -35,7 +35,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 TypeAheadContent = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: 0 0 1px ", ", 0 4px 8px -2px ", ";\n  padding: ", "px 0;\n  width: 320px;\n  max-height: 380px; /* ~5.5 visibile items */\n  overflow-y: auto;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  position: relative;\n"])), _colors.N0, (0, _constants.borderRadius)(), _colors.N60A, _colors.N50A, (0, _constants.gridSize)() / 2);
+var typeAheadContent = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: 0 0 1px ", ", 0 4px 8px -2px ", ";\n  padding: ", "px 0;\n  width: 320px;\n  max-height: 380px; /* ~5.5 visibile items */\n  overflow-y: auto;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  position: relative;\n"])), _colors.N0, (0, _constants.borderRadius)(), _colors.N60A, _colors.N50A, (0, _constants.gridSize)() / 2);
 
 var Highlight = function Highlight(_ref) {
   var state = _ref.state,
@@ -115,7 +115,7 @@ var TypeAheadPopup = /*#__PURE__*/_react.default.memo(function (props) {
   // we need to send the event again
   // eslint-disable-next-line react-hooks/exhaustive-deps
   triggerHandler]);
-  return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
+  return (0, _react2.jsx)(_ui.Popup, {
     zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
     target: anchorElement,
     mountTo: popupsMountPoint,
@@ -124,13 +124,14 @@ var TypeAheadPopup = /*#__PURE__*/_react.default.memo(function (props) {
     fitHeight: 300,
     fitWidth: 340,
     offset: OFFSET
-  }, /*#__PURE__*/_react.default.createElement(TypeAheadContent, {
+  }, (0, _react2.jsx)("div", {
+    css: typeAheadContent,
     tabIndex: 0,
     className: _constants2.TYPE_AHEAD_POPUP_CONTENT_CLASS
-  }, /*#__PURE__*/_react.default.createElement(Highlight, {
+  }, (0, _react2.jsx)(Highlight, {
     state: editorView.state,
     triggerHandler: triggerHandler
-  }), /*#__PURE__*/_react.default.createElement(_TypeAheadList.TypeAheadList, {
+  }), (0, _react2.jsx)(_TypeAheadList.TypeAheadList, {
     items: items,
     selectedIndex: selectedIndex,
     onItemHover: setSelectedItem,

package/dist/cjs/plugins/undo-redo/ui/ToolbarUndoRedo/index.js

@@ -19,7 +19,9 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -108,37 +110,39 @@ var ToolbarUndoRedo = /*#__PURE__*/function (_PureComponent) {
       var labelRedo = formatMessage(_messages.messages.redo);
       var canUndo = historyState.canUndo,
           canRedo = historyState.canRedo;
-      return /*#__PURE__*/_react.default.createElement(_styles.ButtonGroup, {
-        width: isReducedSpacing ? 'small' : 'large'
-      }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+      return (0, _react2.jsx)("span", {
+        css: _styles.buttonGroupStyle
+      }, (0, _react2.jsx)(_ToolbarButton.default, {
         buttonId: _ToolbarButton.TOOLBAR_BUTTON.UNDO,
         spacing: isReducedSpacing ? 'none' : 'default',
         onClick: handleUndo,
         disabled: !canUndo || disabled,
         "aria-label": labelUndo,
-        title: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+        title: (0, _react2.jsx)(_keymaps.ToolTipContent, {
           description: labelUndo,
           keymap: _keymaps.undo
         }),
-        iconBefore: /*#__PURE__*/_react.default.createElement(_undo.default, {
+        iconBefore: (0, _react2.jsx)(_undo.default, {
           label: ""
         }),
         testId: "ak-editor-toolbar-button-undo"
-      }), /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+      }), (0, _react2.jsx)(_ToolbarButton.default, {
         spacing: isReducedSpacing ? 'none' : 'default',
         buttonId: _ToolbarButton.TOOLBAR_BUTTON.REDO,
         onClick: handleRedo,
         disabled: !canRedo || disabled,
-        title: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+        title: (0, _react2.jsx)(_keymaps.ToolTipContent, {
           description: labelRedo,
           keymap: _keymaps.redo
         }),
-        iconBefore: /*#__PURE__*/_react.default.createElement(_redo.default, {
+        iconBefore: (0, _react2.jsx)(_redo.default, {
           label: ""
         }),
         testId: "ak-editor-toolbar-button-redo",
         "aria-label": labelRedo
-      }), /*#__PURE__*/_react.default.createElement(_styles.Separator, null));
+      }), (0, _react2.jsx)("span", {
+        css: _styles.separatorStyles
+      }));
     }
   }]);
   return ToolbarUndoRedo;

package/dist/cjs/ui/Addon/ClickAreaBlock/index.js

@@ -25,7 +25,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _clickAreaHelper = require("../click-area-helper");
 
@@ -35,9 +35,7 @@ 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; } }
 
-var ClickWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  height: 100%;\n"])));
-
-ClickWrapper.displayName = 'ClickWrapper';
+var clickWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  height: 100%;\n"])));
 
 var ClickAreaBlock = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ClickAreaBlock, _React$Component);
@@ -69,7 +67,9 @@ var ClickAreaBlock = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(ClickAreaBlock, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(ClickWrapper, {
+      return (0, _react2.jsx)("div", {
+        "data-testid": "click-wrapper",
+        css: clickWrapper,
         onClick: this.handleClick
       }, this.props.children);
     }

package/dist/cjs/ui/Addon/ClickAreaInline/index.js

@@ -25,7 +25,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _commands = require("../../../commands");
 
@@ -35,9 +35,7 @@ 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; } }
 
-var ClickArea = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n"])));
-
-ClickArea.displayName = 'ClickArea';
+var clickArea = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n"])));
 
 var ClickAreaInline = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ClickAreaInline, _React$Component);
@@ -70,7 +68,8 @@ var ClickAreaInline = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(ClickAreaInline, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(ClickArea, {
+      return (0, _react2.jsx)("div", {
+        css: clickArea,
         onClick: this.handleClick
       });
     }

package/dist/cjs/ui/Addon/ClickAreaMobile/index.js

@@ -25,7 +25,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _clickAreaHelper = require("../click-area-helper");
 
@@ -40,11 +40,11 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
  * clicks/taps within or below the content (e.g. if the content
  * doesn't exceed the viewport, or whether it overflows it).
  */
-var ClickWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  ", "\n"])), function (props) {
-  return props.isExpanded && props.minHeight && "min-height: ".concat(props.minHeight, "px");
-});
-
-ClickWrapper.displayName = 'ClickWrapper';
+var clickWrapper = function clickWrapper(_ref) {
+  var isExpanded = _ref.isExpanded,
+      minHeight = _ref.minHeight;
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  ", ";\n"])), isExpanded && minHeight ? "min-height: ".concat(minHeight, "px") : '');
+};
 
 /**
  * Click Area is responsible for improving UX by ensuring the user
@@ -101,13 +101,14 @@ var ClickAreaMobile = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(ClickAreaMobile, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(ClickWrapper, {
+      return (0, _react2.jsx)("div", {
+        css: clickWrapper({
+          isExpanded: this.props.isExpanded,
+          minHeight: this.props.minHeight
+        }),
         className: "editor-click-wrapper",
-        minHeight: this.props.minHeight,
-        persistScrollGutter: this.props.persistScrollGutter,
         onClick: this.handleClick,
-        innerRef: this.clickElementRef,
-        isExpanded: this.props.isExpanded
+        ref: this.clickElementRef
       }, this.props.children);
     }
   }]);

package/dist/cjs/ui/Addon/Dropdown/index.js

@@ -23,6 +23,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _styles = require("./styles");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -72,7 +74,9 @@ var DropdownWrapper = /*#__PURE__*/function (_React$Component) {
         });
       });
 
-      return /*#__PURE__*/_react.default.createElement(_styles.Dropdown, null, children);
+      return (0, _react2.jsx)("div", {
+        css: _styles.dropdown
+      }, children);
     }
   }]);
   return DropdownWrapper;

package/dist/cjs/ui/Addon/Dropdown/styles.js

@@ -5,11 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Dropdown = void 0;
+exports.dropdown = 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");
 
@@ -17,6 +17,5 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _templateObject;
 
-var Dropdown = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border-radius: ", "px;\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  box-sizing: border-box;\n  padding: 4px 0;\n"])), (0, _constants.borderRadius)(), _colors.N60A, _colors.N60A);
-
-exports.Dropdown = Dropdown;
+var dropdown = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border-radius: ", "px;\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  box-sizing: border-box;\n  padding: 4px 0;\n"])), (0, _constants.borderRadius)(), _colors.N60A, _colors.N60A);
+exports.dropdown = dropdown;

package/dist/cjs/ui/Addon/DropdownItem/index.js

@@ -1,25 +1,25 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@emotion/react");
 
 var _styles = require("./styles");
 
+/** @jsx jsx */
 var DropdownItemWrapper = function DropdownItemWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_styles.DropdownItem, {
+  return (0, _react.jsx)("div", {
+    css: _styles.dropdownItem,
     onClick: function onClick() {
       return props.onClick && props.onClick({
         actionOnClick: props.actionOnClick,
         renderOnClick: props.renderOnClick
       });
     }
-  }, /*#__PURE__*/_react.default.createElement("span", null, props.icon), props.children);
+  }, (0, _react.jsx)("span", null, props.icon), props.children);
 };
 
 var _default = DropdownItemWrapper;