'use strict';

var icons = require('@transferwise/icons');
var clsx = require('clsx');
var React = require('react');
var Input = require('../../inputs/Input.js');
var jsxRuntime = require('react/jsx-runtime');

const SearchBox = /*#__PURE__*/React.forwardRef(({
  id,
  classNames = {},
  focusedOptionId,
  onChange,
  onClick,
  placeholder = undefined,
  value = ''
}, reference) => {
  const style = className => classNames[className] || className;
  return /*#__PURE__*/jsxRuntime.jsx("li", {
    className: style('border-bottom'),
    children: /*#__PURE__*/jsxRuntime.jsx("a", {
      className: `${style('np-select-filter-link')} ${style('p-a-0')}`,
      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
        className: style('input-group'),
        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
          className: clsx.clsx('input-group-addon', 'input-group-addon--search'),
          children: /*#__PURE__*/jsxRuntime.jsx(icons.Search, {
            className: clsx.clsx(style('tw-icon'), style('tw-icon-search')),
            size: 24
          })
        }), /*#__PURE__*/jsxRuntime.jsx(Input.Input, {
          ref: reference,
          id: id,
          role: "searchbox",
          inputMode: "search",
          className: clsx.clsx(style('np-select-filter')),
          placeholder: placeholder,
          value: value,
          spellCheck: "false",
          "aria-activedescendant": focusedOptionId,
          onChange: onChange,
          onClick: onClick
        })]
      })
    })
  });
});

module.exports = SearchBox;
//# sourceMappingURL=SearchBox.js.map
