@atlaskit/editor-core 187.40.1 → 187.41.0

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

@@ -1,339 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
-import React, { memo, useState, useCallback, useEffect } from 'react';
-import { css, jsx } from '@emotion/react';
-import { FormattedMessage } from 'react-intl-next';
-import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { fireAnalyticsEvent, EVENT_TYPE, ACTION_SUBJECT, ACTION } from '@atlaskit/editor-common/analytics';
-import ElementList from './ElementList/ElementList';
-import CategoryList from './CategoryList';
-import ElementSearch from './ElementSearch';
-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';
-const wrapper = css`
-  width: 100%;
-  max-height: inherit;
-  overflow: hidden;
-`;
-const baseBrowserContainerStyles = css`
-  display: flex;
-  height: 100%;
-  /** Needed for Safari to work with current css.
-  * 100% heights wont work and
-  * will default to auto if one of the containers doesn't have a specified height in pixels.
-  * Setting the min-height to fill available fits safari's needs and the above 100% height works on the rest of the browsers.
-  */
-
-  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
-
-  /* stylelint-disable-next-line */
-  min-height: -webkit-fill-available;
-`;
-const mobileElementBrowserContainer = css`
-  ${baseBrowserContainerStyles};
-  flex-direction: column;
-`;
-const elementBrowserContainer = css`
-  ${baseBrowserContainerStyles};
-  flex-direction: row;
-`;
-const baseSidebarStyles = css`
-  display: flex;
-  flex-direction: column;
-
-  overflow-x: auto;
-  overflow-y: hidden;
-`;
-const mobileSideBar = css`
-  ${baseSidebarStyles};
-  flex: 0 0 ${INLINE_SIDEBAR_HEIGHT};
-  padding: ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-150, 12px)"} 0
-    ${"var(--ds-space-150, 12px)"};
-`;
-const mobileSideBarShowCategories = css`
-  flex: 0 0 auto;
-`;
-const sideBar = css`
-  ${baseSidebarStyles};
-  flex: 0 0 'auto';
-`;
-const sideBarShowCategories = css`
-  ${baseSidebarStyles};
-  flex: 0 0 ${SIDEBAR_WIDTH};
-`;
-const sidebarHeading = css`
-  flex: 0 0 ${SIDEBAR_HEADING_WRAPPER_HEIGHT};
-  display: inline-flex;
-  align-items: center;
-  padding-left: ${SIDEBAR_HEADING_PADDING_LEFT};
-  font-weight: 700;
-`;
-const mobileMainContent = css`
-  flex: 1 1 auto;
-
-  display: flex;
-  flex-direction: column;
-
-  overflow-y: auto;
-  height: 100%;
-`;
-const mainContent = css`
-  ${mobileMainContent}
-  margin-left: ${GRID_SIZE * 2}px;
-  // Needed for safari
-  height: auto;
-`;
-const searchContainer = css`
-  padding-bottom: ${GRID_SIZE * 2}px;
-`;
-const mobileCategoryListWrapper = css`
-  display: flex;
-  overflow-x: auto;
-
-  padding: ${GRID_SIZE}px 0 ${GRID_SIZE * 2}px 0;
-  min-height: ${GRID_SIZE * 4}px;
-
-  overflow: -moz-scrollbars-none;
-  ::-webkit-scrollbar {
-    display: none;
-  }
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-`;
-const categoryListWrapper = css`
-  ${mobileCategoryListWrapper}
-  padding: 0;
-  margin-top: ${GRID_SIZE * 3}px;
-  flex-direction: column;
-`;
-function StatelessElementBrowser(props) {
-  const {
-    items,
-    onSelectItem,
-    onInsertItem,
-    viewMoreItem
-  } = props;
-  const {
-    containerWidth,
-    ContainerWidthMonitor
-  } = useContainerWidth();
-  const [columnCount, setColumnCount] = useState(1);
-  const {
-    selectedItemIndex,
-    focusedItemIndex,
-    setFocusedItemIndex,
-    focusOnSearch,
-    focusOnViewMore,
-    onKeyDown,
-    setFocusOnSearch
-  } = useSelectAndFocusOnArrowNavigation(items.length - 1, columnCount, !!viewMoreItem);
-  useEffect(() => {
-    fireAnalyticsEvent(props.createAnalyticsEvent)({
-      payload: {
-        action: ACTION.OPENED,
-        actionSubject: ACTION_SUBJECT.ELEMENT_BROWSER,
-        eventType: EVENT_TYPE.UI,
-        attributes: {
-          mode: props.mode
-        }
-      }
-    });
-    return () => {
-      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.
-   */
-  const selectedItem = selectedItemIndex !== undefined ? items[selectedItemIndex] : null;
-  const onItemsEnterKeyPress = useCallback(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(() => {
-    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({
-  showCategories,
-  showSearch,
-  onSearch,
-  mode,
-  categories,
-  onSelectCategory,
-  items,
-  onInsertItem,
-  selectedCategory,
-  selectedItemIndex,
-  focusedItemIndex,
-  setFocusedItemIndex,
-  focusOnSearch,
-  focusOnViewMore,
-  setColumnCount,
-  setFocusOnSearch,
-  onKeyPress,
-  onKeyDown,
-  searchTerm,
-  createAnalyticsEvent,
-  emptyStateHandler,
-  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({
-  showCategories,
-  showSearch,
-  onSearch,
-  mode,
-  categories,
-  onSelectCategory,
-  items,
-  onInsertItem,
-  selectedCategory,
-  selectedItemIndex,
-  focusedItemIndex,
-  setFocusedItemIndex,
-  focusOnSearch,
-  setColumnCount,
-  setFocusOnSearch,
-  onKeyPress,
-  onKeyDown,
-  searchTerm,
-  createAnalyticsEvent,
-  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
-  })));
-}
-const MemoizedElementBrowser = /*#__PURE__*/memo(withAnalyticsContext({
-  source: 'ElementBrowser'
-})(withAnalyticsEvents()(StatelessElementBrowser)));
-export default MemoizedElementBrowser;

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

@@ -1,24 +0,0 @@
-// 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 const GRID_SIZE = gridSize();
-export const DEVICE_BREAKPOINT_NUMBERS = {
-  small: GRID_SIZE * 40,
-  medium: GRID_SIZE * 75,
-  large: GRID_SIZE * 128
-};
-export const FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS = {
-  small: GRID_SIZE * 50,
-  medium: DEVICE_BREAKPOINT_NUMBERS.medium,
-  large: DEVICE_BREAKPOINT_NUMBERS.large
-};
-export const SIDEBAR_WIDTH = `${GRID_SIZE * 25}px`;
-export const SIDEBAR_HEADING_WRAPPER_HEIGHT = `${GRID_SIZE * 6}px`;
-export const SIDEBAR_HEADING_PADDING_LEFT = '12px';
-export const INLINE_SIDEBAR_HEIGHT = '54px';
-export const SEARCH_ITEM_HEIGHT_WIDTH = '20px';
-export const SCROLLBAR_WIDTH = 15;
-export const ELEMENT_LIST_PADDING = 2;
-export const MODAL_WRAPPER_PADDING = 16;
-export const ELEMENT_ITEM_HEIGHT = 75;

package/dist/es2019/ui/ElementBrowser/hooks/use-container-width.js

@@ -1,59 +0,0 @@
-/** @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 />}
- *   </>
- *  );
- *
- */
-
-const widthObserverWrapper = css`
-  position: relative;
-`;
-export default function useContainerWidth() {
-  const [containerWidth, setContainerWidth] = useState(0);
-  const ref = useRef(null);
-  useEffect(() => {
-    const {
-      current
-    } = ref;
-    if (ref && current) {
-      setContainerWidth(current.getBoundingClientRect().width);
-    }
-  }, [ref]);
-  const ContainerWidthMonitor = /*#__PURE__*/memo(() => {
-    return jsx("div", {
-      css: widthObserverWrapper,
-      ref: ref,
-      tabIndex: -1
-    }, jsx(WidthObserver, {
-      setWidth: setContainerWidth
-    }));
-  });
-  return {
-    containerWidth,
-    ContainerWidthMonitor
-  };
-}

package/dist/es2019/ui/ElementBrowser/hooks/use-focus.js

@@ -1,48 +0,0 @@
-import { useRef, useLayoutEffect } 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) {
-  const ref = useRef(null);
-  useLayoutEffect(() => {
-    const {
-      current
-    } = ref;
-    if (focus && current && document.activeElement !== current) {
-      current.focus({
-        preventScroll: true
-      });
-    }
-  }, [focus]);
-  return ref;
-}