@atlaskit/editor-common 72.1.2 → 72.2.1

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

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
 import React, { PureComponent } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -23,7 +22,6 @@ const focusedMenuItemStyle = css`
   box-shadow: inset 0px 0px 0px 2px ${`var(--ds-border-focused, ${B100})`};
   outline: none;
 `;
-
 const buttonStyles = isActive => theme => {
   if (isActive) {
     /**
@@ -80,46 +78,40 @@ const buttonStyles = isActive => theme => {
 };
 
 const 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.
  */
-
 export default class DropdownMenuWrapper extends PureComponent {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "state", {
-      popupPlacement: ['bottom', 'left']
+      popupPlacement: ['bottom', 'left'],
+      selectionIndex: -1
     });
-
     _defineProperty(this, "handleRef", target => {
       this.setState({
         target: target || undefined
       });
     });
-
     _defineProperty(this, "updatePopupPlacement", placement => {
       const {
         popupPlacement: previousPlacement
       } = this.state;
-
       if (placement[0] !== previousPlacement[0] || placement[1] !== previousPlacement[1]) {
         this.setState({
           popupPlacement: placement
         });
       }
     });
-
-    _defineProperty(this, "handleCloseandFocus", () => {
+    _defineProperty(this, "handleCloseAndFocus", () => {
       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(this, "handleClose", () => {
       if (this.props.onOpenChange) {
         this.props.onOpenChange({
@@ -128,7 +120,6 @@ export default class DropdownMenuWrapper extends PureComponent {
       }
     });
   }
-
   renderDropdownMenu() {
     const {
       target,
@@ -146,7 +137,8 @@ export default class DropdownMenuWrapper extends PureComponent {
       zIndex,
       shouldUseDefaultRole,
       disableArrowKeyNavigation,
-      keyDownHandlerContext
+      keyDownHandlerContext,
+      onItemActivated
     } = this.props;
     return jsx(Popup, {
       target: isOpen ? target : undefined,
@@ -160,9 +152,21 @@ export default class DropdownMenuWrapper extends PureComponent {
       offset: offset
     }, jsx(MenuArrowKeyNavigationProvider, {
       disableArrowKeyNavigation: disableArrowKeyNavigation,
-      handleClose: this.handleCloseandFocus,
+      handleClose: this.handleCloseAndFocus,
       keyDownHandlerContext: keyDownHandlerContext,
-      closeonTab: true
+      onSelection: index => {
+        let result = [];
+        if (typeof onItemActivated === 'function') {
+          result = items.reduce((result, group) => {
+            return result.concat(group.items);
+          }, result);
+          onItemActivated({
+            item: result[index],
+            shouldCloseMenu: false
+          });
+        }
+      },
+      closeOnTab: true
     }, jsx(DropListWithOutsideListeners, {
       isOpen: true,
       appearance: "tall",
@@ -171,7 +175,7 @@ export default class DropdownMenuWrapper extends PureComponent {
       shouldFitContainer: true,
       isTriggerNotTabbable: true,
       handleClickOutside: this.handleClose,
-      handleEscapeKeydown: this.handleCloseandFocus,
+      handleEscapeKeydown: this.handleCloseAndFocus,
       targetRef: this.state.target
     }, jsx("div", {
       style: {
@@ -183,7 +187,6 @@ export default class DropdownMenuWrapper extends PureComponent {
       role: shouldUseDefaultRole ? 'group' : 'menu'
     }, group.items.map(item => {
       var _item$key;
-
       return jsx(DropdownMenuItem, {
         key: (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : String(item.content),
         item: item,
@@ -194,7 +197,6 @@ export default class DropdownMenuWrapper extends PureComponent {
       });
     }))))));
   }
-
   render() {
     const {
       children,
@@ -206,7 +208,6 @@ export default class DropdownMenuWrapper extends PureComponent {
       ref: this.handleRef
     }, children), isOpen ? this.renderDropdownMenu() : null);
   }
-
 }
 const DropdownMenuItemCustomComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -217,7 +218,6 @@ const DropdownMenuItemCustomComponent = /*#__PURE__*/React.forwardRef((props, re
     ref: ref
   }, rest), children);
 });
-
 function DropdownMenuItem({
   item,
   onItemActivated,
@@ -226,7 +226,6 @@ function DropdownMenuItem({
   onMouseLeave
 }) {
   var _item$key2;
-
   // 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)) {
@@ -234,12 +233,12 @@ function DropdownMenuItem({
       key: String(item.content)
     }, item.content);
   }
-
   const dropListItem = jsx("div", {
     css: theme => buttonStyles(item.isActive)({
       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),
@@ -265,16 +264,13 @@ function DropdownMenuItem({
       item
     })
   }, 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/es2019/ui-menu/MenuArrowKeyNavigationProvider/index.js

@@ -1,5 +1,4 @@
-import React, { useLayoutEffect, useRef } from 'react';
-
+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
@@ -9,138 +8,125 @@ export const MenuArrowKeyNavigationProvider = ({
   handleClose,
   disableArrowKeyNavigation,
   keyDownHandlerContext,
-  closeonTab
+  closeOnTab,
+  onSelection
 }) => {
   const wrapperRef = useRef(null);
-  const currentSelectedItemIndex = useRef(-1);
-
-  const incrementIndex = list => {
-    if (currentSelectedItemIndex.current === list.length - 1 || currentSelectedItemIndex.current === -1) {
-      currentSelectedItemIndex.current = 0;
-    } else {
-      currentSelectedItemIndex.current = currentSelectedItemIndex.current + 1;
+  const [currentSelectedItemIndex, setCurrentSelectedItemIndex] = useState(-1);
+  const incrementIndex = useCallback(list => {
+    const currentIndex = currentSelectedItemIndex;
+    let 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;
     }
-  };
-
-  const 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]);
+  const decrementIndex = useCallback(list => {
+    const currentIndex = currentSelectedItemIndex;
+    let 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(() => {
     if (disableArrowKeyNavigation) {
       return;
     }
+
     /**
      * To handle the key events on the list
      * @param event
      */
-
-
     const handleKeyDown = event => {
-      var _wrapperRef$current, _focusableElements$cu, _focusableElements$cu2;
+      var _wrapperRef$current;
+      const targetElement = event.target;
 
-      const 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
-
-
-      const focusableElements = getEnabledElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+      }
 
+      //To trap the focus inside the toolbar using left and right arrow keys
+      const 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;
+            const 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$fo2;
+            const focusIndex = decrementIndex(focusableElements);
+            (_focusableElements$fo2 = focusableElements[focusIndex]) === null || _focusableElements$fo2 === void 0 ? void 0 : _focusableElements$fo2.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 () => {
       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 [];
   }
-
   const 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) {
-  const focusableElements = getFocusableElements(rootNode);
-  return focusableElements.filter(element => !element.querySelector('[role="button"][aria-disabled="true"]') && !element.querySelector('[role="menuitem"][aria-disabled="true"]'));
 }

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

@@ -39,20 +39,18 @@ const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (disabled) {
       return;
     }
-
     if (buttonId) {
-      analyticsEvent.update(payload => ({ ...payload,
+      analyticsEvent.update(payload => ({
+        ...payload,
         action: ACTION.CLICKED,
         actionSubject: ACTION_SUBJECT.TOOLBAR_BUTTON,
         actionSubjectId: buttonId,
         eventType: EVENT_TYPE.UI
       })).fire(FabricChannel.editor);
     }
-
     if (onClick) {
       onClick(event);
     }
-
     if (item && onItemClick) {
       onItemClick(item);
     }
@@ -79,11 +77,9 @@ const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     "aria-pressed": ariaPressed,
     "aria-keyshortcuts": ariaKeyShortcuts
   }, children);
-
   if (!title) {
     return button;
   }
-
   const tooltipContent = !hideTooltip ? title : null;
   return jsx(Tooltip, {
     content: tooltipContent,

package/dist/es2019/ui-react/with-react-editor-view-outer-listeners.js

@@ -2,94 +2,76 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { PureComponent } from 'react';
 import ReactDOM from 'react-dom';
 import ReactEditorViewContext from './ReactEditorViewContext';
-
 class WithOutsideClick extends PureComponent {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "handleClick", evt => {
       if (!this.props.isActiveComponent) {
         return;
       }
-
       const domNode = ReactDOM.findDOMNode(this); // eslint-disable-line react/no-find-dom-node
-
       if (!domNode || evt.target instanceof Node && !domNode.contains(evt.target)) {
         if (this.props.handleClickOutside) {
           var _this$props$editorVie;
-
-          this.props.handleClickOutside(evt); //When the menus are closed by clicking outside the focus is set on editor.
-
+          this.props.handleClickOutside(evt);
+          //When the menus are closed by clicking outside the focus is set on editor.
           if (!((_this$props$editorVie = this.props.editorView) !== null && _this$props$editorVie !== void 0 && _this$props$editorVie.hasFocus())) {
             var _this$props$editorVie2;
-
             (_this$props$editorVie2 = this.props.editorView) === null || _this$props$editorVie2 === void 0 ? void 0 : _this$props$editorVie2.focus();
           }
         }
       }
     });
-
     _defineProperty(this, "handleKeydown", evt => {
       if (!this.props.isActiveComponent) {
         return;
       }
-
       if (evt.code === 'Escape' && this.props.handleEscapeKeydown) {
         evt.preventDefault();
         evt.stopPropagation();
-        this.props.handleEscapeKeydown(evt); //on 'Esc', Focus is handled in 'handleEscapeKeydown'.
-
+        this.props.handleEscapeKeydown(evt);
+        //on 'Esc', Focus is handled in 'handleEscapeKeydown'.
         return false;
       } else if (evt.code === 'Enter' && this.props.handleEnterKeydown) {
         this.props.handleEnterKeydown(evt);
-      } else if (evt.code === 'Tab' && this.props.handleEscapeKeydown && this.props.closeonTab) {
+      } else if (evt.code === 'Tab' && this.props.handleEscapeKeydown && this.props.closeOnTab) {
         //The menus should be closed when the tab is pressed as it takes the focus out of the menu
         this.props.handleEscapeKeydown(evt);
       }
     });
   }
-
   componentDidMount() {
     if (this.props.handleClickOutside) {
       document.addEventListener('click', this.handleClick, false);
     }
-
     if (this.props.handleEscapeKeydown) {
       var _this$props$editorRef;
-
       //Attached event to the menu so that 'ESC' events from the opened menu also will be handled.
       (((_this$props$editorRef = this.props.editorRef) === null || _this$props$editorRef === void 0 ? void 0 : _this$props$editorRef.current) || this.props.targetRef || document).addEventListener('keydown', this.handleKeydown, false);
     }
   }
-
   componentWillUnmount() {
     if (this.props.handleClickOutside) {
       document.removeEventListener('click', this.handleClick, false);
     }
-
     if (this.props.handleEscapeKeydown) {
       var _this$props$editorRef2;
-
       (((_this$props$editorRef2 = this.props.editorRef) === null || _this$props$editorRef2 === void 0 ? void 0 : _this$props$editorRef2.current) || this.props.targetRef || document).removeEventListener('keydown', this.handleKeydown, false);
     }
   }
-
   render() {
     return this.props.children;
   }
-
 }
-
 function hasIsOpen(props) {
   return 'isOpen' in props;
 }
-
 export default function withReactEditorViewOuterListeners(Component) {
   return ({
     handleClickOutside,
     handleEnterKeydown,
     handleEscapeKeydown,
-    closeonTab,
+    closeOnTab,
     ...props
   }) => {
     const isActiveComponent = hasIsOpen(props) ? props.isOpen : true;
@@ -104,7 +86,7 @@ export default function withReactEditorViewOuterListeners(Component) {
       handleClickOutside: handleClickOutside,
       handleEnterKeydown: handleEnterKeydown,
       handleEscapeKeydown: handleEscapeKeydown,
-      closeonTab: closeonTab
+      closeOnTab: closeOnTab
     }, /*#__PURE__*/React.createElement(Component, props)));
   };
 }

package/dist/es2019/utils/analytics.js

@@ -3,16 +3,12 @@ export const getAnalyticsAppearance = appearance => {
   switch (appearance) {
     case 'full-page':
       return EDITOR_APPEARANCE_CONTEXT.FIXED_WIDTH;
-
     case 'full-width':
       return EDITOR_APPEARANCE_CONTEXT.FULL_WIDTH;
-
     case 'comment':
       return EDITOR_APPEARANCE_CONTEXT.COMMENT;
-
     case 'chromeless':
       return EDITOR_APPEARANCE_CONTEXT.CHROMELESS;
-
     case 'mobile':
       return EDITOR_APPEARANCE_CONTEXT.MOBILE;
   }
@@ -21,20 +17,16 @@ export const getAnalyticsEventSeverity = (duration, normalThreshold, degradedThr
   if (duration > normalThreshold && duration <= degradedThreshold) {
     return SEVERITY.DEGRADED;
   }
-
   if (duration > degradedThreshold) {
     return SEVERITY.BLOCKING;
   }
-
   return SEVERITY.NORMAL;
 };
 export let SEVERITY;
-
 (function (SEVERITY) {
   SEVERITY["NORMAL"] = "normal";
   SEVERITY["DEGRADED"] = "degraded";
   SEVERITY["BLOCKING"] = "blocking";
 })(SEVERITY || (SEVERITY = {}));
-
 export { UNSUPPORTED_CONTENT_LEVEL_SEVERITY, getUnsupportedContentLevelData, UNSUPPORTED_CONTENT_LEVEL_SEVERITY_THRESHOLD_DEFAULTS } from './unsupportedContent/get-unsupported-content-level-data';
 export const analyticsEventKey = 'EDITOR_ANALYTICS_EVENT';

package/dist/es2019/utils/annotation/index.js

@@ -3,26 +3,23 @@ export const canApplyAnnotationOnRange = (rangeSelection, doc, schema) => {
     from,
     to
   } = rangeSelection;
-
   if (isNaN(from + to) || to - from <= 0 || to < 0 || from < 0) {
     return false;
   }
-
   let foundInvalid = false;
   doc.nodesBetween(rangeSelection.from, rangeSelection.to, (node, _pos, parent) => {
     // Special exception for hardBreak nodes
     if (schema.nodes.hardBreak === node.type) {
       return false;
-    } // For block elements or text nodes, we want to check
+    }
+
+    // For block elements or text nodes, we want to check
     // if annotations are allowed inside this tree
     // or if we're leaf and not text
-
-
     if (node.isInline && !node.isText || node.isLeaf && !node.isText || node.isText && !parent.type.allowsMarkType(schema.marks.annotation)) {
       foundInvalid = true;
       return false;
     }
-
     return true;
   });
   return !foundInvalid;
@@ -37,7 +34,6 @@ export const getAnnotationIdsFromRange = (rangeSelection, doc, schema) => {
     if (!node.marks) {
       return true;
     }
-
     node.marks.forEach(mark => {
       if (mark.type === schema.marks.annotation && mark.attrs) {
         annotations.add(mark.attrs.id);