@atlaskit/editor-core 187.40.2 → 187.41.0

package/dist/cjs/ui/ElementBrowser/hooks/use-select-and-focus-on-arrow-navigation.js

@@ -1,286 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ensureSafeIndex = exports.default = exports.ACTIONS = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-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) { (0, _defineProperty2.default)(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; }
-/**
- * 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} />
- *    }
- *
- */
-var ACTIONS = /*#__PURE__*/function (ACTIONS) {
-  ACTIONS["FOCUS_SEARCH"] = "focusOnSearch";
-  ACTIONS["UPDATE_STATE"] = "updateState";
-  ACTIONS["MOVE"] = "move";
-  return ACTIONS;
-}({});
-exports.ACTIONS = 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 = (0, _react.useReducer)(reducer, initialState, getInitialState(listSize, canFocusViewMore)),
-    _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
-    state = _useReducer2[0],
-    dispatch = _useReducer2[1];
-  (0, _react.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 = (0, _react.useCallback)(function (listSize) {
-    var payload = _objectSpread(_objectSpread({}, initialState), {}, {
-      listSize: listSize
-    });
-    dispatch({
-      type: ACTIONS.UPDATE_STATE,
-      payload: payload
-    });
-  }, []);
-  var removeFocusFromSearchAndSetOnItem = (0, _react.useCallback)(function (index) {
-    var payload = {
-      focusedItemIndex: index,
-      selectedItemIndex: index,
-      focusOnSearch: false,
-      focusOnViewMore: false
-    };
-    dispatch({
-      type: ACTIONS.UPDATE_STATE,
-      payload: payload
-    });
-  }, [dispatch]);
-  var setFocusOnSearch = (0, _react.useCallback)(function () {
-    dispatch({
-      type: ACTIONS.FOCUS_SEARCH,
-      payload: {}
-    });
-  }, [dispatch]);
-  var isMoving = (0, _react.useRef)(false);
-  var move = (0, _react.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 = (0, _react.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]);
-  (0, _react.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
-  };
-}
-var ensureSafeIndex = function ensureSafeIndex(index, listSize) {
-  if (index < 0) {
-    return 0;
-  }
-  if (index > listSize) {
-    return listSize;
-  }
-  return index;
-};
-exports.ensureSafeIndex = ensureSafeIndex;
-var _default = useSelectAndFocusOnArrowNavigation;
-exports.default = _default;

package/dist/cjs/ui/ElementBrowser/index.js

@@ -1,10 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _ElementBrowserLoader = _interopRequireDefault(require("./components/ElementBrowserLoader"));
-var _default = _ElementBrowserLoader.default;
-exports.default = _default;

package/dist/es2019/ui/ElementBrowser/ElementBrowser.js

@@ -1,117 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { PureComponent } from 'react';
-import StatelessElementBrowser from './components/StatelessElementBrowser';
-export default class ElementBrowser extends PureComponent {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "state", {
-      categories: [],
-      items: [],
-      searchTerm: '',
-      selectedCategory: this.props.defaultCategory
-    });
-    _defineProperty(this, "getCategories", (items = this.fetchItems()) =>
-    // NOTE: we fetch all items to determine available categories.
-    this.filterCategories(items, this.props.categories));
-    _defineProperty(this, "filterCategories", (items, categories = []) => {
-      const {
-        showCategories
-      } = this.props;
-      if (!showCategories) {
-        return [];
-      }
-      return categories.filter(category => category.name === 'all' || items.some(item => (item.categories || []).includes(category.name)));
-    });
-    _defineProperty(this, "fetchItems", (query, category) => {
-      return this.props.getItems(query, category);
-    });
-    _defineProperty(this, "handleSearch", searchTerm => {
-      const {
-        defaultCategory
-      } = this.props;
-      this.setState({
-        searchTerm,
-        selectedCategory: defaultCategory
-      });
-    });
-    _defineProperty(this, "handleCategorySelection", clickedCategory => {
-      const {
-        selectedCategory: stateCategoryValue
-      } = this.state;
-
-      /**
-       * 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: ''
-      });
-    });
-  }
-  componentDidMount() {
-    const items = this.fetchItems();
-    this.setState({
-      items,
-      categories: this.getCategories(items)
-    });
-  }
-  componentDidUpdate(prevProps, prevState) {
-    const {
-      searchTerm,
-      selectedCategory
-    } = this.state;
-
-    // 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)
-      });
-    }
-  }
-  render() {
-    const {
-      onInsertItem,
-      onSelectItem,
-      showSearch,
-      showCategories,
-      mode,
-      emptyStateHandler,
-      viewMoreItem
-    } = this.props;
-    const {
-      categories,
-      searchTerm,
-      selectedCategory,
-      items
-    } = this.state;
-    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
-    });
-  }
-}
-_defineProperty(ElementBrowser, "defaultProps", {
-  defaultCategory: 'all',
-  onInsertItem: () => {}
-});

package/dist/es2019/ui/ElementBrowser/ViewMore.js

@@ -1,40 +0,0 @@
-/** @jsx jsx */
-import { useEffect, useRef } from 'react';
-import { css, jsx } from '@emotion/react';
-import { Section, ButtonItem } from '@atlaskit/menu';
-const itemBefore = css`
-  width: 40px;
-  height: 40px;
-  box-sizing: border-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-right: ${"var(--ds-space-050, 4px)"};
-`;
-export const ViewMore = ({
-  item,
-  focus
-}) => {
-  const ref = useRef(null);
-  useEffect(() => {
-    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`
-          padding: 0px 12px;
-        `,
-    ref: ref
-  }, item.title));
-};

package/dist/es2019/ui/ElementBrowser/components/CategoryList.js

@@ -1,104 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react';
-import React, { memo, useCallback, Fragment } from 'react';
-import { N800, B400, B50 } from '@atlaskit/theme/colors';
-import Button from '@atlaskit/button/custom-theme-button';
-import { withAnalyticsContext } from '@atlaskit/analytics-next';
-import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE } from '../constants';
-import useFocus from '../hooks/use-focus';
-import { fireAnalyticsEvent, EVENT_TYPE, ACTION_SUBJECT, ACTION_SUBJECT_ID, ACTION } from '@atlaskit/editor-common/analytics';
-function CategoryList({
-  categories = [],
-  ...props
-}) {
-  const [focusedCategoryIndex, setFocusedCategoryIndex] = React.useState(null);
-  return jsx(Fragment, null, categories.map((category, index) => jsx(CategoryListItem, _extends({
-    key: category.title,
-    index: index,
-    category: category,
-    focus: focusedCategoryIndex === index,
-    setFocusedCategoryIndex: setFocusedCategoryIndex
-  }, props))));
-}
-function CategoryListItem({
-  category,
-  onSelectCategory,
-  selectedCategory,
-  index,
-  focus,
-  setFocusedCategoryIndex,
-  createAnalyticsEvent
-}) {
-  const ref = useFocus(focus);
-  const onClick = useCallback(() => {
-    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]);
-  const onFocus = useCallback(() => {
-    if (!focus) {
-      setFocusedCategoryIndex(index);
-    }
-  }, [focus, index, setFocusedCategoryIndex]);
-  const getTheme = useCallback((currentTheme, themeProps) => {
-    const {
-      buttonStyles,
-      ...rest
-    } = currentTheme(themeProps);
-    return {
-      buttonStyles: {
-        ...buttonStyles,
-        textAlign: 'start',
-        marginLeft: '2px',
-        height: '100%',
-        width: '100%',
-        color: category.name !== selectedCategory ? `var(--ds-text, ${N800})` : `var(--ds-text-selected, ${B400})`,
-        ...(category.name === selectedCategory && {
-          background: `var(--ds-background-selected, ${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));
-}
-const buttonWrapper = css`
-  height: ${GRID_SIZE * 4}px;
-  margin: 4px 4px 4px 0;
-
-  @media (min-width: ${DEVICE_BREAKPOINT_NUMBERS.medium}px) {
-    :not(:last-child) {
-      margin-bottom: 0;
-    }
-  }
-`;
-const MemoizedCategoryListWithAnalytics = /*#__PURE__*/memo(withAnalyticsContext({
-  component: 'CategoryList'
-})(CategoryList));
-export default MemoizedCategoryListWithAnalytics;

package/dist/es2019/ui/ElementBrowser/components/ElementBrowserLoader.js

@@ -1,21 +0,0 @@
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react';
-import React from 'react';
-import Loadable from 'react-loadable';
-import Spinner from '@atlaskit/spinner';
-const spinnerContainer = css`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
-`;
-const ElementBrowserLoader = Loadable({
-  loader: () => import( /* webpackChunkName: "@atlaskit-internal_editor-element-browser" */'../ElementBrowser').then(module => module.default),
-  loading: () => jsx("div", {
-    css: spinnerContainer
-  }, jsx(Spinner, {
-    size: "medium"
-  }))
-});
-export default ElementBrowserLoader;