@atlaskit/editor-plugin-quick-insert/dist/es2019/ui/RegistryElementBrowser/RegistryElementBrowserSearchResults.js

Quick insert plugin for @atlaskit/editor-core

/* RegistryElementBrowserSearchResults.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./RegistryElementBrowserSearchResults.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useId, useMemo } from 'react';
import { useIntl } from 'react-intl';
import { messages } from '@atlaskit/editor-common/quick-insert/messages';
import { QuickInsertProvider } from '@atlaskit/editor-common/quick-insert/provider';
import { QuickInsertEmptyState } from '../registered-menu/QuickInsertEmptyState';
// oxlint-disable-next-line eslint/no-redeclare
import { getRecommendedTileSize } from './model';
import { getFirstEnabledOption } from './options';
const resultsGridStyles = null;

// Six half-tile columns line wide and regular tiles up with the three-column grid below:
// a regular tile spans two (264px) and a wide tile spans three.
const recommendedGridStyles = null;
const regularTileStyles = null;
const wideTileStyles = null;
const groupedResultsStyles = null;
const resultGroupStyles = null;
const resultGroupHeadingStyles = null;
const emptyStateGridItemStyles = null;
const styles = {
  fallbackMarketplace: "_1i531l7x _15a5nqa1 _uwhke4h9 _19pkpxbi _ca0qpxbi"
};
const RegistryElementBrowserItem = ({
  editorView,
  isOffline,
  isSelected,
  item,
  onSelect,
  surfaceContext
}) => {
  const {
    component: Component,
    key
  } = item.registration;
  const contextValue = useMemo(() => ({
    editorView,
    isOffline,
    item: {
      description: item.description,
      id: key,
      isSelected
    },
    select: handler => onSelect(key, handler),
    surfaceContext
  }), [editorView, isOffline, isSelected, item.description, key, onSelect, surfaceContext]);
  if (!Component) {
    return null;
  }
  return /*#__PURE__*/React.createElement(QuickInsertProvider, {
    value: contextValue
  }, /*#__PURE__*/React.createElement(Component, {
    parents: item.registration.parents,
    surfaceContext: surfaceContext
  }, null));
};
export const RegistryElementBrowserSearchResults = ({
  editorView,
  emptyStateHandler,
  fallbackItems,
  isLoading = false,
  isOffline,
  items,
  query,
  recommendedItems,
  resultsId,
  section,
  selectedKey,
  surfaceContext,
  onKeyDown,
  onSelect
}) => {
  const {
    formatMessage
  } = useIntl();
  const groupHeadingIdPrefix = useId();
  const hasFallbackItems = Boolean(!isLoading && items.length === 0 && query.trim().length > 0 && (fallbackItems === null || fallbackItems === void 0 ? void 0 : fallbackItems.length));
  const resultsLabel = formatMessage({
    defaultMessage: 'Element results',
    id: 'editor.quick-insert.results-label'
  });
  const displayedItems = hasFallbackItems && fallbackItems ? fallbackItems : items;
  const groups = recommendedItems.length > 0 ? [{
    items: recommendedItems,
    key: 'recommended',
    title: formatMessage(messages.categoryRecommended)
  }, {
    items,
    key: 'all-elements',
    title: formatMessage({
      defaultMessage: 'All elements',
      description: 'Heading above the remaining elements in the element browser All category, shown below the Recommended elements.',
      id: 'editor.quick-insert.all-elements'
    })
  }].filter(group => group.items.length > 0) : undefined;
  const isGrouped = groups !== undefined;
  const renderItems = itemsToRender => itemsToRender.map(item => /*#__PURE__*/React.createElement(RegistryElementBrowserItem, {
    editorView: editorView,
    isOffline: isOffline,
    isSelected: selectedKey === item.registration.key,
    item: item,
    key: item.registration.key,
    onSelect: onSelect,
    surfaceContext: surfaceContext
  }));
  const shouldRenderEmptyState = items.length === 0 && recommendedItems.length === 0 && !isLoading;
  const emptyState = shouldRenderEmptyState ? emptyStateHandler === null || emptyStateHandler === void 0 ? void 0 : emptyStateHandler({
    mode: 'full',
    searchTerm: query,
    selectedCategory: section,
    showNoResultsMessage: false
  }) : null;
  return /*#__PURE__*/React.createElement("div", {
    "data-testid": "registry-element-browser-results",
    id: resultsId,
    tabIndex: -1
  }, (isGrouped || displayedItems.length > 0) && /*#__PURE__*/React.createElement("div", {
    "aria-label": resultsLabel,
    onFocus: event => {
      if (event.target === event.currentTarget) {
        var _getFirstEnabledOptio;
        (_getFirstEnabledOptio = getFirstEnabledOption(event.currentTarget)) === null || _getFirstEnabledOptio === void 0 ? void 0 : _getFirstEnabledOptio.focus();
      }
    },
    onKeyDown: onKeyDown,
    role: "listbox",
    tabIndex: 0,
    className: ax([isGrouped && "_zulppxbi _1e0c11p5", !isGrouped && "_zulppxbi _ae4vv2br _1e0c11p5 _yv0ei47z _1vhz9sye _frm51m8q"])
  }, groups ? groups.map(group => /*#__PURE__*/React.createElement("div", {
    "aria-labelledby": `${groupHeadingIdPrefix}-${group.key}`,
    key: group.key,
    role: "group",
    className: ax(["_zulpu2gc _1e0c11p5"])
  }, /*#__PURE__*/React.createElement("div", {
    "aria-hidden": true,
    id: `${groupHeadingIdPrefix}-${group.key}`,
    className: ax(["_11c8i4vh _18zrutpp _syazazsu _85i5u2gc"])
  }, group.title), group.key === 'recommended' ? /*#__PURE__*/React.createElement("div", {
    className: ax(["_zulppxbi _ae4vv2br _1e0c11p5 _yv0ei47z _1vhz9sye _frm51m8q", "_frm51blg"])
  }, group.items.map((item, index) => {
    const isWide = getRecommendedTileSize(index, group.items.length) === 'wide';
    return /*#__PURE__*/React.createElement("div", {
      key: item.registration.key,
      className: ax([isWide && "_1ul9idpf _asa4uojk", !isWide && "_1ul9idpf _asa4g31l"])
    }, renderItems([item]));
  })) : /*#__PURE__*/React.createElement("div", {
    className: ax(["_zulppxbi _ae4vv2br _1e0c11p5 _yv0ei47z _1vhz9sye _frm51m8q"])
  }, renderItems(group.items)))) : renderItems(displayedItems)), shouldRenderEmptyState && !hasFallbackItems && query.trim().length > 0 && /*#__PURE__*/React.createElement(QuickInsertEmptyState, {
    mode: "full"
  }), emptyState && /*#__PURE__*/React.createElement("div", {
    className: ax(["_yyhyjvu9 _1ul9idpf _1bsb1osq", styles.fallbackMarketplace])
  }, emptyState));
};