@reportportal/ui-kit 0.0.1-alpha.68 → 0.0.1-alpha.69

package/dist/table-20aa2cdf.js

@@ -0,0 +1,142 @@
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+import { useState as N, useMemo as G } from "react";
+import { c as J } from "./bind-06a7ff84.js";
+import { a as w, S as K } from "./arrowUp-4a5caee7.js";
+import { C as g } from "./checkbox-aa91985d.js";
+const O = "_table_qun9e_1", P = "_label_qun9e_87", Q = {
+  table: O,
+  "table-header": "_table-header_qun9e_9",
+  "table-row": "_table-row_qun9e_16",
+  "table-row-content": "_table-row-content_qun9e_21",
+  "size-small": "_size-small_qun9e_31",
+  "size-large": "_size-large_qun9e_34",
+  "table-body": "_table-body_qun9e_38",
+  "table-header-cell": "_table-header-cell_qun9e_45",
+  "table-cell": "_table-cell_qun9e_45",
+  "action-menu-cell": "_action-menu-cell_qun9e_50",
+  "checkbox-cell": "_checkbox-cell_qun9e_60",
+  "primary-cell": "_primary-cell_qun9e_71",
+  label: P,
+  "sortable-cell": "_sortable-cell_qun9e_91",
+  "align-right": "_align-right_qun9e_94",
+  "align-center": "_align-center_qun9e_100"
+}, f = "asc", V = (s) => s.toLowerCase() === f, W = (s) => s.map((t) => t.key), l = J.bind(Q), le = ({
+  data: s,
+  primaryColumn: t,
+  fixedColumns: i,
+  renderRowActions: d,
+  className: x = "",
+  rowClassName: z = "",
+  headerClassName: M = "",
+  selectable: y = !1,
+  selectedRowIds: o = [],
+  sortingDirection: k = f,
+  sortingColumn: n = t,
+  sortableColumns: h = W([t, ...i]),
+  onChangeSorting: S = () => {
+  },
+  onToggleRowSelection: m = () => {
+  },
+  onToggleAllRowsSelection: A = () => {
+  }
+}) => {
+  const [L, v] = N(null), [E, u] = N(null), p = G(() => [{ ...t, primary: !0 }, ...i], [t, i]), j = (e) => {
+    h.includes(e) && S({ key: e, direction: k });
+  }, q = (e) => ({
+    width: e.width,
+    textAlign: e.align
+  }), C = (e) => {
+    v(e);
+  }, H = () => {
+    v(null);
+  }, T = (e) => {
+    u(e);
+  }, $ = () => {
+    u(null);
+  }, D = (e) => {
+    m(e);
+  }, R = () => {
+    A();
+  }, U = s.every((e) => o.includes(e.id)), _ = s.some((e) => o.includes(e.id)), B = (e) => {
+    var c;
+    return `size-${((c = e.rowConfigs) == null ? void 0 : c.size) ?? "default"}`;
+  }, F = (e) => {
+    if (h.includes(e))
+      return (n == null ? void 0 : n.key) === e ? V(k) ? /* @__PURE__ */ a(w, {}) : /* @__PURE__ */ a(K, {}) : /* @__PURE__ */ a(w, {});
+  };
+  return /* @__PURE__ */ r("div", { className: l("table", x), children: [
+    /* @__PURE__ */ r("div", { className: l("table-header", M), children: [
+      y && /* @__PURE__ */ a("div", { className: l("table-header-cell", "checkbox-cell"), children: _ && /* @__PURE__ */ a(
+        g,
+        {
+          value: U,
+          partiallyChecked: _,
+          onChange: R,
+          className: l("checkbox-cell")
+        }
+      ) }),
+      p.map((e) => /* @__PURE__ */ a(
+        "button",
+        {
+          className: l("table-header-cell", {
+            [`align-${e.align}`]: "align" in e,
+            "primary-cell": "primary" in e && e.primary,
+            "sortable-cell": h.includes(e.key)
+          }),
+          style: q(e),
+          children: /* @__PURE__ */ r(
+            "div",
+            {
+              className: l("label"),
+              onClick: () => j(e.key),
+              onMouseEnter: () => C(e.key),
+              onMouseLeave: H,
+              children: [
+                /* @__PURE__ */ a("span", { children: e.header }),
+                (L === e.key || (n == null ? void 0 : n.key) === e.key) && F(e.key)
+              ]
+            }
+          )
+        },
+        e.key
+      )),
+      d && /* @__PURE__ */ a("div", { className: l("table-header-cell", "action-menu-cell") })
+    ] }),
+    /* @__PURE__ */ a("div", { className: l("table-body"), children: s.map((e, b) => /* @__PURE__ */ r(
+      "div",
+      {
+        className: l("table-row", B(e), z),
+        onMouseEnter: () => T(b),
+        onMouseLeave: $,
+        children: [
+          y && /* @__PURE__ */ a("div", { className: l("table-cell", "checkbox-cell"), children: (_ || E === b) && /* @__PURE__ */ a(
+            g,
+            {
+              value: o.includes(e.id),
+              onChange: () => D(e.id),
+              className: l("checkbox-cell")
+            }
+          ) }),
+          /* @__PURE__ */ r("div", { className: l("table-row-content"), children: [
+            p.map((c) => /* @__PURE__ */ a(
+              "div",
+              {
+                className: l("table-cell", {
+                  "primary-cell": "primary" in c && c.primary
+                }),
+                style: q(c),
+                children: e[c.key].component || e[c.key].content || e[c.key]
+              },
+              c.key
+            )),
+            d && /* @__PURE__ */ a("div", { className: l("table-cell", "action-menu-cell"), children: d(e.metaData) })
+          ] })
+        ]
+      },
+      e.id
+    )) })
+  ] });
+};
+export {
+  le as T
+};

package/dist/table.js

@@ -1,9 +1,9 @@
-import { T as r } from "./table-02e40724.js";
+import { T as r } from "./table-20aa2cdf.js";
 import "react/jsx-runtime";
 import "react";
 import "./bind-06a7ff84.js";
 import "./arrowUp-4a5caee7.js";
-import "./checkbox-9a6c7ce1.js";
+import "./checkbox-aa91985d.js";
 import "./keyCodes-f63c0e11.js";
 export {
   r as Table,

package/dist/toggle-304107fa.js

@@ -0,0 +1,59 @@
+import { jsxs as b, jsx as o } from "react/jsx-runtime";
+import { c as h } from "./bind-06a7ff84.js";
+import { useRef as k, useId as x } from "react";
+import { K as _ } from "./keyCodes-f63c0e11.js";
+const y = "_toggle_1c7gt_1", E = "_slider_1c7gt_27", D = "_round_1c7gt_47", K = "_input_1c7gt_51", N = "_disabled_1c7gt_92", C = {
+  toggle: y,
+  "children-container": "_children-container_1c7gt_14",
+  slider: E,
+  round: D,
+  input: K,
+  disabled: N
+}, e = h.bind(C), w = ({
+  children: s,
+  value: r,
+  onChange: g,
+  className: u,
+  disabled: t = !1,
+  title: p,
+  ...m
+}) => {
+  const c = k(null), l = x(), f = (n) => {
+    var a, d;
+    const { keyCode: i } = n;
+    if (i === _.SPACE_KEY_CODE) {
+      n.preventDefault(), (a = c.current) == null || a.click();
+      return;
+    }
+    i === _.ENTER_KEY_CODE && (n.preventDefault(), (d = c.current) == null || d.click());
+  };
+  return /* @__PURE__ */ b("label", { id: l, title: p, className: e("toggle", u, { disabled: t }), children: [
+    /* @__PURE__ */ o(
+      "input",
+      {
+        ref: c,
+        tabIndex: t ? -1 : 0,
+        onChange: g,
+        checked: r,
+        disabled: t,
+        onKeyDown: f,
+        className: e("input"),
+        type: "checkbox",
+        ...m
+      }
+    ),
+    /* @__PURE__ */ o(
+      "div",
+      {
+        "aria-labelledby": l,
+        role: "checkbox",
+        "aria-checked": r,
+        className: e("slider", "round")
+      }
+    ),
+    s && /* @__PURE__ */ o("span", { className: e("children-container"), children: s })
+  ] });
+};
+export {
+  w as T
+};

package/dist/toggle.js

@@ -1,4 +1,4 @@
-import { T as r } from "./toggle-1a3aacb5.js";
+import { T as r } from "./toggle-304107fa.js";
 import "react/jsx-runtime";
 import "./bind-06a7ff84.js";
 import "react";

package/dist/tooltip.js

@@ -1,12 +1,12 @@
-import { jsxs as m, Fragment as D, jsx as o } from "react/jsx-runtime";
+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 z, autoUpdate as $, FloatingArrow as C } from "@floating-ui/react";
-const U = {
-  "tooltip-wrapper": "_tooltip-wrapper_18ppz_16",
-  "tooltip-content": "_tooltip-content_18ppz_23"
-}, n = G.bind(U), Y = 300, Z = 100, q = 16, f = 8, B = ["top", "right", "bottom", "left"], tt = ({
+import { useFloating as P, offset as j, flip as k, arrow as $, autoUpdate as C, FloatingArrow as U } from "@floating-ui/react";
+const Y = {
+  "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 = ({
   content: u,
   wrapperClassName: h,
   tooltipClassName: w,
@@ -36,16 +36,16 @@ const U = {
         fallbackAxisSideDirection: "start",
         fallbackPlacements: B
       }),
-      z({
+      $({
         element: r
       })
     ],
-    whileElementsMounted: $
-  }), e = T ? null : { width: `${_}px` }, M = document.documentElement.clientWidth, O = e || M - Z, a = () => {
+    whileElementsMounted: C
+  }), e = T ? null : { width: `${_}px` }, M = document.documentElement.clientWidth, O = e || M - q, a = () => {
     t.current && clearTimeout(t.current), l(!1);
   }, v = () => {
-    t.current = setTimeout(() => l(!0), Y);
-  }, p = () => /* @__PURE__ */ m(
+    t.current = setTimeout(() => l(!0), Z);
+  }, m = () => /* @__PURE__ */ p(
     "div",
     {
       ref: c.setFloating,
@@ -59,11 +59,11 @@ const U = {
       className: n(w),
       children: [
         /* @__PURE__ */ o(
-          C,
+          U,
           {
             ref: r,
             context: L,
-            width: q,
+            width: z,
             height: f,
             fill: b
           }
@@ -81,7 +81,7 @@ const U = {
       ]
     }
   );
-  return /* @__PURE__ */ m(D, { children: [
+  return /* @__PURE__ */ p(D, { children: [
     /* @__PURE__ */ o(
       "div",
       {
@@ -93,7 +93,7 @@ const U = {
         children: W
       }
     ),
-    i && (s ? R(p(), s) : p())
+    i && (s ? R(m(), s) : m())
   ] });
 };
 export {

package/package.json

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

package/dist/button-770f7b20.js

@@ -1,64 +0,0 @@
-import { jsxs as w, jsx as z } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { c as b } from "./bind-06a7ff84.js";
-const l = "_button_giz4s_1", u = "_primary_giz4s_18", x = "_disabled_giz4s_23", f = "_ghost_giz4s_38", y = "_danger_giz4s_59", N = "_text_giz4s_79", B = "_icon_giz4s_133", $ = {
-  button: l,
-  primary: u,
-  disabled: x,
-  ghost: f,
-  danger: y,
-  text: N,
-  "width-min-width": "_width-min-width_giz4s_115",
-  "width-content": "_width-content_giz4s_119",
-  "width-wide-content": "_width-wide-content_giz4s_123",
-  "width-parent": "_width-parent_giz4s_128",
-  icon: B,
-  "icon-start": "_icon-start_giz4s_139",
-  "icon-end": "_icon-end_giz4s_143"
-}, o = b.bind($), q = p(
-  ({
-    variant: _ = "primary",
-    icon: t,
-    iconPlace: i = "start",
-    adjustWidthOn: s = "min-width",
-    type: c = "button",
-    children: r,
-    disabled: n = !1,
-    onClick: e,
-    title: d,
-    className: a,
-    ...g
-  }, h) => {
-    const m = o("button", _, a, {
-      disabled: n,
-      [`width-${s}`]: s
-    });
-    return /* @__PURE__ */ w(
-      "button",
-      {
-        ref: h,
-        type: c,
-        disabled: n,
-        className: m,
-        onClick: e,
-        title: d,
-        ...g,
-        children: [
-          t && /* @__PURE__ */ z(
-            "i",
-            {
-              className: o("icon", {
-                [`icon-${i}`]: i
-              }),
-              children: t
-            }
-          ),
-          r
-        ]
-      }
-    );
-  }
-);
-export {
-  q as B
-};

package/dist/dropdown-29285346.js

@@ -1,278 +0,0 @@
-import { jsxs as f, jsx as d, Fragment as U } from "react/jsx-runtime";
-import { forwardRef as _e, useState as q, useRef as he } from "react";
-import { c as J } from "./bind-06a7ff84.js";
-import { useFloating as fe, offset as ge, flip as ue } from "@floating-ui/react-dom";
-import { useSelect as j } from "downshift";
-import { Scrollbars as ye } from "rc-scrollbars";
-import { u as pe } from "./useOnClickOutside-c332f7d3.js";
-import { K as u } from "./keyCodes-f63c0e11.js";
-import { B as me } from "./baseIconButton-251479f7.js";
-import { S as be } from "./dropdown-0260bb66.js";
-import { FieldLabel as Ce } from "./fieldLabel.js";
-import { C as Oe } from "./checkbox-9a6c7ce1.js";
-const Ne = "_disabled_t3cjj_12", De = "_hidden_t3cjj_16", Ee = "_hover_t3cjj_22", we = {
-  "dropdown-option": "_dropdown-option_t3cjj_1",
-  disabled: Ne,
-  hidden: De,
-  hover: Ee,
-  "single-option": "_single-option_t3cjj_35",
-  "sub-option": "_sub-option_t3cjj_42"
-}, z = J.bind(we), G = _e(
-  (r, t) => {
-    const {
-      option: { value: n, disabled: l, hidden: v, label: y, title: c, groupRef: a },
-      selected: K,
-      onChange: p,
-      render: b,
-      highlightHovered: C,
-      onMouseEnter: A,
-      multiSelect: m,
-      isPartiallyChecked: O = !1
-    } = r, x = (N) => {
-      (N.target instanceof HTMLDivElement || N.target instanceof HTMLInputElement) && (p == null || p(n));
-    };
-    return /* @__PURE__ */ f(
-      "div",
-      {
-        className: z("dropdown-option", {
-          disabled: l,
-          hidden: v,
-          hover: C
-        }),
-        title: c,
-        onClick: x,
-        ref: t,
-        onMouseEnter: A,
-        children: [
-          m && /* @__PURE__ */ d(Oe, { value: !!K, partiallyChecked: O }),
-          /* @__PURE__ */ d("div", { className: z("single-option", { "sub-option": !!a }), children: b ? b(r) : y })
-        ]
-      }
-    );
-  }
-), ve = [
-  u.ENTER_KEY_CODE,
-  u.SPACE_KEY_CODE,
-  u.ARROW_DOWN_KEY_CODE
-], Ke = [u.ESCAPE_KEY_CODE, u.TAB_KEY_CODE];
-var g = /* @__PURE__ */ ((r) => (r.ON_KEY_DOWN = "onKeyDown", r.ON_CLICK = "onClick", r))(g || {});
-const Ae = (r, t) => {
-  const n = Array.isArray(t) ? t : [t];
-  return r.findIndex(({ value: l }) => n.includes(l));
-}, xe = (r, t) => (r % t + t) % t, P = (r, t = 0, n = 1) => {
-  if (!r[t].disabled)
-    return t;
-  const l = r.length;
-  return P(
-    r,
-    xe(t + n, l),
-    n
-  );
-}, Ie = (r, t) => P(r, t), ke = (r, t) => P(r, t, -1), je = "_container_1yr7u_1", Pe = "_icon_1yr7u_7", Ye = "_arrow_1yr7u_13", Re = "_dropdown_1yr7u_19", Te = "_disabled_1yr7u_36", He = "_value_1yr7u_43", Me = "_error_1yr7u_46", We = "_touched_1yr7u_46", Le = "_opened_1yr7u_50", Se = "_placeholder_1yr7u_83", Ve = "_ghost_1yr7u_118", $e = "_divider_1yr7u_132", Ue = {
-  container: je,
-  icon: Pe,
-  arrow: Ye,
-  dropdown: Re,
-  "transparent-background": "_transparent-background_1yr7u_33",
-  disabled: Te,
-  value: He,
-  error: Me,
-  touched: We,
-  opened: Le,
-  placeholder: Se,
-  "mobile-disabled": "_mobile-disabled_1yr7u_87",
-  "select-list": "_select-list_1yr7u_92",
-  "limited-width": "_limited-width_1yr7u_109",
-  "options-container": "_options-container_1yr7u_113",
-  ghost: Ve,
-  divider: $e
-}, o = J.bind(Ue), at = ({
-  multiSelect: r = !1,
-  value: t = r ? [] : "",
-  options: n = [],
-  disabled: l = !1,
-  error: v,
-  onChange: y,
-  onFocus: c,
-  onBlur: a,
-  mobileDisabled: K,
-  title: p,
-  touched: b = !1,
-  icon: C,
-  variant: A,
-  placeholder: m = "",
-  label: O = "",
-  renderOption: x,
-  transparentBackground: N = !1,
-  className: Q,
-  toggleButtonClassName: X,
-  isListWidthLimited: Z = !1,
-  optionAll: Y = { value: "all", label: "All" },
-  isOptionAllVisible: R = !1,
-  onSelectAll: F = () => {
-  },
-  formatDisplayedValue: T,
-  notScrollable: B = !1,
-  footer: H
-}) => {
-  const [_, h] = q(!1), M = he(null), [ee, D] = q(null), I = r && Array.isArray(t) ? n.filter((e) => t.includes(e.value)) : null, { refs: W, floatingStyles: te } = fe({
-    placement: "bottom-start",
-    middleware: [
-      ge(5),
-      ue({
-        fallbackPlacements: ["bottom-start", "top-start", "bottom", "top"]
-      })
-    ]
-  }), re = () => {
-    if (R && Array.isArray(t)) {
-      const e = n.map((s) => s.value);
-      y(t.length === n.length ? [] : e), F();
-    }
-  };
-  pe(M, () => {
-    _ && (h(!1), a == null || a());
-  });
-  const L = (e) => {
-    if (!e.disabled) {
-      if (r) {
-        const s = Array.isArray(t) ? [...t] : [], i = s.indexOf(e.value);
-        i === -1 ? s.push(e.value) : s.splice(i, 1), y(s);
-      } else
-        y(e.value);
-      h((s) => r || !s);
-    }
-  }, ne = () => n.find(({ value: e }) => e === t), S = Ae(n, t), {
-    getToggleButtonProps: se,
-    getLabelProps: ae,
-    getMenuProps: de,
-    getItemProps: ie,
-    setHighlightedIndex: E,
-    highlightedIndex: V,
-    selectedItem: w
-  } = j({
-    items: n,
-    itemToString: (e) => (e != null && e.label ? String(e.label) : m) || "",
-    selectedItem: ne(),
-    isOpen: _,
-    circularNavigation: !0,
-    defaultHighlightedIndex: S,
-    onHighlightedIndexChange: (e) => {
-      switch (e.type) {
-        case j.stateChangeTypes.MenuKeyDownArrowUp:
-          return D(g.ON_KEY_DOWN), E(ke(n, e.highlightedIndex)), e;
-        case j.stateChangeTypes.MenuKeyDownArrowDown:
-          return D(g.ON_KEY_DOWN), E(Ie(n, e.highlightedIndex)), e;
-        default:
-          return e;
-      }
-    }
-  }), le = () => {
-    l || (h((e) => !e), _ ? a == null || a() : c == null || c(), D(g.ON_CLICK));
-  }, k = (() => {
-    if (r && Array.isArray(t) && n.length === t.length)
-      return Y.label;
-    const e = n.reduce((s, i) => ((Array.isArray(t) && t.includes(i.value) || i.value === t) && s.push(i.label), s), []);
-    if (e.length > 0)
-      return e.join(", ");
-    if (!t && t !== !1 && t !== 0 || Array.isArray(t) && !t.length)
-      return m;
-  })(), oe = (e) => {
-    const { keyCode: s } = e;
-    ve.includes(s) && !_ && (e.preventDefault(), E(S), h(!0), c == null || c(), D(g.ON_KEY_DOWN));
-  }, ce = (e) => {
-    const { keyCode: s } = e;
-    if (s === u.ENTER_KEY_CODE) {
-      const i = n[V];
-      L(i), r || (h(!1), a == null || a());
-      return;
-    }
-    Ke.includes(s) && (e.stopPropagation(), h(!1), a == null || a());
-  }, $ = () => /* @__PURE__ */ f("div", { className: o("options-container"), children: [
-    r && R && Array.isArray(t) && /* @__PURE__ */ f(U, { children: [
-      /* @__PURE__ */ d(
-        G,
-        {
-          option: Y,
-          selected: t.length === n.length,
-          onChange: re,
-          multiSelect: r,
-          isPartiallyChecked: !!t.length
-        }
-      ),
-      /* @__PURE__ */ d("div", { className: o("divider") }),
-      " "
-    ] }),
-    n.map((e, s) => /* @__PURE__ */ d(
-      G,
-      {
-        ...ie({
-          item: e,
-          index: s
-        }),
-        multiSelect: r,
-        selected: r ? I == null ? void 0 : I.some((i) => i.value === e.value) : e.value === ((w == null ? void 0 : w.value) ?? w),
-        option: { title: e.label, ...e },
-        highlightHovered: V === s && ee !== g.ON_CLICK,
-        render: x,
-        onChange: e.disabled ? null : () => L(e),
-        onMouseEnter: () => E(s)
-      },
-      e.value
-    )),
-    H && /* @__PURE__ */ f(U, { children: [
-      /* @__PURE__ */ d("div", { className: o("divider") }),
-      H
-    ] })
-  ] });
-  return /* @__PURE__ */ f("div", { ref: M, className: o("container", Q), title: p, children: [
-    O && /* @__PURE__ */ d(Ce, { ...ae(), children: O }),
-    /* @__PURE__ */ f(
-      "button",
-      {
-        disabled: l,
-        ...se({
-          className: o("dropdown", A, X, {
-            "transparent-background": N,
-            opened: _,
-            disabled: l,
-            error: v,
-            touched: b,
-            "mobile-disabled": K
-          }),
-          onClick: le,
-          onKeyDown: oe,
-          ref: W.setReference
-        }),
-        type: "button",
-        children: [
-          C && /* @__PURE__ */ d("span", { className: o("icon"), children: C }),
-          /* @__PURE__ */ d(
-            "span",
-            {
-              className: o("value", {
-                placeholder: k === m
-              }),
-              children: T ? T(k) : k
-            }
-          ),
-          /* @__PURE__ */ d(me, { className: o("arrow"), tabIndex: -1, children: /* @__PURE__ */ d(be, {}) })
-        ]
-      }
-    ),
-    _ && /* @__PURE__ */ d(
-      "div",
-      {
-        style: te,
-        className: o("select-list", { opened: _, "limited-width": Z }),
-        ...de({
-          onKeyDown: ce,
-          ref: W.setFloating
-        }),
-        children: B ? $() : /* @__PURE__ */ d(ye, { autoHeight: !0, autoHeightMax: 216, hideTracksWhenNotNeeded: !0, children: $() })
-      }
-    )
-  ] });
-};
-export {
-  at as D
-};