@lanaco/lnc-react-ui 3.11.35 → 4.0.2

package/dist/TextAreaInput.js

@@ -0,0 +1,320 @@
+import { jsx as W } from "react/jsx-runtime";
+import { P as o } from "./index-Ds9PUTwb.js";
+import * as v from "react";
+import Y, { useRef as D, useCallback as _, useState as H, useEffect as $ } from "react";
+import { d as X } from "./index-D5vEbKUT.js";
+import { n as Z } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { a as q, f as J, b as z, c as K, h as Q, g as ee } from "./utils-DEke8iwo.js";
+import { _ as te, u as re } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+import { _ as ne } from "./objectWithoutPropertiesLoose-DwEN6RBQ.js";
+import { i as ae } from "./use-isomorphic-layout-effect.browser.esm-DERp5kr6.js";
+const oe = Z.div`
+  & textarea {
+    ${(e) => q(e.theme, "Input", e.size, "enabled")}
+    min-height: ${(e) => J(e.theme, e.size)};
+    background-color: ${(e) => z(
+  e.theme,
+  "Input",
+  e.color,
+  "enabled",
+  "background"
+)};
+    border: 1px solid
+      ${(e) => z(
+  e.theme,
+  "Input",
+  e.focused === !0 ? "primary" : e.color,
+  e.disabled === !0 ? "disabled" : "enabled",
+  "border"
+)};
+    border-radius: ${(e) => K(e.theme, "regular")};
+    color: ${(e) => z(
+  e.theme,
+  "Input",
+  e.focused === !0 ? "primary" : e.color,
+  "enabled",
+  "text"
+)};
+    caret-color: ${(e) => z(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) => z(
+  e.theme,
+  "Input",
+  e.color,
+  "enabled",
+  "placeholder"
+)};
+  }
+
+  & textarea:read-only {
+    cursor: default;
+  }
+
+  & textarea:focus {
+    ${(e) => e.readOnly !== !0 ? Q(e.theme) : "outline: none"}
+  }
+
+  & textarea:disabled {
+    ${(e) => ee(e.theme)}
+  }
+`;
+var ie = function(t) {
+  var r = v.useRef(t);
+  return ae(function() {
+    r.current = t;
+  }), r;
+}, B = function(t, r) {
+  if (typeof t == "function") {
+    t(r);
+    return;
+  }
+  t.current = r;
+}, de = function(t, r) {
+  var n = D();
+  return _(function(a) {
+    t.current = a, n.current && B(n.current, null), n.current = r, r && B(r, a);
+  }, [r]);
+}, O = {
+  "min-height": "0",
+  "max-height": "none",
+  height: "0",
+  visibility: "hidden",
+  overflow: "hidden",
+  position: "absolute",
+  "z-index": "-1000",
+  top: "0",
+  right: "0",
+  display: "block"
+}, ue = function(t) {
+  Object.keys(O).forEach(function(r) {
+    t.style.setProperty(r, O[r], "important");
+  });
+}, k = ue, d = null, M = function(t, r) {
+  var n = t.scrollHeight;
+  return r.sizingStyle.boxSizing === "border-box" ? n + r.borderSize : n - r.paddingSize;
+};
+function se(e, t, r, n) {
+  r === void 0 && (r = 1), n === void 0 && (n = 1 / 0), d || (d = document.createElement("textarea"), d.setAttribute("tabindex", "-1"), d.setAttribute("aria-hidden", "true"), k(d)), d.parentNode === null && document.body.appendChild(d);
+  var a = e.paddingSize, h = e.borderSize, s = e.sizingStyle, S = s.boxSizing;
+  Object.keys(s).forEach(function(g) {
+    var m = g;
+    d.style[m] = s[m];
+  }), k(d), d.value = t;
+  var i = M(d, e);
+  d.value = t, i = M(d, e), d.value = "x";
+  var u = d.scrollHeight - a, l = u * r;
+  S === "border-box" && (l = l + a + h), i = Math.max(l, i);
+  var c = u * n;
+  return S === "border-box" && (c = c + a + h), i = Math.min(c, i), [i, u];
+}
+var V = function() {
+}, le = function(t, r) {
+  return t.reduce(function(n, a) {
+    return n[a] = r[a], n;
+  }, {});
+}, ce = [
+  "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"
+], fe = !!document.documentElement.currentStyle, he = function(t) {
+  var r = window.getComputedStyle(t);
+  if (r === null)
+    return null;
+  var n = le(ce, r), a = n.boxSizing;
+  if (a === "")
+    return null;
+  fe && a === "border-box" && (n.width = parseFloat(n.width) + parseFloat(n.borderRightWidth) + parseFloat(n.borderLeftWidth) + parseFloat(n.paddingRight) + parseFloat(n.paddingLeft) + "px");
+  var h = parseFloat(n.paddingBottom) + parseFloat(n.paddingTop), s = parseFloat(n.borderBottomWidth) + parseFloat(n.borderTopWidth);
+  return {
+    sizingStyle: n,
+    paddingSize: h,
+    borderSize: s
+  };
+}, ge = he;
+function A(e, t, r) {
+  var n = ie(r);
+  v.useLayoutEffect(function() {
+    var a = function(s) {
+      return n.current(s);
+    };
+    if (e)
+      return e.addEventListener(t, a), function() {
+        return e.removeEventListener(t, a);
+      };
+  }, []);
+}
+var me = function(t) {
+  A(window, "resize", t);
+}, be = function(t) {
+  A(document.fonts, "loadingdone", t);
+}, pe = ["cacheMeasurements", "maxRows", "minRows", "onChange", "onHeightChange"], ve = function(t, r) {
+  var n = t.cacheMeasurements, a = t.maxRows, h = t.minRows, s = t.onChange, S = s === void 0 ? V : s, i = t.onHeightChange, u = i === void 0 ? V : i, l = ne(t, pe), c = l.value !== void 0, g = v.useRef(null), m = de(g, r), C = v.useRef(0), R = v.useRef(), x = function() {
+    var b = g.current, y = n && R.current ? R.current : ge(b);
+    if (y) {
+      R.current = y;
+      var T = se(y, b.value || b.placeholder || "x", h, a), p = T[0], L = T[1];
+      C.current !== p && (C.current = p, b.style.setProperty("height", p + "px", "important"), u(p, {
+        rowHeight: L
+      }));
+    }
+  }, I = function(b) {
+    c || x(), S(b);
+  };
+  return v.useLayoutEffect(x), me(x), be(x), /* @__PURE__ */ v.createElement("textarea", te({}, l, {
+    onChange: I,
+    ref: m
+  }));
+}, xe = /* @__PURE__ */ v.forwardRef(ve);
+const ye = Y.forwardRef((e, t) => {
+  const {
+    disabled: r,
+    readOnly: n,
+    value: a,
+    defaultValue: h,
+    debounceTime: s = 180,
+    type: S = "textarea",
+    collapseOnBlur: i = !1,
+    minRows: u = 0,
+    maxRows: l,
+    //----------------
+    onChange: c,
+    onBlur: g,
+    onFocus: m,
+    //----------------
+    className: C = "",
+    style: R = {},
+    size: x = "small",
+    color: I = "primary",
+    ...E
+  } = e, [b, y] = H(a || h || ""), T = re(), [p, L] = H(!1), [N, j] = H(u), [P, w] = H(
+    i ? u : l
+  );
+  $(() => {
+    a != null && y(a);
+  }, [a]), $(() => {
+    j(u), i && p === !1 && w(u);
+  }, [u, l]), $(() => {
+    w(i ? p === !0 ? l : u : l);
+  }, [i]);
+  const U = _(
+    X((f, F) => G(f, F), s),
+    [c]
+  ), G = (f, F) => {
+    c && (c == null || c(f, F));
+  };
+  return /* @__PURE__ */ W(
+    oe,
+    {
+      style: R,
+      className: C,
+      theme: T,
+      color: I,
+      size: x,
+      focused: p,
+      disabled: r,
+      readOnly: n,
+      collapseOnBlur: i,
+      children: /* @__PURE__ */ W(
+        xe,
+        {
+          ref: t,
+          disabled: r,
+          value: b,
+          readOnly: n,
+          minRows: N,
+          maxRows: P,
+          onChange: (f) => {
+            y(f.target.value), U(f, f.target.value);
+          },
+          onFocus: (f) => {
+            L(!0), i && w(l), m == null || m(f);
+          },
+          onBlur: (f) => {
+            L(!1), i && w(u), g == null || g(f);
+          },
+          ...E
+        }
+      )
+    }
+  );
+});
+ye.propTypes = {
+  id: o.string,
+  defaultValue: o.string,
+  value: o.string,
+  disabled: o.bool,
+  readOnly: o.bool,
+  debounceTime: o.number,
+  placeholder: o.string,
+  tabIndex: o.number,
+  /**
+   * Defines whether the textarea will collapse to its original size after it loses focus.
+   */
+  collapseOnBlur: o.bool,
+  /**
+   * Minimum number of rows to show.
+   */
+  minRows: o.number,
+  /**
+   * Maximum number of rows to be shown before scroller appears.
+   */
+  maxRows: o.number,
+  /**
+   * `(event, value) => void`
+   */
+  onChange: o.func,
+  /**
+   * `(event) => void`
+   */
+  onBlur: o.func,
+  /**
+   * `(event) => void`
+   */
+  onFocus: o.func,
+  //----------------
+  className: o.string,
+  style: o.object,
+  size: o.oneOf(["small", "medium", "large"]),
+  color: o.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+export {
+  ye as default
+};

package/dist/TextInput.cjs

@@ -0,0 +1,45 @@
+"use strict";const d=require("react/jsx-runtime"),t=require("./index-DXnSjbfJ.cjs"),s=require("react"),B=require("./index-BjdOz5Ok.cjs"),c=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),n=require("./utils-hdRGTsQ7.cjs"),F=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),D=c.newStyled.div`
+  display: flex;
+  align-items: center;
+
+  min-height: ${e=>n.getSizeValueWithUnits(e.theme,e.size)};
+  max-height: ${e=>n.getSizeValueWithUnits(e.theme,e.size)};
+  background-color: ${e=>n.getColorRgbaValue(e.theme,"Input",e.color,"enabled","background")};
+  border: 1px solid
+    ${e=>n.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,e.disabled===!0?"disabled":"enabled","border")};
+  border-radius: ${e=>n.getBorderRadiusValueWithUnits(e.theme,"regular")};
+
+  ${e=>e.focused&&e.readOnly!==!0?n.getOutlineCss(e.theme):""}
+  ${e=>e.disabled===!0?n.getDisabledStateCss(e.theme):""}
+`,S=c.newStyled.span`
+  padding: 0 12px;
+  color: ${e=>n.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","prefix")};
+`,E=c.newStyled(S)``,A=c.newStyled.input`
+  background: none;
+  border: none;
+  outline: none;
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+  width: 100%;
+
+  ${e=>n.getComponentTypographyCss(e.theme,"Input",e.size,"enabled")}
+  min-height: ${e=>n.getSizeValueWithUnits(e.theme,e.size)};
+  max-height: ${e=>n.getSizeValueWithUnits(e.theme,e.size)};
+  color: ${e=>n.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","text")};
+  caret-color: ${e=>n.getColorRgbaValue(e.theme,"Input",e.color,"enabled","caret")};
+  padding-right: ${e=>e.suffix?"0":"0.75rem"};
+  padding-left: ${e=>e.prefix?"0":"0.75rem"};
+
+  &::placeholder {
+    color: ${e=>n.getColorRgbaValue(e.theme,"Input",e.color,"enabled","placeholder")};
+  }
+
+  &:read-only {
+    cursor: default;
+  }
+
+  &:disabled {
+    ${e=>n.getDisabledStateCss(e.theme)}
+    background: none;
+  }
+`,$=s.forwardRef((e,C)=>{const{disabled:b,readOnly:f,defaultValue:V,value:o,debounceTime:I=180,type:z="text",placeholder:O,tabIndex:R,prefix:p,suffix:g,onChange:l,onBlur:m,onFocus:y,className:w="",style:q={},size:x="small",color:a="primary",...v}=e,i=F.useTheme(),[j,T]=s.useState(o||V||""),[u,P]=s.useState(!1);s.useEffect(()=>{o!=null&&T(o)},[o]);const W=s.useCallback(B.debounce((r,h)=>k(r,h),I),[l]),k=(r,h)=>{l&&(l==null||l(r,h))},U=r=>{T(r.target.value),W(r,r.target.value)},N=r=>{P(!0),y==null||y(r)},_=r=>{P(!1),m==null||m(r)};return d.jsxs(D,{style:q,className:w,theme:i,color:a,size:x,focused:u,disabled:b,readOnly:f,children:[p&&d.jsx(S,{theme:i,color:a,focused:u,className:"lnc-input-prefix",children:p}),d.jsx(A,{ref:C,type:z,theme:i,color:a,size:x,placeholder:O,prefix:p,suffix:g,disabled:b,readOnly:f,focused:u,onFocus:N,onBlur:_,onChange:U,tabIndex:R,value:j,...v}),g&&d.jsx(E,{theme:i,color:a,focused:u,className:"lnc-input-suffix",children:g})]})});$.propTypes={id:t.PropTypes.string,defaultValue:t.PropTypes.string,value:t.PropTypes.string,disabled:t.PropTypes.bool,readOnly:t.PropTypes.bool,debounceTime:t.PropTypes.number,placeholder:t.PropTypes.string,type:t.PropTypes.oneOf(["text","email"]),tabIndex:t.PropTypes.number,prefix:t.PropTypes.oneOfType([t.PropTypes.string,t.PropTypes.element]),suffix:t.PropTypes.oneOfType([t.PropTypes.string,t.PropTypes.element]),onChange:t.PropTypes.func,onBlur:t.PropTypes.func,onFocus:t.PropTypes.func,className:t.PropTypes.string,style:t.PropTypes.object,size:t.PropTypes.oneOf(["small","medium","large"]),color:t.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray"])};module.exports=$;

package/dist/TextInput.js

@@ -0,0 +1,227 @@
+import { jsxs as W, jsx as b } from "react/jsx-runtime";
+import { P as t } from "./index-Ds9PUTwb.js";
+import U, { useState as C, useEffect as _, useCallback as D } from "react";
+import { d as E } from "./index-D5vEbKUT.js";
+import { n as u } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { f as s, b as a, c as q, h as A, g as O, a as G } from "./utils-DEke8iwo.js";
+import { u as H } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+const J = u.div`
+  display: flex;
+  align-items: center;
+
+  min-height: ${(e) => s(e.theme, e.size)};
+  max-height: ${(e) => s(e.theme, e.size)};
+  background-color: ${(e) => a(
+  e.theme,
+  "Input",
+  e.color,
+  "enabled",
+  "background"
+)};
+  border: 1px solid
+    ${(e) => a(
+  e.theme,
+  "Input",
+  e.focused === !0 ? "primary" : e.color,
+  e.disabled === !0 ? "disabled" : "enabled",
+  "border"
+)};
+  border-radius: ${(e) => q(e.theme, "regular")};
+
+  ${(e) => e.focused && e.readOnly !== !0 ? A(e.theme) : ""}
+  ${(e) => e.disabled === !0 ? O(e.theme) : ""}
+`, S = u.span`
+  padding: 0 12px;
+  color: ${(e) => a(
+  e.theme,
+  "Input",
+  e.focused === !0 ? "primary" : e.color,
+  "enabled",
+  "prefix"
+)};
+`, K = u(S)``, L = u.input`
+  background: none;
+  border: none;
+  outline: none;
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+  width: 100%;
+
+  ${(e) => G(e.theme, "Input", e.size, "enabled")}
+  min-height: ${(e) => s(e.theme, e.size)};
+  max-height: ${(e) => s(e.theme, e.size)};
+  color: ${(e) => a(
+  e.theme,
+  "Input",
+  e.focused === !0 ? "primary" : e.color,
+  "enabled",
+  "text"
+)};
+  caret-color: ${(e) => a(e.theme, "Input", e.color, "enabled", "caret")};
+  padding-right: ${(e) => e.suffix ? "0" : "0.75rem"};
+  padding-left: ${(e) => e.prefix ? "0" : "0.75rem"};
+
+  &::placeholder {
+    color: ${(e) => a(
+  e.theme,
+  "Input",
+  e.color,
+  "enabled",
+  "placeholder"
+)};
+  }
+
+  &:read-only {
+    cursor: default;
+  }
+
+  &:disabled {
+    ${(e) => O(e.theme)}
+    background: none;
+  }
+`, M = U.forwardRef((e, T) => {
+  const {
+    disabled: y,
+    readOnly: x,
+    defaultValue: V,
+    value: l,
+    debounceTime: z = 180,
+    type: v = "text",
+    placeholder: k,
+    tabIndex: w,
+    prefix: c,
+    suffix: m,
+    //----------------
+    onChange: r,
+    onBlur: f,
+    onFocus: h,
+    //----------------
+    className: B = "",
+    style: F = {},
+    size: p = "small",
+    color: o = "primary",
+    ...N
+  } = e, d = H(), [R, $] = C(l || V || ""), [i, I] = C(!1);
+  _(() => {
+    l != null && $(l);
+  }, [l]);
+  const j = D(
+    E((n, g) => P(n, g), z),
+    [r]
+  ), P = (n, g) => {
+    r && (r == null || r(n, g));
+  };
+  return /* @__PURE__ */ W(
+    J,
+    {
+      style: F,
+      className: B,
+      theme: d,
+      color: o,
+      size: p,
+      focused: i,
+      disabled: y,
+      readOnly: x,
+      children: [
+        c && /* @__PURE__ */ b(
+          S,
+          {
+            theme: d,
+            color: o,
+            focused: i,
+            className: "lnc-input-prefix",
+            children: c
+          }
+        ),
+        /* @__PURE__ */ b(
+          L,
+          {
+            ref: T,
+            type: v,
+            theme: d,
+            color: o,
+            size: p,
+            placeholder: k,
+            prefix: c,
+            suffix: m,
+            disabled: y,
+            readOnly: x,
+            focused: i,
+            onFocus: (n) => {
+              I(!0), h == null || h(n);
+            },
+            onBlur: (n) => {
+              I(!1), f == null || f(n);
+            },
+            onChange: (n) => {
+              $(n.target.value), j(n, n.target.value);
+            },
+            tabIndex: w,
+            value: R,
+            ...N
+          }
+        ),
+        m && /* @__PURE__ */ b(
+          K,
+          {
+            theme: d,
+            color: o,
+            focused: i,
+            className: "lnc-input-suffix",
+            children: m
+          }
+        )
+      ]
+    }
+  );
+});
+M.propTypes = {
+  id: t.string,
+  defaultValue: t.string,
+  value: t.string,
+  disabled: t.bool,
+  readOnly: t.bool,
+  /**
+   * Time in miliseconds before onChange event fires after it has been triggered.
+   */
+  debounceTime: t.number,
+  placeholder: t.string,
+  type: t.oneOf(["text", "email"]),
+  tabIndex: t.number,
+  /**
+   * Reserved space before input. Intented to be used with plain text or `Icon` component.
+   */
+  prefix: t.oneOfType([t.string, t.element]),
+  /**
+   * Reserved space after input. Intented to be used with plain text or `Icon` component.
+   */
+  suffix: t.oneOfType([t.string, t.element]),
+  /**
+   * `(event, value) => void`
+   */
+  onChange: t.func,
+  /**
+   * `(event) => void`
+   */
+  onBlur: t.func,
+  /**
+   * `(event) => void`
+   */
+  onFocus: t.func,
+  className: t.string,
+  style: t.object,
+  size: t.oneOf(["small", "medium", "large"]),
+  color: t.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+export {
+  M as default
+};