@findify/react-components/lib/components/autocomplete/Suggestions/index.js

Findify react UI components

/**
 * @module components/autocomplete/Suggestions
 */
import cx from 'classnames';
import MapArray from "../../common/MapArray";
import SuggestionItem from "../SuggestionItem";
var styles = {
  "root": "findify-components-autocomplete--suggestions",
  "list": "findify-components-autocomplete--suggestions__list",
  "horizontal": "findify-components-autocomplete--suggestions__horizontal"
};
import { useQuery, useSuggestions } from '@findify/react-connect';
import useTranslations from "../../../helpers/useTranslations";
import Title from "../BlockTitle";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export default (function (_ref) {
  var _ref$theme = _ref.theme,
      theme = _ref$theme === void 0 ? styles : _ref$theme,
      config = _ref.config,
      isTrendingSearches = _ref.isTrendingSearches,
      highlightedItem = _ref.highlightedItem,
      registerItems = _ref.registerItems;

  var _useSuggestions = useSuggestions(),
      suggestions = _useSuggestions.suggestions;

  var _useQuery = useQuery(),
      query = _useQuery.query;

  var translate = useTranslations();
  registerItems(suggestions, config.get('limit'));
  return suggestions.size ? /*#__PURE__*/_jsxs("div", {
    className: theme.root,
    children: [/*#__PURE__*/_jsx(Title, {
      children: isTrendingSearches ? translate('autocomplete.trendingSearches') : translate('autocomplete.suggestionsTitle')
    }), suggestions && query ? /*#__PURE__*/_jsx("ul", {
      className: cx(theme.list, theme[config.get('template')]),
      tabIndex: 0,
      id: "FindifyAutocompleteSuggestions",
      role: "listbox",
      "aria-label": "Search suggestions",
      "aria-live": "assertive",
      children: /*#__PURE__*/_jsx(MapArray, {
        array: suggestions,
        factory: SuggestionItem,
        limit: config.get('limit'),
        tabIndex: 0,
        template: config.get('template'),
        icon: isTrendingSearches && 'Fire',
        isTrendingSearches: isTrendingSearches,
        query: query,
        mapProps: function mapProps(item) {
          return {
            highlighted: highlightedItem && item.hashCode() === highlightedItem.hashCode()
          };
        }
      })
    }) : null, /*#__PURE__*/_jsx("span", {
      style: {
        display: 'none'
      },
      id: "FindifyAutocompleteDescription",
      children: translate('suggestions.accessibleTitle')
    })]
  }) : null;
});