@atlaskit/editor-plugin-quick-insert 15.1.3 → 16.0.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/editor-plugin-quick-insert
 
+## 16.0.0
+
+### Minor Changes
+
+- [`82fd62dcd2841`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/82fd62dcd2841) -
+  Add the experiment-gated registry-native Element Browser treatment for
+  `platform_editor_slash_command`.
+
+  `QuickInsertProvider` values must now provide a `surface` of either `typeahead` or
+  `element-browser`.
+
+  Prepare surface-specific Quick Insert item renderers for the `platform_editor_slash_command`
+  experiment.
+
+  Fix the registry Element Browser opening from View more and localize its accessibility labels.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 15.1.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 15.1.3
 
 ### Patch Changes

package/dist/cjs/entry-points/registry-element-browser.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "RegistryElementBrowser", {
+  enumerable: true,
+  get: function get() {
+    return _RegistryElementBrowser.RegistryElementBrowser;
+  }
+});
+var _RegistryElementBrowser = require("../ui/RegistryElementBrowser/RegistryElementBrowser");

package/dist/cjs/quickInsertPlugin.js

@@ -27,6 +27,7 @@ var _pluginKey = require("./pm-plugins/plugin-key");
 var _getLegacyCompatibleComponents = require("./ui/getLegacyCompatibleComponents");
 var _getQuickInsertComponents = require("./ui/getQuickInsertComponents");
 var _ModalElementBrowser = _interopRequireDefault(require("./ui/ModalElementBrowser"));
+var _RegistryElementBrowser = require("./ui/RegistryElementBrowser");
 var _search = require("./ui/search");
 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; }
@@ -88,7 +89,9 @@ var quickInsertPlugin = exports.quickInsertPlugin = function quickInsertPlugin(_
       return {
         title: formatMessage(_messages.toolbarInsertBlockMessages.viewMore),
         ariaLabel: formatMessage(_messages.toolbarInsertBlockMessages.viewMoreAriaLabel),
-        onClick: _commands.openElementBrowserModal,
+        onClick: function onClick(props) {
+          return openElementBrowser()(props);
+        },
         iconBefore: /*#__PURE__*/_react.default.createElement(_showMoreHorizontal.default, {
           label: ""
         })
@@ -115,7 +118,7 @@ var quickInsertPlugin = exports.quickInsertPlugin = function quickInsertPlugin(_
           tr: tr
         });
       }
-      return (0, _commands.openElementBrowser)(options)({
+      return ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command') ? (0, _commands.openElementBrowser)(options) : _commands.openElementBrowserModal)({
         tr: tr
       });
     };
@@ -160,7 +163,11 @@ var quickInsertPlugin = exports.quickInsertPlugin = function quickInsertPlugin(_
         return null;
       }
       if (options !== null && options !== void 0 && options.enableElementBrowser) {
-        return /*#__PURE__*/_react.default.createElement(_ModalElementBrowser.default, {
+        return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command') && api !== null && api !== void 0 && api.uiControlRegistry ? /*#__PURE__*/_react.default.createElement(_RegistryElementBrowser.RegistryElementBrowserContainer, {
+          editorView: editorView,
+          helpUrl: options === null || options === void 0 ? void 0 : options.elementBrowserHelpUrl,
+          pluginInjectionAPI: api
+        }) : /*#__PURE__*/_react.default.createElement(_ModalElementBrowser.default, {
           editorView: editorView,
           helpUrl: options === null || options === void 0 ? void 0 : options.elementBrowserHelpUrl,
           pluginInjectionAPI: api

package/dist/cjs/ui/RegistryElementBrowser/RegistryElementBrowser.compiled.css

@@ -0,0 +1,2 @@
+._zulp1ejb{gap:var(--ds-space-300,24px)}._1e0c11p5{display:grid}
+._yv0eo9bh{grid-template-columns:minmax(0,1fr) minmax(0,3fr)}

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

@@ -0,0 +1,176 @@
+/* RegistryElementBrowser.tsx generated by @compiled/babel-plugin v2.0.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RegistryElementBrowser = void 0;
+require("./RegistryElementBrowser.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _heading = _interopRequireDefault(require("@atlaskit/heading/heading"));
+var _keys = require("@atlaskit/editor-common/quick-insert/keys");
+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 _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _model = require("./model");
+var _RegistryElementBrowserCategories = require("./RegistryElementBrowserCategories");
+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); }
+var browserLayoutStyles = null;
+var resultsId = 'registry-element-browser-results';
+var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryElementBrowser(_ref) {
+  var components = _ref.components,
+    emptyStateHandler = _ref.emptyStateHandler,
+    defaultSection = _ref.defaultSection,
+    helpUrl = _ref.helpUrl,
+    editorView = _ref.editorView,
+    isOffline = _ref.isOffline,
+    isOpen = _ref.isOpen,
+    onClearSelection = _ref.onClearSelection,
+    onClose = _ref.onClose,
+    onCloseComplete = _ref.onCloseComplete,
+    onConfirmInsert = _ref.onConfirmInsert,
+    onSelect = _ref.onSelect;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var model = (0, _react.useMemo)(function () {
+    return (0, _model.createRegistryElementBrowserModel)(components, {
+      footerKey: (0, _typeAheadGetMenuFooterSectionKey.getMenuFooterSectionKey)(_keys.MENU.key),
+      overflowKeys: new Set(components.filter(function (component) {
+        return component.type === 'menu-section';
+      }).map(function (component) {
+        return (0, _typeAheadGetSectionOverflowItemKey.getSectionOverflowItemKey)(component.key);
+      })),
+      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 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);
+      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: query ? undefined : section
+    });
+  }, [formatMessage, model, query, section]);
+  (0, _react.useEffect)(function () {
+    if (previousIsOffline.current !== isOffline) {
+      setSelectedKey(undefined);
+      onClearSelection();
+    }
+    previousIsOffline.current = isOffline;
+  }, [isOffline, onClearSelection]);
+  var onSearchChange = (0, _react.useCallback)(function (event) {
+    setQuery(event.currentTarget.value);
+    setSection(undefined);
+    setSelectedKey(undefined);
+    onClearSelection();
+  }, [onClearSelection]);
+  var onSectionClick = (0, _react.useCallback)(function (event) {
+    setQuery('');
+    setSection(event.currentTarget.dataset.section || undefined);
+    setSelectedKey(undefined);
+    onClearSelection();
+  }, [onClearSelection]);
+  var onRegistrySelect = (0, _react.useCallback)(function (key, handler) {
+    setSelectedKey(key);
+    onSelect(handler);
+  }, [onSelect]);
+  var onKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      var _resultCollection$que;
+      var resultCollection = event.currentTarget.ownerDocument.getElementById(resultsId);
+      var options = Array.from((_resultCollection$que = resultCollection === null || resultCollection === void 0 ? void 0 : resultCollection.querySelectorAll('[role="option"]:not([aria-disabled="true"]):not([disabled])')) !== null && _resultCollection$que !== void 0 ? _resultCollection$que : []);
+      var currentIndex = options.findIndex(function (option) {
+        return option === event.currentTarget.ownerDocument.activeElement;
+      });
+      var nextIndex = event.key === 'ArrowDown' ? currentIndex + 1 : currentIndex - 1;
+      var nextOption = options.at(nextIndex);
+      if (nextOption) {
+        event.preventDefault();
+        nextOption.focus();
+      }
+      return;
+    }
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      onClose();
+      return;
+    }
+    if (event.key === 'Enter' && selectedKey) {
+      event.preventDefault();
+      onConfirmInsert();
+    }
+  }, [onClose, onConfirmInsert, selectedKey]);
+  return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
+    label: formatMessage({
+      defaultMessage: 'Insert elements',
+      id: 'editor.quick-insert.title'
+    }),
+    onClose: onClose,
+    onCloseComplete: onCloseComplete,
+    width: "x-large"
+  }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_heading.default, {
+    size: "medium"
+  }, formatMessage({
+    defaultMessage: 'Insert elements',
+    id: 'editor.quick-insert.title'
+  }))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_zulp1ejb _1e0c11p5 _yv0eo9bh"])
+  }, /*#__PURE__*/_react.default.createElement(_RegistryElementBrowserCategories.RegistryElementBrowserCategories, {
+    query: query,
+    section: section,
+    sections: model.sections,
+    onSectionClick: onSectionClick
+  }), /*#__PURE__*/_react.default.createElement(_RegistryElementBrowserSearchResults.RegistryElementBrowserSearchResults, {
+    editorView: editorView,
+    emptyStateHandler: emptyStateHandler,
+    isOffline: isOffline,
+    items: items,
+    query: query,
+    resultsId: resultsId,
+    section: section,
+    selectedKey: selectedKey,
+    onKeyDown: onKeyDown,
+    onSearchChange: onSearchChange,
+    onSelect: onRegistrySelect
+  }))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_RegistryElementBrowserFooter.RegistryElementBrowserFooter, {
+    helpUrl: helpUrl,
+    isInsertEnabled: Boolean(selectedKey),
+    onClose: onClose,
+    onConfirmInsert: onConfirmInsert
+  }))));
+};

package/dist/cjs/ui/RegistryElementBrowser/RegistryElementBrowserCategories.compiled.css

@@ -0,0 +1,2 @@
+._zulpu2gc{gap:var(--ds-space-100,8px)}._1e0c11p5{display:grid}
+._yv0e9sye{grid-template-columns:repeat(2,minmax(0,1fr))}

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

@@ -0,0 +1,52 @@
+/* RegistryElementBrowserCategories.tsx generated by @compiled/babel-plugin v2.0.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RegistryElementBrowserCategories = void 0;
+require("./RegistryElementBrowserCategories.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _button = _interopRequireDefault(require("@atlaskit/button/default/button"));
+var _keys = require("@atlaskit/editor-common/quick-insert/keys");
+var _messages = require("@atlaskit/editor-common/quick-insert/messages");
+var sectionMessages = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _keys.BLOCK_TEMPLATES_SECTION.key, _messages.messages.categoryBlockTemplates), _keys.DATA_AND_CHARTS_SECTION.key, _messages.messages.categoryDataAndCharts), _keys.EMBED_SECTION.key, _messages.messages.categoryEmbed), _keys.MEDIA_SECTION.key, _messages.messages.categoryMedia), _keys.OTHER_SECTION.key, _messages.messages.categoryOther), _keys.ROVO_SECTION.key, _messages.messages.categoryRovo), _keys.STRUCTURE_SECTION.key, _messages.messages.categoryStructure), _keys.TEXT_FORMATTING_SECTION.key, _messages.messages.categoryTextFormatting);
+var categoryGridStyles = null;
+var RegistryElementBrowserCategories = exports.RegistryElementBrowserCategories = function RegistryElementBrowserCategories(_ref) {
+  var query = _ref.query,
+    section = _ref.section,
+    sections = _ref.sections,
+    onSectionClick = _ref.onSectionClick;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var isAllSelected = section === undefined && !query;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "aria-label": formatMessage({
+      defaultMessage: 'Element categories',
+      id: 'editor.quick-insert.categories-label'
+    }),
+    "data-testid": "registry-element-browser-categories",
+    className: (0, _runtime.ax)(["_zulpu2gc _1e0c11p5 _yv0e9sye"])
+  }, /*#__PURE__*/_react.default.createElement(_button.default, {
+    appearance: isAllSelected ? 'primary' : 'subtle',
+    "aria-pressed": isAllSelected,
+    "data-section": "",
+    onClick: onSectionClick
+  }, formatMessage({
+    defaultMessage: 'All',
+    id: 'editor.quick-insert.all'
+  })), sections.map(function (entry) {
+    var _sectionMessages2;
+    return /*#__PURE__*/_react.default.createElement(_button.default, {
+      appearance: section === entry.key && !query ? 'primary' : 'subtle',
+      "aria-pressed": section === entry.key && !query,
+      "data-section": entry.key,
+      key: entry.key,
+      onClick: onSectionClick
+    }, formatMessage((_sectionMessages2 = sectionMessages[entry.key]) !== null && _sectionMessages2 !== void 0 ? _sectionMessages2 : _messages.messages.categoryOther));
+  }));
+};

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

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RegistryElementBrowserFooter = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _button = _interopRequireDefault(require("@atlaskit/button/default/button"));
+var _link = _interopRequireDefault(require("@atlaskit/button/link"));
+var RegistryElementBrowserFooter = exports.RegistryElementBrowserFooter = function RegistryElementBrowserFooter(_ref) {
+  var helpUrl = _ref.helpUrl,
+    isInsertEnabled = _ref.isInsertEnabled,
+    onClose = _ref.onClose,
+    onConfirmInsert = _ref.onConfirmInsert;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, helpUrl && /*#__PURE__*/_react.default.createElement(_link.default, {
+    appearance: "subtle",
+    href: helpUrl,
+    target: "_blank"
+  }, formatMessage({
+    defaultMessage: 'Help',
+    id: 'editor.quick-insert.help'
+  })), /*#__PURE__*/_react.default.createElement(_button.default, {
+    appearance: "subtle",
+    onClick: onClose
+  }, formatMessage({
+    defaultMessage: 'Close',
+    id: 'editor.quick-insert.close'
+  })), /*#__PURE__*/_react.default.createElement(_button.default, {
+    appearance: "primary",
+    isDisabled: !isInsertEnabled,
+    onClick: onConfirmInsert
+  }, formatMessage({
+    defaultMessage: 'Insert',
+    id: 'editor.quick-insert.insert'
+  })));
+};

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

@@ -0,0 +1,2 @@
+._zulpu2gc{gap:var(--ds-space-100,8px)}._1e0c11p5{display:grid}
+._yv0e13mt{grid-template-columns:repeat(3,minmax(0,1fr))}

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

@@ -0,0 +1,123 @@
+/* RegistryElementBrowserSearchResults.tsx generated by @compiled/babel-plugin v2.0.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RegistryElementBrowserSearchResults = void 0;
+require("./RegistryElementBrowserSearchResults.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _link = _interopRequireDefault(require("@atlaskit/button/link"));
+var _provider = require("@atlaskit/editor-common/quick-insert/provider");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
+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 resultsGridStyles = null;
+var RegistryElementBrowserItem = function RegistryElementBrowserItem(_ref) {
+  var editorView = _ref.editorView,
+    isOffline = _ref.isOffline,
+    isSelected = _ref.isSelected,
+    item = _ref.item,
+    onSelect = _ref.onSelect;
+  var _item$registration = item.registration,
+    Component = _item$registration.component,
+    key = _item$registration.key;
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      editorView: editorView,
+      isOffline: isOffline,
+      item: {
+        id: key,
+        isSelected: isSelected
+      },
+      select: function select(handler) {
+        return onSelect(key, handler);
+      },
+      surface: 'element-browser'
+    };
+  }, [editorView, isOffline, isSelected, key, onSelect]);
+  if (!Component) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_provider.QuickInsertProvider, {
+    value: contextValue
+  }, /*#__PURE__*/_react.default.createElement(Component, undefined, null));
+};
+var RegistryElementBrowserSearchResults = exports.RegistryElementBrowserSearchResults = function RegistryElementBrowserSearchResults(_ref2) {
+  var _emptyStateHandler;
+  var editorView = _ref2.editorView,
+    emptyStateHandler = _ref2.emptyStateHandler,
+    isOffline = _ref2.isOffline,
+    items = _ref2.items,
+    query = _ref2.query,
+    resultsId = _ref2.resultsId,
+    section = _ref2.section,
+    selectedKey = _ref2.selectedKey,
+    onKeyDown = _ref2.onKeyDown,
+    onSearchChange = _ref2.onSearchChange,
+    onSelect = _ref2.onSelect;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+    space: "space.200"
+  }, /*#__PURE__*/_react.default.createElement(_textfield.default, {
+    autoFocus: true,
+    "aria-controls": resultsId,
+    "aria-label": formatMessage({
+      defaultMessage: 'Search elements',
+      id: 'editor.quick-insert.search'
+    }),
+    name: "registry-element-browser-search",
+    onChange: onSearchChange,
+    onKeyDown: onKeyDown,
+    value: query
+  }), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    "aria-live": "polite"
+  }, formatMessage({
+    defaultMessage: '{count} results',
+    id: 'editor.quick-insert.results'
+  }, {
+    count: items.length
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    "aria-label": formatMessage({
+      defaultMessage: 'Element results',
+      id: 'editor.quick-insert.results-label'
+    }),
+    "data-testid": "registry-element-browser-results",
+    id: resultsId,
+    onKeyDown: onKeyDown,
+    tabIndex: -1,
+    role: items.length ? 'listbox' : undefined,
+    className: (0, _runtime.ax)(["_zulpu2gc _1e0c11p5 _yv0e13mt"])
+  }, items.length ? items.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(RegistryElementBrowserItem, {
+      editorView: editorView,
+      isOffline: isOffline,
+      isSelected: selectedKey === item.registration.key,
+      item: item,
+      key: item.registration.key,
+      onSelect: onSelect
+    });
+  }) : (_emptyStateHandler = emptyStateHandler === null || emptyStateHandler === void 0 ? void 0 : emptyStateHandler({
+    mode: 'full',
+    searchTerm: query,
+    selectedCategory: section
+  })) !== null && _emptyStateHandler !== void 0 ? _emptyStateHandler : /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+    alignInline: "center",
+    space: "space.100"
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, null, formatMessage({
+    defaultMessage: 'Nothing matches your search',
+    id: 'editor.quick-insert.empty'
+  })), /*#__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'
+  })))));
+};

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

@@ -0,0 +1,144 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RegistryElementBrowserContainer = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _isOfflineMode = require("@atlaskit/editor-common/connectivity/isOfflineMode");
+var _insert = require("@atlaskit/editor-common/insert");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _keys = require("@atlaskit/editor-common/quick-insert/keys");
+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 RegistryElementBrowserContainer = exports.RegistryElementBrowserContainer = function RegistryElementBrowserContainer(_ref) {
+  var _pluginKey$getState;
+  var editorView = _ref.editorView,
+    pluginInjectionAPI = _ref.pluginInjectionAPI,
+    helpUrl = _ref.helpUrl;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionAPI, ['quickInsert', 'connectivity'], function (state) {
+      var _state$quickInsertSta, _state$quickInsertSta2, _state$quickInsertSta3, _state$connectivitySt;
+      return {
+        isElementBrowserOpen: (_state$quickInsertSta = (_state$quickInsertSta2 = state.quickInsertState) === null || _state$quickInsertSta2 === void 0 ? void 0 : _state$quickInsertSta2.isElementBrowserOpen) !== null && _state$quickInsertSta !== void 0 ? _state$quickInsertSta : false,
+        emptyStateHandler: (_state$quickInsertSta3 = state.quickInsertState) === null || _state$quickInsertSta3 === void 0 ? void 0 : _state$quickInsertSta3.emptyStateHandler,
+        mode: (_state$connectivitySt = state.connectivityState) === null || _state$connectivitySt === void 0 ? void 0 : _state$connectivitySt.mode
+      };
+    }),
+    currentEmptyStateHandler = _useSharedPluginState.emptyStateHandler,
+    isElementBrowserOpen = _useSharedPluginState.isElementBrowserOpen,
+    mode = _useSharedPluginState.mode;
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    snapshot = _useState2[0],
+    setSnapshot = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    emptyStateHandler = _useState4[0],
+    setEmptyStateHandler = _useState4[1];
+  var wasOpen = (0, _react.useRef)(false);
+  var selectionHandler = (0, _react.useRef)(undefined);
+  var isInsertConfirmed = (0, _react.useRef)(false);
+  var lifecycleOpen = (0, _react.useRef)(false);
+  var fireLifecycleEvent = (0, _react.useCallback)(function (action) {
+    var _pluginInjectionAPI$a;
+    pluginInjectionAPI === null || pluginInjectionAPI === void 0 || (_pluginInjectionAPI$a = pluginInjectionAPI.analytics) === null || _pluginInjectionAPI$a === void 0 || _pluginInjectionAPI$a.actions.fireAnalyticsEvent({
+      action: action,
+      actionSubject: _analytics.ACTION_SUBJECT.ELEMENT_BROWSER,
+      attributes: {
+        mode: 'full'
+      },
+      eventType: _analytics.EVENT_TYPE.UI
+    });
+  }, [pluginInjectionAPI]);
+  (0, _react.useEffect)(function () {
+    if (isElementBrowserOpen && !wasOpen.current) {
+      var _pluginInjectionAPI$u, _pluginInjectionAPI$u2;
+      setSnapshot((_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 : []);
+      selectionHandler.current = undefined;
+      setEmptyStateHandler(function () {
+        return currentEmptyStateHandler;
+      });
+      isInsertConfirmed.current = false;
+      lifecycleOpen.current = true;
+      fireLifecycleEvent(_analytics.ACTION.OPENED);
+    } else if (!isElementBrowserOpen && wasOpen.current && lifecycleOpen.current) {
+      lifecycleOpen.current = false;
+      fireLifecycleEvent(_analytics.ACTION.CLOSED);
+    }
+    wasOpen.current = isElementBrowserOpen;
+  }, [currentEmptyStateHandler, fireLifecycleEvent, isElementBrowserOpen, pluginInjectionAPI]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (lifecycleOpen.current) {
+        lifecycleOpen.current = false;
+        fireLifecycleEvent(_analytics.ACTION.CLOSED);
+      }
+    };
+  }, [fireLifecycleEvent]);
+  var focusInEditor = (0, _react.useCallback)(function () {
+    if (!editorView.hasFocus()) {
+      editorView.focus();
+    }
+  }, [editorView]);
+  var onClose = (0, _react.useCallback)(function () {
+    if (!isInsertConfirmed.current) {
+      selectionHandler.current = undefined;
+    }
+    (0, _commands.closeElementBrowser)()(editorView.state, editorView.dispatch);
+    focusInEditor();
+  }, [editorView, focusInEditor]);
+  var onCloseComplete = (0, _react.useCallback)(function () {
+    var handler = isInsertConfirmed.current ? selectionHandler.current : undefined;
+    selectionHandler.current = undefined;
+    isInsertConfirmed.current = false;
+    focusInEditor();
+    if (!handler) {
+      return;
+    }
+    var insert = function insert(maybeNode) {
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      return (0, _insert.insertSelectedItem)(maybeNode, options)(editorView.state, editorView.state.tr, editorView.state.selection.head);
+    };
+    var transaction = handler({
+      insert: insert,
+      source: _analytics.INPUT_METHOD.ELEMENT_BROWSER
+    });
+    if (transaction) {
+      editorView.dispatch(transaction);
+    }
+  }, [editorView, focusInEditor]);
+  var onSelect = (0, _react.useCallback)(function (handler) {
+    selectionHandler.current = handler;
+  }, []);
+  var onClearSelection = (0, _react.useCallback)(function () {
+    selectionHandler.current = undefined;
+    isInsertConfirmed.current = false;
+  }, []);
+  var onConfirmInsert = (0, _react.useCallback)(function () {
+    if (!selectionHandler.current) {
+      return;
+    }
+    isInsertConfirmed.current = true;
+    onClose();
+  }, [onClose]);
+  return /*#__PURE__*/_react.default.createElement(_RegistryElementBrowser.RegistryElementBrowser, {
+    components: snapshot,
+    emptyStateHandler: emptyStateHandler,
+    helpUrl: helpUrl,
+    defaultSection: (_pluginKey$getState = _pluginKey.pluginKey.getState(editorView.state)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.elementBrowserInitialCategory,
+    editorView: editorView,
+    isOffline: (0, _isOfflineMode.isOfflineMode)(mode),
+    isOpen: isElementBrowserOpen,
+    onClearSelection: onClearSelection,
+    onClose: onClose,
+    onCloseComplete: onCloseComplete,
+    onConfirmInsert: onConfirmInsert,
+    onSelect: onSelect
+  });
+};