@atlaskit/editor-common 72.1.2 → 72.2.1

package/dist/esm/ui-menu/Dropdown/index.js

@@ -5,17 +5,13 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 import React, { PureComponent } from 'react';
 import { withReactEditorViewOuterListeners } from '../../ui-react';
 import DropdownList from '../../ui/DropList';
 import Popup from '../../ui/Popup';
 import { MenuArrowKeyNavigationProvider } from '../MenuArrowKeyNavigationProvider';
-
 /**
  * Wrapper around @atlaskit/droplist which uses Popup and Portal to render
  * droplist outside of "overflow: hidden" containers when needed.
@@ -24,51 +20,43 @@ import { MenuArrowKeyNavigationProvider } from '../MenuArrowKeyNavigationProvide
  */
 export var Dropdown = /*#__PURE__*/function (_PureComponent) {
   _inherits(Dropdown, _PureComponent);
-
   var _super = _createSuper(Dropdown);
-
   function Dropdown(props) {
     var _this;
-
     _classCallCheck(this, Dropdown);
-
     _this = _super.call(this, props);
-
     _defineProperty(_assertThisInitialized(_this), "handleRef", function (target) {
       _this.setState({
         target: target || undefined
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "updatePopupPlacement", function (placement) {
       _this.setState({
         popupPlacement: placement
       });
     });
-
     _this.state = {
       popupPlacement: ['bottom', 'left']
     };
     return _this;
   }
-
   _createClass(Dropdown, [{
     key: "renderDropdown",
     value: function renderDropdown() {
       var _this$state = this.state,
-          target = _this$state.target,
-          popupPlacement = _this$state.popupPlacement;
+        target = _this$state.target,
+        popupPlacement = _this$state.popupPlacement;
       var _this$props = this.props,
-          children = _this$props.children,
-          mountTo = _this$props.mountTo,
-          boundariesElement = _this$props.boundariesElement,
-          scrollableElement = _this$props.scrollableElement,
-          onOpenChange = _this$props.onOpenChange,
-          fitHeight = _this$props.fitHeight,
-          fitWidth = _this$props.fitWidth,
-          zIndex = _this$props.zIndex,
-          disableArrowKeyNavigation = _this$props.disableArrowKeyNavigation,
-          keyDownHandlerContext = _this$props.keyDownHandlerContext;
+        children = _this$props.children,
+        mountTo = _this$props.mountTo,
+        boundariesElement = _this$props.boundariesElement,
+        scrollableElement = _this$props.scrollableElement,
+        onOpenChange = _this$props.onOpenChange,
+        fitHeight = _this$props.fitHeight,
+        fitWidth = _this$props.fitWidth,
+        zIndex = _this$props.zIndex,
+        disableArrowKeyNavigation = _this$props.disableArrowKeyNavigation,
+        keyDownHandlerContext = _this$props.keyDownHandlerContext;
       return /*#__PURE__*/React.createElement(Popup, {
         target: target,
         mountTo: mountTo,
@@ -81,7 +69,7 @@ export var Dropdown = /*#__PURE__*/function (_PureComponent) {
       }, /*#__PURE__*/React.createElement(MenuArrowKeyNavigationProvider, {
         disableArrowKeyNavigation: disableArrowKeyNavigation,
         keyDownHandlerContext: keyDownHandlerContext,
-        closeonTab: true,
+        closeOnTab: true,
         handleClose: function handleClose(event) {
           return onOpenChange && onOpenChange({
             isOpen: false,
@@ -104,14 +92,13 @@ export var Dropdown = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
-          trigger = _this$props2.trigger,
-          isOpen = _this$props2.isOpen;
+        trigger = _this$props2.trigger,
+        isOpen = _this$props2.isOpen;
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
         ref: this.handleRef
       }, trigger), isOpen ? this.renderDropdown() : null);
     }
   }]);
-
   return Dropdown;
 }(PureComponent);
 var DropdownWithOuterListeners = withReactEditorViewOuterListeners(Dropdown);

package/dist/esm/ui-menu/DropdownMenu/index.js

@@ -9,13 +9,9 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["children"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 /** @jsx jsx */
 import React, { PureComponent } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -30,7 +26,6 @@ import Popup from '../../ui/Popup';
 import { MenuArrowKeyNavigationProvider } from '../MenuArrowKeyNavigationProvider';
 var wrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* tooltip in ToolbarButton is display:block */\n  & > div > div {\n    display: flex;\n  }\n"])));
 var focusedMenuItemStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n  outline: none;\n"])), "var(--ds-border-focused, ".concat(B100, ")"));
-
 var buttonStyles = function buttonStyles(isActive) {
   return function (theme) {
     if (isActive) {
@@ -57,57 +52,45 @@ var buttonStyles = function buttonStyles(isActive) {
 };
 
 var DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
+
 /**
  * Wrapper around @atlaskit/droplist which uses Popup and Portal to render
  * dropdown-menu outside of "overflow: hidden" containers when needed.
  *
  * Also it controls popper's placement.
  */
-
 var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
   _inherits(DropdownMenuWrapper, _PureComponent);
-
   var _super = _createSuper(DropdownMenuWrapper);
-
   function DropdownMenuWrapper() {
     var _this;
-
     _classCallCheck(this, DropdownMenuWrapper);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
     _defineProperty(_assertThisInitialized(_this), "state", {
-      popupPlacement: ['bottom', 'left']
+      popupPlacement: ['bottom', 'left'],
+      selectionIndex: -1
     });
-
     _defineProperty(_assertThisInitialized(_this), "handleRef", function (target) {
       _this.setState({
         target: target || undefined
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "updatePopupPlacement", function (placement) {
       var previousPlacement = _this.state.popupPlacement;
-
       if (placement[0] !== previousPlacement[0] || placement[1] !== previousPlacement[1]) {
         _this.setState({
           popupPlacement: placement
         });
       }
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleCloseandFocus", function () {
+    _defineProperty(_assertThisInitialized(_this), "handleCloseAndFocus", function () {
       var _this$state$target, _this$state$target$qu;
-
       _this.handleClose();
-
       (_this$state$target = _this.state.target) === null || _this$state$target === void 0 ? void 0 : (_this$state$target$qu = _this$state$target.querySelector('button')) === null || _this$state$target$qu === void 0 ? void 0 : _this$state$target$qu.focus();
     });
-
     _defineProperty(_assertThisInitialized(_this), "handleClose", function () {
       if (_this.props.onOpenChange) {
         _this.props.onOpenChange({
@@ -115,31 +98,29 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         });
       }
     });
-
     return _this;
   }
-
   _createClass(DropdownMenuWrapper, [{
     key: "renderDropdownMenu",
     value: function renderDropdownMenu() {
       var _this2 = this;
-
       var _this$state = this.state,
-          target = _this$state.target,
-          popupPlacement = _this$state.popupPlacement;
+        target = _this$state.target,
+        popupPlacement = _this$state.popupPlacement;
       var _this$props = this.props,
-          items = _this$props.items,
-          mountTo = _this$props.mountTo,
-          boundariesElement = _this$props.boundariesElement,
-          scrollableElement = _this$props.scrollableElement,
-          offset = _this$props.offset,
-          fitHeight = _this$props.fitHeight,
-          fitWidth = _this$props.fitWidth,
-          isOpen = _this$props.isOpen,
-          zIndex = _this$props.zIndex,
-          shouldUseDefaultRole = _this$props.shouldUseDefaultRole,
-          disableArrowKeyNavigation = _this$props.disableArrowKeyNavigation,
-          keyDownHandlerContext = _this$props.keyDownHandlerContext;
+        items = _this$props.items,
+        mountTo = _this$props.mountTo,
+        boundariesElement = _this$props.boundariesElement,
+        scrollableElement = _this$props.scrollableElement,
+        offset = _this$props.offset,
+        fitHeight = _this$props.fitHeight,
+        fitWidth = _this$props.fitWidth,
+        isOpen = _this$props.isOpen,
+        zIndex = _this$props.zIndex,
+        shouldUseDefaultRole = _this$props.shouldUseDefaultRole,
+        disableArrowKeyNavigation = _this$props.disableArrowKeyNavigation,
+        keyDownHandlerContext = _this$props.keyDownHandlerContext,
+        onItemActivated = _this$props.onItemActivated;
       return jsx(Popup, {
         target: isOpen ? target : undefined,
         mountTo: mountTo,
@@ -152,9 +133,21 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         offset: offset
       }, jsx(MenuArrowKeyNavigationProvider, {
         disableArrowKeyNavigation: disableArrowKeyNavigation,
-        handleClose: this.handleCloseandFocus,
+        handleClose: this.handleCloseAndFocus,
         keyDownHandlerContext: keyDownHandlerContext,
-        closeonTab: true
+        onSelection: function onSelection(index) {
+          var result = [];
+          if (typeof onItemActivated === 'function') {
+            result = items.reduce(function (result, group) {
+              return result.concat(group.items);
+            }, result);
+            onItemActivated({
+              item: result[index],
+              shouldCloseMenu: false
+            });
+          }
+        },
+        closeOnTab: true
       }, jsx(DropListWithOutsideListeners, {
         isOpen: true,
         appearance: "tall",
@@ -163,7 +156,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         shouldFitContainer: true,
         isTriggerNotTabbable: true,
         handleClickOutside: this.handleClose,
-        handleEscapeKeydown: this.handleCloseandFocus,
+        handleEscapeKeydown: this.handleCloseAndFocus,
         targetRef: this.state.target
       }, jsx("div", {
         style: {
@@ -176,7 +169,6 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
           role: shouldUseDefaultRole ? 'group' : 'menu'
         }, group.items.map(function (item) {
           var _item$key;
-
           return jsx(DropdownMenuItem, {
             key: (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : String(item.content),
             item: item,
@@ -192,8 +184,8 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
-          children = _this$props2.children,
-          isOpen = _this$props2.isOpen;
+        children = _this$props2.children,
+        isOpen = _this$props2.isOpen;
       return jsx("div", {
         css: wrapper
       }, jsx("div", {
@@ -201,29 +193,23 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
       }, children), isOpen ? this.renderDropdownMenu() : null);
     }
   }]);
-
   return DropdownMenuWrapper;
 }(PureComponent);
-
 export { DropdownMenuWrapper as default };
 var DropdownMenuItemCustomComponent = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
-      rest = _objectWithoutProperties(props, _excluded);
-
+    rest = _objectWithoutProperties(props, _excluded);
   return jsx("span", _extends({
     ref: ref
   }, rest), children);
 });
-
 function DropdownMenuItem(_ref) {
   var _item$key2;
-
   var item = _ref.item,
-      onItemActivated = _ref.onItemActivated,
-      shouldUseDefaultRole = _ref.shouldUseDefaultRole,
-      _onMouseEnter = _ref.onMouseEnter,
-      _onMouseLeave = _ref.onMouseLeave;
-
+    onItemActivated = _ref.onItemActivated,
+    shouldUseDefaultRole = _ref.shouldUseDefaultRole,
+    _onMouseEnter = _ref.onMouseEnter,
+    _onMouseLeave = _ref.onMouseLeave;
   // onClick and value.name are the action indicators in the handlers
   // If neither are present, don't wrap in an Item.
   if (!item.onClick && !(item.value && item.value.name)) {
@@ -231,14 +217,14 @@ function DropdownMenuItem(_ref) {
       key: String(item.content)
     }, item.content);
   }
-
   var dropListItem = jsx("div", {
     css: function css(theme) {
       return buttonStyles(item.isActive)({
         theme: theme
       });
     },
-    tabIndex: -1
+    tabIndex: -1,
+    "aria-disabled": item.isDisabled ? 'true' : 'false'
   }, jsx(CustomItem, {
     item: item,
     key: (_item$key2 = item.key) !== null && _item$key2 !== void 0 ? _item$key2 : String(item.content),
@@ -270,16 +256,13 @@ function DropdownMenuItem(_ref) {
       });
     }
   }, item.content));
-
   if (item.tooltipDescription) {
     var _item$key3;
-
     return jsx(Tooltip, {
       key: (_item$key3 = item.key) !== null && _item$key3 !== void 0 ? _item$key3 : String(item.content),
       content: item.tooltipDescription,
       position: item.tooltipPosition
     }, dropListItem);
   }
-
   return dropListItem;
 }

package/dist/esm/ui-menu/MenuArrowKeyNavigationProvider/index.js

@@ -1,147 +1,135 @@
-import React, { useLayoutEffect, useRef } from 'react';
-
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 /**
  * This component is a wrapper of vertical menus which listens to keydown events of children
  * and handles up/down arrow key navigation
  */
 export var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvider(_ref) {
   var children = _ref.children,
-      handleClose = _ref.handleClose,
-      disableArrowKeyNavigation = _ref.disableArrowKeyNavigation,
-      keyDownHandlerContext = _ref.keyDownHandlerContext,
-      closeonTab = _ref.closeonTab;
+    handleClose = _ref.handleClose,
+    disableArrowKeyNavigation = _ref.disableArrowKeyNavigation,
+    keyDownHandlerContext = _ref.keyDownHandlerContext,
+    closeOnTab = _ref.closeOnTab,
+    onSelection = _ref.onSelection;
   var wrapperRef = useRef(null);
-  var currentSelectedItemIndex = useRef(-1);
-
-  var incrementIndex = function incrementIndex(list) {
-    if (currentSelectedItemIndex.current === list.length - 1 || currentSelectedItemIndex.current === -1) {
-      currentSelectedItemIndex.current = 0;
-    } else {
-      currentSelectedItemIndex.current = currentSelectedItemIndex.current + 1;
+  var _useState = useState(-1),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentSelectedItemIndex = _useState2[0],
+    setCurrentSelectedItemIndex = _useState2[1];
+  var incrementIndex = useCallback(function (list) {
+    var currentIndex = currentSelectedItemIndex;
+    var nextIndex = (currentIndex + 1) % list.length;
+    // Skips disabled items. Previously this function relied on a list of enabled elements which caused a
+    // difference between currentIndex and the item index in the menu.
+    while (nextIndex !== currentIndex && list[nextIndex].getAttribute('aria-disabled') === 'true') {
+      nextIndex = (nextIndex + 1) % list.length;
     }
-  };
-
-  var decrementIndex = function decrementIndex(list) {
-    if (currentSelectedItemIndex.current === 0 || currentSelectedItemIndex.current === -1) {
-      currentSelectedItemIndex.current = list.length - 1;
-    } else {
-      currentSelectedItemIndex.current = currentSelectedItemIndex.current - 1;
+    setCurrentSelectedItemIndex(nextIndex);
+    return nextIndex;
+  }, [currentSelectedItemIndex]);
+  var decrementIndex = useCallback(function (list) {
+    var currentIndex = currentSelectedItemIndex;
+    var nextIndex = (list.length + currentIndex - 1) % list.length;
+    while (nextIndex !== currentIndex && list[nextIndex].getAttribute('aria-disabled') === 'true') {
+      nextIndex = (list.length + nextIndex - 1) % list.length;
     }
-  };
-
+    setCurrentSelectedItemIndex(nextIndex);
+    return nextIndex;
+  }, [currentSelectedItemIndex]);
   useLayoutEffect(function () {
     if (disableArrowKeyNavigation) {
       return;
     }
+
     /**
      * To handle the key events on the list
      * @param event
      */
-
-
     var handleKeyDown = function handleKeyDown(event) {
-      var _wrapperRef$current, _focusableElements$cu, _focusableElements$cu2;
+      var _wrapperRef$current;
+      var targetElement = event.target;
 
-      var targetElement = event.target; //Tab key on menu items can be handled in the parent components of dropdown menus with KeydownHandlerContext
-
-      if (event.key === 'Tab' && closeonTab) {
+      //Tab key on menu items can be handled in the parent components of dropdown menus with KeydownHandlerContext
+      if (event.key === 'Tab' && closeOnTab) {
         handleClose(event);
         keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleTab();
         return;
-      } //To trap the focus inside the toolbar using left and right arrow keys
-
-
-      var focusableElements = getEnabledElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+      }
 
+      //To trap the focus inside the toolbar using left and right arrow keys
+      var focusableElements = getFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
       if (!focusableElements || (focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0) {
         return;
       }
-
       if (!((_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(targetElement))) {
-        currentSelectedItemIndex.current = -1;
+        setCurrentSelectedItemIndex(-1);
       }
-
       switch (event.key) {
         case 'ArrowDown':
-          //If ArrowDown pressed
-          //If on last item
-          // Focus last item
-          //Else
-          // Focus next item
-          incrementIndex(focusableElements);
-          (_focusableElements$cu = focusableElements[currentSelectedItemIndex.current]) === null || _focusableElements$cu === void 0 ? void 0 : _focusableElements$cu.focus();
-          event.preventDefault();
-          break;
-
+          {
+            var _focusableElements$fo;
+            var focusIndex = incrementIndex(focusableElements);
+            (_focusableElements$fo = focusableElements[focusIndex]) === null || _focusableElements$fo === void 0 ? void 0 : _focusableElements$fo.focus();
+            event.preventDefault();
+            break;
+          }
         case 'ArrowUp':
-          //ArrowUP pressed
-          //If on First item
-          // Focus last item
-          //Else
-          // Focus previous item
-          decrementIndex(focusableElements);
-          (_focusableElements$cu2 = focusableElements[currentSelectedItemIndex.current]) === null || _focusableElements$cu2 === void 0 ? void 0 : _focusableElements$cu2.focus();
-          event.preventDefault();
-          break;
+          {
+            var _focusableElements$_f;
+            var _focusIndex = decrementIndex(focusableElements);
+            (_focusableElements$_f = focusableElements[_focusIndex]) === null || _focusableElements$_f === void 0 ? void 0 : _focusableElements$_f.focus();
+            event.preventDefault();
+            break;
+          }
+
         //ArrowLeft/Right on the menu should close the menus
         //then logic to retain the focus can be handled in the parent components with KeydownHandlerContext
-
         case 'ArrowLeft':
           //Filter out the events from outside the menu
           if (!targetElement.closest('.custom-key-handler-wrapper')) {
             return;
           }
-
+          if (!targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
+            keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowLeft();
+          }
           handleClose(event);
-          keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowLeft();
           break;
-
         case 'ArrowRight':
           //Filter out the events from outside the menu
           if (!targetElement.closest('.custom-key-handler-wrapper')) {
             return;
           }
-
+          if (!targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
+            keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowRight();
+          }
           handleClose(event);
-          keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowRight();
           break;
-
         case 'Escape':
           handleClose(event);
           break;
-
+        case 'Enter':
+          if (typeof onSelection === 'function') {
+            onSelection(currentSelectedItemIndex);
+          }
+          break;
         default:
           return;
       }
     };
-
     document.addEventListener('keydown', handleKeyDown);
     return function () {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeonTab]);
+  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, incrementIndex, decrementIndex]);
   return /*#__PURE__*/React.createElement("div", {
-    className: "custom-key-handler-wrapper",
+    className: "menu-key-handler-wrapper custom-key-handler-wrapper",
     ref: wrapperRef
   }, children);
 };
-
 function getFocusableElements(rootNode) {
   if (!rootNode) {
     return [];
   }
-
   var focusableModalElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, div[tabindex="-1"]') || [];
   return Array.from(focusableModalElements);
-}
-/**
- * This method filters out all the disabled menu items
- */
-
-
-function getEnabledElements(rootNode) {
-  var focusableElements = getFocusableElements(rootNode);
-  return focusableElements.filter(function (element) {
-    return !element.querySelector('[role="button"][aria-disabled="true"]') && !element.querySelector('[role="menuitem"][aria-disabled="true"]');
-  });
 }

package/dist/esm/ui-menu/ToolbarButton/index.js

@@ -1,12 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /** @jsx jsx */
 import React, { useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -18,34 +14,33 @@ export var TOOLBAR_BUTTON = TOOLBAR_ACTION_SUBJECT_ID;
 var buttonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  height: 100%;\n"])));
 var ToolbarButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var buttonId = props.buttonId,
-      testId = props.testId,
-      _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className,
-      href = props.href,
-      iconAfter = props.iconAfter,
-      iconBefore = props.iconBefore,
-      disabled = props.disabled,
-      selected = props.selected,
-      spacing = props.spacing,
-      target = props.target,
-      children = props.children,
-      hideTooltip = props.hideTooltip,
-      title = props.title,
-      _props$titlePosition = props.titlePosition,
-      titlePosition = _props$titlePosition === void 0 ? 'top' : _props$titlePosition,
-      item = props.item,
-      ariaLabel = props['aria-label'],
-      ariaHasPopup = props['aria-haspopup'],
-      ariaExpanded = props['aria-expanded'],
-      ariaPressed = props['aria-pressed'],
-      ariaKeyShortcuts = props['aria-keyshortcuts'],
-      onClick = props.onClick,
-      onItemClick = props.onItemClick;
+    testId = props.testId,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    href = props.href,
+    iconAfter = props.iconAfter,
+    iconBefore = props.iconBefore,
+    disabled = props.disabled,
+    selected = props.selected,
+    spacing = props.spacing,
+    target = props.target,
+    children = props.children,
+    hideTooltip = props.hideTooltip,
+    title = props.title,
+    _props$titlePosition = props.titlePosition,
+    titlePosition = _props$titlePosition === void 0 ? 'top' : _props$titlePosition,
+    item = props.item,
+    ariaLabel = props['aria-label'],
+    ariaHasPopup = props['aria-haspopup'],
+    ariaExpanded = props['aria-expanded'],
+    ariaPressed = props['aria-pressed'],
+    ariaKeyShortcuts = props['aria-keyshortcuts'],
+    onClick = props.onClick,
+    onItemClick = props.onItemClick;
   var handleClick = useCallback(function (event, analyticsEvent) {
     if (disabled) {
       return;
     }
-
     if (buttonId) {
       analyticsEvent.update(function (payload) {
         return _objectSpread(_objectSpread({}, payload), {}, {
@@ -56,11 +51,9 @@ var ToolbarButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
         });
       }).fire(FabricChannel.editor);
     }
-
     if (onClick) {
       onClick(event);
     }
-
     if (item && onItemClick) {
       onItemClick(item);
     }
@@ -87,11 +80,9 @@ var ToolbarButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
     "aria-pressed": ariaPressed,
     "aria-keyshortcuts": ariaKeyShortcuts
   }, children);
-
   if (!title) {
     return button;
   }
-
   var tooltipContent = !hideTooltip ? title : null;
   return jsx(Tooltip, {
     content: tooltipContent,