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

The React implementation of the Equinor Design System

import { forwardRef, useState, useCallback } 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 { Input } from '../Input/Input.js';
import { useEds } from '../EdsProvider/eds.context.js';

const {
  input
} = Input_tokens;
const Textarea = /*#__PURE__*/forwardRef(function Textarea({
  variant,
  disabled = false,
  type = 'text',
  rowsMax,
  ...other
}, ref) {
  const [textareaEl, setTextareaEl] = useState(null);
  const {
    density
  } = useEds();
  const spacings = density === 'compact' ? input.modes.compact.spacings : input.spacings;
  const {
    lineHeight
  } = input$1.typography;
  const {
    top,
    bottom
  } = spacings;
  let fontSize = 16;
  if (textareaEl) {
    fontSize = parseInt(window.getComputedStyle(textareaEl).fontSize);
  }
  const padding = parseInt(top) + parseInt(bottom);
  const maxHeight = parseFloat(lineHeight) * fontSize * rowsMax + padding;
  useAutoResize(textareaEl, rowsMax ? maxHeight : null);
  const combinedRef = useCallback(() => mergeRefs(ref, setTextareaEl), [setTextareaEl, ref])();
  const inputProps = {
    ref: combinedRef,
    type,
    disabled,
    variant,
    ...other
  };
  const leftAdornmentStyles = {
    style: {
      alignItems: 'flex-start'
    }
  };
  const rigthAdornmentStyles = {
    style: {
      alignItems: 'flex-start',
      pointerEvents: 'none'
    }
  };
  return /*#__PURE__*/jsx(Input, {
    as: "textarea",
    rightAdornmentsProps: rigthAdornmentStyles,
    leftAdornmentsProps: leftAdornmentStyles,
    style: {
      height: 'auto'
    },
    ...inputProps
  });
});

export { Textarea };