@atlaskit/editor-core 176.0.3 → 177.0.1

package/dist/cjs/plugins/find-replace/ui/styles.js

@@ -13,8 +13,6 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _templateObject;
@@ -26,7 +24,7 @@ exports.replaceSectionButtonStyles = replaceSectionButtonStyles;
 var ruleStyles = (0, _react.css)({
   width: '100%',
   border: 'none',
-  backgroundColor: "".concat((0, _tokens.token)('color.border', _colors.N30A)),
+  backgroundColor: "".concat("var(--ds-border, ".concat(_colors.N30A, ")")),
   margin: '4px 0px',
   height: '1px',
   borderRadius: '1px'
@@ -43,7 +41,7 @@ exports.wrapperStyles = wrapperStyles;
 var sectionWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n\n  & > * {\n    display: inline-flex;\n    height: 32px;\n    flex: 0 0 auto;\n  }\n\n  & > [data-ds--text-field--container] {\n    display: flex;\n    flex: 1 1 auto;\n  }\n"])));
 exports.sectionWrapperStyles = sectionWrapperStyles;
 var countStyles = (0, _react.css)({
-  color: "".concat((0, _tokens.token)('color.text.subtlest', _colors.N60)),
+  color: "".concat("var(--ds-text-subtlest, ".concat(_colors.N60, ")")),
   fontSize: "".concat((0, _editorSharedStyles.relativeFontSizeToBase16)(12)),
   flex: '0 0 auto',
   justifyContent: 'center',

package/dist/cjs/plugins/floating-toolbar/index.js

@@ -224,7 +224,9 @@ var floatingToolbarPlugin = function floatingToolbarPlugin() {
               _config$offset = config.offset,
               offset = _config$offset === void 0 ? [0, 12] : _config$offset,
               forcePlacement = config.forcePlacement,
-              onPositionCalculated = config.onPositionCalculated;
+              preventPopupOverflow = config.preventPopupOverflow,
+              onPositionCalculated = config.onPositionCalculated,
+              focusTrap = config.focusTrap;
           var targetRef = getDomRef(editorView, dispatchAnalyticsEvent);
 
           if (!targetRef || editorDisabledPlugin && editorDisabledPlugin.editorDisabled) {
@@ -250,6 +252,7 @@ var floatingToolbarPlugin = function floatingToolbarPlugin() {
 
           var confirmButtonItem = confirmDialogForItem ? toolbarItems[confirmDialogForItem] : undefined;
           var scrollable = (0, _featureFlagsContext.getFeatureFlags)(editorView.state).floatingToolbarCopyButton && config.scrollable;
+          var confirmDialogOptions = typeof (confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog) === 'function' ? confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog() : confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog;
           return /*#__PURE__*/_react.default.createElement(_ErrorBoundary.ErrorBoundary, {
             component: _analytics.ACTION_SUBJECT.FLOATING_TOOLBAR_PLUGIN,
             componentId: (0, _camelCase.default)(title),
@@ -272,7 +275,9 @@ var floatingToolbarPlugin = function floatingToolbarPlugin() {
             onPositionCalculated: customPositionCalculation,
             style: scrollable ? {
               maxWidth: '100%'
-            } : {}
+            } : {},
+            focusTrap: focusTrap,
+            preventOverflow: preventPopupOverflow
           }, /*#__PURE__*/_react.default.createElement(_ToolbarLoader.ToolbarLoader, {
             target: targetRef,
             items: toolbarItems,
@@ -291,9 +296,16 @@ var floatingToolbarPlugin = function floatingToolbarPlugin() {
             extensionsProvider: extensionsState === null || extensionsState === void 0 ? void 0 : extensionsState.extensionProvider,
             scrollable: scrollable
           })), /*#__PURE__*/_react.default.createElement(_ConfirmationModal.ConfirmationModal, {
-            options: confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog,
+            options: confirmDialogOptions,
             onConfirm: function onConfirm() {
-              dispatchCommand(confirmButtonItem.onClick);
+              var isChecked = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+              if (!!confirmDialogOptions.onConfirm) {
+                dispatchCommand(confirmDialogOptions.onConfirm(isChecked));
+              } else {
+                dispatchCommand(confirmButtonItem.onClick);
+              }
+
               dispatchCommand((0, _commands.hideConfirmDialog)());
             } // When closed without clicking OK or cancel buttons
             ,

package/dist/cjs/plugins/floating-toolbar/ui/CheckboxModal.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckboxModal = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+
+var _checkbox = require("@atlaskit/checkbox");
+
+var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+
+var _messages = _interopRequireDefault(require("./messages"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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 CheckboxModal = function CheckboxModal(props) {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isChecked = _useState2[0],
+      setCheckbox = _useState2[1];
+
+  var onConfirm = props.onConfirm,
+      onClose = props.onClose,
+      options = props.options,
+      formatMessage = props.intl.formatMessage,
+      testId = props.testId;
+  var heading = (options === null || options === void 0 ? void 0 : options.title) || formatMessage(_messages.default.confirmModalDefaultHeading);
+  var okButtonLabel = (options === null || options === void 0 ? void 0 : options.okButtonLabel) || formatMessage(_messages.default.confirmModalOK);
+  var cancelButtonLabel = (options === null || options === void 0 ? void 0 : options.cancelButtonLabel) || formatMessage(_messages.default.confirmModalCancel);
+  var checkboxlabel = options === null || options === void 0 ? void 0 : options.checkboxLabel;
+
+  var ListComponent = function ListComponent(_ref) {
+    var nodes = _ref.nodes;
+
+    if (!nodes) {
+      return null;
+    }
+
+    return /*#__PURE__*/_react.default.createElement("ul", null, nodes.map(function (node) {
+      return /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({}, node, {
+        key: node.id
+      }));
+    }));
+  };
+
+  var ListItem = function ListItem(props) {
+    var id = props.id,
+        name = props.name,
+        amount = props.amount;
+    return /*#__PURE__*/_react.default.createElement("li", {
+      id: id
+    }, formatMessage(_messages.default.confirmModalListUnit, {
+      name: name,
+      amount: amount
+    }));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
+    onClose: onClose,
+    testId: testId
+  }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, {
+    appearance: "warning"
+  }, heading)), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement("p", null, options === null || options === void 0 ? void 0 : options.message), (options === null || options === void 0 ? void 0 : options.getChildrenInfo) && /*#__PURE__*/_react.default.createElement(ListComponent, {
+    nodes: options === null || options === void 0 ? void 0 : options.getChildrenInfo()
+  }), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
+    isChecked: isChecked,
+    onChange: function onChange() {
+      return setCheckbox(!isChecked);
+    },
+    label: checkboxlabel,
+    testId: testId ? "".concat(testId, "-checkbox") : undefined
+  }))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+    appearance: "default",
+    onClick: onClose,
+    testId: testId ? "".concat(testId, "-cancel-button") : undefined
+  }, cancelButtonLabel), /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+    appearance: "warning",
+    onClick: function onClick() {
+      return onConfirm(isChecked);
+    },
+    testId: testId ? "".concat(testId, "-confirm-button") : undefined
+  }, okButtonLabel)));
+};
+
+exports.CheckboxModal = CheckboxModal;

package/dist/cjs/plugins/floating-toolbar/ui/ConfirmationModal.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,39 +11,21 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+var _SimpleModal = require("./SimpleModal");
 
-var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _CheckboxModal = require("./CheckboxModal");
 
-var _messages = _interopRequireDefault(require("./messages"));
+var _modalDialog = require("@atlaskit/modal-dialog");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var ConfirmationModalImpl = function ConfirmationModalImpl(props) {
+  var options = props.options;
 
-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 renderModel = function renderModel() {
+    var isReferentialityDialog = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    return isReferentialityDialog ? /*#__PURE__*/_react.default.createElement(_CheckboxModal.CheckboxModal, props) : /*#__PURE__*/_react.default.createElement(_SimpleModal.SimpleModal, props);
+  };
 
-var ConfirmationModalImpl = function ConfirmationModalImpl(props) {
-  var onConfirm = props.onConfirm,
-      onClose = props.onClose,
-      options = props.options,
-      formatMessage = props.intl.formatMessage,
-      testId = props.testId;
-  var heading = (options === null || options === void 0 ? void 0 : options.title) || formatMessage(_messages.default.confirmModalDefaultHeading);
-  var okButtonLabel = (options === null || options === void 0 ? void 0 : options.okButtonLabel) || formatMessage(_messages.default.confirmModalOK);
-  var cancelButtonLabel = (options === null || options === void 0 ? void 0 : options.cancelButtonLabel) || formatMessage(_messages.default.confirmModalCancel);
-  return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, options && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
-    onClose: onClose,
-    testId: testId
-  }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, {
-    appearance: "warning"
-  }, heading)), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement("p", null, options.message)), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
-    appearance: "default",
-    onClick: onClose,
-    testId: testId ? "".concat(testId, "-cancel-button") : undefined
-  }, cancelButtonLabel), /*#__PURE__*/_react.default.createElement(_standardButton.default, {
-    appearance: "warning",
-    onClick: onConfirm,
-    testId: testId ? "".concat(testId, "-confirm-button") : undefined
-  }, okButtonLabel))));
+  return options ? /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, renderModel(options === null || options === void 0 ? void 0 : options.isReferentialityDialog)) : null;
 };
 
 var ConfirmationModal = (0, _reactIntlNext.injectIntl)(ConfirmationModalImpl);

package/dist/cjs/plugins/floating-toolbar/ui/Dropdown.js

@@ -82,12 +82,14 @@ var Dropdown = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderArrayOptions", function (options) {
       var _this$props = _this.props,
           showSelected = _this$props.showSelected,
-          dispatchCommand = _this$props.dispatchCommand;
+          dispatchCommand = _this$props.dispatchCommand,
+          editorView = _this$props.editorView;
       return (0, _react2.jsx)(_DropdownMenu.default, {
         hide: _this.hide,
         dispatchCommand: dispatchCommand,
         items: options,
-        showSelected: showSelected
+        showSelected: showSelected,
+        editorView: editorView
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleOpen", function () {
@@ -108,6 +110,13 @@ var Dropdown = /*#__PURE__*/function (_Component) {
 
       (_document$querySelect = document.querySelector("[data-testid=".concat(_this.props.buttonTestId, "]"))) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.focus();
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onOpenChanged", function (openChangedEvent) {
+      if (!openChangedEvent.isOpen && openChangedEvent.event instanceof KeyboardEvent) {
+        var _openChangedEvent$eve;
+
+        ((_openChangedEvent$eve = openChangedEvent.event) === null || _openChangedEvent$eve === void 0 ? void 0 : _openChangedEvent$eve.key) === 'Escape' ? _this.hideonEsc() : _this.hide();
+      }
+    });
     return _this;
   }
 
@@ -127,7 +136,8 @@ var Dropdown = /*#__PURE__*/function (_Component) {
           disabled = _this$props2.disabled,
           tooltip = _this$props2.tooltip,
           buttonTestId = _this$props2.buttonTestId,
-          dropdownWidth = _this$props2.dropdownWidth;
+          dropdownWidth = _this$props2.dropdownWidth,
+          editorView = _this$props2.editorView;
       var trigger;
 
       if (icon) {
@@ -173,9 +183,11 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         isOpen: isOpen,
         handleClickOutside: this.hide,
         handleEscapeKeydown: this.hideonEsc,
+        onOpenChange: this.onOpenChanged,
         fitWidth: fitWidth + fitTolerance,
         fitHeight: fitHeight + fitTolerance,
-        trigger: trigger
+        trigger: trigger,
+        editorView: editorView
       }, Array.isArray(options) ? this.renderArrayOptions(options) : options.render({
         hide: this.hide,
         dispatchCommand: dispatchCommand

package/dist/cjs/plugins/floating-toolbar/ui/DropdownMenu.js

@@ -17,11 +17,13 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = require("@emotion/react");
+var _react = require("react");
 
-var _react2 = require("react");
+var _react2 = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -37,8 +39,6 @@ var _reactIntlNext = require("react-intl-next");
 
 var _messages = _interopRequireDefault(require("./messages"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2;
 
 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); }; }
@@ -50,12 +50,101 @@ var menuItemDimensions = {
   height: 32
 };
 exports.menuItemDimensions = menuItemDimensions;
-var spacer = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n  padding: 8px;\n"])));
-var menuContainer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: ", "px;\n\n  // temporary solution to retain spacing defined by @atlaskit/Item\n  & button {\n    min-height: ", "px;\n    padding: 8px 8px 7px;\n\n    & > [data-item-elem-before] {\n      margin-right: ", "px;\n    }\n  }\n"])), menuItemDimensions.width, (0, _constants.gridSize)() * 4, (0, _constants.gridSize)() / 2);
+var spacer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n  padding: 8px;\n"])));
+var menuContainer = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: ", "px;\n\n  // temporary solution to retain spacing defined by @atlaskit/Item\n  & button {\n    min-height: ", "px;\n    padding: 8px 8px 7px;\n\n    & > [data-item-elem-before] {\n      margin-right: ", "px;\n    }\n  }\n"])), menuItemDimensions.width, (0, _constants.gridSize)() * 4, (0, _constants.gridSize)() / 2);
 var itemSpacing = (0, _constants.gridSize)() / 2;
 exports.itemSpacing = itemSpacing;
 var DropdownButtonItem = _menu.ButtonItem;
 
+var DropdownMenuItem = function DropdownMenuItem(_ref) {
+  var item = _ref.item,
+      hide = _ref.hide,
+      dispatchCommand = _ref.dispatchCommand,
+      editorView = _ref.editorView,
+      iconBefore = _ref.iconBefore;
+
+  var _useState = (0, _react.useState)(item.tooltip || ''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      tooltipContent = _useState2[0],
+      setTooltipContent = _useState2[1];
+
+  var handleTooltipMouseOut = (0, _react.useCallback)(function () {
+    setTooltipContent('');
+  }, []);
+  var handleItemMouseDown = (0, _react.useCallback)(function (e) {
+    e.preventDefault();
+  }, []);
+  var handleItemMouseOver = (0, _react.useCallback)(function (e) {
+    setTooltipContent(item.tooltip || '');
+
+    if (item.onMouseOver) {
+      e.preventDefault();
+      dispatchCommand(item.onMouseOver);
+    }
+  }, [item.tooltip, item.onMouseOver, dispatchCommand]);
+  var handleItemMouseEnter = (0, _react.useCallback)(function (e) {
+    if (item.onMouseEnter) {
+      e.preventDefault();
+      dispatchCommand(item.onMouseEnter);
+    }
+  }, [item.onMouseEnter, dispatchCommand]);
+  var handleItemMouseLeave = (0, _react.useCallback)(function (e) {
+    if (item.onMouseLeave) {
+      e.preventDefault();
+      dispatchCommand(item.onMouseLeave);
+    }
+  }, [item.onMouseLeave, dispatchCommand]);
+  var handleItemOnFocus = (0, _react.useCallback)(function (e) {
+    if (item.onFocus) {
+      e.preventDefault();
+      dispatchCommand(item.onFocus);
+    }
+  }, [item.onFocus, dispatchCommand]);
+  var handleItemOnBlur = (0, _react.useCallback)(function (e) {
+    if (item.onBlur) {
+      e.preventDefault();
+      dispatchCommand(item.onBlur);
+    }
+  }, [item.onBlur, dispatchCommand]);
+  var handleItemClick = (0, _react.useCallback)(function () {
+    /**
+     * The order of dispatching the event and hide() is important, because
+     * the ClickAreaBlock will be relying on the element to calculate the
+     * click coordinate.
+     * For more details, please visit the comment in this PR https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5328/edm-1321-set-selection-near-smart-link?link_source=email#chg-packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx
+     */
+    dispatchCommand(item.onClick);
+    hide();
+
+    if (!(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
+      editorView === null || editorView === void 0 ? void 0 : editorView.focus();
+    }
+  }, [dispatchCommand, item.onClick, hide, editorView]);
+  var itemContent = (0, _react2.jsx)(DropdownButtonItem, {
+    iconBefore: iconBefore,
+    iconAfter: item.elemAfter,
+    onClick: handleItemClick,
+    "data-testid": item.testId,
+    isDisabled: item.disabled,
+    onMouseDown: handleItemMouseDown,
+    onMouseOver: handleItemMouseOver,
+    onMouseEnter: handleItemMouseEnter,
+    onMouseLeave: handleItemMouseLeave,
+    onFocus: handleItemOnFocus,
+    onBlur: handleItemOnBlur
+  }, item.title);
+
+  if (tooltipContent) {
+    return (0, _react2.jsx)(_tooltip.default, {
+      content: tooltipContent
+    }, (0, _react2.jsx)("div", {
+      onMouseOut: handleTooltipMouseOut
+    }, itemContent));
+  }
+
+  return itemContent;
+};
+
 var Dropdown = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Dropdown, _Component);
 
@@ -75,59 +164,21 @@ var Dropdown = /*#__PURE__*/function (_Component) {
           hide = _this$props.hide,
           dispatchCommand = _this$props.dispatchCommand,
           items = _this$props.items,
-          intl = _this$props.intl;
-      return (0, _react.jsx)("div", {
+          intl = _this$props.intl,
+          editorView = _this$props.editorView;
+      return (0, _react2.jsx)("div", {
         css: menuContainer
       }, items.filter(function (item) {
         return !item.hidden;
       }).map(function (item, idx) {
-        var itemContent = (0, _react.jsx)(DropdownButtonItem, {
+        return (0, _react2.jsx)(DropdownMenuItem, {
           key: idx,
-          iconBefore: _this.renderSelected(item, intl),
-          iconAfter: item.elemAfter,
-          onClick: function onClick() {
-            /**
-             * The order of dispatching the event and hide() is important, because
-             * the ClickAreaBlock will be relying on the element to calculate the
-             * click coordinate.
-             * For more details, please visit the comment in this PR https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5328/edm-1321-set-selection-near-smart-link?link_source=email#chg-packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx
-             */
-            dispatchCommand(item.onClick);
-            hide();
-          },
-          "data-testid": item.testId,
-          isDisabled: item.disabled,
-          onMouseDown: function onMouseDown(e) {
-            e.preventDefault();
-          },
-          onMouseOver: function onMouseOver(e) {
-            if (item.onMouseOver) {
-              e.preventDefault();
-              dispatchCommand(item.onMouseOver);
-            }
-          },
-          onMouseEnter: function onMouseEnter(e) {
-            if (item.onMouseEnter) {
-              e.preventDefault();
-              dispatchCommand(item.onMouseEnter);
-            }
-          },
-          onMouseLeave: function onMouseLeave(e) {
-            if (item.onMouseLeave) {
-              e.preventDefault();
-              dispatchCommand(item.onMouseLeave);
-            }
-          }
-        }, item.title);
-
-        if (item.tooltip) {
-          return (0, _react.jsx)(_tooltip.default, {
-            key: idx,
-            content: item.tooltip
-          }, itemContent);
-        }
-
-        return itemContent;
+          item: item,
+          hide: hide,
+          dispatchCommand: dispatchCommand,
+          editorView: editorView,
+          iconBefore: _this.renderSelected(item, intl)
+        });
       }));
     }
   }, {
@@ -138,20 +189,20 @@ var Dropdown = /*#__PURE__*/function (_Component) {
       var selected = item.selected;
 
       if (showSelected && selected) {
-        return (0, _react.jsx)(_done.default, {
-          primaryColor: (0, _tokens.token)('color.icon.selected', _colors.B400),
+        return (0, _react2.jsx)(_done.default, {
+          primaryColor: "var(--ds-icon-selected, ".concat(_colors.B400, ")"),
           size: "small",
           label: intl.formatMessage(_messages.default.confirmModalOK)
         });
       }
 
-      return (0, _react.jsx)("span", {
+      return (0, _react2.jsx)("span", {
         css: spacer
       });
     }
   }]);
   return Dropdown;
-}(_react2.Component);
+}(_react.Component);
 
 var _default = (0, _reactIntlNext.injectIntl)(Dropdown);
 

package/dist/cjs/plugins/floating-toolbar/ui/EditorEmojiAddIcon.js

@@ -9,8 +9,6 @@ exports.default = EditorEmojiAddIcon;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _tokens = require("@atlaskit/tokens");
-
 function EditorEmojiAddIcon() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     width: 24,
@@ -21,7 +19,7 @@ function EditorEmojiAddIcon() {
   }, /*#__PURE__*/_react.default.createElement("rect", {
     width: 24,
     height: 24,
-    fill: (0, _tokens.token)('color.background.neutral.subtle', 'white'),
+    fill: "var(--ds-background-neutral-subtle, white)",
     fillOpacity: "0.01"
   }), /*#__PURE__*/_react.default.createElement("path", {
     fillRule: "evenodd",

package/dist/cjs/plugins/floating-toolbar/ui/EmojiPickerButton.js

@@ -37,6 +37,7 @@ var emojiPickerButtonWrapper = (0, _react.css)(_templateObject || (_templateObje
 // https://product-fabric.atlassian.net/browse/CETI-148
 
 var emojiPickerWrapper = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: -12px;\n  margin-top: -4px;\n"])));
+var EmojiPickerWithListener = (0, _withOuterListeners.default)(_emoji.EmojiPicker);
 
 var EmojiPickerButton = function EmojiPickerButton(props) {
   var buttonRef = _react2.default.useRef(null);
@@ -46,8 +47,6 @@ var EmojiPickerButton = function EmojiPickerButton(props) {
       isPopupOpen = _React$useState2[0],
       setIsPopupOpen = _React$useState2[1];
 
-  var EmojiPickerWithListener = (0, _withOuterListeners.default)(_emoji.EmojiPicker);
-
   _react2.default.useEffect(function () {
     if (props.setDisableParentScroll) {
       props.setDisableParentScroll(isPopupOpen);