@atlaskit/editor-plugin-quick-insert 16.2.7 → 16.3.1

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

@@ -4,21 +4,29 @@ import "./RegistryElementBrowser.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
+import IconButton from '@atlaskit/button/icon/button';
 import Heading from '@atlaskit/heading/heading';
 import { MENU, RECOMMENDED_SECTION } from '@atlaskit/editor-common/quick-insert/keys';
 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 CrossIcon from '@atlaskit/icon/core/cross';
 import Modal from '@atlaskit/modal-dialog/modal-dialog';
 import ModalBody from '@atlaskit/modal-dialog/modal-body';
 import ModalFooter from '@atlaskit/modal-dialog/modal-footer';
 import ModalHeader from '@atlaskit/modal-dialog/modal-header';
 import ModalTransition from '@atlaskit/modal-dialog/modal-transition';
+import Textfield from '@atlaskit/textfield/text-field';
 import { createRegistryElementBrowserModel, getInitialRegistryElementBrowserSection, getRegistryElementBrowserItems } from './model';
 import { RegistryElementBrowserCategories } from './RegistryElementBrowserCategories';
 import { RegistryElementBrowserFooter } from './RegistryElementBrowserFooter';
 import { RegistryElementBrowserSearchResults } from './RegistryElementBrowserSearchResults';
+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 resultsId = 'registry-element-browser-results';
+var modalTestId = 'registry-element-browser-modal';
 export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
   var components = _ref.components,
     emptyStateHandler = _ref.emptyStateHandler,
@@ -60,6 +68,7 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     selectedKey = _useState6[0],
     setSelectedKey = _useState6[1];
+  var searchInputRef = useRef(null);
   var wasOpen = useRef(false);
   var previousIsOffline = useRef(isOffline);
   useEffect(function () {
@@ -78,7 +87,7 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
       formatMessage: formatMessage,
       model: model,
       query: query,
-      section: query ? undefined : section
+      section: section
     });
   }, [formatMessage, model, query, section]);
   useEffect(function () {
@@ -90,7 +99,6 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
   }, [isOffline, onClearSelection]);
   var onSearchChange = useCallback(function (event) {
     setQuery(event.currentTarget.value);
-    setSection(undefined);
     setSelectedKey(undefined);
     onClearSelection();
   }, [onClearSelection]);
@@ -100,10 +108,26 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
     setSelectedKey(undefined);
     onClearSelection();
   }, [onClearSelection]);
+  var onClearSearch = useCallback(function () {
+    var _searchInputRef$curre;
+    setQuery('');
+    setSelectedKey(undefined);
+    onClearSelection();
+    (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 || _searchInputRef$curre.focus();
+  }, [onClearSelection]);
   var onRegistrySelect = useCallback(function (key, handler) {
     setSelectedKey(key);
     onSelect(handler);
   }, [onSelect]);
+  var onModalOpenComplete = useCallback(function (node) {
+    node.style.borderRadius = "var(--ds-radius-large, 8px)";
+    var footer = node.querySelector("[data-testid=\"".concat(modalTestId, "--footer\"]"));
+    footer === null || footer === void 0 || footer.style.setProperty('box-sizing', 'border-box');
+    footer === null || footer === void 0 || footer.style.setProperty('height', '64px');
+    footer === null || footer === void 0 || footer.style.setProperty('padding-block', "var(--ds-space-200, 16px)");
+    var scrollableBody = node.querySelector("[data-testid=\"".concat(modalTestId, "--scrollable\"]"));
+    scrollableBody === null || scrollableBody === void 0 || scrollableBody.style.setProperty('border-block-end', 'none');
+  }, []);
   var onKeyDown = useCallback(function (event) {
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       var _resultCollection$que;
@@ -135,18 +159,46 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
       defaultMessage: 'Insert elements',
       id: 'editor.quick-insert.title'
     }),
+    height: "664px",
     onClose: onClose,
     onCloseComplete: onCloseComplete,
-    width: "x-large"
-  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(Heading, {
+    onOpenComplete: onModalOpenComplete,
+    testId: modalTestId,
+    width: "min(968px, calc(100vw - 32px))"
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_zulp1fka _1e0c11p5 _yv0e1xuv _1bsb1osq _lk4ji47z"])
+  }, /*#__PURE__*/React.createElement(Heading, {
     size: "medium"
   }, formatMessage({
     defaultMessage: 'Insert elements',
     id: 'editor.quick-insert.title'
-  }))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
-    className: ax(["_zulp1ejb _1e0c11p5 _yv0eo9bh"])
+  })), /*#__PURE__*/React.createElement("div", {
+    className: ax(["_zulp1ejb _4cvr1h6o _1e0c11p5 _yv0ehpfy _1bsb1osq"])
+  }, /*#__PURE__*/React.createElement(Textfield, {
+    autoFocus: true,
+    "aria-controls": resultsId,
+    "aria-label": formatMessage({
+      defaultMessage: 'Search elements',
+      id: 'editor.quick-insert.search'
+    }),
+    isCompact: true,
+    name: "registry-element-browser-search",
+    onChange: onSearchChange,
+    onKeyDown: onKeyDown,
+    ref: searchInputRef,
+    value: query
+  }), /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "subtle",
+    icon: CrossIcon,
+    label: formatMessage({
+      defaultMessage: 'Clear search',
+      id: 'editor.quick-insert.clear-search'
+    }),
+    onClick: onClearSearch,
+    spacing: "compact"
+  })))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_zulp1fka _1e0c11p5 _yv0e1xuv _lk4ji47z"])
   }, /*#__PURE__*/React.createElement(RegistryElementBrowserCategories, {
-    query: query,
     section: section,
     sections: model.sections,
     onSectionClick: onSectionClick
@@ -160,12 +212,12 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
     section: section,
     selectedKey: selectedKey,
     onKeyDown: onKeyDown,
-    onSearchChange: onSearchChange,
     onSelect: onRegistrySelect
   }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(RegistryElementBrowserFooter, {
     helpUrl: helpUrl,
     isInsertEnabled: Boolean(selectedKey),
     onClose: onClose,
-    onConfirmInsert: onConfirmInsert
+    onConfirmInsert: onConfirmInsert,
+    resultCount: items.length
   }))));
 };

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

@@ -1,2 +1,4 @@
 ._zulpu2gc{gap:var(--ds-space-100,8px)}._1e0c11p5{display:grid}
-._yv0e9sye{grid-template-columns:repeat(2,minmax(0,1fr))}
+._ae4vv2br{align-content:start}
+._yv0ei47z{grid-template-columns:minmax(0,1fr)}
+@media (max-width:599px){._1w2e1ris{grid-auto-columns:max-content}._1ato1bp4{grid-auto-flow:column}._lk4jglyw{grid-template-columns:none}._1cgyi47z{grid-template-rows:minmax(0,1fr)}._1s8e1wug{overflow-x:auto}._pevy15vq{overflow-y:hidden}}

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

@@ -10,36 +10,39 @@ import { messages } from '@atlaskit/editor-common/quick-insert/messages';
 var sectionMessages = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, BLOCK_TEMPLATES_SECTION.key, messages.categoryBlockTemplates), DATA_AND_CHARTS_SECTION.key, messages.categoryDataAndCharts), EMBED_SECTION.key, messages.categoryEmbed), MEDIA_SECTION.key, messages.categoryMedia), OTHER_SECTION.key, messages.categoryOther), ROVO_SECTION.key, messages.categoryRovo), STRUCTURE_SECTION.key, messages.categoryStructure), TEXT_FORMATTING_SECTION.key, messages.categoryTextFormatting);
 var categoryGridStyles = null;
 export var RegistryElementBrowserCategories = function RegistryElementBrowserCategories(_ref) {
-  var query = _ref.query,
-    section = _ref.section,
+  var section = _ref.section,
     sections = _ref.sections,
     onSectionClick = _ref.onSectionClick;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  var isAllSelected = section === undefined && !query;
+  var isAllSelected = section === undefined;
   return /*#__PURE__*/React.createElement("div", {
     "aria-label": formatMessage({
       defaultMessage: 'Element categories',
       id: 'editor.quick-insert.categories-label'
     }),
     "data-testid": "registry-element-browser-categories",
-    className: ax(["_zulpu2gc _1e0c11p5 _yv0e9sye"])
+    className: ax(["_zulpu2gc _ae4vv2br _1e0c11p5 _yv0ei47z _1w2e1ris _1ato1bp4 _lk4jglyw _1cgyi47z _1s8e1wug _pevy15vq"])
   }, /*#__PURE__*/React.createElement(Button, {
-    appearance: isAllSelected ? 'primary' : 'subtle',
+    appearance: 'subtle',
     "aria-pressed": isAllSelected,
     "data-section": "",
-    onClick: onSectionClick
+    onClick: onSectionClick,
+    isSelected: isAllSelected,
+    shouldFitContainer: true
   }, formatMessage({
     defaultMessage: 'All',
     id: 'editor.quick-insert.all'
   })), sections.map(function (entry) {
     var _sectionMessages2;
     return /*#__PURE__*/React.createElement(Button, {
-      appearance: section === entry.key && !query ? 'primary' : 'subtle',
-      "aria-pressed": section === entry.key && !query,
+      appearance: 'subtle',
+      "aria-pressed": section === entry.key,
       "data-section": entry.key,
       key: entry.key,
-      onClick: onSectionClick
+      onClick: onSectionClick,
+      isSelected: section === entry.key,
+      shouldFitContainer: true
     }, formatMessage((_sectionMessages2 = sectionMessages[entry.key]) !== null && _sectionMessages2 !== void 0 ? _sectionMessages2 : messages.categoryOther));
   }));
 };

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

@@ -2,32 +2,50 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import Button from '@atlaskit/button/default/button';
 import LinkButton from '@atlaskit/button/link';
+import { Inline, Text } from '@atlaskit/primitives/compiled';
 export var RegistryElementBrowserFooter = function RegistryElementBrowserFooter(_ref) {
   var helpUrl = _ref.helpUrl,
     isInsertEnabled = _ref.isInsertEnabled,
     onClose = _ref.onClose,
-    onConfirmInsert = _ref.onConfirmInsert;
+    onConfirmInsert = _ref.onConfirmInsert,
+    resultCount = _ref.resultCount;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, helpUrl && /*#__PURE__*/React.createElement(LinkButton, {
+  return /*#__PURE__*/React.createElement(Inline, {
+    alignBlock: "center",
+    grow: "fill",
+    spread: "space-between"
+  }, /*#__PURE__*/React.createElement(Inline, {
+    alignBlock: "center",
+    space: "space.100"
+  }, /*#__PURE__*/React.createElement(Text, {
+    color: "color.text.subtlest"
+  }, formatMessage({
+    defaultMessage: '{count, plural, one {# result available} other {# results available}}',
+    id: 'editor.quick-insert.results-available'
+  }, {
+    count: resultCount
+  })), helpUrl && /*#__PURE__*/React.createElement(LinkButton, {
     appearance: "subtle",
     href: helpUrl,
     target: "_blank"
   }, formatMessage({
     defaultMessage: 'Help',
     id: 'editor.quick-insert.help'
-  })), /*#__PURE__*/React.createElement(Button, {
-    appearance: "subtle",
-    onClick: onClose
-  }, formatMessage({
-    defaultMessage: 'Close',
-    id: 'editor.quick-insert.close'
-  })), /*#__PURE__*/React.createElement(Button, {
+  }))), /*#__PURE__*/React.createElement(Inline, {
+    space: "space.100"
+  }, /*#__PURE__*/React.createElement(Button, {
     appearance: "primary",
     isDisabled: !isInsertEnabled,
     onClick: onConfirmInsert
   }, formatMessage({
     defaultMessage: 'Insert',
     id: 'editor.quick-insert.insert'
-  })));
+  })), /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    onClick: onClose
+  }, formatMessage({
+    defaultMessage: 'Close',
+    id: 'editor.quick-insert.close'
+  }))));
 };

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

@@ -1,2 +1,20 @@
-._zulpu2gc{gap:var(--ds-space-100,8px)}._1e0c11p5{display:grid}
-._yv0e13mt{grid-template-columns:repeat(3,minmax(0,1fr))}
+._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}
+._19pk1ejb{margin-top:var(--ds-space-300,24px)}
+._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}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4cvrv2br{align-items:start}
+._ae4vv2br{align-content:start}
+._p12f1kdj{max-width:25pc}
+._syazi7uo{color:var(--ds-text,#292a2e)}
+._y3gn1h6o{text-align:center}
+._yv0ei47z{grid-template-columns:minmax(0,1fr)}
+@media (min-width:550px) and (max-width:1023px){._16409sye{grid-template-columns:repeat(2,minmax(0,1fr))}}
+@media (min-width:1024px){._g98o1koq{grid-template-columns:repeat(3,232px)}}

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

@@ -5,9 +5,13 @@ import React, { useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import LinkButton from '@atlaskit/button/link';
 import { QuickInsertProvider } from '@atlaskit/editor-common/quick-insert/provider';
-import { Stack, Text } from '@atlaskit/primitives/compiled';
-import Textfield from '@atlaskit/textfield/text-field';
+import { Text } from '@atlaskit/primitives/compiled';
+import NotFoundIllustration from './NotFoundIllustration';
 var resultsGridStyles = null;
+var emptyStateWrapperStyles = null;
+var emptyStateHeadingStyles = null;
+var emptyStateSubheadingStyles = null;
+var emptyStateLinkStyles = null;
 var RegistryElementBrowserItem = function RegistryElementBrowserItem(_ref) {
   var editorView = _ref.editorView,
     isOffline = _ref.isOffline,
@@ -22,6 +26,7 @@ var RegistryElementBrowserItem = function RegistryElementBrowserItem(_ref) {
       editorView: editorView,
       isOffline: isOffline,
       item: {
+        description: item.description,
         id: key,
         isSelected: isSelected
       },
@@ -30,7 +35,7 @@ var RegistryElementBrowserItem = function RegistryElementBrowserItem(_ref) {
       },
       surface: 'element-browser'
     };
-  }, [editorView, isOffline, isSelected, key, onSelect]);
+  }, [editorView, isOffline, isSelected, item.description, key, onSelect]);
   if (!Component) {
     return null;
   }
@@ -49,31 +54,10 @@ export var RegistryElementBrowserSearchResults = function RegistryElementBrowser
     section = _ref2.section,
     selectedKey = _ref2.selectedKey,
     onKeyDown = _ref2.onKeyDown,
-    onSearchChange = _ref2.onSearchChange,
     onSelect = _ref2.onSelect;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  return /*#__PURE__*/React.createElement(Stack, {
-    space: "space.200"
-  }, /*#__PURE__*/React.createElement(Textfield, {
-    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.createElement(Text, {
-    "aria-live": "polite"
-  }, formatMessage({
-    defaultMessage: '{count} results',
-    id: 'editor.quick-insert.results'
-  }, {
-    count: items.length
-  })), /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     "aria-label": formatMessage({
       defaultMessage: 'Element results',
       id: 'editor.quick-insert.results-label'
@@ -83,7 +67,7 @@ export var RegistryElementBrowserSearchResults = function RegistryElementBrowser
     onKeyDown: onKeyDown,
     tabIndex: -1,
     role: items.length ? 'listbox' : undefined,
-    className: ax(["_zulpu2gc _1e0c11p5 _yv0e13mt"])
+    className: ax(["_zulpu2gc _ae4vv2br _4cvrv2br _1e0c11p5 _yv0ei47z _16409sye _g98o1koq"])
   }, items.length ? items.map(function (item) {
     return /*#__PURE__*/React.createElement(RegistryElementBrowserItem, {
       editorView: editorView,
@@ -97,18 +81,26 @@ export var RegistryElementBrowserSearchResults = function RegistryElementBrowser
     mode: 'full',
     searchTerm: query,
     selectedCategory: section
-  })) !== null && _emptyStateHandler !== void 0 ? _emptyStateHandler : /*#__PURE__*/React.createElement(Stack, {
-    alignInline: "center",
-    space: "space.100"
-  }, /*#__PURE__*/React.createElement(Text, null, formatMessage({
+  })) !== null && _emptyStateHandler !== void 0 ? _emptyStateHandler : /*#__PURE__*/React.createElement("div", {
+    className: ax(["_yyhyjvu9 _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(LinkButton, {
+  })), /*#__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'
-  })))));
+  }))))));
 };

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

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { createQuickInsertMatcher } from '@atlaskit/editor-common/quick-insert/create-quick-insert-matcher';
 var compareRanks = function compareRanks(left, right) {
   for (var index = 0; index < Math.max(left.length, right.length); index++) {
     var _left$index, _right$index;
@@ -104,10 +105,16 @@ export var getRegistryElementBrowserItems = function getRegistryElementBrowserIt
   var items = section ? model.items.filter(function (item) {
     return item.sectionKeys.includes(section);
   }) : model.items;
+  var itemsWithDescriptions = items.map(function (item) {
+    var _createQuickInsertMat;
+    return _objectSpread(_objectSpread({}, item), {}, {
+      description: (_createQuickInsertMat = createQuickInsertMatcher.getDescription) === null || _createQuickInsertMat === void 0 ? void 0 : _createQuickInsertMat.call(createQuickInsertMatcher, item.registration.match, formatMessage)
+    });
+  });
   if (!normalizedQuery) {
-    return items;
+    return itemsWithDescriptions;
   }
-  return items.flatMap(function (item) {
+  return itemsWithDescriptions.flatMap(function (item) {
     var _item$registration$ma, _item$registration;
     var result = (_item$registration$ma = (_item$registration = item.registration).match) === null || _item$registration$ma === void 0 ? void 0 : _item$registration$ma.call(_item$registration, {
       formatMessage: formatMessage,

package/dist/types/quickInsertPluginType.d.ts

@@ -9,7 +9,15 @@ import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control
 export type QuickInsertSharedState = CommonQuickInsertSharedState & {
     typeAheadHandler: TypeAheadHandler;
 };
-export type QuickInsertPluginOptions = CommonQuickInsertPluginOptions;
+export type QuickInsertPluginOptions = CommonQuickInsertPluginOptions & {
+    /**
+     * Enables the floating quick insert button, which appears inline alongside content in the editor.
+     *
+     * Warning: This option replaces the current block control plugin config `blockControls.quickInsertButtonEnabled`
+     * and is only available when `platform_editor_block_control_migration` experiment is enabled.
+     */
+    blockControlButtonEnabled?: boolean;
+};
 export type OpenElementBrowserOptions = {
     category?: string;
 };

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

@@ -0,0 +1 @@
+export default function NotFoundIllustration(): JSX.Element;

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

@@ -6,9 +6,8 @@ import React from 'react';
 import type { RegistryElementBrowserSection } from './model';
 type Props = {
     onSectionClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    query: string;
     section?: string;
     sections: RegistryElementBrowserSection[];
 };
-export declare const RegistryElementBrowserCategories: ({ query, section, sections, onSectionClick, }: Props) => React.JSX.Element;
+export declare const RegistryElementBrowserCategories: ({ section, sections, onSectionClick, }: Props) => React.JSX.Element;
 export {};

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

@@ -4,6 +4,7 @@ type Props = {
     isInsertEnabled: boolean;
     onClose: () => void;
     onConfirmInsert: () => void;
+    resultCount: number;
 };
-export declare const RegistryElementBrowserFooter: ({ helpUrl, isInsertEnabled, onClose, onConfirmInsert, }: Props) => React.JSX.Element;
+export declare const RegistryElementBrowserFooter: ({ helpUrl, isInsertEnabled, onClose, onConfirmInsert, resultCount, }: Props) => React.JSX.Element;
 export {};

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

@@ -13,7 +13,6 @@ type Props = {
     isOffline: boolean;
     items: RegistryElementBrowserItem[];
     onKeyDown: (event: React.KeyboardEvent) => void;
-    onSearchChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onSelect: (key: string, handler: QuickInsertSelectionHandler) => void;
     query: string;
     resultsId: string;
@@ -27,5 +26,5 @@ declare const RegistryElementBrowserItem: ({ editorView, isOffline, isSelected,
     item: RegistryElementBrowserItem;
     onSelect: (key: string, handler: QuickInsertSelectionHandler) => void;
 }) => React.JSX.Element | null;
-export declare const RegistryElementBrowserSearchResults: ({ editorView, emptyStateHandler, isOffline, items, query, resultsId, section, selectedKey, onKeyDown, onSearchChange, onSelect, }: Props) => React.JSX.Element;
+export declare const RegistryElementBrowserSearchResults: ({ editorView, emptyStateHandler, isOffline, items, query, resultsId, section, selectedKey, onKeyDown, onSelect, }: Props) => React.JSX.Element;
 export {};

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

@@ -4,6 +4,7 @@ export type RegistryElementBrowserSection = {
     rank: number;
 };
 export type RegistryElementBrowserItem = {
+    description?: string;
     ranks: number[];
     registration: RegisterMenuItem;
     sectionKeys: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-quick-insert",
-	"version": "16.2.7",
+	"version": "16.3.1",
 	"description": "Quick insert plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,7 +38,7 @@
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/textfield": "^10.2.0",
-		"@atlaskit/tmp-editor-statsig": "^174.0.0",
+		"@atlaskit/tmp-editor-statsig": "^176.0.0",
 		"@atlaskit/tokens": "^16.11.0",
 		"@atlaskit/tooltip": "^24.3.0",
 		"@babel/runtime": "^7.0.0",
@@ -46,7 +46,7 @@
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^120.12.0",
+		"@atlaskit/editor-common": "^120.16.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"