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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reportportal/ui-kit",
-  "version": "0.0.1-alpha.135",
+  "version": "0.0.1-alpha.137",
   "description": "The UI-kit library for ReportPortal Design System.",
   "type": "module",
   "scripts": {
@@ -51,6 +51,8 @@
     "framer-motion": "^10.15.2",
     "rc-scrollbars": "^1.1.6",
     "react-datepicker": "^7.6.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dropzone": "^14.3.8"
   },
   "devDependencies": {

package/dist/dropdown-360803d5.js

@@ -1,550 +0,0 @@
-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
-};