@atlaskit/editor-plugin-quick-insert 22.0.9 → 22.0.10

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-quick-insert
 
+## 22.0.10
+
+### Patch Changes
+
+- [`b90341d10ef81`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b90341d10ef81) -
+  Fix element browser cards, keyboard selection, and small-screen categories under
+  platform_editor_slash_command
+- Updated dependencies
+
 ## 22.0.9
 
 ### Patch Changes

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

@@ -1,6 +1,8 @@
 ._zulp1ejb{gap:var(--ds-space-300,24px)}
-._zulp1fka{gap:calc(var(--ds-space-200, 1pc) + var(--ds-space-150, 9pt))}._1bsb1osq{width:100%}
+._zulp1fka{gap:calc(var(--ds-space-200, 1pc) + var(--ds-space-150, 9pt))}._18zr1b66{padding-inline:var(--ds-space-050,4px)}
+._1bsb1osq{width:100%}
 ._1e0c11p5{display:grid}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
 ._4cvr1h6o{align-items:center}
 ._yv0e1xuv{grid-template-columns:182px minmax(0,1fr)}
 ._yv0ehpfy{grid-template-columns:minmax(0,1fr) auto}

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

@@ -39,6 +39,14 @@ var headerContentStyles = null;
 var headerSearchStyles = null;
 var resultsId = 'registry-element-browser-results';
 var modalTestId = 'registry-element-browser-modal';
+var getRenderedColumnCount = function getRenderedColumnCount(options) {
+  var _options$;
+  var firstRowTop = (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.getBoundingClientRect().top;
+  var nextRowIndex = options.findIndex(function (option) {
+    return firstRowTop !== undefined && option.getBoundingClientRect().top > firstRowTop + 1;
+  });
+  return nextRowIndex > 0 ? nextRowIndex : options.length;
+};
 var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryElementBrowser(_ref) {
   var _model$fallbackItems$, _model$fallbackItems;
   var components = _ref.components,
@@ -84,6 +92,7 @@ var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryE
     selectedKey = _useState6[0],
     setSelectedKey = _useState6[1];
   var searchInputRef = (0, _react.useRef)(null);
+  var selectedCategoryRef = (0, _react.useRef)(null);
   var wasOpen = (0, _react.useRef)(false);
   var previousIsOffline = (0, _react.useRef)(isOffline);
   (0, _react.useEffect)(function () {
@@ -139,18 +148,40 @@ var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryE
     scrollableBody === null || scrollableBody === void 0 || scrollableBody.style.setProperty('border-block-end', 'none');
   }, []);
   var onKeyDown = (0, _react.useCallback)(function (event) {
-    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+    if (event.key === 'Tab' && event.shiftKey && event.target instanceof HTMLElement && event.target.getAttribute('role') === 'option') {
+      var _selectedCategoryRef$;
+      event.preventDefault();
+      (_selectedCategoryRef$ = selectedCategoryRef.current) === null || _selectedCategoryRef$ === void 0 || _selectedCategoryRef$.focus();
+      return;
+    }
+    if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
       var _resultCollection$que;
+      if (event.currentTarget === searchInputRef.current && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+        return;
+      }
       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 options = Array.from((_resultCollection$que = resultCollection === null || resultCollection === void 0 ? void 0 : resultCollection.querySelectorAll('[role="option"]')) !== 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);
+      var columnCount = getRenderedColumnCount(options);
+      var step = event.key === 'ArrowDown' ? columnCount : event.key === 'ArrowUp' ? -columnCount : event.key === 'ArrowRight' ? 1 : -1;
+      var nextIndex = currentIndex < 0 ? 0 : currentIndex + step;
+      if (event.key === 'ArrowDown' && columnCount < options.length) {
+        nextIndex = Math.min(nextIndex, options.length - 1);
+      }
+      while (nextIndex >= 0 && nextIndex < options.length && (options[nextIndex].hasAttribute('disabled') || options[nextIndex].getAttribute('aria-disabled') === 'true')) {
+        nextIndex += step;
+      }
+      var nextOption = options[nextIndex];
       if (nextOption) {
         event.preventDefault();
         nextOption.focus();
+        nextOption.click();
+      } else if (nextIndex < 0 && currentIndex >= 0) {
+        var _searchInputRef$curre;
+        event.preventDefault();
+        (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 || _searchInputRef$curre.focus();
       }
       return;
     }
@@ -159,9 +190,18 @@ var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryE
       onClose();
       return;
     }
-    if (event.key === 'Enter' && selectedKey) {
-      event.preventDefault();
-      onConfirmInsert();
+    if (event.key === 'Enter') {
+      var _event$currentTarget$;
+      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) {
+        event.preventDefault();
+        if (!selectedKey) {
+          optionToActivate === null || optionToActivate === void 0 || optionToActivate.click();
+        }
+        onConfirmInsert();
+      }
     }
   }, [onClose, onConfirmInsert, selectedKey]);
   return /*#__PURE__*/_react.default.createElement(_modalTransition.default, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
@@ -207,11 +247,12 @@ var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryE
     onClick: onClose,
     spacing: "compact"
   })))), /*#__PURE__*/_react.default.createElement(_modalBody.default, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)(["_zulp1fka _1e0c11p5 _yv0e1xuv _lk4ji47z"])
+    className: (0, _runtime.ax)(["_zulp1fka _18zr1b66 _1e0c11p5 _yv0e1xuv _1q511b66 _lk4ji47z"])
   }, /*#__PURE__*/_react.default.createElement(_RegistryElementBrowserCategories.RegistryElementBrowserCategories, {
     section: section,
     sections: model.sections,
-    onSectionClick: onSectionClick
+    onSectionClick: onSectionClick,
+    selectedButtonRef: selectedCategoryRef
   }), /*#__PURE__*/_react.default.createElement(_RegistryElementBrowserSearchResults.RegistryElementBrowserSearchResults, {
     editorView: editorView,
     emptyStateHandler: emptyStateHandler,

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

@@ -1,7 +1,10 @@
-._zulpu2gc{gap:var(--ds-space-100,8px)}._154iv77o{top:var(--ds-space-025,2px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._18zr1b66{padding-inline:var(--ds-space-050,4px)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}._154iidpf{top:0}
 ._1e0c11p5{display:grid}
+._1ul9idpf{min-width:0}
 ._1wpzv2br{align-self:start}
 ._ae4vv2br{align-content:start}
 ._kqsw1if8{position:sticky}
 ._yv0ei47z{grid-template-columns:minmax(0,1fr)}
-@media (max-width:599px){._qs0g1bhr{background-color:var(--ds-surface-overlay,#fff)}._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}._zvu9kb7n{z-index:1}}
+@media (max-width:599px){._qs0g1bhr{background-color:var(--ds-surface-overlay,#fff)}._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}._dl261osq{width:100%}._zvu9kb7n{z-index:1}}

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

@@ -2,6 +2,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,35 +10,54 @@ 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 _react = _interopRequireWildcard(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 _text = require("@atlaskit/primitives/compiled/text");
+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 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 section = _ref.section,
     sections = _ref.sections,
-    onSectionClick = _ref.onSectionClick;
+    onSectionClick = _ref.onSectionClick,
+    selectedButtonRef = _ref.selectedButtonRef;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var isAllSelected = section === undefined;
+  var onCategoryKeyDown = (0, _react.useCallback)(function (event) {
+    var _event$currentTarget$, _event$currentTarget$2, _event$currentTarget$3, _event$currentTarget$4;
+    if (!['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+      return;
+    }
+    var isForward = event.key === 'ArrowDown' || event.key === 'ArrowRight';
+    var nextButton = isForward ? (_event$currentTarget$ = event.currentTarget.nextElementSibling) !== null && _event$currentTarget$ !== void 0 ? _event$currentTarget$ : (_event$currentTarget$2 = event.currentTarget.parentElement) === null || _event$currentTarget$2 === void 0 ? void 0 : _event$currentTarget$2.firstElementChild : (_event$currentTarget$3 = event.currentTarget.previousElementSibling) !== null && _event$currentTarget$3 !== void 0 ? _event$currentTarget$3 : (_event$currentTarget$4 = event.currentTarget.parentElement) === null || _event$currentTarget$4 === void 0 ? void 0 : _event$currentTarget$4.lastElementChild;
+    if (nextButton) {
+      event.preventDefault();
+      nextButton.focus();
+      nextButton.click();
+    }
+  }, []);
   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 _ae4vv2br _1wpzv2br _1e0c11p5 _yv0ei47z _kqsw1if8 _154iv77o _qs0g1bhr _1w2e1ris _1ato1bp4 _lk4jglyw _1cgyi47z _1s8e1wug _pevy15vq _zvu9kb7n"])
+    role: "group",
+    className: (0, _runtime.ax)(["_zulpu2gc _1rjc1b66 _18zr1b66 _ae4vv2br _1wpzv2br _1e0c11p5 _yv0ei47z _1ul9idpf _kqsw1if8 _154iidpf _qs0g1bhr _1w2e1ris _1ato1bp4 _lk4jglyw _1cgyi47z _1s8e1wug _pevy15vq _dl261osq _zvu9kb7n"])
   }, /*#__PURE__*/_react.default.createElement(_button.default, {
     appearance: 'subtle',
     "aria-pressed": isAllSelected,
     "data-section": "",
     onClick: onSectionClick,
+    onKeyDown: onCategoryKeyDown,
+    ref: isAllSelected ? selectedButtonRef : undefined,
     isSelected: isAllSelected,
-    shouldFitContainer: true
+    shouldFitContainer: true,
+    tabIndex: isAllSelected ? 0 : -1
   }, /*#__PURE__*/_react.default.createElement(_text.Text, {
     align: "start",
     color: "inherit",
@@ -54,8 +74,11 @@ var RegistryElementBrowserCategories = exports.RegistryElementBrowserCategories
       "data-section": entry.key,
       key: entry.key,
       onClick: onSectionClick,
+      onKeyDown: onCategoryKeyDown,
+      ref: section === entry.key ? selectedButtonRef : undefined,
       isSelected: section === entry.key,
-      shouldFitContainer: true
+      shouldFitContainer: true,
+      tabIndex: section === entry.key ? 0 : -1
     }, /*#__PURE__*/_react.default.createElement(_text.Text, {
       align: "start",
       color: "inherit",

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

@@ -81,7 +81,7 @@ var RegistryElementBrowserSearchResults = exports.RegistryElementBrowserSearchRe
     defaultMessage: 'Element results',
     id: 'editor.quick-insert.results-label'
   });
-  var displayedItems = hasFallbackItems ? fallbackItems !== null && fallbackItems !== void 0 ? fallbackItems : [] : items;
+  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({
     mode: 'full',
@@ -117,9 +117,15 @@ var RegistryElementBrowserSearchResults = exports.RegistryElementBrowserSearchRe
     tabIndex: -1
   }, displayedItems.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     "aria-label": resultsLabel,
+    onFocus: function onFocus(event) {
+      if (event.target === event.currentTarget) {
+        var _event$currentTarget$;
+        (_event$currentTarget$ = event.currentTarget.querySelector('[role="option"]:not([aria-disabled="true"]):not([disabled])')) === null || _event$currentTarget$ === void 0 || _event$currentTarget$.focus();
+      }
+    },
     onKeyDown: onKeyDown,
     role: "listbox",
-    tabIndex: -1,
+    tabIndex: 0,
     className: (0, _runtime.ax)(["_zulpu2gc _ae4vv2br _4cvrv2br _1e0c11p5 _yv0ei47z _16409sye _g98o1koq"])
   }, displayedItems.map(function (item) {
     return /*#__PURE__*/_react.default.createElement(RegistryElementBrowserItem, {

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

@@ -1,6 +1,8 @@
 ._zulp1ejb{gap:var(--ds-space-300,24px)}
-._zulp1fka{gap:calc(var(--ds-space-200, 1pc) + var(--ds-space-150, 9pt))}._1bsb1osq{width:100%}
+._zulp1fka{gap:calc(var(--ds-space-200, 1pc) + var(--ds-space-150, 9pt))}._18zr1b66{padding-inline:var(--ds-space-050,4px)}
+._1bsb1osq{width:100%}
 ._1e0c11p5{display:grid}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
 ._4cvr1h6o{align-items:center}
 ._yv0e1xuv{grid-template-columns:182px minmax(0,1fr)}
 ._yv0ehpfy{grid-template-columns:minmax(0,1fr) auto}

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

@@ -29,6 +29,12 @@ const headerContentStyles = null;
 const headerSearchStyles = null;
 const resultsId = 'registry-element-browser-results';
 const modalTestId = 'registry-element-browser-modal';
+const getRenderedColumnCount = options => {
+  var _options$;
+  const firstRowTop = (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.getBoundingClientRect().top;
+  const nextRowIndex = options.findIndex(option => firstRowTop !== undefined && option.getBoundingClientRect().top > firstRowTop + 1);
+  return nextRowIndex > 0 ? nextRowIndex : options.length;
+};
 export const RegistryElementBrowser = ({
   components,
   emptyStateHandler,
@@ -58,6 +64,7 @@ export const RegistryElementBrowser = ({
   const [section, setSection] = useState(() => getInitialRegistryElementBrowserSection(model, defaultSection));
   const [selectedKey, setSelectedKey] = useState();
   const searchInputRef = useRef(null);
+  const selectedCategoryRef = useRef(null);
   const wasOpen = useRef(false);
   const previousIsOffline = useRef(isOffline);
   useEffect(() => {
@@ -111,16 +118,38 @@ export const RegistryElementBrowser = ({
     scrollableBody === null || scrollableBody === void 0 ? void 0 : scrollableBody.style.setProperty('border-block-end', 'none');
   }, []);
   const onKeyDown = useCallback(event => {
-    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+    if (event.key === 'Tab' && event.shiftKey && event.target instanceof HTMLElement && event.target.getAttribute('role') === 'option') {
+      var _selectedCategoryRef$;
+      event.preventDefault();
+      (_selectedCategoryRef$ = selectedCategoryRef.current) === null || _selectedCategoryRef$ === void 0 ? void 0 : _selectedCategoryRef$.focus();
+      return;
+    }
+    if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
       var _resultCollection$que;
+      if (event.currentTarget === searchInputRef.current && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+        return;
+      }
       const resultCollection = event.currentTarget.ownerDocument.getElementById(resultsId);
-      const 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 : []);
+      const options = Array.from((_resultCollection$que = resultCollection === null || resultCollection === void 0 ? void 0 : resultCollection.querySelectorAll('[role="option"]')) !== null && _resultCollection$que !== void 0 ? _resultCollection$que : []);
       const currentIndex = options.findIndex(option => option === event.currentTarget.ownerDocument.activeElement);
-      const nextIndex = event.key === 'ArrowDown' ? currentIndex + 1 : currentIndex - 1;
-      const nextOption = options.at(nextIndex);
+      const columnCount = getRenderedColumnCount(options);
+      const step = event.key === 'ArrowDown' ? columnCount : event.key === 'ArrowUp' ? -columnCount : event.key === 'ArrowRight' ? 1 : -1;
+      let nextIndex = currentIndex < 0 ? 0 : currentIndex + step;
+      if (event.key === 'ArrowDown' && columnCount < options.length) {
+        nextIndex = Math.min(nextIndex, options.length - 1);
+      }
+      while (nextIndex >= 0 && nextIndex < options.length && (options[nextIndex].hasAttribute('disabled') || options[nextIndex].getAttribute('aria-disabled') === 'true')) {
+        nextIndex += step;
+      }
+      const nextOption = options[nextIndex];
       if (nextOption) {
         event.preventDefault();
         nextOption.focus();
+        nextOption.click();
+      } else if (nextIndex < 0 && currentIndex >= 0) {
+        var _searchInputRef$curre;
+        event.preventDefault();
+        (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();
       }
       return;
     }
@@ -129,9 +158,18 @@ export const RegistryElementBrowser = ({
       onClose();
       return;
     }
-    if (event.key === 'Enter' && selectedKey) {
-      event.preventDefault();
-      onConfirmInsert();
+    if (event.key === 'Enter') {
+      var _event$currentTarget$;
+      const focusedOption = event.target instanceof HTMLElement ? event.target.closest('[role="option"]') : null;
+      const firstOption = (_event$currentTarget$ = event.currentTarget.ownerDocument.getElementById(resultsId)) === null || _event$currentTarget$ === void 0 ? void 0 : _event$currentTarget$.querySelector('[role="option"]:not([aria-disabled="true"]):not([disabled])');
+      const optionToActivate = focusedOption !== null && focusedOption !== void 0 ? focusedOption : firstOption;
+      if (selectedKey || optionToActivate) {
+        event.preventDefault();
+        if (!selectedKey) {
+          optionToActivate === null || optionToActivate === void 0 ? void 0 : optionToActivate.click();
+        }
+        onConfirmInsert();
+      }
     }
   }, [onClose, onConfirmInsert, selectedKey]);
   return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(Modal, {
@@ -177,11 +215,12 @@ export const RegistryElementBrowser = ({
     onClick: onClose,
     spacing: "compact"
   })))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
-    className: ax(["_zulp1fka _1e0c11p5 _yv0e1xuv _lk4ji47z"])
+    className: ax(["_zulp1fka _18zr1b66 _1e0c11p5 _yv0e1xuv _1q511b66 _lk4ji47z"])
   }, /*#__PURE__*/React.createElement(RegistryElementBrowserCategories, {
     section: section,
     sections: model.sections,
-    onSectionClick: onSectionClick
+    onSectionClick: onSectionClick,
+    selectedButtonRef: selectedCategoryRef
   }), /*#__PURE__*/React.createElement(RegistryElementBrowserSearchResults, {
     editorView: editorView,
     emptyStateHandler: emptyStateHandler,

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

@@ -1,7 +1,10 @@
-._zulpu2gc{gap:var(--ds-space-100,8px)}._154iv77o{top:var(--ds-space-025,2px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._18zr1b66{padding-inline:var(--ds-space-050,4px)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}._154iidpf{top:0}
 ._1e0c11p5{display:grid}
+._1ul9idpf{min-width:0}
 ._1wpzv2br{align-self:start}
 ._ae4vv2br{align-content:start}
 ._kqsw1if8{position:sticky}
 ._yv0ei47z{grid-template-columns:minmax(0,1fr)}
-@media (max-width:599px){._qs0g1bhr{background-color:var(--ds-surface-overlay,#fff)}._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}._zvu9kb7n{z-index:1}}
+@media (max-width:599px){._qs0g1bhr{background-color:var(--ds-surface-overlay,#fff)}._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}._dl261osq{width:100%}._zvu9kb7n{z-index:1}}

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

@@ -1,7 +1,7 @@
 /* RegistryElementBrowserCategories.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./RegistryElementBrowserCategories.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import Button from '@atlaskit/button/default/button';
 import { BLOCK_TEMPLATES_SECTION, DATA_AND_CHARTS_SECTION, EMBED_SECTION, MEDIA_SECTION, OTHER_SECTION, ROVO_SECTION, STRUCTURE_SECTION, TEXT_FORMATTING_SECTION } from '@atlaskit/editor-common/quick-insert/keys';
@@ -21,26 +21,44 @@ const categoryGridStyles = null;
 export const RegistryElementBrowserCategories = ({
   section,
   sections,
-  onSectionClick
+  onSectionClick,
+  selectedButtonRef
 }) => {
   const {
     formatMessage
   } = useIntl();
   const isAllSelected = section === undefined;
+  const onCategoryKeyDown = useCallback(event => {
+    var _event$currentTarget$, _event$currentTarget$2, _event$currentTarget$3, _event$currentTarget$4;
+    if (!['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+      return;
+    }
+    const isForward = event.key === 'ArrowDown' || event.key === 'ArrowRight';
+    const nextButton = isForward ? (_event$currentTarget$ = event.currentTarget.nextElementSibling) !== null && _event$currentTarget$ !== void 0 ? _event$currentTarget$ : (_event$currentTarget$2 = event.currentTarget.parentElement) === null || _event$currentTarget$2 === void 0 ? void 0 : _event$currentTarget$2.firstElementChild : (_event$currentTarget$3 = event.currentTarget.previousElementSibling) !== null && _event$currentTarget$3 !== void 0 ? _event$currentTarget$3 : (_event$currentTarget$4 = event.currentTarget.parentElement) === null || _event$currentTarget$4 === void 0 ? void 0 : _event$currentTarget$4.lastElementChild;
+    if (nextButton) {
+      event.preventDefault();
+      nextButton.focus();
+      nextButton.click();
+    }
+  }, []);
   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 _ae4vv2br _1wpzv2br _1e0c11p5 _yv0ei47z _kqsw1if8 _154iv77o _qs0g1bhr _1w2e1ris _1ato1bp4 _lk4jglyw _1cgyi47z _1s8e1wug _pevy15vq _zvu9kb7n"])
+    role: "group",
+    className: ax(["_zulpu2gc _1rjc1b66 _18zr1b66 _ae4vv2br _1wpzv2br _1e0c11p5 _yv0ei47z _1ul9idpf _kqsw1if8 _154iidpf _qs0g1bhr _1w2e1ris _1ato1bp4 _lk4jglyw _1cgyi47z _1s8e1wug _pevy15vq _dl261osq _zvu9kb7n"])
   }, /*#__PURE__*/React.createElement(Button, {
     appearance: 'subtle',
     "aria-pressed": isAllSelected,
     "data-section": "",
     onClick: onSectionClick,
+    onKeyDown: onCategoryKeyDown,
+    ref: isAllSelected ? selectedButtonRef : undefined,
     isSelected: isAllSelected,
-    shouldFitContainer: true
+    shouldFitContainer: true,
+    tabIndex: isAllSelected ? 0 : -1
   }, /*#__PURE__*/React.createElement(Text, {
     align: "start",
     color: "inherit",
@@ -57,8 +75,11 @@ export const RegistryElementBrowserCategories = ({
       "data-section": entry.key,
       key: entry.key,
       onClick: onSectionClick,
+      onKeyDown: onCategoryKeyDown,
+      ref: section === entry.key ? selectedButtonRef : undefined,
       isSelected: section === entry.key,
-      shouldFitContainer: true
+      shouldFitContainer: true,
+      tabIndex: section === entry.key ? 0 : -1
     }, /*#__PURE__*/React.createElement(Text, {
       align: "start",
       color: "inherit",

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

@@ -71,7 +71,7 @@ export const RegistryElementBrowserSearchResults = ({
     defaultMessage: 'Element results',
     id: 'editor.quick-insert.results-label'
   });
-  const displayedItems = hasFallbackItems ? fallbackItems !== null && fallbackItems !== void 0 ? fallbackItems : [] : items;
+  const displayedItems = hasFallbackItems && fallbackItems ? fallbackItems : items;
   const shouldRenderEmptyState = items.length === 0 && !isLoading;
   const emptyState = shouldRenderEmptyState ? (_emptyStateHandler = emptyStateHandler === null || emptyStateHandler === void 0 ? void 0 : emptyStateHandler({
     mode: 'full',
@@ -108,9 +108,15 @@ export const RegistryElementBrowserSearchResults = ({
     tabIndex: -1
   }, displayedItems.length > 0 && /*#__PURE__*/React.createElement("div", {
     "aria-label": resultsLabel,
+    onFocus: event => {
+      if (event.target === event.currentTarget) {
+        var _event$currentTarget$;
+        (_event$currentTarget$ = event.currentTarget.querySelector('[role="option"]:not([aria-disabled="true"]):not([disabled])')) === null || _event$currentTarget$ === void 0 ? void 0 : _event$currentTarget$.focus();
+      }
+    },
     onKeyDown: onKeyDown,
     role: "listbox",
-    tabIndex: -1,
+    tabIndex: 0,
     className: ax(["_zulpu2gc _ae4vv2br _4cvrv2br _1e0c11p5 _yv0ei47z _16409sye _g98o1koq"])
   }, displayedItems.map(item => /*#__PURE__*/React.createElement(RegistryElementBrowserItem, {
     editorView: editorView,

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

@@ -1,6 +1,8 @@
 ._zulp1ejb{gap:var(--ds-space-300,24px)}
-._zulp1fka{gap:calc(var(--ds-space-200, 1pc) + var(--ds-space-150, 9pt))}._1bsb1osq{width:100%}
+._zulp1fka{gap:calc(var(--ds-space-200, 1pc) + var(--ds-space-150, 9pt))}._18zr1b66{padding-inline:var(--ds-space-050,4px)}
+._1bsb1osq{width:100%}
 ._1e0c11p5{display:grid}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
 ._4cvr1h6o{align-items:center}
 ._yv0e1xuv{grid-template-columns:182px minmax(0,1fr)}
 ._yv0ehpfy{grid-template-columns:minmax(0,1fr) auto}

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

@@ -30,6 +30,14 @@ var headerContentStyles = null;
 var headerSearchStyles = null;
 var resultsId = 'registry-element-browser-results';
 var modalTestId = 'registry-element-browser-modal';
+var getRenderedColumnCount = function getRenderedColumnCount(options) {
+  var _options$;
+  var firstRowTop = (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.getBoundingClientRect().top;
+  var nextRowIndex = options.findIndex(function (option) {
+    return firstRowTop !== undefined && option.getBoundingClientRect().top > firstRowTop + 1;
+  });
+  return nextRowIndex > 0 ? nextRowIndex : options.length;
+};
 export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
   var _model$fallbackItems$, _model$fallbackItems;
   var components = _ref.components,
@@ -75,6 +83,7 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
     selectedKey = _useState6[0],
     setSelectedKey = _useState6[1];
   var searchInputRef = useRef(null);
+  var selectedCategoryRef = useRef(null);
   var wasOpen = useRef(false);
   var previousIsOffline = useRef(isOffline);
   useEffect(function () {
@@ -130,18 +139,40 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
     scrollableBody === null || scrollableBody === void 0 || scrollableBody.style.setProperty('border-block-end', 'none');
   }, []);
   var onKeyDown = useCallback(function (event) {
-    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+    if (event.key === 'Tab' && event.shiftKey && event.target instanceof HTMLElement && event.target.getAttribute('role') === 'option') {
+      var _selectedCategoryRef$;
+      event.preventDefault();
+      (_selectedCategoryRef$ = selectedCategoryRef.current) === null || _selectedCategoryRef$ === void 0 || _selectedCategoryRef$.focus();
+      return;
+    }
+    if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
       var _resultCollection$que;
+      if (event.currentTarget === searchInputRef.current && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+        return;
+      }
       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 options = Array.from((_resultCollection$que = resultCollection === null || resultCollection === void 0 ? void 0 : resultCollection.querySelectorAll('[role="option"]')) !== 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);
+      var columnCount = getRenderedColumnCount(options);
+      var step = event.key === 'ArrowDown' ? columnCount : event.key === 'ArrowUp' ? -columnCount : event.key === 'ArrowRight' ? 1 : -1;
+      var nextIndex = currentIndex < 0 ? 0 : currentIndex + step;
+      if (event.key === 'ArrowDown' && columnCount < options.length) {
+        nextIndex = Math.min(nextIndex, options.length - 1);
+      }
+      while (nextIndex >= 0 && nextIndex < options.length && (options[nextIndex].hasAttribute('disabled') || options[nextIndex].getAttribute('aria-disabled') === 'true')) {
+        nextIndex += step;
+      }
+      var nextOption = options[nextIndex];
       if (nextOption) {
         event.preventDefault();
         nextOption.focus();
+        nextOption.click();
+      } else if (nextIndex < 0 && currentIndex >= 0) {
+        var _searchInputRef$curre;
+        event.preventDefault();
+        (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 || _searchInputRef$curre.focus();
       }
       return;
     }
@@ -150,9 +181,18 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
       onClose();
       return;
     }
-    if (event.key === 'Enter' && selectedKey) {
-      event.preventDefault();
-      onConfirmInsert();
+    if (event.key === 'Enter') {
+      var _event$currentTarget$;
+      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) {
+        event.preventDefault();
+        if (!selectedKey) {
+          optionToActivate === null || optionToActivate === void 0 || optionToActivate.click();
+        }
+        onConfirmInsert();
+      }
     }
   }, [onClose, onConfirmInsert, selectedKey]);
   return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(Modal, {
@@ -198,11 +238,12 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
     onClick: onClose,
     spacing: "compact"
   })))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
-    className: ax(["_zulp1fka _1e0c11p5 _yv0e1xuv _lk4ji47z"])
+    className: ax(["_zulp1fka _18zr1b66 _1e0c11p5 _yv0e1xuv _1q511b66 _lk4ji47z"])
   }, /*#__PURE__*/React.createElement(RegistryElementBrowserCategories, {
     section: section,
     sections: model.sections,
-    onSectionClick: onSectionClick
+    onSectionClick: onSectionClick,
+    selectedButtonRef: selectedCategoryRef
   }), /*#__PURE__*/React.createElement(RegistryElementBrowserSearchResults, {
     editorView: editorView,
     emptyStateHandler: emptyStateHandler,

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

@@ -1,7 +1,10 @@
-._zulpu2gc{gap:var(--ds-space-100,8px)}._154iv77o{top:var(--ds-space-025,2px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._18zr1b66{padding-inline:var(--ds-space-050,4px)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}._154iidpf{top:0}
 ._1e0c11p5{display:grid}
+._1ul9idpf{min-width:0}
 ._1wpzv2br{align-self:start}
 ._ae4vv2br{align-content:start}
 ._kqsw1if8{position:sticky}
 ._yv0ei47z{grid-template-columns:minmax(0,1fr)}
-@media (max-width:599px){._qs0g1bhr{background-color:var(--ds-surface-overlay,#fff)}._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}._zvu9kb7n{z-index:1}}
+@media (max-width:599px){._qs0g1bhr{background-color:var(--ds-surface-overlay,#fff)}._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}._dl261osq{width:100%}._zvu9kb7n{z-index:1}}

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

@@ -2,7 +2,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./RegistryElementBrowserCategories.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import Button from '@atlaskit/button/default/button';
 import { BLOCK_TEMPLATES_SECTION, DATA_AND_CHARTS_SECTION, EMBED_SECTION, MEDIA_SECTION, OTHER_SECTION, ROVO_SECTION, STRUCTURE_SECTION, TEXT_FORMATTING_SECTION } from '@atlaskit/editor-common/quick-insert/keys';
@@ -13,24 +13,42 @@ var categoryGridStyles = null;
 export var RegistryElementBrowserCategories = function RegistryElementBrowserCategories(_ref) {
   var section = _ref.section,
     sections = _ref.sections,
-    onSectionClick = _ref.onSectionClick;
+    onSectionClick = _ref.onSectionClick,
+    selectedButtonRef = _ref.selectedButtonRef;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var isAllSelected = section === undefined;
+  var onCategoryKeyDown = useCallback(function (event) {
+    var _event$currentTarget$, _event$currentTarget$2, _event$currentTarget$3, _event$currentTarget$4;
+    if (!['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+      return;
+    }
+    var isForward = event.key === 'ArrowDown' || event.key === 'ArrowRight';
+    var nextButton = isForward ? (_event$currentTarget$ = event.currentTarget.nextElementSibling) !== null && _event$currentTarget$ !== void 0 ? _event$currentTarget$ : (_event$currentTarget$2 = event.currentTarget.parentElement) === null || _event$currentTarget$2 === void 0 ? void 0 : _event$currentTarget$2.firstElementChild : (_event$currentTarget$3 = event.currentTarget.previousElementSibling) !== null && _event$currentTarget$3 !== void 0 ? _event$currentTarget$3 : (_event$currentTarget$4 = event.currentTarget.parentElement) === null || _event$currentTarget$4 === void 0 ? void 0 : _event$currentTarget$4.lastElementChild;
+    if (nextButton) {
+      event.preventDefault();
+      nextButton.focus();
+      nextButton.click();
+    }
+  }, []);
   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 _ae4vv2br _1wpzv2br _1e0c11p5 _yv0ei47z _kqsw1if8 _154iv77o _qs0g1bhr _1w2e1ris _1ato1bp4 _lk4jglyw _1cgyi47z _1s8e1wug _pevy15vq _zvu9kb7n"])
+    role: "group",
+    className: ax(["_zulpu2gc _1rjc1b66 _18zr1b66 _ae4vv2br _1wpzv2br _1e0c11p5 _yv0ei47z _1ul9idpf _kqsw1if8 _154iidpf _qs0g1bhr _1w2e1ris _1ato1bp4 _lk4jglyw _1cgyi47z _1s8e1wug _pevy15vq _dl261osq _zvu9kb7n"])
   }, /*#__PURE__*/React.createElement(Button, {
     appearance: 'subtle',
     "aria-pressed": isAllSelected,
     "data-section": "",
     onClick: onSectionClick,
+    onKeyDown: onCategoryKeyDown,
+    ref: isAllSelected ? selectedButtonRef : undefined,
     isSelected: isAllSelected,
-    shouldFitContainer: true
+    shouldFitContainer: true,
+    tabIndex: isAllSelected ? 0 : -1
   }, /*#__PURE__*/React.createElement(Text, {
     align: "start",
     color: "inherit",
@@ -47,8 +65,11 @@ export var RegistryElementBrowserCategories = function RegistryElementBrowserCat
       "data-section": entry.key,
       key: entry.key,
       onClick: onSectionClick,
+      onKeyDown: onCategoryKeyDown,
+      ref: section === entry.key ? selectedButtonRef : undefined,
       isSelected: section === entry.key,
-      shouldFitContainer: true
+      shouldFitContainer: true,
+      tabIndex: section === entry.key ? 0 : -1
     }, /*#__PURE__*/React.createElement(Text, {
       align: "start",
       color: "inherit",

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

@@ -75,7 +75,7 @@ export var RegistryElementBrowserSearchResults = function RegistryElementBrowser
     defaultMessage: 'Element results',
     id: 'editor.quick-insert.results-label'
   });
-  var displayedItems = hasFallbackItems ? fallbackItems !== null && fallbackItems !== void 0 ? fallbackItems : [] : items;
+  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({
     mode: 'full',
@@ -111,9 +111,15 @@ export var RegistryElementBrowserSearchResults = function RegistryElementBrowser
     tabIndex: -1
   }, displayedItems.length > 0 && /*#__PURE__*/React.createElement("div", {
     "aria-label": resultsLabel,
+    onFocus: function onFocus(event) {
+      if (event.target === event.currentTarget) {
+        var _event$currentTarget$;
+        (_event$currentTarget$ = event.currentTarget.querySelector('[role="option"]:not([aria-disabled="true"]):not([disabled])')) === null || _event$currentTarget$ === void 0 || _event$currentTarget$.focus();
+      }
+    },
     onKeyDown: onKeyDown,
     role: "listbox",
-    tabIndex: -1,
+    tabIndex: 0,
     className: ax(["_zulpu2gc _ae4vv2br _4cvrv2br _1e0c11p5 _yv0ei47z _16409sye _g98o1koq"])
   }, displayedItems.map(function (item) {
     return /*#__PURE__*/React.createElement(RegistryElementBrowserItem, {

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

@@ -8,6 +8,7 @@ type Props = {
     onSectionClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
     section?: string;
     sections: RegistryElementBrowserSection[];
+    selectedButtonRef: React.Ref<HTMLButtonElement>;
 };
-export declare const RegistryElementBrowserCategories: ({ section, sections, onSectionClick, }: Props) => React.JSX.Element;
+export declare const RegistryElementBrowserCategories: ({ section, sections, onSectionClick, selectedButtonRef, }: Props) => React.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-quick-insert",
-	"version": "22.0.9",
+	"version": "22.0.10",
 	"description": "Quick insert plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",