@atlaskit/editor-common 74.57.0 → 74.58.1

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

@@ -0,0 +1,284 @@
+import { useCallback, useEffect, useReducer, useRef } from 'react';
+
+/**
+ * a custom hook that handles keyboard navigation for Arrow keys based on a
+ * given listSize, and a step (for up and down arrows).
+ *
+ * @param {number} listSize
+ * @param {number} upDownStep
+ *
+ * Example usage:
+ *    const list = ['Confluence','Jira','Atlaskit'];
+ *    const {
+ *      selectedItemIndex,
+ *      focusedItemIndex,
+ *      focusOnSearch,
+ *      focusOnViewMore,
+ *      setFocusedItemIndex,
+ *      onKeyDown
+ *    } = useSelectAndFocusOnArrowNavigation(list.length - 1, 1);
+ *
+ *    return (
+ *      <div onKeyDown={onKeyDown}>
+ *        <SearchBar onClick={() => setFocusedItemIndex(undefined)} focus={focusOnSearch} />
+ *        {list.map((item, index) => (
+ *           <ListItem
+ *            title={item}
+ *            style={{ ..., color: selected ? 'selectedStateColor' : defaultColor }}
+ *            onClick={() => {
+ *              setFocusedItemIndex(index);
+ *            }
+ *          />
+ *        )}
+ *      </div>
+ *    );
+ *
+ *    const SearchBar = ({ focus }) => {
+ *      const ref = useRefToFocusOrScroll(focus);
+ *      return <input ref={ref} />
+ *    }
+ *
+ */
+
+export let ACTIONS = /*#__PURE__*/function (ACTIONS) {
+  ACTIONS["FOCUS_SEARCH"] = "focusOnSearch";
+  ACTIONS["UPDATE_STATE"] = "updateState";
+  ACTIONS["MOVE"] = "move";
+  return ACTIONS;
+}({});
+const reducer = (state, action) => {
+  switch (action.type) {
+    case ACTIONS.UPDATE_STATE:
+      return {
+        ...state,
+        ...action.payload
+      };
+    case ACTIONS.FOCUS_SEARCH:
+      return {
+        ...state,
+        focusedItemIndex: undefined,
+        focusOnSearch: true,
+        focusOnViewMore: false
+      };
+    case ACTIONS.MOVE:
+      return moveReducer(state, action);
+  }
+  return state;
+};
+const moveReducer = (state, action) => {
+  const {
+    listSize,
+    canFocusViewMore
+  } = state;
+  if (state.focusOnSearch) {
+    // up arrow
+    if (action.payload.positions && action.payload.positions <= -1) {
+      return {
+        ...state,
+        focusOnSearch: false,
+        focusOnViewMore: !!canFocusViewMore,
+        focusedItemIndex: canFocusViewMore ? undefined : listSize,
+        selectedItemIndex: canFocusViewMore ? undefined : listSize
+      };
+    } else {
+      return {
+        ...state,
+        focusOnSearch: false,
+        focusOnViewMore: false,
+        focusedItemIndex: 0,
+        selectedItemIndex: 0
+      };
+    }
+  }
+  if (state.focusOnViewMore) {
+    // down arrow
+    if (action.payload.positions === 1) {
+      return {
+        ...state,
+        focusOnSearch: true,
+        focusOnViewMore: false,
+        focusedItemIndex: undefined,
+        // if search is focused then select first item.
+        selectedItemIndex: 0
+      };
+    } else {
+      return {
+        ...state,
+        focusOnSearch: false,
+        focusOnViewMore: false,
+        focusedItemIndex: listSize,
+        selectedItemIndex: listSize
+      };
+    }
+  }
+  const newIndex = state.selectedItemIndex ? state.selectedItemIndex + action.payload.positions : action.payload.positions;
+  const safeIndex = ensureSafeIndex(newIndex, state.listSize);
+  // down arrow key is pressed or right arrow key is pressed.
+  if (state.focusedItemIndex !== undefined && action.payload.positions && action.payload.positions >= 1) {
+    // when multi column element browser is open and we are in last
+    //  row then newIndex will be greater than listSize when
+    //  down arrow key is pressed.
+    // Or when last item is focused and down or right arrow key is pressed.
+    const isLastItemFocused = newIndex > listSize;
+    const focusOnSearch = isLastItemFocused && !canFocusViewMore;
+    const focusOnViewMore = isLastItemFocused && !!canFocusViewMore;
+    // if search is focused, then select first item.
+    // otherwise if view more is focused then select item should be undefined.
+    const selectedItemIndex = focusOnSearch ? 0 : focusOnViewMore ? undefined : safeIndex;
+    return {
+      ...state,
+      focusOnSearch,
+      focusOnViewMore,
+      selectedItemIndex,
+      focusedItemIndex: isLastItemFocused ? undefined : safeIndex
+    };
+  }
+
+  // up arrow key is pressed or left arrow key is pressed.
+  if (state.focusedItemIndex !== undefined && action.payload.positions && action.payload.positions <= -1) {
+    // if arrow up key is pressed when focus is in first row,
+    //  or, arrow left key is pressed when first item is focused,
+    //  then newIndex will become less than zero.
+    // In this case, focus search, and, kept previously selected item.
+    const isFirstRowFocused = newIndex < 0;
+    // if focus goes to search then kept last selected item in first row.
+    const selectedItemIndex = isFirstRowFocused ? state.selectedItemIndex : safeIndex;
+    return {
+      ...state,
+      // focus search if first item is focused on up or left arrow key
+      focusOnSearch: isFirstRowFocused,
+      focusOnViewMore: false,
+      focusedItemIndex: isFirstRowFocused ? undefined : safeIndex,
+      selectedItemIndex
+    };
+  }
+  return {
+    ...state,
+    focusOnSearch: false,
+    focusOnViewMore: false,
+    selectedItemIndex: safeIndex,
+    focusedItemIndex: safeIndex
+  };
+};
+const initialState = {
+  focusOnSearch: true,
+  focusOnViewMore: false,
+  selectedItemIndex: 0,
+  focusedItemIndex: undefined,
+  listSize: 0
+};
+const getInitialState = (listSize, canFocusViewMore) => initialState => ({
+  ...initialState,
+  listSize,
+  canFocusViewMore
+});
+function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore) {
+  const [state, dispatch] = useReducer(reducer, initialState, getInitialState(listSize, canFocusViewMore));
+  useEffect(() => {
+    dispatch({
+      type: ACTIONS.UPDATE_STATE,
+      payload: {
+        canFocusViewMore
+      }
+    });
+  }, [canFocusViewMore]);
+  const {
+    selectedItemIndex,
+    focusedItemIndex,
+    focusOnSearch,
+    focusOnViewMore
+  } = state;
+  const reset = useCallback(listSize => {
+    let payload = {
+      ...initialState,
+      listSize
+    };
+    dispatch({
+      type: ACTIONS.UPDATE_STATE,
+      payload
+    });
+  }, []);
+  const removeFocusFromSearchAndSetOnItem = useCallback(index => {
+    const payload = {
+      focusedItemIndex: index,
+      selectedItemIndex: index,
+      focusOnSearch: false,
+      focusOnViewMore: false
+    };
+    dispatch({
+      type: ACTIONS.UPDATE_STATE,
+      payload
+    });
+  }, [dispatch]);
+  const setFocusOnSearch = useCallback(() => {
+    dispatch({
+      type: ACTIONS.FOCUS_SEARCH,
+      payload: {}
+    });
+  }, [dispatch]);
+  const isMoving = useRef(false);
+  const move = useCallback((e, positions, actualStep) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // avoid firing 2 moves at the same time when holding an arrow down as this can freeze the screen
+    if (!isMoving.current) {
+      isMoving.current = true;
+      requestAnimationFrame(() => {
+        isMoving.current = false;
+        dispatch({
+          type: ACTIONS.MOVE,
+          payload: {
+            positions,
+            step: actualStep
+          }
+        });
+      });
+    }
+  }, []);
+  const onKeyDown = useCallback(e => {
+    const avoidKeysWhileSearching = ['/',
+    // While already focused on search bar, let users type in.
+    'ArrowRight', 'ArrowLeft'];
+    if (focusOnSearch && avoidKeysWhileSearching.includes(e.key)) {
+      return;
+    }
+    switch (e.key) {
+      case '/':
+        e.preventDefault();
+        e.stopPropagation();
+        return setFocusOnSearch();
+      case 'ArrowRight':
+        return move(e, +1);
+      case 'ArrowLeft':
+        return move(e, -1);
+      case 'ArrowDown':
+        return move(e, +step);
+      case 'ArrowUp':
+        return move(e, -step, step);
+    }
+  }, [focusOnSearch, setFocusOnSearch, move, step]);
+  useEffect(() => {
+    // To reset selection when user filters
+    reset(listSize);
+  }, [listSize, reset]);
+  return {
+    selectedItemIndex,
+    onKeyDown,
+    focusOnSearch,
+    focusOnViewMore,
+    setFocusOnSearch,
+    focusedItemIndex,
+    setFocusedItemIndex: removeFocusFromSearchAndSetOnItem
+  };
+}
+export const ensureSafeIndex = (index, listSize) => {
+  if (index < 0) {
+    return 0;
+  }
+  if (index > listSize) {
+    return listSize;
+  }
+  return index;
+};
+export default useSelectAndFocusOnArrowNavigation;

package/dist/es2019/element-browser/index.js

@@ -0,0 +1,2 @@
+export { default as ElementBrowser } from './components/ElementBrowserLoader';
+export { ELEMENT_ITEM_HEIGHT } from './constants';

package/dist/es2019/element-browser/types.js

@@ -0,0 +1,5 @@
+export let Modes = /*#__PURE__*/function (Modes) {
+  Modes["full"] = "full";
+  Modes["inline"] = "inline";
+  return Modes;
+}({});

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "74.57.0";
+const packageVersion = "74.58.1";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -9,7 +9,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "74.57.0";
+const packageVersion = "74.58.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/utils/performance/measure-render.js

@@ -1,11 +1,10 @@
 import { isPerformanceAPIAvailable } from './is-performance-api-available';
-
 /**
  * Monitors if a pages enters a visibility state which will lead to
  * distorted duration measurements (where the measurement uses the
  * requestAnimationFrame api).
  */
-export function getDistortedDurationMonitor() {
+export const getDistortedDurationMonitor = () => {
   if (typeof document === 'undefined') {
     return {
       distortedDuration: false,
@@ -37,7 +36,7 @@ export function getDistortedDurationMonitor() {
       document.removeEventListener('visibilitychange', handleVisibilityChange);
     }
   };
-}
+};
 
 /**
  * Measures time it takes to render a frame including -> style, paint, layout and composition.

package/dist/es2019/utils/performance/measure-tti.js

@@ -1,5 +1,6 @@
 import { SEVERITY } from '../analytics';
 import { isPerformanceObserverLongTaskAvailable } from './is-performance-api-available';
+import { getDistortedDurationMonitor } from './measure-render';
 export function measureTTI(onMeasureComplete, idleThreshold = 1000, cancelAfter = 60,
 // Dependency Injection for easier testing
 PerfObserver) {
@@ -7,6 +8,8 @@ PerfObserver) {
     return;
   }
   const start = performance.now();
+  // Keeping track of users moving away from the tab, which distorts the TTI measurement
+  const distortedDurationMonitor = getDistortedDurationMonitor();
   let prevLongTask;
   let lastLongTask = {
     startTime: start,
@@ -37,13 +40,16 @@ PerfObserver) {
     const canceled = elapsedTimeMs > cancelAfterMs;
     if (!prevLongTask) {
       observer.disconnect();
-      return onMeasureComplete(prevEnd, 0, false);
+      distortedDurationMonitor.cleanup();
+      return onMeasureComplete(prevEnd, 0, false, distortedDurationMonitor.distortedDuration);
     } else if (lastLongTask.startTime - prevEnd >= idleThreshold) {
       observer.disconnect();
-      return onMeasureComplete(prevEnd, prevEnd - start, canceled);
+      distortedDurationMonitor.cleanup();
+      return onMeasureComplete(prevEnd, prevEnd - start, canceled, distortedDurationMonitor.distortedDuration);
     } else if (now - lastEnd >= idleThreshold || canceled) {
       observer.disconnect();
-      return onMeasureComplete(lastEnd, lastEnd - start, canceled);
+      distortedDurationMonitor.cleanup();
+      return onMeasureComplete(lastEnd, lastEnd - start, canceled, distortedDurationMonitor.distortedDuration);
     }
     return setTimeout(checkIdle, idleThreshold);
   };

package/dist/es2019/utils/validator.js

@@ -841,6 +841,13 @@ export const getValidMark = (mark, adfStage = 'final') => {
             attrs
           };
         }
+      case 'border':
+        {
+          return {
+            type,
+            attrs
+          };
+        }
     }
   }
   if (adfStage === 'stage0') {

package/dist/esm/element-browser/ElementBrowser.js

@@ -0,0 +1,142 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+import React, { PureComponent } from 'react';
+import StatelessElementBrowser from './components/StatelessElementBrowser';
+var ElementBrowser = /*#__PURE__*/function (_PureComponent) {
+  _inherits(ElementBrowser, _PureComponent);
+  var _super = _createSuper(ElementBrowser);
+  function ElementBrowser() {
+    var _this;
+    _classCallCheck(this, ElementBrowser);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      categories: [],
+      items: [],
+      searchTerm: '',
+      selectedCategory: _this.props.defaultCategory
+    });
+    _defineProperty(_assertThisInitialized(_this), "getCategories", function () {
+      var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.fetchItems();
+      return (
+        // NOTE: we fetch all items to determine available categories.
+        _this.filterCategories(items, _this.props.categories)
+      );
+    });
+    _defineProperty(_assertThisInitialized(_this), "filterCategories", function (items) {
+      var categories = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      var showCategories = _this.props.showCategories;
+      if (!showCategories) {
+        return [];
+      }
+      return categories.filter(function (category) {
+        return category.name === 'all' || items.some(function (item) {
+          return (item.categories || []).includes(category.name);
+        });
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "fetchItems", function (query, category) {
+      return _this.props.getItems(query, category);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleSearch", function (searchTerm) {
+      var defaultCategory = _this.props.defaultCategory;
+      _this.setState({
+        searchTerm: searchTerm,
+        selectedCategory: defaultCategory
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleCategorySelection", function (clickedCategory) {
+      var stateCategoryValue = _this.state.selectedCategory;
+
+      /**
+       * Reset selection if clicked on the same category twice.
+       */
+      if (stateCategoryValue === clickedCategory.name) {
+        return _this.setState({
+          selectedCategory: _this.props.defaultCategory
+        });
+      }
+      _this.setState({
+        selectedCategory: clickedCategory.name,
+        searchTerm: ''
+      });
+    });
+    return _this;
+  }
+  _createClass(ElementBrowser, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var items = this.fetchItems();
+      this.setState({
+        items: items,
+        categories: this.getCategories(items)
+      });
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var _this$state = this.state,
+        searchTerm = _this$state.searchTerm,
+        selectedCategory = _this$state.selectedCategory;
+
+      // Update both items and categories when there's a new getItems
+      if (this.props.getItems !== prevProps.getItems) {
+        this.setState({
+          categories: this.getCategories(),
+          items: this.fetchItems(searchTerm, selectedCategory)
+        });
+      } else if (searchTerm !== prevState.searchTerm || selectedCategory !== prevState.selectedCategory) {
+        this.setState({
+          items: this.fetchItems(searchTerm, selectedCategory)
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        onInsertItem = _this$props.onInsertItem,
+        onSelectItem = _this$props.onSelectItem,
+        showSearch = _this$props.showSearch,
+        showCategories = _this$props.showCategories,
+        mode = _this$props.mode,
+        emptyStateHandler = _this$props.emptyStateHandler,
+        viewMoreItem = _this$props.viewMoreItem;
+      var _this$state2 = this.state,
+        categories = _this$state2.categories,
+        searchTerm = _this$state2.searchTerm,
+        selectedCategory = _this$state2.selectedCategory,
+        items = _this$state2.items;
+      return /*#__PURE__*/React.createElement(StatelessElementBrowser, {
+        items: items,
+        categories: categories,
+        onSearch: this.handleSearch,
+        onSelectCategory: this.handleCategorySelection,
+        onSelectItem: onSelectItem,
+        onInsertItem: onInsertItem,
+        selectedCategory: selectedCategory,
+        showSearch: showSearch,
+        showCategories: showCategories,
+        mode: mode,
+        searchTerm: searchTerm,
+        emptyStateHandler: emptyStateHandler,
+        viewMoreItem: viewMoreItem
+      });
+    }
+  }]);
+  return ElementBrowser;
+}(PureComponent);
+_defineProperty(ElementBrowser, "defaultProps", {
+  defaultCategory: 'all',
+  onInsertItem: function onInsertItem() {}
+});
+export { ElementBrowser as default };

package/dist/esm/element-browser/ViewMore.js

@@ -0,0 +1,31 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+/** @jsx jsx */
+import { useEffect, useRef } from 'react';
+import { css, jsx } from '@emotion/react';
+import { ButtonItem, Section } from '@atlaskit/menu';
+var itemBefore = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 40px;\n  height: 40px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
+export var ViewMore = function ViewMore(_ref) {
+  var item = _ref.item,
+    focus = _ref.focus;
+  var ref = useRef(null);
+  useEffect(function () {
+    if (ref.current && focus) {
+      ref.current.focus();
+    }
+  }, [focus]);
+  return jsx(Section, {
+    hasSeparator: true
+  }, jsx(ButtonItem, {
+    onClick: item.action,
+    iconBefore: jsx("div", {
+      css: itemBefore
+    }, item.icon()),
+    "aria-describedby": item.title,
+    "data-testid": "view-more-elements-item"
+    // @ts-ignore Overriding Menu styles is not supported
+    ,
+    css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          padding: 0px ", ";\n        "])), "var(--ds-space-150, 12px)"),
+    ref: ref
+  }, item.title));
+};

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

@@ -0,0 +1,105 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject;
+var _excluded = ["categories"],
+  _excluded2 = ["buttonStyles"];
+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 { 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';
+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];
+  return jsx(Fragment, null, categories.map(function (category, index) {
+    return jsx(CategoryListItem, _extends({
+      key: category.title,
+      index: index,
+      category: category,
+      focus: focusedCategoryIndex === index,
+      setFocusedCategoryIndex: setFocusedCategoryIndex
+    }, props));
+  }));
+}
+function CategoryListItem(_ref2) {
+  var category = _ref2.category,
+    onSelectCategory = _ref2.onSelectCategory,
+    selectedCategory = _ref2.selectedCategory,
+    index = _ref2.index,
+    focus = _ref2.focus,
+    setFocusedCategoryIndex = _ref2.setFocusedCategoryIndex,
+    createAnalyticsEvent = _ref2.createAnalyticsEvent;
+  var ref = useFocus(focus);
+  var onClick = useCallback(function () {
+    onSelectCategory(category);
+
+    /**
+     * When user double clicks on same category, focus on first item.
+     */
+    if (selectedCategory === category.name) {
+      setFocusedCategoryIndex(0);
+    } else {
+      setFocusedCategoryIndex(index);
+    }
+    fireAnalyticsEvent(createAnalyticsEvent)({
+      payload: {
+        action: ACTION.CLICKED,
+        actionSubject: ACTION_SUBJECT.BUTTON,
+        actionSubjectId: ACTION_SUBJECT_ID.BUTTON_CATEGORY,
+        eventType: EVENT_TYPE.TRACK
+      }
+    });
+  }, [onSelectCategory, category, index, selectedCategory, setFocusedCategoryIndex, createAnalyticsEvent]);
+  var onFocus = useCallback(function () {
+    if (!focus) {
+      setFocusedCategoryIndex(index);
+    }
+  }, [focus, index, setFocusedCategoryIndex]);
+  var getTheme = useCallback(function (currentTheme, themeProps) {
+    var _currentTheme = currentTheme(themeProps),
+      buttonStyles = _currentTheme.buttonStyles,
+      rest = _objectWithoutProperties(_currentTheme, _excluded2);
+    return _objectSpread({
+      buttonStyles: _objectSpread(_objectSpread({}, buttonStyles), {}, {
+        textAlign: 'start',
+        marginLeft: "var(--ds-space-025, 2px)",
+        height: '100%',
+        width: '100%',
+        color: category.name !== selectedCategory ? "var(--ds-text, ".concat(N800, ")") : "var(--ds-text-selected, ".concat(B400, ")")
+      }, category.name === selectedCategory && {
+        background: "var(--ds-background-selected, ".concat(B50, ")")
+      })
+    }, rest);
+  }, [category.name, selectedCategory]);
+  return jsx("div", {
+    css: buttonWrapper
+  }, jsx(Button, {
+    appearance: "subtle",
+    isSelected: selectedCategory === category.name,
+    onClick: onClick,
+    onFocus: onFocus,
+    theme: getTheme,
+    ref: ref,
+    testId: "element-browser-category-item"
+  }, category.title));
+}
+var buttonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: ", "px;\n  margin: ", " ", "\n    ", " 0;\n\n  @media (min-width: ", "px) {\n    :not(:last-child) {\n      margin-bottom: 0;\n    }\n  }\n"])), GRID_SIZE * 4, "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", DEVICE_BREAKPOINT_NUMBERS.medium);
+var MemoizedCategoryListWithAnalytics = /*#__PURE__*/memo(withAnalyticsContext({
+  component: 'CategoryList'
+})(CategoryList));
+export default MemoizedCategoryListWithAnalytics;