@atlaskit/editor-plugin-quick-insert/dist/esm/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';
var MENU_FOOTER_HEIGHT = 45;
var LIST_WIDTH = 350;
var styles = {
  content: "_1e0c1txw _2lx21bp4 _1tkeidpf",
  scrollable: "_16jlkb7n _1tkeidpf _18m91wug",
  footer: "_1o9zidpf",
  externalControls: "_1i531l7x _15a5nqa1 _uwhke4h9 _1q51u2gc _85i5u2gc",
  footerDivider: "_1i531l7x _15a5nqa1 _uwhke4h9 _1o9zidpf"
};
export var ToolbarQuickInsertMenu = function ToolbarQuickInsertMenu(_ref) {
  var Item = _ref.Item,
    model = _ref.model,
    emptyStateHandler = _ref.emptyStateHandler,
    listLabel = _ref.listLabel,
    activePreviewItemKey = _ref.activePreviewItemKey,
    itemCount = _ref.itemCount,
    listId = _ref.listId,
    maxHeight = _ref.maxHeight,
    rows = _ref.rows,
    onItemBlur = _ref.onItemBlur,
    onItemFocus = _ref.onItemFocus,
    onItemHover = _ref.onItemHover,
    onItemLeave = _ref.onItemLeave,
    onItemVisibilityChange = _ref.onItemVisibilityChange,
    onRenderedItemsChange = _ref.onRenderedItemsChange,
    query = _ref.query,
    selectedItemIndex = _ref.selectedItemIndex,
    selectionSource = _ref.selectionSource;
  var footerItemIndex = itemCount - 1;
  var footerItemId = getQuickInsertMenuItemId(listId, footerItemIndex);
  var isEmptySearch = query !== '' && model.sections.length === 0;
  var hasNoSearchResults = model.sections.length === 0 && model.fallbackItems.length === 0;
  var externalControls = isEmptySearch ? emptyStateHandler === null || emptyStateHandler === void 0 ? void 0 : emptyStateHandler({
    mode: 'inline',
    searchTerm: query,
    showNoResultsMessage: false
  }) : null;
  var onFooterItemFocus = useCallback(function () {
    return onItemFocus(footerItemIndex);
  }, [footerItemIndex, onItemFocus]);
  var onFooterItemHover = useCallback(function () {
    return onItemHover(footerItemIndex);
  }, [footerItemIndex, onItemHover]);
  var listMaxHeight = Math.max(0, maxHeight - (model.footer ? MENU_FOOTER_HEIGHT : 0));
  var contentStyle = {
    maxHeight: maxHeight
  };
  var getItemId = useCallback(function (_ref2) {
    var itemIndex = _ref2.itemIndex;
    return getQuickInsertMenuItemId(listId, itemIndex);
  }, [listId]);
  var onScrollableContentScroll = useCallback(function (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
  })))));
};