@reportportal/ui-kit 0.0.1-alpha.12 → 0.0.1-alpha.121

package/dist/table-8e223d5d.js

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

package/dist/table.js

@@ -1,9 +1,9 @@
-import { T as r } from "./table-231fd19c.js";
+import { T as r } from "./table-8e223d5d.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";