@reportportal/ui-kit 0.0.1-alpha.12 → 0.0.1-alpha.14

package/dist/table-83e050dc.js

@@ -0,0 +1,147 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import * as i from "react";
+import { useState as j, useMemo as F } from "react";
+import { c as G } from "./bind-06a7ff84.js";
+import "./baseIconButton-7bc53dec.js";
+import { C } from "./checkbox-6777be17.js";
+const J = (a) => /* @__PURE__ */ i.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a }, /* @__PURE__ */ i.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.85355 12.8536C7.65829 13.0488 7.34171 13.0488 7.14645 12.8536L4.14645 9.85355C3.95118 9.65829 3.95118 9.34171 4.14645 9.14645C4.34171 8.95118 4.65829 8.95118 4.85355 9.14645L7 11.2929L7 3.5C7 3.22386 7.22386 3 7.5 3C7.77614 3 8 3.22386 8 3.5L8 11.2929L10.1464 9.14645C10.3417 8.95119 10.6583 8.95118 10.8536 9.14645C11.0488 9.34171 11.0488 9.65829 10.8536 9.85355L7.85355 12.8536Z", fill: "#A2AAB5" })), N = (a) => /* @__PURE__ */ i.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a }, /* @__PURE__ */ i.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.14645 3.14645C7.34171 2.95118 7.65829 2.95118 7.85355 3.14645L10.8536 6.14645C11.0488 6.34171 11.0488 6.65829 10.8536 6.85355C10.6583 7.04882 10.3417 7.04882 10.1464 6.85355L8 4.70711V12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 4.70711L4.85355 6.85355C4.65829 7.04882 4.34171 7.04882 4.14645 6.85355C3.95118 6.65829 3.95118 6.34171 4.14645 6.14645L7.14645 3.14645Z", fill: "#A2AAB5" })), K = "_table_xqjqb_5", O = "_label_xqjqb_88", P = {
+  table: K,
+  "table-header": "_table-header_xqjqb_10",
+  "table-row": "_table-row_xqjqb_17",
+  "table-row-content": "_table-row-content_xqjqb_22",
+  "size-small": "_size-small_xqjqb_32",
+  "size-large": "_size-large_xqjqb_35",
+  "table-body": "_table-body_xqjqb_39",
+  "table-header-cell": "_table-header-cell_xqjqb_46",
+  "table-cell": "_table-cell_xqjqb_46",
+  "action-menu-cell": "_action-menu-cell_xqjqb_51",
+  "checkbox-cell": "_checkbox-cell_xqjqb_61",
+  "primary-cell": "_primary-cell_xqjqb_72",
+  label: O,
+  "sortable-cell": "_sortable-cell_xqjqb_92",
+  "align-right": "_align-right_xqjqb_95",
+  "align-center": "_align-center_xqjqb_101"
+};
+var q = /* @__PURE__ */ ((a) => (a.ASC = "asc", a.DESC = "desc", a))(q || {});
+const Q = (a) => a.map((s) => s.key), l = G.bind(P), le = ({
+  data: a,
+  primaryColumn: s,
+  fixedColumns: d,
+  rowActionMenu: b,
+  className: f = "",
+  rowClassName: L = "",
+  headerClassName: m = "",
+  selectable: x = !1,
+  selectedRowIds: h = [],
+  sortingDirection: y = q.ASC,
+  sortingColumn: r = s,
+  sortableColumns: o = Q([s, ...d]),
+  onChangeSorting: A = () => {
+  },
+  onToggleRowSelection: S = () => {
+  },
+  onToggleAllRowsSelection: u = () => {
+  }
+}) => {
+  const [z, p] = j(null), [E, k] = j(null), w = F(() => [{ ...s, primary: !0 }, ...d], [s, d]), M = (e) => {
+    o.includes(e) && A({ key: e, direction: y });
+  }, g = (e) => ({
+    width: e.width,
+    textAlign: e.align
+  }), R = (e) => {
+    p(e);
+  }, B = () => {
+    p(null);
+  }, H = (e) => {
+    k(e);
+  }, T = () => {
+    k(null);
+  }, Z = (e) => {
+    S(e);
+  }, $ = () => {
+    u();
+  }, U = a.every((e) => h.includes(e.id)), _ = a.some((e) => h.includes(e.id)), V = (e) => {
+    var c;
+    return `size-${((c = e.rowConfigs) == null ? void 0 : c.size) ?? "default"}`;
+  }, D = (e) => {
+    if (o.includes(e))
+      return (r == null ? void 0 : r.key) === e ? y === q.ASC ? /* @__PURE__ */ t(N, {}) : /* @__PURE__ */ t(J, {}) : /* @__PURE__ */ t(N, {});
+  };
+  return /* @__PURE__ */ n("div", { className: l("table", f), children: [
+    /* @__PURE__ */ n("div", { className: l("table-header", m), children: [
+      x && /* @__PURE__ */ t("div", { className: l("table-header-cell", "checkbox-cell"), children: _ && /* @__PURE__ */ t(
+        C,
+        {
+          value: U,
+          partiallyChecked: _,
+          onChange: $,
+          className: l("checkbox-cell")
+        }
+      ) }),
+      w.map((e) => /* @__PURE__ */ t(
+        "button",
+        {
+          className: l("table-header-cell", {
+            [`align-${e.align}`]: "align" in e,
+            "primary-cell": "primary" in e && e.primary,
+            "sortable-cell": o.includes(e.key)
+          }),
+          style: g(e),
+          children: /* @__PURE__ */ n(
+            "div",
+            {
+              className: l("label"),
+              onClick: () => M(e.key),
+              onMouseEnter: () => R(e.key),
+              onMouseLeave: B,
+              children: [
+                /* @__PURE__ */ t("span", { children: e.header }),
+                (z === e.key || (r == null ? void 0 : r.key) === e.key) && D(e.key)
+              ]
+            }
+          )
+        },
+        e.key
+      )),
+      b && /* @__PURE__ */ t("div", { className: l("table-header-cell", "action-menu-cell") })
+    ] }),
+    /* @__PURE__ */ t("div", { className: l("table-body"), children: a.map((e, v) => /* @__PURE__ */ n(
+      "div",
+      {
+        className: l("table-row", V(e), L),
+        onMouseEnter: () => H(v),
+        onMouseLeave: T,
+        children: [
+          x && /* @__PURE__ */ t("div", { className: l("table-cell", "checkbox-cell"), children: (_ || E === v) && /* @__PURE__ */ t(
+            C,
+            {
+              value: h.includes(e.id),
+              onChange: () => Z(e.id),
+              className: l("checkbox-cell")
+            }
+          ) }),
+          /* @__PURE__ */ n("div", { className: l("table-row-content"), children: [
+            w.map((c) => /* @__PURE__ */ t(
+              "div",
+              {
+                className: l("table-cell", {
+                  "primary-cell": "primary" in c && c.primary
+                }),
+                style: g(c),
+                children: e[c.key].component || e[c.key].content || e[c.key]
+              },
+              c.key
+            )),
+            b && /* @__PURE__ */ t("div", { className: l("table-cell", "action-menu-cell"), children: b })
+          ] })
+        ]
+      },
+      e.id
+    )) })
+  ] });
+};
+export {
+  J as S,
+  le as T,
+  N as a
+};

package/dist/table.js

@@ -1,4 +1,4 @@
-import { T as r } from "./table-231fd19c.js";
+import { T as r } from "./table-83e050dc.js";
 import "react/jsx-runtime";
 import "react";
 import "./bind-06a7ff84.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reportportal/ui-kit",
-  "version": "0.0.1-alpha.12",
+  "version": "0.0.1-alpha.14",
   "description": "The UI-kit library for ReportPortal Design System.",
   "type": "module",
   "scripts": {
@@ -29,7 +29,8 @@
     "classnames": "^2.3.2",
     "downshift": "^6.1.12",
     "framer-motion": "^10.15.2",
-    "rc-scrollbars": "^1.1.6"
+    "rc-scrollbars": "^1.1.6",
+    "react-datepicker": "^7.3.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.2.0",
@@ -42,10 +43,12 @@
     "@storybook/testing-library": "^0.2.0",
     "@types/node": "^20.4.5",
     "@types/react": "^18.3.3",
+    "@types/react-datepicker": "^6.2.0",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react": "^4.0.3",
+    "date-fns": "^3.6.0",
     "eslint": "^8.46.0",
     "eslint-config-airbnb-typescript": "^15.0.0",
     "eslint-config-prettier": "^8.10.0",

package/dist/index-bb9b62ef.js

@@ -1,131 +0,0 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import * as y from "react";
-import { useState as w, useEffect as g, useRef as j } from "react";
-import { Scrollbars as B } from "rc-scrollbars";
-import { AnimatePresence as D, motion as I } from "framer-motion";
-import { c as m } from "./bind-06a7ff84.js";
-import { u as K } from "./useOnClickOutside-c332f7d3.js";
-import { K as F } from "./keyCodes-f63c0e11.js";
-import { B as C } from "./button-7fb84fde.js";
-import { B as P } from "./baseIconButton-7bc53dec.js";
-const G = (t) => /* @__PURE__ */ y.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ y.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.732179 15.2698C0.330639 14.8683 0.33064 14.2172 0.73218 13.8157L6.54858 7.99928L0.73218 2.18288C0.33064 1.78134 0.330639 1.13031 0.732179 0.728774C1.13372 0.327235 1.78474 0.327235 2.18628 0.728774L8.00269 6.54518L13.8191 0.728767C14.2206 0.327229 14.8717 0.327228 15.2732 0.728767C15.6747 1.13031 15.6747 1.78133 15.2732 2.18287L9.45679 7.99928L15.2732 13.8157C15.6747 14.2172 15.6747 14.8683 15.2732 15.2698C14.8717 15.6713 14.2206 15.6713 13.8191 15.2698L8.00269 9.45338L2.18628 15.2698C1.78474 15.6713 1.13372 15.6713 0.732179 15.2698Z", fill: "#A2AAB5" })), X = () => {
-  const [t, a] = w({ width: 0, height: 0 });
-  return g(() => {
-    const o = () => {
-      a({
-        width: window.innerWidth,
-        height: window.innerHeight
-      });
-    };
-    return window.addEventListener("resize", o), o(), () => window.removeEventListener("resize", o);
-  }, []), t;
-}, Y = {
-  "modal-content": "_modal-content_ojybs_1"
-}, Z = m.bind(Y), b = ({ children: t }) => /* @__PURE__ */ e("div", { className: Z("modal-content"), children: t }), q = {
-  "buttons-block": "_buttons-block_1dgm4_1",
-  "button-container": "_button-container_1dgm4_5",
-  "modal-footer": "_modal-footer_1dgm4_14",
-  "with-extra-node": "_with-extra-node_1dgm4_21",
-  "size-small": "_size-small_1dgm4_25"
-}, c = m.bind(q), J = ({
-  footerNode: t,
-  closeHandler: a,
-  okButton: o,
-  cancelButton: l,
-  size: s
-}) => /* @__PURE__ */ i("div", { className: c("modal-footer", { "with-extra-node": t, [`size-${s}`]: s }), children: [
-  t && t,
-  /* @__PURE__ */ i("div", { className: c("buttons-block"), children: [
-    l && /* @__PURE__ */ e("div", { className: c("button-container"), children: /* @__PURE__ */ e(
-      C,
-      {
-        variant: "ghost",
-        adjustWidthOn: s === "small" ? "parent" : "content",
-        onClick: a,
-        ...l
-      }
-    ) }),
-    o && /* @__PURE__ */ e("div", { className: c("button-container"), children: /* @__PURE__ */ e(C, { adjustWidthOn: s === "small" ? "parent" : "content", ...o }) })
-  ] })
-] }), Q = {
-  "modal-header": "_modal-header_11gdx_1",
-  "modal-header-content": "_modal-header-content_11gdx_11",
-  "modal-title": "_modal-title_11gdx_20",
-  "close-modal-icon": "_close-modal-icon_11gdx_28"
-}, r = m.bind(Q), U = ({ title: t, onClose: a, headerNode: o }) => /* @__PURE__ */ i("div", { className: r("modal-header"), children: [
-  /* @__PURE__ */ i("div", { className: r("modal-header-content"), children: [
-    t && /* @__PURE__ */ e("span", { className: r("modal-title"), children: t }),
-    o && o
-  ] }),
-  /* @__PURE__ */ e(P, { className: r("close-modal-icon"), onClick: a, children: /* @__PURE__ */ e(G, {}) })
-] }), V = "_modal_1kzzv_1", ee = {
-  modal: V,
-  "overlay-default": "_overlay-default_1kzzv_11",
-  "overlay-light-cyan": "_overlay-light-cyan_1kzzv_15",
-  "scrolling-content": "_scrolling-content_1kzzv_19",
-  "modal-window": "_modal-window_1kzzv_25",
-  "size-default": "_size-default_1kzzv_42",
-  "size-small": "_size-small_1kzzv_54",
-  "size-large": "_size-large_1kzzv_66"
-}, k = m.bind(ee), te = 0.9, oe = 176, _e = ({
-  title: t,
-  headerNode: a,
-  children: o,
-  footerNode: l,
-  okButton: s,
-  cancelButton: E,
-  className: M,
-  size: _ = "default",
-  onClose: H = () => {
-  },
-  overlay: v = "default",
-  zIndex: L = 2,
-  allowCloseOutside: N = !0,
-  scrollable: A = !1
-}) => {
-  const [O, f] = w(!1), [R, S] = w(0), n = j(null), z = X(), p = z.height, $ = p * te, h = (p - R) / 2, T = $ - oe, d = () => {
-    f(!1);
-  }, x = (u) => {
-    const { keyCode: W } = u;
-    W === F.ESCAPE_KEY_CODE && d();
-  };
-  return g(() => {
-    if (n && n.current) {
-      const { clientHeight: u } = n.current;
-      S(u);
-    }
-  }, [o, z]), g(() => (f(!0), n && n.current && n.current.focus(), document.addEventListener("keydown", x, !1), () => document.removeEventListener("keydown", x, !1)), []), K(n, N ? d : void 0), /* @__PURE__ */ e(D, { onExitComplete: H, children: O && /* @__PURE__ */ e("div", { className: k("modal", { [`overlay-${v}`]: v }), style: { zIndex: L }, children: /* @__PURE__ */ i(
-    I.div,
-    {
-      className: k("modal-window", { [`size-${_}`]: _ }, M),
-      ref: n,
-      tabIndex: 0,
-      initial: { opacity: 0, marginTop: -h },
-      animate: { opacity: 1, marginTop: h },
-      exit: { opacity: 0, marginTop: -h },
-      transition: { duration: 0.3 },
-      children: [
-        /* @__PURE__ */ e(U, { title: t, headerNode: a, onClose: d }),
-        A ? /* @__PURE__ */ e(B, { autoHeight: !0, autoHeightMax: T, hideTracksWhenNotNeeded: !0, children: /* @__PURE__ */ e(b, { children: o }) }) : /* @__PURE__ */ e(b, { children: o }),
-        /* @__PURE__ */ e(
-          J,
-          {
-            size: _,
-            footerNode: l,
-            okButton: s,
-            cancelButton: E,
-            closeHandler: d
-          }
-        )
-      ]
-    },
-    "modal-window"
-  ) }) });
-};
-export {
-  _e as M,
-  G as S,
-  b as a,
-  U as b,
-  J as c
-};

package/dist/table-231fd19c.js

@@ -1,138 +0,0 @@
-import { jsxs as n, jsx as s } from "react/jsx-runtime";
-import * as i from "react";
-import { useState as j, useMemo as F } from "react";
-import { c as G } from "./bind-06a7ff84.js";
-import "./baseIconButton-7bc53dec.js";
-import { C as m } from "./checkbox-6777be17.js";
-const J = (l) => /* @__PURE__ */ i.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ i.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.85355 12.8536C7.65829 13.0488 7.34171 13.0488 7.14645 12.8536L4.14645 9.85355C3.95118 9.65829 3.95118 9.34171 4.14645 9.14645C4.34171 8.95118 4.65829 8.95118 4.85355 9.14645L7 11.2929L7 3.5C7 3.22386 7.22386 3 7.5 3C7.77614 3 8 3.22386 8 3.5L8 11.2929L10.1464 9.14645C10.3417 8.95119 10.6583 8.95118 10.8536 9.14645C11.0488 9.34171 11.0488 9.65829 10.8536 9.85355L7.85355 12.8536Z", fill: "#A2AAB5" })), L = (l) => /* @__PURE__ */ i.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ i.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.14645 3.14645C7.34171 2.95118 7.65829 2.95118 7.85355 3.14645L10.8536 6.14645C11.0488 6.34171 11.0488 6.65829 10.8536 6.85355C10.6583 7.04882 10.3417 7.04882 10.1464 6.85355L8 4.70711V12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 4.70711L4.85355 6.85355C4.65829 7.04882 4.34171 7.04882 4.14645 6.85355C3.95118 6.65829 3.95118 6.34171 4.14645 6.14645L7.14645 3.14645Z", fill: "#A2AAB5" })), K = "_table_asjfg_5", O = {
-  table: K,
-  "table-header": "_table-header_asjfg_10",
-  "table-row": "_table-row_asjfg_17",
-  "table-row-content": "_table-row-content_asjfg_22",
-  "size-small": "_size-small_asjfg_32",
-  "size-large": "_size-large_asjfg_35",
-  "table-body": "_table-body_asjfg_39",
-  "table-header-cell": "_table-header-cell_asjfg_46",
-  "table-cell": "_table-cell_asjfg_46",
-  "action-menu-cell": "_action-menu-cell_asjfg_51",
-  "checkbox-cell": "_checkbox-cell_asjfg_61",
-  "primary-cell": "_primary-cell_asjfg_72",
-  "align-right": "_align-right_asjfg_89",
-  "align-center": "_align-center_asjfg_95"
-};
-var g = /* @__PURE__ */ ((l) => (l.ASC = "asc", l.DESC = "desc", l))(g || {});
-const P = (l) => l.map((c) => c.key), a = G.bind(O), ee = ({
-  data: l,
-  primaryColumn: c,
-  fixedColumns: d,
-  rowActionMenu: h,
-  className: N = "",
-  rowClassName: x = "",
-  headerClassName: A = "",
-  selectable: v = !1,
-  selectedRowIds: o = [],
-  sortingDirection: f = g.ASC,
-  sortingColumn: r = c,
-  sortableColumns: y = P([c, ...d]),
-  onChangeSorting: S = () => {
-  },
-  onToggleRowSelection: u = () => {
-  },
-  onToggleAllRowsSelection: z = () => {
-  }
-}) => {
-  const [E, p] = j(null), [M, k] = j(null), w = F(() => [{ ...c, primary: !0 }, ...d], [c, d]), R = (e) => {
-    y.includes(e) && S({ key: e, direction: f });
-  }, C = (e) => ({
-    width: e.width,
-    textAlign: e.align
-  }), B = (e) => {
-    p(e);
-  }, H = () => {
-    p(null);
-  }, T = (e) => {
-    k(e);
-  }, Z = () => {
-    k(null);
-  }, $ = (e) => {
-    u(e);
-  }, U = () => {
-    z();
-  }, V = l.every((e) => o.includes(e.id)), _ = l.some((e) => o.includes(e.id)), q = (e) => {
-    var t;
-    return `size-${((t = e.rowConfigs) == null ? void 0 : t.size) ?? "default"}`;
-  }, D = (e) => {
-    if (y.includes(e))
-      return (r == null ? void 0 : r.key) === e ? f === g.ASC ? /* @__PURE__ */ s(L, {}) : /* @__PURE__ */ s(J, {}) : /* @__PURE__ */ s(L, {});
-  };
-  return /* @__PURE__ */ n("div", { className: a("table", N), children: [
-    /* @__PURE__ */ n("div", { className: a("table-header", A), children: [
-      v && /* @__PURE__ */ s("div", { className: a("table-header-cell", "checkbox-cell"), children: _ && /* @__PURE__ */ s(
-        m,
-        {
-          value: V,
-          partiallyChecked: _,
-          onChange: U,
-          className: a("checkbox-cell")
-        }
-      ) }),
-      w.map((e) => /* @__PURE__ */ n(
-        "button",
-        {
-          className: a("table-header-cell", {
-            [`align-${e.align}`]: "align" in e,
-            "primary-cell": "primary" in e && e.primary
-          }),
-          style: C(e),
-          onClick: () => R(e.key),
-          onMouseEnter: () => B(e.key),
-          onMouseLeave: H,
-          children: [
-            /* @__PURE__ */ s("span", { children: e.header }),
-            (E === e.key || (r == null ? void 0 : r.key) === e.key) && D(e.key)
-          ]
-        },
-        e.key
-      )),
-      h && /* @__PURE__ */ s("div", { className: a("table-header-cell", "action-menu-cell") })
-    ] }),
-    /* @__PURE__ */ s("div", { className: a("table-body"), children: l.map((e, b) => /* @__PURE__ */ n(
-      "div",
-      {
-        className: a("table-row", q(e), x),
-        onMouseEnter: () => T(b),
-        onMouseLeave: Z,
-        children: [
-          v && /* @__PURE__ */ s("div", { className: a("table-cell", "checkbox-cell"), children: (_ || M === b) && /* @__PURE__ */ s(
-            m,
-            {
-              value: o.includes(e.id),
-              onChange: () => $(e.id),
-              className: a("checkbox-cell")
-            }
-          ) }),
-          /* @__PURE__ */ n("div", { className: a("table-row-content"), children: [
-            w.map((t) => /* @__PURE__ */ s(
-              "div",
-              {
-                className: a("table-cell", "table-cell", {
-                  "primary-cell": "primary" in t && t.primary
-                }),
-                style: C(t),
-                children: e[t.key].component || e[t.key].content || e[t.key]
-              },
-              t.key
-            )),
-            h && /* @__PURE__ */ s("div", { className: a("table-cell", "action-menu-cell"), children: h })
-          ] })
-        ]
-      },
-      e.id
-    )) })
-  ] });
-};
-export {
-  J as S,
-  ee as T,
-  L as a
-};