@reportportal/ui-kit 0.0.1-alpha.13 → 0.0.1-alpha.130

package/dist/dropdown-360803d5.js

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

package/dist/dropdown.js

@@ -1,14 +1,23 @@
-import { D as r } from "./dropdown-e07f2a71.js";
+import { D as r } from "./dropdown-360803d5.js";
+import { a as l } from "./dropdown-360803d5.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-7bc53dec.js";
+import "./baseIconButton-251479f7.js";
+import "./clear-53660571.js";
+import "./dropdown-0260bb66.js";
+import "./tooltip.js";
+import "@floating-ui/react";
+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/fieldLabel.js

@@ -0,0 +1,18 @@
+import { jsxs as r, jsx as d } from "react/jsx-runtime";
+import { c as t } from "./bind-06a7ff84.js";
+const c = "_asterisk_1rhlz_11", o = "_disabled_1rhlz_17", b = {
+  "field-label": "_field-label_1rhlz_1",
+  asterisk: c,
+  disabled: o
+}, s = t.bind(b), m = ({
+  children: l,
+  isRequired: e = !1,
+  className: a,
+  ...i
+}) => /* @__PURE__ */ r("label", { className: s("field-label", a), ...i, children: [
+  l,
+  e && /* @__PURE__ */ d("span", { className: s("asterisk"), children: "*" })
+] });
+export {
+  m as FieldLabel
+};