import React__default from 'react';
import PropTypes from 'prop-types';
import SelectMenu from '../select-menu/index.js';
import Stack from '../stack/index.js';
import { useField } from '../use-form/index.js';
import InlineValidation from '../inline-validation/index.js';
import '../extends-C4cduGrv.js';
import '../objectWithoutProperties-TXwlfNxG.js';
import '../select-menu-BvA3x4Nf.js';
import '../slicedToArray-BB-AwwkK.js';
import '../defineProperty-CEd-kZQW.js';
import '../floating-ui.react-cWPyyUrN.js';
import '../typeof-CgC7Bq6K.js';
import '../toConsumableArray-dKQYsfpV.js';
import '../index-qSfOyGhk.js';
import 'react-dom';
import 'classnames';
import '../_commonjsHelpers-_1FafXWI.js';
import '../label/index.js';
import '@reach/visually-hidden';
import '../ck-icon/index.js';
import '../ck-icon/assets/icon-map/index.js';
import '../icon/index.js';
import '@fortawesome/react-fontawesome';
import '../icon/icons.js';
import '../icon/library.js';
import '@fortawesome/fontawesome-svg-core';
import '@fortawesome/pro-solid-svg-icons';
import '@fortawesome/pro-light-svg-icons';
import '@fortawesome/free-brands-svg-icons';
import '../portal/index.js';
import '../use-rerender-once/index.js';
import '../use-force-update/index.js';
import '../select-menu/autocomplete.js';
import '../auto-id.esm-Cly76abB.js';
import '../utils.esm-CKyxlHOy.js';
import '../warning-s9zGJbnw.js';
import '../use-progress/index.js';
import '../use-trailing-debounce/index.js';

function SelectField(_ref) {
  var id = _ref.id,
      name = _ref.name,
      label = _ref.label,
      options = _ref.options,
      placeholder = _ref.placeholder,
      value = _ref.value,
      autoFocus = _ref.autoFocus,
      onChange = _ref.onChange;
  var field = useField({
    id: id,
    name: name,
    value: value,
    onChange: onChange
  });
  return /*#__PURE__*/React__default.createElement(Stack, {
    spacing: 2
  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(SelectMenu, {
    id: field.id,
    className: "w-full",
    autoFocus: autoFocus,
    label: label,
    name: name,
    value: field.value,
    placeholder: placeholder,
    options: options,
    onBlur: field.onBlur,
    onChange: field.onChange
  })), /*#__PURE__*/React__default.createElement(InlineValidation, {
    name: name
  }));
}

SelectField.propTypes = {
  id: PropTypes.number,
  name: PropTypes.string,
  label: PropTypes.string.isRequired,
  options: PropTypes.arrayOf(PropTypes.object).isRequired,
  placeholder: PropTypes.string,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  autoFocus: PropTypes.bool,
  onChange: PropTypes.func
};

export { SelectField as default };
