@reportportal/ui-kit 0.0.1-alpha.135 → 0.0.1-alpha.137

package/dist/dropdown-0a043606.js

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

package/dist/dropdown.js

@@ -1,5 +1,5 @@
-import { D as r } from "./dropdown-360803d5.js";
-import { a as l } from "./dropdown-360803d5.js";
+import { D as r } from "./dropdown-0a043606.js";
+import { a as E } from "./dropdown-0a043606.js";
 import "react/jsx-runtime";
 import "react";
 import "react-dom";
@@ -15,9 +15,13 @@ import "./tooltip.js";
 import "@floating-ui/react";
 import "./floatingUi-41f8c7b5.js";
 import "./fieldLabel.js";
+import "./adaptiveTagList.js";
+import "./button-97d9e587.js";
+import "./close-4d480ef7.js";
+import "./isEmpty-ccacb5ff.js";
 import "./checkbox-ed6cc375.js";
 export {
-  l as DROPDOWN_PORTAL_MENU_ATTR,
+  E as DROPDOWN_PORTAL_MENU_ATTR,
   r as Dropdown,
   r as default
 };