@open-formulieren/formio-builder/dist/components/formio/textarea.js

An opinionated Formio webform builder for Open Forms

import { jsx as r, jsxs as x, Fragment as T } from "react/jsx-runtime";
import { clsx as j } from "clsx";
import { useFormikContext as A, Field as H } from "formik";
import { useRef as I, useContext as L, useState as O, useLayoutEffect as W } from "react";
import { RenderContext as D } from "../../context.js";
import N from "../../utils/charcount.js";
import { useValidationErrors as P, ErrorList as V } from "../../utils/errors.js";
import q from "./component.js";
import z from "./description.js";
import { withMultiple as B } from "./multiple.js";
const G = ({
  name: e,
  label: y,
  required: C = !1,
  tooltip: g = "",
  description: c = "",
  showCharCount: v = !1,
  autoExpand: d = !1,
  onChange: s,
  onFocus: l,
  onBlur: f,
  ...o
}) => {
  const {
    getFieldProps: F,
    getFieldMeta: $
  } = A(), {
    value: i,
    onChange: R,
    onBlur: b
  } = F(e), {
    touched: k
  } = $(e), {
    errors: w,
    hasErrors: E
  } = P(e), a = I(null), {
    bareInput: M
  } = L(D), [S, n] = O(!1);
  W(() => {
    const t = a.current;
    if (d && t) {
      const h = window.getComputedStyle(t);
      t.style.height = "inherit", t.style.height = `calc(${t.scrollHeight}px + ${h.borderTopWidth} + ${h.borderBottomWidth})`;
    }
  }, [d, a, i]);
  const m = `editform-${e}`;
  i === void 0 && o.value === void 0 && (o = {
    ...o,
    value: ""
  });
  const u = /* @__PURE__ */ r(H, { innerRef: a, name: e, id: m, as: "textarea", type: "textarea", className: j("form-control", {
    "is-invalid": E
  }), "data-testid": `input-${e}`, onChange: (t) => {
    R(t), s == null || s(t);
  }, onFocus: (t) => {
    n(!0), l == null || l(t);
  }, onBlur: (t) => {
    b(t), n(!1), f == null || f(t);
  }, ...o }), p = v && (k || S) && i && /* @__PURE__ */ r(N, { value: i });
  return M ? /* @__PURE__ */ x(T, { children: [
    u,
    p,
    /* @__PURE__ */ r(V, { errors: w })
  ] }) : /* @__PURE__ */ x(q, { type: "textarea", field: e, required: C, htmlId: m, label: y, tooltip: g, children: [
    /* @__PURE__ */ r("div", { children: u }),
    p,
    c && /* @__PURE__ */ r(z, { text: c })
  ] });
}, rt = B(G, "");
export {
  G as TextArea,
  rt as TextAreaMultiple,
  rt as default
};