@tpr/govuk-react-jsx/govuk/components/select/index.js

[](https://github.com/alphagov/govuk-frontend/releases/tag/v4.0.1) [![version](https://img.shields.io/npm/v/govuk-react-jsx.svg?styl

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Select = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _ = require("../..");

var _excluded = ["govukClassNames", "className", "aria-describedby", "errorMessage", "formGroup", "hint", "id", "items", "label"],
    _excluded2 = ["reactListKey", "children"];

var Select = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
  var govukClassNames = props.govukClassNames,
      className = props.className,
      describedBy = props['aria-describedby'],
      errorMessage = props.errorMessage,
      formGroup = props.formGroup,
      hint = props.hint,
      id = props.id,
      items = props.items,
      label = props.label,
      attributes = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var describedByValue = describedBy || '';
  var hintComponent;
  var errorMessageComponent;
  var classNames = govukClassNames || {};
  classNames['govuk-form-group'] = classNames['govuk-form-group'] || 'govuk-form-group';
  classNames['govuk-form-group--error'] = classNames['govuk-form-group--error'] || 'govuk-form-group--error';
  classNames['govuk-select'] = classNames['govuk-select'] || 'govuk-select';
  classNames['govuk-select--error'] = classNames['govuk-select--error'] || 'govuk-select--error';

  if (hint) {
    var hintId = "".concat(id, "-hint");
    describedByValue += " ".concat(hintId);
    hintComponent = /*#__PURE__*/_react["default"].createElement(_.Hint, (0, _extends2["default"])({
      govukClassNames: classNames
    }, hint, {
      id: hintId
    }));
  }

  if (errorMessage) {
    var errorId = id ? "".concat(id, "-error") : '';
    describedByValue += " ".concat(errorId);
    errorMessageComponent = /*#__PURE__*/_react["default"].createElement(_.ErrorMessage, (0, _extends2["default"])({
      govukClassNames: classNames
    }, errorMessage, {
      id: errorId
    }));
  }

  var options = items ? items.filter(function (item) {
    return item;
  }).map(function (option, index) {
    var reactListKey = option.reactListKey,
        children = option.children,
        optionAttributes = (0, _objectWithoutProperties2["default"])(option, _excluded2);
    return /*#__PURE__*/_react["default"].createElement("option", (0, _extends2["default"])({}, optionAttributes, {
      key: reactListKey || index
    }), children);
  }) : null;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(classNames['govuk-form-group']).concat(errorMessage ? " ".concat(classNames['govuk-form-group--error']) : '', " ").concat((formGroup === null || formGroup === void 0 ? void 0 : formGroup.className) || '')
  }, /*#__PURE__*/_react["default"].createElement(_.Label, (0, _extends2["default"])({
    govukClassNames: classNames
  }, label, {
    htmlFor: id
  })), hintComponent, errorMessageComponent, /*#__PURE__*/_react["default"].createElement("select", (0, _extends2["default"])({
    className: "".concat(classNames['govuk-select'], " ").concat(className || '').concat(errorMessage ? " ".concat(classNames['govuk-select--error']) : ''),
    id: id,
    ref: ref,
    "aria-describedby": describedByValue || null
  }, attributes), options));
});

exports.Select = Select;
Select.displayName = 'Select';