@reportportal/ui-kit 0.0.1-alpha.143 → 0.0.1-alpha.145

package/dist/table-a67da002.js

@@ -0,0 +1,586 @@
+import { jsx as o, jsxs as S } from "react/jsx-runtime";
+import { useMemo as se, useState as T, useCallback as w, useEffect as re, useRef as oe, forwardRef as Pe } from "react";
+import { Resizable as De } from "react-resizable";
+import { c as ce } from "./bind-06a7ff84.js";
+import { c as We, b as ee, a as le, S as Oe } from "./resizeColumn-d4107941.js";
+import { C as te } from "./checkbox-ed6cc375.js";
+import { Tooltip as Ue } from "./tooltip.js";
+const j = (l) => typeof l == "string", je = "_table_aipph_1", He = "_resizable_aipph_46", Be = "_selectable_aipph_60", Ge = "_expanded_aipph_56", Xe = "_label_aipph_300", Ye = {
+  table: je,
+  "fixed-header": "_fixed-header_aipph_8",
+  "horizontally-scrollable-container": "_horizontally-scrollable-container_aipph_14",
+  "table-header": "_table-header_aipph_19",
+  "sticky-header": "_sticky-header_aipph_26",
+  "horizontally-scrollable": "_horizontally-scrollable_aipph_14",
+  resizable: He,
+  "table-row": "_table-row_aipph_51",
+  "expanded-cell": "_expanded-cell_aipph_56",
+  selectable: Be,
+  "row-content-wrapper": "_row-content-wrapper_aipph_64",
+  "table-row-content": "_table-row-content_aipph_72",
+  "expand-cell": "_expand-cell_aipph_86",
+  "size-small": "_size-small_aipph_89",
+  "size-large": "_size-large_aipph_100",
+  "table-body": "_table-body_aipph_112",
+  "scrollable-body": "_scrollable-body_aipph_118",
+  "table-header-cell": "_table-header-cell_aipph_178",
+  "table-cell": "_table-cell_aipph_179",
+  "action-menu-cell": "_action-menu-cell_aipph_185",
+  "checkbox-cell": "_checkbox-cell_aipph_210",
+  "expand-all-tooltip-wrapper": "_expand-all-tooltip-wrapper_aipph_252",
+  "expand-all-tooltip-content": "_expand-all-tooltip-content_aipph_261",
+  "expand-icon": "_expand-icon_aipph_270",
+  expanded: Ge,
+  "primary-cell": "_primary-cell_aipph_279",
+  label: Xe,
+  "sortable-cell": "_sortable-cell_aipph_314",
+  "align-right": "_align-right_aipph_317",
+  "align-center": "_align-center_aipph_323",
+  "pinned-column": "_pinned-column_aipph_326"
+}, ie = "asc", z = 32, he = 100, qe = 48, Je = (l) => l.toLowerCase() === ie, Qe = (l) => l.map((a) => a.key), N = (l) => "primary" in l && l.primary === !0, Ve = (l) => {
+  var r;
+  return `size-${((r = l.rowConfigs) == null ? void 0 : r.size) ?? "default"}`;
+}, Ze = (l, a, r, c, i) => {
+  let s = 0;
+  c && (s += z), i && (s += z);
+  for (let _ = 0; _ < l; _++) {
+    const p = a[_];
+    if (N(p)) {
+      const t = r.current.get(p.key) || he;
+      s += t;
+    } else {
+      const t = p, h = j(t.width) ? parseInt(t.width, 10) || 0 : t.width;
+      s += h;
+    }
+  }
+  return s;
+}, D = (l, a, r, c, i, s, _) => {
+  const p = {};
+  if (!N(l)) {
+    const t = l;
+    p.textAlign = t.align;
+  }
+  if (a && r !== void 0) {
+    const t = Ze(
+      r,
+      c,
+      i,
+      s,
+      _
+    );
+    p.left = `${t}px`;
+  }
+  return p;
+}, ae = (l, a, r, c, i, s = !1, _) => {
+  const p = [];
+  r && p.push(`${z}px`), s && c && p.push(`${z}px`);
+  const t = (h) => {
+    if ((_ == null ? void 0 : _[h.key]) !== void 0) {
+      p.push(`${_[h.key]}px`);
+      return;
+    }
+    if (N(h)) {
+      const n = h, f = n.width ? j(n.width) ? n.width : `${n.width}px` : `${he}px`;
+      p.push(`minmax(${f}, 1fr)`);
+    } else {
+      const n = h, f = j(n.width) ? n.width : `${n.width}px`;
+      p.push(f);
+    }
+  };
+  return l.forEach(t), a.forEach(t), i && p.push(`${qe}px`), p.join(" ");
+}, Ke = ({
+  primaryColumns: l,
+  fixedColumns: a,
+  pinnedColumnKeys: r
+}) => se(() => {
+  const c = [], i = [];
+  return l.forEach((s) => {
+    const _ = { ...s, primary: !0 };
+    r.includes(s.key) ? c.push(_) : i.push(_);
+  }), a.forEach((s) => {
+    r.includes(s.key) ? c.push(s) : i.push(s);
+  }), {
+    pinnedColumns: c,
+    scrollableColumns: i
+  };
+}, [l, a, r]), Fe = () => {
+  const [l, a] = T(null), [r, c] = T(null), i = w((t) => {
+    a(t);
+  }, []), s = w(() => {
+    a(null);
+  }, []), _ = w((t) => {
+    c(t);
+  }, []), p = w(() => {
+    c(null);
+  }, []);
+  return {
+    hoveredColumn: l,
+    hoveredRow: r,
+    handleColumnMouseEnter: i,
+    handleColumnMouseLeave: s,
+    handleRowMouseEnter: _,
+    handleRowMouseLeave: p
+  };
+}, Re = ({
+  primaryColumns: l,
+  fixedColumns: a,
+  expandedRowIds: r,
+  onToggleRowExpansion: c
+}) => {
+  const [i, s] = T(/* @__PURE__ */ new Set());
+  re(() => {
+    const t = [
+      ...l.map((n) => n.key),
+      ...a.map((n) => n.key)
+    ], h = /* @__PURE__ */ new Set();
+    r.forEach((n) => {
+      t.forEach((f) => {
+        h.add(`${n}-${f}`);
+      });
+    }), s((n) => {
+      if (n.size === h.size) {
+        let f = !0;
+        if (n.forEach((b) => {
+          h.has(b) || (f = !1);
+        }), f)
+          return n;
+      }
+      return h;
+    });
+  }, [r, l, a]);
+  const _ = w(
+    (t) => {
+      const h = new Set(i), n = r.includes(t), f = [
+        ...l.map((b) => b.key),
+        ...a.map((b) => b.key)
+      ];
+      n ? f.forEach((b) => {
+        const u = `${t}-${b}`;
+        h.delete(u);
+      }) : f.forEach((b) => {
+        const u = `${t}-${b}`;
+        h.add(u);
+      }), s(h), c(t);
+    },
+    [i, r, l, a, c]
+  ), p = w(
+    (t, h) => {
+      const n = `${t}-${h}`;
+      return i.has(n);
+    },
+    [i]
+  );
+  return {
+    expandedCells: i,
+    handleToggleRowExpansion: _,
+    isCellExpanded: p
+  };
+}, Ie = () => {
+  const l = oe(/* @__PURE__ */ new Map()), a = w(
+    (r) => (c) => {
+      if (!c)
+        return;
+      const i = c.getBoundingClientRect().width;
+      i > 0 && l.current.set(r, i);
+    },
+    []
+  );
+  return {
+    columnWidthsRef: l,
+    setCellRef: a
+  };
+}, el = ({
+  enabled: l = !1,
+  minWidth: a = 50,
+  maxWidth: r = 500,
+  columnWidthsRef: c,
+  onColumnResize: i
+}) => {
+  const [s, _] = T({}), p = w(() => {
+    if (!l || Object.keys(s).length > 0 || !c)
+      return;
+    const n = {};
+    c.current.forEach((f, b) => {
+      n[b] = f;
+    }), _(n);
+  }, [l, s, c]), t = w(
+    (n) => (f, { size: b }) => {
+      if (!l)
+        return;
+      const u = Math.min(r, Math.max(a, b.width));
+      _((E) => ({ ...E, [n]: u }));
+    },
+    [l, a, r]
+  ), h = w(
+    (n) => () => {
+      !l || !s[n] || i == null || i(n, s[n]);
+    },
+    [l, s, i]
+  );
+  return {
+    columnWidths: s,
+    handleResize: t,
+    handleResizeStop: h,
+    handleResizeStart: p
+  };
+}, ll = {
+  "resize-handle": "_resize-handle_15uk3_1"
+}, tl = ce.bind(ll), al = Pe(
+  (l, a) => /* @__PURE__ */ o("div", { ref: a, className: tl("resize-handle"), ...l, children: /* @__PURE__ */ o(We, {}) })
+), d = ce.bind(Ye), ne = ({ column: l }) => {
+  const a = oe(null), [r, c] = T(!1);
+  return re(() => {
+    if (a.current) {
+      const i = a.current.offsetWidth, s = a.current.scrollWidth;
+      c(s > i);
+    }
+  }, [l.header]), /* @__PURE__ */ o("span", { ref: a, title: r ? l.header : void 0, children: l.header });
+}, dl = ({
+  data: l,
+  primaryColumn: a,
+  fixedColumns: r,
+  renderRowActions: c,
+  className: i = "",
+  rowClassName: s = "",
+  headerClassName: _ = "",
+  bodyClassName: p = "",
+  selectable: t = !1,
+  selectedRowIds: h = [],
+  sortingDirection: n = ie,
+  sortingColumn: f,
+  sortableColumns: b,
+  isHeaderFixed: u = !1,
+  isHorizontallyScrollable: E = !1,
+  pinnedColumnKeys: de = [],
+  isRowsExpandable: k = !1,
+  expandedRowIds: $ = [],
+  isAllExpandedByDefault: H,
+  expandAllTooltip: B,
+  isResizable: v = !1,
+  minColumnWidth: W = 50,
+  maxColumnWidth: G = 500,
+  onChangeSorting: pe = () => {
+  },
+  onToggleRowSelection: _e = () => {
+  },
+  onToggleAllRowsSelection: ye = () => {
+  },
+  onToggleRowExpansion: fe = () => {
+  },
+  onToggleAllRowsExpansion: be = () => {
+  },
+  onColumnResize: ue = () => {
+  }
+}) => {
+  const m = se(
+    () => Array.isArray(a) ? a : [a],
+    [a]
+  ), x = f ?? m[0], A = b ?? Qe([...m, ...r]), { pinnedColumns: g, scrollableColumns: L } = Ke({
+    primaryColumns: m,
+    fixedColumns: r,
+    pinnedColumnKeys: de
+  }), {
+    hoveredColumn: X,
+    hoveredRow: ke,
+    handleColumnMouseEnter: Y,
+    handleColumnMouseLeave: q,
+    handleRowMouseEnter: ve,
+    handleRowMouseLeave: we
+  } = Fe(), { columnWidthsRef: M, setCellRef: J } = Ie(), { handleToggleRowExpansion: xe, isCellExpanded: Q } = Re({
+    primaryColumns: m,
+    fixedColumns: r,
+    expandedRowIds: $,
+    onToggleRowExpansion: fe
+  }), { columnWidths: O, handleResize: Ce, handleResizeStop: ge, handleResizeStart: Ne } = el({
+    enabled: v,
+    minWidth: W,
+    maxWidth: G,
+    columnWidthsRef: M,
+    onColumnResize: ue
+  }), V = (e, C) => /* @__PURE__ */ o(
+    De,
+    {
+      width: O[e.key] ?? (typeof e.width == "number" ? e.width : W),
+      height: 0,
+      axis: "x",
+      handle: /* @__PURE__ */ o(al, {}),
+      onResizeStart: Ne,
+      onResize: Ce(e.key),
+      onResizeStop: ge(e.key),
+      minConstraints: [W, 0],
+      maxConstraints: [G, 0],
+      children: C
+    },
+    e.key
+  ), Z = (e) => {
+    A.includes(e) && pe({ key: e, direction: n });
+  }, Se = (e) => {
+    _e(e);
+  }, ze = () => {
+    ye();
+  }, Ee = () => {
+    be();
+  }, K = (e) => A.includes(e) ? (x == null ? void 0 : x.key) === e ? Je(n) ? /* @__PURE__ */ o(le, {}) : /* @__PURE__ */ o(Oe, {}) : /* @__PURE__ */ o(le, {}) : null, $e = l.every((e) => h.includes(e.id)), Me = l.some((e) => h.includes(e.id)), F = (h == null ? void 0 : h.length) > 0, Te = l.every((e) => $.includes(e.id)), me = H !== void 0 ? H : Te, Ae = ae(
+    g,
+    L,
+    k,
+    t,
+    !!c,
+    !1,
+    v ? O : void 0
+  ), Le = ae(
+    g,
+    L,
+    k,
+    t,
+    !!c,
+    !0,
+    v ? O : void 0
+  ), R = /* @__PURE__ */ o("button", { onClick: Ee, "aria-label": "Toggle all rows expansion", children: /* @__PURE__ */ o("span", { className: d("expand-icon", { expanded: me }), children: /* @__PURE__ */ o(ee, {}) }) });
+  return /* @__PURE__ */ S(
+    "div",
+    {
+      className: d(
+        "table",
+        {
+          "fixed-header": u,
+          "horizontally-scrollable-container": u && (E || v)
+        },
+        i
+      ),
+      children: [
+        /* @__PURE__ */ S(
+          "div",
+          {
+            className: d(
+              "table-header",
+              {
+                "sticky-header": u,
+                "horizontally-scrollable": E,
+                resizable: v
+              },
+              _
+            ),
+            style: { gridTemplateColumns: Le },
+            children: [
+              t && /* @__PURE__ */ o(
+                "div",
+                {
+                  className: d("table-header-cell", "checkbox-cell"),
+                  style: { left: k ? `${z}px` : "0" },
+                  children: F && /* @__PURE__ */ o(
+                    te,
+                    {
+                      value: $e,
+                      partiallyChecked: Me,
+                      onChange: ze,
+                      className: d("checkbox-cell")
+                    }
+                  )
+                }
+              ),
+              k && /* @__PURE__ */ o("div", { className: d("table-header-cell", "expand-cell"), style: { left: "0" }, children: B ? /* @__PURE__ */ o(
+                Ue,
+                {
+                  content: B,
+                  placement: "top",
+                  wrapperClassName: d("expand-all-tooltip-wrapper"),
+                  contentClassName: d("expand-all-tooltip-content"),
+                  children: R
+                }
+              ) : R }),
+              g.map((e, C) => {
+                const y = /* @__PURE__ */ o(
+                  "button",
+                  {
+                    className: d("table-header-cell", "pinned-column", {
+                      [`align-${e.align}`]: "align" in e,
+                      "primary-cell": N(e),
+                      "sortable-cell": A.includes(e.key),
+                      resizable: v
+                    }),
+                    style: D(
+                      e,
+                      !0,
+                      C,
+                      g,
+                      M,
+                      k,
+                      t
+                    ),
+                    children: /* @__PURE__ */ S(
+                      "div",
+                      {
+                        className: d("label"),
+                        onClick: () => Z(e.key),
+                        onMouseEnter: () => Y(e.key),
+                        onMouseLeave: q,
+                        children: [
+                          /* @__PURE__ */ o(ne, { column: e }),
+                          (X === e.key || (x == null ? void 0 : x.key) === e.key) && K(e.key)
+                        ]
+                      }
+                    )
+                  },
+                  e.key
+                );
+                return v ? V(e, y) : y;
+              }),
+              L.map((e) => {
+                const C = /* @__PURE__ */ o(
+                  "button",
+                  {
+                    className: d("table-header-cell", {
+                      [`align-${e.align}`]: "align" in e,
+                      "primary-cell": N(e),
+                      "sortable-cell": A.includes(e.key),
+                      resizable: v
+                    }),
+                    style: D(
+                      e,
+                      !1,
+                      void 0,
+                      g,
+                      M,
+                      k,
+                      t
+                    ),
+                    children: /* @__PURE__ */ S(
+                      "div",
+                      {
+                        className: d("label"),
+                        onClick: () => Z(e.key),
+                        onMouseEnter: () => Y(e.key),
+                        onMouseLeave: q,
+                        children: [
+                          /* @__PURE__ */ o(ne, { column: e }),
+                          (X === e.key || (x == null ? void 0 : x.key) === e.key) && K(e.key)
+                        ]
+                      }
+                    )
+                  },
+                  e.key
+                );
+                return v ? V(e, C) : C;
+              }),
+              c && /* @__PURE__ */ o("div", { className: d("table-header-cell", "action-menu-cell") })
+            ]
+          }
+        ),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: d(
+              "table-body",
+              {
+                "scrollable-body": u,
+                "horizontally-scrollable": E,
+                resizable: v
+              },
+              p
+            ),
+            children: l.map((e, C) => /* @__PURE__ */ S(
+              "div",
+              {
+                className: d("table-row", Ve(e), s, {
+                  selectable: t
+                }),
+                onMouseEnter: () => ve(C),
+                onMouseLeave: we,
+                children: [
+                  t && /* @__PURE__ */ o(
+                    "div",
+                    {
+                      className: d("table-cell", "checkbox-cell"),
+                      style: { left: k ? `${z}px` : "0" },
+                      children: (F || ke === C) && /* @__PURE__ */ o(
+                        te,
+                        {
+                          value: h.includes(e.id),
+                          onChange: () => Se(e.id),
+                          className: d("checkbox-cell")
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ o("div", { className: d("row-content-wrapper"), children: /* @__PURE__ */ S("div", { className: d("table-row-content"), style: { gridTemplateColumns: Ae }, children: [
+                    k && /* @__PURE__ */ o("div", { className: d("table-cell", "expand-cell"), style: { left: "0" }, children: /* @__PURE__ */ o(
+                      "button",
+                      {
+                        onClick: () => xe(e.id),
+                        "aria-label": $.includes(e.id) ? "Collapse row" : "Expand row",
+                        "aria-expanded": $.includes(e.id),
+                        children: /* @__PURE__ */ o(
+                          "span",
+                          {
+                            className: d("expand-icon", {
+                              expanded: $.includes(e.id)
+                            }),
+                            children: /* @__PURE__ */ o(ee, {})
+                          }
+                        )
+                      }
+                    ) }),
+                    g.map((y, U) => {
+                      const P = Q(e.id, y.key), I = N(y);
+                      return /* @__PURE__ */ o(
+                        "div",
+                        {
+                          ref: I ? J(y.key) : void 0,
+                          className: d("table-cell", "pinned-column", {
+                            "primary-cell": I,
+                            "expanded-cell": P
+                          }),
+                          style: D(
+                            y,
+                            !0,
+                            U,
+                            g,
+                            M,
+                            k,
+                            t
+                          ),
+                          children: e[y.key].component || e[y.key].content || e[y.key]
+                        },
+                        y.key
+                      );
+                    }),
+                    L.map((y) => {
+                      const U = Q(e.id, y.key), P = N(y);
+                      return /* @__PURE__ */ o(
+                        "div",
+                        {
+                          ref: P ? J(y.key) : void 0,
+                          className: d("table-cell", {
+                            "primary-cell": P,
+                            "expanded-cell": U
+                          }),
+                          style: D(
+                            y,
+                            !1,
+                            void 0,
+                            g,
+                            M,
+                            k,
+                            t
+                          ),
+                          children: e[y.key].component || e[y.key].content || e[y.key]
+                        },
+                        y.key
+                      );
+                    }),
+                    c && /* @__PURE__ */ o("div", { className: d("table-cell", "action-menu-cell"), children: c(e.metaData) })
+                  ] }) })
+                ]
+              },
+              e.id
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  dl as T
+};

package/dist/table.js

@@ -1,8 +1,9 @@
-import { T as r } from "./table-c172f35e.js";
+import { T as r } from "./table-a67da002.js";
 import "react/jsx-runtime";
 import "react";
+import "react-resizable";
 import "./bind-06a7ff84.js";
-import "./chevronDownDropdown-66f5b1af.js";
+import "./resizeColumn-d4107941.js";
 import "./checkbox-ed6cc375.js";
 import "./keyCodes-f63c0e11.js";
 import "./tooltip.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reportportal/ui-kit",
-  "version": "0.0.1-alpha.143",
+  "version": "0.0.1-alpha.145",
   "description": "The UI-kit library for ReportPortal Design System.",
   "type": "module",
   "scripts": {
@@ -53,7 +53,8 @@
     "react-datepicker": "^7.6.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dropzone": "^14.3.8"
+    "react-dropzone": "^14.3.8",
+    "react-resizable": "^3.0.5"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^8.6.14",
@@ -71,6 +72,7 @@
     "@types/react": "^18.3.3",
     "@types/react-datepicker": "^6.2.0",
     "@types/react-dom": "^18.2.7",
+    "@types/react-resizable": "^3.0.8",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react": "^4.0.3",