@atlaskit/editor-plugin-quick-insert 29.0.4 → 30.0.1

package/dist/es2019/ui/RegistryElementBrowser/model.js

@@ -10,19 +10,17 @@ const compareRanks = (left, right) => {
   }
   return 0;
 };
-const isVisible = registration => {
-  var _registration$isHidde;
-  return ((_registration$isHidde = registration.isHidden) === null || _registration$isHidde === void 0 ? void 0 : _registration$isHidde.call(registration)) !== true;
-};
-const getChildren = (components, parentKey) => components.filter(component => {
-  var _component$parents;
-  return isVisible(component) && ((_component$parents = component.parents) === null || _component$parents === void 0 ? void 0 : _component$parents.some(parent => parent.key === parentKey));
+const getChildren = (components, parentKey, surfaceContext) => components.filter(component => {
+  var _component$parents, _component$isHidden;
+  return ((_component$parents = component.parents) === null || _component$parents === void 0 ? void 0 : _component$parents.some(parent => parent.key === parentKey)) && ((_component$isHidden = component.isHidden) === null || _component$isHidden === void 0 ? void 0 : _component$isHidden.call(component, {
+    surfaceContext
+  })) !== true;
 });
 const getParentRank = (registration, parentKey) => {
   var _registration$parents, _registration$parents2, _registration$parents3;
   return (_registration$parents = (_registration$parents2 = registration.parents) === null || _registration$parents2 === void 0 ? void 0 : (_registration$parents3 = _registration$parents2.find(parent => parent.key === parentKey)) === null || _registration$parents3 === void 0 ? void 0 : _registration$parents3.rank) !== null && _registration$parents !== void 0 ? _registration$parents : Number.MAX_SAFE_INTEGER;
 };
-const getDescendantItems = (components, parentKey, ancestorRanks, sectionKey) => getChildren(components, parentKey).flatMap(component => {
+const getDescendantItems = (components, parentKey, ancestorRanks, sectionKey, surfaceContext) => getChildren(components, parentKey, surfaceContext).flatMap(component => {
   const ranks = [...ancestorRanks, getParentRank(component, parentKey)];
   if (component.type === 'menu-item') {
     return component.component ? [{
@@ -31,7 +29,7 @@ const getDescendantItems = (components, parentKey, ancestorRanks, sectionKey) =>
       sectionKeys: [sectionKey]
     }] : [];
   }
-  return getDescendantItems(components, component.key, ranks, sectionKey);
+  return getDescendantItems(components, component.key, ranks, sectionKey, surfaceContext);
 });
 
 /**
@@ -42,17 +40,18 @@ export const createRegistryElementBrowserModel = (components, {
   footerKey,
   overflowKeys,
   recommendedSectionKey,
-  rootKey
+  rootKey,
+  surfaceContext
 }) => {
   const excludedKeys = new Set([footerKey, recommendedSectionKey, ...overflowKeys]);
-  const visibleComponents = components.filter(component => isVisible(component) && !excludedKeys.has(component.key));
-  const sections = getChildren(visibleComponents, rootKey).filter(component => component.type === 'menu-section').map(section => ({
+  const visibleComponents = components.filter(component => !excludedKeys.has(component.key));
+  const sections = getChildren(visibleComponents, rootKey, surfaceContext).filter(component => component.type === 'menu-section').map(section => ({
     key: section.key,
     rank: getParentRank(section, rootKey)
   })).sort((left, right) => left.rank - right.rank);
   const itemByKey = new Map();
   sections.forEach(section => {
-    getDescendantItems(visibleComponents, section.key, [section.rank], section.key).forEach(item => {
+    getDescendantItems(visibleComponents, section.key, [section.rank], section.key, surfaceContext).forEach(item => {
       const existing = itemByKey.get(item.registration.key);
       if (!existing) {
         itemByKey.set(item.registration.key, item);
@@ -97,18 +96,30 @@ export const getRegistryElementBrowserItems = ({
   if (!normalizedQuery) {
     return itemsWithDescriptions;
   }
-  return itemsWithDescriptions.flatMap(item => {
+  const matches = itemsWithDescriptions.flatMap(item => {
     var _item$registration$ma, _item$registration;
     const result = (_item$registration$ma = (_item$registration = item.registration).match) === null || _item$registration$ma === void 0 ? void 0 : _item$registration$ma.call(_item$registration, {
       formatMessage,
+      itemKey: item.registration.key,
       query: normalizedQuery
     });
     return result ? [{
       ...item,
+      priorityGroup: result.priorityGroup !== undefined && Number.isFinite(result.priorityGroup) ? result.priorityGroup : undefined,
       score: Math.min(1, Math.max(0, result.score))
     }] : [];
-  }).sort((left, right) => {
+  });
+  const prioritized = matches.filter(({
+    priorityGroup
+  }) => priorityGroup !== undefined);
+  const unprioritized = matches.filter(({
+    priorityGroup
+  }) => priorityGroup === undefined);
+  return [...prioritized.sort((left, right) => {
+    var _right$priorityGroup, _left$priorityGroup;
+    return ((_right$priorityGroup = right.priorityGroup) !== null && _right$priorityGroup !== void 0 ? _right$priorityGroup : 0) - ((_left$priorityGroup = left.priorityGroup) !== null && _left$priorityGroup !== void 0 ? _left$priorityGroup : 0) || left.score - right.score || compareRanks(left.ranks, right.ranks) || left.registration.key.localeCompare(right.registration.key);
+  }), ...unprioritized.sort((left, right) => {
     var _left$ranks$, _right$ranks$;
     return ((_left$ranks$ = left.ranks[0]) !== null && _left$ranks$ !== void 0 ? _left$ranks$ : 0) - ((_right$ranks$ = right.ranks[0]) !== null && _right$ranks$ !== void 0 ? _right$ranks$ : 0) || left.score - right.score || compareRanks(left.ranks, right.ranks) || left.registration.key.localeCompare(right.registration.key);
-  });
+  })];
 };

package/dist/es2019/ui/getQuickInsertComponents.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { BLOCK_TEMPLATES_SECTION, CREATE_SECTION, DATA_AND_CHARTS_SECTION, EMBED_SECTION, MEDIA_SECTION, MENU, OTHER_SECTION, RECOMMENDED_SECTION, ROVO_SECTION, STRUCTURE_SECTION, TEXT_FORMATTING_SECTION, VIEW_ALL_ELEMENTS_MENU_ITEM } from '@atlaskit/editor-common/quick-insert/keys';
-import { QuickInsertMenuRoot } from '@atlaskit/editor-common/quick-insert/menu-root';
-import { QuickInsertMenuSection } from '@atlaskit/editor-common/quick-insert/menu-section';
 import { messages } from '@atlaskit/editor-common/quick-insert/messages';
 import { CATEGORY_VIEW_MORE_RANK, QUICK_INSERT_MENU_RANK } from '@atlaskit/editor-common/quick-insert/rank';
 import { getMenuFooterSectionKey } from '@atlaskit/editor-common/type-ahead-get-menu-footer-section-key';
@@ -11,6 +9,8 @@ import { createRecommendedSnapshotCache, MAX_RECOMMENDED_ITEMS, RECOMMENDED_SLOT
 import { QuickInsertMenuFooterItem } from './QuickInsertMenuFooterItem';
 import { QuickInsertRecommendedSlot } from './QuickInsertRecommendedSlot';
 import { QuickInsertSectionOverflowMenuItem } from './QuickInsertSectionOverflowMenuItem';
+import QuickInsertMenuRoot from './registered-menu/QuickInsertMenuRoot';
+import { QuickInsertMenuSection } from './registered-menu/QuickInsertMenuSection';
 const categories = [{
   message: messages.categoryRecommended,
   section: RECOMMENDED_SECTION
@@ -59,7 +59,10 @@ export const getQuickInsertComponents = ({
   api,
   includeElementBrowserItems,
   isRecommendedItem,
-  maxRecommendedItems
+  maxRecommendedItems,
+  getItemRank,
+  emptyStateHandler,
+  fireAnalyticsEvent
 }) => {
   const recommendedSnapshot = createRecommendedSnapshotCache({
     api,
@@ -80,16 +83,27 @@ export const getQuickInsertComponents = ({
     isHidden: ({
       surfaceContext
     } = {}) => !recommendedSnapshot.getSnapshot(surfaceContext)[index],
-    component: props => /*#__PURE__*/React.createElement(QuickInsertRecommendedSlot, {
-      ...props,
-      index,
+    component: ({
+      children,
+      parents,
+      surfaceContext
+    }) => /*#__PURE__*/React.createElement(QuickInsertRecommendedSlot, {
+      parents: parents,
+      surfaceContext: surfaceContext,
+      index: index,
       getSnapshot: recommendedSnapshot.getSnapshot
-    })
+    }, children)
   }));
   return [{
     key: MENU.key,
     type: MENU.type,
-    component: QuickInsertMenuRoot
+    component: ({
+      children
+    }) => /*#__PURE__*/React.createElement(QuickInsertMenuRoot, {
+      getItemRank: getItemRank,
+      emptyStateHandler: emptyStateHandler,
+      fireAnalyticsEvent: fireAnalyticsEvent
+    }, children)
   }, ...recommendedSlots, ...categories.flatMap(({
     message,
     section
@@ -114,7 +128,7 @@ export const getQuickInsertComponents = ({
       rank: CATEGORY_VIEW_MORE_RANK
     }],
     component: () => /*#__PURE__*/React.createElement(QuickInsertSectionOverflowMenuItem, {
-      api,
+      api: api,
       category: section.key
     })
   }] : [])]), ...(includeElementBrowserItems ? [{
@@ -134,7 +148,7 @@ export const getQuickInsertComponents = ({
       rank: 100
     }],
     component: () => /*#__PURE__*/React.createElement(QuickInsertMenuFooterItem, {
-      api
+      api: api
     })
   }] : [])];
 };

package/dist/es2019/ui/getRecommendedComponents.js

@@ -2,9 +2,9 @@ import { logException } from '@atlaskit/editor-common/monitoring/error';
 import { quickInsertProviderMenuItemKey } from '@atlaskit/editor-common/quick-insert/get-provider-menu-item-key';
 import { defaultIsRecommendedItem } from '@atlaskit/editor-common/quick-insert/is-recommended-item';
 import { MENU } from '@atlaskit/editor-common/quick-insert/keys';
+import { REGISTERED_MENU_SURFACE_CONTEXT } from '@atlaskit/editor-common/registered-menu/surface-context';
 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 { TYPE_AHEAD_SURFACE_CONTEXT } from '@atlaskit/editor-common/type-ahead-surface-context';
 export const MAX_RECOMMENDED_ITEMS = 5;
 export const RECOMMENDED_SLOT_KEY_PREFIX = 'quick-insert-recommended-slot-';
 export const isRecommendedSlotKey = key => key.startsWith(RECOMMENDED_SLOT_KEY_PREFIX);
@@ -68,7 +68,7 @@ export const createRecommendedSnapshotCache = ({
   let snapshot;
   const getSnapshot = surfaceContext => {
     var _surfaceContext$get, _snapshot;
-    const menuOpenId = surfaceContext === null || surfaceContext === void 0 ? void 0 : (_surfaceContext$get = surfaceContext.get(TYPE_AHEAD_SURFACE_CONTEXT)) === null || _surfaceContext$get === void 0 ? void 0 : _surfaceContext$get.menuOpenId;
+    const menuOpenId = surfaceContext === null || surfaceContext === void 0 ? void 0 : (_surfaceContext$get = surfaceContext.get(REGISTERED_MENU_SURFACE_CONTEXT)) === null || _surfaceContext$get === void 0 ? void 0 : _surfaceContext$get.menuOpenId;
     if (!surfaceContext || !menuOpenId) {
       return [];
     }

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

@@ -0,0 +1,11 @@
+._zulp1ejb{gap:var(--ds-space-300,24px)}
+._1rjcoahv{padding-block:var(--ds-space-600,3pc)}
+._1rjcxy5q{padding-block:var(--ds-space-400,2pc)}._1bah1h6o{justify-content:center}
+._1bsb1mcy{width:57px}
+._1bsb1osq{width:100%}
+._1bsbtudo{width:76px}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1h39{height:63px}
+._4t3io7ol{height:84px}

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

@@ -0,0 +1,47 @@
+/* QuickInsertEmptyState.tsx generated by @compiled/babel-plugin v3.0.2 */
+import "./QuickInsertEmptyState.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { lazy, LazySuspense } from 'react-loosely-lazy';
+import { cx } from '@atlaskit/css';
+import { messages } from '@atlaskit/editor-common/quick-insert/messages';
+import { Box } from '@atlaskit/primitives/compiled/box';
+import { Text } from '@atlaskit/primitives/compiled/text';
+const NoResultsIllustration = lazy(() => import( /* webpackChunkName: "@atlaskit-internal_editor-quick-insert-no-results" */
+'./assets/no-results').then(module => module.default));
+const styles = {
+  base: "_zulp1ejb _4cvr1h6o _1e0c1txw _2lx21bp4 _1bah1h6o _1bsb1osq",
+  compact: "_1rjcxy5q",
+  spacious: "_1rjcoahv",
+  inlineIllustration: "_4t3i1h39 _1bsb1mcy",
+  fullIllustration: "_4t3io7ol _1bsbtudo"
+};
+export const QuickInsertEmptyState = ({
+  mode,
+  spacing = mode === 'full' ? 'spacious' : 'compact'
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const illustrationSize = mode === 'full' ? {
+    width: 76,
+    height: 84
+  } : {
+    width: 57,
+    height: 63
+  };
+  return /*#__PURE__*/React.createElement(Box, {
+    testId: "quick-insert-empty-state",
+    xcss: cx(styles.base, styles[spacing])
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: mode === 'full' ? styles.fullIllustration : styles.inlineIllustration
+  }, /*#__PURE__*/React.createElement(LazySuspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(NoResultsIllustration, {
+    width: illustrationSize.width,
+    height: illustrationSize.height
+  }))), /*#__PURE__*/React.createElement(Text, {
+    align: "center"
+  }, formatMessage(messages.noSearchResults)));
+};

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

@@ -0,0 +1,191 @@
+import React, { useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics/types/enums';
+import { toolbarInsertBlockMessages } from '@atlaskit/editor-common/messages/insert-block';
+import { QuickInsertProvider } from '@atlaskit/editor-common/quick-insert/provider';
+import { useRegisteredMenuContext } from '@atlaskit/editor-common/registered-menu/context';
+import { REGISTERED_MENU_SURFACE_CONTEXT } from '@atlaskit/editor-common/registered-menu/surface-context';
+import { useRegisteredMenu } from '@atlaskit/editor-common/registered-menu/use-registered-menu';
+import { isSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-is-section-overflow-item-key';
+import { typeAheadListMessages } from '@atlaskit/editor-common/type-ahead/messages';
+import MenuGroup from '@atlaskit/menu/menu-group';
+import { getQuickInsertMenuModel } from './get-quick-insert-menu-model';
+import { getQuickInsertMenuItemId } from './getQuickInsertMenuItemId';
+import { RegisteredQuickInsertMenuItem } from './RegisteredQuickInsertMenuItem';
+import { selectQuickInsertCategoryItems } from './selectQuickInsertCategoryItems';
+import { ToolbarQuickInsertMenu } from './ToolbarQuickInsertMenu';
+import { TypeAheadQuickInsertMenu } from './TypeAheadQuickInsertMenu';
+import { useQuickInsertSearchAnalytics } from './useQuickInsertSearchAnalytics';
+const DEFAULT_MENU_MAX_HEIGHT = 480;
+const isImeEnter = event => event.isComposing || event.keyCode === 229;
+const QuickInsertMenuRoot = ({
+  emptyStateHandler,
+  fireAnalyticsEvent,
+  getItemRank
+}) => {
+  var _surfaceContext$get, _registeredMenu$maxHe;
+  const registeredMenu = useRegisteredMenuContext();
+  const {
+    query = '',
+    select: selectFromHost,
+    surfaceContext
+  } = registeredMenu;
+  const surface = (_surfaceContext$get = surfaceContext.get(REGISTERED_MENU_SURFACE_CONTEXT)) === null || _surfaceContext$get === void 0 ? void 0 : _surfaceContext$get.surface;
+  if (!selectFromHost || !surface || surface === 'element-browser') {
+    throw new Error('QuickInsertMenuRoot requires a selection action and registered menu surface');
+  }
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    components,
+    getItemRank: runtimeItemRank,
+    rootComponent
+  } = registeredMenu;
+  const model = useMemo(() => getQuickInsertMenuModel({
+    components,
+    formatMessage,
+    getItemRank: runtimeItemRank !== null && runtimeItemRank !== void 0 ? runtimeItemRank : getItemRank,
+    query,
+    rootComponent,
+    selectCategoryItems: components.some(({
+      key
+    }) => isSectionOverflowItemKey(key)) ? selectQuickInsertCategoryItems : undefined,
+    surfaceContext
+  }), [components, formatMessage, getItemRank, query, rootComponent, runtimeItemRank, surfaceContext]);
+  const resultCount = useMemo(() => model.sections.reduce((count, [, ...items]) => count + items.filter(({
+    key
+  }) => !isSectionOverflowItemKey(key)).length, 0), [model.sections]);
+  const flushSearchAnalytics = useQuickInsertSearchAnalytics({
+    surface,
+    fireAnalyticsEvent,
+    query,
+    resultCount
+  });
+  const selectItem = useCallback(selection => {
+    flushSearchAnalytics();
+    selectFromHost(insert => selection({
+      insert,
+      source: surface === 'toolbar' ? INPUT_METHOD.INSERT_MENU : INPUT_METHOD.QUICK_INSERT
+    }));
+  }, [flushSearchAnalytics, selectFromHost, surface]);
+  const menuContextValue = useMemo(() => ({
+    editorView: registeredMenu.editorView,
+    isOffline: registeredMenu.isOffline,
+    popupsMountPoint: registeredMenu.portalMountPoint,
+    select: selectItem,
+    surfaceContext: registeredMenu.surfaceContext
+  }), [registeredMenu.editorView, registeredMenu.isOffline, registeredMenu.portalMountPoint, registeredMenu.surfaceContext, selectItem]);
+  const listLabel = formatMessage(surface === 'typeahead' ? typeAheadListMessages.quickInsertInputLabel : toolbarInsertBlockMessages.insertMenu);
+  const {
+    rows,
+    selectableItems,
+    selectedItemIndex,
+    activeItemKey,
+    ...listEvents
+  } = useRegisteredMenu({
+    model,
+    resetKey: query
+  });
+  const listId = useId();
+  const [renderedItems, setRenderedItems] = useState({
+    startIndex: -1,
+    stopIndex: -1
+  });
+  const menuRef = useRef(null);
+  const maxHeight = (_registeredMenu$maxHe = registeredMenu.maxHeight) !== null && _registeredMenu$maxHe !== void 0 ? _registeredMenu$maxHe : DEFAULT_MENU_MAX_HEIGHT;
+  const itemCount = selectableItems.length + (model.footer ? 1 : 0);
+  const activeItemId = selectedItemIndex >= 0 && selectedItemIndex < itemCount ? getQuickInsertMenuItemId(listId, selectedItemIndex) : undefined;
+  const isActiveItemMounted = selectedItemIndex >= 0 && selectedItemIndex < itemCount && (selectedItemIndex >= renderedItems.startIndex && selectedItemIndex <= renderedItems.stopIndex || Boolean(model.footer) && selectedItemIndex === itemCount - 1);
+  const selectActiveItem = useCallback(() => {
+    if (isActiveItemMounted && activeItemId) {
+      var _menuRef$current, _menuRef$current$owne;
+      (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : (_menuRef$current$owne = _menuRef$current.ownerDocument.getElementById(activeItemId)) === null || _menuRef$current$owne === void 0 ? void 0 : _menuRef$current$owne.click();
+    }
+  }, [activeItemId, isActiveItemMounted]);
+  const onMenuKeyDown = useCallback(event => {
+    if (event.key === 'ArrowDown') {
+      listEvents.selectNext();
+      return true;
+    }
+    if (event.key === 'ArrowUp') {
+      listEvents.selectPrevious();
+      return true;
+    }
+    if (event.key === 'Enter') {
+      if (isImeEnter(event)) {
+        return false;
+      }
+      selectActiveItem();
+      return true;
+    }
+    return false;
+  }, [listEvents.selectNext, listEvents.selectPrevious, selectActiveItem]);
+  const containsTarget = useCallback(target => {
+    var _menuRef$current2;
+    return Boolean((_menuRef$current2 = menuRef.current) === null || _menuRef$current2 === void 0 ? void 0 : _menuRef$current2.contains(target));
+  }, []);
+  const interaction = useMemo(() => ({
+    activeDescendantId: isActiveItemMounted ? activeItemId : undefined,
+    containsTarget,
+    expanded: itemCount > 0,
+    label: listLabel,
+    listId,
+    onKeyDown: onMenuKeyDown,
+    onClose: flushSearchAnalytics,
+    optionCount: itemCount,
+    selectNext: listEvents.selectNext,
+    selectPrevious: listEvents.selectPrevious
+  }), [activeItemId, containsTarget, flushSearchAnalytics, isActiveItemMounted, itemCount, listId, listLabel, listEvents.selectNext, listEvents.selectPrevious, onMenuKeyDown]);
+  useLayoutEffect(() => {
+    if (!model.root) {
+      return;
+    }
+    return registeredMenu.registerInteraction(interaction);
+  }, [model.root, interaction, registeredMenu.registerInteraction]);
+  if (!model.root) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(QuickInsertProvider, {
+    value: menuContextValue
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: menuRef
+  }, /*#__PURE__*/React.createElement(MenuGroup, null, surface === 'typeahead' ? /*#__PURE__*/React.createElement(TypeAheadQuickInsertMenu, {
+    Item: RegisteredQuickInsertMenuItem,
+    activeItemKey: activeItemKey,
+    hasScrollPadding: true,
+    itemCount: itemCount,
+    listId: listId,
+    listLabel: listLabel,
+    maxHeight: maxHeight,
+    model: model,
+    onItemBlur: listEvents.onItemBlur,
+    onItemFocus: listEvents.onItemFocus,
+    onItemHover: listEvents.onItemHover,
+    onItemLeave: listEvents.onItemLeave,
+    onItemVisibilityChange: listEvents.onItemVisibilityChange,
+    onRenderedItemsChange: setRenderedItems,
+    query: query,
+    rows: rows,
+    selectedItemIndex: selectedItemIndex
+  }) : /*#__PURE__*/React.createElement(ToolbarQuickInsertMenu, {
+    Item: RegisteredQuickInsertMenuItem,
+    activePreviewItemKey: activeItemKey,
+    emptyStateHandler: emptyStateHandler,
+    itemCount: itemCount,
+    listId: listId,
+    listLabel: listLabel,
+    maxHeight: maxHeight,
+    model: model,
+    onItemBlur: listEvents.onItemBlur,
+    onItemFocus: listEvents.onItemFocus,
+    onItemHover: listEvents.onItemHover,
+    onItemLeave: listEvents.onItemLeave,
+    onItemVisibilityChange: listEvents.onItemVisibilityChange,
+    onRenderedItemsChange: setRenderedItems,
+    query: query,
+    rows: rows,
+    selectedItemIndex: selectedItemIndex
+  }))));
+};
+export default QuickInsertMenuRoot;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import HeadingItem from '@atlaskit/menu/heading-item';
+import { Box } from '@atlaskit/primitives/compiled/box';
+export const QuickInsertMenuSection = ({
+  children,
+  title
+}) => /*#__PURE__*/React.createElement(Box, {
+  role: "group",
+  "aria-label": title
+}, /*#__PURE__*/React.createElement(Box, {
+  paddingBlockStart: "space.150",
+  paddingBlockEnd: "space.050"
+}, /*#__PURE__*/React.createElement(HeadingItem, {
+  "aria-hidden": true
+}, title)), children);

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { messages } from '@atlaskit/editor-common/quick-insert/messages';
+import { QuickInsertMenuSection } from './QuickInsertMenuSection';
+export const QuickInsertSearchResultsSection = ({
+  children
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(QuickInsertMenuSection, {
+    title: formatMessage(messages.searchResults)
+  }, children);
+};

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

@@ -0,0 +1,34 @@
+import React, { useMemo } from 'react';
+import { QuickInsertProvider } from '@atlaskit/editor-common/quick-insert/provider';
+import { useQuickInsertContext } from '@atlaskit/editor-common/quick-insert/use-quick-insert-context';
+export const RegisteredQuickInsertMenuItem = ({
+  id,
+  isSelected,
+  isActive,
+  registration
+}) => {
+  var _registration$compone;
+  const {
+    editorView,
+    isOffline,
+    popupsMountPoint,
+    select,
+    surfaceContext
+  } = useQuickInsertContext();
+  const value = useMemo(() => ({
+    editorView,
+    isOffline,
+    item: {
+      id,
+      isSelected,
+      isPreviewActive: isActive
+    },
+    popupsMountPoint,
+    select,
+    surfaceContext
+  }), [editorView, isOffline, popupsMountPoint, select, surfaceContext, isActive, id, isSelected]);
+  const Component = (_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : React.Fragment;
+  return /*#__PURE__*/React.createElement(QuickInsertProvider, {
+    value: value
+  }, /*#__PURE__*/React.createElement(Component, null, null));
+};

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

@@ -0,0 +1,11 @@
+._15a5nqa1{border-top-style:solid}
+._16jlkb7n{flex-grow:1}
+._18m91wug{overflow-y:auto}
+._1e0c1txw{display:flex}
+._1i531l7x{border-top-color:var(--ds-border,#0b120e24)}
+._1o9zidpf{flex-shrink:0}
+._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
+._1tkeidpf{min-height:0}
+._2lx21bp4{flex-direction:column}
+._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
+._uwhke4h9{border-top-width:var(--ds-border-width,1px)}

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

@@ -0,0 +1,116 @@
+/* ToolbarQuickInsertMenu.tsx generated by @compiled/babel-plugin v3.0.2 */
+import "./ToolbarQuickInsertMenu.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback } from 'react';
+import { RegisteredMenuList } from '@atlaskit/editor-common/registered-menu/list';
+import { Box } from '@atlaskit/primitives/compiled/box';
+import { getQuickInsertMenuItemId } from './getQuickInsertMenuItemId';
+import { QuickInsertEmptyState } from './QuickInsertEmptyState';
+const MENU_FOOTER_HEIGHT = 45;
+const LIST_WIDTH = 350;
+const styles = {
+  content: "_1e0c1txw _2lx21bp4 _1tkeidpf",
+  scrollable: "_16jlkb7n _1tkeidpf _18m91wug",
+  footer: "_1o9zidpf",
+  externalControls: "_1i531l7x _15a5nqa1 _uwhke4h9 _1q51u2gc _85i5u2gc",
+  footerDivider: "_1i531l7x _15a5nqa1 _uwhke4h9 _1o9zidpf"
+};
+export const ToolbarQuickInsertMenu = ({
+  Item,
+  model,
+  emptyStateHandler,
+  listLabel,
+  activePreviewItemKey,
+  itemCount,
+  listId,
+  maxHeight,
+  rows,
+  onItemBlur,
+  onItemFocus,
+  onItemHover,
+  onItemLeave,
+  onItemVisibilityChange,
+  onRenderedItemsChange,
+  query,
+  selectedItemIndex
+}) => {
+  const footerItemIndex = itemCount - 1;
+  const footerItemId = getQuickInsertMenuItemId(listId, footerItemIndex);
+  const isEmptySearch = query !== '' && model.sections.length === 0;
+  const hasNoSearchResults = model.sections.length === 0 && model.fallbackItems.length === 0;
+  const externalControls = isEmptySearch ? emptyStateHandler === null || emptyStateHandler === void 0 ? void 0 : emptyStateHandler({
+    mode: 'inline',
+    searchTerm: query,
+    showNoResultsMessage: false
+  }) : null;
+  const onFooterItemFocus = useCallback(() => onItemFocus(footerItemIndex), [footerItemIndex, onItemFocus]);
+  const onFooterItemHover = useCallback(() => onItemHover(footerItemIndex), [footerItemIndex, onItemHover]);
+  const listMaxHeight = Math.max(0, maxHeight - (model.footer ? MENU_FOOTER_HEIGHT : 0));
+  const contentStyle = {
+    maxHeight: maxHeight
+  };
+  const getItemId = useCallback(({
+    itemIndex
+  }) => getQuickInsertMenuItemId(listId, itemIndex), [listId]);
+  const onScrollableContentScroll = useCallback(event => {
+    if (event.target === event.currentTarget && activePreviewItemKey) {
+      onItemVisibilityChange(activePreviewItemKey, false);
+    }
+  }, [activePreviewItemKey, onItemVisibilityChange]);
+  if (!model.root) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.content,
+    style: contentStyle
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.scrollable,
+    onScroll: onScrollableContentScroll
+  }, /*#__PURE__*/React.createElement(Box, {
+    "aria-label": listLabel,
+    "aria-owns": model.footer ? footerItemId : undefined,
+    id: listId,
+    role: "listbox"
+  }, rows.length > 0 && /*#__PURE__*/React.createElement(RegisteredMenuList, {
+    rows: rows,
+    Item: Item,
+    width: LIST_WIDTH,
+    maxHeight: listMaxHeight,
+    getItemId: getItemId,
+    activeItemKey: activePreviewItemKey,
+    selectedItemIndex: selectedItemIndex,
+    scrollResetKey: query,
+    onItemHover: onItemHover,
+    onItemFocus: onItemFocus,
+    onItemBlur: onItemBlur,
+    onItemLeave: onItemLeave,
+    onItemVisibilityChange: onItemVisibilityChange,
+    onRenderedItemsChange: onRenderedItemsChange,
+    role: "group",
+    tabIndex: null,
+    omitAriaReadonly: true,
+    lastRowPadding: "space.100",
+    scrollTo: "top-on-reset"
+  })), query !== '' && hasNoSearchResults && /*#__PURE__*/React.createElement(QuickInsertEmptyState, {
+    mode: "inline"
+  }), externalControls && /*#__PURE__*/React.createElement(Box, {
+    testId: "registered-insert-menu-external-controls",
+    xcss: styles.externalControls
+  }, externalControls)), model.footer && /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.footer
+  }, /*#__PURE__*/React.createElement(Box, {
+    testId: "registered-insert-menu-footer",
+    xcss: styles.footer
+  }, !isEmptySearch || !hasNoSearchResults || Boolean(externalControls) ? /*#__PURE__*/React.createElement(Box, {
+    "aria-hidden": "true",
+    xcss: styles.footerDivider
+  }) : null, /*#__PURE__*/React.createElement(Box, {
+    onFocus: onFooterItemFocus,
+    onMouseMove: onFooterItemHover
+  }, /*#__PURE__*/React.createElement(Item, {
+    id: footerItemId,
+    isSelected: selectedItemIndex === footerItemIndex,
+    isActive: false,
+    registration: model.footer
+  })))));
+};

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

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