@atlaskit/editor-core 176.0.3 → 177.0.1

package/dist/esm/plugins/find-replace/ui/FindReplaceToolbarButton.js

@@ -24,7 +24,8 @@ import ToolbarButton, { TOOLBAR_BUTTON } from '../../../ui/ToolbarButton';
 import Dropdown from '../../../ui/Dropdown';
 import FindReplace from './FindReplace';
 import { TRIGGER_METHOD } from '../../analytics/types';
-import { ToolTipContent, findKeymapByDescription } from '../../../keymaps';
+import { ToolTipContent, findKeymapByDescription, tooltip } from '../../../keymaps';
+import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
 var toolbarButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1 1 auto;\n  flex-grow: 0;\n  justify-content: flex-end;\n  align-items: center;\n  padding: 0 8px;\n  @media (max-width: ", "px) {\n    justify-content: center;\n    padding: 0;\n  }\n"])), akEditorMobileMaxWidth);
 var toolbarButtonWrapperFullWith = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n"])));
 var wrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
@@ -84,6 +85,7 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
           takeFullWidth = _this$props.takeFullWidth;
       var title = formatMessage(messages.findReplaceToolbarButton);
       var stackBelowOtherEditorFloatingPanels = akEditorFloatingPanelZIndex - 1;
+      var keymap = findKeymapByDescription('Find');
       return jsx("div", {
         css: [toolbarButtonWrapper, takeFullWidth && toolbarButtonWrapperFullWith]
       }, jsx(Dropdown, {
@@ -107,14 +109,16 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
           selected: isActive,
           title: jsx(ToolTipContent, {
             description: title,
-            keymap: findKeymapByDescription('Find')
+            keymap: keymap
           }),
           iconBefore: jsx(EditorSearchIcon, {
             label: title
           }),
           onClick: this.toggleOpen,
           "aria-expanded": isActive,
-          "aria-haspopup": true
+          "aria-haspopup": true,
+          "aria-label": keymap ? tooltip(keymap, title) : title,
+          "aria-keyshortcuts": getAriaKeyshortcuts(keymap)
         })
       }, jsx("div", {
         css: wrapper

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

@@ -5,7 +5,6 @@ var _templateObject;
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { N60, N30A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 export var replaceSectionButtonStyles = css({
   marginLeft: '4px'
@@ -13,7 +12,7 @@ export var replaceSectionButtonStyles = css({
 export var ruleStyles = css({
   width: '100%',
   border: 'none',
-  backgroundColor: "".concat(token('color.border', N30A)),
+  backgroundColor: "".concat("var(--ds-border, ".concat(N30A, ")")),
   margin: '4px 0px',
   height: '1px',
   borderRadius: '1px'
@@ -27,7 +26,7 @@ export var wrapperStyles = css({
 });
 export var sectionWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])));
 export var countStyles = css({
-  color: "".concat(token('color.text.subtlest', N60)),
+  color: "".concat("var(--ds-text-subtlest, ".concat(N60, ")")),
   fontSize: "".concat(relativeFontSizeToBase16(12)),
   flex: '0 0 auto',
   justifyContent: 'center',

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

@@ -195,7 +195,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) {
@@ -221,6 +223,7 @@ var floatingToolbarPlugin = function floatingToolbarPlugin() {
 
           var confirmButtonItem = confirmDialogForItem ? toolbarItems[confirmDialogForItem] : undefined;
           var scrollable = 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.createElement(ErrorBoundary, {
             component: ACTION_SUBJECT.FLOATING_TOOLBAR_PLUGIN,
             componentId: camelCase(title),
@@ -243,7 +246,9 @@ var floatingToolbarPlugin = function floatingToolbarPlugin() {
             onPositionCalculated: customPositionCalculation,
             style: scrollable ? {
               maxWidth: '100%'
-            } : {}
+            } : {},
+            focusTrap: focusTrap,
+            preventOverflow: preventPopupOverflow
           }, /*#__PURE__*/React.createElement(ToolbarLoader, {
             target: targetRef,
             items: toolbarItems,
@@ -262,9 +267,16 @@ var floatingToolbarPlugin = function floatingToolbarPlugin() {
             extensionsProvider: extensionsState === null || extensionsState === void 0 ? void 0 : extensionsState.extensionProvider,
             scrollable: scrollable
           })), /*#__PURE__*/React.createElement(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(hideConfirmDialog());
             } // When closed without clicking OK or cancel buttons
             ,

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

@@ -0,0 +1,75 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import Button from '@atlaskit/button/standard-button';
+import { Checkbox } from '@atlaskit/checkbox';
+import Modal, { ModalBody, ModalTitle, ModalHeader, ModalFooter } from '@atlaskit/modal-dialog';
+import messages from './messages';
+export var CheckboxModal = function CheckboxModal(props) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_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.confirmModalDefaultHeading);
+  var okButtonLabel = (options === null || options === void 0 ? void 0 : options.okButtonLabel) || formatMessage(messages.confirmModalOK);
+  var cancelButtonLabel = (options === null || options === void 0 ? void 0 : options.cancelButtonLabel) || formatMessage(messages.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.createElement("ul", null, nodes.map(function (node) {
+      return /*#__PURE__*/React.createElement(ListItem, _extends({}, node, {
+        key: node.id
+      }));
+    }));
+  };
+
+  var ListItem = function ListItem(props) {
+    var id = props.id,
+        name = props.name,
+        amount = props.amount;
+    return /*#__PURE__*/React.createElement("li", {
+      id: id
+    }, formatMessage(messages.confirmModalListUnit, {
+      name: name,
+      amount: amount
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement(Modal, {
+    onClose: onClose,
+    testId: testId
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, {
+    appearance: "warning"
+  }, heading)), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("p", null, options === null || options === void 0 ? void 0 : options.message), (options === null || options === void 0 ? void 0 : options.getChildrenInfo) && /*#__PURE__*/React.createElement(ListComponent, {
+    nodes: options === null || options === void 0 ? void 0 : options.getChildrenInfo()
+  }), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Checkbox, {
+    isChecked: isChecked,
+    onChange: function onChange() {
+      return setCheckbox(!isChecked);
+    },
+    label: checkboxlabel,
+    testId: testId ? "".concat(testId, "-checkbox") : undefined
+  }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "default",
+    onClick: onClose,
+    testId: testId ? "".concat(testId, "-cancel-button") : undefined
+  }, cancelButtonLabel), /*#__PURE__*/React.createElement(Button, {
+    appearance: "warning",
+    onClick: function onClick() {
+      return onConfirm(isChecked);
+    },
+    testId: testId ? "".concat(testId, "-confirm-button") : undefined
+  }, okButtonLabel)));
+};

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

@@ -1,32 +1,18 @@
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
-import Button from '@atlaskit/button/standard-button';
-import Modal, { ModalTransition, ModalBody, ModalTitle, ModalHeader, ModalFooter } from '@atlaskit/modal-dialog';
-import messages from './messages';
+import { SimpleModal } from './SimpleModal';
+import { CheckboxModal } from './CheckboxModal';
+import { ModalTransition } from '@atlaskit/modal-dialog';
 
 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.confirmModalDefaultHeading);
-  var okButtonLabel = (options === null || options === void 0 ? void 0 : options.okButtonLabel) || formatMessage(messages.confirmModalOK);
-  var cancelButtonLabel = (options === null || options === void 0 ? void 0 : options.cancelButtonLabel) || formatMessage(messages.confirmModalCancel);
-  return /*#__PURE__*/React.createElement(ModalTransition, null, options && /*#__PURE__*/React.createElement(Modal, {
-    onClose: onClose,
-    testId: testId
-  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, {
-    appearance: "warning"
-  }, heading)), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("p", null, options.message)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
-    appearance: "default",
-    onClick: onClose,
-    testId: testId ? "".concat(testId, "-cancel-button") : undefined
-  }, cancelButtonLabel), /*#__PURE__*/React.createElement(Button, {
-    appearance: "warning",
-    onClick: onConfirm,
-    testId: testId ? "".concat(testId, "-confirm-button") : undefined
-  }, okButtonLabel))));
+  var options = props.options;
+
+  var renderModel = function renderModel() {
+    var isReferentialityDialog = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    return isReferentialityDialog ? /*#__PURE__*/React.createElement(CheckboxModal, props) : /*#__PURE__*/React.createElement(SimpleModal, props);
+  };
+
+  return options ? /*#__PURE__*/React.createElement(ModalTransition, null, renderModel(options === null || options === void 0 ? void 0 : options.isReferentialityDialog)) : null;
 };
 
 export var ConfirmationModal = injectIntl(ConfirmationModalImpl);

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

@@ -57,12 +57,14 @@ var Dropdown = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_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 jsx(DropdownMenu, {
         hide: _this.hide,
         dispatchCommand: dispatchCommand,
         items: options,
-        showSelected: showSelected
+        showSelected: showSelected,
+        editorView: editorView
       });
     });
 
@@ -87,6 +89,14 @@ 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();
     });
 
+    _defineProperty(_assertThisInitialized(_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;
   }
 
@@ -106,7 +116,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) {
@@ -152,9 +163,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/esm/plugins/floating-toolbar/ui/DropdownMenu.js

@@ -3,6 +3,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
 var _templateObject, _templateObject2;
@@ -12,6 +13,7 @@ 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; } }
 
 /** @jsx jsx */
+import { useState, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
 import { gridSize } from '@atlaskit/theme/constants';
@@ -21,7 +23,6 @@ import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import Tooltip from '@atlaskit/tooltip';
 import { injectIntl } from 'react-intl-next';
 import messages from './messages';
-import { token } from '@atlaskit/tokens';
 export var menuItemDimensions = {
   width: 175,
   height: 32
@@ -31,6 +32,95 @@ var menuContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateL
 export var itemSpacing = gridSize() / 2;
 var DropdownButtonItem = ButtonItem;
 
+var DropdownMenuItem = function DropdownMenuItem(_ref) {
+  var item = _ref.item,
+      hide = _ref.hide,
+      dispatchCommand = _ref.dispatchCommand,
+      editorView = _ref.editorView,
+      iconBefore = _ref.iconBefore;
+
+  var _useState = useState(item.tooltip || ''),
+      _useState2 = _slicedToArray(_useState, 2),
+      tooltipContent = _useState2[0],
+      setTooltipContent = _useState2[1];
+
+  var handleTooltipMouseOut = useCallback(function () {
+    setTooltipContent('');
+  }, []);
+  var handleItemMouseDown = useCallback(function (e) {
+    e.preventDefault();
+  }, []);
+  var handleItemMouseOver = useCallback(function (e) {
+    setTooltipContent(item.tooltip || '');
+
+    if (item.onMouseOver) {
+      e.preventDefault();
+      dispatchCommand(item.onMouseOver);
+    }
+  }, [item.tooltip, item.onMouseOver, dispatchCommand]);
+  var handleItemMouseEnter = useCallback(function (e) {
+    if (item.onMouseEnter) {
+      e.preventDefault();
+      dispatchCommand(item.onMouseEnter);
+    }
+  }, [item.onMouseEnter, dispatchCommand]);
+  var handleItemMouseLeave = useCallback(function (e) {
+    if (item.onMouseLeave) {
+      e.preventDefault();
+      dispatchCommand(item.onMouseLeave);
+    }
+  }, [item.onMouseLeave, dispatchCommand]);
+  var handleItemOnFocus = useCallback(function (e) {
+    if (item.onFocus) {
+      e.preventDefault();
+      dispatchCommand(item.onFocus);
+    }
+  }, [item.onFocus, dispatchCommand]);
+  var handleItemOnBlur = useCallback(function (e) {
+    if (item.onBlur) {
+      e.preventDefault();
+      dispatchCommand(item.onBlur);
+    }
+  }, [item.onBlur, dispatchCommand]);
+  var handleItemClick = 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 = 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 jsx(Tooltip, {
+      content: tooltipContent
+    }, jsx("div", {
+      onMouseOut: handleTooltipMouseOut
+    }, itemContent));
+  }
+
+  return itemContent;
+};
+
 var Dropdown = /*#__PURE__*/function (_Component) {
   _inherits(Dropdown, _Component);
 
@@ -51,59 +141,21 @@ var Dropdown = /*#__PURE__*/function (_Component) {
           hide = _this$props.hide,
           dispatchCommand = _this$props.dispatchCommand,
           items = _this$props.items,
-          intl = _this$props.intl;
+          intl = _this$props.intl,
+          editorView = _this$props.editorView;
       return jsx("div", {
         css: menuContainer
       }, items.filter(function (item) {
         return !item.hidden;
       }).map(function (item, idx) {
-        var itemContent = jsx(DropdownButtonItem, {
+        return 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 jsx(Tooltip, {
-            key: idx,
-            content: item.tooltip
-          }, itemContent);
-        }
-
-        return itemContent;
+          item: item,
+          hide: hide,
+          dispatchCommand: dispatchCommand,
+          editorView: editorView,
+          iconBefore: _this.renderSelected(item, intl)
+        });
       }));
     }
   }, {
@@ -115,7 +167,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
 
       if (showSelected && selected) {
         return jsx(EditorDoneIcon, {
-          primaryColor: token('color.icon.selected', B400),
+          primaryColor: "var(--ds-icon-selected, ".concat(B400, ")"),
           size: "small",
           label: intl.formatMessage(messages.confirmModalOK)
         });

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { token } from '@atlaskit/tokens';
 export default function EditorEmojiAddIcon() {
   return /*#__PURE__*/React.createElement("svg", {
     width: 24,
@@ -10,7 +9,7 @@ export default function EditorEmojiAddIcon() {
   }, /*#__PURE__*/React.createElement("rect", {
     width: 24,
     height: 24,
-    fill: token('color.background.neutral.subtle', 'white'),
+    fill: "var(--ds-background-neutral-subtle, white)",
     fillOpacity: "0.01"
   }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",

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

@@ -19,6 +19,7 @@ var emojiPickerButtonWrapper = css(_templateObject || (_templateObject = _tagged
 // https://product-fabric.atlassian.net/browse/CETI-148
 
 var emojiPickerWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-bottom: -12px;\n  margin-top: -4px;\n"])));
+var EmojiPickerWithListener = withOuterListeners(EmojiPicker);
 export var EmojiPickerButton = function EmojiPickerButton(props) {
   var buttonRef = React.useRef(null);
 
@@ -27,7 +28,6 @@ export var EmojiPickerButton = function EmojiPickerButton(props) {
       isPopupOpen = _React$useState2[0],
       setIsPopupOpen = _React$useState2[1];
 
-  var EmojiPickerWithListener = withOuterListeners(EmojiPicker);
   React.useEffect(function () {
     if (props.setDisableParentScroll) {
       props.setDisableParentScroll(isPopupOpen);