@atlaskit/editor-core 162.0.0 → 164.0.0

package/dist/es2019/ui/Appearance/Comment/Comment.js

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/custom-theme-button';
 import { borderRadius } from '@atlaskit/theme/constants';
@@ -8,11 +10,10 @@ import { N40 } from '@atlaskit/theme/colors';
 import Toolbar from '../../Toolbar';
 import PluginSlot from '../../PluginSlot';
 import WithPluginState from '../../WithPluginState';
-import ContentStyles from '../../ContentStyles';
 import { pluginKey as maxContentSizePluginKey } from '../../../plugins/max-content-size';
 import { stateKey as mediaPluginKey } from '../../../plugins/media/pm-plugins/plugin-key';
 import { ClickAreaBlock } from '../../Addon';
-import { deprecatedTableCommentEditorStyles } from '../../../plugins/table/ui/common-styles.css';
+import { tableCommentEditorStyles } from '../../../plugins/table/ui/common-styles';
 import WithFlash from '../../WithFlash';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
@@ -21,10 +22,11 @@ import { GRID_GUTTER } from '../../../plugins/grid';
 import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';
 import messages from '../../../messages';
-import { TableControlsPadding, MainToolbar, MainToolbarCustomComponentsSlot } from './Toolbar';
+import { TableControlsPadding, MainToolbar, mainToolbarCustomComponentsSlotStyle } from './Toolbar';
+import { createEditorContentStyle } from '../../ContentStyles';
 const CommentEditorMargin = 14;
 const CommentEditorSmallerMargin = 8;
-const CommentEditor = styled.div`
+const commentEditorStyle = css`
   display: flex;
   flex-direction: column;
 
@@ -45,13 +47,11 @@ const CommentEditor = styled.div`
   max-width: inherit;
   word-wrap: break-word;
 `;
-CommentEditor.displayName = 'CommentEditor';
-const ContentArea = styled(ContentStyles)`
+const ContentArea = createEditorContentStyle(css`
   flex-grow: 1;
   overflow-x: hidden;
   overflow-y: auto;
   line-height: 24px;
-  ${props => props.maxHeight ? 'max-height: ' + props.maxHeight + 'px;' : ''};
 
   /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/
   /** Hack for tables controlls. Otherwise marging collapse and controlls are misplaced. **/
@@ -67,17 +67,16 @@ const ContentArea = styled(ContentStyles)`
 
   padding: ${TableControlsPadding}px;
 
-  ${deprecatedTableCommentEditorStyles};
-`;
+  ${tableCommentEditorStyles};
+`);
 ContentArea.displayName = 'ContentArea';
-const SecondaryToolbar = styled.div`
+const secondaryToolbarStyle = css`
   box-sizing: border-box;
   justify-content: flex-end;
   align-items: center;
   display: flex;
   padding: 12px 1px;
 `;
-SecondaryToolbar.displayName = 'SecondaryToolbar';
 
 class Editor extends React.Component {
   constructor(...args) {
@@ -127,14 +126,14 @@ class Editor extends React.Component {
       } = this.props;
       const maxContentSizeReached = Boolean(maxContentSize === null || maxContentSize === void 0 ? void 0 : maxContentSize.maxContentSizeReached);
       const showSecondaryToolbar = !!onSave || !!onCancel || !!customSecondaryToolbarComponents;
-      return /*#__PURE__*/React.createElement(WithFlash, {
+      return jsx(WithFlash, {
         animate: maxContentSizeReached
-      }, /*#__PURE__*/React.createElement(CommentEditor, {
-        maxHeight: maxHeight,
+      }, jsx("div", {
+        css: commentEditorStyle,
         className: "akEditor"
-      }, /*#__PURE__*/React.createElement(MainToolbar, {
+      }, jsx(MainToolbar, {
         useStickyToolbar: useStickyToolbar
-      }, /*#__PURE__*/React.createElement(Toolbar, {
+      }, jsx(Toolbar, {
         editorView: editorView,
         editorActions: editorActions,
         eventDispatcher: eventDispatcher,
@@ -147,18 +146,22 @@ class Editor extends React.Component {
         disabled: !!disabled,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
         containerElement: this.containerElement
-      }), /*#__PURE__*/React.createElement(MainToolbarCustomComponentsSlot, null, customPrimaryToolbarComponents)), /*#__PURE__*/React.createElement(ClickAreaBlock, {
+      }), jsx("div", {
+        css: mainToolbarCustomComponentsSlotStyle
+      }, customPrimaryToolbarComponents)), jsx(ClickAreaBlock, {
         editorView: editorView
-      }, /*#__PURE__*/React.createElement(WidthConsumer, null, ({
+      }, jsx(WidthConsumer, null, ({
         width
       }) => {
-        return /*#__PURE__*/React.createElement(ContentArea, {
-          innerRef: ref => this.containerElement = ref,
+        return jsx(ContentArea, {
+          ref: ref => this.containerElement = ref,
+          css: maxHeight ? css`
+                            max-height: ${maxHeight}px;
+                          ` : null,
           className: classnames('ak-editor-content-area', {
             'less-margin': width < akEditorMobileBreakoutPoint
-          }),
-          maxHeight: maxHeight
-        }, customContentComponents, /*#__PURE__*/React.createElement(PluginSlot, {
+          })
+        }, customContentComponents, jsx(PluginSlot, {
           editorView: editorView,
           editorActions: editorActions,
           eventDispatcher: eventDispatcher,
@@ -172,20 +175,21 @@ class Editor extends React.Component {
           containerElement: this.containerElement,
           disabled: !!disabled
         }), editorDOMElement);
-      })), /*#__PURE__*/React.createElement(WidthEmitter, {
+      })), jsx(WidthEmitter, {
         editorView: editorView
-      })), showSecondaryToolbar && /*#__PURE__*/React.createElement(SecondaryToolbar, {
+      })), showSecondaryToolbar && jsx("div", {
+        css: secondaryToolbarStyle,
         "data-testid": "ak-editor-secondary-toolbar"
-      }, /*#__PURE__*/React.createElement(ButtonGroup, null, !!onSave && /*#__PURE__*/React.createElement(Button, {
+      }, jsx(ButtonGroup, null, !!onSave && jsx(Button, {
         appearance: "primary",
         onClick: this.handleSave,
         testId: "comment-save-button",
         isDisabled: disabled || mediaState && !mediaState.allUploadsFinished
-      }, intl.formatMessage(messages.saveButton)), !!onCancel && /*#__PURE__*/React.createElement(Button, {
+      }, intl.formatMessage(messages.saveButton)), !!onCancel && jsx(Button, {
         appearance: "subtle",
         onClick: this.handleCancel,
         isDisabled: disabled
-      }, intl.formatMessage(messages.cancelButton))), /*#__PURE__*/React.createElement("span", {
+      }, intl.formatMessage(messages.cancelButton))), jsx("span", {
         style: {
           flexGrow: 1
         }
@@ -194,7 +198,7 @@ class Editor extends React.Component {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(WithPluginState, {
+    return jsx(WithPluginState, {
       plugins: {
         maxContentSize: maxContentSizePluginKey,
         mediaState: mediaPluginKey

package/dist/es2019/ui/Appearance/Comment/Toolbar.js

@@ -1,10 +1,11 @@
+/** @jsx jsx */
 import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N30 } from '@atlaskit/theme/colors';
 import { akEditorToolbarKeylineHeight, akEditorGridLineZIndex, akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 export const TableControlsPadding = 20;
-export const MainToolbarWrapper = styled.div`
+const mainToolbarWrapperStyle = css`
   position: relative;
   align-items: center;
   padding: ${gridSize()}px ${gridSize()}px 0;
@@ -22,11 +23,11 @@ export const MainToolbarWrapper = styled.div`
     padding-left: 0;
   }
 `;
-MainToolbarWrapper.displayName = 'MainToolbar';
-const StickyToolbarWrapper = styled(MainToolbarWrapper)`
+const stickyToolbarWrapperStyle = css`
+  /* stylelint-disable declaration-block-no-duplicate-properties */
   position: relative;
   position: sticky;
-  top: ${props => `${props.top}px`};
+  /* stylelint-enable declaration-block-no-duplicate-properties */
   padding-bottom: ${gridSize()}px;
   z-index: ${akEditorGridLineZIndex + akEditorMenuZIndex};
   transition: box-shadow ease-in-out 0.2s;
@@ -34,7 +35,6 @@ const StickyToolbarWrapper = styled(MainToolbarWrapper)`
     box-shadow: 0 ${akEditorToolbarKeylineHeight}px 0 0 ${N30};
   }
 `;
-StickyToolbarWrapper.displayName = 'MainToolbarSticky';
 
 const StickyToolbar = props => {
   const [top, setTop] = useState(0);
@@ -43,14 +43,17 @@ const StickyToolbar = props => {
 
     setTop(((_props$externalToolba = props.externalToolbarRef) === null || _props$externalToolba === void 0 ? void 0 : (_props$externalToolba2 = _props$externalToolba.current) === null || _props$externalToolba2 === void 0 ? void 0 : _props$externalToolba2.clientHeight) || 0);
   }, [setTop, props.externalToolbarRef]);
-  return /*#__PURE__*/React.createElement(StickyToolbarWrapper, {
+  return jsx("div", {
+    css: [mainToolbarWrapperStyle, stickyToolbarWrapperStyle, css`
+          top: ${top};
+        `],
     "data-testid": "ak-editor-main-toolbar",
-    className: 'show-keyline',
-    top: top
+    className: 'show-keyline'
   }, props.children);
 };
 
-const FixedToolbar = props => /*#__PURE__*/React.createElement(MainToolbarWrapper, {
+const FixedToolbar = props => jsx("div", {
+  css: mainToolbarWrapperStyle,
   "data-testid": "ak-editor-main-toolbar"
 }, props.children);
 
@@ -59,14 +62,14 @@ export const MainToolbar = ({
   children
 }) => {
   if (!!useStickyToolbar) {
-    return /*#__PURE__*/React.createElement(StickyToolbar, {
+    return jsx(StickyToolbar, {
       externalToolbarRef: typeof useStickyToolbar === 'boolean' ? undefined : useStickyToolbar
     }, children);
   }
 
-  return /*#__PURE__*/React.createElement(FixedToolbar, null, children);
+  return jsx(FixedToolbar, null, children);
 };
-export const MainToolbarCustomComponentsSlot = styled.div`
+export const mainToolbarCustomComponentsSlotStyle = css`
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -76,5 +79,4 @@ export const MainToolbarCustomComponentsSlot = styled.div`
     display: flex;
     flex-shrink: 0;
   }
-`;
-MainToolbarCustomComponentsSlot.displayName = 'MainToolbar';
+`;

package/dist/es2019/ui/Appearance/FullPage/FullPage.js

@@ -1,8 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
 import { akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
-import { FullPageEditorWrapper } from './StyledComponents';
+import { fullPageEditorWrapper } from './StyledComponents';
 import { ContextPanelWidthProvider } from '../../ContextPanel/context';
 import { FullPageContentArea } from './FullPageContentArea';
 import { FullPageToolbar } from './FullPageToolbar';
@@ -79,9 +82,10 @@ export class FullPageEditor extends React.Component {
       showKeyline
     } = this.state;
     const featureFlags = (_props$editorView = props.editorView) !== null && _props$editorView !== void 0 && _props$editorView.state ? getFeatureFlags(props.editorView.state) : undefined;
-    return /*#__PURE__*/React.createElement(ContextPanelWidthProvider, null, /*#__PURE__*/React.createElement(FullPageEditorWrapper, {
+    return jsx(ContextPanelWidthProvider, null, jsx("div", {
+      css: fullPageEditorWrapper,
       className: "akEditor"
-    }, /*#__PURE__*/React.createElement(FullPageToolbar, {
+    }, jsx(FullPageToolbar, {
       appearance: props.appearance,
       beforeIcon: props.primaryToolbarIconBefore,
       collabEdit: props.collabEdit,
@@ -101,8 +105,7 @@ export class FullPageEditor extends React.Component {
       providerFactory: props.providerFactory,
       showKeyline: showKeyline,
       featureFlags: featureFlags
-    }), /*#__PURE__*/React.createElement(FullPageContentArea, {
-      allowAnnotation: props.allowAnnotation,
+    }), jsx(FullPageContentArea, {
       appearance: props.appearance,
       contentArea: this.contentArea,
       contentAreaRef: this.contentAreaRef,

package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx, useTheme } from '@emotion/react';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { ContextPanelConsumer } from '../../ContextPanel/context';
 import React from 'react';
@@ -6,32 +8,37 @@ import { ClickAreaBlock } from '../../Addon';
 import ContextPanel from '../../ContextPanel';
 import PluginSlot from '../../PluginSlot';
 import WidthEmitter from '../../WidthEmitter';
-import { ContentArea, EditorContentArea, SidebarArea, ScrollContainer, EditorContentGutter } from './StyledComponents';
+import { contentArea, editorContentAreaStyle, sidebarArea, ScrollContainer, editorContentGutterStyle, positionedOverEditorStyle } from './StyledComponents';
 import messages from './messages';
 export const CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
 const Content = /*#__PURE__*/React.memo(props => {
-  return /*#__PURE__*/React.createElement(WidthConsumer, null, ({
+  const theme = useTheme();
+  const fullWidthMode = props.appearance === 'full-width';
+  return jsx(WidthConsumer, null, ({
     width
-  }) => /*#__PURE__*/React.createElement(ContextPanelConsumer, null, ({
+  }) => jsx(ContextPanelConsumer, null, ({
     positionedOverEditor
-  }) => /*#__PURE__*/React.createElement(ContentArea, {
-    "data-testid": CONTENT_AREA_TEST_ID,
-    positionedOverEditor: positionedOverEditor
-  }, /*#__PURE__*/React.createElement(ScrollContainer, {
-    innerRef: props.scrollContainerRef,
-    allowAnnotation: props.allowAnnotation,
+  }) => jsx("div", {
+    css: [contentArea, positionedOverEditor && positionedOverEditorStyle],
+    "data-testid": CONTENT_AREA_TEST_ID
+  }, jsx(ScrollContainer, {
+    ref: props.scrollContainerRef,
     className: "fabric-editor-popup-scroll-parent"
-  }, /*#__PURE__*/React.createElement(ClickAreaBlock, {
+  }, jsx(ClickAreaBlock, {
     editorView: props.editorView
-  }, /*#__PURE__*/React.createElement(EditorContentArea, {
+  }, jsx("div", {
+    css: editorContentAreaStyle({
+      fullWidthMode,
+      layoutMaxWidth: theme.layoutMaxWidth,
+      containerWidth: width
+    }),
     role: "region",
     "aria-label": props.intl.formatMessage(messages.editableContentLabel),
-    fullWidthMode: props.appearance === 'full-width',
-    innerRef: props.contentAreaRef,
-    containerWidth: width
-  }, /*#__PURE__*/React.createElement(EditorContentGutter, {
-    className: ['ak-editor-content-area', props.appearance === 'full-width' ? 'fabric-editor--full-width-mode' : ''].join(' ')
-  }, props.customContentComponents, /*#__PURE__*/React.createElement(PluginSlot, {
+    ref: props.contentAreaRef
+  }, jsx("div", {
+    css: editorContentGutterStyle,
+    className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' ')
+  }, props.customContentComponents, jsx(PluginSlot, {
     editorView: props.editorView,
     editorActions: props.editorActions,
     eventDispatcher: props.eventDispatcher,
@@ -45,9 +52,11 @@ const Content = /*#__PURE__*/React.memo(props => {
     disabled: !!props.disabled,
     containerElement: props.scrollContainer,
     dispatchAnalyticsEvent: props.dispatchAnalyticsEvent
-  }), props.editorDOMElement)))), /*#__PURE__*/React.createElement(SidebarArea, null, props.contextPanel || /*#__PURE__*/React.createElement(ContextPanel, {
+  }), props.editorDOMElement)))), jsx("div", {
+    css: sidebarArea
+  }, props.contextPanel || jsx(ContextPanel, {
     visible: false
-  })), /*#__PURE__*/React.createElement(WidthEmitter, {
+  })), jsx(WidthEmitter, {
     editorView: props.editorView
   }))));
 });

package/dist/es2019/ui/Appearance/FullPage/FullPageToolbar.js

@@ -1,17 +1,23 @@
+/** @jsx jsx */
 import React, { useState, useEffect } from 'react';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import AvatarsWithPluginState from '../../../plugins/collab-edit/ui';
 import FindReplaceToolbarButtonWithState from '../../../plugins/find-replace/FindReplaceToolbarButtonWithState';
 import { BeforePrimaryToolbarWrapper } from '../../../plugins/before-primaryToolbar/ui/BeforePrimaryToolbarWrapper';
 import Toolbar from '../../Toolbar';
-import { MainToolbar, MainToolbarIconBefore, MainToolbarFirstChild, MainToolbarSecondChild, NonCustomToolbarWrapper, CustomToolbarWrapper, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT } from './MainToolbar';
+import { mainToolbarStyle, mainToolbarIconBeforeStyle, mainToolbarFirstChildStyle, mainToolbarSecondChildStyle, nonCustomToolbarWrapperStyle, customToolbarWrapperStyle, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT } from './MainToolbar';
 import { ContextPanelConsumer } from '../../ContextPanel/context';
 import messages from './messages';
 export const EditorToolbar = /*#__PURE__*/React.memo(props => {
   var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$collabEdit, _props$collabEdit2, _props$collabEdit3, _props$featureFlags4, _props$featureFlags5;
 
   const [shouldSplitToolbar, setShouldSplitToolbar] = useState(false);
-  const nonCustomToolbar = /*#__PURE__*/React.createElement(NonCustomToolbarWrapper, null, props.beforeIcon && /*#__PURE__*/React.createElement(MainToolbarIconBefore, null, props.beforeIcon), /*#__PURE__*/React.createElement(Toolbar, {
+  const nonCustomToolbar = jsx("div", {
+    css: nonCustomToolbarWrapperStyle
+  }, props.beforeIcon && jsx("div", {
+    css: mainToolbarIconBeforeStyle
+  }, props.beforeIcon), jsx(Toolbar, {
     editorView: props.editorView,
     editorActions: props.editorActions,
     eventDispatcher: props.eventDispatcher,
@@ -26,15 +32,17 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
     containerElement: props.containerElement,
     hasMinWidth: props.hasMinWidth
   }));
-  const customToolbar = /*#__PURE__*/React.createElement(CustomToolbarWrapper, null, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.twoLineEditorToolbar && !!props.customPrimaryToolbarComponents && 'before' in props.customPrimaryToolbarComponents ? /*#__PURE__*/React.createElement(BeforePrimaryToolbarWrapper, {
+  const customToolbar = jsx("div", {
+    css: customToolbarWrapperStyle
+  }, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.twoLineEditorToolbar && !!props.customPrimaryToolbarComponents && 'before' in props.customPrimaryToolbarComponents ? jsx(BeforePrimaryToolbarWrapper, {
     beforePrimaryToolbarComponents: props.customPrimaryToolbarComponents.before
-  }) : null, (props === null || props === void 0 ? void 0 : (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.showAvatarGroupAsPlugin) === true && !((_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.twoLineEditorToolbar) ? null : /*#__PURE__*/React.createElement(AvatarsWithPluginState, {
+  }) : null, (props === null || props === void 0 ? void 0 : (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.showAvatarGroupAsPlugin) === true && !((_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.twoLineEditorToolbar) ? null : jsx(AvatarsWithPluginState, {
     editorView: props.editorView,
     eventDispatcher: props.eventDispatcher,
     inviteToEditComponent: (_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.inviteToEditComponent,
     inviteToEditHandler: (_props$collabEdit2 = props.collabEdit) === null || _props$collabEdit2 === void 0 ? void 0 : _props$collabEdit2.inviteToEditHandler,
     isInviteToEditButtonSelected: (_props$collabEdit3 = props.collabEdit) === null || _props$collabEdit3 === void 0 ? void 0 : _props$collabEdit3.isInviteToEditButtonSelected
-  }), (_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.findReplace && (_props$featureFlags5 = props.featureFlags) !== null && _props$featureFlags5 !== void 0 && _props$featureFlags5.twoLineEditorToolbar ? /*#__PURE__*/React.createElement(FindReplaceToolbarButtonWithState, {
+  }), (_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.findReplace && (_props$featureFlags5 = props.featureFlags) !== null && _props$featureFlags5 !== void 0 && _props$featureFlags5.twoLineEditorToolbar ? jsx(FindReplaceToolbarButtonWithState, {
     popupsBoundariesElement: props.popupsBoundariesElement,
     popupsMountPoint: props.popupsMountPoint,
     popupsScrollableElement: props.popupsScrollableElement,
@@ -55,22 +63,21 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
       return () => window.removeEventListener('resize', updateOnResize);
     }
   });
-  return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, ({
+  return jsx(ContextPanelConsumer, null, ({
     width: contextPanelWidth
   }) => {
     var _props$featureFlags7, _props$featureFlags8, _props$featureFlags9;
 
-    return /*#__PURE__*/React.createElement(MainToolbar, {
-      "data-testid": "ak-editor-main-toolbar",
-      showKeyline: props.showKeyline || contextPanelWidth > 0,
-      twoLineEditorToolbar: !!((_props$featureFlags7 = props.featureFlags) !== null && _props$featureFlags7 !== void 0 && _props$featureFlags7.twoLineEditorToolbar)
-    }, /*#__PURE__*/React.createElement(MainToolbarFirstChild, {
-      twoLineEditorToolbar: !!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar),
+    return jsx("div", {
+      css: mainToolbarStyle(props.showKeyline || contextPanelWidth > 0, !!((_props$featureFlags7 = props.featureFlags) !== null && _props$featureFlags7 !== void 0 && _props$featureFlags7.twoLineEditorToolbar)),
+      "data-testid": "ak-editor-main-toolbar"
+    }, jsx("div", {
+      css: mainToolbarFirstChildStyle(!!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar)),
       role: "region",
       "aria-label": props.intl.formatMessage(messages.toolbarLabel)
-    }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), /*#__PURE__*/React.createElement(MainToolbarSecondChild, {
+    }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), jsx("div", {
+      css: mainToolbarSecondChildStyle(!!((_props$featureFlags9 = props.featureFlags) !== null && _props$featureFlags9 !== void 0 && _props$featureFlags9.twoLineEditorToolbar)),
       "data-testid": 'avatar-group-outside-plugin',
-      twoLineEditorToolbar: !!((_props$featureFlags9 = props.featureFlags) !== null && _props$featureFlags9 !== void 0 && _props$featureFlags9.twoLineEditorToolbar),
       role: "region",
       "aria-label": props.intl.formatMessage(messages.pageActionsLabel)
     }, shouldSplitToolbar ? nonCustomToolbar : customToolbar));

package/dist/es2019/ui/Appearance/FullPage/MainToolbar.js

@@ -1,13 +1,22 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { akEditorMenuZIndex, akEditorSwoopCubicBezier, akEditorToolbarKeylineHeight, akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
 export const MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
 const toolbarLineHeight = 56;
-export const MainToolbar = styled.div`
+const mainToolbarWithKeyline = css`
+  box-shadow: 0 ${akEditorToolbarKeylineHeight}px 0 0 ${N30};
+`;
+const mainToolbarTwoLineStyle = css`
+  @media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px) {
+    flex-wrap: wrap;
+    height: calc(${toolbarLineHeight}px * 2);
+  }
+`;
+const mainToolbar = css`
   position: relative;
   align-items: center;
-  box-shadow: ${props => props.showKeyline ? `0 ${akEditorToolbarKeylineHeight}px 0 0 ${N30}` : 'none'};
+  box-shadow: none;
   transition: box-shadow 200ms ${akEditorSwoopCubicBezier};
   z-index: ${akEditorMenuZIndex};
   display: flex;
@@ -19,20 +28,13 @@ export const MainToolbar = styled.div`
     height: 0 !important;
   }
 
-  @media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px) {
-    ${props => props.twoLineEditorToolbar && `
-        flex-wrap: wrap;
-        height: calc(${toolbarLineHeight}px * 2);
-      `}
-  }
-
   @media (max-width: ${akEditorMobileMaxWidth}px) {
     display: grid;
     height: calc(${toolbarLineHeight}px * 2);
   }
 `;
-MainToolbar.displayName = 'MainToolbar';
-export const MainToolbarIconBefore = styled.div`
+export const mainToolbarStyle = (showKeyline, twoLineEditorToolbar) => [mainToolbar, showKeyline && mainToolbarWithKeyline, twoLineEditorToolbar && mainToolbarTwoLineStyle];
+export const mainToolbarIconBeforeStyle = css`
   margin: ${gridSize() * 2}px;
   height: ${gridSize() * 4}px;
   width: ${gridSize() * 4}px;
@@ -41,64 +43,52 @@ export const MainToolbarIconBefore = styled.div`
     grid-row: 1;
   }
 `;
-MainToolbarIconBefore.displayName = 'MainToolbarIconBefore';
-export const MainToolbarFirstChild = styled.div`
+const mainToolbarFirstChild = css`
   display: flex;
   flex-grow: 1;
 
-  @media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px) {
-    ${props => props.twoLineEditorToolbar && `
-        flex: 1 1 100%;
-        height: ${toolbarLineHeight}px;
-        justify-content: flex-end;
-        // ED-10241: We add fit-content to ensure that MainToolbar does not
-        // shrink more than the size of its contents. This will prevent the
-        // find/replace icon from being overlapped during a confluence
-        // publish operation
-        min-width: fit-content;
-      `}
-  }
   @media (max-width: ${akEditorMobileMaxWidth}px) {
     grid-column: 1;
     grid-row: 1;
   }
 `;
-MainToolbarFirstChild.displayName = 'MainToolbarFirstChild';
-export const MainToolbarSecondChild = styled.div`
+const mainToolbarFirstChildTowLine = css`
+  @media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px) {
+    flex: 1 1 100%;
+    height: ${toolbarLineHeight}px;
+    justify-content: flex-end;
+    // ED-10241: We add fit-content to ensure that MainToolbar does not
+    // shrink more than the size of its contents. This will prevent the
+    // find/replace icon from being overlapped during a confluence
+    // publish operation
+    min-width: fit-content;
+  }
+`;
+export const mainToolbarFirstChildStyle = twoLineEditorToolbar => [mainToolbarFirstChild, twoLineEditorToolbar && mainToolbarFirstChildTowLine];
+const mainToolbarSecondChild = css`
   // ED-10241: We add fit-content to ensure that MainToolbar does not
   // shrink more than the size of its contents. This will prevent the
   // find/replace icon from being overlapped during a confluence
   // publish operation
   min-width: fit-content;
+`;
+const mainToolbarSecondChildTwoLine = css`
   @media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px) {
-    ${props => props.twoLineEditorToolbar && `
-        display: flex;
-        flex-grow: 1;
-        flex: 1 1 100%;
-        margin: auto;
-        height: ${toolbarLineHeight}px;
-        min-width: 0;
-      `}
+    display: flex;
+    flex-grow: 1;
+    flex: 1 1 100%;
+    margin: auto;
+    height: ${toolbarLineHeight}px;
+    min-width: 0;
   }
 `;
-MainToolbarSecondChild.displayName = 'MainToolbarSecondChild';
-export const SecondaryToolbar = styled.div`
-  box-sizing: border-box;
-  justify-content: flex-end;
-  align-items: center;
-  flex-shrink: 0;
-  display: flex;
-  padding: 24px 0;
-`;
-SecondaryToolbar.displayName = 'SecondaryToolbar';
-export const NonCustomToolbarWrapper = styled.div`
+export const mainToolbarSecondChildStyle = twoLineEditorToolbar => [mainToolbarSecondChild, twoLineEditorToolbar && mainToolbarSecondChildTwoLine];
+export const nonCustomToolbarWrapperStyle = css`
   align-items: center;
   display: flex;
   flex-grow: 1;
 `;
-NonCustomToolbarWrapper.displayName = 'NonCustomToolbar';
-export const CustomToolbarWrapper = styled.div`
+export const customToolbarWrapperStyle = css`
   align-items: center;
   display: flex;
-`;
-CustomToolbarWrapper.displayName = 'CustomToolbar';
+`;