@open-formulieren/formio-builder/lib/esm/components/formio/textfield.js

An opinionated Formio webform builder for Open Forms

import { jsxs as l, Fragment as a, jsx as o } from "react/jsx-runtime";
import j from "clsx";
import { useFormikContext as k, Field as T } from "formik";
import { useRef as $, useContext as b } from "react";
import { RenderContext as w } from "../../context.js";
import D from "../../utils/charcount.js";
import { useValidationErrors as N, ErrorList as O } from "../../utils/errors.js";
import { applyInputMask as P } from "../../utils/inputmask.js";
import V from "./component.js";
import q from "./description.js";
import { withMultiple as z } from "./multiple.js";
const A = ({
  name: e,
  label: h,
  required: x = !1,
  tooltip: p = "",
  description: n = "",
  showCharCount: F = !1,
  inputMask: s,
  onChange: r,
  childrenAfterField: v,
  ...t
}) => {
  const {
    getFieldProps: C,
    getFieldMeta: g
  } = k(), {
    value: i,
    onChange: E
  } = C(e), {
    touched: R
  } = g(e), {
    errors: y,
    hasErrors: I
  } = N(e), m = $(null), {
    bareInput: L
  } = b(w), c = `editform-${e}`;
  i === void 0 && t.value === void 0 && (t = {
    ...t,
    value: ""
  }), !t.value && s && !t.placeholder && (t.placeholder = P("", s));
  const d = /* @__PURE__ */ l(a, { children: [
    /* @__PURE__ */ o(T, { innerRef: m, name: e, id: c, as: "input", type: "text", className: j("form-control", {
      "is-invalid": I
    }), "data-testid": `input-${e}`, onChange: (u) => {
      E(u), r == null || r(u);
    }, ...t }),
    v
  ] }), M = m.current === document.activeElement, f = F && (R || M) && i && /* @__PURE__ */ o(D, { value: i, maxLength: t.maxLength });
  return L ? /* @__PURE__ */ l(a, { children: [
    d,
    f,
    /* @__PURE__ */ o(O, { errors: y })
  ] }) : /* @__PURE__ */ l(V, { type: "textfield", field: e, required: x, htmlId: c, label: h, tooltip: p, children: [
    /* @__PURE__ */ o("div", { children: d }),
    f,
    n && /* @__PURE__ */ o(q, { text: n })
  ] });
}, Z = z(A, "");
export {
  A as TextField,
  Z as TextFieldMultiple,
  Z as default
};