@atlaskit/editor-core 178.1.0 → 178.1.2

package/dist/es2019/plugins/type-ahead/ui/AssistiveText.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /** @jsx jsx */
+
 import debounce from 'lodash/debounce';
 import React from 'react';
 import { css, jsx } from '@emotion/react';
@@ -17,11 +17,9 @@ const assitiveTextStyles = css({
   whitespace: 'nowrap',
   width: '1px'
 });
-
 class AssistveTextComponent extends React.Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "state", {
       bump: false,
       //when the same text needs to be read again, Hence it needs to be toggled between __status--A and __status--B
@@ -29,7 +27,6 @@ class AssistveTextComponent extends React.Component {
       silenced: false
     });
   }
-
   componentWillMount() {
     this.debounceStatusUpdate = debounce(() => {
       if (!this.state.debounced) {
@@ -44,9 +41,7 @@ class AssistveTextComponent extends React.Component {
       }
     }, statusDebounceMillis);
   }
-
   componentWillUnmount() {}
-
   componentWillReceiveProps() {
     this.setState(({
       bump
@@ -55,7 +50,6 @@ class AssistveTextComponent extends React.Component {
       debounced: false
     }));
   }
-
   render() {
     const {
       assistiveText,
@@ -81,9 +75,7 @@ class AssistveTextComponent extends React.Component {
       "aria-live": "polite"
     }, `${!silenced && debounced && !bump ? assistiveText : ''}`));
   }
-
 }
-
 _defineProperty(AssistveTextComponent, "defaultProps", {
   statusDebounceMillis: 1400,
   debounce: true,
@@ -91,5 +83,4 @@ _defineProperty(AssistveTextComponent, "defaultProps", {
   isInFocus: false,
   id: ''
 });
-
 export const AssistiveText = AssistveTextComponent;

package/dist/es2019/plugins/type-ahead/ui/InputQuery.js

@@ -11,50 +11,38 @@ import { AssistiveText } from './AssistiveText';
 import { typeAheadListMessages } from '../messages';
 import { useIntl } from 'react-intl-next';
 import * as colors from '@atlaskit/theme/colors';
-
 const isNavigationKey = event => {
   return ['Enter', 'Tab', 'ArrowDown', 'ArrowUp'].includes(event.key);
 };
-
 const isUndoRedoShortcut = event => {
   const key = keyNameNormalized(event);
-
   if (event.ctrlKey && key === 'y') {
     return 'historyRedo';
   }
-
   if ((event.ctrlKey || event.metaKey) && event.shiftKey && key === 'Z') {
     return 'historyRedo';
   }
-
   if ((event.ctrlKey || event.metaKey) && key === 'z') {
     return 'historyUndo';
   }
-
   return false;
 };
-
 const isSelectAllShortcut = event => {
   const key = keyNameNormalized(event);
   return (event.ctrlKey || event.metaKey) && key === 'a';
 };
-
 const getAriaLabel = (triggerPrefix, intl) => {
   switch (triggerPrefix) {
     case '@':
       return typeAheadListMessages.mentionInputLabel;
-
     case '/':
       return typeAheadListMessages.quickInsertInputLabel;
-
     case ':':
       return typeAheadListMessages.emojiInputLabel;
-
     default:
       return typeAheadListMessages.quickInsertInputLabel;
   }
 };
-
 export const InputQuery = /*#__PURE__*/React.memo(({
   triggerQueryPrefix,
   cancel,
@@ -88,7 +76,6 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       selectedIndex
     } = getPluginState(editorView.state);
     setInFocus(true);
-
     switch (key) {
       case ' ':
         // space key
@@ -101,9 +88,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
           });
           stopDefault = true;
         }
-
         break;
-
       case 'Escape':
       case 'PageUp':
       case 'PageDown':
@@ -116,7 +101,6 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         });
         stopDefault = true;
         break;
-
       case 'Backspace':
         if (text.length === 0 || ref.current.selectionStart === 0) {
           event.stopPropagation();
@@ -128,9 +112,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
             setSelectionAt: CloseSelectionOptions.BEFORE_TEXT_INSERTED
           });
         }
-
         break;
-
       case 'Enter':
         // ED-14758 - Under the W3C specification, any keycode sent under IME would return a keycode 229
         // event.isComposing can't be used alone as this also included a virtual keyboard under a keyboardless device, therefore, it seems the best practice would be intercepting the event as below.
@@ -139,35 +121,26 @@ export const InputQuery = /*#__PURE__*/React.memo(({
           if (selectedIndex === -1) {
             selectNextItem();
           }
-
           onItemSelect(event.shiftKey ? SelectItemMode.SHIFT_ENTER : SelectItemMode.ENTER);
         }
-
         break;
-
       case 'Tab':
         if (selectedIndex === -1) {
           selectNextItem();
         }
-
         onItemSelect(SelectItemMode.TAB);
         break;
-
       case 'ArrowDown':
         if (selectedIndex === -1) {
           selectNextItem();
         }
-
         break;
-
       case 'ArrowUp':
         if (selectedIndex === -1) {
           selectPreviousItem();
         }
-
         break;
     }
-
     if (isSelectAllShortcut(event)) {
       cancel({
         forceFocusOnEditor: true,
@@ -177,10 +150,8 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       });
       return true;
     }
-
     const undoRedoType = isUndoRedoShortcut(event);
     const hasReopenQuery = reopenQuery && reopenQuery.length > 0;
-
     if (onUndoRedo && undoRedoType) {
       if (!hasReopenQuery && undoRedoType === 'historyUndo' && text.length > 0) {
         setRedoBuffer(buffer => [ref.current.value, ...buffer]);
@@ -198,7 +169,6 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         stopDefault = onUndoRedo(undoRedoType);
       }
     }
-
     if (isNavigationKey(event) || stopDefault) {
       event.stopPropagation();
       event.preventDefault();
@@ -207,7 +177,6 @@ export const InputQuery = /*#__PURE__*/React.memo(({
   }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, editorView.state, redoBuffer, reopenQuery]);
   const onClick = useCallback(event => {
     var _ref$current;
-
     event.stopPropagation();
     event.preventDefault();
     onQueryFocus();
@@ -236,30 +205,23 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     if (!ref.current) {
       return;
     }
-
     const {
       current: element
     } = ref;
-
     const onFocusIn = event => {
       onQueryFocus();
     };
-
     const keyDown = event => {
       const key = keyNameNormalized(event);
-
       if (['ArrowLeft', 'ArrowRight'].includes(key) && document.getSelection && document.getSelection()) {
         var _ref$current2, _ref$current3;
-
         const q = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.value) || '';
         const anchorOffset = (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.selectionStart;
         const isMovingRight = 'ArrowRight' === key && anchorOffset === q.length;
         const isMovingLeft = 'ArrowLeft' === key && (anchorOffset === 0 || event.metaKey);
-
         if (!isMovingRight && !isMovingLeft) {
           return;
         }
-
         cancel({
           forceFocusOnEditor: true,
           addPrefixTrigger: true,
@@ -270,33 +232,30 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         event.stopPropagation();
         return;
       }
-
       checkKeyEvent(event);
     };
-
     const onFocusOut = event => {
       var _window$getSelection;
-
       const {
         relatedTarget
-      } = event; // Given the user is changing the focus
+      } = event;
+
+      // Given the user is changing the focus
       // When the target is inside the TypeAhead Popup
       // Then the popup should stay open
-
       if (relatedTarget instanceof HTMLElement && relatedTarget.closest && relatedTarget.closest(`.${TYPE_AHEAD_POPUP_CONTENT_CLASS}`)) {
         return;
-      } // See ED-14909: Chrome may emit focusout events where an input
+      }
+
+      // See ED-14909: Chrome may emit focusout events where an input
       // device was not directly responsible. (This rears in react v17+ consumers
       // where react-managed node removal now appears to propagate focusout events to
       // our event listener). As this path is strictly for click or other typeahead
       // dismissals that don't involve typeahead item selection, we carve out an
       // exception for Chrome-specific events where an input device was not the initiator.
-
-
       if (browser.chrome && !(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range') && !('sourceCapabilities' in event && event.sourceCapabilities)) {
         return;
       }
-
       cancel({
         addPrefixTrigger: true,
         text: ref.current.value,
@@ -304,7 +263,6 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         forceFocusOnEditor: false
       });
     };
-
     const close = () => {
       cancel({
         addPrefixTrigger: false,
@@ -313,19 +271,15 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         setSelectionAt: CloseSelectionOptions.BEFORE_TEXT_INSERTED
       });
     };
-
     const beforeinput = e => {
       var _target$textContent;
-
       setInFocus(false);
       const {
         target
       } = e;
-
       if (e.isComposing || !(target instanceof HTMLInputElement)) {
         return;
       }
-
       if (e.inputType === 'historyUndo' && ((_target$textContent = target.textContent) === null || _target$textContent === void 0 ? void 0 : _target$textContent.length) === 0) {
         e.preventDefault();
         e.stopPropagation();
@@ -333,24 +287,19 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         return;
       }
     };
-
     let onInput = null;
-
     if (browser.safari) {
       // On Safari, for reasons beyond my understanding,
       // The undo behavior is totally different from other browsers
       // That why we need to have an specific branch only for Safari.
       const onInput = e => {
         var _target$textContent2;
-
         const {
           target
         } = e;
-
         if (e.isComposing || !(target instanceof HTMLInputElement)) {
           return;
         }
-
         if (e.inputType === 'historyUndo' && ((_target$textContent2 = target.textContent) === null || _target$textContent2 === void 0 ? void 0 : _target$textContent2.length) === 1) {
           e.preventDefault();
           e.stopPropagation();
@@ -358,10 +307,8 @@ export const InputQuery = /*#__PURE__*/React.memo(({
           return;
         }
       };
-
       element.addEventListener('input', onInput);
     }
-
     element.addEventListener('focusout', onFocusOut);
     element.addEventListener('focusin', onFocusIn);
     element.addEventListener('keydown', keyDown);
@@ -371,7 +318,6 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       element.removeEventListener('focusin', onFocusIn);
       element.removeEventListener('keydown', keyDown);
       element.removeEventListener('beforeinput', beforeinput);
-
       if (browser.safari) {
         element.removeEventListener('input', onInput);
       }
@@ -379,7 +325,6 @@ export const InputQuery = /*#__PURE__*/React.memo(({
   }, [triggerQueryPrefix, ref.current.value, onQueryFocus, cancel, checkKeyEvent, editorView.state]);
   useLayoutEffect(() => {
     const hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
-
     if (ref.current && forceFocus) {
       ref.current.value = hasReopenQuery ? reopenQuery : '';
       sizeSpanRef.current.textContent = hasReopenQuery ? reopenQuery : '';
@@ -387,9 +332,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         if (!(ref !== null && ref !== void 0 && ref.current)) {
           return;
         }
-
         const sel = window.getSelection();
-
         if (sel && hasReopenQuery && ref.current.lastChild instanceof Text) {
           const lastChild = ref.current.lastChild;
           const range = document.createRange();
@@ -398,7 +341,6 @@ export const InputQuery = /*#__PURE__*/React.memo(({
           sel.removeAllRanges();
           sel.addRange(range);
         }
-
         ref.current.focus();
         setInFocus(true);
       });
@@ -406,12 +348,12 @@ export const InputQuery = /*#__PURE__*/React.memo(({
   }, [forceFocus, reopenQuery]);
   const assistiveHintID = TYPE_AHEAD_DECORATION_ELEMENT_ID + '__assistiveHint';
   const intl = useIntl();
+
   /**
     When we migrated to emotion from styled component, we started getting this error.
     jsx-a11y/interactive-supports-focus
     Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
    */
-
   return jsx(Fragment, null, triggerQueryPrefix, jsx("span", {
     style: {
       position: 'relative'

package/dist/es2019/plugins/type-ahead/ui/TypeAheadList.js

@@ -21,7 +21,8 @@ const TypeaheadAssistiveTextPureComponent = /*#__PURE__*/React.memo(({
   return jsx(AssistiveText, {
     assistiveText: intl.formatMessage(typeAheadListMessages.searchResultsLabel, {
       itemsLength: numberOfResults
-    }) // when the popup is open its always in focus
+    })
+    // when the popup is open its always in focus
     ,
     isInFocus: true,
     id: TYPE_AHEAD_DECORATION_ELEMENT_ID + '__popup'
@@ -38,7 +39,6 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   triggerHandler
 }) => {
   var _decorationElement$qu2;
-
   const listRef = useRef();
   const listContainerRef = useRef(null);
   const lastVisibleIndexes = useRef({
@@ -59,14 +59,11 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   const actions = useMemo(() => ({
     onItemClick
   }), [onItemClick]);
-
   const isNavigationKey = event => {
     return ['ArrowDown', 'ArrowUp', 'Tab', 'Enter'].includes(event.key);
   };
-
   const focusTargetElement = useCallback(() => {
     var _decorationElement$qu;
-
     //To reset the selected index
     updateSelectedIndex(-1)(editorView.state, editorView.dispatch);
     listRef.current.scrollToRow(0);
@@ -87,7 +84,9 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   }) => {
     if (!scrollUpdateWasRequested) {
       return;
-    } // In case the user scroll to a non-visible item like press ArrowUp from the first index
+    }
+
+    // In case the user scroll to a non-visible item like press ArrowUp from the first index
     // We will force the scroll calling the scrollToItem in the useEffect hook
     // When the scroll happens and we render the elements,
     // we still need calculate the items height and re-draw the List.
@@ -97,12 +96,11 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     //
     // We can't do this check in the first frame because that frame is being used by the resetScreenThrottled
     // to calculate each height. THen, we can schedule a new frame when this one finishs.
-
-
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
-        const isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex; //Should scroll to the list item only when the selectedIndex >= 0 and item is not visible
+        const isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex;
 
+        //Should scroll to the list item only when the selectedIndex >= 0 and item is not visible
         if (!isSelectedItemVisible && selectedIndex !== -1) {
           listRef.current.scrollToRow(selectedIndex);
         } else if (selectedIndex === -1) {
@@ -115,9 +113,9 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     if (!listRef.current) {
       return;
     }
+    const isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex;
 
-    const isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex; //Should scroll to the list item only when the selectedIndex >= 0 and item is not visible
-
+    //Should scroll to the list item only when the selectedIndex >= 0 and item is not visible
     if (!isSelectedItemVisible && selectedIndex !== -1) {
       listRef.current.scrollToRow(selectedIndex);
     } else if (selectedIndex === -1) {
@@ -128,12 +126,11 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     setCache(new CellMeasurerCache({
       fixedWidth: true,
       defaultHeight: LIST_ITEM_ESTIMATED_HEIGHT
-    })); // When query is updated, sometimes the scroll position of the menu is not at the top
+    }));
+    // When query is updated, sometimes the scroll position of the menu is not at the top
     // Scrolling back to top for consistency
-
     requestAnimationFrame(() => {
       var _listContainerRef$cur;
-
       if ((_listContainerRef$cur = listContainerRef.current) !== null && _listContainerRef$cur !== void 0 && _listContainerRef$cur.firstChild) {
         listContainerRef.current.firstChild.scrollTo(0, 0);
       }
@@ -151,7 +148,6 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     if (!listContainerRef.current) {
       return;
     }
-
     const {
       current: element
     } = listContainerRef;
@@ -159,7 +155,6 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
      * To handle the key events on the list
      * @param event
      */
-
     const handleKeyDown = event => {
       if (isNavigationKey(event)) {
         switch (event.key) {
@@ -167,27 +162,22 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
             selectNextItem();
             event.preventDefault();
             break;
-
           case 'ArrowUp':
             selectPreviousItem();
             event.preventDefault();
             break;
-
           case 'Tab':
             //Tab key quick inserts the selected item.
             onItemClick(SelectItemMode.TAB, selectedIndex);
             event.preventDefault();
             break;
-
           case 'Enter':
             //Enter key quick inserts the selected item.
             if (!event.isComposing || event.which !== 229 && event.keyCode !== 229) {
               onItemClick(event.shiftKey ? SelectItemMode.SHIFT_ENTER : SelectItemMode.ENTER, selectedIndex);
               event.preventDefault();
             }
-
             break;
-
           default:
             event.preventDefault();
         }
@@ -196,13 +186,11 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
         focusTargetElement();
       }
     };
-
     element === null || element === void 0 ? void 0 : element.addEventListener('keydown', handleKeyDown);
     return () => {
       element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', handleKeyDown);
     };
   }, [editorView.state, focusTargetElement, selectNextItem, selectPreviousItem, selectedIndex, onItemClick, items.length]);
-
   const renderRow = ({
     index,
     key,
@@ -231,13 +219,10 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
       ariaLabel: getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel
     }))));
   };
-
   const popupAriaLabel = getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl).popupAriaLabel;
-
   if (!Array.isArray(items)) {
     return null;
   }
-
   const menuGroupId = ((_decorationElement$qu2 = decorationElement.querySelector(`[role='combobox']`)) === null || _decorationElement$qu2 === void 0 ? void 0 : _decorationElement$qu2.getAttribute('aria-controls')) || TYPE_AHEAD_DECORATION_ELEMENT_ID;
   return jsx(MenuGroup, {
     "aria-label": popupAriaLabel,

package/dist/es2019/plugins/type-ahead/ui/TypeAheadListItem.js

@@ -37,7 +37,6 @@ const itemBody = css`
   flex-wrap: nowrap;
   justify-content: space-between;
 `;
-
 const itemText = theme => css`
   white-space: initial;
   color: ${themed({
@@ -53,7 +52,6 @@ const itemText = theme => css`
     margin-top: 3px;
   }
 `;
-
 const itemAfter = css`
   flex: 0 0 auto;
 `;
@@ -67,12 +65,12 @@ const customRenderItemDivStyle = css`
     outline: none;
   }
 `;
+
 /**
  * This CSS emulates the desired behaviour with :focus-visible for firefox.
  * Firefox unfortunately does not register keyboard focus if user mouseDown and drag a typeahead item
  * resulting in focus-visible style not drawn.
  */
-
 const selectionFrame = {
   '& > button:focus': {
     boxShadow: `inset 0px 0px 0px 2px ${`var(--ds-border-focused, ${B100})`}`,
@@ -90,9 +88,7 @@ const FallbackIcon = /*#__PURE__*/React.memo(({
 }) => {
   return jsx(IconFallback, null);
 });
-
 const noop = () => {};
-
 const AssistiveText = ({
   title,
   description,
@@ -105,7 +101,6 @@ const AssistiveText = ({
     className: "assistive"
   }, `${title}. ${descriptionText} ${shortcutText}`);
 };
-
 export const TypeAheadListItem = ({
   item,
   itemsLength,
@@ -140,14 +135,12 @@ export const TypeAheadListItem = ({
   useLayoutEffect(() => {
     if (shouldUpdateFocus) {
       var _customItemRef$curren;
-
       customItemRef === null || customItemRef === void 0 ? void 0 : (_customItemRef$curren = customItemRef.current) === null || _customItemRef$curren === void 0 ? void 0 : _customItemRef$curren.focus();
     }
   }, [customItemRef, shouldUpdateFocus]);
   useLayoutEffect(() => {
     if (shouldUpdateFocus) {
       var _buttonItemRef$curren;
-
       buttonItemRef === null || buttonItemRef === void 0 ? void 0 : (_buttonItemRef$curren = buttonItemRef.current) === null || _buttonItemRef$curren === void 0 ? void 0 : _buttonItemRef$curren.focus();
     }
   }, [buttonItemRef, shouldUpdateFocus]);
@@ -155,7 +148,6 @@ export const TypeAheadListItem = ({
     if (!customRenderItem) {
       return null;
     }
-
     const Comp = customRenderItem;
     const listItemClasses = [customRenderItemDivStyle, isSelected && selectedStyle];
     return jsx("div", {
@@ -165,7 +157,8 @@ export const TypeAheadListItem = ({
       "aria-setsize": itemsLength,
       tabIndex: 0,
       css: listItemClasses,
-      className: `ak-typeahead-item ${isSelected ? 'typeahead-selected-item' : ''}` //CSS classes added for test cases purpose
+      className: `ak-typeahead-item ${isSelected ? 'typeahead-selected-item' : ''}`
+      //CSS classes added for test cases purpose
       ,
       ref: customItemRef
     }, jsx("div", {
@@ -177,11 +170,9 @@ export const TypeAheadListItem = ({
       onHover: noop
     })));
   }, [customRenderItem, isSelected, ariaLabel, itemsLength, customItemRef, insertSelectedItem]);
-
   if (customItem) {
     return customItem;
   }
-
   return jsx("span", {
     css: selectionFrame
   }, jsx(ButtonItem, {