@servicetitan/anvil2 1.35.0 → 1.36.0

package/dist/{ProgressBar-By6Afv3k-CDsQv-7k.js → ProgressBar-BwVBP0xG-Be45r3EG.js}

@@ -18,7 +18,7 @@ import { T as ThemeProvider, a as ThemeProviderContext } from './ThemeProvider-B
 import { g as getKeyboardFocusableElements } from './getKeyboardFocusableElements-QqcABz0D.js';
 import { u as useTooltipLegacyGroup } from './HammerProvider-BEJW4XcH-BBKdl0zs.js';
 
-import './ProgressBar-By6Afv3k.css';/**
+import './ProgressBar-BwVBP0xG.css';/**
  * Convert array of 16 byte values to UUID string format of the form:
  * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
  */
@@ -293,9 +293,7 @@ const useDialogScrollLock = ({
     };
     updateDialogAttributes(open);
     return () => {
-      if (elementRef.current?.getRootNode() === root) {
-        updateDialogAttributes(false);
-      }
+      updateDialogAttributes(false);
     };
   }, [open, id, enableScrollChaining, elementRef]);
 };
@@ -1166,6 +1164,21 @@ const ToastStack = forwardRef(
 );
 ToastStack.displayName = "ToastStack";
 
+const safeShowPopover = (element) => {
+  try {
+    element?.showPopover();
+  } catch (e) {
+    console.warn(e);
+  }
+};
+const safeHidePopover = (element) => {
+  try {
+    element?.hidePopover();
+  } catch (e) {
+    console.warn(e);
+  }
+};
+
 const ToasterPopover = forwardRef(
   (props, ref) => {
     const { isDialogToaster } = useToasts();
@@ -1175,24 +1188,28 @@ const ToasterPopover = forwardRef(
     const toastCount = useMemo(() => toasts.length, [toasts]);
     useEffect(() => {
       if (!popoverRef.current) return;
+      if (!supportsPopover()) {
+        console.error("Popover is not supported in this browser");
+        return;
+      }
       const currentPopover = popoverRef.current;
       let timeout;
       if (toastCount > 0) {
         if (isDialogToaster) {
           timeout = setTimeout(() => {
-            currentPopover?.hidePopover();
-            currentPopover?.showPopover();
+            safeHidePopover(currentPopover);
+            safeShowPopover(currentPopover);
           });
         } else {
-          currentPopover.showPopover();
+          safeShowPopover(currentPopover);
         }
       } else {
-        currentPopover.hidePopover();
+        safeHidePopover(currentPopover);
       }
       return () => {
         if (timeout) clearTimeout(timeout);
         if (toastCount === 0) {
-          currentPopover.hidePopover();
+          safeHidePopover(currentPopover);
         }
       };
     }, [toastCount, isDialogToaster]);
@@ -1397,6 +1414,70 @@ const Toaster = forwardRef(
 Toaster.displayName = "Toaster";
 ToasterContent.displayName = "ToasterContent";
 
+const useDialogTransitionStates = (ref, openProp, options = {}) => {
+  const {
+    onOpenAnimationStart,
+    onCloseAnimationStart,
+    onOpenAnimationComplete,
+    onCloseAnimationComplete
+  } = options;
+  const prevOpenProp = useRef(openProp);
+  const [state, setState] = useState(
+    openProp ? "open" : "closed"
+  );
+  useEffect(() => {
+    if (prevOpenProp.current && !openProp) {
+      setState("closing");
+    } else if (!prevOpenProp.current && openProp) {
+      setState("opening");
+    } else {
+      setState(openProp ? "opening" : "closed");
+    }
+    prevOpenProp.current = openProp;
+  }, [openProp]);
+  useEffect(() => {
+    if (!ref.current) return;
+    if (state === "open" || state === "closed") return;
+    if (state === "opening") {
+      ref.current?.showModal();
+      onOpenAnimationStart?.();
+    } else if (state === "closing") {
+      onCloseAnimationStart?.();
+    }
+    const duration = window.getComputedStyle(ref.current).animationDuration;
+    const durationMs = parseFloat(duration) * 1e3;
+    const timeout = setTimeout(() => {
+      if (state === "opening") {
+        setState("open");
+        onOpenAnimationComplete?.();
+      } else if (state === "closing") {
+        setState("closed");
+        ref.current?.close();
+        onCloseAnimationComplete?.();
+      }
+    }, durationMs);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [
+    state,
+    ref,
+    onOpenAnimationComplete,
+    onCloseAnimationComplete,
+    onOpenAnimationStart,
+    onCloseAnimationStart
+  ]);
+  const beginClosing = useCallback(() => {
+    setState("closing");
+  }, []);
+  return {
+    state,
+    beginClosing,
+    isOpenOrOpening: state === "open" || state === "opening",
+    isClosedOrClosing: state === "closed" || state === "closing"
+  };
+};
+
 const drawer = "_drawer_vyd6b_3";
 const container = "_container_vyd6b_29";
 const content = "_content_vyd6b_42";
@@ -1506,6 +1587,9 @@ const DrawerElement = forwardRef(
       children,
       onOpen,
       onClose,
+      /* eslint-disable-next-line @typescript-eslint/no-unused-vars --
+        onCancel is destructured so that it is not passed to the dialog in ...rest
+      */
       onCancel,
       onClick,
       onKeyDown,
@@ -1513,16 +1597,35 @@ const DrawerElement = forwardRef(
       disableCloseOnClickOutside = false,
       size = "medium",
       enableScrollChaining,
+      onOpenAnimationStart,
+      onOpenAnimationComplete,
+      onCloseAnimationStart,
+      onCloseAnimationComplete,
       ...rest
     } = props;
     const elRef = useRef(null);
     const contentRef = useRef(null);
     const toasterRef = useRef(null);
     const combinedRef = useMergeRefs([elRef, ref]);
-    const [remove, setRemove] = useState(false);
     const id = useId();
-    const DrawerClassNames = cx([styles$1.drawer], className, {
-      [styles$1.remove]: remove,
+    const { state, isOpenOrOpening, beginClosing } = useDialogTransitionStates(
+      elRef,
+      open,
+      {
+        onOpenAnimationStart,
+        onOpenAnimationComplete: useCallback(() => {
+          onOpenAnimationComplete?.();
+          onOpen?.();
+        }, [onOpen, onOpenAnimationComplete]),
+        onCloseAnimationStart,
+        onCloseAnimationComplete: useCallback(() => {
+          onCloseAnimationComplete?.();
+          onClose?.();
+        }, [onClose, onCloseAnimationComplete])
+      }
+    );
+    const classNames = cx([styles$1.drawer], className, {
+      [styles$1.remove]: state === "closing",
       [styles$1.large]: size === "large"
     });
     const { focusables } = useKeyboardFocusables(contentRef, {
@@ -1531,25 +1634,13 @@ const DrawerElement = forwardRef(
     const firstFocusable = focusables?.[0];
     const lastFocusable = focusables?.[focusables.length - 1];
     useDialogScrollLock({
-      open,
+      open: isOpenOrOpening,
       id,
       enableScrollChaining,
       elementRef: elRef
     });
     useEffect(() => {
-      if (open) {
-        onOpen?.();
-        elRef.current?.showModal();
-        return;
-      }
-      setRemove(true);
-      setTimeout(() => {
-        elRef.current?.close();
-        setRemove(false);
-      }, 200);
-    }, [onOpen, open]);
-    useEffect(() => {
-      if (!open) return;
+      if (!isOpenOrOpening) return;
       if (!focusables) return;
       const activeElement = getActiveElement(document);
       if (!activeElement) return;
@@ -1561,11 +1652,11 @@ const DrawerElement = forwardRef(
       } else {
         focusables[0]?.focus();
       }
-    }, [open, focusables]);
+    }, [isOpenOrOpening, focusables]);
     const onCancelHandler = (e) => {
       e.preventDefault();
       if (disableCloseOnEscape) return;
-      onClose?.();
+      beginClosing();
     };
     const onClickHandler = (e) => {
       onClick?.(e);
@@ -1573,7 +1664,7 @@ const DrawerElement = forwardRef(
       if (!contentRef.current?.contains(target) && !toasterRef.current?.contains(target)) {
         e.preventDefault();
         if (disableCloseOnClickOutside) return;
-        onClose?.();
+        beginClosing();
       }
     };
     const onKeyDownHandler = (e) => {
@@ -1591,38 +1682,32 @@ const DrawerElement = forwardRef(
         }
       }
     };
-    const value = useMemo(() => {
-      const close = () => {
-        setRemove(true);
-        setTimeout(() => {
-          elRef.current?.close();
-          onClose?.();
-        }, 200);
-      };
-      return { close };
-    }, [onClose]);
+    const contextValue = useMemo(() => {
+      return { close: beginClosing };
+    }, [beginClosing]);
     return (
       // dialog element does seem to be interactive on MDN guideline
       // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
       /* @__PURE__ */ jsxs(
         "dialog",
         {
-          className: DrawerClassNames,
+          className: classNames,
           "data-anv": "drawer",
           "data-anv-scroll-chaining": enableScrollChaining,
+          "data-anv-transition-state": state,
           ref: combinedRef,
           onCancel: onCancelHandler,
           onClick: onClickHandler,
           onKeyDown: onKeyDownHandler,
           ...rest,
           children: [
-            /* @__PURE__ */ jsx(ToastProvider, { isDialogToaster: open, children: /* @__PURE__ */ jsx(ToasterPopover, { children: /* @__PURE__ */ jsx(ToasterContent, { id: "drawer-toaster", ref: toasterRef }) }) }),
-            /* @__PURE__ */ jsx(DrawerContext.Provider, { value, children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(ToastProvider, { isDialogToaster: isOpenOrOpening, children: /* @__PURE__ */ jsx(ToasterPopover, { children: /* @__PURE__ */ jsx(ToasterContent, { id: "drawer-toaster", ref: toasterRef }) }) }),
+            /* @__PURE__ */ jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
               "section",
               {
                 ref: contentRef,
                 className: styles$1.container,
-                "data-open": open,
+                "data-open": isOpenOrOpening,
                 children
               }
             ) })
@@ -2109,7 +2194,7 @@ const TooltipElement = (props) => {
     clearTimeout(openTimeoutRef.current);
     if (!tooltip || !rootNode?.querySelector(`#${tooltipId}`)) return;
     openTimeoutRef.current = setTimeout(() => {
-      tooltip.showPopover();
+      safeShowPopover(tooltip);
       setOpenState(true);
     }, delay);
   }, [tooltip, rootNode, tooltipId, delay]);
@@ -2121,7 +2206,7 @@ const TooltipElement = (props) => {
       closeTimeoutRef.current = setTimeout(() => {
         fn?.();
         setOpenState(false);
-        tooltip?.hidePopover();
+        safeHidePopover(tooltip);
       }, 100);
     },
     [openState, tooltip]
@@ -2353,5 +2438,5 @@ const ProgressBar = forwardRef(
 );
 ProgressBar.displayName = "ProgressBar";
 
-export { DrawerCancelButton as D, Helper as H, Label as L, ProgressBar as P, TooltipTrigger as T, DrawerFooter as a, DrawerHeader as b, DrawerContent as c, Drawer as d, TooltipContent as e, Tooltip as f, getActiveElement as g, Toaster as h, DialogContext as i, useDialogScrollLock as j, ToastProvider as k, ToasterPopover as l, ToasterContent as m, DrawerContext as n, supportsPopover as s, toast as t, useKeyboardFocusables as u };
-//# sourceMappingURL=ProgressBar-By6Afv3k-CDsQv-7k.js.map
+export { DrawerCancelButton as D, Helper as H, Label as L, ProgressBar as P, TooltipTrigger as T, DrawerFooter as a, DrawerHeader as b, DrawerContent as c, Drawer as d, TooltipContent as e, Tooltip as f, getActiveElement as g, Toaster as h, DialogContext as i, useKeyboardFocusables as j, useDialogScrollLock as k, ToastProvider as l, ToasterPopover as m, ToasterContent as n, DrawerContext as o, safeShowPopover as p, safeHidePopover as q, supportsPopover as s, toast as t, useDialogTransitionStates as u };
+//# sourceMappingURL=ProgressBar-BwVBP0xG-Be45r3EG.js.map