@spark-web/text-area/dist/spark-web-text-area.esm.js

--- title: Text Area storybookPath: forms-textarea--default isExperimentalPackage: false ---

import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
import { css } from '@emotion/css';
import { Box } from '@spark-web/box';
import { useFieldContext } from '@spark-web/field';
import { useInputStyles, InputContainer } from '@spark-web/text-input';
import { forwardRef } from 'react';
import { useTheme } from '@spark-web/theme';
import { jsx } from 'react/jsx-runtime';

function useTextAreaStyles(props) {
  var theme = useTheme();
  var _useInputStyles = useInputStyles(props),
    _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
    boxProps = _useInputStyles2[0],
    inputStyles = _useInputStyles2[1];
  return [boxProps, _objectSpread(_objectSpread({}, inputStyles), {}, {
    // Text inputs have a fixed height, so we need to override it back to `auto`
    height: 'auto',
    minHeight: theme.sizing.medium,
    paddingTop: theme.spacing.small,
    paddingBottom: theme.spacing.small,
    resize: 'vertical'
  })];
}

var TextArea = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
  var data = _ref.data,
    defaultValue = _ref.defaultValue,
    name = _ref.name,
    onBlur = _ref.onBlur,
    onChange = _ref.onChange,
    placeholder = _ref.placeholder,
    required = _ref.required,
    value = _ref.value;
  var _useFieldContext = useFieldContext(),
    _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
    _useFieldContext2$ = _useFieldContext2[0],
    disabled = _useFieldContext2$.disabled,
    invalid = _useFieldContext2$.invalid,
    a11yProps = _useFieldContext2[1];
  var _useTextAreaStyles = useTextAreaStyles({
      disabled: disabled,
      invalid: invalid
    }),
    _useTextAreaStyles2 = _slicedToArray(_useTextAreaStyles, 2),
    boxProps = _useTextAreaStyles2[0],
    textAreaStyles = _useTextAreaStyles2[1];
  return /*#__PURE__*/jsx(InputContainer, {
    children: /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread(_objectSpread({}, boxProps), a11yProps), {}, {
      as: "textarea",
      className: css(textAreaStyles),
      data: data,
      defaultValue: defaultValue,
      disabled: disabled,
      name: name,
      onBlur: onBlur,
      onChange: onChange,
      placeholder: placeholder,
      ref: forwardedRef,
      required: required,
      rows: 3,
      value: value
    }))
  });
});
TextArea.displayName = 'TextArea';

export { TextArea };