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

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

@@ -44,5 +44,12 @@ export interface DropdownProps {
     tooltipPortalRoot?: Element;
     /** Z-index for tooltip when rendered in portal (default: 9) */
     tooltipZIndex?: number;
+    /**
+     * Portal root element for dropdown menu rendering.
+     * When provided, the menu will be rendered in this element using React Portal.
+     * Useful for preventing clipping in containers with overflow: hidden (e.g., Modal, SidePanel).
+     * @example menuPortalRoot={document.body}
+     */
+    menuPortalRoot?: Element;
 }
 export declare const Dropdown: FC<DropdownProps>;

package/dist/{datePicker-322bcafa.js → datePicker-1a104b97.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-18c58189.js";
+import { D as E } from "./dropdown-1f7b1881.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-322bcafa.js";
-import { r as A } from "./datePicker-322bcafa.js";
+import { D as t } from "./datePicker-1a104b97.js";
+import { r as z } from "./datePicker-1a104b97.js";
 import "react/jsx-runtime";
 import "react-datepicker/dist/es/index.js";
 import "./bind-06a7ff84.js";
@@ -11,15 +11,14 @@ import "./baseIconButton-251479f7.js";
 import "./spinLoader-c4a53718.js";
 import "./maxValueDisplay-9be01a75.js";
 import "./fieldLabel.js";
-import "./dropdown-18c58189.js";
+import "./dropdown-1f7b1881.js";
+import "react-dom";
 import "@floating-ui/react-dom";
 import "downshift";
 import "rc-scrollbars";
-import "./useOnClickOutside-c332f7d3.js";
 import "./keyCodes-f63c0e11.js";
 import "./dropdown-0260bb66.js";
 import "./tooltip.js";
-import "react-dom";
 import "@floating-ui/react";
 import "./floatingUi-41f8c7b5.js";
 import "./checkbox-ed6cc375.js";
@@ -28,5 +27,5 @@ import "react-datepicker";
 export {
   t as DatePicker,
   t as default,
-  A as registerDatePickerLocale
+  z as registerDatePickerLocale
 };

package/dist/dropdown-1f7b1881.js

@@ -0,0 +1,538 @@
+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 { 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 { 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 = {
+  "dropdown-option": "_dropdown-option_14s7v_1",
+  disabled: yr,
+  hidden: vr,
+  hover: Er,
+  "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(
+  (n, t) => {
+    const {
+      option: { value: l, disabled: a, hidden: u, label: h, title: E, groupRef: g },
+      selected: W,
+      onChange: Y,
+      render: R,
+      highlightHovered: S,
+      onMouseEnter: Z,
+      multiSelect: N,
+      isPartiallyChecked: H = !1,
+      depth: $ = 0,
+      hasChildren: ee = !1
+    } = n, re = (z) => {
+      (z.target instanceof HTMLDivElement || z.target instanceof HTMLInputElement) && (Y == null || Y(l));
+    };
+    return /* @__PURE__ */ L(
+      "div",
+      {
+        className: Ke("dropdown-option", {
+          selected: W,
+          disabled: a,
+          hidden: u,
+          hover: S,
+          "multi-select": N,
+          "has-children": ee,
+          [`depth-${$}`]: $ > 0
+        }),
+        title: E,
+        onClick: re,
+        ref: t,
+        onMouseEnter: Z,
+        children: [
+          N && /* @__PURE__ */ d(mr, { value: !!W, partiallyChecked: H }),
+          /* @__PURE__ */ d(
+            "div",
+            {
+              className: Ke("single-option", {
+                "sub-option": !!g
+              }),
+              children: R ? R(n) : h
+            }
+          )
+        ]
+      }
+    );
+  }
+), br = [
+  v.ENTER_KEY_CODE,
+  v.SPACE_KEY_CODE,
+  v.ARROW_DOWN_KEY_CODE
+], Nr = [v.ESCAPE_KEY_CODE, v.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 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) => {
+  var u;
+  if (n.length === 0)
+    return 0;
+  if (!((u = n[t]) != null && u.disabled))
+    return t;
+  const a = n.length;
+  return de(
+    n,
+    Ir(t + l, a),
+    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;
+}, []), 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,
+  "clear-button": "_clear-button_owe49_19",
+  dropdown: Yr,
+  "transparent-background": "_transparent-background_owe49_41",
+  disabled: Pr,
+  value: Mr,
+  error: Vr,
+  touched: Wr,
+  opened: Rr,
+  placeholder: Sr,
+  "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 = ({
+  multiSelect: n = !1,
+  value: t = n ? [] : "",
+  options: l = [],
+  disabled: a = !1,
+  error: u,
+  onChange: h,
+  onFocus: E,
+  onBlur: g,
+  mobileDisabled: W,
+  title: Y,
+  touched: R = !1,
+  icon: S,
+  variant: Z,
+  placeholder: N = "",
+  label: H = "",
+  renderOption: $,
+  transparentBackground: ee = !1,
+  className: re,
+  toggleButtonClassName: z,
+  selectListClassName: Me,
+  isListWidthLimited: Ve = !1,
+  optionAll: te = { value: "all", label: "All" },
+  isOptionAllVisible: ue = !1,
+  onSelectAll: We = () => {
+  },
+  formatDisplayedValue: fe,
+  notScrollable: P = !1,
+  footer: B,
+  includeGroupValue: he = !1,
+  clearable: Re = !1,
+  onClear: _e = () => {
+  },
+  clearButtonAriaLabel: Se = "Clear selection",
+  tooltipPortalRoot: He,
+  tooltipZIndex: $e,
+  menuPortalRoot: _
+}) => {
+  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 }) => {
+    var r;
+    return (r = e.children) == null ? void 0 : r.length;
+  }).map(({ option: e }) => e), [V]), me = O(() => Ye(l), [l]), w = O(
+    () => me.map(({ value: e }) => e),
+    [me]
+  ), F = O(() => {
+    const e = /* @__PURE__ */ new Map();
+    return q.forEach((r) => {
+      e.set(r.value, Pe(r));
+    }), e;
+  }, [q]), X = b(
+    (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) => {
+    ne.current = e.scrollTop;
+  }, []);
+  xe(() => {
+    i && !P && M.current && !(n && D.current !== null) && M.current.scrollTop(ne.current);
+  }, [i, P, t, n]);
+  const { refs: x, floatingStyles: ve } = lr({
+    placement: "bottom-start",
+    middleware: [
+      ir(5),
+      cr({
+        fallbackPlacements: ["bottom-start", "top-start", "bottom", "top"],
+        ..._ && {
+          boundary: document.documentElement,
+          rootBoundary: "viewport"
+        }
+      }),
+      _ ? dr({
+        apply({ rects: e, elements: r }) {
+          const s = e.reference.width;
+          Object.assign(r.floating.style, {
+            width: `${s}px`,
+            minWidth: `${s}px`,
+            maxWidth: `${s}px`
+          });
+        }
+      }) : null
+    ].filter(Boolean),
+    whileElementsMounted: i && _ ? (e, r, s) => ur(e, r, s, {
+      animationFrame: !0
+    }) : void 0
+  }), qe = () => {
+    if (!ue)
+      return;
+    const e = Array.isArray(t) ? t : [], r = new Set(e), s = w.some((c) => !r.has(c));
+    w.forEach((c) => {
+      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(() => {
+    if (a)
+      return;
+    h(n ? [] : ""), _e(), m(), requestAnimationFrame(() => {
+      const r = x.reference.current;
+      r && r instanceof HTMLElement && r.focus();
+    });
+  }, [a, n, h, _e, m, x]), Fe = b(
+    (e) => {
+      e.preventDefault(), e.stopPropagation(), oe();
+    },
+    [oe]
+  ), Ee = b(
+    (e) => {
+      var c, y;
+      if (!i)
+        return;
+      const r = e == null ? void 0 : e.target;
+      if (!r)
+        return;
+      const s = (c = pe.current) == null ? void 0 : c.contains(r), o = (y = ge.current) == null ? void 0 : y.contains(r);
+      !s && !o && m();
+    },
+    [i, m]
+  );
+  Q(() => {
+    if (!i)
+      return;
+    const e = (r) => {
+      Ee(r);
+    };
+    return document.addEventListener("pointerdown", e), () => {
+      document.removeEventListener("pointerdown", e);
+    };
+  }, [i, Ee]);
+  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);
+          });
+        } else
+          o.has(e.value) ? o.delete(e.value) : o.add(e.value);
+        const c = X(o);
+        h(Array.from(c));
+      } else
+        h(e.value);
+      j((s) => n || !s);
+    }
+  }, Xe = () => p.find(({ value: e }) => e === t), Oe = Ar(p, t), {
+    getToggleButtonProps: Ge,
+    getLabelProps: Je,
+    getMenuProps: be,
+    getItemProps: Qe,
+    setHighlightedIndex: K,
+    highlightedIndex: ae,
+    selectedItem: G
+  } = ce({
+    items: p,
+    itemToString: (e) => (e != null && e.label ? String(e.label) : N) || "",
+    selectedItem: Xe(),
+    isOpen: i,
+    circularNavigation: !0,
+    defaultHighlightedIndex: Oe,
+    onHighlightedIndexChange: (e) => {
+      switch (e.type) {
+        case ce.stateChangeTypes.MenuKeyDownArrowUp:
+          return U(k.ON_KEY_DOWN), K(Kr(p, e.highlightedIndex)), e;
+        case ce.stateChangeTypes.MenuKeyDownArrowDown:
+          return U(k.ON_KEY_DOWN), K(xr(p, e.highlightedIndex)), e;
+        default:
+          return e;
+      }
+    }
+  }), Ne = b(
+    (e) => {
+      ge.current = e, x.setFloating(e);
+    },
+    [x]
+  ), Ze = b(
+    (e = {}) => {
+      const r = be(e), s = r.ref;
+      return {
+        ...r,
+        ref: (o) => {
+          Ne(o), typeof s == "function" ? s(o) : s && (s.current = o);
+        }
+      };
+    },
+    [be, Ne]
+  );
+  Q(() => {
+    n && i && D.current !== null && D.current >= 0 && D.current < p.length && (K(D.current), D.current = null, requestAnimationFrame(() => {
+      M.current && !P && M.current.scrollTop(ne.current);
+    }));
+  }, [n, i, t, p.length, K, P]), xe(() => {
+    if (!i || !_)
+      return;
+    let e = window.scrollY, r = !0;
+    const s = 300, o = () => {
+      if (!r)
+        return;
+      window.scrollY !== e && window.scrollTo(0, e);
+    }, c = (C) => {
+      r && (C.preventDefault(), C.stopImmediatePropagation(), o());
+    };
+    e = window.scrollY, window.addEventListener("scroll", c, { passive: !1, capture: !0 }), requestAnimationFrame(() => {
+      e = window.scrollY, o();
+    });
+    const y = setTimeout(() => {
+      r = !1;
+    }, s);
+    return () => {
+      clearTimeout(y), window.removeEventListener("scroll", c, { capture: !0 });
+    };
+  }, [i, _]), Q(() => {
+    if (!i || !_)
+      return;
+    const e = () => {
+      m();
+    };
+    return window.addEventListener("resize", e), () => {
+      window.removeEventListener("resize", e);
+    };
+  }, [i, _, m]);
+  const er = () => {
+    a || (j((e) => !e), i ? g == null || g() : E == null || E(), U(k.ON_CLICK));
+  }, J = O(() => {
+    if (n && Array.isArray(t) && w.length > 0 && w.every((r) => A.has(r)))
+      return te.label;
+    const e = p.reduce((r, s) => ((Array.isArray(t) && t.includes(s.value) || s.value === t) && r.push(s.label), r), []);
+    if (e.length > 0)
+      return e.join(", ");
+    if (!t && t !== !1 && t !== 0 || Array.isArray(t) && !t.length)
+      return N;
+  }, [
+    n,
+    t,
+    w,
+    A,
+    te.label,
+    p,
+    N
+  ]);
+  Q(() => {
+    if (se.current) {
+      const { offsetWidth: e, scrollWidth: r } = se.current;
+      we(r > e);
+    } else
+      we(!1);
+  }, [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)));
+  }, tr = (e) => {
+    const { keyCode: r } = e;
+    if (r === v.ENTER_KEY_CODE || r === v.SPACE_KEY_CODE) {
+      const s = p[ae];
+      if (!s)
+        return;
+      n && (D.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: [
+      /* @__PURE__ */ d(
+        Te,
+        {
+          option: te,
+          selected: Array.isArray(t) && w.length > 0 && w.every((e) => A.has(e)),
+          onChange: qe,
+          multiSelect: n,
+          isPartiallyChecked: w.some((e) => A.has(e)) && !w.every((e) => A.has(e))
+        }
+      ),
+      /* @__PURE__ */ d("div", { className: f("divider") }),
+      " "
+    ] }),
+    V.map(({ option: e, depth: r }, s) => {
+      var C, I;
+      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,
+        {
+          ...Qe({
+            item: e,
+            index: s
+          }),
+          multiSelect: n,
+          selected: n ? c : e.value === ((G == null ? void 0 : G.value) ?? G),
+          option: { title: e.label, ...e },
+          highlightHovered: ae === s && Be !== k.ON_CLICK,
+          render: $,
+          onChange: e.disabled ? null : () => Ce(e),
+          onMouseEnter: () => K(s),
+          depth: r,
+          hasChildren: !!((I = e.children) != null && I.length),
+          isPartiallyChecked: y
+        },
+        e.value
+      );
+    }),
+    B && /* @__PURE__ */ L(Ie, { children: [
+      /* @__PURE__ */ d("div", { className: f("divider") }),
+      typeof B == "function" ? B(m) : B
+    ] })
+  ] }), nr = () => {
+    const e = fe ? fe(J) : J, r = /* @__PURE__ */ d(
+      "span",
+      {
+        ref: se,
+        className: f("value", {
+          placeholder: J === N
+        }),
+        children: e
+      }
+    );
+    return ye && !!e && ze ? /* @__PURE__ */ d(
+      gr,
+      {
+        content: e,
+        placement: "top",
+        wrapperClassName: f("value-tooltip"),
+        portalRoot: He,
+        zIndex: $e,
+        children: r
+      }
+    ) : r;
+  }, sr = Ge({
+    className: f("dropdown", Z, z, {
+      "transparent-background": ee,
+      opened: i,
+      disabled: a,
+      error: u,
+      touched: R,
+      "mobile-disabled": W
+    }),
+    onClick: er,
+    onKeyDown: rr,
+    ref: x.setReference
+  }), { type: Br, ...Ae } = sr;
+  return /* @__PURE__ */ L("div", { ref: pe, className: f("container", re), title: Y, children: [
+    H && /* @__PURE__ */ d(wr, { ...Je(), children: H }),
+    /* @__PURE__ */ L(
+      "div",
+      {
+        ...Ae,
+        role: "button",
+        "aria-disabled": a,
+        tabIndex: a ? -1 : Ae.tabIndex ?? 0,
+        children: [
+          S && /* @__PURE__ */ d("span", { className: f("icon"), children: S }),
+          /* @__PURE__ */ d("div", { className: f("value-wrapper"), children: nr() }),
+          je && /* @__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());
+              },
+              "aria-label": Se,
+              children: /* @__PURE__ */ d(_r, {})
+            }
+          ),
+          /* @__PURE__ */ d("span", { className: f("arrow"), "aria-hidden": "true", children: /* @__PURE__ */ d(pr, {}) })
+        ]
+      }
+    ),
+    i && (() => {
+      var o;
+      const e = (o = x.reference.current) == null ? void 0 : o.getBoundingClientRect().width, r = _ && e ? {
+        ...ve,
+        width: `${e}px`,
+        minWidth: `${e}px`,
+        maxWidth: `${e}px`
+      } : ve, s = /* @__PURE__ */ d(
+        "div",
+        {
+          style: r,
+          className: f(
+            "select-list",
+            { opened: i, "limited-width": Ve },
+            Me
+          ),
+          ...Ze({
+            onKeyDown: tr
+          }),
+          children: P ? De() : /* @__PURE__ */ d(
+            fr,
+            {
+              autoHeight: !0,
+              autoHeightMax: Dr,
+              hideTracksWhenNotNeeded: !0,
+              ref: (c) => {
+                M.current = c;
+              },
+              onScrollFrame: Ue,
+              children: De()
+            }
+          )
+        }
+      );
+      return _ ? ar(s, _) : s;
+    })()
+  ] });
+};
+export {
+  ot as D
+};

package/dist/dropdown.js

@@ -1,17 +1,16 @@
-import { D as r } from "./dropdown-18c58189.js";
+import { D as r } from "./dropdown-1f7b1881.js";
 import "react/jsx-runtime";
 import "react";
+import "react-dom";
 import "./bind-06a7ff84.js";
 import "@floating-ui/react-dom";
 import "downshift";
 import "rc-scrollbars";
-import "./useOnClickOutside-c332f7d3.js";
 import "./keyCodes-f63c0e11.js";
 import "./baseIconButton-251479f7.js";
 import "./clear-53660571.js";
 import "./dropdown-0260bb66.js";
 import "./tooltip.js";
-import "react-dom";
 import "@floating-ui/react";
 import "./floatingUi-41f8c7b5.js";
 import "./fieldLabel.js";