asma-ui-core 3.101.1 → 3.101.3

package/dist/components/feedback/snack-bar/SnackbarProvider.js

@@ -1,40 +1,47 @@
-import { useTopmostOpenModalDialog as a } from "../../../hooks/useTopLayer.hook.js";
-import { StyledAlertSnackbar as n } from "./StyledAlertSnackbar.js";
-import { StyledDefaultSnackbar as i } from "./components/StyledDefaultSnackbar.js";
-import { StyledInfoSnackbar as m } from "./components/StyledInfoSnackbar.js";
-import { useLayoutEffect as r, useState as c } from "react";
-import { jsx as s } from "react/jsx-runtime";
-import { SnackbarProvider as l } from "notistack";
-var d = () => {
-  const [t] = c(() => {
-    const o = document.createElement("div");
-    return o.style.display = "contents", o.setAttribute("data-asma-snackbar-host", ""), o;
-  }), e = a();
-  return r(() => {
-    const o = e ?? document.body;
-    t.parentElement !== o && o.appendChild(t);
-  }, [t, e]), r(() => () => t.remove(), [t]), t;
-}, h = (t) => {
-  const e = d();
-  return /* @__PURE__ */ s(l, {
+import { useTopmostOpenModalDialog as e } from "../../../hooks/useTopLayer.hook.js";
+import { registerSnackbarHost as n } from "./snackbarHost.js";
+import { StyledAlertSnackbar as i } from "./StyledAlertSnackbar.js";
+import { StyledDefaultSnackbar as s } from "./components/StyledDefaultSnackbar.js";
+import { StyledInfoSnackbar as c } from "./components/StyledInfoSnackbar.js";
+import { useLayoutEffect as o, useState as m } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { SnackbarProvider as d, useSnackbar as f } from "notistack";
+var S = () => {
+  const [t] = m(() => {
+    const a = document.createElement("div");
+    return a.style.display = "contents", a.setAttribute("data-asma-snackbar-host", ""), a;
+  }), r = e();
+  return o(() => {
+    const a = r ?? document.body;
+    t.parentElement !== a && a.appendChild(t);
+  }, [t, r]), o(() => () => t.remove(), [t]), t;
+}, b = () => {
+  const { enqueueSnackbar: t, closeSnackbar: r } = f();
+  return o(() => n({
+    enqueueSnackbar: t,
+    closeSnackbar: r
+  }), [t, r]), null;
+}, H = (t) => {
+  const r = S();
+  return /* @__PURE__ */ u(d, {
     ...t,
     Components: {
-      alert: n,
-      info: m,
-      default: i
+      alert: i,
+      info: c,
+      default: s
     },
     autoHideDuration: t.autoHideDuration === void 0 ? 6e3 : t.autoHideDuration,
     anchorOrigin: {
       vertical: "top",
       horizontal: "right"
     },
-    domRoot: e,
+    domRoot: r,
     maxSnack: 3,
     classes: { root: "min-w-fit flex justify-center" },
     className: "w-fit min-w-fit max-w-fit",
-    children: t.children
+    children: [/* @__PURE__ */ l(b, {}), t.children]
   });
 };
 export {
-  h as SnackbarProvider
+  H as SnackbarProvider
 };

package/dist/components/feedback/snack-bar/components/processMessageError.js

@@ -1,4 +1,4 @@
-import { closeSnackbar as t, enqueueSnackbar as a } from "notistack";
+import { closeSnackbar as t, enqueueSnackbar as a } from "../snackbarHost.js";
 function o(r, e) {
   return a({
     variant: "info",

package/dist/components/feedback/snack-bar/components/processMessageInfo.js

@@ -1,4 +1,4 @@
-import { closeSnackbar as r, enqueueSnackbar as t } from "notistack";
+import { closeSnackbar as r, enqueueSnackbar as t } from "../snackbarHost.js";
 function o(a, e) {
   return t({
     variant: "info",

package/dist/components/feedback/snack-bar/index.js

@@ -1,13 +1,12 @@
 import "./StyledAlert.js";
+import "./snackbarHost.js";
 import "./SnackbarProvider.js";
 import "./StyledSnackbar.js";
 import "./processAlertSnackBar.js";
 import "./processDefaultSnackbar.js";
 import "./processInfoSnackbar.js";
 import "./message.js";
-import { closeSnackbar as u, enqueueSnackbar as l, useSnackbar as d } from "notistack";
+import { useSnackbar as $ } from "notistack";
 export {
-  u as closeSnackbar,
-  l as enqueueSnackbar,
-  d as useSnackbar
+  $ as useSnackbar
 };

package/dist/components/feedback/snack-bar/processAlertSnackBar.js

@@ -1,4 +1,4 @@
-import { enqueueSnackbar as a } from "notistack";
+import { enqueueSnackbar as a } from "./snackbarHost.js";
 function t(r) {
   a({
     message: r,

package/dist/components/feedback/snack-bar/processDefaultSnackbar.js

@@ -1,4 +1,4 @@
-import { closeSnackbar as t, enqueueSnackbar as c } from "notistack";
+import { closeSnackbar as t, enqueueSnackbar as c } from "./snackbarHost.js";
 function s(n, a = {}) {
   const { severity: e = "info", ...o } = a, r = c(n, {
     variant: "default",

package/dist/components/feedback/snack-bar/processInfoSnackbar.js

@@ -1,4 +1,4 @@
-import { enqueueSnackbar as e } from "notistack";
+import { enqueueSnackbar as e } from "./snackbarHost.js";
 function a(t) {
   e({
     variant: "alert",

package/dist/components/feedback/snack-bar/snackbarHost.js

@@ -0,0 +1,22 @@
+import { closeSnackbar as c, enqueueSnackbar as s } from "notistack";
+var t;
+function a() {
+  if (typeof window > "u") return t ??= [];
+  const n = window.rawWindow ?? document.defaultView ?? window;
+  return n.__asmaSnackbarHosts__ ??= [];
+}
+function i(n) {
+  return a().push(n), () => {
+    const e = a(), r = e.indexOf(n);
+    r !== -1 && e.splice(r, 1);
+  };
+}
+var o = () => a()[0] ?? {
+  enqueueSnackbar: s,
+  closeSnackbar: c
+}, b = ((...n) => o().enqueueSnackbar(...n)), d = (n) => o().closeSnackbar(n);
+export {
+  d as closeSnackbar,
+  b as enqueueSnackbar,
+  i as registerSnackbarHost
+};

package/dist/components/utils/popover/PopoverAnatomy.js

@@ -1,46 +1,53 @@
-import { cn as p } from "../../../helpers/cn.js";
-import { CloseIcon as m } from "../../icons/close-icon/CloseIcon.js";
-import { StyledButton as c } from "../../inputs/button/StyledButton.js";
-import { Fragment as f, jsx as e, jsxs as t } from "react/jsx-runtime";
-var g = "box-border flex flex-col overflow-hidden rounded-lg bg-white text-delta-700 outline-none shadow-[inset_0_0_0_1px_var(--colors-delta-300),0px_4px_40px_0px_#22213366]", y = ({ dataTest: i, title: a, titleId: d, children: n, viewResultsAction: l, resetAction: r, footerActions: o, closeLabel: s, onClose: x }) => /* @__PURE__ */ t(f, { children: [
-  /* @__PURE__ */ t("div", {
-    className: "relative flex min-h-0 flex-1 flex-col",
-    children: [
-      a && /* @__PURE__ */ e("div", {
-        id: d,
-        className: "shrink-0 truncate pb-1 pl-4 pr-10 pt-2 text-lg font-semibold leading-7 text-delta-800",
-        children: a
-      }),
-      /* @__PURE__ */ e("div", {
-        className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto py-2 pl-4 pr-10",
-        children: n
-      }),
-      /* @__PURE__ */ e("div", {
-        className: "absolute right-0 top-0",
-        children: /* @__PURE__ */ e(c, {
-          dataTest: `${i}-close`,
-          variant: "textGray",
-          type: "button",
-          "aria-label": s,
-          onClick: x,
-          startIcon: /* @__PURE__ */ e(m, {
-            width: 24,
-            height: 24
+import { cn as n } from "../../../helpers/cn.js";
+import { CloseIcon as c } from "../../icons/close-icon/CloseIcon.js";
+import { StyledButton as h } from "../../inputs/button/StyledButton.js";
+import { useScrollGutter as u } from "./useScrollGutter.js";
+import { useRef as v } from "react";
+import { Fragment as g, jsx as e, jsxs as r } from "react/jsx-runtime";
+var _ = 40, j = "box-border flex flex-col overflow-hidden rounded-lg bg-white text-delta-700 outline-none shadow-[inset_0_0_0_1px_var(--colors-delta-300),0px_4px_40px_0px_#22213366]", k = ({ dataTest: d, title: t, titleId: m, children: f, viewResultsAction: l, resetAction: a, footerActions: o, closeLabel: p, onClose: x }) => {
+  const i = v(null), s = u(i);
+  return /* @__PURE__ */ r(g, { children: [
+    /* @__PURE__ */ r("div", {
+      className: "relative flex min-h-0 flex-1 flex-col",
+      children: [
+        t && /* @__PURE__ */ e("div", {
+          id: m,
+          className: "shrink-0 truncate pb-1 pl-4 pr-10 pt-2 text-lg font-semibold leading-7 text-delta-800",
+          children: t
+        }),
+        /* @__PURE__ */ e("div", {
+          ref: i,
+          className: n("flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto py-2 pl-4 [scrollbar-gutter:stable]", !t && s.overflows && "mt-10"),
+          style: { paddingRight: Math.max(0, _ - s.width) },
+          children: f
+        }),
+        /* @__PURE__ */ e("div", {
+          className: "absolute right-0 top-0",
+          children: /* @__PURE__ */ e(h, {
+            dataTest: `${d}-close`,
+            variant: "textGray",
+            type: "button",
+            "aria-label": p,
+            onClick: x,
+            startIcon: /* @__PURE__ */ e(c, {
+              width: 24,
+              height: 24
+            })
           })
         })
-      })
-    ]
-  }),
-  (l ?? r) && /* @__PURE__ */ t("div", {
-    className: p("flex shrink-0 items-start p-1", l ? "justify-between" : "justify-end"),
-    children: [l, r]
-  }),
-  o && /* @__PURE__ */ e("div", {
-    className: "flex shrink-0 flex-col items-end p-3",
-    children: o
-  })
-] });
+      ]
+    }),
+    (l ?? a) && /* @__PURE__ */ r("div", {
+      className: n("flex shrink-0 items-start p-1", l ? "justify-between" : "justify-end"),
+      children: [l, a]
+    }),
+    o && /* @__PURE__ */ e("div", {
+      className: "flex shrink-0 flex-col items-end p-3",
+      children: o
+    })
+  ] });
+};
 export {
-  g as POPOVER_SURFACE_CLASSNAME,
-  y as PopoverAnatomy
+  j as POPOVER_SURFACE_CLASSNAME,
+  k as PopoverAnatomy
 };

package/dist/components/utils/popover/useScrollGutter.js

@@ -0,0 +1,33 @@
+import { useLayoutEffect as v, useState as l } from "react";
+var w = {
+  width: 0,
+  overflows: !1
+}, h = (s) => {
+  const [f, u] = l(w);
+  return v(() => {
+    const e = s.current;
+    if (!e) return;
+    const t = () => {
+      const r = e.offsetWidth - e.clientWidth, d = e.scrollHeight > e.clientHeight;
+      u((n) => n.width === r && n.overflows === d ? n : {
+        width: r,
+        overflows: d
+      });
+    };
+    if (t(), typeof ResizeObserver > "u" || typeof MutationObserver > "u") return;
+    const o = new ResizeObserver(t), i = () => {
+      o.observe(e);
+      for (const r of Array.from(e.children)) o.observe(r);
+    };
+    i();
+    const c = new MutationObserver(() => {
+      i(), t();
+    });
+    return c.observe(e, { childList: !0 }), window.addEventListener("resize", t), () => {
+      o.disconnect(), c.disconnect(), window.removeEventListener("resize", t);
+    };
+  }, [s]), f;
+};
+export {
+  h as useScrollGutter
+};