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

Quick insert plugin for @atlaskit/editor-core

/* RegistryElementBrowserSearchResults.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";

var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.RegistryElementBrowserSearchResults = void 0;
require("./RegistryElementBrowserSearchResults.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _react = _interopRequireWildcard(require("react"));
var _reactIntl = require("react-intl");
var _messages = require("@atlaskit/editor-common/quick-insert/messages");
var _provider = require("@atlaskit/editor-common/quick-insert/provider");
var _QuickInsertEmptyState = require("../registered-menu/QuickInsertEmptyState");
var _model = require("./model");
var _options = require("./options");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
// oxlint-disable-next-line eslint/no-redeclare
var 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.
var recommendedGridStyles = null;
var regularTileStyles = null;
var wideTileStyles = null;
var groupedResultsStyles = null;
var resultGroupStyles = null;
var resultGroupHeadingStyles = null;
var emptyStateGridItemStyles = null;
var styles = {
  fallbackMarketplace: "_1i531l7x _15a5nqa1 _uwhke4h9 _19pkpxbi _ca0qpxbi"
};
var RegistryElementBrowserItem = function RegistryElementBrowserItem(_ref) {
  var editorView = _ref.editorView,
    isOffline = _ref.isOffline,
    isSelected = _ref.isSelected,
    item = _ref.item,
    onSelect = _ref.onSelect,
    surfaceContext = _ref.surfaceContext;
  var _item$registration = item.registration,
    Component = _item$registration.component,
    key = _item$registration.key;
  var contextValue = (0, _react.useMemo)(function () {
    return {
      editorView: editorView,
      isOffline: isOffline,
      item: {
        description: item.description,
        id: key,
        isSelected: isSelected
      },
      select: function select(handler) {
        return onSelect(key, handler);
      },
      surfaceContext: surfaceContext
    };
  }, [editorView, isOffline, isSelected, item.description, key, onSelect, surfaceContext]);
  if (!Component) {
    return null;
  }
  return /*#__PURE__*/_react.default.createElement(_provider.QuickInsertProvider, {
    value: contextValue
  }, /*#__PURE__*/_react.default.createElement(Component, {
    parents: item.registration.parents,
    surfaceContext: surfaceContext
  }, null));
};
var RegistryElementBrowserSearchResults = exports.RegistryElementBrowserSearchResults = function RegistryElementBrowserSearchResults(_ref2) {
  var editorView = _ref2.editorView,
    emptyStateHandler = _ref2.emptyStateHandler,
    fallbackItems = _ref2.fallbackItems,
    _ref2$isLoading = _ref2.isLoading,
    isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading,
    isOffline = _ref2.isOffline,
    items = _ref2.items,
    query = _ref2.query,
    recommendedItems = _ref2.recommendedItems,
    resultsId = _ref2.resultsId,
    section = _ref2.section,
    selectedKey = _ref2.selectedKey,
    surfaceContext = _ref2.surfaceContext,
    onKeyDown = _ref2.onKeyDown,
    onSelect = _ref2.onSelect;
  var _useIntl = (0, _reactIntl.useIntl)(),
    formatMessage = _useIntl.formatMessage;
  var groupHeadingIdPrefix = (0, _react.useId)();
  var hasFallbackItems = Boolean(!isLoading && items.length === 0 && query.trim().length > 0 && (fallbackItems === null || fallbackItems === void 0 ? void 0 : fallbackItems.length));
  var resultsLabel = formatMessage({
    defaultMessage: 'Element results',
    id: 'editor.quick-insert.results-label'
  });
  var displayedItems = hasFallbackItems && fallbackItems ? fallbackItems : items;
  var groups = recommendedItems.length > 0 ? [{
    items: recommendedItems,
    key: 'recommended',
    title: formatMessage(_messages.messages.categoryRecommended)
  }, {
    items: 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(function (group) {
    return group.items.length > 0;
  }) : undefined;
  var isGrouped = groups !== undefined;
  var renderItems = function renderItems(itemsToRender) {
    return itemsToRender.map(function (item) {
      return /*#__PURE__*/_react.default.createElement(RegistryElementBrowserItem, {
        editorView: editorView,
        isOffline: isOffline,
        isSelected: selectedKey === item.registration.key,
        item: item,
        key: item.registration.key,
        onSelect: onSelect,
        surfaceContext: surfaceContext
      });
    });
  };
  var shouldRenderEmptyState = items.length === 0 && recommendedItems.length === 0 && !isLoading;
  var emptyState = shouldRenderEmptyState ? emptyStateHandler === null || emptyStateHandler === void 0 ? void 0 : emptyStateHandler({
    mode: 'full',
    searchTerm: query,
    selectedCategory: section,
    showNoResultsMessage: false
  }) : null;
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-testid": "registry-element-browser-results",
    id: resultsId,
    tabIndex: -1
  }, (isGrouped || displayedItems.length > 0) && /*#__PURE__*/_react.default.createElement("div", {
    "aria-label": resultsLabel,
    onFocus: function onFocus(event) {
      if (event.target === event.currentTarget) {
        var _getFirstEnabledOptio;
        (_getFirstEnabledOptio = (0, _options.getFirstEnabledOption)(event.currentTarget)) === null || _getFirstEnabledOptio === void 0 || _getFirstEnabledOptio.focus();
      }
    },
    onKeyDown: onKeyDown,
    role: "listbox",
    tabIndex: 0,
    className: (0, _runtime.ax)([isGrouped && "_zulppxbi _1e0c11p5", !isGrouped && "_zulppxbi _ae4vv2br _1e0c11p5 _yv0ei47z _1vhz9sye _frm51m8q"])
  }, groups ? groups.map(function (group) {
    return /*#__PURE__*/_react.default.createElement("div", {
      "aria-labelledby": "".concat(groupHeadingIdPrefix, "-").concat(group.key),
      key: group.key,
      role: "group",
      className: (0, _runtime.ax)(["_zulpu2gc _1e0c11p5"])
    }, /*#__PURE__*/_react.default.createElement("div", {
      "aria-hidden": true,
      id: "".concat(groupHeadingIdPrefix, "-").concat(group.key),
      className: (0, _runtime.ax)(["_11c8i4vh _18zrutpp _syazazsu _85i5u2gc"])
    }, group.title), group.key === 'recommended' ? /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _runtime.ax)(["_zulppxbi _ae4vv2br _1e0c11p5 _yv0ei47z _1vhz9sye _frm51m8q", "_frm51blg"])
    }, group.items.map(function (item, index) {
      var isWide = (0, _model.getRecommendedTileSize)(index, group.items.length) === 'wide';
      return /*#__PURE__*/_react.default.createElement("div", {
        key: item.registration.key,
        className: (0, _runtime.ax)([isWide && "_1ul9idpf _asa4uojk", !isWide && "_1ul9idpf _asa4g31l"])
      }, renderItems([item]));
    })) : /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _runtime.ax)(["_zulppxbi _ae4vv2br _1e0c11p5 _yv0ei47z _1vhz9sye _frm51m8q"])
    }, renderItems(group.items)));
  }) : renderItems(displayedItems)), shouldRenderEmptyState && !hasFallbackItems && query.trim().length > 0 && /*#__PURE__*/_react.default.createElement(_QuickInsertEmptyState.QuickInsertEmptyState, {
    mode: "full"
  }), emptyState && /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _runtime.ax)(["_yyhyjvu9 _1ul9idpf _1bsb1osq", styles.fallbackMarketplace])
  }, emptyState));
};