@atlaskit/editor-plugin-quick-insert/dist/es2019/ui/registered-menu/ToolbarQuickInsertMenu.js

Quick insert plugin for @atlaskit/editor-core

/* ToolbarQuickInsertMenu.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./ToolbarQuickInsertMenu.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useCallback } from 'react';
import { RegisteredMenuList } from '@atlaskit/editor-common/registered-menu/list';
import { Box } from '@atlaskit/primitives/compiled/box';
import { getQuickInsertMenuItemId } from './getQuickInsertMenuItemId';
import { QuickInsertEmptyState } from './QuickInsertEmptyState';
const MENU_FOOTER_HEIGHT = 45;
const LIST_WIDTH = 350;
const styles = {
  content: "_1e0c1txw _2lx21bp4 _1tkeidpf",
  scrollable: "_16jlkb7n _1tkeidpf _18m91wug",
  footer: "_1o9zidpf",
  externalControls: "_1i531l7x _15a5nqa1 _uwhke4h9 _1q51u2gc _85i5u2gc",
  footerDivider: "_1i531l7x _15a5nqa1 _uwhke4h9 _1o9zidpf"
};
export const ToolbarQuickInsertMenu = ({
  Item,
  model,
  emptyStateHandler,
  listLabel,
  activePreviewItemKey,
  itemCount,
  listId,
  maxHeight,
  rows,
  onItemBlur,
  onItemFocus,
  onItemHover,
  onItemLeave,
  onItemVisibilityChange,
  onRenderedItemsChange,
  query,
  selectedItemIndex,
  selectionSource
}) => {
  const footerItemIndex = itemCount - 1;
  const footerItemId = getQuickInsertMenuItemId(listId, footerItemIndex);
  const isEmptySearch = query !== '' && model.sections.length === 0;
  const hasNoSearchResults = model.sections.length === 0 && model.fallbackItems.length === 0;
  const externalControls = isEmptySearch ? emptyStateHandler === null || emptyStateHandler === void 0 ? void 0 : emptyStateHandler({
    mode: 'inline',
    searchTerm: query,
    showNoResultsMessage: false
  }) : null;
  const onFooterItemFocus = useCallback(() => onItemFocus(footerItemIndex), [footerItemIndex, onItemFocus]);
  const onFooterItemHover = useCallback(() => onItemHover(footerItemIndex), [footerItemIndex, onItemHover]);
  const listMaxHeight = Math.max(0, maxHeight - (model.footer ? MENU_FOOTER_HEIGHT : 0));
  const contentStyle = {
    maxHeight: maxHeight
  };
  const getItemId = useCallback(({
    itemIndex
  }) => getQuickInsertMenuItemId(listId, itemIndex), [listId]);
  const onScrollableContentScroll = useCallback(event => {
    if (event.target === event.currentTarget && activePreviewItemKey) {
      onItemVisibilityChange(activePreviewItemKey, false);
    }
  }, [activePreviewItemKey, onItemVisibilityChange]);
  if (!model.root) {
    return null;
  }
  return /*#__PURE__*/React.createElement(Box, {
    xcss: styles.content,
    style: contentStyle
  }, /*#__PURE__*/React.createElement(Box, {
    xcss: styles.scrollable,
    onScroll: onScrollableContentScroll
  }, /*#__PURE__*/React.createElement(Box, {
    "aria-label": listLabel,
    "aria-owns": model.footer ? footerItemId : undefined,
    id: listId,
    role: "listbox"
  }, rows.length > 0 && /*#__PURE__*/React.createElement(RegisteredMenuList, {
    rows: rows,
    Item: Item,
    width: LIST_WIDTH,
    maxHeight: listMaxHeight,
    getItemId: getItemId,
    activeItemKey: activePreviewItemKey,
    selectedItemIndex: selectedItemIndex,
    selectionSource: selectionSource,
    scrollResetKey: query,
    onItemHover: onItemHover,
    onItemFocus: onItemFocus,
    onItemBlur: onItemBlur,
    onItemLeave: onItemLeave,
    onItemVisibilityChange: onItemVisibilityChange,
    onRenderedItemsChange: onRenderedItemsChange,
    role: "group",
    tabIndex: null,
    omitAriaReadonly: true,
    lastRowPadding: "space.100",
    scrollTo: "top-on-reset"
  })), query !== '' && hasNoSearchResults && /*#__PURE__*/React.createElement(QuickInsertEmptyState, {
    mode: "inline"
  }), externalControls && /*#__PURE__*/React.createElement(Box, {
    testId: "registered-insert-menu-external-controls",
    xcss: styles.externalControls
  }, externalControls)), model.footer && /*#__PURE__*/React.createElement(Box, {
    xcss: styles.footer
  }, /*#__PURE__*/React.createElement(Box, {
    testId: "registered-insert-menu-footer",
    xcss: styles.footer
  }, !isEmptySearch || !hasNoSearchResults || Boolean(externalControls) ? /*#__PURE__*/React.createElement(Box, {
    "aria-hidden": "true",
    xcss: styles.footerDivider
  }) : null, /*#__PURE__*/React.createElement(Box, {
    onFocus: onFooterItemFocus,
    onMouseMove: onFooterItemHover
  }, /*#__PURE__*/React.createElement(Item, {
    id: footerItemId,
    isSelected: selectedItemIndex === footerItemIndex,
    isActive: false,
    registration: model.footer
  })))));
};