@reportportal/ui-kit 0.0.1-alpha.103 → 0.0.1-alpha.104

package/dist/table-0ca84375.js

@@ -0,0 +1,476 @@
+import { jsxs as x, jsx as s } from "react/jsx-runtime";
+import { useMemo as Q, useState as L, useCallback as g, useEffect as ue, useRef as be } from "react";
+import { c as fe } 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_1kj69_1", ge = "_selectable_1kj69_56", je = "_expanded_1kj69_52", xe = "_label_1kj69_266", Ne = {
+  table: Ce,
+  "fixed-header": "_fixed-header_1kj69_8",
+  "horizontally-scrollable-container": "_horizontally-scrollable-container_1kj69_14",
+  "table-header": "_table-header_1kj69_19",
+  "sticky-header": "_sticky-header_1kj69_25",
+  "horizontally-scrollable": "_horizontally-scrollable_1kj69_14",
+  "table-row": "_table-row_1kj69_47",
+  "expanded-cell": "_expanded-cell_1kj69_52",
+  selectable: ge,
+  "row-content-wrapper": "_row-content-wrapper_1kj69_60",
+  "table-row-content": "_table-row-content_1kj69_65",
+  "expand-cell": "_expand-cell_1kj69_81",
+  "size-small": "_size-small_1kj69_84",
+  "size-large": "_size-large_1kj69_95",
+  "table-body": "_table-body_1kj69_110",
+  "scrollable-body": "_scrollable-body_1kj69_116",
+  "table-header-cell": "_table-header-cell_1kj69_162",
+  "table-cell": "_table-cell_1kj69_163",
+  "action-menu-cell": "_action-menu-cell_1kj69_170",
+  "checkbox-cell": "_checkbox-cell_1kj69_195",
+  "expand-icon": "_expand-icon_1kj69_238",
+  expanded: je,
+  "primary-cell": "_primary-cell_1kj69_247",
+  label: xe,
+  "sortable-cell": "_sortable-cell_1kj69_270",
+  "align-right": "_align-right_1kj69_273",
+  "align-center": "_align-center_1kj69_279",
+  "pinned-column": "_pinned-column_1kj69_282"
+}, Z = "asc", N = 32, F = 100, we = 48, me = (l) => l.toLowerCase() === Z, Ee = (l) => l.map((a) => a.key), j = (l) => "primary" in l && l.primary === !0, Me = (l) => {
+  var t;
+  return `size-${((t = l.rowConfigs) == null ? void 0 : t.size) ?? "default"}`;
+}, $e = (l, a, t, c, i) => {
+  let o = 0;
+  c && (o += N), i && (o += N);
+  for (let h = 0; h < l; h++) {
+    const r = a[h];
+    if (j(r)) {
+      const n = t.current.get(r.key) || F;
+      o += n;
+    } else {
+      const n = r, _ = V(n.width) ? parseInt(n.width, 10) || 0 : n.width;
+      o += _;
+    }
+  }
+  return o;
+}, z = (l, a, t, c, i, o, h) => {
+  const r = {};
+  if (!j(l)) {
+    const n = l;
+    r.textAlign = n.align;
+  }
+  if (a && t !== void 0) {
+    const n = $e(
+      t,
+      c,
+      i,
+      o,
+      h
+    );
+    r.left = `${n}px`;
+  }
+  return r;
+}, J = (l, a, t, c, i, o = !1) => {
+  const h = [];
+  t && h.push(`${N}px`), o && c && h.push(`${N}px`);
+  const r = (n) => {
+    if (j(n))
+      h.push(`minmax(${F}px, 1fr)`);
+    else {
+      const _ = n, k = V(_.width) ? _.width : `${_.width}px`;
+      h.push(k);
+    }
+  };
+  return l.forEach(r), a.forEach(r), i && h.push(`${we}px`), h.join(" ");
+}, Se = ({
+  primaryColumns: l,
+  fixedColumns: a,
+  pinnedColumnKeys: t
+}) => Q(() => {
+  const c = [], i = [];
+  return l.forEach((o) => {
+    const h = { ...o, primary: !0 };
+    t.includes(o.key) ? c.push(h) : i.push(h);
+  }), a.forEach((o) => {
+    t.includes(o.key) ? c.push(o) : i.push(o);
+  }), {
+    pinnedColumns: c,
+    scrollableColumns: i
+  };
+}, [l, a, t]), Te = () => {
+  const [l, a] = L(null), [t, c] = L(null), i = g((n) => {
+    a(n);
+  }, []), o = g(() => {
+    a(null);
+  }, []), h = g((n) => {
+    c(n);
+  }, []), r = g(() => {
+    c(null);
+  }, []);
+  return {
+    hoveredColumn: l,
+    hoveredRow: t,
+    handleColumnMouseEnter: i,
+    handleColumnMouseLeave: o,
+    handleRowMouseEnter: h,
+    handleRowMouseLeave: r
+  };
+}, ze = ({
+  primaryColumns: l,
+  fixedColumns: a,
+  expandedRowIds: t,
+  onToggleRowExpansion: c
+}) => {
+  const [i, o] = L(/* @__PURE__ */ new Set());
+  ue(() => {
+    const n = [
+      ...l.map((k) => k.key),
+      ...a.map((k) => k.key)
+    ], _ = /* @__PURE__ */ new Set();
+    t.forEach((k) => {
+      n.forEach((b) => {
+        _.add(`${k}-${b}`);
+      });
+    }), o((k) => {
+      if (k.size === _.size) {
+        let b = !0;
+        if (k.forEach((p) => {
+          _.has(p) || (b = !1);
+        }), b)
+          return k;
+      }
+      return _;
+    });
+  }, [t, l, a]);
+  const h = g(
+    (n) => {
+      const _ = new Set(i), k = t.includes(n), b = [
+        ...l.map((p) => p.key),
+        ...a.map((p) => p.key)
+      ];
+      k ? b.forEach((p) => {
+        const C = `${n}-${p}`;
+        _.delete(C);
+      }) : b.forEach((p) => {
+        const C = `${n}-${p}`;
+        _.add(C);
+      }), o(_), c(n);
+    },
+    [i, t, l, a, c]
+  ), r = g(
+    (n, _) => {
+      const k = `${n}-${_}`;
+      return i.has(k);
+    },
+    [i]
+  );
+  return {
+    expandedCells: i,
+    handleToggleRowExpansion: h,
+    isCellExpanded: r
+  };
+}, Ae = () => {
+  const l = be(/* @__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 = fe.bind(Ne), Oe = ({
+  data: l,
+  primaryColumn: a,
+  fixedColumns: t,
+  renderRowActions: c,
+  className: i = "",
+  rowClassName: o = "",
+  headerClassName: h = "",
+  selectable: r = !1,
+  selectedRowIds: n = [],
+  sortingDirection: _ = Z,
+  sortingColumn: k,
+  sortableColumns: b,
+  isHeaderFixed: p = !1,
+  isHorizontallyScrollable: C = !1,
+  pinnedColumnKeys: R = [],
+  isRowsExpandable: u = !1,
+  expandedRowIds: w = [],
+  onChangeSorting: I = () => {
+  },
+  onToggleRowSelection: ee = () => {
+  },
+  onToggleAllRowsSelection: le = () => {
+  },
+  onToggleRowExpansion: ne = () => {
+  },
+  onToggleAllRowsExpansion: ae = () => {
+  }
+}) => {
+  const m = Q(
+    () => Array.isArray(a) ? a : [a],
+    [a]
+  ), f = k ?? m[0], E = b ?? Ee([...m, ...t]), { pinnedColumns: v, scrollableColumns: M } = Se({
+    primaryColumns: m,
+    fixedColumns: t,
+    pinnedColumnKeys: R
+  }), {
+    hoveredColumn: D,
+    hoveredRow: te,
+    handleColumnMouseEnter: P,
+    handleColumnMouseLeave: W,
+    handleRowMouseEnter: se,
+    handleRowMouseLeave: ce
+  } = Te(), { columnWidthsRef: $, setCellRef: U } = Ae(), { handleToggleRowExpansion: re, isCellExpanded: O } = ze({
+    primaryColumns: m,
+    fixedColumns: t,
+    expandedRowIds: w,
+    onToggleRowExpansion: ne
+  }), B = (e) => {
+    E.includes(e) && I({ key: e, direction: _ });
+  }, oe = (e) => {
+    ee(e);
+  }, ie = () => {
+    le();
+  }, de = () => {
+    ae();
+  }, G = (e) => E.includes(e) ? (f == null ? void 0 : f.key) === e ? me(_) ? /* @__PURE__ */ s(Y, {}) : /* @__PURE__ */ s(ve, {}) : /* @__PURE__ */ s(Y, {}) : null, he = l.every((e) => n.includes(e.id)), _e = l.some((e) => n.includes(e.id)), H = (n == null ? void 0 : n.length) > 0, ke = l.every((e) => w.includes(e.id)), ye = J(
+    v,
+    M,
+    u,
+    r,
+    !!c,
+    !1
+  ), pe = J(
+    v,
+    M,
+    u,
+    r,
+    !!c,
+    !0
+  );
+  return /* @__PURE__ */ x(
+    "div",
+    {
+      className: d(
+        "table",
+        {
+          "fixed-header": p,
+          "horizontally-scrollable-container": p && C
+        },
+        i
+      ),
+      children: [
+        /* @__PURE__ */ x(
+          "div",
+          {
+            className: d(
+              "table-header",
+              {
+                "sticky-header": p,
+                "horizontally-scrollable": C
+              },
+              h
+            ),
+            style: { gridTemplateColumns: pe },
+            children: [
+              r && /* @__PURE__ */ s(
+                "div",
+                {
+                  className: d("table-header-cell", "checkbox-cell"),
+                  style: { left: u ? `${N}px` : "0" },
+                  children: H && /* @__PURE__ */ s(
+                    q,
+                    {
+                      value: he,
+                      partiallyChecked: _e,
+                      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: ke }), children: /* @__PURE__ */ s(K, {}) }) }) }),
+              v.map((e, S) => /* @__PURE__ */ s(
+                "button",
+                {
+                  className: d("table-header-cell", "pinned-column", {
+                    [`align-${e.align}`]: "align" in e,
+                    "primary-cell": j(e),
+                    "sortable-cell": E.includes(e.key)
+                  }),
+                  style: z(
+                    e,
+                    !0,
+                    S,
+                    v,
+                    $,
+                    u,
+                    r
+                  ),
+                  children: /* @__PURE__ */ x(
+                    "div",
+                    {
+                      className: d("label"),
+                      onClick: () => B(e.key),
+                      onMouseEnter: () => P(e.key),
+                      onMouseLeave: W,
+                      children: [
+                        /* @__PURE__ */ s("span", { children: e.header }),
+                        (D === e.key || (f == null ? void 0 : f.key) === e.key) && G(e.key)
+                      ]
+                    }
+                  )
+                },
+                e.key
+              )),
+              M.map((e) => /* @__PURE__ */ s(
+                "button",
+                {
+                  className: d("table-header-cell", {
+                    [`align-${e.align}`]: "align" in e,
+                    "primary-cell": j(e),
+                    "sortable-cell": E.includes(e.key)
+                  }),
+                  style: z(
+                    e,
+                    !1,
+                    void 0,
+                    v,
+                    $,
+                    u,
+                    r
+                  ),
+                  children: /* @__PURE__ */ x(
+                    "div",
+                    {
+                      className: d("label"),
+                      onClick: () => B(e.key),
+                      onMouseEnter: () => P(e.key),
+                      onMouseLeave: W,
+                      children: [
+                        /* @__PURE__ */ s("span", { children: e.header }),
+                        (D === e.key || (f == null ? void 0 : f.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": p,
+              "horizontally-scrollable": C
+            }),
+            children: l.map((e, S) => /* @__PURE__ */ x(
+              "div",
+              {
+                className: d("table-row", Me(e), o, {
+                  selectable: r
+                }),
+                onMouseEnter: () => se(S),
+                onMouseLeave: ce,
+                children: [
+                  r && /* @__PURE__ */ s(
+                    "div",
+                    {
+                      className: d("table-cell", "checkbox-cell"),
+                      style: { left: u ? `${N}px` : "0" },
+                      children: (H || te === S) && /* @__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__ */ x("div", { className: d("table-row-content"), style: { gridTemplateColumns: ye }, children: [
+                    u && /* @__PURE__ */ s("div", { className: d("table-cell", "expand-cell"), style: { left: "0" }, children: /* @__PURE__ */ s(
+                      "button",
+                      {
+                        onClick: () => re(e.id),
+                        "aria-label": w.includes(e.id) ? "Collapse row" : "Expand row",
+                        "aria-expanded": w.includes(e.id),
+                        children: /* @__PURE__ */ s(
+                          "span",
+                          {
+                            className: d("expand-icon", {
+                              expanded: w.includes(e.id)
+                            }),
+                            children: /* @__PURE__ */ s(K, {})
+                          }
+                        )
+                      }
+                    ) }),
+                    v.map((y, A) => {
+                      const T = O(e.id, y.key), X = j(y);
+                      return /* @__PURE__ */ s(
+                        "div",
+                        {
+                          ref: X ? U(y.key) : void 0,
+                          className: d("table-cell", "pinned-column", {
+                            "primary-cell": X,
+                            "expanded-cell": T
+                          }),
+                          style: z(
+                            y,
+                            !0,
+                            A,
+                            v,
+                            $,
+                            u,
+                            r
+                          ),
+                          children: e[y.key].component || e[y.key].content || e[y.key]
+                        },
+                        y.key
+                      );
+                    }),
+                    M.map((y) => {
+                      const A = O(e.id, y.key), T = j(y);
+                      return /* @__PURE__ */ s(
+                        "div",
+                        {
+                          ref: T ? U(y.key) : void 0,
+                          className: d("table-cell", {
+                            "primary-cell": T,
+                            "expanded-cell": A
+                          }),
+                          style: z(
+                            y,
+                            !1,
+                            void 0,
+                            v,
+                            $,
+                            u,
+                            r
+                          ),
+                          children: e[y.key].component || e[y.key].content || e[y.key]
+                        },
+                        y.key
+                      );
+                    }),
+                    c && /* @__PURE__ */ s("div", { className: d("table-cell", "action-menu-cell"), children: c(e.metaData) })
+                  ] }) })
+                ]
+              },
+              e.id
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Oe as T
+};

package/dist/table.js

@@ -1,8 +1,8 @@
-import { T as r } from "./table-920fdad9.js";
+import { T as r } from "./table-0ca84375.js";
 import "react/jsx-runtime";
 import "react";
 import "./bind-06a7ff84.js";
-import "./arrowUp-4a5caee7.js";
+import "./chevronDownDropdown-66f5b1af.js";
 import "./checkbox-ed6cc375.js";
 import "./keyCodes-f63c0e11.js";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reportportal/ui-kit",
-  "version": "0.0.1-alpha.103",
+  "version": "0.0.1-alpha.104",
   "description": "The UI-kit library for ReportPortal Design System.",
   "type": "module",
   "scripts": {

package/dist/table-920fdad9.js

@@ -1,142 +0,0 @@
-import { jsxs as o, jsx as a } from "react/jsx-runtime";
-import { useState as N, useMemo as K } from "react";
-import { c as O } from "./bind-06a7ff84.js";
-import { a as g, S as P } from "./arrowUp-4a5caee7.js";
-import { C as w } from "./checkbox-ed6cc375.js";
-const Q = "_table_1qo1m_1", V = "_label_1qo1m_96", W = {
-  table: Q,
-  "table-header": "_table-header_1qo1m_9",
-  "table-row": "_table-row_1qo1m_17",
-  "table-row-content": "_table-row-content_1qo1m_23",
-  "size-small": "_size-small_1qo1m_33",
-  "size-large": "_size-large_1qo1m_36",
-  "table-body": "_table-body_1qo1m_40",
-  "table-header-cell": "_table-header-cell_1qo1m_47",
-  "table-cell": "_table-cell_1qo1m_48",
-  "action-menu-cell": "_action-menu-cell_1qo1m_53",
-  "checkbox-cell": "_checkbox-cell_1qo1m_65",
-  "primary-cell": "_primary-cell_1qo1m_79",
-  label: V,
-  "sortable-cell": "_sortable-cell_1qo1m_100",
-  "align-right": "_align-right_1qo1m_103",
-  "align-center": "_align-center_1qo1m_109"
-}, S = "asc", X = (t) => t.toLowerCase() === S, Y = (t) => t.map((r) => r.key), l = O.bind(W), ae = ({
-  data: t,
-  primaryColumn: r,
-  fixedColumns: i,
-  renderRowActions: h,
-  className: f = "",
-  rowClassName: x = "",
-  headerClassName: z = "",
-  selectable: b = !1,
-  selectedRowIds: s = [],
-  sortingDirection: y = S,
-  sortingColumn: n = r,
-  sortableColumns: _ = Y([r, ...i]),
-  onChangeSorting: M = () => {
-  },
-  onToggleRowSelection: u = () => {
-  },
-  onToggleAllRowsSelection: A = () => {
-  }
-}) => {
-  const [L, k] = N(null), [E, v] = N(null), m = K(() => [{ ...r, primary: !0 }, ...i], [r, i]), j = (e) => {
-    _.includes(e) && M({ key: e, direction: y });
-  }, p = (e) => ({
-    width: e.width,
-    textAlign: e.align
-  }), C = (e) => {
-    k(e);
-  }, H = () => {
-    k(null);
-  }, T = (e) => {
-    v(e);
-  }, $ = () => {
-    v(null);
-  }, D = (e) => {
-    u(e);
-  }, U = () => {
-    A();
-  }, B = t.every((e) => s.includes(e.id)), F = t.some((e) => s.includes(e.id)), q = (s == null ? void 0 : s.length) > 0, G = (e) => {
-    var c;
-    return `size-${((c = e.rowConfigs) == null ? void 0 : c.size) ?? "default"}`;
-  }, J = (e) => {
-    if (_.includes(e))
-      return (n == null ? void 0 : n.key) === e ? X(y) ? /* @__PURE__ */ a(g, {}) : /* @__PURE__ */ a(P, {}) : /* @__PURE__ */ a(g, {});
-  };
-  return /* @__PURE__ */ o("div", { className: l("table", f), children: [
-    /* @__PURE__ */ o("div", { className: l("table-header", z), children: [
-      b && /* @__PURE__ */ a("div", { className: l("table-header-cell", "checkbox-cell"), children: q && /* @__PURE__ */ a(
-        w,
-        {
-          value: B,
-          partiallyChecked: F,
-          onChange: U,
-          className: l("checkbox-cell")
-        }
-      ) }),
-      m.map((e) => /* @__PURE__ */ a(
-        "button",
-        {
-          className: l("table-header-cell", {
-            [`align-${e.align}`]: "align" in e,
-            "primary-cell": "primary" in e && e.primary,
-            "sortable-cell": _.includes(e.key)
-          }),
-          style: p(e),
-          children: /* @__PURE__ */ o(
-            "div",
-            {
-              className: l("label"),
-              onClick: () => j(e.key),
-              onMouseEnter: () => C(e.key),
-              onMouseLeave: H,
-              children: [
-                /* @__PURE__ */ a("span", { children: e.header }),
-                (L === e.key || (n == null ? void 0 : n.key) === e.key) && J(e.key)
-              ]
-            }
-          )
-        },
-        e.key
-      )),
-      h && /* @__PURE__ */ a("div", { className: l("table-header-cell", "action-menu-cell") })
-    ] }),
-    /* @__PURE__ */ a("div", { className: l("table-body"), children: t.map((e, d) => /* @__PURE__ */ o(
-      "div",
-      {
-        className: l("table-row", G(e), x),
-        onMouseEnter: () => T(d),
-        onMouseLeave: $,
-        children: [
-          b && /* @__PURE__ */ a("div", { className: l("table-cell", "checkbox-cell"), children: (q || E === d) && /* @__PURE__ */ a(
-            w,
-            {
-              value: s.includes(e.id),
-              onChange: () => D(e.id),
-              className: l("checkbox-cell")
-            }
-          ) }),
-          /* @__PURE__ */ o("div", { className: l("table-row-content"), children: [
-            m.map((c) => /* @__PURE__ */ a(
-              "div",
-              {
-                className: l("table-cell", {
-                  "primary-cell": "primary" in c && c.primary
-                }),
-                style: p(c),
-                children: e[c.key].component || e[c.key].content || e[c.key]
-              },
-              c.key
-            )),
-            h && /* @__PURE__ */ a("div", { className: l("table-cell", "action-menu-cell"), children: h(e.metaData) })
-          ] })
-        ]
-      },
-      e.id
-    )) })
-  ] });
-};
-export {
-  ae as T
-};