@shopify/polaris/dist/esm/components/Autocomplete/Autocomplete.js

Shopify’s product component library

import React$1 from 'react';
import { useI18n } from '../../utilities/i18n/hooks.js';
import { Spinner as Spinner$1 } from '../Spinner/Spinner.js';
import { ComboBox as ComboBox$1 } from './components/ComboBox/ComboBox.js';
import { TextField as TextField$1 } from './components/TextField/TextField.js';
import styles from './Autocomplete.scss.js';

// TypeScript can't generate types that correctly infer the typing of
// subcomponents so explicitly state the subcomponents in the type definition.
// Letting this be implicit works in this project but fails in projects that use
// generated *.d.ts files.
var Autocomplete = function Autocomplete({
  id,
  options,
  selected,
  textField,
  preferredPosition,
  listTitle,
  allowMultiple,
  loading,
  actionBefore,
  willLoadMoreResults,
  emptyState,
  onSelect,
  onLoadMoreResults
}) {
  var i18n = useI18n();
  var spinnerMarkup = loading ? /*#__PURE__*/React$1.createElement("div", {
    className: styles.Loading
  }, /*#__PURE__*/React$1.createElement(Spinner$1, {
    size: "small",
    accessibilityLabel: i18n.translate('Polaris.Autocomplete.spinnerAccessibilityLabel')
  })) : null;
  var conditionalOptions = loading && !willLoadMoreResults ? [] : options;
  var conditionalAction = actionBefore && actionBefore !== [] ? [actionBefore] : undefined;
  return /*#__PURE__*/React$1.createElement(ComboBox$1, {
    id: id,
    options: conditionalOptions,
    selected: selected,
    textField: textField,
    preferredPosition: preferredPosition,
    listTitle: listTitle,
    allowMultiple: allowMultiple,
    contentAfter: spinnerMarkup,
    actionsBefore: conditionalAction,
    onSelect: onSelect,
    onEndReached: onLoadMoreResults,
    emptyState: emptyState
  });
};
Autocomplete.ComboBox = ComboBox$1;
Autocomplete.TextField = TextField$1;

export { Autocomplete };