@vectara/vectara-ui/lib/components/form/textArea/TextArea.js

Vectara's design system, codified as a React and Sass component library

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useLayoutEffect, useRef } from "react";
import classNames from "classnames";
export const VuiTextArea = forwardRef((_a, ref) => {
    var { className, fullWidth, isInvalid, resizable, autoGrow } = _a, rest = __rest(_a, ["className", "fullWidth", "isInvalid", "resizable", "autoGrow"]);
    const classes = classNames("vuiTextArea", {
        "vuiTextArea-isInvalid": isInvalid,
        "vuiTextArea--fullWidth": fullWidth,
        "vuiTextArea--autoGrow": autoGrow
    }, className);
    const style = Object.assign(Object.assign({}, rest.style), { resize: resizable ? "vertical" : "none" });
    const internalRef = useRef(null);
    const setRefs = (el) => {
        internalRef.current = el;
        if (typeof ref === "function")
            ref(el);
        else if (ref)
            ref.current = el;
    };
    // Auto-grow the textarea to fit its content. Reset to "auto" first so
    // scrollHeight reflects the natural height after deletions, not the
    // previously-set inline height.
    useLayoutEffect(() => {
        if (!autoGrow)
            return;
        const el = internalRef.current;
        if (!el)
            return;
        el.style.height = "auto";
        // scrollHeight excludes borders, but with box-sizing: border-box the
        // assigned height includes them — without this offset the content would
        // overflow by the border width and show a spurious scrollbar.
        const borderY = el.offsetHeight - el.clientHeight;
        el.style.height = `${el.scrollHeight + borderY}px`;
    }, [autoGrow, rest.value]);
    return _jsx("textarea", Object.assign({}, rest, { ref: setRefs, className: classes, style: style }));
});