@reportportal/ui-kit 0.0.1-alpha.209 → 0.0.1-alpha.210

package/dist/autocompletes.js

@@ -1,71 +1,71 @@
-import { jsx as r, jsxs as P, Fragment as he } from "react/jsx-runtime";
-import { useState as ne, useRef as Me, useEffect as ke, useCallback as Q, forwardRef as Pe, useLayoutEffect as $e, useMemo as Le } from "react";
-import { c as Z } from "./bind-06a7ff84.js";
-import { Scrollbars as Oe } from "rc-scrollbars";
-import { B as Te } from "./bubblesLoader-f3ffa240.js";
-import { B as je } from "./button-7ab874f3.js";
-import { S as He } from "./plus-199fb2a8.js";
-import { i as Ee } from "./isEmpty-ccacb5ff.js";
-import { createPortal as We } from "react-dom";
+import { jsx as r, jsxs as B, Fragment as he } from "react/jsx-runtime";
+import { useState as oe, useRef as ze, useEffect as we, useCallback as Y, forwardRef as Te, useLayoutEffect as je, useMemo as He } from "react";
+import { c as Q } from "./bind-06a7ff84.js";
+import { Scrollbars as We } from "rc-scrollbars";
+import { B as Ye } from "./bubblesLoader-f3ffa240.js";
+import { B as Ke } from "./button-7ab874f3.js";
+import { S as Xe } from "./plus-199fb2a8.js";
+import { i as Me } from "./isEmpty-ccacb5ff.js";
+import { createPortal as Ge } from "react-dom";
 import pe from "downshift";
-import { useFloating as Re, autoUpdate as Ae, flip as Ye, size as Ke } from "@floating-ui/react";
-import { F as Xe } from "./fieldText-1749da7a.js";
-import { S as De } from "./dropdown-0260bb66.js";
-import { S as Ge } from "./close-4d480ef7.js";
-import { S as Je } from "./clear-53660571.js";
+import { useFloating as Be, autoUpdate as Pe, flip as Je, size as Qe } from "@floating-ui/react";
+import { F as Ze } from "./fieldText-1749da7a.js";
+import { S as Le } from "./dropdown-0260bb66.js";
+import { S as qe } from "./close-4d480ef7.js";
+import { S as Ue } from "./clear-53660571.js";
 import "./openEye-950159cb.js";
 import "./baseIconButton-251479f7.js";
 import "./spinLoader-c4a53718.js";
 import "./maxValueDisplay-9be01a75.js";
 import "./fieldLabel.js";
-const Qe = "_disabled_1rpph_43", Ze = "_input_1rpph_107", qe = {
+const Ve = "_disabled_1rpph_43", et = "_input_1rpph_107", tt = {
   "selected-item": "_selected-item_1rpph_16",
   "validation-error": "_validation-error_1rpph_35",
   "highlight-un-stored-item": "_highlight-un-stored-item_1rpph_40",
-  disabled: Qe,
+  disabled: Ve,
   "mobile-disabled": "_mobile-disabled_1rpph_48",
   "selected-item-text": "_selected-item-text_1rpph_54",
   "single-line": "_single-line_1rpph_58",
   "cross-icon": "_cross-icon_1rpph_64",
-  input: Ze
-}, me = Z.bind(qe), Ue = (t) => t.scrollWidth > t.clientWidth, Ve = ({
+  input: et
+}, me = Q.bind(tt), ot = (t) => t.scrollWidth > t.clientWidth, st = ({
   item: t,
   onRemoveItem: e,
   disabled: n = !1,
-  mobileDisabled: s = !1,
-  parseValueToString: o,
-  error: i = !1,
+  mobileDisabled: o = !1,
+  parseValueToString: s,
+  error: c = !1,
   editItem: h,
   editable: u = !1,
-  getAdditionalCreationCondition: x = () => !0,
+  getAdditionalCreationCondition: S = () => !0,
   storedOption: y = !0,
-  highlightUnStoredItem: f = !1,
-  variant: z = "light",
-  getItemName: k,
+  highlightUnStoredItem: p = !1,
+  variant: C = "light",
+  getItemName: I,
   singleLine: m = !1,
-  className: R,
-  textClassName: A
+  className: M,
+  textClassName: R
 }) => {
-  const [g, w] = ne(!1), [D, C] = ne(""), [d, a] = ne(!1), l = Me(null), p = () => {
-    !n && u && !y && (C((k == null ? void 0 : k(t)) || (o == null ? void 0 : o(t)) || ""), w(!0));
-  }, c = (B) => {
-    C(B.target.value);
-  }, v = (B) => {
-    const H = x(D);
-    B.key === "Enter" && H && (h(t, D), w(!1), C(""));
-  }, F = () => {
-    w(!1), C("");
-  }, $ = (B) => {
-    B.stopPropagation(), e(t);
-  }, j = (o == null ? void 0 : o(t)) || "";
-  ke(() => {
+  const [g, v] = oe(!1), [A, z] = oe(""), [d, a] = oe(!1), l = ze(null), _ = () => {
+    !n && u && !y && (z((I == null ? void 0 : I(t)) || (s == null ? void 0 : s(t)) || ""), v(!0));
+  }, i = (F) => {
+    z(F.target.value);
+  }, b = (F) => {
+    const T = S(A);
+    F.key === "Enter" && T && (h(t, A), v(!1), z(""));
+  }, D = () => {
+    v(!1), z("");
+  }, L = (F) => {
+    F.stopPropagation(), e(t);
+  }, j = (s == null ? void 0 : s(t)) || "";
+  we(() => {
     if (l.current && m) {
-      const B = () => {
-        l.current && a(Ue(l.current));
+      const F = () => {
+        l.current && a(ot(l.current));
       };
-      if (B(), typeof ResizeObserver < "u") {
-        const H = new ResizeObserver(B);
-        return H.observe(l.current), () => H.disconnect();
+      if (F(), typeof ResizeObserver < "u") {
+        const T = new ResizeObserver(F);
+        return T.observe(l.current), () => T.disconnect();
       }
     } else
       a(!1);
@@ -75,29 +75,29 @@ const Qe = "_disabled_1rpph_43", Ze = "_input_1rpph_107", qe = {
     {
       "single-line": m
     },
-    A
+    R
   ), O = me(
     "selected-item",
-    z,
+    C,
     {
-      [`validation-${i}`]: i,
+      [`validation-${c}`]: c,
       disabled: n,
-      "mobile-disabled": s,
-      "highlight-un-stored-item": f && !y
+      "mobile-disabled": o,
+      "highlight-un-stored-item": p && !y
     },
-    R
+    M
   );
   return g ? /* @__PURE__ */ r(
     "input",
     {
       autoFocus: !0,
-      value: D,
-      onChange: c,
-      onKeyDown: v,
-      onBlur: F,
+      value: A,
+      onChange: i,
+      onKeyDown: b,
+      onBlur: D,
       className: me("input")
     }
-  ) : /* @__PURE__ */ P("div", { className: O, onClick: p, children: [
+  ) : /* @__PURE__ */ B("div", { className: O, onClick: _, children: [
     /* @__PURE__ */ r(
       "span",
       {
@@ -112,85 +112,85 @@ const Qe = "_disabled_1rpph_43", Ze = "_input_1rpph_107", qe = {
       {
         type: "button",
         className: me("cross-icon", {
-          [`validation-${i}`]: i,
-          "mobile-disabled": s,
+          [`validation-${c}`]: c,
+          "mobile-disabled": o,
           disabled: n
         }),
-        onClick: $,
-        children: /* @__PURE__ */ r(Ge, {})
+        onClick: L,
+        children: /* @__PURE__ */ r(qe, {})
       }
     )
   ] });
-}, et = ({
+}, nt = ({
   items: t = [],
   parseValueToString: e,
   getItemValidationErrorType: n,
-  storedItemsMap: s = {},
-  highlightUnStoredItem: o = !1,
-  renderCustomSelectedItem: i,
+  storedItemsMap: o = {},
+  highlightUnStoredItem: s = !1,
+  renderCustomSelectedItem: c,
   selectedItemSingleLine: h,
   selectedItemClassName: u,
-  selectedItemTextClassName: x,
+  selectedItemTextClassName: S,
   ...y
-}) => t.map((f) => i ? i(f) : /* @__PURE__ */ r(
-  Ve,
+}) => t.map((p) => c ? c(p) : /* @__PURE__ */ r(
+  st,
   {
     parseValueToString: e,
-    error: (n == null ? void 0 : n(f)) || "",
-    item: f,
-    storedOption: !!s[e(f)],
-    highlightUnStoredItem: o,
+    error: (n == null ? void 0 : n(p)) || "",
+    item: p,
+    storedOption: !!o[e(p)],
+    highlightUnStoredItem: s,
     singleLine: h,
     className: u,
-    textClassName: x,
+    textClassName: S,
     ...y
   },
-  e == null ? void 0 : e(f)
-)), tt = "_prompt_1xfmd_16", ot = {
-  prompt: tt
-}, st = Z.bind(ot), nt = ({ children: t = null }) => /* @__PURE__ */ r("div", { className: st("prompt"), children: t }), rt = "_item_zw4ux_16", lt = "_divider_zw4ux_24", ct = "_active_zw4ux_49", it = "_value_zw4ux_55", at = "_tag_zw4ux_69", dt = "_disabled_zw4ux_80", ut = {
-  item: rt,
-  divider: lt,
+  e == null ? void 0 : e(p)
+)), rt = "_prompt_1xfmd_16", lt = {
+  prompt: rt
+}, ct = Q.bind(lt), it = ({ children: t = null }) => /* @__PURE__ */ r("div", { className: ct("prompt"), children: t }), at = "_item_zw4ux_16", dt = "_divider_zw4ux_24", ut = "_active_zw4ux_49", mt = "_value_zw4ux_55", ft = "_tag_zw4ux_69", pt = "_disabled_zw4ux_80", _t = {
+  item: at,
+  divider: dt,
   "new-item": "_new-item_zw4ux_31",
-  active: ct,
-  value: it,
+  active: ut,
+  value: mt,
   "key-variant": "_key-variant_zw4ux_66",
-  tag: at,
+  tag: ft,
   "button-active": "_button-active_zw4ux_80",
-  disabled: dt,
+  disabled: pt,
   "value-variant": "_value-variant_zw4ux_100"
-}, V = Z.bind(ut), Se = ({
+}, V = Q.bind(_t), Ae = ({
   isActive: t = !1,
   isSelected: e = !1,
   isNew: n = !1,
-  children: s = null,
-  disabled: o = !1,
-  optionVariant: i = "",
+  children: o = null,
+  disabled: s = !1,
+  optionVariant: c = "",
   newItemButtonText: h = "",
   ...u
 }) => {
-  const x = () => h || (i === "key-variant" ? "New key" : "New value");
-  return n ? /* @__PURE__ */ P(he, { children: [
+  const S = () => h || (c === "key-variant" ? "New key" : "New value");
+  return n ? /* @__PURE__ */ B(he, { children: [
     /* @__PURE__ */ r("div", { className: V("divider") }),
-    /* @__PURE__ */ P(
+    /* @__PURE__ */ B(
       "li",
       {
-        className: V("new-item", i, {
+        className: V("new-item", c, {
           active: t,
           selected: e,
-          disabled: o
+          disabled: s
         }),
         ...u,
         children: [
-          /* @__PURE__ */ r("span", { className: V("value"), children: s }),
+          /* @__PURE__ */ r("span", { className: V("value"), children: o }),
           /* @__PURE__ */ r(
-            je,
+            Ke,
             {
-              ...!o && u,
+              ...!s && u,
               className: V({ "button-active": t }),
-              icon: /* @__PURE__ */ r(He, {}),
+              icon: /* @__PURE__ */ r(Xe, {}),
               variant: "text",
-              children: x()
+              children: S()
             }
           )
         ]
@@ -199,163 +199,163 @@ const Qe = "_disabled_1rpph_43", Ze = "_input_1rpph_107", qe = {
   ] }) : /* @__PURE__ */ r(
     "li",
     {
-      className: V("item", i, {
+      className: V("item", c, {
         active: t,
         selected: e,
-        disabled: o
+        disabled: s
       }),
-      ...o ? {} : u,
-      children: /* @__PURE__ */ r("span", { className: V("label", "tag"), children: s })
+      ...s ? {} : u,
+      children: /* @__PURE__ */ r("span", { className: V("label", "tag"), children: o })
     }
   );
-}, mt = "_container_12uzd_16", ft = {
-  container: mt,
+}, ht = "_container_12uzd_16", wt = {
+  container: ht,
   "empty-list-message": "_empty-list-message_12uzd_20",
   "limitation-item": "_limitation-item_12uzd_28"
-}, fe = Z.bind(ft), pt = (t) => {
+}, fe = Q.bind(wt), vt = (t) => {
   const {
     options: e,
     async: n,
-    inputValue: s,
-    loading: o,
-    createWithoutConfirmation: i,
+    inputValue: o,
+    loading: s,
+    createWithoutConfirmation: c,
     customEmptyListMessage: h,
     customNoMatchesMessage: u,
-    optionVariant: x,
+    optionVariant: S,
     newItemButtonText: y,
-    renderOption: f,
-    getUniqKey: z,
-    getItemProps: k,
+    renderOption: p,
+    getUniqKey: C,
+    getItemProps: I,
     parseValueToString: m,
-    limitationText: R = "Too many results. Type to search",
-    optionsLimit: A = 0
-  } = t, g = Q(() => (e || []).filter((c) => m(c).toUpperCase().indexOf((s.toUpperCase() || "").trim()) > -1), [s, e, m]), w = Q(
-    (c, v, F = !1) => f ? f(c, v, F, k) : /* @__PURE__ */ r(
-      Se,
+    limitationText: M = "Too many results. Type to search",
+    optionsLimit: R = 0
+  } = t, g = Y(() => (e || []).filter((i) => m(i).toUpperCase().indexOf((o.toUpperCase() || "").trim()) > -1), [o, e, m]), v = Y(
+    (i, b, D = !1) => p ? p(i, b, D, I) : /* @__PURE__ */ r(
+      Ae,
       {
-        optionVariant: x,
-        ...k({ item: c, index: v }),
-        isNew: F,
+        optionVariant: S,
+        ...I({ item: i, index: b }),
+        isNew: D,
         newItemButtonText: y,
-        children: m(c)
+        children: m(i)
       },
-      (z == null ? void 0 : z(c)) || m(c)
+      (C == null ? void 0 : C(i)) || m(i)
     ),
-    [k, z, y, x, m, f]
-  ), D = Q(
-    (c) => c.length ? c.map((v, F) => w(v, F)) : "",
-    [w]
-  ), C = Q(
-    (c) => {
-      const v = c.length;
-      return /* @__PURE__ */ r("div", { className: fe({ container: !v }), children: /* @__PURE__ */ r(
-        Se,
+    [I, C, y, S, m, p]
+  ), A = Y(
+    (i) => i.length ? i.map((b, D) => v(b, D)) : "",
+    [v]
+  ), z = Y(
+    (i) => {
+      const b = i.length;
+      return /* @__PURE__ */ r("div", { className: fe({ container: !b }), children: /* @__PURE__ */ r(
+        Ae,
         {
-          optionVariant: x,
+          optionVariant: S,
           isNew: !0,
           newItemButtonText: y,
-          ...k({ item: s, index: v }),
-          children: m(s)
+          ...I({ item: o, index: b }),
+          children: m(o)
         },
-        m(s)
+        m(o)
       ) });
     },
-    [k, s, y, x, m]
-  ), d = Q(
-    (c) => o ? /* @__PURE__ */ P(he, { children: [
-      /* @__PURE__ */ r(nt, { children: /* @__PURE__ */ r(Te, {}) }),
-      !i && C(c)
+    [I, o, y, S, m]
+  ), d = Y(
+    (i) => s ? /* @__PURE__ */ B(he, { children: [
+      /* @__PURE__ */ r(it, { children: /* @__PURE__ */ r(Ye, {}) }),
+      !c && z(i)
     ] }) : "",
-    [i, o, C]
-  ), a = Q(() => {
-    const c = (e == null ? void 0 : e.length) === 0 ? h || "No available options" : u || "No matches found";
-    return /* @__PURE__ */ r("div", { className: fe("empty-list-message"), children: c });
-  }, [h, u, e == null ? void 0 : e.length]), l = n ? e : g(), p = d(e);
-  return p || /* @__PURE__ */ P("div", { className: fe({ container: e.length }), children: [
-    /* @__PURE__ */ P(Oe, { autoHeight: !0, autoHeightMax: 216, hideTracksWhenNotNeeded: !0, children: [
-      Ee(l) ? a() : D(l),
-      (l == null ? void 0 : l.length) > A && A > 0 && R ? /* @__PURE__ */ r("li", { className: fe("limitation-item"), "aria-hidden": "true", children: R }) : null
+    [c, s, z]
+  ), a = Y(() => {
+    const i = (e == null ? void 0 : e.length) === 0 ? h || "No available options" : u || "No matches found";
+    return /* @__PURE__ */ r("div", { className: fe("empty-list-message"), children: i });
+  }, [h, u, e == null ? void 0 : e.length]), l = n ? e : g(), _ = d(e);
+  return _ || /* @__PURE__ */ B("div", { className: fe({ container: e.length }), children: [
+    /* @__PURE__ */ B(We, { autoHeight: !0, autoHeightMax: 216, hideTracksWhenNotNeeded: !0, children: [
+      Me(l) ? a() : A(l),
+      (l == null ? void 0 : l.length) > R && R > 0 && M ? /* @__PURE__ */ r("li", { className: fe("limitation-item"), "aria-hidden": "true", children: M }) : null
     ] }),
-    !i && C(l)
+    !c && z(l)
   ] });
-}, _t = "_menu_f64z5_16", ht = "_opened_f64z5_34", wt = "_dark_f64z5_37", vt = {
-  menu: _t,
-  opened: ht,
-  dark: wt
-}, bt = Z.bind(vt), yt = (t, e) => !t || t <= e.trim().length, Fe = Pe(
+}, bt = "_menu_f64z5_16", yt = "_opened_f64z5_34", gt = "_dark_f64z5_37", xt = {
+  menu: bt,
+  opened: yt,
+  dark: gt
+}, Nt = Q.bind(xt), St = (t, e) => !t || t <= e.trim().length, $e = Te(
   ({
     isOpen: t = !1,
     style: e = {},
     minLength: n = 1,
-    isDropdownMode: s,
-    inputValue: o = "",
-    className: i = "",
+    isDropdownMode: o,
+    inputValue: s = "",
+    className: c = "",
     ...h
   }, u) => /* @__PURE__ */ r(
     "ul",
     {
       ref: u,
-      className: bt(
+      className: Nt(
         "menu",
-        { opened: t && (s || yt(n, o)) },
-        i
+        { opened: t && (o || St(n, s)) },
+        c
       ),
       style: e,
-      children: /* @__PURE__ */ r(pt, { inputValue: o, ...h })
+      children: /* @__PURE__ */ r(vt, { inputValue: s, ...h })
     }
   )
-), ze = (t, e) => typeof t == "string" ? t : e ? String(t[e(t)]) : "", _e = (t, e) => {
-  var s;
-  return t === e ? !0 : !!(t && e && typeof t == "object" && typeof e == "object" && Object.keys(t).length === Object.keys(e).length && ((s = Object.entries(t)) != null && s.every(([o, i]) => _e(i, e[o]))));
-}, gt = (t, e, n) => typeof t == "string" ? t === e : n ? (() => {
-  const s = n(t);
-  return t[s] === e[s];
-})() : !1, xt = ({
+), De = (t, e) => typeof t == "string" ? t : e ? String(t[e(t)]) : "", _e = (t, e) => {
+  var o;
+  return t === e ? !0 : !!(t && e && typeof t == "object" && typeof e == "object" && Object.keys(t).length === Object.keys(e).length && ((o = Object.entries(t)) != null && o.every(([s, c]) => _e(c, e[s]))));
+}, Et = (t, e, n) => typeof t == "string" ? t === e : n ? (() => {
+  const o = n(t);
+  return t[o] === e[o];
+})() : !1, It = ({
   options: t = [],
   onChange: e,
   selectedItems: n = [],
-  handleUnStoredItemCb: s = null,
-  existingItemsMap: o = {},
-  children: i,
-  customizeNewSelectedValue: h = (f) => f,
+  handleUnStoredItemCb: o = null,
+  existingItemsMap: s = {},
+  children: c,
+  customizeNewSelectedValue: h = (p) => p,
   getOptionUniqKey: u,
-  getOptionUniqKeyValue: x,
+  getOptionUniqKeyValue: S,
   ...y
 }) => {
-  const [f, z] = ne(o), k = (d, a) => {
+  const [p, C] = oe(s), I = (d, a) => {
     const l = {
-      ...f
+      ...p
     };
-    d.forEach((p) => {
-      if (t.find((c) => gt(c, p, u))) {
-        const c = ze(p, u);
-        l[c] = !0;
+    d.forEach((_) => {
+      if (t.find((i) => Et(i, _, u))) {
+        const i = De(_, u);
+        l[i] = !0;
       }
-    }), z(l), a(l);
+    }), C(l), a(l);
   }, m = (d, a) => {
-    const l = ze(d, u);
-    if (l in f) {
-      const p = { ...f };
-      delete p[l], z(p), a(p);
+    const l = De(d, u);
+    if (l in p) {
+      const _ = { ...p };
+      delete _[l], C(_), a(_);
     } else
-      a(f);
+      a(p);
+  }, M = (d, a) => {
+    const l = h(d), _ = Array.isArray(l) ? l : [l], b = [...n.filter((L) => _.indexOf(L) < 0), ..._];
+    e == null || e(b, a), I(_, (L) => o == null ? void 0 : o(b, L));
   }, R = (d, a) => {
-    const l = h(d), p = Array.isArray(l) ? l : [l], v = [...n.filter(($) => p.indexOf($) < 0), ...p];
-    e == null || e(v, a), k(p, ($) => s == null ? void 0 : s(v, $));
-  }, A = (d, a) => {
-    const l = n.indexOf(d), p = [...n];
-    p.splice(l, 1, a), e == null || e(p, null);
+    const l = n.indexOf(d), _ = [...n];
+    _.splice(l, 1, a), e == null || e(_, null);
   }, g = (d, a) => {
-    const l = n.filter((c) => !_e(c, d));
-    e == null || e(l, a), m(d, (c) => s == null ? void 0 : s(l, c));
-  }, w = (d, a) => {
-    d && R(d, a);
-  }, D = (d) => ({
+    const l = n.filter((i) => !_e(i, d));
+    e == null || e(l, a), m(d, (i) => o == null ? void 0 : o(l, i));
+  }, v = (d, a) => {
+    d && M(d, a);
+  }, A = (d) => ({
     removeItem: g,
-    editItem: A,
+    editItem: R,
     handleChange: e,
-    getOptionUniqKeyValue: x,
-    storedItemsMap: f,
+    getOptionUniqKeyValue: S,
+    storedItemsMap: p,
     ...d
   });
   return /* @__PURE__ */ r(
@@ -375,199 +375,199 @@ const Qe = "_disabled_1rpph_43", Ze = "_input_1rpph_107", qe = {
             return a;
         }
       },
-      onChange: w,
+      onChange: v,
       selectedItem: null,
-      children: (d) => i == null ? void 0 : i(D(d))
+      children: (d) => c == null ? void 0 : c(A(d))
     }
   );
-}, Be = "Enter", Nt = "Tab", It = "_autocomplete_1so4a_16", kt = "_disabled_1so4a_32", Et = "_error_1so4a_35", St = "_touched_1so4a_35", zt = "_input_1so4a_77", Ct = {
-  autocomplete: It,
+}, Oe = "Enter", kt = "Tab", Ct = "_autocomplete_1so4a_16", zt = "_disabled_1so4a_32", Mt = "_error_1so4a_35", Rt = "_touched_1so4a_35", At = "_input_1so4a_77", Dt = {
+  autocomplete: Ct,
   "autocomplete-wrapper": "_autocomplete-wrapper_1so4a_28",
-  disabled: kt,
-  error: Et,
-  touched: St,
+  disabled: zt,
+  error: Mt,
+  touched: Rt,
   "clear-icon": "_clear-icon_1so4a_46",
   "clear-icon--disabled": "_clear-icon--disabled_1so4a_56",
   "autocomplete-input": "_autocomplete-input_1so4a_60",
   "single-line-mode": "_single-line-mode_1so4a_68",
   "mobile-disabled": "_mobile-disabled_1so4a_72",
-  input: zt,
+  input: At,
   "type-number": "_type-number_1so4a_101",
   "error-text": "_error-text_1so4a_112",
   "dropdown-button": "_dropdown-button_1so4a_121",
   "icon-reversed": "_icon-reversed_1so4a_129"
-}, J = Z.bind(Ct), oo = (t) => {
+}, J = Q.bind(Dt), co = (t) => {
   const {
     options: e = [],
     loading: n = !1,
-    onStateChange: s = () => {
+    onStateChange: o = () => {
     },
-    value: o = [],
-    placeholder: i = "",
+    value: s = [],
+    placeholder: c = "",
     error: h = "",
     touched: u = !1,
-    creatable: x = !1,
+    creatable: S = !1,
     editable: y = !1,
-    onChange: f = () => {
+    onChange: p = () => {
     },
-    onFocus: z = () => {
+    onFocus: C = () => {
     },
-    onBlur: k = () => {
+    onBlur: I = () => {
     },
     disabled: m = !1,
-    isDropdownMode: R = !1,
-    mobileDisabled: A = !1,
+    isDropdownMode: M = !1,
+    mobileDisabled: R = !1,
     inputProps: g = {},
-    parseValueToString: w = (_) => _ == null ? "" : String(_),
-    maxLength: D = null,
-    async: C = !1,
+    parseValueToString: v = (f) => f == null ? "" : String(f),
+    maxLength: A = null,
+    async: z = !1,
     customClass: d = "",
     createWithoutConfirmation: a = !1,
     getItemValidationErrorType: l = null,
-    clearItemsError: p = () => {
+    clearItemsError: _ = () => {
     },
-    getAdditionalCreationCondition: c = () => !0,
-    highlightUnStoredItem: v = !1,
-    parseInputValueFn: F = null,
-    handleUnStoredItemCb: $ = null,
+    getAdditionalCreationCondition: i = () => !0,
+    highlightUnStoredItem: b = !1,
+    parseInputValueFn: D = null,
+    handleUnStoredItemCb: L = null,
     dataAutomationId: j = "",
     existingItemsMap: ee = {},
-    customizeNewSelectedValue: O = (_) => _,
-    renderCustomSelectedItem: B,
-    useFixedPositioning: H,
-    newItemButtonText: we = "",
-    menuClassName: re = "",
-    selectedItemSingleLine: le,
-    selectedItemClassName: ve,
-    selectedItemTextClassName: te,
+    customizeNewSelectedValue: O = (f) => f,
+    renderCustomSelectedItem: F,
+    useFixedPositioning: T,
+    newItemButtonText: ve = "",
+    menuClassName: K = "",
+    selectedItemSingleLine: se,
+    selectedItemClassName: ne,
+    selectedItemTextClassName: re,
     ...be
-  } = t, { refs: ce, floatingStyles: ye } = Re({
+  } = t, { refs: le, floatingStyles: Z } = Be({
     placement: "bottom-start",
-    strategy: H ? "fixed" : "absolute",
-    whileElementsMounted: Ae
-  }), ge = o.length === 0 && !m ? i : "", b = Me(null);
-  ke(() => {
-    p();
-  }, [p, o]);
-  const T = (_, I) => {
-    f(_, I);
-  }, q = (_, I, E) => ({ item: N, index: G, ...W }) => _({
+    strategy: T ? "fixed" : "absolute",
+    whileElementsMounted: Pe
+  }), ye = s.length === 0 && !m ? c : "", te = ze(null);
+  we(() => {
+    _();
+  }, [_, s]);
+  const ge = (f, x) => {
+    p(f, x);
+  }, xe = (f, x, E) => ({ item: N, index: G, ...H }) => f({
     item: N,
     index: G,
-    isSelected: E.some((Y) => _e(Y, N)),
-    ...W,
-    isActive: I === G
-  }), K = ({
-    event: _,
-    removeItem: I,
+    isSelected: E.some((W) => _e(W, N)),
+    ...H,
+    isActive: x === G
+  }), w = ({
+    event: f,
+    removeItem: x,
     inputValue: E
   }) => {
-    _.key === "Backspace" && !E && o.length && I(o[o.length - 1], null);
-  }, X = ({
-    inputValue: _,
-    selectItem: I,
+    f.key === "Backspace" && !E && s.length && x(s[s.length - 1], null);
+  }, $ = ({
+    inputValue: f,
+    selectItem: x,
     clearSelection: E
   }) => {
-    if (F) {
-      const N = F(_);
-      (N.length ? N : [_]).forEach((W) => I(W)), E();
+    if (D) {
+      const N = D(f);
+      (N.length ? N : [f]).forEach((H) => x(H)), E();
     } else
-      I(_), E();
-  }, L = (_) => (I) => {
-    _(I, null), b.current && b.current.focus();
-  }, oe = e.filter((_) => o.every((I) => !_e(I, _)));
+      x(f), E();
+  }, q = (f) => (x) => {
+    f(x, null), te.current && te.current.focus();
+  }, X = e.filter((f) => s.every((x) => !_e(x, f)));
   return /* @__PURE__ */ r(
-    xt,
+    It,
     {
-      onChange: T,
-      itemToString: w,
-      selectedItems: o,
-      onStateChange: s,
+      onChange: ge,
+      itemToString: v,
+      selectedItems: s,
+      onStateChange: o,
       options: e,
       existingItemsMap: ee,
-      handleUnStoredItemCb: $,
+      handleUnStoredItemCb: L,
       customizeNewSelectedValue: O,
       children: ({
-        getInputProps: _,
-        getItemProps: I,
+        getInputProps: f,
+        getItemProps: x,
         isOpen: E,
         inputValue: N = "",
         highlightedIndex: G,
-        removeItem: W,
-        editItem: Y,
-        openMenu: xe,
+        removeItem: H,
+        editItem: W,
+        openMenu: ce,
         selectItem: ie,
-        clearSelection: Ne,
-        toggleMenu: ae,
-        storedItemsMap: Ie,
-        getRootProps: de
+        clearSelection: ae,
+        toggleMenu: U,
+        storedItemsMap: Ne,
+        getRootProps: Se
       }) => {
-        const M = de(void 0, { suppressRefError: !0 }), U = {
-          ...M,
-          ref: (S) => (ce.setReference(S), M.ref(S))
-        }, se = N ?? "";
-        return /* @__PURE__ */ P("div", { ...U, className: J("autocomplete-wrapper"), children: [
-          /* @__PURE__ */ P(he, { children: [
-            /* @__PURE__ */ P(
+        const Ee = Se(void 0, { suppressRefError: !0 }), de = {
+          ...Ee,
+          ref: (k) => (le.setReference(k), Ee.ref(k))
+        }, Ie = N ?? "";
+        return /* @__PURE__ */ B("div", { ...de, className: J("autocomplete-wrapper"), children: [
+          /* @__PURE__ */ B(he, { children: [
+            /* @__PURE__ */ B(
               "div",
               {
                 className: J("autocomplete", d, {
-                  "mobile-disabled": A,
+                  "mobile-disabled": R,
                   error: h,
                   touched: u,
                   disabled: m
                 }),
                 children: [
-                  /* @__PURE__ */ P(
+                  /* @__PURE__ */ B(
                     "div",
                     {
                       className: J("autocomplete-input", {
-                        "mobile-disabled": A,
-                        "single-line-mode": le
+                        "mobile-disabled": R,
+                        "single-line-mode": se
                       }),
                       children: [
                         /* @__PURE__ */ r(
-                          et,
+                          nt,
                           {
-                            items: o,
-                            onRemoveItem: L(W),
+                            items: s,
+                            onRemoveItem: q(H),
                             disabled: m,
-                            mobileDisabled: A,
-                            parseValueToString: w,
+                            mobileDisabled: R,
+                            parseValueToString: v,
                             getItemValidationErrorType: l,
-                            renderCustomSelectedItem: B,
-                            editItem: Y,
+                            renderCustomSelectedItem: F,
+                            editItem: W,
                             editable: y,
-                            getAdditionalCreationCondition: c,
-                            storedItemsMap: Ie,
-                            highlightUnStoredItem: v,
-                            selectedItemSingleLine: le,
-                            selectedItemClassName: ve,
-                            selectedItemTextClassName: te
+                            getAdditionalCreationCondition: i,
+                            storedItemsMap: Ne,
+                            highlightUnStoredItem: b,
+                            selectedItemSingleLine: se,
+                            selectedItemClassName: ne,
+                            selectedItemTextClassName: re
                           }
                         ),
                         /* @__PURE__ */ r(
                           "input",
                           {
-                            ..._({
-                              ref: b,
-                              placeholder: ge,
-                              maxLength: D,
+                            ...f({
+                              ref: te,
+                              placeholder: ye,
+                              maxLength: A,
                               onFocus: () => {
-                                R && xe(), z();
+                                M && ce(), C();
                               },
-                              onKeyDown: (S) => {
-                                S.key === Be && N && x && c(N) && X({
+                              onKeyDown: (k) => {
+                                k.key === Oe && N && S && i(N) && $({
                                   inputValue: N,
                                   selectItem: ie,
-                                  clearSelection: Ne
-                                }), K({ event: S, removeItem: W, inputValue: N });
+                                  clearSelection: ae
+                                }), w({ event: k, removeItem: H, inputValue: N });
                               },
                               onBlur: () => {
-                                k(), N && x && c(N) && X({
+                                I(), N && S && i(N) && $({
                                   inputValue: N,
                                   selectItem: ie,
-                                  clearSelection: Ne
+                                  clearSelection: ae
                                 });
                               },
                               disabled: m,
@@ -580,28 +580,28 @@ const Qe = "_disabled_1rpph_43", Ze = "_input_1rpph_107", qe = {
                       ]
                     }
                   ),
-                  (g == null ? void 0 : g.clearable) && !Ee(o) && /* @__PURE__ */ r(
+                  (g == null ? void 0 : g.clearable) && !Me(s) && /* @__PURE__ */ r(
                     "button",
                     {
                       type: "button",
                       className: J("clear-icon", { "clear-icon--disabled": m }),
                       onClick: () => {
-                        var S;
-                        return !m && ((S = g == null ? void 0 : g.onClear) == null ? void 0 : S.call(g));
+                        var k;
+                        return !m && ((k = g == null ? void 0 : g.onClear) == null ? void 0 : k.call(g));
                       },
-                      onMouseDown: (S) => S.preventDefault(),
-                      children: /* @__PURE__ */ r(Je, {})
+                      onMouseDown: (k) => k.preventDefault(),
+                      children: /* @__PURE__ */ r(Ue, {})
                     }
                   ),
-                  R && /* @__PURE__ */ r(
+                  M && /* @__PURE__ */ r(
                     "button",
                     {
                       type: "button",
                       className: J("dropdown-button", { "icon-reversed": E }),
-                      onClick: () => ae(),
+                      onClick: () => U(),
                       "aria-label": "Toggle dropdown",
                       "aria-expanded": E,
-                      children: /* @__PURE__ */ r(De, {})
+                      children: /* @__PURE__ */ r(Le, {})
                     }
                   )
                 ]
@@ -610,21 +610,21 @@ const Qe = "_disabled_1rpph_43", Ze = "_input_1rpph_107", qe = {
             h && u && /* @__PURE__ */ r("span", { className: J("error-text"), children: h })
           ] }),
           /* @__PURE__ */ r(
-            Fe,
+            $e,
             {
               isOpen: E,
               loading: n,
-              async: C,
-              ref: ce.setFloating,
-              newItemButtonText: we,
-              isDropdownMode: R,
-              style: ye,
-              inputValue: se.trim(),
-              getItemProps: q(I, G, o),
-              parseValueToString: w,
+              async: z,
+              ref: le.setFloating,
+              newItemButtonText: ve,
+              isDropdownMode: M,
+              style: Z,
+              inputValue: Ie.trim(),
+              getItemProps: xe(x, G, s),
+              parseValueToString: v,
               createWithoutConfirmation: a,
-              options: oe,
-              className: re,
+              options: X,
+              className: K,
               ...be
             }
           )
@@ -632,220 +632,242 @@ const Qe = "_disabled_1rpph_43", Ze = "_input_1rpph_107", qe = {
       }
     }
   );
-}, Mt = ({ skip: t }) => {
-  $e(() => {
+}, Ft = ({ skip: t }) => {
+  je(() => {
     if (t)
       return;
     let e = window.scrollY, n = !0;
-    const s = 300, o = () => {
+    const o = 300, s = () => {
       if (!n)
         return;
       window.scrollY !== e && window.scrollTo(0, e);
-    }, i = (u) => {
-      n && (u.preventDefault(), u.stopImmediatePropagation(), o());
+    }, c = (u) => {
+      n && (u.preventDefault(), u.stopImmediatePropagation(), s());
     };
-    e = window.scrollY, window.addEventListener("scroll", i, { passive: !1, capture: !0 }), requestAnimationFrame(() => {
-      e = window.scrollY, o();
+    e = window.scrollY, window.addEventListener("scroll", c, { passive: !1, capture: !0 }), requestAnimationFrame(() => {
+      e = window.scrollY, s();
     });
     const h = setTimeout(() => {
       n = !1;
-    }, s);
+    }, o);
     return () => {
-      clearTimeout(h), window.removeEventListener("scroll", i, { capture: !0 });
+      clearTimeout(h), window.removeEventListener("scroll", c, { capture: !0 });
     };
   }, [t]);
-}, Rt = ({ skip: t, reference: e }) => {
-  ke(() => {
+}, Bt = ({ skip: t, reference: e }) => {
+  we(() => {
     if (t)
       return;
     const n = () => {
-      const s = e.current;
-      s instanceof HTMLElement && s.blur();
+      const o = e.current;
+      o instanceof HTMLElement && o.blur();
     };
     return window.addEventListener("resize", n), () => {
       window.removeEventListener("resize", n);
     };
   }, [t, e]);
-}, At = {
+}, Pt = ({ skip: t, onClose: e, menuRef: n }) => {
+  we(() => {
+    if (t)
+      return;
+    const o = (s) => {
+      var c;
+      (c = n.current) != null && c.contains(s.target) || e();
+    };
+    return window.addEventListener("scroll", o, !0), () => {
+      window.removeEventListener("scroll", o, !0);
+    };
+  }, [t, e, n]);
+}, Lt = {
   "input-wrapper": "_input-wrapper_d9vma_1",
   "dropdown-button": "_dropdown-button_d9vma_6",
   "icon-reversed": "_icon-reversed_d9vma_14"
-}, Ce = Z.bind(At), Dt = 0, Ft = Ye({
+}, Fe = Q.bind(Lt), $t = 0, Ot = Je({
   fallbackPlacements: ["bottom-start", "top-start", "bottom", "top"],
   boundary: document == null ? void 0 : document.documentElement,
   rootBoundary: "viewport"
-}), Bt = Ke({
+}), Tt = Qe({
   apply({ rects: t, elements: e }) {
     Object.assign(e.floating.style, {
       width: `${t.reference.width}px`
     });
   }
-}), so = (t) => {
+}), io = (t) => {
   const {
     options: e = [],
     value: n,
-    placeholder: s = "",
-    onChange: o = () => {
+    placeholder: o = "",
+    onChange: s = () => {
     },
-    onFocus: i = () => {
+    onFocus: c = () => {
     },
     onBlur: h = () => {
     },
     disabled: u = !1,
-    inputProps: x = {},
-    parseValueToString: y = (b) => b === null ? "" : String(b),
-    minLength: f = 1,
-    skipOptionCreation: z = !1,
-    maxLength: k = null,
+    inputProps: S = {},
+    parseValueToString: y = (w) => w === null ? "" : String(w),
+    minLength: p = 1,
+    skipOptionCreation: C = !1,
+    maxLength: I = null,
     optionVariant: m = "",
-    isRequired: R = !1,
-    error: A = "",
+    isRequired: M = !1,
+    error: R = "",
     touched: g = !1,
-    setTouch: w = () => {
+    setTouch: v = () => {
     },
-    createWithoutConfirmation: D = !1,
-    menuClassName: C = "",
+    createWithoutConfirmation: A = !1,
+    menuClassName: z = "",
     icon: d,
     isDropdownMode: a = !1,
     isOptionUnique: l,
-    refFunction: p,
-    stateReducer: c,
-    onStateChange: v,
-    useFixedPositioning: F,
-    dropdownMatchInputWidth: $ = !1,
+    refFunction: _,
+    stateReducer: i,
+    onStateChange: b,
+    useFixedPositioning: D,
+    dropdownMatchInputWidth: L = !1,
     withMenuFlip: j = !1,
     newItemButtonText: ee = "",
     menuPortalRoot: O,
-    ...B
-  } = t, [H, we] = ne(!1), re = !H || !O, le = O || F ? "fixed" : "absolute", ve = Le(
+    ...F
+  } = t, [T, ve] = oe(!1), K = ze(null), se = Y(() => {
+    var w;
+    return (w = K.current) == null ? void 0 : w.call(K);
+  }, []), ne = !T || !O, re = O || D ? "fixed" : "absolute", be = !T || re === "absolute", le = He(
     () => [
-      ...j ? [Ft] : [],
-      ...$ ? [Bt] : []
+      ...j ? [Ot] : [],
+      ...L ? [Tt] : []
     ],
-    [j, $]
-  ), { refs: te, floatingStyles: be } = Re({
+    [j, L]
+  ), { refs: Z, floatingStyles: ye } = Be({
     placement: "bottom-start",
-    whileElementsMounted: Ae,
-    strategy: le,
-    middleware: ve
+    whileElementsMounted: Pe,
+    strategy: re,
+    middleware: le
+  });
+  Ft({ skip: ne }), Bt({ skip: ne, reference: Z.reference }), Pt({
+    skip: be,
+    onClose: se,
+    menuRef: Z.floating
   });
-  Mt({ skip: re }), Rt({ skip: re, reference: te.reference });
-  const ce = (b, T, q) => ({ item: K, index: X, ...L }) => b({
-    item: K,
-    index: X,
-    isSelected: q !== null && q === K,
-    ...L,
-    isActive: T === X
-  }), ye = (b, T) => {
-    b.key === Nt && (b.preventDefault(), T(e.length));
-  }, ge = Q(
-    (b, ...T) => {
-      (b == null ? void 0 : b.isOpen) !== void 0 && we(b.isOpen), v == null || v(b, ...T);
+  const te = (w, $, q) => ({ item: X, index: f, ...x }) => w({
+    item: X,
+    index: f,
+    isSelected: q !== null && q === X,
+    ...x,
+    isActive: $ === f
+  }), ge = (w, $) => {
+    w.key === kt && (w.preventDefault(), $(e.length));
+  }, xe = Y(
+    (w, ...$) => {
+      (w == null ? void 0 : w.isOpen) !== void 0 && ve(w.isOpen), b == null || b(w, ...$);
     },
-    [v]
+    [b]
   );
   return /* @__PURE__ */ r(
     pe,
     {
-      onChange: o,
+      onChange: s,
       itemToString: y,
       selectedItem: n,
-      onStateChange: ge,
-      defaultHighlightedIndex: Dt,
-      stateReducer: c,
+      onStateChange: xe,
+      defaultHighlightedIndex: $t,
+      stateReducer: i,
       children: ({
-        getInputProps: b,
-        getItemProps: T,
+        getInputProps: w,
+        getItemProps: $,
         setHighlightedIndex: q,
-        toggleMenu: K,
-        openMenu: X,
-        isOpen: L,
-        inputValue: oe,
-        highlightedIndex: _,
-        getRootProps: I,
-        selectItem: E
+        toggleMenu: X,
+        openMenu: f,
+        closeMenu: x,
+        isOpen: E,
+        inputValue: N,
+        highlightedIndex: G,
+        getRootProps: H,
+        selectItem: W
       }) => {
-        const N = I(void 0, { suppressRefError: !0 }), G = {
-          ...N,
-          ref: (M) => (te.setReference(M), N.ref(M))
-        }, W = oe ?? "", { onClear: Y, clearable: xe, ...ie } = x, ae = xe && n !== null, Ie = (...M) => {
-          E(null), Y == null || Y(...M);
-        }, de = /* @__PURE__ */ r(
-          Fe,
+        const ce = H(void 0, { suppressRefError: !0 }), ie = {
+          ...ce,
+          ref: (P) => (Z.setReference(P), ce.ref(P))
+        };
+        K.current || (K.current = x);
+        const ae = N ?? "", { onClear: U, clearable: Ne, ...Se } = S, de = Ne && n !== null, Ie = (...P) => {
+          W(null), U == null || U(...P);
+        }, k = /* @__PURE__ */ r(
+          $e,
           {
-            isOpen: L,
+            isOpen: E,
             isDropdownMode: a,
-            style: be,
-            ref: te.setFloating,
-            minLength: f,
-            inputValue: (oe || "").trim(),
-            getItemProps: ce(T, _, n),
+            style: ye,
+            ref: Z.setFloating,
+            minLength: p,
+            inputValue: (N || "").trim(),
+            getItemProps: te($, G, n),
             parseValueToString: y,
             optionVariant: m,
-            createWithoutConfirmation: D,
-            className: C,
+            createWithoutConfirmation: A,
+            className: z,
             options: e,
             newItemButtonText: ee,
-            ...B
+            ...F
           }
         );
-        return /* @__PURE__ */ P(he, { children: [
-          /* @__PURE__ */ P("div", { className: Ce("input-wrapper"), ...G, children: [
+        return /* @__PURE__ */ B(he, { children: [
+          /* @__PURE__ */ B("div", { className: Fe("input-wrapper"), ...ie, children: [
             /* @__PURE__ */ r(
-              Xe,
+              Ze,
               {
-                ...b({
-                  placeholder: u ? "" : s,
-                  maxLength: k || void 0,
+                ...w({
+                  placeholder: u ? "" : o,
+                  maxLength: I || void 0,
                   onFocus: () => {
-                    a && !L && (X(), w == null || w(!0)), i();
+                    a && !E && (f(), v == null || v(!0)), c();
                   },
-                  ref: p,
-                  onKeyDown: (M) => {
-                    M.key === Be && M.preventDefault(), oe && L && ye(M, q);
+                  ref: _,
+                  onKeyDown: (P) => {
+                    P.key === Oe && P.preventDefault(), N && E && ge(P, q);
                   },
-                  onBlur: (M) => {
-                    const U = W.trim(), se = !Ee(U), S = se ? e.find((ue) => y(ue) === U) : void 0;
-                    E(S || (!z && D && se ? U : null)), h(M), l == null || l(
-                      se ? !e.some((ue) => y(ue) === U) : null
-                    ), a && L && K(), w == null || w(!0);
+                  onBlur: (P) => {
+                    const ue = ae.trim(), ke = !Me(ue), Re = ke ? e.find((Ce) => y(Ce) === ue) : void 0;
+                    W(Re || (!C && A && ke ? ue : null)), h(P), l == null || l(
+                      ke ? !e.some((Ce) => y(Ce) === ue) : null
+                    ), a && E && X(), v == null || v(!0);
                   },
                   disabled: u,
                   defaultWidth: !1,
-                  isRequired: R,
+                  isRequired: M,
                   touched: g,
-                  error: A,
-                  ...ie,
-                  clearable: ae,
-                  onClear: ae ? Ie : Y,
+                  error: R,
+                  ...Se,
+                  clearable: de,
+                  onClear: de ? Ie : U,
                   endIcon: a && !d ? /* @__PURE__ */ r(
                     "button",
                     {
                       type: "button",
-                      className: Ce("dropdown-button", { "icon-reversed": L }),
-                      onClick: () => K(),
+                      className: Fe("dropdown-button", { "icon-reversed": E }),
+                      onClick: () => X(),
                       "aria-label": "Toggle dropdown",
-                      "aria-expanded": L,
-                      children: /* @__PURE__ */ r(De, {})
+                      "aria-expanded": E,
+                      children: /* @__PURE__ */ r(Le, {})
                     }
                   ) : d,
-                  minLength: a ? 0 : f
+                  minLength: a ? 0 : p
                 })
               }
             ),
-            !O && de
+            !O && k
           ] }),
-          O && We(de, O)
+          O && Ge(k, O)
         ] });
       }
     }
   );
 };
 export {
-  Fe as AutocompleteMenu,
-  Se as AutocompleteOption,
-  pt as AutocompleteOptions,
-  nt as AutocompletePrompt,
-  oo as MultipleAutocomplete,
-  so as SingleAutocomplete
+  $e as AutocompleteMenu,
+  Ae as AutocompleteOption,
+  vt as AutocompleteOptions,
+  it as AutocompletePrompt,
+  co as MultipleAutocomplete,
+  io as SingleAutocomplete
 };

package/dist/components/autocompletes/hooks/useScrollClose.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from 'react';
+
+interface UseScrollClose {
+    (props: {
+        skip?: boolean;
+        onClose: () => void;
+        menuRef: RefObject<HTMLElement | null>;
+    }): void;
+}
+export declare const useScrollClose: UseScrollClose;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reportportal/ui-kit",
-  "version": "0.0.1-alpha.209",
+  "version": "0.0.1-alpha.210",
   "description": "The UI-kit library for ReportPortal Design System.",
   "type": "module",
   "scripts": {