@atlaskit/editor-common 74.57.0 → 74.58.1

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

@@ -0,0 +1,258 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+/** @jsx jsx */
+import React, { memo, useCallback, useEffect, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../analytics';
+import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE, INLINE_SIDEBAR_HEIGHT, SIDEBAR_HEADING_PADDING_LEFT, SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_WIDTH } from '../constants';
+import useContainerWidth from '../hooks/use-container-width';
+import useSelectAndFocusOnArrowNavigation from '../hooks/use-select-and-focus-on-arrow-navigation';
+import { ViewMore } from '../ViewMore';
+import CategoryList from './CategoryList';
+import ElementList from './ElementList/ElementList';
+import ElementSearch from './ElementSearch';
+var wrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  max-height: inherit;\n  overflow: hidden;\n"])));
+var baseBrowserContainerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  height: 100%;\n  /** Needed for Safari to work with current css.\n  * 100% heights wont work and\n  * will default to auto if one of the containers doesn't have a specified height in pixels.\n  * Setting the min-height to fill available fits safari's needs and the above 100% height works on the rest of the browsers.\n  */\n\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n\n  /* stylelint-disable-next-line */\n  min-height: -webkit-fill-available;\n"])));
+var mobileElementBrowserContainer = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n  flex-direction: column;\n"])), baseBrowserContainerStyles);
+var elementBrowserContainer = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  flex-direction: row;\n"])), baseBrowserContainerStyles);
+var baseSidebarStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n\n  overflow-x: auto;\n  overflow-y: hidden;\n"])));
+var mobileSideBar = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", ";\n  flex: 0 0 ", ";\n  padding: ", " ", " 0\n    ", ";\n"])), baseSidebarStyles, INLINE_SIDEBAR_HEIGHT, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)");
+var mobileSideBarShowCategories = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n"])));
+var sideBar = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", ";\n  flex: 0 0 'auto';\n"])), baseSidebarStyles);
+var sideBarShowCategories = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", ";\n  flex: 0 0 ", ";\n"])), baseSidebarStyles, SIDEBAR_WIDTH);
+var sidebarHeading = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  flex: 0 0 ", ";\n  display: inline-flex;\n  align-items: center;\n  padding-left: ", ";\n  font-weight: 700;\n"])), SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_HEADING_PADDING_LEFT);
+var mobileMainContent = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n\n  display: flex;\n  flex-direction: column;\n\n  overflow-y: auto;\n  height: 100%;\n"])));
+var mainContent = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  ", "\n  margin-left: ", "px;\n  // Needed for safari\n  height: auto;\n"])), mobileMainContent, GRID_SIZE * 2);
+var searchContainer = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  padding-bottom: ", "px;\n"])), GRID_SIZE * 2);
+var mobileCategoryListWrapper = css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: flex;\n  overflow-x: auto;\n\n  padding: ", "px 0 ", "px 0;\n  min-height: ", "px;\n\n  overflow: -moz-scrollbars-none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n"])), GRID_SIZE, GRID_SIZE * 2, GRID_SIZE * 4);
+var categoryListWrapper = css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  ", "\n  padding: 0;\n  margin-top: ", "px;\n  flex-direction: column;\n"])), mobileCategoryListWrapper, GRID_SIZE * 3);
+function StatelessElementBrowser(props) {
+  var items = props.items,
+    onSelectItem = props.onSelectItem,
+    onInsertItem = props.onInsertItem,
+    viewMoreItem = props.viewMoreItem;
+  var _useContainerWidth = useContainerWidth(),
+    containerWidth = _useContainerWidth.containerWidth,
+    ContainerWidthMonitor = _useContainerWidth.ContainerWidthMonitor;
+  var _useState = useState(1),
+    _useState2 = _slicedToArray(_useState, 2),
+    columnCount = _useState2[0],
+    setColumnCount = _useState2[1];
+  var _useSelectAndFocusOnA = useSelectAndFocusOnArrowNavigation(items.length - 1, columnCount, !!viewMoreItem),
+    selectedItemIndex = _useSelectAndFocusOnA.selectedItemIndex,
+    focusedItemIndex = _useSelectAndFocusOnA.focusedItemIndex,
+    setFocusedItemIndex = _useSelectAndFocusOnA.setFocusedItemIndex,
+    focusOnSearch = _useSelectAndFocusOnA.focusOnSearch,
+    focusOnViewMore = _useSelectAndFocusOnA.focusOnViewMore,
+    onKeyDown = _useSelectAndFocusOnA.onKeyDown,
+    setFocusOnSearch = _useSelectAndFocusOnA.setFocusOnSearch;
+  useEffect(function () {
+    fireAnalyticsEvent(props.createAnalyticsEvent)({
+      payload: {
+        action: ACTION.OPENED,
+        actionSubject: ACTION_SUBJECT.ELEMENT_BROWSER,
+        eventType: EVENT_TYPE.UI,
+        attributes: {
+          mode: props.mode
+        }
+      }
+    });
+    return function () {
+      fireAnalyticsEvent(props.createAnalyticsEvent)({
+        payload: {
+          action: ACTION.CLOSED,
+          actionSubject: ACTION_SUBJECT.ELEMENT_BROWSER,
+          eventType: EVENT_TYPE.UI,
+          attributes: {
+            mode: props.mode
+          }
+        }
+      });
+    };
+  }, [props.createAnalyticsEvent, props.mode]);
+
+  /* Only for hitting enter to select item when focused on search bar,
+   * 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;
+    }
+    if (onInsertItem && selectedItem != null) {
+      onInsertItem(selectedItem);
+    }
+    e.preventDefault();
+  }, [onInsertItem, selectedItem]);
+
+  /**
+   * On arrow key selection and clicks the selectedItemIndex will change.
+   * Making sure to update parent component.
+   */
+  useEffect(function () {
+    if (onSelectItem && selectedItem != null) {
+      onSelectItem(selectedItem);
+    }
+  }, [onSelectItem, selectedItem]);
+  return jsx("div", {
+    css: wrapper,
+    "data-testid": "element-browser"
+  }, jsx(ContainerWidthMonitor, null), containerWidth < DEVICE_BREAKPOINT_NUMBERS.medium ? jsx(MobileBrowser, _extends({}, props, {
+    selectedItemIndex: selectedItemIndex,
+    focusedItemIndex: focusedItemIndex,
+    setFocusedItemIndex: setFocusedItemIndex,
+    focusOnSearch: focusOnSearch,
+    setColumnCount: setColumnCount,
+    setFocusOnSearch: setFocusOnSearch,
+    onKeyPress: onItemsEnterKeyPress,
+    onKeyDown: onKeyDown,
+    viewMoreItem: viewMoreItem,
+    focusOnViewMore: focusOnViewMore
+  })) : jsx(DesktopBrowser, _extends({}, props, {
+    selectedItemIndex: selectedItemIndex,
+    focusedItemIndex: focusedItemIndex,
+    setFocusedItemIndex: setFocusedItemIndex,
+    focusOnSearch: focusOnSearch,
+    setColumnCount: setColumnCount,
+    setFocusOnSearch: setFocusOnSearch,
+    onKeyPress: onItemsEnterKeyPress,
+    onKeyDown: onKeyDown
+  })));
+}
+function MobileBrowser(_ref) {
+  var showCategories = _ref.showCategories,
+    showSearch = _ref.showSearch,
+    onSearch = _ref.onSearch,
+    mode = _ref.mode,
+    categories = _ref.categories,
+    onSelectCategory = _ref.onSelectCategory,
+    items = _ref.items,
+    onInsertItem = _ref.onInsertItem,
+    selectedCategory = _ref.selectedCategory,
+    selectedItemIndex = _ref.selectedItemIndex,
+    focusedItemIndex = _ref.focusedItemIndex,
+    setFocusedItemIndex = _ref.setFocusedItemIndex,
+    focusOnSearch = _ref.focusOnSearch,
+    focusOnViewMore = _ref.focusOnViewMore,
+    setColumnCount = _ref.setColumnCount,
+    setFocusOnSearch = _ref.setFocusOnSearch,
+    onKeyPress = _ref.onKeyPress,
+    onKeyDown = _ref.onKeyDown,
+    searchTerm = _ref.searchTerm,
+    createAnalyticsEvent = _ref.createAnalyticsEvent,
+    emptyStateHandler = _ref.emptyStateHandler,
+    viewMoreItem = _ref.viewMoreItem;
+  return jsx("div", {
+    css: mobileElementBrowserContainer,
+    onKeyDown: onKeyDown,
+    "data-testid": "mobile__element-browser"
+  }, jsx("div", {
+    css: showCategories ? [mobileSideBar, mobileSideBarShowCategories] : mobileSideBar
+  }, showSearch && jsx(ElementSearch, {
+    onSearch: onSearch,
+    onKeyDown: onKeyPress,
+    mode: mode,
+    focus: focusOnSearch,
+    onClick: setFocusOnSearch,
+    searchTerm: searchTerm
+  }), showCategories && jsx("nav", {
+    css: mobileCategoryListWrapper,
+    tabIndex: -1
+  }, jsx(CategoryList, {
+    categories: categories,
+    onSelectCategory: onSelectCategory,
+    selectedCategory: selectedCategory
+  }))), jsx("div", {
+    css: mobileMainContent
+  }, jsx(ElementList, {
+    items: items,
+    mode: mode,
+    onInsertItem: onInsertItem,
+    selectedItemIndex: selectedItemIndex,
+    focusedItemIndex: focusedItemIndex,
+    setFocusedItemIndex: setFocusedItemIndex,
+    setColumnCount: setColumnCount,
+    createAnalyticsEvent: createAnalyticsEvent,
+    emptyStateHandler: emptyStateHandler,
+    selectedCategory: selectedCategory,
+    searchTerm: searchTerm
+  })), viewMoreItem && jsx(ViewMore, {
+    item: viewMoreItem,
+    focus: focusOnViewMore
+  }));
+}
+function DesktopBrowser(_ref2) {
+  var showCategories = _ref2.showCategories,
+    showSearch = _ref2.showSearch,
+    onSearch = _ref2.onSearch,
+    mode = _ref2.mode,
+    categories = _ref2.categories,
+    onSelectCategory = _ref2.onSelectCategory,
+    items = _ref2.items,
+    onInsertItem = _ref2.onInsertItem,
+    selectedCategory = _ref2.selectedCategory,
+    selectedItemIndex = _ref2.selectedItemIndex,
+    focusedItemIndex = _ref2.focusedItemIndex,
+    setFocusedItemIndex = _ref2.setFocusedItemIndex,
+    focusOnSearch = _ref2.focusOnSearch,
+    setColumnCount = _ref2.setColumnCount,
+    setFocusOnSearch = _ref2.setFocusOnSearch,
+    onKeyPress = _ref2.onKeyPress,
+    onKeyDown = _ref2.onKeyDown,
+    searchTerm = _ref2.searchTerm,
+    createAnalyticsEvent = _ref2.createAnalyticsEvent,
+    emptyStateHandler = _ref2.emptyStateHandler;
+  return jsx("div", {
+    css: elementBrowserContainer,
+    "data-testid": "desktop__element-browser"
+  }, showCategories && jsx("div", {
+    css: showCategories ? sideBarShowCategories : sideBar
+  }, jsx("h2", {
+    css: sidebarHeading,
+    "data-testid": "sidebar-heading"
+  }, jsx(FormattedMessage, {
+    id: "fabric.editor.elementbrowser.sidebar.heading",
+    defaultMessage: "Browse",
+    description: "Sidebar heading"
+  })), jsx("nav", {
+    css: categoryListWrapper
+  }, jsx(CategoryList, {
+    categories: categories,
+    onSelectCategory: onSelectCategory,
+    selectedCategory: selectedCategory,
+    createAnalyticsEvent: createAnalyticsEvent
+  }))), jsx("div", {
+    css: mainContent,
+    onKeyDown: onKeyDown,
+    "data-testid": "main-content"
+  }, showSearch && jsx("div", {
+    css: searchContainer
+  }, jsx(ElementSearch, {
+    onSearch: onSearch,
+    onKeyDown: onKeyPress,
+    mode: mode,
+    focus: focusOnSearch,
+    onClick: setFocusOnSearch,
+    searchTerm: searchTerm
+  })), jsx(ElementList, {
+    items: items,
+    mode: mode,
+    onInsertItem: onInsertItem,
+    selectedItemIndex: selectedItemIndex,
+    focusedItemIndex: focusedItemIndex,
+    setFocusedItemIndex: setFocusedItemIndex,
+    setColumnCount: setColumnCount,
+    createAnalyticsEvent: createAnalyticsEvent,
+    emptyStateHandler: emptyStateHandler,
+    selectedCategory: selectedCategory,
+    searchTerm: searchTerm
+  })));
+}
+var MemoizedElementBrowser = /*#__PURE__*/memo(withAnalyticsContext({
+  source: 'ElementBrowser'
+})(withAnalyticsEvents()(StatelessElementBrowser)));
+export default MemoizedElementBrowser;

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

@@ -0,0 +1,23 @@
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+import { gridSize } from '@atlaskit/theme/constants';
+// TODO: Migrate away from gridSize
+// Recommendation: Replace gridSize with 8
+export var GRID_SIZE = gridSize();
+export var DEVICE_BREAKPOINT_NUMBERS = {
+  small: GRID_SIZE * 40,
+  medium: GRID_SIZE * 75,
+  large: GRID_SIZE * 128
+};
+export var FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS = {
+  small: GRID_SIZE * 50,
+  medium: DEVICE_BREAKPOINT_NUMBERS.medium,
+  large: DEVICE_BREAKPOINT_NUMBERS.large
+};
+export var SIDEBAR_WIDTH = "".concat(GRID_SIZE * 25, "px");
+export var SIDEBAR_HEADING_WRAPPER_HEIGHT = "".concat(GRID_SIZE * 6, "px");
+export var SIDEBAR_HEADING_PADDING_LEFT = '12px';
+export var INLINE_SIDEBAR_HEIGHT = '54px';
+export var SEARCH_ITEM_HEIGHT_WIDTH = '20px';
+export var SCROLLBAR_WIDTH = 15;
+export var ELEMENT_LIST_PADDING = 2;
+export var ELEMENT_ITEM_HEIGHT = 75;

package/dist/esm/element-browser/hooks/use-container-width.js

@@ -0,0 +1,61 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+/** @jsx jsx */
+import React, { memo, useEffect, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { WidthObserver } from '@atlaskit/width-detector';
+
+/**
+ *
+ * Problem:
+ * While using WidthObserver, there's no initial width.
+ * That may cause problems, but not limited to, something like a lag between
+ * renders for conditionally rendered components.
+ *
+ * solution:
+ * useContainerWidth() hook
+ * it pre-measures the width of a parent container on initial mount
+ * and gives you back the containerWidth.
+ *
+ *
+ * Example hook usage:
+ *
+ *  const { containerWidth, ContainerWidthMonitor } = useContainerWidth();
+ *
+ *  return (
+ *   <>
+ *    <ContainerWidthMonitor />
+ *    {containerWidth < 600 ? <MobileComponent /> : <DesktopComponent />}
+ *   </>
+ *  );
+ *
+ */
+
+var widthObserverWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+export default function useContainerWidth() {
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    containerWidth = _useState2[0],
+    setContainerWidth = _useState2[1];
+  var ref = useRef(null);
+  useEffect(function () {
+    var current = ref.current;
+    if (ref && current) {
+      setContainerWidth(current.getBoundingClientRect().width);
+    }
+  }, [ref]);
+  var ContainerWidthMonitor = /*#__PURE__*/memo(function () {
+    return jsx("div", {
+      css: widthObserverWrapper,
+      ref: ref,
+      tabIndex: -1
+    }, jsx(WidthObserver, {
+      setWidth: setContainerWidth
+    }));
+  });
+  return {
+    containerWidth: containerWidth,
+    ContainerWidthMonitor: ContainerWidthMonitor
+  };
+}

package/dist/esm/element-browser/hooks/use-focus.js

@@ -0,0 +1,46 @@
+import { useLayoutEffect, useRef } from 'react';
+
+/**
+ * A custom hook that handles focus on a DOM element.
+ * Takes in a boolean value and calls element.focus
+ *
+ * @param {boolean} focus
+ *
+ * Example usage:
+ *******************************************************************************
+ *    const SearchBar = ({ focus }) => {
+ *      const ref = useFocus(focus);
+ *      return <input ref={ref} />
+ *    }
+ *******************************************************************************
+ *    const ItemList = ({ items, focus }) => (
+ *       <ul>
+ *        {items.map((item, index) => (
+ *          <Item key={item.uuid} item={item} focus={focus} />
+ *        ))}
+ *       </ul>
+ *     );
+ *
+ *    const Item = ({ item, focus }) => {
+ *      const ref = useFocus(focus);
+ *      return (
+ *        <li ref={ref}>
+ *          {item.name}
+ *        </li>
+ *      )
+ *    }
+ *******************************************************************************
+ */
+
+export default function useFocus(focus) {
+  var ref = useRef(null);
+  useLayoutEffect(function () {
+    var current = ref.current;
+    if (focus && current && document.activeElement !== current) {
+      current.focus({
+        preventScroll: true
+      });
+    }
+  }, [focus]);
+  return ref;
+}

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

@@ -0,0 +1,278 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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';
+
+/**
+ * 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 var ACTIONS = /*#__PURE__*/function (ACTIONS) {
+  ACTIONS["FOCUS_SEARCH"] = "focusOnSearch";
+  ACTIONS["UPDATE_STATE"] = "updateState";
+  ACTIONS["MOVE"] = "move";
+  return ACTIONS;
+}({});
+var reducer = function reducer(state, action) {
+  switch (action.type) {
+    case ACTIONS.UPDATE_STATE:
+      return _objectSpread(_objectSpread({}, state), action.payload);
+    case ACTIONS.FOCUS_SEARCH:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        focusedItemIndex: undefined,
+        focusOnSearch: true,
+        focusOnViewMore: false
+      });
+    case ACTIONS.MOVE:
+      return moveReducer(state, action);
+  }
+  return state;
+};
+var moveReducer = function moveReducer(state, action) {
+  var listSize = state.listSize,
+    canFocusViewMore = state.canFocusViewMore;
+  if (state.focusOnSearch) {
+    // up arrow
+    if (action.payload.positions && action.payload.positions <= -1) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        focusOnSearch: false,
+        focusOnViewMore: !!canFocusViewMore,
+        focusedItemIndex: canFocusViewMore ? undefined : listSize,
+        selectedItemIndex: canFocusViewMore ? undefined : listSize
+      });
+    } else {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        focusOnSearch: false,
+        focusOnViewMore: false,
+        focusedItemIndex: 0,
+        selectedItemIndex: 0
+      });
+    }
+  }
+  if (state.focusOnViewMore) {
+    // down arrow
+    if (action.payload.positions === 1) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        focusOnSearch: true,
+        focusOnViewMore: false,
+        focusedItemIndex: undefined,
+        // if search is focused then select first item.
+        selectedItemIndex: 0
+      });
+    } else {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        focusOnSearch: false,
+        focusOnViewMore: false,
+        focusedItemIndex: listSize,
+        selectedItemIndex: listSize
+      });
+    }
+  }
+  var newIndex = state.selectedItemIndex ? state.selectedItemIndex + action.payload.positions : action.payload.positions;
+  var 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.
+    var isLastItemFocused = newIndex > listSize;
+    var focusOnSearch = isLastItemFocused && !canFocusViewMore;
+    var focusOnViewMore = isLastItemFocused && !!canFocusViewMore;
+    // if search is focused, then select first item.
+    // otherwise if view more is focused then select item should be undefined.
+    var selectedItemIndex = focusOnSearch ? 0 : focusOnViewMore ? undefined : safeIndex;
+    return _objectSpread(_objectSpread({}, state), {}, {
+      focusOnSearch: focusOnSearch,
+      focusOnViewMore: focusOnViewMore,
+      selectedItemIndex: 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.
+    var isFirstRowFocused = newIndex < 0;
+    // if focus goes to search then kept last selected item in first row.
+    var _selectedItemIndex = isFirstRowFocused ? state.selectedItemIndex : safeIndex;
+    return _objectSpread(_objectSpread({}, state), {}, {
+      // focus search if first item is focused on up or left arrow key
+      focusOnSearch: isFirstRowFocused,
+      focusOnViewMore: false,
+      focusedItemIndex: isFirstRowFocused ? undefined : safeIndex,
+      selectedItemIndex: _selectedItemIndex
+    });
+  }
+  return _objectSpread(_objectSpread({}, state), {}, {
+    focusOnSearch: false,
+    focusOnViewMore: false,
+    selectedItemIndex: safeIndex,
+    focusedItemIndex: safeIndex
+  });
+};
+var initialState = {
+  focusOnSearch: true,
+  focusOnViewMore: false,
+  selectedItemIndex: 0,
+  focusedItemIndex: undefined,
+  listSize: 0
+};
+var getInitialState = function getInitialState(listSize, canFocusViewMore) {
+  return function (initialState) {
+    return _objectSpread(_objectSpread({}, initialState), {}, {
+      listSize: listSize,
+      canFocusViewMore: canFocusViewMore
+    });
+  };
+};
+function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore) {
+  var _useReducer = useReducer(reducer, initialState, getInitialState(listSize, canFocusViewMore)),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  useEffect(function () {
+    dispatch({
+      type: ACTIONS.UPDATE_STATE,
+      payload: {
+        canFocusViewMore: canFocusViewMore
+      }
+    });
+  }, [canFocusViewMore]);
+  var selectedItemIndex = state.selectedItemIndex,
+    focusedItemIndex = state.focusedItemIndex,
+    focusOnSearch = state.focusOnSearch,
+    focusOnViewMore = state.focusOnViewMore;
+  var reset = useCallback(function (listSize) {
+    var payload = _objectSpread(_objectSpread({}, initialState), {}, {
+      listSize: listSize
+    });
+    dispatch({
+      type: ACTIONS.UPDATE_STATE,
+      payload: payload
+    });
+  }, []);
+  var removeFocusFromSearchAndSetOnItem = useCallback(function (index) {
+    var payload = {
+      focusedItemIndex: index,
+      selectedItemIndex: index,
+      focusOnSearch: false,
+      focusOnViewMore: false
+    };
+    dispatch({
+      type: ACTIONS.UPDATE_STATE,
+      payload: payload
+    });
+  }, [dispatch]);
+  var setFocusOnSearch = useCallback(function () {
+    dispatch({
+      type: ACTIONS.FOCUS_SEARCH,
+      payload: {}
+    });
+  }, [dispatch]);
+  var isMoving = useRef(false);
+  var move = useCallback(function (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(function () {
+        isMoving.current = false;
+        dispatch({
+          type: ACTIONS.MOVE,
+          payload: {
+            positions: positions,
+            step: actualStep
+          }
+        });
+      });
+    }
+  }, []);
+  var onKeyDown = useCallback(function (e) {
+    var 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(function () {
+    // To reset selection when user filters
+    reset(listSize);
+  }, [listSize, reset]);
+  return {
+    selectedItemIndex: selectedItemIndex,
+    onKeyDown: onKeyDown,
+    focusOnSearch: focusOnSearch,
+    focusOnViewMore: focusOnViewMore,
+    setFocusOnSearch: setFocusOnSearch,
+    focusedItemIndex: focusedItemIndex,
+    setFocusedItemIndex: removeFocusFromSearchAndSetOnItem
+  };
+}
+export var ensureSafeIndex = function ensureSafeIndex(index, listSize) {
+  if (index < 0) {
+    return 0;
+  }
+  if (index > listSize) {
+    return listSize;
+  }
+  return index;
+};
+export default useSelectAndFocusOnArrowNavigation;

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

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

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

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