se-design 1.0.83-dev.5 → 1.0.83-r-dev.1

package/dist/index19.js

@@ -1,269 +1,239 @@
-import B, { forwardRef as ge, useState as F, useRef as oe, useEffect as M, useImperativeHandle as we } from "react";
-import he from "react-dom";
-import { getA11yNameAttributes as be } from "./index81.js";
-import { useDismissOnFocusOut as Ee } from "./index80.js";
-import { getFirstFocusableElement as R, getLastFocusableElement as ye, getFocusableElements as T, FOCUSABLE_WITH_ROLES_SELECTOR as ke } from "./index71.js";
-import "./index72.js";
-import { useRegisterPortalWithFocusTrap as Pe } from "./index208.js";
-function C() {
-  return C = Object.assign ? Object.assign.bind() : function(b) {
-    for (var E = 1; E < arguments.length; E++) {
-      var m = arguments[E];
-      for (var h in m) ({}).hasOwnProperty.call(m, h) && (b[h] = m[h]);
+import T, { forwardRef as me, useState as F, useRef as Q, useEffect as B, useImperativeHandle as ve } from "react";
+import we from "react-dom";
+import { getA11yNameAttributes as ge } from "./index82.js";
+import { useDismissOnFocusOut as he } from "./index81.js";
+import { getFirstFocusableElement as x, getLastFocusableElement as be, getFocusableElements as ye, FOCUSABLE_WITH_ROLES_SELECTOR as Ee } from "./index75.js";
+import "./index76.js";
+import { useRegisterPortalWithFocusTrap as ke } from "./index208.js";
+function N() {
+  return N = Object.assign ? Object.assign.bind() : function(b) {
+    for (var y = 1; y < arguments.length; y++) {
+      var d = arguments[y];
+      for (var h in d) ({}).hasOwnProperty.call(d, h) && (b[h] = d[h]);
     }
     return b;
-  }, C.apply(null, arguments);
+  }, N.apply(null, arguments);
 }
-const Se = /* @__PURE__ */ ge(({
+const Se = /* @__PURE__ */ me(({
   className: b = "",
-  automationId: E = "",
-  position: m = "bottom-center",
+  automationId: y = "",
+  position: d = "bottom-center",
   popoverContentAutomationId: h = "",
-  contentWidth: D = "max",
-  renderPopoverContents: K,
-  renderPopoverSrcElement: ne,
+  contentWidth: R = "max",
+  renderPopoverContents: M,
+  renderPopoverSrcElement: Z,
   onPopoverToggle: z,
-  isPopoverOpen: q,
-  disabled: y = !1,
-  isWithPortal: f = !1,
-  ariaLabel: re,
-  ariaLabelledBy: se,
-  sourceRole: _ = "button",
-  popupType: $ = "true",
-  popoverContentStyleProperty: U = {
+  isPopoverOpen: C,
+  disabled: E = !1,
+  isWithPortal: u = !1,
+  ariaLabel: ee,
+  ariaLabelledBy: te,
+  sourceRole: q = "button",
+  popupType: oe = "true",
+  popoverContentStyleProperty: K = {
     zIndex: 1e3,
     borderColor: "var(--color-gray-200)",
     color: "var(--color-gray-900)",
     backgroundColor: "var(--color-white)"
   },
-  disableClickToggle: w = !1,
-  noBorder: ce = !1,
-  disableAutoClose: v = !1,
-  focusFirstOnOpen: O = !1,
-  ...ie
-}, ae) => {
-  const [c, p] = F(!1), [k, V] = F(m), [le, X] = F(!1), l = oe(null), i = oe(null);
-  Pe(i, f && c);
-  const ue = be({
-    ariaLabel: re,
-    ariaLabelledBy: se,
+  disableClickToggle: v = !1,
+  noBorder: re = !1,
+  disableAutoClose: m = !1,
+  focusFirstOnOpen: ne = !1,
+  ...se
+}, ie) => {
+  const [i, f] = F(!1), [k, _] = F(d), [ce, $] = F(!1), a = Q(null), c = Q(null);
+  ke(c, u && i);
+  const ae = ge({
+    ariaLabel: ee,
+    ariaLabelledBy: te,
     ariaDescribedBy: void 0
     // Popover doesn't support describedBy yet
   }), {
-    onBlurCapture: fe
-  } = Ee({
-    disabled: !c || v || f,
-    onFocusOut: () => p(!1),
+    onBlurCapture: le
+  } = he({
+    disabled: !i || m || u,
+    onFocusOut: () => f(!1),
     closeOnEscape: !1
-  }), [L, A] = F({
+  }), [D, L] = F({
     top: 0,
     left: 0,
     srcWidth: 0
-  }), [pe, j] = F(!1), P = () => {
-    w ? (R({
-      container: l.current,
+  }), [ue, U] = F(!1), O = () => {
+    v ? (x({
+      container: a.current,
       includeRoles: !0
-    }) ?? l.current)?.focus() : l.current?.focus();
-  }, W = (e) => {
-    p(!1), e?.returnFocus !== !1 && requestAnimationFrame(() => {
-      e?.returnFocusTo ? (e.returnFocusTo instanceof HTMLElement ? e.returnFocusTo : e.returnFocusTo.current)?.focus() : P();
+    }) ?? a.current)?.focus() : a.current?.focus();
+  }, V = (e) => {
+    f(!1), e?.returnFocus !== !1 && requestAnimationFrame(() => {
+      e?.returnFocusTo ? (e.returnFocusTo instanceof HTMLElement ? e.returnFocusTo : e.returnFocusTo.current)?.focus() : O();
     });
-  }, H = (e = "bottom-center") => {
-    if (!l.current) return {
+  }, A = (e = "bottom-center") => {
+    if (!a.current) return {
       top: 0,
       left: 0,
       srcWidth: 0
     };
     let o = e;
-    const t = l.current.getBoundingClientRect(), n = window.innerWidth - document.documentElement.clientWidth, u = window.innerWidth - Math.max(n, 16), a = window.innerHeight;
-    let r = 0, s = 0;
+    const t = a.current.getBoundingClientRect(), r = window.innerWidth, l = window.innerHeight;
+    let n = 0, s = 0;
     switch (o) {
       case "bottom-left":
-        r = t.bottom, s = t.left;
+        n = t.bottom, s = t.left;
         break;
       case "bottom-right":
-        r = t.bottom, s = t.right - t.width * 0.5;
+        n = t.bottom, s = t.right - t.width * 0.5;
         break;
       case "bottom-center":
-        r = t.bottom, s = t.left + t.width / 2;
+        n = t.bottom, s = t.left + t.width / 2;
         break;
       case "top-left":
-        r = t.top - t.height * 1.9, s = t.left;
+        n = t.top - t.height * 1.9, s = t.left;
         break;
       case "top-right":
-        r = t.top - t.height * 1.9, s = t.right - t.width * 0.5;
+        n = t.top - t.height * 1.9, s = t.right - t.width * 0.5;
         break;
       case "top-center":
-        r = t.top - t.height * 1.9, s = t.left + t.width / 2;
+        n = t.top - t.height * 1.9, s = t.left + t.width / 2;
         break;
       default:
-        r = t.bottom, s = t.left;
+        n = t.bottom, s = t.left;
         break;
     }
-    const d = i.current?.getBoundingClientRect(), x = (D === "full" ? Math.max(t.width, d?.width || 0) : d?.width) || 0, g = d?.height || 0;
-    if ((o === "bottom-center" || o === "top-center") && (s = s - x / 2), s + x > u && (s = Math.max(0, u - x)), s < 0 && (s = 0), r + g > a) {
-      const te = t.top, ve = a - t.bottom;
-      te >= g || te > ve ? (r = t.top - g, r < 48 && (r = 48)) : r = Math.max(48, a - g);
+    const p = c.current?.getBoundingClientRect(), g = (R === "full" ? t.width : p?.width) || 0, w = p?.height || 0;
+    if ((o === "bottom-center" || o === "top-center") && (s = s - g / 2), s + g > r && (s = Math.max(0, r - g)), s < 0 && (s = 0), n + w > l) {
+      const P = t.top, de = l - t.bottom;
+      P >= w || P > de ? (n = t.top - w, n < 48 && (n = 48)) : n = Math.max(48, l - w);
     }
-    return r < 48 && (r = t.bottom, r + g > a && (r = Math.max(48, a - g))), {
-      top: Math.round(r),
+    return n < 48 && (n = t.bottom, n + w > l && (n = Math.max(48, l - w))), {
+      top: Math.round(n),
       left: Math.round(s),
       srcWidth: t.width
     };
   };
-  M(() => {
-    if (z && z(c), c && !f)
-      return v || document.body.addEventListener("click", Y, !0), de(), () => {
-        v || document.body.removeEventListener("click", Y, !0);
+  B(() => {
+    if (z && z(i), i && !u)
+      return m || document.body.addEventListener("click", X, !0), fe(), () => {
+        m || document.body.removeEventListener("click", X, !0);
       };
-    if (c && f) {
-      v ? window.addEventListener("scroll", J) : (document.body.addEventListener("click", I, !0), window.addEventListener("scroll", I)), window.addEventListener("resize", G);
-      const e = (n) => {
-        n.key === "Escape" && i.current?.contains(document.activeElement) && (n.preventDefault(), n.stopPropagation(), p(!1), requestAnimationFrame(() => P()));
+    if (i && u) {
+      m ? window.addEventListener("scroll", W) : (document.body.addEventListener("click", H, !0), window.addEventListener("scroll", H)), window.addEventListener("resize", j);
+      const e = (r) => {
+        r.key === "Escape" && c.current?.contains(document.activeElement) && (r.preventDefault(), r.stopPropagation(), f(!1), requestAnimationFrame(() => O()));
       };
       window.addEventListener("keydown", e, !0), S();
       let o, t;
       return o = requestAnimationFrame(() => {
         t = requestAnimationFrame(() => {
-          const n = H(k);
-          n && A(n), j(!0);
+          const r = A(k);
+          r && L(r), U(!0);
         });
       }), () => {
-        v ? window.removeEventListener("scroll", J) : (document.body.removeEventListener("click", I, !0), window.removeEventListener("scroll", I)), window.removeEventListener("resize", G), window.removeEventListener("keydown", e, !0), cancelAnimationFrame(o), cancelAnimationFrame(t), j(!1);
+        m ? window.removeEventListener("scroll", W) : (document.body.removeEventListener("click", H, !0), window.removeEventListener("scroll", H)), window.removeEventListener("resize", j), window.removeEventListener("keydown", e, !0), cancelAnimationFrame(o), cancelAnimationFrame(t), U(!1);
       };
     }
-  }, [c, f, v]);
+  }, [i, u, m]);
   const S = () => {
-    if (!l.current) {
-      X(!1);
+    if (!a.current) {
+      $(!1);
       return;
     }
-    const e = l.current.getBoundingClientRect(), o = window.innerHeight, t = window.innerWidth, n = e.top < o && e.bottom > 0 && e.left < t && e.right > 0;
-    X(n);
+    const e = a.current.getBoundingClientRect(), o = window.innerHeight, t = window.innerWidth, r = e.top < o && e.bottom > 0 && e.left < t && e.right > 0;
+    $(r);
   };
-  M(() => {
-    p(q ?? !1);
-  }, [q]), M(() => {
-    c && setTimeout(() => {
-      const e = R({
-        container: i.current,
+  B(() => {
+    f(C ?? !1);
+  }, [C]), B(() => {
+    i && setTimeout(() => {
+      const e = x({
+        container: c.current,
         includeRoles: !0
       });
-      console.log("[Popover open] focus check:", {
-        hasFocusable: !!e,
-        focusFirstOnOpen: O,
-        isSrcFocused: document.activeElement === l.current,
-        activeEl: document.activeElement?.className?.slice(0, 50),
-        willFocus: !!(e && (O || document.activeElement === l.current)),
-        isWithPortal: f,
-        hasPortalContent: !!i.current
-      }), e && (O || document.activeElement === l.current) && e.focus();
-    }, f ? 60 : 0);
-  }, [c]);
-  const de = () => {
-    if (!i.current) return;
-    const e = i.current.getBoundingClientRect(), o = window.innerHeight;
-    e?.bottom > o ? V(m.includes("left") ? "top-left" : m.includes("right") ? "top-right" : "top-center") : e?.top < 0 && V(m.includes("left") ? "bottom-left" : m.includes("right") ? "bottom-right" : "bottom-center");
-  }, Y = (e) => {
-    const o = l.current;
+      e && (ne || document.activeElement === a.current) && e.focus();
+    }, u ? 60 : 0);
+  }, [i]);
+  const fe = () => {
+    if (!c.current) return;
+    const e = c.current.getBoundingClientRect(), o = window.innerHeight;
+    e?.bottom > o ? _(d.includes("left") ? "top-left" : d.includes("right") ? "top-right" : "top-center") : e?.top < 0 && _(d.includes("left") ? "bottom-left" : d.includes("right") ? "bottom-right" : "bottom-center");
+  }, X = (e) => {
+    const o = a.current;
     if (!o) return;
-    const t = e.target, n = o.contains(t), u = i.current?.contains(t), r = t.closest?.(".se-design-popover-wrapper"), s = r && r !== o, d = i.current?.contains(r);
-    v || (!n && !u || s && !d) && p(!1);
-  }, I = (e) => {
-    const o = l.current, t = i.current;
+    const t = e.target, r = o.contains(t), l = c.current?.contains(t), s = t.closest?.(".se-design-popover-wrapper"), p = s && s !== o, g = c.current?.contains(s);
+    m || (!r && !l || p && !g) && f(!1);
+  }, H = (e) => {
+    const o = a.current, t = c.current;
     if (!o) return;
-    if (S(), e.type === "scroll" && c) {
-      const g = H(k);
-      g && A(g);
+    if (S(), e.type === "scroll" && i) {
+      const P = A(k);
+      P && L(P);
     }
-    const n = e.target, u = o.contains(n), a = t?.contains(n), s = n.closest?.(".se-design-popover-wrapper"), d = s && s !== o, x = i.current?.contains(s);
-    v || (!u && !a || d && !x) && p(!1);
-  }, G = () => {
-    if (c && f && l.current) {
+    const r = e.target, l = o.contains(r), n = t?.contains(r), p = r.closest?.(".se-design-popover-wrapper"), g = p && p !== o, w = c.current?.contains(p);
+    m || (!l && !n || g && !w) && f(!1);
+  }, j = () => {
+    if (i && u && a.current) {
       S();
-      const e = H(k);
-      e && A(e);
+      const e = A(k);
+      e && L(e);
     }
-  }, J = () => {
-    if (c && f && l.current) {
+  }, W = () => {
+    if (i && u && a.current) {
       S();
-      const e = H(k);
-      e && A(e);
+      const e = A(k);
+      e && L(e);
     }
-  }, N = (e = !1) => {
-    const o = c;
-    p((t) => !t), !o && e && setTimeout(() => {
+  }, I = (e = !1) => {
+    const o = i;
+    f((t) => !t), !o && e && setTimeout(() => {
       if (e === "last") {
-        const t = ye({
-          container: i.current,
+        const t = be({
+          container: c.current,
           includeRoles: !0
         });
         t && t.focus();
       } else {
-        const t = R({
-          container: i.current,
+        const t = x({
+          container: c.current,
           includeRoles: !0
         });
         t && t.focus();
       }
     }, 50);
-  }, Q = (e, o) => {
+  }, Y = (e, o) => {
     if (!o) return;
     const t = document.activeElement;
     if (t?.tagName === "INPUT" || t?.tagName === "TEXTAREA" || t?.tagName === "SELECT")
       return;
-    const n = Array.from(o.querySelectorAll(ke)).filter((r) => {
-      const s = window.getComputedStyle(r);
-      return !r.hasAttribute("disabled") && r.getAttribute("aria-disabled") !== "true" && s.display !== "none" && s.visibility !== "hidden" && (r.tabIndex >= 0 || r.hasAttribute("role"));
+    const r = Array.from(o.querySelectorAll(Ee)).filter((s) => {
+      const p = window.getComputedStyle(s);
+      return !s.hasAttribute("disabled") && s.getAttribute("aria-disabled") !== "true" && p.display !== "none" && p.visibility !== "hidden" && (s.tabIndex >= 0 || s.hasAttribute("role"));
     });
-    if (n.length === 0) return;
-    const u = n.findIndex((r) => r === document.activeElement);
-    let a = -1;
-    e.key === "ArrowDown" ? (e.preventDefault(), e.stopPropagation(), a = u < n.length - 1 ? u + 1 : 0) : e.key === "ArrowUp" ? (e.preventDefault(), e.stopPropagation(), a = u > 0 ? u - 1 : n.length - 1) : e.key === "Home" ? (e.preventDefault(), e.stopPropagation(), a = 0) : e.key === "End" && (e.preventDefault(), e.stopPropagation(), a = n.length - 1), console.log("[Popover] arrowNav:", {
-      focusableCount: n.length,
-      currentIndex: u,
-      nextIndex: a,
-      activeEl: document.activeElement?.tagName,
-      activeRole: document.activeElement?.getAttribute("role"),
-      firstEl: n[0]?.tagName + "." + n[0]?.className?.slice(0, 30)
-    }), a >= 0 && n[a] ? n[a].focus() : u === -1 && n.length > 0 && n[0].focus();
-  }, Z = (e) => {
+    if (r.length === 0) return;
+    const l = r.findIndex((s) => s === document.activeElement);
+    let n = -1;
+    e.key === "ArrowDown" ? (e.preventDefault(), e.stopPropagation(), n = l < r.length - 1 ? l + 1 : 0) : e.key === "ArrowUp" ? (e.preventDefault(), e.stopPropagation(), n = l > 0 ? l - 1 : r.length - 1) : e.key === "Home" ? (e.preventDefault(), e.stopPropagation(), n = 0) : e.key === "End" && (e.preventDefault(), e.stopPropagation(), n = r.length - 1), n >= 0 && r[n] ? r[n].focus() : l === -1 && r.length > 0 && r[0].focus();
+  }, G = (e) => {
     if (e.key === "Escape")
-      e.preventDefault(), e.stopPropagation(), p(!1), requestAnimationFrame(() => P());
+      e.preventDefault(), e.stopPropagation(), f(!1), requestAnimationFrame(() => O());
     else if (e.key === "Tab") {
-      if ($ === "dialog") {
-        const o = T({
-          container: i.current,
-          filterHidden: !0
-        }), t = o.indexOf(e.target), n = t === o.length - 1, u = t === 0 || t === -1;
-        if (e.shiftKey && u)
-          e.preventDefault(), p(!1), P();
-        else if (!e.shiftKey && n && (p(!1), f)) {
-          e.preventDefault();
-          const a = l.current, r = T({
-            container: document.body,
-            filterHidden: !0
-          }), s = a ? r.indexOf(a) : -1, d = r[s + 1];
-          d ? d.focus() : a?.focus();
-        }
-      } else if (p(!1), e.shiftKey)
-        e.preventDefault(), P();
-      else if (f) {
+      if (f(!1), e.shiftKey)
+        e.preventDefault(), a.current?.focus();
+      else if (u) {
         e.preventDefault();
-        const o = l.current, t = T({
+        const o = a.current, t = ye({
           container: document.body,
           filterHidden: !0
-        }), n = o ? t.indexOf(o) : -1, u = t[n + 1];
-        u ? u.focus() : o?.focus();
+        }), r = o ? t.indexOf(o) : -1, l = t[r + 1];
+        l ? l.focus() : o?.focus();
       }
-    } else e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End" ? Q(e, i.current) : (e.key === "Enter" || e.key === " ") && e.stopPropagation();
+    } else e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End" ? Y(e, c.current) : (e.key === "Enter" || e.key === " ") && e.stopPropagation();
   };
-  we(ae, () => ({
-    togglePopover: N,
-    focusTrigger: () => l.current?.focus(),
-    element: l.current
+  ve(ie, () => ({
+    togglePopover: I,
+    focusTrigger: () => a.current?.focus(),
+    element: a.current
   }), []);
-  const me = {
+  const pe = {
     "bottom-left": {
       left: "0",
       top: "100%"
@@ -290,90 +260,87 @@ const Se = /* @__PURE__ */ ge(({
       transform: "translateX(-50%)",
       bottom: "100%"
     }
-  }, ee = ce ? "" : "shadow-md border rounded-md";
-  return /* @__PURE__ */ B.createElement("div", C({
-    className: "se-design-popover-wrapper cursor-pointer relative focus-outline rounded-md" + (b.length > 0 ? ` ${b}` : "") + (c ? " open" : "") + (y ? " opacity-50 cursor-not-allowed pointer-events-none" : ""),
-    ref: l,
+  }, J = re ? "" : "shadow-md border rounded-md";
+  return /* @__PURE__ */ T.createElement("div", N({
+    className: "se-design-popover-wrapper cursor-pointer relative focus-outline rounded-md" + (b.length > 0 ? ` ${b}` : "") + (i ? " open" : "") + (E ? " opacity-50 cursor-not-allowed pointer-events-none" : ""),
+    ref: a,
     onClick: (e) => {
-      y || w || (e.stopPropagation(), N());
+      E || v || (e.stopPropagation(), I());
     },
     onKeyDown: (e) => {
-      if (!(y || w))
+      if (!(E || v))
         if (e.key === "Enter" || e.key === " ") {
           e.preventDefault(), e.stopPropagation();
-          const o = c;
-          N(), o || setTimeout(() => {
-            const t = R({
-              container: i.current,
+          const o = i;
+          I(), o || setTimeout(() => {
+            const t = x({
+              container: c.current,
               includeRoles: !0
             });
             t && t.focus();
-          }, f ? 60 : 0);
-        } else if (e.key === "Escape" && c)
-          e.preventDefault(), e.stopPropagation(), p(!1);
-        else if ((e.key === "ArrowDown" || e.key === "ArrowUp") && c) {
-          const o = i.current;
-          console.log("[Popover] arrow on wrapper:", {
-            key: e.key,
-            hasRef: !!o
-          }), o && Q(e, o);
-        } else e.key === "ArrowDown" && !c && (e.preventDefault(), e.stopPropagation(), p(!0), setTimeout(() => {
-          const o = R({
-            container: i.current,
+          }, u ? 60 : 0);
+        } else if (e.key === "Escape" && i)
+          e.preventDefault(), e.stopPropagation(), f(!1);
+        else if ((e.key === "ArrowDown" || e.key === "ArrowUp") && i) {
+          const o = c.current;
+          o && Y(e, o);
+        } else e.key === "ArrowDown" && !i && (e.preventDefault(), e.stopPropagation(), f(!0), setTimeout(() => {
+          const o = x({
+            container: c.current,
             includeRoles: !0
           });
           o && o.focus();
         }, 0));
     },
-    onBlurCapture: fe,
+    onBlurCapture: le,
     onBlur: (e) => {
-      if (!c || v || !f) return;
-      const o = e.relatedTarget, t = !!(o && l.current?.contains(o)), n = !!(o && i.current?.contains(o));
-      !t && !n && p(!1);
+      if (!i || m || !u) return;
+      const o = e.relatedTarget, t = !!(o && a.current?.contains(o)), r = !!(o && c.current?.contains(o));
+      !t && !r && f(!1);
     },
-    role: w ? "none" : _,
-    "aria-expanded": w ? void 0 : c ? "true" : "false",
-    "aria-haspopup": w ? void 0 : _ === "combobox" ? "listbox" : $,
-    tabIndex: y || w ? -1 : 0,
-    "aria-disabled": w ? void 0 : y ? "true" : void 0
-  }, ue, {
-    "data-automation-id": E
-  }, ie), ne({
-    displayPopover: c,
-    togglePopover: N
-  }), c && !f && /* @__PURE__ */ B.createElement("div", {
-    className: `popover-content absolute ${ee} z-[1000] ${D == "full" ? "w-full" : "w-max"}`,
+    role: v ? "none" : q,
+    "aria-expanded": v ? void 0 : i ? "true" : "false",
+    "aria-haspopup": v ? void 0 : q === "combobox" ? "listbox" : oe,
+    tabIndex: E || v ? -1 : 0,
+    "aria-disabled": v ? void 0 : E ? "true" : void 0
+  }, ae, {
+    "data-automation-id": y
+  }, se), Z({
+    displayPopover: i,
+    togglePopover: I
+  }), i && !u && /* @__PURE__ */ T.createElement("div", {
+    className: `popover-content absolute ${J} z-[1000] ${R == "full" ? "w-full" : "w-max"}`,
     style: {
-      ...U,
-      ...me[k]
+      ...K,
+      ...pe[k]
     },
     onClick: (e) => e.stopPropagation(),
-    onKeyDown: Z,
-    ref: i,
+    onKeyDown: G,
+    ref: c,
     "data-automation-id": h
-  }, K({
-    closePopoverCb: W
-  })), f && c && le && /* @__PURE__ */ he.createPortal(/* @__PURE__ */ B.createElement("div", {
-    className: `popover-content-with-portal z-[2002] ${ee} ${D == "full" ? "" : "w-max"}`,
+  }, M({
+    closePopoverCb: V
+  })), u && i && ce && /* @__PURE__ */ we.createPortal(/* @__PURE__ */ T.createElement("div", {
+    className: `popover-content-with-portal z-[2002] ${J} ${R == "full" ? "" : "w-max"}`,
     style: {
       position: "fixed",
-      top: L.top,
-      left: L.left,
-      visibility: pe ? "visible" : "hidden",
+      top: D.top,
+      left: D.left,
+      visibility: ue ? "visible" : "hidden",
       maxHeight: "calc(100vh - 96px)",
-      overflowY: "hidden",
-      ...D === "full" && L.srcWidth ? {
-        width: `${L.srcWidth}px`
+      overflowY: "auto",
+      ...R === "full" && D.srcWidth ? {
+        width: `${D.srcWidth}px`
       } : {},
-      ...U,
+      ...K,
       zIndex: 2002
     },
     onClick: (e) => e.stopPropagation(),
-    onKeyDown: Z,
-    ref: i,
+    onKeyDown: G,
+    ref: c,
     "data-automation-id": h
-  }, K({
-    closePopoverCb: W
+  }, M({
+    closePopoverCb: V
   })), document.body));
 });
 export {