@reportportal/ui-kit 0.0.1-alpha.170 → 0.0.1-alpha.171

package/dist/components/sidePanel/sidePanel.d.ts

@@ -12,6 +12,10 @@ export interface SidePanelProps {
     isOpen?: boolean;
     onClose?: () => void;
     closeButtonAriaLabel?: string;
+    showOverlay?: boolean;
+    overlay?: 'default' | 'light-cyan';
+    allowCloseOutside?: boolean;
+    overlayClassName?: string;
 }
-export declare const SidePanel: ({ className, title, descriptionComponent, headerComponent, contentComponent, footerComponent, top, side, isOpen, onClose, closeButtonAriaLabel, }: SidePanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidePanel: ({ className, title, descriptionComponent, headerComponent, contentComponent, footerComponent, top, side, isOpen, onClose, closeButtonAriaLabel, showOverlay, overlay, allowCloseOutside, overlayClassName, }: SidePanelProps) => import("react/jsx-runtime").JSX.Element;
 export default SidePanel;

package/dist/datePicker-cde99de3.js

@@ -0,0 +1,222 @@
+import { jsxs as R, Fragment as j, jsx as a } from "react/jsx-runtime";
+import { useMemo as E, forwardRef as G, useRef as V } from "react";
+import v from "react-datepicker/dist/es/index.js";
+import { c as L } from "./bind-06a7ff84.js";
+import { F as W } from "./fieldText-1749da7a.js";
+import { D as x } from "./dropdown-7d024c49.js";
+import { S as I } from "./calendarArrow-44c7e60e.js";
+import { registerLocale as q } from "react-datepicker";
+const De = (t, n) => {
+  q(t, n);
+}, z = (t, n, d = 20) => {
+  const c = new Array(d).fill(void 0).map((h, u) => t - u), _ = t - d + 1;
+  return n > t ? [n, ...c] : n < _ ? [...c, n] : c;
+}, J = "_header_1s3dn_1", K = "_disabled_1s3dn_25", Q = "_dropdown_1s3dn_8", X = {
+  header: J,
+  "dropdowns-wrapper": "_dropdowns-wrapper_1s3dn_8",
+  "button-prev": "_button-prev_1s3dn_13",
+  "button-next": "_button-next_1s3dn_14",
+  disabled: K,
+  dropdown: Q,
+  "month-dropdown": "_month-dropdown_1s3dn_44",
+  "toggle-button": "_toggle-button_1s3dn_47"
+}, l = L.bind(X), Z = ({
+  date: t = /* @__PURE__ */ new Date(),
+  changeYear: n = () => {
+  },
+  changeMonth: d = () => {
+  },
+  decreaseMonth: c = () => {
+  },
+  increaseMonth: _ = () => {
+  },
+  prevMonthButtonDisabled: h = !1,
+  nextMonthButtonDisabled: u = !1,
+  headerNodes: b = null,
+  customClassName: y = "",
+  yearsOptions: f = [],
+  locale: D
+}) => {
+  const i = t.getFullYear(), S = t.getMonth(), N = E(() => {
+    const e = Array(12).keys(), p = new Intl.DateTimeFormat(D, {
+      month: "long"
+    }), s = (w) => p.format(new Date(i, w));
+    return Array.from(e, s).reduce((w, P, C) => w.concat({
+      value: C,
+      label: P
+    }), []);
+  }, [D, i]), A = E(() => {
+    const e = (/* @__PURE__ */ new Date()).getFullYear();
+    return (f.length > 0 ? f : z(e, i)).reduce(
+      (s, r) => s.concat({ value: r, label: `${r}` }),
+      []
+    );
+  }, [f, i]), F = (e) => {
+    d(e);
+  }, o = (e) => {
+    n(e);
+  };
+  return /* @__PURE__ */ R(j, { children: [
+    b && /* @__PURE__ */ a("div", { className: l(y), children: b }),
+    /* @__PURE__ */ R("div", { className: l("header"), children: [
+      /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Previous Months",
+          disabled: h,
+          onClick: (e) => {
+            e.stopPropagation(), c();
+          },
+          className: l("button-prev", { disabled: h }),
+          children: /* @__PURE__ */ a(I, {})
+        }
+      ),
+      /* @__PURE__ */ R("div", { className: l("dropdowns-wrapper"), children: [
+        /* @__PURE__ */ a(
+          x,
+          {
+            options: N,
+            value: S,
+            onChange: F,
+            transparentBackground: !0,
+            className: l("dropdown", "month-dropdown"),
+            toggleButtonClassName: l("toggle-button")
+          }
+        ),
+        /* @__PURE__ */ a(
+          x,
+          {
+            options: A,
+            value: i,
+            onChange: o,
+            transparentBackground: !0,
+            className: l("dropdown"),
+            toggleButtonClassName: l("toggle-button")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Next Months",
+          disabled: u,
+          onClick: (e) => {
+            e.stopPropagation(), _();
+          },
+          className: l("button-next", { disabled: u }),
+          children: /* @__PURE__ */ a(I, {})
+        }
+      )
+    ] })
+  ] });
+}, ee = "_calendar_1si6u_5", te = "_date_1si6u_103", ne = "_disabled_1si6u_149", oe = "_popper_1si6u_157", se = "_input_1si6u_161", re = {
+  calendar: ee,
+  "current-date": "_current-date_1si6u_102",
+  date: te,
+  "end-date": "_end-date_1si6u_120",
+  "selected-range": "_selected-range_1si6u_130",
+  disabled: ne,
+  popper: oe,
+  input: se,
+  "input-range": "_input-range_1si6u_172"
+}, g = L.bind(re), ae = "en", de = "MM-dd-yyyy", ce = " to ", le = G(
+  ({ selectsRange: t, value: n, ...d }, c) => /* @__PURE__ */ a(
+    W,
+    {
+      ...d,
+      className: g("input", t ? "input-range" : ""),
+      defaultWidth: !1,
+      value: t ? (n == null ? void 0 : n.replace(" - ", ce)) ?? "" : n,
+      ref: c,
+      readOnly: !0
+    }
+  )
+), Ne = (t) => {
+  const {
+    onChange: n = () => {
+    },
+    disabled: d = !1,
+    onBlur: c = () => {
+    },
+    onFocus: _ = () => {
+    },
+    headerNodes: h = null,
+    customClassName: u = "",
+    customTimeInput: b = void 0,
+    shouldCloseOnSelect: y = !0,
+    popperClassName: f = "",
+    calendarClassName: D = "",
+    popperPlacement: i = "bottom-start",
+    fixedHeight: S = !0,
+    language: N = ae,
+    yearsOptions: A = [],
+    dateFormat: F = de,
+    value: o = null
+  } = t, e = "selectsRange" in t && t.selectsRange === !0, p = V(null), s = e ? (o == null ? void 0 : o[0]) ?? void 0 : void 0, r = e ? (o == null ? void 0 : o[1]) ?? void 0 : void 0, w = s == null ? void 0 : s.toDateString(), P = r == null ? void 0 : r.toDateString(), C = r && s && r > s, O = e ? "Select date range" : "Select date", B = t.placeholder ?? O, k = {
+    customInput: /* @__PURE__ */ a(le, { ref: p, selectsRange: e }),
+    placeholderText: B,
+    disabled: d,
+    shouldCloseOnSelect: y,
+    fixedHeight: S,
+    locale: N,
+    showPopperArrow: !1,
+    dayClassName: (m) => {
+      if (!e) {
+        const H = o == null ? void 0 : o.toDateString(), U = m.toDateString();
+        return g("date", {
+          "current-date": U === H,
+          disabled: d
+        });
+      }
+      const M = m.toDateString(), Y = M === w, T = C && M === P, $ = s && r && m > s && m < r;
+      return g("date", {
+        "current-date": Y,
+        "selected-range": $ && !T,
+        "end-date": T && C,
+        disabled: d
+      });
+    },
+    calendarClassName: g(D, "calendar"),
+    renderCustomHeader: (m) => /* @__PURE__ */ a(
+      Z,
+      {
+        ...m,
+        headerNodes: h,
+        customClassName: u,
+        yearsOptions: A,
+        locale: N
+      }
+    ),
+    onBlur: c,
+    onFocus: _,
+    customTimeInput: b,
+    showTimeInput: !!b,
+    popperClassName: g(f, "popper"),
+    dateFormat: F,
+    className: g("datepicker"),
+    popperPlacement: i
+  };
+  return e ? /* @__PURE__ */ a(
+    v,
+    {
+      ...k,
+      selectsRange: !0,
+      startDate: s,
+      endDate: r,
+      onChange: n
+    }
+  ) : /* @__PURE__ */ a(
+    v,
+    {
+      ...k,
+      selected: o,
+      onChange: n
+    }
+  );
+};
+export {
+  Ne as D,
+  De as r
+};

package/dist/datePicker.js

@@ -1,5 +1,5 @@
-import { D as t } from "./datePicker-412fb8e8.js";
-import { r as A } from "./datePicker-412fb8e8.js";
+import { D as t } from "./datePicker-cde99de3.js";
+import { r as A } from "./datePicker-cde99de3.js";
 import "react/jsx-runtime";
 import "react";
 import "react-datepicker/dist/es/index.js";

package/dist/index.js

@@ -9,7 +9,7 @@ import { BulkPanel as J } from "./bulkPanel.js";
 import { B as _ } from "./button-97d9e587.js";
 import { C as W } from "./checkbox-493fdc63.js";
 import { Chip as j } from "./chip.js";
-import { D as K } from "./datePicker-412fb8e8.js";
+import { D as K } from "./datePicker-cde99de3.js";
 import "react-datepicker";
 import { D as Y } from "./dropdown-7d024c49.js";
 import { FieldLabel as $ } from "./fieldLabel.js";

package/dist/sidePanel.js

@@ -1,88 +1,131 @@
-import { jsxs as s, jsx as i, Fragment as p } from "react/jsx-runtime";
-import { useId as N, useEffect as y } from "react";
-import { c as g } from "./bind-06a7ff84.js";
-import { K as E } from "./keyCodes-f63c0e11.js";
-import { S as x } from "./close-4d480ef7.js";
-import { B as k } from "./baseIconButton-251479f7.js";
-const I = "_active_6bj2z_15", K = "_compact_6bj2z_39", S = "_header_6bj2z_35", w = "_title_6bj2z_65", B = "_description_6bj2z_76", D = "_content_6bj2z_85", L = "_footer_6bj2z_92", P = "_divider_6bj2z_98", $ = {
-  "side-panel": "_side-panel_6bj2z_1",
-  active: I,
-  "side-right": "_side-right_6bj2z_19",
-  "side-left": "_side-left_6bj2z_27",
-  "header-section": "_header-section_6bj2z_35",
-  compact: K,
-  header: S,
-  "header-content": "_header-content_6bj2z_55",
-  "close-button": "_close-button_6bj2z_59",
-  title: w,
-  description: B,
-  content: D,
-  footer: L,
-  divider: P
-}, e = g.bind($), J = ({
-  className: h,
-  title: c,
-  descriptionComponent: r,
-  headerComponent: d,
+import { jsxs as a, jsx as i, Fragment as S } from "react/jsx-runtime";
+import { useId as D, useRef as I, useMemo as K, useEffect as P } from "react";
+import { c as $ } from "./bind-06a7ff84.js";
+import { K as A } from "./keyCodes-f63c0e11.js";
+import { u as B } from "./useOnClickOutside-8f7d68a1.js";
+import "react-dnd";
+import "react-dnd-html5-backend";
+import { a as L } from "./dropdown-7d024c49.js";
+import { S as T } from "./close-4d480ef7.js";
+import { B as j } from "./baseIconButton-251479f7.js";
+import "react-dom";
+import "@floating-ui/react-dom";
+import "downshift";
+import "rc-scrollbars";
+import "./clear-53660571.js";
+import "./dropdown-0260bb66.js";
+import "./fieldLabel.js";
+import "./adaptiveTagList.js";
+import "./button-97d9e587.js";
+import "./isEmpty-ccacb5ff.js";
+import "./checkbox-493fdc63.js";
+const M = "_active_5ebdz_11", F = "_compact_5ebdz_62", H = "_header_5ebdz_58", O = "_title_5ebdz_88", U = "_description_5ebdz_99", W = "_content_5ebdz_108", Y = "_footer_5ebdz_115", q = "_divider_5ebdz_121", w = {
+  "side-panel-overlay": "_side-panel-overlay_5ebdz_1",
+  active: M,
+  "overlay-default": "_overlay-default_5ebdz_16",
+  "overlay-light-cyan": "_overlay-light-cyan_5ebdz_20",
+  "side-panel": "_side-panel_5ebdz_1",
+  "side-right": "_side-right_5ebdz_42",
+  "side-left": "_side-left_5ebdz_50",
+  "header-section": "_header-section_5ebdz_58",
+  compact: F,
+  header: H,
+  "header-content": "_header-content_5ebdz_78",
+  "close-button": "_close-button_5ebdz_82",
+  title: O,
+  description: U,
+  content: W,
+  footer: Y,
+  divider: q
+}, e = $.bind(w), ve = ({
+  className: u,
+  title: r,
+  descriptionComponent: o,
+  headerComponent: c,
   contentComponent: n,
-  footerComponent: o,
+  footerComponent: l,
   top: _ = 0,
-  side: b = "right",
-  isOpen: a = !0,
+  side: z = "right",
+  isOpen: d = !0,
   onClose: t,
-  closeButtonAriaLabel: v = "Close panel"
+  closeButtonAriaLabel: y = "Close panel",
+  showOverlay: m = !1,
+  overlay: p = "default",
+  allowCloseOutside: s = !0,
+  overlayClassName: N
 }) => {
-  const l = N(), f = () => {
+  const v = D(), f = I(null), g = () => {
     t == null || t();
-  };
-  y(() => {
-    if (!a || !t)
+  }, E = K(
+    () => ({
+      ignoreSelectors: [`[${L}]`]
+    }),
+    []
+  );
+  B(
+    f,
+    s && m && d ? t : void 0,
+    E
+  ), P(() => {
+    if (!d || !t)
       return;
-    const m = (z) => {
-      const { keyCode: u } = z;
-      u === E.ESCAPE_KEY_CODE && t();
+    const b = (x) => {
+      const { keyCode: R } = x;
+      R === A.ESCAPE_KEY_CODE && s && t();
     };
-    return document.addEventListener("keydown", m, !1), () => {
-      document.removeEventListener("keydown", m, !1);
+    return document.addEventListener("keydown", b, !1), () => {
+      document.removeEventListener("keydown", b, !1);
     };
-  }, [a, t]);
-  const j = !!(d || r);
-  return /* @__PURE__ */ s(
+  }, [d, t, s]);
+  const k = !!(c || o), h = /* @__PURE__ */ a(
     "aside",
     {
-      className: e("side-panel", `side-${b}`, { active: a }, h),
+      ref: f,
+      className: e("side-panel", `side-${z}`, { active: d }, u),
       role: "dialog",
       "aria-modal": "true",
-      "aria-hidden": !a,
-      "aria-labelledby": c ? l : void 0,
+      "aria-hidden": !d,
+      "aria-labelledby": r ? v : void 0,
       style: { top: _, height: `calc(100vh - ${_}px)` },
       tabIndex: -1,
       children: [
-        /* @__PURE__ */ s("div", { className: e("header-section", { compact: !j }), children: [
-          (d || c) && /* @__PURE__ */ s("div", { className: e("header"), children: [
-            c ? /* @__PURE__ */ i("span", { id: l, className: e("title"), children: c }) : d,
+        /* @__PURE__ */ a("div", { className: e("header-section", { compact: !k }), children: [
+          (c || r) && /* @__PURE__ */ a("div", { className: e("header"), children: [
+            r ? /* @__PURE__ */ i("span", { id: v, className: e("title"), children: r }) : c,
             t && /* @__PURE__ */ i(
-              k,
+              j,
               {
                 className: e("close-button"),
-                onClick: f,
-                "aria-label": v,
-                children: /* @__PURE__ */ i(x, {})
+                onClick: g,
+                "aria-label": y,
+                children: /* @__PURE__ */ i(T, {})
               }
             )
           ] }),
-          r
+          o
         ] }),
         /* @__PURE__ */ i("div", { className: e("divider") }),
         n && /* @__PURE__ */ i("div", { className: e("content"), children: n }),
-        o && /* @__PURE__ */ s(p, { children: [
+        l && /* @__PURE__ */ a(S, { children: [
           /* @__PURE__ */ i("div", { className: e("divider") }),
-          /* @__PURE__ */ i("div", { className: e("footer"), children: o })
+          /* @__PURE__ */ i("div", { className: e("footer"), children: l })
         ] })
       ]
     }
   );
+  return m ? /* @__PURE__ */ i(
+    "div",
+    {
+      className: e(
+        "side-panel-overlay",
+        { active: d },
+        p && `overlay-${p}`,
+        N
+      ),
+      children: h
+    }
+  ) : h;
 };
 export {
-  J as SidePanel
+  ve as SidePanel
 };