@reportportal/ui-kit 0.0.1-alpha.131 → 0.0.1-alpha.132

package/dist/autocompletes.js

@@ -1,15 +1,15 @@
-import { jsx as s, jsxs as A, Fragment as V } from "react/jsx-runtime";
-import { useState as de, useCallback as Y, forwardRef as De, useRef as Fe, useEffect as Me } from "react";
-import { c as L } from "./bind-06a7ff84.js";
-import { Scrollbars as qe } from "rc-scrollbars";
-import { B as Ae } from "./bubblesLoader-f3ffa240.js";
-import { B as Re } from "./button-97d9e587.js";
-import { S as $e } from "./plus-199fb2a8.js";
-import { i as ue } from "./isEmpty-ccacb5ff.js";
-import T from "downshift";
-import { useFloating as ve, autoUpdate as we } from "@floating-ui/react";
-import { F as Ce } from "./fieldText-1749da7a.js";
-import { S as ge } from "./dropdown-0260bb66.js";
+import { jsx as s, jsxs as q, Fragment as re } from "react/jsx-runtime";
+import { useState as pe, useCallback as J, forwardRef as Be, useRef as De, useEffect as Fe } from "react";
+import { c as z } from "./bind-06a7ff84.js";
+import { Scrollbars as Me } from "rc-scrollbars";
+import { B as qe } from "./bubblesLoader-f3ffa240.js";
+import { B as Ae } from "./button-97d9e587.js";
+import { S as Re } from "./plus-199fb2a8.js";
+import { i as he } from "./isEmpty-ccacb5ff.js";
+import ne from "downshift";
+import { useFloating as ye, autoUpdate as Ne } from "@floating-ui/react";
+import { F as $e } from "./fieldText-1749da7a.js";
+import { S as xe } from "./dropdown-0260bb66.js";
 import { S as Pe } from "./close-4d480ef7.js";
 import { S as je } from "./clear-53660571.js";
 import "./openEye-950159cb.js";
@@ -17,73 +17,73 @@ import "./baseIconButton-251479f7.js";
 import "./spinLoader-c4a53718.js";
 import "./maxValueDisplay-9be01a75.js";
 import "./fieldLabel.js";
-const Oe = "_disabled_18ek6_43", He = "_input_18ek6_97", Le = {
+const He = "_disabled_18ek6_43", Le = "_input_18ek6_97", Oe = {
   "selected-item": "_selected-item_18ek6_16",
   "validation-error": "_validation-error_18ek6_35",
   "highlight-un-stored-item": "_highlight-un-stored-item_18ek6_40",
-  disabled: Oe,
+  disabled: He,
   "mobile-disabled": "_mobile-disabled_18ek6_48",
   "cross-icon": "_cross-icon_18ek6_54",
-  input: He
-}, ae = L.bind(Le), We = ({
+  input: Le
+}, fe = z.bind(Oe), We = ({
   item: o,
   onRemoveItem: e,
-  disabled: i = !1,
+  disabled: c = !1,
   mobileDisabled: r = !1,
   parseValueToString: n,
   error: d = !1,
-  editItem: h,
+  editItem: p,
   editable: u = !1,
   getAdditionalCreationCondition: y = () => !0,
-  storedOption: k = !0,
+  storedOption: x = !0,
   highlightUnStoredItem: v = !1,
-  variant: E = "light",
+  variant: I = "light",
   getItemName: N
 }) => {
-  const [f, S] = de(!1), [I, p] = de(""), w = () => {
-    !i && u && !k && (p((N == null ? void 0 : N(o)) || (n == null ? void 0 : n(o)) || ""), S(!0));
+  const [m, S] = pe(!1), [k, _] = pe(""), w = () => {
+    !c && u && !x && (_((N == null ? void 0 : N(o)) || (n == null ? void 0 : n(o)) || ""), S(!0));
   }, M = (t) => {
-    p(t.target.value);
+    _(t.target.value);
   }, R = (t) => {
-    const a = y(I);
-    t.key === "Enter" && a && (h(o, I), S(!1), p(""));
-  }, c = () => {
-    S(!1), p("");
-  }, l = (t) => {
+    const i = y(k);
+    t.key === "Enter" && i && (p(o, k), S(!1), _(""));
+  }, l = () => {
+    S(!1), _("");
+  }, a = (t) => {
     t.stopPropagation(), e(o);
   };
-  return f ? /* @__PURE__ */ s(
+  return m ? /* @__PURE__ */ s(
     "input",
     {
       autoFocus: !0,
-      value: I,
+      value: k,
       onChange: M,
       onKeyDown: R,
-      onBlur: c,
-      className: ae("input")
+      onBlur: l,
+      className: fe("input")
     }
-  ) : /* @__PURE__ */ A(
+  ) : /* @__PURE__ */ q(
     "div",
     {
-      className: ae("selected-item", E, {
+      className: fe("selected-item", I, {
         [`validation-${d}`]: d,
-        disabled: i,
+        disabled: c,
         "mobile-disabled": r,
-        "highlight-un-stored-item": v && !k
+        "highlight-un-stored-item": v && !x
       }),
       onClick: w,
       children: [
         n == null ? void 0 : n(o),
-        !i && /* @__PURE__ */ s(
+        !c && /* @__PURE__ */ s(
           "button",
           {
             type: "button",
-            className: ae("cross-icon", {
+            className: fe("cross-icon", {
               [`validation-${d}`]: d,
               "mobile-disabled": r,
-              disabled: i
+              disabled: c
             }),
-            onClick: l,
+            onClick: a,
             children: /* @__PURE__ */ s(Pe, {})
           }
         )
@@ -93,25 +93,25 @@ const Oe = "_disabled_18ek6_43", He = "_input_18ek6_97", Le = {
 }, ze = ({
   items: o = [],
   parseValueToString: e,
-  getItemValidationErrorType: i,
+  getItemValidationErrorType: c,
   storedItemsMap: r = {},
   highlightUnStoredItem: n = !1,
   renderCustomSelectedItem: d,
-  ...h
+  ...p
 }) => o.map((u) => d ? d(u) : /* @__PURE__ */ s(
   We,
   {
     parseValueToString: e,
-    error: (i == null ? void 0 : i(u)) || "",
+    error: (c == null ? void 0 : c(u)) || "",
     item: u,
     storedOption: !!r[e(u)],
     highlightUnStoredItem: n,
-    ...h
+    ...p
   },
   e == null ? void 0 : e(u)
 )), Ke = "_prompt_1xfmd_16", Ye = {
   prompt: Ke
-}, Xe = L.bind(Ye), Ge = ({ children: o = null }) => /* @__PURE__ */ s("div", { className: Xe("prompt"), children: o }), Je = "_item_1qhaq_16", Qe = "_divider_1qhaq_24", Ze = "_active_1qhaq_48", Te = "_value_1qhaq_60", Ue = "_tag_1qhaq_78", Ve = "_disabled_1qhaq_89", et = {
+}, Xe = z.bind(Ye), Ge = ({ children: o = null }) => /* @__PURE__ */ s("div", { className: Xe("prompt"), children: o }), Je = "_item_1qhaq_16", Qe = "_divider_1qhaq_24", Ze = "_active_1qhaq_48", Te = "_value_1qhaq_60", Ue = "_tag_1qhaq_78", Ve = "_disabled_1qhaq_89", et = {
   item: Je,
   divider: Qe,
   "new-item": "_new-item_1qhaq_31",
@@ -122,36 +122,36 @@ const Oe = "_disabled_18ek6_43", He = "_input_18ek6_97", Le = {
   "button-active": "_button-active_1qhaq_89",
   disabled: Ve,
   "value-variant": "_value-variant_1qhaq_109"
-}, X = L.bind(et), pe = ({
+}, Q = z.bind(et), ve = ({
   isActive: o = !1,
   isSelected: e = !1,
-  isNew: i = !1,
+  isNew: c = !1,
   children: r = null,
   disabled: n = !1,
   optionVariant: d = "",
-  newItemButtonText: h = "",
+  newItemButtonText: p = "",
   ...u
 }) => {
-  const y = () => h || (d === "key-variant" ? "New key" : "New value");
-  return i ? /* @__PURE__ */ A(V, { children: [
-    /* @__PURE__ */ s("div", { className: X("divider") }),
-    /* @__PURE__ */ A(
+  const y = () => p || (d === "key-variant" ? "New key" : "New value");
+  return c ? /* @__PURE__ */ q(re, { children: [
+    /* @__PURE__ */ s("div", { className: Q("divider") }),
+    /* @__PURE__ */ q(
       "li",
       {
-        className: X("new-item", d, {
+        className: Q("new-item", d, {
           active: o,
           selected: e,
           disabled: n
         }),
         ...u,
         children: [
-          /* @__PURE__ */ s("span", { className: X("value"), children: r }),
+          /* @__PURE__ */ s("span", { className: Q("value"), children: r }),
           /* @__PURE__ */ s(
-            Re,
+            Ae,
             {
               ...!n && u,
-              className: X({ "button-active": o }),
-              icon: /* @__PURE__ */ s($e, {}),
+              className: Q({ "button-active": o }),
+              icon: /* @__PURE__ */ s(Re, {}),
               variant: "text",
               children: y()
             }
@@ -162,181 +162,181 @@ const Oe = "_disabled_18ek6_43", He = "_input_18ek6_97", Le = {
   ] }) : /* @__PURE__ */ s(
     "li",
     {
-      className: X("item", d, {
+      className: Q("item", d, {
         active: o,
         selected: e,
         disabled: n
       }),
       ...n ? {} : u,
-      children: /* @__PURE__ */ s("span", { className: X("label", "tag"), children: r })
+      children: /* @__PURE__ */ s("span", { className: Q("label", "tag"), children: r })
     }
   );
 }, tt = "_container_5088x_16", ot = {
   container: tt,
   "empty-list-message": "_empty-list-message_5088x_20"
-}, ie = L.bind(ot), nt = (o) => {
+}, _e = z.bind(ot), nt = (o) => {
   const {
     options: e,
-    async: i,
+    async: c,
     inputValue: r,
     loading: n,
     createWithoutConfirmation: d,
-    customEmptyListMessage: h,
+    customEmptyListMessage: p,
     customNoMatchesMessage: u,
     optionVariant: y,
-    newItemButtonText: k,
+    newItemButtonText: x,
     renderOption: v,
-    getUniqKey: E,
+    getUniqKey: I,
     getItemProps: N,
-    parseValueToString: f
-  } = o, S = Y(() => (e || []).filter((t) => f(t).toUpperCase().indexOf((r.toUpperCase() || "").trim()) > -1), [r, e, f]), I = Y(
-    (t, a, b = !1) => v ? v(t, a, b, N) : /* @__PURE__ */ s(
-      pe,
+    parseValueToString: m
+  } = o, S = J(() => (e || []).filter((t) => m(t).toUpperCase().indexOf((r.toUpperCase() || "").trim()) > -1), [r, e, m]), k = J(
+    (t, i, h = !1) => v ? v(t, i, h, N) : /* @__PURE__ */ s(
+      ve,
       {
         optionVariant: y,
-        ...N({ item: t, index: a }),
-        isNew: b,
-        newItemButtonText: k,
-        children: f(t)
+        ...N({ item: t, index: i }),
+        isNew: h,
+        newItemButtonText: x,
+        children: m(t)
       },
-      (E == null ? void 0 : E(t)) || f(t)
+      (I == null ? void 0 : I(t)) || m(t)
     ),
-    [N, E, k, y, f, v]
-  ), p = Y(
-    (t) => t.length ? t.map((a, b) => I(a, b)) : "",
-    [I]
-  ), w = Y(
+    [N, I, x, y, m, v]
+  ), _ = J(
+    (t) => t.length ? t.map((i, h) => k(i, h)) : "",
+    [k]
+  ), w = J(
     (t) => {
-      const a = t.length;
-      return /* @__PURE__ */ s("div", { className: ie({ container: !a }), children: /* @__PURE__ */ s(
-        pe,
+      const i = t.length;
+      return /* @__PURE__ */ s("div", { className: _e({ container: !i }), children: /* @__PURE__ */ s(
+        ve,
         {
           optionVariant: y,
           isNew: !0,
-          ...N({ item: r, index: a }),
-          children: f(r)
+          ...N({ item: r, index: i }),
+          children: m(r)
         },
-        f(r)
+        m(r)
       ) });
     },
-    [N, r, y, f]
-  ), M = Y(
-    (t) => n ? /* @__PURE__ */ A(V, { children: [
-      /* @__PURE__ */ s(Ge, { children: /* @__PURE__ */ s(Ae, {}) }),
+    [N, r, y, m]
+  ), M = J(
+    (t) => n ? /* @__PURE__ */ q(re, { children: [
+      /* @__PURE__ */ s(Ge, { children: /* @__PURE__ */ s(qe, {}) }),
       !d && w(t)
     ] }) : "",
     [d, n, w]
-  ), R = Y(() => {
-    const t = (e == null ? void 0 : e.length) === 0 ? h || "No available options" : u || "No matches found";
-    return /* @__PURE__ */ s("div", { className: ie("empty-list-message"), children: t });
-  }, [h, u, e == null ? void 0 : e.length]), c = i ? e : S(), l = M(e);
-  return l || /* @__PURE__ */ A("div", { className: ie({ container: e.length }), children: [
-    /* @__PURE__ */ s(qe, { autoHeight: !0, autoHeightMax: 216, hideTracksWhenNotNeeded: !0, children: ue(c) ? R() : p(c) }),
-    !d && w(c)
+  ), R = J(() => {
+    const t = (e == null ? void 0 : e.length) === 0 ? p || "No available options" : u || "No matches found";
+    return /* @__PURE__ */ s("div", { className: _e("empty-list-message"), children: t });
+  }, [p, u, e == null ? void 0 : e.length]), l = c ? e : S(), a = M(e);
+  return a || /* @__PURE__ */ q("div", { className: _e({ container: e.length }), children: [
+    /* @__PURE__ */ s(Me, { autoHeight: !0, autoHeightMax: 216, hideTracksWhenNotNeeded: !0, children: he(l) ? R() : _(l) }),
+    !d && w(l)
   ] });
-}, st = "_menu_f64z5_16", rt = "_opened_f64z5_34", ct = "_dark_f64z5_37", lt = {
+}, st = "_menu_f64z5_16", rt = "_opened_f64z5_34", lt = "_dark_f64z5_37", ct = {
   menu: st,
   opened: rt,
-  dark: ct
-}, at = L.bind(lt), it = (o, e) => !o || o <= e.trim().length, ye = De(
+  dark: lt
+}, at = z.bind(ct), it = (o, e) => !o || o <= e.trim().length, ke = Be(
   ({
     isOpen: o = !1,
     style: e = {},
-    minLength: i = 1,
+    minLength: c = 1,
     isDropdownMode: r,
     inputValue: n = "",
     className: d = "",
-    ...h
+    ...p
   }, u) => /* @__PURE__ */ s(
     "ul",
     {
       ref: u,
       className: at(
         "menu",
-        { opened: o && (r || it(i, n)) },
+        { opened: o && (r || it(c, n)) },
         d
       ),
       style: e,
-      children: /* @__PURE__ */ s(nt, { inputValue: n, ...h })
+      children: /* @__PURE__ */ s(nt, { inputValue: n, ...p })
     }
   )
-), he = (o, e) => typeof o == "string" ? o : e ? String(o[e(o)]) : "", U = (o, e) => {
+), we = (o, e) => typeof o == "string" ? o : e ? String(o[e(o)]) : "", se = (o, e) => {
   var r;
-  return o === e ? !0 : !!(o && e && typeof o == "object" && typeof e == "object" && Object.keys(o).length === Object.keys(e).length && ((r = Object.entries(o)) != null && r.every(([n, d]) => U(d, e[n]))));
-}, dt = (o, e, i) => typeof o == "string" ? o === e : i ? (() => {
-  const r = i(o);
+  return o === e ? !0 : !!(o && e && typeof o == "object" && typeof e == "object" && Object.keys(o).length === Object.keys(e).length && ((r = Object.entries(o)) != null && r.every(([n, d]) => se(d, e[n]))));
+}, dt = (o, e, c) => typeof o == "string" ? o === e : c ? (() => {
+  const r = c(o);
   return o[r] === e[r];
 })() : !1, ut = ({
   options: o = [],
   onChange: e,
-  selectedItems: i = [],
+  selectedItems: c = [],
   handleUnStoredItemCb: r = null,
   existingItemsMap: n = {},
   children: d,
-  customizeNewSelectedValue: h = (v) => v,
+  customizeNewSelectedValue: p = (v) => v,
   getOptionUniqKey: u,
   getOptionUniqKeyValue: y,
-  ...k
+  ...x
 }) => {
-  const [v, E] = de(n), N = (c, l) => {
+  const [v, I] = pe(n), N = (l, a) => {
     const t = {
       ...v
     };
-    c.forEach((a) => {
-      if (o.find((b) => dt(b, a, u))) {
-        const b = he(a, u);
-        t[b] = !0;
+    l.forEach((i) => {
+      if (o.find((h) => dt(h, i, u))) {
+        const h = we(i, u);
+        t[h] = !0;
       }
-    }), E(t), l(t);
-  }, f = (c, l) => {
-    const t = he(c, u);
+    }), I(t), a(t);
+  }, m = (l, a) => {
+    const t = we(l, u);
     if (t in v) {
-      const a = { ...v };
-      delete a[t], E(a), l(a);
+      const i = { ...v };
+      delete i[t], I(i), a(i);
     } else
-      l(v);
-  }, S = (c, l) => {
-    const t = h(c), a = Array.isArray(t) ? t : [t], W = [...i.filter((C) => a.indexOf(C) < 0), ...a];
-    e == null || e(W, l), N(a, (C) => r == null ? void 0 : r(W, C));
-  }, I = (c, l) => {
-    const t = i.indexOf(c), a = [...i];
-    a.splice(t, 1, l), e == null || e(a, null);
-  }, p = (c, l) => {
-    const t = i.filter((b) => !U(b, c));
-    e == null || e(t, l), f(c, (b) => r == null ? void 0 : r(t, b));
-  }, w = (c, l) => {
-    c && S(c, l);
-  }, M = (c) => ({
-    removeItem: p,
-    editItem: I,
+      a(v);
+  }, S = (l, a) => {
+    const t = p(l), i = Array.isArray(t) ? t : [t], K = [...c.filter(($) => i.indexOf($) < 0), ...i];
+    e == null || e(K, a), N(i, ($) => r == null ? void 0 : r(K, $));
+  }, k = (l, a) => {
+    const t = c.indexOf(l), i = [...c];
+    i.splice(t, 1, a), e == null || e(i, null);
+  }, _ = (l, a) => {
+    const t = c.filter((h) => !se(h, l));
+    e == null || e(t, a), m(l, (h) => r == null ? void 0 : r(t, h));
+  }, w = (l, a) => {
+    l && S(l, a);
+  }, M = (l) => ({
+    removeItem: _,
+    editItem: k,
     handleChange: e,
     getOptionUniqKeyValue: y,
     storedItemsMap: v,
-    ...c
+    ...l
   });
   return /* @__PURE__ */ s(
-    T,
+    ne,
     {
-      ...k,
-      stateReducer: (c, l) => {
-        switch (l.type) {
-          case T.stateChangeTypes.keyDownEnter:
-          case T.stateChangeTypes.clickItem:
+      ...x,
+      stateReducer: (l, a) => {
+        switch (a.type) {
+          case ne.stateChangeTypes.keyDownEnter:
+          case ne.stateChangeTypes.clickItem:
             return {
-              ...l,
-              highlightedIndex: c.highlightedIndex,
+              ...a,
+              highlightedIndex: l.highlightedIndex,
               inputValue: ""
             };
           default:
-            return l;
+            return a;
         }
       },
       onChange: w,
       selectedItem: null,
-      children: (c) => d == null ? void 0 : d(M(c))
+      children: (l) => d == null ? void 0 : d(M(l))
     }
   );
-}, Ne = "Enter", mt = "Tab", ft = "_autocomplete_w0t1o_16", _t = "_disabled_w0t1o_32", pt = "_error_w0t1o_35", ht = "_touched_w0t1o_35", bt = "_input_w0t1o_74", vt = {
+}, Ie = "Enter", mt = "Tab", ft = "_autocomplete_w0t1o_16", _t = "_disabled_w0t1o_32", pt = "_error_w0t1o_35", ht = "_touched_w0t1o_35", bt = "_input_w0t1o_74", vt = {
   autocomplete: ft,
   "autocomplete-wrapper": "_autocomplete-wrapper_w0t1o_28",
   disabled: _t,
@@ -351,190 +351,190 @@ const Oe = "_disabled_18ek6_43", He = "_input_18ek6_97", Le = {
   "error-text": "_error-text_w0t1o_109",
   "dropdown-button": "_dropdown-button_w0t1o_118",
   "icon-reversed": "_icon-reversed_w0t1o_126"
-}, H = L.bind(vt), Lt = (o) => {
+}, W = z.bind(vt), Ot = (o) => {
   const {
     options: e = [],
-    loading: i = !1,
+    loading: c = !1,
     onStateChange: r = () => {
     },
     value: n = [],
     placeholder: d = "",
-    error: h = "",
+    error: p = "",
     touched: u = !1,
     creatable: y = !1,
-    editable: k = !1,
+    editable: x = !1,
     onChange: v = () => {
     },
-    onFocus: E = () => {
+    onFocus: I = () => {
     },
     onBlur: N = () => {
     },
-    disabled: f = !1,
+    disabled: m = !1,
     isDropdownMode: S = !1,
-    mobileDisabled: I = !1,
-    inputProps: p = {},
-    parseValueToString: w = (_) => _ == null ? "" : String(_),
+    mobileDisabled: k = !1,
+    inputProps: _ = {},
+    parseValueToString: w = (f) => f == null ? "" : String(f),
     maxLength: M = null,
     async: R = !1,
-    customClass: c = "",
-    createWithoutConfirmation: l = !1,
+    customClass: l = "",
+    createWithoutConfirmation: a = !1,
     getItemValidationErrorType: t = null,
-    clearItemsError: a = () => {
+    clearItemsError: i = () => {
     },
-    getAdditionalCreationCondition: b = () => !0,
-    highlightUnStoredItem: W = !1,
-    parseInputValueFn: G = null,
-    handleUnStoredItemCb: C = null,
-    dataAutomationId: ee = "",
-    existingItemsMap: Q = {},
-    customizeNewSelectedValue: te = (_) => _,
-    renderCustomSelectedItem: oe,
-    useFixedPositioning: ne,
+    getAdditionalCreationCondition: h = () => !0,
+    highlightUnStoredItem: K = !1,
+    parseInputValueFn: Z = null,
+    handleUnStoredItemCb: $ = null,
+    dataAutomationId: le = "",
+    existingItemsMap: ee = {},
+    customizeNewSelectedValue: ce = (f) => f,
+    renderCustomSelectedItem: ae,
+    useFixedPositioning: ie,
     newItemButtonText: D = "",
     ...P
-  } = o, { refs: j, floatingStyles: O } = ve({
+  } = o, { refs: j, floatingStyles: H } = ye({
     placement: "bottom-start",
-    strategy: ne ? "fixed" : "absolute",
-    whileElementsMounted: we
-  }), z = n.length === 0 && !f ? d : "", B = Fe(null);
-  Me(() => {
-    a();
-  }, [a, n]);
-  const J = (_, m) => {
-    v(_, m);
-  }, se = (_, m, x) => ({ item: g, index: $, ...q }) => _({
+    strategy: ie ? "fixed" : "absolute",
+    whileElementsMounted: Ne
+  }), Y = n.length === 0 && !m ? d : "", E = De(null);
+  Fe(() => {
+    i();
+  }, [i, n]);
+  const T = (f, b) => {
+    v(f, b);
+  }, de = (f, b, C) => ({ item: g, index: X, ...A }) => f({
     item: g,
-    index: $,
-    isSelected: x.some((le) => U(le, g)),
-    ...q,
-    isActive: m === $
-  }), re = ({
-    event: _,
-    removeItem: m,
-    inputValue: x
+    index: X,
+    isSelected: C.some((U) => se(U, g)),
+    ...A,
+    isActive: b === X
+  }), ue = ({
+    event: f,
+    removeItem: b,
+    inputValue: C
   }) => {
-    _.key === "Backspace" && !x && n.length && m(n[n.length - 1], null);
-  }, K = ({
-    inputValue: _,
-    selectItem: m,
-    clearSelection: x
+    f.key === "Backspace" && !C && n.length && b(n[n.length - 1], null);
+  }, L = ({
+    inputValue: f,
+    selectItem: b,
+    clearSelection: C
   }) => {
-    if (G) {
-      const g = G(_);
-      (g.length ? g : [_]).forEach((q) => m(q)), x();
+    if (Z) {
+      const g = Z(f);
+      (g.length ? g : [f]).forEach((A) => b(A)), C();
     } else
-      m(_), x();
-  }, Z = (_) => (m) => {
-    _(m, null), B.current && B.current.focus();
-  }, ce = e.filter((_) => n.every((m) => !U(m, _)));
+      b(f), C();
+  }, te = (f) => (b) => {
+    f(b, null), E.current && E.current.focus();
+  }, me = e.filter((f) => n.every((b) => !se(b, f)));
   return /* @__PURE__ */ s(
     ut,
     {
-      onChange: J,
+      onChange: T,
       itemToString: w,
       selectedItems: n,
       onStateChange: r,
       options: e,
-      existingItemsMap: Q,
-      handleUnStoredItemCb: C,
-      customizeNewSelectedValue: te,
+      existingItemsMap: ee,
+      handleUnStoredItemCb: $,
+      customizeNewSelectedValue: ce,
       children: ({
-        getInputProps: _,
-        getItemProps: m,
-        isOpen: x,
+        getInputProps: f,
+        getItemProps: b,
+        isOpen: C,
         inputValue: g = "",
-        highlightedIndex: $,
-        removeItem: q,
-        editItem: le,
-        openMenu: xe,
-        selectItem: me,
-        clearSelection: fe,
-        toggleMenu: ke,
-        storedItemsMap: Ie,
-        getRootProps: Ee
+        highlightedIndex: X,
+        removeItem: A,
+        editItem: U,
+        openMenu: B,
+        selectItem: O,
+        clearSelection: G,
+        toggleMenu: oe,
+        storedItemsMap: V,
+        getRootProps: Se
       }) => {
-        const _e = Ee(void 0, { suppressRefError: !0 }), Se = {
-          ..._e,
-          ref: (F) => (j.setReference(F), _e.ref(F))
-        }, Be = g ?? "";
-        return /* @__PURE__ */ A("div", { ...Se, className: H("autocomplete-wrapper"), children: [
-          /* @__PURE__ */ A(V, { children: [
-            /* @__PURE__ */ A(
+        const be = Se(void 0, { suppressRefError: !0 }), Ee = {
+          ...be,
+          ref: (F) => (j.setReference(F), be.ref(F))
+        }, Ce = g ?? "";
+        return /* @__PURE__ */ q("div", { ...Ee, className: W("autocomplete-wrapper"), children: [
+          /* @__PURE__ */ q(re, { children: [
+            /* @__PURE__ */ q(
               "div",
               {
-                className: H("autocomplete", c, {
-                  "mobile-disabled": I,
-                  error: h,
+                className: W("autocomplete", l, {
+                  "mobile-disabled": k,
+                  error: p,
                   touched: u,
-                  disabled: f
+                  disabled: m
                 }),
                 children: [
-                  /* @__PURE__ */ A(
+                  /* @__PURE__ */ q(
                     "div",
                     {
-                      className: H("autocomplete-input", {
-                        "mobile-disabled": I
+                      className: W("autocomplete-input", {
+                        "mobile-disabled": k
                       }),
                       children: [
                         /* @__PURE__ */ s(
                           ze,
                           {
                             items: n,
-                            onRemoveItem: Z(q),
-                            disabled: f,
-                            mobileDisabled: I,
+                            onRemoveItem: te(A),
+                            disabled: m,
+                            mobileDisabled: k,
                             parseValueToString: w,
                             getItemValidationErrorType: t,
-                            renderCustomSelectedItem: oe,
-                            editItem: le,
-                            editable: k,
-                            getAdditionalCreationCondition: b,
-                            storedItemsMap: Ie,
-                            highlightUnStoredItem: W
+                            renderCustomSelectedItem: ae,
+                            editItem: U,
+                            editable: x,
+                            getAdditionalCreationCondition: h,
+                            storedItemsMap: V,
+                            highlightUnStoredItem: K
                           }
                         ),
                         /* @__PURE__ */ s(
                           "input",
                           {
-                            ..._({
-                              ref: B,
-                              placeholder: z,
+                            ...f({
+                              ref: E,
+                              placeholder: Y,
                               maxLength: M,
                               onFocus: () => {
-                                S && xe(), E();
+                                S && B(), I();
                               },
                               onKeyDown: (F) => {
-                                F.key === Ne && g && y && b(g) && K({
+                                F.key === Ie && g && y && h(g) && L({
                                   inputValue: g,
-                                  selectItem: me,
-                                  clearSelection: fe
-                                }), re({ event: F, removeItem: q, inputValue: g });
+                                  selectItem: O,
+                                  clearSelection: G
+                                }), ue({ event: F, removeItem: A, inputValue: g });
                               },
                               onBlur: () => {
-                                N(), g && y && b(g) && K({
+                                N(), g && y && h(g) && L({
                                   inputValue: g,
-                                  selectItem: me,
-                                  clearSelection: fe
+                                  selectItem: O,
+                                  clearSelection: G
                                 });
                               },
-                              disabled: f,
-                              ...p
+                              disabled: m,
+                              ..._
                             }),
-                            className: H("input", { disabled: f }),
-                            "data-automation-id": ee
+                            className: W("input", { disabled: m }),
+                            "data-automation-id": le
                           }
                         )
                       ]
                     }
                   ),
-                  (p == null ? void 0 : p.clearable) && !ue(n) && /* @__PURE__ */ s(
+                  (_ == null ? void 0 : _.clearable) && !he(n) && /* @__PURE__ */ s(
                     "button",
                     {
                       type: "button",
-                      className: H("clear-icon", { "clear-icon--disabled": f }),
+                      className: W("clear-icon", { "clear-icon--disabled": m }),
                       onClick: () => {
                         var F;
-                        return !f && ((F = p == null ? void 0 : p.onClear) == null ? void 0 : F.call(p));
+                        return !m && ((F = _ == null ? void 0 : _.onClear) == null ? void 0 : F.call(_));
                       },
                       onMouseDown: (F) => F.preventDefault(),
                       children: /* @__PURE__ */ s(je, {})
@@ -544,33 +544,33 @@ const Oe = "_disabled_18ek6_43", He = "_input_18ek6_97", Le = {
                     "button",
                     {
                       type: "button",
-                      className: H("dropdown-button", { "icon-reversed": x }),
-                      onClick: () => ke(),
+                      className: W("dropdown-button", { "icon-reversed": C }),
+                      onClick: () => oe(),
                       "aria-label": "Toggle dropdown",
-                      "aria-expanded": x,
-                      children: /* @__PURE__ */ s(ge, {})
+                      "aria-expanded": C,
+                      children: /* @__PURE__ */ s(xe, {})
                     }
                   )
                 ]
               }
             ),
-            h && u && /* @__PURE__ */ s("span", { className: H("error-text"), children: h })
+            p && u && /* @__PURE__ */ s("span", { className: W("error-text"), children: p })
           ] }),
           /* @__PURE__ */ s(
-            ye,
+            ke,
             {
-              isOpen: x,
-              loading: i,
+              isOpen: C,
+              loading: c,
               async: R,
               ref: j.setFloating,
               newItemButtonText: D,
               isDropdownMode: S,
-              style: O,
-              inputValue: Be.trim(),
-              getItemProps: se(m, $, n),
+              style: H,
+              inputValue: Ce.trim(),
+              getItemProps: de(b, X, n),
               parseValueToString: w,
-              createWithoutConfirmation: l,
-              options: ce,
+              createWithoutConfirmation: a,
+              options: me,
               ...P
             }
           )
@@ -582,136 +582,140 @@ const Oe = "_disabled_18ek6_43", He = "_input_18ek6_97", Le = {
   "input-wrapper": "_input-wrapper_d9vma_1",
   "dropdown-button": "_dropdown-button_d9vma_6",
   "icon-reversed": "_icon-reversed_d9vma_14"
-}, be = L.bind(wt), gt = 0, Wt = (o) => {
+}, ge = z.bind(wt), gt = 0, Wt = (o) => {
   const {
     options: e = [],
-    value: i,
+    value: c,
     placeholder: r = "",
     onChange: n = () => {
     },
     onFocus: d = () => {
     },
-    onBlur: h = () => {
+    onBlur: p = () => {
     },
     disabled: u = !1,
     inputProps: y = {},
-    parseValueToString: k = (D) => D === null ? "" : String(D),
+    parseValueToString: x = (D) => D === null ? "" : String(D),
     minLength: v = 1,
-    skipOptionCreation: E = !1,
+    skipOptionCreation: I = !1,
     maxLength: N = null,
-    optionVariant: f = "",
+    optionVariant: m = "",
     isRequired: S = !1,
-    error: I = "",
-    touched: p = !1,
+    error: k = "",
+    touched: _ = !1,
     setTouch: w = () => {
     },
     createWithoutConfirmation: M = !1,
     menuClassName: R = "",
-    icon: c,
-    isDropdownMode: l = !1,
+    icon: l,
+    isDropdownMode: a = !1,
     isOptionUnique: t,
-    refFunction: a,
-    stateReducer: b,
-    onStateChange: W,
-    useFixedPositioning: G,
-    newItemButtonText: C = "",
-    ...ee
-  } = o, { refs: Q, floatingStyles: te } = ve({
+    refFunction: i,
+    stateReducer: h,
+    onStateChange: K,
+    useFixedPositioning: Z,
+    newItemButtonText: $ = "",
+    ...le
+  } = o, { refs: ee, floatingStyles: ce } = ye({
     placement: "bottom-start",
-    strategy: G ? "fixed" : "absolute",
-    whileElementsMounted: we
-  }), oe = (D, P, j) => ({ item: O, index: z, ...B }) => D({
-    item: O,
-    index: z,
-    isSelected: j !== null && j === O,
-    ...B,
-    isActive: P === z
-  }), ne = (D, P) => {
+    strategy: Z ? "fixed" : "absolute",
+    whileElementsMounted: Ne
+  }), ae = (D, P, j) => ({ item: H, index: Y, ...E }) => D({
+    item: H,
+    index: Y,
+    isSelected: j !== null && j === H,
+    ...E,
+    isActive: P === Y
+  }), ie = (D, P) => {
     D.key === mt && (D.preventDefault(), P(e.length));
   };
   return /* @__PURE__ */ s(
-    T,
+    ne,
     {
       onChange: n,
-      itemToString: k,
-      selectedItem: i,
-      onStateChange: W,
+      itemToString: x,
+      selectedItem: c,
+      onStateChange: K,
       defaultHighlightedIndex: gt,
-      stateReducer: b,
+      stateReducer: h,
       children: ({
         getInputProps: D,
         getItemProps: P,
         setHighlightedIndex: j,
-        toggleMenu: O,
-        openMenu: z,
-        isOpen: B,
-        inputValue: J,
-        highlightedIndex: se,
-        getRootProps: re,
-        selectItem: K
+        toggleMenu: H,
+        openMenu: Y,
+        isOpen: E,
+        inputValue: T,
+        highlightedIndex: de,
+        getRootProps: ue,
+        selectItem: L
       }) => {
-        const Z = re(void 0, { suppressRefError: !0 }), ce = {
-          ...Z,
-          ref: (m) => (Q.setReference(m), Z.ref(m))
-        }, _ = J ?? "";
-        return /* @__PURE__ */ s(V, { children: /* @__PURE__ */ A("div", { className: be("input-wrapper"), ...ce, children: [
+        const te = ue(void 0, { suppressRefError: !0 }), me = {
+          ...te,
+          ref: (B) => (ee.setReference(B), te.ref(B))
+        }, f = T ?? "", { onClear: b, clearable: C, ...g } = y, A = C && c !== null, U = (...B) => {
+          L(null), b == null || b(...B);
+        };
+        return /* @__PURE__ */ s(re, { children: /* @__PURE__ */ q("div", { className: ge("input-wrapper"), ...me, children: [
           /* @__PURE__ */ s(
-            Ce,
+            $e,
             {
               ...D({
                 placeholder: u ? "" : r,
                 maxLength: N || void 0,
                 onFocus: () => {
-                  l && !B && (z(), w == null || w(!0)), d();
+                  a && !E && (Y(), w == null || w(!0)), d();
                 },
-                ref: a,
-                onKeyDown: (m) => {
-                  m.key === Ne && m.preventDefault(), J && B && ne(m, j);
+                ref: i,
+                onKeyDown: (B) => {
+                  B.key === Ie && B.preventDefault(), T && E && ie(B, j);
                 },
-                onBlur: (m) => {
-                  const x = _.trim(), g = !ue(x), $ = g ? e.find((q) => k(q) === x) : void 0;
-                  K($ || (!E && M && g ? x : null)), h(m), t == null || t(
-                    g ? !e.some((q) => k(q) === x) : null
-                  ), l && B && O(), w == null || w(!0);
+                onBlur: (B) => {
+                  const O = f.trim(), G = !he(O), oe = G ? e.find((V) => x(V) === O) : void 0;
+                  L(oe || (!I && M && G ? O : null)), p(B), t == null || t(
+                    G ? !e.some((V) => x(V) === O) : null
+                  ), a && E && H(), w == null || w(!0);
                 },
                 disabled: u,
                 defaultWidth: !1,
                 isRequired: S,
-                touched: p,
-                error: I,
-                ...y,
-                endIcon: l && !c ? /* @__PURE__ */ s(
+                touched: _,
+                error: k,
+                ...g,
+                clearable: A,
+                onClear: A ? U : b,
+                endIcon: a && !l ? /* @__PURE__ */ s(
                   "button",
                   {
                     type: "button",
-                    className: be("dropdown-button", { "icon-reversed": B }),
-                    onClick: () => O(),
+                    className: ge("dropdown-button", { "icon-reversed": E }),
+                    onClick: () => H(),
                     "aria-label": "Toggle dropdown",
-                    "aria-expanded": B,
-                    children: /* @__PURE__ */ s(ge, {})
+                    "aria-expanded": E,
+                    children: /* @__PURE__ */ s(xe, {})
                   }
-                ) : c,
-                minLength: l ? 0 : v
+                ) : l,
+                minLength: a ? 0 : v
               })
             }
           ),
           /* @__PURE__ */ s(
-            ye,
+            ke,
             {
-              isOpen: B,
-              isDropdownMode: l,
-              style: te,
-              ref: Q.setFloating,
+              isOpen: E,
+              isDropdownMode: a,
+              style: ce,
+              ref: ee.setFloating,
               minLength: v,
-              inputValue: (J || "").trim(),
-              getItemProps: oe(P, se, i),
-              parseValueToString: k,
-              optionVariant: f,
+              inputValue: (T || "").trim(),
+              getItemProps: ae(P, de, c),
+              parseValueToString: x,
+              optionVariant: m,
               createWithoutConfirmation: M,
               className: R,
               options: e,
-              newItemButtonText: C,
-              ...ee
+              newItemButtonText: $,
+              ...le
             }
           )
         ] }) });
@@ -720,10 +724,10 @@ const Oe = "_disabled_18ek6_43", He = "_input_18ek6_97", Le = {
   );
 };
 export {
-  ye as AutocompleteMenu,
-  pe as AutocompleteOption,
+  ke as AutocompleteMenu,
+  ve as AutocompleteOption,
   nt as AutocompleteOptions,
   Ge as AutocompletePrompt,
-  Lt as MultipleAutocomplete,
+  Ot as MultipleAutocomplete,
   Wt as SingleAutocomplete
 };

package/package.json

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