@reportportal/ui-kit 0.0.1-alpha.139 → 0.0.1-alpha.140

package/dist/table-c172f35e.js

@@ -0,0 +1,504 @@
+import { jsx as o, jsxs as x } from "react/jsx-runtime";
+import { useMemo as ee, useState as A, useCallback as C, useEffect as le, useRef as ae } from "react";
+import { c as me } from "./bind-06a7ff84.js";
+import { b as V, a as Z, S as Ne } from "./chevronDownDropdown-66f5b1af.js";
+import { C as R } from "./checkbox-ed6cc375.js";
+import { Tooltip as qe } from "./tooltip.js";
+const P = (l) => typeof l == "string", Ee = "_table_qg65a_1", Me = "_selectable_qg65a_56", $e = "_expanded_qg65a_52", Se = "_label_qg65a_283", Te = {
+  table: Ee,
+  "fixed-header": "_fixed-header_qg65a_8",
+  "horizontally-scrollable-container": "_horizontally-scrollable-container_qg65a_14",
+  "table-header": "_table-header_qg65a_19",
+  "sticky-header": "_sticky-header_qg65a_26",
+  "horizontally-scrollable": "_horizontally-scrollable_qg65a_14",
+  "table-row": "_table-row_qg65a_47",
+  "expanded-cell": "_expanded-cell_qg65a_52",
+  selectable: Me,
+  "row-content-wrapper": "_row-content-wrapper_qg65a_60",
+  "table-row-content": "_table-row-content_qg65a_68",
+  "expand-cell": "_expand-cell_qg65a_82",
+  "size-small": "_size-small_qg65a_85",
+  "size-large": "_size-large_qg65a_96",
+  "table-body": "_table-body_qg65a_108",
+  "scrollable-body": "_scrollable-body_qg65a_114",
+  "table-header-cell": "_table-header-cell_qg65a_163",
+  "table-cell": "_table-cell_qg65a_164",
+  "action-menu-cell": "_action-menu-cell_qg65a_170",
+  "checkbox-cell": "_checkbox-cell_qg65a_195",
+  "expand-all-tooltip-wrapper": "_expand-all-tooltip-wrapper_qg65a_237",
+  "expand-all-tooltip-content": "_expand-all-tooltip-content_qg65a_246",
+  "expand-icon": "_expand-icon_qg65a_255",
+  expanded: $e,
+  "primary-cell": "_primary-cell_qg65a_264",
+  label: Se,
+  "sortable-cell": "_sortable-cell_qg65a_294",
+  "align-right": "_align-right_qg65a_297",
+  "align-center": "_align-center_qg65a_303",
+  "pinned-column": "_pinned-column_qg65a_306"
+}, te = "asc", m = 32, ne = 100, ze = 48, Ae = (l) => l.toLowerCase() === te, Le = (l) => l.map((t) => t.key), w = (l) => "primary" in l && l.primary === !0, We = (l) => {
+  var n;
+  return `size-${((n = l.rowConfigs) == null ? void 0 : n.size) ?? "default"}`;
+}, Pe = (l, t, n, r, i) => {
+  let c = 0;
+  r && (c += m), i && (c += m);
+  for (let h = 0; h < l; h++) {
+    const y = t[h];
+    if (w(y)) {
+      const a = n.current.get(y.key) || ne;
+      c += a;
+    } else {
+      const a = y, s = P(a.width) ? parseInt(a.width, 10) || 0 : a.width;
+      c += s;
+    }
+  }
+  return c;
+}, z = (l, t, n, r, i, c, h) => {
+  const y = {};
+  if (!w(l)) {
+    const a = l;
+    y.textAlign = a.align;
+  }
+  if (t && n !== void 0) {
+    const a = Pe(
+      n,
+      r,
+      i,
+      c,
+      h
+    );
+    y.left = `${a}px`;
+  }
+  return y;
+}, F = (l, t, n, r, i, c = !1) => {
+  const h = [];
+  n && h.push(`${m}px`), c && r && h.push(`${m}px`);
+  const y = (a) => {
+    if (w(a)) {
+      const s = a, p = s.width ? P(s.width) ? s.width : `${s.width}px` : `${ne}px`;
+      h.push(`minmax(${p}, 1fr)`);
+    } else {
+      const s = a, p = P(s.width) ? s.width : `${s.width}px`;
+      h.push(p);
+    }
+  };
+  return l.forEach(y), t.forEach(y), i && h.push(`${ze}px`), h.join(" ");
+}, De = ({
+  primaryColumns: l,
+  fixedColumns: t,
+  pinnedColumnKeys: n
+}) => ee(() => {
+  const r = [], i = [];
+  return l.forEach((c) => {
+    const h = { ...c, primary: !0 };
+    n.includes(c.key) ? r.push(h) : i.push(h);
+  }), t.forEach((c) => {
+    n.includes(c.key) ? r.push(c) : i.push(c);
+  }), {
+    pinnedColumns: r,
+    scrollableColumns: i
+  };
+}, [l, t, n]), Ue = () => {
+  const [l, t] = A(null), [n, r] = A(null), i = C((a) => {
+    t(a);
+  }, []), c = C(() => {
+    t(null);
+  }, []), h = C((a) => {
+    r(a);
+  }, []), y = C(() => {
+    r(null);
+  }, []);
+  return {
+    hoveredColumn: l,
+    hoveredRow: n,
+    handleColumnMouseEnter: i,
+    handleColumnMouseLeave: c,
+    handleRowMouseEnter: h,
+    handleRowMouseLeave: y
+  };
+}, Oe = ({
+  primaryColumns: l,
+  fixedColumns: t,
+  expandedRowIds: n,
+  onToggleRowExpansion: r
+}) => {
+  const [i, c] = A(/* @__PURE__ */ new Set());
+  le(() => {
+    const a = [
+      ...l.map((p) => p.key),
+      ...t.map((p) => p.key)
+    ], s = /* @__PURE__ */ new Set();
+    n.forEach((p) => {
+      a.forEach((f) => {
+        s.add(`${p}-${f}`);
+      });
+    }), c((p) => {
+      if (p.size === s.size) {
+        let f = !0;
+        if (p.forEach((u) => {
+          s.has(u) || (f = !1);
+        }), f)
+          return p;
+      }
+      return s;
+    });
+  }, [n, l, t]);
+  const h = C(
+    (a) => {
+      const s = new Set(i), p = n.includes(a), f = [
+        ...l.map((u) => u.key),
+        ...t.map((u) => u.key)
+      ];
+      p ? f.forEach((u) => {
+        const k = `${a}-${u}`;
+        s.delete(k);
+      }) : f.forEach((u) => {
+        const k = `${a}-${u}`;
+        s.add(k);
+      }), c(s), r(a);
+    },
+    [i, n, l, t, r]
+  ), y = C(
+    (a, s) => {
+      const p = `${a}-${s}`;
+      return i.has(p);
+    },
+    [i]
+  );
+  return {
+    expandedCells: i,
+    handleToggleRowExpansion: h,
+    isCellExpanded: y
+  };
+}, je = () => {
+  const l = ae(/* @__PURE__ */ new Map()), t = C(
+    (n) => (r) => {
+      if (!r)
+        return;
+      const i = r.getBoundingClientRect().width;
+      i > 0 && l.current.set(n, i);
+    },
+    []
+  );
+  return {
+    columnWidthsRef: l,
+    setCellRef: t
+  };
+}, d = me.bind(Te), I = ({ column: l }) => {
+  const t = ae(null), [n, r] = A(!1);
+  return le(() => {
+    if (t.current) {
+      const i = t.current.offsetWidth, c = t.current.scrollWidth;
+      r(c > i);
+    }
+  }, [l.header]), /* @__PURE__ */ o("span", { ref: t, title: n ? l.header : void 0, children: l.header });
+}, Je = ({
+  data: l,
+  primaryColumn: t,
+  fixedColumns: n,
+  renderRowActions: r,
+  className: i = "",
+  rowClassName: c = "",
+  headerClassName: h = "",
+  bodyClassName: y = "",
+  selectable: a = !1,
+  selectedRowIds: s = [],
+  sortingDirection: p = te,
+  sortingColumn: f,
+  sortableColumns: u,
+  isHeaderFixed: k = !1,
+  isHorizontallyScrollable: L = !1,
+  pinnedColumnKeys: se = [],
+  isRowsExpandable: g = !1,
+  expandedRowIds: N = [],
+  isAllExpandedByDefault: D,
+  expandAllTooltip: U,
+  onChangeSorting: oe = () => {
+  },
+  onToggleRowSelection: re = () => {
+  },
+  onToggleAllRowsSelection: ce = () => {
+  },
+  onToggleRowExpansion: ie = () => {
+  },
+  onToggleAllRowsExpansion: de = () => {
+  }
+}) => {
+  const q = ee(
+    () => Array.isArray(t) ? t : [t],
+    [t]
+  ), b = f ?? q[0], E = u ?? Le([...q, ...n]), { pinnedColumns: v, scrollableColumns: M } = De({
+    primaryColumns: q,
+    fixedColumns: n,
+    pinnedColumnKeys: se
+  }), {
+    hoveredColumn: O,
+    hoveredRow: he,
+    handleColumnMouseEnter: j,
+    handleColumnMouseLeave: B,
+    handleRowMouseEnter: pe,
+    handleRowMouseLeave: _e
+  } = Ue(), { columnWidthsRef: $, setCellRef: H } = je(), { handleToggleRowExpansion: ye, isCellExpanded: G } = Oe({
+    primaryColumns: q,
+    fixedColumns: n,
+    expandedRowIds: N,
+    onToggleRowExpansion: ie
+  }), X = (e) => {
+    E.includes(e) && oe({ key: e, direction: p });
+  }, ue = (e) => {
+    re(e);
+  }, ge = () => {
+    ce();
+  }, fe = () => {
+    de();
+  }, K = (e) => E.includes(e) ? (b == null ? void 0 : b.key) === e ? Ae(p) ? /* @__PURE__ */ o(Z, {}) : /* @__PURE__ */ o(Ne, {}) : /* @__PURE__ */ o(Z, {}) : null, be = l.every((e) => s.includes(e.id)), ke = l.some((e) => s.includes(e.id)), Y = (s == null ? void 0 : s.length) > 0, ve = l.every((e) => N.includes(e.id)), Ce = D !== void 0 ? D : ve, we = F(
+    v,
+    M,
+    g,
+    a,
+    !!r,
+    !1
+  ), xe = F(
+    v,
+    M,
+    g,
+    a,
+    !!r,
+    !0
+  ), J = /* @__PURE__ */ o("button", { onClick: fe, "aria-label": "Toggle all rows expansion", children: /* @__PURE__ */ o("span", { className: d("expand-icon", { expanded: Ce }), children: /* @__PURE__ */ o(V, {}) }) });
+  return /* @__PURE__ */ x(
+    "div",
+    {
+      className: d(
+        "table",
+        {
+          "fixed-header": k,
+          "horizontally-scrollable-container": k && L
+        },
+        i
+      ),
+      children: [
+        /* @__PURE__ */ x(
+          "div",
+          {
+            className: d(
+              "table-header",
+              {
+                "sticky-header": k,
+                "horizontally-scrollable": L
+              },
+              h
+            ),
+            style: { gridTemplateColumns: xe },
+            children: [
+              a && /* @__PURE__ */ o(
+                "div",
+                {
+                  className: d("table-header-cell", "checkbox-cell"),
+                  style: { left: g ? `${m}px` : "0" },
+                  children: Y && /* @__PURE__ */ o(
+                    R,
+                    {
+                      value: be,
+                      partiallyChecked: ke,
+                      onChange: ge,
+                      className: d("checkbox-cell")
+                    }
+                  )
+                }
+              ),
+              g && /* @__PURE__ */ o("div", { className: d("table-header-cell", "expand-cell"), style: { left: "0" }, children: U ? /* @__PURE__ */ o(
+                qe,
+                {
+                  content: U,
+                  placement: "top",
+                  wrapperClassName: d("expand-all-tooltip-wrapper"),
+                  contentClassName: d("expand-all-tooltip-content"),
+                  children: J
+                }
+              ) : J }),
+              v.map((e, S) => /* @__PURE__ */ o(
+                "button",
+                {
+                  className: d("table-header-cell", "pinned-column", {
+                    [`align-${e.align}`]: "align" in e,
+                    "primary-cell": w(e),
+                    "sortable-cell": E.includes(e.key)
+                  }),
+                  style: z(
+                    e,
+                    !0,
+                    S,
+                    v,
+                    $,
+                    g,
+                    a
+                  ),
+                  children: /* @__PURE__ */ x(
+                    "div",
+                    {
+                      className: d("label"),
+                      onClick: () => X(e.key),
+                      onMouseEnter: () => j(e.key),
+                      onMouseLeave: B,
+                      children: [
+                        /* @__PURE__ */ o(I, { column: e }),
+                        (O === e.key || (b == null ? void 0 : b.key) === e.key) && K(e.key)
+                      ]
+                    }
+                  )
+                },
+                e.key
+              )),
+              M.map((e) => /* @__PURE__ */ o(
+                "button",
+                {
+                  className: d("table-header-cell", {
+                    [`align-${e.align}`]: "align" in e,
+                    "primary-cell": w(e),
+                    "sortable-cell": E.includes(e.key)
+                  }),
+                  style: z(
+                    e,
+                    !1,
+                    void 0,
+                    v,
+                    $,
+                    g,
+                    a
+                  ),
+                  children: /* @__PURE__ */ x(
+                    "div",
+                    {
+                      className: d("label"),
+                      onClick: () => X(e.key),
+                      onMouseEnter: () => j(e.key),
+                      onMouseLeave: B,
+                      children: [
+                        /* @__PURE__ */ o(I, { column: e }),
+                        (O === e.key || (b == null ? void 0 : b.key) === e.key) && K(e.key)
+                      ]
+                    }
+                  )
+                },
+                e.key
+              )),
+              r && /* @__PURE__ */ o("div", { className: d("table-header-cell", "action-menu-cell") })
+            ]
+          }
+        ),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: d(
+              "table-body",
+              {
+                "scrollable-body": k,
+                "horizontally-scrollable": L
+              },
+              y
+            ),
+            children: l.map((e, S) => /* @__PURE__ */ x(
+              "div",
+              {
+                className: d("table-row", We(e), c, {
+                  selectable: a
+                }),
+                onMouseEnter: () => pe(S),
+                onMouseLeave: _e,
+                children: [
+                  a && /* @__PURE__ */ o(
+                    "div",
+                    {
+                      className: d("table-cell", "checkbox-cell"),
+                      style: { left: g ? `${m}px` : "0" },
+                      children: (Y || he === S) && /* @__PURE__ */ o(
+                        R,
+                        {
+                          value: s.includes(e.id),
+                          onChange: () => ue(e.id),
+                          className: d("checkbox-cell")
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ o("div", { className: d("row-content-wrapper"), children: /* @__PURE__ */ x("div", { className: d("table-row-content"), style: { gridTemplateColumns: we }, children: [
+                    g && /* @__PURE__ */ o("div", { className: d("table-cell", "expand-cell"), style: { left: "0" }, children: /* @__PURE__ */ o(
+                      "button",
+                      {
+                        onClick: () => ye(e.id),
+                        "aria-label": N.includes(e.id) ? "Collapse row" : "Expand row",
+                        "aria-expanded": N.includes(e.id),
+                        children: /* @__PURE__ */ o(
+                          "span",
+                          {
+                            className: d("expand-icon", {
+                              expanded: N.includes(e.id)
+                            }),
+                            children: /* @__PURE__ */ o(V, {})
+                          }
+                        )
+                      }
+                    ) }),
+                    v.map((_, W) => {
+                      const T = G(e.id, _.key), Q = w(_);
+                      return /* @__PURE__ */ o(
+                        "div",
+                        {
+                          ref: Q ? H(_.key) : void 0,
+                          className: d("table-cell", "pinned-column", {
+                            "primary-cell": Q,
+                            "expanded-cell": T
+                          }),
+                          style: z(
+                            _,
+                            !0,
+                            W,
+                            v,
+                            $,
+                            g,
+                            a
+                          ),
+                          children: e[_.key].component || e[_.key].content || e[_.key]
+                        },
+                        _.key
+                      );
+                    }),
+                    M.map((_) => {
+                      const W = G(e.id, _.key), T = w(_);
+                      return /* @__PURE__ */ o(
+                        "div",
+                        {
+                          ref: T ? H(_.key) : void 0,
+                          className: d("table-cell", {
+                            "primary-cell": T,
+                            "expanded-cell": W
+                          }),
+                          style: z(
+                            _,
+                            !1,
+                            void 0,
+                            v,
+                            $,
+                            g,
+                            a
+                          ),
+                          children: e[_.key].component || e[_.key].content || e[_.key]
+                        },
+                        _.key
+                      );
+                    }),
+                    r && /* @__PURE__ */ o("div", { className: d("table-cell", "action-menu-cell"), children: r(e.metaData) })
+                  ] }) })
+                ]
+              },
+              e.id
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Je as T
+};

package/dist/table.js

@@ -1,4 +1,4 @@
-import { T as r } from "./table-fc9f095d.js";
+import { T as r } from "./table-c172f35e.js";
 import "react/jsx-runtime";
 import "react";
 import "./bind-06a7ff84.js";

package/package.json

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