@reportportal/ui-kit 0.0.1-alpha.13 → 0.0.1-alpha.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reportportal/ui-kit",
-  "version": "0.0.1-alpha.13",
+  "version": "0.0.1-alpha.15",
   "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/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
-};

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/toggle-707ecb74.js

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