@atlaskit/editor-core 163.0.0 → 164.0.0

package/dist/cjs/ui/ConfigPanel/Fields/SelectItem.js

@@ -9,22 +9,17 @@ exports.formatOptionLabel = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@emotion/react");
 
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3;
 
-var _templateObject, _templateObject2;
-
-var ItemWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  small {\n    margin: 0;\n    display: block;\n    color: currentColor;\n  }\n"])));
-
-var IconWrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  line-height: 1;\n"])), function (_ref) {
-  var context = _ref.context;
-  return context === 'menu' && "\n    align-self: flex-start;\n    margin-top: 3px;\n  ";
-});
+var itemWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  small {\n    margin: 0;\n    display: block;\n    color: currentColor;\n  }\n"])));
+var iconWrapper = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 1;\n"])));
+var iconWrapperMenu = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  align-self: flex-start;\n  margin-top: 3px;\n"])));
 
 var getIconSize = function getIconSize(context, description) {
   if (context === 'value' || !description) {
@@ -34,22 +29,24 @@ var getIconSize = function getIconSize(context, description) {
   return 'small';
 };
 
-var formatOptionLabel = function formatOptionLabel(_ref2, _ref3) {
-  var label = _ref2.label,
-      icon = _ref2.icon,
-      description = _ref2.description;
-  var context = _ref3.context;
-  return /*#__PURE__*/_react.default.createElement(ItemWrapper, null, /*#__PURE__*/_react.default.createElement(IconWrapper, {
-    context: context
-  }, typeof icon === 'string' ? /*#__PURE__*/_react.default.createElement(_avatar.default, {
+var formatOptionLabel = function formatOptionLabel(_ref, _ref2) {
+  var label = _ref.label,
+      icon = _ref.icon,
+      description = _ref.description;
+  var context = _ref2.context;
+  return (0, _react.jsx)("div", {
+    css: itemWrapper
+  }, (0, _react.jsx)("span", {
+    css: [iconWrapper, context === 'menu' && iconWrapperMenu]
+  }, typeof icon === 'string' ? (0, _react.jsx)(_avatar.default, {
     src: icon,
     size: getIconSize(context, description),
     appearance: "square"
-  }) : icon), /*#__PURE__*/_react.default.createElement("div", {
+  }) : icon), (0, _react.jsx)("div", {
     style: {
       paddingLeft: icon ? (0, _constants.gridSize)() : 0
     }
-  }, /*#__PURE__*/_react.default.createElement("p", null, label, description && context !== 'value' && /*#__PURE__*/_react.default.createElement("small", null, description))));
+  }, (0, _react.jsx)("p", null, label, description && context !== 'value' && (0, _react.jsx)("small", null, description))));
 };
 
 exports.formatOptionLabel = formatOptionLabel;

package/dist/cjs/ui/ConfigPanel/Fields/common/RequiredIndicator.js

@@ -5,16 +5,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RequiredIndicator = void 0;
+exports.requiredIndicator = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _templateObject;
 
-var RequiredIndicator = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _colors.R500);
-
-exports.RequiredIndicator = RequiredIndicator;
+var requiredIndicator = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _colors.R500);
+exports.requiredIndicator = requiredIndicator;

package/dist/cjs/ui/ConfigPanel/LoadingState.js

@@ -9,18 +9,18 @@ exports.default = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@emotion/react");
 
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _templateObject;
 
-var SpinnerWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  margin-top: 64px;\n"])));
+var spinnerWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  margin-top: 64px;\n"])));
 
 var LoadingState = function LoadingState() {
-  return /*#__PURE__*/_react.default.createElement(SpinnerWrapper, null, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+  return (0, _react.jsx)("div", {
+    css: spinnerWrapper
+  }, (0, _react.jsx)(_spinner.default, {
     size: "small"
   }));
 };

package/dist/cjs/ui/ConfigPanel/NestedForms/RemovableField.js

@@ -13,9 +13,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntlNext = require("react-intl-next");
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactIntlNext = require("react-intl-next");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -27,17 +27,15 @@ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _messages = require("../messages");
 
-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 RemovableFieldWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  margin-bottom: ", "px;\n"])), function (props) {
-  return props.hasMarginBottom ? (0, _constants.gridSize)() * 2 : 0;
-});
-
-var RemoveButtonWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), colors.N80, colors.R300);
+var removableFieldWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  margin-bottom: 0;\n"])));
+var wrapperWithMarginBottom = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", "px;\n"])), (0, _constants.gridSize)() * 2);
+var removeButtonWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), colors.N80, colors.R300);
 
 var RemovableField = function RemovableField(_ref) {
   var _children$props$field;
@@ -54,16 +52,17 @@ var RemovableField = function RemovableField(_ref) {
   }, [name, onClickRemove]);
 
   var hasMarginBottom = ((_children$props$field = children.props.field) === null || _children$props$field === void 0 ? void 0 : _children$props$field.type) !== 'expand';
-  return /*#__PURE__*/_react.default.createElement(RemovableFieldWrapper, {
-    hasMarginBottom: hasMarginBottom,
+  return (0, _react2.jsx)("div", {
+    css: [removableFieldWrapper, hasMarginBottom && wrapperWithMarginBottom],
     className: className
-  }, children, canRemoveField && /*#__PURE__*/_react.default.createElement(RemoveButtonWrapper, {
-    testId: "remove-field-".concat(name),
+  }, children, canRemoveField && (0, _react2.jsx)("div", {
+    css: removeButtonWrapper,
+    "data-testid": "remove-field-".concat(name),
     onClick: onClickCallback
-  }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  }, (0, _react2.jsx)(_tooltip.default, {
     content: intl.formatMessage(_messages.messages.removeField),
     position: "left"
-  }, /*#__PURE__*/_react.default.createElement(_crossCircle.default, {
+  }, (0, _react2.jsx)(_crossCircle.default, {
     size: "small",
     label: intl.formatMessage(_messages.messages.removeField)
   }))));

package/dist/cjs/ui/ContentStyles/index.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.createEditorContentStyle = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -93,22 +93,28 @@ var contentStyles = function contentStyles(props) {
   }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, _styles17.placeholderTextStyles, _styles5.placeholderStyles, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.codeBlockSyntaxHighlighting ? (0, _styles7.highlightingCodeBlockStyles)(props) : (0, _styles7.codeBlockStyles)(props), (0, _styles6.blocktypeStyles)(props), (0, _styles16.textFormattingStyles)(props), _styles.textColorStyles, _styles8.listsStyles, (0, _styles9.ruleStyles)(props), _styles10.mediaStyles, _styles11.layoutStyles, _styles3.telepointerStyle, _styles4.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _styles12.panelStyles)(props), _styles13.fakeCursorStyles, _styles14.mentionsStyles, (_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.nextEmojiNodeView ? _styles15.emojiStylesNext : _styles15.emojiStyles, _styles.tasksAndDecisionsStyles, _styles18.gridStyles, _styles19.linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _styles20.extensionStyles, (0, _styles21.expandStyles)(props), _styles22.findReplaceStyles, _styles23.taskDecisionStyles, _styles24.statusStyles, (0, _styles.annotationSharedStyles)(props), _styles25.smartCardStyles, _styles.smartCardSharedStyles, _styles26.dateStyles, _styled.embedCardStyles, _styles2.unsupportedStyles, _style.ClassNames.FLOATING_TOOLBAR_COMPONENT);
 };
 
-var _default = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var featureFlags = (0, _featureFlagsContext.useFeatureFlags)();
-  var className = props.className,
-      children = props.children;
-  var theme = (0, _react2.useTheme)();
-  var memoizedStyle = (0, _react.useMemo)(function () {
-    return contentStyles({
-      theme: theme,
-      featureFlags: featureFlags
-    });
-  }, [theme, featureFlags]);
-  return (0, _react2.jsx)("div", {
-    className: className,
-    ref: ref,
-    css: memoizedStyle
-  }, children);
-});
+var createEditorContentStyle = function createEditorContentStyle(styles) {
+  return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+    var featureFlags = (0, _featureFlagsContext.useFeatureFlags)();
+    var className = props.className,
+        children = props.children;
+    var theme = (0, _react2.useTheme)();
+    var memoizedStyle = (0, _react.useMemo)(function () {
+      return contentStyles({
+        theme: theme,
+        featureFlags: featureFlags
+      });
+    }, [theme, featureFlags]);
+    return (0, _react2.jsx)("div", {
+      className: className,
+      ref: ref,
+      css: [memoizedStyle, styles]
+    }, children);
+  });
+};
+
+exports.createEditorContentStyle = createEditorContentStyle;
+
+var _default = createEditorContentStyle();
 
 exports.default = _default;

package/dist/cjs/ui/ContextPanel/index.js

@@ -2,12 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.shouldPanelBePositionedOverEditor = exports.default = exports.SwappableContentArea = exports.Panel = exports.Content = void 0;
+exports.shouldPanelBePositionedOverEditor = exports.panel = exports.default = exports.content = exports.SwappableContentArea = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -29,9 +27,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Transition = _interopRequireDefault(require("react-transition-group/Transition"));
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _Transition = _interopRequireDefault(require("react-transition-group/Transition"));
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -49,11 +47,7 @@ var _WithEditorActions = _interopRequireDefault(require("../WithEditorActions"))
 
 var _document = require("../../utils/document");
 
-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 _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -68,7 +62,7 @@ var EDITOR_WIDTH = _editorSharedStyles.akEditorDefaultLayoutWidth + _editorShare
 var WIDE_EDITOR_WIDTH = _editorSharedStyles.akEditorWideLayoutWidth + _editorSharedStyles.akEditorBreakoutPadding;
 var FULLWIDTH_MODE = 'full-width';
 var WIDE_MODE = 'wide';
-var absolutePanelStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 0;\n  height: calc(100% - ", ");\n"])), _editorSharedStyles.ATLASSIAN_NAVIGATION_HEIGHT);
+var absolutePanelStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 0;\n  height: calc(100% - ", ");\n"])), _editorSharedStyles.ATLASSIAN_NAVIGATION_HEIGHT);
 
 var shouldPanelBePositionedOverEditor = function shouldPanelBePositionedOverEditor(editorWidth, panelWidth) {
   var lineLength = editorWidth.lineLength,
@@ -80,37 +74,13 @@ var shouldPanelBePositionedOverEditor = function shouldPanelBePositionedOverEdit
   var hasSpaceForWideBreakoutsAndPanel = !contentBreakoutModes.includes(FULLWIDTH_MODE) && contentBreakoutModes.includes(WIDE_MODE) && containerWidth >= panelWidth * 2 + WIDE_EDITOR_WIDTH;
   return editorNotFullWidth && (hasSpaceForPanel || hasSpaceForWideBreakoutsAndPanel);
 };
-/**
- * Only use absolute position for panel when screen size is wide enough
- * to accomodate breakout content and editor is not in wide mode.
- */
-
 
 exports.shouldPanelBePositionedOverEditor = shouldPanelBePositionedOverEditor;
-
-var panelSlideStyles = function panelSlideStyles(_ref) {
-  var positionPanelOverEditor = _ref.positionPanelOverEditor;
-
-  if (positionPanelOverEditor) {
-    return absolutePanelStyles;
-  }
-
-  return;
-};
-
-var Panel = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  height: 100%;\n  transition: width ", "ms ", ";\n  overflow: hidden;\n  box-shadow: inset 2px 0 0 0 ", ";\n\n  ", ";\n"])), function (p) {
-  return p.visible ? p.panelWidth : 0;
-}, ANIM_SPEED_MS, _editorSharedStyles.akEditorSwoopCubicBezier, _colors.N30, function (props) {
-  return panelSlideStyles(props);
-});
-
-exports.Panel = Panel;
-
-var Content = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  transition: width 600ms ", ";\n  box-sizing: border-box;\n  padding: 16px 16px 0px;\n  width: ", "px;\n  height: 100%;\n  overflow-y: auto;\n"])), _editorSharedStyles.akEditorSwoopCubicBezier, function (p) {
-  return p.visible ? p.panelWidth : 0;
-});
-
-exports.Content = Content;
+var panelHidden = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 0;\n"])));
+var panel = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  height: 100%;\n  transition: width ", "ms ", ";\n  overflow: hidden;\n  box-shadow: inset 2px 0 0 0 ", ";\n"])), _editorSharedStyles.akEditorContextPanelWidth, ANIM_SPEED_MS, _editorSharedStyles.akEditorSwoopCubicBezier, _colors.N30);
+exports.panel = panel;
+var content = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  transition: width 600ms ", ";\n  box-sizing: border-box;\n  padding: 16px 16px 0px;\n  width: ", "px;\n  height: 100%;\n  overflow-y: auto;\n"])), _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorContextPanelWidth);
+exports.content = content;
 
 var SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(SwappableContentArea, _React$PureComponent);
@@ -139,7 +109,7 @@ var SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
         return;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_Transition.default, {
+      return (0, _react2.jsx)(_Transition.default, {
         timeout: _this.state.mounted ? ANIM_SPEED_MS : 0,
         in: !!pluginContent,
         mountOnEnter: true,
@@ -156,7 +126,7 @@ var SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
         return;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_Transition.default, {
+      return (0, _react2.jsx)(_Transition.default, {
         timeout: _this.state.mounted ? ANIM_SPEED_MS : 0,
         in: isVisible,
         mountOnEnter: true,
@@ -190,23 +160,26 @@ var SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
       var width = _editorSharedStyles.akEditorContextPanelWidth;
       var userVisible = !!this.props.visible;
       var visible = userVisible || !!this.state.currentPluginContent;
-      return /*#__PURE__*/_react.default.createElement(_context.ContextPanelConsumer, null, function (_ref2) {
-        var broadcastWidth = _ref2.broadcastWidth,
-            broadcastPosition = _ref2.broadcastPosition,
-            positionedOverEditor = _ref2.positionedOverEditor;
+      return (0, _react2.jsx)(_context.ContextPanelConsumer, null, function (_ref) {
+        var broadcastWidth = _ref.broadcastWidth,
+            broadcastPosition = _ref.broadcastPosition,
+            positionedOverEditor = _ref.positionedOverEditor;
         var newPosition = editorWidth ? shouldPanelBePositionedOverEditor(editorWidth, width) : false;
         broadcastWidth(visible ? width : 0);
         (newPosition && visible) !== positionedOverEditor && broadcastPosition(newPosition && visible);
-        return /*#__PURE__*/_react.default.createElement(Panel, {
-          panelWidth: width,
-          visible: visible,
-          positionPanelOverEditor: newPosition,
+        return (0, _react2.jsx)("div", {
+          css: [panel, !visible && panelHidden,
+          /**
+           * Only use absolute position for panel when screen size is wide enough
+           * to accommodate breakout content and editor is not in wide mode.
+           */
+          newPosition && absolutePanelStyles],
           "data-testid": "context-panel-panel",
           "aria-labelledby": "context-panel-title",
           role: "dialog"
-        }, /*#__PURE__*/_react.default.createElement(Content, {
-          panelWidth: width,
-          visible: visible
+        }, (0, _react2.jsx)("div", {
+          "data-testid": "context-panel-content",
+          css: [content, !visible && panelHidden]
         }, _this2.showPluginContent() || _this2.showProvidedContent(userVisible)));
       });
     }
@@ -242,39 +215,39 @@ var ContextPanel = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this3 = this;
 
-      return /*#__PURE__*/_react.default.createElement(_WithEditorActions.default, {
+      return (0, _react2.jsx)(_WithEditorActions.default, {
         render: function render(actions) {
           var eventDispatcher = actions._privateGetEventDispatcher();
 
           var editorView = actions._privateGetEditorView();
 
           if (!eventDispatcher) {
-            return /*#__PURE__*/_react.default.createElement(SwappableContentArea, (0, _extends2.default)({
+            return (0, _react2.jsx)(SwappableContentArea, (0, _extends2.default)({
               editorView: editorView
             }, _this3.props));
           }
 
-          return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
+          return (0, _react2.jsx)(_WithPluginState.default, {
             eventDispatcher: eventDispatcher,
             plugins: {
               contextPanel: _contextPanel.pluginKey,
               widthState: _width.pluginKey
             },
-            render: function render(_ref3) {
-              var contextPanel = _ref3.contextPanel,
-                  _ref3$widthState = _ref3.widthState,
-                  widthState = _ref3$widthState === void 0 ? {
+            render: function render(_ref2) {
+              var contextPanel = _ref2.contextPanel,
+                  _ref2$widthState = _ref2.widthState,
+                  widthState = _ref2$widthState === void 0 ? {
                 width: 0,
                 containerWidth: 0,
                 lineLength: _editorSharedStyles.akEditorDefaultLayoutWidth
-              } : _ref3$widthState;
+              } : _ref2$widthState;
               var firstContent = contextPanel && contextPanel.contents.find(Boolean);
 
               var editorWidth = _objectSpread(_objectSpread({}, widthState), {}, {
                 contentBreakoutModes: editorView ? (0, _document.getChildBreakoutModes)(editorView.state.doc, editorView.state.schema) : []
               });
 
-              return /*#__PURE__*/_react.default.createElement(SwappableContentArea, (0, _extends2.default)({}, _this3.props, {
+              return (0, _react2.jsx)(SwappableContentArea, (0, _extends2.default)({}, _this3.props, {
                 editorView: editorView,
                 pluginContent: firstContent,
                 editorWidth: editorWidth

package/dist/cjs/ui/DropdownMenu/index.js

@@ -25,9 +25,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _droplist = _interopRequireDefault(require("@atlaskit/droplist"));
 
@@ -51,20 +51,14 @@ 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 Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* tooltip in ToolbarButton is display:block */\n  & > div > div {\n    display: flex;\n  }\n"])));
-
+var wrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* tooltip in ToolbarButton is display:block */\n  & > div > div {\n    display: flex;\n  }\n"])));
 var DropListWithOutsideListeners = (0, _withOuterListeners.default)(_droplist.default);
 /**
  * Hack for item to imitate old dropdown-menu selected styles
  */
 
-var ItemWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n"])), function (props) {
-  return props.isSelected ? '&& > span, && > span:hover { background: #6c798f; color: #fff; }' : '';
-});
-
-var ItemContentWrapper = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n"])), function (props) {
-  return props.hasElemBefore ? 'margin-left: 8px;' : '';
-});
+var itemWrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  && > span,\n  && > span:hover {\n    background: #6c798f;\n    color: #fff;\n  }\n"])));
+var itemContentWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 8px;\n"])));
 /**
  * Wrapper around @atlaskit/droplist which uses Popup and Portal to render
  * dropdown-menu outside of "overflow: hidden" containers when needed.
@@ -72,7 +66,6 @@ var ItemContentWrapper = _styledComponents.default.span(_templateObject3 || (_te
  * Also it controls popper's placement.
  */
 
-
 var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(DropdownMenuWrapper, _PureComponent);
 
@@ -126,15 +119,15 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
       // If neither are present, don't wrap in an Item.
 
       if (!item.onClick && !item.value && !item.value.name) {
-        return /*#__PURE__*/_react.default.createElement("span", {
+        return (0, _react2.jsx)("span", {
           key: String(item.content)
         }, item.content);
       }
 
-      var dropListItem = /*#__PURE__*/_react.default.createElement(ItemWrapper, {
-        key: item.key || item.content,
-        isSelected: item.isActive
-      }, /*#__PURE__*/_react.default.createElement(_item.default, {
+      var dropListItem = (0, _react2.jsx)("div", {
+        css: item.isActive ? itemWrapper : '',
+        key: item.key || item.content
+      }, (0, _react2.jsx)(_item.default, {
         role: shouldUseDefaultRole ? 'button' : 'menuitem',
         elemBefore: item.elemBefore,
         elemAfter: item.elemAfter,
@@ -157,12 +150,12 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         className: item.className,
         "aria-label": item.label || String(item.content),
         "aria-pressed": shouldUseDefaultRole ? item.isActive : undefined
-      }, /*#__PURE__*/_react.default.createElement(ItemContentWrapper, {
-        hasElemBefore: !!item.elemBefore
+      }, (0, _react2.jsx)("span", {
+        css: !!item.elemBefore ? itemContentWrapper : ''
       }, item.content)));
 
       if (item.tooltipDescription) {
-        return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+        return (0, _react2.jsx)(_tooltip.default, {
           key: item.key || item.content,
           content: item.tooltipDescription,
           position: item.tooltipPosition
@@ -190,7 +183,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
           isOpen = _this$props2.isOpen,
           zIndex = _this$props2.zIndex,
           shouldUseDefaultRole = _this$props2.shouldUseDefaultRole;
-      return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
+      return (0, _react2.jsx)(_ui.Popup, {
         target: isOpen ? target : undefined,
         mountTo: mountTo,
         boundariesElement: boundariesElement,
@@ -200,7 +193,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         fitWidth: fitWidth,
         zIndex: zIndex || _editorSharedStyles.akEditorFloatingPanelZIndex,
         offset: offset
-      }, /*#__PURE__*/_react.default.createElement(DropListWithOutsideListeners, {
+      }, (0, _react2.jsx)(DropListWithOutsideListeners, {
         isOpen: true,
         appearance: "tall",
         position: popupPlacement.join(' '),
@@ -209,13 +202,13 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         isTriggerNotTabbable: true,
         handleClickOutside: this.handleClose,
         handleEscapeKeydown: this.handleClose
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _react2.jsx)("div", {
         style: {
           height: 0,
           minWidth: fitWidth || 0
         }
       }), items.map(function (group, index) {
-        return /*#__PURE__*/_react.default.createElement(_item.ItemGroup, {
+        return (0, _react2.jsx)(_item.ItemGroup, {
           key: index,
           role: shouldUseDefaultRole ? 'group' : 'menu'
         }, group.items.map(function (item) {
@@ -229,7 +222,9 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
       var _this$props3 = this.props,
           children = _this$props3.children,
           isOpen = _this$props3.isOpen;
-      return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _react2.jsx)("div", {
+        css: wrapper
+      }, (0, _react2.jsx)("div", {
         ref: this.handleRef
       }, children), isOpen ? this.renderDropdownMenu() : null);
     }