se-design 1.0.77 → 1.0.78-dev1

package/dist/index19.js

@@ -1,32 +1,32 @@
-import B, { forwardRef as lt, useState as O, useRef as G, useEffect as I, useImperativeHandle as ft } from "react";
-import ut from "react-dom";
-import { getA11yNameAttributes as pt } from "./index78.js";
-import { useDismissOnFocusOut as dt } from "./index77.js";
-import { getFirstFocusableElement as A, getLastFocusableElement as mt, getFocusableElements as vt, FOCUSABLE_WITH_ROLES_SELECTOR as wt } from "./index71.js";
+import H, { forwardRef as ue, useState as D, useRef as J, useEffect as B, useImperativeHandle as pe } from "react";
+import de from "react-dom";
+import { getA11yNameAttributes as me } from "./index78.js";
+import { useDismissOnFocusOut as ve } from "./index77.js";
+import { getFirstFocusableElement as O, getLastFocusableElement as we, getFocusableElements as ge, FOCUSABLE_WITH_ROLES_SELECTOR as he } from "./index71.js";
 import "./index72.js";
 function N() {
-  return N = Object.assign ? Object.assign.bind() : function(y) {
-    for (var E = 1; E < arguments.length; E++) {
-      var d = arguments[E];
-      for (var b in d) ({}).hasOwnProperty.call(d, b) && (y[b] = d[b]);
+  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 y;
+    return b;
   }, N.apply(null, arguments);
 }
-const Pt = /* @__PURE__ */ lt(({
-  className: y = "",
-  automationId: E = "",
+const Re = /* @__PURE__ */ ue(({
+  className: b = "",
+  automationId: y = "",
   position: d = "bottom-center",
-  popoverContentAutomationId: b = "",
-  contentWidth: H = "max",
-  renderPopoverContents: T,
-  renderPopoverSrcElement: J,
-  onPopoverToggle: C,
+  popoverContentAutomationId: h = "",
+  contentWidth: R = "max",
+  renderPopoverContents: C,
+  renderPopoverSrcElement: Q,
+  onPopoverToggle: M,
   isPopoverOpen: z,
-  disabled: k = !1,
+  disabled: E = !1,
   isWithPortal: f = !1,
-  ariaLabel: Q,
-  ariaLabelledBy: Y,
+  ariaLabel: Y,
+  ariaLabelledBy: Z,
   sourceRole: K = "button",
   popoverContentStyleProperty: _ = {
     zIndex: 1e3,
@@ -35,187 +35,186 @@ const Pt = /* @__PURE__ */ lt(({
     backgroundColor: "var(--color-white)"
   },
   disableClickToggle: w = !1,
-  noBorder: Z = !1,
+  noBorder: ee = !1,
   disableAutoClose: m = !1,
-  focusFirstOnOpen: tt = !1,
-  ...et
-}, ot) => {
-  const [i, u] = O(!1), [h, $] = O(d), [nt, U] = O(!1), l = G(null), a = G(null), rt = pt({
-    ariaLabel: Q,
-    ariaLabelledBy: Y,
+  focusFirstOnOpen: te = !1,
+  ...oe
+}, ne) => {
+  const [i, u] = D(!1), [k, $] = D(d), [re, T] = D(!1), l = J(null), a = J(null), se = me({
+    ariaLabel: Y,
+    ariaLabelledBy: Z,
     ariaDescribedBy: void 0
     // Popover doesn't support describedBy yet
   }), {
-    onBlurCapture: st
-  } = dt({
+    onBlurCapture: ie
+  } = ve({
     disabled: !i || m || f,
     onFocusOut: () => u(!1),
     closeOnEscape: !1
-  }), [x, P] = O({
+  }), [x, F] = D({
     top: 0,
     left: 0,
     srcWidth: 0
-  }), D = (t = "bottom-center") => {
+  }), [ce, U] = D(!1), L = (e = "bottom-center") => {
     if (!l.current) return {
       top: 0,
       left: 0,
       srcWidth: 0
     };
-    let o = t;
-    const e = l.current.getBoundingClientRect(), s = window.innerWidth, c = window.innerHeight;
+    let o = e;
+    const t = l.current.getBoundingClientRect(), s = window.innerWidth, c = window.innerHeight;
     let n = 0, r = 0;
     switch (o) {
       case "bottom-left":
-        n = e.bottom, r = e.left;
+        n = t.bottom, r = t.left;
         break;
       case "bottom-right":
-        n = e.bottom, r = e.right - e.width * 0.5;
+        n = t.bottom, r = t.right - t.width * 0.5;
         break;
       case "bottom-center":
-        n = e.bottom, r = e.left + e.width / 2;
+        n = t.bottom, r = t.left + t.width / 2;
         break;
       case "top-left":
-        n = e.top - e.height * 1.9, r = e.left;
+        n = t.top - t.height * 1.9, r = t.left;
         break;
       case "top-right":
-        n = e.top - e.height * 1.9, r = e.right - e.width * 0.5;
+        n = t.top - t.height * 1.9, r = t.right - t.width * 0.5;
         break;
       case "top-center":
-        n = e.top - e.height * 1.9, r = e.left + e.width / 2;
+        n = t.top - t.height * 1.9, r = t.left + t.width / 2;
         break;
       default:
-        n = e.bottom, r = e.left;
+        n = t.bottom, r = t.left;
         break;
     }
-    const p = a.current?.getBoundingClientRect(), g = p?.width || 0, v = p?.height || 0;
+    const p = a.current?.getBoundingClientRect(), g = (R === "full" ? t.width : p?.width) || 0, v = p?.height || 0;
     if ((o === "bottom-center" || o === "top-center") && (r = r - g / 2), r + g > s && (r = Math.max(0, s - g)), r < 0 && (r = 0), n + v > c) {
-      const R = e.top, at = c - e.bottom;
-      R >= v || R > at ? (n = e.top - v, n < 0 && (n = 0)) : n = Math.max(0, c - v);
+      const P = t.top, fe = c - t.bottom;
+      P >= v || P > fe ? (n = t.top - v, n < 48 && (n = 48)) : n = Math.max(48, c - v);
     }
-    return n < 0 && (n = e.bottom, n + v > c && (n = Math.max(0, c - v))), {
-      top: n,
-      left: r,
-      srcWidth: e.width
+    return n < 48 && (n = t.bottom, n + v > c && (n = Math.max(48, c - v))), {
+      top: Math.round(n),
+      left: Math.round(r),
+      srcWidth: t.width
     };
   };
-  I(() => {
-    if (C && C(i), i && !f)
-      return m || document.body.addEventListener("click", M, !0), it(), () => {
-        m || document.body.removeEventListener("click", M, !0);
+  B(() => {
+    if (M && M(i), i && !f)
+      return m || document.body.addEventListener("click", V, !0), ae(), () => {
+        m || document.body.removeEventListener("click", V, !0);
       };
     if (i && f) {
-      m ? window.addEventListener("scroll", X) : (document.body.addEventListener("click", S, !0), window.addEventListener("scroll", S)), window.addEventListener("resize", V);
-      const t = setTimeout(() => {
-        const e = D(h);
-        L(), e && P(e);
-      }, 0), o = setTimeout(() => {
-        const e = D(h);
-        e && P(e);
-      }, 10);
-      return () => {
-        m ? window.removeEventListener("scroll", X) : (document.body.removeEventListener("click", S, !0), window.removeEventListener("scroll", S)), window.removeEventListener("resize", V), clearTimeout(t), clearTimeout(o);
+      m ? window.addEventListener("scroll", X) : (document.body.addEventListener("click", S, !0), window.addEventListener("scroll", S)), window.addEventListener("resize", q), A();
+      let e, o;
+      return e = requestAnimationFrame(() => {
+        o = requestAnimationFrame(() => {
+          const t = L(k);
+          t && F(t), U(!0);
+        });
+      }), () => {
+        m ? window.removeEventListener("scroll", X) : (document.body.removeEventListener("click", S, !0), window.removeEventListener("scroll", S)), window.removeEventListener("resize", q), cancelAnimationFrame(e), cancelAnimationFrame(o), U(!1);
       };
     }
   }, [i, f, m]);
-  const L = () => {
+  const A = () => {
     if (!l.current) {
-      U(!1);
+      T(!1);
       return;
     }
-    const t = l.current.getBoundingClientRect(), o = window.innerHeight, e = window.innerWidth, s = t.top < o && t.bottom > 0 && t.left < e && t.right > 0;
-    U(s);
+    const e = l.current.getBoundingClientRect(), o = window.innerHeight, t = window.innerWidth, s = e.top < o && e.bottom > 0 && e.left < t && e.right > 0;
+    T(s);
   };
-  I(() => {
+  B(() => {
     u(z ?? !1);
-  }, [z]), I(() => {
+  }, [z]), B(() => {
     i && setTimeout(() => {
-      const t = A({
+      const e = O({
         container: a.current,
         includeRoles: !0
       });
-      t && (tt || document.activeElement === l.current) && t.focus();
+      e && (te || document.activeElement === l.current) && e.focus();
     }, f ? 60 : 0);
   }, [i]);
-  const it = () => {
+  const ae = () => {
     if (!a.current) return;
-    const t = a.current.getBoundingClientRect(), o = window.innerHeight;
-    t?.bottom > o ? $(d.includes("left") ? "top-left" : d.includes("right") ? "top-right" : "top-center") : t?.top < 0 && $(d.includes("left") ? "bottom-left" : d.includes("right") ? "bottom-right" : "bottom-center");
-  }, M = (t) => {
+    const e = a.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");
+  }, V = (e) => {
     const o = l.current;
     if (!o) return;
-    const e = t.target, s = o.contains(e), c = a.current?.contains(e), r = e.closest?.(".se-design-popover-wrapper"), p = r && r !== o, g = a.current?.contains(r);
+    const t = e.target, s = o.contains(t), c = a.current?.contains(t), r = t.closest?.(".se-design-popover-wrapper"), p = r && r !== o, g = a.current?.contains(r);
     m || (!s && !c || p && !g) && u(!1);
-  }, S = (t) => {
-    const o = l.current, e = a.current;
+  }, S = (e) => {
+    const o = l.current, t = a.current;
     if (!o) return;
-    if (L(), t.type === "scroll" && i) {
-      const R = D(h);
-      R && P(R);
+    if (A(), e.type === "scroll" && i) {
+      const P = L(k);
+      P && F(P);
     }
-    const s = t.target, c = o.contains(s), n = e?.contains(s), p = s.closest?.(".se-design-popover-wrapper"), g = p && p !== o, v = a.current?.contains(p);
+    const s = e.target, c = o.contains(s), n = t?.contains(s), p = s.closest?.(".se-design-popover-wrapper"), g = p && p !== o, v = a.current?.contains(p);
     m || (!c && !n || g && !v) && u(!1);
-  }, V = () => {
+  }, q = () => {
     if (i && f && l.current) {
-      L();
-      const t = D(h);
-      t && P(t);
+      A();
+      const e = L(k);
+      e && F(e);
     }
   }, X = () => {
     if (i && f && l.current) {
-      L();
-      const t = D(h);
-      t && P(t);
+      A();
+      const e = L(k);
+      e && F(e);
     }
-  }, F = (t = !1) => {
+  }, I = (e = !1) => {
     const o = i;
-    u((e) => !e), !o && t && setTimeout(() => {
-      if (t === "last") {
-        const e = mt({
+    u((t) => !t), !o && e && setTimeout(() => {
+      if (e === "last") {
+        const t = we({
           container: a.current,
           includeRoles: !0
         });
-        e && e.focus();
+        t && t.focus();
       } else {
-        const e = A({
+        const t = O({
           container: a.current,
           includeRoles: !0
         });
-        e && e.focus();
+        t && t.focus();
       }
     }, 50);
-  }, j = (t, o) => {
+  }, j = (e, o) => {
     if (!o) return;
-    const e = document.activeElement;
-    if (e?.tagName === "INPUT" || e?.tagName === "TEXTAREA" || e?.tagName === "SELECT")
+    const t = document.activeElement;
+    if (t?.tagName === "INPUT" || t?.tagName === "TEXTAREA" || t?.tagName === "SELECT")
       return;
-    const s = Array.from(o.querySelectorAll(wt)).filter((r) => {
+    const s = Array.from(o.querySelectorAll(he)).filter((r) => {
       const p = window.getComputedStyle(r);
       return !r.hasAttribute("disabled") && r.getAttribute("aria-disabled") !== "true" && p.display !== "none" && p.visibility !== "hidden" && (r.tabIndex >= 0 || r.hasAttribute("role"));
     });
     if (s.length === 0) return;
     const c = s.findIndex((r) => r === document.activeElement);
     let n = -1;
-    t.key === "ArrowDown" ? (t.preventDefault(), t.stopPropagation(), n = c < s.length - 1 ? c + 1 : 0) : t.key === "ArrowUp" ? (t.preventDefault(), t.stopPropagation(), n = c > 0 ? c - 1 : s.length - 1) : t.key === "Home" ? (t.preventDefault(), t.stopPropagation(), n = 0) : t.key === "End" && (t.preventDefault(), t.stopPropagation(), n = s.length - 1), n >= 0 && s[n] ? s[n].focus() : c === -1 && s.length > 0 && s[0].focus();
-  }, W = (t) => {
-    if (t.key === "Escape")
-      t.preventDefault(), t.stopPropagation(), u(!1), l.current?.focus();
-    else if (t.key === "Tab") {
-      if (u(!1), t.shiftKey)
-        t.preventDefault(), l.current?.focus();
+    e.key === "ArrowDown" ? (e.preventDefault(), e.stopPropagation(), n = c < s.length - 1 ? c + 1 : 0) : e.key === "ArrowUp" ? (e.preventDefault(), e.stopPropagation(), n = c > 0 ? c - 1 : s.length - 1) : e.key === "Home" ? (e.preventDefault(), e.stopPropagation(), n = 0) : e.key === "End" && (e.preventDefault(), e.stopPropagation(), n = s.length - 1), n >= 0 && s[n] ? s[n].focus() : c === -1 && s.length > 0 && s[0].focus();
+  }, W = (e) => {
+    if (e.key === "Escape")
+      e.preventDefault(), e.stopPropagation(), u(!1), l.current?.focus();
+    else if (e.key === "Tab") {
+      if (u(!1), e.shiftKey)
+        e.preventDefault(), l.current?.focus();
       else if (f) {
-        t.preventDefault();
-        const o = l.current, e = vt({
+        e.preventDefault();
+        const o = l.current, t = ge({
           container: document.body,
           filterHidden: !0
-        }), s = o ? e.indexOf(o) : -1, c = e[s + 1];
+        }), s = o ? t.indexOf(o) : -1, c = t[s + 1];
         c ? c.focus() : o?.focus();
       }
-    } else t.key === "ArrowDown" || t.key === "ArrowUp" || t.key === "Home" || t.key === "End" ? j(t, a.current) : (t.key === "Enter" || t.key === " ") && t.stopPropagation();
+    } else e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End" ? j(e, a.current) : (e.key === "Enter" || e.key === " ") && e.stopPropagation();
   };
-  ft(ot, () => ({
-    togglePopover: F
+  pe(ne, () => ({
+    togglePopover: I
   }), []);
-  const ct = {
+  const le = {
     "bottom-left": {
       left: "0",
       top: "100%"
@@ -242,86 +241,87 @@ const Pt = /* @__PURE__ */ lt(({
       transform: "translateX(-50%)",
       bottom: "100%"
     }
-  }, q = Z ? "" : "shadow-md border rounded-md";
-  return /* @__PURE__ */ B.createElement("div", N({
-    className: "se-design-popover-wrapper cursor-pointer relative focus-outline rounded-md" + (y.length > 0 ? ` ${y}` : "") + (i ? " open" : "") + (k ? " opacity-50 cursor-not-allowed pointer-events-none" : ""),
+  }, G = ee ? "" : "shadow-md border rounded-md";
+  return /* @__PURE__ */ H.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: l,
-    onClick: (t) => {
-      k || w || (t.stopPropagation(), F());
+    onClick: (e) => {
+      E || w || (e.stopPropagation(), I());
     },
-    onKeyDown: (t) => {
-      if (!(k || w))
-        if (t.key === "Enter" || t.key === " ") {
-          t.preventDefault(), t.stopPropagation();
+    onKeyDown: (e) => {
+      if (!(E || w))
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault(), e.stopPropagation();
           const o = i;
-          F(), o || setTimeout(() => {
-            const e = A({
+          I(), o || setTimeout(() => {
+            const t = O({
               container: a.current,
               includeRoles: !0
             });
-            e && e.focus();
+            t && t.focus();
           }, f ? 60 : 0);
-        } else if (t.key === "Escape" && i)
-          t.preventDefault(), t.stopPropagation(), u(!1);
-        else if ((t.key === "ArrowDown" || t.key === "ArrowUp") && i) {
+        } else if (e.key === "Escape" && i)
+          e.preventDefault(), e.stopPropagation(), u(!1);
+        else if ((e.key === "ArrowDown" || e.key === "ArrowUp") && i) {
           const o = a.current;
-          o && j(t, o);
-        } else t.key === "ArrowDown" && !i && (t.preventDefault(), t.stopPropagation(), u(!0), setTimeout(() => {
-          const o = A({
+          o && j(e, o);
+        } else e.key === "ArrowDown" && !i && (e.preventDefault(), e.stopPropagation(), u(!0), setTimeout(() => {
+          const o = O({
             container: a.current,
             includeRoles: !0
           });
           o && o.focus();
         }, 0));
     },
-    onBlurCapture: st,
-    onBlur: (t) => {
+    onBlurCapture: ie,
+    onBlur: (e) => {
       if (!i || m || !f) return;
-      const o = t.relatedTarget, e = !!(o && l.current?.contains(o)), s = !!(o && a.current?.contains(o));
-      !e && !s && u(!1);
+      const o = e.relatedTarget, t = !!(o && l.current?.contains(o)), s = !!(o && a.current?.contains(o));
+      !t && !s && u(!1);
     },
     role: w ? "none" : K,
     "aria-expanded": w ? void 0 : i ? "true" : "false",
     "aria-haspopup": w ? void 0 : K === "combobox" ? "listbox" : "true",
-    tabIndex: k || w ? -1 : 0,
-    "aria-disabled": w ? void 0 : k ? "true" : "false"
-  }, rt, {
-    "data-automation-id": E
-  }, et), J({
+    tabIndex: E || w ? -1 : 0,
+    "aria-disabled": w ? void 0 : E ? "true" : "false"
+  }, se, {
+    "data-automation-id": y
+  }, oe), Q({
     displayPopover: i,
-    togglePopover: F
-  }), i && !f && /* @__PURE__ */ B.createElement("div", {
-    className: `popover-content absolute ${q} z-[1000] ${H == "full" ? "w-full" : "w-max"}`,
+    togglePopover: I
+  }), i && !f && /* @__PURE__ */ H.createElement("div", {
+    className: `popover-content absolute ${G} z-[1000] ${R == "full" ? "w-full" : "w-max"}`,
     style: {
       ..._,
-      ...ct[h]
+      ...le[k]
     },
-    onClick: (t) => t.stopPropagation(),
+    onClick: (e) => e.stopPropagation(),
     onKeyDown: W,
     ref: a,
-    "data-automation-id": b
-  }, T({
+    "data-automation-id": h
+  }, C({
     closePopoverCb: () => u(!1)
-  })), f && i && nt && /* @__PURE__ */ ut.createPortal(/* @__PURE__ */ B.createElement("div", {
-    className: `popover-content-with-portal z-[2002] ${q} ${H == "full" ? "" : "w-max"}`,
+  })), f && i && re && /* @__PURE__ */ de.createPortal(/* @__PURE__ */ H.createElement("div", {
+    className: `popover-content-with-portal z-[2002] ${G} ${R == "full" ? "" : "w-max"}`,
     style: {
       position: "fixed",
       top: x.top,
       left: x.left,
-      ...H === "full" && x.srcWidth ? {
+      visibility: ce ? "visible" : "hidden",
+      ...R === "full" && x.srcWidth ? {
         width: `${x.srcWidth}px`
       } : {},
       ..._
     },
-    onClick: (t) => t.stopPropagation(),
+    onClick: (e) => e.stopPropagation(),
     onKeyDown: W,
     ref: a,
-    "data-automation-id": b
-  }, T({
+    "data-automation-id": h
+  }, C({
     closePopoverCb: () => u(!1)
   })), document.body));
 });
 export {
-  Pt as Popover
+  Re as Popover
 };
 //# sourceMappingURL=index19.js.map