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

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
 };