@reportportal/ui-kit 0.0.1-alpha.122 → 0.0.1-alpha.124

package/dist/components/dropdown/dropdown.d.ts

@@ -40,5 +40,9 @@ export interface DropdownProps {
     onClear?: () => void;
     /** ARIA label for the clear button */
     clearButtonAriaLabel?: string;
+    /** Portal root element for tooltip rendering (e.g., document.body to prevent clipping) */
+    tooltipPortalRoot?: Element;
+    /** Z-index for tooltip when rendered in portal (default: 9) */
+    tooltipZIndex?: number;
 }
 export declare const Dropdown: FC<DropdownProps>;

package/dist/{datePicker-fcff097b.js → datePicker-e400f01d.js}

@@ -3,7 +3,7 @@ import B from "react-datepicker/dist/es/index.js";
 import { c as R } from "./bind-06a7ff84.js";
 import { useMemo as P, useRef as D } from "react";
 import { F as I } from "./fieldText-2c4790e1.js";
-import { D as E } from "./dropdown-e85dd323.js";
+import { D as E } from "./dropdown-18c58189.js";
 import { S as T } from "./calendarArrow-44c7e60e.js";
 import { registerLocale as j } from "react-datepicker";
 const ie = (n, s) => {

package/dist/datePicker.js

@@ -1,5 +1,5 @@
-import { D as t } from "./datePicker-fcff097b.js";
-import { r as A } from "./datePicker-fcff097b.js";
+import { D as t } from "./datePicker-e400f01d.js";
+import { r as A } from "./datePicker-e400f01d.js";
 import "react/jsx-runtime";
 import "react-datepicker/dist/es/index.js";
 import "./bind-06a7ff84.js";
@@ -11,7 +11,7 @@ import "./baseIconButton-251479f7.js";
 import "./spinLoader-c4a53718.js";
 import "./maxValueDisplay-9be01a75.js";
 import "./fieldLabel.js";
-import "./dropdown-e85dd323.js";
+import "./dropdown-18c58189.js";
 import "@floating-ui/react-dom";
 import "downshift";
 import "rc-scrollbars";

package/dist/{dropdown-e85dd323.js → dropdown-18c58189.js}

@@ -1,28 +1,28 @@
 import { jsxs as D, jsx as l, Fragment as Ee } from "react/jsx-runtime";
-import { forwardRef as Je, useState as oe, useRef as P, useMemo as y, useCallback as x, useLayoutEffect as Qe, useEffect as Oe } from "react";
+import { forwardRef as Ze, useState as oe, useRef as P, useMemo as y, useCallback as x, useLayoutEffect as er, useEffect as Oe } from "react";
 import { c as be } from "./bind-06a7ff84.js";
-import { useFloating as Ze, offset as er, flip as rr } from "@floating-ui/react-dom";
+import { useFloating as rr, offset as tr, flip as nr } from "@floating-ui/react-dom";
 import { useSelect as le } from "downshift";
-import { Scrollbars as tr } from "rc-scrollbars";
-import { u as nr } from "./useOnClickOutside-c332f7d3.js";
+import { Scrollbars as sr } from "rc-scrollbars";
+import { u as ar } from "./useOnClickOutside-c332f7d3.js";
 import { K as w } from "./keyCodes-f63c0e11.js";
-import { B as sr } from "./baseIconButton-251479f7.js";
-import { S as ar } from "./clear-53660571.js";
-import { S as or } from "./dropdown-0260bb66.js";
-import { Tooltip as lr } from "./tooltip.js";
-import { FieldLabel as cr } from "./fieldLabel.js";
-import { C as dr } from "./checkbox-ed6cc375.js";
-const ir = "_disabled_14s7v_12", ur = "_hidden_14s7v_16", hr = "_hover_14s7v_22", fr = "_selected_14s7v_38", _r = {
+import { B as or } from "./baseIconButton-251479f7.js";
+import { S as lr } from "./clear-53660571.js";
+import { S as cr } from "./dropdown-0260bb66.js";
+import { Tooltip as dr } from "./tooltip.js";
+import { FieldLabel as ir } from "./fieldLabel.js";
+import { C as ur } from "./checkbox-ed6cc375.js";
+const hr = "_disabled_14s7v_12", fr = "_hidden_14s7v_16", _r = "_hover_14s7v_22", pr = "_selected_14s7v_38", gr = {
   "dropdown-option": "_dropdown-option_14s7v_1",
-  disabled: ir,
-  hidden: ur,
-  hover: hr,
+  disabled: hr,
+  hidden: fr,
+  hover: _r,
   "depth-1": "_depth-1_14s7v_32",
-  selected: fr,
+  selected: pr,
   "multi-select": "_multi-select_14s7v_38",
   "single-option": "_single-option_14s7v_43",
   "sub-option": "_sub-option_14s7v_50"
-}, ve = be.bind(_r), Ne = Je(
+}, ve = be.bind(gr), Ne = Ze(
   (t, r) => {
     const {
       option: { value: a, disabled: s, hidden: d, label: f, title: m, groupRef: p },
@@ -55,7 +55,7 @@ const ir = "_disabled_14s7v_12", ur = "_hidden_14s7v_16", hr = "_hover_14s7v_22"
         ref: r,
         onMouseEnter: J,
         children: [
-          C && /* @__PURE__ */ l(dr, { value: !!R, partiallyChecked: H }),
+          C && /* @__PURE__ */ l(ur, { value: !!R, partiallyChecked: H }),
           /* @__PURE__ */ l(
             "div",
             {
@@ -69,16 +69,16 @@ const ir = "_disabled_14s7v_12", ur = "_hidden_14s7v_16", hr = "_hover_14s7v_22"
       }
     );
   }
-), pr = [
+), wr = [
   w.ENTER_KEY_CODE,
   w.SPACE_KEY_CODE,
   w.ARROW_DOWN_KEY_CODE
-], gr = [w.ESCAPE_KEY_CODE, w.TAB_KEY_CODE];
+], mr = [w.ESCAPE_KEY_CODE, w.TAB_KEY_CODE];
 var A = /* @__PURE__ */ ((t) => (t.ON_KEY_DOWN = "onKeyDown", t.ON_CLICK = "onClick", t))(A || {});
-const wr = 216, mr = (t, r) => {
+const yr = 216, Cr = (t, r) => {
   const a = Array.isArray(r) ? r : [r];
   return t.findIndex(({ value: s }) => a.includes(s));
-}, yr = (t, r) => (t % r + r) % r, ce = (t, r = 0, a = 1) => {
+}, Er = (t, r) => (t % r + r) % r, ce = (t, r = 0, a = 1) => {
   var d;
   if (t.length === 0)
     return 0;
@@ -87,10 +87,10 @@ const wr = 216, mr = (t, r) => {
   const s = t.length;
   return ce(
     t,
-    yr(r + a, s),
+    Er(r + a, s),
     a
   );
-}, Cr = (t, r) => ce(t, r), Er = (t, r) => ce(t, r, -1), De = (t, r = 0, a) => !t || t.length === 0 ? [] : t.reduce((s, d) => {
+}, Or = (t, r) => ce(t, r), vr = (t, r) => ce(t, r, -1), De = (t, r = 0, a) => !t || t.length === 0 ? [] : t.reduce((s, d) => {
   var f;
   return d && (s.push({ option: d, depth: r, parent: a }), (f = d.children) != null && f.length && s.push(...De(d.children, r + 1, d))), s;
 }, []), Ae = (t) => !t || t.length === 0 ? [] : t.reduce((r, a) => {
@@ -99,28 +99,28 @@ const wr = 216, mr = (t, r) => {
 }, []), Ke = (t) => {
   var r;
   return t ? (r = t.children) != null && r.length ? t.children.reduce((a, s) => (s && a.push(...Ke(s)), a), []) : [t.value] : [];
-}, Or = "_container_owe49_1", vr = "_icon_owe49_7", Nr = "_arrow_owe49_13", br = "_dropdown_owe49_27", Dr = "_disabled_owe49_44", Ar = "_value_owe49_51", Kr = "_error_owe49_54", Ir = "_touched_owe49_54", Tr = "_opened_owe49_58", kr = "_placeholder_owe49_93", Pr = "_ghost_owe49_139", xr = "_divider_owe49_160", Rr = {
-  container: Or,
-  icon: vr,
-  arrow: Nr,
+}, Nr = "_container_owe49_1", br = "_icon_owe49_7", Dr = "_arrow_owe49_13", Ar = "_dropdown_owe49_27", Kr = "_disabled_owe49_44", Ir = "_value_owe49_51", Tr = "_error_owe49_54", kr = "_touched_owe49_54", Pr = "_opened_owe49_58", xr = "_placeholder_owe49_93", Rr = "_ghost_owe49_139", Vr = "_divider_owe49_160", Lr = {
+  container: Nr,
+  icon: br,
+  arrow: Dr,
   "clear-button": "_clear-button_owe49_19",
-  dropdown: br,
+  dropdown: Ar,
   "transparent-background": "_transparent-background_owe49_41",
-  disabled: Dr,
-  value: Ar,
-  error: Kr,
-  touched: Ir,
-  opened: Tr,
-  placeholder: kr,
+  disabled: Kr,
+  value: Ir,
+  error: Tr,
+  touched: kr,
+  opened: Pr,
+  placeholder: xr,
   "mobile-disabled": "_mobile-disabled_owe49_97",
   "value-wrapper": "_value-wrapper_owe49_102",
   "value-tooltip": "_value-tooltip_owe49_108",
   "select-list": "_select-list_owe49_113",
   "limited-width": "_limited-width_owe49_130",
   "options-container": "_options-container_owe49_134",
-  ghost: Pr,
-  divider: xr
-}, i = be.bind(Rr), Jr = ({
+  ghost: Rr,
+  divider: Vr
+}, i = be.bind(Lr), Zr = ({
   multiSelect: t = !1,
   value: r = t ? [] : "",
   options: a = [],
@@ -153,43 +153,45 @@ const wr = 216, mr = (t, r) => {
   clearable: Pe = !1,
   onClear: he = () => {
   },
-  clearButtonAriaLabel: xe = "Clear selection"
+  clearButtonAriaLabel: xe = "Clear selection",
+  tooltipPortalRoot: Re,
+  tooltipZIndex: Ve
 }) => {
-  const [u, S] = oe(!1), fe = P(null), T = P(null), re = P(0), te = P(null), [Re, _e] = oe(!1), [Ve, $] = oe(null), E = P(null), k = y(() => De(a), [a]), _ = y(
+  const [u, S] = oe(!1), fe = P(null), T = P(null), re = P(0), te = P(null), [Le, _e] = oe(!1), [He, z] = oe(null), E = P(null), k = y(() => De(a), [a]), _ = y(
     () => k.map(({ option: e }) => e),
     [k]
-  ), j = y(() => k.filter(({ option: e }) => {
+  ), $ = y(() => k.filter(({ option: e }) => {
     var n;
     return (n = e.children) == null ? void 0 : n.length;
   }).map(({ option: e }) => e), [k]), pe = y(() => Ae(a), [a]), g = y(
     () => pe.map(({ value: e }) => e),
     [pe]
-  ), z = y(() => {
+  ), j = y(() => {
     const e = /* @__PURE__ */ new Map();
-    return j.forEach((n) => {
+    return $.forEach((n) => {
       e.set(n.value, Ke(n));
     }), e;
-  }, [j]), q = x(
-    (e) => (j.forEach((n) => {
-      const o = z.get(n.value) ?? [], c = o.length > 0 && o.every((h) => e.has(h));
+  }, [$]), q = x(
+    (e) => ($.forEach((n) => {
+      const o = j.get(n.value) ?? [], c = o.length > 0 && o.every((h) => e.has(h));
       ue && c ? e.add(n.value) : e.delete(n.value);
     }), e),
-    [j, ue, z]
-  ), O = y(() => !t || !Array.isArray(r) ? /* @__PURE__ */ new Set() : q(new Set(r)), [t, r, q]), ge = t ? Array.isArray(r) && r.length > 0 : r || r === !1 || r === 0, Le = Pe && ge && !s, He = x((e) => {
+    [$, ue, j]
+  ), O = y(() => !t || !Array.isArray(r) ? /* @__PURE__ */ new Set() : q(new Set(r)), [t, r, q]), ge = t ? Array.isArray(r) && r.length > 0 : r || r === !1 || r === 0, Ye = Pe && ge && !s, Me = x((e) => {
     re.current = e.scrollTop;
   }, []);
-  Qe(() => {
+  er(() => {
     u && !I && T.current && !(t && E.current !== null) && T.current.scrollTop(re.current);
   }, [u, I, r, t]);
-  const { refs: B, floatingStyles: Ye } = Ze({
+  const { refs: B, floatingStyles: We } = rr({
     placement: "bottom-start",
     middleware: [
-      er(5),
-      rr({
+      tr(5),
+      nr({
         fallbackPlacements: ["bottom-start", "top-start", "bottom", "top"]
       })
     ]
-  }), Me = () => {
+  }), Se = () => {
     if (!de)
       return;
     const e = Array.isArray(r) ? r : [], n = new Set(e), o = g.some((h) => !n.has(h));
@@ -207,13 +209,13 @@ const wr = 216, mr = (t, r) => {
       const n = B.reference.current;
       n && n instanceof HTMLElement && n.focus();
     });
-  }, [s, t, f, he, N, B]), We = x(
+  }, [s, t, f, he, N, B]), ze = x(
     (e) => {
       e.preventDefault(), e.stopPropagation(), ne();
     },
     [ne]
   );
-  nr(fe, () => {
+  ar(fe, () => {
     u && N();
   });
   const we = (e) => {
@@ -222,7 +224,7 @@ const wr = 216, mr = (t, r) => {
       if (t) {
         const o = Array.isArray(r) ? r : [], c = new Set(o);
         if ((n = e.children) != null && n.length) {
-          const F = z.get(e.value) ?? [], G = F.some((v) => !c.has(v));
+          const F = j.get(e.value) ?? [], G = F.some((v) => !c.has(v));
           F.forEach((v) => {
             G ? c.add(v) : c.delete(v);
           });
@@ -234,27 +236,27 @@ const wr = 216, mr = (t, r) => {
         f(e.value);
       S((o) => t || !o);
     }
-  }, Se = () => _.find(({ value: e }) => e === r), me = mr(_, r), {
-    getToggleButtonProps: $e,
-    getLabelProps: je,
-    getMenuProps: ze,
-    getItemProps: qe,
+  }, $e = () => _.find(({ value: e }) => e === r), me = Cr(_, r), {
+    getToggleButtonProps: je,
+    getLabelProps: qe,
+    getMenuProps: Be,
+    getItemProps: Ue,
     setHighlightedIndex: b,
     highlightedIndex: se,
     selectedItem: U
   } = le({
     items: _,
     itemToString: (e) => (e != null && e.label ? String(e.label) : C) || "",
-    selectedItem: Se(),
+    selectedItem: $e(),
     isOpen: u,
     circularNavigation: !0,
     defaultHighlightedIndex: me,
     onHighlightedIndexChange: (e) => {
       switch (e.type) {
         case le.stateChangeTypes.MenuKeyDownArrowUp:
-          return $(A.ON_KEY_DOWN), b(Er(_, e.highlightedIndex)), e;
+          return z(A.ON_KEY_DOWN), b(vr(_, e.highlightedIndex)), e;
         case le.stateChangeTypes.MenuKeyDownArrowDown:
-          return $(A.ON_KEY_DOWN), b(Cr(_, e.highlightedIndex)), e;
+          return z(A.ON_KEY_DOWN), b(Or(_, e.highlightedIndex)), e;
         default:
           return e;
       }
@@ -265,8 +267,8 @@ const wr = 216, mr = (t, r) => {
       T.current && !I && T.current.scrollTop(re.current);
     }));
   }, [t, u, r, _.length, b, I]);
-  const Be = () => {
-    s || (S((e) => !e), u ? p == null || p() : m == null || m(), $(A.ON_CLICK));
+  const Xe = () => {
+    s || (S((e) => !e), u ? p == null || p() : m == null || m(), z(A.ON_CLICK));
   }, X = y(() => {
     if (t && Array.isArray(r) && g.length > 0 && g.every((n) => O.has(n)))
       return ee.label;
@@ -291,10 +293,10 @@ const wr = 216, mr = (t, r) => {
     } else
       _e(!1);
   }, [X]);
-  const Ue = (e) => {
+  const Fe = (e) => {
     const { keyCode: n } = e;
-    pr.includes(n) && e.target === e.currentTarget && (e.preventDefault(), e.stopPropagation(), !u && (b(me), S(!0), m == null || m(), $(A.ON_KEY_DOWN)));
-  }, Xe = (e) => {
+    wr.includes(n) && e.target === e.currentTarget && (e.preventDefault(), e.stopPropagation(), !u && (b(me), S(!0), m == null || m(), z(A.ON_KEY_DOWN)));
+  }, Ge = (e) => {
     const { keyCode: n } = e;
     if (n === w.ENTER_KEY_CODE || n === w.SPACE_KEY_CODE) {
       const o = _[se];
@@ -303,7 +305,7 @@ const wr = 216, mr = (t, r) => {
       t && (E.current = se), we(o), t || N();
       return;
     }
-    gr.includes(n) && (e.stopPropagation(), N());
+    mr.includes(n) && (e.stopPropagation(), N());
   }, ye = () => /* @__PURE__ */ D("div", { className: i("options-container"), children: [
     t && de && /* @__PURE__ */ D(Ee, { children: [
       /* @__PURE__ */ l(
@@ -311,7 +313,7 @@ const wr = 216, mr = (t, r) => {
         {
           option: ee,
           selected: Array.isArray(r) && g.length > 0 && g.every((e) => O.has(e)),
-          onChange: Me,
+          onChange: Se,
           multiSelect: t,
           isPartiallyChecked: g.some((e) => O.has(e)) && !g.every((e) => O.has(e))
         }
@@ -321,18 +323,18 @@ const wr = 216, mr = (t, r) => {
     ] }),
     k.map(({ option: e, depth: n }, o) => {
       var G, v;
-      const c = z.get(e.value) ?? [e.value], h = t && c.every((ae) => O.has(ae)), F = t && ((G = e.children) == null ? void 0 : G.length) && c.some((ae) => O.has(ae)) && !h;
+      const c = j.get(e.value) ?? [e.value], h = t && c.every((ae) => O.has(ae)), F = t && ((G = e.children) == null ? void 0 : G.length) && c.some((ae) => O.has(ae)) && !h;
       return /* @__PURE__ */ l(
         Ne,
         {
-          ...qe({
+          ...Ue({
             item: e,
             index: o
           }),
           multiSelect: t,
           selected: t ? h : e.value === ((U == null ? void 0 : U.value) ?? U),
           option: { title: e.label, ...e },
-          highlightHovered: se === o && Ve !== A.ON_CLICK,
+          highlightHovered: se === o && He !== A.ON_CLICK,
           render: Y,
           onChange: e.disabled ? null : () => we(e),
           onMouseEnter: () => b(o),
@@ -347,7 +349,7 @@ const wr = 216, mr = (t, r) => {
       /* @__PURE__ */ l("div", { className: i("divider") }),
       typeof W == "function" ? W(N) : W
     ] })
-  ] }), Fe = () => {
+  ] }), Je = () => {
     const e = ie ? ie(X) : X, n = /* @__PURE__ */ l(
       "span",
       {
@@ -358,8 +360,18 @@ const wr = 216, mr = (t, r) => {
         children: e
       }
     );
-    return ge && !!e && Re ? /* @__PURE__ */ l(lr, { content: e, placement: "top", wrapperClassName: i("value-tooltip"), children: n }) : n;
-  }, Ge = $e({
+    return ge && !!e && Le ? /* @__PURE__ */ l(
+      dr,
+      {
+        content: e,
+        placement: "top",
+        wrapperClassName: i("value-tooltip"),
+        portalRoot: Re,
+        zIndex: Ve,
+        children: n
+      }
+    ) : n;
+  }, Qe = je({
     className: i("dropdown", J, M, {
       "transparent-background": Q,
       opened: u,
@@ -368,12 +380,12 @@ const wr = 216, mr = (t, r) => {
       touched: V,
       "mobile-disabled": R
     }),
-    onClick: Be,
-    onKeyDown: Ue,
+    onClick: Xe,
+    onKeyDown: Fe,
     ref: B.setReference
-  }), { type: Lr, ...Ce } = Ge;
+  }), { type: Yr, ...Ce } = Qe;
   return /* @__PURE__ */ D("div", { ref: fe, className: i("container", Z), title: K, children: [
-    H && /* @__PURE__ */ l(cr, { ...je(), children: H }),
+    H && /* @__PURE__ */ l(ir, { ...qe(), children: H }),
     /* @__PURE__ */ D(
       "div",
       {
@@ -383,47 +395,47 @@ const wr = 216, mr = (t, r) => {
         tabIndex: s ? -1 : Ce.tabIndex ?? 0,
         children: [
           L && /* @__PURE__ */ l("span", { className: i("icon"), children: L }),
-          /* @__PURE__ */ l("div", { className: i("value-wrapper"), children: Fe() }),
-          Le && /* @__PURE__ */ l(
-            sr,
+          /* @__PURE__ */ l("div", { className: i("value-wrapper"), children: Je() }),
+          Ye && /* @__PURE__ */ l(
+            or,
             {
               className: i("clear-button"),
-              onClick: We,
+              onClick: ze,
               onKeyDown: (e) => {
                 const { keyCode: n } = e;
                 (n === w.ENTER_KEY_CODE || n === w.SPACE_KEY_CODE) && (e.preventDefault(), e.stopPropagation(), ne());
               },
               "aria-label": xe,
-              children: /* @__PURE__ */ l(ar, {})
+              children: /* @__PURE__ */ l(lr, {})
             }
           ),
-          /* @__PURE__ */ l("span", { className: i("arrow"), "aria-hidden": "true", children: /* @__PURE__ */ l(or, {}) })
+          /* @__PURE__ */ l("span", { className: i("arrow"), "aria-hidden": "true", children: /* @__PURE__ */ l(cr, {}) })
         ]
       }
     ),
     u && /* @__PURE__ */ l(
       "div",
       {
-        style: Ye,
+        style: We,
         className: i(
           "select-list",
           { opened: u, "limited-width": Te },
           Ie
         ),
-        ...ze({
-          onKeyDown: Xe,
+        ...Be({
+          onKeyDown: Ge,
           ref: B.setFloating
         }),
         children: I ? ye() : /* @__PURE__ */ l(
-          tr,
+          sr,
           {
             autoHeight: !0,
-            autoHeightMax: wr,
+            autoHeightMax: yr,
             hideTracksWhenNotNeeded: !0,
             ref: (e) => {
               T.current = e;
             },
-            onScrollFrame: He,
+            onScrollFrame: Me,
             children: ye()
           }
         )
@@ -432,5 +444,5 @@ const wr = 216, mr = (t, r) => {
   ] });
 };
 export {
-  Jr as D
+  Zr as D
 };

package/dist/dropdown.js

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

package/dist/index.js

@@ -4,9 +4,9 @@ import { B as y } from "./breadcrumbs-8e5ca8d7.js";
 import { B as T } from "./bubblesLoader-f3ffa240.js";
 import { B as h } from "./button-97d9e587.js";
 import { C as v } from "./checkbox-ed6cc375.js";
-import { D as w } from "./datePicker-fcff097b.js";
+import { D as w } from "./datePicker-e400f01d.js";
 import "react-datepicker";
-import { D as E } from "./dropdown-e85dd323.js";
+import { D as E } from "./dropdown-18c58189.js";
 import { FieldLabel as R } from "./fieldLabel.js";
 import { F as U } from "./fieldNumber-d1b5a7a1.js";
 import { F as J } from "./fieldText-2c4790e1.js";

package/dist/sidePanel.js

@@ -1,74 +1,88 @@
-import { jsxs as a, jsx as s, Fragment as f } from "react/jsx-runtime";
-import { useId as p } from "react";
-import { c as N } from "./bind-06a7ff84.js";
-import { S as b } from "./close-4d480ef7.js";
-import { B as u } from "./baseIconButton-251479f7.js";
-const x = "_active_12osg_15", I = "_header_12osg_35", y = "_title_12osg_62", B = "_description_12osg_73", S = "_content_12osg_82", j = "_footer_12osg_89", $ = "_divider_12osg_95", k = {
-  "side-panel": "_side-panel_12osg_1",
-  active: x,
-  "side-right": "_side-right_12osg_19",
-  "side-left": "_side-left_12osg_27",
-  "header-section": "_header-section_12osg_35",
-  header: I,
-  "header-content": "_header-content_12osg_52",
-  "close-button": "_close-button_12osg_56",
-  title: y,
+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: S,
-  footer: j,
-  divider: $
-}, e = N.bind(k), A = ({
-  className: _,
-  title: i,
-  descriptionComponent: h,
+  content: D,
+  footer: L,
+  divider: P
+}, e = g.bind($), J = ({
+  className: h,
+  title: c,
+  descriptionComponent: r,
   headerComponent: d,
-  contentComponent: c,
+  contentComponent: n,
   footerComponent: o,
-  top: r = 0,
-  side: g = "right",
-  isOpen: n = !0,
+  top: _ = 0,
+  side: b = "right",
+  isOpen: a = !0,
   onClose: t,
-  closeButtonAriaLabel: m = "Close panel"
+  closeButtonAriaLabel: v = "Close panel"
 }) => {
-  const l = p(), v = () => {
+  const l = N(), f = () => {
     t == null || t();
   };
-  return /* @__PURE__ */ a(
+  y(() => {
+    if (!a || !t)
+      return;
+    const m = (z) => {
+      const { keyCode: u } = z;
+      u === E.ESCAPE_KEY_CODE && t();
+    };
+    return document.addEventListener("keydown", m, !1), () => {
+      document.removeEventListener("keydown", m, !1);
+    };
+  }, [a, t]);
+  const j = !!(d || r);
+  return /* @__PURE__ */ s(
     "aside",
     {
-      className: e("side-panel", `side-${g}`, { active: n }, _),
+      className: e("side-panel", `side-${b}`, { active: a }, h),
       role: "dialog",
       "aria-modal": "true",
-      "aria-hidden": !n,
-      "aria-labelledby": i ? l : void 0,
-      style: { top: r, height: `calc(100vh - ${r}px)` },
+      "aria-hidden": !a,
+      "aria-labelledby": c ? l : void 0,
+      style: { top: _, height: `calc(100vh - ${_}px)` },
       tabIndex: -1,
       children: [
-        /* @__PURE__ */ a("div", { className: e("header-section"), children: [
-          (d || i) && /* @__PURE__ */ a("div", { className: e("header"), children: [
-            i ? /* @__PURE__ */ s("span", { id: l, className: e("title"), children: i }) : d,
-            t && /* @__PURE__ */ s(
-              u,
+        /* @__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,
+            t && /* @__PURE__ */ i(
+              k,
               {
                 className: e("close-button"),
-                onClick: v,
-                "aria-label": m,
-                children: /* @__PURE__ */ s(b, {})
+                onClick: f,
+                "aria-label": v,
+                children: /* @__PURE__ */ i(x, {})
               }
             )
           ] }),
-          h
+          r
         ] }),
-        /* @__PURE__ */ s("div", { className: e("divider") }),
-        c && /* @__PURE__ */ s("div", { className: e("content"), children: c }),
-        o && /* @__PURE__ */ a(f, { children: [
-          /* @__PURE__ */ s("div", { className: e("divider") }),
-          /* @__PURE__ */ s("div", { className: e("footer"), children: o })
+        /* @__PURE__ */ i("div", { className: e("divider") }),
+        n && /* @__PURE__ */ i("div", { className: e("content"), children: n }),
+        o && /* @__PURE__ */ s(p, { children: [
+          /* @__PURE__ */ i("div", { className: e("divider") }),
+          /* @__PURE__ */ i("div", { className: e("footer"), children: o })
         ] })
       ]
     }
   );
 };
 export {
-  A as SidePanel
+  J as SidePanel
 };