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

package/dist/autocompletes.js

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

package/dist/components/autocompletes/multipleAutocomplete/multipleAutocomplete.d.ts

@@ -45,5 +45,6 @@ export interface MultipleAutocompleteProps<T> {
     customNoMatchesMessage?: string;
     useFixedPositioning?: boolean;
     newItemButtonText?: string;
+    menuClassName?: string;
 }
 export declare const MultipleAutocomplete: <T>(componentsProps: MultipleAutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;

package/package.json

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