asma-ui-core 3.108.2 → 3.108.4

package/dist/components/inputs/select-autocomplete/StyledSelectAutocomplete.js

@@ -6,18 +6,19 @@ import { CheckIcon as ft } from "../../icons/check-icon/CheckIcon.js";
 import { PlusIconCircle as mt } from "../../icons/plus-icon-circle/PlusIconCircle.js";
 import { StyledChip as ht } from "../../data-display/chip/StyledChip.js";
 import { StyledCheckbox as de } from "../checkbox/base-ui/StyledCheckbox.js";
-import { LoadingIcon as bt } from "../../../table/shared-components/LoadingIcon.js";
-import U from "./StyledSelectAutocomplete.module.js";
-import { useEffect as ue, useMemo as V, useRef as pe, useState as D } from "react";
-import { jsx as o, jsxs as I } from "react/jsx-runtime";
-import { FloatingPortal as gt, autoUpdate as xt, flip as wt, offset as yt, shift as kt, size as vt, useDismiss as Dt, useFloating as It, useInteractions as Nt, useMergeRefs as fe, useRole as At } from "@floating-ui/react";
-var Ct = (l) => typeof l == "object" && l !== null && "label" in l ? String(l.label) : String(l), St = (l) => typeof l == "object" && l !== null && "disabled" in l && !!l.disabled;
-function Ut({ dataTest: l, options: b, renderInput: me, value: N, onChange: A, getOptionLabel: he, getOptionKey: C, isOptionEqualToValue: B, renderOption: T, renderValue: Y, filterOptions: O, loading: q, loadingText: be = "Loading…", noOptionsText: ge = "No options", disabled: S, readOnly: g, error: xe, helperText: we, size: ye = "small", rowSize: ke = "compact", disableClearable: ve, disableCloseOnSelect: De, popupIcon: Ie, autoHeight: Ne, multiple: Ae, allowSelectAll: M, selectAllLabel: Ce = "Select all", fullWidth: Se, classes: Me, inputValue: R, onInputChange: Re, open: G, onOpen: Pe, onClose: $e, className: _e, wrapperClassName: Le, getOptionDisabled: Ee, slotProps: J }) {
-  const s = Ae === !0, c = he ?? Ct, P = (e, t) => B ? B(e, t) : e === t, [Oe, Fe] = D(!1), a = G ?? Oe, d = (e) => {
+import { useBackCloses as bt } from "../../../hooks/useBackCloses.hook.js";
+import { LoadingIcon as gt } from "../../../table/shared-components/LoadingIcon.js";
+import B from "./StyledSelectAutocomplete.module.js";
+import { useEffect as ue, useMemo as U, useRef as pe, useState as D } from "react";
+import { jsx as r, jsxs as I } from "react/jsx-runtime";
+import { FloatingPortal as xt, autoUpdate as wt, flip as yt, offset as kt, shift as vt, size as Dt, useDismiss as It, useFloating as Nt, useInteractions as Ct, useMergeRefs as fe, useRole as At } from "@floating-ui/react";
+var St = (l) => typeof l == "object" && l !== null && "label" in l ? String(l.label) : String(l), Mt = (l) => typeof l == "object" && l !== null && "disabled" in l && !!l.disabled;
+function Vt({ dataTest: l, options: b, renderInput: me, value: N, onChange: C, getOptionLabel: he, getOptionKey: A, isOptionEqualToValue: V, renderOption: T, renderValue: Y, filterOptions: O, loading: q, loadingText: be = "Loading…", noOptionsText: ge = "No options", disabled: S, readOnly: g, error: xe, helperText: we, size: ye = "small", rowSize: ke = "compact", disableClearable: ve, disableCloseOnSelect: De, popupIcon: Ie, autoHeight: Ne, multiple: Ce, allowSelectAll: M, selectAllLabel: Ae = "Select all", fullWidth: Se, classes: Me, inputValue: R, onInputChange: Re, open: G, onOpen: Pe, onClose: $e, className: _e, wrapperClassName: Le, getOptionDisabled: Ee, slotProps: J }) {
+  const s = Ce === !0, d = he ?? St, P = (e, t) => V ? V(e, t) : e === t, [Oe, Fe] = D(!1), n = G ?? Oe, c = (e) => {
     e && (g || S) || (G === void 0 && Fe(e), e ? Pe?.() : (x(null), $e?.()));
-  }, [je, Q] = D(""), m = R ?? je, $ = (e, t, n) => {
-    R === void 0 && Q(t), Re?.(e, t, n);
-  }, [r, x] = D(null), X = `${l}-listbox`, Z = pe([]), K = pe(null), [ze, He] = D(null), [ee, We] = D(null), i = s ? Array.isArray(N) ? N : [] : [], w = s ? null : N ?? null, te = !s && w !== null ? c(w) : "";
+  }, [je, Q] = D(""), m = R ?? je, $ = (e, t, a) => {
+    R === void 0 && Q(t), Re?.(e, t, a);
+  }, [o, x] = D(null), X = `${l}-listbox`, Z = pe([]), K = pe(null), [ze, He] = D(null), [ee, We] = D(null), i = s ? Array.isArray(N) ? N : [] : [], w = s ? null : N ?? null, te = !s && w !== null ? d(w) : "";
   ue(() => {
     R !== void 0 || s || Q(te);
   }, [
@@ -25,108 +26,113 @@ function Ut({ dataTest: l, options: b, renderInput: me, value: N, onChange: A, g
     s,
     te
   ]);
-  const F = (e) => s ? i.some((t) => P(e, t)) : w !== null && P(e, w), _ = (e) => Ee?.(e) ?? St(e), le = V(() => {
+  const F = (e) => s ? i.some((t) => P(e, t)) : w !== null && P(e, w), _ = (e) => Ee?.(e) ?? Mt(e), le = U(() => {
     const e = [...b];
     if (O) return O(e, { inputValue: m });
-    const t = !s && w !== null ? c(w).toLowerCase() : null;
+    const t = !s && w !== null ? d(w).toLowerCase() : null;
     if (!m || m.toLowerCase() === t) return e;
-    const n = m.toLowerCase();
-    return e.filter((p) => c(p).toLowerCase().includes(n));
+    const a = m.toLowerCase();
+    return e.filter((p) => d(p).toLowerCase().includes(a));
   }, [
     b,
     m,
     O,
     N
-  ]), u = V(() => le.slice(0, 100), [le]), se = u.flatMap((e, t) => _(e) ? [] : [t]), j = M && s ? [-1, ...se] : se, re = u.map((e, t) => t), h = M && s ? [-1, ...re] : re, k = u.findIndex(F);
+  ]), u = U(() => le.slice(0, 100), [le]), se = u.flatMap((e, t) => _(e) ? [] : [t]), j = M && s ? [-1, ...se] : se, oe = u.map((e, t) => t), h = M && s ? [-1, ...oe] : oe, k = u.findIndex(F);
   ue(() => {
-    if (!a) return;
-    const e = r ?? k;
+    if (!n) return;
+    const e = o ?? k;
     if (e < 0) return;
     const t = requestAnimationFrame(() => Z.current[e]?.scrollIntoView({ block: "nearest" }));
     return () => cancelAnimationFrame(t);
   }, [
-    r,
-    a,
+    o,
+    n,
     ee,
     k
   ]);
-  const { refs: L, floatingStyles: Ue, context: oe } = It({
-    open: a,
-    onOpenChange: d,
+  const { refs: L, floatingStyles: Be, context: re } = Nt({
+    open: n,
+    onOpenChange: c,
     placement: "bottom-start",
     strategy: "fixed",
-    whileElementsMounted: xt,
+    whileElementsMounted: wt,
     middleware: [
-      yt(0),
-      wt({ padding: 8 }),
-      kt({ padding: 8 }),
-      vt({ apply({ rects: e, availableHeight: t }) {
+      kt(0),
+      yt({ padding: 8 }),
+      vt({ padding: 8 }),
+      Dt({ apply({ rects: e, availableHeight: t }) {
         He(e.reference.width), We(Ne ? t - 8 : Math.min(t - 8, 320));
       } })
     ]
-  }), { getReferenceProps: Ve, getFloatingProps: Be, getItemProps: Te } = Nt([Dt(oe), At(oe, { role: "listbox" })]), Ye = fe([L.setReference]), ne = V(() => a ? it(L.reference.current) : void 0, [a, L]), z = ct(ne), qe = fe([dt(L.setFloating, z)]), Ge = (e) => j.includes(k) ? k : j[e === 1 ? 0 : j.length - 1] ?? null, Je = (e) => {
+  }), { getReferenceProps: Ue, getFloatingProps: Ve, getItemProps: Te } = Ct([It(re), At(re, { role: "listbox" })]);
+  bt({
+    active: n,
+    requestClose: () => c(!1)
+  });
+  const Ye = fe([L.setReference]), ne = U(() => n ? it(L.reference.current) : void 0, [n, L]), z = ct(ne), qe = fe([dt(L.setFloating, z)]), Ge = (e) => j.includes(k) ? k : j[e === 1 ? 0 : j.length - 1] ?? null, Je = (e) => {
     h.length !== 0 && x((t) => {
-      const n = h.indexOf(t ?? k);
-      return n === -1 ? h[e === 1 ? 0 : h.length - 1] ?? null : h[Math.min(Math.max(n + e, 0), h.length - 1)] ?? null;
+      const a = h.indexOf(t ?? k);
+      return a === -1 ? h[e === 1 ? 0 : h.length - 1] ?? null : h[Math.min(Math.max(a + e, 0), h.length - 1)] ?? null;
     });
-  }, v = (e, t, n = !s || !De) => {
+  }, v = (e, t, a = !s || !De) => {
     if (s) {
       const p = i.some((f) => P(t, f)), y = p ? i.filter((f) => !P(t, f)) : [...i, t];
-      A?.(e, y, p ? "removeOption" : "selectOption", { option: t }), $(e, "", "reset"), n && d(!1);
+      C?.(e, y, p ? "removeOption" : "selectOption", { option: t }), $(e, "", "reset"), a && c(!1);
     } else
-      A?.(e, t, "selectOption", { option: t }), $(e, c(t), "reset"), n && d(!1);
+      C?.(e, t, "selectOption", { option: t }), $(e, d(t), "reset"), a && c(!1);
   }, ae = (e) => {
-    A?.(e, s ? [] : null, "clear", void 0), $(e, "", "clear");
+    C?.(e, s ? [] : null, "clear", void 0), $(e, "", "clear");
   }, H = (e) => {
     const t = b.length > 0 && i.length === b.length;
-    A?.(e, t ? [] : b, t ? "clear" : "selectOption", void 0);
+    C?.(e, t ? [] : b, t ? "clear" : "selectOption", void 0);
   }, Qe = (e) => {
     if (e.key === "Backspace" && m === "" && ie) {
       const t = i[i.length - 1];
       s ? t !== void 0 && v(e, t, !1) : ae(e);
-    } else if (e.key === "Enter" && !a)
-      e.preventDefault(), d(!0);
-    else if (e.key === "Enter" && r === -1)
+    } else if (e.key === "Enter" && !n)
+      e.preventDefault(), c(!0);
+    else if (e.key === "Enter" && o === -1)
       e.preventDefault(), H(e);
-    else if (e.key === "Enter" && r != null && u[r] != null) {
+    else if (e.key === "Enter" && o != null && u[o] != null) {
       e.preventDefault();
-      const t = u[r];
+      const t = u[o];
       _(t) || v(e, t, !0);
     } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-      if (e.preventDefault(), !a) {
-        x(Ge(e.key === "ArrowDown" ? 1 : -1)), d(!0);
+      if (e.preventDefault(), !n) {
+        x(Ge(e.key === "ArrowDown" ? 1 : -1)), c(!0);
         return;
       }
       Je(e.key === "ArrowDown" ? 1 : -1);
     } else if (e.key === "Home" || e.key === "End")
       e.preventDefault(), x(h[e.key === "Home" ? 0 : h.length - 1] ?? null);
-    else if (e.key === " " && r === -1)
+    else if (e.key === " " && o === -1)
       e.preventDefault(), H(e);
-    else if (e.key === " " && r != null && u[r] != null) {
+    else if (e.key === " " && o != null && u[o] != null) {
       e.preventDefault();
-      const t = u[r];
+      const t = u[o];
       _(t) || v(e, t, !1);
-    } else e.key === "Escape" && a ? (e.preventDefault(), e.stopPropagation(), d(!1)) : e.key === "Tab" && d(!1);
+    } else e.key === "Escape" && n ? (e.preventDefault(), e.stopPropagation(), c(!1)) : e.key === "Tab" && c(!1);
   }, ie = !ve && !g && !S && (s ? i.length > 0 : w !== null);
   let ce;
-  a && r != null && (r === -1 || u[r] !== void 0) && (ce = r === -1 ? `${l}-select-all` : `${l}-option-${r}`);
+  n && o != null && (o === -1 || u[o] !== void 0) && (ce = o === -1 ? `${l}-select-all` : `${l}-option-${o}`);
   const Xe = (e) => {
-    e.preventDefault(), !(S || g) && (K.current?.focus(), d(!a));
-  }, Ze = s ? Y ? Y(i, ({ index: e }) => ({ "data-index": e })) : i.map((e, t) => /* @__PURE__ */ o(ht, {
-    dataTest: `selected-chip-${c(e)}`,
-    label: c(e),
+    e.preventDefault(), !(S || g) && (K.current?.focus(), c(!n));
+  }, Ze = s ? Y ? Y(i, ({ index: e }) => ({ "data-index": e })) : i.map((e, t) => /* @__PURE__ */ r(ht, {
+    dataTest: `selected-chip-${d(e)}`,
+    label: d(e),
     readOnly: g,
     deleteButtonTabIndex: -1,
-    onDelete: g ? void 0 : (n) => v(n, e)
-  }, C ? C(e) : `${c(e)}-${t}`)) : void 0, Ke = /* @__PURE__ */ I("span", {
+    onDelete: g ? void 0 : (a) => v(a, e)
+  }, A ? A(e) : `${d(e)}-${t}`)) : void 0, Ke = /* @__PURE__ */ I("span", {
     className: "flex items-center gap-1",
     children: [
-      q && /* @__PURE__ */ o(bt, {
+      q && /* @__PURE__ */ r(gt, {
         width: 20,
         height: 20,
         className: "animate-spin"
       }),
-      ie && /* @__PURE__ */ o("button", {
+      ie && /* @__PURE__ */ r("button", {
         type: "button",
         tabIndex: -1,
         "aria-label": "Clear",
@@ -134,29 +140,29 @@ function Ut({ dataTest: l, options: b, renderInput: me, value: N, onChange: A, g
         className: "invisible flex min-h-6 min-w-6 cursor-pointer items-center justify-center rounded-full border-0 bg-delta-50 group-focus-within:visible",
         onMouseDown: (e) => e.preventDefault(),
         onClick: ae,
-        children: /* @__PURE__ */ o(pt, {
+        children: /* @__PURE__ */ r(pt, {
           width: 20,
           height: 20,
           className: "text-delta-700"
         })
       }),
-      g ? null : /* @__PURE__ */ o("button", {
+      g ? null : /* @__PURE__ */ r("button", {
         type: "button",
         tabIndex: -1,
         "aria-label": "Toggle options",
-        "aria-expanded": a,
+        "aria-expanded": n,
         "data-testid": `${l}-popup-indicator`,
         className: "flex cursor-pointer items-center border-0 bg-transparent",
         onMouseDown: (e) => e.preventDefault(),
         onClick: Xe,
-        children: Ie ?? (s ? /* @__PURE__ */ o(mt, {
+        children: Ie ?? (s ? /* @__PURE__ */ r(mt, {
           width: 24,
           height: 24,
           className: "text-delta-700"
-        }) : /* @__PURE__ */ o(ut, {
+        }) : /* @__PURE__ */ r(ut, {
           width: 24,
           height: 24,
-          className: E(U["select-custom-icon"], a && U["select-custom-icon-open"], "text-delta-700")
+          className: E(B["select-custom-icon"], n && B["select-custom-icon-open"], "text-delta-700")
         }))
       })
     ]
@@ -168,18 +174,18 @@ function Ut({ dataTest: l, options: b, renderInput: me, value: N, onChange: A, g
     helperText: we,
     value: m,
     onChange: (e) => {
-      x(null), $(e, e.target.value, "input"), a || d(!0);
+      x(null), $(e, e.target.value, "input"), n || c(!0);
     },
     onKeyDown: Qe,
     slotProps: {
       htmlInput: {
-        ...Ve(),
+        ...Ue(),
         ref: K,
-        onClick: () => d(!0),
+        onClick: () => c(!0),
         role: "combobox",
         "aria-autocomplete": "list",
-        "aria-expanded": a,
-        "aria-controls": a ? X : void 0,
+        "aria-expanded": n,
+        "aria-controls": n ? X : void 0,
         "aria-activedescendant": ce,
         autoComplete: "off",
         readOnly: g
@@ -190,54 +196,54 @@ function Ut({ dataTest: l, options: b, renderInput: me, value: N, onChange: A, g
         endAdornment: Ke
       }
     }
-  }, tt = E("asma-pressable", "relative box-border flex cursor-pointer items-center gap-x-3 px-3 py-2 text-base text-delta-800", ke === "regular" ? "min-h-12" : "min-h-10", "aria-selected:bg-gama-50 hover:bg-delta-50", "aria-disabled:cursor-default aria-disabled:!bg-transparent aria-disabled:text-delta-300"), lt = (e, t, n) => {
+  }, tt = E("asma-pressable", "relative box-border flex cursor-pointer items-center gap-x-3 px-3 py-2 text-base text-delta-800", ke === "regular" ? "min-h-12" : "min-h-10", "aria-selected:bg-gama-50 hover:bg-delta-50", "aria-disabled:cursor-default aria-disabled:!bg-transparent aria-disabled:text-delta-300"), lt = (e, t, a) => {
     const { key: p, ...y } = e;
     return /* @__PURE__ */ I("li", {
       ...y,
       children: [
-        e["data-active"] !== void 0 && /* @__PURE__ */ o("span", {
+        e["data-active"] !== void 0 && /* @__PURE__ */ r("span", {
           "aria-hidden": "true",
           className: "border-l-solid pointer-events-none absolute inset-y-0 left-0 border-l-[3px] border-focus-ring"
         }),
-        s ? /* @__PURE__ */ o(de, {
-          dataTest: `${l}-${c(t)}-checkbox`,
-          checked: n.selected,
+        s ? /* @__PURE__ */ r(de, {
+          dataTest: `${l}-${d(t)}-checkbox`,
+          checked: a.selected,
           size: "medium",
           checkboxClassName: "!h-4 !w-4",
           hideWrapper: !0,
           decorative: !0
-        }) : /* @__PURE__ */ o("span", {
+        }) : /* @__PURE__ */ r("span", {
           className: "w-5",
-          children: n.selected && /* @__PURE__ */ o(ft, {
+          children: a.selected && /* @__PURE__ */ r(ft, {
             width: 20,
             height: 20,
             className: "text-gama-500"
           })
         }),
-        /* @__PURE__ */ o("span", {
+        /* @__PURE__ */ r("span", {
           className: "line-clamp-2 min-w-0 flex-1 break-words",
-          children: c(t)
+          children: d(t)
         })
       ]
     }, p);
   }, st = (e, t) => {
-    const n = _(e), p = {
+    const a = _(e), p = {
       ...Te({
         onMouseDown: (f) => f.preventDefault(),
         onClick: (f) => {
-          n || v(f, e);
+          a || v(f, e);
         },
         onMouseMove: () => x(null)
       }),
-      key: C ? String(C(e)) : `${c(e)}-${t}`,
+      key: A ? String(A(e)) : `${d(e)}-${t}`,
       ref: (f) => {
         Z.current[t] = f;
       },
       role: "option",
       id: `${l}-option-${t}`,
       "aria-selected": F(e),
-      "aria-disabled": n || void 0,
-      "data-active": r === t ? "" : void 0,
+      "aria-disabled": a || void 0,
+      "data-active": o === t ? "" : void 0,
       className: tt
     }, y = {
       selected: F(e),
@@ -245,61 +251,61 @@ function Ut({ dataTest: l, options: b, renderInput: me, value: N, onChange: A, g
       inputValue: m
     };
     return T ? T(p, e, y) : lt(p, e, y);
-  }, rt = !!(M && s), W = b.length > 0 && i.length === b.length, ot = i.length > 0 && !W;
+  }, ot = !!(M && s), W = b.length > 0 && i.length === b.length, rt = i.length > 0 && !W;
   return /* @__PURE__ */ I("div", {
-    className: E(U.styledSelectAutocompleteWrapper, !Se && "w-auto", Le, _e),
-    children: [me(et), a && /* @__PURE__ */ o(gt, {
+    className: E(B.styledSelectAutocompleteWrapper, !Se && "w-auto", Le, _e),
+    children: [me(et), n && /* @__PURE__ */ r(xt, {
       root: ne,
       children: /* @__PURE__ */ I("ul", {
         ref: qe,
         ...z ? nt : {},
         style: {
           ...z ? at : {},
-          ...Ue,
+          ...Be,
           width: ze ?? void 0,
           maxHeight: ee ?? void 0,
           fontFamily: "Roboto, Helvetica, Arial, sans-serif",
           ...J?.popper?.style
         },
-        ...Be(),
+        ...Ve(),
         id: X,
         role: "listbox",
         "aria-multiselectable": s ? !0 : void 0,
-        className: E("z-[1300] m-0 list-none overflow-auto rounded border border-solid border-delta-300 bg-white px-0 py-2 shadow-[0px_2px_4px_0px_rgba(34,33,51,0.15)]", rt && "py-0", "[&>li:not(:last-child)]:shadow-[inset_0_-1px_0_var(--colors-delta-200)]", Me?.listbox, J?.popper?.className),
+        className: E("z-[1300] m-0 list-none overflow-auto rounded border border-solid border-delta-300 bg-white px-0 py-2 shadow-[0px_2px_4px_0px_rgba(34,33,51,0.15)]", ot && "py-0", "[&>li:not(:last-child)]:shadow-[inset_0_-1px_0_var(--colors-delta-200)]", Me?.listbox, J?.popper?.className),
         children: [M && s && /* @__PURE__ */ I("li", {
           id: `${l}-select-all`,
           role: "option",
           "aria-selected": W,
-          "data-active": r === -1 ? "" : void 0,
+          "data-active": o === -1 ? "" : void 0,
           tabIndex: -1,
           onMouseDown: (e) => e.preventDefault(),
           onClick: H,
           onMouseMove: () => x(null),
           className: "relative box-border flex h-8 cursor-pointer items-center gap-x-3 bg-[var(--colors-gray-10)] px-3 text-xs font-semibold uppercase tracking-[0.2px] text-delta-600 hover:bg-delta-50",
           children: [
-            r === -1 && /* @__PURE__ */ o("span", {
+            o === -1 && /* @__PURE__ */ r("span", {
               "aria-hidden": "true",
               className: "border-l-solid pointer-events-none absolute inset-y-0 left-0 border-l-[3px] border-focus-ring"
             }),
-            /* @__PURE__ */ o(de, {
+            /* @__PURE__ */ r(de, {
               dataTest: `${l}-select-all`,
               checked: W,
-              indeterminate: ot,
+              indeterminate: rt,
               size: "medium",
               checkboxClassName: "!h-4 !w-4",
               hideWrapper: !0,
               decorative: !0
             }),
-            /* @__PURE__ */ o("span", {
+            /* @__PURE__ */ r("span", {
               className: "flex-1 truncate",
-              children: Ce
+              children: Ae
             })
           ]
-        }), q ? /* @__PURE__ */ o("li", {
+        }), q ? /* @__PURE__ */ r("li", {
           role: "presentation",
           className: "px-3 py-2 text-sm text-delta-600",
           children: be
-        }) : u.length === 0 ? /* @__PURE__ */ o("li", {
+        }) : u.length === 0 ? /* @__PURE__ */ r("li", {
           role: "presentation",
           className: "px-3 py-2 text-sm text-delta-600",
           children: ge
@@ -309,5 +315,5 @@ function Ut({ dataTest: l, options: b, renderInput: me, value: N, onChange: A, g
   });
 }
 export {
-  Ut as StyledSelectAutocomplete
+  Vt as StyledSelectAutocomplete
 };

package/dist/components/navigation/drawer/StyledDrawer.js

@@ -1,16 +1,17 @@
-import { cn as c } from "../../../helpers/cn.js";
+import { cn as d } from "../../../helpers/cn.js";
 import { resolveSx as m } from "../../../helpers/sx.js";
-import { TOP_LAYER_PROPS as d, getOpenModalDialogAncestor as O, shouldUsePopoverTopLayer as b } from "../../../hooks/useTopLayer.hook.js";
-import { useFocusTrap as T } from "../../../hooks/useFocusTrap.hook.js";
-import { useEffect as S, useLayoutEffect as L, useRef as h } from "react";
-import { jsx as v, jsxs as k } from "react/jsx-runtime";
-import { FloatingPortal as A } from "@floating-ui/react";
-var D = {
+import { TOP_LAYER_PROPS as v, getOpenModalDialogAncestor as k, shouldUsePopoverTopLayer as T } from "../../../hooks/useTopLayer.hook.js";
+import { OverlayBackOwnerContext as b, requestCloseTopOverlayBack as S, useBackCloses as L } from "../../../hooks/useBackCloses.hook.js";
+import { useFocusTrap as A } from "../../../hooks/useFocusTrap.hook.js";
+import { useEffect as D, useLayoutEffect as C, useRef as h } from "react";
+import { jsx as n, jsxs as B } from "react/jsx-runtime";
+import { FloatingPortal as N } from "@floating-ui/react";
+var U = {
   left: "inset-y-0 left-0 h-full",
   right: "inset-y-0 right-0 h-full",
   top: "inset-x-0 top-0 w-full",
   bottom: "inset-x-0 bottom-0 w-full"
-}, N = {
+}, F = {
   left: "-translate-x-full",
   right: "translate-x-full",
   top: "-translate-y-full",
@@ -19,11 +20,11 @@ var D = {
   margin: 0,
   border: "none",
   padding: 0
-}, U = {
+}, K = {
   ...y,
   width: "auto",
   height: "auto"
-}, C = {
+}, M = {
   left: {
     right: "auto",
     width: "auto"
@@ -40,62 +41,65 @@ var D = {
     top: "auto",
     height: "auto"
   }
-}, G = ({ open: o = !1, onClose: a, anchor: i = "left", variant: E = "temporary", hideBackdrop: _, className: g, sx: w, PaperProps: l, ModalProps: P, anchorEl: x, children: R }) => {
-  const e = E === "temporary", f = O(x), s = h(null), n = h(null), r = e && b(f), u = (t) => {
+}, H = ({ open: o = !1, onClose: l, anchor: s = "left", variant: w = "temporary", hideBackdrop: E, className: P, sx: g, PaperProps: f, ModalProps: _, anchorEl: x, registerBackClose: O = !0, children: R }) => {
+  const e = w === "temporary", u = k(x), a = h(null), p = h(null), r = e && T(u), c = (t) => {
     if (!(!t || !o || !r))
       try {
         typeof t.showPopover == "function" && !t.matches(":popover-open") && t.showPopover();
       } catch {
       }
   };
-  return L(() => {
+  return C(() => {
     if (!(!o || !r))
-      for (const t of [n.current, s.current]) try {
+      for (const t of [p.current, a.current]) try {
         if (!t || typeof t.showPopover != "function") continue;
         t.matches(":popover-open") && t.hidePopover(), t.showPopover();
       } catch {
       }
-  }, [o, r]), S(() => {
+  }, [o, r]), D(() => {
     if (!o || !e) return;
-    const t = (p) => {
-      p.key === "Escape" && a?.(p, "escapeKeyDown");
+    const t = (i) => {
+      i.key !== "Escape" || i.defaultPrevented || (i.preventDefault(), i.stopImmediatePropagation(), S(i));
     };
-    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
-  }, [
-    o,
-    e,
-    a
-  ]), T(o && e, s), e && !o && !P?.keepMounted ? null : /* @__PURE__ */ k(A, {
-    root: f,
-    children: [e && !_ && o && /* @__PURE__ */ v("div", {
-      ref: (t) => {
-        n.current = t, u(t);
-      },
-      ...r ? d : void 0,
-      className: "fixed inset-0 z-[1200] bg-[#626e7eb2]",
-      style: r ? U : void 0,
-      onClick: (t) => a?.(t, "backdropClick")
-    }), /* @__PURE__ */ v("div", {
-      ref: (t) => {
-        s.current = t, u(t);
-      },
-      ...r ? d : void 0,
-      role: e ? "dialog" : void 0,
-      "aria-modal": e && o ? !0 : void 0,
-      "aria-hidden": !o,
-      className: c("fixed z-[1200] overflow-auto bg-white transition-transform duration-300", o && "shadow-[0px_4px_40px_0px_#22213366]", D[i], !o && c(N[i], "pointer-events-none"), g, l?.className),
-      style: {
-        ...r && {
-          ...y,
-          ...C[i]
+    return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
+  }, [o, e]), A(o && e, a), L({
+    active: o && e && O,
+    requestClose: (t) => l ? l(t ?? new Event("overlayBack"), "escapeKeyDown") : !1,
+    ownerRef: a
+  }), e && !o && !_?.keepMounted ? null : /* @__PURE__ */ n(N, {
+    root: u,
+    children: /* @__PURE__ */ B(b.Provider, {
+      value: a,
+      children: [e && !E && o && /* @__PURE__ */ n("div", {
+        ref: (t) => {
+          p.current = t, c(t);
         },
-        ...m(w),
-        ...m(l?.sx)
-      },
-      children: R
-    })]
+        ...r ? v : void 0,
+        className: "fixed inset-0 z-[1200] bg-[#626e7eb2]",
+        style: r ? K : void 0,
+        onClick: (t) => l?.(t, "backdropClick")
+      }), /* @__PURE__ */ n("div", {
+        ref: (t) => {
+          a.current = t, c(t);
+        },
+        ...r ? v : void 0,
+        role: e ? "dialog" : void 0,
+        "aria-modal": e && o ? !0 : void 0,
+        "aria-hidden": !o,
+        className: d("fixed z-[1200] overflow-auto bg-white transition-transform duration-300", o && "shadow-[0px_4px_40px_0px_#22213366]", U[s], !o && d(F[s], "pointer-events-none"), P, f?.className),
+        style: {
+          ...r && {
+            ...y,
+            ...M[s]
+          },
+          ...m(g),
+          ...m(f?.sx)
+        },
+        children: R
+      })]
+    })
   });
 };
 export {
-  G as StyledDrawer
+  H as StyledDrawer
 };