@reportportal/ui-kit 0.0.1-alpha.24 → 0.0.1-alpha.240

package/dist/popover.js

@@ -1,95 +1,95 @@
-import { jsxs as p, Fragment as G, jsx as o } from "react/jsx-runtime";
-import { useRef as H, useState as S } from "react";
-import { useFloating as j, offset as C, flip as L, arrow as M, autoUpdate as O, useClick as U, useDismiss as W, useRole as q, useInteractions as z, FloatingFocusManager as B, FloatingArrow as J } from "@floating-ui/react";
-import { c as K } from "./bind-06a7ff84.js";
-const Q = "_popover_16ogt_1", V = "_title_16ogt_28", X = {
-  "popover-wrapper": "_popover-wrapper_16ogt_1",
-  popover: Q,
-  title: V
-}, n = K.bind(X), m = 16, f = 8, Y = ["top", "right", "bottom", "left"], Z = [
-  "right",
-  "right-start",
-  "right-end",
-  "left",
-  "left-start",
-  "left-end"
-], $ = [
-  "top",
-  "top-start",
-  "top-end",
-  "right",
-  "right-start",
-  "right-end",
-  "bottom",
-  "bottom-start",
-  "bottom-end",
-  "left",
-  "left-start",
-  "left-end"
-], nt = ({
-  className: d,
-  content: g,
-  children: h,
-  placement: u = "bottom",
-  fallbackPlacements: v = $,
-  title: r,
-  arrowOffset: l = 16,
-  safeZone: _ = 4,
-  arrowColor: w = "white",
+import { jsxs as f, Fragment as W, jsx as s } from "react/jsx-runtime";
+import { useRef as U, useState as q, useCallback as z } from "react";
+import { useFloating as B, offset as J, flip as K, arrow as Q, autoUpdate as V, useClick as X, useDismiss as Y, useRole as Z, useInteractions as $, useTransitionStyles as ee, FloatingFocusManager as te, FloatingArrow as se, FloatingPortal as ne } from "@floating-ui/react";
+import { c as oe } from "./bind-06a7ff84.js";
+import { g as ae, T as u, a as le, A as ie, b as re, m as ce } from "./floatingUi-46f5b896.js";
+const pe = "_popover_n3nff_1", me = "_title_n3nff_28", fe = {
+  "popover-wrapper": "_popover-wrapper_n3nff_1",
+  popover: pe,
+  title: me
+}, l = oe.bind(fe), he = ({
+  content: d,
+  children: g,
+  placement: v = "bottom",
+  fallbackPlacements: _ = le,
+  className: h,
+  title: i,
+  arrowOffset: n = ie,
+  safeZone: A = 4,
+  arrowColor: F = "white",
   dataAutomationId: x,
-  isOpened: b,
-  setIsOpened: s
+  strategy: y = "absolute",
+  transitionDuration: R = 0,
+  isCentered: r = !0,
+  isFocusDisabled: w = !1,
+  isOpened: E,
+  shouldUsePortal: b = !1,
+  setIsOpened: o
 }) => {
-  const i = H(null), [F, R] = S(!1), a = s ? b : F, A = (e) => {
-    s ? s(e) : R(e);
-  }, { placement: N, refs: c, floatingStyles: P, context: t } = j({
-    open: a,
-    onOpenChange: A,
-    placement: u,
+  const c = U(null), [T, N] = q(!1), p = o ? E : T, P = (e) => {
+    o ? o(e) : N(e);
+  }, S = z(
+    (e, a) => ae(e, a, n, r),
+    [n, r]
+  ), { placement: k, refs: m, floatingStyles: I, context: t } = B({
+    open: p,
+    onOpenChange: P,
+    placement: v,
+    strategy: y,
     middleware: [
-      C(({ rects: e, placement: D }) => ({
-        mainAxis: _ + f,
-        alignmentAxis: ((Z.includes(D) ? e.reference.height : e.reference.width) - m) / 2 - l
+      J(({ rects: e, placement: a }) => ({
+        mainAxis: A + u,
+        alignmentAxis: S(e, a)
       })),
-      L({
+      K({
         fallbackAxisSideDirection: "start",
-        fallbackPlacements: v
+        fallbackPlacements: _
       }),
-      M({
-        element: i
+      Q({
+        element: c
       })
     ],
-    whileElementsMounted: O
-  }), E = U(t), I = W(t), T = q(t), { getReferenceProps: k, getFloatingProps: y } = z([E, I, T]);
-  return /* @__PURE__ */ p(G, { children: [
-    /* @__PURE__ */ o("div", { ref: c.setReference, ...k(), className: n("popover-wrapper"), children: h }),
-    a && /* @__PURE__ */ o(B, { context: t, modal: !1, children: /* @__PURE__ */ p(
+    whileElementsMounted: V
+  }), D = X(t), G = Y(t), H = Z(t), { getReferenceProps: M, getFloatingProps: O } = $([D, G, H]), { isMounted: j, styles: C } = ee(t, {
+    duration: R,
+    initial: { opacity: 0 }
+  }), L = () => {
+    const e = /* @__PURE__ */ s(te, { context: t, modal: !1, disabled: w, children: /* @__PURE__ */ f(
       "div",
       {
-        className: n("popover", d),
+        className: l("popover", h),
         "data-automation-id": x,
-        ref: c.setFloating,
-        style: P,
-        ...y,
+        ref: m.setFloating,
+        style: {
+          ...I,
+          ...C,
+          pointerEvents: p ? "auto" : "none"
+        },
+        ...O(),
         children: [
-          /* @__PURE__ */ o(
-            J,
+          /* @__PURE__ */ s(
+            se,
             {
-              ref: i,
+              ref: c,
               context: t,
-              width: m,
-              height: f,
-              fill: w,
-              staticOffset: Y.includes(N) ? null : l
+              width: re,
+              height: u,
+              fill: F,
+              staticOffset: ce.includes(k) ? null : n
             }
           ),
-          r && /* @__PURE__ */ o("div", { className: n("title"), children: r }),
-          g
+          i && /* @__PURE__ */ s("div", { className: l("title"), children: i }),
+          d
         ]
       }
-    ) })
+    ) });
+    return b ? /* @__PURE__ */ s(ne, { children: e }) : e;
+  };
+  return /* @__PURE__ */ f(W, { children: [
+    /* @__PURE__ */ s("div", { ref: m.setReference, ...M(), className: l("popover-wrapper"), children: g }),
+    j && L()
   ] });
 };
 export {
-  nt as Popover
+  he as Popover
 };

package/dist/prevPage-87faf576.js

@@ -0,0 +1,6 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: 13, height: 12, viewBox: "0 0 13 12", fill: "#A2AAB5", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 12L2 12L2 2.38498e-08L1.90798e-07 0L0 12ZM13 1L5 6L13 11L13 1Z" })), a = (t) => /* @__PURE__ */ e.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "#A2AAB5", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M12 13L4 8L12 3L12 13Z" }));
+export {
+  l as S,
+  a
+};

package/dist/radio.js

@@ -1,9 +1,11 @@
-import { R as r } from "./radio-c5fae439.js";
+import { R as r } from "./radioGroup-0c132c2e.js";
+import { a as e } from "./radioGroup-0c132c2e.js";
 import "react/jsx-runtime";
 import "react";
 import "./bind-06a7ff84.js";
 import "./keyCodes-f63c0e11.js";
 export {
   r as Radio,
+  e as RadioGroup,
   r as default
 };

package/dist/radioGroup-0c132c2e.js

@@ -0,0 +1,77 @@
+import { jsxs as p, jsx as a } from "react/jsx-runtime";
+import { useRef as g, useId as k } from "react";
+import { c as y } from "./bind-06a7ff84.js";
+import { K as _ } from "./keyCodes-f63c0e11.js";
+const x = "_disabled_1fetm_9", D = "_toggler_1fetm_15", E = "_checked_1fetm_21", v = "_input_1fetm_28", C = {
+  "radio-button": "_radio-button_1fetm_1",
+  disabled: x,
+  "children-container": "_children-container_1fetm_12",
+  toggler: D,
+  checked: E,
+  input: v
+}, d = y.bind(C), K = ({
+  option: e,
+  value: l,
+  onChange: s,
+  onFocus: c,
+  onBlur: N,
+  className: m,
+  ...f
+}) => {
+  const t = g(null), n = k(), r = String(e.value) === String(l), h = (i) => {
+    var u, b;
+    const { keyCode: o } = i;
+    if (o === _.SPACE_KEY_CODE) {
+      i.preventDefault(), (u = t.current) == null || u.click();
+      return;
+    }
+    o === _.ENTER_KEY_CODE && (i.preventDefault(), (b = t.current) == null || b.click());
+  };
+  return (
+    // eslint-disable-next-line
+    /* @__PURE__ */ p(
+      "label",
+      {
+        id: n,
+        className: d(m, "radio-button", {
+          disabled: e.disabled
+        }),
+        tabIndex: e.disabled ? -1 : 0,
+        onKeyDown: e.disabled ? void 0 : h,
+        children: [
+          /* @__PURE__ */ a(
+            "input",
+            {
+              tabIndex: -1,
+              ref: t,
+              type: "radio",
+              className: d("input"),
+              disabled: e.disabled,
+              onChange: s,
+              value: e.value,
+              checked: r,
+              ...f
+            }
+          ),
+          /* @__PURE__ */ a(
+            "span",
+            {
+              role: "radio",
+              "aria-labelledby": n,
+              "aria-checked": r,
+              className: d("toggler", {
+                disabled: e.disabled,
+                checked: r
+              })
+            }
+          ),
+          /* @__PURE__ */ a("span", { className: d("children-container"), children: e.label })
+        ]
+      }
+    )
+  );
+}, w = ({ options: e, value: l, ...s }) => /* @__PURE__ */ a("div", { style: { display: "flex", flexDirection: "column" }, children: e.map((c) => /* @__PURE__ */ a(K, { option: c, value: l, ...s }, c.value)) });
+export {
+  K as R,
+  w as a
+};

package/dist/resizeColumn-46b5b30f.js

@@ -0,0 +1,7 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.85355 12.8536C7.65829 13.0488 7.34171 13.0488 7.14645 12.8536L4.14645 9.85355C3.95118 9.65829 3.95118 9.34171 4.14645 9.14645C4.34171 8.95118 4.65829 8.95118 4.85355 9.14645L7 11.2929L7 3.5C7 3.22386 7.22386 3 7.5 3C7.77614 3 8 3.22386 8 3.5L8 11.2929L10.1464 9.14645C10.3417 8.95119 10.6583 8.95118 10.8536 9.14645C11.0488 9.34171 11.0488 9.65829 10.8536 9.85355L7.85355 12.8536Z", fill: "#A2AAB5" })), i = (t) => /* @__PURE__ */ e.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.14645 3.14645C7.34171 2.95118 7.65829 2.95118 7.85355 3.14645L10.8536 6.14645C11.0488 6.34171 11.0488 6.65829 10.8536 6.85355C10.6583 7.04882 10.3417 7.04882 10.1464 6.85355L8 4.70711V12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 4.70711L4.85355 6.85355C4.65829 7.04882 4.34171 7.04882 4.14645 6.85355C3.95118 6.65829 3.95118 6.34171 4.14645 6.14645L7.14645 3.14645Z", fill: "#A2AAB5" })), n = (t) => /* @__PURE__ */ e.createElement("svg", { width: 11, height: 24, viewBox: "0 0 11 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("rect", { x: 5, width: 1, height: 24, fill: "#A2AAB5" }), /* @__PURE__ */ e.createElement("rect", { x: 1, y: 4, width: 2, height: 16, rx: 1, fill: "#A2AAB5" }), /* @__PURE__ */ e.createElement("rect", { x: 8, y: 4, width: 2, height: 16, rx: 1, fill: "#A2AAB5" }));
+export {
+  l as S,
+  i as a,
+  n as b
+};

package/dist/segmentedControl.js

@@ -0,0 +1,62 @@
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import { useState as o, useEffect as v } from "react";
+import { c as z } from "./bind-06a7ff84.js";
+const f = "_button_8evzz_29", N = "_disabled_8evzz_50", w = "_active_8evzz_50", x = "_icon_8evzz_74", h = {
+  "segmented-control": "_segmented-control_8evzz_16",
+  "full-width": "_full-width_8evzz_24",
+  button: f,
+  disabled: N,
+  active: w,
+  icon: x
+}, c = z.bind(h), S = ({
+  options: s,
+  onChange: l,
+  className: n,
+  fullWidth: i = !1,
+  ariaLabel: _
+}) => {
+  const [t, d] = o(s);
+  v(() => {
+    d(s);
+  }, [s]);
+  const b = (e) => {
+    if (!e.disabled && !e.selected) {
+      const m = t.map((a) => ({
+        ...a,
+        selected: a.value === e.value
+      }));
+      d(m), l == null || l(e.value);
+    }
+  };
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: c("segmented-control", n, {
+        "full-width": i
+      }),
+      role: "group",
+      "aria-label": _,
+      children: t.map((e) => /* @__PURE__ */ u(
+        "button",
+        {
+          type: "button",
+          className: c("button", e.className, {
+            active: e.selected,
+            disabled: e.disabled
+          }),
+          onClick: () => b(e),
+          disabled: e.disabled,
+          "aria-pressed": e.selected,
+          children: [
+            e.icon && /* @__PURE__ */ r("span", { className: c("icon"), children: e.icon }),
+            e.label
+          ]
+        },
+        e.value
+      ))
+    }
+  );
+};
+export {
+  S as SegmentedControl
+};

package/dist/selection-da1a3528.js

@@ -0,0 +1,38 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import "react";
+import { S as a } from "./close-4d480ef7.js";
+import { c as l } from "./bind-06a7ff84.js";
+import { B as r } from "./button-7ab874f3.js";
+const d = "_divider_p4emi_23", p = "_button_p4emi_30", m = {
+  "selection-wrapper": "_selection-wrapper_p4emi_1",
+  "selected-count-text": "_selected-count-text_p4emi_7",
+  "selected-count-caption": "_selected-count-caption_p4emi_16",
+  divider: d,
+  button: p
+}, t = l.bind(m), _ = { selected: "selected", buttonCaption: "Clear Selection" }, C = ({
+  selectedCount: s,
+  onClearSelection: n,
+  captions: c = _,
+  icon: i = /* @__PURE__ */ e(a, {})
+}) => /* @__PURE__ */ o("div", { className: t("selection-wrapper"), children: [
+  /* @__PURE__ */ o("p", { children: [
+    /* @__PURE__ */ e("span", { className: t("selected-count-text"), children: s }),
+    /* @__PURE__ */ e("span", { className: t("selected-count-caption"), children: c.selected })
+  ] }),
+  /* @__PURE__ */ e("div", { className: t("divider") }),
+  /* @__PURE__ */ e(
+    r,
+    {
+      icon: i,
+      className: t("button"),
+      iconPlace: "start",
+      variant: "text",
+      onClick: n,
+      "aria-label": `${c.buttonCaption} - ${s} ${c.selected}`,
+      children: c.buttonCaption
+    }
+  )
+] });
+export {
+  C as S
+};

package/dist/selection.js

@@ -0,0 +1,10 @@
+import { S as t } from "./selection-da1a3528.js";
+import "react/jsx-runtime";
+import "react";
+import "./close-4d480ef7.js";
+import "./bind-06a7ff84.js";
+import "./button-7ab874f3.js";
+export {
+  t as Selection,
+  t as default
+};

package/dist/sidePanel.js

@@ -0,0 +1,136 @@
+import { jsxs as a, jsx as i, Fragment as D } from "react/jsx-runtime";
+import { useId as I, useRef as K, useMemo as P, useEffect as $ } from "react";
+import { c as A } from "./bind-06a7ff84.js";
+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-d2a05471.js";
+import { S as T } from "./close-4d480ef7.js";
+import { B as j } from "./baseIconButton-251479f7.js";
+import "react-dom";
+import "@floating-ui/react-dom";
+import "downshift";
+import "rc-scrollbars";
+import "./clear-53660571.js";
+import "./dropdown-0260bb66.js";
+import "./fieldLabel.js";
+import "./adaptiveTagList.js";
+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,
+  "overlay-default": "_overlay-default_5ebdz_16",
+  "overlay-light-cyan": "_overlay-light-cyan_5ebdz_20",
+  "side-panel": "_side-panel_5ebdz_1",
+  "side-right": "_side-right_5ebdz_42",
+  "side-left": "_side-left_5ebdz_50",
+  "header-section": "_header-section_5ebdz_58",
+  compact: M,
+  header: F,
+  "header-content": "_header-content_5ebdz_78",
+  "close-button": "_close-button_5ebdz_82",
+  title: H,
+  description: U,
+  content: W,
+  footer: Y,
+  divider: q
+}, e = A.bind(G), ze = ({
+  className: b,
+  title: d,
+  descriptionComponent: o,
+  headerComponent: c,
+  contentClassName: u,
+  contentComponent: s,
+  footerComponent: l,
+  top: n = 0,
+  side: z = "right",
+  isOpen: r = !0,
+  onClose: t,
+  closeButtonAriaLabel: y = "Close panel",
+  showOverlay: _ = !1,
+  overlay: m = "default",
+  allowCloseOutside: N = !0,
+  overlayClassName: g
+}) => {
+  const p = I(), v = K(null), E = () => {
+    t == null || t();
+  }, k = P(
+    () => ({
+      ignoreSelectors: [`[${O}]`]
+    }),
+    []
+  );
+  L(
+    v,
+    N && _ && r ? t : void 0,
+    k
+  ), $(() => {
+    if (!r || !t)
+      return;
+    const h = (R) => {
+      const { keyCode: S } = R;
+      S === B.ESCAPE_KEY_CODE && t();
+    };
+    return document.addEventListener("keydown", h, !1), () => {
+      document.removeEventListener("keydown", h, !1);
+    };
+  }, [r, t]);
+  const x = !!(c || o), f = /* @__PURE__ */ a(
+    "aside",
+    {
+      ref: v,
+      className: e("side-panel", `side-${z}`, { active: r }, b),
+      role: "dialog",
+      "aria-modal": "true",
+      "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 || d) && /* @__PURE__ */ a("div", { className: e("header"), children: [
+            d ? /* @__PURE__ */ i("span", { id: p, className: e("title"), children: d }) : c,
+            t && /* @__PURE__ */ i(
+              j,
+              {
+                className: e("close-button"),
+                onClick: E,
+                "aria-label": y,
+                children: /* @__PURE__ */ i(T, {})
+              }
+            )
+          ] }),
+          o
+        ] }),
+        /* @__PURE__ */ i("div", { className: e("divider") }),
+        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 })
+        ] })
+      ]
+    }
+  );
+  return _ ? /* @__PURE__ */ i(
+    "div",
+    {
+      className: e(
+        "side-panel-overlay",
+        { active: r },
+        m && `overlay-${m}`,
+        g
+      ),
+      children: f
+    }
+  ) : f;
+};
+export {
+  ze as SidePanel
+};