@reportportal/ui-kit 0.0.1-alpha.102 → 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.102",
+  "version": "0.0.1-alpha.104",
   "description": "The UI-kit library for ReportPortal Design System.",
   "type": "module",
   "scripts": {

package/dist/index-e27a72a8.js

@@ -1,99 +0,0 @@
-import { jsxs as o, jsx as a } from "react/jsx-runtime";
-import { useMemo as r, useCallback as m } from "react";
-import { c as w } from "./bind-06a7ff84.js";
-import { S as C } from "./close-4d480ef7.js";
-import { a as S, b as E, S as j, d as y, e as I, c as l, f as p } from "./xls-995781cc.js";
-const k = (t) => {
-  var i;
-  const s = t.split(".");
-  return s.length > 1 && ((i = s.at(-1)) == null ? void 0 : i.toLowerCase()) || "";
-}, L = {
-  "attached-file": "_attached-file_1od33_16",
-  "attached-file__file-name": "_attached-file__file-name_1od33_28",
-  "attached-file--failed": "_attached-file--failed_1od33_31",
-  "attached-file__name-text": "_attached-file__name-text_1od33_34",
-  "attached-file__icon": "_attached-file__icon_1od33_37",
-  "attached-file--uploading": "_attached-file--uploading_1od33_40",
-  "attached-file--full-width": "_attached-file--full-width_1od33_49",
-  "attached-file__file-icon": "_attached-file__file-icon_1od33_58",
-  "attached-file__info": "_attached-file__info_1od33_70",
-  "attached-file__download-icon": "_attached-file__download-icon_1od33_94",
-  "attached-file__file-details": "_attached-file__file-details_1od33_113",
-  "attached-file__error-message": "_attached-file__error-message_1od33_118",
-  "attached-file__upload-progress": "_attached-file__upload-progress_1od33_123",
-  "attached-file__upload-progress-bar": "_attached-file__upload-progress-bar_1od33_132",
-  "attached-file__remove-button": "_attached-file__remove-button_1od33_136"
-}, e = w.bind(L), A = {
-  csv: j,
-  jar: y,
-  pdf: I,
-  jpg: l,
-  jpeg: l,
-  png: l,
-  gif: l,
-  svg: l,
-  webp: l,
-  xls: p,
-  xlsx: p
-}, M = (t) => A[t.toLowerCase()] ?? E, X = ({
-  fileName: t,
-  size: s,
-  uploadingProgress: i = 0,
-  isUploadFailed: _ = !1,
-  uploadFailedMessage: g,
-  isUploading: c = !1,
-  isFullWidth: u = !1,
-  onDownload: h = () => {
-  },
-  onRemove: d
-}) => {
-  const f = r(() => k(t), [t]), v = f.toUpperCase(), x = r(() => M(f), [f]), b = m(
-    (n) => {
-      n.stopPropagation(), d == null || d();
-    },
-    [d]
-  ), N = m(
-    (n) => {
-      n.stopPropagation(), !_ && !c && h();
-    },
-    [_, c, h]
-  );
-  return /* @__PURE__ */ o(
-    "div",
-    {
-      className: e("attached-file", {
-        "attached-file--failed": _,
-        "attached-file--uploading": c,
-        "attached-file--full-width": u
-      }),
-      children: [
-        /* @__PURE__ */ a("div", { className: e("attached-file__icon"), children: /* @__PURE__ */ a("div", { className: e("attached-file__file-icon"), children: /* @__PURE__ */ a(x, {}) }) }),
-        /* @__PURE__ */ o("div", { className: e("attached-file__info"), children: [
-          /* @__PURE__ */ o("button", { type: "button", className: e("attached-file__file-name"), onClick: N, children: [
-            /* @__PURE__ */ a("span", { className: e("attached-file__name-text"), children: t }),
-            !c && !_ && /* @__PURE__ */ a("span", { className: e("attached-file__download-icon"), children: /* @__PURE__ */ a(S, {}) })
-          ] }),
-          !_ && /* @__PURE__ */ o("div", { className: e("attached-file__file-details"), children: [
-            v,
-            ", ",
-            s,
-            " MB"
-          ] }),
-          _ && /* @__PURE__ */ a("div", { className: e("attached-file__error-message"), children: g })
-        ] }),
-        d && /* @__PURE__ */ a("button", { type: "button", className: e("attached-file__remove-button"), onClick: b, children: /* @__PURE__ */ a(C, {}) }),
-        c && i > 0 && /* @__PURE__ */ a("div", { className: e("attached-file__upload-progress"), children: /* @__PURE__ */ a(
-          "div",
-          {
-            className: e("attached-file__upload-progress-bar"),
-            style: { width: `${i}%` }
-          }
-        ) })
-      ]
-    }
-  );
-};
-export {
-  X as A,
-  k as g
-};