linear-react-components-ui 1.1.26-beta.5 → 1.1.26-beta.6

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

@@ -1,196 +1,192 @@
-import { j as g } from "../../../chunks/jsx-runtime.gtoSnx-V.js";
-import { useState as d, useRef as F, useEffect as W } from "react";
-import { _ as j } from "../../../chunks/lodash.C68pWaTB.js";
-import Ce from "../Dropdown.js";
-import ge from "../ActionButtons.js";
-import pe from "./Selecteds.js";
+import { j as C } from "../../../chunks/jsx-runtime.C7wFtzyj.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 G } 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);
+    idKey: d,
+    dataSource: i = [],
+    handlerClear: J,
+    value: g = [],
+    remoteSearch: L = !1,
+    descriptionKey: f,
+    showClearButton: Q,
+    rightElements: X = [],
+    hint: j,
+    hintPosition: Y = "below",
+    customClassForLabel: Z,
+    customClassForWrapper: V,
+    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);
+  }, _ = () => {
+    m(void 0), S([]), n.onSelect && n.onSelect();
   }, 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]);
+    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 = G({
         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);
+  }, U = (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);
-  }, G = (e) => {
-    t.onBlur && t.onBlur(e), le || (u(!1), b(l));
-  }, J = (e) => {
-    var o, r;
+  }, ue = () => {
+    c((e) => !e), l.current && W(l.current.clientWidth);
+  }, q = (e) => {
+    n.onBlur && n.onBlur(e), ne || (c(!1), D(i));
+  }, H = (e) => {
     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?.(), U(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), J && _(), () => {
+    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 : G({
+        currents: s,
+        dataSource: i,
+        descriptionKey: f,
+        inputText: b
       });
-      b(e), h(e.length > 0 ? i[0] : null);
+      D(e), m(e.length > 0 ? r[0] : null);
     }
-  }, [l]), /* @__PURE__ */ g.jsxs(
+  }, [i]), /* @__PURE__ */ C.jsxs(
     "span",
     {
-      id: N,
-      ref: P,
+      id: A,
+      ref: T,
       className: "select-component",
       children: [
-        /* @__PURE__ */ g.jsx(
-          Se,
+        /* @__PURE__ */ C.jsx(
+          Ce,
           {
-            ...t,
+            ...n,
             inputRef: (e) => {
-              t.inputRef && (j.isFunction(t.inputRef) ? t.inputRef(e) : t.inputRef.current = e), f.current = e;
+              n.inputRef && (I.isFunction(n.inputRef) ? n.inputRef(e) : n.inputRef.current = e), a.current = e;
             },
             autoComplete: "off",
-            value: x.toString(),
-            readOnly: L(),
+            value: b.toString(),
+            readOnly: k(),
             onFocus: () => {
-              k();
+              x();
             },
             onBlur: (e) => {
-              G(e);
+              q(e);
             },
             onChange: (e) => {
-              e && q(e.target.value);
+              e && z(e.target.value);
             },
-            onClick: k,
-            onKeyDown: J,
-            customClassForLabel: ne,
-            customClassForWrapper: `selectwrapper ${(t.readOnly || I() || L()) && " -undigitable"} ${oe}`,
-            customClassForInputContent: `multiselect ${ie}`,
+            onClick: x,
+            onKeyDown: H,
+            customClassForLabel: Z,
+            customClassForWrapper: `selectwrapper ${(n.readOnly || B() || k()) && " -undigitable"} ${V}`,
+            customClassForInputContent: `multiselect ${ee}`,
             inputBaseRef: (e) => {
-              s.current = e;
+              l.current = e;
             },
-            handlerSetOnDenied: he,
+            handlerSetOnDenied: de,
             rightElements: [
-              ...ee,
-              /* @__PURE__ */ g.jsx(
-                ge,
+              ...X,
+              /* @__PURE__ */ C.jsx(
+                me,
                 {
-                  showClearButton: V,
-                  disabled: I() || L(),
-                  dropDownOpened: v,
-                  handlerClear: () => I() ? null : U(),
-                  handlerOpenClose: me,
-                  customClassForSideButtons: re
+                  showClearButton: Q,
+                  disabled: B() || k(),
+                  dropDownOpened: O,
+                  handlerClear: () => B() ? null : _(),
+                  handlerOpenClose: ue,
+                  customClassForSideButtons: te
                 },
                 "action-buttons-multiselect"
               )
             ],
-            children: /* @__PURE__ */ g.jsx(
-              pe,
+            children: /* @__PURE__ */ C.jsx(
+              he,
               {
-                ...t,
-                currents: c,
-                handlerOnUnselect: fe
+                ...n,
+                currents: s,
+                handlerOnUnselect: ce
               }
             )
           }
         ),
-        v && /* @__PURE__ */ g.jsx(
-          Ce,
+        O && /* @__PURE__ */ C.jsx(
+          fe,
           {
-            ...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
+            ...n,
+            selected: w,
+            selectFieldRef: T,
+            dropdownRef: h,
+            gridWrapperStyle: n.gridLayout && E.current ? window.getComputedStyle(E.current) : void 0,
+            handleOnSelect: U,
+            handleOnFilter: z,
+            handleOnKeydown: H,
+            handleOnBlur: () => q,
+            handleOnFocus: x,
+            opened: O,
+            dataCombo: r,
+            currents: s,
+            dropdownWidth: K || 0
           }
         ),
-        /* @__PURE__ */ g.jsx(ye, { visible: !!A && te === "below", customClass: "hint", description: A })
+        /* @__PURE__ */ C.jsx(pe, { visible: !!j && Y === "below", customClass: "hint", description: j })
       ]
     }
   );
 };
 export {
-  Ie as default
+  Be as default
 };