@equinor/eds-core-react/dist/esm/components/TextField/TextField.js

The React implementation of the Equinor Design System

import { forwardRef } from 'react';
import { useId } from '@equinor/eds-utils';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { InputWrapper } from '../InputWrapper/InputWrapper.js';
import { Textarea } from '../Textarea/Textarea.js';
import { Input } from '../Input/Input.js';

/** Proxy component for working around typescript and element type switching */
const Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
  return props.$multiline ? /*#__PURE__*/jsx(Textarea, {
    ref: ref,
    ...props
  }) : /*#__PURE__*/jsx(Input, {
    ref: ref,
    ...props
  });
});
const TextField = /*#__PURE__*/forwardRef(function TextField({
  id: _id,
  label,
  meta,
  unit,
  helperText,
  placeholder,
  disabled,
  multiline = false,
  className,
  variant,
  inputIcon,
  helperIcon,
  style,
  rowsMax,
  textareaRef,
  inputRef,
  ...other
}, ref) {
  const id = useId(_id, 'input');
  const helperTextId = useId(null, 'helpertext');
  const hasRightAdornments = Boolean(unit || inputIcon);
  let fieldProps = {
    'aria-invalid': variant === 'error' || undefined,
    disabled,
    placeholder,
    id,
    variant,
    rightAdornments: hasRightAdornments && /*#__PURE__*/jsxs(Fragment, {
      children: [inputIcon, /*#__PURE__*/jsx("span", {
        children: unit
      })]
    }),
    rowsMax,
    ref: inputRef || textareaRef,
    $multiline: multiline,
    ...other
  };
  let helperProps = {
    id: null,
    text: helperText,
    icon: helperIcon,
    disabled
  };
  const containerProps = {
    ref,
    className,
    style: {
      width: '100%',
      ...style
    },
    color: variant
  };
  const labelProps = {
    htmlFor: id,
    label,
    meta,
    disabled
  };
  if (helperText) {
    fieldProps = {
      'aria-describedby': helperTextId,
      ...fieldProps
    };
    helperProps = {
      ...helperProps,
      id: helperTextId
    };
  }
  return /*#__PURE__*/jsx(InputWrapper, {
    helperProps: helperProps,
    labelProps: labelProps,
    ...containerProps,
    children: /*#__PURE__*/jsx(Field, {
      ...fieldProps
    })
  });
});

export { TextField };