asma-ui-core 3.54.2 → 3.55.0

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

@@ -1,47 +1,65 @@
-import { cn as f } from "../../../helpers/cn.js";
-import { resolveSx as n } from "../../../helpers/sx.js";
-import { useFocusTrap as v } from "../../../hooks/useFocusTrap.hook.js";
-import { useEffect as w, useRef as h } from "react";
-import { jsx as m, jsxs as b } from "react/jsx-runtime";
-import { FloatingPortal as g } from "@floating-ui/react";
-var k = {
+import { cn as u } from "../../../helpers/cn.js";
+import { resolveSx as c } from "../../../helpers/sx.js";
+import { TOP_LAYER_PROPS as _, TOP_LAYER_RESET_STYLE as L, getOpenModalDialogAncestor as S, useTopLayerRef as T } from "../../../hooks/useTopLayer.hook.js";
+import { useFocusTrap as b } from "../../../hooks/useFocusTrap.hook.js";
+import { useEffect as m, useRef as k } from "react";
+import { jsx as d, jsxs as D } from "react/jsx-runtime";
+import { FloatingPortal as P } from "@floating-ui/react";
+var O = {
   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"
-}, E = {
+}, A = {
   left: "-translate-x-full",
   right: "translate-x-full",
   top: "-translate-y-full",
   bottom: "translate-y-full"
-}, F = ({ open: t = !1, onClose: l, anchor: o = "left", variant: u = "temporary", hideBackdrop: d, className: c, sx: x, PaperProps: a, ModalProps: p, children: y }) => {
-  const e = u === "temporary", i = h(null);
-  return w(() => {
-    if (!t || !e) return;
-    const r = (s) => {
-      s.key === "Escape" && l?.(s, "escapeKeyDown");
+}, K = ({ open: e = !1, onClose: n, anchor: a = "left", variant: p = "temporary", hideBackdrop: v, className: y, sx: x, PaperProps: i, ModalProps: E, anchorEl: h, children: R }) => {
+  const r = p === "temporary", s = S(h), o = s !== void 0, l = k(null), g = T((t) => {
+    l.current = t instanceof HTMLDivElement ? t : null;
+  }), w = o ? g : (t) => {
+    l.current = t;
+  };
+  return m(() => {
+    if (!e || !r) return;
+    const t = (f) => {
+      f.key === "Escape" && n?.(f, "escapeKeyDown");
     };
-    return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
+    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
   }, [
-    t,
     e,
-    l
-  ]), v(t && e, i), e && !t && !p?.keepMounted ? null : /* @__PURE__ */ b(g, { children: [e && !d && t && /* @__PURE__ */ m("div", {
-    className: "fixed inset-0 z-[1200] bg-[#626e7eb2]",
-    onClick: (r) => l?.(r, "backdropClick")
-  }), /* @__PURE__ */ m("div", {
-    ref: i,
-    role: e ? "dialog" : void 0,
-    "aria-modal": e && t ? !0 : void 0,
-    "aria-hidden": !t,
-    className: f("fixed z-[1200] overflow-auto bg-white transition-transform duration-300", t && "shadow-[0px_4px_40px_0px_#22213366]", k[o], !t && f(E[o], "pointer-events-none"), c, a?.className),
-    style: {
-      ...n(x),
-      ...n(a?.sx)
-    },
-    children: y
-  })] });
+    r,
+    n
+  ]), b(e && r, l), m(() => {
+    if (!e || !o) return;
+    const t = l.current;
+    if (!(!t || typeof t.showPopover != "function"))
+      try {
+        t.matches(":popover-open") || t.showPopover();
+      } catch {
+      }
+  }, [e, o]), r && !e && !E?.keepMounted ? null : /* @__PURE__ */ D(P, {
+    root: s,
+    children: [r && !v && e && /* @__PURE__ */ d("div", {
+      className: "fixed inset-0 z-[1200] bg-[#626e7eb2]",
+      onClick: (t) => n?.(t, "backdropClick")
+    }), /* @__PURE__ */ d("div", {
+      ref: w,
+      ...o ? _ : {},
+      role: r ? "dialog" : void 0,
+      "aria-modal": r && e ? !0 : void 0,
+      "aria-hidden": !e,
+      className: u("fixed z-[1200] overflow-auto bg-white transition-transform duration-300", e && "shadow-[0px_4px_40px_0px_#22213366]", O[a], !e && u(A[a], "pointer-events-none"), y, i?.className),
+      style: {
+        ...o ? L : {},
+        ...c(x),
+        ...c(i?.sx)
+      },
+      children: R
+    })]
+  });
 };
 export {
-  F as StyledDrawer
+  K as StyledDrawer
 };

package/dist/components/utils/copy-wrapper/CopyButton.js

@@ -1,32 +1,35 @@
 import { ContentCopyIcon as c } from "../../icons/content-copy-icon/ContentCopyIcon.js";
 import { StyledTooltip as d } from "../../data-display/tooltip/StyledTooltip.js";
 import { StyledButton as m } from "../../inputs/button/StyledButton.js";
-import { useMobileMediaQuery as s } from "../../../hooks/useMediaQuery.hook.js";
+import { useMobileMediaQuery as h } from "../../../hooks/useMediaQuery.hook.js";
 import "react";
 import { jsx as t } from "react/jsx-runtime";
-var v = ({ className: e, contentToCopy: n, locale: i, messageInfo: p, text: r }) => {
-  const o = i === "en" ? "Copy" : "Kopier", l = s();
+var g = ({ className: n, contentToCopy: p, locale: r, messageInfo: a, text: e }) => {
+  const i = r === "en" ? "Copy" : "Kopier", l = h();
   return /* @__PURE__ */ t(d, {
-    title: o,
+    title: i,
     children: /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(m, {
       dataTest: "copy-button",
-      "aria-label": r ?? o,
-      className: e,
+      "aria-label": e ?? i,
+      className: n,
       size: "small",
       variant: "text",
       startIcon: /* @__PURE__ */ t(c, {
         width: 20,
         height: 20
       }),
-      onClick: () => {
-        navigator.clipboard.writeText(n).then(() => {
-          p(i === "no" ? "Kopiert til utklippstavle" : "Copied to clipboard");
-        }).catch((a) => console.error("Copying failed with this: ", a));
+      onMouseDown: (o) => {
+        o.stopPropagation();
       },
-      children: !l && (r ?? o)
+      onClick: (o) => {
+        o.preventDefault(), o.stopPropagation(), navigator.clipboard.writeText(p).then(() => {
+          a(r === "no" ? "Kopiert til utklippstavle" : "Copied to clipboard");
+        }).catch((s) => console.error("Copying failed with this: ", s));
+      },
+      children: !l && (e ?? i)
     }) })
   });
 };
 export {
-  v as CopyButton
+  g as CopyButton
 };

package/dist/datetime/components/date-picker/StyledDatePicker.js

@@ -1,13 +1,13 @@
 import { setPickerPosition as f } from "./helpers.js";
 import { StyledDayPicker as k } from "./components/StyledDayPicker.js";
-import { StyledCalendarPicker as x } from "./components/StyledCalendarPicker.js";
-import { DatePickerInputIndex as u } from "./components/DatePickerInputIndex.js";
+import { StyledCalendarPicker as u } from "./components/StyledCalendarPicker.js";
+import { DatePickerInputIndex as x } from "./components/DatePickerInputIndex.js";
 import { useIsMobileView as v } from "../../hooks/useWindowWidthSize.hook.js";
 import { StyledDrawer as C } from "../../../components/navigation/drawer/StyledDrawer.js";
 import { useBackNavigationClose as b } from "../../hooks/useBackNavigationClose.hook.js";
 import { useState as a } from "react";
 import { Fragment as h, jsx as o, jsxs as y } from "react/jsx-runtime";
-var j = (p) => {
+var E = (p) => {
   const s = v(), [e, n] = a(null), [c, m] = a(!1), [d, i] = a(!1), P = (l) => {
     n(l.currentTarget), f(l, m);
   }, r = () => {
@@ -23,11 +23,11 @@ var j = (p) => {
     onValidatedOnce: () => i(!1)
   };
   return /* @__PURE__ */ y(h, { children: [
-    /* @__PURE__ */ o(u, {
+    /* @__PURE__ */ o(x, {
       datePickerProps: t,
       onClick: P
     }),
-    !s && /* @__PURE__ */ o(x, {
+    !s && /* @__PURE__ */ o(u, {
       datePickerProps: { ...t },
       popoverProps: {
         open: !!e,
@@ -40,8 +40,7 @@ var j = (p) => {
       anchor: "bottom",
       open: !!e,
       onClose: r,
-      sx: { zIndex: 1300 },
-      className: "z-[1300]",
+      anchorEl: e,
       children: /* @__PURE__ */ o("div", {
         className: "mx-auto max-w-[360px] px-2 pb-[max(1.5rem,env(safe-area-inset-bottom))]",
         children: /* @__PURE__ */ o(k, {
@@ -57,5 +56,5 @@ var j = (p) => {
   ] });
 };
 export {
-  j as StyledDatePicker
+  E as StyledDatePicker
 };

package/dist/src/components/navigation/drawer/StyledDrawer.d.ts

@@ -20,6 +20,8 @@ export interface DrawerProps {
     ModalProps?: {
         keepMounted?: boolean;
     };
+    /** Trigger element — when inside a modal `<dialog>`, portal into it so the sheet is interactive. */
+    anchorEl?: Element | null;
     children?: ReactNode;
 }
 /**

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.54.2",
+    "version": "3.55.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",