@reportportal/ui-kit 0.0.1-alpha.8 → 0.0.1-alpha.80

package/dist/toggle.js

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

package/dist/tooltip.js

@@ -0,0 +1,101 @@
+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 = {
+  "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,
+  contentClassName: x,
+  dynamicWidth: T,
+  width: _,
+  minWidth: g = 120,
+  safeZone: E = 4,
+  zIndex: A = 9,
+  placement: N = "bottom",
+  arrowColor: b = "rgba(34, 34, 34, 0.91)",
+  dataAutomationId: I,
+  mainAxis: S = !0,
+  children: W,
+  portalRoot: s,
+  isFloating: y = !0
+}) => {
+  const [i, l] = H(!1), r = d(null), t = d(), { refs: c, floatingStyles: F, context: L } = P({
+    open: i,
+    placement: N,
+    middleware: [
+      j({
+        mainAxis: E + f
+      }),
+      y && k({
+        mainAxis: S,
+        fallbackAxisSideDirection: "start",
+        fallbackPlacements: B
+      }),
+      $({
+        element: r
+      })
+    ],
+    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), Z);
+  }, m = () => /* @__PURE__ */ p(
+    "div",
+    {
+      ref: c.setFloating,
+      style: {
+        ...F,
+        ...e,
+        minWidth: g,
+        zIndex: A
+      },
+      "data-automation-id": I,
+      className: n(w),
+      children: [
+        /* @__PURE__ */ o(
+          U,
+          {
+            ref: r,
+            context: L,
+            width: z,
+            height: f,
+            fill: b
+          }
+        ),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: n("tooltip-content", x),
+            style: {
+              maxWidth: `${O}px`
+            },
+            children: u
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ p(D, { children: [
+    /* @__PURE__ */ o(
+      "div",
+      {
+        ref: c.setReference,
+        className: n("tooltip-wrapper", h),
+        onMouseDown: a,
+        onMouseEnter: v,
+        onMouseLeave: a,
+        children: W
+      }
+    ),
+    i && (s ? R(m(), s) : m())
+  ] });
+};
+export {
+  tt as Tooltip
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reportportal/ui-kit",
-  "version": "0.0.1-alpha.8",
+  "version": "0.0.1-alpha.80",
   "description": "The UI-kit library for ReportPortal Design System.",
   "type": "module",
   "scripts": {
@@ -9,8 +9,10 @@
     "build:storybook": "storybook build",
     "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
     "format": "npm run lint -- --fix",
-    "test": "exit 0",
-    "test:coverage": "exit 0",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:ci": "vitest run",
+    "test:ui": "vitest --ui",
     "prepare": "husky install"
   },
   "files": [
@@ -24,27 +26,36 @@
     "react-dom": "17.x-18.x"
   },
   "dependencies": {
+    "@floating-ui/react": "^0.26.16",
     "@floating-ui/react-dom": "^2.0.1",
     "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.6.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.2.0",
-    "@storybook/addon-interactions": "^7.2.0",
-    "@storybook/addon-links": "^7.2.0",
-    "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/blocks": "^7.2.0",
-    "@storybook/react": "^7.2.0",
-    "@storybook/react-vite": "^7.2.0",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-links": "^8.6.14",
+    "@storybook/addon-onboarding": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-vite": "^8.6.14",
+    "@storybook/testing-library": "^0.2.2",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/node": "^20.4.5",
-    "@types/react": "^18.2.20",
+    "@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",
+    "@vitest/coverage-v8": "^2.1.8",
+    "@vitest/ui": "^2.1.8",
+    "date-fns": "^3.6.0",
     "eslint": "^8.46.0",
     "eslint-config-airbnb-typescript": "^15.0.0",
     "eslint-config-prettier": "^8.10.0",
@@ -54,19 +65,21 @@
     "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-storybook": "^0.8.0",
     "husky": "^8.0.3",
+    "jsdom": "^25.0.1",
     "lint-staged": "^13.2.3",
     "prettier": "^3.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "sass": "^1.64.1",
-    "storybook": "^7.2.2",
+    "storybook": "^8.6.14",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5",
+    "vite": "^4.5.14",
     "vite-plugin-dts": "^3.4.0",
     "vite-plugin-svgr": "^3.2.0",
-    "vite-tsconfig-paths": "^4.2.0"
+    "vite-tsconfig-paths": "^4.2.0",
+    "vitest": "^2.1.8"
   },
   "repository": {
     "type": "git",

package/dist/baseIconButton-7bc53dec.js

@@ -1,25 +0,0 @@
-import { jsx as a } from "react/jsx-runtime";
-import { c } from "./bind-06a7ff84.js";
-const b = "_disabled_p6ked_12", i = {
-  "base-icon-button": "_base-icon-button_p6ked_1",
-  disabled: b
-}, d = c.bind(i), l = ({
-  children: s,
-  className: o,
-  disabled: t = !1,
-  onClick: n,
-  ...e
-}) => /* @__PURE__ */ a(
-  "button",
-  {
-    className: d("base-icon-button", o, { disabled: t }),
-    type: "button",
-    disabled: t,
-    onClick: n,
-    ...e,
-    children: s
-  }
-);
-export {
-  l as B
-};

package/dist/button-497b4d19.js

@@ -1,62 +0,0 @@
-import { jsxs as z, jsx as p } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
-import { c as l } from "./bind-06a7ff84.js";
-const u = "_button_3xwzb_1", f = "_primary_3xwzb_19", g = "_disabled_3xwzb_24", y = "_ghost_3xwzb_36", N = "_danger_3xwzb_54", B = "_text_3xwzb_70", $ = "_icon_3xwzb_116", j = {
-  button: u,
-  primary: f,
-  disabled: g,
-  ghost: y,
-  danger: N,
-  text: B,
-  "width-wide-content": "_width-wide-content_3xwzb_106",
-  "width-parent": "_width-parent_3xwzb_111",
-  icon: $,
-  "icon-start": "_icon-start_3xwzb_122",
-  "icon-end": "_icon-end_3xwzb_126"
-}, c = l.bind(j), q = h(
-  ({
-    variant: t = "primary",
-    icon: e,
-    iconPlace: n = "start",
-    adjustWidthOn: o = "content",
-    type: r = "button",
-    children: i,
-    disabled: s = !1,
-    onClick: a,
-    title: b,
-    className: w,
-    ...x
-  }, d) => {
-    const m = c("button", t, w, {
-      disabled: s,
-      [`width-${o}`]: o
-    }), _ = t === "text" && e;
-    return /* @__PURE__ */ z(
-      "button",
-      {
-        ref: d,
-        type: r,
-        disabled: s,
-        className: m,
-        onClick: a,
-        title: b,
-        ...x,
-        children: [
-          _ && /* @__PURE__ */ p(
-            "i",
-            {
-              className: c("icon", {
-                [`icon-${n}`]: n
-              }),
-              children: _
-            }
-          ),
-          i
-        ]
-      }
-    );
-  }
-);
-export {
-  q as B
-};

package/dist/checkbox-1e21cf3e.js

@@ -1,68 +0,0 @@
-import { jsxs as u, jsx as t } from "react/jsx-runtime";
-import { c as x } from "./bind-06a7ff84.js";
-import { useRef as d } from "react";
-import { K as _ } from "./keyCodes-f63c0e11.js";
-const m = "_checkbox_l76v2_1", f = "_disabled_l76v2_11", y = "_input_l76v2_16", C = "_control_l76v2_23", E = "_children_l76v2_77", D = {
-  checkbox: m,
-  disabled: f,
-  input: y,
-  control: C,
-  children: E
-}, e = x.bind(D), j = ({
-  children: l,
-  disabled: c = !1,
-  onChange: p,
-  className: b,
-  value: s,
-  ...h
-}) => {
-  const o = d(null), k = (n) => {
-    var a, i;
-    const { keyCode: r } = n;
-    if (r === _.SPACE_KEY_CODE) {
-      n.preventDefault(), (a = o.current) == null || a.click();
-      return;
-    }
-    r === _.ENTER_KEY_CODE && (n.preventDefault(), (i = o.current) == null || i.click());
-  };
-  return /* @__PURE__ */ u(
-    "label",
-    {
-      id: "rp-ui-kit-checkbox-label",
-      className: e("checkbox", b, {
-        disabled: c
-      }),
-      children: [
-        /* @__PURE__ */ t(
-          "input",
-          {
-            ref: o,
-            tabIndex: 0,
-            type: "checkbox",
-            onKeyDown: k,
-            className: e("input"),
-            disabled: c,
-            onChange: p,
-            checked: s,
-            ...h
-          }
-        ),
-        /* @__PURE__ */ t(
-          "span",
-          {
-            "aria-labelledby": "rp-ui-kit-checkbox-label",
-            role: "checkbox",
-            "aria-checked": s,
-            className: e("control", {
-              disabled: c
-            })
-          }
-        ),
-        l && /* @__PURE__ */ t("span", { className: e("children", { disabled: c }), children: l })
-      ]
-    }
-  );
-};
-export {
-  j as C
-};

package/dist/dropdown-e07f2a71.js

@@ -1,212 +0,0 @@
-import { jsx as a, jsxs as L } from "react/jsx-runtime";
-import * as R from "react";
-import { forwardRef as F, useState as Y, useRef as B } from "react";
-import { c as A } from "./bind-06a7ff84.js";
-import { useFloating as ee, offset as te, flip as ne } from "@floating-ui/react-dom";
-import { useSelect as x } from "downshift";
-import { Scrollbars as de } from "rc-scrollbars";
-import { u as oe } from "./useOnClickOutside-c332f7d3.js";
-import { K as f } from "./keyCodes-f63c0e11.js";
-import { B as se } from "./baseIconButton-7bc53dec.js";
-const ae = (t) => /* @__PURE__ */ R.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ R.createElement("path", { d: "M14.2174 5.82426C14.3736 5.66805 14.3736 5.41479 14.2174 5.25858L14.0759 5.11716C13.9197 4.96095 13.6665 4.96095 13.5103 5.11716L8.16726 10.4602L2.82426 5.11716C2.66805 4.96095 2.41479 4.96095 2.25858 5.11716L2.11716 5.25858C1.96095 5.41479 1.96095 5.66805 2.11716 5.82426L7.89176 11.5989C8.04797 11.7551 8.30124 11.7551 8.45745 11.5989L8.88171 11.1746L8.87436 11.1673L14.2174 5.82426Z", fill: "#A2AAB5" })), le = "_disabled_nx3fh_13", re = "_hidden_nx3fh_17", ie = "_selected_nx3fh_23", ce = "_hover_nx3fh_26", _e = {
-  "dropdown-option": "_dropdown-option_nx3fh_1",
-  disabled: le,
-  hidden: re,
-  selected: ie,
-  hover: ce,
-  "single-option": "_single-option_nx3fh_39",
-  "sub-option": "_sub-option_nx3fh_45"
-}, P = A.bind(_e), he = F(
-  (t, n) => {
-    const {
-      option: { value: s, disabled: i, hidden: O, label: l, title: d, groupRef: E },
-      selected: D,
-      onChange: p,
-      render: g,
-      highlightHovered: b,
-      onMouseEnter: w
-    } = t, N = () => {
-      p && p(s);
-    };
-    return /* @__PURE__ */ a(
-      "div",
-      {
-        className: P("dropdown-option", {
-          selected: D,
-          disabled: i,
-          hidden: O,
-          hover: b
-        }),
-        title: i && d || void 0,
-        onClick: N,
-        ref: n,
-        onMouseEnter: w,
-        children: /* @__PURE__ */ a("div", { className: P("single-option", { "sub-option": !!E }), children: g ? g(t) : l })
-      }
-    );
-  }
-), fe = [
-  f.ENTER_KEY_CODE,
-  f.SPACE_KEY_CODE,
-  f.ARROW_DOWN_KEY_CODE
-], ge = [f.ESCAPE_KEY_CODE, f.TAB_KEY_CODE];
-var h = /* @__PURE__ */ ((t) => (t.ON_KEY_DOWN = "onKeyDown", t.ON_CLICK = "onClick", t))(h || {});
-const pe = (t, n) => t.map(({ value: s }) => s).indexOf(n), we = (t, n) => (t % n + n) % n, v = (t, n = 0, s = 1) => {
-  if (!t[n].disabled)
-    return n;
-  const i = t.length;
-  return v(
-    t,
-    we(n + s, i),
-    s
-  );
-}, me = (t, n) => v(t, n), ue = (t, n) => v(t, n, -1), Ce = "_container_3wi7d_1", Oe = "_icon_3wi7d_7", Ee = "_arrow_3wi7d_13", De = "_dropdown_3wi7d_19", be = "_disabled_3wi7d_36", Ne = "_value_3wi7d_43", xe = "_error_3wi7d_46", ve = "_touched_3wi7d_46", Ke = "_opened_3wi7d_50", ye = "_placeholder_3wi7d_72", Ie = "_ghost_3wi7d_108", ke = {
-  container: Ce,
-  icon: Oe,
-  arrow: Ee,
-  dropdown: De,
-  "transparent-background": "_transparent-background_3wi7d_33",
-  disabled: be,
-  value: Ne,
-  error: xe,
-  touched: ve,
-  opened: Ke,
-  placeholder: ye,
-  "mobile-disabled": "_mobile-disabled_3wi7d_87",
-  "select-list": "_select-list_3wi7d_92",
-  ghost: Ie
-}, _ = A.bind(ke), $e = ({
-  value: t = "",
-  options: n = [],
-  disabled: s = !1,
-  error: i,
-  onChange: O,
-  onFocus: l,
-  onBlur: d,
-  mobileDisabled: E,
-  title: D,
-  touched: p = !1,
-  icon: g,
-  variant: b,
-  placeholder: w = "",
-  renderOption: N,
-  transparentBackground: T = !1,
-  className: W,
-  toggleButtonClassName: H
-}) => {
-  const [r, c] = Y(!1), K = B(null), [M, m] = Y(null), { refs: y, floatingStyles: $ } = ee({
-    middleware: [
-      te(5),
-      ne({
-        fallbackPlacements: ["bottom", "top"]
-      })
-    ]
-  });
-  oe(K, () => {
-    r && (c(!1), d == null || d());
-  });
-  const I = (e) => {
-    e.disabled || (O(e.value), c((o) => !o));
-  }, j = () => n.find(({ value: e }) => e === t), k = pe(n, t), {
-    getToggleButtonProps: V,
-    getMenuProps: U,
-    getItemProps: Z,
-    setHighlightedIndex: u,
-    highlightedIndex: S,
-    selectedItem: C
-  } = x({
-    items: n,
-    itemToString: (e) => (e != null && e.label ? String(e.label) : w) || "",
-    selectedItem: j(),
-    isOpen: r,
-    circularNavigation: !0,
-    defaultHighlightedIndex: k,
-    onHighlightedIndexChange: (e) => {
-      switch (e.type) {
-        case x.stateChangeTypes.MenuKeyDownArrowUp:
-          return m(h.ON_KEY_DOWN), u(ue(n, e.highlightedIndex)), e;
-        case x.stateChangeTypes.MenuKeyDownArrowDown:
-          return m(h.ON_KEY_DOWN), u(me(n, e.highlightedIndex)), e;
-        default:
-          return e;
-      }
-    }
-  }), q = () => {
-    s || (c((e) => !e), r ? d == null || d() : l == null || l(), m(h.ON_CLICK));
-  }, z = () => {
-    if (!t && t !== !1)
-      return w;
-    let e = t;
-    return n.forEach((o) => {
-      o.value === t && (e = o.label);
-    }), e;
-  }, G = (e) => {
-    const { keyCode: o } = e;
-    fe.includes(o) && !r && (e.preventDefault(), u(k), c(!0), l == null || l(), m(h.ON_KEY_DOWN));
-  }, J = (e) => {
-    const { keyCode: o } = e;
-    if (o === f.ENTER_KEY_CODE) {
-      const X = n[S];
-      I(X), c(!1), d == null || d();
-      return;
-    }
-    ge.includes(o) && (e.stopPropagation(), c(!1), d == null || d());
-  }, Q = () => n.map((e, o) => /* @__PURE__ */ a(
-    he,
-    {
-      ...Z({
-        item: e,
-        index: o
-      }),
-      selected: e.value === ((C == null ? void 0 : C.value) ?? C),
-      option: e,
-      highlightHovered: S === o && M !== h.ON_CLICK,
-      render: N,
-      onChange: e.disabled ? null : () => I(e),
-      onMouseEnter: () => u(o)
-    },
-    e.value
-  ));
-  return /* @__PURE__ */ L("div", { ref: K, className: _("container", W), title: D, children: [
-    /* @__PURE__ */ L(
-      "button",
-      {
-        disabled: s,
-        ...V({
-          className: _("dropdown", b, H, {
-            "transparent-background": T,
-            opened: r,
-            disabled: s,
-            error: i,
-            touched: p,
-            "mobile-disabled": E
-          }),
-          onClick: q,
-          onKeyDown: G,
-          ref: y.setReference
-        }),
-        children: [
-          g && /* @__PURE__ */ a("span", { className: _("icon"), children: g }),
-          /* @__PURE__ */ a("span", { className: _("value", { placeholder: !t }), children: z() }),
-          /* @__PURE__ */ a(se, { className: _("arrow"), tabIndex: -1, children: /* @__PURE__ */ a(ae, {}) })
-        ]
-      }
-    ),
-    r && /* @__PURE__ */ a(
-      "div",
-      {
-        style: $,
-        className: _("select-list", { opened: r }),
-        ...U({
-          onKeyDown: J,
-          ref: y.setFloating
-        }),
-        children: /* @__PURE__ */ a(de, { autoHeight: !0, autoHeightMax: 216, hideTracksWhenNotNeeded: !0, children: Q() })
-      }
-    )
-  ] });
-};
-export {
-  $e as D,
-  ae as S
-};