@atlaskit/editor-common 94.14.2 → 94.16.0

package/dist/es2019/element-browser/components/ElementList/ElementList.js

@@ -7,7 +7,7 @@ import React, { Fragment, memo, useCallback, useEffect, useMemo, useState } from
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { Grid } from 'react-virtualized';
+import { Grid, List } from 'react-virtualized';
 import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
 import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
 import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
@@ -46,7 +46,7 @@ export const itemIcon = css({
     height: `${ICON_HEIGHT}px`
   }
 });
-function ElementList({
+function ElementListOld({
   items,
   mode,
   selectedItemIndex,
@@ -94,8 +94,8 @@ function ElementList({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const cache = new CellMeasurerCache({
     fixedWidth: true,
-    defaultHeight: ELEMENT_ITEM_HEIGHT,
-    minHeight: ELEMENT_ITEM_HEIGHT
+    defaultHeight: 75,
+    minHeight: 75
   });
   const columnWidth = (containerWidth - ELEMENT_ITEM_PADDING * 2) / columnCount;
   const rowCount = Math.ceil(items.length / columnCount);
@@ -103,7 +103,7 @@ function ElementList({
     index
   }) => cache.rowHeight({
     index
-  }) <= ELEMENT_ITEM_HEIGHT ? ELEMENT_ITEM_HEIGHT : cache.rowHeight({
+  }) <= 75 ? 75 : cache.rowHeight({
     index
   }) + ELEMENT_ITEM_PADDING * 2;
   const cellRenderer = useMemo(() => ({
@@ -200,6 +200,292 @@ function ElementList({
     scrollToRow: Math.floor(selectedItemIndex / columnCount)
   }))))));
 }
+function ElementListNew({
+  items,
+  mode,
+  selectedItemIndex,
+  focusedItemIndex,
+  columnCount,
+  setColumnCount,
+  createAnalyticsEvent,
+  emptyStateHandler,
+  selectedCategory,
+  selectedCategoryIndex,
+  searchTerm,
+  setFocusedCategoryIndex,
+  setFocusedItemIndex,
+  cache,
+  onInsertItem
+}) {
+  const {
+    containerWidth,
+    ContainerWidthMonitor
+  } = useContainerWidth();
+  const [scrollbarWidth, setScrollbarWidth] = useState(SCROLLBAR_WIDTH);
+  const fullMode = mode === Modes.full;
+  useEffect(() => {
+    /**
+     * More of an optimization condition.
+     * Initially the containerWidths are reported 0 twice.
+     **/
+    if (fullMode && containerWidth > 0) {
+      setColumnCount(getColumnCount(containerWidth));
+      const updatedScrollbarWidth = getScrollbarWidth();
+      if (updatedScrollbarWidth > 0) {
+        setScrollbarWidth(updatedScrollbarWidth);
+      }
+    }
+  }, [fullMode, containerWidth, setColumnCount, scrollbarWidth]);
+  const onExternalLinkClick = useCallback(() => {
+    fireAnalyticsEvent(createAnalyticsEvent)({
+      payload: {
+        action: ACTION.VISITED,
+        actionSubject: ACTION_SUBJECT.SMART_LINK,
+        eventType: EVENT_TYPE.TRACK
+      }
+    });
+  }, [createAnalyticsEvent]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const listCache = cache !== null && cache !== void 0 ? cache : new CellMeasurerCache({
+    fixedWidth: true,
+    defaultHeight: ELEMENT_ITEM_HEIGHT,
+    minHeight: ELEMENT_ITEM_HEIGHT
+  });
+  useEffect(() => {
+    // need to recalculate values if we have the same items, but they're reordered
+    listCache.clearAll();
+  }, [listCache, searchTerm]);
+  const rowHeight = ({
+    index
+  }) => {
+    return listCache.rowHeight({
+      index
+    });
+  };
+  return jsx(Fragment, null, jsx(ContainerWidthMonitor, null), jsx("div", {
+    css: elementItemsWrapper,
+    "data-testid": "element-items",
+    id: selectedCategory ? `browse-category-${selectedCategory}-tab` : 'browse-category-tab',
+    "aria-labelledby": selectedCategory ? `browse-category--${selectedCategory}-button` : 'browse-category-button',
+    role: "tabpanel",
+    tabIndex: items.length === 0 ? 0 : undefined
+  }, !items.length ? emptyStateHandler ? emptyStateHandler({
+    mode,
+    selectedCategory,
+    searchTerm
+  }) : jsx(EmptyState, {
+    onExternalLinkClick: onExternalLinkClick
+  }) : jsx(Fragment, null, containerWidth > 0 && jsx(AutoSizer, {
+    disableWidth: true
+  }, ({
+    height
+  }) => columnCount === 1 ? jsx(ElementListSingleColumn, {
+    cache: listCache,
+    setFocusedCategoryIndex: setFocusedCategoryIndex,
+    selectedCategoryIndex: selectedCategoryIndex,
+    items: items,
+    setFocusedItemIndex: setFocusedItemIndex,
+    fullMode: fullMode,
+    selectedItemIndex: selectedItemIndex,
+    focusedItemIndex: focusedItemIndex,
+    rowHeight: rowHeight,
+    containerWidth: containerWidth,
+    height: height,
+    onInsertItem: onInsertItem
+  }) : jsx(ElementListMultipleColumns, {
+    columnCount: columnCount,
+    cache: listCache,
+    setFocusedCategoryIndex: setFocusedCategoryIndex,
+    selectedCategoryIndex: selectedCategoryIndex,
+    items: items,
+    setFocusedItemIndex: setFocusedItemIndex,
+    fullMode: fullMode,
+    selectedItemIndex: selectedItemIndex,
+    focusedItemIndex: focusedItemIndex,
+    rowHeight: rowHeight,
+    containerWidth: containerWidth,
+    height: height,
+    onInsertItem: onInsertItem
+  })))));
+}
+const ElementListSingleColumn = props => {
+  const {
+    items,
+    fullMode,
+    setFocusedItemIndex,
+    rowHeight,
+    containerWidth,
+    height,
+    onInsertItem,
+    cache,
+    focusedItemIndex,
+    setFocusedCategoryIndex,
+    selectedCategoryIndex,
+    selectedItemIndex
+  } = props;
+  const rowRenderer = useMemo(() => ({
+    index,
+    key,
+    style,
+    parent
+  }) => {
+    return jsx(CellMeasurer, {
+      key: key,
+      cache: cache,
+      parent: parent,
+      columnIndex: 0,
+      rowIndex: index
+    }, jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      style: style,
+      key: key
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 -- Ignored via go/DSP-18766
+      ,
+      className: "element-item-wrapper",
+      css: elementItemWrapperSingle,
+      onKeyDown: e => {
+        if (e.key === 'Tab') {
+          if (e.shiftKey && index === 0) {
+            if (setFocusedCategoryIndex) {
+              if (!!selectedCategoryIndex) {
+                setFocusedCategoryIndex(selectedCategoryIndex);
+              } else {
+                setFocusedCategoryIndex(0);
+              }
+              e.preventDefault();
+            }
+          }
+          // before focus jumps from elements list we need to rerender react-virtualized grid.
+          // Otherwise on the next render 'scrollToCell' will have same cached value
+          // and grid will not be scrolled to top.
+          // So Tab press on category will not work anymore due to invisible 1-t element.
+          else if (index === items.length - 2) {
+            setFocusedItemIndex(items.length - 1);
+          }
+        }
+      }
+    }, jsx(MemoizedElementItem, {
+      inlineMode: !fullMode,
+      index: index,
+      item: items[index],
+      selected: selectedItemIndex === index,
+      focus: focusedItemIndex === index,
+      setFocusedItemIndex: setFocusedItemIndex,
+      onInsertItem: onInsertItem
+    })));
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [cache, items, fullMode, selectedItemIndex, focusedItemIndex, selectedCategoryIndex, setFocusedCategoryIndex, setFocusedItemIndex, props]);
+  return jsx(List, _extends({
+    rowRenderer: rowRenderer,
+    rowCount: items.length,
+    rowHeight: rowHeight,
+    width: containerWidth - ELEMENT_LIST_PADDING * 2,
+    height: height,
+    overscanRowCount: 3,
+    containerRole: "presentation",
+    role: "listbox"
+  }, selectedItemIndex !== undefined && {
+    scrollToIndex: selectedItemIndex
+  }));
+};
+const ElementListMultipleColumns = props => {
+  const {
+    columnCount,
+    items,
+    fullMode,
+    setFocusedItemIndex,
+    rowHeight,
+    containerWidth,
+    height,
+    onInsertItem,
+    cache,
+    focusedItemIndex,
+    setFocusedCategoryIndex,
+    selectedCategoryIndex,
+    selectedItemIndex
+  } = props;
+  const columnWidth = (containerWidth - ELEMENT_ITEM_PADDING * 2) / columnCount;
+  const rowCount = Math.ceil(items.length / columnCount);
+  const cellRenderer = useMemo(() => ({
+    columnIndex,
+    key,
+    parent,
+    rowIndex,
+    style
+  }) => {
+    const index = rowIndex * columnCount + columnIndex;
+    if (items[index] == null) {
+      return;
+    }
+    return index > items.length - 1 ? null : jsx(CellMeasurer, {
+      cache: cache,
+      key: key,
+      rowIndex: rowIndex,
+      columnIndex: columnIndex,
+      parent: parent
+    }, jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      style: style,
+      key: key
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 -- Ignored via go/DSP-18766
+      ,
+      className: "element-item-wrapper",
+      css: elementItemWrapper,
+      onKeyDown: e => {
+        if (e.key === 'Tab') {
+          if (e.shiftKey && index === 0) {
+            if (setFocusedCategoryIndex) {
+              if (!!selectedCategoryIndex) {
+                setFocusedCategoryIndex(selectedCategoryIndex);
+              } else {
+                setFocusedCategoryIndex(0);
+              }
+              e.preventDefault();
+            }
+          }
+          // before focus jumps from elements list we need to rerender react-virtualized grid.
+          // Otherwise on the next render 'scrollToCell' will have same cached value
+          // and grid will not be scrolled to top.
+          // So Tab press on category will not work anymore due to invisible 1-t element.
+          else if (index === items.length - 2) {
+            setFocusedItemIndex(items.length - 1);
+          }
+        }
+      }
+    }, jsx(MemoizedElementItem, {
+      inlineMode: !fullMode,
+      index: index,
+      item: items[index],
+      selected: selectedItemIndex === index,
+      focus: focusedItemIndex === index,
+      setFocusedItemIndex: setFocusedItemIndex,
+      onInsertItem: onInsertItem
+    })));
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [cache, items, fullMode, selectedItemIndex, columnCount, focusedItemIndex, selectedCategoryIndex, setFocusedCategoryIndex, setFocusedItemIndex, props]);
+  return jsx(Grid, _extends({
+    cellRenderer: cellRenderer,
+    height: height,
+    width: containerWidth - ELEMENT_LIST_PADDING * 2 // containerWidth - padding on Left/Right (for focus outline)
+    /**
+     * Refresh Grid on WidthObserver value change.
+     * Length of the items used to force re-render to solve Firefox bug with react-virtualized retaining
+     * scroll position after updating the data. If new data has different number of cells, a re-render
+     * is forced to prevent the scroll position render bug.
+     */,
+    key: containerWidth + items.length,
+    rowHeight: rowHeight,
+    rowCount: rowCount,
+    columnCount: columnCount,
+    columnWidth: columnWidth,
+    deferredMeasurementCache: cache
+  }, selectedItemIndex !== undefined && {
+    scrollToRow: Math.floor(selectedItemIndex / columnCount)
+  }));
+};
 const MemoizedElementItem = /*#__PURE__*/memo(ElementItem);
 MemoizedElementItem.displayName = 'MemoizedElementItem';
 export function ElementItem({
@@ -358,6 +644,17 @@ const elementItemsWrapper = css({
     }
   }
 });
+const elementItemWrapperSingle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  div: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    button: {
+      minHeight: '60px',
+      alignItems: 'flex-start',
+      padding: `${"var(--ds-space-150, 12px)"} ${"var(--ds-space-150, 12px)"} 11px`
+    }
+  }
+});
 const elementItemWrapper = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   div: {
@@ -424,6 +721,55 @@ const itemIconStyle = css({
     objectFit: 'cover'
   }
 });
+function ElementList({
+  items,
+  mode,
+  selectedItemIndex,
+  focusedItemIndex,
+  columnCount,
+  setColumnCount,
+  createAnalyticsEvent,
+  emptyStateHandler,
+  selectedCategory,
+  selectedCategoryIndex,
+  searchTerm,
+  setFocusedCategoryIndex,
+  setFocusedItemIndex,
+  ...props
+}) {
+  if (fg('platform_editor_reduce_element_browser_padding')) {
+    return jsx(ElementListNew, _extends({
+      items: items,
+      mode: mode,
+      selectedItemIndex: selectedItemIndex,
+      focusedItemIndex: focusedItemIndex,
+      columnCount: columnCount,
+      setColumnCount: setColumnCount,
+      createAnalyticsEvent: createAnalyticsEvent,
+      emptyStateHandler: emptyStateHandler,
+      selectedCategory: selectedCategory,
+      selectedCategoryIndex: selectedCategoryIndex,
+      searchTerm: searchTerm,
+      setFocusedCategoryIndex: setFocusedCategoryIndex,
+      setFocusedItemIndex: setFocusedItemIndex
+    }, props));
+  }
+  return jsx(ElementListOld, _extends({
+    items: items,
+    mode: mode,
+    selectedItemIndex: selectedItemIndex,
+    focusedItemIndex: focusedItemIndex,
+    columnCount: columnCount,
+    setColumnCount: setColumnCount,
+    createAnalyticsEvent: createAnalyticsEvent,
+    emptyStateHandler: emptyStateHandler,
+    selectedCategory: selectedCategory,
+    selectedCategoryIndex: selectedCategoryIndex,
+    searchTerm: searchTerm,
+    setFocusedCategoryIndex: setFocusedCategoryIndex,
+    setFocusedItemIndex: setFocusedItemIndex
+  }, props));
+}
 const MemoizedElementListWithAnalytics = /*#__PURE__*/memo(withAnalyticsContext({
   component: 'ElementList'
 })(ElementList));

package/dist/es2019/element-browser/components/StatelessElementBrowser.js

@@ -121,7 +121,8 @@ function StatelessElementBrowser(props) {
     selectedCategory,
     onSelectCategory,
     searchTerm,
-    showCategories
+    showCategories,
+    cache
   } = props;
   const {
     containerWidth,
@@ -230,7 +231,8 @@ function StatelessElementBrowser(props) {
     onKeyPress: onItemsEnterTabKeyPress,
     onKeyDown: onKeyDown,
     viewMoreItem: viewMoreItem,
-    focusOnViewMore: focusOnViewMore
+    focusOnViewMore: focusOnViewMore,
+    cache: cache
   })) : jsx(DesktopBrowser, _extends({}, props, {
     selectedItemIndex: selectedItemIndex,
     focusedItemIndex: focusedItemIndex,
@@ -244,7 +246,8 @@ function StatelessElementBrowser(props) {
     focusedCategoryIndex: focusedCategoryIndex,
     setFocusedCategoryIndex: setFocusedCategoryIndex,
     selectedCategoryIndex: selectedCategoryIndex,
-    onSelectCategory: onSelectCategoryCB
+    onSelectCategory: onSelectCategoryCB,
+    cache: cache
   })));
 }
 function MobileBrowser({
@@ -272,7 +275,8 @@ function MobileBrowser({
   searchTerm,
   createAnalyticsEvent,
   emptyStateHandler,
-  viewMoreItem
+  viewMoreItem,
+  cache
 }) {
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -316,7 +320,8 @@ function MobileBrowser({
       createAnalyticsEvent: createAnalyticsEvent,
       emptyStateHandler: emptyStateHandler,
       selectedCategory: selectedCategory,
-      searchTerm: searchTerm
+      searchTerm: searchTerm,
+      cache: cache
     })), viewMoreItem && jsx(ViewMore, {
       item: viewMoreItem,
       focus: focusOnViewMore
@@ -347,7 +352,8 @@ function DesktopBrowser({
   onKeyDown,
   searchTerm,
   createAnalyticsEvent,
-  emptyStateHandler
+  emptyStateHandler,
+  cache
 }) {
   return jsx("div", {
     css: elementBrowserContainer,
@@ -406,7 +412,8 @@ function DesktopBrowser({
     selectedCategory: selectedCategory,
     selectedCategoryIndex: selectedCategoryIndex,
     searchTerm: searchTerm,
-    setFocusedCategoryIndex: showCategories ? setFocusedCategoryIndex : undefined
+    setFocusedCategoryIndex: showCategories ? setFocusedCategoryIndex : undefined,
+    cache: cache
   })));
 }
 const MemoizedElementBrowser = /*#__PURE__*/memo(withAnalyticsContext({

package/dist/es2019/element-browser/constants.js

@@ -16,6 +16,6 @@ export const INLINE_SIDEBAR_HEIGHT = '54px';
 export const SEARCH_ITEM_HEIGHT_WIDTH = '20px';
 export const SCROLLBAR_WIDTH = 15;
 export const ELEMENT_LIST_PADDING = 2;
-export const ELEMENT_ITEM_HEIGHT = 75;
+export const ELEMENT_ITEM_HEIGHT = 60;
 export const ELEMENT_ITEM_PADDING = 10;
 export const ELEMENT_BROWSER_ID = 'editor-element-browser';

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "94.14.2";
+const packageVersion = "94.16.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/quick-insert/utils.js

@@ -51,16 +51,21 @@ const options = {
  * @returns {QuickInsertItem[]} - Returns a sorted array of QuickInsertItems based on the priority. If the query string is empty, it will return the array sorted by priority. If a query string is provided, it will return an array of QuickInsertItems that match the query string, sorted by relevance to the query.
  */
 export function find(query, items, prioritySortingFn) {
+  if (query === '') {
+    // Copy and sort list by priority
+    return items.slice(0).sort((a, b) => (a.priority || Number.POSITIVE_INFINITY) - (b.priority || Number.POSITIVE_INFINITY));
+  }
   const fuseOptions = {
     ...options
   };
   if (prioritySortingFn) {
-    fuseOptions.sortFn = prioritySortingFn(items);
+    const sortFn = prioritySortingFn(items);
+    // prioritySortingFn will trigger the experiment exposure, but sortFn
+    // will be undefined for the control group.
+    if (sortFn) {
+      fuseOptions.sortFn = sortFn;
+    }
   }
   const fuse = new Fuse(items, fuseOptions);
-  if (query === '') {
-    // Copy and sort list by priority
-    return items.slice(0).sort((a, b) => (a.priority || Number.POSITIVE_INFINITY) - (b.priority || Number.POSITIVE_INFINITY));
-  }
   return fuse.search(query).map(result => result.item);
 }

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

@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "94.14.2";
+const packageVersion = "94.16.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/esm/element-browser/ElementBrowser.js

@@ -110,7 +110,8 @@ var ElementBrowser = /*#__PURE__*/function (_PureComponent) {
         showCategories = _this$props.showCategories,
         mode = _this$props.mode,
         emptyStateHandler = _this$props.emptyStateHandler,
-        viewMoreItem = _this$props.viewMoreItem;
+        viewMoreItem = _this$props.viewMoreItem,
+        cache = _this$props.cache;
       var _this$state2 = this.state,
         categories = _this$state2.categories,
         searchTerm = _this$state2.searchTerm,
@@ -129,7 +130,8 @@ var ElementBrowser = /*#__PURE__*/function (_PureComponent) {
         mode: mode,
         searchTerm: searchTerm,
         emptyStateHandler: emptyStateHandler,
-        viewMoreItem: viewMoreItem
+        viewMoreItem: viewMoreItem,
+        cache: cache
       });
     }
   }]);