@atlaskit/editor-core 188.9.0 → 188.9.2

package/dist/es2019/plugins/type-ahead/ui/TypeAheadList.js

@@ -1,273 +0,0 @@
-/** @jsx jsx */
-
-import React, { useMemo, useRef, useCallback, useLayoutEffect, useState } from 'react';
-import { jsx, css } from '@emotion/react';
-import { MenuGroup } from '@atlaskit/menu';
-import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
-import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
-import { List } from 'react-virtualized/dist/commonjs/List';
-import { ICON_HEIGHT, ITEM_PADDING, TypeAheadListItem } from './TypeAheadListItem';
-import { injectIntl, useIntl } from 'react-intl-next';
-import { typeAheadListMessages } from '../messages';
-import { getTypeAheadListAriaLabels, moveSelectedIndex } from '../utils';
-import { updateSelectedIndex } from '../commands/update-selected-index';
-import { AssistiveText } from './AssistiveText';
-import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../constants';
-const LIST_ITEM_ESTIMATED_HEIGHT = ICON_HEIGHT + ITEM_PADDING * 2;
-const LIST_WIDTH = 320;
-const TypeaheadAssistiveTextPureComponent = /*#__PURE__*/React.memo(({
-  numberOfResults
-}) => {
-  const intl = useIntl();
-  return jsx(AssistiveText, {
-    assistiveText: intl.formatMessage(typeAheadListMessages.searchResultsLabel, {
-      itemsLength: numberOfResults
-    })
-    // when the popup is open its always in focus
-    ,
-    isInFocus: true,
-    id: TYPE_AHEAD_DECORATION_ELEMENT_ID + '__popup'
-  });
-});
-const TypeAheadListComponent = /*#__PURE__*/React.memo(({
-  items,
-  selectedIndex,
-  editorView,
-  onItemClick,
-  intl,
-  fitHeight,
-  decorationElement,
-  triggerHandler
-}) => {
-  var _decorationElement$qu2;
-  const listRef = useRef();
-  const listContainerRef = useRef(null);
-  const lastVisibleIndexes = useRef({
-    overscanStartIndex: 0,
-    overscanStopIndex: 0,
-    startIndex: 0,
-    stopIndex: 0
-  });
-  const estimatedHeight = items.length * LIST_ITEM_ESTIMATED_HEIGHT;
-  const [height, setHeight] = useState(Math.min(estimatedHeight, fitHeight));
-  const [cache, setCache] = useState(new CellMeasurerCache({
-    fixedWidth: true,
-    defaultHeight: LIST_ITEM_ESTIMATED_HEIGHT
-  }));
-  const onItemsRendered = useCallback(props => {
-    lastVisibleIndexes.current = props;
-  }, []);
-  const actions = useMemo(() => ({
-    onItemClick
-  }), [onItemClick]);
-  const isNavigationKey = event => {
-    return ['ArrowDown', 'ArrowUp', 'Tab', 'Enter'].includes(event.key);
-  };
-  const focusTargetElement = useCallback(() => {
-    var _decorationElement$qu;
-    //To reset the selected index
-    updateSelectedIndex(-1)(editorView.state, editorView.dispatch);
-    listRef.current.scrollToRow(0);
-    decorationElement === null || decorationElement === void 0 ? void 0 : (_decorationElement$qu = decorationElement.querySelector(`[role='combobox']`)) === null || _decorationElement$qu === void 0 ? void 0 : _decorationElement$qu.focus();
-  }, [editorView, listRef, decorationElement]);
-  const selectNextItem = useMemo(() => moveSelectedIndex({
-    editorView,
-    direction: 'next'
-  }), [editorView]);
-  const selectPreviousItem = useMemo(() => moveSelectedIndex({
-    editorView,
-    direction: 'previous'
-  }), [editorView]);
-  const lastVisibleStartIndex = lastVisibleIndexes.current.startIndex;
-  const lastVisibleStopIndex = lastVisibleIndexes.current.stopIndex;
-  const onScroll = useCallback(({
-    scrollUpdateWasRequested
-  }) => {
-    if (!scrollUpdateWasRequested) {
-      return;
-    }
-
-    // In case the user scroll to a non-visible item like press ArrowUp from the first index
-    // We will force the scroll calling the scrollToItem in the useEffect hook
-    // When the scroll happens and we render the elements,
-    // we still need calculate the items height and re-draw the List.
-    // It is possible the item selected became invisible again (because the items height changed)
-    // So, we need to wait for height to be calculated. Then we need to check
-    // if the selected item is visible or not. If it isn't visible we call the scrollToItem again.
-    //
-    // We can't do this check in the first frame because that frame is being used by the resetScreenThrottled
-    // to calculate each height. THen, we can schedule a new frame when this one finishs.
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        const isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex;
-
-        //Should scroll to the list item only when the selectedIndex >= 0 and item is not visible
-        if (!isSelectedItemVisible && selectedIndex !== -1) {
-          listRef.current.scrollToRow(selectedIndex);
-        } else if (selectedIndex === -1) {
-          listRef.current.scrollToRow(0);
-        }
-      });
-    });
-  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex]);
-  const onMouseMove = (event, index) => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (selectedIndex === index) {
-      return;
-    }
-    updateSelectedIndex(index)(editorView.state, editorView.dispatch);
-  };
-  useLayoutEffect(() => {
-    if (!listRef.current) {
-      return;
-    }
-    const isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex;
-
-    //Should scroll to the list item only when the selectedIndex >= 0 and item is not visible
-    if (!isSelectedItemVisible && selectedIndex !== -1) {
-      listRef.current.scrollToRow(selectedIndex);
-    } else if (selectedIndex === -1) {
-      listRef.current.scrollToRow(0);
-    }
-  }, [selectedIndex, lastVisibleStartIndex, lastVisibleStopIndex]);
-  useLayoutEffect(() => {
-    setCache(new CellMeasurerCache({
-      fixedWidth: true,
-      defaultHeight: LIST_ITEM_ESTIMATED_HEIGHT
-    }));
-    // When query is updated, sometimes the scroll position of the menu is not at the top
-    // Scrolling back to top for consistency
-    requestAnimationFrame(() => {
-      var _listContainerRef$cur;
-      if ((_listContainerRef$cur = listContainerRef.current) !== null && _listContainerRef$cur !== void 0 && _listContainerRef$cur.firstChild) {
-        listContainerRef.current.firstChild.scrollTo(0, 0);
-      }
-    });
-  }, [items]);
-  useLayoutEffect(() => {
-    const height = Math.min(items.reduce((prevValue, currentValue, index) => {
-      return prevValue + cache.rowHeight({
-        index: index
-      });
-    }, 0), fitHeight);
-    setHeight(height);
-  }, [items, cache, fitHeight]);
-  useLayoutEffect(() => {
-    if (!listContainerRef.current) {
-      return;
-    }
-    const {
-      current: element
-    } = listContainerRef;
-    /**
-     * To handle the key events on the list
-     * @param event
-     */
-    const handleKeyDown = event => {
-      if (isNavigationKey(event)) {
-        switch (event.key) {
-          case 'ArrowDown':
-            selectNextItem();
-            event.preventDefault();
-            event.stopPropagation();
-            break;
-          case 'ArrowUp':
-            selectPreviousItem();
-            event.preventDefault();
-            event.stopPropagation();
-            break;
-
-          // TODO DTR-1401: why is this calling item click when hitting tab? fix this in DTR-1401
-          case 'Tab':
-            //Tab key quick inserts the selected item.
-            onItemClick(SelectItemMode.TAB, selectedIndex);
-            event.preventDefault();
-            break;
-          case 'Enter':
-            //Enter key quick inserts the selected item.
-            if (!event.isComposing || event.which !== 229 && event.keyCode !== 229) {
-              onItemClick(event.shiftKey ? SelectItemMode.SHIFT_ENTER : SelectItemMode.ENTER, selectedIndex);
-              event.preventDefault();
-            }
-            break;
-          default:
-            event.preventDefault();
-        }
-      } else {
-        //All the remaining keys sets focus on the typeahead query(inputQuery.tsx))
-        focusTargetElement();
-      }
-    };
-    element === null || element === void 0 ? void 0 : element.addEventListener('keydown', handleKeyDown);
-    return () => {
-      element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [editorView.state, focusTargetElement, selectNextItem, selectPreviousItem, selectedIndex, onItemClick, items.length]);
-  const renderRow = ({
-    index,
-    key,
-    style,
-    parent
-  }) => {
-    const currentItem = items[index];
-    return jsx(CellMeasurer, {
-      key: key,
-      cache: cache,
-      parent: parent,
-      columnIndex: 0,
-      rowIndex: index
-    }, jsx("div", {
-      style: style,
-      "data-index": index
-    }, jsx("div", {
-      "data-testid": `list-item-height-observed-${index}`,
-      onMouseMove: e => onMouseMove(e, index)
-    }, jsx(TypeAheadListItem, {
-      key: items[index].title,
-      item: currentItem,
-      itemsLength: items.length,
-      itemIndex: index,
-      selectedIndex: selectedIndex,
-      onItemClick: actions.onItemClick,
-      ariaLabel: getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel
-    }))));
-  };
-  const popupAriaLabel = getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl).popupAriaLabel;
-  if (!Array.isArray(items)) {
-    return null;
-  }
-  const menuGroupId = ((_decorationElement$qu2 = decorationElement.querySelector(`[role='combobox']`)) === null || _decorationElement$qu2 === void 0 ? void 0 : _decorationElement$qu2.getAttribute('aria-controls')) || TYPE_AHEAD_DECORATION_ELEMENT_ID;
-  return jsx(MenuGroup, {
-    "aria-label": popupAriaLabel,
-    "aria-relevant": "additions removals"
-  }, jsx("div", {
-    id: menuGroupId,
-    ref: listContainerRef
-  }, jsx(List, {
-    rowRenderer: renderRow,
-    ref: listRef,
-    rowCount: items.length,
-    rowHeight: cache.rowHeight,
-    onRowsRendered: onItemsRendered,
-    width: LIST_WIDTH,
-    onScroll: onScroll,
-    height: height,
-    overscanRowCount: 3,
-    containerRole: "presentation",
-    role: "listbox",
-    css: css`
-              button {
-                padding: ${"var(--ds-space-150, 12px)"}
-                  ${"var(--ds-space-150, 12px)"} 11px;
-                span:last-child span:last-child {
-                  white-space: normal;
-                }
-              }
-            `
-  }), jsx(TypeaheadAssistiveTextPureComponent, {
-    numberOfResults: items.length.toString()
-  })));
-});
-export const TypeAheadList = injectIntl(TypeAheadListComponent);
-TypeAheadList.displayName = 'TypeAheadList';

package/dist/es2019/plugins/type-ahead/ui/TypeAheadListItem.js

@@ -1,214 +0,0 @@
-/** @jsx jsx */
-import React, { useCallback, useMemo, useLayoutEffect } from 'react';
-import { css, jsx } from '@emotion/react';
-import { DN600, N200, N800, N30, B400 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-import { borderRadius } from '@atlaskit/theme/constants';
-import { ButtonItem } from '@atlaskit/menu';
-import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { IconFallback } from '@atlaskit/editor-common/quick-insert';
-import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
-import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
-import { useIntl } from 'react-intl-next';
-import { typeAheadListMessages } from '../messages';
-export const ICON_HEIGHT = 40;
-export const ICON_WIDTH = 40;
-export const ITEM_PADDING = 12;
-export const itemIcon = css`
-  width: ${ICON_WIDTH}px;
-  height: ${ICON_HEIGHT}px;
-  overflow: hidden;
-  border: 1px solid ${"var(--ds-border, rgba(223, 225, 229, 0.5))"}; /* N60 at 50% */
-  border-radius: ${borderRadius()}px;
-  box-sizing: border-box;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  div {
-    width: ${ICON_WIDTH}px;
-    height: ${ICON_HEIGHT}px;
-  }
-`;
-const itemBody = css`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-`;
-const itemText = theme => css`
-  white-space: initial;
-  color: ${themed({
-  light: `var(--ds-text, ${N800})`,
-  dark: `var(--ds-text, ${DN600})`
-})(theme)};
-  .item-title {
-    line-height: 1.4;
-  }
-  .item-description {
-    font-size: ${relativeFontSizeToBase16(12)};
-    color: ${`var(--ds-text-subtlest, ${N200})`};
-    margin-top: 3px;
-  }
-`;
-const itemAfter = css`
-  flex: 0 0 auto;
-`;
-const customRenderItemDivStyle = css`
-  overflow: hidden;
-  &:focus {
-    box-shadow: inset 2px 0px 0px ${`var(--ds-border-focused, ${B400})`};
-    background-color: ${`var(--ds-background-neutral-subtle-hovered, ${N30})`};
-    outline: none;
-  }
-`;
-
-/**
- * This CSS emulates the desired behaviour with :focus-visible for firefox.
- * Firefox unfortunately does not register keyboard focus if user mouseDown and drag a typeahead item
- * resulting in focus-visible style not drawn.
- */
-const selectionFrame = {
-  '& > button:focus': {
-    boxShadow: `inset 2px 0px 0px ${`var(--ds-border-focused, ${B400})`};`,
-    backgroundColor: `${`var(--ds-background-neutral-subtle-hovered, ${N30})`}`,
-    outline: 'none',
-    '&:active': {
-      boxShadow: 'none'
-    }
-  },
-  '& > button:hover': {
-    backgroundColor: 'inherit',
-    outline: 'none'
-  }
-};
-const selectedStyle = css`
-  background-color: ${`var(--ds-background-neutral-subtle-hovered, ${N30})`};
-  box-shadow: inset 2px 0px 0px ${`var(--ds-border-focused, ${B400})`};
-`;
-const FallbackIcon = /*#__PURE__*/React.memo(({
-  label
-}) => {
-  return jsx(IconFallback, null);
-});
-const noop = () => {};
-const AssistiveText = ({
-  title,
-  description,
-  shortcut
-}) => {
-  const intl = useIntl();
-  const descriptionText = description ? ` ${intl.formatMessage(typeAheadListMessages.descriptionLabel)} ${description}.` : '';
-  const shortcutText = shortcut ? ` ${intl.formatMessage(typeAheadListMessages.shortcutLabel)} ${shortcut}.` : '';
-  return jsx("span", {
-    className: "assistive"
-  }, `${title}. ${descriptionText} ${shortcutText}`);
-};
-export const TypeAheadListItem = ({
-  item,
-  itemsLength,
-  selectedIndex,
-  onItemClick,
-  itemIndex,
-  ariaLabel
-}) => {
-  /**
-   * To select and highlight the first Item when no item is selected
-   * However selectedIndex remains -1, So that user does not skip the first item when down arrow key is used from typeahead query(inputQuery.tsx)
-   */
-  const isSelected = itemIndex === selectedIndex || selectedIndex === -1 && itemIndex === 0;
-  const {
-    icon,
-    title,
-    render: customRenderItem
-  } = item;
-  const elementIcon = useMemo(() => {
-    return jsx("div", {
-      css: itemIcon
-    }, icon ? icon() : jsx(FallbackIcon, {
-      label: title
-    }));
-  }, [icon, title]);
-  const insertSelectedItem = useCallback(() => {
-    onItemClick(SelectItemMode.SELECTED, itemIndex);
-  }, [onItemClick, itemIndex]);
-  const customItemRef = /*#__PURE__*/React.createRef();
-  const buttonItemRef = /*#__PURE__*/React.createRef();
-  const shouldUpdateFocus = selectedIndex === itemIndex;
-  useLayoutEffect(() => {
-    if (shouldUpdateFocus) {
-      var _customItemRef$curren;
-      customItemRef === null || customItemRef === void 0 ? void 0 : (_customItemRef$curren = customItemRef.current) === null || _customItemRef$curren === void 0 ? void 0 : _customItemRef$curren.focus();
-    }
-  }, [customItemRef, shouldUpdateFocus]);
-  useLayoutEffect(() => {
-    if (shouldUpdateFocus) {
-      var _buttonItemRef$curren;
-      buttonItemRef === null || buttonItemRef === void 0 ? void 0 : (_buttonItemRef$curren = buttonItemRef.current) === null || _buttonItemRef$curren === void 0 ? void 0 : _buttonItemRef$curren.focus();
-    }
-  }, [buttonItemRef, shouldUpdateFocus]);
-  const customItem = useMemo(() => {
-    if (!customRenderItem) {
-      return null;
-    }
-    const Comp = customRenderItem;
-    const listItemClasses = [customRenderItemDivStyle, isSelected && selectedStyle];
-    return jsx("div", {
-      "aria-selected": isSelected,
-      role: "option",
-      "aria-label": ariaLabel,
-      "aria-setsize": itemsLength,
-      "aria-posinset": itemIndex,
-      tabIndex: 0,
-      css: listItemClasses,
-      className: `ak-typeahead-item ${isSelected ? 'typeahead-selected-item' : ''}`
-      //CSS classes added for test cases purpose
-      ,
-      ref: customItemRef
-    }, jsx("div", {
-      "aria-hidden": true
-    }, jsx(Comp, {
-      onClick: insertSelectedItem,
-      isSelected: false //The selection styles are handled in the parent div instead. Hence isSelected is made false always.
-      ,
-      onHover: noop
-    })));
-  }, [customRenderItem, isSelected, ariaLabel, itemsLength, customItemRef, insertSelectedItem, itemIndex]);
-  if (customItem) {
-    return customItem;
-  }
-  const listItemClasses = [selectionFrame, isSelected && selectedStyle];
-  return jsx("span", {
-    css: listItemClasses
-  }, jsx(ButtonItem, {
-    onClick: insertSelectedItem,
-    iconBefore: elementIcon,
-    isSelected: isSelected,
-    "aria-selected": isSelected,
-    "aria-label": title,
-    "aria-setsize": itemsLength,
-    "aria-posinset": itemIndex,
-    role: "option",
-    ref: buttonItemRef,
-    css: listItemClasses
-  }, jsx("div", {
-    "aria-hidden": true
-  }, jsx("div", {
-    css: itemText
-  }, jsx("div", {
-    css: itemBody
-  }, jsx("div", {
-    className: "item-title"
-  }, item.title), jsx("div", {
-    css: itemAfter
-  }, item.keyshortcut && jsx("div", {
-    css: shortcutStyle
-  }, item.keyshortcut))), jsx("div", {
-    className: "item-description"
-  }, item.description))), jsx(AssistiveText, {
-    title: item.title,
-    description: item.description,
-    shortcut: item.keyshortcut
-  })));
-};