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

A React library for building user interfaces at Volvo Cars

import _extends from "@babel/runtime/helpers/extends";
import { bool, func, node, string } from 'prop-types';
import React from 'react';
import { useTheme } from '../../styling/use-theme';
import { makeId, makeIdList, useId } from '../../utils/auto-id';
import { Block } from '../block';
import { Flex } from '../flex';
import { Message } from '../message';
import { Spacer } from '../spacer';
import { Spinner } from '../spinner';
import { labelStyle, styles, wrapperStyle } from './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)
 */
export const SelectInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
  let {
    children,
    disabled,
    value = '',
    label,
    description = '',
    errorMessage = '',
    isValid = true,
    loading = false,
    allowEmpty = false,
    ...props
  } = _ref;
  const theme = useTheme();
  const isEmpty = value.length === 0;
  const styleProps = {
    isEmpty,
    isValid,
    loading,
    disabled,
    theme
  };
  const id = useId('vcc-ui-select-input', props.id);
  const errorMessageId = id && makeId(id, 'error');
  const descriptionId = id && makeId(id, 'description');
  const describedBy = makeIdList([errorMessage && errorMessageId, description && descriptionId]);
  const messages = /*#__PURE__*/React.createElement(React.Fragment, null, errorMessage || description ? /*#__PURE__*/React.createElement(Spacer, {
    size: 0.5
  }) : null, errorMessage ? /*#__PURE__*/React.createElement(Message, {
    type: "error",
    id: errorMessageId
  }, errorMessage) : null, description ? /*#__PURE__*/React.createElement(Message, {
    id: descriptionId
  }, description) : null);
  if (loading) {
    return /*#__PURE__*/React.createElement(Flex, {
      extend: {
        flexDirection: 'column',
        width: '100%'
      }
    }, /*#__PURE__*/React.createElement(Block, {
      ref: ref,
      extend: styles({
        ...styleProps
      })
    }, /*#__PURE__*/React.createElement(Spinner, {
      color: theme.tokens.inputForeground,
      size: 24
    })), messages);
  }
  return /*#__PURE__*/React.createElement(Flex, {
    extend: wrapperStyle
  }, /*#__PURE__*/React.createElement(Flex, {
    extend: {
      position: 'relative'
    }
  }, /*#__PURE__*/React.createElement(Block, {
    as: "label",
    htmlFor: id,
    extend: labelStyle(styleProps)
  }, label), /*#__PURE__*/React.createElement(Block, _extends({}, props, {
    ref: ref,
    as: "select",
    id: id,
    extend: styles(styleProps),
    disabled: disabled,
    value: value
  }, describedBy && {
    'aria-describedby': describedBy
  }), /*#__PURE__*/React.createElement("option", {
    disabled: !allowEmpty,
    value: "",
    hidden: !(isEmpty || allowEmpty)
  }), children)), messages);
});
SelectInput.propTypes = {
  /** Renders a label inside the input.  */
  label: string.isRequired,
  /** Renders a neutral helper message underneath the input.  */
  description: string,
  /** Renders a red error message for validation underneath the input.  */
  errorMessage: string,
  id: string,
  name: string,
  onChange: func.isRequired,
  value: string,
  disabled: bool,
  loading: bool,
  // @ts-ignore
  children: node,
  isValid: bool,
  allowEmpty: bool
};
SelectInput.displayName = 'SelectInput';