@servicetitan/anvil2 1.35.1 → 1.37.0

package/dist/{ProgressBar-D3el8UNM-CBgFe1_j.js → ProgressBar-dl-MpiLN-Z4frwodh.js}

@@ -1,24 +1,25 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, forwardRef, useId, createContext, useContext, useCallback, useMemo, cloneElement, isValidElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
 import { c as cx } from './index-tZvMCc77.js';
-import { I as Icon } from './Icon-BBWg60pO-CpyOrE83.js';
-import { b as SvgCheckCircle, S as SvgError, a as SvgWarning, c as SvgInfo } from './check_circle-DJhuiYqa.js';
+import { I as Icon } from './Icon-BrdmZw1i-CG-LzgEz.js';
+import { a as SvgCheckCircle, S as SvgError, b as SvgInfo } from './check_circle-BGfigqq-.js';
 import { t as tabbable, q as useDelayGroup, F as FloatingPortal, b as FloatingArrow, p as computePosition, n as autoUpdate, o as offset, f as flip, d as shift, e as arrow$1, l as limitShift, r as useDelayGroupContext, c as useFloating, h as useHover, i as safePolygon, v as useFocus, j as useDismiss, k as useRole, m as useInteractions } from './floating-ui.react-Domgunz0.js';
 import { a as PortalProviderContext } from './PortalProvider-9lXkQ0xY-BKoGegS1.js';
 import { S as SvgClose } from './close-DZj38AEh.js';
-import { T as Text } from './Text-hQPAQBGP-CyzewfX4.js';
-import { B as Button } from './Button-Cz8V0hKo-DjGfJ-YI.js';
-import { A as Alert } from './Alert-Dpjo7Ptu-xJ_JOdxl.js';
-import { F as Flex } from './Flex-D3J8BIR_-C3e28BdF.js';
+import { T as Text } from './Text-CN_-FF7J-Dzoy8A70.js';
+import { B as Button } from './Button-DX3kc-St-Bi0Fl0-E.js';
+import { A as Alert } from './Alert-BNbD8EQd-D2ZerUYD.js';
+import { F as Flex } from './Flex-EX9xObMl-BPBQ7nb5.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-GT5myWCm-Clw_nEze.js';
-import { S as SrOnly } from './SrOnly-BXm1DGl3-BJVodjQp.js';
+import { F as FieldMessage } from './FieldMessage-Js4e1ezw-DZ6YDx24.js';
+import { S as SrOnly } from './SrOnly-BsKDHetF-B93X65F1.js';
 import { u as useSwipe } from './useSwipe-DIUHs7T5-DIUHs7T5.js';
 import { u as useMergeRefs } from './useMergeRefs-Bde85AWI-Bde85AWI.js';
 import { T as ThemeProvider, a as ThemeProviderContext } from './ThemeProvider-BIeaAmWx-DVYOQ6bw.js';
 import { g as getKeyboardFocusableElements } from './getKeyboardFocusableElements-QqcABz0D.js';
 import { u as useTooltipLegacyGroup } from './HammerProvider-BEJW4XcH-BBKdl0zs.js';
 
-import './ProgressBar-D3el8UNM.css';/**
+import './ProgressBar-dl-MpiLN.css';/**
  * Convert array of 16 byte values to UUID string format of the form:
  * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
  */
@@ -141,21 +142,21 @@ const getActiveElement = (activeDocument) => {
   return activeElement;
 };
 
-const label = "_label_iolth_3";
-const required = "_required_iolth_47";
+const label = "_label_jfzvd_2";
+const required = "_required_jfzvd_46";
 const styles$6 = {
 	label: label,
-	"top-container": "_top-container_iolth_38",
-	"label-text": "_label-text_iolth_43",
+	"top-container": "_top-container_jfzvd_37",
+	"label-text": "_label-text_jfzvd_42",
 	required: required,
-	"info-trigger": "_info-trigger_iolth_52",
-	"info-content": "_info-content_iolth_57"
+	"info-trigger": "_info-trigger_jfzvd_51",
+	"info-content": "_info-content_jfzvd_56"
 };
 
-const content$1 = "_content_10c59_3";
-const scroller = "_scroller_10c59_30";
-const arrow = "_arrow_10c59_33";
-const trigger = "_trigger_10c59_40";
+const content$1 = "_content_1tuax_2";
+const scroller = "_scroller_1tuax_29";
+const arrow = "_arrow_1tuax_32";
+const trigger = "_trigger_1tuax_39";
 const styles$5 = {
 	content: content$1,
 	scroller: scroller,
@@ -256,9 +257,9 @@ const useTooltipLegacyContext = () => {
 };
 
 const styles$4 = {
-	"content-legacy": "_content-legacy_19gkz_4",
-	"arrow-legacy": "_arrow-legacy_19gkz_30",
-	"trigger-legacy": "_trigger-legacy_19gkz_33"
+	"content-legacy": "_content-legacy_3w3om_3",
+	"arrow-legacy": "_arrow-legacy_3w3om_29",
+	"trigger-legacy": "_trigger-legacy_3w3om_32"
 };
 
 const ATTRIBUTE_NAME_LIST = "data-anv-dialogs";
@@ -293,9 +294,7 @@ const useDialogScrollLock = ({
     };
     updateDialogAttributes(open);
     return () => {
-      if (elementRef.current?.getRootNode() === root) {
-        updateDialogAttributes(false);
-      }
+      updateDialogAttributes(false);
     };
   }, [open, id, enableScrollChaining, elementRef]);
 };
@@ -398,31 +397,31 @@ const useToasts = () => {
   return context;
 };
 
-const popover = "_popover_1a009_3";
-const toaster = "_toaster_1a009_10";
-const hidden = "_hidden_1a009_25";
-const stacked = "_stacked_1a009_89";
-const open = "_open_1a009_184";
-const close = "_close_1a009_185";
+const popover = "_popover_1fp0b_2";
+const toaster = "_toaster_1fp0b_9";
+const hidden = "_hidden_1fp0b_24";
+const stacked = "_stacked_1fp0b_88";
+const open = "_open_1fp0b_183";
+const close = "_close_1fp0b_184";
 const styles$3 = {
 	popover: popover,
 	toaster: toaster,
 	hidden: hidden,
-	"toast-stack": "_toast-stack_1a009_28",
-	"toast-wrapper": "_toast-wrapper_1a009_41",
-	"toast-alert": "_toast-alert_1a009_55",
-	"alert-action": "_alert-action_1a009_60",
-	"message-container": "_message-container_1a009_66",
-	"show-extra-toast": "_show-extra-toast_1a009_75",
+	"toast-stack": "_toast-stack_1fp0b_27",
+	"toast-wrapper": "_toast-wrapper_1fp0b_40",
+	"toast-alert": "_toast-alert_1fp0b_54",
+	"alert-action": "_alert-action_1fp0b_59",
+	"message-container": "_message-container_1fp0b_65",
+	"show-extra-toast": "_show-extra-toast_1fp0b_74",
 	stacked: stacked,
-	"stack-one": "_stack-one_1a009_92",
-	"stack-two": "_stack-two_1a009_92",
-	"stacked-show-extra": "_stacked-show-extra_1a009_108",
-	"stacked-extra": "_stacked-extra_1a009_122",
-	"show-more-button-container": "_show-more-button-container_1a009_135",
-	"show-collapse-button-container": "_show-collapse-button-container_1a009_136",
-	"show-collapse-button": "_show-collapse-button_1a009_136",
-	"disable-animations": "_disable-animations_1a009_160",
+	"stack-one": "_stack-one_1fp0b_91",
+	"stack-two": "_stack-two_1fp0b_91",
+	"stacked-show-extra": "_stacked-show-extra_1fp0b_107",
+	"stacked-extra": "_stacked-extra_1fp0b_121",
+	"show-more-button-container": "_show-more-button-container_1fp0b_134",
+	"show-collapse-button-container": "_show-collapse-button-container_1fp0b_135",
+	"show-collapse-button": "_show-collapse-button_1fp0b_135",
+	"disable-animations": "_disable-animations_1fp0b_159",
 	open: open,
 	close: close};
 
@@ -846,14 +845,11 @@ const Toast = forwardRef(
 );
 Toast.displayName = "Toast";
 
-const helper = "_helper_1mtj6_2";
-const messages = "_messages_1mtj6_9";
+const helper = "_helper_157uk_1";
+const messages = "_messages_157uk_8";
 const styles$2 = {
 	helper: helper,
-	messages: messages,
-	"error-container": "_error-container_1mtj6_15",
-	"error-icon": "_error-icon_1mtj6_21"
-};
+	messages: messages};
 
 const Helper = forwardRef((props, ref) => {
   const {
@@ -868,21 +864,16 @@ const Helper = forwardRef((props, ref) => {
     showCounter
   } = props;
   return /* @__PURE__ */ jsxs("div", { className: styles$2["helper"], ref, id, children: [
-    /* @__PURE__ */ jsxs("div", { className: styles$2["messages"], children: [
-      errorMessage ? /* @__PURE__ */ jsxs("div", { className: styles$2["error-container"], children: [
-        /* @__PURE__ */ jsx(
-          Icon,
-          {
-            inherit: true,
-            className: styles$2["error-icon"],
-            "aria-hidden": true,
-            svg: SvgWarning
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: styles$2["error-message"], "aria-live": errorAriaLive, children: errorMessage })
-      ] }) : hint ?? null,
-      description ? /* @__PURE__ */ jsx("div", { className: styles$2["description-container"], children: description ? /* @__PURE__ */ jsx("span", { children: description }) : null }) : null
-    ] }),
+    /* @__PURE__ */ jsx(
+      FieldMessage,
+      {
+        className: styles$2["messages"],
+        hint,
+        description,
+        errorAriaLive,
+        errorMessage
+      }
+    ),
     showCounter ? /* @__PURE__ */ jsx("div", { className: styles$2["counter"], children: /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
       inputLength,
       "/",
@@ -1416,25 +1407,89 @@ const Toaster = forwardRef(
 Toaster.displayName = "Toaster";
 ToasterContent.displayName = "ToasterContent";
 
-const drawer = "_drawer_vyd6b_3";
-const container = "_container_vyd6b_29";
-const content = "_content_vyd6b_42";
-const header = "_header_vyd6b_49";
-const footer = "_footer_vyd6b_73";
-const remove = "_remove_vyd6b_91";
-const large = "_large_vyd6b_100";
-const sticky = "_sticky_vyd6b_103";
+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_1jl82_2";
+const container = "_container_1jl82_28";
+const content = "_content_1jl82_41";
+const header = "_header_1jl82_48";
+const footer = "_footer_1jl82_72";
+const remove = "_remove_1jl82_90";
+const large = "_large_1jl82_99";
+const sticky = "_sticky_1jl82_102";
 const styles$1 = {
 	drawer: drawer,
 	container: container,
 	content: content,
 	header: header,
-	"close-container": "_close-container_vyd6b_66",
+	"close-container": "_close-container_1jl82_65",
 	footer: footer,
 	remove: remove,
 	large: large,
 	sticky: sticky,
-	"close-button": "_close-button_vyd6b_109"
+	"close-button": "_close-button_1jl82_108"
 };
 
 const DrawerCancelButton = forwardRef((props, ref) => {
@@ -1459,35 +1514,44 @@ DrawerCancelButton.displayName = "DrawerCancelButton";
 
 const DrawerHeader = forwardRef(
   (props, ref) => {
-    const { children } = props;
-    return /* @__PURE__ */ jsxs("header", { className: styles$1.header, "data-anv": "drawer-header", ref, children: [
-      /* @__PURE__ */ jsx(Text, { variant: "headline", el: "h1", children }),
-      /* @__PURE__ */ jsx("span", { className: styles$1["close-container"], children: /* @__PURE__ */ jsx(
-        DrawerCancelButton,
-        {
-          className: styles$1["close-button"],
-          size: "small",
-          appearance: "ghost",
-          "aria-label": "Close drawer",
-          "data-anv": "drawer-header-close-button",
-          icon: SvgClose
-        }
-      ) })
-    ] });
+    const { className, children } = props;
+    const drawerHeaderClasses = cx(styles$1.header, className);
+    return /* @__PURE__ */ jsxs(
+      "header",
+      {
+        className: drawerHeaderClasses,
+        "data-anv": "drawer-header",
+        ref,
+        children: [
+          /* @__PURE__ */ jsx(Text, { variant: "headline", el: "h1", children }),
+          /* @__PURE__ */ jsx("span", { className: styles$1["close-container"], children: /* @__PURE__ */ jsx(
+            DrawerCancelButton,
+            {
+              className: styles$1["close-button"],
+              size: "small",
+              appearance: "ghost",
+              "aria-label": "Close drawer",
+              "data-anv": "drawer-header-close-button",
+              icon: SvgClose
+            }
+          ) })
+        ]
+      }
+    );
   }
 );
 DrawerHeader.displayName = "DrawerHeader";
 
 const DrawerFooter = forwardRef(
   (props, ref) => {
-    const { children, sticky = false, ...rest } = props;
-    const DrawerFooterCX = cx(styles$1.footer, {
+    const { className, children, sticky = false, ...rest } = props;
+    const drawerFooterClasses = cx(styles$1.footer, className, {
       [styles$1["sticky"]]: sticky
     });
     return /* @__PURE__ */ jsx(
       "footer",
       {
-        className: DrawerFooterCX,
+        className: drawerFooterClasses,
         "data-anv": "drawer-footer",
         ref,
         ...rest,
@@ -1500,12 +1564,12 @@ DrawerFooter.displayName = "DrawerFooter";
 
 const DrawerContent = forwardRef(
   (props, ref) => {
-    const { children, ...rest } = props;
-    const DrawerContentCX = cx(styles$1.content, {});
+    const { className, children, ...rest } = props;
+    const drawerContentClasses = cx(styles$1.content, className);
     return /* @__PURE__ */ jsx(
       "div",
       {
-        className: DrawerContentCX,
+        className: drawerContentClasses,
         "data-anv": "drawer-content",
         ref,
         ...rest,
@@ -1525,6 +1589,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,
@@ -1532,16 +1599,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, {
@@ -1550,25 +1636,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;
@@ -1580,11 +1654,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);
@@ -1592,7 +1666,7 @@ const DrawerElement = forwardRef(
       if (!contentRef.current?.contains(target) && !toasterRef.current?.contains(target)) {
         e.preventDefault();
         if (disableCloseOnClickOutside) return;
-        onClose?.();
+        beginClosing();
       }
     };
     const onKeyDownHandler = (e) => {
@@ -1610,38 +1684,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
               }
             ) })
@@ -2254,16 +2322,16 @@ const Label = forwardRef((props, ref) => {
 });
 Label.displayName = "Label";
 
-const bar = "_bar_1uffu_24";
-const indeterminate = "_indeterminate_1uffu_1";
-const success = "_success_1uffu_67";
-const error = "_error_1uffu_53";
+const bar = "_bar_1lj98_23";
+const indeterminate = "_indeterminate_1lj98_1";
+const success = "_success_1lj98_66";
+const error = "_error_1lj98_52";
 const styles = {
-	"progress-bar": "_progress-bar_1uffu_3",
-	"bar-container": "_bar-container_1uffu_24",
+	"progress-bar": "_progress-bar_1lj98_2",
+	"bar-container": "_bar-container_1lj98_23",
 	bar: bar,
-	"check-icon": "_check-icon_1uffu_50",
-	"error-icon": "_error-icon_1uffu_53",
+	"check-icon": "_check-icon_1lj98_49",
+	"error-icon": "_error-icon_1lj98_52",
 	indeterminate: indeterminate,
 	success: success,
 	error: error
@@ -2372,5 +2440,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, safeShowPopover as o, safeHidePopover as p, supportsPopover as s, toast as t, useKeyboardFocusables as u };
-//# sourceMappingURL=ProgressBar-D3el8UNM-CBgFe1_j.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, useDialogTransitionStates 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, useKeyboardFocusables as u };
+//# sourceMappingURL=ProgressBar-dl-MpiLN-Z4frwodh.js.map