@servicetitan/anvil2 1.26.5 → 1.26.7

package/dist/{toast-D-wmh-pM.js → toast-BVHe-A2D.js}

@@ -1,13 +1,12 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createContext, forwardRef, useRef, useState, useEffect, useContext, useCallback, useMemo } from 'react';
+import { createContext, forwardRef, useRef, useState, useEffect, useCallback, useMemo, useContext } from 'react';
+import { u as useMergeRefs } from './useMergeRefs-Bde85AWI-Bde85AWI.js';
 import { c as cx } from './index-tZvMCc77.js';
 import { B as Button } from './Button-DPIUyV2O-DxCH2dlc.js';
 import { A as Alert } from './Alert-BGxnwh4U-ytPHdG2h.js';
 import { P as ProgressBar } from './ProgressBar-BscwJegu-B8smpeOp.js';
 import { u as useSwipe } from './useSwipe-DIUHs7T5-DIUHs7T5.js';
 import { S as SrOnly } from './SrOnly-BXm1DGl3-BJVodjQp.js';
-import { u as useMergeRefs } from './useMergeRefs-Bde85AWI-Bde85AWI.js';
-import { a as ThemeProviderContext, T as ThemeProvider } from './ThemeProvider-C15J9JBA-BiL6I6O0.js';
 
 import './toast.css';/**
  * Convert array of 16 byte values to UUID string format of the form:
@@ -62,29 +61,30 @@ function v4(options, buf, offset) {
   return unsafeStringify(rnds);
 }
 
-const toaster = "_toaster_1ovnt_3";
-const hidden = "_hidden_1ovnt_65";
-const stacked = "_stacked_1ovnt_72";
-const open = "_open_1ovnt_152";
-const close = "_close_1ovnt_153";
-const slideIn = "_slideIn_1ovnt_1";
-const slideOut = "_slideOut_1ovnt_1";
+const toaster = "_toaster_u439w_3";
+const hidden = "_hidden_u439w_18";
+const stacked = "_stacked_u439w_82";
+const open = "_open_u439w_163";
+const close = "_close_u439w_164";
+const slideIn = "_slideIn_u439w_1";
+const slideOut = "_slideOut_u439w_1";
 const styles = {
 	toaster: toaster,
-	"toast-wrapper": "_toast-wrapper_1ovnt_28",
-	"toast-alert": "_toast-alert_1ovnt_42",
-	"alert-action": "_alert-action_1ovnt_47",
-	"message-container": "_message-container_1ovnt_53",
-	"show-extra-toast": "_show-extra-toast_1ovnt_62",
 	hidden: hidden,
+	"toast-stack": "_toast-stack_u439w_21",
+	"toast-wrapper": "_toast-wrapper_u439w_38",
+	"toast-alert": "_toast-alert_u439w_52",
+	"alert-action": "_alert-action_u439w_57",
+	"message-container": "_message-container_u439w_63",
+	"show-extra-toast": "_show-extra-toast_u439w_72",
 	stacked: stacked,
-	"stack-one": "_stack-one_1ovnt_75",
-	"stack-two": "_stack-two_1ovnt_75",
-	"stacked-show-extra": "_stacked-show-extra_1ovnt_91",
-	"stacked-extra": "_stacked-extra_1ovnt_105",
-	"show-more-button-container": "_show-more-button-container_1ovnt_118",
-	"show-collapse-button-container": "_show-collapse-button-container_1ovnt_119",
-	"show-collapse-button": "_show-collapse-button_1ovnt_119",
+	"stack-one": "_stack-one_u439w_85",
+	"stack-two": "_stack-two_u439w_85",
+	"stacked-show-extra": "_stacked-show-extra_u439w_101",
+	"stacked-extra": "_stacked-extra_u439w_115",
+	"show-more-button-container": "_show-more-button-container_u439w_128",
+	"show-collapse-button-container": "_show-collapse-button-container_u439w_129",
+	"show-collapse-button": "_show-collapse-button_u439w_129",
 	open: open,
 	close: close,
 	slideIn: slideIn,
@@ -177,92 +177,7 @@ const useToasts = () => {
   return context;
 };
 
-const toast$1 = () => {
-  const toastMethods = [
-    "info",
-    "success",
-    "warning",
-    "danger",
-    "promise",
-    "update",
-    "dismiss"
-  ];
-  console.error(
-    "Please use one of the following toast methods:\n",
-    ...toastMethods.map((m) => `	toast.${m}()
-`)
-  );
-};
-const TOAST_EVENT_NAME = "hammer-toast";
-const TOAST_TYPES = ["info", "success", "warning", "danger"];
-const methods = {};
-TOAST_TYPES.forEach((type) => {
-  methods[type] = (props) => {
-    const uniqueId = v4();
-    const ToastAddEvent = new CustomEvent(TOAST_EVENT_NAME, {
-      composed: true,
-      detail: {
-        id: uniqueId,
-        eventType: "add",
-        status: type,
-        createdAt: Date.now(),
-        ...props
-      }
-    });
-    dispatchEvent(ToastAddEvent);
-    return uniqueId;
-  };
-});
-const update = (id, props) => {
-  const ToastEvent = new CustomEvent(
-    TOAST_EVENT_NAME,
-    {
-      composed: true,
-      detail: {
-        eventType: "update",
-        id,
-        ...props
-      }
-    }
-  );
-  dispatchEvent(ToastEvent);
-};
-const dismiss = (id) => {
-  const ToastEvent = new CustomEvent(
-    TOAST_EVENT_NAME,
-    {
-      composed: true,
-      detail: {
-        eventType: "dismiss",
-        id
-      }
-    }
-  );
-  dispatchEvent(ToastEvent);
-};
-const promise = async (promise2, toastConfig) => {
-  const id = toast$1.info({ ...toastConfig.loading, duration: false });
-  await Promise.resolve(promise2).then((res) => {
-    toast$1.update(id, {
-      ...toastConfig.success(res),
-      status: "success"
-    });
-  }).catch((err) => {
-    toast$1.update(id, {
-      ...toastConfig.error(err),
-      status: "danger"
-    });
-  });
-  return id;
-};
-toast$1.info = methods.info;
-toast$1.success = methods.success;
-toast$1.warning = methods.warning;
-toast$1.danger = methods.danger;
-toast$1.update = update;
-toast$1.dismiss = dismiss;
-toast$1.promise = promise;
-
+const ANIMATION_DURATION = 300;
 const useShowMoreButtonPositionStyles = () => {
   const { toastHeights, toastsBeforeStack } = useToasts();
   const totalToasts = toastHeights.length;
@@ -371,7 +286,7 @@ const closeToast = (setToasts, setToastHeights, closingToastClassName, id) => {
     );
     setTimeout(() => {
       setToastsAfterClose(setToasts, setToastHeights, id);
-    }, 290);
+    }, ANIMATION_DURATION - 10);
   }
 };
 const useCloseToast = (closingToastClassName) => {
@@ -381,6 +296,92 @@ const useCloseToast = (closingToastClassName) => {
   };
 };
 
+const toast$1 = () => {
+  const toastMethods = [
+    "info",
+    "success",
+    "warning",
+    "danger",
+    "promise",
+    "update",
+    "dismiss"
+  ];
+  console.error(
+    "Please use one of the following toast methods:\n",
+    ...toastMethods.map((m) => `	toast.${m}()
+`)
+  );
+};
+const TOAST_EVENT_NAME = "hammer-toast";
+const TOAST_TYPES = ["info", "success", "warning", "danger"];
+const methods = {};
+TOAST_TYPES.forEach((type) => {
+  methods[type] = (props) => {
+    const uniqueId = v4();
+    const ToastAddEvent = new CustomEvent(TOAST_EVENT_NAME, {
+      composed: true,
+      detail: {
+        id: uniqueId,
+        eventType: "add",
+        status: type,
+        createdAt: Date.now(),
+        ...props
+      }
+    });
+    dispatchEvent(ToastAddEvent);
+    return uniqueId;
+  };
+});
+const update = (id, props) => {
+  const ToastEvent = new CustomEvent(
+    TOAST_EVENT_NAME,
+    {
+      composed: true,
+      detail: {
+        eventType: "update",
+        id,
+        ...props
+      }
+    }
+  );
+  dispatchEvent(ToastEvent);
+};
+const dismiss = (id) => {
+  const ToastEvent = new CustomEvent(
+    TOAST_EVENT_NAME,
+    {
+      composed: true,
+      detail: {
+        eventType: "dismiss",
+        id
+      }
+    }
+  );
+  dispatchEvent(ToastEvent);
+};
+const promise = async (promise2, toastConfig) => {
+  const id = toast$1.info({ ...toastConfig.loading, duration: false });
+  await Promise.resolve(promise2).then((res) => {
+    toast$1.update(id, {
+      ...toastConfig.success(res),
+      status: "success"
+    });
+  }).catch((err) => {
+    toast$1.update(id, {
+      ...toastConfig.error(err),
+      status: "danger"
+    });
+  });
+  return id;
+};
+toast$1.info = methods.info;
+toast$1.success = methods.success;
+toast$1.warning = methods.warning;
+toast$1.danger = methods.danger;
+toast$1.update = update;
+toast$1.dismiss = dismiss;
+toast$1.promise = promise;
+
 const Toast = forwardRef(
   ({
     actions,
@@ -626,140 +627,43 @@ function useHotkeyFocus({
   return { returnFocusRef: previousFocusElement };
 }
 
-const Toaster$1 = forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(ToasterContent, { ...props, ...ref }) });
-  }
-);
-const ToasterContent = forwardRef(
+const ToastStack = forwardRef(
   ({
     className,
     duration = false,
     focusKey = "t",
-    forceRender = false,
-    id,
+    toasts,
     toastsBeforeStack = 3,
     ...props
   }, ref) => {
-    const toasterRef = useRef(null);
+    const toastStackRef = useRef(null);
     const firstToastRef = useRef(null);
-    const mergedToasterRef = useMergeRefs([toasterRef, ref]);
+    const mergedToastStackRef = useMergeRefs([toastStackRef, ref]);
     const {
-      toasts,
       setToastsBeforeStack,
       extraToastsVisible,
       setExtraToastsVisible,
-      setToasts,
       getToasterHeight
     } = useToasts();
     const toastCount = toasts.length;
+    const isToastStackEmpty = toastCount === 0;
     const lastToastCount = useRef(0);
-    const a1ToastGroupObserver = useRef(null);
-    const a1ToastGroupObserverConnected = useRef(false);
-    const themeContext = useContext(ThemeProviderContext);
-    const closeToast = useCloseToast(styles.close);
-    const [toasterHeight, setToasterHeight] = useState(0);
-    const [a1ToastGroups, setA1ToastGroups] = useState([]);
-    const updateA1ToastGroups = () => {
-      const mfeRoots = document.querySelectorAll(
-        "[data-mfe-portal-name],[data-mfe-name]"
-      );
-      const a1ToastGroupsLocal = [
-        ...document.getElementsByClassName("ToastGroup")
-      ];
-      if (mfeRoots.length > 0) {
-        mfeRoots.forEach((el) => {
-          setTimeout(() => {
-            if (el.shadowRoot) {
-              a1ToastGroupsLocal.push(
-                ...el.shadowRoot.querySelectorAll(".ToastGroup")
-              );
-            }
-            setA1ToastGroups(a1ToastGroupsLocal);
-          });
-        });
-      } else {
-        setA1ToastGroups(a1ToastGroupsLocal);
-      }
-    };
-    const handleToasterBlur = useCallback(() => {
-      setExtraToastsVisible(false);
-      setToastPausedStatus("resumed");
-      if (toasterRef.current?.scrollTo) {
-        toasterRef.current?.scrollTo(0, 0);
-      }
-    }, [setExtraToastsVisible]);
-    useEffect(() => {
-      const toastEventListener = (e) => {
-        const toasters = document.querySelectorAll("[data-anv='toaster']");
-        const shadowToasters = toasterRef.current?.getRootNode()?.querySelectorAll("[data-anv='toaster']") || [];
-        if (toasters.length && id !== toasters[0].getAttribute("data-toaster-id")) {
-          return;
-        } else if (
-          // Toaster(s) exist in the shadow dom, bail out if this toaster is not the first one
-          shadowToasters.length && id !== shadowToasters[0].getAttribute("data-toaster-id")
-        ) {
-          return;
-        }
-        const { eventType, ...toastProps } = e.detail;
-        if (eventType === "add") {
-          const toastAddProps = toastProps;
-          if (!toastAddProps.toasterId || toastAddProps.toasterId === id) {
-            setToasts((prev) => [...prev, toastProps]);
-          }
-        } else if (eventType === "update") {
-          setToasts((prev) => {
-            return prev.map((t) => {
-              if (t.id === toastProps.id) {
-                return {
-                  ...t,
-                  ...toastProps
-                };
-              } else {
-                return t;
-              }
-            });
-          });
-        } else if (eventType === "dismiss") {
-          if (toastProps.id) {
-            closeToast(toastProps.id);
-          } else {
-            closeToast();
-          }
-        }
-      };
-      window.addEventListener("hammer-toast", toastEventListener);
-      a1ToastGroupObserver.current = new MutationObserver(updateA1ToastGroups);
-      return () => window.removeEventListener("hammer-toast", toastEventListener);
-    }, []);
+    const [toastStackHeight, setToastStackHeight] = useState(0);
+    const [toastPausedStatus, setToastPausedStatus] = useState(undefined);
     useEffect(() => {
-      if (a1ToastGroupObserver.current !== null) {
-        if (toastCount > 0 && a1ToastGroupObserverConnected.current === false) {
-          a1ToastGroupObserver.current.observe(document.body, {
-            childList: true,
-            subtree: true
-          });
-          a1ToastGroupObserverConnected.current = true;
-          updateA1ToastGroups();
-        } else if (toastCount === 0 && a1ToastGroupObserverConnected.current === true) {
-          a1ToastGroupObserver.current.disconnect();
-          a1ToastGroupObserverConnected.current = false;
-        }
+      if (toastCount === 0) {
+        setToastPausedStatus(undefined);
       }
     }, [toastCount]);
-    useEffect(() => {
-      if (a1ToastGroups && a1ToastGroups.length > 0) {
-        a1ToastGroups.forEach((group) => {
-          group.style.top = toastCount === 0 ? "16px" : `calc(${toasterHeight}px + 3.5rem)`;
-        });
-      }
-    }, [toasterHeight, a1ToastGroups.length]);
     useEffect(() => {
       let timer;
       if (toastCount > lastToastCount.current) {
-        setToasterHeight(getToasterHeight());
+        setToastStackHeight(getToasterHeight());
       } else {
-        timer = setTimeout(() => setToasterHeight(getToasterHeight()), 290);
+        timer = setTimeout(
+          () => setToastStackHeight(getToasterHeight()),
+          ANIMATION_DURATION - 10
+        );
       }
       lastToastCount.current = toastCount;
       return () => {
@@ -769,9 +673,15 @@ const ToasterContent = forwardRef(
     useEffect(() => {
       setToastsBeforeStack(toastsBeforeStack);
     }, [setToastsBeforeStack, toastsBeforeStack]);
-    const isToasterEmpty = toastCount === 0;
+    const handleToastStackBlur = useCallback(() => {
+      setExtraToastsVisible(false);
+      setToastPausedStatus("resumed");
+      if (toastStackRef.current?.scrollTo) {
+        toastStackRef.current?.scrollTo(0, 0);
+      }
+    }, [setExtraToastsVisible]);
     const { returnFocusRef } = useHotkeyFocus({
-      disabled: isToasterEmpty,
+      disabled: isToastStackEmpty,
       hotkey: focusKey,
       onHotkeyIn: async () => {
         setExtraToastsVisible(true);
@@ -783,44 +693,48 @@ const ToasterContent = forwardRef(
       },
       onHotkeyOut: () => {
         setExtraToastsVisible(false);
-        handleToasterBlur();
+        handleToastStackBlur();
       },
       refToFocus: firstToastRef,
-      rootRef: toasterRef
+      rootRef: toastStackRef
     });
     const showMoreButtonPositionStyles = useShowMoreButtonPositionStyles();
-    const [toastPausedStatus, setToastPausedStatus] = useState(undefined);
     const showMoreButton = !extraToastsVisible && toastCount > toastsBeforeStack;
     const extraToastsLength = toastCount - toastsBeforeStack;
     const showMoreButtonText = `${extraToastsLength} more message${extraToastsLength > 1 ? "s" : ""}`;
-    const toasterClasses = cx(styles.toaster, className, {
+    const toastStackClasses = cx(styles["toast-stack"], className, {
       [styles["show-more-button"]]: showMoreButton,
       [styles["show-extra-toast"]]: extraToastsVisible
     });
-    const handleToasterFocusHover = () => {
+    const handleToastStackFocusHover = () => {
       if (toastPausedStatus === "resumed" || toastPausedStatus === undefined) {
         setToastPausedStatus(Date.now());
       }
     };
-    const handleToasterOnBlur = () => {
-      if (!toasterRef.current?.matches(":focus-within")) {
-        handleToasterBlur();
+    const handleToastStackOnBlur = () => {
+      if (!toastStackRef.current?.matches(":focus-within")) {
+        handleToastStackBlur();
       }
     };
+    const handleShowMoreButtonClick = () => {
+      setExtraToastsVisible(true);
+    };
+    const toastStackHeightStyle = extraToastsVisible ? "calc(100vh - var(--toaster-padding) * 2)" : toastCount > 0 ? `calc(${toastStackHeight}px + 2rem + var(--toaster-padding))` : 0;
+    const toastStackPaddingStyle = toastCount > 0 ? "var(--toaster-padding) 0 var(--toaster-padding) var(--toaster-padding)" : 0;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(
         "div",
         {
-          "data-anv": "toaster",
-          "data-toaster-id": id,
-          className: toasterClasses,
-          ref: mergedToasterRef,
-          onMouseOver: handleToasterFocusHover,
-          onMouseLeave: handleToasterBlur,
-          onFocus: handleToasterFocusHover,
-          onBlur: handleToasterOnBlur,
+          "data-anv": "toast-stack",
+          className: toastStackClasses,
+          ref: mergedToastStackRef,
+          onMouseOver: handleToastStackFocusHover,
+          onMouseLeave: handleToastStackBlur,
+          onFocus: handleToastStackFocusHover,
+          onBlur: handleToastStackOnBlur,
           style: {
-            height: extraToastsVisible ? "100vh" : `calc(${toasterHeight}px + 2rem + var(--toaster-padding))`
+            height: toastStackHeightStyle,
+            padding: toastStackPaddingStyle
           },
           ...props,
           children: [
@@ -864,18 +778,13 @@ const ToasterContent = forwardRef(
                 className: styles["show-more-button-container"],
                 style: showMoreButtonPositionStyles,
                 children: /* @__PURE__ */ jsx(
-                  ThemeProvider,
+                  Button,
                   {
-                    mode: themeContext.mode === "dark" ? "light" : "dark",
-                    children: /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        onClick: () => setExtraToastsVisible(true),
-                        appearance: "secondary",
-                        tabIndex: 0,
-                        children: showMoreButtonText
-                      }
-                    )
+                    className: styles["show-collapse-button"],
+                    onClick: handleShowMoreButtonClick,
+                    appearance: "secondary",
+                    tabIndex: 0,
+                    children: showMoreButtonText
                   }
                 )
               }
@@ -892,7 +801,7 @@ const ToasterContent = forwardRef(
         Button,
         {
           className: styles["show-collapse-button"],
-          onClick: handleToasterBlur,
+          onClick: handleToastStackBlur,
           appearance: "secondary",
           children: "Collapse Messages"
         }
@@ -900,16 +809,222 @@ const ToasterContent = forwardRef(
     ] });
   }
 );
+ToastStack.displayName = "ToastStack";
+
+const ToasterContent = forwardRef(
+  ({
+    className,
+    disableEvents = false,
+    forceRender = false,
+    id,
+    onToastEvent,
+    // ToastStackProps
+    duration,
+    focusKey,
+    toastsBeforeStack,
+    ...props
+  }, ref) => {
+    const toasterRef = useRef(null);
+    const mergedToasterRef = useMergeRefs([toasterRef, ref]);
+    const { toasts, setToasts } = useToasts();
+    const disableEventsRef = useRef(disableEvents);
+    const toastCountRef = useRef(0);
+    useEffect(() => {
+      disableEventsRef.current = disableEvents;
+    }, [disableEvents]);
+    useEffect(() => {
+      toastCountRef.current = toasts.length;
+    }, [toasts.length]);
+    const closeToast = useCloseToast(styles.close);
+    useEffect(() => {
+      let timeout;
+      const toastEventListener = (e) => {
+        if (disableEventsRef.current) {
+          return;
+        }
+        const { eventType, ...toastProps } = e.detail;
+        if (eventType === "add") {
+          const toastAddProps = toastProps;
+          if (!toastAddProps.toasterId || toastAddProps.toasterId === id) {
+            setToasts((prev) => [...prev, toastProps]);
+          }
+          timeout = setTimeout(() => {
+            onToastEvent?.({
+              eventType: "add",
+              toastCount: toastCountRef.current,
+              id: toastAddProps.id,
+              toasterId: id,
+              toastProps: toastAddProps
+            });
+          });
+        } else if (eventType === "update") {
+          const toastUpdateProps = toastProps;
+          setToasts((prev) => {
+            return prev.map((t) => {
+              if (t.id === toastUpdateProps.id) {
+                return {
+                  ...t,
+                  ...toastUpdateProps
+                };
+              } else {
+                return t;
+              }
+            });
+          });
+          onToastEvent?.({
+            eventType: "update",
+            toastCount: toastCountRef.current,
+            id: toastUpdateProps.id,
+            toasterId: id,
+            toastProps: toastUpdateProps
+          });
+        } else if (eventType === "dismiss") {
+          if (toastProps.id) {
+            closeToast(toastProps.id);
+            timeout = setTimeout(() => {
+              onToastEvent?.({
+                eventType: "dismiss",
+                toastCount: toastCountRef.current,
+                id: toastProps.id,
+                toasterId: id
+              });
+            }, ANIMATION_DURATION);
+          } else {
+            closeToast();
+            onToastEvent?.({
+              eventType: "dismiss-all",
+              toastCount: 0,
+              toasterId: id
+            });
+          }
+        }
+      };
+      window.addEventListener("hammer-toast", toastEventListener);
+      return () => {
+        window.removeEventListener("hammer-toast", toastEventListener);
+        clearTimeout(timeout);
+      };
+    }, []);
+    const toasterClasses = cx(styles.toaster, {
+      [`${className}`]: className != null
+    });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-anv": "toaster",
+        "data-toaster-id": id,
+        className: toasterClasses,
+        ref: mergedToasterRef,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          ToastStack,
+          {
+            toasts,
+            duration,
+            focusKey,
+            toastsBeforeStack
+          }
+        )
+      }
+    );
+  }
+);
+const Toaster$1 = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(ToasterContent, { ...props, ref }) });
+  }
+);
 Toaster$1.displayName = "Toaster";
 ToasterContent.displayName = "ToasterContent";
 
+const SHADOW_HOST_DATA_ATTRS = "[data-mfe-portal-name], [data-mfe-name]";
 const Toaster = forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsx(Toaster$1, { ref, ...props });
+  ({ onToastEvent, ...props }, ref) => {
+    const { id } = props;
+    const toasterRef = useRef(null);
+    const mergedToasterRef = useMergeRefs([toasterRef, ref]);
+    const [shouldDisableEvents, setShouldDisableEvents] = useState(false);
+    useEffect(() => {
+      const toasters = document.querySelectorAll("[data-anv='toaster']");
+      const shadowToasters = toasterRef.current?.getRootNode()?.querySelectorAll("[data-anv='toaster']") || [];
+      if (toasters.length && id !== toasters[0].getAttribute("data-toaster-id")) {
+        setShouldDisableEvents(true);
+      } else if (
+        // Toaster(s) exist in the shadow dom, bail out if this toaster is not the first one
+        shadowToasters.length && id !== shadowToasters[0].getAttribute("data-toaster-id")
+      ) {
+        setShouldDisableEvents(true);
+      }
+    }, [id]);
+    const a1ToastGroupObserver = useRef(null);
+    const a1ToastGroupObserverConnected = useRef(false);
+    const [a1ToastGroups, setA1ToastGroups] = useState([]);
+    const [toastCount, setToastCount] = useState(0);
+    const handleToastEvent = (event) => {
+      const { toastCount: newToastCount } = event;
+      setToastCount(newToastCount);
+      onToastEvent?.(event);
+    };
+    const updateA1ToastGroups = () => {
+      const mfeRoots = document.querySelectorAll(SHADOW_HOST_DATA_ATTRS);
+      const a1ToastGroupsLocal = [
+        ...document.getElementsByClassName("ToastGroup")
+      ];
+      if (mfeRoots.length > 0) {
+        mfeRoots.forEach((el) => {
+          setTimeout(() => {
+            if (el.shadowRoot) {
+              a1ToastGroupsLocal.push(
+                ...el.shadowRoot.querySelectorAll(".ToastGroup")
+              );
+            }
+            setA1ToastGroups(a1ToastGroupsLocal);
+          });
+        });
+      } else {
+        setA1ToastGroups(a1ToastGroupsLocal);
+      }
+    };
+    useEffect(() => {
+      a1ToastGroupObserver.current = new MutationObserver(updateA1ToastGroups);
+    }, []);
+    useEffect(() => {
+      if (a1ToastGroupObserver.current !== null) {
+        if (toastCount > 0 && a1ToastGroupObserverConnected.current === false) {
+          a1ToastGroupObserver.current.observe(document.body, {
+            childList: true,
+            subtree: true
+          });
+          a1ToastGroupObserverConnected.current = true;
+          updateA1ToastGroups();
+        } else if (toastCount === 0 && a1ToastGroupObserverConnected.current === true) {
+          a1ToastGroupObserver.current.disconnect();
+          a1ToastGroupObserverConnected.current = false;
+        }
+      }
+    }, [toastCount]);
+    useEffect(() => {
+      if (a1ToastGroups && a1ToastGroups.length > 0) {
+        const toasterHeight = toasterRef.current?.firstElementChild?.getBoundingClientRect().height;
+        a1ToastGroups.forEach((group) => {
+          group.style.top = toastCount === 0 ? "16px" : `calc(${toasterHeight}px + 2.5rem)`;
+        });
+      }
+    }, [a1ToastGroups.length, toastCount]);
+    return /* @__PURE__ */ jsx(
+      Toaster$1,
+      {
+        ...props,
+        onToastEvent: handleToastEvent,
+        disableEvents: shouldDisableEvents,
+        ref: mergedToasterRef
+      }
+    );
   }
 );
+Toaster.displayName = "Toaster";
 
 const toast = toast$1;
 
 export { Toaster as T, toast as t };
-//# sourceMappingURL=toast-D-wmh-pM.js.map
+//# sourceMappingURL=toast-BVHe-A2D.js.map