@atlaskit/editor-core 178.1.1 → 178.1.2

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

@@ -4,33 +4,27 @@ 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.
+    _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
@@ -40,28 +34,25 @@ export default class ElementBrowser extends PureComponent {
         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({
@@ -69,13 +60,13 @@ export default class ElementBrowser extends PureComponent {
       categories: this.getCategories(items)
     });
   }
-
   componentDidUpdate(prevProps, prevState) {
     const {
       searchTerm,
       selectedCategory
-    } = this.state; // Update both items and categories when there's a new getItems
+    } = this.state;
 
+    // Update both items and categories when there's a new getItems
     if (this.props.getItems !== prevProps.getItems) {
       this.setState({
         categories: this.getCategories(),
@@ -87,7 +78,6 @@ export default class ElementBrowser extends PureComponent {
       });
     }
   }
-
   render() {
     const {
       onInsertItem,
@@ -118,9 +108,7 @@ export default class ElementBrowser extends PureComponent {
       emptyStateHandler: emptyStateHandler
     });
   }
-
 }
-
 _defineProperty(ElementBrowser, "defaultProps", {
   defaultCategory: 'all',
   onInsertItem: () => {}

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

@@ -1,11 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { useState, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
-import { Section, ButtonItem } from '@atlaskit/menu'; // AFP-2532 TODO: Fix automatic suppressions below
+import { Section, ButtonItem } from '@atlaskit/menu';
+// AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
-
 import { borderRadius, gridSize } from '@atlaskit/theme';
 import { themed } from '@atlaskit/theme/components';
 import { DN50, N0, N30A, N60A } from '@atlaskit/theme/colors';
@@ -17,7 +16,6 @@ import { getFeaturedQuickInsertItems, searchQuickInsertItems } from '../../plugi
 import { insertItem } from '../../plugins/quick-insert/commands';
 import ElementBrowser from './components/ElementBrowserLoader';
 import { ELEMENT_ITEM_HEIGHT } from './constants';
-
 const InsertMenu = ({
   editorView,
   dropdownItems,
@@ -44,22 +42,18 @@ const InsertMenu = ({
   const viewMoreItem = showElementBrowserLink && quickInsertDropdownItems.pop();
   const onInsertItem = useCallback(item => {
     toggleVisiblity();
-
     if (!editorView.hasFocus()) {
       editorView.focus();
     }
-
     insertItem(item)(editorView.state, editorView.dispatch);
   }, [editorView, toggleVisiblity]);
   const getItems = useCallback(quickInsertState => (query, category) => {
     let result;
-
     if (query) {
       result = searchQuickInsertItems(quickInsertState, {})(query, category);
     } else {
       result = quickInsertDropdownItems.concat(getFeaturedQuickInsertItems(quickInsertState, {})());
     }
-
     setItemCount(result.length);
     return result;
   }, [quickInsertDropdownItems]);
@@ -74,7 +68,8 @@ const InsertMenu = ({
     emptyStateHandler: quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.emptyStateHandler,
     onInsertItem: onInsertItem,
     showSearch: true,
-    showCategories: false // On page resize we want the InlineElementBrowser to show updated tools/overflow items
+    showCategories: false
+    // On page resize we want the InlineElementBrowser to show updated tools/overflow items
     ,
     key: quickInsertDropdownItems.length
   })), [getItems, onInsertItem, quickInsertDropdownItems.length, toggleVisiblity]);
@@ -89,7 +84,6 @@ const InsertMenu = ({
     item: viewMoreItem
   }));
 };
-
 const ViewMore = ({
   item
 }) => {
@@ -101,14 +95,14 @@ const ViewMore = ({
       css: itemBefore
     }, item.icon()),
     "aria-describedby": item.title,
-    "data-testid": "view-more-elements-item" // @ts-ignore Overriding Menu styles is not supported
+    "data-testid": "view-more-elements-item"
+    // @ts-ignore Overriding Menu styles is not supported
     ,
     css: css`
           padding: 0px 12px;
         `
   }, item.title));
 };
-
 const getSvgIconForItem = ({
   name
 }) => {
@@ -126,17 +120,14 @@ const getSvgIconForItem = ({
     label: ""
   }) : undefined;
 };
-
 const getInsertMenuHeight = ({
   itemCount
 }) => {
   // Figure based on visuals to exclude the searchbar, padding/margin, and the ViewMore item.
   const EXTRA_SPACE_EXCLUDING_ELEMENTLIST = 112;
-
   if (itemCount > 0 && itemCount < 6) {
     return itemCount * ELEMENT_ITEM_HEIGHT + EXTRA_SPACE_EXCLUDING_ELEMENTLIST;
   }
-
   return 560; // For showing 6 Elements.
 };
 
@@ -156,7 +147,6 @@ const insertMenuWrapper = (theme, itemCount) => css`
     0 2px 1px ${N30A},
     0 0 20px -6px ${N60A}`})`};
 `;
-
 const itemBefore = css`
   width: 40px;
   height: 40px;
@@ -172,7 +162,6 @@ const flexWrapperStyles = css`
   box-sizing: border-box;
   overflow: hidden;
 `;
-
 const FlexWrapper = props => {
   const {
     children,
@@ -182,6 +171,5 @@ const FlexWrapper = props => {
     css: flexWrapperStyles
   }, divProps), children);
 };
-
 const ElementBrowserWrapper = withOuterListeners(FlexWrapper);
 export default InsertMenu;

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

@@ -40,7 +40,6 @@ const modalFooter = css`
   align-items: center;
   justify-content: space-between;
 `;
-
 const ModalElementBrowser = props => {
   const [selectedItem, setSelectedItem] = useState();
   const {
@@ -56,8 +55,9 @@ const ModalElementBrowser = props => {
   const RenderFooter = useCallback(() => jsx(Footer, {
     onInsert: () => onInsertItem(selectedItem),
     beforeElement: helpUrl ? HelpLink(helpUrl, intl.formatMessage(messages.help)) : undefined
-  }), [onInsertItem, selectedItem, helpUrl, intl]); // Since Modal uses stackIndex it's shouldCloseOnEscapePress prop doesn't work.
+  }), [onInsertItem, selectedItem, helpUrl, intl]);
 
+  // Since Modal uses stackIndex it's shouldCloseOnEscapePress prop doesn't work.
   const onKeyDown = useCallback(e => {
     if (e.key === 'Escape') {
       props.onClose();
@@ -86,17 +86,17 @@ const ModalElementBrowser = props => {
     onClose: props.onClose,
     height: "664px",
     width: "x-large",
-    autoFocus: false // defaults to true and doesn't work along with stackIndex=1.
+    autoFocus: false
+    // defaults to true and doesn't work along with stackIndex=1.
     // packages/design-system/modal-dialog/src/components/Content.tsx Line 287
     ,
     shouldCloseOnEscapePress: false
   }, jsx(RenderBody, null), jsx(RenderFooter, null))));
 };
+ModalElementBrowser.displayName = 'ModalElementBrowser';
 
-ModalElementBrowser.displayName = 'ModalElementBrowser'; // Prevent ModalElementBrowser click propagation through to the editor.
-
+// Prevent ModalElementBrowser click propagation through to the editor.
 const onModalClick = e => e.stopPropagation();
-
 const Footer = ({
   onInsert,
   beforeElement
@@ -122,7 +122,6 @@ const Footer = ({
     testId: "ModalElementBrowser__close-button"
   }, "Close"))));
 };
-
 const HelpLink = (url, helpText) => jsx(Button, {
   iconBefore: jsx(QuestionCircleIcon, {
     label: "help",
@@ -133,5 +132,4 @@ const HelpLink = (url, helpText) => jsx(Button, {
   target: "_blank",
   testId: "ModalElementBrowser__help-button"
 }, helpText);
-
 export default injectIntl(ModalElementBrowser);

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

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import React, { memo, useCallback, Fragment } from 'react';
@@ -9,7 +8,6 @@ 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 '../../../plugins/analytics';
-
 function CategoryList({
   categories = [],
   ...props
@@ -23,7 +21,6 @@ function CategoryList({
     setFocusedCategoryIndex: setFocusedCategoryIndex
   }, props))));
 }
-
 function CategoryListItem({
   category,
   onSelectCategory,
@@ -36,16 +33,15 @@ function CategoryListItem({
   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,
@@ -66,7 +62,8 @@ function CategoryListItem({
       ...rest
     } = currentTheme(themeProps);
     return {
-      buttonStyles: { ...buttonStyles,
+      buttonStyles: {
+        ...buttonStyles,
         textAlign: 'start',
         marginLeft: '2px',
         height: '100%',
@@ -91,7 +88,6 @@ function CategoryListItem({
     testId: "element-browser-category-item"
   }, category.title));
 }
-
 const buttonWrapper = css`
   height: ${GRID_SIZE * 4}px;
   margin: 4px 4px 4px 0;

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

@@ -11,9 +11,7 @@ const spinnerContainer = css`
   width: 100%;
 `;
 const ElementBrowserLoader = Loadable({
-  loader: () => import(
-  /* webpackChunkName: "@atlaskit-internal_editor-element-browser" */
-  '../ElementBrowser').then(module => module.default),
+  loader: () => import( /* webpackChunkName: "@atlaskit-internal_editor-element-browser" */'../ElementBrowser').then(module => module.default),
   loading: () => jsx("div", {
     css: spinnerContainer
   }, jsx(Spinner, {

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

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import React, { Fragment, memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -21,7 +20,6 @@ import { Modes } from '../../types';
 import cellSizeAndPositionGetter from './cellSizeAndPositionGetter';
 import EmptyState from './EmptyState';
 import { getColumnCount, getScrollbarWidth } from './utils';
-
 function ElementList({
   items,
   mode,
@@ -48,7 +46,6 @@ function ElementList({
     if (fullMode && containerWidth > 0) {
       setColumnCount(getColumnCount(containerWidth));
       const updatedScrollbarWidth = getScrollbarWidth();
-
       if (updatedScrollbarWidth > 0) {
         setScrollbarWidth(updatedScrollbarWidth);
       }
@@ -71,7 +68,6 @@ function ElementList({
     if (items[index] == null) {
       return;
     }
-
     return jsx("div", {
       style: style,
       key: key,
@@ -104,19 +100,16 @@ function ElementList({
     cellSizeAndPositionGetter: cellSizeAndPositionGetter(containerWidth - ELEMENT_LIST_PADDING * 2, scrollbarWidth),
     height: height,
     width: containerWidth - ELEMENT_LIST_PADDING * 2 // containerWidth - padding on Left/Right (for focus outline)
-
     /**
      * Refresh Collection on WidthObserver value change.
      * Length of the items used to force re-render to solve Firefox bug with react-virtualized retaining
      * scroll position after updating the data. If new data has different number of cells, a re-render
      * is forced to prevent the scroll position render bug.
-     */
-    ,
+     */,
     key: containerWidth + items.length,
     scrollToCell: selectedItemIndex
   })))));
 }
-
 const MemoizedElementItem = /*#__PURE__*/memo(ElementItem);
 MemoizedElementItem.displayName = 'MemoizedElementItem';
 export function ElementItem({
@@ -129,36 +122,30 @@ export function ElementItem({
   setFocusedItemIndex
 }) {
   const ref = useFocus(focus);
+
   /**
    * Note: props.onSelectItem(item) is not called here as the StatelessElementBrowser's
    * useEffect would trigger it on selectedItemIndex change. (Line 106-110)
    * This implementation was changed for keyboard/click selection to work with `onInsertItem`.
    */
-
   const onClick = useCallback(e => {
     e.preventDefault();
     e.stopPropagation();
     setFocusedItemIndex(index);
-
     switch (e.nativeEvent.detail) {
       case 0:
         onInsertItem(item);
         break;
-
       case 1:
         if (inlineMode) {
           onInsertItem(item);
         }
-
         break;
-
       case 2:
         if (!inlineMode) {
           onInsertItem(item);
         }
-
         break;
-
       default:
         return;
     }
@@ -190,10 +177,10 @@ export function ElementItem({
     keyshortcut: keyshortcut
   })));
 }
+
 /**
  * Inline mode should use the existing Align-items:center value.
  */
-
 const itemStyleOverrides = {
   alignItems: 'flex-start'
 };
@@ -265,11 +252,11 @@ const itemBody = css`
 
   margin-top: -2px; // Fixes the Item Icon and text's alignment issue
 `;
+
 /*
  * -webkit-line-clamp is also supported by firefox 🎉
  * https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/68#CSS
  */
-
 const multilineStyle = css`
   display: -webkit-box;
   -webkit-line-clamp: 2;

package/dist/es2019/ui/ElementBrowser/components/ElementList/NotFoundIllustration.js

@@ -1,6 +1,5 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4249
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 const imageContainer = css`

package/dist/es2019/ui/ElementBrowser/components/ElementList/cellSizeAndPositionGetter.js

@@ -1,18 +1,17 @@
 import { ELEMENT_ITEM_HEIGHT } from '../../constants';
 import { generateVirtualizedContainerDatum } from './utils';
+
 /**
  * Callback responsible for returning size and offset/position information
  * for a given cell.
  * https://github.com/bvaughn/react-virtualized/blob/master/docs/Collection.md
  **/
-
 export default function cellSizeAndPositionGetter(containerWidth, scrollbarWidth) {
   const GUTTER_SIZE = 4;
   /**
    * Save the currently rendered columnY positions.
    * Have to be within the current render scope.
    */
-
   let columnYMap = [];
   return ({
     index

package/dist/es2019/ui/ElementBrowser/components/ElementList/utils.js

@@ -5,17 +5,13 @@ export function getColumnCount(clientWidth) {
     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);
   }
@@ -35,7 +31,6 @@ 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';
@@ -44,12 +39,10 @@ export function getScrollbarWidth() {
     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/ui/ElementBrowser/components/ElementSearch.js

@@ -11,7 +11,6 @@ import { GRID_SIZE, SEARCH_ITEM_HEIGHT_WIDTH } from '../constants';
 import useFocus from '../hooks/use-focus';
 import { Modes } from '../types';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-
 function ElementSearch({
   onSearch,
   mode,
@@ -23,7 +22,6 @@ function ElementSearch({
   searchTerm
 }) {
   const ref = useFocus(focus);
-
   const onChange = ({
     target: {
       value
@@ -31,11 +29,8 @@ function ElementSearch({
   }) => {
     onSearch(value);
   };
-
   const onFocus = e => {};
-
   const onBlur = e => {};
-
   return jsx("div", {
     css: [wrapper, mode === Modes.inline && wrapperInline]
   }, jsx(Textfield, {
@@ -63,7 +58,6 @@ function ElementSearch({
     value: searchTerm
   }));
 }
-
 const elementAfterInputMessage = {
   id: 'fabric.editor.elementbrowser.searchbar.elementAfterInput',
   defaultMessage: 'Enter',

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

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import React, { memo, useState, useCallback, useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -107,7 +106,6 @@ const categoryListWrapper = css`
   margin-top: ${GRID_SIZE * 3}px;
   flex-direction: column;
 `;
-
 function StatelessElementBrowser(props) {
   const {
     items,
@@ -150,22 +148,21 @@ function StatelessElementBrowser(props) {
       });
     };
   }, [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 onItemsEnterKeyPress = useCallback(e => {
     if (e.key !== 'Enter') {
       return;
     }
-
     props.onInsertItem(items[selectedItemIndex]);
   }, [props, items, selectedItemIndex]);
+
   /**
    * On arrow key selection and clicks the selectedItemIndex will change.
    * Making sure to update parent component.
    */
-
   const selectedItem = items[selectedItemIndex];
   useEffect(() => {
     if (onSelectItem && selectedItem != null) {
@@ -195,7 +192,6 @@ function StatelessElementBrowser(props) {
     onKeyDown: onKeyDown
   })));
 }
-
 function MobileBrowser({
   showCategories,
   showSearch,
@@ -254,7 +250,6 @@ function MobileBrowser({
     searchTerm: searchTerm
   })));
 }
-
 function DesktopBrowser({
   showCategories,
   showSearch,
@@ -323,7 +318,6 @@ function DesktopBrowser({
     searchTerm: searchTerm
   })));
 }
-
 const MemoizedElementBrowser = /*#__PURE__*/memo(withAnalyticsContext({
   source: 'ElementBrowser'
 })(withAnalyticsEvents()(StatelessElementBrowser)));

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

@@ -2,6 +2,7 @@
 import React, { memo, useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { WidthObserver } from '@atlaskit/width-detector';
+
 /**
  *
  * Problem:
@@ -38,7 +39,6 @@ export default function useContainerWidth() {
     const {
       current
     } = ref;
-
     if (ref && current) {
       setContainerWidth(current.getBoundingClientRect().width);
     }

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

@@ -1,4 +1,5 @@
 import { useRef, useLayoutEffect } from 'react';
+
 /**
  * A custom hook that handles focus on a DOM element.
  * Takes in a boolean value and calls element.focus
@@ -37,7 +38,6 @@ export default function useFocus(focus) {
     const {
       current
     } = ref;
-
     if (focus && current && document.activeElement !== current) {
       current.focus({
         preventScroll: true