@atlaskit/editor-core 176.0.2 → 177.0.0

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

@@ -1,36 +1,17 @@
 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';
 
 const ConfirmationModalImpl = props => {
   const {
-    onConfirm,
-    onClose,
-    options,
-    intl: {
-      formatMessage
-    },
-    testId
+    options
   } = props;
-  const heading = (options === null || options === void 0 ? void 0 : options.title) || formatMessage(messages.confirmModalDefaultHeading);
-  const okButtonLabel = (options === null || options === void 0 ? void 0 : options.okButtonLabel) || formatMessage(messages.confirmModalOK);
-  const 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 ? `${testId}-cancel-button` : undefined
-  }, cancelButtonLabel), /*#__PURE__*/React.createElement(Button, {
-    appearance: "warning",
-    onClick: onConfirm,
-    testId: testId ? `${testId}-confirm-button` : undefined
-  }, okButtonLabel))));
+
+  const renderModel = (isReferentialityDialog = false) => 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 const ConfirmationModal = injectIntl(ConfirmationModalImpl);

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

@@ -35,13 +35,15 @@ export default class Dropdown extends Component {
     _defineProperty(this, "renderArrayOptions", options => {
       const {
         showSelected,
-        dispatchCommand
+        dispatchCommand,
+        editorView
       } = this.props;
       return jsx(DropdownMenu, {
         hide: this.hide,
         dispatchCommand: dispatchCommand,
         items: options,
-        showSelected: showSelected
+        showSelected: showSelected,
+        editorView: editorView
       });
     });
 
@@ -64,6 +66,14 @@ export default class Dropdown extends Component {
 
       (_document$querySelect = document.querySelector(`[data-testid=${this.props.buttonTestId}]`)) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.focus();
     });
+
+    _defineProperty(this, "onOpenChanged", 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();
+      }
+    });
   }
 
   render() {
@@ -82,7 +92,8 @@ export default class Dropdown extends Component {
       disabled,
       tooltip,
       buttonTestId,
-      dropdownWidth
+      dropdownWidth,
+      editorView
     } = this.props;
     let trigger;
 
@@ -129,9 +140,11 @@ export default class Dropdown extends 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

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

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+import { useState, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
 import { gridSize } from '@atlaskit/theme/constants';
@@ -34,65 +35,110 @@ const menuContainer = css`
 export const itemSpacing = gridSize() / 2;
 const DropdownButtonItem = ButtonItem;
 
+const DropdownMenuItem = ({
+  item,
+  hide,
+  dispatchCommand,
+  editorView,
+  iconBefore
+}) => {
+  const [tooltipContent, setTooltipContent] = useState(item.tooltip || '');
+  const handleTooltipMouseOut = useCallback(() => {
+    setTooltipContent('');
+  }, []);
+  const handleItemMouseDown = useCallback(e => {
+    e.preventDefault();
+  }, []);
+  const handleItemMouseOver = useCallback(e => {
+    setTooltipContent(item.tooltip || '');
+
+    if (item.onMouseOver) {
+      e.preventDefault();
+      dispatchCommand(item.onMouseOver);
+    }
+  }, [item.tooltip, item.onMouseOver, dispatchCommand]);
+  const handleItemMouseEnter = useCallback(e => {
+    if (item.onMouseEnter) {
+      e.preventDefault();
+      dispatchCommand(item.onMouseEnter);
+    }
+  }, [item.onMouseEnter, dispatchCommand]);
+  const handleItemMouseLeave = useCallback(e => {
+    if (item.onMouseLeave) {
+      e.preventDefault();
+      dispatchCommand(item.onMouseLeave);
+    }
+  }, [item.onMouseLeave, dispatchCommand]);
+  const handleItemOnFocus = useCallback(e => {
+    if (item.onFocus) {
+      e.preventDefault();
+      dispatchCommand(item.onFocus);
+    }
+  }, [item.onFocus, dispatchCommand]);
+  const handleItemOnBlur = useCallback(e => {
+    if (item.onBlur) {
+      e.preventDefault();
+      dispatchCommand(item.onBlur);
+    }
+  }, [item.onBlur, dispatchCommand]);
+  const handleItemClick = useCallback(() => {
+    /**
+     * 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]);
+  const 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;
+};
+
 class Dropdown extends Component {
   render() {
     const {
       hide,
       dispatchCommand,
       items,
-      intl
+      intl,
+      editorView
     } = this.props;
     return jsx("div", {
       css: menuContainer
-    }, items.filter(item => !item.hidden).map((item, idx) => {
-      const itemContent = jsx(DropdownButtonItem, {
-        key: idx,
-        iconBefore: this.renderSelected(item, intl),
-        iconAfter: item.elemAfter,
-        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: e => {
-          e.preventDefault();
-        },
-        onMouseOver: e => {
-          if (item.onMouseOver) {
-            e.preventDefault();
-            dispatchCommand(item.onMouseOver);
-          }
-        },
-        onMouseEnter: e => {
-          if (item.onMouseEnter) {
-            e.preventDefault();
-            dispatchCommand(item.onMouseEnter);
-          }
-        },
-        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;
-    }));
+    }, items.filter(item => !item.hidden).map((item, idx) => jsx(DropdownMenuItem, {
+      key: idx,
+      item: item,
+      hide: hide,
+      dispatchCommand: dispatchCommand,
+      editorView: editorView,
+      iconBefore: this.renderSelected(item, intl)
+    })));
   }
 
   renderSelected(item, intl) {

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

@@ -19,10 +19,10 @@ const emojiPickerWrapper = css`
   margin-bottom: -12px;
   margin-top: -4px;
 `;
+const EmojiPickerWithListener = withOuterListeners(EmojiPicker);
 export const EmojiPickerButton = props => {
   const buttonRef = React.useRef(null);
   const [isPopupOpen, setIsPopupOpen] = React.useState(false);
-  const EmojiPickerWithListener = withOuterListeners(EmojiPicker);
   React.useEffect(() => {
     if (props.setDisableParentScroll) {
       props.setDisableParentScroll(isPopupOpen);

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

@@ -27,13 +27,10 @@ export default (({
   node,
   disabled
 }) => {
-  var _scrollContainerRef$c, _scrollContainerRef$c2;
-
   const buttonsContainerRef = useRef(null);
   const [needScroll, setNeedScroll] = useState(false);
   const [canScrollLeft, setCanScrollLeft] = useState(true);
   const [canScrollRight, setCanScrollRight] = useState(true);
-  const 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) || {});
   const scheduledSetCanScroll = rafSchedule(() => {
     const {
       scrollLeft,
@@ -47,87 +44,42 @@ export default (({
   const onScroll = () => scheduledSetCanScroll();
 
   const scrollLeft = () => {
-    // find the first item partially visible
-    for (const [itemIndex, item] of items.reverse().entries()) {
-      var _scrollContainerRef$c3;
-
-      const {
-        left: itemLeft,
-        width: itemWidth
-      } = item.getBoundingClientRect();
-      const {
-        left: scrollContainerLeft = 0,
-        width: scrollContainerWidth = 0
-      } = ((_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.getBoundingClientRect()) || {}; // 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;
-
-        const gap = scrollContainerWidth - itemWidth;
-        let 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;
-          }
-        }
+    var _scrollContainerRef$c, _scrollContainerRef$c2, _scrollContainerRef$c3;
 
-        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;
-      }
-    }
+    const {
+      width: scrollContainerWidth = 0
+    } = ((_scrollContainerRef$c = scrollContainerRef.current) === null || _scrollContainerRef$c === void 0 ? void 0 : _scrollContainerRef$c.getBoundingClientRect()) || {};
+    const scrollLeft = ((_scrollContainerRef$c2 = scrollContainerRef.current) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.scrollLeft) || 0; // scroll to current position - scroll container width
+
+    let scrollTo = scrollLeft - scrollContainerWidth;
+    (_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.scrollTo({
+      top: 0,
+      left: scrollTo,
+      behavior: 'smooth'
+    });
   };
 
   const scrollRight = () => {
-    // find the last item partially visible
-    for (const item of items) {
-      var _scrollContainerRef$c6;
-
-      const {
-        left: itemLeft,
-        width: itemWidth
-      } = item.getBoundingClientRect();
-      const {
-        left: scrollContainerLeft = 0,
-        width: scrollContainerWidth = 0
-      } = ((_scrollContainerRef$c6 = scrollContainerRef.current) === null || _scrollContainerRef$c6 === void 0 ? void 0 : _scrollContainerRef$c6.getBoundingClientRect()) || {}; // if item is partially visible on the right
+    var _scrollContainerRef$c4, _scrollContainerRef$c5, _scrollContainerRef$c6;
 
-      if (itemLeft + itemWidth >= scrollContainerLeft + scrollContainerWidth) {
-        var _scrollContainerRef$c7, _scrollContainerRef$c8, _scrollContainerRef$c9;
-
-        let scrollTo = item.offsetLeft; // if the item is longer than the entire container width, just scroll past it
-
-        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
-
-
-        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;
-        }
-
-        (_scrollContainerRef$c9 = scrollContainerRef.current) === null || _scrollContainerRef$c9 === void 0 ? void 0 : _scrollContainerRef$c9.scrollTo({
-          top: 0,
-          left: scrollTo,
-          behavior: 'smooth'
-        });
-        break;
-      }
-    }
+    const {
+      width: scrollContainerWidth = 0
+    } = ((_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 ? void 0 : _scrollContainerRef$c4.getBoundingClientRect()) || {};
+    const scrollLeft = ((_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.scrollLeft) || 0; // scroll to current position + scroll container width
+
+    let scrollTo = scrollLeft + scrollContainerWidth;
+    (_scrollContainerRef$c6 = scrollContainerRef.current) === null || _scrollContainerRef$c6 === void 0 ? void 0 : _scrollContainerRef$c6.scrollTo({
+      top: 0,
+      left: scrollTo,
+      behavior: 'smooth'
+    });
   };
 
   const resizeObserver = new ResizeObserver(t => {
-    var _scrollContainerRef$c10, _scrollContainerRef$c11, _scrollContainerRef$c12;
+    var _scrollContainerRef$c7, _scrollContainerRef$c8, _scrollContainerRef$c9;
 
-    const widthNeededToShowAllItems = ((_scrollContainerRef$c10 = scrollContainerRef.current) === null || _scrollContainerRef$c10 === void 0 ? void 0 : _scrollContainerRef$c10.scrollWidth) || 0;
-    const 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;
+    const widthNeededToShowAllItems = ((_scrollContainerRef$c7 = scrollContainerRef.current) === null || _scrollContainerRef$c7 === void 0 ? void 0 : _scrollContainerRef$c7.scrollWidth) || 0;
+    const 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);
@@ -160,7 +112,8 @@ export default (({
   }, [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/es2019/plugins/floating-toolbar/ui/SimpleModal.js

@@ -0,0 +1,32 @@
+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 const SimpleModal = props => {
+  const {
+    onConfirm,
+    onClose,
+    options,
+    intl: {
+      formatMessage
+    },
+    testId
+  } = props;
+  const heading = (options === null || options === void 0 ? void 0 : options.title) || formatMessage(messages.confirmModalDefaultHeading);
+  const okButtonLabel = (options === null || options === void 0 ? void 0 : options.okButtonLabel) || formatMessage(messages.confirmModalOK);
+  const 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 ? `${testId}-cancel-button` : undefined
+  }, cancelButtonLabel), /*#__PURE__*/React.createElement(Button, {
+    appearance: "warning",
+    onClick: () => onConfirm(),
+    testId: testId ? `${testId}-confirm-button` : undefined
+  }, okButtonLabel)));
+};

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

@@ -10,7 +10,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';
@@ -26,6 +26,7 @@ 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';
 const akGridSize = gridSize();
 const ToolbarItems = /*#__PURE__*/React.memo(({
   items,
@@ -53,6 +54,10 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
             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();
+            }
           }
         };
 
@@ -114,6 +119,8 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
           scrollableElement: popupsScrollableElement,
           dropdownWidth: item.dropdownWidth,
           showSelected: item.showSelected,
+          buttonTestId: item.testId,
+          editorView: editorView,
           setDisableParentScroll: scrollable ? setDisableScroll : undefined
         });
 
@@ -333,54 +340,23 @@ class Toolbar extends Component {
       }
     });
 
-    _defineProperty(this, "handleKeyDown", event => {
+    _defineProperty(this, "shouldHandleArrowKeys", () => {
       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(item => item.type === 'custom' && item.disableArrowNavigation)) {
-        return;
-      }
+      //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(item => item.type === 'custom' && item.disableArrowNavigation));
+    });
 
-      if (event.key === 'Escape') {
+    _defineProperty(this, "handleEscape", 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
-        const focusableElements = getFocusableElements((_this$toolbarContaine2 = this.toolbarContainerRef) === null || _this$toolbarContaine2 === void 0 ? void 0 : _this$toolbarContaine2.current);
-        const firstFocsuableElement = getFirstFocusableElement((_this$toolbarContaine3 = this.toolbarContainerRef) === null || _this$toolbarContaine3 === void 0 ? void 0 : _this$toolbarContaine3.current);
-        const 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--;
-          }
-        }
       }
     });
 
@@ -391,7 +367,6 @@ class Toolbar extends Component {
       scrollDisabled: false,
       mounted: false
     };
-    this.currentSelectedItemIndex = 0;
   } // remove any decorations added by toolbar buttons i.e danger and selected styling
   // this prevents https://product-fabric.atlassian.net/browse/ED-10207
 
@@ -474,15 +449,20 @@ class Toolbar extends Component {
 
     const firstElementIsSelect = items[0].type === 'select';
     const hasSelect = items.find(item => 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: theme => [toolbarContainer({
         theme
       }, scrollable, hasSelect !== undefined, firstElementIsSelect)],
       "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
@@ -500,7 +480,7 @@ class Toolbar extends Component {
       disabled: this.state.scrollDisabled
     })), jsx("div", {
       ref: this.mountRef
-    }));
+    })));
   }
 
 }

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

@@ -15,24 +15,34 @@ 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',
-    description: `a floating toolbar's aria label`
+    description: "a floating toolbar's aria label"
   },
   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/es2019/plugins/floating-toolbar/utils.js

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