asma-ui-core 3.108.3 → 3.109.0

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
 };

package/dist/components/utils/bottom-sheet/StyledBottomSheet.js

@@ -1,137 +1,177 @@
-import { cn as n } from "../../../helpers/cn.js";
-import { registerOpenModalDialog as A } from "../../../hooks/useTopLayer.hook.js";
-import { CloseIcon as H } from "../../icons/close-icon/CloseIcon.js";
-import { IndeterminateIcon as q } from "../../icons/indeterminate-icon/IndeterminateIcon.js";
-import { StyledButton as I } from "../../inputs/button/StyledButton.js";
-import { useShortViewportMediaQuery as G } from "../../../hooks/useMediaQuery.hook.js";
-import { useDebouncedValue as P } from "../../../hooks/useDebouncedValue.hook.js";
-import { useFocusTrap as Q } from "../../../hooks/useFocusTrap.hook.js";
-import { formatResultsLabel as Y } from "./formatResultsLabel.js";
-import { useBodyScrollLock as z } from "../../../hooks/useBodyScrollLock.hook.js";
-import J from "./StyledBottomSheet.module.js";
-import { useDragToDismiss as K } from "./useDragToDismiss.hook.js";
-import { useEffect as W, useId as X, useLayoutEffect as Z, useRef as d, useState as ee } from "react";
-import { jsx as t, jsxs as i } from "react/jsx-runtime";
-var te = 500, xe = ({ dataTest: r, id: D, open: a, onClose: o, title: s, ariaLabel: L, children: j, viewResultsAction: p, resetAction: F, footerActions: M, resultCount: h, closeLabel: _ = "Lukk", className: C }) => {
-  const b = X(), m = d(null), x = d(null), v = d(null), [u, y] = ee(!1), O = G(), g = d(o);
-  W(() => {
-    g.current = o;
-  }, [o]);
-  const { dragHandleProps: $, dragOffset: w } = K(x, () => {
-    g.current("drag");
+import { cn as d } from "../../../helpers/cn.js";
+import { registerOpenModalDialog as z } from "../../../hooks/useTopLayer.hook.js";
+import { CloseIcon as J } from "../../icons/close-icon/CloseIcon.js";
+import { IndeterminateIcon as W } from "../../icons/indeterminate-icon/IndeterminateIcon.js";
+import { StyledButton as j } from "../../inputs/button/StyledButton.js";
+import { useShortViewportMediaQuery as X } from "../../../hooks/useMediaQuery.hook.js";
+import { OverlayBackOwnerContext as Z, isOverlayBackEnabled as P, requestCloseTopOverlayBack as x, useBackCloses as ee } from "../../../hooks/useBackCloses.hook.js";
+import { useDebouncedValue as te } from "../../../hooks/useDebouncedValue.hook.js";
+import { useFocusTrap as re } from "../../../hooks/useFocusTrap.hook.js";
+import { formatResultsLabel as oe } from "./formatResultsLabel.js";
+import { useBodyScrollLock as ne } from "../../../hooks/useBodyScrollLock.hook.js";
+import ae from "./StyledBottomSheet.module.js";
+import { useDragToDismiss as se } from "./useDragToDismiss.hook.js";
+import { useEffect as y, useId as ie, useLayoutEffect as le, useRef as l, useState as ce } from "react";
+import { jsx as o, jsxs as u } from "react/jsx-runtime";
+var de = 500, Le = ({ dataTest: c, id: T, open: t, onClose: s, title: m, ariaLabel: _, children: q, viewResultsAction: g, resetAction: $, footerActions: A, resultCount: E, closeLabel: U = "Lukk", className: V, registerBackClose: H = !0, ownerRef: K }) => {
+  const k = ie(), i = l(null), S = l(null), N = l(null), R = K ?? i, h = l(!1), [b, L] = ce(!1), G = X(), f = l(s), B = l(t);
+  y(() => {
+    f.current = s, B.current = t;
+  }, [s, t]);
+  const { dragHandleProps: Q, dragOffset: C } = se(S, () => {
+    f.current("drag");
   });
-  z(a), Q(a, m), Z(() => {
-    const e = m.current;
-    if (!a || !e) return;
-    v.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, e.open || e.showModal(), e.focus({ preventScroll: !0 });
-    const U = requestAnimationFrame(() => {
-      y(!0);
-    }), V = A(e);
+  ne(t), re(t, i), y(() => {
+    if (!t) return;
+    const e = (r) => {
+      r.key === "Escape" && (h.current = !0, window.setTimeout(() => {
+        h.current = !1;
+      }, 0));
+    }, n = (r) => {
+      if (r.key !== "Escape" || r.defaultPrevented) return;
+      const a = document.activeElement;
+      a instanceof Element && a.closest("dialog[open]") !== i.current || (r.preventDefault(), r.stopImmediatePropagation(), x(r));
+    };
+    return window.addEventListener("keydown", e, !0), window.addEventListener("keydown", n), () => {
+      window.removeEventListener("keydown", e, !0), window.removeEventListener("keydown", n);
+    };
+  }, [t]), ee({
+    active: t && H,
+    requestClose: () => f.current("escape"),
+    ownerRef: R
+  }), le(() => {
+    const e = i.current;
+    if (!t || !e) return;
+    N.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, e.open || e.showModal(), e.focus({ preventScroll: !0 });
+    const n = requestAnimationFrame(() => {
+      L(!0);
+    }), r = z(e);
     return () => {
-      cancelAnimationFrame(U), V(), y(!1), e.open && e.close();
-      const E = v.current;
-      E?.isConnected && E.focus({ preventScroll: !0 });
+      cancelAnimationFrame(n), r(), L(!1), e.open && e.close();
+      const a = N.current;
+      a?.isConnected && a.focus({ preventScroll: !0 });
+    };
+  }, [t]), y(() => {
+    const e = i.current;
+    if (!e || !t) return;
+    let n = !1;
+    const r = () => {
+      requestAnimationFrame(() => {
+        n = !1, B.current && e.isConnected && !e.open && (e.showModal(), e.focus({ preventScroll: !0 }));
+      });
+    }, a = () => {
+      n || (n = !0, P() && x(), r());
     };
-  }, [a]);
-  const S = Y(P(h, te));
-  if (!a) return null;
-  const T = { close: () => {
-    o("action");
-  } }, l = (e) => typeof e == "function" ? e(T) : e, N = h !== void 0, f = p !== void 0 ? l(p) : N ? /* @__PURE__ */ t(I, {
-    dataTest: `${r}-view-results`,
+    return e.addEventListener("close", a), () => e.removeEventListener("close", a);
+  }, [t]);
+  const O = oe(te(E, de));
+  if (!t) return null;
+  const Y = { close: () => {
+    s("action");
+  } }, p = (e) => typeof e == "function" ? e(Y) : e, I = E !== void 0, w = g !== void 0 ? p(g) : I ? /* @__PURE__ */ o(j, {
+    dataTest: `${c}-view-results`,
     type: "button",
     variant: "text",
     onClick: () => {
-      o("viewResults");
+      s("viewResults");
     },
-    children: S
-  }) : void 0, k = l(F), c = l(M), R = !!(f ?? k), B = w > 0;
-  return /* @__PURE__ */ i("dialog", {
-    ref: m,
-    id: D,
+    children: O
+  }) : void 0, D = p($), v = p(A), F = !!(w ?? D), M = C > 0;
+  return /* @__PURE__ */ o("dialog", {
+    ref: i,
+    id: T,
     tabIndex: -1,
     "aria-modal": "true",
-    "aria-labelledby": s ? b : void 0,
-    "aria-label": s ? void 0 : L,
-    "data-test": r,
-    "data-testid": r,
+    "aria-labelledby": m ? k : void 0,
+    "aria-label": m ? void 0 : _,
+    "data-test": c,
+    "data-testid": c,
     onCancel: (e) => {
-      e.preventDefault(), o("escape");
+      if (e.cancelable && e.preventDefault(), !h.current) {
+        if (!P()) {
+          f.current("escape");
+          return;
+        }
+        x();
+      }
     },
-    className: n(J.StyledBottomSheet, "fixed inset-0 m-0 h-full max-h-none w-full max-w-none flex-col items-center justify-end overflow-hidden border-0 bg-transparent p-0 outline-none open:flex"),
-    children: [/* @__PURE__ */ t("div", {
-      "aria-hidden": "true",
-      "data-testid": `${r}-scrim`,
-      onClick: () => {
-        o("scrim");
-      },
-      className: n("absolute inset-0 bg-[#626e7eb2] transition-opacity duration-[250ms] ease-out motion-reduce:duration-150", u ? "opacity-100" : "opacity-0")
-    }), /* @__PURE__ */ i("div", {
-      ref: x,
-      "data-state": u ? "open" : "closed",
-      style: B ? { transform: `translateY(${w}px)` } : void 0,
-      className: n("relative box-border flex w-full max-w-[640px] flex-col border border-solid border-delta-300 bg-white text-delta-700 outline-none", O ? "h-full max-h-none rounded-none" : "max-h-[90dvh] rounded-t-[28px]", !B && ["ease-out motion-safe:transition-transform motion-safe:duration-[250ms] motion-reduce:transition-opacity motion-reduce:duration-150", u ? "translate-y-0 opacity-100" : "motion-safe:translate-y-full motion-reduce:opacity-0"], C),
-      children: [
-        /* @__PURE__ */ i("div", {
-          className: "border-b-solid shrink-0 border-b border-delta-200 pb-2",
-          children: [/* @__PURE__ */ i("div", {
-            ...$,
-            className: "relative flex h-12 touch-none items-center gap-2 px-2",
-            children: [
-              /* @__PURE__ */ t("div", { className: "min-w-0 flex-1" }),
-              /* @__PURE__ */ t(I, {
-                dataTest: `${r}-close`,
-                variant: "textGray",
-                type: "button",
-                "aria-label": _,
-                onClick: () => {
-                  o("closeButton");
-                },
-                startIcon: /* @__PURE__ */ t(H, {
+    className: d(ae.StyledBottomSheet, "fixed inset-0 m-0 h-full max-h-none w-full max-w-none flex-col items-center justify-end overflow-hidden border-0 bg-transparent p-0 outline-none open:flex"),
+    children: /* @__PURE__ */ u(Z.Provider, {
+      value: R,
+      children: [/* @__PURE__ */ o("div", {
+        "aria-hidden": "true",
+        "data-testid": `${c}-scrim`,
+        onClick: () => {
+          s("scrim");
+        },
+        className: d("absolute inset-0 bg-[#626e7eb2] transition-opacity duration-[250ms] ease-out motion-reduce:duration-150", b ? "opacity-100" : "opacity-0")
+      }), /* @__PURE__ */ u("div", {
+        ref: S,
+        "data-state": b ? "open" : "closed",
+        style: M ? { transform: `translateY(${C}px)` } : void 0,
+        className: d("relative box-border flex w-full max-w-[640px] flex-col border border-solid border-delta-300 bg-white text-delta-700 outline-none", G ? "h-full max-h-none rounded-none" : "max-h-[90dvh] rounded-t-[28px]", !M && ["ease-out motion-safe:transition-transform motion-safe:duration-[250ms] motion-reduce:transition-opacity motion-reduce:duration-150", b ? "translate-y-0 opacity-100" : "motion-safe:translate-y-full motion-reduce:opacity-0"], V),
+        children: [
+          /* @__PURE__ */ u("div", {
+            className: "border-b-solid shrink-0 border-b border-delta-200 pb-2",
+            children: [/* @__PURE__ */ u("div", {
+              ...Q,
+              className: "relative flex h-12 touch-none items-center gap-2 px-2",
+              children: [
+                /* @__PURE__ */ o("div", { className: "min-w-0 flex-1" }),
+                /* @__PURE__ */ o(j, {
+                  dataTest: `${c}-close`,
+                  variant: "textGray",
+                  type: "button",
+                  "aria-label": U,
+                  onClick: () => {
+                    s("closeButton");
+                  },
+                  startIcon: /* @__PURE__ */ o(J, {
+                    width: 24,
+                    height: 24
+                  })
+                }),
+                /* @__PURE__ */ o(W, {
+                  "aria-hidden": "true",
+                  focusable: "false",
                   width: 24,
-                  height: 24
+                  height: 24,
+                  className: "pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-delta-800"
                 })
-              }),
-              /* @__PURE__ */ t(q, {
-                "aria-hidden": "true",
-                focusable: "false",
-                width: 24,
-                height: 24,
-                className: "pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-delta-800"
+              ]
+            }), m && /* @__PURE__ */ o("div", {
+              id: k,
+              className: "truncate px-4 text-lg font-semibold leading-7 text-delta-800",
+              children: m
+            })]
+          }),
+          /* @__PURE__ */ o("div", {
+            className: d("flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto overscroll-contain pl-4 pr-2 pt-2", F || v ? "pb-2" : "pb-[max(0.5rem,env(safe-area-inset-bottom))]"),
+            children: p(q)
+          }),
+          F && /* @__PURE__ */ u("div", {
+            className: d("border-t-solid flex shrink-0 items-start border-t border-delta-200 bg-white p-1", w ? "justify-between" : "justify-end", !v && "pb-[max(0.25rem,env(safe-area-inset-bottom))]"),
+            children: [
+              w,
+              D,
+              I && /* @__PURE__ */ o("span", {
+                className: "sr-only",
+                role: "status",
+                "aria-live": "polite",
+                "aria-atomic": "true",
+                children: O
               })
             ]
-          }), s && /* @__PURE__ */ t("div", {
-            id: b,
-            className: "truncate px-4 text-lg font-semibold leading-7 text-delta-800",
-            children: s
-          })]
-        }),
-        /* @__PURE__ */ t("div", {
-          className: n("flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto overscroll-contain pl-4 pr-2 pt-2", R || c ? "pb-2" : "pb-[max(0.5rem,env(safe-area-inset-bottom))]"),
-          children: l(j)
-        }),
-        R && /* @__PURE__ */ i("div", {
-          className: n("border-t-solid flex shrink-0 items-start border-t border-delta-200 bg-white p-1", f ? "justify-between" : "justify-end", !c && "pb-[max(0.25rem,env(safe-area-inset-bottom))]"),
-          children: [
-            f,
-            k,
-            N && /* @__PURE__ */ t("span", {
-              className: "sr-only",
-              role: "status",
-              "aria-live": "polite",
-              "aria-atomic": "true",
-              children: S
-            })
-          ]
-        }),
-        c && /* @__PURE__ */ t("div", {
-          className: "flex shrink-0 flex-col items-end bg-white p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]",
-          children: c
-        })
-      ]
-    })]
+          }),
+          v && /* @__PURE__ */ o("div", {
+            className: "flex shrink-0 flex-col items-end bg-white p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]",
+            children: v
+          })
+        ]
+      })]
+    })
   });
 };
 export {
-  xe as StyledBottomSheet
+  Le as StyledBottomSheet
 };