linear-react-components-ui 1.1.26-beta-1 → 1.1.26-beta.10

package/lib/inputs/select/multiple/index.js

@@ -1,196 +1,126 @@
-import { j as g } from "../../../chunks/jsx-runtime.CYK1ROHF.js";
-import { useState as d, useRef as F, useEffect as W } from "react";
-import j from "lodash";
-import Ce from "../Dropdown.js";
-import ge from "../ActionButtons.js";
-import pe from "./Selecteds.js";
+import { j as C } from "../../../chunks/jsx-runtime.D1SHvdVE.js";
+import { useState as u, useRef as R, useEffect as F } from "react";
+import { _ as I } from "../../../chunks/lodash.CIAK_hAg.js";
+import fe from "../Dropdown.js";
+import me from "../ActionButtons.js";
+import he from "./Selecteds.js";
 import { keyCodes as p } from "../../../internals/constants.js";
-import Se from "../../base/InputTextBase.js";
-import { getFilteredMultipleDataCombo as Y } from "../helper.js";
-import ye from "../../../hint/index.js";
-import { v as Oe } from "../../../chunks/v1.CDXKvGzE.js";
-const Ie = (t) => {
+import Ce from "../../base/InputTextBase.js";
+import { getFilteredMultipleDataCombo as J } from "../helper.js";
+import pe from "../../../hint/index.js";
+import { v as ge } from "../../../chunks/v1.Ds1rkxUj.js";
+const Be = (n) => {
   const {
-    idKey: a,
-    dataSource: l = [],
-    handlerClear: Z,
-    value: S = [],
-    remoteSearch: K = !1,
-    descriptionKey: m,
-    showClearButton: V,
-    rightElements: ee = [],
-    hint: A,
-    hintPosition: te = "below",
-    customClassForLabel: ne,
-    customClassForWrapper: oe,
-    customClassForInputContent: ie,
-    customClassForSideButtons: re
-  } = t, [i, b] = d(l), [c, y] = d([]), [O, h] = d(), [x, w] = d([]), [v, u] = d(!1), [T, B] = d(0), [le, se] = d(!1), [R, ce] = d(), [ue, de] = d([]), N = `select-component${Oe()}`, P = F(null), C = F(null), s = F(null), E = F(null), f = F(null), $ = typeof m == "string", ae = ["item", "menubutton", "filterinput", "filtercontainer", "label", "actionbutton"], M = () => {
-    s.current && B(s.current.clientWidth);
-  }, _ = (e) => {
-    const { target: o } = e;
-    !ae.includes(o.className) && o !== s.current && s.current && !s.current.contains(o) && C.current && !C.current.contains(o) && u(!1);
-  }, z = (e) => {
-    var Q, X;
-    const o = e.target, r = ((X = (Q = C.current) == null ? void 0 : Q.parentElement) == null ? void 0 : X.id) || "", n = document.getElementById(r), D = !!(n != null && n.contains(o));
-    se(D);
-  }, U = () => {
-    h(void 0), y([]), t.onSelect && t.onSelect();
-  }, q = (e) => {
-    let o = null;
-    if (K)
-      t.onSearch && t.onSearch(e), u(!0), w([e]);
+    idKey: d,
+    dataSource: i = [],
+    handlerClear: Q,
+    value: g = [],
+    remoteSearch: L = !1,
+    descriptionKey: f,
+    showClearButton: X,
+    rightElements: Y = [],
+    hint: j,
+    hintPosition: Z = "below",
+    customClassForLabel: V,
+    customClassForWrapper: _,
+    customClassForInputContent: ee,
+    customClassForSideButtons: te
+  } = n, [r, D] = u(i), [s, S] = u([]), [w, m] = u(), [b, y] = u([]), [O, c] = u(!1), [K, W] = u(0), [ne, oe] = u(!1), [v, re] = u(), [ie, le] = u([]), A = `select-component${ge()}`, T = R(null), h = R(null), l = R(null), E = R(null), a = R(null), N = typeof f == "string", se = ["item", "menubutton", "filterinput", "filtercontainer", "label", "actionbutton"], P = () => {
+    l.current && W(l.current.clientWidth);
+  }, $ = (e) => {
+    const {
+      target: t
+    } = e;
+    !se.includes(t.className) && t !== l.current && l.current && !l.current.contains(t) && h.current && !h.current.contains(t) && c(!1);
+  }, M = (e) => {
+    const t = e.target, o = h.current?.parentElement?.id || "", ae = !!document.getElementById(o)?.contains(t);
+    oe(ae);
+  }, z = () => {
+    m(void 0), S([]), n.onSelect && n.onSelect();
+  }, U = (e) => {
+    let t = null;
+    if (L)
+      n.onSearch && n.onSearch(e), c(!0), y([e]);
     else {
-      let r = l;
-      e.length > 0 && (r = Y({
+      let o = i;
+      e.length > 0 && (o = J({
         inputText: [e],
-        dataSource: l,
-        descriptionKey: m,
-        currents: c
-      })), r && r.length > 0 && (o = r[0]), b(r), u(!0), o && h(o), w([e]);
+        dataSource: i,
+        descriptionKey: f,
+        currents: s
+      })), o && o.length > 0 && (t = o[0]), D(o), c(!0), t && m(t), y([e]);
     }
-  }, k = () => {
-    const e = s.current ? s.current.clientWidth : T;
-    u(!0), B(e);
-  }, H = (e) => {
-    var r;
+  }, x = () => {
+    const e = l.current ? l.current.clientWidth : K;
+    c(!0), W(e);
+  }, q = (e) => {
     if (e === null) return;
-    const o = [...c, e];
-    y(o), b(l), w([]), f && f.current && f.current.focus(), t.onSelect && h(t.onSelect(o.map((n) => n[a]))), (r = C.current) == null || r.focus();
-  }, fe = (e) => {
-    var o;
-    if (c) {
-      const r = c.filter((n) => n[a] !== e);
-      y(r), f && f.current && f.current.focus(), u(!1), t.onSelect && h(t.onSelect(r.map((n) => n[a]))), (o = C.current) == null || o.focus();
+    const t = [...s, e];
+    S(t), D(i), y([]), a && a.current && a.current.focus(), n.onSelect && m(n.onSelect(t.map((o) => o[d]))), h.current?.focus();
+  }, ce = (e) => {
+    if (s) {
+      const t = s.filter((o) => o[d] !== e);
+      S(t), a && a.current && a.current.focus(), c(!1), n.onSelect && m(n.onSelect(t.map((o) => o[d]))), h.current?.focus();
     }
-  }, me = () => {
-    u((e) => !e), s.current && B(s.current.clientWidth);
+  }, ue = () => {
+    c((e) => !e), l.current && W(l.current.clientWidth);
+  }, H = (e) => {
+    n.onBlur && n.onBlur(e), ne || (c(!1), D(i));
   }, G = (e) => {
-    t.onBlur && t.onBlur(e), le || (u(!1), b(l));
-  }, J = (e) => {
-    var o, r;
     if (e.keyCode)
-      if (e.keyCode === p.ENTER && O && v)
-        (o = e.preventDefault) == null || o.call(e), c.some((n) => n[a] === O[a]) || ((r = e.preventDefault) == null || r.call(e), H(O));
+      if (e.keyCode === p.ENTER && w && O)
+        e.preventDefault?.(), s.some((t) => t[d] === w[d]) || (e.preventDefault?.(), q(w));
       else if ([p.ARROW_UP, p.ARROW_DOWN].includes(e.keyCode)) {
-        v || u(!0);
-        let n = i ? i.findIndex((D) => D === O) : 0;
-        e.keyCode === p.ARROW_DOWN ? n = i && n === i.length - 1 ? 0 : n + 1 : n = i && n === 0 ? i.length - 1 : n - 1, i && i.length && ($ && i[n][m] ? w(i[n][m]) : $ || w([m(i[n])])), i && h(i[n]);
+        O || c(!0);
+        let t = r ? r.findIndex((o) => o === w) : 0;
+        e.keyCode === p.ARROW_DOWN ? t = r && t === r.length - 1 ? 0 : t + 1 : t = r && t === 0 ? r.length - 1 : t - 1, r && r.length && (N && r[t][f] ? y(r[t][f]) : N || y([f(r[t])])), r && m(r[t]);
       } else if (e.keyCode === p.BACKSPACE) {
-        if (x.length === 0) {
-          const n = j.dropRight(c);
-          y(n), t.onSelect && t.onSelect(n.map((D) => D[a]));
+        if (b.length === 0) {
+          const t = I.dropRight(s);
+          S(t), n.onSelect && n.onSelect(t.map((o) => o[d]));
         }
-      } else e.keyCode === p.TAB && u(!1);
-  }, he = (e) => {
-    ce(e);
-  }, I = () => t.disabled || R && (R.disabled || R.hideContent), L = () => t.readOnly || R && R.readOnly;
-  return W(() => (window.addEventListener("resize", M), document.addEventListener("click", _), document.addEventListener("mousemove", z), Z && U(), () => {
-    window.removeEventListener("resize", M), document.removeEventListener("click", _), document.removeEventListener("mousemove", z);
-  }), []), W(() => {
-    if (t.gridLayout) {
-      const e = document.querySelector(`#${N}>.-withinput.grid-container`);
+      } else e.keyCode === p.TAB && c(!1);
+  }, de = (e) => {
+    re(e);
+  }, B = () => n.disabled || v && (v.disabled || v.hideContent), k = () => n.readOnly || v && v.readOnly;
+  return F(() => (window.addEventListener("resize", P), document.addEventListener("click", $), document.addEventListener("mousemove", M), Q && z(), () => {
+    window.removeEventListener("resize", P), document.removeEventListener("click", $), document.removeEventListener("mousemove", M);
+  }), []), F(() => {
+    if (n.gridLayout) {
+      const e = document.querySelector(`#${A}>.-withinput.grid-container`);
       E.current !== e && e && (E.current = e);
     }
-  }, []), W(() => {
-    if (S.length > 0 && S !== ue && l.length > 0) {
-      const e = l.filter((o) => S.includes(o[a]));
-      de(S), y(e);
+  }, []), F(() => {
+    if (g.length > 0 && g !== ie && i.length > 0) {
+      const e = i.filter((t) => g.includes(t[d]));
+      le(g), S(e);
     }
-  }, [l.length, S.length]), W(() => {
-    if (!j.isEqual(l, i)) {
-      const e = K ? l : Y({
-        currents: c,
-        dataSource: l,
-        descriptionKey: m,
-        inputText: x
+  }, [i.length, g.length]), F(() => {
+    if (!I.isEqual(i, r)) {
+      const e = L ? i : J({
+        currents: s,
+        dataSource: i,
+        descriptionKey: f,
+        inputText: b
       });
-      b(e), h(e.length > 0 ? i[0] : null);
-    }
-  }, [l]), /* @__PURE__ */ g.jsxs(
-    "span",
-    {
-      id: N,
-      ref: P,
-      className: "select-component",
-      children: [
-        /* @__PURE__ */ g.jsx(
-          Se,
-          {
-            ...t,
-            inputRef: (e) => {
-              t.inputRef && (j.isFunction(t.inputRef) ? t.inputRef(e) : t.inputRef.current = e), f.current = e;
-            },
-            autoComplete: "off",
-            value: x.toString(),
-            readOnly: L(),
-            onFocus: () => {
-              k();
-            },
-            onBlur: (e) => {
-              G(e);
-            },
-            onChange: (e) => {
-              e && q(e.target.value);
-            },
-            onClick: k,
-            onKeyDown: J,
-            customClassForLabel: ne,
-            customClassForWrapper: `selectwrapper ${(t.readOnly || I() || L()) && " -undigitable"} ${oe}`,
-            customClassForInputContent: `multiselect ${ie}`,
-            inputBaseRef: (e) => {
-              s.current = e;
-            },
-            handlerSetOnDenied: he,
-            rightElements: [
-              ...ee,
-              /* @__PURE__ */ g.jsx(
-                ge,
-                {
-                  showClearButton: V,
-                  disabled: I() || L(),
-                  dropDownOpened: v,
-                  handlerClear: () => I() ? null : U(),
-                  handlerOpenClose: me,
-                  customClassForSideButtons: re
-                },
-                "action-buttons-multiselect"
-              )
-            ],
-            children: /* @__PURE__ */ g.jsx(
-              pe,
-              {
-                ...t,
-                currents: c,
-                handlerOnUnselect: fe
-              }
-            )
-          }
-        ),
-        v && /* @__PURE__ */ g.jsx(
-          Ce,
-          {
-            ...t,
-            selected: O,
-            selectFieldRef: P,
-            dropdownRef: C,
-            gridWrapperStyle: t.gridLayout && E.current ? window.getComputedStyle(E.current) : void 0,
-            handleOnSelect: H,
-            handleOnFilter: q,
-            handleOnKeydown: J,
-            handleOnBlur: () => G,
-            handleOnFocus: k,
-            opened: v,
-            dataCombo: i,
-            currents: c,
-            dropdownWidth: T || 0
-          }
-        ),
-        /* @__PURE__ */ g.jsx(ye, { visible: !!A && te === "below", customClass: "hint", description: A })
-      ]
+      D(e), m(e.length > 0 ? r[0] : null);
     }
-  );
+  }, [i]), /* @__PURE__ */ C.jsxs("span", { id: A, ref: T, className: "select-component", children: [
+    /* @__PURE__ */ C.jsx(Ce, { ...n, inputRef: (e) => {
+      n.inputRef && (I.isFunction(n.inputRef) ? n.inputRef(e) : n.inputRef.current = e), a.current = e;
+    }, autoComplete: "off", value: b.toString(), readOnly: k(), onFocus: () => {
+      x();
+    }, onBlur: (e) => {
+      H(e);
+    }, onChange: (e) => {
+      e && U(e.target.value);
+    }, onClick: x, onKeyDown: G, customClassForLabel: V, customClassForWrapper: `selectwrapper ${(n.readOnly || B() || k()) && " -undigitable"} ${_}`, customClassForInputContent: `multiselect ${ee}`, inputBaseRef: (e) => {
+      l.current = e;
+    }, handlerSetOnDenied: de, rightElements: [...Y, /* @__PURE__ */ C.jsx(me, { showClearButton: X, disabled: B() || k(), dropDownOpened: O, handlerClear: () => B() ? null : z(), handlerOpenClose: ue, customClassForSideButtons: te }, "action-buttons-multiselect")], children: /* @__PURE__ */ C.jsx(he, { ...n, currents: s, handlerOnUnselect: ce }) }),
+    O && /* @__PURE__ */ C.jsx(fe, { ...n, selected: w, selectFieldRef: T, dropdownRef: h, gridWrapperStyle: n.gridLayout && E.current ? window.getComputedStyle(E.current) : void 0, handleOnSelect: q, handleOnFilter: U, handleOnKeydown: G, handleOnBlur: () => H, handleOnFocus: x, opened: O, dataCombo: r, currents: s, dropdownWidth: K || 0 }),
+    /* @__PURE__ */ C.jsx(pe, { visible: !!j && Z === "below", customClass: "hint", description: j })
+  ] });
 };
 export {
-  Ie as default
+  Be as default
 };