@atlaskit/editor-core 171.0.1 → 172.0.0

package/dist/esm/plugins/toolbar-lists-indentation/ui/index.js

@@ -14,7 +14,9 @@ export default function ToolbarListsIndentation(props) {
       showIndentationButtons = props.showIndentationButtons,
       popupsMountPoint = props.popupsMountPoint,
       popupsBoundariesElement = props.popupsBoundariesElement,
-      popupsScrollableElement = props.popupsScrollableElement;
+      popupsScrollableElement = props.popupsScrollableElement,
+      indentDisabled = props.indentDisabled,
+      outdentDisabled = props.outdentDisabled;
 
   if (isSmall) {
     return jsx(ToolbarDropdown, {
@@ -28,6 +30,8 @@ export default function ToolbarListsIndentation(props) {
       showIndentationButtons: showIndentationButtons,
       orderedListActive: orderedListActive,
       orderedListDisabled: orderedListDisabled,
+      indentDisabled: indentDisabled,
+      outdentDisabled: outdentDisabled,
       disabled: disabled,
       onItemActivated: onItemActivated
     });
@@ -41,6 +45,8 @@ export default function ToolbarListsIndentation(props) {
     showIndentationButtons: showIndentationButtons,
     orderedListActive: orderedListActive,
     orderedListDisabled: orderedListDisabled,
+    indentDisabled: indentDisabled,
+    outdentDisabled: outdentDisabled,
     disabled: disabled,
     onItemActivated: onItemActivated
   });

package/dist/esm/plugins/toolbar-lists-indentation/ui/onItemActivated.js

@@ -1,5 +1,8 @@
-import { toggleBulletList, toggleOrderedList } from '../../list/commands';
+import { indentList, outdentList, toggleBulletList, toggleOrderedList } from '../../list/commands';
+import { getIndentCommand as indentParagraphOrHeading, getOutdentCommand as outdentParagraphOrHeading } from '../../indentation/commands';
+import { getIndentCommand as indentTaskList, getUnindentCommand as outdentTaskList } from '../../tasks-and-decisions/pm-plugins/keymaps';
 import { INPUT_METHOD } from '../../analytics';
+import { pluginKey as indentationButtonsPluginKey } from '../pm-plugins/indentation-buttons';
 export function onItemActivated(_ref) {
   var buttonName = _ref.buttonName,
       editorView = _ref.editorView;
@@ -14,26 +17,41 @@ export function onItemActivated(_ref) {
       break;
 
     case 'indent':
-      editorView.someProp('handleKeyDown', function (handleKeyDown) {
-        return handleKeyDown(editorView, new KeyboardEvent('keydown', {
-          bubbles: true,
-          cancelable: true,
-          key: 'Tab',
-          code: 'Tab'
-        }));
-      });
-      break;
+      {
+        var node = indentationButtonsPluginKey.getState(editorView.state).node;
+
+        if (node === 'paragraph_heading') {
+          indentParagraphOrHeading(INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+        }
+
+        if (node === 'list') {
+          indentList(INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+        }
+
+        if (node === 'taskList') {
+          indentTaskList(INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+        }
+
+        break;
+      }
 
     case 'outdent':
-      editorView.someProp('handleKeyDown', function (handleKeyDown) {
-        return handleKeyDown(editorView, new KeyboardEvent('keydown', {
-          bubbles: true,
-          cancelable: true,
-          shiftKey: true,
-          key: 'Tab',
-          code: 'Tab'
-        }));
-      });
-      break;
+      {
+        var _node = indentationButtonsPluginKey.getState(editorView.state).node;
+
+        if (_node === 'paragraph_heading') {
+          outdentParagraphOrHeading(INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+        }
+
+        if (_node === 'list') {
+          outdentList(INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+        }
+
+        if (_node === 'taskList') {
+          outdentTaskList(INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+        }
+
+        break;
+      }
   }
 }

package/dist/esm/plugins/type-ahead/transforms/open-typeahead-at-cursor.js

@@ -1,6 +1,7 @@
 import { TextSelection } from 'prosemirror-state';
 import { pluginKey } from '../pm-plugins/key';
 import { ACTIONS } from '../pm-plugins/actions';
+import { browser } from '@atlaskit/editor-common/utils';
 export var openTypeAhead = function openTypeAhead(props) {
   return function (tr) {
     var triggerHandler = props.triggerHandler,
@@ -21,6 +22,8 @@ export var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
       inputMethod = _ref.inputMethod,
       query = _ref.query;
   return function (tr) {
+    var _selection$$head, _selection$$head$pare, _selection$$head$pare2, _selection$$head$pare3;
+
     openTypeAhead({
       triggerHandler: triggerHandler,
       inputMethod: inputMethod,
@@ -44,6 +47,12 @@ export var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
 
     if (nodeAtCursor && isPlaceholderAtCursorPosition) {
       tr.delete(cursorPos, cursorPos + nodeAtCursor.nodeSize);
+    } // ME-2375 remove the superfluous '@' inserted before decoration
+    // by composition (https://github.com/ProseMirror/prosemirror/issues/903)
+
+
+    if (browser.chrome && browser.android && cursorPos > 2 && !!(selection !== null && selection !== void 0 && (_selection$$head = selection.$head) !== null && _selection$$head !== void 0 && (_selection$$head$pare = _selection$$head.parent) !== null && _selection$$head$pare !== void 0 && _selection$$head$pare.textContent) && (_selection$$head$pare2 = (_selection$$head$pare3 = selection.$head.parent.textContent).endsWith) !== null && _selection$$head$pare2 !== void 0 && _selection$$head$pare2.call(_selection$$head$pare3, '@')) {
+      tr.delete(cursorPos - 1, cursorPos);
     }
 
     return tr;

package/dist/esm/types/browser.js

@@ -0,0 +1,2 @@
+var SupportedBrowsers = ['ie', 'gecko', 'chrome', 'safari'];
+export {};

package/dist/esm/ui/Addon/click-area-helper.js

@@ -13,10 +13,34 @@ var insideContentArea = function insideContentArea(ref) {
 
   return false;
 };
+/**
+ * @see ED-14699 - check if editor is inside a modal to continue to bring cursor to input when
+ * any part of the editor container is clicked
+ *
+ * Handles two cases when a click event is fired:
+ *
+ * 1. if editor (e.g. comment inside of Jira ticket view) is inside modal then ensure focus and cursor is brought to the input
+ * 2. if another modal is open (e.g. delete confirmation modal for confluence table) then ignore clicks as they shouldn't influence editor state
+ */
+
+
+export var checkForModal = function checkForModal(target) {
+  var modalDialog = target.closest('[role=dialog]');
+
+  if (modalDialog) {
+    // return false if not an editor inside modal, otherwise return true
+    return !!(modalDialog !== null && modalDialog !== void 0 && modalDialog.querySelector('.akEditor'));
+  } // no modal present so we can return true
+
+
+  return true;
+};
 
 var clickAreaClickHandler = function clickAreaClickHandler(view, event) {
-  var contentArea = event.currentTarget.querySelector('.ak-editor-content-area');
-  var editorFocused = !!(view && view.hasFocus());
+  var _view$hasFocus;
+
+  var isTargetContentArea = event.currentTarget.querySelector('.ak-editor-content-area');
+  var isEditorFocused = !!(view !== null && view !== void 0 && (_view$hasFocus = view.hasFocus) !== null && _view$hasFocus !== void 0 && _view$hasFocus.call(view));
   var target = event.target; // @see https://product-fabric.atlassian.net/browse/ED-4287
   // click event gets triggered twice on a checkbox (on <label> first and then on <input>)
   // by the time it gets triggered on input, PM already re-renders nodeView and detaches it from DOM
@@ -28,13 +52,10 @@ var clickAreaClickHandler = function clickAreaClickHandler(view, event) {
 
   var isTextAreaClicked = target.nodeName === 'TEXTAREA';
   var isBreadcrumbClicked = !!closestElement(target, 'nav[aria-label="Breadcrumbs"]');
-  var targetIsNotContentArea = !contentArea;
-  var tragetIsNotChildOfContentArea = !insideContentArea(target.parentNode);
-  var editorIsNotInFocus = editorFocused === false;
+  var isTargetChildOfContentArea = insideContentArea(target.parentNode);
   var selection = window.getSelection();
   var isEditorPopupTextSelected = (selection === null || selection === void 0 ? void 0 : selection.type) === 'Range' && closestElement(selection === null || selection === void 0 ? void 0 : selection.anchorNode, '[data-editor-popup]');
-  var isModalDialog = !!target.closest('[role=dialog]');
-  var isClickOutsideEditor = (targetIsNotContentArea || tragetIsNotChildOfContentArea || editorIsNotInFocus) && !isInputClicked && !isTextAreaClicked && !isPopupClicked && !isModalDialog && !isBreadcrumbClicked && !isPopupClicked && !isEditorPopupTextSelected;
+  var isClickOutsideEditor = (!isTargetContentArea || !isTargetChildOfContentArea || !isEditorFocused) && !isInputClicked && !isTextAreaClicked && !isPopupClicked && !isBreadcrumbClicked && !isEditorPopupTextSelected && checkForModal(target); // click was within editor container and focus should be brought to input
 
   if (isClickOutsideEditor && view) {
     outsideProsemirrorEditorClickHandler(view, event);
@@ -42,15 +63,21 @@ var clickAreaClickHandler = function clickAreaClickHandler(view, event) {
 };
 
 var outsideProsemirrorEditorClickHandler = function outsideProsemirrorEditorClickHandler(view, event) {
+  var _view$hasFocus2;
+
   var dispatch = view.dispatch,
       dom = view.dom,
       state = view.state;
-  var editorFocused = !!(view && view.hasFocus());
   var tr = state.tr;
-  appendEmptyParagraph(event, dom, tr);
+  var isEditorFocused = !!(view !== null && view !== void 0 && (_view$hasFocus2 = view.hasFocus) !== null && _view$hasFocus2 !== void 0 && _view$hasFocus2.call(view));
+  var isBottomAreaClicked = event.clientY > dom.getBoundingClientRect().bottom;
+
+  if (isBottomAreaClicked) {
+    addParagraphAtEnd(tr);
+  }
 
   if (hasGapCursorPlugin(state)) {
-    setSelectionTopLevelBlocks(tr, event, dom, view.posAtCoords.bind(view), editorFocused);
+    setSelectionTopLevelBlocks(tr, event, dom, view.posAtCoords.bind(view), isEditorFocused);
   }
 
   if (!tr.docChanged && !tr.selectionSet) {
@@ -66,12 +93,4 @@ var outsideProsemirrorEditorClickHandler = function outsideProsemirrorEditorClic
   event.preventDefault();
 };
 
-var appendEmptyParagraph = function appendEmptyParagraph(event, dom, tr) {
-  var bottomAreaClicked = event.clientY > dom.getBoundingClientRect().bottom;
-
-  if (bottomAreaClicked) {
-    addParagraphAtEnd(tr);
-  }
-};
-
 export { clickAreaClickHandler };

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

@@ -40,8 +40,8 @@ import { TableControlsPadding, MainToolbar, mainToolbarCustomComponentsSlotStyle
 import { createEditorContentStyle } from '../../ContentStyles';
 var CommentEditorMargin = 14;
 var CommentEditorSmallerMargin = 8;
-var commentEditorStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n\n  .less-margin .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  min-width: 272px;\n  /* Border + Toolbar + Footer + (Paragraph + ((Parahraph + Margin) * (DefaultLines - 1)) */\n  /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */\n\n  height: auto;\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n\n  max-width: inherit;\n  word-wrap: break-word;\n"])), CommentEditorSmallerMargin, CommentEditorSmallerMargin, token('color.background.input', 'white'), token('color.border', N40), borderRadius());
-var ContentArea = createEditorContentStyle(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  line-height: 24px;\n\n  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n  /** Hack for tables controlls. Otherwise marging collapse and controlls are misplaced. **/\n  .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  .gridParent {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: calc(100% + ", "px);\n  }\n\n  padding: ", "px;\n\n  ", ";\n"])), CommentEditorMargin, CommentEditorMargin, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, TableControlsPadding, tableCommentEditorStyles));
+var commentEditorStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n\n  .less-margin .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  min-width: 272px;\n  /* Border + Toolbar + Footer + (Paragraph + ((Paragraph + Margin) * (DefaultLines - 1)) */\n  /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */\n\n  height: auto;\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n\n  max-width: inherit;\n  word-wrap: break-word;\n"])), CommentEditorSmallerMargin, CommentEditorSmallerMargin, token('color.background.input', 'white'), token('color.border', N40), borderRadius());
+var ContentArea = createEditorContentStyle(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  line-height: 24px;\n\n  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n  /** Hack for table controls. Otherwise margin collapse and controls are misplaced. **/\n  .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  .gridParent {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: calc(100% + ", "px);\n  }\n\n  padding: ", "px;\n\n  ", ";\n"])), CommentEditorMargin, CommentEditorMargin, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, TableControlsPadding, tableCommentEditorStyles));
 ContentArea.displayName = 'ContentArea';
 var secondaryToolbarStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  display: flex;\n  padding: 12px 1px;\n"])));
 

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

@@ -14,7 +14,7 @@ import { gapCursorStyles } from '../../plugins/selection/gap-cursor/styles';
 import { tableStyles } from '../../plugins/table/ui/common-styles';
 import { placeholderStyles } from '../../plugins/placeholder/styles';
 import { blocktypeStyles } from '../../plugins/block-type/styles';
-import { codeBlockStyles, highlightingCodeBlockStyles } from '../../plugins/code-block/styles';
+import { codeBlockStyles } from '../../plugins/code-block/styles';
 import { listsStyles } from '../../plugins/list/styles';
 import { ruleStyles } from '../../plugins/rule/styles';
 import { mediaStyles } from '../../plugins/media/styles';
@@ -40,11 +40,9 @@ import { useFeatureFlags } from '../../plugins/feature-flags-context';
 import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
 
 var contentStyles = function contentStyles(props) {
-  var _props$featureFlags;
-
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap,\n  .pm-table-cell-content-wrap div.fabric-editor-block-mark {\n    p:first-of-type {\n      margin-top: 0;\n    }\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), editorFontSize({
     theme: props.theme
-  }), whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, token('color.border.focused', '#8cf'), placeholderTextStyles, placeholderStyles, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.codeBlockSyntaxHighlighting ? highlightingCodeBlockStyles(props) : codeBlockStyles(props), blocktypeStyles(props), textFormattingStyles(props), textColorStyles, listsStyles, ruleStyles(props), mediaStyles, layoutStyles, telepointerStyle, gapCursorStyles, tableStyles(props), panelStyles(props), fakeCursorStyles, mentionsStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(props), findReplaceStyles, taskDecisionStyles, statusStyles, annotationSharedStyles(props), smartCardStyles, smartCardSharedStyles, dateStyles, embedCardStyles, unsupportedStyles, ClassNames.FLOATING_TOOLBAR_COMPONENT);
+  }), whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, token('color.border.focused', '#8cf'), placeholderTextStyles, placeholderStyles, codeBlockStyles(props), blocktypeStyles(props), textFormattingStyles(props), textColorStyles, listsStyles, ruleStyles(props), mediaStyles, layoutStyles, telepointerStyle, gapCursorStyles, tableStyles(props), panelStyles(props), fakeCursorStyles, mentionsStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(props), findReplaceStyles, taskDecisionStyles, statusStyles, annotationSharedStyles(props), smartCardStyles, smartCardSharedStyles, dateStyles, embedCardStyles, unsupportedStyles, ClassNames.FLOATING_TOOLBAR_COMPONENT);
 };
 
 export var createEditorContentStyle = function createEditorContentStyle(styles) {

package/dist/esm/ui/DropList/index.js

@@ -0,0 +1,203 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+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; } }
+
+/** @jsx jsx */
+import { Component } from 'react';
+import { css, jsx } from '@emotion/react';
+import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import Layer from '../Layer';
+import { borderRadius, gridSize } from '@atlaskit/theme/constants';
+import { N0, DN50, DN600, N50A, N60A, N900 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
+import { token } from '@atlaskit/tokens';
+var packageName = "@atlaskit/editor-core";
+var packageVersion = "172.0.0";
+var halfFocusRing = 1;
+var dropOffset = "0, ".concat(gridSize(), "px");
+
+var DropList = /*#__PURE__*/function (_Component) {
+  _inherits(DropList, _Component);
+
+  var _super = _createSuper(DropList);
+
+  function DropList() {
+    var _this;
+
+    _classCallCheck(this, DropList);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "wrapperStyles", css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", "\n    transition-duration: 0.2s;\n    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n  "])), _this.props.shouldFitContainer ? 'display: block; flex: 1 1 auto;' : 'display: inline-flex;'));
+
+    _defineProperty(_assertThisInitialized(_this), "triggerStyles", css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    transition-duration: 0.2s;\n    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n    ", "\n  "])), _this.props.shouldFitContainer ? 'display: block; box-sizing: border-box;' : 'display: inline-flex;'));
+
+    _defineProperty(_assertThisInitialized(_this), "menuWrapper", function (theme) {
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      color: ", ";\n      background-color: ", ";\n      border-radius: ", "px;\n      box-shadow: 0 ", "px ", "px -", "px ", ",\n        0 0 1px ", ";\n      box-sizing: border-box;\n      overflow: auto;\n      padding: ", "px 0;\n      max-height: 90vh;\n    "])), themed({
+        light: token('color.text', N900),
+        dark: token('color.text', DN600)
+      })(theme), themed({
+        light: token('elevation.surface.overlay', N0),
+        dark: token('elevation.surface.overlay', DN50)
+      })(theme), borderRadius(), gridSize() / 2, gridSize(), gridSize() / 4, N50A, N60A, gridSize() / 2);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
+      _this.setContentWidth(); // We use a captured event here to avoid a radio or checkbox dropdown item firing its
+      // click event first, which would cause a re-render of the element and prevent DropList
+      // from detecting the actual source of this original click event.
+
+
+      document.addEventListener('click', _this.handleClickOutside, true);
+      document.addEventListener('keydown', _this.handleEsc);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function () {
+      if (_this.props.isOpen) {
+        _this.setContentWidth();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "componentWillUnmount", function () {
+      document.removeEventListener('click', _this.handleClickOutside, true);
+      document.removeEventListener('keydown', _this.handleEsc);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "setContentWidth", function () {
+      var _assertThisInitialize = _assertThisInitialized(_this),
+          dropContentRef = _assertThisInitialize.dropContentRef,
+          triggerRef = _assertThisInitialize.triggerRef;
+
+      var shouldFitContainer = _this.props.shouldFitContainer; // We need to manually set the content width to match the trigger width
+
+      if (shouldFitContainer && dropContentRef && triggerRef) {
+        dropContentRef.style.width = "".concat(triggerRef.offsetWidth - halfFocusRing * 2, "px");
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleEsc", function (event) {
+      if ((event.key === 'Escape' || event.key === 'Esc') && _this.props.isOpen) {
+        _this.close(event);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleClickOutside", function (event) {
+      if (_this.props.isOpen) {
+        if (event.target instanceof Node) {
+          // Rather than check for the target within the entire DropList, we specify the trigger/content.
+          // This aids with future effort in scroll-locking DropList when isMenuFixed is enabled; the scroll
+          // blanket which stretches to the viewport should not stop 'close' from being triggered.
+          var withinTrigger = _this.triggerRef && _this.triggerRef.contains(event.target);
+
+          var withinContent = _this.dropContentRef && _this.dropContentRef.contains(event.target);
+
+          if (!withinTrigger && !withinContent) {
+            _this.close(event);
+          }
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "close", function (event) {
+      if (_this.props.onOpenChange) {
+        _this.props.onOpenChange({
+          isOpen: false,
+          event: event
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleContentRef", function (ref) {
+      _this.dropContentRef = ref; // If the dropdown has just been opened, we focus on the containing element so the
+      // user can tab to the first dropdown item. We will only receive this ref if isOpen
+      // is true or null, so no need to check for truthiness here.
+
+      if (ref) {
+        ref.focus();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleTriggerRef", function (ref) {
+      _this.triggerRef = ref;
+    });
+
+    return _this;
+  }
+
+  _createClass(DropList, [{
+    key: "getChildContext",
+    value: function getChildContext() {
+      return {
+        shouldAllowMultilineItems: false
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          children = _this$props.children,
+          isOpen = _this$props.isOpen,
+          position = _this$props.position,
+          trigger = _this$props.trigger,
+          onPositioned = _this$props.onPositioned,
+          testId = _this$props.testId;
+      var layerContent = isOpen ? jsx("div", {
+        css: function css(theme) {
+          return _this2.menuWrapper({
+            theme: theme
+          });
+        },
+        "data-role": "droplistContent",
+        "data-testid": testId && "".concat(testId, "--content"),
+        ref: this.handleContentRef
+      }, children) : null;
+      return jsx("div", {
+        css: this.wrapperStyles
+      }, jsx(Layer, {
+        content: layerContent,
+        offset: dropOffset,
+        position: position,
+        onPositioned: onPositioned
+      }, jsx("div", {
+        css: this.triggerStyles,
+        ref: this.handleTriggerRef
+      }, trigger)));
+    }
+  }]);
+
+  return DropList;
+}(Component);
+
+var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
+export default withAnalyticsContext({
+  componentName: 'droplist',
+  packageName: packageName,
+  packageVersion: packageVersion
+})(withAnalyticsEvents({
+  onOpenChange: createAndFireEventOnAtlaskit({
+    action: 'toggled',
+    actionSubject: 'droplist',
+    attributes: {
+      componentName: 'droplist',
+      packageName: packageName,
+      packageVersion: packageVersion
+    }
+  })
+})(DropList));

package/dist/esm/ui/Dropdown/index.js

@@ -11,9 +11,8 @@ 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; } }
 
 import React from 'react';
-import { PureComponent } from 'react'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-
-import DropdownList from '@atlaskit/droplist';
+import { PureComponent } from 'react';
+import DropdownList from '../DropList';
 import { Popup } from '@atlaskit/editor-common/ui';
 import withOuterListeners from '../with-outer-listeners';
 
@@ -83,12 +82,9 @@ export var Dropdown = /*#__PURE__*/function (_PureComponent) {
           minWidth: fitWidth || 0
         }
       }, /*#__PURE__*/React.createElement(DropdownList, {
-        disabled: true,
         isOpen: true,
         onOpenChange: onOpenChange,
-        appearance: "tall",
         position: popupPlacement.join(' '),
-        shouldFlip: false,
         shouldFitContainer: true
       }, children)));
     }