@atlaskit/editor-core 171.0.0 → 172.0.1

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.clickAreaClickHandler = void 0;
+exports.clickAreaClickHandler = exports.checkForModal = void 0;
 
 var _dom = require("../../utils/dom");
 
@@ -23,10 +23,36 @@ 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
+ */
+
+
+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;
+};
+
+exports.checkForModal = checkForModal;
 
 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
@@ -38,13 +64,10 @@ var clickAreaClickHandler = function clickAreaClickHandler(view, event) {
 
   var isTextAreaClicked = target.nodeName === 'TEXTAREA';
   var isBreadcrumbClicked = !!(0, _dom.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' && (0, _dom.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);
@@ -54,15 +77,21 @@ var clickAreaClickHandler = function clickAreaClickHandler(view, event) {
 exports.clickAreaClickHandler = clickAreaClickHandler;
 
 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) {
+    (0, _commands.addParagraphAtEnd)(tr);
+  }
 
   if ((0, _gapCursorSelection.hasGapCursorPlugin)(state)) {
-    (0, _gapCursorSelection.setSelectionTopLevelBlocks)(tr, event, dom, view.posAtCoords.bind(view), editorFocused);
+    (0, _gapCursorSelection.setSelectionTopLevelBlocks)(tr, event, dom, view.posAtCoords.bind(view), isEditorFocused);
   }
 
   if (!tr.docChanged && !tr.selectionSet) {
@@ -76,12 +105,4 @@ var outsideProsemirrorEditorClickHandler = function outsideProsemirrorEditorClic
   view.focus();
   event.stopPropagation();
   event.preventDefault();
-};
-
-var appendEmptyParagraph = function appendEmptyParagraph(event, dom, tr) {
-  var bottomAreaClicked = event.clientY > dom.getBoundingClientRect().bottom;
-
-  if (bottomAreaClicked) {
-    (0, _commands.addParagraphAtEnd)(tr);
-  }
 };

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

@@ -79,8 +79,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 var CommentEditorMargin = 14;
 var CommentEditorSmallerMargin = 8;
-var commentEditorStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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, (0, _tokens.token)('color.background.input', 'white'), (0, _tokens.token)('color.border', _colors.N40), (0, _constants.borderRadius)());
-var ContentArea = (0, _ContentStyles.createEditorContentStyle)((0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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.GRID_GUTTER, CommentEditorMargin - _grid.GRID_GUTTER, CommentEditorMargin - _grid.GRID_GUTTER, _Toolbar2.TableControlsPadding, _commonStyles.tableCommentEditorStyles));
+var commentEditorStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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, (0, _tokens.token)('color.background.input', 'white'), (0, _tokens.token)('color.border', _colors.N40), (0, _constants.borderRadius)());
+var ContentArea = (0, _ContentStyles.createEditorContentStyle)((0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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.GRID_GUTTER, CommentEditorMargin - _grid.GRID_GUTTER, CommentEditorMargin - _grid.GRID_GUTTER, _Toolbar2.TableControlsPadding, _commonStyles.tableCommentEditorStyles));
 ContentArea.displayName = 'ContentArea';
 var secondaryToolbarStyle = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  display: flex;\n  padding: 12px 1px;\n"])));
 

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

@@ -88,11 +88,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var contentStyles = function contentStyles(props) {
-  var _props$featureFlags;
-
   return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme
-  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _tokens.token)('color.border.focused', '#8cf'), _styles17.placeholderTextStyles, _styles5.placeholderStyles, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.codeBlockSyntaxHighlighting ? (0, _styles7.highlightingCodeBlockStyles)(props) : (0, _styles7.codeBlockStyles)(props), (0, _styles6.blocktypeStyles)(props), (0, _styles16.textFormattingStyles)(props), _styles.textColorStyles, _styles8.listsStyles, (0, _styles9.ruleStyles)(props), _styles10.mediaStyles, _styles11.layoutStyles, _styles3.telepointerStyle, _styles4.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _styles12.panelStyles)(props), _styles13.fakeCursorStyles, _styles14.mentionsStyles, _styles15.emojiStyles, _styles.tasksAndDecisionsStyles, _styles18.gridStyles, _styles19.linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _styles20.extensionStyles, (0, _styles21.expandStyles)(props), _styles22.findReplaceStyles, _styles23.taskDecisionStyles, _styles24.statusStyles, (0, _styles.annotationSharedStyles)(props), _styles25.smartCardStyles, _styles.smartCardSharedStyles, _styles26.dateStyles, _styled.embedCardStyles, _styles2.unsupportedStyles, _style.ClassNames.FLOATING_TOOLBAR_COMPONENT);
+  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _tokens.token)('color.border.focused', '#8cf'), _styles17.placeholderTextStyles, _styles5.placeholderStyles, (0, _styles7.codeBlockStyles)(props), (0, _styles6.blocktypeStyles)(props), (0, _styles16.textFormattingStyles)(props), _styles.textColorStyles, _styles8.listsStyles, (0, _styles9.ruleStyles)(props), _styles10.mediaStyles, _styles11.layoutStyles, _styles3.telepointerStyle, _styles4.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _styles12.panelStyles)(props), _styles13.fakeCursorStyles, _styles14.mentionsStyles, _styles15.emojiStyles, _styles.tasksAndDecisionsStyles, _styles18.gridStyles, _styles19.linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _styles20.extensionStyles, (0, _styles21.expandStyles)(props), _styles22.findReplaceStyles, _styles23.taskDecisionStyles, _styles24.statusStyles, (0, _styles.annotationSharedStyles)(props), _styles25.smartCardStyles, _styles.smartCardSharedStyles, _styles26.dateStyles, _styled.embedCardStyles, _styles2.unsupportedStyles, _style.ClassNames.FLOATING_TOOLBAR_COMPONENT);
 };
 
 var createEditorContentStyle = function createEditorContentStyle(styles) {

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

@@ -0,0 +1,215 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
+
+var _analyticsNext = require("@atlaskit/analytics-next");
+
+var _Layer = _interopRequireDefault(require("../Layer"));
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _components = require("@atlaskit/theme/components");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+
+var packageName = "@atlaskit/editor-core";
+var packageVersion = "172.0.1";
+var halfFocusRing = 1;
+var dropOffset = "0, ".concat((0, _constants.gridSize)(), "px");
+
+var DropList = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(DropList, _Component);
+
+  var _super = _createSuper(DropList);
+
+  function DropList() {
+    var _this;
+
+    (0, _classCallCheck2.default)(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));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "wrapperStyles", (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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;'));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "triggerStyles", (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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;'));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "menuWrapper", function (theme) {
+      return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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    "])), (0, _components.themed)({
+        light: (0, _tokens.token)('color.text', _colors.N900),
+        dark: (0, _tokens.token)('color.text', _colors.DN600)
+      })(theme), (0, _components.themed)({
+        light: (0, _tokens.token)('elevation.surface.overlay', _colors.N0),
+        dark: (0, _tokens.token)('elevation.surface.overlay', _colors.DN50)
+      })(theme), (0, _constants.borderRadius)(), (0, _constants.gridSize)() / 2, (0, _constants.gridSize)(), (0, _constants.gridSize)() / 4, _colors.N50A, _colors.N60A, (0, _constants.gridSize)() / 2);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentDidUpdate", function () {
+      if (_this.props.isOpen) {
+        _this.setContentWidth();
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentWillUnmount", function () {
+      document.removeEventListener('click', _this.handleClickOutside, true);
+      document.removeEventListener('keydown', _this.handleEsc);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setContentWidth", function () {
+      var _assertThisInitialize = (0, _assertThisInitialized2.default)(_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");
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleEsc", function (event) {
+      if ((event.key === 'Escape' || event.key === 'Esc') && _this.props.isOpen) {
+        _this.close(event);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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);
+          }
+        }
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "close", function (event) {
+      if (_this.props.onOpenChange) {
+        _this.props.onOpenChange({
+          isOpen: false,
+          event: event
+        });
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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();
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleTriggerRef", function (ref) {
+      _this.triggerRef = ref;
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(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 ? (0, _react2.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 (0, _react2.jsx)("div", {
+        css: this.wrapperStyles
+      }, (0, _react2.jsx)(_Layer.default, {
+        content: layerContent,
+        offset: dropOffset,
+        position: position,
+        onPositioned: onPositioned
+      }, (0, _react2.jsx)("div", {
+        css: this.triggerStyles,
+        ref: this.handleTriggerRef
+      }, trigger)));
+    }
+  }]);
+  return DropList;
+}(_react.Component);
+
+var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
+
+var _default = (0, _analyticsNext.withAnalyticsContext)({
+  componentName: 'droplist',
+  packageName: packageName,
+  packageVersion: packageVersion
+})((0, _analyticsNext.withAnalyticsEvents)({
+  onOpenChange: createAndFireEventOnAtlaskit({
+    action: 'toggled',
+    actionSubject: 'droplist',
+    attributes: {
+      componentName: 'droplist',
+      packageName: packageName,
+      packageVersion: packageVersion
+    }
+  })
+})(DropList));
+
+exports.default = _default;

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

@@ -25,7 +25,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _droplist = _interopRequireDefault(require("@atlaskit/droplist"));
+var _DropList = _interopRequireDefault(require("../DropList"));
 
 var _ui = require("@atlaskit/editor-common/ui");
 
@@ -100,13 +100,10 @@ var Dropdown = /*#__PURE__*/function (_PureComponent) {
           height: 0,
           minWidth: fitWidth || 0
         }
-      }, /*#__PURE__*/_react.default.createElement(_droplist.default, {
-        disabled: true,
+      }, /*#__PURE__*/_react.default.createElement(_DropList.default, {
         isOpen: true,
         onOpenChange: onOpenChange,
-        appearance: "tall",
         position: popupPlacement.join(' '),
-        shouldFlip: false,
         shouldFitContainer: true
       }, children)));
     }