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

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

@@ -6,6 +6,7 @@ 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';
@@ -27,6 +28,7 @@ const categoryColumnGap = `calc(${"var(--ds-space-200, 16px)"} + ${"var(--ds-spa
 const browserLayoutStyles = null;
 const headerContentStyles = null;
 const headerSearchStyles = null;
+const EMPTY_ITEMS = [];
 const resultsId = 'registry-element-browser-results';
 const modalTestId = 'registry-element-browser-modal';
 const getRenderedColumnCount = options => {
@@ -38,6 +40,7 @@ const getRenderedColumnCount = options => {
 export const RegistryElementBrowser = ({
   components,
   emptyStateHandler,
+  fireAnalyticsEvent,
   defaultSection,
   helpUrl,
   editorView,
@@ -50,63 +53,165 @@ export const RegistryElementBrowser = ({
   onConfirmInsert,
   onSelect
 }) => {
-  var _model$fallbackItems$, _model$fallbackItems;
+  var _model$fallbackItems, _model$fallbackItems$, _model$fallbackItems2;
   const {
     formatMessage
   } = useIntl();
-  const model = useMemo(() => createRegistryElementBrowserModel(components, {
-    footerKey: getMenuFooterSectionKey(MENU.key),
-    overflowKeys: new Set(components.filter(component => component.type === 'menu-section').map(component => getSectionOverflowItemKey(component.key))),
-    recommendedSectionKey: RECOMMENDED_SECTION.key,
-    rootKey: MENU.key
-  }), [components]);
-  const [query, setQuery] = useState('');
-  const [section, setSection] = useState(() => getInitialRegistryElementBrowserSection(model, defaultSection));
-  const [selectedKey, setSelectedKey] = useState();
+  const [browserState, setBrowserState] = useState({
+    query: '',
+    section: defaultSection
+  });
+  const {
+    query,
+    section,
+    selectedRegistration
+  } = browserState;
+  const selectedRegistrationRef = useRef(undefined);
+  const browserModel = useMemo(() => {
+    const model = createRegistryElementBrowserModel(components, {
+      footerKey: getMenuFooterSectionKey(MENU.key),
+      overflowKeys: new Set(components.filter(component => component.type === 'menu-section').map(component => getSectionOverflowItemKey(component.key))),
+      recommendedSectionKey: RECOMMENDED_SECTION.key,
+      rootKey: MENU.key
+    });
+    const effectiveSection = section && model.sections.some(({
+      key
+    }) => key === section) ? section : undefined;
+    return {
+      model,
+      effectiveSection,
+      items: getRegistryElementBrowserItems({
+        formatMessage,
+        model,
+        query,
+        section: effectiveSection
+      })
+    };
+  }, [components, formatMessage, query, section]);
+  const {
+    model,
+    effectiveSection,
+    items
+  } = browserModel;
+  const visibleItems = items.length === 0 && !isLoading && query.trim().length > 0 ? (_model$fallbackItems = model.fallbackItems) !== null && _model$fallbackItems !== void 0 ? _model$fallbackItems : EMPTY_ITEMS : items;
+  const isSelectedRegistrationCurrent = Boolean(selectedRegistration && browserState.selectionIsOffline === isOffline && visibleItems.some(({
+    registration
+  }) => registration === selectedRegistration));
+  const selectedKey = isSelectedRegistrationCurrent ? selectedRegistration === null || selectedRegistration === void 0 ? void 0 : selectedRegistration.key : undefined;
+  const invalidSection = Boolean(section && section !== effectiveSection);
+  const invalidSelection = Boolean(selectedRegistration && !isSelectedRegistrationCurrent);
+  if (isOpen && (invalidSection || invalidSelection)) {
+    setBrowserState({
+      ...browserState,
+      section: effectiveSection,
+      selectedRegistration: undefined,
+      selectionIsOffline: undefined,
+      invalidation: {
+        section: invalidSection ? section : undefined,
+        selection: invalidSelection
+      }
+    });
+  }
   const searchInputRef = useRef(null);
   const selectedCategoryRef = useRef(null);
+  const focusedCategoryRef = useRef();
+  const handledInvalidationRef = useRef(browserState.invalidation);
   const wasOpen = useRef(false);
-  const previousIsOffline = useRef(isOffline);
   useEffect(() => {
     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]);
-  const items = useMemo(() => getRegistryElementBrowserItems({
-    formatMessage,
-    model,
-    query,
-    section
-  }), [formatMessage, model, query, section]);
-  const 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(() => {
-    if (previousIsOffline.current !== isOffline) {
-      setSelectedKey(undefined);
-      onClearSelection();
+    var _searchInputRef$curre;
+    const invalidation = browserState.invalidation;
+    if (!isOpen || !invalidation || handledInvalidationRef.current === invalidation) {
+      return;
+    }
+    handledInvalidationRef.current = invalidation;
+    selectedRegistrationRef.current = undefined;
+    onClearSelection();
+    const ownerDocument = (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.ownerDocument;
+    const 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 ? 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 ? void 0 : _searchInputRef$curre2.focus();
     }
-    previousIsOffline.current = isOffline;
-  }, [isOffline, onClearSelection]);
+  }, [browserState.invalidation, isOpen, onClearSelection]);
+  const 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);
+  const flushSearchAnalytics = useQuickInsertSearchAnalytics({
+    query,
+    resultCount: items.length,
+    surface: 'element-browser',
+    category: effectiveSection !== null && effectiveSection !== void 0 ? effectiveSection : 'all',
+    isOpen: isOpen && !isLoading,
+    fireAnalyticsEvent
+  });
+  const closeBrowser = useCallback(() => {
+    flushSearchAnalytics();
+    onClose();
+  }, [flushSearchAnalytics, onClose]);
+  const onSearchFocus = useCallback(() => {
+    focusedCategoryRef.current = undefined;
+  }, []);
+  const onBrowserFocusCapture = useCallback(event => {
+    var _category$dataset$sec;
+    const categories = event.currentTarget.querySelector('[data-testid="registry-element-browser-categories"]');
+    const 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;
+  }, []);
   const onSearchChange = useCallback(event => {
-    setQuery(event.currentTarget.value);
-    setSelectedKey(undefined);
+    const nextQuery = event.currentTarget.value;
+    selectedRegistrationRef.current = undefined;
+    setBrowserState(current => ({
+      ...current,
+      query: nextQuery,
+      selectedRegistration: undefined
+    }));
     onClearSelection();
   }, [onClearSelection]);
   const onSectionClick = useCallback(event => {
-    setQuery('');
-    setSection(event.currentTarget.dataset.section || undefined);
-    setSelectedKey(undefined);
+    const nextSection = event.currentTarget.dataset.section || undefined;
+    selectedRegistrationRef.current = undefined;
+    setBrowserState({
+      query: '',
+      section: nextSection,
+      selectedRegistration: undefined
+    });
     onClearSelection();
   }, [onClearSelection]);
   const onRegistrySelect = useCallback((key, handler) => {
-    setSelectedKey(key);
+    var _model$items$find;
+    const registration = (_model$items$find = model.items.find(({
+      registration
+    }) => registration.key === key)) === null || _model$items$find === void 0 ? void 0 : _model$items$find.registration;
+    selectedRegistrationRef.current = registration;
+    setBrowserState(current => ({
+      ...current,
+      selectedRegistration: registration,
+      selectionIsOffline: isOffline
+    }));
     onSelect(handler);
-  }, [onSelect]);
+  }, [isOffline, model.items, onSelect]);
+  const confirmInsert = useCallback(() => {
+    const selectedRegistration = selectedRegistrationRef.current;
+    if (!selectedRegistration || !visibleItems.some(({
+      registration
+    }) => registration === selectedRegistration)) {
+      return;
+    }
+    onConfirmInsert();
+  }, [onConfirmInsert, visibleItems]);
   const onModalOpenComplete = useCallback(node => {
     node.style.borderRadius = "var(--ds-radius-large, 8px)";
     const footer = node.querySelector(`[data-testid="${modalTestId}--footer"]`);
@@ -119,9 +224,9 @@ export const RegistryElementBrowser = ({
   }, []);
   const onKeyDown = useCallback(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 ? void 0 : _selectedCategoryRef$.focus();
+      (_selectedCategoryRef$2 = selectedCategoryRef.current) === null || _selectedCategoryRef$2 === void 0 ? void 0 : _selectedCategoryRef$2.focus();
       return;
     }
     if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
@@ -147,15 +252,15 @@ export const RegistryElementBrowser = ({
         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 ? void 0 : _searchInputRef$curre.focus();
+        (_searchInputRef$curre3 = searchInputRef.current) === null || _searchInputRef$curre3 === void 0 ? void 0 : _searchInputRef$curre3.focus();
       }
       return;
     }
     if (event.key === 'Escape') {
       event.preventDefault();
-      onClose();
+      closeBrowser();
       return;
     }
     if (event.key === 'Enter') {
@@ -163,22 +268,22 @@ export const RegistryElementBrowser = ({
       const focusedOption = event.target instanceof HTMLElement ? event.target.closest('[role="option"]') : null;
       const 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])');
       const 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 ? 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,
@@ -204,6 +309,7 @@ export const RegistryElementBrowser = ({
     }),
     isCompact: true,
     name: "registry-element-browser-search",
+    onFocus: onSearchFocus,
     onChange: onSearchChange,
     onKeyDown: onKeyDown,
     ref: searchInputRef,
@@ -212,12 +318,13 @@ export const RegistryElementBrowser = ({
     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
@@ -230,15 +337,15 @@ export const RegistryElementBrowser = ({
     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/es2019/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/es2019/ui/RegistryElementBrowser/RegistryElementBrowserSearchResults.js

@@ -3,22 +3,16 @@ import "./RegistryElementBrowserSearchResults.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 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';
 const resultsGridStyles = null;
 const emptyStateGridItemStyles = null;
 const styles = {
   fallbackMarketplace: "_1i531l7x _15a5nqa1 _uwhke4h9 _19pkpxbi _ca0qpxbi"
 };
-const emptyStateWrapperStyles = null;
-const emptyStateHeadingStyles = null;
-const emptyStateSubheadingStyles = null;
-const emptyStateLinkStyles = null;
 const RegistryElementBrowserItem = ({
   editorView,
   isOffline,
@@ -62,7 +56,6 @@ export const RegistryElementBrowserSearchResults = ({
   onKeyDown,
   onSelect
 }) => {
-  var _emptyStateHandler;
   const {
     formatMessage
   } = useIntl();
@@ -73,35 +66,12 @@ export const RegistryElementBrowserSearchResults = ({
   });
   const displayedItems = hasFallbackItems && fallbackItems ? fallbackItems : items;
   const shouldRenderEmptyState = items.length === 0 && !isLoading;
-  const emptyState = shouldRenderEmptyState ? (_emptyStateHandler = emptyStateHandler === null || emptyStateHandler === void 0 ? void 0 : emptyStateHandler({
+  const emptyState = shouldRenderEmptyState ? emptyStateHandler === null || emptyStateHandler === void 0 ? void 0 : emptyStateHandler({
     mode: 'full',
     searchTerm: query,
     selectedCategory: section,
-    ...(hasFallbackItems ? {
-      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;
+    showNoResultsMessage: false
+  }) : null;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "registry-element-browser-results",
     id: resultsId,
@@ -125,7 +95,9 @@ export const RegistryElementBrowserSearchResults = ({
     item: item,
     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/es2019/ui/RegistryElementBrowser/index.js

@@ -1,4 +1,4 @@
-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';
@@ -7,12 +7,14 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSha
 import { closeElementBrowser } from '../../pm-plugins/commands';
 import { pluginKey } from '../../pm-plugins/plugin-key';
 import { RegistryElementBrowser } from './RegistryElementBrowser';
+const EMPTY_COMPONENTS = [];
+const subscribeToNothing = () => () => {};
 export const RegistryElementBrowserContainer = ({
   editorView,
   pluginInjectionAPI,
   helpUrl
 }) => {
-  var _pluginKey$getState;
+  var _pluginInjectionAPI$u2, _pluginInjectionAPI$u3, _pluginInjectionAPI$a2, _pluginKey$getState;
   const {
     emptyStateHandler: currentEmptyStateHandler,
     isElementBrowserOpen,
@@ -25,12 +27,15 @@ export const RegistryElementBrowserContainer = ({
       mode: (_state$connectivitySt = state.connectivityState) === null || _state$connectivitySt === void 0 ? void 0 : _state$connectivitySt.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.
-  const components = useMemo(() => {
-    var _pluginInjectionAPI$u, _pluginInjectionAPI$u2;
-    return isElementBrowserOpen ? (_pluginInjectionAPI$u = pluginInjectionAPI === null || pluginInjectionAPI === void 0 ? 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 : [] : [];
+  const getRegistrySnapshot = useCallback(() => {
+    var _pluginInjectionAPI$u;
+    if (!isElementBrowserOpen) {
+      return EMPTY_COMPONENTS;
+    }
+    const components = pluginInjectionAPI === null || pluginInjectionAPI === void 0 ? 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]);
+  const components = useSyncExternalStore(isElementBrowserOpen ? (_pluginInjectionAPI$u2 = pluginInjectionAPI === null || pluginInjectionAPI === void 0 ? 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);
   const [emptyStateHandler, setEmptyStateHandler] = useState();
   const wasOpen = useRef(false);
   const selectionHandler = useRef(undefined);
@@ -111,6 +116,7 @@ export const RegistryElementBrowserContainer = ({
   }, [onClose]);
   return /*#__PURE__*/React.createElement(RegistryElementBrowser, {
     components: components,
+    fireAnalyticsEvent: pluginInjectionAPI === null || pluginInjectionAPI === void 0 ? 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/es2019/ui/RegistryElementBrowser/model.js

@@ -35,7 +35,7 @@ const getDescendantItems = (components, parentKey, ancestorRanks, sectionKey) =>
 });
 
 /**
- * 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 const createRegistryElementBrowserModel = (components, {