se-design 1.0.84 → 1.0.85-dev.1

package/dist/index19.js

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