@atlaskit/editor-plugin-type-ahead 14.0.1 → 14.0.2

package/dist/es2019/ui/registered-menu/RegisteredTypeAheadMenu.js

@@ -1,21 +1,30 @@
+/* RegisteredTypeAheadMenu.tsx generated by @compiled/babel-plugin v2.0.0 */
+import "./RegisteredTypeAheadMenu.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { useIntl } from 'react-intl';
+import { isSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-is-section-overflow-item-key';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles/constants';
 import { Box } from '@atlaskit/primitives/compiled';
 import { InputQuery } from '../InputQuery';
 import { buildTypeAheadMenuModel } from './buildTypeAheadMenuModel';
+import { getTypeAheadGlobalViewMoreId } from './getTypeAheadGlobalViewMoreId';
 import { getTypeAheadItemId } from './getTypeAheadItemId';
-import { PassThrough } from './PassThrough';
-import { TypeAheadItemRow } from './TypeAheadItemRow';
+import { TypeAheadMenuRenderer } from './TypeAheadMenuRenderer';
 import { TypeAheadProvider } from './TypeAheadProvider';
+const styles = {
+  menu: "_2rko12b0 _1reo15vq _18m915vq _1rjc1b66 _bfhk1bhr _16qs130s _1bsb5x59"
+};
+const DEFAULT_MENU_MAX_HEIGHT = 520;
 const POPUP_OFFSET = [0, 8];
+const SECTION_OVERFLOW_LIMIT = 30;
 export const RegisteredTypeAheadMenu = ({
   anchorElement,
   api,
   cancel,
   editorView,
   forceFocus,
+  maxHeight = DEFAULT_MENU_MAX_HEIGHT,
   onClose,
   onUndoRedo,
   popupsBoundariesElement,
@@ -27,8 +36,6 @@ export const RegisteredTypeAheadMenu = ({
   surface,
   triggerHandler
 }) => {
-  var _model$root$component, _model$root;
-  const intl = useIntl();
   const generatedId = useId();
   const listId = `${surface.listIdPrefix}-${generatedId}`;
   const menuRef = useRef(null);
@@ -37,36 +44,44 @@ export const RegisteredTypeAheadMenu = ({
     var _api$uiControlRegistr, _api$uiControlRegistr2;
     return (_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(surface.root.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
   }, [api, surface.root.key]);
-  const model = useMemo(() => buildTypeAheadMenuModel(components, surface.root), [components, surface.root]);
-  const itemKeySignature = model.items.map(({
+  const hasSectionOverflowItems = useMemo(() => components.some(({
     key
-  }) => key).join(',');
+  }) => isSectionOverflowItemKey(key)), [components]);
+  const menuModel = useMemo(() => buildTypeAheadMenuModel(components, surface.root, hasSectionOverflowItems ? SECTION_OVERFLOW_LIMIT : undefined), [components, hasSectionOverflowItems, surface.root]);
+  const rows = useMemo(() => menuModel.sections.flat(), [menuModel.sections]);
+  const selectableRowIndexes = useMemo(() => rows.flatMap((registration, rowIndex) => registration.type === 'menu-item' ? [rowIndex] : []), [rows]);
+  const selectableRowKeys = selectableRowIndexes.map(index => {
+    var _rows$index;
+    return (_rows$index = rows[index]) === null || _rows$index === void 0 ? void 0 : _rows$index.key;
+  }).join(',');
+  const selectableItemCount = selectableRowIndexes.length + (menuModel.footer ? 1 : 0);
   useLayoutEffect(() => {
-    setSelectedItemIndex(model.items.length > 0 ? 0 : -1);
-  }, [itemKeySignature, model.items.length, query]);
+    setSelectedItemIndex(selectableItemCount > 0 ? 0 : -1);
+  }, [query, selectableItemCount, selectableRowKeys]);
   const selectActiveItem = useCallback(_mode => {
-    var _menuRef$current, _menuRef$current$owne;
-    if (selectedItemIndex < 0) {
-      return;
+    const rowIndex = selectableRowIndexes[selectedItemIndex];
+    const selectedId = rowIndex !== undefined ? getTypeAheadItemId(listId, rowIndex) : menuModel.footer && selectedItemIndex === selectableRowIndexes.length ? getTypeAheadGlobalViewMoreId(listId) : undefined;
+    if (selectedId) {
+      var _menuRef$current, _menuRef$current$owne;
+      (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : (_menuRef$current$owne = _menuRef$current.ownerDocument.getElementById(selectedId)) === null || _menuRef$current$owne === void 0 ? void 0 : _menuRef$current$owne.click();
     }
-    (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : (_menuRef$current$owne = _menuRef$current.ownerDocument.getElementById(getTypeAheadItemId(listId, selectedItemIndex))) === null || _menuRef$current$owne === void 0 ? void 0 : _menuRef$current$owne.click();
-  }, [listId, selectedItemIndex]);
+  }, [listId, menuModel.footer, selectableRowIndexes, selectedItemIndex]);
   const selectNextItem = useCallback(() => {
     setSelectedItemIndex(currentIndex => {
-      if (model.items.length === 0) {
+      if (selectableItemCount === 0) {
         return -1;
       }
-      return currentIndex < 0 || currentIndex === model.items.length - 1 ? 0 : currentIndex + 1;
+      return currentIndex < 0 || currentIndex === selectableItemCount - 1 ? 0 : currentIndex + 1;
     });
-  }, [model.items.length]);
+  }, [selectableItemCount]);
   const selectPreviousItem = useCallback(() => {
     setSelectedItemIndex(currentIndex => {
-      if (model.items.length === 0) {
+      if (selectableItemCount === 0) {
         return -1;
       }
-      return currentIndex <= 0 ? model.items.length - 1 : currentIndex - 1;
+      return currentIndex <= 0 ? selectableItemCount - 1 : currentIndex - 1;
     });
-  }, [model.items.length]);
+  }, [selectableItemCount]);
   const typeAheadContextValue = useMemo(() => ({
     api,
     editorView,
@@ -76,10 +91,9 @@ export const RegisteredTypeAheadMenu = ({
     triggerHandler
   }), [api, editorView, onClose, query, surface.inputMethod, triggerHandler]);
   const noOp = useCallback(() => {}, []);
-  const RootComponent = (_model$root$component = (_model$root = model.root) === null || _model$root === void 0 ? void 0 : _model$root.component) !== null && _model$root$component !== void 0 ? _model$root$component : PassThrough;
   const SurfaceProvider = surface.Provider;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputQuery, {
-    activeDescendantId: selectedItemIndex >= 0 ? getTypeAheadItemId(listId, selectedItemIndex) : undefined,
+    activeDescendantId: selectableRowIndexes[selectedItemIndex] !== undefined ? getTypeAheadItemId(listId, selectableRowIndexes[selectedItemIndex]) : menuModel.footer && selectedItemIndex === selectableRowIndexes.length ? getTypeAheadGlobalViewMoreId(listId) : undefined,
     cancel: cancel,
     editorView: editorView,
     forceFocus: forceFocus,
@@ -88,7 +102,7 @@ export const RegisteredTypeAheadMenu = ({
     onQueryChange: setQuery,
     onQueryFocus: noOp,
     onUndoRedo: onUndoRedo,
-    optionCount: model.items.length,
+    optionCount: selectableItemCount,
     reopenQuery: reopenQuery,
     selectNextItem: selectNextItem,
     selectPreviousItem: selectPreviousItem,
@@ -97,7 +111,8 @@ export const RegisteredTypeAheadMenu = ({
   }), /*#__PURE__*/React.createElement(Popup, {
     ariaLabel: null,
     boundariesElement: popupsBoundariesElement,
-    fitWidth: 320,
+    fitHeight: maxHeight,
+    fitWidth: 340,
     mountTo: popupsMountPoint,
     offset: POPUP_OFFSET,
     preventOverflow: true,
@@ -106,22 +121,17 @@ export const RegisteredTypeAheadMenu = ({
     zIndex: akEditorFloatingDialogZIndex
   }, /*#__PURE__*/React.createElement(Box, {
     ref: menuRef,
-    backgroundColor: "elevation.surface.overlay",
     "data-registered-type-ahead-menu": "",
-    padding: "space.050"
+    xcss: styles.menu
   }, /*#__PURE__*/React.createElement(TypeAheadProvider, {
     value: typeAheadContextValue
-  }, /*#__PURE__*/React.createElement(SurfaceProvider, null, /*#__PURE__*/React.createElement(RootComponent, null, /*#__PURE__*/React.createElement(Box, {
-    "aria-label": intl.formatMessage(surface.listLabel),
-    id: listId,
-    role: "listbox"
-  }, model.items.map((registration, itemIndex) => /*#__PURE__*/React.createElement(TypeAheadItemRow, {
-    isSelected: selectedItemIndex === itemIndex,
-    itemIndex: itemIndex,
+  }, /*#__PURE__*/React.createElement(SurfaceProvider, null, /*#__PURE__*/React.createElement(TypeAheadMenuRenderer, {
     Item: surface.Item,
-    key: `${registration.type}:${registration.key}`,
+    listLabel: surface.listLabel,
     listId: listId,
+    maxHeight: maxHeight,
+    model: menuModel,
     onItemHover: setSelectedItemIndex,
-    registration: registration
-  })))))))));
+    selectedItemIndex: selectedItemIndex
+  }))))));
 };

package/dist/es2019/ui/registered-menu/TypeAheadItemRow.js

@@ -6,13 +6,15 @@ export const TypeAheadItemRow = ({
   Item,
   listId,
   onItemHover,
-  registration
+  registration,
+  rowIndex
 }) => {
   const onMouseMove = useCallback(() => onItemHover(itemIndex), [itemIndex, onItemHover]);
-  return /*#__PURE__*/React.createElement(Item, {
-    id: getTypeAheadItemId(listId, itemIndex),
+  return /*#__PURE__*/React.createElement("div", {
+    onMouseMove: onMouseMove
+  }, /*#__PURE__*/React.createElement(Item, {
+    id: getTypeAheadItemId(listId, rowIndex),
     isSelected: isSelected,
-    onMouseMove: onMouseMove,
     registration: registration
-  });
+  }));
 };

package/dist/es2019/ui/registered-menu/TypeAheadMenuFooter.compiled.css

@@ -0,0 +1,3 @@
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}._15a5nqa1{border-top-style:solid}
+._1i531l7x{border-top-color:var(--ds-border,#0b120e24)}
+._uwhke4h9{border-top-width:var(--ds-border-width,1px)}

package/dist/es2019/ui/registered-menu/TypeAheadMenuFooter.js

@@ -0,0 +1,22 @@
+/* TypeAheadMenuFooter.tsx generated by @compiled/babel-plugin v2.0.0 */
+import "./TypeAheadMenuFooter.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { Box } from '@atlaskit/primitives/compiled';
+const styles = {
+  footer: "_1rjc1b66 _1i531l7x _15a5nqa1 _uwhke4h9"
+};
+export const TypeAheadMenuFooter = ({
+  id,
+  isSelected,
+  Item,
+  onMouseMove,
+  registration
+}) => /*#__PURE__*/React.createElement(Box, {
+  onMouseMove: onMouseMove,
+  xcss: styles.footer
+}, /*#__PURE__*/React.createElement(Item, {
+  id: id,
+  isSelected: isSelected,
+  registration: registration
+}));

package/dist/es2019/ui/registered-menu/TypeAheadMenuRenderer.js

@@ -0,0 +1,109 @@
+import React, { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
+import { useIntl } from 'react-intl';
+import { CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
+import { List } from 'react-virtualized/dist/commonjs/List';
+import { typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
+import { Box, Text } from '@atlaskit/primitives/compiled';
+import { createTypeAheadRowRenderer } from './createTypeAheadRowRenderer';
+import { getTypeAheadGlobalViewMoreId } from './getTypeAheadGlobalViewMoreId';
+import { PassThrough } from './PassThrough';
+import { TypeAheadMenuFooter } from './TypeAheadMenuFooter';
+const LIST_WIDTH = 340;
+const ESTIMATED_ROW_HEIGHT = 56;
+const MENU_FOOTER_HEIGHT = 48;
+export const TypeAheadMenuRenderer = ({
+  Item,
+  listLabel,
+  listId,
+  maxHeight,
+  model,
+  onItemHover,
+  selectedItemIndex
+}) => {
+  var _model$root$component;
+  const intl = useIntl();
+  const listRef = useRef(null);
+  const rows = useMemo(() => model.sections.flat(), [model.sections]);
+  const cache = useMemo(() => new CellMeasurerCache({
+    defaultHeight: ESTIMATED_ROW_HEIGHT,
+    fixedWidth: true
+  }), []);
+  const itemIndexByRowIndex = useMemo(() => {
+    const indexes = new Map();
+    let itemIndex = 0;
+    rows.forEach((registration, rowIndex) => {
+      if (registration.type === 'menu-item') {
+        indexes.set(rowIndex, itemIndex++);
+      }
+    });
+    return indexes;
+  }, [rows]);
+  const selectedRowIndex = useMemo(() => {
+    for (const [rowIndex, itemIndex] of itemIndexByRowIndex) {
+      if (itemIndex === selectedItemIndex) {
+        return rowIndex;
+      }
+    }
+    return -1;
+  }, [itemIndexByRowIndex, selectedItemIndex]);
+  const rowKeySignature = useMemo(() => rows.map(({
+    key,
+    type
+  }) => `${type}:${key}`).join('\0'), [rows]);
+  useLayoutEffect(() => {
+    var _listRef$current, _listRef$current2;
+    cache.clearAll();
+    (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.recomputeRowHeights();
+    (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 ? void 0 : _listRef$current2.scrollToPosition(0);
+  }, [cache, rowKeySignature]);
+  useLayoutEffect(() => {
+    if (selectedRowIndex >= 0) {
+      var _listRef$current3;
+      (_listRef$current3 = listRef.current) === null || _listRef$current3 === void 0 ? void 0 : _listRef$current3.scrollToRow(selectedRowIndex);
+    }
+  }, [selectedRowIndex]);
+  const renderRow = createTypeAheadRowRenderer({
+    cache,
+    itemIndexByRowIndex,
+    Item,
+    listId,
+    onItemHover,
+    rows,
+    selectedItemIndex
+  });
+  const footerItemIndex = itemIndexByRowIndex.size;
+  const onFooterItemHover = useCallback(() => onItemHover(footerItemIndex), [footerItemIndex, onItemHover]);
+  if (!model.root) {
+    return null;
+  }
+  const RootComponent = (_model$root$component = model.root.component) !== null && _model$root$component !== void 0 ? _model$root$component : PassThrough;
+  const listMaxHeight = Math.max(0, maxHeight - (model.footer ? MENU_FOOTER_HEIGHT : 0));
+  return /*#__PURE__*/React.createElement(RootComponent, null, /*#__PURE__*/React.createElement(Box, {
+    "aria-label": intl.formatMessage(listLabel),
+    id: listId,
+    role: "listbox"
+  }, rows.length === 0 ? /*#__PURE__*/React.createElement(Box, {
+    paddingBlock: "space.150",
+    paddingInline: "space.250"
+  }, /*#__PURE__*/React.createElement(Text, {
+    align: "center",
+    as: "p"
+  }, intl.formatMessage(typeAheadListMessages.emptySearchResults))) : /*#__PURE__*/React.createElement(List, {
+    containerRole: "presentation",
+    height: Math.min(rows.length * ESTIMATED_ROW_HEIGHT, listMaxHeight),
+    overscanRowCount: 3,
+    ref: listRef,
+    role: "presentation",
+    rowCount: rows.length,
+    rowHeight: cache.rowHeight,
+    rowRenderer: renderRow,
+    scrollToAlignment: "auto",
+    width: LIST_WIDTH
+  }), model.footer && /*#__PURE__*/React.createElement(TypeAheadMenuFooter, {
+    id: getTypeAheadGlobalViewMoreId(listId),
+    isSelected: selectedItemIndex === footerItemIndex,
+    Item: Item,
+    onMouseMove: onFooterItemHover,
+    registration: model.footer
+  })));
+};

package/dist/es2019/ui/registered-menu/TypeAheadSectionRow.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { PassThrough } from './PassThrough';
+export const TypeAheadSectionRow = ({
+  registration
+}) => {
+  var _registration$compone;
+  const Component = (_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : PassThrough;
+  return /*#__PURE__*/React.createElement(Component, null, null);
+};

package/dist/es2019/ui/registered-menu/buildTypeAheadMenuModel.js

@@ -1,24 +1,45 @@
+import { isMenuFooterSectionKey } from '@atlaskit/editor-common/type-ahead-is-menu-footer-section-key';
+import { isSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-is-section-overflow-item-key';
 import { resolveSurface, willComponentRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
-export const buildTypeAheadMenuModel = (components, rootComponent) => {
+export const buildTypeAheadMenuModel = (components, rootComponent, sectionOverflowLimit) => {
   const {
     root,
     childrenMap,
     topLevelChildren
   } = resolveSurface(components, rootComponent);
-  const items = [];
+  const sections = [];
+  let footer;
   for (const section of topLevelChildren !== null && topLevelChildren !== void 0 ? topLevelChildren : []) {
+    var _childrenMap$get;
     if (section.type !== 'menu-section' || !willComponentRender(section, childrenMap)) {
       continue;
     }
-    for (const child of (_childrenMap$get = childrenMap.get(section.key)) !== null && _childrenMap$get !== void 0 ? _childrenMap$get : []) {
-      var _childrenMap$get;
-      if (child.type === 'menu-item' && willComponentRender(child, childrenMap)) {
-        items.push(child);
+    const children = (_childrenMap$get = childrenMap.get(section.key)) !== null && _childrenMap$get !== void 0 ? _childrenMap$get : [];
+    if (isMenuFooterSectionKey(section.key)) {
+      footer = children.find(child => child.type === 'menu-item' && willComponentRender(child, childrenMap));
+      continue;
+    }
+    let viewMoreItem;
+    for (let index = children.length - 1; index >= 0; index--) {
+      const child = children[index];
+      if ((child === null || child === void 0 ? void 0 : child.type) === 'menu-item' && isSectionOverflowItemKey(child.key) && willComponentRender(child, childrenMap)) {
+        viewMoreItem = child;
+        break;
       }
     }
+    const items = children.filter(child => child.type === 'menu-item' && !isSectionOverflowItemKey(child.key) && willComponentRender(child, childrenMap));
+    if (items.length === 0) {
+      continue;
+    }
+    if (sectionOverflowLimit !== undefined && viewMoreItem !== undefined && items.length > sectionOverflowLimit) {
+      sections.push([section, ...items.slice(0, sectionOverflowLimit), viewMoreItem]);
+      continue;
+    }
+    sections.push([section, ...items]);
   }
   return {
-    items,
-    root
+    footer,
+    root,
+    sections
   };
 };

package/dist/es2019/ui/registered-menu/createTypeAheadRowRenderer.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { CellMeasurer } from 'react-virtualized/dist/commonjs/CellMeasurer';
+import { ListRow } from '../ListRow';
+import { TypeAheadItemRow } from './TypeAheadItemRow';
+import { TypeAheadSectionRow } from './TypeAheadSectionRow';
+const noOp = () => {};
+export const createTypeAheadRowRenderer = ({
+  cache,
+  itemIndexByRowIndex,
+  Item,
+  listId,
+  onItemHover,
+  rows,
+  selectedItemIndex
+}) => ({
+  index,
+  key,
+  parent,
+  style,
+  isScrolling,
+  isVisible
+}) => {
+  const registration = rows[index];
+  if (!registration) {
+    return null;
+  }
+  const itemIndex = itemIndexByRowIndex.get(index);
+  return /*#__PURE__*/React.createElement(CellMeasurer, {
+    key: key,
+    cache: cache,
+    parent: parent,
+    columnIndex: 0,
+    rowIndex: index
+  }, ({
+    measure
+  }) => /*#__PURE__*/React.createElement(ListRow, {
+    index: index,
+    isScrolling: isScrolling,
+    isVisible: isVisible,
+    measure: measure,
+    onMouseMove: noOp,
+    style: style
+  }, registration.type === 'menu-section' ? /*#__PURE__*/React.createElement(TypeAheadSectionRow, {
+    registration: registration
+  }) : /*#__PURE__*/React.createElement(TypeAheadItemRow, {
+    Item: Item,
+    isSelected: itemIndex === selectedItemIndex,
+    itemIndex: itemIndex !== null && itemIndex !== void 0 ? itemIndex : 0,
+    listId: listId,
+    onItemHover: onItemHover,
+    registration: registration,
+    rowIndex: index
+  })));
+};

package/dist/es2019/ui/registered-menu/getTypeAheadGlobalViewMoreId.js

@@ -0,0 +1 @@
+export const getTypeAheadGlobalViewMoreId = listId => `${listId}-view-all`;

package/dist/es2019/ui/registered-menu/quick-insert/TypeAheadQuickInsertItem.js

@@ -5,20 +5,19 @@ import { PassThrough } from '../PassThrough';
 export const TypeAheadQuickInsertItem = ({
   id,
   isSelected,
-  onMouseMove,
   registration
 }) => {
   var _registration$compone;
   const quickInsertContext = useQuickInsertContext();
   const Component = (_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : PassThrough;
   const contextValue = useMemo(() => ({
-    ...quickInsertContext,
+    editorView: quickInsertContext.editorView,
     item: {
       id,
-      isSelected,
-      onMouseMove
-    }
-  }), [id, isSelected, onMouseMove, quickInsertContext]);
+      isSelected
+    },
+    select: quickInsertContext.select
+  }), [id, isSelected, quickInsertContext]);
   return /*#__PURE__*/React.createElement(QuickInsertProvider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(Component, null, null));

package/dist/esm/ui/registered-menu/RegisteredTypeAheadMenu.compiled.css

@@ -0,0 +1,6 @@
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
+._18m915vq{overflow-y:hidden}
+._1bsb5x59{width:340px}
+._1reo15vq{overflow-x:hidden}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}