@reportportal/ui-kit 0.0.1-alpha.114 → 0.0.1-alpha.116

package/dist/table-8e223d5d.js

@@ -0,0 +1,485 @@
+import { jsxs as w, jsx as r } from "react/jsx-runtime";
+import { useMemo as Z, useState as L, useCallback as C, useEffect as R, useRef as F } from "react";
+import { c as ke } from "./bind-06a7ff84.js";
+import { b as Y, a as q, S as ve } from "./chevronDownDropdown-66f5b1af.js";
+import { C as J } from "./checkbox-ed6cc375.js";
+const D = (l) => typeof l == "string", Ce = "_table_m8adn_1", ge = "_selectable_m8adn_56", we = "_expanded_m8adn_52", xe = "_label_m8adn_269", Ne = {
+  table: Ce,
+  "fixed-header": "_fixed-header_m8adn_8",
+  "horizontally-scrollable-container": "_horizontally-scrollable-container_m8adn_14",
+  "table-header": "_table-header_m8adn_19",
+  "sticky-header": "_sticky-header_m8adn_25",
+  "horizontally-scrollable": "_horizontally-scrollable_m8adn_14",
+  "table-row": "_table-row_m8adn_47",
+  "expanded-cell": "_expanded-cell_m8adn_52",
+  selectable: ge,
+  "row-content-wrapper": "_row-content-wrapper_m8adn_60",
+  "table-row-content": "_table-row-content_m8adn_65",
+  "expand-cell": "_expand-cell_m8adn_81",
+  "size-small": "_size-small_m8adn_84",
+  "size-large": "_size-large_m8adn_95",
+  "table-body": "_table-body_m8adn_110",
+  "scrollable-body": "_scrollable-body_m8adn_116",
+  "table-header-cell": "_table-header-cell_m8adn_162",
+  "table-cell": "_table-cell_m8adn_163",
+  "action-menu-cell": "_action-menu-cell_m8adn_170",
+  "checkbox-cell": "_checkbox-cell_m8adn_195",
+  "expand-icon": "_expand-icon_m8adn_241",
+  expanded: we,
+  "primary-cell": "_primary-cell_m8adn_250",
+  label: xe,
+  "sortable-cell": "_sortable-cell_m8adn_280",
+  "align-right": "_align-right_m8adn_283",
+  "align-center": "_align-center_m8adn_289",
+  "pinned-column": "_pinned-column_m8adn_292"
+}, I = "asc", x = 32, ee = 100, Ee = 48, Me = (l) => l.toLowerCase() === I, $e = (l) => l.map((a) => a.key), g = (l) => "primary" in l && l.primary === !0, Te = (l) => {
+  var t;
+  return `size-${((t = l.rowConfigs) == null ? void 0 : t.size) ?? "default"}`;
+}, Se = (l, a, t, s, o) => {
+  let c = 0;
+  s && (c += x), o && (c += x);
+  for (let _ = 0; _ < l; _++) {
+    const i = a[_];
+    if (g(i)) {
+      const n = t.current.get(i.key) || ee;
+      c += n;
+    } else {
+      const n = i, d = D(n.width) ? parseInt(n.width, 10) || 0 : n.width;
+      c += d;
+    }
+  }
+  return c;
+}, A = (l, a, t, s, o, c, _) => {
+  const i = {};
+  if (!g(l)) {
+    const n = l;
+    i.textAlign = n.align;
+  }
+  if (a && t !== void 0) {
+    const n = Se(
+      t,
+      s,
+      o,
+      c,
+      _
+    );
+    i.left = `${n}px`;
+  }
+  return i;
+}, Q = (l, a, t, s, o, c = !1) => {
+  const _ = [];
+  t && _.push(`${x}px`), c && s && _.push(`${x}px`);
+  const i = (n) => {
+    if (g(n)) {
+      const d = n, y = d.width ? D(d.width) ? d.width : `${d.width}px` : `${ee}px`;
+      _.push(`minmax(${y}, 1fr)`);
+    } else {
+      const d = n, y = D(d.width) ? d.width : `${d.width}px`;
+      _.push(y);
+    }
+  };
+  return l.forEach(i), a.forEach(i), o && _.push(`${Ee}px`), _.join(" ");
+}, ze = ({
+  primaryColumns: l,
+  fixedColumns: a,
+  pinnedColumnKeys: t
+}) => Z(() => {
+  const s = [], o = [];
+  return l.forEach((c) => {
+    const _ = { ...c, primary: !0 };
+    t.includes(c.key) ? s.push(_) : o.push(_);
+  }), a.forEach((c) => {
+    t.includes(c.key) ? s.push(c) : o.push(c);
+  }), {
+    pinnedColumns: s,
+    scrollableColumns: o
+  };
+}, [l, a, t]), Ae = () => {
+  const [l, a] = L(null), [t, s] = L(null), o = C((n) => {
+    a(n);
+  }, []), c = C(() => {
+    a(null);
+  }, []), _ = C((n) => {
+    s(n);
+  }, []), i = C(() => {
+    s(null);
+  }, []);
+  return {
+    hoveredColumn: l,
+    hoveredRow: t,
+    handleColumnMouseEnter: o,
+    handleColumnMouseLeave: c,
+    handleRowMouseEnter: _,
+    handleRowMouseLeave: i
+  };
+}, Le = ({
+  primaryColumns: l,
+  fixedColumns: a,
+  expandedRowIds: t,
+  onToggleRowExpansion: s
+}) => {
+  const [o, c] = L(/* @__PURE__ */ new Set());
+  R(() => {
+    const n = [
+      ...l.map((y) => y.key),
+      ...a.map((y) => y.key)
+    ], d = /* @__PURE__ */ new Set();
+    t.forEach((y) => {
+      n.forEach((b) => {
+        d.add(`${y}-${b}`);
+      });
+    }), c((y) => {
+      if (y.size === d.size) {
+        let b = !0;
+        if (y.forEach((u) => {
+          d.has(u) || (b = !1);
+        }), b)
+          return y;
+      }
+      return d;
+    });
+  }, [t, l, a]);
+  const _ = C(
+    (n) => {
+      const d = new Set(o), y = t.includes(n), b = [
+        ...l.map((u) => u.key),
+        ...a.map((u) => u.key)
+      ];
+      y ? b.forEach((u) => {
+        const v = `${n}-${u}`;
+        d.delete(v);
+      }) : b.forEach((u) => {
+        const v = `${n}-${u}`;
+        d.add(v);
+      }), c(d), s(n);
+    },
+    [o, t, l, a, s]
+  ), i = C(
+    (n, d) => {
+      const y = `${n}-${d}`;
+      return o.has(y);
+    },
+    [o]
+  );
+  return {
+    expandedCells: o,
+    handleToggleRowExpansion: _,
+    isCellExpanded: i
+  };
+}, We = () => {
+  const l = F(/* @__PURE__ */ new Map()), a = C(
+    (t) => (s) => {
+      if (!s)
+        return;
+      const o = s.getBoundingClientRect().width;
+      o > 0 && l.current.set(t, o);
+    },
+    []
+  );
+  return {
+    columnWidthsRef: l,
+    setCellRef: a
+  };
+}, h = ke.bind(Ne), V = ({ column: l }) => {
+  const a = F(null), [t, s] = L(!1);
+  return R(() => {
+    if (a.current) {
+      const o = a.current.offsetWidth, c = a.current.scrollWidth;
+      s(c > o);
+    }
+  }, [l.header]), /* @__PURE__ */ r("span", { ref: a, title: t ? l.header : void 0, children: l.header });
+}, Be = ({
+  data: l,
+  primaryColumn: a,
+  fixedColumns: t,
+  renderRowActions: s,
+  className: o = "",
+  rowClassName: c = "",
+  headerClassName: _ = "",
+  selectable: i = !1,
+  selectedRowIds: n = [],
+  sortingDirection: d = I,
+  sortingColumn: y,
+  sortableColumns: b,
+  isHeaderFixed: u = !1,
+  isHorizontallyScrollable: v = !1,
+  pinnedColumnKeys: le = [],
+  isRowsExpandable: f = !1,
+  expandedRowIds: N = [],
+  onChangeSorting: ne = () => {
+  },
+  onToggleRowSelection: ae = () => {
+  },
+  onToggleAllRowsSelection: te = () => {
+  },
+  onToggleRowExpansion: se = () => {
+  },
+  onToggleAllRowsExpansion: re = () => {
+  }
+}) => {
+  const E = Z(
+    () => Array.isArray(a) ? a : [a],
+    [a]
+  ), m = y ?? E[0], M = b ?? $e([...E, ...t]), { pinnedColumns: k, scrollableColumns: $ } = ze({
+    primaryColumns: E,
+    fixedColumns: t,
+    pinnedColumnKeys: le
+  }), {
+    hoveredColumn: P,
+    hoveredRow: ce,
+    handleColumnMouseEnter: U,
+    handleColumnMouseLeave: O,
+    handleRowMouseEnter: oe,
+    handleRowMouseLeave: ie
+  } = Ae(), { columnWidthsRef: T, setCellRef: j } = We(), { handleToggleRowExpansion: de, isCellExpanded: B } = Le({
+    primaryColumns: E,
+    fixedColumns: t,
+    expandedRowIds: N,
+    onToggleRowExpansion: se
+  }), H = (e) => {
+    M.includes(e) && ne({ key: e, direction: d });
+  }, he = (e) => {
+    ae(e);
+  }, _e = () => {
+    te();
+  }, ye = () => {
+    re();
+  }, G = (e) => M.includes(e) ? (m == null ? void 0 : m.key) === e ? Me(d) ? /* @__PURE__ */ r(q, {}) : /* @__PURE__ */ r(ve, {}) : /* @__PURE__ */ r(q, {}) : null, pe = l.every((e) => n.includes(e.id)), ue = l.some((e) => n.includes(e.id)), X = (n == null ? void 0 : n.length) > 0, fe = l.every((e) => N.includes(e.id)), be = Q(
+    k,
+    $,
+    f,
+    i,
+    !!s,
+    !1
+  ), me = Q(
+    k,
+    $,
+    f,
+    i,
+    !!s,
+    !0
+  );
+  return /* @__PURE__ */ w(
+    "div",
+    {
+      className: h(
+        "table",
+        {
+          "fixed-header": u,
+          "horizontally-scrollable-container": u && v
+        },
+        o
+      ),
+      children: [
+        /* @__PURE__ */ w(
+          "div",
+          {
+            className: h(
+              "table-header",
+              {
+                "sticky-header": u,
+                "horizontally-scrollable": v
+              },
+              _
+            ),
+            style: { gridTemplateColumns: me },
+            children: [
+              i && /* @__PURE__ */ r(
+                "div",
+                {
+                  className: h("table-header-cell", "checkbox-cell"),
+                  style: { left: f ? `${x}px` : "0" },
+                  children: X && /* @__PURE__ */ r(
+                    J,
+                    {
+                      value: pe,
+                      partiallyChecked: ue,
+                      onChange: _e,
+                      className: h("checkbox-cell")
+                    }
+                  )
+                }
+              ),
+              f && /* @__PURE__ */ r("div", { className: h("table-header-cell", "expand-cell"), style: { left: "0" }, children: /* @__PURE__ */ r("button", { onClick: ye, "aria-label": "Toggle all rows expansion", children: /* @__PURE__ */ r("span", { className: h("expand-icon", { expanded: fe }), children: /* @__PURE__ */ r(Y, {}) }) }) }),
+              k.map((e, S) => /* @__PURE__ */ r(
+                "button",
+                {
+                  className: h("table-header-cell", "pinned-column", {
+                    [`align-${e.align}`]: "align" in e,
+                    "primary-cell": g(e),
+                    "sortable-cell": M.includes(e.key)
+                  }),
+                  style: A(
+                    e,
+                    !0,
+                    S,
+                    k,
+                    T,
+                    f,
+                    i
+                  ),
+                  children: /* @__PURE__ */ w(
+                    "div",
+                    {
+                      className: h("label"),
+                      onClick: () => H(e.key),
+                      onMouseEnter: () => U(e.key),
+                      onMouseLeave: O,
+                      children: [
+                        /* @__PURE__ */ r(V, { column: e }),
+                        (P === e.key || (m == null ? void 0 : m.key) === e.key) && G(e.key)
+                      ]
+                    }
+                  )
+                },
+                e.key
+              )),
+              $.map((e) => /* @__PURE__ */ r(
+                "button",
+                {
+                  className: h("table-header-cell", {
+                    [`align-${e.align}`]: "align" in e,
+                    "primary-cell": g(e),
+                    "sortable-cell": M.includes(e.key)
+                  }),
+                  style: A(
+                    e,
+                    !1,
+                    void 0,
+                    k,
+                    T,
+                    f,
+                    i
+                  ),
+                  children: /* @__PURE__ */ w(
+                    "div",
+                    {
+                      className: h("label"),
+                      onClick: () => H(e.key),
+                      onMouseEnter: () => U(e.key),
+                      onMouseLeave: O,
+                      children: [
+                        /* @__PURE__ */ r(V, { column: e }),
+                        (P === e.key || (m == null ? void 0 : m.key) === e.key) && G(e.key)
+                      ]
+                    }
+                  )
+                },
+                e.key
+              )),
+              s && /* @__PURE__ */ r("div", { className: h("table-header-cell", "action-menu-cell") })
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: h("table-body", {
+              "scrollable-body": u,
+              "horizontally-scrollable": v
+            }),
+            children: l.map((e, S) => /* @__PURE__ */ w(
+              "div",
+              {
+                className: h("table-row", Te(e), c, {
+                  selectable: i
+                }),
+                onMouseEnter: () => oe(S),
+                onMouseLeave: ie,
+                children: [
+                  i && /* @__PURE__ */ r(
+                    "div",
+                    {
+                      className: h("table-cell", "checkbox-cell"),
+                      style: { left: f ? `${x}px` : "0" },
+                      children: (X || ce === S) && /* @__PURE__ */ r(
+                        J,
+                        {
+                          value: n.includes(e.id),
+                          onChange: () => he(e.id),
+                          className: h("checkbox-cell")
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ r("div", { className: h("row-content-wrapper"), children: /* @__PURE__ */ w("div", { className: h("table-row-content"), style: { gridTemplateColumns: be }, children: [
+                    f && /* @__PURE__ */ r("div", { className: h("table-cell", "expand-cell"), style: { left: "0" }, children: /* @__PURE__ */ r(
+                      "button",
+                      {
+                        onClick: () => de(e.id),
+                        "aria-label": N.includes(e.id) ? "Collapse row" : "Expand row",
+                        "aria-expanded": N.includes(e.id),
+                        children: /* @__PURE__ */ r(
+                          "span",
+                          {
+                            className: h("expand-icon", {
+                              expanded: N.includes(e.id)
+                            }),
+                            children: /* @__PURE__ */ r(Y, {})
+                          }
+                        )
+                      }
+                    ) }),
+                    k.map((p, W) => {
+                      const z = B(e.id, p.key), K = g(p);
+                      return /* @__PURE__ */ r(
+                        "div",
+                        {
+                          ref: K ? j(p.key) : void 0,
+                          className: h("table-cell", "pinned-column", {
+                            "primary-cell": K,
+                            "expanded-cell": z
+                          }),
+                          style: A(
+                            p,
+                            !0,
+                            W,
+                            k,
+                            T,
+                            f,
+                            i
+                          ),
+                          children: e[p.key].component || e[p.key].content || e[p.key]
+                        },
+                        p.key
+                      );
+                    }),
+                    $.map((p) => {
+                      const W = B(e.id, p.key), z = g(p);
+                      return /* @__PURE__ */ r(
+                        "div",
+                        {
+                          ref: z ? j(p.key) : void 0,
+                          className: h("table-cell", {
+                            "primary-cell": z,
+                            "expanded-cell": W
+                          }),
+                          style: A(
+                            p,
+                            !1,
+                            void 0,
+                            k,
+                            T,
+                            f,
+                            i
+                          ),
+                          children: e[p.key].component || e[p.key].content || e[p.key]
+                        },
+                        p.key
+                      );
+                    }),
+                    s && /* @__PURE__ */ r("div", { className: h("table-cell", "action-menu-cell"), children: s(e.metaData) })
+                  ] }) })
+                ]
+              },
+              e.id
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Be as T
+};

package/dist/table.js

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

package/dist/tooltip.js

@@ -1,69 +1,71 @@
-import { jsxs as p, Fragment as D, jsx as o } from "react/jsx-runtime";
-import { useState as H, useRef as d } from "react";
-import { createPortal as R } from "react-dom";
-import { c as G } from "./bind-06a7ff84.js";
-import { useFloating as P, offset as j, flip as k, arrow as $, autoUpdate as C, FloatingArrow as U } from "@floating-ui/react";
-const Y = {
+import { jsxs as p, Fragment as P, jsx as o } from "react/jsx-runtime";
+import { useState as R, useRef as d } from "react";
+import { createPortal as G } from "react-dom";
+import { c as j } from "./bind-06a7ff84.js";
+import { useFloating as k, offset as $, flip as C, arrow as U, autoUpdate as Y, FloatingArrow as Z } from "@floating-ui/react";
+import { T as f, g as q, b as z, a as B } from "./floatingUi-41f8c7b5.js";
+const J = {
   "tooltip-wrapper": "_tooltip-wrapper_lwpn2_16",
   "tooltip-content": "_tooltip-content_lwpn2_23"
-}, n = G.bind(Y), Z = 300, q = 100, z = 16, f = 8, B = ["top", "right", "bottom", "left"], tt = ({
+}, n = j.bind(J), K = 300, Q = 100, st = ({
   content: u,
   wrapperClassName: h,
   tooltipClassName: w,
   contentClassName: x,
-  dynamicWidth: T,
-  width: _,
-  minWidth: g = 120,
-  safeZone: E = 4,
-  zIndex: A = 9,
+  dynamicWidth: g,
+  width: T,
+  minWidth: _ = 120,
+  safeZone: A = 4,
+  zIndex: E = 9,
   placement: N = "bottom",
   arrowColor: b = "rgba(34, 34, 34, 0.91)",
   dataAutomationId: I,
-  mainAxis: S = !0,
-  children: W,
+  mainAxis: O = !0,
+  children: S,
   portalRoot: s,
-  isFloating: y = !0
+  isFloating: W = !0
 }) => {
-  const [i, l] = H(!1), r = d(null), t = d(), { refs: c, floatingStyles: F, context: L } = P({
+  const [i, l] = R(!1), a = d(null), t = d(), { refs: r, floatingStyles: y, context: F } = k({
     open: i,
     placement: N,
     middleware: [
-      j({
-        mainAxis: E + f
-      }),
-      y && k({
-        mainAxis: S,
+      $(({ rects: D, placement: H }) => ({
+        mainAxis: A + f,
+        alignmentAxis: q(D, H)
+      })),
+      W && C({
+        mainAxis: O,
         fallbackAxisSideDirection: "start",
-        fallbackPlacements: B
+        fallbackPlacements: z
       }),
-      $({
-        element: r
+      U({
+        element: a
       })
     ],
-    whileElementsMounted: C
-  }), e = T ? null : { width: `${_}px` }, M = document.documentElement.clientWidth, O = e || M - q, a = () => {
+    whileElementsMounted: Y
+  }), e = g ? null : { width: `${T}px` }, L = document.documentElement.clientWidth, M = e || L - Q, c = () => {
     t.current && clearTimeout(t.current), l(!1);
   }, v = () => {
-    t.current = setTimeout(() => l(!0), Z);
+    t.current = setTimeout(() => l(!0), K);
   }, m = () => /* @__PURE__ */ p(
     "div",
     {
-      ref: c.setFloating,
+      ref: r.setFloating,
       style: {
-        ...F,
+        ...y,
         ...e,
-        minWidth: g,
-        zIndex: A
+        minWidth: _,
+        zIndex: E
       },
       "data-automation-id": I,
       className: n(w),
       children: [
         /* @__PURE__ */ o(
-          U,
+          Z,
           {
-            ref: r,
-            context: L,
-            width: z,
+            ref: a,
+            context: F,
+            width: B,
             height: f,
             fill: b
           }
@@ -73,7 +75,7 @@ const Y = {
           {
             className: n("tooltip-content", x),
             style: {
-              maxWidth: `${O}px`
+              maxWidth: `${M}px`
             },
             children: u
           }
@@ -81,21 +83,21 @@ const Y = {
       ]
     }
   );
-  return /* @__PURE__ */ p(D, { children: [
+  return /* @__PURE__ */ p(P, { children: [
     /* @__PURE__ */ o(
       "div",
       {
-        ref: c.setReference,
+        ref: r.setReference,
         className: n("tooltip-wrapper", h),
-        onMouseDown: a,
+        onMouseDown: c,
         onMouseEnter: v,
-        onMouseLeave: a,
-        children: W
+        onMouseLeave: c,
+        children: S
       }
     ),
-    i && (s ? R(m(), s) : m())
+    i && (s ? G(m(), s) : m())
   ] });
 };
 export {
-  tt as Tooltip
+  st as Tooltip
 };

package/package.json

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