@atlaskit/editor-core 163.0.0 → 164.0.2

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/index.js

@@ -1,17 +1,20 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import ReactDOM from 'react-dom';
 import { injectIntl } from 'react-intl-next';
 import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
 import { Popup } from '@atlaskit/editor-common/ui';
 import ToolbarButton from '../../../../ui/ToolbarButton';
-import { Separator, ButtonGroup, Wrapper } from '../../../../ui/styles';
+import { separatorStyles, buttonGroupStyle, wrapperStyle } from '../../../../ui/styles';
 import { createTable } from '../../../table/commands';
 import { insertDate } from '../../../date/actions';
 import { openElementBrowserModal } from '../../../quick-insert/commands';
 import { showPlaceholderFloatingToolbar } from '../../../placeholder-text/actions';
 import { insertLayoutColumnsWithAnalytics } from '../../../layout/actions';
-import { insertTaskDecision } from '../../../tasks-and-decisions/commands';
+import { insertTaskDecisionCommand } from '../../../tasks-and-decisions/commands';
 import { insertExpand } from '../../../expand/commands';
 import { showLinkToolbar } from '../../../hyperlink/commands';
 import { createTypeAheadTools } from '../../../type-ahead/api';
@@ -248,16 +251,13 @@ export class ToolbarInsertBlock extends React.PureComponent {
 
     _defineProperty(this, "insertTaskDecision", (name, inputMethod) => () => {
       const {
-        editorView
+        editorView: {
+          state,
+          dispatch
+        }
       } = this.props;
-
-      if (!editorView) {
-        return false;
-      }
-
       const listType = name === 'action' ? 'taskList' : 'decisionList';
-      insertTaskDecision(editorView, listType, inputMethod)(editorView.state, editorView.dispatch);
-      return true;
+      return insertTaskDecisionCommand(listType, inputMethod)(state, dispatch);
     });
 
     _defineProperty(this, "insertHorizontalRule", inputMethod => {
@@ -488,7 +488,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(Popup, {
+    return jsx(Popup, {
       target: ref,
       fitHeight: 350,
       fitWidth: 350,
@@ -496,7 +496,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
       mountTo: popupsMountPoint,
       boundariesElement: popupsBoundariesElement,
       scrollableElement: popupsScrollableElement
-    }, /*#__PURE__*/React.createElement(EmojiPickerWithListeners, {
+    }, jsx(EmojiPickerWithListeners, {
       emojiProvider: emojiProvider,
       onSelection: this.handleSelectedEmoji,
       handleClickOutside: this.handleEmojiClickOutside,
@@ -520,9 +520,9 @@ export class ToolbarInsertBlock extends React.PureComponent {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(ButtonGroup, {
-      width: isReducedSpacing ? 'small' : 'large'
-    }, buttons.map(btn => /*#__PURE__*/React.createElement(ToolbarButton, {
+    return jsx("span", {
+      css: buttonGroupStyle
+    }, buttons.map(btn => jsx(ToolbarButton, {
       item: btn,
       ref: btn.value.name === 'emoji' ? this.handleEmojiButtonRef : noop,
       key: btn.value.name,
@@ -534,7 +534,9 @@ export class ToolbarInsertBlock extends React.PureComponent {
       "aria-label": btn['aria-label'],
       "aria-haspopup": btn['aria-haspopup'],
       onItemClick: this.insertToolbarMenuItem
-    })), /*#__PURE__*/React.createElement(Wrapper, null, this.renderPopup(), /*#__PURE__*/React.createElement(BlockInsertMenu, {
+    })), jsx("span", {
+      css: wrapperStyle
+    }, this.renderPopup(), jsx(BlockInsertMenu, {
       popupsMountPoint: this.props.popupsMountPoint,
       popupsBoundariesElement: this.props.popupsBoundariesElement,
       popupsScrollableElement: this.props.popupsScrollableElement,
@@ -553,7 +555,9 @@ export class ToolbarInsertBlock extends React.PureComponent {
       onOpenChange: this.onOpenChange,
       togglePlusMenuVisibility: this.togglePlusMenuVisibility,
       replacePlusMenuWithElementBrowser: (_this$props$replacePl = this.props.replacePlusMenuWithElementBrowser) !== null && _this$props$replacePl !== void 0 ? _this$props$replacePl : false
-    })), this.props.showSeparator && /*#__PURE__*/React.createElement(Separator, null));
+    })), this.props.showSeparator && jsx("span", {
+      css: separatorStyles
+    }));
   }
 
 }

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/item.js

@@ -1,4 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import memoizeOne from 'memoize-one';
 import DecisionIcon from '@atlaskit/icon/glyph/editor/decision';
 import TaskIcon from '@atlaskit/icon/glyph/editor/task';
@@ -17,7 +19,7 @@ import HorizontalRuleIcon from '@atlaskit/icon/glyph/editor/horizontal-rule';
 import CodeIcon from '@atlaskit/icon/glyph/editor/code';
 import InfoIcon from '@atlaskit/icon/glyph/editor/info';
 import QuoteIcon from '@atlaskit/icon/glyph/quote';
-import { Shortcut } from '../../../../ui/styles';
+import { shortcutStyle } from '../../../../ui/styles';
 import { tooltip, addLink, toggleTable } from '../../../../keymaps';
 import { shallowEquals } from './shallow-equals';
 
@@ -27,10 +29,12 @@ const from = init => ({
   value: {
     name: init.name
   },
-  elemBefore: /*#__PURE__*/React.createElement(init.Icon, {
+  elemBefore: jsx(init.Icon, {
     label: init.content
   }),
-  elemAfter: init.shortcut ? /*#__PURE__*/React.createElement(Shortcut, null, init.shortcut) : undefined,
+  elemAfter: init.shortcut ? jsx("div", {
+    css: shortcutStyle
+  }, init.shortcut) : undefined,
   'aria-label': init.content,
   'aria-haspopup': init['aria-haspopup'],
   shortcut: init.shortcut,
@@ -165,7 +169,7 @@ export const placeholder = mem(init => from({
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'placeholder text',
-  Icon: () => /*#__PURE__*/React.createElement(PlaceholderTextIcon, {
+  Icon: () => jsx(PlaceholderTextIcon, {
     label: ""
   })
 }));
@@ -181,7 +185,7 @@ export const more = mem(init => from({
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'macro',
-  Icon: () => /*#__PURE__*/React.createElement(EditorMoreIcon, {
+  Icon: () => jsx(EditorMoreIcon, {
     label: ""
   })
 }));

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/styles.js

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
-export const TriggerWrapper = styled.span`
+import { css } from '@emotion/react';
+export const triggerWrapper = css`
   width: 42px;
 
   display: flex;

package/dist/es2019/plugins/list/actions/wrap-and-join-lists.js

@@ -1,5 +1,6 @@
 import { Fragment, Slice, NodeRange } from 'prosemirror-model';
-import { ReplaceAroundStep, findWrapping, canSplit, canJoin } from 'prosemirror-transform';
+import { ReplaceAroundStep, findWrapping, canSplit } from 'prosemirror-transform';
+import { autoJoinTr } from '../../../utils/prosemirror/autojoin';
 /**
  * Wraps the selection in a list with the given type. If this results in
  * two adjacent lists of the same type, those will be joined together.
@@ -7,7 +8,7 @@ import { ReplaceAroundStep, findWrapping, canSplit, canJoin } from 'prosemirror-
 
 export function wrapInListAndJoin(nodeType, tr) {
   wrapInList(nodeType)(tr);
-  autoJoin(tr, (before, after) => before.type === after.type && before.type === nodeType);
+  autoJoinTr(tr, (before, after) => before.type === after.type && before.type === nodeType);
 }
 /**
  * Wraps the selection in a list with the given type and attributes.
@@ -93,71 +94,4 @@ function doWrapInList(tr, range, wrappers, joinBefore, listType) {
   }
 
   return tr;
-}
-/**
- * Checks whether two adjacent nodes can be joined. If so, the document
- * will be updated to join those nodes. If not, the original transaction
- * remains untouched.
- *
- * Nodes are considered joinable if the `isJoinable` predicate returns true.
- *
- * Adapted from https://github.com/ProseMirror/prosemirror-commands/blob/master/src/commands.js#L597-L610
- */
-
-
-export function autoJoin(tr, isJoinable) {
-  if (!tr.isGeneric) {
-    return;
-  }
-
-  const ranges = [];
-
-  for (let i = 0; i < tr.mapping.maps.length; i++) {
-    const map = tr.mapping.maps[i];
-
-    for (let j = 0; j < ranges.length; j++) {
-      ranges[j] = map.map(ranges[j]);
-    }
-
-    map.forEach((_s, _e, from, to) => ranges.push(from, to));
-  } // Figure out which joinable points exist inside those ranges,
-  // by checking all node boundaries in their parent nodes.
-
-
-  const joinable = [];
-
-  for (let i = 0; i < ranges.length; i += 2) {
-    const from = ranges[i];
-    const to = ranges[i + 1];
-    const $from = tr.doc.resolve(from);
-    const depth = $from.sharedDepth(to);
-    const parent = $from.node(depth);
-
-    for (let index = $from.indexAfter(depth), pos = $from.after(depth + 1); pos <= to; ++index) {
-      const after = parent.maybeChild(index);
-
-      if (!after) {
-        break;
-      }
-
-      if (index && joinable.indexOf(pos) === -1) {
-        const before = parent.child(index - 1);
-
-        if (before.type === after.type && isJoinable(before, after)) {
-          joinable.push(pos);
-        }
-      }
-
-      pos += after.nodeSize;
-    }
-  } // Join the joinable points
-
-
-  joinable.sort((a, b) => a - b);
-
-  for (let i = joinable.length - 1; i >= 0; i--) {
-    if (canJoin(tr.doc, joinable[i])) {
-      tr.join(joinable[i]);
-    }
-  }
 }

package/dist/es2019/plugins/list/ui/ToolbarLists/index.js

@@ -1,5 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 import { injectIntl } from 'react-intl-next';
 import BulletListIcon from '@atlaskit/icon/glyph/editor/bullet-list';
@@ -8,7 +10,7 @@ import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import { toggleBulletList as toggleBulletListKeymap, toggleOrderedList as toggleOrderedListKeymap, tooltip, ToolTipContent } from '../../../../keymaps';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import DropdownMenu from '../../../../ui/DropdownMenu';
-import { ButtonGroup, Separator, Wrapper, ExpandIconWrapper, Shortcut } from '../../../../ui/styles';
+import { buttonGroupStyle, separatorStyles, wrapperStyle, expandIconWrapperStyle, shortcutStyle } from '../../../../ui/styles';
 import { toggleBulletList, toggleOrderedList } from '../../commands';
 import { messages } from '../../messages';
 import { INPUT_METHOD } from '../../../analytics';
@@ -53,7 +55,9 @@ class ToolbarLists extends PureComponent {
         },
         isDisabled: bulletListDisabled,
         isActive: Boolean(bulletListActive),
-        elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleBulletListKeymap))
+        elemAfter: jsx("div", {
+          css: shortcutStyle
+        }, tooltip(toggleBulletListKeymap))
       }, {
         key: 'orderedList',
         content: labelOrderedList,
@@ -62,7 +66,9 @@ class ToolbarLists extends PureComponent {
         },
         isDisabled: orderedListDisabled,
         isActive: Boolean(orderedListActive),
-        elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleOrderedListKeymap))
+        elemAfter: jsx("div", {
+          css: shortcutStyle
+        }, tooltip(toggleOrderedListKeymap))
       }];
       return [{
         items
@@ -129,9 +135,9 @@ class ToolbarLists extends PureComponent {
     if (!isSmall) {
       const labelUnorderedList = formatMessage(messages.unorderedList);
       const labelOrderedList = formatMessage(messages.orderedList);
-      return /*#__PURE__*/React.createElement(ButtonGroup, {
-        width: isReducedSpacing ? 'small' : 'large'
-      }, /*#__PURE__*/React.createElement(ToolbarButton, {
+      return jsx("span", {
+        css: buttonGroupStyle
+      }, jsx(ToolbarButton, {
         buttonId: TOOLBAR_BUTTON.BULLET_LIST,
         spacing: isReducedSpacing ? 'none' : 'default',
         onClick: this.handleBulletListClick,
@@ -139,14 +145,14 @@ class ToolbarLists extends PureComponent {
         "aria-pressed": bulletListActive,
         "aria-label": labelUnorderedList,
         disabled: bulletListDisabled || disabled,
-        title: /*#__PURE__*/React.createElement(ToolTipContent, {
+        title: jsx(ToolTipContent, {
           description: labelUnorderedList,
           keymap: toggleBulletListKeymap
         }),
-        iconBefore: /*#__PURE__*/React.createElement(BulletListIcon, {
+        iconBefore: jsx(BulletListIcon, {
           label: ""
         })
-      }), /*#__PURE__*/React.createElement(ToolbarButton, {
+      }), jsx(ToolbarButton, {
         buttonId: TOOLBAR_BUTTON.ORDERED_LIST,
         spacing: isReducedSpacing ? 'none' : 'default',
         onClick: this.handleOrderedListClick,
@@ -154,14 +160,16 @@ class ToolbarLists extends PureComponent {
         "aria-pressed": orderedListActive,
         "aria-label": labelOrderedList,
         disabled: orderedListDisabled || disabled,
-        title: /*#__PURE__*/React.createElement(ToolTipContent, {
+        title: jsx(ToolTipContent, {
           description: labelOrderedList,
           keymap: toggleOrderedListKeymap
         }),
-        iconBefore: /*#__PURE__*/React.createElement(NumberListIcon, {
+        iconBefore: jsx(NumberListIcon, {
           label: ""
         })
-      }), isSeparator && /*#__PURE__*/React.createElement(Separator, null));
+      }), isSeparator && jsx("span", {
+        css: separatorStyles
+      }));
     } else {
       const items = this.createItems();
       const {
@@ -170,7 +178,9 @@ class ToolbarLists extends PureComponent {
         popupsScrollableElement
       } = this.props;
       const labelLists = formatMessage(messages.lists);
-      return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(DropdownMenu, {
+      return jsx("span", {
+        css: wrapperStyle
+      }, jsx(DropdownMenu, {
         items: items,
         onItemActivated: this.onItemActivated,
         mountTo: popupsMountPoint,
@@ -181,7 +191,7 @@ class ToolbarLists extends PureComponent {
         fitHeight: 188,
         fitWidth: 175,
         shouldUseDefaultRole: true
-      }, /*#__PURE__*/React.createElement(ToolbarButton, {
+      }, jsx(ToolbarButton, {
         spacing: isReducedSpacing ? 'none' : 'default',
         selected: bulletListActive || orderedListActive,
         "aria-expanded": isDropdownOpen,
@@ -190,12 +200,18 @@ class ToolbarLists extends PureComponent {
         disabled: disabled,
         onClick: this.handleTriggerClick,
         title: labelLists,
-        iconBefore: /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(BulletListIcon, {
+        iconBefore: jsx("span", {
+          css: wrapperStyle
+        }, jsx(BulletListIcon, {
           label: labelLists
-        }), /*#__PURE__*/React.createElement(ExpandIconWrapper, null, /*#__PURE__*/React.createElement(ExpandIcon, {
+        }), jsx("span", {
+          css: expandIconWrapperStyle
+        }, jsx(ExpandIcon, {
           label: ""
         })))
-      })), isSeparator && /*#__PURE__*/React.createElement(Separator, null));
+      })), isSeparator && jsx("span", {
+        css: separatorStyles
+      }));
     }
   }
 

package/dist/es2019/plugins/media/commands/helpers.js

@@ -65,33 +65,35 @@ export const updateAllMediaNodesAttrs = (id, attrs, isMediaSingle) => (state, di
   } else {
     const mediaGroupNode = findMediaNode(mediaPluginState, id, isMediaSingle);
     mediaNodes = mediaGroupNode ? [mediaGroupNode] : [];
-  } // TODO: ED-7784 Clean media plugin state from having media that were previously removed.
-  // Sanity check
+  }
 
+  const isMediaNode = pos => {
+    const node = state.doc.nodeAt(pos);
+    return node && node.type.name === 'media';
+  };
 
-  const mediaType = state.schema.nodes.media;
-  mediaNodes = mediaNodes.filter(nodeWithPos => {
-    let node;
+  const validMediaNodePositions = mediaNodes.reduce((acc, {
+    getPos
+  }) => {
+    const pos = getPos();
 
-    try {
-      node = state.doc.nodeAt(nodeWithPos.getPos());
-    } catch (e) {
-      return false;
+    if (typeof pos === 'number' && !isMediaNode(pos)) {
+      return acc;
     }
 
-    return node && node.type === mediaType;
-  });
+    acc.push(pos);
+    return acc;
+  }, []);
 
-  if (mediaNodes.length === 0) {
+  if (validMediaNodePositions.length === 0) {
     return false;
   }
 
+  const tr = state.tr;
+  validMediaNodePositions.forEach(pos => tr.step(new SetAttrsStep(pos, attrs)));
+  tr.setMeta('addToHistory', false);
+
   if (dispatch) {
-    const tr = state.tr;
-    mediaNodes.forEach(({
-      getPos
-    }) => tr.step(new SetAttrsStep(getPos(), attrs)));
-    tr.setMeta('addToHistory', false);
     dispatch(tr);
   }
 
@@ -105,21 +107,39 @@ export const updateMediaNodeAttrs = (id, attrs, isMediaSingle) => (state, dispat
     return false;
   }
 
+  const tr = state.tr;
+  const pos = mediaNodeWithPos.getPos();
+  const node = tr.doc.nodeAt(pos);
+
+  if (!node || node.type.name !== 'media') {
+    return false;
+  }
+
+  tr.step(new SetAttrsStep(pos, attrs)).setMeta('addToHistory', false);
+
   if (dispatch) {
-    dispatch(state.tr.step(new SetAttrsStep(mediaNodeWithPos.getPos(), attrs)).setMeta('addToHistory', false));
+    dispatch(tr);
   }
 
   return true;
 };
 export const replaceExternalMedia = (pos, attrs) => (state, dispatch) => {
+  const tr = state.tr;
+  const node = tr.doc.nodeAt(pos);
+
+  if (!node || node.type.name !== 'media') {
+    return false;
+  }
+
+  tr.step(new SetAttrsStep(pos, {
+    type: 'file',
+    url: null,
+    ...attrs
+  })).setMeta('addToHistory', false);
+
   if (dispatch) {
-    dispatch(state.tr.step(new SetAttrsStep(pos, {
-      type: 'file',
-      url: null,
-      ...attrs
-    })).setMeta('addToHistory', false));
-    return true;
+    dispatch(tr);
   }
 
-  return false;
+  return true;
 };

package/dist/es2019/plugins/media/nodeviews/mediaSingle.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { MediaSingle, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
@@ -15,7 +17,7 @@ import { stateKey as mediaPluginKey } from '../pm-plugins/main';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { FigureWrapper, MediaSingleNodeSelector } from './styles';
+import { figureWrapper, MediaSingleNodeSelector } from './styles';
 import { floatingLayouts, isRichMediaInsideOfBlockNode } from '../../../utils/rich-media-utils';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
 import { isMediaBlobUrlFromAttrs } from '../utils/media-common';
@@ -291,14 +293,15 @@ export default class MediaSingleNode extends Component {
     const lineLength = this.getLineLength(view, getPos()) || this.props.lineLength;
     const isSelected = selected();
     const shouldShowPlaceholder = getMediaFeatureFlag('captions', mediaOptions.featureFlags) && node.childCount !== 2 && isSelected && state.selection instanceof NodeSelection;
-    const MediaChildren = /*#__PURE__*/React.createElement(FigureWrapper, {
+    const MediaChildren = jsx("figure", {
+      css: figureWrapper,
       className: MediaSingleNodeSelector
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       ref: this.props.forwardRef
-    }), shouldShowPlaceholder && /*#__PURE__*/React.createElement(CaptionPlaceholder, {
+    }), shouldShowPlaceholder && jsx(CaptionPlaceholder, {
       onClick: this.clickPlaceholder
     }));
-    return canResize ? /*#__PURE__*/React.createElement(ResizableMediaSingle, _extends({}, mediaSingleProps, {
+    return canResize ? jsx(ResizableMediaSingle, _extends({}, mediaSingleProps, {
       lineLength: lineLength,
       view: this.props.view,
       getPos: getPos,
@@ -309,7 +312,7 @@ export default class MediaSingleNode extends Component {
       allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
       selected: isSelected,
       dispatchAnalyticsEvent: this.props.dispatchAnalyticsEvent
-    }), MediaChildren) : /*#__PURE__*/React.createElement(MediaSingle, mediaSingleProps, MediaChildren);
+    }), MediaChildren) : jsx(MediaSingle, mediaSingleProps, MediaChildren);
   }
 
 }
@@ -413,14 +416,14 @@ class MediaSingleNodeView extends ReactNodeView {
     } = this.reactComponentProps; // getPos is a boolean for marks, since this is a node we know it must be a function
 
     const getPos = this.getPos;
-    return /*#__PURE__*/React.createElement(WithProviders, {
+    return jsx(WithProviders, {
       providers: ['mediaProvider', 'contextIdentifierProvider'],
       providerFactory: providerFactory,
       renderNode: ({
         mediaProvider,
         contextIdentifierProvider
       }) => {
-        return /*#__PURE__*/React.createElement(WithPluginState, {
+        return jsx(WithPluginState, {
           editorView: this.view,
           plugins: {
             width: widthPluginKey,
@@ -430,7 +433,7 @@ class MediaSingleNodeView extends ReactNodeView {
             width,
             mediaPluginState
           }) => {
-            return /*#__PURE__*/React.createElement(MediaSingleNode, {
+            return jsx(MediaSingleNode, {
               width: width.width,
               lineLength: width.lineLength,
               node: this.node,

package/dist/es2019/plugins/media/nodeviews/styles.js

@@ -1,28 +1,32 @@
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 export const MediaInlineNodeSelector = 'media-inline-node';
 export const MediaSingleNodeSelector = 'media-single-node';
-export const FigureWrapper = styled.figure`
+export const figureWrapper = css`
   margin: 0;
 `;
-FigureWrapper.displayName = 'FigureWrapper';
-const AbsoluteDiv = styled.div`
+const absoluteDiv = css`
   position: absolute;
   width: 100%;
   height: 100%;
 `;
-const ForcedDimensions = styled.div`
+const forcedDimensions = css`
   width: 100%;
   position: relative;
-  padding-bottom: ${props => props.dimensions.height / props.dimensions.width * 100}%;
 `;
 export const MediaCardWrapper = ({
   dimensions,
   children,
   onContextMenu
 }) => {
-  return /*#__PURE__*/React.createElement(ForcedDimensions, {
-    dimensions: dimensions,
+  return jsx("div", {
+    css: forcedDimensions,
+    style: {
+      paddingBottom: `${dimensions.height / dimensions.width * 100}%`
+    },
     onContextMenuCapture: onContextMenu
-  }, /*#__PURE__*/React.createElement(AbsoluteDiv, null, children));
+  }, jsx("div", {
+    css: absoluteDiv
+  }, children));
 };

package/dist/es2019/plugins/media/picker-facade.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { MediaPicker, isImagePreview } from '@atlaskit/media-picker';
+import { isImagePreview } from '@atlaskit/media-picker';
 export default class PickerFacade {
-  constructor(pickerType, config, pickerConfig, mediaPickerFactoryClass = MediaPicker, analyticsName) {
+  constructor(pickerType, config, pickerConfig, analyticsName) {
     _defineProperty(this, "onDragListeners", []);
 
     _defineProperty(this, "onStartListeners", []);
@@ -107,9 +107,7 @@ export default class PickerFacade {
 
     this.config = config;
     this.pickerConfig = pickerConfig;
-    this.mediaPickerFactoryClass = mediaPickerFactoryClass;
     this.pickerType = pickerType;
-    this.errorReporter = config.errorReporter;
     this.analyticsName = analyticsName;
     this.erroredFiles = new Set();
   }
@@ -119,8 +117,6 @@ export default class PickerFacade {
 
     if (this.pickerType === 'customMediaPicker') {
       picker = this.picker = this.pickerConfig;
-    } else if (this.pickerType === 'popup') {
-      picker = this.picker = await this.mediaPickerFactoryClass(this.config.mediaClientConfig, this.pickerConfig);
     }
 
     if (!picker) {
@@ -156,14 +152,6 @@ export default class PickerFacade {
     picker.removeAllListeners('upload-error');
     this.onStartListeners = [];
     this.onDragListeners = [];
-
-    try {
-      if (this.pickerType === 'popup') {
-        picker.teardown();
-      }
-    } catch (ex) {
-      this.errorReporter.captureException(ex);
-    }
   }
 
   setUploadParams(params) {
@@ -172,36 +160,6 @@ export default class PickerFacade {
     }
   }
 
-  onClose(cb) {
-    const {
-      picker
-    } = this;
-
-    if (this.pickerType === 'popup') {
-      const popupPicker = picker;
-      popupPicker.on('closed', cb);
-      return () => popupPicker.off('closed', cb);
-    }
-
-    return () => {};
-  }
-
-  show() {
-    if (this.pickerType === 'popup') {
-      try {
-        this.picker.show();
-      } catch (ex) {
-        this.errorReporter.captureException(ex);
-      }
-    }
-  }
-
-  hide() {
-    if (this.pickerType === 'popup') {
-      this.picker.hide();
-    }
-  }
-
   onNewMedia(cb) {
     this.onStartListeners.push(cb);
   }