@atlaskit/editor-common 78.37.0 → 78.37.2

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

@@ -7,31 +7,65 @@ var _excluded = ["categories"],
 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; }
 /** @jsx jsx */
-
 import React, { Fragment, memo, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/custom-theme-button';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B400, B50, N800 } from '@atlaskit/theme/colors';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent } from '../../analytics';
 import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE } from '../constants';
 import useFocus from '../hooks/use-focus';
+var arrowsKeys = new Set(['ArrowUp', 'ArrowDown']);
 function CategoryList(_ref) {
   var _ref$categories = _ref.categories,
     categories = _ref$categories === void 0 ? [] : _ref$categories,
     props = _objectWithoutProperties(_ref, _excluded);
   var _React$useState = React.useState(null),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    focusedCategoryIndex = _React$useState2[0],
-    setFocusedCategoryIndex = _React$useState2[1];
+    focusedCategoryIndexState = _React$useState2[0],
+    setFocusedCategoryIndexState = _React$useState2[1];
+  var focusedCategoryIndexProp = props.focusedCategoryIndex,
+    setFocusedCategoryIndexProp = props.setFocusedCategoryIndex,
+    onSelectCategory = props.onSelectCategory;
+  var focusedCategoryIndex = getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? focusedCategoryIndexProp : focusedCategoryIndexState;
+  var setFocusedCategoryIndex = getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? setFocusedCategoryIndexProp : setFocusedCategoryIndexState;
   return jsx(Fragment, null, categories.map(function (category, index) {
+    var categoriesLength = categories === null || categories === void 0 ? void 0 : categories.length;
+    var selectNextCategory;
+    var selectPreviousCategory;
+    if (getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') && categoriesLength > 1) {
+      selectNextCategory = function selectNextCategory() {
+        if (index !== categoriesLength - 1) {
+          setFocusedCategoryIndex(index + 1);
+          onSelectCategory(categories[index + 1]);
+        } else {
+          setFocusedCategoryIndex(0);
+          onSelectCategory(categories[0]);
+        }
+        return;
+      };
+      selectPreviousCategory = function selectPreviousCategory() {
+        if (index !== 0) {
+          setFocusedCategoryIndex(index - 1);
+          onSelectCategory(categories[index - 1]);
+        } else {
+          setFocusedCategoryIndex(categoriesLength - 1);
+          onSelectCategory(categories[categoriesLength - 1]);
+        }
+        return;
+      };
+    }
     return jsx(CategoryListItem, _extends({
       key: category.title,
       index: index,
       category: category,
-      focus: focusedCategoryIndex === index,
-      setFocusedCategoryIndex: setFocusedCategoryIndex
-    }, props));
+      focus: focusedCategoryIndex === index
+    }, props, {
+      setFocusedCategoryIndex: setFocusedCategoryIndex,
+      selectPreviousCategory: selectPreviousCategory,
+      selectNextCategory: selectNextCategory
+    }));
   }));
 }
 function CategoryListItem(_ref2) {
@@ -41,10 +75,16 @@ function CategoryListItem(_ref2) {
     index = _ref2.index,
     focus = _ref2.focus,
     setFocusedCategoryIndex = _ref2.setFocusedCategoryIndex,
-    createAnalyticsEvent = _ref2.createAnalyticsEvent;
+    createAnalyticsEvent = _ref2.createAnalyticsEvent,
+    setFocusedItemIndex = _ref2.setFocusedItemIndex,
+    setFocusOnSearch = _ref2.setFocusOnSearch,
+    selectPreviousCategory = _ref2.selectPreviousCategory,
+    selectNextCategory = _ref2.selectNextCategory;
   var ref = useFocus(focus);
   var onClick = useCallback(function () {
-    onSelectCategory(category);
+    if (!getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
+      onSelectCategory(category);
+    }
     /**
      * When user double clicks on same category, focus on first item.
      */
@@ -53,6 +93,9 @@ function CategoryListItem(_ref2) {
     } else {
       setFocusedCategoryIndex(index);
     }
+    if (getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
+      onSelectCategory(category);
+    }
     fireAnalyticsEvent(createAnalyticsEvent)({
       payload: {
         action: ACTION.CLICKED,
@@ -83,6 +126,41 @@ function CategoryListItem(_ref2) {
       })
     }, rest);
   }, [category.name, selectedCategory]);
+  var onTabPress = useCallback(function (e) {
+    var isShiftPressed = e.shiftKey;
+    if (!isShiftPressed) {
+      // set focus from focused category to first item in it
+      if (setFocusedItemIndex) {
+        setFocusedItemIndex(0);
+        e.preventDefault();
+      }
+    } else {
+      // jump from first category back to search
+      if (setFocusOnSearch) {
+        setFocusOnSearch();
+        e.preventDefault();
+      }
+    }
+    return;
+  }, [setFocusedItemIndex, setFocusOnSearch]);
+  var onArrowPress = useCallback(function (e) {
+    if (e.key === 'ArrowUp' && selectPreviousCategory) {
+      return selectPreviousCategory();
+    }
+    if (e.key === 'ArrowDown' && selectNextCategory) {
+      return selectNextCategory();
+    }
+  }, [selectPreviousCategory, selectNextCategory]);
+  var onKeyDown = useCallback(function (e) {
+    var isTabPressed = e.key === 'Tab';
+    var isArrowPressed = arrowsKeys.has(e.key);
+    if (isTabPressed) {
+      return onTabPress(e);
+    }
+    if (isArrowPressed) {
+      return onArrowPress(e);
+    }
+  }, [onTabPress, onArrowPress]);
   return jsx("div", {
     css: buttonWrapper,
     role: "presentation"
@@ -91,13 +169,15 @@ function CategoryListItem(_ref2) {
     isSelected: selectedCategory === category.name,
     onClick: onClick,
     onFocus: onFocus,
+    onKeyDown: getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? onKeyDown : undefined,
     theme: getTheme,
     role: "tab",
     "aria-selected": selectedCategory === category.name ? 'true' : 'false',
     "aria-controls": "browse-category-".concat(category.name, "-tab"),
     id: "browse-category--".concat(category.name, "-button"),
     ref: ref,
-    testId: "element-browser-category-item"
+    testId: "element-browser-category-item",
+    tabIndex: -1
   }, category.title));
 }
 var buttonWrapper = css(_defineProperty({

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/messages/insert-block.js

@@ -197,12 +197,17 @@ export var toolbarInsertBlockMessages = defineMessages({
   },
   addLoomVideo: {
     id: 'fabric.editor.addLoomVideo',
-    defaultMessage: 'Add Loom Video',
-    description: 'Record a new Loom video'
+    defaultMessage: 'Record a Loom video',
+    description: 'Record a Loom video'
+  },
+  addLoomVideoComment: {
+    id: 'fabric.editor.addLoomVideoComment',
+    defaultMessage: 'Record a Loom video comment',
+    description: 'Record a Loom video comment'
   },
   recordVideoDescription: {
     id: 'fabric.editor.recordVideo.description',
-    defaultMessage: 'Record your screen and camera',
-    description: 'Record your screen and camera'
+    defaultMessage: 'Record and share your screen and thoughts',
+    description: 'Record and share your screen and thoughts'
   }
 });

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.0";
+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/styles/index.js

@@ -1,4 +1,5 @@
 export { textColorStyles } from './shared/text-color';
+export { backgroundColorStyles } from './shared/background-color';
 export { tableSharedStyle, tableMarginTop, tableMarginBottom, tableMarginSides, tableCellMinWidth, tableNewColumnMinWidth, tableCellBorderWidth, calcTableWidth, TableSharedCssClassName, tableResizeHandleWidth, tableCellPadding, tableMarginTopWithControl } from './shared/table';
 export { AnnotationSharedClassNames, BlockAnnotationSharedClassNames, AnnotationSharedCSSByState, annotationSharedStyles } from './shared/annotation';
 export { columnLayoutSharedStyle } from './shared/column-layout';

package/dist/esm/styles/shared/background-color.js

@@ -0,0 +1,9 @@
+import { css } from '@emotion/react';
+export var backgroundColorStyles = css({
+  '.fabric-background-color-mark': {
+    backgroundColor: 'var(--custom-palette-color, inherit)'
+  },
+  'a .fabric-background-color-mark': {
+    backgroundColor: 'unset'
+  }
+});

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.0";
+var packageVersion = "78.37.2";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/esm/ui/FloatingToolbar/Separator.js

@@ -6,7 +6,8 @@ var separator = css({
   width: '1px',
   height: '20px',
   margin: "0 ".concat("var(--ds-space-050, 4px)"),
-  alignSelf: 'center'
+  alignSelf: 'center',
+  pointerEvents: 'none'
 });
 export default (function () {
   return jsx("div", {

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/messages/insert-block.d.ts

@@ -199,6 +199,11 @@ export declare const toolbarInsertBlockMessages: {
         defaultMessage: string;
         description: string;
     };
+    addLoomVideoComment: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     recordVideoDescription: {
         id: string;
         defaultMessage: string;

package/dist/types/styles/index.d.ts

@@ -1,4 +1,5 @@
 export { textColorStyles } from './shared/text-color';
+export { backgroundColorStyles } from './shared/background-color';
 export { tableSharedStyle, tableMarginTop, tableMarginBottom, tableMarginSides, tableCellMinWidth, tableNewColumnMinWidth, tableCellBorderWidth, calcTableWidth, TableSharedCssClassName, tableResizeHandleWidth, tableCellPadding, tableMarginTopWithControl, } from './shared/table';
 export { AnnotationSharedClassNames, BlockAnnotationSharedClassNames, AnnotationSharedCSSByState, annotationSharedStyles, } from './shared/annotation';
 export { columnLayoutSharedStyle } from './shared/column-layout';

package/dist/types/styles/shared/background-color.d.ts

@@ -0,0 +1 @@
+export declare const backgroundColorStyles: import("@emotion/react").SerializedStyles;