@atlaskit/editor-common 78.37.1 → 78.37.2

package/dist/esm/element-browser/components/ElementList/ElementList.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["items", "mode", "selectedItemIndex", "focusedItemIndex", "setColumnCount", "createAnalyticsEvent", "emptyStateHandler", "selectedCategory", "searchTerm"];
+var _excluded = ["items", "mode", "selectedItemIndex", "focusedItemIndex", "setColumnCount", "createAnalyticsEvent", "emptyStateHandler", "selectedCategory", "selectedCategoryIndex", "searchTerm", "setFocusedCategoryIndex", "setFocusedItemIndex"];
 /** @jsx jsx */
 import React, { Fragment, memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -11,6 +11,7 @@ import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { ButtonItem } from '@atlaskit/menu';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B100, N200 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
@@ -49,7 +50,10 @@ function ElementList(_ref) {
     createAnalyticsEvent = _ref.createAnalyticsEvent,
     emptyStateHandler = _ref.emptyStateHandler,
     selectedCategory = _ref.selectedCategory,
+    selectedCategoryIndex = _ref.selectedCategoryIndex,
     searchTerm = _ref.searchTerm,
+    setFocusedCategoryIndex = _ref.setFocusedCategoryIndex,
+    setFocusedItemIndex = _ref.setFocusedItemIndex,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useContainerWidth = useContainerWidth(),
     containerWidth = _useContainerWidth.containerWidth,
@@ -93,16 +97,38 @@ function ElementList(_ref) {
         style: style,
         key: key,
         className: "element-item-wrapper",
-        css: elementItemWrapper
+        css: elementItemWrapper,
+        onKeyDown: getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? function (e) {
+          if (e.key === 'Tab') {
+            if (e.shiftKey && index === 0) {
+              if (setFocusedCategoryIndex) {
+                if (!!selectedCategoryIndex) {
+                  setFocusedCategoryIndex(selectedCategoryIndex);
+                } else {
+                  setFocusedCategoryIndex(0);
+                }
+                e.preventDefault();
+              }
+            }
+            // before focus jumps from elements list we need to rerender react-virtualized collection.
+            // Otherwise on the next render 'scrollToCell' will have same cached value
+            // and collection will not be scrolled to top.
+            // So Tab press on category will not work anymore due to invisible 1-t element.
+            else if (index === items.length - 2) {
+              setFocusedItemIndex(items.length - 1);
+            }
+          }
+        } : undefined
       }, jsx(MemoizedElementItem, _extends({
         inlineMode: !fullMode,
         index: index,
         item: items[index],
         selected: selectedItemIndex === index,
-        focus: focusedItemIndex === index
+        focus: focusedItemIndex === index,
+        setFocusedItemIndex: setFocusedItemIndex
       }, props)));
     };
-  }, [items, fullMode, selectedItemIndex, focusedItemIndex, props]);
+  }, [items, fullMode, selectedItemIndex, focusedItemIndex, selectedCategoryIndex, setFocusedCategoryIndex, setFocusedItemIndex, props]);
   return jsx(Fragment, null, jsx(ContainerWidthMonitor, null), jsx("div", {
     css: elementItemsWrapper,
     "data-testid": "element-items",

package/dist/esm/element-browser/components/StatelessElementBrowser.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
-import React, { memo, useCallback, useEffect, useState } from 'react';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../analytics';
 import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE, INLINE_SIDEBAR_HEIGHT, SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_WIDTH } from '../constants';
 import useContainerWidth from '../hooks/use-container-width';
@@ -90,18 +91,43 @@ function StatelessElementBrowser(props) {
   var items = props.items,
     onSelectItem = props.onSelectItem,
     onInsertItem = props.onInsertItem,
-    viewMoreItem = props.viewMoreItem;
+    viewMoreItem = props.viewMoreItem,
+    selectedCategory = props.selectedCategory,
+    onSelectCategory = props.onSelectCategory,
+    searchTerm = props.searchTerm,
+    showCategories = props.showCategories;
   var _useContainerWidth = useContainerWidth(),
     containerWidth = _useContainerWidth.containerWidth,
     ContainerWidthMonitor = _useContainerWidth.ContainerWidthMonitor;
+  var categoryBeenChosen = useRef(false);
   var _useState = useState(1),
     _useState2 = _slicedToArray(_useState, 2),
     columnCount = _useState2[0],
     setColumnCount = _useState2[1];
-  var _useSelectAndFocusOnA = useSelectAndFocusOnArrowNavigation(items.length - 1, columnCount, !!viewMoreItem),
+  var selectedCategoryIndex;
+  var isFocusSearch;
+  if (getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
+    var _props$categories;
+    selectedCategoryIndex = (_props$categories = props.categories) === null || _props$categories === void 0 ? void 0 : _props$categories.findIndex(function (category) {
+      return category.name === selectedCategory;
+    });
+    if (showCategories) {
+      var isEmptySearchTerm = !searchTerm || (searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.length) === 0;
+      if (!isEmptySearchTerm) {
+        // clear the flag if the search happens after a user has chosen the category
+        categoryBeenChosen.current = false;
+      }
+      // A11Y: if categories exists, on the initial render search element should receive focus.
+      // After user pick some category the category should stay focused.
+      isFocusSearch = !categoryBeenChosen.current || !isEmptySearchTerm;
+    }
+  }
+  var _useSelectAndFocusOnA = useSelectAndFocusOnArrowNavigation(items.length - 1, columnCount, !!viewMoreItem, isFocusSearch),
     selectedItemIndex = _useSelectAndFocusOnA.selectedItemIndex,
     focusedItemIndex = _useSelectAndFocusOnA.focusedItemIndex,
     setFocusedItemIndex = _useSelectAndFocusOnA.setFocusedItemIndex,
+    setFocusedCategoryIndex = _useSelectAndFocusOnA.setFocusedCategoryIndex,
+    focusedCategoryIndex = _useSelectAndFocusOnA.focusedCategoryIndex,
     focusOnSearch = _useSelectAndFocusOnA.focusOnSearch,
     focusOnViewMore = _useSelectAndFocusOnA.focusOnViewMore,
     onKeyDown = _useSelectAndFocusOnA.onKeyDown,
@@ -135,15 +161,29 @@ function StatelessElementBrowser(props) {
    * The actual enter key press is handled on individual items level.
    */
   var selectedItem = selectedItemIndex !== undefined ? items[selectedItemIndex] : null;
-  var onItemsEnterKeyPress = useCallback(function (e) {
-    if (e.key !== 'Enter') {
-      return;
+  var onItemsEnterTabKeyPress = useCallback(function (e) {
+    if (getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
+      if (e.key !== 'Enter' && (e.key !== 'Tab' || !showCategories)) {
+        return;
+      }
+    } else {
+      if (e.key !== 'Enter') {
+        return;
+      }
+    }
+    if (getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
+      if (showCategories && e.key === 'Tab' && selectedCategoryIndex !== undefined) {
+        // A11Y: Set focus on first category if tab pressed on search
+        setFocusedCategoryIndex(selectedCategoryIndex);
+        e.preventDefault();
+        return;
+      }
     }
     if (onInsertItem && selectedItem != null) {
       onInsertItem(selectedItem);
     }
     e.preventDefault();
-  }, [onInsertItem, selectedItem]);
+  }, [onInsertItem, selectedItem, setFocusedCategoryIndex, showCategories, selectedCategoryIndex]);
 
   /**
    * On arrow key selection and clicks the selectedItemIndex will change.
@@ -154,6 +194,10 @@ function StatelessElementBrowser(props) {
       onSelectItem(selectedItem);
     }
   }, [onSelectItem, selectedItem]);
+  var onSelectCategoryCB = useCallback(function (category) {
+    onSelectCategory(category);
+    categoryBeenChosen.current = true;
+  }, [categoryBeenChosen, onSelectCategory]);
   return jsx("div", {
     css: wrapper,
     "data-testid": "element-browser"
@@ -161,10 +205,12 @@ function StatelessElementBrowser(props) {
     selectedItemIndex: selectedItemIndex,
     focusedItemIndex: focusedItemIndex,
     setFocusedItemIndex: setFocusedItemIndex,
+    focusedCategoryIndex: focusedCategoryIndex,
+    setFocusedCategoryIndex: setFocusedCategoryIndex,
     focusOnSearch: focusOnSearch,
     setColumnCount: setColumnCount,
     setFocusOnSearch: setFocusOnSearch,
-    onKeyPress: onItemsEnterKeyPress,
+    onKeyPress: onItemsEnterTabKeyPress,
     onKeyDown: onKeyDown,
     viewMoreItem: viewMoreItem,
     focusOnViewMore: focusOnViewMore
@@ -175,8 +221,12 @@ function StatelessElementBrowser(props) {
     focusOnSearch: focusOnSearch,
     setColumnCount: setColumnCount,
     setFocusOnSearch: setFocusOnSearch,
-    onKeyPress: onItemsEnterKeyPress,
-    onKeyDown: onKeyDown
+    onKeyPress: onItemsEnterTabKeyPress,
+    onKeyDown: onKeyDown,
+    focusedCategoryIndex: focusedCategoryIndex,
+    setFocusedCategoryIndex: setFocusedCategoryIndex,
+    selectedCategoryIndex: selectedCategoryIndex,
+    onSelectCategory: getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? onSelectCategoryCB : onSelectCategory
   })));
 }
 function MobileBrowser(_ref) {
@@ -192,6 +242,8 @@ function MobileBrowser(_ref) {
     selectedItemIndex = _ref.selectedItemIndex,
     focusedItemIndex = _ref.focusedItemIndex,
     setFocusedItemIndex = _ref.setFocusedItemIndex,
+    focusedCategoryIndex = _ref.focusedCategoryIndex,
+    setFocusedCategoryIndex = _ref.setFocusedCategoryIndex,
     focusOnSearch = _ref.focusOnSearch,
     focusOnViewMore = _ref.focusOnViewMore,
     setColumnCount = _ref.setColumnCount,
@@ -223,7 +275,11 @@ function MobileBrowser(_ref) {
   }, jsx(CategoryList, {
     categories: categories,
     onSelectCategory: onSelectCategory,
-    selectedCategory: selectedCategory
+    selectedCategory: selectedCategory,
+    focusedCategoryIndex: focusedCategoryIndex,
+    setFocusedCategoryIndex: setFocusedCategoryIndex,
+    setFocusedItemIndex: setFocusedItemIndex,
+    setFocusOnSearch: setFocusOnSearch
   }))), jsx("div", {
     css: mobileMainContent
   }, jsx(ElementList, {
@@ -256,6 +312,9 @@ function DesktopBrowser(_ref2) {
     selectedItemIndex = _ref2.selectedItemIndex,
     focusedItemIndex = _ref2.focusedItemIndex,
     setFocusedItemIndex = _ref2.setFocusedItemIndex,
+    focusedCategoryIndex = _ref2.focusedCategoryIndex,
+    setFocusedCategoryIndex = _ref2.setFocusedCategoryIndex,
+    selectedCategoryIndex = _ref2.selectedCategoryIndex,
     focusOnSearch = _ref2.focusOnSearch,
     setColumnCount = _ref2.setColumnCount,
     setFocusOnSearch = _ref2.setFocusOnSearch,
@@ -285,7 +344,11 @@ function DesktopBrowser(_ref2) {
     categories: categories,
     onSelectCategory: onSelectCategory,
     selectedCategory: selectedCategory,
-    createAnalyticsEvent: createAnalyticsEvent
+    createAnalyticsEvent: createAnalyticsEvent,
+    focusedCategoryIndex: focusedCategoryIndex,
+    setFocusedCategoryIndex: setFocusedCategoryIndex,
+    setFocusedItemIndex: setFocusedItemIndex,
+    setFocusOnSearch: setFocusOnSearch
   }))), jsx("div", {
     css: mainContent,
     onKeyDown: onKeyDown,
@@ -314,7 +377,9 @@ function DesktopBrowser(_ref2) {
     createAnalyticsEvent: createAnalyticsEvent,
     emptyStateHandler: emptyStateHandler,
     selectedCategory: selectedCategory,
-    searchTerm: searchTerm
+    selectedCategoryIndex: selectedCategoryIndex,
+    searchTerm: searchTerm,
+    setFocusedCategoryIndex: showCategories ? setFocusedCategoryIndex : undefined
   })));
 }
 var MemoizedElementBrowser = /*#__PURE__*/memo(withAnalyticsContext({

package/dist/esm/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 { useCallback, useEffect, useReducer, useRef } from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 /**
  * a custom hook that handles keyboard navigation for Arrow keys based on a
@@ -57,6 +58,7 @@ var reducer = function reducer(state, action) {
     case ACTIONS.FOCUS_SEARCH:
       return _objectSpread(_objectSpread({}, state), {}, {
         focusedItemIndex: undefined,
+        focusedCategoryIndex: undefined,
         focusOnSearch: true,
         focusOnViewMore: false
       });
@@ -166,7 +168,7 @@ var getInitialState = function getInitialState(listSize, canFocusViewMore) {
     });
   };
 };
-function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore) {
+function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, isFocusSearch) {
   var _useReducer = useReducer(reducer, initialState, getInitialState(listSize, canFocusViewMore)),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
@@ -182,16 +184,26 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore) {
   var selectedItemIndex = state.selectedItemIndex,
     focusedItemIndex = state.focusedItemIndex,
     focusOnSearch = state.focusOnSearch,
-    focusOnViewMore = state.focusOnViewMore;
+    focusOnViewMore = state.focusOnViewMore,
+    focusedCategoryIndex = state.focusedCategoryIndex;
+
+  // calls if items size changed
   var reset = useCallback(function (listSize) {
     var payload = _objectSpread(_objectSpread({}, initialState), {}, {
       listSize: listSize
     });
+    if (getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
+      // A11Y: if categories exist ,on the initial render search element should receive focus.
+      // After user pick some category the category should stay focused.
+      payload = Object.assign(payload, {
+        focusOnSearch: isFocusSearch !== null && isFocusSearch !== void 0 ? isFocusSearch : initialState.focusOnSearch
+      });
+    }
     dispatch({
       type: ACTIONS.UPDATE_STATE,
       payload: payload
     });
-  }, []);
+  }, [isFocusSearch]);
   var removeFocusFromSearchAndSetOnItem = useCallback(function (index) {
     var payload = {
       focusedItemIndex: index,
@@ -199,6 +211,26 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore) {
       focusOnSearch: false,
       focusOnViewMore: false
     };
+    if (getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
+      payload = Object.assign(payload, {
+        focusedCategoryIndex: undefined
+      });
+    }
+    dispatch({
+      type: ACTIONS.UPDATE_STATE,
+      payload: payload
+    });
+  }, [dispatch]);
+  var setFocusedCategoryIndex = useCallback(function (index) {
+    if (!getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
+      return;
+    }
+    var payload = {
+      focusOnSearch: false,
+      focusOnViewMore: false,
+      focusedCategoryIndex: index,
+      focusedItemIndex: undefined
+    };
     dispatch({
       type: ACTIONS.UPDATE_STATE,
       payload: payload
@@ -263,7 +295,9 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore) {
     focusOnViewMore: focusOnViewMore,
     setFocusOnSearch: setFocusOnSearch,
     focusedItemIndex: focusedItemIndex,
-    setFocusedItemIndex: removeFocusFromSearchAndSetOnItem
+    setFocusedItemIndex: removeFocusFromSearchAndSetOnItem,
+    focusedCategoryIndex: focusedCategoryIndex,
+    setFocusedCategoryIndex: setFocusedCategoryIndex
   };
 }
 export var ensureSafeIndex = function ensureSafeIndex(index, listSize) {

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "78.37.1";
+var packageVersion = "78.37.2";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/ui/DropList/index.js

@@ -15,7 +15,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.37.1";
+var packageVersion = "78.37.2";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/types/element-browser/components/CategoryList.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import React from 'react';
 import type { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import type { Category } from '../types';
@@ -5,6 +6,10 @@ interface Props {
     categories?: Category[];
     onSelectCategory: (category: Category) => void;
     selectedCategory?: string;
+    focusedCategoryIndex?: number;
+    setFocusedCategoryIndex: (index: number) => void;
+    setFocusedItemIndex: (index: number) => void;
+    setFocusOnSearch?: () => void;
 }
 declare const MemoizedCategoryListWithAnalytics: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<Props & WithAnalyticsEventsProps & import("@atlaskit/analytics-next").WithContextProps, "createAnalyticsEvent" | "analyticsContext" | keyof Props> & React.RefAttributes<any>>>;
 export default MemoizedCategoryListWithAnalytics;

package/dist/types/element-browser/components/ElementList/ElementList.d.ts

@@ -15,8 +15,10 @@ export interface Props {
     onInsertItem: (item: QuickInsertItem) => void;
     setColumnCount: (columnCount: number) => void;
     setFocusedItemIndex: (index: number) => void;
+    setFocusedCategoryIndex?: (index: number) => void;
     emptyStateHandler?: EmptyStateHandler;
     selectedCategory?: string;
+    selectedCategoryIndex?: number;
     searchTerm?: string;
 }
 type ElementItemType = {

package/dist/types/element-browser/hooks/use-select-and-focus-on-arrow-navigation.d.ts

@@ -45,6 +45,7 @@ type ReducerState = {
     focusedItemIndex?: number;
     listSize: number;
     canFocusViewMore?: boolean;
+    focusedCategoryIndex?: number;
 };
 export declare enum ACTIONS {
     FOCUS_SEARCH = "focusOnSearch",
@@ -64,9 +65,11 @@ export type useSelectAndFocusReturnType = {
     focusOnSearch: boolean;
     focusOnViewMore: boolean;
     focusedItemIndex?: number;
+    focusedCategoryIndex?: number;
     setFocusedItemIndex: (index?: number) => void;
+    setFocusedCategoryIndex: (index?: number) => void;
     setFocusOnSearch: () => void;
 };
-declare function useSelectAndFocusOnArrowNavigation(listSize: number, step: number, canFocusViewMore: boolean): useSelectAndFocusReturnType;
+declare function useSelectAndFocusOnArrowNavigation(listSize: number, step: number, canFocusViewMore: boolean, isFocusSearch?: boolean): useSelectAndFocusReturnType;
 export declare const ensureSafeIndex: (index: number, listSize: number) => number;
 export default useSelectAndFocusOnArrowNavigation;

package/dist/types-ts4.5/element-browser/components/CategoryList.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import React from 'react';
 import type { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import type { Category } from '../types';
@@ -5,6 +6,10 @@ interface Props {
     categories?: Category[];
     onSelectCategory: (category: Category) => void;
     selectedCategory?: string;
+    focusedCategoryIndex?: number;
+    setFocusedCategoryIndex: (index: number) => void;
+    setFocusedItemIndex: (index: number) => void;
+    setFocusOnSearch?: () => void;
 }
 declare const MemoizedCategoryListWithAnalytics: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<Props & WithAnalyticsEventsProps & import("@atlaskit/analytics-next").WithContextProps, "createAnalyticsEvent" | "analyticsContext" | keyof Props> & React.RefAttributes<any>>>;
 export default MemoizedCategoryListWithAnalytics;

package/dist/types-ts4.5/element-browser/components/ElementList/ElementList.d.ts

@@ -15,8 +15,10 @@ export interface Props {
     onInsertItem: (item: QuickInsertItem) => void;
     setColumnCount: (columnCount: number) => void;
     setFocusedItemIndex: (index: number) => void;
+    setFocusedCategoryIndex?: (index: number) => void;
     emptyStateHandler?: EmptyStateHandler;
     selectedCategory?: string;
+    selectedCategoryIndex?: number;
     searchTerm?: string;
 }
 type ElementItemType = {

package/dist/types-ts4.5/element-browser/hooks/use-select-and-focus-on-arrow-navigation.d.ts

@@ -45,6 +45,7 @@ type ReducerState = {
     focusedItemIndex?: number;
     listSize: number;
     canFocusViewMore?: boolean;
+    focusedCategoryIndex?: number;
 };
 export declare enum ACTIONS {
     FOCUS_SEARCH = "focusOnSearch",
@@ -64,9 +65,11 @@ export type useSelectAndFocusReturnType = {
     focusOnSearch: boolean;
     focusOnViewMore: boolean;
     focusedItemIndex?: number;
+    focusedCategoryIndex?: number;
     setFocusedItemIndex: (index?: number) => void;
+    setFocusedCategoryIndex: (index?: number) => void;
     setFocusOnSearch: () => void;
 };
-declare function useSelectAndFocusOnArrowNavigation(listSize: number, step: number, canFocusViewMore: boolean): useSelectAndFocusReturnType;
+declare function useSelectAndFocusOnArrowNavigation(listSize: number, step: number, canFocusViewMore: boolean, isFocusSearch?: boolean): useSelectAndFocusReturnType;
 export declare const ensureSafeIndex: (index: number, listSize: number) => number;
 export default useSelectAndFocusOnArrowNavigation;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "78.37.1",
+  "version": "78.37.2",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -249,6 +249,9 @@
     "platform.editor.mbe-update-params-change": {
       "type": "boolean"
     },
+    "platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1": {
+      "type": "boolean"
+    },
     "platform.editor.explicit-html-element-check": {
       "type": "boolean"
     }