@atlaskit/editor-core 162.0.1 → 163.0.0

package/dist/es2019/plugins/card/pm-plugins/doc.js

@@ -12,6 +12,7 @@ import { shouldReplaceLink } from './shouldReplaceLink';
 import { SMART_LINK_TYPE } from '../../../plugins/analytics/types/node-events';
 import { getLinkCreationAnalyticsEvent } from '../../../plugins/hyperlink/analytics';
 import { unlinkPayload } from '../../../utils/linking-utils';
+import { getFeatureFlags } from '../../feature-flags-context';
 export function insertCard(tr, cardAdf, schema) {
   const {
     inlineCard
@@ -207,13 +208,48 @@ export const changeSelectedCardToLink = (text, href, sendAnalytics, node, pos) =
     tr = cardToLinkWithTransaction(state, text, href);
   }
 
+  const selectedNode = state.selection instanceof NodeSelection && state.selection.node;
+
+  if (sendAnalytics) {
+    if (selectedNode) {
+      const {
+        viewChangingExperimentToolbarStyle
+      } = getFeatureFlags(state);
+      addAnalytics(state, tr, {
+        action: ACTION.CHANGED_TYPE,
+        actionSubject: ACTION_SUBJECT.SMART_LINK,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          newType: SMART_LINK_TYPE.URL,
+          previousType: appearanceForNodeType(selectedNode.type),
+          featureFlag: viewChangingExperimentToolbarStyle || 'noChange'
+        }
+      });
+    }
+  }
+
+  if (dispatch) {
+    dispatch(tr.scrollIntoView());
+  }
+
+  return true;
+};
+export const changeSelectedCardToLinkFallback = (text, href, sendAnalytics, node, pos) => (state, dispatch) => {
+  let tr;
+
+  if (node && pos) {
+    tr = cardNodeToLinkWithTransaction(state, text, href, node, pos);
+  } else {
+    tr = cardToLinkWithTransaction(state, text, href);
+  }
+
   if (sendAnalytics) {
     addAnalytics(state, tr, {
-      action: ACTION.CHANGED_TYPE,
+      action: ACTION.ERRORED,
       actionSubject: ACTION_SUBJECT.SMART_LINK,
-      eventType: EVENT_TYPE.TRACK,
+      eventType: EVENT_TYPE.OPERATIONAL,
       attributes: {
-        newType: SMART_LINK_TYPE.URL
+        error: 'Smart card falling back to link.'
       }
     });
   }
@@ -311,13 +347,17 @@ export const setSelectedCardAppearance = appearance => (state, dispatch) => {
   } = state.selection;
   const nodeType = getLinkNodeType(appearance, state.schema.nodes);
   const tr = state.tr.setNodeMarkup(from, nodeType, attrs, selectedNode.marks);
+  const {
+    viewChangingExperimentToolbarStyle
+  } = getFeatureFlags(state);
   addAnalytics(state, tr, {
     action: ACTION.CHANGED_TYPE,
     actionSubject: ACTION_SUBJECT.SMART_LINK,
     eventType: EVENT_TYPE.TRACK,
     attributes: {
       newType: appearance,
-      previousType: appearanceForNodeType(selectedNode.type)
+      previousType: appearanceForNodeType(selectedNode.type),
+      featureFlag: viewChangingExperimentToolbarStyle || 'noChange'
     }
   });
 

package/dist/es2019/plugins/card/pm-plugins/main.js

@@ -7,12 +7,14 @@ import { getNewRequests, getPluginState, getPluginStateWithUpdatedPos } from './
 import { EmbedCard } from '../nodeviews/embedCard';
 import { BlockCard } from '../nodeviews/blockCard';
 import { InlineCard } from '../nodeviews/inlineCard';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../../plugins/analytics';
 export { pluginKey } from './plugin-key';
 export const createPlugin = options => ({
   portalProviderAPI,
   eventDispatcher,
   providerFactory,
-  dispatchAnalyticsEvent
+  dispatchAnalyticsEvent,
+  featureFlags
 }) => {
   const {
     platform,
@@ -24,6 +26,20 @@ export const createPlugin = options => ({
   return new SafePlugin({
     state: {
       init() {
+        const {
+          viewChangingExperimentToolbarStyle
+        } = featureFlags;
+        dispatchAnalyticsEvent({
+          eventType: EVENT_TYPE.OPERATIONAL,
+          action: ACTION.EXPOSED,
+          actionSubject: ACTION_SUBJECT.FEATURE,
+          attributes: {
+            flagKey: 'confluence.frontend.fabric.editor.view-changing-experiment-toolbar-style',
+            value: viewChangingExperimentToolbarStyle || 'noChange'
+          },
+          source: '@atlaskit/feature-flag-client',
+          tags: ['measurement']
+        });
         return {
           requests: [],
           provider: null,

package/dist/es2019/plugins/card/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBorder, akEditorDeleteBackground } from '@atlaskit/editor-shared-styles';
 import { N20 } from '@atlaskit/theme/colors';
 import { SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';

package/dist/es2019/plugins/card/ui/LinkToolbarIconDropdown.js

@@ -31,8 +31,8 @@ const primitiveStyles = css({
 });
 const interactiveStyles = css({
   '&:active': {
-    backgroundColor: token('color.background.brand.pressed', B50),
-    color: token('color.text.accent.blue', B400)
+    backgroundColor: token('color.background.selected.pressed', B50),
+    color: token('color.text.selected', B400)
   }
 });
 const unselectedStyles = css({
@@ -42,11 +42,11 @@ const unselectedStyles = css({
   }
 });
 const selectedOptionStyles = css({
-  backgroundColor: token('color.background.brand.pressed', B50),
-  color: token('color.text.brand', 'currentColor'),
+  backgroundColor: token('color.background.selected.pressed', B50),
+  color: token('color.text.selected', 'currentColor'),
   '&:hover': {
-    backgroundColor: token('color.background.brand.pressed', B50),
-    color: token('color.text.brand', 'currentColor')
+    backgroundColor: token('color.background.selected.pressed', B50),
+    color: token('color.text.selected', 'currentColor')
   }
 });
 const titleOffsetStyles = css({

package/dist/es2019/plugins/card/ui/ResizableEmbedCard.js

@@ -8,7 +8,7 @@ import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from 'prosemirr
 import { calcColumnsFromPx, calcPctFromPx, calcPxFromColumns, wrappedLayouts } from '@atlaskit/editor-common/ui';
 import { akEditorMediaResizeHandlerPaddingWide, akEditorBreakoutPadding, akEditorWideLayoutWidth, breakoutWideScaleRatio, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { embedHeaderHeight } from '@atlaskit/smart-card';
-import { Wrapper } from '../../../ui/Resizer/styled';
+import { wrapperStyle } from '../../../ui/Resizer/styled';
 import Resizer from '../../../ui/Resizer';
 import { handleSides, imageAlignmentMap, snapTo } from '../../../ui/Resizer/utils';
 import { calcMediaPxWidth } from '../../../plugins/media/utils/media-single';
@@ -358,12 +358,13 @@ export default class ResizableEmbedCard extends React.Component {
     return jsx("div", {
       css: embedSpacingStyles,
       "data-testid": "resizable-embed-card-spacing"
-    }, jsx(Wrapper, {
-      layout: layout,
-      isResized: !!pctWidth,
-      containerWidth: containerWidth || DEFAULT_EMBED_CARD_WIDTH,
-      innerRef: elem => this.wrapper = elem,
-      fullWidthMode: fullWidthMode
+    }, jsx("div", {
+      css: wrapperStyle({
+        layout,
+        isResized: !!pctWidth,
+        containerWidth: containerWidth || DEFAULT_EMBED_CARD_WIDTH,
+        fullWidthMode
+      })
     }, jsx(Resizer, _extends({}, this.props, {
       width: initialWidth // Starting or initial width of embed <iframe> itself.
       ,

package/dist/es2019/plugins/code-block/styles.js

@@ -19,7 +19,9 @@ export const highlightingCodeBlockStyles = props => css`
   light: colors.N20,
   dark: colors.DN50
 })(props)};
+
     --ds--code--bg-color: transparent;
+
     background-attachment: local, scroll, scroll;
     background-size: 8px 100%, 8px 100%, 8px 100%;
     background-position: 100% 0, 100% 0, 0 0;
@@ -164,7 +166,9 @@ export const codeBlockStyles = props => css`
   })(props),
   width: '8px'
 })};
+
     --ds--code--bg-color: transparent;
+
     background-repeat: no-repeat;
     background-color: ${themed({
   light: colors.N20,

package/dist/es2019/plugins/collab-edit/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { TELEPOINTER_DIM_CLASS } from './plugin-state';
 import { colors } from './utils';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';

package/dist/es2019/plugins/collab-edit/ui/avatars.js

@@ -1,6 +1,8 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import AvatarGroup from '@atlaskit/avatar-group';
-import { AvatarContainer } from './styles';
+import { avatarContainer } from './styles';
 import toAvatar from './to-avatar';
 import { scrollToCollabCursor } from '../utils';
 import { getFeatureFlags } from '../../feature-flags-context';
@@ -16,7 +18,9 @@ export const Avatars = /*#__PURE__*/React.memo(props => {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(AvatarContainer, null, /*#__PURE__*/React.createElement(AvatarGroup, {
+  return jsx("div", {
+    css: avatarContainer
+  }, jsx(AvatarGroup, {
     appearance: "stack",
     size: "medium",
     data: avatars,

package/dist/es2019/plugins/collab-edit/ui/colored-avatar-item.js

@@ -1,11 +1,12 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { getAvatarColor } from '../utils';
-import { Badge } from './styles';
+import { badge } from './styles';
 export const ColoredAvatarItem = props => {
   const color = getAvatarColor(props.sessionId).color.solid;
   const avatar = props.name.substr(0, 1).toUpperCase();
-  return /*#__PURE__*/React.createElement(Badge, {
-    color: color,
+  return jsx("div", {
+    css: badge(color),
     "data-testid": "editor-collab-badge"
   }, avatar);
 };

package/dist/es2019/plugins/collab-edit/ui/invite-to-edit.js

@@ -1,9 +1,11 @@
-import React from 'react';
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { jsx } from '@emotion/react';
 import InviteTeamIcon from '@atlaskit/icon/glyph/editor/add';
 import ToolbarButton from '../../../ui/ToolbarButton';
-import { InviteTeamWrapper } from './styles';
+import { inviteTeamWrapper } from './styles';
 
-const ID = props => /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
+const ID = props => jsx(Fragment, null, props.children);
 
 export const InviteToEditButton = props => {
   const {
@@ -12,7 +14,7 @@ export const InviteToEditButton = props => {
     selected,
     title
   } = props;
-  const iconBefore = React.useMemo(() => /*#__PURE__*/React.createElement(InviteTeamIcon, {
+  const iconBefore = React.useMemo(() => jsx(InviteTeamIcon, {
     label: title
   }), [title]);
 
@@ -21,7 +23,9 @@ export const InviteToEditButton = props => {
   }
 
   const Wrapper = Component ? Component : ID;
-  return /*#__PURE__*/React.createElement(InviteTeamWrapper, null, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ToolbarButton, {
+  return jsx("div", {
+    css: inviteTeamWrapper
+  }, jsx(Wrapper, null, jsx(ToolbarButton, {
     className: "invite-to-edit",
     onClick: onClick,
     selected: selected,

package/dist/es2019/plugins/collab-edit/ui/styles.js

@@ -1,14 +1,14 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N20 } from '@atlaskit/theme/colors';
 import { akEditorSmallZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-export const InviteTeamWrapper = styled.div`
+export const inviteTeamWrapper = css`
   background: ${N20};
   border-radius: 50%;
   min-width: ${gridSize() * 4}px;
   margin-left: -${gridSize() / 2}px;
 `;
-export const AvatarContainer = styled.div`
+export const avatarContainer = css`
   margin-right: ${gridSize()}px;
   display: flex;
   align-items: center;
@@ -27,7 +27,7 @@ export const AvatarContainer = styled.div`
     padding: 2px;
   }
 `;
-export const Badge = styled.div`
+export const badge = color => css`
   display: block;
   position: absolute;
   right: 1px;
@@ -36,9 +36,7 @@ export const Badge = styled.div`
   height: 13px;
   z-index: ${akEditorSmallZIndex};
   border-radius: 3px;
-  background: ${({
-  color
-}) => color};
+  background: ${color};
   color: #fff;
   font-size: ${relativeFontSizeToBase16(9)};
   line-height: 0;

package/dist/es2019/plugins/date/nodeviews/date.js

@@ -1,57 +1,46 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
-import { injectIntl } from 'react-intl-next';
+import { useIntl } from 'react-intl-next';
 import { timestampToString, timestampToTaskContext, isPastDate } from '@atlaskit/editor-common/utils';
 import { Date } from '@atlaskit/date';
 import { setDatePickerAt } from '../actions';
+export function DateNodeView(props) {
+  const {
+    node: {
+      attrs: {
+        timestamp
+      }
+    },
+    view: {
+      state: {
+        doc,
+        schema,
+        selection
+      }
+    },
+    getPos
+  } = props;
+  const intl = useIntl(); // We fall back to selection.$from even though it does not cover all use cases
+  // eg. upon Editor init, selection is at the start, not at the Date node
 
-class DateNodeView extends React.Component {
-  constructor(...args) {
-    super(...args);
+  const $nodePos = typeof getPos === 'function' ? doc.resolve(getPos()) : selection.$from;
+  const parent = $nodePos.parent;
+  const withinIncompleteTask = parent.type === schema.nodes.taskItem && parent.attrs.state !== 'DONE';
+  const color = withinIncompleteTask && isPastDate(timestamp) ? 'red' : undefined;
+  return /*#__PURE__*/React.createElement("span", {
+    className: DateSharedCssClassName.DATE_WRAPPER,
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement(Date, {
+    color: color,
+    value: timestamp
+  }, withinIncompleteTask ? timestampToTaskContext(timestamp, intl) : timestampToString(timestamp, intl)));
 
-    _defineProperty(this, "handleClick", event => {
-      event.nativeEvent.stopImmediatePropagation();
-      const {
-        state,
-        dispatch
-      } = this.props.view;
-      setDatePickerAt(state.selection.from)(state, dispatch);
-    });
-  }
-
-  render() {
+  function handleClick(event) {
+    event.nativeEvent.stopImmediatePropagation();
     const {
-      node: {
-        attrs: {
-          timestamp
-        }
-      },
-      view: {
-        state: {
-          doc,
-          schema,
-          selection
-        }
-      },
-      intl,
-      getPos
-    } = this.props; // We fall back to selection.$from even though it does not cover all use cases
-    // eg. upon Editor init, selection is at the start, not at the Date node
-
-    const $nodePos = typeof getPos === 'function' ? doc.resolve(getPos()) : selection.$from;
-    const parent = $nodePos.parent;
-    const withinIncompleteTask = parent.type === schema.nodes.taskItem && parent.attrs.state !== 'DONE';
-    const color = withinIncompleteTask && isPastDate(timestamp) ? 'red' : undefined;
-    return /*#__PURE__*/React.createElement("span", {
-      className: DateSharedCssClassName.DATE_WRAPPER,
-      onClick: this.handleClick
-    }, /*#__PURE__*/React.createElement(Date, {
-      color: color,
-      value: timestamp
-    }, withinIncompleteTask ? timestampToTaskContext(timestamp, intl) : timestampToString(timestamp, intl)));
+      state,
+      dispatch
+    } = props.view;
+    setDatePickerAt(state.selection.from)(state, dispatch);
   }
-
-}
-
-export default injectIntl(DateNodeView);
+}

package/dist/es2019/plugins/date/pm-plugins/main.js

@@ -1,6 +1,6 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import DateNodeView from '../nodeviews/date';
-import { ReactNodeView } from '../../../nodeviews';
+import { DateNodeView } from '../nodeviews/date';
+import { getInlineNodeViewProducer } from '../../../nodeviews/getInlineNodeViewProducer';
 import { pluginFactory } from '../../../utils/plugin-state-factory';
 import { reducer, mapping, onSelectionChanged } from './utils';
 import { pluginKey } from './plugin-key';
@@ -12,24 +12,22 @@ const {
   onSelectionChanged
 });
 
-const createPlugin = ({
-  dispatch,
-  portalProviderAPI,
-  eventDispatcher
-}) => {
+const createPlugin = pmPluginFactoryParams => {
   const newPluginState = {
     showDatePickerAt: null,
     isNew: false,
     isDateEmpty: false,
     focusDateInput: false
   };
-  const hasIntlContext = true;
   return new SafePlugin({
-    state: createPluginState(dispatch, newPluginState),
+    state: createPluginState(pmPluginFactoryParams.dispatch, newPluginState),
     key: pluginKey,
     props: {
       nodeViews: {
-        date: ReactNodeView.fromComponent(DateNodeView, portalProviderAPI, eventDispatcher, undefined, undefined, hasIntlContext)
+        date: getInlineNodeViewProducer({
+          pmPluginFactoryParams,
+          Component: DateNodeView
+        })
       }
     }
   });

package/dist/es2019/plugins/date/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const dateStyles = css`

package/dist/es2019/plugins/date/ui/DatePicker/date-picker-input.js

@@ -1,13 +1,15 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import { defineMessages, injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { findDateSegmentByPosition, adjustDate, isDatePossiblyValid } from '../../utils/internal';
 import { parseDateType, formatDateType } from '../../utils/formatParse';
 import { EVENT_TYPE, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../../../analytics/types/enums';
 import TextField from '@atlaskit/textfield';
 import { ErrorMessage } from '@atlaskit/form';
-const DateTextFieldWrapper = styled.div`
+const dateTextFieldWrapper = css`
   padding: 22px;
   padding-bottom: 12px;
 `;
@@ -213,7 +215,9 @@ class DatePickerInput extends React.Component {
     const attemptedDateParse = parseDateType(inputText, locale); // Don't display an error for an empty input.
 
     const displayError = (attemptedDateParse === null || !possiblyValid) && inputText !== '';
-    return /*#__PURE__*/React.createElement(DateTextFieldWrapper, null, /*#__PURE__*/React.createElement(TextField, {
+    return jsx("div", {
+      css: dateTextFieldWrapper
+    }, jsx(TextField, {
       name: "datetextfield",
       value: inputText,
       ref: this.handleInputRef,
@@ -223,7 +227,7 @@ class DatePickerInput extends React.Component {
       spellCheck: false,
       autoComplete: "off",
       isInvalid: displayError
-    }), displayError && /*#__PURE__*/React.createElement(ErrorMessage, null, formatMessage(messages.invalidDateError)));
+    }), displayError && jsx(ErrorMessage, null, formatMessage(messages.invalidDateError)));
   }
 
   componentDidUpdate() {

package/dist/es2019/plugins/date/ui/DatePicker/index.js

@@ -1,5 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import ReactDOM from 'react-dom';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { timestampToUTCDate, timestampToIsoFormat } from '@atlaskit/editor-common/utils';
@@ -8,12 +11,11 @@ import Calendar from '@atlaskit/calendar';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N60A, N0 } from '@atlaskit/theme/colors';
 import withOuterListeners from '../../../../ui/with-outer-listeners';
-import styled from 'styled-components';
 const PopupWithListeners = withOuterListeners(Popup);
 import { INPUT_METHOD } from '../../../analytics/types/enums';
 import { injectIntl } from 'react-intl-next';
 import DatePickerInput from './date-picker-input';
-const PopupContentWrapper = styled.div`
+const popupContentWrapper = css`
   padding: 2px;
   border-radius: ${borderRadius()}px;
   box-shadow: 0 4px 8px -2px ${N60A}, 0 0 1px ${N60A};
@@ -127,7 +129,7 @@ class DatePicker extends React.Component {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(PopupWithListeners, {
+    return jsx(PopupWithListeners, {
       target: element,
       offset: [0, 8],
       fitHeight: 327,
@@ -138,7 +140,9 @@ class DatePicker extends React.Component {
       mountTo: mountTo,
       boundariesElement: boundariesElement,
       scrollableElement: scrollableElement
-    }, /*#__PURE__*/React.createElement(PopupContentWrapper, null, showTextField === true && /*#__PURE__*/React.createElement(DatePickerInput, {
+    }, jsx("div", {
+      css: popupContentWrapper
+    }, showTextField === true && jsx(DatePickerInput, {
       date: date,
       onNewDate: this.handleNewDate,
       onSubmitDate: this.handleKeyboardSubmitDate,
@@ -147,7 +151,7 @@ class DatePicker extends React.Component {
       dispatchAnalyticsEvent: dispatchAnalyticsEvent,
       autoFocus: autoFocus,
       autoSelectAll: isNew
-    }), /*#__PURE__*/React.createElement(Calendar, {
+    }), jsx(Calendar, {
       onChange: this.handleOnChange,
       onSelect: date => onSelect(date, INPUT_METHOD.PICKER),
       day: day,

package/dist/es2019/plugins/emoji/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { N0, N20, N900 } from '@atlaskit/theme/colors';
 import { borderRadius, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
 import { EmojiSharedCssClassName } from '@atlaskit/editor-common/emoji';
@@ -83,7 +83,6 @@ export const emojiStylesNext = css`
       overflow: hidden;
       padding: ${topAndBottomPadding}px ${leftAndRightTextPadding}px;
       pointer-events: none;
-      position: absolute;
       text-decoration: none;
       text-overflow: ellipsis;
       white-space: nowrap;

package/dist/es2019/plugins/expand/ui/ExpandIconButton.js

@@ -1,17 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, forwardRef } from 'react';
+
+/** @jsx jsx */
+import React, { useCallback } from 'react';
+import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
-import { expandMessages, ExpandLayoutWrapper } from '@atlaskit/editor-common/ui';
+import { expandMessages, expandLayoutWrapperStyle, ExpandLayoutWrapperWithRef } from '@atlaskit/editor-common/ui';
 import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
 import Tooltip from '@atlaskit/tooltip';
 import { expandClassNames } from './class-names';
-const ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef(function WithRef(props, ref) {
-  // @ts-ignore: incorrect innerRef typing
-  return /*#__PURE__*/React.createElement(ExpandLayoutWrapper, _extends({}, props, {
-    innerRef: ref
-  }));
-});
 export const withTooltip = WrapperComponent => {
   return class WithSortableColumn extends React.Component {
     constructor(props) {
@@ -22,11 +19,11 @@ export const withTooltip = WrapperComponent => {
       const {
         label
       } = this.props;
-      return /*#__PURE__*/React.createElement(Tooltip, {
+      return jsx(Tooltip, {
         content: label,
         position: "top",
         tag: ExpandLayoutWrapperWithRef
-      }, /*#__PURE__*/React.createElement(WrapperComponent, this.props));
+      }, jsx(WrapperComponent, this.props));
     }
 
   };
@@ -52,10 +49,10 @@ export const CustomButton = props => {
       ...rest
     };
   }, [props]);
-  return /*#__PURE__*/React.createElement(Button, {
+  return jsx(Button, {
     appearance: "subtle",
     className: expandClassNames.iconContainer,
-    iconBefore: /*#__PURE__*/React.createElement(ChevronRightIcon, {
+    iconBefore: jsx(ChevronRightIcon, {
       label: label
     }),
     shouldFitContainer: true,
@@ -77,12 +74,14 @@ export const ExpandIconButton = props => {
   const hoverEventCheck = supportsAnyHover ? window.matchMedia('(any-hover: hover)').matches : true; // hoverEventCheck is to disable tooltips for mobile to prevent incorrect hover state causing issues on iOS
 
   if (props.allowInteractiveExpand && hoverEventCheck) {
-    return /*#__PURE__*/React.createElement(ButtonWithTooltip, _extends({
+    return jsx(ButtonWithTooltip, _extends({
       label: label
     }, props));
   }
 
-  return /*#__PURE__*/React.createElement(ExpandLayoutWrapper, null, /*#__PURE__*/React.createElement(ButtonWithoutTooltip, _extends({
+  return jsx("div", {
+    css: expandLayoutWrapperStyle
+  }, jsx(ButtonWithoutTooltip, _extends({
     label: label
   }, props)));
 };