@frontify/fondue/dist/components/Textarea/Textarea.es.js

Design system of Frontify

import { jsxs as F, jsx as u } from "react/jsx-runtime";
import { useFocusRing as A } from "@react-aria/focus";
import { useEffect as N } from "react";
import B from "react-textarea-autosize";
import { useMemoizedId as H } from "../../hooks/useMemoizedId.es.js";
import { FOCUS_STYLE as J } from "../../utilities/focusStyle.es.js";
import { InputStyles as i, GetStatusIcon as Q, InputActions as W, InputExtraActions as X } from "../../utilities/input.es.js";
import { merge as b } from "../../utilities/merge.es.js";
import { useForwardedRef as Z } from "../../utilities/useForwardedRef.es.js";
import { validationClassMap as K, Validation as l } from "../../utilities/validation.es.js";
const ee = ({
  autocomplete: R,
  autosize: f = !1,
  clearable: n = !1,
  decorator: m,
  defaultValue: S,
  disabled: p = !1,
  extraActions: c = void 0,
  focusOnMount: v = !1,
  hugWidth: y,
  id: $,
  minRows: d,
  maxRows: j,
  placeholder: k,
  readOnly: w,
  resizable: E = !1,
  required: O,
  selectable: V = !1,
  status: s = l.Default,
  value: a,
  onBlur: I,
  onChange: h,
  onEnterPressed: C,
  onKeyDown: g,
  onFocus: z,
  "data-test-id": o = "fondue-textarea",
  ...P
}) => {
  const G = f ? B : "textarea", t = Z(null), x = p || w, { isFocusVisible: L, focusProps: M } = A({
    isTextInput: !0,
    within: !0
  }), D = () => {
    if (t.current) {
      const { value: e } = t.current;
      h == null || h(e);
    }
  }, T = (e) => {
    var r;
    C && e.key === "Enter" ? C((r = t.current) == null ? void 0 : r.value) : g == null || g(e);
  }, U = () => {
    t.current && (t.current.value = "", D());
  };
  N(() => {
    var e;
    v && ((e = t.current) == null || e.focus());
  }, [v, t]), N(() => {
    var r;
    const e = a !== ((r = t.current) == null ? void 0 : r.value);
    t.current && a && !e && (t.current.value = a);
  }, [a, t]);
  const Y = { minRows: d, maxRows: j }, _ = () => {
    let e = 1;
    const r = c ? c.length : 0;
    switch (!0) {
      case (r > 0 && n && s !== l.Default):
        return e = r + 4.5, `${e}rem`;
      case (r > 0 && (n || s !== l.Default)):
        return e = r + 3, `${e}rem`;
      case r > 0:
        return e += r * 1.5, `${e}rem`;
      case (n && s !== l.Default):
        return "3.5rem";
      case (s !== l.Default || n):
        return "2.5rem";
      default:
        return e;
    }
  }, q = () => !x && E ? "tw-resize-y" : "tw-resize-none";
  return /* @__PURE__ */ F("div", { className: "tw-relative", children: [
    m ? /* @__PURE__ */ u(
      "div",
      {
        className: b([
          "tw-absolute tw-top-[0.7rem] tw-left-[0.7rem] tw-z-10",
          p ? i.disabled : "",
          w ? i.readOnly : ""
        ]),
        "data-test-id": `${o}-decorator`,
        children: m
      }
    ) : null,
    /* @__PURE__ */ u("span", { ...M, children: /* @__PURE__ */ u(
      G,
      {
        ...f ? Y : { rows: d },
        autoComplete: R ? "on" : "off",
        disabled: p,
        id: H($),
        readOnly: w,
        ref: t,
        required: O,
        defaultValue: S,
        value: a,
        placeholder: k,
        onBlur: I,
        onChange: D,
        onClick: () => {
          var e;
          return (e = t.current) == null ? void 0 : e.focus();
        },
        onFocus: (e) => {
          V && e.target.select(), z && z(e);
        },
        onKeyDown: T,
        "data-test-id": o,
        className: b([
          y ? "" : i.width,
          d ? "" : i.height,
          i.disabled,
          i.readOnly,
          i.element,
          i.base,
          i.focus,
          i.hover,
          L && J,
          s !== l.Default && K[s],
          m ? "tw-pl-[2rem]" : "",
          q()
        ]),
        style: { paddingRight: _() },
        ...P
      }
    ) }),
    /* @__PURE__ */ F(
      "span",
      {
        className: b([
          "tw-absolute tw-top-[0.5rem] tw-right-[0rem] tw-flex tw-items-center tw-justify-between tw-w-auto",
          f ? "tw-pr-2" : "tw-pr-5"
        ]),
        children: [
          /* @__PURE__ */ u(
            W,
            {
              clearable: n,
              disabled: x,
              callbacks: { clearable: U },
              dataTestId: o
            }
          ),
          c ? /* @__PURE__ */ u(X, { actions: c, disabled: x, dataTestId: o }) : null,
          s ? Q(s, o) : null
        ]
      }
    )
  ] });
};
ee.displayName = "FondueTextarea";
export {
  ee as Textarea
};
//# sourceMappingURL=Textarea.es.js.map