@atlaskit/textarea/dist/es2019/text-area.js

A text area lets users enter long form text which spans over multiple lines.

/* text-area.tsx generated by @compiled/babel-plugin v3.0.2 */
import _extends from "@babel/runtime/helpers/extends";
import "./text-area.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
import { fg } from '@atlaskit/platform-feature-flags/fg';
const packageName = "@atlaskit/textarea";
const packageVersion = "10.2.3";
const analyticsParams = {
  componentName: 'textArea',
  packageName,
  packageVersion
};
const lineHeightBase = 20;
const lineHeightCompact = 16;
const compactVerticalPadding = 2;
const verticalPadding = 6;
const transitionDuration = '0.2s';
const borderWidth = 2;
const baseStyles = null;
const finessePlaceholderStyles = null;
const appearanceStyles = {
  standard: "_1dqonqa1 _kp82rsbi _1ltx1j9a _1bqsbk0g _z1pv187o _19wtrsbi _12yml4ek _1l02v77o _11zpv77o _141f1v6z _daj71v6z _olc612x7 _14ji12x7 _7ba01v6z _1kod1v6z _858u1v1w _jomrr01l _7ehivyy1 _186j1v1w _qu18187o",
  subtle: "_1dqonqa1 _kp821j28 _1ltx1j28 _19wtrsbi _12yml4ek _1l02v77o _11zpv77o _141f1v6z _daj71v6z _olc612x7 _14ji12x7 _1kod1v6z _7ba01v6z _858u1v1w _jomrr01l _7ehivyy1",
  none: "_1dqoglyw _kp821j28 _1ltx1j28 _19wt1j28 _12ym1j28 _1l02v77o _daj712x7 _11zpv77o _141f12x7 _olc612x7 _1kod12x7 _14ji12x7 _7ba012x7 _858u1j28 _jomr1j28 _7ehi3sij"
};

// iOS Safari automatically zooms into form inputs on focus when the font size is less than 16px.
// To prevent this zoom behaviour on mobile devices, the textarea uses font.body.large (16px) by default,
// then switches to the smaller font.body on screens wider than 30rem (desktop).
// @see: https://medium.com/@rares.popescu/2-ways-to-avoid-the-automatic-zoom-in-on-input-fields-8a71479e542e

const fontStyles = {
  default: "_11c81d4k _1tn2fhey",
  monospace: "_11c81d4k _ect4zzfg _1tn2fhey _14md1vhz"
};
const resizeStyles = {
  horizontal: "_14zg1e08",
  vertical: "_14zg1e54",
  auto: "_14zg1hrf",
  smart: "_14zgglyw",
  none: "_14zgglyw"
};
const setSmartHeight = el => {
  // Always reset height to auto before calculating new height
  el.style.height = 'auto';
  const borderHeight = borderWidth;
  const paddingBoxHeight = el.scrollHeight;
  const borderBoxHeight = paddingBoxHeight + borderHeight * 2;
  el.style.height = `${borderBoxHeight}px`;
};
const InnerTextArea = /*#__PURE__*/forwardRef((props, ref) => {
  const ourRef = useRef(null);
  const {
    resize = 'smart',
    appearance = 'standard',
    isCompact = false,
    isRequired = false,
    isReadOnly = false,
    isDisabled = false,
    isInvalid = false,
    isMonospaced = false,
    minimumRows = 2,
    testId,
    maxHeight = '50vh',
    onBlur,
    onFocus,
    onChange,
    value,
    style,
    ...rest
  } = props;
  const borderHeight = useMemo(() => appearance === 'none' ? 2 : 1, [appearance]);
  useEffect(() => {
    const el = ourRef.current;
    if (resize === 'smart' && el) {
      setSmartHeight(el);
    }
  }, [resize, value]);
  const onBlurWithAnalytics = usePlatformLeafEventHandler({
    fn: event => {
      onBlur && onBlur(event);
    },
    action: 'blurred',
    ...analyticsParams
  });
  const onFocusWithAnalytics = usePlatformLeafEventHandler({
    fn: event => {
      onFocus && onFocus(event);
    },
    action: 'focused',
    ...analyticsParams
  });
  const getTextAreaRef = elementRef => {
    ourRef.current = elementRef;
    if (ref && typeof ref === 'object') {
      ref.current = elementRef;
    }
    if (ref && typeof ref === 'function') {
      ref(elementRef);
    }
  };
  const handleOnChange = useCallback(e => {
    const el = ourRef.current;
    if (resize === 'smart' && el) {
      setSmartHeight(el);
    }
    onChange && onChange(e);
  }, [onChange, resize]);
  const controlProps = {
    'data-invalid': isInvalid ? isInvalid : undefined,
    'data-compact': isCompact ? isCompact : undefined,
    'data-testid': testId ? testId : undefined
  };
  const compactMinHeightStyles = null;
  return /*#__PURE__*/React.createElement("textarea", _extends({}, controlProps, {
    value: value,
    disabled: isDisabled,
    readOnly: isReadOnly,
    required: isRequired,
    ref: getTextAreaRef,
    onChange: handleOnChange,
    onBlur: onBlurWithAnalytics,
    onFocus: onFocusWithAnalytics,
    rows: minimumRows
  }, rest, {
    className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1osq _2rko1qi0 _11c8fhey _12ji1r31 _1qu2glyw _12y31o36 _1reo1wug _18m91wug _v564r5cv _189ee4h9 _1e0c1ule _vchhusvi _1bsb1osq _1ul9idpf _p12f1osq _kqswh2mm _syazi7uo _slp31hna _153g1bqt _usy41j9a _1a2sizbr _vbqb1gmx _j5dh13gf _cfjqkb7n _k3o7n7od _1goxglyw _13xeglyw _1fra1bqt _ibjdl4ek _6zpvizbr _19k0187o _1idr1rpy _1lep1gmx _nmhq1fiz _1n388sxn _1luh1v1w _ndzbr01l _1vj0vyy1", fg('platform-dst-tokens-finesse') && "_1idrazsu", appearanceStyles[appearance], fontStyles[isMonospaced ? 'monospace' : 'default'], resizeStyles[resize], "_uzq71i7i _16lwuel1"]),
    style: {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
      ...style,
      maxHeight,
      "--_6ny3x7": ix(lineHeightCompact * minimumRows + compactVerticalPadding * 2 + borderHeight * 2, "px"),
      "--_eorxnz": ix(lineHeightBase * minimumRows + verticalPadding * 2 + borderHeight * 2, "px")
    }
  }));
});

/**
 * __Text area__
 *
 * A text area lets users enter long form text which spans over multiple lines.
 *
 * - [Examples](https://atlassian.design/components/textarea/examples)
 * - [Code](https://atlassian.design/components/textarea/code)
 * - [Usage](https://atlassian.design/components/textarea/usage)
 */
const TextArea = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(InnerTextArea, _extends({
  ref: ref
}, props))));
TextArea.displayName = 'TextArea';
export default TextArea;