vcc-ui/dist/components/select-input/select-input.js

A React library for building user interfaces at Volvo Cars

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SelectInput = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _propTypes = require("prop-types");
var _react = _interopRequireDefault(require("react"));
var _useTheme = require("../../styling/use-theme");
var _autoId = require("../../utils/auto-id");
var _block = require("../block");
var _flex = require("../flex");
var _message = require("../message");
var _spacer = require("../spacer");
var _spinner = require("../spinner");
var _selectInput = require("./select-input.styles");
/**
 * @deprecated Use `import { Select } from '@volvo-cars/react-forms'` instead. See [Select](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-select--docs)
 */
const SelectInput = exports.SelectInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
  let {
    children,
    disabled,
    value = '',
    label,
    description = '',
    errorMessage = '',
    isValid = true,
    loading = false,
    allowEmpty = false,
    ...props
  } = _ref;
  const theme = (0, _useTheme.useTheme)();
  const isEmpty = value.length === 0;
  const styleProps = {
    isEmpty,
    isValid,
    loading,
    disabled,
    theme
  };
  const id = (0, _autoId.useId)('vcc-ui-select-input', props.id);
  const errorMessageId = id && (0, _autoId.makeId)(id, 'error');
  const descriptionId = id && (0, _autoId.makeId)(id, 'description');
  const describedBy = (0, _autoId.makeIdList)([errorMessage && errorMessageId, description && descriptionId]);
  const messages = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, errorMessage || description ? /*#__PURE__*/_react.default.createElement(_spacer.Spacer, {
    size: 0.5
  }) : null, errorMessage ? /*#__PURE__*/_react.default.createElement(_message.Message, {
    type: "error",
    id: errorMessageId
  }, errorMessage) : null, description ? /*#__PURE__*/_react.default.createElement(_message.Message, {
    id: descriptionId
  }, description) : null);
  if (loading) {
    return /*#__PURE__*/_react.default.createElement(_flex.Flex, {
      extend: {
        flexDirection: 'column',
        width: '100%'
      }
    }, /*#__PURE__*/_react.default.createElement(_block.Block, {
      ref: ref,
      extend: (0, _selectInput.styles)({
        ...styleProps
      })
    }, /*#__PURE__*/_react.default.createElement(_spinner.Spinner, {
      color: theme.tokens.inputForeground,
      size: 24
    })), messages);
  }
  return /*#__PURE__*/_react.default.createElement(_flex.Flex, {
    extend: _selectInput.wrapperStyle
  }, /*#__PURE__*/_react.default.createElement(_flex.Flex, {
    extend: {
      position: 'relative'
    }
  }, /*#__PURE__*/_react.default.createElement(_block.Block, {
    as: "label",
    htmlFor: id,
    extend: (0, _selectInput.labelStyle)(styleProps)
  }, label), /*#__PURE__*/_react.default.createElement(_block.Block, (0, _extends2.default)({}, props, {
    ref: ref,
    as: "select",
    id: id,
    extend: (0, _selectInput.styles)(styleProps),
    disabled: disabled,
    value: value
  }, describedBy && {
    'aria-describedby': describedBy
  }), /*#__PURE__*/_react.default.createElement("option", {
    disabled: !allowEmpty,
    value: "",
    hidden: !(isEmpty || allowEmpty)
  }), children)), messages);
});
SelectInput.propTypes = {
  /** Renders a label inside the input.  */
  label: _propTypes.string.isRequired,
  /** Renders a neutral helper message underneath the input.  */
  description: _propTypes.string,
  /** Renders a red error message for validation underneath the input.  */
  errorMessage: _propTypes.string,
  id: _propTypes.string,
  name: _propTypes.string,
  onChange: _propTypes.func.isRequired,
  value: _propTypes.string,
  disabled: _propTypes.bool,
  loading: _propTypes.bool,
  // @ts-ignore
  children: _propTypes.node,
  isValid: _propTypes.bool,
  allowEmpty: _propTypes.bool
};
SelectInput.displayName = 'SelectInput';