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

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-e07f2a71.js → dropdown-c3ca9c1a.js}

@@ -8,18 +8,18 @@ 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 = {
+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" })), re = "_disabled_nx3fh_13", ie = "_hidden_nx3fh_17", le = "_selected_nx3fh_23", ce = "_hover_nx3fh_26", _e = {
   "dropdown-option": "_dropdown-option_nx3fh_1",
-  disabled: le,
-  hidden: re,
-  selected: ie,
+  disabled: re,
+  hidden: ie,
+  selected: le,
   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 },
+      option: { value: s, disabled: l, hidden: O, label: r, title: d, groupRef: E },
       selected: D,
       onChange: p,
       render: g,
@@ -33,15 +33,15 @@ const ae = (t) => /* @__PURE__ */ R.createElement("svg", { width: 16, height: 16
       {
         className: P("dropdown-option", {
           selected: D,
-          disabled: i,
+          disabled: l,
           hidden: O,
           hover: b
         }),
-        title: i && d || void 0,
+        title: l && 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 })
+        children: /* @__PURE__ */ a("div", { className: P("single-option", { "sub-option": !!E }), children: g ? g(t) : r })
       }
     );
   }
@@ -51,16 +51,16 @@ const ae = (t) => /* @__PURE__ */ R.createElement("svg", { width: 16, height: 16
   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) => {
+const pe = (t, n) => t.map(({ value: s }) => s).indexOf(n), we = (t, n) => (t % n + n) % n, K = (t, n = 0, s = 1) => {
   if (!t[n].disabled)
     return n;
-  const i = t.length;
-  return v(
+  const l = t.length;
+  return K(
     t,
-    we(n + s, i),
+    we(n + s, l),
     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 = {
+}, me = (t, n) => K(t, n), ue = (t, n) => K(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", Ke = "_touched_3wi7d_46", ve = "_opened_3wi7d_50", ye = "_placeholder_3wi7d_72", Ie = "_ghost_3wi7d_108", ke = {
   container: Ce,
   icon: Oe,
   arrow: Ee,
@@ -69,8 +69,8 @@ const pe = (t, n) => t.map(({ value: s }) => s).indexOf(n), we = (t, n) => (t %
   disabled: be,
   value: Ne,
   error: xe,
-  touched: ve,
-  opened: Ke,
+  touched: Ke,
+  opened: ve,
   placeholder: ye,
   "mobile-disabled": "_mobile-disabled_3wi7d_87",
   "select-list": "_select-list_3wi7d_92",
@@ -79,9 +79,9 @@ const pe = (t, n) => t.map(({ value: s }) => s).indexOf(n), we = (t, n) => (t %
   value: t = "",
   options: n = [],
   disabled: s = !1,
-  error: i,
+  error: l,
   onChange: O,
-  onFocus: l,
+  onFocus: r,
   onBlur: d,
   mobileDisabled: E,
   title: D,
@@ -94,7 +94,7 @@ const pe = (t, n) => t.map(({ value: s }) => s).indexOf(n), we = (t, n) => (t %
   className: W,
   toggleButtonClassName: H
 }) => {
-  const [r, c] = Y(!1), K = B(null), [M, m] = Y(null), { refs: y, floatingStyles: $ } = ee({
+  const [i, c] = Y(!1), v = B(null), [M, m] = Y(null), { refs: y, floatingStyles: $ } = ee({
     middleware: [
       te(5),
       ne({
@@ -102,8 +102,8 @@ const pe = (t, n) => t.map(({ value: s }) => s).indexOf(n), we = (t, n) => (t %
       })
     ]
   });
-  oe(K, () => {
-    r && (c(!1), d == null || d());
+  oe(v, () => {
+    i && (c(!1), d == null || d());
   });
   const I = (e) => {
     e.disabled || (O(e.value), c((o) => !o));
@@ -118,7 +118,7 @@ const pe = (t, n) => t.map(({ value: s }) => s).indexOf(n), we = (t, n) => (t %
     items: n,
     itemToString: (e) => (e != null && e.label ? String(e.label) : w) || "",
     selectedItem: j(),
-    isOpen: r,
+    isOpen: i,
     circularNavigation: !0,
     defaultHighlightedIndex: k,
     onHighlightedIndexChange: (e) => {
@@ -132,9 +132,9 @@ const pe = (t, n) => t.map(({ value: s }) => s).indexOf(n), we = (t, n) => (t %
       }
     }
   }), q = () => {
-    s || (c((e) => !e), r ? d == null || d() : l == null || l(), m(h.ON_CLICK));
+    s || (c((e) => !e), i ? d == null || d() : r == null || r(), m(h.ON_CLICK));
   }, z = () => {
-    if (!t && t !== !1)
+    if (!t && t !== !1 && t !== 0)
       return w;
     let e = t;
     return n.forEach((o) => {
@@ -142,7 +142,7 @@ const pe = (t, n) => t.map(({ value: s }) => s).indexOf(n), we = (t, n) => (t %
     }), 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));
+    fe.includes(o) && !i && (e.preventDefault(), u(k), c(!0), r == null || r(), m(h.ON_KEY_DOWN));
   }, J = (e) => {
     const { keyCode: o } = e;
     if (o === f.ENTER_KEY_CODE) {
@@ -167,7 +167,7 @@ const pe = (t, n) => t.map(({ value: s }) => s).indexOf(n), we = (t, n) => (t %
     },
     e.value
   ));
-  return /* @__PURE__ */ L("div", { ref: K, className: _("container", W), title: D, children: [
+  return /* @__PURE__ */ L("div", { ref: v, className: _("container", W), title: D, children: [
     /* @__PURE__ */ L(
       "button",
       {
@@ -175,9 +175,9 @@ const pe = (t, n) => t.map(({ value: s }) => s).indexOf(n), we = (t, n) => (t %
         ...V({
           className: _("dropdown", b, H, {
             "transparent-background": T,
-            opened: r,
+            opened: i,
             disabled: s,
-            error: i,
+            error: l,
             touched: p,
             "mobile-disabled": E
           }),
@@ -192,11 +192,11 @@ const pe = (t, n) => t.map(({ value: s }) => s).indexOf(n), we = (t, n) => (t %
         ]
       }
     ),
-    r && /* @__PURE__ */ a(
+    i && /* @__PURE__ */ a(
       "div",
       {
         style: $,
-        className: _("select-list", { opened: r }),
+        className: _("select-list", { opened: i }),
         ...U({
           onKeyDown: J,
           ref: y.setFloating

package/dist/dropdown.js

@@ -1,4 +1,4 @@
-import { D as r } from "./dropdown-e07f2a71.js";
+import { D as r } from "./dropdown-c3ca9c1a.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
+};