@atlaskit/editor-plugin-quick-insert 27.0.5 → 27.1.0

package/dist/esm/ui/RegistryElementBrowser/RegistryElementBrowser.js

@@ -1,12 +1,16 @@
 /* RegistryElementBrowser.tsx generated by @compiled/babel-plugin v3.0.2 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./RegistryElementBrowser.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import IconButton from '@atlaskit/button/icon/button';
 import { messages } from '@atlaskit/editor-common/quick-insert';
 import { MENU, RECOMMENDED_SECTION } from '@atlaskit/editor-common/quick-insert/keys';
+import { useQuickInsertSearchAnalytics } from '@atlaskit/editor-common/quick-insert/use-search-analytics';
 import { getMenuFooterSectionKey } from '@atlaskit/editor-common/type-ahead-get-menu-footer-section-key';
 import { getSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-get-section-overflow-item-key';
 import Heading from '@atlaskit/heading/heading';
@@ -28,6 +32,7 @@ var categoryColumnGap = "calc(".concat("var(--ds-space-200, 16px)", " + ", "var(
 var browserLayoutStyles = null;
 var headerContentStyles = null;
 var headerSearchStyles = null;
+var EMPTY_ITEMS = [];
 var resultsId = 'registry-element-browser-results';
 var modalTestId = 'registry-element-browser-modal';
 var getRenderedColumnCount = function getRenderedColumnCount(options) {
@@ -39,9 +44,10 @@ var getRenderedColumnCount = function getRenderedColumnCount(options) {
   return nextRowIndex > 0 ? nextRowIndex : options.length;
 };
 export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
-  var _model$fallbackItems$, _model$fallbackItems;
+  var _model$fallbackItems, _model$fallbackItems$, _model$fallbackItems2;
   var components = _ref.components,
     emptyStateHandler = _ref.emptyStateHandler,
+    fireAnalyticsEvent = _ref.fireAnalyticsEvent,
     defaultSection = _ref.defaultSection,
     helpUrl = _ref.helpUrl,
     editorView = _ref.editorView,
@@ -56,8 +62,19 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
     onSelect = _ref.onSelect;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  var model = useMemo(function () {
-    return createRegistryElementBrowserModel(components, {
+  var _useState = useState({
+      query: '',
+      section: defaultSection
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    browserState = _useState2[0],
+    setBrowserState = _useState2[1];
+  var query = browserState.query,
+    section = browserState.section,
+    selectedRegistration = browserState.selectedRegistration;
+  var selectedRegistrationRef = useRef(undefined);
+  var browserModel = useMemo(function () {
+    var model = createRegistryElementBrowserModel(components, {
       footerKey: getMenuFooterSectionKey(MENU.key),
       overflowKeys: new Set(components.filter(function (component) {
         return component.type === 'menu-section';
@@ -67,67 +84,147 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
       recommendedSectionKey: RECOMMENDED_SECTION.key,
       rootKey: MENU.key
     });
-  }, [components]);
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    query = _useState2[0],
-    setQuery = _useState2[1];
-  var _useState3 = useState(function () {
-      return getInitialRegistryElementBrowserSection(model, defaultSection);
-    }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    section = _useState4[0],
-    setSection = _useState4[1];
-  var _useState5 = useState(),
-    _useState6 = _slicedToArray(_useState5, 2),
-    selectedKey = _useState6[0],
-    setSelectedKey = _useState6[1];
+    var effectiveSection = section && model.sections.some(function (_ref2) {
+      var key = _ref2.key;
+      return key === section;
+    }) ? section : undefined;
+    return {
+      model: model,
+      effectiveSection: effectiveSection,
+      items: getRegistryElementBrowserItems({
+        formatMessage: formatMessage,
+        model: model,
+        query: query,
+        section: effectiveSection
+      })
+    };
+  }, [components, formatMessage, query, section]);
+  var model = browserModel.model,
+    effectiveSection = browserModel.effectiveSection,
+    items = browserModel.items;
+  var visibleItems = items.length === 0 && !isLoading && query.trim().length > 0 ? (_model$fallbackItems = model.fallbackItems) !== null && _model$fallbackItems !== void 0 ? _model$fallbackItems : EMPTY_ITEMS : items;
+  var isSelectedRegistrationCurrent = Boolean(selectedRegistration && browserState.selectionIsOffline === isOffline && visibleItems.some(function (_ref3) {
+    var registration = _ref3.registration;
+    return registration === selectedRegistration;
+  }));
+  var selectedKey = isSelectedRegistrationCurrent ? selectedRegistration === null || selectedRegistration === void 0 ? void 0 : selectedRegistration.key : undefined;
+  var invalidSection = Boolean(section && section !== effectiveSection);
+  var invalidSelection = Boolean(selectedRegistration && !isSelectedRegistrationCurrent);
+  if (isOpen && (invalidSection || invalidSelection)) {
+    setBrowserState(_objectSpread(_objectSpread({}, browserState), {}, {
+      section: effectiveSection,
+      selectedRegistration: undefined,
+      selectionIsOffline: undefined,
+      invalidation: {
+        section: invalidSection ? section : undefined,
+        selection: invalidSelection
+      }
+    }));
+  }
   var searchInputRef = useRef(null);
   var selectedCategoryRef = useRef(null);
+  var focusedCategoryRef = useRef();
+  var handledInvalidationRef = useRef(browserState.invalidation);
   var wasOpen = useRef(false);
-  var previousIsOffline = useRef(isOffline);
   useEffect(function () {
     if (isOpen && !wasOpen.current) {
-      setQuery('');
-      setSection(getInitialRegistryElementBrowserSection(model, defaultSection));
-      // This clears local visual state and the parent-held insertion handler together.
-      // eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates
-      setSelectedKey(undefined);
+      selectedRegistrationRef.current = undefined;
+      setBrowserState({
+        query: '',
+        section: getInitialRegistryElementBrowserSection(model, defaultSection),
+        selectedRegistration: undefined
+      });
       onClearSelection();
     }
     wasOpen.current = isOpen;
   }, [defaultSection, isOpen, model, onClearSelection]);
-  var items = useMemo(function () {
-    return getRegistryElementBrowserItems({
-      formatMessage: formatMessage,
-      model: model,
-      query: query,
-      section: section
-    });
-  }, [formatMessage, model, query, section]);
-  var resultCount = items.length || (!isLoading && query.trim() ? (_model$fallbackItems$ = (_model$fallbackItems = model.fallbackItems) === null || _model$fallbackItems === void 0 ? void 0 : _model$fallbackItems.length) !== null && _model$fallbackItems$ !== void 0 ? _model$fallbackItems$ : 0 : 0);
   useEffect(function () {
-    if (previousIsOffline.current !== isOffline) {
-      setSelectedKey(undefined);
-      onClearSelection();
+    var _searchInputRef$curre;
+    var invalidation = browserState.invalidation;
+    if (!isOpen || !invalidation || handledInvalidationRef.current === invalidation) {
+      return;
+    }
+    handledInvalidationRef.current = invalidation;
+    selectedRegistrationRef.current = undefined;
+    onClearSelection();
+    var ownerDocument = (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.ownerDocument;
+    var activeElement = ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.activeElement;
+    if (invalidation.section && focusedCategoryRef.current === invalidation.section && activeElement === (ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body)) {
+      var _selectedCategoryRef$;
+      (_selectedCategoryRef$ = selectedCategoryRef.current) === null || _selectedCategoryRef$ === void 0 || _selectedCategoryRef$.focus();
+    } else if (invalidation.selection && (activeElement === (ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body) || activeElement !== null && activeElement !== void 0 && activeElement.closest('[role="option"]'))) {
+      var _searchInputRef$curre2;
+      (_searchInputRef$curre2 = searchInputRef.current) === null || _searchInputRef$curre2 === void 0 || _searchInputRef$curre2.focus();
     }
-    previousIsOffline.current = isOffline;
-  }, [isOffline, onClearSelection]);
+  }, [browserState.invalidation, isOpen, onClearSelection]);
+  var resultCount = items.length || (!isLoading && query.trim() ? (_model$fallbackItems$ = (_model$fallbackItems2 = model.fallbackItems) === null || _model$fallbackItems2 === void 0 ? void 0 : _model$fallbackItems2.length) !== null && _model$fallbackItems$ !== void 0 ? _model$fallbackItems$ : 0 : 0);
+  var flushSearchAnalytics = useQuickInsertSearchAnalytics({
+    query: query,
+    resultCount: items.length,
+    surface: 'element-browser',
+    category: effectiveSection !== null && effectiveSection !== void 0 ? effectiveSection : 'all',
+    isOpen: isOpen && !isLoading,
+    fireAnalyticsEvent: fireAnalyticsEvent
+  });
+  var closeBrowser = useCallback(function () {
+    flushSearchAnalytics();
+    onClose();
+  }, [flushSearchAnalytics, onClose]);
+  var onSearchFocus = useCallback(function () {
+    focusedCategoryRef.current = undefined;
+  }, []);
+  var onBrowserFocusCapture = useCallback(function (event) {
+    var _category$dataset$sec;
+    var categories = event.currentTarget.querySelector('[data-testid="registry-element-browser-categories"]');
+    var category = event.target instanceof HTMLElement && categories !== null && categories !== void 0 && categories.contains(event.target) ? event.target.closest('[data-section]') : null;
+    focusedCategoryRef.current = category ? (_category$dataset$sec = category.dataset.section) !== null && _category$dataset$sec !== void 0 ? _category$dataset$sec : '' : undefined;
+  }, []);
   var onSearchChange = useCallback(function (event) {
-    setQuery(event.currentTarget.value);
-    setSelectedKey(undefined);
+    var nextQuery = event.currentTarget.value;
+    selectedRegistrationRef.current = undefined;
+    setBrowserState(function (current) {
+      return _objectSpread(_objectSpread({}, current), {}, {
+        query: nextQuery,
+        selectedRegistration: undefined
+      });
+    });
     onClearSelection();
   }, [onClearSelection]);
   var onSectionClick = useCallback(function (event) {
-    setQuery('');
-    setSection(event.currentTarget.dataset.section || undefined);
-    setSelectedKey(undefined);
+    var nextSection = event.currentTarget.dataset.section || undefined;
+    selectedRegistrationRef.current = undefined;
+    setBrowserState({
+      query: '',
+      section: nextSection,
+      selectedRegistration: undefined
+    });
     onClearSelection();
   }, [onClearSelection]);
   var onRegistrySelect = useCallback(function (key, handler) {
-    setSelectedKey(key);
+    var _model$items$find;
+    var registration = (_model$items$find = model.items.find(function (_ref4) {
+      var registration = _ref4.registration;
+      return registration.key === key;
+    })) === null || _model$items$find === void 0 ? void 0 : _model$items$find.registration;
+    selectedRegistrationRef.current = registration;
+    setBrowserState(function (current) {
+      return _objectSpread(_objectSpread({}, current), {}, {
+        selectedRegistration: registration,
+        selectionIsOffline: isOffline
+      });
+    });
     onSelect(handler);
-  }, [onSelect]);
+  }, [isOffline, model.items, onSelect]);
+  var confirmInsert = useCallback(function () {
+    var selectedRegistration = selectedRegistrationRef.current;
+    if (!selectedRegistration || !visibleItems.some(function (_ref5) {
+      var registration = _ref5.registration;
+      return registration === selectedRegistration;
+    })) {
+      return;
+    }
+    onConfirmInsert();
+  }, [onConfirmInsert, visibleItems]);
   var onModalOpenComplete = useCallback(function (node) {
     node.style.borderRadius = "var(--ds-radius-large, 8px)";
     var footer = node.querySelector("[data-testid=\"".concat(modalTestId, "--footer\"]"));
@@ -140,9 +237,9 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
   }, []);
   var onKeyDown = useCallback(function (event) {
     if (event.key === 'Tab' && event.shiftKey && event.target instanceof HTMLElement && event.target.getAttribute('role') === 'option') {
-      var _selectedCategoryRef$;
+      var _selectedCategoryRef$2;
       event.preventDefault();
-      (_selectedCategoryRef$ = selectedCategoryRef.current) === null || _selectedCategoryRef$ === void 0 || _selectedCategoryRef$.focus();
+      (_selectedCategoryRef$2 = selectedCategoryRef.current) === null || _selectedCategoryRef$2 === void 0 || _selectedCategoryRef$2.focus();
       return;
     }
     if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
@@ -170,15 +267,15 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
         nextOption.focus();
         nextOption.click();
       } else if (nextIndex < 0 && currentIndex >= 0) {
-        var _searchInputRef$curre;
+        var _searchInputRef$curre3;
         event.preventDefault();
-        (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 || _searchInputRef$curre.focus();
+        (_searchInputRef$curre3 = searchInputRef.current) === null || _searchInputRef$curre3 === void 0 || _searchInputRef$curre3.focus();
       }
       return;
     }
     if (event.key === 'Escape') {
       event.preventDefault();
-      onClose();
+      closeBrowser();
       return;
     }
     if (event.key === 'Enter') {
@@ -186,22 +283,22 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
       var focusedOption = event.target instanceof HTMLElement ? event.target.closest('[role="option"]') : null;
       var firstOption = (_event$currentTarget$ = event.currentTarget.ownerDocument.getElementById(resultsId)) === null || _event$currentTarget$ === void 0 ? void 0 : _event$currentTarget$.querySelector('[role="option"]:not([aria-disabled="true"]):not([disabled])');
       var optionToActivate = focusedOption !== null && focusedOption !== void 0 ? focusedOption : firstOption;
-      if (selectedKey || optionToActivate) {
+      if (isSelectedRegistrationCurrent || optionToActivate) {
         event.preventDefault();
-        if (!selectedKey) {
+        if (!isSelectedRegistrationCurrent) {
           optionToActivate === null || optionToActivate === void 0 || optionToActivate.click();
         }
-        onConfirmInsert();
+        confirmInsert();
       }
     }
-  }, [onClose, onConfirmInsert, selectedKey]);
+  }, [closeBrowser, confirmInsert, isSelectedRegistrationCurrent]);
   return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(Modal, {
     label: formatMessage({
       defaultMessage: 'Insert elements',
       id: 'editor.quick-insert.title'
     }),
     height: "664px",
-    onClose: onClose,
+    onClose: closeBrowser,
     onCloseComplete: onCloseComplete,
     onOpenComplete: onModalOpenComplete,
     testId: modalTestId,
@@ -227,6 +324,7 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
     }),
     isCompact: true,
     name: "registry-element-browser-search",
+    onFocus: onSearchFocus,
     onChange: onSearchChange,
     onKeyDown: onKeyDown,
     ref: searchInputRef,
@@ -235,12 +333,13 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
     appearance: "subtle",
     icon: CrossIcon,
     label: formatMessage(messages.close),
-    onClick: onClose,
+    onClick: closeBrowser,
     spacing: "compact"
   })))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
+    onFocusCapture: onBrowserFocusCapture,
     className: ax(["_zulp1fka _18zr1b66 _1e0c11p5 _yv0e1xuv _1q511b66 _lk4ji47z"])
   }, /*#__PURE__*/React.createElement(RegistryElementBrowserCategories, {
-    section: section,
+    section: effectiveSection,
     sections: model.sections,
     onSectionClick: onSectionClick,
     selectedButtonRef: selectedCategoryRef
@@ -253,15 +352,15 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
     fallbackItems: model.fallbackItems,
     query: query,
     resultsId: resultsId,
-    section: section,
+    section: effectiveSection,
     selectedKey: selectedKey,
     onKeyDown: onKeyDown,
     onSelect: onRegistrySelect
   }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(RegistryElementBrowserFooter, {
     helpUrl: helpUrl,
-    isInsertEnabled: Boolean(selectedKey),
-    onClose: onClose,
-    onConfirmInsert: onConfirmInsert,
+    isInsertEnabled: isSelectedRegistrationCurrent,
+    onClose: closeBrowser,
+    onConfirmInsert: confirmInsert,
     resultCount: resultCount
   }))));
 };

package/dist/esm/ui/RegistryElementBrowser/RegistryElementBrowserSearchResults.compiled.css

@@ -1,25 +1,14 @@
-._11c81af2{font:var(--ds-font-heading-medium,normal 653 20px/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._zulpu2gc{gap:var(--ds-space-100,8px)}
-._yyhyjvu9{grid-column:1/-1}
-._15a5nqa1{border-top-style:solid}
-._19pk1ejb{margin-top:var(--ds-space-300,24px)}
+._yyhyjvu9{grid-column:1/-1}._15a5nqa1{border-top-style:solid}
 ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
-._19pkutpp{margin-top:var(--ds-space-150,9pt)}
-._1bah1h6o{justify-content:center}
 ._1bsb1osq{width:100%}
 ._1e0c11p5{display:grid}
-._1e0c1txw{display:flex}
 ._1i531l7x{border-top-color:var(--ds-border,#0b120e24)}
 ._1ul9idpf{min-width:0}
-._2lx21bp4{flex-direction:column}
-._4cvr1h6o{align-items:center}
 ._4cvrv2br{align-items:start}
 ._ae4vv2br{align-content:start}
 ._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
-._p12f1kdj{max-width:25pc}
-._syazi7uo{color:var(--ds-text,#292a2e)}
 ._uwhke4h9{border-top-width:var(--ds-border-width,1px)}
-._y3gn1h6o{text-align:center}
 ._yv0ei47z{grid-template-columns:minmax(0,1fr)}
 @media (min-width:550px) and (max-width:1023px){._16409sye{grid-template-columns:repeat(2,minmax(0,1fr))}}
 @media (min-width:1024px){._g98o1koq{grid-template-columns:repeat(3,232px)}}

package/dist/esm/ui/RegistryElementBrowser/RegistryElementBrowserSearchResults.js

@@ -1,27 +1,18 @@
 /* RegistryElementBrowserSearchResults.tsx generated by @compiled/babel-plugin v3.0.2 */
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./RegistryElementBrowserSearchResults.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useMemo } from 'react';
 import { useIntl } from 'react-intl';
-import LinkButton from '@atlaskit/button/link';
+import { QuickInsertEmptyState } from '@atlaskit/editor-common/quick-insert/empty-state';
 import { QuickInsertProvider } from '@atlaskit/editor-common/quick-insert/provider';
-import { Text } from '@atlaskit/primitives/compiled';
 
 // oxlint-disable-next-line eslint/no-redeclare
 
-import NotFoundIllustration from './NotFoundIllustration';
 var resultsGridStyles = null;
 var emptyStateGridItemStyles = null;
 var styles = {
   fallbackMarketplace: "_1i531l7x _15a5nqa1 _uwhke4h9 _19pkpxbi _ca0qpxbi"
 };
-var emptyStateWrapperStyles = null;
-var emptyStateHeadingStyles = null;
-var emptyStateSubheadingStyles = null;
-var emptyStateLinkStyles = null;
 var RegistryElementBrowserItem = function RegistryElementBrowserItem(_ref) {
   var editorView = _ref.editorView,
     isOffline = _ref.isOffline,
@@ -54,7 +45,6 @@ var RegistryElementBrowserItem = function RegistryElementBrowserItem(_ref) {
   }, /*#__PURE__*/React.createElement(Component, undefined, null));
 };
 export var RegistryElementBrowserSearchResults = function RegistryElementBrowserSearchResults(_ref2) {
-  var _emptyStateHandler;
   var editorView = _ref2.editorView,
     emptyStateHandler = _ref2.emptyStateHandler,
     fallbackItems = _ref2.fallbackItems,
@@ -77,34 +67,12 @@ export var RegistryElementBrowserSearchResults = function RegistryElementBrowser
   });
   var displayedItems = hasFallbackItems && fallbackItems ? fallbackItems : items;
   var shouldRenderEmptyState = items.length === 0 && !isLoading;
-  var emptyState = shouldRenderEmptyState ? (_emptyStateHandler = emptyStateHandler === null || emptyStateHandler === void 0 ? void 0 : emptyStateHandler(_objectSpread({
+  var emptyState = shouldRenderEmptyState ? emptyStateHandler === null || emptyStateHandler === void 0 ? void 0 : emptyStateHandler({
     mode: 'full',
     searchTerm: query,
-    selectedCategory: section
-  }, hasFallbackItems ? {
+    selectedCategory: section,
     showNoResultsMessage: false
-  } : {}))) !== null && _emptyStateHandler !== void 0 ? _emptyStateHandler : /*#__PURE__*/React.createElement("div", {
-    className: ax(["_4cvr1h6o _1e0c1txw _2lx21bp4 _1bah1h6o _1bsb1osq"])
-  }, /*#__PURE__*/React.createElement(NotFoundIllustration, null), /*#__PURE__*/React.createElement("div", {
-    className: ax(["_11c81af2 _syazi7uo _19pk1ejb"])
-  }, formatMessage({
-    defaultMessage: 'Nothing matches your search',
-    id: 'editor.quick-insert.empty'
-  })), /*#__PURE__*/React.createElement("div", {
-    className: ax(["_19pkpxbi _p12f1kdj _y3gn1h6o"])
-  }, /*#__PURE__*/React.createElement(Text, null, formatMessage({
-    defaultMessage: 'Try searching with a different term or discover new apps for Atlassian products.',
-    id: 'editor.quick-insert.empty-description'
-  })), /*#__PURE__*/React.createElement("div", {
-    className: ax(["_19pkutpp"])
-  }, /*#__PURE__*/React.createElement(LinkButton, {
-    appearance: "primary",
-    href: "https://marketplace.atlassian.com/search?category=Macros&hosting=cloud&product=confluence",
-    target: "_blank"
-  }, formatMessage({
-    defaultMessage: 'Explore Atlassian Marketplace',
-    id: 'editor.quick-insert.explore-marketplace'
-  }))))) : null;
+  }) : null;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "registry-element-browser-results",
     id: resultsId,
@@ -130,7 +98,9 @@ export var RegistryElementBrowserSearchResults = function RegistryElementBrowser
       key: item.registration.key,
       onSelect: onSelect
     });
-  })), emptyState && /*#__PURE__*/React.createElement("div", {
-    className: ax(["_yyhyjvu9 _1ul9idpf _1bsb1osq", hasFallbackItems && styles.fallbackMarketplace])
+  })), shouldRenderEmptyState && !hasFallbackItems && query.trim().length > 0 && /*#__PURE__*/React.createElement(QuickInsertEmptyState, {
+    mode: "full"
+  }), emptyState && /*#__PURE__*/React.createElement("div", {
+    className: ax(["_yyhyjvu9 _1ul9idpf _1bsb1osq", styles.fallbackMarketplace])
   }, emptyState));
 };

package/dist/esm/ui/RegistryElementBrowser/index.js

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics/types/enums';
 import { isOfflineMode } from '@atlaskit/editor-common/connectivity/isOfflineMode';
 import { insertSelectedItem } from '@atlaskit/editor-common/insert';
@@ -8,8 +8,12 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSha
 import { closeElementBrowser } from '../../pm-plugins/commands';
 import { pluginKey } from '../../pm-plugins/plugin-key';
 import { RegistryElementBrowser } from './RegistryElementBrowser';
+var EMPTY_COMPONENTS = [];
+var subscribeToNothing = function subscribeToNothing() {
+  return function () {};
+};
 export var RegistryElementBrowserContainer = function RegistryElementBrowserContainer(_ref) {
-  var _pluginKey$getState;
+  var _pluginInjectionAPI$u2, _pluginInjectionAPI$u3, _pluginInjectionAPI$a2, _pluginKey$getState;
   var editorView = _ref.editorView,
     pluginInjectionAPI = _ref.pluginInjectionAPI,
     helpUrl = _ref.helpUrl;
@@ -24,12 +28,15 @@ export var RegistryElementBrowserContainer = function RegistryElementBrowserCont
     currentEmptyStateHandler = _useSharedPluginState.emptyStateHandler,
     isElementBrowserOpen = _useSharedPluginState.isElementBrowserOpen,
     mode = _useSharedPluginState.mode;
-  // Snapshot once per open, during render, so the browser's open-time section reset sees the
-  // registry for this open rather than the previous (or empty) snapshot.
-  var components = useMemo(function () {
-    var _pluginInjectionAPI$u, _pluginInjectionAPI$u2;
-    return isElementBrowserOpen ? (_pluginInjectionAPI$u = pluginInjectionAPI === null || pluginInjectionAPI === void 0 || (_pluginInjectionAPI$u2 = pluginInjectionAPI.uiControlRegistry) === null || _pluginInjectionAPI$u2 === void 0 ? void 0 : _pluginInjectionAPI$u2.actions.getComponents(MENU.key)) !== null && _pluginInjectionAPI$u !== void 0 ? _pluginInjectionAPI$u : [] : [];
+  var getRegistrySnapshot = useCallback(function () {
+    var _pluginInjectionAPI$u;
+    if (!isElementBrowserOpen) {
+      return EMPTY_COMPONENTS;
+    }
+    var components = pluginInjectionAPI === null || pluginInjectionAPI === void 0 || (_pluginInjectionAPI$u = pluginInjectionAPI.uiControlRegistry) === null || _pluginInjectionAPI$u === void 0 ? void 0 : _pluginInjectionAPI$u.actions.getComponents(MENU.key);
+    return components !== null && components !== void 0 && components.length ? components : EMPTY_COMPONENTS;
   }, [isElementBrowserOpen, pluginInjectionAPI]);
+  var components = useSyncExternalStore(isElementBrowserOpen ? (_pluginInjectionAPI$u2 = pluginInjectionAPI === null || pluginInjectionAPI === void 0 || (_pluginInjectionAPI$u3 = pluginInjectionAPI.uiControlRegistry) === null || _pluginInjectionAPI$u3 === void 0 ? void 0 : _pluginInjectionAPI$u3.actions.subscribe) !== null && _pluginInjectionAPI$u2 !== void 0 ? _pluginInjectionAPI$u2 : subscribeToNothing : subscribeToNothing, getRegistrySnapshot, getRegistrySnapshot);
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     emptyStateHandler = _useState2[0],
@@ -120,6 +127,7 @@ export var RegistryElementBrowserContainer = function RegistryElementBrowserCont
   }, [onClose]);
   return /*#__PURE__*/React.createElement(RegistryElementBrowser, {
     components: components,
+    fireAnalyticsEvent: pluginInjectionAPI === null || pluginInjectionAPI === void 0 || (_pluginInjectionAPI$a2 = pluginInjectionAPI.analytics) === null || _pluginInjectionAPI$a2 === void 0 ? void 0 : _pluginInjectionAPI$a2.actions.fireAnalyticsEvent,
     emptyStateHandler: emptyStateHandler,
     helpUrl: helpUrl,
     defaultSection: (_pluginKey$getState = pluginKey.getState(editorView.state)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.elementBrowserInitialCategory,

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

@@ -47,7 +47,7 @@ var _getDescendantItems = function getDescendantItems(components, parentKey, anc
 };
 
 /**
- * Builds the Element Browser's immutable open-time view of the Quick Insert registry.
+ * Builds the Element Browser's view of the resolved Quick Insert registry.
  * The caller provides only components rooted at the Quick Insert menu surface.
  */
 export var createRegistryElementBrowserModel = function createRegistryElementBrowserModel(components, _ref) {

package/dist/types/ui/RegistryElementBrowser/RegistryElementBrowser.d.ts

@@ -3,6 +3,7 @@
  * @jsx jsx
  */
 import React from 'react';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics/api';
 import type { QuickInsertSelectionHandler } from '@atlaskit/editor-common/quick-insert/context';
 import type { EmptyStateHandler } from '@atlaskit/editor-common/types/empty-state-handler';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -12,6 +13,7 @@ type Props = {
     defaultSection?: string;
     editorView: EditorView;
     emptyStateHandler?: EmptyStateHandler;
+    fireAnalyticsEvent?: EditorAnalyticsAPI['fireAnalyticsEvent'];
     helpUrl?: string;
     isLoading?: boolean;
     isOffline: boolean;
@@ -22,5 +24,5 @@ type Props = {
     onConfirmInsert: () => void;
     onSelect: (handler: QuickInsertSelectionHandler) => void;
 };
-export declare const RegistryElementBrowser: ({ components, emptyStateHandler, defaultSection, helpUrl, editorView, isLoading, isOffline, isOpen, onClearSelection, onClose, onCloseComplete, onConfirmInsert, onSelect, }: Props) => React.JSX.Element | null;
+export declare const RegistryElementBrowser: ({ components, emptyStateHandler, fireAnalyticsEvent, defaultSection, helpUrl, editorView, isLoading, isOffline, isOpen, onClearSelection, onClose, onCloseComplete, onConfirmInsert, onSelect, }: Props) => React.JSX.Element | null;
 export {};

package/dist/types/ui/RegistryElementBrowser/model.d.ts

@@ -15,7 +15,7 @@ export type RegistryElementBrowserModel = {
     sections: RegistryElementBrowserSection[];
 };
 /**
- * Builds the Element Browser's immutable open-time view of the Quick Insert registry.
+ * Builds the Element Browser's view of the resolved Quick Insert registry.
  * The caller provides only components rooted at the Quick Insert menu surface.
  */
 export declare const createRegistryElementBrowserModel: (components: RegisterComponent[], { footerKey, overflowKeys, recommendedSectionKey, rootKey, }: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-quick-insert",
-	"version": "27.0.5",
+	"version": "27.1.0",
 	"description": "Quick insert plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -42,7 +42,7 @@
 		"@atlaskit/modal-dialog": "^17.0.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
-		"@atlaskit/primitives": "^22.5.0",
+		"@atlaskit/primitives": "^22.6.0",
 		"@atlaskit/textfield": "^10.2.0",
 		"@atlaskit/tmp-editor-statsig": "^240.0.0",
 		"@atlaskit/tokens": "^20.6.0",
@@ -52,7 +52,7 @@
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^131.2.0",
+		"@atlaskit/editor-common": "^131.4.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"