@reportportal/ui-kit 0.0.1-alpha.128 → 0.0.1-alpha.129

package/dist/common/hooks/useOnClickOutside.d.ts

@@ -1,3 +1,6 @@
 import { RefObject } from 'react';
 
-export declare function useOnClickOutside<T extends HTMLElement = HTMLDivElement>(ref: RefObject<T>, handler?: (e?: MouseEvent) => void): void;
+export interface UseOnClickOutsideOptions {
+    ignoreSelectors?: string[];
+}
+export declare function useOnClickOutside<T extends HTMLElement = HTMLDivElement>(ref: RefObject<T>, handler?: (e?: MouseEvent) => void, options?: UseOnClickOutsideOptions): void;

package/dist/components/dropdown/constants.d.ts

@@ -7,3 +7,4 @@ export declare enum EventName {
     ON_CLICK = "onClick"
 }
 export declare const SCROLLBARS_AUTO_HEIGHT_MAX = 216;
+export declare const DROPDOWN_PORTAL_MENU_ATTR = "data-dropdown-portal-menu";

package/dist/components/dropdown/index.d.ts

@@ -1,4 +1,5 @@
 import { Dropdown } from './dropdown';
 
 export { Dropdown };
+export { DROPDOWN_PORTAL_MENU_ATTR } from './constants';
 export default Dropdown;

package/dist/{datePicker-1a104b97.js → datePicker-12bb6fb4.js}

@@ -3,7 +3,7 @@ import B from "react-datepicker/dist/es/index.js";
 import { c as R } from "./bind-06a7ff84.js";
 import { useMemo as P, useRef as D } from "react";
 import { F as I } from "./fieldText-17fcba4f.js";
-import { D as E } from "./dropdown-1f7b1881.js";
+import { D as E } from "./dropdown-a99520ba.js";
 import { S as T } from "./calendarArrow-44c7e60e.js";
 import { registerLocale as j } from "react-datepicker";
 const ie = (n, s) => {

package/dist/datePicker.js

@@ -1,5 +1,5 @@
-import { D as t } from "./datePicker-1a104b97.js";
-import { r as z } from "./datePicker-1a104b97.js";
+import { D as t } from "./datePicker-12bb6fb4.js";
+import { r as z } from "./datePicker-12bb6fb4.js";
 import "react/jsx-runtime";
 import "react-datepicker/dist/es/index.js";
 import "./bind-06a7ff84.js";
@@ -11,7 +11,7 @@ import "./baseIconButton-251479f7.js";
 import "./spinLoader-c4a53718.js";
 import "./maxValueDisplay-9be01a75.js";
 import "./fieldLabel.js";
-import "./dropdown-1f7b1881.js";
+import "./dropdown-a99520ba.js";
 import "react-dom";
 import "@floating-ui/react-dom";
 import "downshift";

package/dist/{dropdown-1f7b1881.js → dropdown-a99520ba.js}

@@ -1,37 +1,37 @@
-import { jsxs as L, jsx as d, Fragment as Ie } from "react/jsx-runtime";
-import { forwardRef as or, useState as ie, useRef as T, useMemo as O, useCallback as b, useLayoutEffect as xe, useEffect as Q } from "react";
+import { jsxs as L, jsx as d, Fragment as Te } from "react/jsx-runtime";
+import { forwardRef as or, useState as ie, useRef as K, useMemo as O, useCallback as N, useLayoutEffect as Ie, useEffect as Q } from "react";
 import { createPortal as ar } from "react-dom";
 import { c as Le } from "./bind-06a7ff84.js";
 import { useFloating as lr, offset as ir, flip as cr, size as dr, autoUpdate as ur } from "@floating-ui/react-dom";
 import { useSelect as ce } from "downshift";
 import { Scrollbars as fr } from "rc-scrollbars";
-import { K as v } from "./keyCodes-f63c0e11.js";
+import { K as E } from "./keyCodes-f63c0e11.js";
 import { B as hr } from "./baseIconButton-251479f7.js";
 import { S as _r } from "./clear-53660571.js";
 import { S as pr } from "./dropdown-0260bb66.js";
 import { Tooltip as gr } from "./tooltip.js";
 import { FieldLabel as wr } from "./fieldLabel.js";
 import { C as mr } from "./checkbox-ed6cc375.js";
-const yr = "_disabled_14s7v_12", vr = "_hidden_14s7v_16", Er = "_hover_14s7v_22", Cr = "_selected_14s7v_38", Or = {
+const yr = "_disabled_14s7v_12", Er = "_hidden_14s7v_16", vr = "_hover_14s7v_22", Cr = "_selected_14s7v_38", Or = {
   "dropdown-option": "_dropdown-option_14s7v_1",
   disabled: yr,
-  hidden: vr,
-  hover: Er,
+  hidden: Er,
+  hover: vr,
   "depth-1": "_depth-1_14s7v_32",
   selected: Cr,
   "multi-select": "_multi-select_14s7v_38",
   "single-option": "_single-option_14s7v_43",
   "sub-option": "_sub-option_14s7v_50"
-}, Ke = Le.bind(Or), Te = or(
+}, xe = Le.bind(Or), Ke = or(
   (n, t) => {
     const {
-      option: { value: l, disabled: a, hidden: u, label: h, title: E, groupRef: g },
-      selected: W,
+      option: { value: l, disabled: a, hidden: u, label: _, title: v, groupRef: g },
+      selected: V,
       onChange: Y,
-      render: R,
+      render: W,
       highlightHovered: S,
       onMouseEnter: Z,
-      multiSelect: N,
+      multiSelect: D,
       isPartiallyChecked: H = !1,
       depth: $ = 0,
       hasChildren: ee = !1
@@ -41,41 +41,41 @@ const yr = "_disabled_14s7v_12", vr = "_hidden_14s7v_16", Er = "_hover_14s7v_22"
     return /* @__PURE__ */ L(
       "div",
       {
-        className: Ke("dropdown-option", {
-          selected: W,
+        className: xe("dropdown-option", {
+          selected: V,
           disabled: a,
           hidden: u,
           hover: S,
-          "multi-select": N,
+          "multi-select": D,
           "has-children": ee,
           [`depth-${$}`]: $ > 0
         }),
-        title: E,
+        title: v,
         onClick: re,
         ref: t,
         onMouseEnter: Z,
         children: [
-          N && /* @__PURE__ */ d(mr, { value: !!W, partiallyChecked: H }),
+          D && /* @__PURE__ */ d(mr, { value: !!V, partiallyChecked: H }),
           /* @__PURE__ */ d(
             "div",
             {
-              className: Ke("single-option", {
+              className: xe("single-option", {
                 "sub-option": !!g
               }),
-              children: R ? R(n) : h
+              children: W ? W(n) : _
             }
           )
         ]
       }
     );
   }
-), br = [
-  v.ENTER_KEY_CODE,
-  v.SPACE_KEY_CODE,
-  v.ARROW_DOWN_KEY_CODE
-], Nr = [v.ESCAPE_KEY_CODE, v.TAB_KEY_CODE];
+), Nr = [
+  E.ENTER_KEY_CODE,
+  E.SPACE_KEY_CODE,
+  E.ARROW_DOWN_KEY_CODE
+], Dr = [E.ESCAPE_KEY_CODE, E.TAB_KEY_CODE];
 var k = /* @__PURE__ */ ((n) => (n.ON_KEY_DOWN = "onKeyDown", n.ON_CLICK = "onClick", n))(k || {});
-const Dr = 216, Ar = (n, t) => {
+const br = 216, Ar = "data-dropdown-portal-menu", Tr = (n, t) => {
   const l = Array.isArray(t) ? t : [t];
   return n.findIndex(({ value: a }) => l.includes(a));
 }, Ir = (n, t) => (n % t + t) % t, de = (n, t = 0, l = 1) => {
@@ -91,80 +91,80 @@ const Dr = 216, Ar = (n, t) => {
     l
   );
 }, xr = (n, t) => de(n, t), Kr = (n, t) => de(n, t, -1), ke = (n, t = 0, l) => !n || n.length === 0 ? [] : n.reduce((a, u) => {
-  var h;
-  return u && (a.push({ option: u, depth: t, parent: l }), (h = u.children) != null && h.length && a.push(...ke(u.children, t + 1, u))), a;
+  var _;
+  return u && (a.push({ option: u, depth: t, parent: l }), (_ = u.children) != null && _.length && a.push(...ke(u.children, t + 1, u))), a;
 }, []), Ye = (n) => !n || n.length === 0 ? [] : n.reduce((t, l) => {
   var a;
   return l && ((a = l.children) != null && a.length ? t.push(...Ye(l.children)) : t.push(l)), t;
 }, []), Pe = (n) => {
   var t;
   return n ? (t = n.children) != null && t.length ? n.children.reduce((l, a) => (a && l.push(...Pe(a)), l), []) : [n.value] : [];
-}, Tr = "_container_owe49_1", Lr = "_icon_owe49_7", kr = "_arrow_owe49_13", Yr = "_dropdown_owe49_27", Pr = "_disabled_owe49_44", Mr = "_value_owe49_51", Vr = "_error_owe49_54", Wr = "_touched_owe49_54", Rr = "_opened_owe49_58", Sr = "_placeholder_owe49_93", Hr = "_ghost_owe49_139", $r = "_divider_owe49_160", zr = {
-  container: Tr,
-  icon: Lr,
-  arrow: kr,
+}, Lr = "_container_owe49_1", kr = "_icon_owe49_7", Yr = "_arrow_owe49_13", Pr = "_dropdown_owe49_27", Mr = "_disabled_owe49_44", Rr = "_value_owe49_51", Vr = "_error_owe49_54", Wr = "_touched_owe49_54", Sr = "_opened_owe49_58", Hr = "_placeholder_owe49_93", $r = "_ghost_owe49_139", zr = "_divider_owe49_160", Br = {
+  container: Lr,
+  icon: kr,
+  arrow: Yr,
   "clear-button": "_clear-button_owe49_19",
-  dropdown: Yr,
+  dropdown: Pr,
   "transparent-background": "_transparent-background_owe49_41",
-  disabled: Pr,
-  value: Mr,
+  disabled: Mr,
+  value: Rr,
   error: Vr,
   touched: Wr,
-  opened: Rr,
-  placeholder: Sr,
+  opened: Sr,
+  placeholder: Hr,
   "mobile-disabled": "_mobile-disabled_owe49_97",
   "value-wrapper": "_value-wrapper_owe49_102",
   "value-tooltip": "_value-tooltip_owe49_108",
   "select-list": "_select-list_owe49_113",
   "limited-width": "_limited-width_owe49_130",
   "options-container": "_options-container_owe49_134",
-  ghost: Hr,
-  divider: $r
-}, f = Le.bind(zr), ot = ({
+  ghost: $r,
+  divider: zr
+}, f = Le.bind(Br), at = ({
   multiSelect: n = !1,
   value: t = n ? [] : "",
   options: l = [],
   disabled: a = !1,
   error: u,
-  onChange: h,
-  onFocus: E,
+  onChange: _,
+  onFocus: v,
   onBlur: g,
-  mobileDisabled: W,
+  mobileDisabled: V,
   title: Y,
-  touched: R = !1,
+  touched: W = !1,
   icon: S,
   variant: Z,
-  placeholder: N = "",
+  placeholder: D = "",
   label: H = "",
   renderOption: $,
   transparentBackground: ee = !1,
   className: re,
   toggleButtonClassName: z,
   selectListClassName: Me,
-  isListWidthLimited: Ve = !1,
+  isListWidthLimited: Re = !1,
   optionAll: te = { value: "all", label: "All" },
   isOptionAllVisible: ue = !1,
-  onSelectAll: We = () => {
+  onSelectAll: Ve = () => {
   },
   formatDisplayedValue: fe,
   notScrollable: P = !1,
   footer: B,
   includeGroupValue: he = !1,
-  clearable: Re = !1,
+  clearable: We = !1,
   onClear: _e = () => {
   },
   clearButtonAriaLabel: Se = "Clear selection",
   tooltipPortalRoot: He,
   tooltipZIndex: $e,
-  menuPortalRoot: _
+  menuPortalRoot: h
 }) => {
-  const [i, j] = ie(!1), pe = T(null), ge = T(null), M = T(null), ne = T(0), se = T(null), [ze, we] = ie(!1), [Be, U] = ie(null), D = T(null), V = O(() => ke(l), [l]), p = O(
-    () => V.map(({ option: e }) => e),
-    [V]
-  ), q = O(() => V.filter(({ option: e }) => {
+  const [i, U] = ie(!1), pe = K(null), ge = K(null), M = K(null), ne = K(0), se = K(null), [ze, we] = ie(!1), [Be, j] = ie(null), b = K(null), R = O(() => ke(l), [l]), p = O(
+    () => R.map(({ option: e }) => e),
+    [R]
+  ), q = O(() => R.filter(({ option: e }) => {
     var r;
     return (r = e.children) == null ? void 0 : r.length;
-  }).map(({ option: e }) => e), [V]), me = O(() => Ye(l), [l]), w = O(
+  }).map(({ option: e }) => e), [R]), me = O(() => Ye(l), [l]), w = O(
     () => me.map(({ value: e }) => e),
     [me]
   ), F = O(() => {
@@ -172,30 +172,30 @@ const Dr = 216, Ar = (n, t) => {
     return q.forEach((r) => {
       e.set(r.value, Pe(r));
     }), e;
-  }, [q]), X = b(
+  }, [q]), X = N(
     (e) => (q.forEach((r) => {
       const s = F.get(r.value) ?? [], o = s.length > 0 && s.every((c) => e.has(c));
       he && o ? e.add(r.value) : e.delete(r.value);
     }), e),
     [q, he, F]
-  ), A = O(() => !n || !Array.isArray(t) ? /* @__PURE__ */ new Set() : X(new Set(t)), [n, t, X]), ye = n ? Array.isArray(t) && t.length > 0 : t || t === !1 || t === 0, je = Re && ye && !a, Ue = b((e) => {
+  ), A = O(() => !n || !Array.isArray(t) ? /* @__PURE__ */ new Set() : X(new Set(t)), [n, t, X]), ye = n ? Array.isArray(t) && t.length > 0 : t || t === !1 || t === 0, Ue = We && ye && !a, je = N((e) => {
     ne.current = e.scrollTop;
   }, []);
-  xe(() => {
-    i && !P && M.current && !(n && D.current !== null) && M.current.scrollTop(ne.current);
+  Ie(() => {
+    i && !P && M.current && !(n && b.current !== null) && M.current.scrollTop(ne.current);
   }, [i, P, t, n]);
-  const { refs: x, floatingStyles: ve } = lr({
+  const { refs: I, floatingStyles: Ee } = lr({
     placement: "bottom-start",
     middleware: [
       ir(5),
       cr({
         fallbackPlacements: ["bottom-start", "top-start", "bottom", "top"],
-        ..._ && {
+        ...h && {
           boundary: document.documentElement,
           rootBoundary: "viewport"
         }
       }),
-      _ ? dr({
+      h ? dr({
         apply({ rects: e, elements: r }) {
           const s = e.reference.width;
           Object.assign(r.floating.style, {
@@ -206,7 +206,7 @@ const Dr = 216, Ar = (n, t) => {
         }
       }) : null
     ].filter(Boolean),
-    whileElementsMounted: i && _ ? (e, r, s) => ur(e, r, s, {
+    whileElementsMounted: i && h ? (e, r, s) => ur(e, r, s, {
       animationFrame: !0
     }) : void 0
   }), qe = () => {
@@ -217,22 +217,22 @@ const Dr = 216, Ar = (n, t) => {
       s ? r.add(c) : r.delete(c);
     });
     const o = X(r);
-    h(Array.from(o)), We();
-  }, m = b(() => {
-    j(!1), g == null || g();
-  }, [g]), oe = b(() => {
+    _(Array.from(o)), Ve();
+  }, m = N(() => {
+    U(!1), g == null || g();
+  }, [g]), oe = N(() => {
     if (a)
       return;
-    h(n ? [] : ""), _e(), m(), requestAnimationFrame(() => {
-      const r = x.reference.current;
+    _(n ? [] : ""), _e(), m(), requestAnimationFrame(() => {
+      const r = I.reference.current;
       r && r instanceof HTMLElement && r.focus();
     });
-  }, [a, n, h, _e, m, x]), Fe = b(
+  }, [a, n, _, _e, m, I]), Fe = N(
     (e) => {
       e.preventDefault(), e.stopPropagation(), oe();
     },
     [oe]
-  ), Ee = b(
+  ), ve = N(
     (e) => {
       var c, y;
       if (!i)
@@ -249,41 +249,41 @@ const Dr = 216, Ar = (n, t) => {
     if (!i)
       return;
     const e = (r) => {
-      Ee(r);
+      ve(r);
     };
     return document.addEventListener("pointerdown", e), () => {
       document.removeEventListener("pointerdown", e);
     };
-  }, [i, Ee]);
+  }, [i, ve]);
   const Ce = (e) => {
     var r;
     if (!e.disabled) {
       if (n) {
         const s = Array.isArray(t) ? t : [], o = new Set(s);
         if ((r = e.children) != null && r.length) {
-          const y = F.get(e.value) ?? [], C = y.some((I) => !o.has(I));
-          y.forEach((I) => {
-            C ? o.add(I) : o.delete(I);
+          const y = F.get(e.value) ?? [], C = y.some((T) => !o.has(T));
+          y.forEach((T) => {
+            C ? o.add(T) : o.delete(T);
           });
         } else
           o.has(e.value) ? o.delete(e.value) : o.add(e.value);
         const c = X(o);
-        h(Array.from(c));
+        _(Array.from(c));
       } else
-        h(e.value);
-      j((s) => n || !s);
+        _(e.value);
+      U((s) => n || !s);
     }
-  }, Xe = () => p.find(({ value: e }) => e === t), Oe = Ar(p, t), {
+  }, Xe = () => p.find(({ value: e }) => e === t), Oe = Tr(p, t), {
     getToggleButtonProps: Ge,
     getLabelProps: Je,
-    getMenuProps: be,
+    getMenuProps: Ne,
     getItemProps: Qe,
-    setHighlightedIndex: K,
+    setHighlightedIndex: x,
     highlightedIndex: ae,
     selectedItem: G
   } = ce({
     items: p,
-    itemToString: (e) => (e != null && e.label ? String(e.label) : N) || "",
+    itemToString: (e) => (e != null && e.label ? String(e.label) : D) || "",
     selectedItem: Xe(),
     isOpen: i,
     circularNavigation: !0,
@@ -291,36 +291,36 @@ const Dr = 216, Ar = (n, t) => {
     onHighlightedIndexChange: (e) => {
       switch (e.type) {
         case ce.stateChangeTypes.MenuKeyDownArrowUp:
-          return U(k.ON_KEY_DOWN), K(Kr(p, e.highlightedIndex)), e;
+          return j(k.ON_KEY_DOWN), x(Kr(p, e.highlightedIndex)), e;
         case ce.stateChangeTypes.MenuKeyDownArrowDown:
-          return U(k.ON_KEY_DOWN), K(xr(p, e.highlightedIndex)), e;
+          return j(k.ON_KEY_DOWN), x(xr(p, e.highlightedIndex)), e;
         default:
           return e;
       }
     }
-  }), Ne = b(
+  }), De = N(
     (e) => {
-      ge.current = e, x.setFloating(e);
+      ge.current = e, I.setFloating(e);
     },
-    [x]
-  ), Ze = b(
+    [I]
+  ), Ze = N(
     (e = {}) => {
-      const r = be(e), s = r.ref;
+      const r = Ne(e), s = r.ref;
       return {
         ...r,
         ref: (o) => {
-          Ne(o), typeof s == "function" ? s(o) : s && (s.current = o);
+          De(o), typeof s == "function" ? s(o) : s && (s.current = o);
         }
       };
     },
-    [be, Ne]
+    [Ne, De]
   );
   Q(() => {
-    n && i && D.current !== null && D.current >= 0 && D.current < p.length && (K(D.current), D.current = null, requestAnimationFrame(() => {
+    n && i && b.current !== null && b.current >= 0 && b.current < p.length && (x(b.current), b.current = null, requestAnimationFrame(() => {
       M.current && !P && M.current.scrollTop(ne.current);
     }));
-  }, [n, i, t, p.length, K, P]), xe(() => {
-    if (!i || !_)
+  }, [n, i, t, p.length, x, P]), Ie(() => {
+    if (!i || !h)
       return;
     let e = window.scrollY, r = !0;
     const s = 300, o = () => {
@@ -339,8 +339,8 @@ const Dr = 216, Ar = (n, t) => {
     return () => {
       clearTimeout(y), window.removeEventListener("scroll", c, { capture: !0 });
     };
-  }, [i, _]), Q(() => {
-    if (!i || !_)
+  }, [i, h]), Q(() => {
+    if (!i || !h)
       return;
     const e = () => {
       m();
@@ -348,9 +348,9 @@ const Dr = 216, Ar = (n, t) => {
     return window.addEventListener("resize", e), () => {
       window.removeEventListener("resize", e);
     };
-  }, [i, _, m]);
+  }, [i, h, m]);
   const er = () => {
-    a || (j((e) => !e), i ? g == null || g() : E == null || E(), U(k.ON_CLICK));
+    a || (U((e) => !e), i ? g == null || g() : v == null || v(), j(k.ON_CLICK));
   }, J = O(() => {
     if (n && Array.isArray(t) && w.length > 0 && w.every((r) => A.has(r)))
       return te.label;
@@ -358,7 +358,7 @@ const Dr = 216, Ar = (n, t) => {
     if (e.length > 0)
       return e.join(", ");
     if (!t && t !== !1 && t !== 0 || Array.isArray(t) && !t.length)
-      return N;
+      return D;
   }, [
     n,
     t,
@@ -366,7 +366,7 @@ const Dr = 216, Ar = (n, t) => {
     A,
     te.label,
     p,
-    N
+    D
   ]);
   Q(() => {
     if (se.current) {
@@ -377,21 +377,21 @@ const Dr = 216, Ar = (n, t) => {
   }, [J]);
   const rr = (e) => {
     const { keyCode: r } = e;
-    br.includes(r) && e.target === e.currentTarget && (e.preventDefault(), e.stopPropagation(), !i && (K(Oe), j(!0), E == null || E(), U(k.ON_KEY_DOWN)));
+    Nr.includes(r) && e.target === e.currentTarget && (e.preventDefault(), e.stopPropagation(), !i && (x(Oe), U(!0), v == null || v(), j(k.ON_KEY_DOWN)));
   }, tr = (e) => {
     const { keyCode: r } = e;
-    if (r === v.ENTER_KEY_CODE || r === v.SPACE_KEY_CODE) {
+    if (r === E.ENTER_KEY_CODE || r === E.SPACE_KEY_CODE) {
       const s = p[ae];
       if (!s)
         return;
-      n && (D.current = ae), Ce(s), n || m();
+      n && (b.current = ae), Ce(s), n || m();
       return;
     }
-    Nr.includes(r) && (e.stopPropagation(), m());
-  }, De = () => /* @__PURE__ */ L("div", { className: f("options-container"), children: [
-    n && ue && /* @__PURE__ */ L(Ie, { children: [
+    Dr.includes(r) && (e.stopPropagation(), m());
+  }, be = () => /* @__PURE__ */ L("div", { className: f("options-container"), children: [
+    n && ue && /* @__PURE__ */ L(Te, { children: [
       /* @__PURE__ */ d(
-        Te,
+        Ke,
         {
           option: te,
           selected: Array.isArray(t) && w.length > 0 && w.every((e) => A.has(e)),
@@ -403,11 +403,11 @@ const Dr = 216, Ar = (n, t) => {
       /* @__PURE__ */ d("div", { className: f("divider") }),
       " "
     ] }),
-    V.map(({ option: e, depth: r }, s) => {
-      var C, I;
+    R.map(({ option: e, depth: r }, s) => {
+      var C, T;
       const o = F.get(e.value) ?? [e.value], c = n && o.every((le) => A.has(le)), y = n && ((C = e.children) == null ? void 0 : C.length) && o.some((le) => A.has(le)) && !c;
       return /* @__PURE__ */ d(
-        Te,
+        Ke,
         {
           ...Qe({
             item: e,
@@ -419,15 +419,15 @@ const Dr = 216, Ar = (n, t) => {
           highlightHovered: ae === s && Be !== k.ON_CLICK,
           render: $,
           onChange: e.disabled ? null : () => Ce(e),
-          onMouseEnter: () => K(s),
+          onMouseEnter: () => x(s),
           depth: r,
-          hasChildren: !!((I = e.children) != null && I.length),
+          hasChildren: !!((T = e.children) != null && T.length),
           isPartiallyChecked: y
         },
         e.value
       );
     }),
-    B && /* @__PURE__ */ L(Ie, { children: [
+    B && /* @__PURE__ */ L(Te, { children: [
       /* @__PURE__ */ d("div", { className: f("divider") }),
       typeof B == "function" ? B(m) : B
     ] })
@@ -437,7 +437,7 @@ const Dr = 216, Ar = (n, t) => {
       {
         ref: se,
         className: f("value", {
-          placeholder: J === N
+          placeholder: J === D
         }),
         children: e
       }
@@ -459,13 +459,13 @@ const Dr = 216, Ar = (n, t) => {
       opened: i,
       disabled: a,
       error: u,
-      touched: R,
-      "mobile-disabled": W
+      touched: W,
+      "mobile-disabled": V
     }),
     onClick: er,
     onKeyDown: rr,
-    ref: x.setReference
-  }), { type: Br, ...Ae } = sr;
+    ref: I.setReference
+  }), { type: Ur, ...Ae } = sr;
   return /* @__PURE__ */ L("div", { ref: pe, className: f("container", re), title: Y, children: [
     H && /* @__PURE__ */ d(wr, { ...Je(), children: H }),
     /* @__PURE__ */ L(
@@ -478,14 +478,14 @@ const Dr = 216, Ar = (n, t) => {
         children: [
           S && /* @__PURE__ */ d("span", { className: f("icon"), children: S }),
           /* @__PURE__ */ d("div", { className: f("value-wrapper"), children: nr() }),
-          je && /* @__PURE__ */ d(
+          Ue && /* @__PURE__ */ d(
             hr,
             {
               className: f("clear-button"),
               onClick: Fe,
               onKeyDown: (e) => {
                 const { keyCode: r } = e;
-                (r === v.ENTER_KEY_CODE || r === v.SPACE_KEY_CODE) && (e.preventDefault(), e.stopPropagation(), oe());
+                (r === E.ENTER_KEY_CODE || r === E.SPACE_KEY_CODE) && (e.preventDefault(), e.stopPropagation(), oe());
               },
               "aria-label": Se,
               children: /* @__PURE__ */ d(_r, {})
@@ -497,42 +497,47 @@ const Dr = 216, Ar = (n, t) => {
     ),
     i && (() => {
       var o;
-      const e = (o = x.reference.current) == null ? void 0 : o.getBoundingClientRect().width, r = _ && e ? {
-        ...ve,
+      const e = (o = I.reference.current) == null ? void 0 : o.getBoundingClientRect().width, r = h && e ? {
+        ...Ee,
         width: `${e}px`,
         minWidth: `${e}px`,
         maxWidth: `${e}px`
-      } : ve, s = /* @__PURE__ */ d(
+      } : Ee, s = /* @__PURE__ */ d(
         "div",
         {
           style: r,
           className: f(
             "select-list",
-            { opened: i, "limited-width": Ve },
+            {
+              opened: i,
+              "limited-width": Re
+            },
             Me
           ),
+          ...h && { [Ar]: "" },
           ...Ze({
             onKeyDown: tr
           }),
-          children: P ? De() : /* @__PURE__ */ d(
+          children: P ? be() : /* @__PURE__ */ d(
             fr,
             {
               autoHeight: !0,
-              autoHeightMax: Dr,
+              autoHeightMax: br,
               hideTracksWhenNotNeeded: !0,
               ref: (c) => {
                 M.current = c;
               },
-              onScrollFrame: Ue,
-              children: De()
+              onScrollFrame: je,
+              children: be()
             }
           )
         }
       );
-      return _ ? ar(s, _) : s;
+      return h ? ar(s, h) : s;
     })()
   ] });
 };
 export {
-  ot as D
+  at as D,
+  Ar as a
 };

package/dist/dropdown.js

@@ -1,4 +1,5 @@
-import { D as r } from "./dropdown-1f7b1881.js";
+import { D as r } from "./dropdown-a99520ba.js";
+import { a as l } from "./dropdown-a99520ba.js";
 import "react/jsx-runtime";
 import "react";
 import "react-dom";
@@ -16,6 +17,7 @@ import "./floatingUi-41f8c7b5.js";
 import "./fieldLabel.js";
 import "./checkbox-ed6cc375.js";
 export {
+  l as DROPDOWN_PORTAL_MENU_ATTR,
   r as Dropdown,
   r as default
 };

package/dist/index.js

@@ -4,9 +4,9 @@ import { B as D } from "./breadcrumbs-8e5ca8d7.js";
 import { B } from "./bubblesLoader-f3ffa240.js";
 import { B as b } from "./button-97d9e587.js";
 import { C as A } from "./checkbox-ed6cc375.js";
-import { D as M } from "./datePicker-1a104b97.js";
+import { D as M } from "./datePicker-12bb6fb4.js";
 import "react-datepicker";
-import { D as k } from "./dropdown-1f7b1881.js";
+import { D as k } from "./dropdown-a99520ba.js";
 import { FieldLabel as L } from "./fieldLabel.js";
 import { F as O } from "./fieldNumber-d1b5a7a1.js";
 import { F as H } from "./fieldText-17fcba4f.js";

package/dist/modal.js

@@ -1,157 +1,180 @@
-import { jsx as e, jsxs as d, Fragment as P } from "react/jsx-runtime";
-import { useEffect as y, useState as p, useRef as j } from "react";
-import { Scrollbars as F } from "rc-scrollbars";
-import { AnimatePresence as G, motion as K } from "framer-motion";
-import { c as g } from "./bind-06a7ff84.js";
-import { K as Y } from "./keyCodes-f63c0e11.js";
-import { B as A } from "./button-97d9e587.js";
-import { Tooltip as U } from "./tooltip.js";
-import { B as X } from "./baseIconButton-251479f7.js";
-import { S as J } from "./close-4d480ef7.js";
+import { jsx as t, jsxs as u, Fragment as F } from "react/jsx-runtime";
+import { useRef as C, useEffect as w, useState as y, useMemo as G } from "react";
+import { Scrollbars as K } from "rc-scrollbars";
+import { AnimatePresence as U, motion as Y } from "framer-motion";
+import { c as x } from "./bind-06a7ff84.js";
+import { a as X } from "./dropdown-a99520ba.js";
+import { K as J } from "./keyCodes-f63c0e11.js";
+import { B as D } from "./button-97d9e587.js";
+import { Tooltip as Q } from "./tooltip.js";
+import { B as V } from "./baseIconButton-251479f7.js";
+import { S as Z } from "./close-4d480ef7.js";
 import "react-dom";
+import "@floating-ui/react-dom";
+import "downshift";
+import "./clear-53660571.js";
+import "./dropdown-0260bb66.js";
+import "./fieldLabel.js";
+import "./checkbox-ed6cc375.js";
 import "@floating-ui/react";
 import "./floatingUi-41f8c7b5.js";
-function Q(t, o) {
-  y(() => {
+function tt(e, o, n) {
+  const c = C(n);
+  w(() => {
+    c.current = n;
+  }, [n]), w(() => {
     if (!o)
       return;
-    const i = (l) => {
-      t && t.current && !t.current.contains(l.target) && o(l);
+    const s = (a) => {
+      var r, d;
+      if (e && e.current && !e.current.contains(a.target)) {
+        const l = a.target;
+        ((d = (r = c.current) == null ? void 0 : r.ignoreSelectors) == null ? void 0 : d.some(
+          (v) => l == null ? void 0 : l.closest(v)
+        )) || o(a);
+      }
     };
-    return document.addEventListener("pointerdown", i), () => {
-      document.removeEventListener("pointerdown", i);
+    return document.addEventListener("pointerdown", s), () => {
+      document.removeEventListener("pointerdown", s);
     };
-  }, [t, o]);
+  }, [e, o]);
 }
-const V = () => {
-  const [t, o] = p({ width: 0, height: 0 });
-  return y(() => {
-    const i = () => {
+const et = () => {
+  const [e, o] = y({ width: 0, height: 0 });
+  return w(() => {
+    const n = () => {
       o({
         width: window.innerWidth,
         height: window.innerHeight
       });
     };
-    return window.addEventListener("resize", i), i(), () => window.removeEventListener("resize", i);
-  }, []), t;
-}, Z = "_scrollable_zh8d2_12", ee = {
+    return window.addEventListener("resize", n), n(), () => window.removeEventListener("resize", n);
+  }, []), e;
+}, ot = "_scrollable_zh8d2_12", nt = {
   "modal-content": "_modal-content_zh8d2_1",
-  scrollable: Z
-}, te = g.bind(ee), C = ({ scrollable: t = !1, children: o }) => /* @__PURE__ */ e("div", { className: te("modal-content", { scrollable: t }), children: o }), oe = {
+  scrollable: ot
+}, it = x.bind(nt), S = ({ scrollable: e = !1, children: o }) => /* @__PURE__ */ t("div", { className: it("modal-content", { scrollable: e }), children: o }), st = {
   "buttons-block": "_buttons-block_1mwne_1",
   "button-container": "_button-container_1mwne_7",
   "modal-footer": "_modal-footer_1mwne_12",
   "with-extra-node": "_with-extra-node_1mwne_19",
   "size-small": "_size-small_1mwne_23"
-}, u = g.bind(oe), ne = ({
-  footerNode: t,
+}, f = x.bind(st), lt = ({
+  footerNode: e,
   closeHandler: o,
-  okButton: i,
-  cancelButton: l,
+  okButton: n,
+  cancelButton: c,
   size: s
 }) => {
-  const { tooltipNode: h, ...r } = i || {}, x = () => {
-    const m = /* @__PURE__ */ e(A, { adjustWidthOn: s === "small" ? "parent" : "min-width", ...r });
-    return h ? /* @__PURE__ */ e(U, { content: h, placement: "top", width: 270, children: m }) : m;
+  const { tooltipNode: a, ...r } = n || {}, d = () => {
+    const l = /* @__PURE__ */ t(D, { adjustWidthOn: s === "small" ? "parent" : "min-width", ...r });
+    return a ? /* @__PURE__ */ t(Q, { content: a, placement: "top", width: 270, children: l }) : l;
   };
-  return /* @__PURE__ */ d("div", { className: u("modal-footer", { "with-extra-node": t, [`size-${s}`]: s }), children: [
-    t && t,
-    /* @__PURE__ */ d("div", { className: u("buttons-block"), children: [
-      l && /* @__PURE__ */ e("div", { className: u("button-container"), children: /* @__PURE__ */ e(
-        A,
+  return /* @__PURE__ */ u("div", { className: f("modal-footer", { "with-extra-node": e, [`size-${s}`]: s }), children: [
+    e && e,
+    /* @__PURE__ */ u("div", { className: f("buttons-block"), children: [
+      c && /* @__PURE__ */ t("div", { className: f("button-container"), children: /* @__PURE__ */ t(
+        D,
         {
           variant: "ghost",
           adjustWidthOn: s === "small" ? "parent" : "min-width",
           onClick: o,
-          ...l
+          ...c
         }
       ) }),
-      i && /* @__PURE__ */ e("div", { className: u("button-container"), children: x() })
+      n && /* @__PURE__ */ t("div", { className: f("button-container"), children: d() })
     ] })
   ] });
-}, ie = {
+}, at = {
   "modal-header": "_modal-header_w4aaf_1",
   "width-description": "_width-description_w4aaf_10",
   "modal-header-content": "_modal-header-content_w4aaf_14",
   "modal-title": "_modal-title_w4aaf_20",
   "close-modal-icon": "_close-modal-icon_w4aaf_29"
-}, w = g.bind(ie), le = ({ title: t, onClose: o, withDescription: i = !1 }) => /* @__PURE__ */ d("div", { className: w("modal-header", { "width-description": i }), children: [
-  /* @__PURE__ */ e("div", { className: w("modal-header-content"), children: t && /* @__PURE__ */ e("div", { className: w("modal-title"), children: t }) }),
-  /* @__PURE__ */ e(X, { className: w("close-modal-icon"), onClick: o, children: /* @__PURE__ */ e(J, {}) })
-] }), se = "_modal_yxql5_1", ae = "_description_yxql5_43", ce = "_scrollable_yxql5_53", de = {
-  modal: se,
+}, p = x.bind(at), rt = ({ title: e, onClose: o, withDescription: n = !1 }) => /* @__PURE__ */ u("div", { className: p("modal-header", { "width-description": n }), children: [
+  /* @__PURE__ */ t("div", { className: p("modal-header-content"), children: e && /* @__PURE__ */ t("div", { className: p("modal-title"), children: e }) }),
+  /* @__PURE__ */ t(V, { className: p("close-modal-icon"), onClick: o, children: /* @__PURE__ */ t(Z, {}) })
+] }), ct = "_modal_yxql5_1", dt = "_description_yxql5_43", mt = "_scrollable_yxql5_53", _t = {
+  modal: ct,
   "overlay-default": "_overlay-default_yxql5_12",
   "overlay-light-cyan": "_overlay-light-cyan_yxql5_16",
   "scrolling-content": "_scrolling-content_yxql5_20",
   "modal-window": "_modal-window_yxql5_26",
-  description: ae,
-  scrollable: ce,
+  description: dt,
+  scrollable: mt,
   "size-default": "_size-default_yxql5_57",
   "size-small": "_size-small_yxql5_69",
   "size-large": "_size-large_yxql5_81"
-}, f = g.bind(de), re = 0.9, me = 32 + 24, _e = 32 + 8, he = 36 + 16, ue = 32 * 2, ze = ({
-  title: t,
+}, g = x.bind(_t), ut = 0.9, ht = 32 + 24, wt = 32 + 8, ft = 36 + 16, pt = 32 * 2, $t = ({
+  title: e,
   children: o,
-  footerNode: i,
-  okButton: l,
+  footerNode: n,
+  okButton: c,
   cancelButton: s,
-  className: h,
+  className: a,
   size: r = "default",
-  onClose: x = () => {
+  onClose: d = () => {
   },
-  overlay: m = "default",
-  zIndex: T = 2,
-  allowCloseOutside: D = !0,
-  scrollable: b = !1,
-  withoutFooter: E = !1,
-  createFooter: H = null,
-  description: a = null
+  overlay: l = "default",
+  zIndex: E = 2,
+  allowCloseOutside: v = !0,
+  scrollable: H = !1,
+  withoutFooter: O = !1,
+  createFooter: M = null,
+  description: m = null
 }) => {
-  const [L, M] = p(!1), [S, k] = p(0), [I, q] = p(!1), c = j(null), N = V(), O = N.height, $ = O * re, v = (O - S) / 2, R = () => {
-    let n = $ - ue;
-    return E || (n = n - he), a ? n = n - _e : n = n - me, n;
-  }, _ = () => {
-    M(!1);
-  }, z = (n) => {
-    const { keyCode: B } = n;
-    B === Y.ESCAPE_KEY_CODE && _();
-  }, W = () => {
-    var n;
-    I || ((n = c.current) == null || n.focus(), q(!0));
+  const [I, N] = y(!1), [L, R] = y(0), [k, $] = y(!1), _ = C(null), A = et(), T = A.height, q = T * ut, b = (T - L) / 2, W = () => {
+    let i = q - pt;
+    return O || (i = i - ft), m ? i = i - wt : i = i - ht, i;
+  }, h = () => {
+    N(!1);
+  }, z = (i) => {
+    const { keyCode: j } = i;
+    j === J.ESCAPE_KEY_CODE && h();
+  }, P = () => {
+    var i;
+    k || ((i = _.current) == null || i.focus(), $(!0));
   };
-  return y(() => {
-    if (c && c.current) {
-      const { clientHeight: n } = c.current;
-      k(n);
+  w(() => {
+    if (_ && _.current) {
+      const { clientHeight: i } = _.current;
+      R(i);
     }
-  }, [o, N]), y(() => (M(!0), document.addEventListener("keydown", z, !1), () => document.removeEventListener("keydown", z, !1)), []), Q(c, D ? _ : void 0), /* @__PURE__ */ e(G, { onExitComplete: x, children: L && /* @__PURE__ */ e("div", { className: f("modal", { [`overlay-${m}`]: m }), style: { zIndex: T }, children: /* @__PURE__ */ d(
-    K.div,
+  }, [o, A]), w(() => (N(!0), document.addEventListener("keydown", z, !1), () => document.removeEventListener("keydown", z, !1)), []);
+  const B = G(
+    () => ({
+      ignoreSelectors: [`[${X}]`]
+    }),
+    []
+  );
+  return tt(_, v ? h : void 0, B), /* @__PURE__ */ t(U, { onExitComplete: d, children: I && /* @__PURE__ */ t("div", { className: g("modal", { [`overlay-${l}`]: l }), style: { zIndex: E }, children: /* @__PURE__ */ u(
+    Y.div,
     {
-      className: f("modal-window", { [`size-${r}`]: r }, h),
-      ref: c,
+      className: g("modal-window", { [`size-${r}`]: r }, a),
+      ref: _,
       tabIndex: 0,
-      initial: { opacity: 0, marginTop: -v },
-      animate: { opacity: 1, marginTop: v },
-      exit: { opacity: 0, marginTop: -v },
+      initial: { opacity: 0, marginTop: -b },
+      animate: { opacity: 1, marginTop: b },
+      exit: { opacity: 0, marginTop: -b },
       transition: { duration: 0.3 },
-      onAnimationStart: W,
+      onAnimationStart: P,
       children: [
-        /* @__PURE__ */ e(le, { title: t, onClose: _, withDescription: !!a }),
-        b ? /* @__PURE__ */ d(F, { autoHeight: !0, autoHeightMax: R(), hideTracksWhenNotNeeded: !0, children: [
-          a && /* @__PURE__ */ e("span", { className: f("description", { scrollable: b }), children: a }),
-          /* @__PURE__ */ e(C, { scrollable: !0, children: o })
-        ] }) : /* @__PURE__ */ d(P, { children: [
-          a && /* @__PURE__ */ e("span", { className: f("description"), children: a }),
-          /* @__PURE__ */ e(C, { children: o })
+        /* @__PURE__ */ t(rt, { title: e, onClose: h, withDescription: !!m }),
+        H ? /* @__PURE__ */ u(K, { autoHeight: !0, autoHeightMax: W(), hideTracksWhenNotNeeded: !0, children: [
+          m && /* @__PURE__ */ t("span", { className: g("description", { scrollable: H }), children: m }),
+          /* @__PURE__ */ t(S, { scrollable: !0, children: o })
+        ] }) : /* @__PURE__ */ u(F, { children: [
+          m && /* @__PURE__ */ t("span", { className: g("description"), children: m }),
+          /* @__PURE__ */ t(S, { children: o })
         ] }),
-        !E && (H ? H(_) : /* @__PURE__ */ e(
-          ne,
+        !O && (M ? M(h) : /* @__PURE__ */ t(
+          lt,
           {
             size: r,
-            footerNode: i,
-            okButton: l,
+            footerNode: n,
+            okButton: c,
             cancelButton: s,
-            closeHandler: _
+            closeHandler: h
           }
         ))
       ]
@@ -160,8 +183,8 @@ const V = () => {
   ) }) });
 };
 export {
-  ze as Modal,
-  C as ModalContent,
-  ne as ModalFooter,
-  le as ModalHeader
+  $t as Modal,
+  S as ModalContent,
+  lt as ModalFooter,
+  rt as ModalHeader
 };

package/package.json

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