@reportportal/ui-kit 0.0.1-alpha.134 → 0.0.1-alpha.136

package/dist/table-fc9f095d.js

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

package/dist/table.js

@@ -1,10 +1,14 @@
-import { T as r } from "./table-8e223d5d.js";
+import { T as r } from "./table-fc9f095d.js";
 import "react/jsx-runtime";
 import "react";
 import "./bind-06a7ff84.js";
 import "./chevronDownDropdown-66f5b1af.js";
 import "./checkbox-ed6cc375.js";
 import "./keyCodes-f63c0e11.js";
+import "./tooltip.js";
+import "react-dom";
+import "@floating-ui/react";
+import "./floatingUi-41f8c7b5.js";
 export {
   r as Table,
   r as default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reportportal/ui-kit",
-  "version": "0.0.1-alpha.134",
+  "version": "0.0.1-alpha.136",
   "description": "The UI-kit library for ReportPortal Design System.",
   "type": "module",
   "scripts": {
@@ -51,6 +51,8 @@
     "framer-motion": "^10.15.2",
     "rc-scrollbars": "^1.1.6",
     "react-datepicker": "^7.6.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dropzone": "^14.3.8"
   },
   "devDependencies": {