@reportportal/ui-kit 0.0.1-alpha.224 → 0.0.1-alpha.225

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

@@ -47,6 +47,11 @@ export interface DropdownProps extends Omit<ComponentPropsWithRef<'div'>, 'onCha
      * @example menuPortalRoot={document.body}
      */
     menuPortalRoot?: Element;
+    /**
+     * Portal root for the Tooltip shown on disabled options that have an explicit `title`.
+     * When omitted, defaults to `document.body` in the browser (guarded for SSR).
+     */
+    disabledOptionTooltipPortalRoot?: Element;
     /** Whether to render selected values as tags using AdaptiveTagList (only for multiSelect mode) */
     isMultiSelectWithTags?: boolean;
     /** Message to display when no options match the search term */

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

@@ -23,6 +23,7 @@ export interface DropdownOptionProps {
     depth?: number;
     hasChildren?: boolean;
     option: DropdownOptionType;
+    disabledOptionTooltipPortalRoot?: Element;
 }
 export type FlattenedDropdownOption = {
     option: DropdownOptionType;

package/dist/{datePicker-ab9411c0.js → datePicker-bc0a9fca.js}

@@ -3,7 +3,7 @@ import { useMemo as E, forwardRef as G, useRef as V } from "react";
 import v from "react-datepicker/dist/es/index.js";
 import { c as L } from "./bind-06a7ff84.js";
 import { F as W } from "./fieldText-1749da7a.js";
-import { D as x } from "./dropdown-110ce4a5.js";
+import { D as x } from "./dropdown-33f2bf75.js";
 import { S as I } from "./calendarArrow-44c7e60e.js";
 import { registerLocale as q } from "react-datepicker";
 const De = (t, n) => {

package/dist/datePicker.js

@@ -1,5 +1,5 @@
-import { D as t } from "./datePicker-ab9411c0.js";
-import { r as E } from "./datePicker-ab9411c0.js";
+import { D as t } from "./datePicker-bc0a9fca.js";
+import { r as H } from "./datePicker-bc0a9fca.js";
 import "react/jsx-runtime";
 import "react";
 import "react-datepicker/dist/es/index.js";
@@ -11,7 +11,7 @@ import "./baseIconButton-251479f7.js";
 import "./spinLoader-c4a53718.js";
 import "./maxValueDisplay-9be01a75.js";
 import "./fieldLabel.js";
-import "./dropdown-110ce4a5.js";
+import "./dropdown-33f2bf75.js";
 import "react-dom";
 import "@floating-ui/react-dom";
 import "downshift";
@@ -26,10 +26,13 @@ import "react-dnd";
 import "react-dnd-html5-backend";
 import "./useEllipsisTitle-462fa254.js";
 import "./checkbox-76aa8f97.js";
+import "./tooltip.js";
+import "@floating-ui/react";
+import "./floatingUi-46f5b896.js";
 import "./calendarArrow-44c7e60e.js";
 import "react-datepicker";
 export {
   t as DatePicker,
   t as default,
-  E as registerDatePickerLocale
+  H as registerDatePickerLocale
 };

package/dist/{dropdown-110ce4a5.js → dropdown-33f2bf75.js}

@@ -1,45 +1,46 @@
-import { jsxs as R, jsx as u, Fragment as Se } from "react/jsx-runtime";
-import { forwardRef as Er, useState as we, useRef as k, useMemo as w, useCallback as v, useLayoutEffect as He, useEffect as B } from "react";
-import { createPortal as yr } from "react-dom";
-import { c as We } from "./bind-06a7ff84.js";
-import { useFloating as Cr, offset as Ar, flip as Or, size as Dr, autoUpdate as br } from "@floating-ui/react-dom";
+import { jsxs as R, jsx as u, Fragment as He } from "react/jsx-runtime";
+import { forwardRef as yr, useState as we, useRef as k, useMemo as w, useCallback as v, useLayoutEffect as $e, useEffect as F } from "react";
+import { createPortal as Cr } from "react-dom";
+import { c as ze } from "./bind-06a7ff84.js";
+import { useFloating as Ar, offset as Or, flip as br, size as Dr, autoUpdate as Nr } from "@floating-ui/react-dom";
 import { useSelect as Ee } from "downshift";
-import { Scrollbars as Nr } from "rc-scrollbars";
+import { Scrollbars as vr } from "rc-scrollbars";
 import { K as p } from "./keyCodes-f63c0e11.js";
-import { B as vr } from "./baseIconButton-251479f7.js";
-import { S as Ir } from "./clear-53660571.js";
-import { S as Kr } from "./dropdown-0260bb66.js";
-import { FieldLabel as Lr } from "./fieldLabel.js";
-import { AdaptiveTagList as Tr } from "./adaptiveTagList.js";
+import { B as Ir } from "./baseIconButton-251479f7.js";
+import { S as Kr } from "./clear-53660571.js";
+import { S as Lr } from "./dropdown-0260bb66.js";
+import { FieldLabel as Tr } from "./fieldLabel.js";
+import { AdaptiveTagList as xr } from "./adaptiveTagList.js";
 import "react-dnd";
 import "react-dnd-html5-backend";
-import { u as xr } from "./useEllipsisTitle-462fa254.js";
-import { C as kr } from "./checkbox-76aa8f97.js";
+import { u as kr } from "./useEllipsisTitle-462fa254.js";
+import { C as Rr } from "./checkbox-76aa8f97.js";
+import { Tooltip as Pr } from "./tooltip.js";
 import { i as ne } from "./isEmpty-ccacb5ff.js";
-const Rr = (n) => {
+const Yr = (t) => {
   const r = {}, c = {};
-  return Object.entries(n).forEach(([o, f]) => {
+  return Object.entries(t).forEach(([o, h]) => {
     if (/^data[A-Z]/.test(o) || /^aria[A-Z]/.test(o)) {
       const m = o.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").toLowerCase();
-      r[m] = f;
+      r[m] = h;
     } else
-      c[o] = f;
+      c[o] = h;
   }), { transformed: r, remaining: c };
-}, Pr = "_disabled_100r3_12", Yr = "_hidden_100r3_17", Vr = "_hover_100r3_26", Sr = "_selected_100r3_42", Hr = {
+}, Vr = "_disabled_100r3_12", Sr = "_hidden_100r3_17", Hr = "_hover_100r3_26", $r = "_selected_100r3_42", Mr = {
   "dropdown-option": "_dropdown-option_100r3_1",
-  disabled: Pr,
-  hidden: Yr,
+  disabled: Vr,
+  hidden: Sr,
   "multi-select": "_multi-select_100r3_20",
-  hover: Vr,
+  hover: Hr,
   "depth-1": "_depth-1_100r3_36",
-  selected: Sr,
+  selected: $r,
   "single-option": "_single-option_100r3_47",
   "sub-option": "_sub-option_100r3_54"
-}, $e = We.bind(Hr), Me = Er(
-  (n, r) => {
+}, Me = ze.bind(Mr), We = yr(
+  (t, r) => {
     const {
-      option: { value: c, disabled: o, hidden: f, label: m, title: E, groupRef: A },
-      selected: F,
+      option: { value: c, disabled: o, hidden: h, label: m, title: E, groupRef: A },
+      selected: B,
       onChange: S,
       render: U,
       highlightHovered: j,
@@ -48,16 +49,16 @@ const Rr = (n) => {
       isPartiallyChecked: q = !1,
       depth: Z = 0,
       hasChildren: oe = !1
-    } = n, ae = (ie) => {
+    } = t, ae = (ie) => {
       const H = ie.target;
       o || H.closest("label") && !(H instanceof HTMLInputElement || H instanceof HTMLDivElement) || S == null || S(c);
     }, G = /* @__PURE__ */ R(
       "div",
       {
-        className: $e("dropdown-option", {
-          selected: F,
+        className: Me("dropdown-option", {
+          selected: B,
           disabled: o,
-          hidden: f,
+          hidden: h,
           hover: j,
           "multi-select": O,
           "has-children": oe,
@@ -68,65 +69,75 @@ const Rr = (n) => {
         ref: r,
         onMouseEnter: se,
         children: [
-          O && /* @__PURE__ */ u(kr, { value: !!F, partiallyChecked: q }),
+          O && /* @__PURE__ */ u(Rr, { value: !!B, partiallyChecked: q }),
           /* @__PURE__ */ u(
             "div",
             {
-              className: $e("single-option", {
+              className: Me("single-option", {
                 "sub-option": !!A
               }),
-              children: U ? U(n) : m
+              children: U ? U(t) : m
             }
           )
         ]
       }
     );
-    return o && E ? /* @__PURE__ */ u("div", { title: E, children: G }) : G;
+    return o && E ? /* @__PURE__ */ u(
+      Pr,
+      {
+        content: E,
+        placement: "top",
+        wrapperTabIndex: -1,
+        isFloating: !1,
+        portalRoot: t.disabledOptionTooltipPortalRoot ?? (typeof document < "u" ? document.body : void 0),
+        children: G
+      }
+    ) : G;
   }
-), $r = [
+), Wr = [
   p.ENTER_KEY_CODE,
   p.SPACE_KEY_CODE,
   p.ARROW_DOWN_KEY_CODE
-], Mr = [p.ESCAPE_KEY_CODE, p.TAB_KEY_CODE];
-var V = /* @__PURE__ */ ((n) => (n.ON_KEY_DOWN = "onKeyDown", n.ON_CLICK = "onClick", n))(V || {});
-const Wr = 240, zr = "data-dropdown-portal-menu", Br = 10, Fr = (n, r) => {
+], zr = [p.ESCAPE_KEY_CODE, p.TAB_KEY_CODE];
+var V = /* @__PURE__ */ ((t) => (t.ON_KEY_DOWN = "onKeyDown", t.ON_CLICK = "onClick", t))(V || {});
+const Fr = 240, Br = "data-dropdown-portal-menu", Ur = 10, jr = (t, r) => {
   const c = Array.isArray(r) ? r : [r];
-  return n.findIndex(({ value: o }) => c.includes(o));
-}, Ur = (n, r) => (n % r + r) % r, ye = (n, r = 0, c = 1) => {
-  var f;
-  if (n.length === 0)
+  return t.findIndex(({ value: o }) => c.includes(o));
+}, qr = (t, r) => (t % r + r) % r, ye = (t, r = 0, c = 1) => {
+  var h;
+  if (t.length === 0)
     return 0;
-  if (!((f = n[r]) != null && f.disabled))
+  if (!((h = t[r]) != null && h.disabled))
     return r;
-  const o = n.length;
+  const o = t.length;
   return ye(
-    n,
-    Ur(r + c, o),
+    t,
+    qr(r + c, o),
     c
   );
-}, jr = (n, r) => ye(n, r), qr = (n, r) => ye(n, r, -1), ze = (n, r = 0, c) => !n || n.length === 0 ? [] : n.reduce((o, f) => {
+}, Zr = (t, r) => ye(t, r), Gr = (t, r) => ye(t, r, -1), Fe = (t, r = 0, c) => !t || t.length === 0 ? [] : t.reduce((o, h) => {
   var m;
-  return f && (o.push({ option: f, depth: r, parent: c }), (m = f.children) != null && m.length && o.push(...ze(f.children, r + 1, f))), o;
-}, []), Be = (n) => !n || n.length === 0 ? [] : n.reduce((r, c) => {
+  return h && (o.push({ option: h, depth: r, parent: c }), (m = h.children) != null && m.length && o.push(...Fe(h.children, r + 1, h))), o;
+}, []), Be = (t) => !t || t.length === 0 ? [] : t.reduce((r, c) => {
   var o;
   return c && ((o = c.children) != null && o.length ? r.push(...Be(c.children)) : r.push(c)), r;
-}, []), Fe = (n) => {
+}, []), Ue = (t) => {
   var r;
-  return n ? (r = n.children) != null && r.length ? n.children.reduce((c, o) => (o && c.push(...Fe(o)), c), []) : [n.value] : [];
-}, Zr = "_container_sth8o_1", Gr = "_icon_sth8o_7", Xr = "_arrow_sth8o_15", Jr = "_dropdown_sth8o_33", Qr = "_disabled_sth8o_53", et = "_value_sth8o_60", rt = "_error_sth8o_63", tt = "_touched_sth8o_63", nt = "_opened_sth8o_67", st = "_placeholder_sth8o_101", ot = "_ghost_sth8o_184", at = "_divider_sth8o_202", it = {
-  container: Zr,
-  icon: Gr,
-  arrow: Xr,
+  return t ? (r = t.children) != null && r.length ? t.children.reduce((c, o) => (o && c.push(...Ue(o)), c), []) : [t.value] : [];
+}, Xr = "_container_sth8o_1", Jr = "_icon_sth8o_7", Qr = "_arrow_sth8o_15", et = "_dropdown_sth8o_33", rt = "_disabled_sth8o_53", tt = "_value_sth8o_60", nt = "_error_sth8o_63", st = "_touched_sth8o_63", ot = "_opened_sth8o_67", at = "_placeholder_sth8o_101", it = "_ghost_sth8o_184", lt = "_divider_sth8o_202", ct = {
+  container: Xr,
+  icon: Jr,
+  arrow: Qr,
   "clear-button": "_clear-button_sth8o_23",
-  dropdown: Jr,
+  dropdown: et,
   "multi-select-with-tags": "_multi-select-with-tags_sth8o_47",
   "transparent-background": "_transparent-background_sth8o_50",
-  disabled: Qr,
-  value: et,
-  error: rt,
-  touched: tt,
-  opened: nt,
-  placeholder: st,
+  disabled: rt,
+  value: tt,
+  error: nt,
+  touched: st,
+  opened: ot,
+  placeholder: at,
   "mobile-disabled": "_mobile-disabled_sth8o_105",
   "value-wrapper": "_value-wrapper_sth8o_110",
   "tags-wrapper": "_tags-wrapper_sth8o_116",
@@ -136,18 +147,18 @@ const Wr = 240, zr = "data-dropdown-portal-menu", Br = 10, Fr = (n, r) => {
   "limited-width": "_limited-width_sth8o_163",
   "options-container": "_options-container_sth8o_167",
   "empty-list-message": "_empty-list-message_sth8o_172",
-  ghost: ot,
-  divider: at
-}, _ = We.bind(it), vt = ({
-  multiSelect: n = !1,
-  value: r = n ? [] : "",
+  ghost: it,
+  divider: lt
+}, _ = ze.bind(ct), Lt = ({
+  multiSelect: t = !1,
+  value: r = t ? [] : "",
   options: c = [],
   disabled: o = !1,
-  error: f,
+  error: h,
   onChange: m,
   onFocus: E,
   onBlur: A,
-  mobileDisabled: F,
+  mobileDisabled: B,
   title: S,
   touched: U = !1,
   icon: j,
@@ -162,62 +173,63 @@ const Wr = 240, zr = "data-dropdown-portal-menu", Br = 10, Fr = (n, r) => {
   isListWidthLimited: H = !1,
   optionAll: le = { value: "all", label: "All" },
   isOptionAllVisible: Ce = !1,
-  onSelectAll: Ue = () => {
+  onSelectAll: je = () => {
   },
   formatDisplayedValue: ce,
   notScrollable: $ = !1,
   footer: X,
   includeGroupValue: Ae = !1,
-  clearable: je = !1,
+  clearable: qe = !1,
   onClear: Oe = () => {
   },
-  clearButtonAriaLabel: qe = "Clear selection",
+  clearButtonAriaLabel: Ze = "Clear selection",
   menuPortalRoot: y,
-  isMultiSelectWithTags: D = !1,
-  noMatchesMessage: Ze = "No matches found",
-  ...Ge
+  disabledOptionTooltipPortalRoot: be,
+  isMultiSelectWithTags: b = !1,
+  noMatchesMessage: Ge = "No matches found",
+  ...Xe
 }) => {
-  const { transformed: Xe, remaining: Je } = Rr(Ge), [l, J] = we(!1), [I, De] = we(""), be = k(null), Ne = k(null), M = k(null), de = k(0), ue = k(null), he = k(""), [Qe, Q] = we(null), K = k(null), W = w(() => ze(c), [c]), L = w(() => {
-    if (!D || !I.trim())
+  const { transformed: Je, remaining: Qe } = Yr(Xe), [l, J] = we(!1), [I, De] = we(""), Ne = k(null), ve = k(null), M = k(null), de = k(0), ue = k(null), fe = k(""), [er, Q] = we(null), K = k(null), W = w(() => Fe(c), [c]), L = w(() => {
+    if (!b || !I.trim())
       return W;
     const e = I.toLowerCase();
     return W.filter(
-      ({ option: t }) => t.label.toLowerCase().includes(e)
+      ({ option: n }) => n.label.toLowerCase().includes(e)
     );
-  }, [W, I, D]), g = w(
+  }, [W, I, b]), g = w(
     () => L.map(({ option: e }) => e),
     [L]
-  ), ve = w(
+  ), Ie = w(
     () => W.map(({ option: e }) => e),
     [W]
   ), ee = w(() => L.filter(({ option: e }) => {
-    var t;
-    return (t = e.children) == null ? void 0 : t.length;
-  }).map(({ option: e }) => e), [L]), Ie = w(() => Be(c), [c]), b = w(
-    () => Ie.map(({ value: e }) => e),
-    [Ie]
+    var n;
+    return (n = e.children) == null ? void 0 : n.length;
+  }).map(({ option: e }) => e), [L]), Ke = w(() => Be(c), [c]), D = w(
+    () => Ke.map(({ value: e }) => e),
+    [Ke]
   ), re = w(() => {
     const e = /* @__PURE__ */ new Map();
-    return ee.forEach((t) => {
-      e.set(t.value, Fe(t));
+    return ee.forEach((n) => {
+      e.set(n.value, Ue(n));
     }), e;
   }, [ee]), z = v(
-    (e) => (ee.forEach((t) => {
-      const s = re.get(t.value) ?? [], i = s.length > 0 && s.every((d) => e.has(d));
-      Ae && i ? e.add(t.value) : e.delete(t.value);
+    (e) => (ee.forEach((n) => {
+      const s = re.get(n.value) ?? [], i = s.length > 0 && s.every((d) => e.has(d));
+      Ae && i ? e.add(n.value) : e.delete(n.value);
     }), e),
     [ee, Ae, re]
-  ), T = w(() => !n || !Array.isArray(r) ? /* @__PURE__ */ new Set() : z(new Set(r)), [n, r, z]), fe = w(() => n ? Array.isArray(r) && r.length > 0 : g.some((e) => e.value === r) || r === !1 || r === 0 || !!r, [n, r, g]), er = je && fe && !o, rr = v((e) => {
+  ), T = w(() => !t || !Array.isArray(r) ? /* @__PURE__ */ new Set() : z(new Set(r)), [t, r, z]), he = w(() => t ? Array.isArray(r) && r.length > 0 : g.some((e) => e.value === r) || r === !1 || r === 0 || !!r, [t, r, g]), rr = qe && he && !o, tr = v((e) => {
     de.current = e.scrollTop;
   }, []);
-  He(() => {
-    l && !$ && M.current && !(n && K.current !== null) && M.current.scrollTop(de.current);
-  }, [l, $, r, n]);
-  const { refs: P, floatingStyles: Ke } = Cr({
+  $e(() => {
+    l && !$ && M.current && !(t && K.current !== null) && M.current.scrollTop(de.current);
+  }, [l, $, r, t]);
+  const { refs: P, floatingStyles: Le } = Ar({
     placement: "bottom-start",
     middleware: [
-      Ar(5),
-      Or({
+      Or(5),
+      br({
         fallbackPlacements: ["bottom-start", "top-start", "bottom", "top"],
         ...y && {
           boundary: document.documentElement,
@@ -225,9 +237,9 @@ const Wr = 240, zr = "data-dropdown-portal-menu", Br = 10, Fr = (n, r) => {
         }
       }),
       y ? Dr({
-        apply({ rects: e, elements: t }) {
+        apply({ rects: e, elements: n }) {
           const s = e.reference.width;
-          Object.assign(t.floating.style, {
+          Object.assign(n.floating.style, {
             width: `${s}px`,
             minWidth: `${s}px`,
             maxWidth: `${s}px`
@@ -235,66 +247,66 @@ const Wr = 240, zr = "data-dropdown-portal-menu", Br = 10, Fr = (n, r) => {
         }
       }) : null
     ].filter(Boolean),
-    whileElementsMounted: l ? (e, t, s) => br(e, t, s, {
+    whileElementsMounted: l ? (e, n, s) => Nr(e, n, s, {
       animationFrame: !0
     }) : void 0
-  }), tr = () => {
+  }), nr = () => {
     if (!Ce)
       return;
-    const e = Array.isArray(r) ? r : [], t = new Set(e), s = b.some((d) => !t.has(d));
-    b.forEach((d) => {
-      s ? t.add(d) : t.delete(d);
+    const e = Array.isArray(r) ? r : [], n = new Set(e), s = D.some((d) => !n.has(d));
+    D.forEach((d) => {
+      s ? n.add(d) : n.delete(d);
     });
-    const i = z(t);
-    m(Array.from(i)), Ue();
+    const i = z(n);
+    m(Array.from(i)), je();
   }, te = v(() => {
     l || (J(!0), E == null || E());
   }, [l, E]), C = v(() => {
-    J(!1), De(""), he.current = "", A == null || A();
+    J(!1), De(""), fe.current = "", A == null || A();
   }, [A]), _e = v(() => {
     if (o)
       return;
-    m(n ? [] : ""), Oe(), C(), requestAnimationFrame(() => {
-      const t = P.reference.current;
-      t && t instanceof HTMLElement && t.focus();
+    m(t ? [] : ""), Oe(), C(), requestAnimationFrame(() => {
+      const n = P.reference.current;
+      n && n instanceof HTMLElement && n.focus();
     });
-  }, [o, n, m, Oe, C, P]), nr = v(
+  }, [o, t, m, Oe, C, P]), sr = v(
     (e) => {
       e.preventDefault(), e.stopPropagation(), _e();
     },
     [_e]
-  ), Le = v(
+  ), Te = v(
     (e) => {
       var d, a;
       if (!l)
         return;
-      const t = e == null ? void 0 : e.target;
-      if (!t)
+      const n = e == null ? void 0 : e.target;
+      if (!n)
         return;
-      const s = (d = be.current) == null ? void 0 : d.contains(t), i = (a = Ne.current) == null ? void 0 : a.contains(t);
+      const s = (d = Ne.current) == null ? void 0 : d.contains(n), i = (a = ve.current) == null ? void 0 : a.contains(n);
       !s && !i && C();
     },
     [l, C]
   );
-  B(() => {
+  F(() => {
     if (!l)
       return;
-    const e = (t) => {
-      Le(t);
+    const e = (n) => {
+      Te(n);
     };
     return document.addEventListener("pointerdown", e), () => {
       document.removeEventListener("pointerdown", e);
     };
-  }, [l, Le]);
-  const Te = (e) => {
-    var t;
+  }, [l, Te]);
+  const xe = (e) => {
+    var n;
     if (!e.disabled) {
-      if (n) {
+      if (t) {
         const s = Array.isArray(r) ? r : [], i = new Set(s);
-        if ((t = e.children) != null && t.length) {
-          const a = re.get(e.value) ?? [], h = a.some((N) => !i.has(N));
+        if ((n = e.children) != null && n.length) {
+          const a = re.get(e.value) ?? [], f = a.some((N) => !i.has(N));
           a.forEach((N) => {
-            h ? i.add(N) : i.delete(N);
+            f ? i.add(N) : i.delete(N);
           });
         } else
           i.has(e.value) ? i.delete(e.value) : i.add(e.value);
@@ -302,81 +314,81 @@ const Wr = 240, zr = "data-dropdown-portal-menu", Br = 10, Fr = (n, r) => {
         m(Array.from(d));
       } else
         m(e.value);
-      J((s) => n || !s);
+      J((s) => t || !s);
     }
-  }, sr = () => g.find(({ value: e }) => e === r), xe = Fr(g, r), {
-    getToggleButtonProps: or,
-    getLabelProps: ar,
-    getMenuProps: ke,
-    getItemProps: ir,
+  }, or = () => g.find(({ value: e }) => e === r), ke = jr(g, r), {
+    getToggleButtonProps: ar,
+    getLabelProps: ir,
+    getMenuProps: Re,
+    getItemProps: lr,
     setHighlightedIndex: x,
     highlightedIndex: pe
   } = Ee({
     items: g,
     itemToString: (e) => (e != null && e.label ? String(e.label) : O) || "",
-    selectedItem: sr(),
+    selectedItem: or(),
     isOpen: l,
     circularNavigation: !0,
-    defaultHighlightedIndex: xe,
+    defaultHighlightedIndex: ke,
     onHighlightedIndexChange: (e) => {
       switch (e.type) {
         case Ee.stateChangeTypes.MenuKeyDownArrowUp:
-          return Q(V.ON_KEY_DOWN), x(qr(g, e.highlightedIndex)), e;
+          return Q(V.ON_KEY_DOWN), x(Gr(g, e.highlightedIndex)), e;
         case Ee.stateChangeTypes.MenuKeyDownArrowDown:
-          return Q(V.ON_KEY_DOWN), x(jr(g, e.highlightedIndex)), e;
+          return Q(V.ON_KEY_DOWN), x(Zr(g, e.highlightedIndex)), e;
         default:
           return e;
       }
     }
-  }), Re = v(
+  }), Pe = v(
     (e) => {
-      Ne.current = e, P.setFloating(e);
+      ve.current = e, P.setFloating(e);
     },
     [P]
-  ), lr = v(
+  ), cr = v(
     (e = {}) => {
-      const t = ke(e), s = t.ref;
+      const n = Re(e), s = n.ref;
       return {
-        ...t,
+        ...n,
         ref: (i) => {
-          Re(i), typeof s == "function" ? s(i) : s && (s.current = i);
+          Pe(i), typeof s == "function" ? s(i) : s && (s.current = i);
         }
       };
     },
-    [ke, Re]
+    [Re, Pe]
   );
-  B(() => {
-    n && l && K.current !== null && K.current >= 0 && K.current < g.length && (x(K.current), K.current = null, requestAnimationFrame(() => {
+  F(() => {
+    t && l && K.current !== null && K.current >= 0 && K.current < g.length && (x(K.current), K.current = null, requestAnimationFrame(() => {
       M.current && !$ && M.current.scrollTop(de.current);
     }));
-  }, [n, l, r, g.length, x, $]), B(() => {
-    l && D && requestAnimationFrame(() => {
+  }, [t, l, r, g.length, x, $]), F(() => {
+    l && b && requestAnimationFrame(() => {
       var e;
       (e = ue.current) == null || e.focus();
     });
-  }, [l, D]), B(() => {
-    D && l && I !== he.current && (he.current = I, I && x(0));
-  }, [I, D, l]), He(() => {
+  }, [l, b]), F(() => {
+    b && l && I !== fe.current && (fe.current = I, I && x(0));
+  }, [I, b, l]), $e(() => {
     if (!l || !y)
       return;
-    let e = window.scrollY, t = !0;
+    let e = window.scrollY, n = !0;
     const s = 300, i = () => {
-      if (!t)
+      if (!n)
         return;
       window.scrollY !== e && window.scrollTo(0, e);
-    }, d = (h) => {
-      t && (h.preventDefault(), h.stopImmediatePropagation(), i());
+    }, d = (f) => {
+      n && (f.preventDefault(), f.stopImmediatePropagation(), i());
     };
     e = window.scrollY, window.addEventListener("scroll", d, { passive: !1, capture: !0 }), requestAnimationFrame(() => {
       e = window.scrollY, i();
     });
     const a = setTimeout(() => {
-      t = !1;
+      n = !1;
     }, s);
     return () => {
       clearTimeout(a), window.removeEventListener("scroll", d, { capture: !0 });
     };
-  }, [l, y]), B(() => {
+  }, [l, y]), F(() => {
     if (!l || !y)
       return;
     const e = () => {
@@ -386,92 +398,94 @@ const Wr = 240, zr = "data-dropdown-portal-menu", Br = 10, Fr = (n, r) => {
       window.removeEventListener("resize", e);
     };
   }, [l, y, C]);
-  const Pe = () => {
+  const Ye = () => {
     o || (J((e) => !e), l ? A == null || A() : E == null || E(), Q(V.ON_CLICK));
   }, me = w(() => {
-    if (n && Array.isArray(r) && b.length > 0 && b.every((t) => T.has(t)))
+    if (t && Array.isArray(r) && D.length > 0 && D.every((n) => T.has(n)))
       return le.label;
-    const e = g.reduce((t, s) => ((Array.isArray(r) && r.includes(s.value) || s.value === r) && t.push(s.label), t), []);
+    const e = g.reduce((n, s) => ((Array.isArray(r) && r.includes(s.value) || s.value === r) && n.push(s.label), n), []);
     return e.length > 0 ? e.join(", ") : !r && r !== !1 && r !== 0 || Array.isArray(r) && !r.length ? O : typeof r == "string" && r.length > 0 && !O ? r : O || void 0;
   }, [
-    n,
+    t,
     r,
-    b,
+    D,
     T,
     le.label,
     g,
     O
-  ]), ge = w(() => ce ? ce(me) : me, [ce, me]), cr = fe && ge ? ge : void 0, { ref: dr, title: ur } = xr(cr), hr = (e) => {
-    const { keyCode: t } = e;
-    $r.includes(t) && e.target === e.currentTarget && (e.preventDefault(), e.stopPropagation(), !l && (x(xe), te(), Q(V.ON_KEY_DOWN)));
-  }, fr = (e) => {
-    const { keyCode: t } = e;
-    if (t === p.ENTER_KEY_CODE || t === p.SPACE_KEY_CODE) {
+  ]), ge = w(() => ce ? ce(me) : me, [ce, me]), dr = he && ge ? ge : void 0, { ref: ur, title: fr } = kr(dr), hr = (e) => {
+    const { keyCode: n } = e;
+    Wr.includes(n) && e.target === e.currentTarget && (e.preventDefault(), e.stopPropagation(), !l && (x(ke), te(), Q(V.ON_KEY_DOWN)));
+  }, _r = (e) => {
+    const { keyCode: n } = e;
+    if (n === p.ENTER_KEY_CODE || n === p.SPACE_KEY_CODE) {
       const s = g[pe];
       if (!s || s.disabled)
         return;
-      n && (K.current = pe), Te(s), n || C();
+      t && (K.current = pe), xe(s), t || C();
       return;
     }
-    Mr.includes(t) && (e.stopPropagation(), C());
-  }, Ye = () => /* @__PURE__ */ R("div", { className: _("options-container"), children: [
-    n && Ce && !ne(L) && /* @__PURE__ */ R(Se, { children: [
+    zr.includes(n) && (e.stopPropagation(), C());
+  }, Ve = () => /* @__PURE__ */ R("div", { className: _("options-container"), children: [
+    t && Ce && !ne(L) && /* @__PURE__ */ R(He, { children: [
       /* @__PURE__ */ u(
-        Me,
+        We,
         {
           option: le,
-          selected: Array.isArray(r) && b.length > 0 && b.every((e) => T.has(e)),
-          onChange: tr,
-          multiSelect: n,
-          isPartiallyChecked: b.some((e) => T.has(e)) && !b.every((e) => T.has(e))
+          selected: Array.isArray(r) && D.length > 0 && D.every((e) => T.has(e)),
+          onChange: nr,
+          multiSelect: t,
+          isPartiallyChecked: D.some((e) => T.has(e)) && !D.every((e) => T.has(e)),
+          disabledOptionTooltipPortalRoot: be
         }
       ),
       /* @__PURE__ */ u("div", { className: _("divider") }),
       " "
     ] }),
-    ne(L) ? /* @__PURE__ */ u("div", { className: _("empty-list-message"), children: Ze }) : L.map(({ option: e, depth: t }, s) => {
-      var h, N;
-      const i = re.get(e.value) ?? [e.value], d = n && i.every((Y) => T.has(Y)), a = n && ((h = e.children) == null ? void 0 : h.length) && i.some((Y) => T.has(Y)) && !d;
+    ne(L) ? /* @__PURE__ */ u("div", { className: _("empty-list-message"), children: Ge }) : L.map(({ option: e, depth: n }, s) => {
+      var f, N;
+      const i = re.get(e.value) ?? [e.value], d = t && i.every((Y) => T.has(Y)), a = t && ((f = e.children) == null ? void 0 : f.length) && i.some((Y) => T.has(Y)) && !d;
       return /* @__PURE__ */ u(
-        Me,
+        We,
         {
-          ...ir({
+          ...lr({
             item: e,
             index: s
           }),
-          multiSelect: n,
-          selected: n ? d : e.value === r,
-          option: { title: e.label, ...e },
-          highlightHovered: pe === s && Qe !== V.ON_CLICK,
+          multiSelect: t,
+          selected: t ? d : e.value === r,
+          option: e,
+          highlightHovered: pe === s && er !== V.ON_CLICK,
           render: Z,
-          onChange: e.disabled ? null : () => Te(e),
+          onChange: e.disabled ? null : () => xe(e),
           onMouseEnter: () => x(s),
-          depth: t,
+          depth: n,
           hasChildren: !!((N = e.children) != null && N.length),
-          isPartiallyChecked: a
+          isPartiallyChecked: a,
+          disabledOptionTooltipPortalRoot: be
         },
         e.value
       );
     }),
-    X && /* @__PURE__ */ R(Se, { children: [
+    X && /* @__PURE__ */ R(He, { children: [
       /* @__PURE__ */ u("div", { className: _("divider") }),
       typeof X == "function" ? X(C) : X
     ] })
-  ] }), _r = () => {
-    const e = ve.reduce((a, h) => (Array.isArray(r) && r.includes(h.value) && a.push(h.label), a), []), t = (a) => {
-      const h = ve.find(
-        ({ label: wr }) => wr === a
+  ] }), pr = () => {
+    const e = Ie.reduce((a, f) => (Array.isArray(r) && r.includes(f.value) && a.push(f.label), a), []), n = (a) => {
+      const f = Ie.find(
+        ({ label: Er }) => Er === a
       );
-      if (!h)
+      if (!f)
         return;
       const N = Array.isArray(r) ? r : [], Y = new Set(N);
-      Y.delete(h.value);
-      const gr = z(Y);
-      m(Array.from(gr));
+      Y.delete(f.value);
+      const wr = z(Y);
+      m(Array.from(wr));
     }, s = (a) => {
-      const h = a.target;
-      De(h.value), l || (te(), requestAnimationFrame(() => {
-        h.focus();
+      const f = a.target;
+      De(f.value), l || (te(), requestAnimationFrame(() => {
+        f.focus();
       }));
     }, i = (a) => {
       if (a.keyCode === p.ESCAPE_KEY_CODE) {
@@ -497,54 +511,54 @@ const Wr = 240, zr = "data-dropdown-portal-menu", Br = 10, Fr = (n, r) => {
     );
     return ne(e) ? /* @__PURE__ */ u("div", { className: _("tags-wrapper", "with-search"), children: d }) : /* @__PURE__ */ R("div", { className: _("tags-wrapper", "with-search"), children: [
       /* @__PURE__ */ u(
-        Tr,
+        xr,
         {
           tags: e,
-          onRemoveTag: t,
+          onRemoveTag: n,
           isShowAllView: !0,
-          defaultVisibleLines: Br
+          defaultVisibleLines: Ur
         }
       ),
       d
     ] });
-  }, pr = () => D && n && Array.isArray(r) ? _r() : /* @__PURE__ */ u(
+  }, mr = () => b && t && Array.isArray(r) ? pr() : /* @__PURE__ */ u(
     "span",
     {
-      ref: dr,
+      ref: ur,
       className: _("value", {
-        placeholder: !fe
+        placeholder: !he
       }),
-      title: ur,
+      title: fr,
       children: ge
     }
-  ), mr = or({
+  ), gr = ar({
     className: _("dropdown", se, G, {
       "transparent-background": oe,
       opened: l,
       disabled: o,
-      error: f,
+      error: h,
       touched: U,
-      "mobile-disabled": F,
-      "multi-select-with-tags": D
+      "mobile-disabled": B,
+      "multi-select-with-tags": b
     }),
-    onClick: Pe,
+    onClick: Ye,
     onKeyDown: hr,
     ref: P.setReference
-  }), { type: lt, ...Ve } = mr;
+  }), { type: dt, ...Se } = gr;
   return /* @__PURE__ */ R(
     "div",
     {
-      ref: be,
+      ref: Ne,
       className: _("container", ae),
       title: S,
+      ...Qe,
       ...Je,
-      ...Xe,
       children: [
         q && /* @__PURE__ */ u(
-          Lr,
+          Tr,
           {
-            ...ar(),
-            onClick: () => !o && Pe(),
+            ...ir(),
+            onClick: () => !o && Ye(),
             style: { cursor: o ? "default" : "pointer" },
             children: q
           }
@@ -552,41 +566,41 @@ const Wr = 240, zr = "data-dropdown-portal-menu", Br = 10, Fr = (n, r) => {
         /* @__PURE__ */ R(
           "div",
           {
-            ...Ve,
+            ...Se,
             role: "button",
             "aria-disabled": o,
-            tabIndex: o ? -1 : Ve.tabIndex ?? 0,
+            tabIndex: o ? -1 : Se.tabIndex ?? 0,
             children: [
               j && /* @__PURE__ */ u("span", { className: _("icon"), children: j }),
-              /* @__PURE__ */ u("div", { className: _("value-wrapper"), children: pr() }),
-              er && /* @__PURE__ */ u(
-                vr,
+              /* @__PURE__ */ u("div", { className: _("value-wrapper"), children: mr() }),
+              rr && /* @__PURE__ */ u(
+                Ir,
                 {
                   className: _("clear-button"),
-                  onClick: nr,
+                  onClick: sr,
                   onKeyDown: (e) => {
-                    const { keyCode: t } = e;
-                    (t === p.ENTER_KEY_CODE || t === p.SPACE_KEY_CODE) && (e.preventDefault(), e.stopPropagation(), _e());
+                    const { keyCode: n } = e;
+                    (n === p.ENTER_KEY_CODE || n === p.SPACE_KEY_CODE) && (e.preventDefault(), e.stopPropagation(), _e());
                   },
-                  "aria-label": qe,
-                  children: /* @__PURE__ */ u(Ir, {})
+                  "aria-label": Ze,
+                  children: /* @__PURE__ */ u(Kr, {})
                 }
               ),
-              /* @__PURE__ */ u("span", { className: _("arrow"), "aria-hidden": "true", children: /* @__PURE__ */ u(Kr, {}) })
+              /* @__PURE__ */ u("span", { className: _("arrow"), "aria-hidden": "true", children: /* @__PURE__ */ u(Lr, {}) })
             ]
           }
         ),
         l && (() => {
           var i;
-          const e = (i = P.reference.current) == null ? void 0 : i.getBoundingClientRect().width, t = y && e ? {
-            ...Ke,
+          const e = (i = P.reference.current) == null ? void 0 : i.getBoundingClientRect().width, n = y && e ? {
+            ...Le,
             width: `${e}px`,
             minWidth: `${e}px`,
             maxWidth: `${e}px`
-          } : Ke, s = /* @__PURE__ */ u(
+          } : Le, s = /* @__PURE__ */ u(
             "div",
             {
-              style: t,
+              style: n,
               className: _(
                 "select-list",
                 {
@@ -595,10 +609,10 @@ const Wr = 240, zr = "data-dropdown-portal-menu", Br = 10, Fr = (n, r) => {
                 },
                 ie
               ),
-              ...y && { [zr]: "" },
-              ...lr({
-                onKeyDown: fr,
-                ...D && {
+              ...y && { [Br]: "" },
+              ...cr({
+                onKeyDown: _r,
+                ...b && {
                   tabIndex: -1,
                   onFocus: (d) => {
                     var a;
@@ -606,28 +620,28 @@ const Wr = 240, zr = "data-dropdown-portal-menu", Br = 10, Fr = (n, r) => {
                   }
                 }
               }),
-              children: $ ? Ye() : /* @__PURE__ */ u(
-                Nr,
+              children: $ ? Ve() : /* @__PURE__ */ u(
+                vr,
                 {
                   autoHeight: !0,
-                  autoHeightMax: Wr,
+                  autoHeightMax: Fr,
                   hideTracksWhenNotNeeded: !0,
                   ref: (d) => {
                     M.current = d;
                   },
-                  onScrollFrame: rr,
-                  children: Ye()
+                  onScrollFrame: tr,
+                  children: Ve()
                 }
               )
             }
           );
-          return y ? yr(s, y) : s;
+          return y ? Cr(s, y) : s;
         })()
       ]
     }
   );
 };
 export {
-  vt as D,
-  zr as a
+  Lt as D,
+  Br as a
 };

package/dist/dropdown.js

@@ -1,5 +1,5 @@
-import { D as r } from "./dropdown-110ce4a5.js";
-import { a as E } from "./dropdown-110ce4a5.js";
+import { D as r } from "./dropdown-33f2bf75.js";
+import { a as U } from "./dropdown-33f2bf75.js";
 import "react/jsx-runtime";
 import "react";
 import "react-dom";
@@ -20,8 +20,11 @@ import "react-dnd";
 import "react-dnd-html5-backend";
 import "./useEllipsisTitle-462fa254.js";
 import "./checkbox-76aa8f97.js";
+import "./tooltip.js";
+import "@floating-ui/react";
+import "./floatingUi-46f5b896.js";
 export {
-  E as DROPDOWN_PORTAL_MENU_ATTR,
+  U as DROPDOWN_PORTAL_MENU_ATTR,
   r as Dropdown,
   r as default
 };

package/dist/index.js

@@ -9,9 +9,9 @@ import { BulkPanel as J } from "./bulkPanel.js";
 import { B as _ } from "./button-7ab874f3.js";
 import { C as X } from "./checkbox-76aa8f97.js";
 import { Chip as q } from "./chip.js";
-import { D as Q } from "./datePicker-ab9411c0.js";
+import { D as Q } from "./datePicker-bc0a9fca.js";
 import "react-datepicker";
-import { D as Z } from "./dropdown-110ce4a5.js";
+import { D as Z } from "./dropdown-33f2bf75.js";
 import { FieldLabel as oo } from "./fieldLabel.js";
 import { F as eo } from "./fieldNumber-b4aa4d7e.js";
 import { F as ao } from "./fieldText-1749da7a.js";

package/dist/modal.js

@@ -8,7 +8,7 @@ import "react-dnd";
 import "react-dnd-html5-backend";
 import { u as J } from "./useWindowResize-a7e1ac92.js";
 import { A as Q } from "./constants-85822a6b.js";
-import { a as V } from "./dropdown-110ce4a5.js";
+import { a as V } from "./dropdown-33f2bf75.js";
 import { K as Z } from "./keyCodes-f63c0e11.js";
 import { B as C } from "./button-7ab874f3.js";
 import { Tooltip as ee } from "./tooltip.js";

package/dist/sidePanel.js

@@ -5,7 +5,7 @@ import { K as B } from "./keyCodes-f63c0e11.js";
 import { u as L } from "./useOnClickOutside-8f7d68a1.js";
 import "react-dnd";
 import "react-dnd-html5-backend";
-import { a as O } from "./dropdown-110ce4a5.js";
+import { a as O } from "./dropdown-33f2bf75.js";
 import { S as T } from "./close-4d480ef7.js";
 import { B as j } from "./baseIconButton-251479f7.js";
 import "react-dom";
@@ -20,6 +20,9 @@ import "./button-7ab874f3.js";
 import "./isEmpty-ccacb5ff.js";
 import "./useEllipsisTitle-462fa254.js";
 import "./checkbox-76aa8f97.js";
+import "./tooltip.js";
+import "@floating-ui/react";
+import "./floatingUi-46f5b896.js";
 const w = "_active_5ebdz_11", M = "_compact_5ebdz_62", F = "_header_5ebdz_58", H = "_title_5ebdz_88", U = "_description_5ebdz_99", W = "_content_5ebdz_108", Y = "_footer_5ebdz_115", q = "_divider_5ebdz_121", G = {
   "side-panel-overlay": "_side-panel-overlay_5ebdz_1",
   active: w,
@@ -38,17 +41,17 @@ const w = "_active_5ebdz_11", M = "_compact_5ebdz_62", F = "_header_5ebdz_58", H
   content: W,
   footer: Y,
   divider: q
-}, e = A.bind(G), he = ({
+}, e = A.bind(G), ze = ({
   className: b,
-  title: r,
-  descriptionComponent: s,
+  title: d,
+  descriptionComponent: o,
   headerComponent: c,
   contentClassName: u,
-  contentComponent: o,
+  contentComponent: s,
   footerComponent: l,
   top: n = 0,
   side: z = "right",
-  isOpen: d = !0,
+  isOpen: r = !0,
   onClose: t,
   closeButtonAriaLabel: y = "Close panel",
   showOverlay: _ = !1,
@@ -66,10 +69,10 @@ const w = "_active_5ebdz_11", M = "_compact_5ebdz_62", F = "_header_5ebdz_58", H
   );
   L(
     v,
-    N && _ && d ? t : void 0,
+    N && _ && r ? t : void 0,
     k
   ), $(() => {
-    if (!d || !t)
+    if (!r || !t)
       return;
     const h = (R) => {
       const { keyCode: S } = R;
@@ -78,22 +81,22 @@ const w = "_active_5ebdz_11", M = "_compact_5ebdz_62", F = "_header_5ebdz_58", H
     return document.addEventListener("keydown", h, !1), () => {
       document.removeEventListener("keydown", h, !1);
     };
-  }, [d, t]);
-  const x = !!(c || s), f = /* @__PURE__ */ a(
+  }, [r, t]);
+  const x = !!(c || o), f = /* @__PURE__ */ a(
     "aside",
     {
       ref: v,
-      className: e("side-panel", `side-${z}`, { active: d }, b),
+      className: e("side-panel", `side-${z}`, { active: r }, b),
       role: "dialog",
       "aria-modal": "true",
-      "aria-hidden": !d,
-      "aria-labelledby": r ? p : void 0,
+      "aria-hidden": !r,
+      "aria-labelledby": d ? p : void 0,
       style: { top: n, height: `calc(100vh - ${n}px)` },
       tabIndex: -1,
       children: [
         /* @__PURE__ */ a("div", { className: e("header-section", { compact: !x }), children: [
-          (c || r) && /* @__PURE__ */ a("div", { className: e("header"), children: [
-            r ? /* @__PURE__ */ i("span", { id: p, className: e("title"), children: r }) : c,
+          (c || d) && /* @__PURE__ */ a("div", { className: e("header"), children: [
+            d ? /* @__PURE__ */ i("span", { id: p, className: e("title"), children: d }) : c,
             t && /* @__PURE__ */ i(
               j,
               {
@@ -104,10 +107,10 @@ const w = "_active_5ebdz_11", M = "_compact_5ebdz_62", F = "_header_5ebdz_58", H
               }
             )
           ] }),
-          s
+          o
         ] }),
         /* @__PURE__ */ i("div", { className: e("divider") }),
-        o && /* @__PURE__ */ i("div", { className: e("content", u), children: o }),
+        s && /* @__PURE__ */ i("div", { className: e("content", u), children: s }),
         l && /* @__PURE__ */ a(D, { children: [
           /* @__PURE__ */ i("div", { className: e("divider") }),
           /* @__PURE__ */ i("div", { className: e("footer"), children: l })
@@ -120,7 +123,7 @@ const w = "_active_5ebdz_11", M = "_compact_5ebdz_62", F = "_header_5ebdz_58", H
     {
       className: e(
         "side-panel-overlay",
-        { active: d },
+        { active: r },
         m && `overlay-${m}`,
         g
       ),
@@ -129,5 +132,5 @@ const w = "_active_5ebdz_11", M = "_compact_5ebdz_62", F = "_header_5ebdz_58", H
   ) : f;
 };
 export {
-  he as SidePanel
+  ze as SidePanel
 };

package/package.json

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