@spark-web/text-area/dist/spark-web-text-area.cjs.dev.js

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var css = require('@emotion/css');
var box = require('@spark-web/box');
var field = require('@spark-web/field');
var textInput = require('@spark-web/text-input');
var react = require('react');
var theme = require('@spark-web/theme');
var jsxRuntime = require('react/jsx-runtime');

function useTextAreaStyles(props) {
  var theme$1 = theme.useTheme();
  var _useInputStyles = textInput.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$1.sizing.medium,
    paddingTop: theme$1.spacing.small,
    paddingBottom: theme$1.spacing.small,
    resize: 'vertical'
  })];
}

var TextArea = /*#__PURE__*/react.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 = field.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__*/jsxRuntime.jsx(textInput.InputContainer, {
    children: /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread({}, boxProps), a11yProps), {}, {
      as: "textarea",
      className: css.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';

exports.TextArea = TextArea;