@atlaskit/editor-common 72.4.0 → 72.5.0

package/dist/cjs/ui-menu/ArrowKeyNavigationProvider/ColorPaletteArrowKeyNavigationProvider/index.js

@@ -0,0 +1,141 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorPaletteArrowKeyNavigationProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ * This component is a wrapper for color picker which listens to keydown events of children
+ * and handles arrow key navigation
+ */
+var ColorPaletteArrowKeyNavigationProvider = function ColorPaletteArrowKeyNavigationProvider(_ref) {
+  var children = _ref.children,
+    selectedRowIndex = _ref.selectedRowIndex,
+    selectedColumnIndex = _ref.selectedColumnIndex,
+    isOpenedByKeyboard = _ref.isOpenedByKeyboard,
+    isPopupPositioned = _ref.isPopupPositioned,
+    handleClose = _ref.handleClose,
+    closeOnTab = _ref.closeOnTab;
+  var wrapperRef = (0, _react.useRef)(null);
+  var currentSelectedColumnIndex = (0, _react.useRef)(selectedColumnIndex === -1 ? 0 : selectedColumnIndex);
+  var currentSelectedRowIndex = (0, _react.useRef)(selectedRowIndex === -1 ? 0 : selectedRowIndex);
+  var incrementRowIndex = function incrementRowIndex(rowElements, columnElements) {
+    if (currentSelectedRowIndex.current === rowElements.length - 1) {
+      currentSelectedRowIndex.current = 0;
+    } else {
+      currentSelectedRowIndex.current = currentSelectedRowIndex.current + 1;
+    }
+  };
+  var decrementRowIndex = function decrementRowIndex(rowElements, columnElements) {
+    if (currentSelectedRowIndex.current === 0) {
+      currentSelectedRowIndex.current = rowElements.length - 1;
+    } else {
+      currentSelectedRowIndex.current = currentSelectedRowIndex.current - 1;
+    }
+  };
+  (0, _react.useLayoutEffect)(function () {
+    var incrementColumnIndex = function incrementColumnIndex(rowElements, columnElements) {
+      if (currentSelectedColumnIndex.current === columnElements.length - 1) {
+        incrementRowIndex(rowElements, columnElements);
+        currentSelectedColumnIndex.current = 0;
+      } else {
+        currentSelectedColumnIndex.current = currentSelectedColumnIndex.current + 1;
+      }
+    };
+    var decrementColumnIndex = function decrementColumnIndex(rowElements, columnElements) {
+      if (currentSelectedColumnIndex.current === 0) {
+        decrementRowIndex(rowElements, columnElements);
+        currentSelectedColumnIndex.current = columnElements.length - 1;
+      } else {
+        currentSelectedColumnIndex.current = currentSelectedColumnIndex.current - 1;
+      }
+    };
+    var focusColorSwatch = function focusColorSwatch() {
+      var _focusableElements$cu;
+      var colorSwatchesRowElements = getColorSwatchesRows(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+      var currentSelectedColorSwatchRowElement = colorSwatchesRowElements[currentSelectedRowIndex.current];
+      var focusableElements = getFocusableElements(currentSelectedColorSwatchRowElement);
+      if (!focusableElements || (focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0) {
+        return;
+      }
+      (_focusableElements$cu = focusableElements[currentSelectedColumnIndex.current]) === null || _focusableElements$cu === void 0 ? void 0 : _focusableElements$cu.focus();
+    };
+
+    /**
+     * To handle the key events on the list
+     * @param event
+     */
+    var handleKeyDown = function handleKeyDown(event) {
+      if (event.key === 'Tab' && closeOnTab) {
+        handleClose(event);
+        return;
+      }
+      var colorSwatchesRowElements = getColorSwatchesRows(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+      var currentSelectedColorSwatchRowElement = colorSwatchesRowElements[currentSelectedRowIndex.current];
+      var focusableElements = getFocusableElements(currentSelectedColorSwatchRowElement);
+      switch (event.key) {
+        case 'ArrowDown':
+          incrementRowIndex(colorSwatchesRowElements, focusableElements);
+          focusColorSwatch();
+          event.preventDefault();
+          break;
+        case 'ArrowUp':
+          decrementRowIndex(colorSwatchesRowElements, focusableElements);
+          focusColorSwatch();
+          event.preventDefault();
+          break;
+        case 'ArrowLeft':
+          decrementColumnIndex(colorSwatchesRowElements, focusableElements);
+          focusColorSwatch();
+          event.preventDefault();
+          break;
+        case 'ArrowRight':
+          incrementColumnIndex(colorSwatchesRowElements, focusableElements);
+          focusColorSwatch();
+          event.preventDefault();
+          break;
+        case 'Escape':
+          handleClose(event);
+          break;
+        default:
+          return;
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    // set focus to current selected color swatch if only opened by keyboard
+    if (isOpenedByKeyboard && isPopupPositioned) {
+      // Using timeout because, we need to wait till color palette is rendered
+      //  and visible on screen, then only focus color swatch, otherwise focus will be
+      //  moved to body
+      setTimeout(function () {
+        focusColorSwatch();
+      });
+    }
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [currentSelectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, wrapperRef, handleClose, closeOnTab]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "custom-key-handler-wrapper",
+    ref: wrapperRef
+  }, children);
+};
+exports.ColorPaletteArrowKeyNavigationProvider = ColorPaletteArrowKeyNavigationProvider;
+function getColorSwatchesRows(rootNode) {
+  if (!rootNode) {
+    return [];
+  }
+  var colorSwatchesRowElements = rootNode.querySelectorAll('div[role=radiogroup]') || [];
+  return Array.from(colorSwatchesRowElements);
+}
+function getFocusableElements(rootNode) {
+  if (!rootNode) {
+    return [];
+  }
+  var focusableModalElements = rootNode.querySelectorAll('button[role=radio]:not([disabled])') || [];
+  return Array.from(focusableModalElements);
+}

package/dist/cjs/ui-menu/{MenuArrowKeyNavigationProvider → ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider}/index.js

@@ -46,6 +46,21 @@ var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvider(_re
     setCurrentSelectedItemIndex(nextIndex);
     return nextIndex;
   }, [currentSelectedItemIndex]);
+
+  // this useEffect uses onSelection in it's dependency list which gets
+  // changed as a result of the dropdown menu getting re-rendered in it's
+  // parent component. Note that if onSelection gets updated to useMemo
+  // this will no longer work.
+  (0, _react.useEffect)(function () {
+    var currentIndex = currentSelectedItemIndex;
+    var list = getFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+    var currentElement = list[currentIndex];
+    if (currentElement && currentElement.getAttribute('aria-disabled') === 'true') {
+      var _list$focusIndex;
+      var focusIndex = incrementIndex(list);
+      (_list$focusIndex = list[focusIndex]) === null || _list$focusIndex === void 0 ? void 0 : _list$focusIndex.focus();
+    }
+  }, [currentSelectedItemIndex, onSelection, incrementIndex, decrementIndex]);
   (0, _react.useLayoutEffect)(function () {
     if (disableArrowKeyNavigation) {
       return;

package/dist/cjs/ui-menu/ArrowKeyNavigationProvider/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ArrowKeyNavigationProvider = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _ColorPaletteArrowKeyNavigationProvider = require("./ColorPaletteArrowKeyNavigationProvider");
+var _MenuArrowKeyNavigationProvider = require("./MenuArrowKeyNavigationProvider");
+var _types = require("./types");
+var _excluded = ["children", "type"];
+var ArrowKeyNavigationProvider = function ArrowKeyNavigationProvider(props) {
+  var children = props.children,
+    type = props.type,
+    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  if (type === _types.ArrowKeyNavigationType.COLOR) {
+    return /*#__PURE__*/_react.default.createElement(_ColorPaletteArrowKeyNavigationProvider.ColorPaletteArrowKeyNavigationProvider, (0, _extends2.default)({
+      selectedRowIndex: props.selectedRowIndex,
+      selectedColumnIndex: props.selectedColumnIndex,
+      isOpenedByKeyboard: props.isOpenedByKeyboard,
+      isPopupPositioned: props.isPopupPositioned
+    }, restProps), children);
+  }
+  return /*#__PURE__*/_react.default.createElement(_MenuArrowKeyNavigationProvider.MenuArrowKeyNavigationProvider, restProps, children);
+};
+exports.ArrowKeyNavigationProvider = ArrowKeyNavigationProvider;

package/dist/cjs/ui-menu/ArrowKeyNavigationProvider/types.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ArrowKeyNavigationType = void 0;
+var ArrowKeyNavigationType;
+exports.ArrowKeyNavigationType = ArrowKeyNavigationType;
+(function (ArrowKeyNavigationType) {
+  ArrowKeyNavigationType["COLOR"] = "color";
+  ArrowKeyNavigationType["MENU"] = "menu";
+})(ArrowKeyNavigationType || (exports.ArrowKeyNavigationType = ArrowKeyNavigationType = {}));

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Dropdown = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -17,7 +18,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _uiReact = require("../../ui-react");
 var _DropList = _interopRequireDefault(require("../../ui/DropList"));
 var _Popup = _interopRequireDefault(require("../../ui/Popup"));
-var _MenuArrowKeyNavigationProvider = require("../MenuArrowKeyNavigationProvider");
+var _ArrowKeyNavigationProvider = require("../ArrowKeyNavigationProvider");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -65,8 +66,7 @@ var Dropdown = /*#__PURE__*/function (_PureComponent) {
         fitHeight = _this$props.fitHeight,
         fitWidth = _this$props.fitWidth,
         zIndex = _this$props.zIndex,
-        disableArrowKeyNavigation = _this$props.disableArrowKeyNavigation,
-        keyDownHandlerContext = _this$props.keyDownHandlerContext;
+        arrowKeyNavigationProviderOptions = _this$props.arrowKeyNavigationProviderOptions;
       return /*#__PURE__*/_react.default.createElement(_Popup.default, {
         target: target,
         mountTo: mountTo,
@@ -76,9 +76,7 @@ var Dropdown = /*#__PURE__*/function (_PureComponent) {
         fitHeight: fitHeight,
         fitWidth: fitWidth,
         zIndex: zIndex
-      }, /*#__PURE__*/_react.default.createElement(_MenuArrowKeyNavigationProvider.MenuArrowKeyNavigationProvider, {
-        disableArrowKeyNavigation: disableArrowKeyNavigation,
-        keyDownHandlerContext: keyDownHandlerContext,
+      }, /*#__PURE__*/_react.default.createElement(_ArrowKeyNavigationProvider.ArrowKeyNavigationProvider, (0, _extends2.default)({}, arrowKeyNavigationProviderOptions, {
         closeOnTab: true,
         handleClose: function handleClose(event) {
           return onOpenChange && onOpenChange({
@@ -86,7 +84,7 @@ var Dropdown = /*#__PURE__*/function (_PureComponent) {
             event: event
           });
         }
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }), /*#__PURE__*/_react.default.createElement("div", {
         style: {
           height: 0,
           minWidth: fitWidth || 0

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

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -28,11 +28,14 @@ var _styles = require("../../styles");
 var _uiReact = require("../../ui-react");
 var _DropList = _interopRequireDefault(require("../../ui/DropList"));
 var _Popup = _interopRequireDefault(require("../../ui/Popup"));
-var _MenuArrowKeyNavigationProvider = require("../MenuArrowKeyNavigationProvider");
+var _ArrowKeyNavigationProvider = require("../ArrowKeyNavigationProvider");
+var _types = require("../ArrowKeyNavigationProvider/types");
 var _excluded = ["children"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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) { (0, _defineProperty2.default)(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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 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; } }
 var wrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* tooltip in ToolbarButton is display:block */\n  & > div > div {\n    display: flex;\n  }\n"])));
@@ -57,7 +60,7 @@ var buttonStyles = function buttonStyles(isActive, submenuActive) {
       })(theme), ";\n          }"), (0, _components.themed)({
         light: "var(--ds-text-disabled, ".concat(_colors.N70, ")"),
         dark: "var(--ds-text-disabled, ".concat(_colors.DN80, ")")
-      })(theme), focusedMenuItemStyle); // The deafut focus-visible style is removed to ensure consistency across browsers
+      })(theme), focusedMenuItemStyle); // The default focus-visible style is removed to ensure consistency across browsers
     }
   };
 };
@@ -84,6 +87,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
       popupPlacement: ['bottom', 'left'],
       selectionIndex: -1
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "popupRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleRef", function (target) {
       _this.setState({
         target: target || undefined
@@ -129,23 +133,15 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         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 (0, _react2.jsx)(_Popup.default, {
-        target: isOpen ? target : undefined,
-        mountTo: mountTo,
-        boundariesElement: boundariesElement,
-        scrollableElement: scrollableElement,
-        onPlacementChanged: this.updatePopupPlacement,
-        fitHeight: fitHeight,
-        fitWidth: fitWidth,
-        zIndex: zIndex || _editorSharedStyles.akEditorFloatingPanelZIndex,
-        offset: offset
-      }, (0, _react2.jsx)(_MenuArrowKeyNavigationProvider.MenuArrowKeyNavigationProvider, {
-        disableArrowKeyNavigation: disableArrowKeyNavigation,
-        handleClose: this.handleCloseAndFocus,
-        keyDownHandlerContext: keyDownHandlerContext,
+        onItemActivated = _this$props.onItemActivated,
+        arrowKeyNavigationProviderOptions = _this$props.arrowKeyNavigationProviderOptions;
+
+      // Note that this onSelection function can't be refactored to useMemo for
+      // performance gains as it is being used as a dependency in a useEffect in
+      // MenuArrowKeyNavigationProvider in order to check for re-renders to adjust
+      // focus for accessibility. If this needs to be refactored in future refer
+      // back to ED-16740 for context.
+      var navigationProviderProps = arrowKeyNavigationProviderOptions.type === _types.ArrowKeyNavigationType.COLOR ? arrowKeyNavigationProviderOptions : _objectSpread(_objectSpread({}, arrowKeyNavigationProviderOptions), {}, {
         onSelection: function onSelection(index) {
           var result = [];
           if (typeof onItemActivated === 'function') {
@@ -157,9 +153,22 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
               shouldCloseMenu: false
             });
           }
-        },
+        }
+      });
+      return (0, _react2.jsx)(_Popup.default, {
+        target: isOpen ? target : undefined,
+        mountTo: mountTo,
+        boundariesElement: boundariesElement,
+        scrollableElement: scrollableElement,
+        onPlacementChanged: this.updatePopupPlacement,
+        fitHeight: fitHeight,
+        fitWidth: fitWidth,
+        zIndex: zIndex || _editorSharedStyles.akEditorFloatingPanelZIndex,
+        offset: offset
+      }, (0, _react2.jsx)(_ArrowKeyNavigationProvider.ArrowKeyNavigationProvider, (0, _extends2.default)({}, navigationProviderProps, {
+        handleClose: this.handleCloseAndFocus,
         closeOnTab: true
-      }, (0, _react2.jsx)(DropListWithOutsideListeners, {
+      }), (0, _react2.jsx)(DropListWithOutsideListeners, {
         isOpen: true,
         appearance: "tall",
         position: popupPlacement.join(' '),
@@ -174,7 +183,9 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
           height: 0,
           minWidth: fitWidth || 0
         }
-      }), items.map(function (group, index) {
+      }), (0, _react2.jsx)("div", {
+        ref: this.popupRef
+      }, items.map(function (group, index) {
         return (0, _react2.jsx)(_menu.MenuGroup, {
           key: index,
           role: shouldUseDefaultRole ? 'group' : 'menu'
@@ -189,7 +200,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
             onMouseLeave: _this2.props.onMouseLeave
           });
         }));
-      }))));
+      })))));
     }
   }, {
     key: "render",
@@ -203,6 +214,21 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         ref: this.handleRef
       }, children), isOpen ? this.renderDropdownMenu() : null);
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(previousProps) {
+      var isOpenToggled = this.props.isOpen !== previousProps.isOpen;
+      if (this.props.isOpen && isOpenToggled) {
+        if (typeof this.props.shouldFocusFirstItem === 'function' && this.props.shouldFocusFirstItem()) {
+          var _this$state$target2;
+          var keyboardEvent = new KeyboardEvent('keydown', {
+            key: 'ArrowDown',
+            bubbles: true
+          });
+          (_this$state$target2 = this.state.target) === null || _this$state$target2 === void 0 ? void 0 : _this$state$target2.dispatchEvent(keyboardEvent);
+        }
+      }
+    }
   }]);
   return DropdownMenuWrapper;
 }(_react.PureComponent);

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

@@ -46,6 +46,7 @@ var ToolbarButton = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     ariaPressed = props['aria-pressed'],
     ariaKeyShortcuts = props['aria-keyshortcuts'],
     onClick = props.onClick,
+    onKeyDown = props.onKeyDown,
     onItemClick = props.onItemClick;
   var handleClick = (0, _react.useCallback)(function (event, analyticsEvent) {
     if (disabled) {
@@ -88,7 +89,8 @@ var ToolbarButton = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     "aria-haspopup": ariaHasPopup,
     "aria-label": ariaLabel,
     "aria-pressed": ariaPressed,
-    "aria-keyshortcuts": ariaKeyShortcuts
+    "aria-keyshortcuts": ariaKeyShortcuts,
+    onKeyDown: onKeyDown
   }, children);
   if (!title) {
     return button;

package/dist/cjs/ui-menu/index.js

@@ -5,6 +5,24 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ArrowKeyNavigationProvider", {
+  enumerable: true,
+  get: function get() {
+    return _ArrowKeyNavigationProvider.ArrowKeyNavigationProvider;
+  }
+});
+Object.defineProperty(exports, "ArrowKeyNavigationType", {
+  enumerable: true,
+  get: function get() {
+    return _types.ArrowKeyNavigationType;
+  }
+});
+Object.defineProperty(exports, "ColorPaletteArrowKeyNavigationProvider", {
+  enumerable: true,
+  get: function get() {
+    return _ColorPaletteArrowKeyNavigationProvider.ColorPaletteArrowKeyNavigationProvider;
+  }
+});
 Object.defineProperty(exports, "Dropdown", {
   enumerable: true,
   get: function get() {
@@ -31,6 +49,9 @@ Object.defineProperty(exports, "ToolbarButton", {
 });
 var _DropdownMenu = _interopRequireDefault(require("../ui-menu/DropdownMenu"));
 var _ToolbarButton = _interopRequireWildcard(require("../ui-menu/ToolbarButton"));
+var _ArrowKeyNavigationProvider = require("../ui-menu/ArrowKeyNavigationProvider");
+var _types = require("../ui-menu/ArrowKeyNavigationProvider/types");
+var _ColorPaletteArrowKeyNavigationProvider = require("./ArrowKeyNavigationProvider/ColorPaletteArrowKeyNavigationProvider");
 var _Dropdown = _interopRequireDefault(require("./Dropdown"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/dist/cjs/utils/analytics.js

@@ -16,7 +16,7 @@ Object.defineProperty(exports, "UNSUPPORTED_CONTENT_LEVEL_SEVERITY_THRESHOLD_DEF
     return _getUnsupportedContentLevelData.UNSUPPORTED_CONTENT_LEVEL_SEVERITY_THRESHOLD_DEFAULTS;
   }
 });
-exports.getAnalyticsEventSeverity = exports.getAnalyticsAppearance = exports.analyticsEventKey = void 0;
+exports.getAnalyticsEventSeverity = exports.getAnalyticsEditorAppearance = exports.getAnalyticsAppearance = exports.analyticsEventKey = void 0;
 Object.defineProperty(exports, "getUnsupportedContentLevelData", {
   enumerable: true,
   get: function get() {
@@ -40,6 +40,10 @@ var getAnalyticsAppearance = function getAnalyticsAppearance(appearance) {
   }
 };
 exports.getAnalyticsAppearance = getAnalyticsAppearance;
+var getAnalyticsEditorAppearance = function getAnalyticsEditorAppearance(editorAppearance) {
+  return editorAppearance ? "editor_".concat(getAnalyticsAppearance(editorAppearance)) : '_unknown';
+};
+exports.getAnalyticsEditorAppearance = getAnalyticsEditorAppearance;
 var getAnalyticsEventSeverity = function getAnalyticsEventSeverity(duration, normalThreshold, degradedThreshold) {
   if (duration > normalThreshold && duration <= degradedThreshold) {
     return SEVERITY.DEGRADED;

package/dist/cjs/utils/index.js

@@ -208,6 +208,12 @@ Object.defineProperty(exports, "getAnalyticsAppearance", {
     return _analytics.getAnalyticsAppearance;
   }
 });
+Object.defineProperty(exports, "getAnalyticsEditorAppearance", {
+  enumerable: true,
+  get: function get() {
+    return _analytics.getAnalyticsEditorAppearance;
+  }
+});
 Object.defineProperty(exports, "getAnalyticsEventSeverity", {
   enumerable: true,
   get: function get() {

package/dist/cjs/utils/referentiality.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.removeConnectedNodes = exports.isReferencedSource = exports.getNodeName = exports.getChildrenInfo = void 0;
+exports.removeConnectedNodes = exports.isReferencedSource = exports.getNodeName = exports.getConnections = exports.getChildrenInfo = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -60,7 +60,7 @@ var getConnections = function getConnections(state) {
   // Perform a prelim scan creating the initial id to connection link mappings.
   // This will also save a list of data sources consumed per node.
   doc.descendants(function (node, pos) {
-    var _node$attrs2, _fragmentMark$attrs$l, _fragmentMark, _fragmentMark$attrs, _node$attrs3, _fragmentMark2, _fragmentMark2$attrs, _node$attrs4, _fragmentMark$attrs$n, _fragmentMark3, _fragmentMark3$attrs;
+    var _node$attrs2, _fragmentMark$attrs$l, _fragmentMark, _fragmentMark$attrs, _node$attrs3, _fragmentMark2, _fragmentMark2$attrs, _node$attrs4, _fragmentMark3, _fragmentMark3$attrs;
     var dataConsumer;
     var fragmentMark;
     node.marks.some(function (mark) {
@@ -94,7 +94,7 @@ var getConnections = function getConnections(state) {
     }
     result[normalizedId] = {
       localId: normalizedId,
-      name: (_fragmentMark$attrs$n = (_fragmentMark3 = fragmentMark) === null || _fragmentMark3 === void 0 ? void 0 : (_fragmentMark3$attrs = _fragmentMark3.attrs) === null || _fragmentMark3$attrs === void 0 ? void 0 : _fragmentMark3$attrs.name) !== null && _fragmentMark$attrs$n !== void 0 ? _fragmentMark$attrs$n : normalizedId,
+      name: (_fragmentMark3 = fragmentMark) === null || _fragmentMark3 === void 0 ? void 0 : (_fragmentMark3$attrs = _fragmentMark3.attrs) === null || _fragmentMark3$attrs === void 0 ? void 0 : _fragmentMark3$attrs.name,
       node: node,
       pos: pos,
       targets: []
@@ -137,6 +137,7 @@ var getConnections = function getConnections(state) {
   }
   return result;
 };
+exports.getConnections = getConnections;
 var removeConnectedNodes = function removeConnectedNodes(state, node) {
   if (!node) {
     return state.tr;
@@ -185,6 +186,7 @@ var getIdsToBeDeleted = function getIdsToBeDeleted(selectedIds, allNodes) {
 
 // for get children info for confirmation dialog
 var getChildrenInfo = function getChildrenInfo(state, node) {
+  var allChildrenHadName = true;
   if (!node) {
     return [];
   }
@@ -197,14 +199,28 @@ var getChildrenInfo = function getChildrenInfo(state, node) {
       allNodes[id].targets.forEach(childrenIdSet.add, childrenIdSet);
     }
   });
-  childrenIdSet.forEach(function (id) {
-    childrenInfoArray.push({
-      id: id,
-      name: getNodeNameById(id, allNodes),
-      amount: getChildrenNodeAmount(id, allNodes)
-    });
-  });
-  return childrenInfoArray;
+  var _iterator2 = _createForOfIteratorHelper(childrenIdSet),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var id = _step2.value;
+      if (!getNodeNameById(id, allNodes)) {
+        allChildrenHadName = false;
+        break;
+      } else {
+        childrenInfoArray.push({
+          id: id,
+          name: getNodeNameById(id, allNodes),
+          amount: getChildrenNodeAmount(id, allNodes)
+        });
+      }
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return allChildrenHadName ? childrenInfoArray : [];
 };
 exports.getChildrenInfo = getChildrenInfo;
 var getChildrenNodeAmount = function getChildrenNodeAmount(id, allNodes) {
@@ -235,19 +251,17 @@ var getNodeTargetsById = function getNodeTargetsById(id, allNodes) {
   }
   return allNodes[id].targets;
 };
-var DEFAULT_EXTENSION_NAME = 'Default extension';
 var getNodeNameById = function getNodeNameById(id, allNodes) {
   if ((0, _typeof2.default)(id) === 'object') {
-    var _name2;
     var name;
     id.forEach(function (localId) {
       var _name, _allNodes$localId;
       name = (_name = name) !== null && _name !== void 0 ? _name : (_allNodes$localId = allNodes[localId]) === null || _allNodes$localId === void 0 ? void 0 : _allNodes$localId.name;
     });
-    return (_name2 = name) !== null && _name2 !== void 0 ? _name2 : DEFAULT_EXTENSION_NAME;
+    return name || null;
   }
   if (!id || !allNodes[id]) {
-    return DEFAULT_EXTENSION_NAME;
+    return null;
   }
   return allNodes[id].name;
 };

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "72.4.0",
+	"version": "72.5.0",
 	"sideEffects": false
 }

package/dist/es2019/analytics/analytics-queue.js

@@ -0,0 +1,53 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import memoizeOne from 'memoize-one';
+export class AnalyticsQueue {
+  constructor() {
+    _defineProperty(this, "tasks", []);
+    _defineProperty(this, "running", false);
+  }
+  request(fn) {
+    if (window.requestIdleCallback) {
+      window.requestIdleCallback(fn);
+    } else {
+      const start = performance.now();
+      setTimeout(() => {
+        fn({
+          didTimeout: false,
+          timeRemaining: () => Math.max(0, 50 - (performance.now() - start))
+        });
+      }, 0);
+    }
+  }
+  pending() {
+    var _window$navigator, _window$navigator$sch;
+    // Defensive coding as navigator.scheduling.isInputPending is an experimental API
+    if (typeof ((_window$navigator = window.navigator) === null || _window$navigator === void 0 ? void 0 : (_window$navigator$sch = _window$navigator.scheduling) === null || _window$navigator$sch === void 0 ? void 0 : _window$navigator$sch.isInputPending) === 'function') {
+      var _window$navigator2, _window$navigator2$sc;
+      return ((_window$navigator2 = window.navigator) === null || _window$navigator2 === void 0 ? void 0 : (_window$navigator2$sc = _window$navigator2.scheduling) === null || _window$navigator2$sc === void 0 ? void 0 : _window$navigator2$sc.isInputPending()) === true;
+    }
+    return false;
+  }
+  process() {
+    if (this.running) {
+      return;
+    }
+    this.running = true;
+    this.request(deadline => {
+      while (deadline.timeRemaining() > 0 && this.tasks.length > 0 && !this.pending()) {
+        const task = this.tasks.shift();
+        if (task) {
+          task();
+        }
+      }
+      this.running = false;
+      if (this.tasks.length > 0) {
+        this.process();
+      }
+    });
+  }
+  schedule(task) {
+    this.tasks.push(task);
+    this.process();
+  }
+}
+_defineProperty(AnalyticsQueue, "get", memoizeOne(() => new AnalyticsQueue()));