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

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-quick-insert
 
+## 27.1.0
+
+### Minor Changes
+
+- [`f93da47c0d069`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f93da47c0d069) -
+  Add shared illustrated empty states and search outcome analytics for registered slash, Plus and
+  Element Browser searches under platform_editor_slash_command. Refresh resolved registrations on
+  search edits and retain eligible Ask Rovo and host Marketplace recovery. Remove duplicate top
+  spacing in the Plus menu and show its previews only for directly hovered or keyboard-selected
+  items. Subscribe all three registered entry points to live registry updates and rebuild their
+  models on search changes, keeping selection and category state valid as items arrive or disappear.
+  Omit the Plus footer divider when only the generic empty state is shown.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 27.0.5
 
 ### Patch Changes

package/dist/cjs/ui/RegistryElementBrowser/RegistryElementBrowser.js

@@ -9,12 +9,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.RegistryElementBrowser = void 0;
 require("./RegistryElementBrowser.compiled.css");
 var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
 var _button = _interopRequireDefault(require("@atlaskit/button/icon/button"));
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _keys = require("@atlaskit/editor-common/quick-insert/keys");
+var _useSearchAnalytics = require("@atlaskit/editor-common/quick-insert/use-search-analytics");
 var _typeAheadGetMenuFooterSectionKey = require("@atlaskit/editor-common/type-ahead-get-menu-footer-section-key");
 var _typeAheadGetSectionOverflowItemKey = require("@atlaskit/editor-common/type-ahead-get-section-overflow-item-key");
 var _heading = _interopRequireDefault(require("@atlaskit/heading/heading"));
@@ -32,11 +34,14 @@ var _RegistryElementBrowserCategories = require("./RegistryElementBrowserCategor
 var _RegistryElementBrowserFooter = require("./RegistryElementBrowserFooter");
 var _RegistryElementBrowserSearchResults = require("./RegistryElementBrowserSearchResults");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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) { (0, _defineProperty2.default)(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; }
 var browserGridTemplateColumns = '182px minmax(0, 1fr)';
 var categoryColumnGap = "calc(".concat("var(--ds-space-200, 16px)", " + ", "var(--ds-space-150, 12px)", ")");
 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) {
@@ -48,9 +53,10 @@ var getRenderedColumnCount = function getRenderedColumnCount(options) {
   return nextRowIndex > 0 ? nextRowIndex : options.length;
 };
 var RegistryElementBrowser = exports.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,
@@ -65,8 +71,19 @@ var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryE
     onSelect = _ref.onSelect;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var model = (0, _react.useMemo)(function () {
-    return (0, _model.createRegistryElementBrowserModel)(components, {
+  var _useState = (0, _react.useState)({
+      query: '',
+      section: defaultSection
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    browserState = _useState2[0],
+    setBrowserState = _useState2[1];
+  var query = browserState.query,
+    section = browserState.section,
+    selectedRegistration = browserState.selectedRegistration;
+  var selectedRegistrationRef = (0, _react.useRef)(undefined);
+  var browserModel = (0, _react.useMemo)(function () {
+    var model = (0, _model.createRegistryElementBrowserModel)(components, {
       footerKey: (0, _typeAheadGetMenuFooterSectionKey.getMenuFooterSectionKey)(_keys.MENU.key),
       overflowKeys: new Set(components.filter(function (component) {
         return component.type === 'menu-section';
@@ -76,67 +93,147 @@ var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryE
       recommendedSectionKey: _keys.RECOMMENDED_SECTION.key,
       rootKey: _keys.MENU.key
     });
-  }, [components]);
-  var _useState = (0, _react.useState)(''),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    query = _useState2[0],
-    setQuery = _useState2[1];
-  var _useState3 = (0, _react.useState)(function () {
-      return (0, _model.getInitialRegistryElementBrowserSection)(model, defaultSection);
-    }),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    section = _useState4[0],
-    setSection = _useState4[1];
-  var _useState5 = (0, _react.useState)(),
-    _useState6 = (0, _slicedToArray2.default)(_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: (0, _model.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 = (0, _react.useRef)(null);
   var selectedCategoryRef = (0, _react.useRef)(null);
+  var focusedCategoryRef = (0, _react.useRef)();
+  var handledInvalidationRef = (0, _react.useRef)(browserState.invalidation);
   var wasOpen = (0, _react.useRef)(false);
-  var previousIsOffline = (0, _react.useRef)(isOffline);
   (0, _react.useEffect)(function () {
     if (isOpen && !wasOpen.current) {
-      setQuery('');
-      setSection((0, _model.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: (0, _model.getInitialRegistryElementBrowserSection)(model, defaultSection),
+        selectedRegistration: undefined
+      });
       onClearSelection();
     }
     wasOpen.current = isOpen;
   }, [defaultSection, isOpen, model, onClearSelection]);
-  var items = (0, _react.useMemo)(function () {
-    return (0, _model.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);
   (0, _react.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 = (0, _useSearchAnalytics.useQuickInsertSearchAnalytics)({
+    query: query,
+    resultCount: items.length,
+    surface: 'element-browser',
+    category: effectiveSection !== null && effectiveSection !== void 0 ? effectiveSection : 'all',
+    isOpen: isOpen && !isLoading,
+    fireAnalyticsEvent: fireAnalyticsEvent
+  });
+  var closeBrowser = (0, _react.useCallback)(function () {
+    flushSearchAnalytics();
+    onClose();
+  }, [flushSearchAnalytics, onClose]);
+  var onSearchFocus = (0, _react.useCallback)(function () {
+    focusedCategoryRef.current = undefined;
+  }, []);
+  var onBrowserFocusCapture = (0, _react.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 = (0, _react.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 = (0, _react.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 = (0, _react.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 = (0, _react.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 = (0, _react.useCallback)(function (node) {
     node.style.borderRadius = "var(--ds-radius-large, 8px)";
     var footer = node.querySelector("[data-testid=\"".concat(modalTestId, "--footer\"]"));
@@ -149,9 +246,9 @@ var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryE
   }, []);
   var onKeyDown = (0, _react.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)) {
@@ -179,15 +276,15 @@ var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryE
         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') {
@@ -195,22 +292,22 @@ var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryE
       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.default.createElement(_modalTransition.default, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
     label: formatMessage({
       defaultMessage: 'Insert elements',
       id: 'editor.quick-insert.title'
     }),
     height: "664px",
-    onClose: onClose,
+    onClose: closeBrowser,
     onCloseComplete: onCloseComplete,
     onOpenComplete: onModalOpenComplete,
     testId: modalTestId,
@@ -236,6 +333,7 @@ var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryE
     }),
     isCompact: true,
     name: "registry-element-browser-search",
+    onFocus: onSearchFocus,
     onChange: onSearchChange,
     onKeyDown: onKeyDown,
     ref: searchInputRef,
@@ -244,12 +342,13 @@ var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryE
     appearance: "subtle",
     icon: _cross.default,
     label: formatMessage(_quickInsert.messages.close),
-    onClick: onClose,
+    onClick: closeBrowser,
     spacing: "compact"
   })))), /*#__PURE__*/_react.default.createElement(_modalBody.default, null, /*#__PURE__*/_react.default.createElement("div", {
+    onFocusCapture: onBrowserFocusCapture,
     className: (0, _runtime.ax)(["_zulp1fka _18zr1b66 _1e0c11p5 _yv0e1xuv _1q511b66 _lk4ji47z"])
   }, /*#__PURE__*/_react.default.createElement(_RegistryElementBrowserCategories.RegistryElementBrowserCategories, {
-    section: section,
+    section: effectiveSection,
     sections: model.sections,
     onSectionClick: onSectionClick,
     selectedButtonRef: selectedCategoryRef
@@ -262,15 +361,15 @@ var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryE
     fallbackItems: model.fallbackItems,
     query: query,
     resultsId: resultsId,
-    section: section,
+    section: effectiveSection,
     selectedKey: selectedKey,
     onKeyDown: onKeyDown,
     onSelect: onRegistrySelect
   }))), /*#__PURE__*/_react.default.createElement(_modalFooter.default, null, /*#__PURE__*/_react.default.createElement(_RegistryElementBrowserFooter.RegistryElementBrowserFooter, {
     helpUrl: helpUrl,
-    isInsertEnabled: Boolean(selectedKey),
-    onClose: onClose,
-    onConfirmInsert: onConfirmInsert,
+    isInsertEnabled: isSelectedRegistrationCurrent,
+    onClose: closeBrowser,
+    onConfirmInsert: confirmInsert,
     resultCount: resultCount
   }))));
 };

package/dist/cjs/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/cjs/ui/RegistryElementBrowser/RegistryElementBrowserSearchResults.js

@@ -1,7 +1,6 @@
 /* RegistryElementBrowserSearchResults.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,25 +8,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.RegistryElementBrowserSearchResults = void 0;
 require("./RegistryElementBrowserSearchResults.compiled.css");
 var _runtime = require("@compiled/react/runtime");
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
-var _link = _interopRequireDefault(require("@atlaskit/button/link"));
+var _emptyState = require("@atlaskit/editor-common/quick-insert/empty-state");
 var _provider = require("@atlaskit/editor-common/quick-insert/provider");
-var _compiled = require("@atlaskit/primitives/compiled");
-var _NotFoundIllustration = _interopRequireDefault(require("./NotFoundIllustration"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-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) { (0, _defineProperty2.default)(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; } // oxlint-disable-next-line eslint/no-redeclare
+// oxlint-disable-next-line eslint/no-redeclare
+
 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,
@@ -60,7 +52,6 @@ var RegistryElementBrowserItem = function RegistryElementBrowserItem(_ref) {
   }, /*#__PURE__*/_react.default.createElement(Component, undefined, null));
 };
 var RegistryElementBrowserSearchResults = exports.RegistryElementBrowserSearchResults = function RegistryElementBrowserSearchResults(_ref2) {
-  var _emptyStateHandler;
   var editorView = _ref2.editorView,
     emptyStateHandler = _ref2.emptyStateHandler,
     fallbackItems = _ref2.fallbackItems,
@@ -83,34 +74,12 @@ var RegistryElementBrowserSearchResults = exports.RegistryElementBrowserSearchRe
   });
   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.default.createElement("div", {
-    className: (0, _runtime.ax)(["_4cvr1h6o _1e0c1txw _2lx21bp4 _1bah1h6o _1bsb1osq"])
-  }, /*#__PURE__*/_react.default.createElement(_NotFoundIllustration.default, null), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)(["_11c81af2 _syazi7uo _19pk1ejb"])
-  }, formatMessage({
-    defaultMessage: 'Nothing matches your search',
-    id: 'editor.quick-insert.empty'
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)(["_19pkpxbi _p12f1kdj _y3gn1h6o"])
-  }, /*#__PURE__*/_react.default.createElement(_compiled.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.default.createElement("div", {
-    className: (0, _runtime.ax)(["_19pkutpp"])
-  }, /*#__PURE__*/_react.default.createElement(_link.default, {
-    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.default.createElement("div", {
     "data-testid": "registry-element-browser-results",
     id: resultsId,
@@ -136,7 +105,9 @@ var RegistryElementBrowserSearchResults = exports.RegistryElementBrowserSearchRe
       key: item.registration.key,
       onSelect: onSelect
     });
-  })), emptyState && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)(["_yyhyjvu9 _1ul9idpf _1bsb1osq", hasFallbackItems && styles.fallbackMarketplace])
+  })), shouldRenderEmptyState && !hasFallbackItems && query.trim().length > 0 && /*#__PURE__*/_react.default.createElement(_emptyState.QuickInsertEmptyState, {
+    mode: "full"
+  }), emptyState && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_yyhyjvu9 _1ul9idpf _1bsb1osq", styles.fallbackMarketplace])
   }, emptyState));
 };

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

@@ -17,8 +17,12 @@ var _commands = require("../../pm-plugins/commands");
 var _pluginKey = require("../../pm-plugins/plugin-key");
 var _RegistryElementBrowser = require("./RegistryElementBrowser");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var EMPTY_COMPONENTS = [];
+var subscribeToNothing = function subscribeToNothing() {
+  return function () {};
+};
 var RegistryElementBrowserContainer = exports.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;
@@ -33,12 +37,15 @@ var RegistryElementBrowserContainer = exports.RegistryElementBrowserContainer =
     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 = (0, _react.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(_keys.MENU.key)) !== null && _pluginInjectionAPI$u !== void 0 ? _pluginInjectionAPI$u : [] : [];
+  var getRegistrySnapshot = (0, _react.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(_keys.MENU.key);
+    return components !== null && components !== void 0 && components.length ? components : EMPTY_COMPONENTS;
   }, [isElementBrowserOpen, pluginInjectionAPI]);
+  var components = (0, _react.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 = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     emptyStateHandler = _useState2[0],
@@ -129,6 +136,7 @@ var RegistryElementBrowserContainer = exports.RegistryElementBrowserContainer =
   }, [onClose]);
   return /*#__PURE__*/_react.default.createElement(_RegistryElementBrowser.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.pluginKey.getState(editorView.state)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.elementBrowserInitialCategory,

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

@@ -54,7 +54,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.
  */
 var createRegistryElementBrowserModel = exports.createRegistryElementBrowserModel = function createRegistryElementBrowserModel(components, _ref) {