@atlaskit/editor-core 176.0.3 → 177.0.1

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

@@ -3,17 +3,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 /** @jsx jsx */
 import React, { useEffect, useState, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { gridSize } from '@atlaskit/theme/constants';
 import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
 import ChevronRightLargeIcon from '@atlaskit/icon/glyph/chevron-right-large';
@@ -21,12 +14,10 @@ import Button from './Button';
 import messages from './messages';
 import rafSchedule from 'raf-schd';
 var akGridSize = gridSize();
-var toolbarScrollButtons = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-gap: ", "px;\n  padding: ", "px ", "px;\n  border-left: solid ", " 1px;\n  flex-shrink: 0;\n  align-items: center;\n"])), akGridSize / 2, akGridSize / 2, akGridSize, token('color.border', N30));
+var toolbarScrollButtons = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-gap: ", "px;\n  padding: ", "px ", "px;\n  border-left: solid ", " 1px;\n  flex-shrink: 0;\n  align-items: center;\n"])), akGridSize / 2, akGridSize / 2, akGridSize, "var(--ds-border, ".concat(N30, ")"));
 var LeftIcon = ChevronLeftLargeIcon;
 var RightIcon = ChevronRightLargeIcon;
 export default (function (_ref) {
-  var _scrollContainerRef$c, _scrollContainerRef$c2;
-
   var intl = _ref.intl,
       scrollContainerRef = _ref.scrollContainerRef,
       node = _ref.node,
@@ -48,7 +39,6 @@ export default (function (_ref) {
       canScrollRight = _useState6[0],
       setCanScrollRight = _useState6[1];
 
-  var items = Array.from(((_scrollContainerRef$c = scrollContainerRef.current) === null || _scrollContainerRef$c === void 0 ? void 0 : (_scrollContainerRef$c2 = _scrollContainerRef$c.firstChild) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.childNodes) || {});
   var scheduledSetCanScroll = rafSchedule(function () {
     var _ref2 = scrollContainerRef.current,
         scrollLeft = _ref2.scrollLeft,
@@ -63,115 +53,44 @@ export default (function (_ref) {
   };
 
   var scrollLeft = function scrollLeft() {
-    // find the first item partially visible
-    var _iterator = _createForOfIteratorHelper(items.reverse().entries()),
-        _step;
-
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var _scrollContainerRef$c3;
-
-        var _step$value = _slicedToArray(_step.value, 2),
-            itemIndex = _step$value[0],
-            item = _step$value[1];
-
-        var _item$getBoundingClie = item.getBoundingClientRect(),
-            itemLeft = _item$getBoundingClie.left,
-            itemWidth = _item$getBoundingClie.width;
-
-        var _ref3 = ((_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.getBoundingClientRect()) || {},
-            _ref3$left = _ref3.left,
-            scrollContainerLeft = _ref3$left === void 0 ? 0 : _ref3$left,
-            _ref3$width = _ref3.width,
-            scrollContainerWidth = _ref3$width === void 0 ? 0 : _ref3$width; // if item is partially visible on the left, scroll to it so it became the last item visible
-
-
-        if (itemLeft <= scrollContainerLeft) {
-          var _scrollContainerRef$c4, _scrollContainerRef$c5;
-
-          var gap = scrollContainerWidth - itemWidth;
-          var scrollTo = item.offsetLeft - gap; // if scrollTo is same as current scrollLeft
-
-          if (Math.floor(scrollTo) === Math.floor((scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : (_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 ? void 0 : _scrollContainerRef$c4.scrollLeft) || 0)) {
-            // if this is the first item, scroll to the beginning, otherwise find next item to scroll to
-            if (itemIndex === items.length - 1) {
-              scrollTo = 0;
-            } else {
-              continue;
-            }
-          }
-
-          scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : (_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.scrollTo({
-            top: 0,
-            left: scrollTo,
-            behavior: 'smooth'
-          });
-          break;
-        }
-      }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
-    }
-  };
-
-  var scrollRight = function scrollRight() {
-    // find the last item partially visible
-    var _iterator2 = _createForOfIteratorHelper(items),
-        _step2;
+    var _scrollContainerRef$c, _scrollContainerRef$c2, _scrollContainerRef$c3;
 
-    try {
-      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-        var _scrollContainerRef$c6;
+    var _ref3 = ((_scrollContainerRef$c = scrollContainerRef.current) === null || _scrollContainerRef$c === void 0 ? void 0 : _scrollContainerRef$c.getBoundingClientRect()) || {},
+        _ref3$width = _ref3.width,
+        scrollContainerWidth = _ref3$width === void 0 ? 0 : _ref3$width;
 
-        var item = _step2.value;
+    var scrollLeft = ((_scrollContainerRef$c2 = scrollContainerRef.current) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.scrollLeft) || 0; // scroll to current position - scroll container width
 
-        var _item$getBoundingClie2 = item.getBoundingClientRect(),
-            itemLeft = _item$getBoundingClie2.left,
-            itemWidth = _item$getBoundingClie2.width;
-
-        var _ref4 = ((_scrollContainerRef$c6 = scrollContainerRef.current) === null || _scrollContainerRef$c6 === void 0 ? void 0 : _scrollContainerRef$c6.getBoundingClientRect()) || {},
-            _ref4$left = _ref4.left,
-            scrollContainerLeft = _ref4$left === void 0 ? 0 : _ref4$left,
-            _ref4$width = _ref4.width,
-            scrollContainerWidth = _ref4$width === void 0 ? 0 : _ref4$width; // if item is partially visible on the right
-
-
-        if (itemLeft + itemWidth >= scrollContainerLeft + scrollContainerWidth) {
-          var _scrollContainerRef$c7, _scrollContainerRef$c8, _scrollContainerRef$c9;
-
-          var scrollTo = item.offsetLeft; // if the item is longer than the entire container width, just scroll past it
+    var scrollTo = scrollLeft - scrollContainerWidth;
+    (_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.scrollTo({
+      top: 0,
+      left: scrollTo,
+      behavior: 'smooth'
+    });
+  };
 
-          if (itemWidth >= scrollContainerWidth && (((_scrollContainerRef$c7 = scrollContainerRef.current) === null || _scrollContainerRef$c7 === void 0 ? void 0 : _scrollContainerRef$c7.scrollLeft) || 0) >= itemLeft - 1) {
-            scrollTo = item.offsetLeft + item.offsetWidth;
-          } // if scrollTo is same as current scrollLeft, find next item to scroll to
+  var scrollRight = function scrollRight() {
+    var _scrollContainerRef$c4, _scrollContainerRef$c5, _scrollContainerRef$c6;
 
+    var _ref4 = ((_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 ? void 0 : _scrollContainerRef$c4.getBoundingClientRect()) || {},
+        _ref4$width = _ref4.width,
+        scrollContainerWidth = _ref4$width === void 0 ? 0 : _ref4$width;
 
-          if (Math.floor(scrollTo) === Math.floor((scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : (_scrollContainerRef$c8 = scrollContainerRef.current) === null || _scrollContainerRef$c8 === void 0 ? void 0 : _scrollContainerRef$c8.scrollLeft) || 0)) {
-            continue;
-          }
+    var scrollLeft = ((_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.scrollLeft) || 0; // scroll to current position + scroll container width
 
-          (_scrollContainerRef$c9 = scrollContainerRef.current) === null || _scrollContainerRef$c9 === void 0 ? void 0 : _scrollContainerRef$c9.scrollTo({
-            top: 0,
-            left: scrollTo,
-            behavior: 'smooth'
-          });
-          break;
-        }
-      }
-    } catch (err) {
-      _iterator2.e(err);
-    } finally {
-      _iterator2.f();
-    }
+    var scrollTo = scrollLeft + scrollContainerWidth;
+    (_scrollContainerRef$c6 = scrollContainerRef.current) === null || _scrollContainerRef$c6 === void 0 ? void 0 : _scrollContainerRef$c6.scrollTo({
+      top: 0,
+      left: scrollTo,
+      behavior: 'smooth'
+    });
   };
 
   var resizeObserver = new ResizeObserver(function (t) {
-    var _scrollContainerRef$c10, _scrollContainerRef$c11, _scrollContainerRef$c12;
+    var _scrollContainerRef$c7, _scrollContainerRef$c8, _scrollContainerRef$c9;
 
-    var widthNeededToShowAllItems = ((_scrollContainerRef$c10 = scrollContainerRef.current) === null || _scrollContainerRef$c10 === void 0 ? void 0 : _scrollContainerRef$c10.scrollWidth) || 0;
-    var availableSpace = (_scrollContainerRef$c11 = scrollContainerRef.current) === null || _scrollContainerRef$c11 === void 0 ? void 0 : (_scrollContainerRef$c12 = _scrollContainerRef$c11.parentNode) === null || _scrollContainerRef$c12 === void 0 ? void 0 : _scrollContainerRef$c12.offsetWidth;
+    var widthNeededToShowAllItems = ((_scrollContainerRef$c7 = scrollContainerRef.current) === null || _scrollContainerRef$c7 === void 0 ? void 0 : _scrollContainerRef$c7.scrollWidth) || 0;
+    var availableSpace = (_scrollContainerRef$c8 = scrollContainerRef.current) === null || _scrollContainerRef$c8 === void 0 ? void 0 : (_scrollContainerRef$c9 = _scrollContainerRef$c8.parentNode) === null || _scrollContainerRef$c9 === void 0 ? void 0 : _scrollContainerRef$c9.offsetWidth;
 
     if (availableSpace >= widthNeededToShowAllItems) {
       setNeedScroll(false);
@@ -204,7 +123,8 @@ export default (function (_ref) {
   }, [node, scrollContainerRef]);
   return needScroll ? jsx("div", {
     ref: buttonsContainerRef,
-    css: toolbarScrollButtons
+    css: toolbarScrollButtons,
+    className: "scroll-buttons"
   }, jsx(Button, {
     title: intl.formatMessage(messages.floatingToolbarScrollLeft),
     icon: jsx(LeftIcon, {

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

@@ -5,8 +5,7 @@ var _templateObject;
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-var separator = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 1px;\n  height: 20px;\n  margin: 0 4px;\n  align-self: center;\n"])), token('color.border', N30));
+var separator = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 1px;\n  height: 20px;\n  margin: 0 4px;\n  align-self: center;\n"])), "var(--ds-border, ".concat(N30, ")"));
 export default (function () {
   return jsx("div", {
     css: separator,

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import Button from '@atlaskit/button/standard-button';
+import Modal, { ModalBody, ModalTitle, ModalHeader, ModalFooter } from '@atlaskit/modal-dialog';
+import messages from './messages';
+export var SimpleModal = function SimpleModal(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(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)), /*#__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();
+    },
+    testId: testId ? "".concat(testId, "-confirm-button") : undefined
+  }, okButtonLabel)));
+};

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

@@ -23,7 +23,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { DN70 } from '@atlaskit/theme/colors';
 import { getFeatureFlags } from '../../feature-flags-context';
-import { compareArrays, getFirstFocusableElement, getLastFocusableElement, getFocusableElements, shallowEqual } from '../utils';
+import { compareArrays, getFirstFocusableElement, shallowEqual } from '../utils';
 import { showConfirmDialog } from '../pm-plugins/toolbar-data/commands';
 import Button from './Button';
 import Dropdown from './Dropdown';
@@ -36,9 +36,9 @@ import { EmojiPickerButton } from './EmojiPickerButton';
 import Announcer from '../../../utils/announcer/announcer';
 import { injectIntl } from 'react-intl-next';
 import messages from './messages';
-import { token } from '@atlaskit/tokens';
 import { decorationStateKey, ACTIONS } from '../../base/pm-plugins/decoration';
 import ScrollButtons from './ScrollButtons';
+import { ToolbarArrowKeyNavigationProvider } from '../../../ui/ToolbarArrowKeyNavigationProvider';
 var akGridSize = gridSize();
 var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
   var items = _ref.items,
@@ -67,6 +67,10 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
             dispatchCommand(showConfirmDialog(idx));
           } else {
             dispatchCommand(item.onClick);
+
+            if (item.focusEditoronEnter && !(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
+              editorView === null || editorView === void 0 ? void 0 : editorView.focus();
+            }
           }
         };
 
@@ -140,6 +144,8 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
           scrollableElement: popupsScrollableElement,
           dropdownWidth: item.dropdownWidth,
           showSelected: item.showSelected,
+          buttonTestId: item.testId,
+          editorView: editorView,
           setDisableParentScroll: scrollable ? setDisableScroll : undefined
         });
 
@@ -233,9 +239,9 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
 
 var toolbarContainer = function toolbarContainer(theme, scrollable, hasSelect, firstElementIsSelect) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  display: flex;\n  line-height: 1;\n  box-sizing: border-box;\n\n  & > div > div {\n    align-items: center;\n  }\n  ", "\n"])), themed({
-    light: token('elevation.surface.overlay', 'white'),
-    dark: token('elevation.surface.overlay', DN70)
-  })(theme), borderRadius(), token('elevation.shadow.overlay', "0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)"), scrollable ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        ", "\n        overflow: hidden;\n      "])), hasSelect ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              height: 40px;\n            "]))) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n              height: 32px;\n            "])))) : css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        padding: ", "px ", "px;\n        ", "\n      "])), akGridSize / 2, akGridSize, firstElementIsSelect && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          padding-left: ", "px;\n        "])), akGridSize / 2)));
+    light: "var(--ds-surface-overlay, white)",
+    dark: "var(--ds-surface-overlay, ".concat(DN70, ")")
+  })(theme), borderRadius(), "var(--ds-shadow-overlay, ".concat("0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)", ")"), scrollable ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        ", "\n        overflow: hidden;\n      "])), hasSelect ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              height: 40px;\n            "]))) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n              height: 32px;\n            "])))) : css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        padding: ", "px ", "px;\n        ", "\n      "])), akGridSize / 2, akGridSize, firstElementIsSelect && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          padding-left: ", "px;\n        "])), akGridSize / 2)));
 };
 
 var toolbarOverflow = function toolbarOverflow(scrollable, scrollDisabled, firstElementIsSelect) {
@@ -338,56 +344,25 @@ var Toolbar = /*#__PURE__*/function (_Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
+    _defineProperty(_assertThisInitialized(_this), "shouldHandleArrowKeys", function () {
       var _this$props$items;
 
-      //To prevent the keydown handing of arrow keys for 'hyper link floating toolbar'
-      if ((_this$props$items = _this.props.items) !== null && _this$props$items !== void 0 && _this$props$items.find(function (item) {
+      //To prevent the keydown handling of arrow keys for custom toolbar items with 'disableArrowNavigation' prop enabled,
+      //Usually the button which has menus or popups
+      return !((_this$props$items = _this.props.items) !== null && _this$props$items !== void 0 && _this$props$items.find(function (item) {
         return item.type === 'custom' && item.disableArrowNavigation;
-      })) {
-        return;
-      }
+      }));
+    });
 
-      if (event.key === 'Escape') {
+    _defineProperty(_assertThisInitialized(_this), "handleEscape", function (event) {
+      //If any dropdown is open inside the floating toolbar 'Esc' key should not
+      //focus the editorview. The event cannot be stopped as dropdown is not childnode of floating toolbar
+      if (!document.querySelector('[data-role="droplistContent"]')) {
         var _this$props$editorVie;
 
-        _this.currentSelectedItemIndex = 0;
         (_this$props$editorVie = _this.props.editorView) === null || _this$props$editorVie === void 0 ? void 0 : _this$props$editorVie.focus();
         event.preventDefault();
         event.stopPropagation();
-      } else {
-        var _this$toolbarContaine2, _this$toolbarContaine3, _this$toolbarContaine4;
-
-        //To trap the focus inside the toolbar using left and right arrow keys
-        var focusableElements = getFocusableElements((_this$toolbarContaine2 = _this.toolbarContainerRef) === null || _this$toolbarContaine2 === void 0 ? void 0 : _this$toolbarContaine2.current);
-        var firstFocsuableElement = getFirstFocusableElement((_this$toolbarContaine3 = _this.toolbarContainerRef) === null || _this$toolbarContaine3 === void 0 ? void 0 : _this$toolbarContaine3.current);
-        var lastFocsuableElement = getLastFocusableElement((_this$toolbarContaine4 = _this.toolbarContainerRef) === null || _this$toolbarContaine4 === void 0 ? void 0 : _this$toolbarContaine4.current);
-
-        if (!focusableElements || focusableElements.length === 0) {
-          return;
-        }
-
-        if (event.key === 'ArrowRight') {
-          if (_this.currentSelectedItemIndex === focusableElements.length - 1) {
-            firstFocsuableElement === null || firstFocsuableElement === void 0 ? void 0 : firstFocsuableElement.focus();
-            _this.currentSelectedItemIndex = 0;
-          } else {
-            var _focusableElements;
-
-            (_focusableElements = focusableElements[_this.currentSelectedItemIndex + 1]) === null || _focusableElements === void 0 ? void 0 : _focusableElements.focus();
-            _this.currentSelectedItemIndex++;
-          }
-        } else if (event.key === 'ArrowLeft') {
-          if (_this.currentSelectedItemIndex === 0) {
-            lastFocsuableElement === null || lastFocsuableElement === void 0 ? void 0 : lastFocsuableElement.focus();
-            _this.currentSelectedItemIndex = focusableElements.length - 1;
-          } else {
-            var _focusableElements2;
-
-            (_focusableElements2 = focusableElements[_this.currentSelectedItemIndex - 1]) === null || _focusableElements2 === void 0 ? void 0 : _focusableElements2.focus();
-            _this.currentSelectedItemIndex--;
-          }
-        }
       }
     });
 
@@ -398,7 +373,6 @@ var Toolbar = /*#__PURE__*/function (_Component) {
       scrollDisabled: false,
       mounted: false
     };
-    _this.currentSelectedItemIndex = 0;
     return _this;
   } // remove any decorations added by toolbar buttons i.e danger and selected styling
   // this prevents https://product-fabric.atlassian.net/browse/ED-10207
@@ -491,7 +465,12 @@ var Toolbar = /*#__PURE__*/function (_Component) {
       var hasSelect = items.find(function (item) {
         return item.type === 'select' && item.selectType === 'list';
       });
-      return jsx(React.Fragment, null, jsx("div", {
+      return jsx(React.Fragment, null, jsx(ToolbarArrowKeyNavigationProvider, {
+        editorView: this.props.editorView,
+        handleEscape: this.handleEscape,
+        disableArrowKeyNavigation: !this.shouldHandleArrowKeys(),
+        childComponentSelector: "[data-testid='editor-floating-toolbar']"
+      }, jsx("div", {
         ref: this.toolbarContainerRef,
         css: function css(theme) {
           return [toolbarContainer({
@@ -500,8 +479,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         },
         "aria-label": intl.formatMessage(messages.floatingToolbarAriaLabel),
         role: "toolbar",
-        className: className,
-        onKeyDown: this.handleKeyDown
+        "data-testid": "editor-floating-toolbar",
+        className: className
       }, jsx(Announcer, {
         text: intl.formatMessage(messages.floatingToolbarAnnouncer),
         delay: 250
@@ -519,7 +498,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         disabled: this.state.scrollDisabled
       })), jsx("div", {
         ref: this.mountRef
-      }));
+      })));
     }
   }]);
 

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

@@ -15,6 +15,16 @@ export default defineMessages({
     defaultMessage: 'Cancel',
     description: 'Cancel button for floating toolbar confirmation modal.'
   },
+  confirmModalListUnit: {
+    id: 'fabric.editor.floatingToolbar.confirmModalConnectedUnit',
+    defaultMessage: '{name}{amount, plural, =0 {} one { (+1 connected element)} other { (+# connected elements)}}',
+    description: 'Text displayed in confirmation modal which highlights the nodes and the amount of connected nodes that will be deleted'
+  },
+  confirmDeleteLinkedModalMessage: {
+    id: 'fabric.editor.extension.confirmDeleteLinkedModalMessage',
+    defaultMessage: 'Deleting {nodeName} will break anything connected to it.',
+    description: 'Message for confirm modal when deleting a extension linked to an data consumer.'
+  },
   floatingToolbarAriaLabel: {
     id: 'fabric.editor.floatingToolbar.floatingToolbarAriaLabel',
     defaultMessage: 'Floating Toolbar',
@@ -23,16 +33,16 @@ export default defineMessages({
   floatingToolbarAnnouncer: {
     id: 'fabric.editor.floatingToolbar.floatingToolbarAnnouncer',
     defaultMessage: 'Floating toolbar controls have been opened',
-    description: "message that will be announced to screenreaders that the floating toolbar is opened"
+    description: 'message that will be announced to screenreaders that the floating toolbar is opened'
   },
   floatingToolbarScrollLeft: {
     id: 'fabric.editor.floatingToolbar.scrollLeft',
     defaultMessage: 'Scroll left',
-    description: "Button to scroll left when the toolbar is in the overflow state"
+    description: 'Button to scroll left when the toolbar is in the overflow state'
   },
   floatingToolbarScrollRight: {
     id: 'fabric.editor.floatingToolbar.scrollRight',
     defaultMessage: 'Scroll right',
-    description: "Button to scroll right when the toolbar is in the overflow state"
+    description: 'Button to scroll right when the toolbar is in the overflow state'
   }
 });

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

@@ -1,6 +1,5 @@
 import * as colors from '@atlaskit/theme/colors';
 import { hexToRgba } from '@atlaskit/adf-schema';
-import { token } from '@atlaskit/tokens';
 var background = {
   danger: {
     default: {
@@ -8,28 +7,28 @@ var background = {
       dark: 'inherit'
     },
     hover: {
-      light: token('color.background.neutral.subtle.hovered', colors.N30A),
-      dark: token('color.background.neutral.subtle.hovered', colors.N30A)
+      light: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"),
+      dark: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")")
     },
     active: {
-      light: token('color.background.neutral.pressed', "".concat(hexToRgba(colors.B75, 0.6))),
-      dark: token('color.background.neutral.pressed', "".concat(hexToRgba(colors.B75, 0.6)))
+      light: "var(--ds-background-neutral-pressed, ".concat("".concat(hexToRgba(colors.B75, 0.6)), ")"),
+      dark: "var(--ds-background-neutral-pressed, ".concat("".concat(hexToRgba(colors.B75, 0.6)), ")")
     }
   }
 };
 var color = {
   danger: {
     default: {
-      light: token('color.icon', colors.N400),
-      dark: token('color.icon', colors.DN400)
+      light: "var(--ds-icon, ".concat(colors.N400, ")"),
+      dark: "var(--ds-icon, ".concat(colors.DN400, ")")
     },
     hover: {
-      light: token('color.icon.danger', colors.R400),
-      dark: token('color.icon.danger', colors.R400)
+      light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
+      dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
     },
     active: {
-      light: token('color.icon.danger', colors.R400),
-      dark: token('color.icon.danger', colors.R400)
+      light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
+      dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
     }
   }
 };

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

@@ -63,27 +63,14 @@ export function findNode(parent, predicate) {
   });
   return matchedNode;
 }
-export function getFirstFocusableElement(rootNode) {
-  if (!rootNode) {
-    return;
-  }
-
-  var focusableModalElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select') || [];
-  return focusableModalElements[0];
-}
 export function getFocusableElements(rootNode) {
   if (!rootNode) {
-    return;
+    return [];
   }
 
   var focusableModalElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select') || [];
-  return focusableModalElements;
+  return Array.from(focusableModalElements) || [];
 }
-export function getLastFocusableElement(rootNode) {
-  if (!rootNode) {
-    return;
-  }
-
-  var focusableModalElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select') || [];
-  return focusableModalElements[focusableModalElements.length - 1];
+export function getFirstFocusableElement(rootNode) {
+  return getFocusableElements(rootNode)[0];
 }

package/dist/esm/plugins/grid/styles.js

@@ -5,6 +5,5 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { N30A, B200 } from '@atlaskit/theme/colors';
 import { akEditorGridLineZIndex } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 export var GRID_GUTTER = 12;
-export var gridStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .gridParent {\n    width: calc(100% + ", "px);\n    margin-left: -", "px;\n    margin-right: -", "px;\n    transform: scale(1);\n    z-index: ", ";\n  }\n\n  .gridContainer {\n    position: fixed;\n    height: 100vh;\n    width: 100%;\n    pointer-events: none;\n  }\n\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4352\n  .gridLine {\n    border-left: 1px solid ", ";\n    display: inline-block;\n    box-sizing: border-box;\n    height: 100%;\n    margin-left: -1px;\n\n    transition: border-color 0.15s linear;\n    z-index: 0;\n  }\n\n  .highlight {\n    border-left: 1px solid ", ";\n  }\n"])), GRID_GUTTER * 2, GRID_GUTTER, GRID_GUTTER, akEditorGridLineZIndex, token('color.border', N30A), token('color.border.focused', B200));
+export var gridStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .gridParent {\n    width: calc(100% + ", "px);\n    margin-left: -", "px;\n    margin-right: -", "px;\n    transform: scale(1);\n    z-index: ", ";\n  }\n\n  .gridContainer {\n    position: fixed;\n    height: 100vh;\n    width: 100%;\n    pointer-events: none;\n  }\n\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4352\n  .gridLine {\n    border-left: 1px solid ", ";\n    display: inline-block;\n    box-sizing: border-box;\n    height: 100%;\n    margin-left: -1px;\n\n    transition: border-color 0.15s linear;\n    z-index: 0;\n  }\n\n  .highlight {\n    border-left: 1px solid ", ";\n  }\n"])), GRID_GUTTER * 2, GRID_GUTTER, GRID_GUTTER, akEditorGridLineZIndex, "var(--ds-border, ".concat(N30A, ")"), "var(--ds-border-focused, ".concat(B200, ")"));

package/dist/esm/plugins/help-dialog/index.js

@@ -46,7 +46,8 @@ export function createPlugin(dispatch, imageEnabled) {
   });
 }
 
-var helpDialog = function helpDialog(legacyImageUploadProvider) {
+var helpDialog = function helpDialog() {
+  var imageUploadProviderExists = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   return {
     name: 'helpDialog',
     pmPlugins: function pmPlugins() {
@@ -54,7 +55,7 @@ var helpDialog = function helpDialog(legacyImageUploadProvider) {
         name: 'helpDialog',
         plugin: function plugin(_ref) {
           var dispatch = _ref.dispatch;
-          return createPlugin(dispatch, !!legacyImageUploadProvider);
+          return createPlugin(dispatch, imageUploadProviderExists);
         }
       }, {
         name: 'helpDialogKeymap',

package/dist/esm/plugins/help-dialog/ui/styles.js

@@ -6,12 +6,11 @@ import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { akEditorUnitZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 import { N400 } from '@atlaskit/theme/colors';
-export var header = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  min-height: 24px;\n  padding: 20px 40px;\n  font-size: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 'none';\n  color: ", ";\n  background-color: ", ";\n  border-radius: ", "px;\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(24), token('color.text', colors.N400), token('color.background.neutral.subtle', colors.N0), borderRadius());
-export var footer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  z-index: ", ";\n  font-size: ", ";\n  line-height: 20px;\n  color: ", ";\n  padding: 24px;\n  text-align: right;\n  box-shadow: 'none';\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(14), token('color.text.subtlest', colors.N300));
-export var contentWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 20px 44px;\n  border-bottom-right-radius: ", "px;\n  overflow: auto;\n  position: relative;\n  color: ", ";\n  background-color: ", ";\n"])), borderRadius(), token('color.text.subtle', colors.N400), token('color.background.neutral.subtle', colors.N0));
-export var line = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: ", ";\n  content: '';\n  display: block;\n  height: 2px;\n  left: 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  min-width: 604px;\n"])), token('color.background.neutral.subtle', '#fff'));
+export var header = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  min-height: 24px;\n  padding: 20px 40px;\n  font-size: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 'none';\n  color: ", ";\n  background-color: ", ";\n  border-radius: ", "px;\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(24), "var(--ds-text, ".concat(colors.N400, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"), borderRadius());
+export var footer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  z-index: ", ";\n  font-size: ", ";\n  line-height: 20px;\n  color: ", ";\n  padding: 24px;\n  text-align: right;\n  box-shadow: 'none';\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(14), "var(--ds-text-subtlest, ".concat(colors.N300, ")"));
+export var contentWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 20px 44px;\n  border-bottom-right-radius: ", "px;\n  overflow: auto;\n  position: relative;\n  color: ", ";\n  background-color: ", ";\n"])), borderRadius(), "var(--ds-text-subtle, ".concat(colors.N400, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"));
+export var line = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: ", ";\n  content: '';\n  display: block;\n  height: 2px;\n  left: 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  min-width: 604px;\n"])), "var(--ds-background-neutral-subtle, #fff)");
 export var content = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  min-width: 524px;\n  width: 100%;\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n"])));
 export var column = {
   width: '44%',
@@ -24,7 +23,7 @@ export var dialogHeader = {
   '&': {
     fontSize: relativeFontSizeToBase16(24),
     fontWeight: 400,
-    color: token('color.text.subtle', N400),
+    color: "var(--ds-text-subtle, ".concat(N400, ")"),
     letterSpacing: 'normal',
     lineHeight: 1.42857142857143
   }
@@ -33,11 +32,11 @@ export var title = {
   '&': {
     fontSize: relativeFontSizeToBase16(18),
     fontWeight: 400,
-    color: token('color.text.subtle', N400),
+    color: "var(--ds-text-subtle, ".concat(N400, ")"),
     letterSpacing: 'normal',
     lineHeight: 1.42857142857143
   }
 };
-export var codeSm = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  text-align: center;\n"])), token('color.background.neutral', colors.N20), borderRadius());
-export var codeMd = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  width: 50px;\n  text-align: center;\n"])), token('color.background.neutral', colors.N20), borderRadius());
-export var codeLg = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  padding: 0 10px;\n  text-align: center;\n"])), token('color.background.neutral', colors.N20), borderRadius());
+export var codeSm = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), borderRadius());
+export var codeMd = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  width: 50px;\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), borderRadius());
+export var codeLg = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  padding: 0 10px;\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), borderRadius());