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

The React implementation of the Equinor Design System

import { forwardRef, useMemo } from 'react';
import * as Input_tokens from '../Input/Input.tokens.js';
import { input as input$1 } from '../Input/Input.tokens.js';
import { useAutoResize, mergeRefs } from '@equinor/eds-utils';
import { jsx } from 'react/jsx-runtime';
import { useInputField } from '../InputWrapper/useInputField.js';
import { InputWrapper } from '../InputWrapper/InputWrapper.js';
import { useEds } from '../EdsProvider/eds.context.js';
import { Input } from '../Input/Input.js';

const {
  input
} = Input_tokens;
const leftAdornmentStyles = {
  style: {
    alignItems: 'flex-start'
  }
};
const rightAdornmentStyles = {
  style: {
    alignItems: 'flex-start',
    pointerEvents: 'none'
  }
};
const Textarea = /*#__PURE__*/forwardRef(function Textarea({
  id,
  label,
  meta,
  helperText,
  placeholder,
  disabled,
  className,
  variant,
  inputIcon,
  helperIcon,
  style,
  rowsMax,
  ...other
}, ref) {
  const {
    ariaProps,
    containerProps,
    labelProps,
    helperProps
  } = useInputField({
    id,
    label,
    meta,
    helperText,
    helperIcon,
    variant,
    disabled,
    className,
    style
  });
  const {
    density
  } = useEds();
  const spacings = density === 'compact' ? input.modes.compact.spacings : input.spacings;
  const {
    lineHeight
  } = input$1.typography;
  const {
    top,
    bottom
  } = spacings;

  // Calculate maxHeight if rowsMax is provided
  // Using default fontSize of 16px for initial calculation
  // useAutoResize will handle actual resizing based on element's scrollHeight
  const maxHeight = rowsMax ? parseFloat(lineHeight) * 16 * rowsMax + parseInt(top) + parseInt(bottom) : null;
  const autoResizeRef = useAutoResize(maxHeight);
  const combinedRef = useMemo(() => mergeRefs(ref, autoResizeRef), [ref, autoResizeRef]);
  const fieldProps = {
    ...ariaProps,
    disabled,
    placeholder,
    variant,
    rightAdornments: inputIcon,
    rightAdornmentsProps: rightAdornmentStyles,
    leftAdornmentsProps: leftAdornmentStyles,
    as: 'textarea',
    ref: combinedRef,
    style: {
      height: 'auto'
    },
    ...other
  };
  return /*#__PURE__*/jsx(InputWrapper, {
    helperProps: helperProps,
    labelProps: labelProps,
    ...containerProps,
    children: /*#__PURE__*/jsx(Input, {
      ...fieldProps
    })
  });
});

export { Textarea };