@atlaskit/editor-core 172.0.5 → 172.1.0

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

@@ -1,12 +1,10 @@
 /** @jsx jsx */
-import React, { useMemo, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
+import React, { useMemo, useRef, useCallback, useLayoutEffect, useState } from 'react';
 import { jsx, css } from '@emotion/react';
 import { MenuGroup } from '@atlaskit/menu';
-import { ICON_HEIGHT, ITEM_PADDING } from './TypeAheadListItem';
-import { VariableSizeList as List } from 'react-window';
-import { ResizeObserverProvider } from './hooks/use-resize-observer';
-import { useDynamicListHeightCalculation } from './hooks/use-dynamic-list-height-calculation';
-import { DynamicHeightListItem, SelectedIndexContext, ListItemActionsContext, UpdateListItemHeightContext } from './DynamicHeightListItem';
+import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
+import { List } from 'react-virtualized/dist/commonjs/List';
+import { ICON_HEIGHT, ITEM_PADDING, TypeAheadListItem } from './TypeAheadListItem';
 import { injectIntl } from 'react-intl-next';
 import { typeAheadListMessages } from '../messages';
 const LIST_ITEM_ESTIMATED_HEIGHT = ICON_HEIGHT + ITEM_PADDING * 2;
@@ -20,29 +18,18 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   fitHeight
 }) => {
   const listRef = useRef();
-  const redrawListAtIndex = useCallback(index => {
-    listRef.current.resetAfterIndex(index);
-  }, []);
   const lastVisibleIndexes = useRef({
     overscanStartIndex: 0,
     overscanStopIndex: 0,
-    visibleStartIndex: 0,
-    visibleStopIndex: 0
-  });
-  const getFirstVisibleIndex = useCallback(() => {
-    return lastVisibleIndexes.current.overscanStartIndex;
-  }, []);
-  const {
-    getListItemHeight,
-    setListItemHeight,
-    renderedListHeight
-  } = useDynamicListHeightCalculation({
-    redrawListAtIndex,
-    getFirstVisibleIndex,
-    listLength: items.length,
-    listMaxHeight: fitHeight,
-    listItemEstimatedHeight: LIST_ITEM_ESTIMATED_HEIGHT
+    startIndex: 0,
+    stopIndex: 0
   });
+  const estimatedHeight = items.length * LIST_ITEM_ESTIMATED_HEIGHT;
+  const [height, setHeight] = useState(Math.min(estimatedHeight, fitHeight));
+  const [cache, setCache] = useState(new CellMeasurerCache({
+    fixedWidth: true,
+    defaultHeight: LIST_ITEM_ESTIMATED_HEIGHT
+  }));
   const onItemsRendered = useCallback(props => {
     lastVisibleIndexes.current = props;
   }, []);
@@ -72,66 +59,98 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
         const {
           current: indexes
         } = lastVisibleIndexes;
-        const isSelectedItemVisible = selectedIndex >= indexes.visibleStartIndex && selectedIndex <= indexes.visibleStopIndex;
+        const isSelectedItemVisible = selectedIndex >= indexes.startIndex && selectedIndex <= indexes.stopIndex;
 
         if (!isSelectedItemVisible) {
-          listRef.current.scrollToItem(selectedIndex);
+          listRef.current.scrollToRow(selectedIndex);
         }
       });
     });
-  }, [selectedIndex]);
-  useEffect(() => {
+  }, [selectedIndex, lastVisibleIndexes]);
+  useLayoutEffect(() => {
     if (!listRef.current) {
       return;
     }
 
-    listRef.current.scrollToItem(selectedIndex);
-  }, [selectedIndex]);
+    const {
+      current: indexes
+    } = lastVisibleIndexes;
+    const isSelectedItemVisible = selectedIndex >= indexes.startIndex && selectedIndex <= indexes.stopIndex;
+
+    if (!isSelectedItemVisible) {
+      listRef.current.scrollToRow(selectedIndex);
+    }
+  }, [selectedIndex, lastVisibleIndexes]);
   useLayoutEffect(() => {
-    requestAnimationFrame(() => {
-      listRef.current.resetAfterIndex(lastVisibleIndexes.current.overscanStartIndex);
-    });
+    setCache(new CellMeasurerCache({
+      fixedWidth: true,
+      defaultHeight: LIST_ITEM_ESTIMATED_HEIGHT
+    }));
   }, [items]);
+  useLayoutEffect(() => {
+    const height = Math.min(items.reduce((prevValue, currentValue, index) => {
+      return prevValue + cache.rowHeight({
+        index: index
+      });
+    }, 0), fitHeight);
+    setHeight(height);
+  }, [items, cache, fitHeight]);
+
+  const renderRow = ({
+    index,
+    key,
+    style,
+    parent
+  }) => {
+    return jsx(CellMeasurer, {
+      key: key,
+      cache: cache,
+      parent: parent,
+      columnIndex: 0,
+      rowIndex: index
+    }, jsx("div", {
+      style: style,
+      "data-index": index
+    }, jsx("div", {
+      "data-testid": `list-item-height-observed-${index}`
+    }, jsx(TypeAheadListItem, {
+      key: items[index].title,
+      item: items[index],
+      itemIndex: index,
+      selectedIndex: selectedIndex,
+      onItemClick: actions.onItemClick,
+      onItemHover: actions.onItemHover
+    }))));
+  };
 
   if (!Array.isArray(items)) {
     return null;
   }
 
-  const estimatedHeight = items.length * LIST_ITEM_ESTIMATED_HEIGHT;
-  const height = Math.min(typeof renderedListHeight === 'number' ? renderedListHeight : estimatedHeight, fitHeight);
   return jsx(MenuGroup, {
     role: "listbox",
     "aria-live": "polite",
     "aria-label": intl.formatMessage(typeAheadListMessages.typeAheadResultLabel),
     "aria-relevant": "additions removals"
-  }, jsx(ResizeObserverProvider, null, jsx(UpdateListItemHeightContext.Provider, {
-    value: setListItemHeight
-  }, jsx(ListItemActionsContext.Provider, {
-    value: actions
-  }, jsx(SelectedIndexContext.Provider, {
-    value: selectedIndex
   }, jsx(List, {
-    useIsScrolling: true,
+    rowRenderer: renderRow,
     ref: listRef,
-    itemData: items,
-    itemCount: items.length,
-    estimatedItemSize: LIST_ITEM_ESTIMATED_HEIGHT,
-    onScroll: onScroll,
-    onItemsRendered: onItemsRendered,
-    itemSize: getListItemHeight,
+    rowCount: items.length,
+    rowHeight: cache.rowHeight,
+    onRowsRendered: onItemsRendered,
     width: LIST_WIDTH,
+    onScroll: onScroll,
     height: height,
-    overscanCount: 3,
+    overscanRowCount: 3,
     css: css`
-                    button {
-                      padding: 12px 12px 11px;
-
-                      span:last-child span:last-child {
-                        white-space: normal;
-                      }
-                    }
-                  `
-  }, DynamicHeightListItem))))));
+            button {
+              padding: 12px 12px 11px;
+              span:last-child span:last-child {
+                white-space: normal;
+              }
+            }
+          `
+  }));
 });
 export const TypeAheadList = injectIntl(TypeAheadListComponent);
 TypeAheadList.displayName = 'TypeAheadList';

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, useLayoutEffect } from 'react';
 import { css, jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
@@ -137,7 +137,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     return setFitHeight(minFitHeight);
   }, [anchorElement, popupsMountPoint]);
   const getFitHeightDebounced = rafSchedule(getFitHeight);
-  useEffect(() => {
+  useLayoutEffect(() => {
     const scrollableElement = popupsScrollableElement || findOverflowScrollParent(anchorElement);
     getFitHeight();
     window.addEventListener('resize', getFitHeightDebounced);

package/dist/es2019/ui/Addon/ClickAreaBlock/index.js

@@ -14,14 +14,18 @@ export default class ClickAreaBlock extends React.Component {
 
     _defineProperty(this, "handleClick", event => {
       const {
-        editorView: view
+        editorView: view,
+        editorDisabled
       } = this.props;
 
       if (!view) {
         return;
       }
 
-      clickAreaClickHandler(view, event);
+      if (!editorDisabled) {
+        // if the editor is disabled -- we don't want to intercept any click events
+        clickAreaClickHandler(view, event);
+      }
     });
   }
 

package/dist/es2019/ui/Addon/ClickAreaMobile/index.js

@@ -40,14 +40,19 @@ export default class ClickAreaMobile extends React.Component {
 
     _defineProperty(this, "handleClick", event => {
       const {
-        editorView: view
+        editorView: view,
+        editorDisabled
       } = this.props;
 
       if (!view) {
         return;
       }
 
-      clickAreaClickHandler(view, event);
+      if (!editorDisabled) {
+        // if the editor is disabled -- we don't want to intercept any click events
+        clickAreaClickHandler(view, event);
+      }
+
       const scrollGutterClicked = event.clientY > view.dom.getBoundingClientRect().bottom; // Reset the default prosemirror scrollIntoView logic by
       // clamping the scroll position to the bottom of the viewport.
 

package/dist/es2019/ui/Appearance/Comment/Comment.js

@@ -80,14 +80,15 @@ const secondaryToolbarStyle = css`
 `;
 
 class Editor extends React.Component {
-  constructor(...args) {
-    super(...args);
+  // Wrapper container for toolbar and content area
+  constructor(props) {
+    super(props);
 
     _defineProperty(this, "appearance", 'comment');
 
     _defineProperty(this, "containerElement", null);
 
-    _defineProperty(this, "wrapperElement", null);
+    _defineProperty(this, "wrapperElementRef", /*#__PURE__*/React.createRef());
 
     _defineProperty(this, "handleSave", () => {
       if (this.props.editorView && this.props.onSave) {
@@ -137,7 +138,7 @@ class Editor extends React.Component {
               min-height: ${minHeight}px;
             `],
         className: "akEditor",
-        ref: ref => this.wrapperElement = ref
+        ref: this.wrapperElementRef
       }, jsx(MainToolbar, {
         useStickyToolbar: useStickyToolbar
       }, jsx(Toolbar, {
@@ -156,7 +157,8 @@ class Editor extends React.Component {
       }), jsx("div", {
         css: mainToolbarCustomComponentsSlotStyle
       }, customPrimaryToolbarComponents)), jsx(ClickAreaBlock, {
-        editorView: editorView
+        editorView: editorView,
+        editorDisabled: disabled
       }, jsx(WidthConsumer, null, ({
         width
       }) => {
@@ -181,7 +183,7 @@ class Editor extends React.Component {
           popupsScrollableElement: popupsScrollableElement,
           containerElement: this.containerElement,
           disabled: !!disabled,
-          wrapperElement: this.wrapperElement
+          wrapperElement: this.wrapperElementRef.current
         }), editorDOMElement);
       })), jsx(WidthEmitter, {
         editorView: editorView
@@ -203,6 +205,10 @@ class Editor extends React.Component {
         }
       }), customSecondaryToolbarComponents));
     });
+
+    if (props.innerRef) {
+      this.wrapperElementRef = props.innerRef;
+    }
   }
 
   render() {

package/dist/es2019/ui/Appearance/FullPage/FullPage.js

@@ -11,8 +11,9 @@ import { FullPageContentArea } from './FullPageContentArea';
 import { FullPageToolbar } from './FullPageToolbar';
 import { getFeatureFlags } from '../../../plugins/feature-flags-context';
 export class FullPageEditor extends React.Component {
-  constructor(...args) {
-    super(...args);
+  // Wrapper container for toolbar and content area
+  constructor(props) {
+    super(props);
 
     _defineProperty(this, "state", {
       showKeyline: false
@@ -63,6 +64,10 @@ export class FullPageEditor extends React.Component {
     _defineProperty(this, "handleResize", () => {
       this.updateToolbarKeyline();
     });
+
+    if (props.innerRef) {
+      this.wrapperElementRef = props.innerRef;
+    }
   }
 
   componentDidMount() {

package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js

@@ -25,7 +25,8 @@ const Content = /*#__PURE__*/React.memo(props => {
     ref: props.scrollContainerRef,
     className: "fabric-editor-popup-scroll-parent"
   }, jsx(ClickAreaBlock, {
-    editorView: props.editorView
+    editorView: props.editorView,
+    editorDisabled: props.disabled
   }, jsx("div", {
     css: editorContentAreaStyle({
       fullWidthMode,

package/dist/es2019/ui/Appearance/Mobile.js

@@ -5,12 +5,14 @@ export default function Mobile({
   editorView,
   maxHeight,
   persistScrollGutter,
-  editorDOMElement
+  editorDOMElement,
+  disabled
 }) {
   return /*#__PURE__*/React.createElement(MobileAppearance, {
     editorView: editorView || null,
     maxHeight: maxHeight,
-    persistScrollGutter: persistScrollGutter
+    persistScrollGutter: persistScrollGutter,
+    editorDisabled: disabled
   }, editorDOMElement, editorView && /*#__PURE__*/React.createElement(WidthEmitter, {
     editorView: editorView
   }));

package/dist/es2019/ui/AppearanceComponents/Mobile.js

@@ -25,9 +25,9 @@ const ContentArea = createEditorContentStyle();
 ContentArea.displayName = 'ContentArea';
 export function MobileAppearance({
   editorView,
-  maxHeight,
   persistScrollGutter,
-  children
+  children,
+  editorDisabled
 }) {
   const render = useCallback(({
     maxContentSize,
@@ -71,11 +71,12 @@ export function MobileAppearance({
       editorView: editorView || undefined,
       minHeight: minHeight,
       persistScrollGutter: persistScrollGutter,
-      isExpanded: currentIsExpanded
+      isExpanded: currentIsExpanded,
+      editorDisabled: editorDisabled
     }, jsx(ContentArea, null, jsx("div", {
       className: "ak-editor-content-area"
     }, children)))));
-  }, [children, editorView, persistScrollGutter]);
+  }, [children, editorView, persistScrollGutter, editorDisabled]);
   return jsx(WithPluginState, {
     plugins: {
       maxContentSize: maxContentSizePluginKey,

package/dist/es2019/ui/DropList/index.js

@@ -10,7 +10,7 @@ import { N0, DN50, DN600, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { token } from '@atlaskit/tokens';
 const packageName = "@atlaskit/editor-core";
-const packageVersion = "172.0.5";
+const packageVersion = "172.1.0";
 const halfFocusRing = 1;
 const dropOffset = `0, ${gridSize()}px`;
 

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

@@ -25,14 +25,12 @@ const buttonStyles = isActive => theme => {
     /**
      * Hack for item to imitate old dropdown-menu selected styles
      */
-    // TODO: https://product-fabric.atlassian.net/browse/DSP-4500
-
-    /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
     return css`
       > span,
-      > span:hover {
-        background: #6c798f;
-        color: #fff;
+      > span:hover,
+      > span:active {
+        background: ${token('color.background.selected', '#6c798f')};
+        color: ${token('color.text', '#fff')};
       }
     `;
   } else {
@@ -45,6 +43,12 @@ const buttonStyles = isActive => theme => {
         background-color: ${themed({
       light: token('color.background.neutral.subtle.hovered', 'rgb(244, 245, 247)'),
       dark: token('color.background.neutral.subtle.hovered', 'rgb(59, 71, 92)')
+    })(theme)};
+      }
+      > span:active[aria-disabled='false'] {
+        background-color: ${themed({
+      light: token('color.background.neutral.subtle.pressed', 'rgb(179, 212, 255)'),
+      dark: token('color.background.neutral.subtle.pressed', 'rgb(179, 212, 255)')
     })(theme)};
       }
       > span[aria-disabled='true'] {

package/dist/es2019/ui/with-outer-listeners.js

@@ -2,53 +2,103 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { PureComponent } from 'react';
 import ReactDOM from 'react-dom';
-export default function withOuterListeners(Component) {
-  return class WithOutsideClick extends PureComponent {
-    constructor(...args) {
-      super(...args);
+import ReactEditorViewContext from '../create-editor/ReactEditorViewContext';
 
-      _defineProperty(this, "handleClick", evt => {
-        const domNode = ReactDOM.findDOMNode(this); // eslint-disable-line react/no-find-dom-node
+class WithOutsideClick extends PureComponent {
+  constructor(...args) {
+    super(...args);
 
-        if (!domNode || evt.target instanceof Node && !domNode.contains(evt.target)) {
-          if (this.props.handleClickOutside) {
-            this.props.handleClickOutside(evt);
-          }
-        }
-      });
+    _defineProperty(this, "handleClick", evt => {
+      if (!this.props.isActiveComponent) {
+        return;
+      }
 
-      _defineProperty(this, "handleKeydown", evt => {
-        if (evt.code === 'Escape' && this.props.handleEscapeKeydown) {
-          this.props.handleEscapeKeydown(evt);
-        } else if (evt.code === 'Enter' && this.props.handleEnterKeydown) {
-          this.props.handleEnterKeydown(evt);
+      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) {
+          this.props.handleClickOutside(evt);
         }
-      });
-    }
+      }
+    });
 
-    componentDidMount() {
-      if (this.props.handleClickOutside) {
-        document.addEventListener('click', this.handleClick, false);
+    _defineProperty(this, "handleKeydown", evt => {
+      if (!this.props.isActiveComponent) {
+        return;
       }
 
-      if (this.props.handleEscapeKeydown) {
-        document.addEventListener('keydown', this.handleKeydown, false);
+      if (evt.code === 'Escape' && this.props.handleEscapeKeydown) {
+        var _this$props$editorVie;
+
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.props.handleEscapeKeydown(evt);
+
+        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();
+        }
+
+        return false;
+      } else if (evt.code === 'Enter' && this.props.handleEnterKeydown) {
+        this.props.handleEnterKeydown(evt);
       }
+    });
+  }
+
+  componentDidMount() {
+    if (this.props.handleClickOutside) {
+      document.addEventListener('click', this.handleClick, false);
     }
 
-    componentWillUnmount() {
-      if (this.props.handleClickOutside) {
-        document.removeEventListener('click', this.handleClick, false);
-      }
+    if (this.props.handleEscapeKeydown) {
+      var _this$props$editorRef;
 
-      if (this.props.handleEscapeKeydown) {
-        document.removeEventListener('keydown', this.handleKeydown, false);
-      }
+      (((_this$props$editorRef = this.props.editorRef) === null || _this$props$editorRef === void 0 ? void 0 : _this$props$editorRef.current) || document).addEventListener('keydown', this.handleKeydown, false);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.props.handleClickOutside) {
+      document.removeEventListener('click', this.handleClick, false);
     }
 
-    render() {
-      return /*#__PURE__*/React.createElement(Component, this.props);
+    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) || document).removeEventListener('keydown', this.handleKeydown, false);
     }
+  }
+
+  render() {
+    return this.props.children;
+  }
+
+}
 
+function hasIsOpen(props) {
+  return 'isOpen' in props;
+}
+
+export default function withOuterListeners(Component) {
+  return ({
+    handleClickOutside,
+    handleEnterKeydown,
+    handleEscapeKeydown,
+    ...props
+  }) => {
+    const isActiveComponent = hasIsOpen(props) ? props.isOpen : true;
+    return /*#__PURE__*/React.createElement(ReactEditorViewContext.Consumer, null, ({
+      editorView,
+      editorRef
+    }) => /*#__PURE__*/React.createElement(WithOutsideClick, {
+      editorView: editorView,
+      editorRef: editorRef,
+      isActiveComponent: isActiveComponent,
+      handleClickOutside: handleClickOutside,
+      handleEnterKeydown: handleEnterKeydown,
+      handleEscapeKeydown: handleEscapeKeydown
+    }, /*#__PURE__*/React.createElement(Component, props)));
   };
 }

package/dist/es2019/utils/deprecation-warnings.js

@@ -1,6 +1,10 @@
 import { nextMajorVersion } from '../version-wrapper';
 
 const deprecationWarnings = (className, props, deprecations) => {
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
+
   const nextVersion = nextMajorVersion();
 
   for (const deprecation of deprecations) {

package/dist/es2019/utils/linking-utils.js

@@ -10,6 +10,31 @@ export const buildEditLinkPayload = type => {
     eventType: EVENT_TYPE.UI
   };
 };
+
+const mapLinkTypeToCardAppearance = type => {
+  switch (type) {
+    case ACTION_SUBJECT_ID.CARD_INLINE:
+      {
+        return 'inline';
+      }
+
+    case ACTION_SUBJECT_ID.CARD_BLOCK:
+      {
+        return 'block';
+      }
+
+    case ACTION_SUBJECT_ID.EMBEDS:
+      {
+        return 'embed';
+      }
+
+    default:
+      {
+        return 'url';
+      }
+  }
+};
+
 export const buildVisitedLinkPayload = type => {
   return type === ACTION_SUBJECT_ID.HYPERLINK ? {
     action: ACTION.VISITED,
@@ -29,6 +54,18 @@ export const buildVisitedLinkPayload = type => {
     eventType: EVENT_TYPE.TRACK
   };
 };
+export const buildOpenedSettingsPayload = type => {
+  return {
+    action: ACTION.CLICKED,
+    actionSubject: ACTION_SUBJECT.BUTTON,
+    actionSubjectId: ACTION_SUBJECT_ID.GOTO_SMART_LINK_SETTINGS,
+    attributes: {
+      inputMethod: INPUT_METHOD.TOOLBAR,
+      display: mapLinkTypeToCardAppearance(type)
+    },
+    eventType: EVENT_TYPE.UI
+  };
+};
 export const unlinkPayload = type => {
   return {
     action: ACTION.UNLINK,

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "172.0.5";
+export const version = "172.1.0";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "172.0.5",
+	"version": "172.1.0",
 	"sideEffects": false
 }