triafly-ui-kit 1.0.80 → 1.0.82

package/dist/assets/src/components/Ui/DropdownInput/DropdownInput.css

@@ -1 +1 @@
-.dropdown-input{display:flex;flex-direction:column;min-width:200px}.dropdown-input.sm .input-box{height:36px}.dropdown-input__native{display:none}.dropdown-input label{margin:0 0 8px}.dropdown-input .input-box{position:relative;border:1px solid var(--color-border-primary-default);border-radius:8px;padding:10px 8px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;outline:none;height:44px;background-color:var(--color-bg-neutral-basic-default)}.dropdown-input .input-box.opened{border:2px solid var(--color-border-primary-default);padding:9px 7px}.dropdown-input .input-box.disabled{background-color:var(--color-bg-island-disabled);pointer-events:none}.dropdown-input .input-box.invalid{border-color:var(--color-border-error-default)}.dropdown-input .input-box.invalid>span{color:var(--color-border-error-default)}.dropdown-input .input-box.invalid svg *{fill:var(--color-border-error-default)}.dropdown-input .input-box .placeholder,.dropdown-input .input-box .input-value,.dropdown-input .input-box .options li{color:var(--color-text-primary-default)}.dropdown-input .input-box .caret *{fill:var(--color-icon-secondary-default)}.dropdown-input .options{position:absolute;top:100%;bottom:auto;left:0;right:0;max-height:304px;overflow-y:auto;overflow-x:hidden;background-color:var(--color-bg-neutral-basic-default);border-radius:8px;border:1px solid var(--color-border-primary-default);margin:1px -1px 0;z-index:21}.dropdown-input .options.above{bottom:calc(100% + 1px);top:auto}.dropdown-input .options li{padding:0 8px;min-height:36px;cursor:pointer;display:flex;align-items:center}.dropdown-input .options li:hover,.dropdown-input .options li.dropdown-input__option--selected{background-color:var(--color-bg-neutral-lightest-default)}.dropdown-input .helper-text{font-size:12px;color:var(--color-text-secondary-default);margin:8px 0 0;display:flex;align-items:center}.dropdown-input .helper-text.error{color:var(--color-border-error-default)}.dropdown-input .helper-text.error .icon{margin:0 4px 0 0}.dropdown-input .helper-text.error .icon>*{fill:var(--color-border-error-default)}
+.dropdown-input{display:flex;flex-direction:column;min-width:200px}.dropdown-input.sm .input-box{height:36px}.dropdown-input__native{display:none}.dropdown-input label{margin:0 0 8px}.dropdown-input .input-box{position:relative;border:1px solid var(--color-border-primary-default);border-radius:8px;padding:10px 8px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;outline:none;height:44px;background-color:var(--color-bg-neutral-basic-default)}.dropdown-input .input-box.opened{border:2px solid var(--color-border-primary-default);padding:9px 7px}.dropdown-input .input-box.disabled{background-color:var(--color-bg-island-disabled);pointer-events:none}.dropdown-input .input-box.invalid{border-color:var(--color-border-error-default)}.dropdown-input .input-box.invalid>span{color:var(--color-border-error-default)}.dropdown-input .input-box.invalid svg *{fill:var(--color-border-error-default)}.dropdown-input .input-box .placeholder,.dropdown-input .input-box .input-value,.dropdown-input .input-box .options li{color:var(--color-text-primary-default)}.dropdown-input .input-box .caret *{fill:var(--color-icon-secondary-default)}.dropdown-input .optionsgg{position:absolute;top:100%;bottom:auto;left:0;right:0;max-height:304px;overflow-y:auto;overflow-x:hidden;background-color:var(--color-bg-neutral-basic-default);border-radius:8px;border:1px solid var(--color-border-primary-default);margin:1px -1px 0;z-index:21}.dropdown-input .optionsgg.above{bottom:calc(100% + 1px);top:auto}.dropdown-input .optionsgg li{padding:0 8px;min-height:36px;cursor:pointer;display:flex;align-items:center}.dropdown-input .optionsgg li:hover,.dropdown-input .optionsgg li.dropdown-input__option--selected{background-color:var(--color-bg-neutral-lightest-default)}.dropdown-input .helper-text{font-size:12px;color:var(--color-text-secondary-default);margin:8px 0 0;display:flex;align-items:center}.dropdown-input .helper-text.error{color:var(--color-border-error-default)}.dropdown-input .helper-text.error .icon{margin:0 4px 0 0}.dropdown-input .helper-text.error .icon>*{fill:var(--color-border-error-default)}.dropdown-portal{background-color:var(--color-bg-neutral-basic-default);border-radius:8px;border:1px solid var(--color-border-primary-default);box-shadow:0 2px 8px #00000026;overflow-y:auto}.dropdown-portal .options{list-style:none;padding:0;margin:0}.dropdown-portal .options li{padding:8px 12px;min-height:36px;cursor:pointer;display:flex;align-items:center}.dropdown-portal .options li:hover{background-color:var(--color-bg-neutral-lightest-default)}

package/dist/assets/src/components/Ui/SearchInput/SearchInput.css

@@ -1 +1 @@
-.search-input{border:1px solid var(--color-border-primary-default);border-radius:22px;margin:0 12px 0 0}.search-input:focus-within{border:2px solid var(--color-border-primary-default);margin:0 11px 0 -1px}.search-input:focus-within .text-input .input-container input{margin:-1px}.search-input .text-input .input-container input{border:none}.search-input .text-input .input-container input:focus{outline:none}.search-input__label{margin:0 0 8px}.search-input .guess-box{padding:0 12px 12px}.search-input .guess-box ul{border-top:1px solid var(--color-border-primary-default);padding:12px 0 0}.search-input .guess-box ul li{min-height:36px;display:flex;align-items:center;padding:0 8px;cursor:pointer}.search-input .guess-box ul li:hover{background-color:var(--color-bg-innerisland-default)}.dropdown-input-test{position:relative}.dropdown-input-test .caret{fill:var(--color-icon-secondary-default);position:absolute;bottom:9px;right:10px}.dropdown-input-test .input-box{position:relative;cursor:pointer;display:flex;justify-content:space-between;align-items:center;outline:none;background-color:var(--color-bg-neutral-basic-default)}.dropdown-input-test .input-box.disabled{background-color:var(--color-bg-island-disabled);pointer-events:none}.dropdown-input-test .input-box.invalid{border-color:var(--color-border-error-default)}.dropdown-input-test .input-box.invalid>span{color:var(--color-border-error-default)}.dropdown-input-test .input-box.invalid svg *{fill:var(--color-border-error-default)}.dropdown-input-test .input-box .placeholder{color:var(--color-text-secondary-default)}.dropdown-input-test .options{position:absolute;top:100%;bottom:auto;left:1%;right:1%;max-height:304px;overflow-y:auto;overflow-x:hidden;background-color:var(--color-bg-neutral-basic-default);border-radius:8px;border:1px solid var(--color-border-primary-default);margin:1px -1px 0;z-index:21}.dropdown-input-test .options.above{bottom:calc(100% + 1px);top:auto}.dropdown-input-test .options li{padding:0 8px;min-height:36px;cursor:pointer;display:flex;align-items:center}.dropdown-input-test .options li:hover,.dropdown-input-test .options li.dropdown-input__option--selected{background-color:var(--color-bg-neutral-lightest-default)}
+.search-input{border:1px solid var(--color-border-primary-default);border-radius:22px;margin:0 12px 0 0}.search-input:focus-within{border:2px solid var(--color-border-primary-default);margin:0 11px 0 -1px}.search-input:focus-within .text-input .input-container input{margin:-1px}.search-input .text-input .input-container input{border:none}.search-input .text-input .input-container input:focus{outline:none}.search-input__label{margin:0 0 8px}.search-input .guess-box{padding:0 12px 12px}.search-input .guess-box ul{border-top:1px solid var(--color-border-primary-default);padding:12px 0 0}.search-input .guess-box ul li{min-height:36px;display:flex;align-items:center;padding:0 8px;cursor:pointer}.search-input .guess-box ul li:hover{background-color:var(--color-bg-innerisland-default)}.dropdown-input-test{position:relative}.dropdown-input-test .caret{fill:var(--color-icon-secondary-default);position:absolute;bottom:9px;right:10px}.dropdown-input-test .input-box{position:relative;cursor:pointer;display:flex;justify-content:space-between;align-items:center;outline:none;background-color:var(--color-bg-neutral-basic-default)}.dropdown-input-test .input-box.disabled{background-color:var(--color-bg-island-disabled);pointer-events:none}.dropdown-input-test .input-box.invalid{border-color:var(--color-border-error-default)}.dropdown-input-test .input-box.invalid>span{color:var(--color-border-error-default)}.dropdown-input-test .input-box.invalid svg *{fill:var(--color-border-error-default)}.dropdown-input-test .input-box .placeholder{color:var(--color-text-secondary-default)}.dropdown-input-test .options{position:absolute;top:100%;bottom:auto;left:1%;right:1%;max-height:304px;overflow-y:auto;overflow-x:hidden;background-color:var(--color-bg-neutral-basic-default);border-radius:8px;border:1px solid var(--color-border-primary-default);margin:1px -1px 0;z-index:21}.dropdown-input-test .options.above{bottom:calc(100% + 1px);top:auto}.dropdown-input-test .options li{padding:0 8px;min-height:36px;cursor:pointer;display:flex;align-items:center}.dropdown-input-test .options li:hover,.dropdown-input-test .options li.dropdown-input__option--selected{background-color:var(--color-bg-neutral-lightest-default)}.search-input-container{position:relative;display:inline-block;width:100%}.search-input-container .caret{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer;z-index:1;fill:var(--color-icon-secondary-default)}.suggestions-portal{background-color:var(--color-bg-neutral-basic-default);border-radius:8px;border:1px solid var(--color-border-primary-default);box-shadow:0 2px 8px #00000026;overflow-y:auto}.suggestions-portal .suggestions-list{list-style:none;padding:0;margin:0}.suggestions-portal .suggestions-list li{padding:8px 12px;min-height:36px;cursor:pointer;display:flex;align-items:center}.suggestions-portal .suggestions-list li:hover{background-color:var(--color-bg-neutral-lightest-default)}

package/dist/components/Ui/DropdownInput/DropdownInput.js

@@ -1,92 +1,107 @@
-import { jsxs as c, jsx as n } from "react/jsx-runtime";
-import { useState as m, useRef as O, useEffect as g } from "react";
+import { jsxs as s, jsx as n } from "react/jsx-runtime";
+import { useState as h, useRef as P, useEffect as v } from "react";
+import { createPortal as B } from "react-dom";
 import '../../../assets/src/components/Ui/DropdownInput/DropdownInput.css';/* empty css                                                          */
-import { IconCaretUpDown as E, IconWarningCircle as P } from "../Icons/Icons.js";
-const j = ({
-  label: v,
-  options: i,
-  value: o,
-  onChange: f,
-  name: C = "DropdownInput",
-  placeholder: r,
-  errorMessage: d = !1,
-  isDisabled: h = !1,
-  className: k = ""
+import { IconCaretUpDown as H, IconWarningCircle as L } from "../Icons/Icons.js";
+import { getPortalContainer as _, releasePortal as j } from "../../../shared/utils/fn/portals.js";
+const $ = "dropdown-input-global-portal", y = ({
+  label: w,
+  options: c,
+  value: d,
+  onChange: g,
+  name: k = "DropdownInput",
+  placeholder: p,
+  errorMessage: u = !1,
+  isDisabled: b = !1,
+  className: O = ""
 }) => {
-  var w;
-  const [p, u] = m(!1), [t, N] = m(o || ""), [I, x] = m(!1), s = O(null);
-  g(() => {
-    const e = (l) => {
-      s.current && !s.current.contains(l.target) && u(!1);
+  var I;
+  const [m, f] = h(!1), [i, N] = h(d || ""), [x, R] = h(!1), o = P(null), r = P(null);
+  v(() => (r.current = _($), () => j($)), []), v(() => {
+    const e = (t) => {
+      o.current && !o.current.contains(t.target) && r.current && !r.current.contains(t.target) && f(!1);
     };
     return document.addEventListener("click", e), () => {
       document.removeEventListener("click", e);
     };
-  }, []), g(() => {
-    N(o || "");
-  }, [o]);
-  const b = (e) => {
-    N(e), u(!1), f && f(e);
-  }, $ = (e) => {
-    var l;
-    if (e.stopPropagation(), !p) {
-      const a = (l = s.current) == null ? void 0 : l.getBoundingClientRect(), D = window.innerHeight - ((a == null ? void 0 : a.bottom) || 0);
-      x(D < 304);
+  }, []), v(() => {
+    N(d || "");
+  }, [d]);
+  const C = (e) => {
+    N(e), f(!1), g && g(e);
+  }, D = (e) => {
+    var t;
+    if (e.stopPropagation(), !m) {
+      const l = (t = o.current) == null ? void 0 : t.getBoundingClientRect(), a = window.innerHeight - ((l == null ? void 0 : l.bottom) || 0);
+      R(a < 304);
     }
-    u((a) => !a);
+    f((l) => !l);
+  }, E = () => {
+    var l;
+    if (!m || !r.current || !o.current) return null;
+    const e = (l = o.current) == null ? void 0 : l.getBoundingClientRect(), t = {
+      position: "fixed",
+      width: e == null ? void 0 : e.width,
+      left: e == null ? void 0 : e.left,
+      maxHeight: "304px",
+      zIndex: 9999
+    };
+    return x ? t.bottom = `${window.innerHeight - ((e == null ? void 0 : e.top) || 0)}px` : t.top = `${e == null ? void 0 : e.bottom}px`, B(
+      /* @__PURE__ */ n("div", { className: "dropdown-portal", style: t, children: /* @__PURE__ */ n("ul", { className: `options ${x ? "above" : ""}`, children: c.map((a) => /* @__PURE__ */ n(
+        "li",
+        {
+          onClick: (A) => {
+            A.stopPropagation(), C(a.value);
+          },
+          className: i === a.value ? "selected" : "",
+          children: a.label
+        },
+        a.value
+      )) }) }),
+      r.current
+    );
   };
-  return /* @__PURE__ */ c("div", { className: `dropdown-input ${k}`, ref: s, children: [
-    /* @__PURE__ */ c(
+  return /* @__PURE__ */ s("div", { className: `dropdown-input ${O}`, ref: o, children: [
+    /* @__PURE__ */ s(
       "select",
       {
-        name: C,
-        value: t,
-        onChange: (e) => b(e.target.value),
+        name: k,
+        value: i,
+        onChange: (e) => C(e.target.value),
         className: "dropdown-input__native",
-        disabled: h,
+        disabled: b,
         children: [
-          /* @__PURE__ */ n("option", { value: "", disabled: !0, children: r }),
-          i.map((e) => /* @__PURE__ */ n("option", { value: e.value, children: e.label }, e.value))
+          /* @__PURE__ */ n("option", { value: "", disabled: !0, children: p }),
+          c.map((e) => /* @__PURE__ */ n("option", { value: e.value, children: e.label }, e.value))
         ]
       }
     ),
-    v && /* @__PURE__ */ n("label", { children: v }),
-    /* @__PURE__ */ c(
+    w && /* @__PURE__ */ n("label", { children: w }),
+    /* @__PURE__ */ s(
       "div",
       {
         className: `input-box 
-          ${p ? "opened" : ""} 
-          ${h ? "disabled" : ""} 
-          ${d ? "invalid" : ""}`,
-        onClick: $,
+          ${m ? "opened" : ""} 
+          ${b ? "disabled" : ""} 
+          ${u ? "invalid" : ""}`,
+        onClick: D,
         children: [
-          /* @__PURE__ */ n("span", { className: "input-value", children: t === void 0 ? (
+          /* @__PURE__ */ n("span", { className: "input-value", children: i === void 0 ? (
             // Если значение не передано
-            /* @__PURE__ */ n("span", { className: "placeholder", children: r })
-          ) : ((w = i.find((e) => e.value === t)) == null ? void 0 : w.label) || /* @__PURE__ */ n("span", { className: "placeholder", children: r }) }),
-          /* @__PURE__ */ n(E, { className: "caret" }),
-          p && /* @__PURE__ */ n("ul", { className: `options ${I ? "above" : ""}`, children: i.map((e) => /* @__PURE__ */ n(
-            "li",
-            {
-              onClick: (l) => {
-                l.stopPropagation(), b(e.value);
-              },
-              className: t === e.value ? "option--selected" : "",
-              children: e.label
-            },
-            e.value
-          )) })
+            /* @__PURE__ */ n("span", { className: "placeholder", children: p })
+          ) : ((I = c.find((e) => e.value === i)) == null ? void 0 : I.label) || /* @__PURE__ */ n("span", { className: "placeholder", children: p }) }),
+          /* @__PURE__ */ n(H, { className: "caret" })
         ]
       }
     ),
-    d && /* @__PURE__ */ c("span", { className: "helper-text error", children: [
-      /* @__PURE__ */ n(P, { className: "icon", size: 12 }),
-      d
-    ] })
+    u && /* @__PURE__ */ s("span", { className: "helper-text error", children: [
+      /* @__PURE__ */ n(L, { className: "icon", size: 12 }),
+      u
+    ] }),
+    E()
   ] });
 };
-j.displayName = "DropdownInput";
+y.displayName = "DropdownInput";
 export {
-  j as DropdownInput,
-  j as default
+  y as DropdownInput
 };

package/dist/components/Ui/DropdownMenu/DropdownMenu.js

@@ -79,6 +79,5 @@ const W = ({
   ] });
 };
 export {
-  W as DropdownMenu,
-  W as default
+  W as DropdownMenu
 };

package/dist/components/Ui/Form/FormItem/FormItem.js

@@ -3,106 +3,106 @@ import p, { useContext as A, useMemo as C, useEffect as I, useCallback as E } fr
 import { FormContext as f } from "../FormContext/FormContext.js";
 import { validateRule as D } from "../utils/fn.js";
 import { getChildType as R } from "./fn.js";
-const B = p.memo(
+const w = p.memo(
   ({
     name: o,
-    children: t,
+    children: a,
     rules: l,
     label: d,
     isDisabled: h,
     style: b,
     classNameItem: v
   }) => {
-    const e = A(f), [, m] = p.useReducer((a) => a + 1, 0), c = h || (e == null ? void 0 : e.disabled), u = C(() => Array.isArray(o) ? o : [o], [o]);
+    const e = A(f), [, m] = p.useReducer((t) => t + 1, 0), c = h || (e == null ? void 0 : e.disabled), u = C(() => Array.isArray(o) ? o : [o], [o]);
     I(() => {
       if (e)
         return e.setFieldRules(u, l || []), e.subscribe(u, m);
     }, [u, l, e]);
     const r = e == null ? void 0 : e.getFieldValue(u), i = e == null ? void 0 : e.getFieldError(u), n = E(
-      (a) => {
-        if (console.log(a), !c && (e == null || e.setFieldValue(u, a), l)) {
-          const s = l.map((F) => D(F, a)).filter(Boolean);
+      (t) => {
+        if (!c && (e == null || e.setFieldValue(u, t), l)) {
+          const s = l.map((F) => D(F, t)).filter(Boolean);
           e == null || e.setFieldError(u, s);
         }
       },
       [u, l, c]
-    ), g = R(t), y = C(() => {
-      const a = {
+    ), g = R(a), y = C(() => {
+      const t = {
         name: u,
         label: d,
         isDisabled: c,
         hasError: !!(i != null && i.length),
-        errorMessage: (i == null ? void 0 : i[0]) || t.props.errorMessage
+        errorMessage: (i == null ? void 0 : i[0]) || a.props.errorMessage
       };
       switch (g) {
         case "TextareaInput":
           return {
-            ...a,
+            ...t,
             value: r || "",
             onChange: n
           };
         case "DropdownInput":
           return {
-            ...a,
+            ...t,
             value: r,
             onChange: n
           };
         case "TextInput":
           return {
-            ...a,
-            ...t.props,
+            ...t,
+            ...a.props,
             value: r || "",
             onChange: (s) => n(s.target.value)
           };
         case "NumberInput":
           return {
-            ...a,
-            ...t.props,
-            value: r || Number(r) || 0,
+            ...t,
+            ...a.props,
+            value: r || Number(r) || "",
             onChange: (s) => n(s.target.value)
           };
         case "ButtonsArray":
           return {
-            ...a,
-            ...t.props,
-            tabs: t.props.tabs || [],
+            ...t,
+            ...a.props,
+            tabs: a.props.tabs || [],
             activeKey: r !== void 0 ? r : null,
             onChange: (s) => n(s)
           };
         case "Checkbox":
           return {
-            ...a,
+            ...t,
             isChecked: !!r,
             onChange: (s) => n(s.target.checked)
           };
         case "Radio":
           return {
-            ...a,
+            ...t,
             radioId: `radio-${Array.isArray(o) ? o.join("-") : o}`,
-            value: t.props.value,
-            isChecked: r === t.props.value,
-            onChange: () => n(t.props.value)
+            value: a.props.value,
+            isChecked: r === a.props.value,
+            onChange: () => n(a.props.value)
           };
         case "SearchInput":
           return {
-            ...a,
+            ...t,
             value: r,
             onChange: n
           };
         case "Switch":
           return {
-            ...a,
+            ...t,
             isChecked: !!r,
             onChange: (s) => n(s.target.checked)
           };
         case "FileUpload":
           return {
-            ...a,
+            ...t,
             value: Array.isArray(r) ? r : [],
             onChange: (s) => n(s)
           };
         default:
-          return a;
+          return t;
       }
     }, [
       u,
@@ -111,13 +111,13 @@ const B = p.memo(
       r,
       g,
       n,
-      t.props.value,
+      a.props.value,
       c
     ]);
-    return /* @__PURE__ */ k("div", { className: v, style: b, children: p.cloneElement(t, y) });
+    return /* @__PURE__ */ k("div", { className: v, style: b, children: p.cloneElement(a, y) });
   },
-  (o, t) => o.name === t.name && o.rules === t.rules && o.label === t.label && o.isDisabled === t.isDisabled
+  (o, a) => o.name === a.name && o.rules === a.rules && o.label === a.label && o.isDisabled === a.isDisabled
 );
 export {
-  B as FormItem
+  w as FormItem
 };

package/dist/components/Ui/NumberInput/NumberInput.js

@@ -1,7 +1,7 @@
 import { jsx as g } from "react/jsx-runtime";
-import { forwardRef as o } from "react";
-import { TextInput as h } from "../TextInput/TextInput.js";
-const l = [
+import { forwardRef as h } from "react";
+import { TextInput as o } from "../TextInput/TextInput.js";
+const y = [
   "0",
   "1",
   "2",
@@ -17,33 +17,37 @@ const l = [
   "Tab",
   "ArrowLeft",
   "ArrowRight"
-], s = o(
-  ({ allowNegative: r = !1, allowDecimal: c = !1, ...n }, f) => /* @__PURE__ */ g(
-    h,
+], d = h(
+  ({ allowNegative: l = !1, allowDecimal: r = !1, ...n }, f) => /* @__PURE__ */ g(
+    o,
     {
       ...n,
       ref: f,
       type: "text",
-      onKeyDown: (t) => {
+      onKeyDown: (e) => {
         var a;
-        c && t.key === "." && !t.currentTarget.value.includes(".") && l.push("."), r && t.key === "-" && (t.currentTarget.selectionStart === 0 || t.currentTarget.value === "") && l.push("-"), !l.includes(t.key) && !(t.ctrlKey && ["a", "c", "v", "x"].includes(t.key.toLowerCase())) && t.preventDefault(), (a = n.onKeyDown) == null || a.call(n, t);
+        r && e.key === "." && !e.currentTarget.value.includes(".") || l && e.key === "-" && (e.currentTarget.selectionStart === 0 || e.currentTarget.value === "") || (!y.includes(e.key) && !(e.ctrlKey && ["a", "c", "v", "x"].includes(e.key.toLowerCase())) && e.preventDefault(), (a = n.onKeyDown) == null || a.call(n, e));
       },
-      onChange: (t) => {
-        var u;
-        const a = t.target.value;
-        let e = a.replace(/[^-0-9.]/g, "");
-        if (r ? (e.match(/-/g) || []).length > 1 && (e = e.replace(/-/g, ""), e.length > 0 && (e = "-" + e)) : e = e.replace(/-/g, ""), !c)
-          e = e.replace(/\./g, "");
-        else if ((e.match(/\./g) || []).length > 1) {
-          const i = e.split(".");
-          e = i[0] + "." + i.slice(1).join("");
+      onChange: (e) => {
+        var c, u;
+        const a = e.target.value;
+        if (a === "" || a === "-") {
+          (c = n.onChange) == null || c.call(n, e);
+          return;
         }
-        a !== e && (t.target.value = e), (u = n.onChange) == null || u.call(n, t);
+        let t = a.replace(/[^-0-9.]/g, "");
+        if (l ? (t.match(/-/g) || []).length > 1 && (t = t.replace(/-/g, ""), t.length > 0 && (t = "-" + t)) : t = t.replace(/-/g, ""), !r)
+          t = t.replace(/\./g, "");
+        else if ((t.match(/\./g) || []).length > 1) {
+          const i = t.split(".");
+          t = i[0] + "." + i.slice(1).join("");
+        }
+        a !== t && (e.target.value = t), (u = n.onChange) == null || u.call(n, e);
       }
     }
   )
 );
-s.displayName = "NumberInput";
+d.displayName = "NumberInput";
 export {
-  s as NumberInput
+  d as NumberInput
 };

package/dist/components/Ui/SearchInput/SearchInput.js

@@ -1,110 +1,115 @@
-import { jsxs as I, Fragment as T, jsx as l } from "react/jsx-runtime";
-import { useState as o, useRef as H, useEffect as w } from "react";
-import { TextInput as U } from "../TextInput/TextInput.js";
+import { jsxs as z, jsx as c } from "react/jsx-runtime";
+import { createPortal as U } from "react-dom";
+import { useState as l, useRef as S, useEffect as p } from "react";
 import '../../../assets/src/components/Ui/SearchInput/SearchInput.css';/* empty css                                                      */
-import { IconCaretUpDown as q } from "../Icons/Icons.js";
-const z = ({
-  name: k = "SearchInput",
-  label: x,
+import { getPortalContainer as Y, releasePortal as _ } from "../../../shared/utils/fn/portals.js";
+import { TextInput as q } from "../TextInput/TextInput.js";
+import { IconCaretUpDown as G } from "../Icons/Icons.js";
+const I = "search-input-global-portal", J = ({
+  name: v = "SearchInput",
+  label: k,
   placeholder: y = "",
   type: N = "text",
-  id: $,
-  isDisabled: h = !1,
-  errorMessage: F = "",
-  hasError: V = !1,
-  className: D = "",
-  isClearable: E,
-  isLoading: L,
-  value: r = "",
-  onChange: s,
-  options: n = []
+  id: P,
+  isDisabled: R = !1,
+  errorMessage: D = "",
+  hasError: E = !1,
+  className: L = "",
+  isClearable: V,
+  isLoading: F,
+  value: n = "",
+  onChange: r,
+  options: o = []
 }) => {
-  const [m, v] = o(r), [j, i] = o(""), [u, p] = o([]), [d, c] = o(!1), [g, A] = o(!1), [B, C] = o(!1), f = H(null);
-  w(() => {
-    if (r) {
-      const e = n.find((t) => t.value === r);
-      i(e ? e.label : r);
+  const [m, g] = l(n), [A, d] = l(""), [f, h] = l([]), [w, i] = l(!1), [x, B] = l(!1), [C, H] = l(!1), s = S(null), a = S(null);
+  p(() => (a.current = Y(I), () => _(I)), []), p(() => {
+    if (n) {
+      const e = o.find((t) => t.value === n);
+      d(e ? e.label : n), g(n);
     } else
-      i("");
-  }, [r, n]), w(() => {
-    if (m.trim() === "" && g) {
-      p(n);
+      d("");
+  }, [n, o]), p(() => {
+    if (m.trim() === "" && x) {
+      h(o);
       return;
     }
-    const e = n.filter(
+    const e = o.filter(
       (t) => t.label.toLowerCase().includes(m.toLowerCase())
     );
-    p(e);
-  }, [m, n, g]), w(() => {
+    h(e);
+  }, [m, o, x]), p(() => {
     const e = (t) => {
-      f.current && !f.current.contains(t.target) && c(!1);
+      s.current && !s.current.contains(t.target) && a.current && !a.current.contains(t.target) && i(!1);
     };
-    return document.addEventListener("mousedown", e), () => {
-      document.removeEventListener("mousedown", e);
+    return document.addEventListener("click", e), () => {
+      document.removeEventListener("click", e);
     };
   }, []);
   const K = (e) => {
     const t = e.target.value;
-    v(t), i(t), s == null || s(t), c(!0);
+    g(t), d(t), r == null || r(t), i(!0);
   }, b = (e) => {
-    v(e.value), i(e.label), s == null || s(e.value), c(!1);
+    g(e.value), d(e.label), r == null || r(e.value), i(!1);
   }, O = () => {
-    A(!0), c(!0), p(n);
-  }, P = (e) => {
-    e.key === "Enter" && u.length > 0 && d && b(u[0]);
-  }, S = (e) => {
-    var t;
-    if (e.stopPropagation(), !d) {
-      const a = (t = f.current) == null ? void 0 : t.getBoundingClientRect(), R = window.innerHeight - ((a == null ? void 0 : a.bottom) || 0);
-      C(R < 304);
+    B(!0), i(!0), h(o);
+  }, T = (e) => {
+    e.key === "Enter" && f.length > 0 && w && b(f[0]);
+  }, $ = (e) => {
+    if (e.stopPropagation(), !w && s.current) {
+      const t = s.current.getBoundingClientRect(), u = window.innerHeight - t.bottom;
+      H(u < 304 && t.top >= 304);
     }
-    c((a) => !a);
+    i((t) => !t);
+  }, j = () => {
+    if (!w || !x || f.length === 0 || !s.current || !a.current)
+      return null;
+    const e = s.current.getBoundingClientRect(), t = {
+      position: "fixed",
+      width: e.width,
+      left: e.left,
+      maxHeight: "304px",
+      zIndex: 9999
+    };
+    return C ? t.bottom = `${window.innerHeight - e.top}px` : t.top = `${e.bottom}px`, U(
+      /* @__PURE__ */ c("div", { className: "suggestions-portal", style: t, children: /* @__PURE__ */ c("ul", { className: "suggestions-list", children: f.map((u) => /* @__PURE__ */ c(
+        "li",
+        {
+          onClick: () => {
+            b(u);
+          },
+          children: u.label
+        },
+        u.value
+      )) }) }),
+      a.current
+    );
   };
-  return /* @__PURE__ */ I(T, { children: [
-    /* @__PURE__ */ l(
-      U,
+  return /* @__PURE__ */ z("div", { className: "search-input-container", ref: s, children: [
+    /* @__PURE__ */ c(
+      q,
       {
-        name: k,
-        label: x,
+        name: v,
+        label: k,
         type: N,
-        className: `${D}`,
-        value: j,
+        className: `${L}`,
+        value: A,
         onChange: K,
         placeholder: y,
-        id: $,
-        isDisabled: h,
-        isClearable: E,
-        hasError: V,
-        errorMessage: F,
-        isLoading: L,
+        id: P,
+        isDisabled: R,
+        isClearable: V,
+        hasError: E,
+        errorMessage: D,
+        isLoading: F,
         onFocus: O,
-        onKeyDown: P
+        onKeyDown: T
       }
     ),
-    /* @__PURE__ */ I("div", { className: "dropdown-input-test", children: [
-      /* @__PURE__ */ l("div", { className: "caret", onClick: S, children: /* @__PURE__ */ l(q, {}) }),
-      d && g && u.length > 0 && /* @__PURE__ */ l(
-        "div",
-        {
-          className: `input-box
-        ${d ? "opened" : ""} 
-        ${h ? "disabled" : ""}`,
-          ref: f,
-          onClick: S,
-          children: /* @__PURE__ */ l("ul", { className: `options ${B ? "above" : ""}`, children: u.map((e, t) => /* @__PURE__ */ l(
-            "li",
-            {
-              onClick: () => b(e),
-              children: e.label
-            },
-            `${e.value}-${t}`
-          )) })
-        }
-      )
-    ] })
+    /* @__PURE__ */ c("div", { className: "caret", onClick: $, children: /* @__PURE__ */ c(G, {}) }),
+    j()
   ] });
 };
-z.displayName = "SearchInput";
+J.displayName = "SearchInput";
 export {
-  z as SearchInput
+  J as SearchInput
 };

package/dist/shared/index.js

@@ -0,0 +1,5 @@
+import { getPortalContainer as o, releasePortal as t } from "./utils/fn/portals.js";
+export {
+  o as getPortalContainer,
+  t as releasePortal
+};

package/dist/shared/utils/fn/index.js

@@ -0,0 +1,5 @@
+import { getPortalContainer as o, releasePortal as t } from "./portals.js";
+export {
+  o as getPortalContainer,
+  t as releasePortal
+};

package/dist/shared/utils/fn/portals.js

@@ -0,0 +1,20 @@
+const n = /* @__PURE__ */ new Map(), r = (t) => {
+  if (n.has(t)) {
+    const e = n.get(t);
+    n.set(t, { ...e, refCount: e.refCount + 1 });
+  } else {
+    const e = document.createElement("div");
+    document.body.appendChild(e), n.set(t, { element: e, refCount: 1 });
+  }
+  return n.get(t).element;
+}, s = (t) => {
+  const e = n.get(t);
+  if (e) {
+    const o = e.refCount - 1;
+    o <= 0 ? (document.body.removeChild(e.element), n.delete(t)) : n.set(t, { ...e, refCount: o });
+  }
+};
+export {
+  r as getPortalContainer,
+  s as releasePortal
+};

package/dist/shared/utils/index.js

@@ -0,0 +1,5 @@
+import { getPortalContainer as o, releasePortal as t } from "./fn/portals.js";
+export {
+  o as getPortalContainer,
+  t as releasePortal
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "triafly-ui-kit",
-  "version": "1.0.80",
+  "version": "1.0.82",
   "description": "UI Kit from Triafly",
   "main": "./dist/main.js",
   "module": "./dist/main.js",