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

Design system of Frontify

import { jsxs as E, jsx as w } from "react/jsx-runtime";
import { useState as y, useRef as N, useEffect as S, cloneElement as C } from "react";
import { EditableTextHelper as T } from "./lib/helper.es.js";
import { FOCUS_VISIBLE_STYLE as B } from "../../utilities/focusStyle.es.js";
import { merge as a } from "../../utilities/merge.es.js";
var D = /* @__PURE__ */ ((l) => (l.INPUT = "INPUT", l.LABEL = "LABEL", l))(D || {});
const R = ({
  onEditableSave: l,
  onModeChange: r,
  onAdditionalValueSave: b,
  children: u,
  options: e,
  isOverflowing: m = !1,
  "data-test-id": P = "editable-node-container"
}) => {
  const d = T.getLabel(u), [x, I] = y(d), [c, n] = y(
    "LABEL"
    /* LABEL */
  ), [L, U] = y(), f = N(null), g = (t) => I(t.target.value), h = (t) => {
    n(
      "LABEL"
      /* LABEL */
    ), r && r(
      "LABEL"
      /* LABEL */
    ), e != null && e.additionalValues && b && b(e.additionalValues, t.target.value), l && l(t.target.value);
  }, s = (t) => () => {
    I(t), n(
      "INPUT"
      /* INPUT */
    ), r && r(
      "INPUT"
      /* INPUT */
    );
  }, k = (t) => {
    t.key === "Enter" && h(t);
  }, v = (t) => h(t);
  S(() => n(
    (e == null ? void 0 : e.mode) ?? "LABEL"
    /* LABEL */
  ), [e == null ? void 0 : e.mode]);
  const F = e != null && e.enableDoubleClick ? {
    onDoubleClick: s(d),
    onKeyPress: (t) => t.key === "Enter" && s(d)()
  } : {
    onClick: s(d)
  };
  S(() => {
    var t;
    i.current && U(T.copyStyles(i.current)), c === "INPUT" && ((t = f.current) == null || t.select());
  }, [c, f, u]);
  const i = N(), A = u && C(u, {
    ref: i
  });
  return /* @__PURE__ */ E(
    "div",
    {
      "data-test-id": P,
      className: a(["tw-relative tw-h-full", (e == null ? void 0 : e.removeBoxPadding) === !0 ? "" : "tw-p-2"]),
      children: [
        c === "INPUT" ? /* @__PURE__ */ w(
          "div",
          {
            className: a([
              "tw-flex tw-items-center",
              (e == null ? void 0 : e.isSlimInputField) === !0 ? "-tw-translate-x-[0.315rem] -tw-translate-y-[0.07rem]" : "-tw-translate-x-[0.81rem] -tw-translate-y-[0.56rem]"
            ]),
            children: /* @__PURE__ */ E(
              "div",
              {
                "data-test-id": "editable-input",
                className: a(["tw-relative", m && "tw-w-full tw-flex tw-items-center"]),
                children: [
                  /* @__PURE__ */ w(
                    "input",
                    {
                      ref: f,
                      type: "text",
                      className: a([
                        (e == null ? void 0 : e.isSlimInputField) === !0 ? "focus-visible:tw-outline-none" : B,
                        "tw-absolute tw-w-full tw-text-text tw-border tw-rounded tw-bg-base tw-border-solid",
                        (e == null ? void 0 : e.isSlimInputField) === !0 ? "tw-py-0 tw-px-1" : "tw-px-3 tw-py-2"
                      ]),
                      style: L,
                      value: x,
                      onChange: g,
                      onKeyDown: k,
                      onBlur: v
                    }
                  ),
                  /* @__PURE__ */ w(
                    "span",
                    {
                      "aria-hidden": "true",
                      className: a([
                        "tw-rounded tw-px-4 tw-py-2 tw-bg-base tw-truncate",
                        (e == null ? void 0 : e.isSlimInputField) === !0 && "tw-py-0 tw-px-2",
                        m && "tw-w-0"
                      ]),
                      style: L,
                      children: x
                    }
                  )
                ]
              }
            )
          }
        ) : null,
        /* @__PURE__ */ w(
          "button",
          {
            style: { display: c === "INPUT" ? "none" : "flex" },
            className: a([m && "tw-w-full", "tw-h-full tw-items-center", B]),
            ...F,
            "data-test-id": "node-link-name",
            "aria-pressed": "false",
            children: A
          }
        )
      ]
    }
  );
};
R.displayName = "FondueEditableText";
export {
  D as EditableMode,
  R as EditableText
};
//# sourceMappingURL=EditableText.es.js.map