@lanaco/lnc-react-ui/dist/TextAreaInput.js

React component library

import { jsx as k } from "react/jsx-runtime";
import * as x from "react";
import E, { forwardRef as U, useState as H, useEffect as I, useCallback as G } from "react";
import { d as Y } from "./index-Dt62UGku.js";
import { s as q } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as D, e as X, c as p, b as Z, f as J, i as K } from "./utils-BUdHa0nB.js";
import { _ as Q, u as ee } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
import { _ as te } from "./objectWithoutPropertiesLoose-DhwSMsjf.js";
import { i as re } from "./use-isomorphic-layout-effect.browser.esm-DERp5kr6.js";
const ne = q.div`
  & textarea {
    ${(e) => D(e.theme, "Input", e.size, "enabled")}
    min-height: ${(e) => X(e.theme, e.size)};
    background-color: ${(e) => p(
  e.theme,
  "Input",
  e.color,
  "enabled",
  "background"
)};
    border: 1px solid
      ${(e) => p(
  e.theme,
  "Input",
  e.focused === !0 ? "primary" : e.color,
  e.disabled === !0 ? "disabled" : "enabled",
  "border"
)};
    border-radius: ${(e) => Z(e.theme, "regular")};
    color: ${(e) => p(
  e.theme,
  "Input",
  e.focused === !0 ? "primary" : e.color,
  "enabled",
  "text"
)};
    caret-color: ${(e) => p(e.theme, "Input", e.color, "enabled", "caret")};
    overflow: ${(e) => e.collapseOnBlur && e.focused === !1 ? "hidden" : "auto"};
    transition: height 0.2s ease-out;
    padding: 0.563rem 0.75rem;
    min-width: 100%;
    max-width: 100%;
  }

  & textarea::placeholder {
    color: ${(e) => p(
  e.theme,
  "Input",
  e.color,
  "enabled",
  "placeholder"
)};
  }

  & textarea:read-only {
    cursor: default;
  }

  & textarea:focus {
    ${(e) => e.readOnly !== !0 ? J(e.theme) : "outline: none"}
  }

  & textarea:disabled {
    /* ${(e) => K(e.theme)}
     */
    ${(e) => `background-color: ${p(
  e.theme,
  "Input",
  e.color,
  "disabled",
  "background",
  "backgroundOpacity"
)};
        color: ${(t) => p(
  t.theme,
  "Input",
  t.color,
  "disabled",
  "text"
)};`}
  }
`;
var ae = function(t) {
  var n = E.useRef(t);
  return re(function() {
    n.current = t;
  }), n;
}, B = function(t, n) {
  if (typeof t == "function") {
    t(n);
    return;
  }
  t.current = n;
}, oe = function(t, n) {
  var r = E.useRef();
  return E.useCallback(function(a) {
    t.current = a, r.current && B(r.current, null), r.current = n, n && B(n, a);
  }, [n]);
}, M = {
  "min-height": "0",
  "max-height": "none",
  height: "0",
  visibility: "hidden",
  overflow: "hidden",
  position: "absolute",
  "z-index": "-1000",
  top: "0",
  right: "0",
  display: "block"
}, ie = function(t) {
  Object.keys(M).forEach(function(n) {
    t.style.setProperty(n, M[n], "important");
  });
}, O = ie, i = null, A = function(t, n) {
  var r = t.scrollHeight;
  return n.sizingStyle.boxSizing === "border-box" ? r + n.borderSize : r - n.paddingSize;
};
function de(e, t, n, r) {
  n === void 0 && (n = 1), r === void 0 && (r = 1 / 0), i || (i = document.createElement("textarea"), i.setAttribute("tabindex", "-1"), i.setAttribute("aria-hidden", "true"), O(i)), i.parentNode === null && document.body.appendChild(i);
  var a = e.paddingSize, m = e.borderSize, d = e.sizingStyle, u = d.boxSizing;
  Object.keys(d).forEach(function(f) {
    var S = f;
    i.style[S] = d[S];
  }), O(i), i.value = t;
  var o = A(i, e);
  i.value = t, o = A(i, e), i.value = "x";
  var c = i.scrollHeight - a, s = c * n;
  u === "border-box" && (s = s + a + m), o = Math.max(s, o);
  var g = c * r;
  return u === "border-box" && (g = g + a + m), o = Math.min(g, o), [o, c];
}
var V = function() {
}, ue = function(t, n) {
  return t.reduce(function(r, a) {
    return r[a] = n[a], r;
  }, {});
}, se = [
  "borderBottomWidth",
  "borderLeftWidth",
  "borderRightWidth",
  "borderTopWidth",
  "boxSizing",
  "fontFamily",
  "fontSize",
  "fontStyle",
  "fontWeight",
  "letterSpacing",
  "lineHeight",
  "paddingBottom",
  "paddingLeft",
  "paddingRight",
  "paddingTop",
  // non-standard
  "tabSize",
  "textIndent",
  // non-standard
  "textRendering",
  "textTransform",
  "width",
  "wordBreak",
  "wordSpacing",
  "scrollbarGutter"
], le = !!document.documentElement.currentStyle, ce = function(t) {
  var n = window.getComputedStyle(t);
  if (n === null)
    return null;
  var r = ue(se, n), a = r.boxSizing;
  if (a === "")
    return null;
  le && a === "border-box" && (r.width = parseFloat(r.width) + parseFloat(r.borderRightWidth) + parseFloat(r.borderLeftWidth) + parseFloat(r.paddingRight) + parseFloat(r.paddingLeft) + "px");
  var m = parseFloat(r.paddingBottom) + parseFloat(r.paddingTop), d = parseFloat(r.borderBottomWidth) + parseFloat(r.borderTopWidth);
  return {
    sizingStyle: r,
    paddingSize: m,
    borderSize: d
  };
}, fe = ce;
function W(e, t, n) {
  var r = ae(n);
  x.useLayoutEffect(function() {
    var a = function(d) {
      return r.current(d);
    };
    if (e)
      return e.addEventListener(t, a), function() {
        return e.removeEventListener(t, a);
      };
  }, []);
}
var he = function(t, n) {
  W(document.body, "reset", function(r) {
    t.current.form === r.target && n(r);
  });
}, ge = function(t) {
  W(window, "resize", t);
}, me = function(t) {
  W(document.fonts, "loadingdone", t);
}, ve = ["cacheMeasurements", "maxRows", "minRows", "onChange", "onHeightChange"], be = function(t, n) {
  var r = t.cacheMeasurements, a = t.maxRows, m = t.minRows, d = t.onChange, u = d === void 0 ? V : d, o = t.onHeightChange, c = o === void 0 ? V : o, s = te(t, ve), g = s.value !== void 0, f = x.useRef(null), S = oe(f, n), L = x.useRef(0), R = x.useRef(), v = function() {
    var l = f.current, w = r && R.current ? R.current : fe(l);
    if (w) {
      R.current = w;
      var y = de(w, l.value || l.placeholder || "x", m, a), b = y[0], $ = y[1];
      L.current !== b && (L.current = b, l.style.setProperty("height", b + "px", "important"), c(b, {
        rowHeight: $
      }));
    }
  }, T = function(l) {
    g || v(), u(l);
  };
  return x.useLayoutEffect(v), he(f, function() {
    if (!g) {
      var z = f.current.value;
      requestAnimationFrame(function() {
        var l = f.current;
        l && z !== l.value && v();
      });
    }
  }), ge(v), me(v), /* @__PURE__ */ x.createElement("textarea", Q({}, s, {
    onChange: T,
    ref: S
  }));
}, pe = /* @__PURE__ */ x.forwardRef(be);
const Fe = U((e, t) => {
  const {
    disabled: n,
    readOnly: r,
    value: a,
    defaultValue: m,
    debounceTime: d = 0,
    collapseOnBlur: u = !1,
    minRows: o = 0,
    maxRows: c,
    //----------------
    onChange: s,
    onBlur: g,
    onFocus: f,
    //----------------
    className: S = "",
    style: L = {},
    size: R = "small",
    color: v = "primary",
    ...T
  } = e, [z, l] = H(a || m || ""), w = ee(), [y, b] = H(!1), [$, _] = H(o), [N, C] = H(
    u ? o : c
  );
  I(() => {
    a != null && l(a);
  }, [a]), I(() => {
    _(o), u && y === !1 && C(o);
  }, [o, c]), I(() => {
    C(u ? y === !0 ? c : o : c);
  }, [u]);
  const j = G(
    Y((h, F) => P(h, F), d),
    [s]
  ), P = (h, F) => {
    s && (s == null || s(h, F));
  };
  return /* @__PURE__ */ k(
    ne,
    {
      style: L,
      className: S,
      theme: w,
      color: v,
      size: R,
      focused: y,
      disabled: n,
      readOnly: r,
      collapseOnBlur: u,
      children: /* @__PURE__ */ k(
        pe,
        {
          ref: t,
          disabled: n,
          value: z,
          readOnly: r,
          minRows: $,
          maxRows: N,
          onChange: (h) => {
            l(h.target.value), j(h, h.target.value);
          },
          onFocus: (h) => {
            b(!0), u && C(c), f == null || f(h);
          },
          onBlur: (h) => {
            b(!1), u && C(o), g == null || g(h);
          },
          ...T
        }
      )
    }
  );
});
export {
  Fe as default
};