@atlaskit/editor-common 74.57.0 → 74.58.0

package/dist/es2019/element-browser/components/ElementList/utils.js

@@ -0,0 +1,50 @@
+import { ELEMENT_LIST_PADDING, FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS, SCROLLBAR_WIDTH } from '../../constants';
+export function getColumnCount(clientWidth) {
+  const {
+    small,
+    medium,
+    large
+  } = FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS;
+  switch (true) {
+    case clientWidth < small:
+      return 1;
+    case clientWidth >= small && clientWidth < medium:
+      return Math.floor(clientWidth / 200);
+    case clientWidth >= large:
+      return Math.floor(clientWidth / 248);
+    default:
+      return Math.floor(clientWidth / 220);
+  }
+}
+export function generateVirtualizedContainerDatum(containerWidth, options) {
+  const {
+    scrollbarWidth
+  } = options;
+  const columnCount = getColumnCount(containerWidth);
+  const availableWidth = containerWidth - (scrollbarWidth + ELEMENT_LIST_PADDING);
+  return {
+    availableWidth,
+    columnCount
+  };
+}
+let CALCULATED_SCROLLBAR_WIDTH;
+export function getScrollbarWidth() {
+  if (!CALCULATED_SCROLLBAR_WIDTH) {
+    var _container$parentNode;
+    const container = document.createElement('div');
+    container.style.visibility = 'hidden';
+    container.style.overflow = 'scroll';
+    document.body.appendChild(container);
+    const innerContainer = document.createElement('div');
+    container.appendChild(innerContainer);
+    const scrollbarWidth = container.offsetWidth - innerContainer.offsetWidth;
+    (_container$parentNode = container.parentNode) === null || _container$parentNode === void 0 ? void 0 : _container$parentNode.removeChild(container);
+    if (scrollbarWidth) {
+      CALCULATED_SCROLLBAR_WIDTH = scrollbarWidth;
+      return scrollbarWidth;
+    }
+    return SCROLLBAR_WIDTH;
+  } else {
+    return CALCULATED_SCROLLBAR_WIDTH;
+  }
+}

package/dist/es2019/element-browser/components/ElementSearch.js

@@ -0,0 +1,117 @@
+/** @jsx jsx */
+import React, { memo } from 'react';
+import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import { withAnalyticsContext } from '@atlaskit/analytics-next';
+import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import SearchIcon from '@atlaskit/icon/glyph/search';
+import Textfield from '@atlaskit/textfield';
+import { N200 } from '@atlaskit/theme/colors';
+import { GRID_SIZE, SEARCH_ITEM_HEIGHT_WIDTH } from '../constants';
+import useFocus from '../hooks/use-focus';
+import { Modes } from '../types';
+function ElementSearch({
+  onSearch,
+  mode,
+  intl: {
+    formatMessage
+  },
+  focus,
+  onClick,
+  onKeyDown,
+  searchTerm
+}) {
+  const ref = useFocus(focus);
+  const onChange = ({
+    target: {
+      value
+    }
+  }) => {
+    onSearch(value);
+  };
+  const onFocus = e => {};
+  const onBlur = e => {};
+  return jsx("div", {
+    css: [wrapper, mode === Modes.inline && wrapperInline]
+  }, jsx(Textfield, {
+    ref: ref,
+    onChange: onChange,
+    onClick: onClick,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    onBlur: onBlur,
+    elemBeforeInput: jsx("div", {
+      css: elementBeforeInput,
+      "data-testid": "element_search__element_before_input"
+    }, jsx(SearchIcon, {
+      size: "medium",
+      label: "Advanced search",
+      primaryColor: "inherit"
+    })),
+    elemAfterInput: jsx("div", {
+      css: elementAfterInput,
+      "data-testid": "element_search__element_after_input"
+    }, jsx("div", {
+      css: styledShortcut
+    }, "\u23CE ", formatMessage(elementAfterInputMessage))),
+    placeholder: formatMessage(placeHolderMessage),
+    "aria-label": "search",
+    value: searchTerm
+  }));
+}
+const elementAfterInputMessage = {
+  id: 'fabric.editor.elementbrowser.searchbar.elementAfterInput',
+  defaultMessage: 'Enter',
+  description: 'Enter to insert'
+};
+const placeHolderMessage = {
+  id: 'fabric.editor.elementbrowser.searchbar.placeholder',
+  defaultMessage: 'Search',
+  description: 'Search field placeholder'
+};
+const styledShortcut = css`
+  ${shortcutStyle}
+  padding: ${GRID_SIZE / 2}px ${GRID_SIZE}px;
+  width: ${GRID_SIZE * 6}px;
+`;
+const wrapper = css`
+  & > [data-ds--text-field--container] {
+    height: ${GRID_SIZE * 6}px;
+    border-radius: ${GRID_SIZE}px;
+    flex: 1 1 100%;
+    overflow: visible;
+    & > [data-ds--text-field--input] {
+      margin-bottom: 3px;
+      font-size: ${relativeFontSizeToBase16(14)};
+      padding: ${GRID_SIZE}px ${"var(--ds-space-075, 6px)"} ${GRID_SIZE}px 0;
+    }
+  }
+`;
+const wrapperInline = css`
+  & > [data-ds--text-field--container] {
+    height: ${GRID_SIZE * 5}px;
+    flex: none;
+    overflow: revert;
+  }
+`;
+const elementBeforeInput = css`
+  margin: 1px ${"var(--ds-space-075, 6px)"} 0 ${"var(--ds-space-100, 8px)"};
+  color: ${`var(--ds-icon, ${N200})`};
+
+  // Custom SearchIcon style
+  span,
+  svg {
+    height: 20px;
+    width: 20px;
+  }
+`;
+const elementAfterInput = css`
+  margin: 0 ${"var(--ds-space-100, 8px)"};
+  height: ${SEARCH_ITEM_HEIGHT_WIDTH};
+  text-align: center;
+`;
+const MemoizedElementSearchWithAnalytics = /*#__PURE__*/memo(withAnalyticsContext({
+  component: 'Searchbar'
+})(injectIntl(ElementSearch)));
+export default MemoizedElementSearchWithAnalytics;

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

@@ -0,0 +1,339 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @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';
+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/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 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 ELEMENT_ITEM_HEIGHT = 75;

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

@@ -0,0 +1,59 @@
+/** @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/element-browser/hooks/use-focus.js

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