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

package/dist/components/datePicker/datePicker.d.ts

@@ -0,0 +1,24 @@
+import { FC, ReactNode, ReactElement } from 'react';
+interface DatePickerProps {
+    onChange?: (date: Date | any) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    headerNodes?: ReactNode;
+    disabled?: boolean;
+    shouldCloseOnSelect?: boolean;
+    fixedHeight?: boolean;
+    startDate?: Date | undefined;
+    endDate?: Date | undefined;
+    customClassName?: string;
+    popperClassName?: string;
+    calendarClassName?: string;
+    customTimeInput?: ReactElement;
+    language?: string;
+    yearsOptions?: number[];
+    placeholder?: string;
+    dateFormat?: string;
+    selects?: 'start' | 'end' | 'none';
+    value?: Date | null;
+}
+export declare const DatePicker: FC<DatePickerProps>;
+export {};

package/dist/components/datePicker/header/datePickerHeader.d.ts

@@ -0,0 +1,15 @@
+import { FC, ReactNode } from 'react';
+export interface DatePickerHeaderProps {
+    changeYear: (year: number) => void;
+    changeMonth: (month: number) => void;
+    decreaseMonth: () => void;
+    increaseMonth: () => void;
+    headerNodes: ReactNode;
+    date: Date;
+    prevMonthButtonDisabled: boolean;
+    nextMonthButtonDisabled: boolean;
+    customClassName: string;
+    yearsOptions: number[];
+    locale: string;
+}
+export declare const DatePickerHeader: FC<DatePickerHeaderProps>;

package/dist/components/datePicker/header/index.d.ts

@@ -0,0 +1,3 @@
+import { DatePickerHeader } from './datePickerHeader';
+export { DatePickerHeader };
+export default DatePickerHeader;

package/dist/components/datePicker/index.d.ts

@@ -0,0 +1,3 @@
+import { DatePicker } from './datePicker';
+export { DatePicker };
+export default DatePicker;

package/dist/components/datePicker/utils.d.ts

@@ -0,0 +1,3 @@
+import { Locale } from 'date-fns';
+export declare const registerDatePickerLocale: (language: string, locale: Locale) => void;
+export declare const getYearsFrom: (start: number, amountYearsToGenerate?: number) => number[];

package/dist/components/icons/index.d.ts

@@ -10,3 +10,5 @@ export { default as PrevChapterIcon } from './svg/prevChapter.svg';
 export { default as ArrowDownIcon } from './svg/arrowDown.svg';
 export { default as ArrowUpIcon } from './svg/arrowUp.svg';
 export { default as MeatballMenuIcon } from './svg/meatballMenu.svg';
+export { default as CalendarArrowIcon } from './svg/calendarArrow.svg';
+export { default as CalendarIcon } from './svg/calendar.svg';

package/dist/components/index.d.ts

@@ -14,4 +14,5 @@ export { Tooltip } from './tooltip';
 export { Popover } from './popover';
 export { Pagination } from './pagination';
 export { Table } from './table';
+export { DatePicker } from './datePicker';
 export * from './icons';

package/dist/components/modal/modal.d.ts

@@ -3,9 +3,8 @@ import { ButtonProps } from '../button';
 import { ModalSize } from './modalFooter';
 type ModalOverlay = 'default' | 'light-cyan';
 interface ModalProps {
-    onClose: () => void;
+    onClose?: () => void;
     title?: ReactNode;
-    headerNode?: ReactNode;
     children?: ReactNode;
     footerNode?: ReactNode;
     className?: string;
@@ -16,6 +15,11 @@ interface ModalProps {
     okButton?: ButtonProps;
     cancelButton?: ButtonProps;
     scrollable?: boolean;
+    withoutFooter?: boolean;
+    CustomFooter?: FC<{
+        closeHandler: () => void;
+    }>;
+    description?: ReactNode;
 }
 export declare const Modal: FC<ModalProps>;
 export {};

package/dist/components/modal/modalHeader/modalHeader.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode, FC } from 'react';
 interface ModalHeaderProps {
     title?: ReactNode;
-    headerNode?: ReactNode;
     onClose: () => void;
+    withDescription?: boolean;
 }
 export declare const ModalHeader: FC<ModalHeaderProps>;
 export {};

package/dist/dropdown-bbfa828e.js

@@ -0,0 +1,213 @@
+import { jsx as r, 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 N } from "downshift";
+import { Scrollbars as oe } from "rc-scrollbars";
+import { u as se } from "./useOnClickOutside-c332f7d3.js";
+import { K as h } from "./keyCodes-f63c0e11.js";
+import { B as ae } from "./baseIconButton-7bc53dec.js";
+const re = (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_f4c9h_11", de = "_hidden_f4c9h_15", ce = "_selected_f4c9h_21", ie = "_hover_f4c9h_24", _e = {
+  "dropdown-option": "_dropdown-option_f4c9h_1",
+  disabled: le,
+  hidden: de,
+  selected: ce,
+  hover: ie,
+  "single-option": "_single-option_f4c9h_37",
+  "sub-option": "_sub-option_f4c9h_45"
+}, P = A.bind(_e), he = F(
+  (t, n) => {
+    const {
+      option: { value: a, disabled: f, hidden: w, label: l, title: o, groupRef: y },
+      selected: E,
+      onChange: g,
+      render: p,
+      highlightHovered: b,
+      onMouseEnter: m
+    } = t, D = () => {
+      g && g(a);
+    };
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        className: P("dropdown-option", {
+          selected: E,
+          disabled: f,
+          hidden: w,
+          hover: b
+        }),
+        title: o,
+        onClick: D,
+        ref: n,
+        onMouseEnter: m,
+        children: /* @__PURE__ */ r("div", { className: P("single-option", { "sub-option": !!y }), children: p ? p(t) : l })
+      }
+    );
+  }
+), fe = [
+  h.ENTER_KEY_CODE,
+  h.SPACE_KEY_CODE,
+  h.ARROW_DOWN_KEY_CODE
+], pe = [h.ESCAPE_KEY_CODE, h.TAB_KEY_CODE];
+var _ = /* @__PURE__ */ ((t) => (t.ON_KEY_DOWN = "onKeyDown", t.ON_CLICK = "onClick", t))(_ || {});
+const ge = (t, n) => t.map(({ value: a }) => a).indexOf(n), me = (t, n) => (t % n + n) % n, K = (t, n = 0, a = 1) => {
+  if (!t[n].disabled)
+    return n;
+  const f = t.length;
+  return K(
+    t,
+    me(n + a, f),
+    a
+  );
+}, ue = (t, n) => K(t, n), Ce = (t, n) => K(t, n, -1), Oe = "_container_1o5y6_1", we = "_icon_1o5y6_7", ye = "_arrow_1o5y6_13", Ee = "_dropdown_1o5y6_19", be = "_disabled_1o5y6_36", De = "_value_1o5y6_43", Ne = "_error_1o5y6_46", Ke = "_touched_1o5y6_46", ve = "_opened_1o5y6_50", xe = "_placeholder_1o5y6_72", Ie = "_ghost_1o5y6_115", ke = {
+  container: Oe,
+  icon: we,
+  arrow: ye,
+  dropdown: Ee,
+  "transparent-background": "_transparent-background_1o5y6_33",
+  disabled: be,
+  value: De,
+  error: Ne,
+  touched: Ke,
+  opened: ve,
+  placeholder: xe,
+  "mobile-disabled": "_mobile-disabled_1o5y6_87",
+  "select-list": "_select-list_1o5y6_92",
+  "options-container": "_options-container_1o5y6_110",
+  ghost: Ie
+}, c = A.bind(ke), $e = ({
+  value: t = "",
+  options: n = [],
+  disabled: a = !1,
+  error: f,
+  onChange: w,
+  onFocus: l,
+  onBlur: o,
+  mobileDisabled: y,
+  title: E,
+  touched: g = !1,
+  icon: p,
+  variant: b,
+  placeholder: m = "",
+  renderOption: D,
+  transparentBackground: T = !1,
+  className: W,
+  toggleButtonClassName: H
+}) => {
+  const [d, i] = Y(!1), v = B(null), [M, u] = Y(null), { refs: x, floatingStyles: $ } = ee({
+    middleware: [
+      te(5),
+      ne({
+        fallbackPlacements: ["bottom", "top"]
+      })
+    ]
+  });
+  se(v, () => {
+    d && (i(!1), o == null || o());
+  });
+  const I = (e) => {
+    e.disabled || (w(e.value), i((s) => !s));
+  }, j = () => n.find(({ value: e }) => e === t), k = ge(n, t), {
+    getToggleButtonProps: V,
+    getMenuProps: U,
+    getItemProps: Z,
+    setHighlightedIndex: C,
+    highlightedIndex: S,
+    selectedItem: O
+  } = N({
+    items: n,
+    itemToString: (e) => (e != null && e.label ? String(e.label) : m) || "",
+    selectedItem: j(),
+    isOpen: d,
+    circularNavigation: !0,
+    defaultHighlightedIndex: k,
+    onHighlightedIndexChange: (e) => {
+      switch (e.type) {
+        case N.stateChangeTypes.MenuKeyDownArrowUp:
+          return u(_.ON_KEY_DOWN), C(Ce(n, e.highlightedIndex)), e;
+        case N.stateChangeTypes.MenuKeyDownArrowDown:
+          return u(_.ON_KEY_DOWN), C(ue(n, e.highlightedIndex)), e;
+        default:
+          return e;
+      }
+    }
+  }), q = () => {
+    a || (i((e) => !e), d ? o == null || o() : l == null || l(), u(_.ON_CLICK));
+  }, z = () => {
+    if (!t && t !== !1 && t !== 0)
+      return m;
+    let e = t;
+    return n.forEach((s) => {
+      s.value === t && (e = s.label);
+    }), e;
+  }, G = (e) => {
+    const { keyCode: s } = e;
+    fe.includes(s) && !d && (e.preventDefault(), C(k), i(!0), l == null || l(), u(_.ON_KEY_DOWN));
+  }, J = (e) => {
+    const { keyCode: s } = e;
+    if (s === h.ENTER_KEY_CODE) {
+      const X = n[S];
+      I(X), i(!1), o == null || o();
+      return;
+    }
+    pe.includes(s) && (e.stopPropagation(), i(!1), o == null || o());
+  }, Q = () => /* @__PURE__ */ r("div", { className: c("options-container"), children: n.map((e, s) => /* @__PURE__ */ r(
+    he,
+    {
+      ...Z({
+        item: e,
+        index: s
+      }),
+      selected: e.value === ((O == null ? void 0 : O.value) ?? O),
+      option: { title: e.label, ...e },
+      highlightHovered: S === s && M !== _.ON_CLICK,
+      render: D,
+      onChange: e.disabled ? null : () => I(e),
+      onMouseEnter: () => C(s)
+    },
+    e.value
+  )) });
+  return /* @__PURE__ */ L("div", { ref: v, className: c("container", W), title: E, children: [
+    /* @__PURE__ */ L(
+      "button",
+      {
+        disabled: a,
+        ...V({
+          className: c("dropdown", b, H, {
+            "transparent-background": T,
+            opened: d,
+            disabled: a,
+            error: f,
+            touched: g,
+            "mobile-disabled": y
+          }),
+          onClick: q,
+          onKeyDown: G,
+          ref: x.setReference
+        }),
+        children: [
+          p && /* @__PURE__ */ r("span", { className: c("icon"), children: p }),
+          /* @__PURE__ */ r("span", { className: c("value", { placeholder: !t }), children: z() }),
+          /* @__PURE__ */ r(ae, { className: c("arrow"), tabIndex: -1, children: /* @__PURE__ */ r(re, {}) })
+        ]
+      }
+    ),
+    d && /* @__PURE__ */ r(
+      "div",
+      {
+        style: $,
+        className: c("select-list", { opened: d }),
+        ...U({
+          onKeyDown: J,
+          ref: x.setFloating
+        }),
+        children: /* @__PURE__ */ r(oe, { autoHeight: !0, autoHeightMax: 216, hideTracksWhenNotNeeded: !0, children: Q() })
+      }
+    )
+  ] });
+};
+export {
+  $e as D,
+  re as S
+};

package/dist/dropdown.js

@@ -1,4 +1,4 @@
-import { D as r } from "./dropdown-e07f2a71.js";
+import { D as r } from "./dropdown-bbfa828e.js";
 import "react/jsx-runtime";
 import "react";
 import "./bind-06a7ff84.js";

package/dist/index-0be12e80.js

@@ -0,0 +1,145 @@
+import { jsx as e, jsxs as d, Fragment as B } from "react/jsx-runtime";
+import * as M from "react";
+import { useState as f, useEffect as g, useRef as j } from "react";
+import { Scrollbars as G } from "rc-scrollbars";
+import { AnimatePresence as K, motion as P } from "framer-motion";
+import { c as u } from "./bind-06a7ff84.js";
+import { u as Y } from "./useOnClickOutside-c332f7d3.js";
+import { K as F } from "./keyCodes-f63c0e11.js";
+import { B as L } from "./button-7fb84fde.js";
+import { B as U } from "./baseIconButton-7bc53dec.js";
+const X = (t) => /* @__PURE__ */ M.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ M.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" })), Z = () => {
+  const [t, s] = f({ width: 0, height: 0 });
+  return g(() => {
+    const n = () => {
+      s({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+    return window.addEventListener("resize", n), n(), () => window.removeEventListener("resize", n);
+  }, []), t;
+}, q = {
+  "modal-content": "_modal-content_17fct_1"
+}, J = u.bind(q), A = ({ children: t }) => /* @__PURE__ */ e("div", { className: J("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"
+}, m = u.bind(Q), V = ({
+  footerNode: t,
+  closeHandler: s,
+  okButton: n,
+  cancelButton: r,
+  size: a
+}) => /* @__PURE__ */ d("div", { className: m("modal-footer", { "with-extra-node": t, [`size-${a}`]: a }), children: [
+  t && t,
+  /* @__PURE__ */ d("div", { className: m("buttons-block"), children: [
+    r && /* @__PURE__ */ e("div", { className: m("button-container"), children: /* @__PURE__ */ e(
+      L,
+      {
+        variant: "ghost",
+        adjustWidthOn: a === "small" ? "parent" : "content",
+        onClick: s,
+        ...r
+      }
+    ) }),
+    n && /* @__PURE__ */ e("div", { className: m("button-container"), children: /* @__PURE__ */ e(L, { adjustWidthOn: a === "small" ? "parent" : "content", ...n }) })
+  ] })
+] }), ee = {
+  "modal-header": "_modal-header_1rhdb_1",
+  "width-description": "_width-description_1rhdb_10",
+  "modal-header-content": "_modal-header-content_1rhdb_14",
+  "modal-title": "_modal-title_1rhdb_20",
+  "close-modal-icon": "_close-modal-icon_1rhdb_28"
+}, _ = u.bind(ee), te = ({ title: t, onClose: s, withDescription: n = !1 }) => /* @__PURE__ */ d("div", { className: _("modal-header", { "width-description": n }), children: [
+  /* @__PURE__ */ e("div", { className: _("modal-header-content"), children: t && /* @__PURE__ */ e("span", { className: _("modal-title"), children: t }) }),
+  /* @__PURE__ */ e(U, { className: _("close-modal-icon"), onClick: s, children: /* @__PURE__ */ e(X, {}) })
+] }), oe = "_modal_sp7xo_1", ne = "_description_sp7xo_42", se = {
+  modal: oe,
+  "overlay-default": "_overlay-default_sp7xo_11",
+  "overlay-light-cyan": "_overlay-light-cyan_sp7xo_15",
+  "scrolling-content": "_scrolling-content_sp7xo_19",
+  "modal-window": "_modal-window_sp7xo_25",
+  description: ne,
+  "size-default": "_size-default_sp7xo_53",
+  "size-small": "_size-small_sp7xo_65",
+  "size-large": "_size-large_sp7xo_77"
+}, h = u.bind(se), ae = 0.9, ie = 32 + 24, le = 32 + 8, de = 36 + 16, ce = 32 * 2, xe = ({
+  title: t,
+  children: s,
+  footerNode: n,
+  okButton: r,
+  cancelButton: a,
+  className: N,
+  size: w = "default",
+  onClose: O = () => {
+  },
+  overlay: x = "default",
+  zIndex: z = 2,
+  allowCloseOutside: D = !0,
+  scrollable: R = !1,
+  withoutFooter: v = !1,
+  CustomFooter: b = null,
+  description: i = null
+}) => {
+  const [S, H] = f(!1), [T, I] = f(0), l = j(null), E = Z(), C = E.height, k = C * ae, p = (C - T) / 2, $ = () => {
+    let o = k - ce;
+    return v || (o = o - de), i ? o = o - le : o = o - ie, o;
+  }, c = () => {
+    H(!1);
+  }, y = (o) => {
+    const { keyCode: W } = o;
+    W === F.ESCAPE_KEY_CODE && c();
+  };
+  return g(() => {
+    if (l && l.current) {
+      const { clientHeight: o } = l.current;
+      I(o);
+    }
+  }, [s, E]), g(() => (H(!0), document.addEventListener("keydown", y, !1), () => document.removeEventListener("keydown", y, !1)), []), Y(l, D ? c : void 0), /* @__PURE__ */ e(K, { onExitComplete: O, children: S && /* @__PURE__ */ e("div", { className: h("modal", { [`overlay-${x}`]: x }), style: { zIndex: z }, children: /* @__PURE__ */ d(
+    P.div,
+    {
+      className: h("modal-window", { [`size-${w}`]: w }, N),
+      ref: l,
+      tabIndex: 0,
+      initial: { opacity: 0, marginTop: -p },
+      animate: { opacity: 1, marginTop: p },
+      exit: { opacity: 0, marginTop: -p },
+      transition: { duration: 0.3 },
+      onAnimationStart: () => {
+        var o;
+        return (o = l.current) == null ? void 0 : o.focus();
+      },
+      children: [
+        /* @__PURE__ */ e(te, { title: t, onClose: c, withDescription: !!i }),
+        R ? /* @__PURE__ */ d(G, { autoHeight: !0, autoHeightMax: $(), hideTracksWhenNotNeeded: !0, children: [
+          i && /* @__PURE__ */ e("span", { className: h("description"), children: i }),
+          /* @__PURE__ */ e(A, { children: s })
+        ] }) : /* @__PURE__ */ d(B, { children: [
+          i && /* @__PURE__ */ e("span", { className: h("description"), children: i }),
+          /* @__PURE__ */ e(A, { children: s })
+        ] }),
+        !v && (b ? /* @__PURE__ */ e(b, { closeHandler: c }) : /* @__PURE__ */ e(
+          V,
+          {
+            size: w,
+            footerNode: n,
+            okButton: r,
+            cancelButton: a,
+            closeHandler: c
+          }
+        ))
+      ]
+    },
+    "modal-window"
+  ) }) });
+};
+export {
+  xe as M,
+  X as S,
+  A as a,
+  te as b,
+  V as c
+};