@reportportal/ui-kit 0.0.1-alpha.11 → 0.0.1-alpha.110

package/dist/systemAlert.js

@@ -0,0 +1,69 @@
+import { jsxs as g, jsx as e } from "react/jsx-runtime";
+import { useState as h, useRef as v, useEffect as _ } from "react";
+import { c as E } from "./bind-06a7ff84.js";
+import { S as I } from "./close-4d480ef7.js";
+import { S as p, b as S, a as O } from "./success-8fd8bd2c.js";
+var o = /* @__PURE__ */ ((t) => (t.INFO = "info", t.SUCCESS = "success", t.WARNING = "warning", t.ERROR = "error", t))(o || {}), f = /* @__PURE__ */ ((t) => (t.WHITE = "white", t.BLACK = "black", t))(f || {});
+const k = "_error_jbf1d_14", x = "_success_jbf1d_17", D = "_info_jbf1d_20", H = "_warning_jbf1d_23", T = "_title_jbf1d_38", U = {
+  "system-alert": "_system-alert_jbf1d_1",
+  "system-alert--black": "_system-alert--black_jbf1d_11",
+  error: k,
+  success: x,
+  info: D,
+  warning: H,
+  "icon-wrapper": "_icon-wrapper_jbf1d_26",
+  "content-wrapper": "_content-wrapper_jbf1d_32",
+  title: T,
+  "title--white": "_title--white_jbf1d_50",
+  "title--black": "_title--black_jbf1d_53",
+  "close-button": "_close-button_jbf1d_56"
+}, s = E.bind(U), F = 7e3, W = 4e3, G = ({
+  title: t,
+  onClose: c,
+  icon: u = null,
+  type: n = o.INFO,
+  typographyColor: i = f.WHITE,
+  duration: d = W,
+  className: m,
+  dataAutomationId: b
+}) => {
+  const l = n === o.ERROR ? F : d, [j, w] = h(""), r = v(null);
+  _(() => {
+    const { offsetHeight: a, scrollHeight: N } = r == null ? void 0 : r.current;
+    a < N && w(t);
+  }, [t]), _(() => {
+    const a = setTimeout(() => {
+      c();
+    }, l);
+    return () => clearTimeout(a);
+  }, [l, c]);
+  const R = () => {
+    switch (n) {
+      case "info":
+        return /* @__PURE__ */ e(O, {});
+      case "success":
+        return /* @__PURE__ */ e(S, {});
+      case "warning":
+      case "error":
+        return /* @__PURE__ */ e(p, {});
+      default:
+        return u;
+    }
+  };
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      className: s("system-alert", n, m, `system-alert--${i}`),
+      title: j,
+      "data-automation-id": b,
+      children: [
+        /* @__PURE__ */ e("div", { className: s("icon-wrapper"), children: R() }),
+        /* @__PURE__ */ e("div", { className: s("content-wrapper"), children: /* @__PURE__ */ e("h2", { ref: r, className: s("title", `title--${i}`), children: t }) }),
+        /* @__PURE__ */ e("button", { className: s("close-button"), onClick: c, "aria-label": "close system alert", children: /* @__PURE__ */ e(I, {}) })
+      ]
+    }
+  );
+};
+export {
+  G as SystemAlert
+};

package/dist/systemMessage-924fdaa6.js

@@ -0,0 +1,30 @@
+import { jsxs as t, jsx as s } from "react/jsx-runtime";
+import { c as _ } from "./bind-06a7ff84.js";
+const c = "_children_vll7q_54", m = {
+  "system-message": "_system-message_vll7q_1",
+  "stripes-info": "_stripes-info_vll7q_12",
+  "stripes-warning": "_stripes-warning_vll7q_17",
+  "stripes-error": "_stripes-error_vll7q_22",
+  "text-container": "_text-container_vll7q_27",
+  "message-header-info": "_message-header-info_vll7q_30",
+  "message-header-warning": "_message-header-warning_vll7q_38",
+  "message-header-error": "_message-header-error_vll7q_46",
+  children: c,
+  "content-width": "_content-width_vll7q_70"
+}, e = _.bind(m), h = ({
+  header: r,
+  caption: a,
+  children: i,
+  mode: n = "info",
+  widthByContent: l = !1
+}) => /* @__PURE__ */ t("div", { className: e("system-message", { "content-width": l }), children: [
+  /* @__PURE__ */ s("div", { className: e(`stripes-${n}`) }),
+  /* @__PURE__ */ t("div", { className: e("text-container"), children: [
+    r && /* @__PURE__ */ s("h1", { className: e(`message-header-${n}`), children: r }),
+    /* @__PURE__ */ s("div", { className: e("children"), children: i }),
+    a && /* @__PURE__ */ s("p", { children: a })
+  ] })
+] });
+export {
+  h as S
+};

package/dist/systemMessage.js

@@ -1,4 +1,4 @@
-import { S as e } from "./systemMessage-1ced6079.js";
+import { S as e } from "./systemMessage-924fdaa6.js";
 import "react/jsx-runtime";
 import "./bind-06a7ff84.js";
 export {

package/dist/table-ea578f47.js

@@ -0,0 +1,476 @@
+import { jsxs as N, jsx as s } from "react/jsx-runtime";
+import { useMemo as Q, useState as D, useCallback as g, useEffect as ue, useRef as fe } from "react";
+import { c as ke } from "./bind-06a7ff84.js";
+import { b as K, a as Y, S as ve } from "./chevronDownDropdown-66f5b1af.js";
+import { C as q } from "./checkbox-ed6cc375.js";
+const V = (l) => typeof l == "string", Ce = "_table_12bpb_1", ge = "_selectable_12bpb_56", xe = "_expanded_12bpb_52", Ne = "_label_12bpb_269", we = {
+  table: Ce,
+  "fixed-header": "_fixed-header_12bpb_8",
+  "horizontally-scrollable-container": "_horizontally-scrollable-container_12bpb_14",
+  "table-header": "_table-header_12bpb_19",
+  "sticky-header": "_sticky-header_12bpb_25",
+  "horizontally-scrollable": "_horizontally-scrollable_12bpb_14",
+  "table-row": "_table-row_12bpb_47",
+  "expanded-cell": "_expanded-cell_12bpb_52",
+  selectable: ge,
+  "row-content-wrapper": "_row-content-wrapper_12bpb_60",
+  "table-row-content": "_table-row-content_12bpb_65",
+  "expand-cell": "_expand-cell_12bpb_81",
+  "size-small": "_size-small_12bpb_84",
+  "size-large": "_size-large_12bpb_95",
+  "table-body": "_table-body_12bpb_110",
+  "scrollable-body": "_scrollable-body_12bpb_116",
+  "table-header-cell": "_table-header-cell_12bpb_162",
+  "table-cell": "_table-cell_12bpb_163",
+  "action-menu-cell": "_action-menu-cell_12bpb_170",
+  "checkbox-cell": "_checkbox-cell_12bpb_195",
+  "expand-icon": "_expand-icon_12bpb_241",
+  expanded: xe,
+  "primary-cell": "_primary-cell_12bpb_250",
+  label: Ne,
+  "sortable-cell": "_sortable-cell_12bpb_273",
+  "align-right": "_align-right_12bpb_276",
+  "align-center": "_align-center_12bpb_282",
+  "pinned-column": "_pinned-column_12bpb_285"
+}, Z = "asc", w = 32, F = 100, me = 48, Ee = (l) => l.toLowerCase() === Z, Me = (l) => l.map((a) => a.key), x = (l) => "primary" in l && l.primary === !0, $e = (l) => {
+  var t;
+  return `size-${((t = l.rowConfigs) == null ? void 0 : t.size) ?? "default"}`;
+}, Se = (l, a, t, c, i) => {
+  let o = 0;
+  c && (o += w), i && (o += w);
+  for (let b = 0; b < l; b++) {
+    const r = a[b];
+    if (x(r)) {
+      const n = t.current.get(r.key) || F;
+      o += n;
+    } else {
+      const n = r, h = V(n.width) ? parseInt(n.width, 10) || 0 : n.width;
+      o += h;
+    }
+  }
+  return o;
+}, A = (l, a, t, c, i, o, b) => {
+  const r = {};
+  if (!x(l)) {
+    const n = l;
+    r.textAlign = n.align;
+  }
+  if (a && t !== void 0) {
+    const n = Se(
+      t,
+      c,
+      i,
+      o,
+      b
+    );
+    r.left = `${n}px`;
+  }
+  return r;
+}, J = (l, a, t, c, i, o = !1) => {
+  const b = [];
+  t && b.push(`${w}px`), o && c && b.push(`${w}px`);
+  const r = (n) => {
+    if (x(n))
+      b.push(`minmax(${F}px, 1fr)`);
+    else {
+      const h = n, p = V(h.width) ? h.width : `${h.width}px`;
+      b.push(p);
+    }
+  };
+  return l.forEach(r), a.forEach(r), i && b.push(`${me}px`), b.join(" ");
+}, Te = ({
+  primaryColumns: l,
+  fixedColumns: a,
+  pinnedColumnKeys: t
+}) => Q(() => {
+  const c = [], i = [];
+  return l.forEach((o) => {
+    const b = { ...o, primary: !0 };
+    t.includes(o.key) ? c.push(b) : i.push(b);
+  }), a.forEach((o) => {
+    t.includes(o.key) ? c.push(o) : i.push(o);
+  }), {
+    pinnedColumns: c,
+    scrollableColumns: i
+  };
+}, [l, a, t]), ze = () => {
+  const [l, a] = D(null), [t, c] = D(null), i = g((n) => {
+    a(n);
+  }, []), o = g(() => {
+    a(null);
+  }, []), b = g((n) => {
+    c(n);
+  }, []), r = g(() => {
+    c(null);
+  }, []);
+  return {
+    hoveredColumn: l,
+    hoveredRow: t,
+    handleColumnMouseEnter: i,
+    handleColumnMouseLeave: o,
+    handleRowMouseEnter: b,
+    handleRowMouseLeave: r
+  };
+}, Ae = ({
+  primaryColumns: l,
+  fixedColumns: a,
+  expandedRowIds: t,
+  onToggleRowExpansion: c
+}) => {
+  const [i, o] = D(/* @__PURE__ */ new Set());
+  ue(() => {
+    const n = [
+      ...l.map((p) => p.key),
+      ...a.map((p) => p.key)
+    ], h = /* @__PURE__ */ new Set();
+    t.forEach((p) => {
+      n.forEach((f) => {
+        h.add(`${p}-${f}`);
+      });
+    }), o((p) => {
+      if (p.size === h.size) {
+        let f = !0;
+        if (p.forEach((y) => {
+          h.has(y) || (f = !1);
+        }), f)
+          return p;
+      }
+      return h;
+    });
+  }, [t, l, a]);
+  const b = g(
+    (n) => {
+      const h = new Set(i), p = t.includes(n), f = [
+        ...l.map((y) => y.key),
+        ...a.map((y) => y.key)
+      ];
+      p ? f.forEach((y) => {
+        const C = `${n}-${y}`;
+        h.delete(C);
+      }) : f.forEach((y) => {
+        const C = `${n}-${y}`;
+        h.add(C);
+      }), o(h), c(n);
+    },
+    [i, t, l, a, c]
+  ), r = g(
+    (n, h) => {
+      const p = `${n}-${h}`;
+      return i.has(p);
+    },
+    [i]
+  );
+  return {
+    expandedCells: i,
+    handleToggleRowExpansion: b,
+    isCellExpanded: r
+  };
+}, Le = () => {
+  const l = fe(/* @__PURE__ */ new Map()), a = g(
+    (t) => (c) => {
+      if (!c)
+        return;
+      const i = c.getBoundingClientRect().width;
+      i > 0 && l.current.set(t, i);
+    },
+    []
+  );
+  return {
+    columnWidthsRef: l,
+    setCellRef: a
+  };
+}, d = ke.bind(we), je = ({
+  data: l,
+  primaryColumn: a,
+  fixedColumns: t,
+  renderRowActions: c,
+  className: i = "",
+  rowClassName: o = "",
+  headerClassName: b = "",
+  selectable: r = !1,
+  selectedRowIds: n = [],
+  sortingDirection: h = Z,
+  sortingColumn: p,
+  sortableColumns: f,
+  isHeaderFixed: y = !1,
+  isHorizontallyScrollable: C = !1,
+  pinnedColumnKeys: R = [],
+  isRowsExpandable: u = !1,
+  expandedRowIds: m = [],
+  onChangeSorting: I = () => {
+  },
+  onToggleRowSelection: ee = () => {
+  },
+  onToggleAllRowsSelection: le = () => {
+  },
+  onToggleRowExpansion: ne = () => {
+  },
+  onToggleAllRowsExpansion: ae = () => {
+  }
+}) => {
+  const E = Q(
+    () => Array.isArray(a) ? a : [a],
+    [a]
+  ), k = p ?? E[0], M = f ?? Me([...E, ...t]), { pinnedColumns: v, scrollableColumns: $ } = Te({
+    primaryColumns: E,
+    fixedColumns: t,
+    pinnedColumnKeys: R
+  }), {
+    hoveredColumn: P,
+    hoveredRow: te,
+    handleColumnMouseEnter: W,
+    handleColumnMouseLeave: U,
+    handleRowMouseEnter: se,
+    handleRowMouseLeave: ce
+  } = ze(), { columnWidthsRef: S, setCellRef: O } = Le(), { handleToggleRowExpansion: re, isCellExpanded: j } = Ae({
+    primaryColumns: E,
+    fixedColumns: t,
+    expandedRowIds: m,
+    onToggleRowExpansion: ne
+  }), B = (e) => {
+    M.includes(e) && I({ key: e, direction: h });
+  }, oe = (e) => {
+    ee(e);
+  }, ie = () => {
+    le();
+  }, de = () => {
+    ae();
+  }, G = (e) => M.includes(e) ? (k == null ? void 0 : k.key) === e ? Ee(h) ? /* @__PURE__ */ s(Y, {}) : /* @__PURE__ */ s(ve, {}) : /* @__PURE__ */ s(Y, {}) : null, be = l.every((e) => n.includes(e.id)), he = l.some((e) => n.includes(e.id)), H = (n == null ? void 0 : n.length) > 0, pe = l.every((e) => m.includes(e.id)), _e = J(
+    v,
+    $,
+    u,
+    r,
+    !!c,
+    !1
+  ), ye = J(
+    v,
+    $,
+    u,
+    r,
+    !!c,
+    !0
+  );
+  return /* @__PURE__ */ N(
+    "div",
+    {
+      className: d(
+        "table",
+        {
+          "fixed-header": y,
+          "horizontally-scrollable-container": y && C
+        },
+        i
+      ),
+      children: [
+        /* @__PURE__ */ N(
+          "div",
+          {
+            className: d(
+              "table-header",
+              {
+                "sticky-header": y,
+                "horizontally-scrollable": C
+              },
+              b
+            ),
+            style: { gridTemplateColumns: ye },
+            children: [
+              r && /* @__PURE__ */ s(
+                "div",
+                {
+                  className: d("table-header-cell", "checkbox-cell"),
+                  style: { left: u ? `${w}px` : "0" },
+                  children: H && /* @__PURE__ */ s(
+                    q,
+                    {
+                      value: be,
+                      partiallyChecked: he,
+                      onChange: ie,
+                      className: d("checkbox-cell")
+                    }
+                  )
+                }
+              ),
+              u && /* @__PURE__ */ s("div", { className: d("table-header-cell", "expand-cell"), style: { left: "0" }, children: /* @__PURE__ */ s("button", { onClick: de, "aria-label": "Toggle all rows expansion", children: /* @__PURE__ */ s("span", { className: d("expand-icon", { expanded: pe }), children: /* @__PURE__ */ s(K, {}) }) }) }),
+              v.map((e, T) => /* @__PURE__ */ s(
+                "button",
+                {
+                  className: d("table-header-cell", "pinned-column", {
+                    [`align-${e.align}`]: "align" in e,
+                    "primary-cell": x(e),
+                    "sortable-cell": M.includes(e.key)
+                  }),
+                  style: A(
+                    e,
+                    !0,
+                    T,
+                    v,
+                    S,
+                    u,
+                    r
+                  ),
+                  children: /* @__PURE__ */ N(
+                    "div",
+                    {
+                      className: d("label"),
+                      onClick: () => B(e.key),
+                      onMouseEnter: () => W(e.key),
+                      onMouseLeave: U,
+                      children: [
+                        /* @__PURE__ */ s("span", { children: e.header }),
+                        (P === e.key || (k == null ? void 0 : k.key) === e.key) && G(e.key)
+                      ]
+                    }
+                  )
+                },
+                e.key
+              )),
+              $.map((e) => /* @__PURE__ */ s(
+                "button",
+                {
+                  className: d("table-header-cell", {
+                    [`align-${e.align}`]: "align" in e,
+                    "primary-cell": x(e),
+                    "sortable-cell": M.includes(e.key)
+                  }),
+                  style: A(
+                    e,
+                    !1,
+                    void 0,
+                    v,
+                    S,
+                    u,
+                    r
+                  ),
+                  children: /* @__PURE__ */ N(
+                    "div",
+                    {
+                      className: d("label"),
+                      onClick: () => B(e.key),
+                      onMouseEnter: () => W(e.key),
+                      onMouseLeave: U,
+                      children: [
+                        /* @__PURE__ */ s("span", { children: e.header }),
+                        (P === e.key || (k == null ? void 0 : k.key) === e.key) && G(e.key)
+                      ]
+                    }
+                  )
+                },
+                e.key
+              )),
+              c && /* @__PURE__ */ s("div", { className: d("table-header-cell", "action-menu-cell") })
+            ]
+          }
+        ),
+        /* @__PURE__ */ s(
+          "div",
+          {
+            className: d("table-body", {
+              "scrollable-body": y,
+              "horizontally-scrollable": C
+            }),
+            children: l.map((e, T) => /* @__PURE__ */ N(
+              "div",
+              {
+                className: d("table-row", $e(e), o, {
+                  selectable: r
+                }),
+                onMouseEnter: () => se(T),
+                onMouseLeave: ce,
+                children: [
+                  r && /* @__PURE__ */ s(
+                    "div",
+                    {
+                      className: d("table-cell", "checkbox-cell"),
+                      style: { left: u ? `${w}px` : "0" },
+                      children: (H || te === T) && /* @__PURE__ */ s(
+                        q,
+                        {
+                          value: n.includes(e.id),
+                          onChange: () => oe(e.id),
+                          className: d("checkbox-cell")
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ s("div", { className: d("row-content-wrapper"), children: /* @__PURE__ */ N("div", { className: d("table-row-content"), style: { gridTemplateColumns: _e }, children: [
+                    u && /* @__PURE__ */ s("div", { className: d("table-cell", "expand-cell"), style: { left: "0" }, children: /* @__PURE__ */ s(
+                      "button",
+                      {
+                        onClick: () => re(e.id),
+                        "aria-label": m.includes(e.id) ? "Collapse row" : "Expand row",
+                        "aria-expanded": m.includes(e.id),
+                        children: /* @__PURE__ */ s(
+                          "span",
+                          {
+                            className: d("expand-icon", {
+                              expanded: m.includes(e.id)
+                            }),
+                            children: /* @__PURE__ */ s(K, {})
+                          }
+                        )
+                      }
+                    ) }),
+                    v.map((_, L) => {
+                      const z = j(e.id, _.key), X = x(_);
+                      return /* @__PURE__ */ s(
+                        "div",
+                        {
+                          ref: X ? O(_.key) : void 0,
+                          className: d("table-cell", "pinned-column", {
+                            "primary-cell": X,
+                            "expanded-cell": z
+                          }),
+                          style: A(
+                            _,
+                            !0,
+                            L,
+                            v,
+                            S,
+                            u,
+                            r
+                          ),
+                          children: e[_.key].component || e[_.key].content || e[_.key]
+                        },
+                        _.key
+                      );
+                    }),
+                    $.map((_) => {
+                      const L = j(e.id, _.key), z = x(_);
+                      return /* @__PURE__ */ s(
+                        "div",
+                        {
+                          ref: z ? O(_.key) : void 0,
+                          className: d("table-cell", {
+                            "primary-cell": z,
+                            "expanded-cell": L
+                          }),
+                          style: A(
+                            _,
+                            !1,
+                            void 0,
+                            v,
+                            S,
+                            u,
+                            r
+                          ),
+                          children: e[_.key].component || e[_.key].content || e[_.key]
+                        },
+                        _.key
+                      );
+                    }),
+                    c && /* @__PURE__ */ s("div", { className: d("table-cell", "action-menu-cell"), children: c(e.metaData) })
+                  ] }) })
+                ]
+              },
+              e.id
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  je as T
+};

package/dist/table.js

@@ -1,9 +1,9 @@
-import { T as r } from "./table-231fd19c.js";
+import { T as r } from "./table-ea578f47.js";
 import "react/jsx-runtime";
 import "react";
 import "./bind-06a7ff84.js";
-import "./baseIconButton-7bc53dec.js";
-import "./checkbox-6777be17.js";
+import "./chevronDownDropdown-66f5b1af.js";
+import "./checkbox-ed6cc375.js";
 import "./keyCodes-f63c0e11.js";
 export {
   r as Table,

package/dist/toggle-304107fa.js

@@ -0,0 +1,59 @@
+import { jsxs as b, jsx as o } from "react/jsx-runtime";
+import { c as h } from "./bind-06a7ff84.js";
+import { useRef as k, useId as x } from "react";
+import { K as _ } from "./keyCodes-f63c0e11.js";
+const y = "_toggle_1c7gt_1", E = "_slider_1c7gt_27", D = "_round_1c7gt_47", K = "_input_1c7gt_51", N = "_disabled_1c7gt_92", C = {
+  toggle: y,
+  "children-container": "_children-container_1c7gt_14",
+  slider: E,
+  round: D,
+  input: K,
+  disabled: N
+}, e = h.bind(C), w = ({
+  children: s,
+  value: r,
+  onChange: g,
+  className: u,
+  disabled: t = !1,
+  title: p,
+  ...m
+}) => {
+  const c = k(null), l = x(), f = (n) => {
+    var a, d;
+    const { keyCode: i } = n;
+    if (i === _.SPACE_KEY_CODE) {
+      n.preventDefault(), (a = c.current) == null || a.click();
+      return;
+    }
+    i === _.ENTER_KEY_CODE && (n.preventDefault(), (d = c.current) == null || d.click());
+  };
+  return /* @__PURE__ */ b("label", { id: l, title: p, className: e("toggle", u, { disabled: t }), children: [
+    /* @__PURE__ */ o(
+      "input",
+      {
+        ref: c,
+        tabIndex: t ? -1 : 0,
+        onChange: g,
+        checked: r,
+        disabled: t,
+        onKeyDown: f,
+        className: e("input"),
+        type: "checkbox",
+        ...m
+      }
+    ),
+    /* @__PURE__ */ o(
+      "div",
+      {
+        "aria-labelledby": l,
+        role: "checkbox",
+        "aria-checked": r,
+        className: e("slider", "round")
+      }
+    ),
+    s && /* @__PURE__ */ o("span", { className: e("children-container"), children: s })
+  ] });
+};
+export {
+  w as T
+};

package/dist/toggle.js

@@ -1,4 +1,4 @@
-import { T as r } from "./toggle-707ecb74.js";
+import { T as r } from "./toggle-304107fa.js";
 import "react/jsx-runtime";
 import "./bind-06a7ff84.js";
 import "react";