@servicetitan/anvil2 1.46.2 → 1.46.3

package/dist/{Popover-CrksxqKk.js → Popover-v8R920kj.js}

@@ -1,15 +1,17 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useContext, useRef, useLayoutEffect, useState, useMemo, forwardRef, useId, useCallback, useEffect } from 'react';
+import { createContext, useContext, useRef, useLayoutEffect, useEffect, useState, useMemo, forwardRef, useId, useCallback, useImperativeHandle } from 'react';
 import { B as Button } from './Button-VNQQgZ45.js';
+import { t as tabbable, f as useFloating, o as offset, i as size, g as flip, h as shift, J as arrow$1, l as limitShift, m as useClick, j as useHover, k as safePolygon, p as useDismiss, n as useRole, v as useInteractions, A as autoUpdate, D as DialogContext, a as DrawerContext, y as FloatingPortal, z as FloatingFocusManager, H as FloatingArrow, s as supportsPopover, B as computePosition, C as safeShowPopover, E as safeHidePopover } from './DrawerContext-D4tWTLVf.js';
 import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
 import { useTrackingId } from './useTrackingId.js';
-import { f as useFloating, o as offset, i as size, g as flip, h as shift, J as arrow$1, l as limitShift, m as useClick, j as useHover, k as safePolygon, p as useDismiss, n as useRole, v as useInteractions, A as autoUpdate, D as DialogContext, a as DrawerContext, y as FloatingPortal, z as FloatingFocusManager, H as FloatingArrow, s as supportsPopover, B as computePosition, C as safeShowPopover, E as safeHidePopover } from './DrawerContext-D4tWTLVf.js';
-import { u as useMergeRefs } from './useMergeRefs-Bde85AWI.js';
+import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
 import { c as cx } from './index-tZvMCc77.js';
+import { u as useFocusWithin } from './useFocusWithin-hi77jsrB.js';
 import { P as PortalProviderContext } from './PortalProvider-9lXkQ0xY.js';
 import { T as ThemeProvider } from './ThemeProvider-Be3Pvtpz.js';
 import { T as ThemeProviderContext } from './ThemeProviderContext-l52GohYT.js';
-import { u as useOpenCloseTransitionStates, a as useKeyboardFocusables, b as useOnClickOutside } from './useOnClickOutside-B1ddwORK.js';
+import { u as useOpenCloseTransitionStates, a as useOnClickOutside } from './useOnClickOutside-C5AZE_I6.js';
+import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';
 
 import './Popover.css';const usePopoverTransitionStates = (popover, openProp, options = {}) => {
   const { onOpenAnimationStart, onCloseAnimationComplete } = options;
@@ -38,6 +40,7 @@ function usePopoverContext() {
   const invokerRef = useRef(null);
   const popoverRef = useRef(null);
   const arrowRef = useRef(null);
+  const { triggerHovered, setTriggerHovered, contentHovered } = context || {};
   useLayoutEffect(() => {
     if (!invokerRef.current) return;
     context?.setInvoker?.(invokerRef.current);
@@ -49,22 +52,58 @@ function usePopoverContext() {
     if (!arrowRef.current) return;
     context?.setArrowElement?.(arrowRef.current);
   }, [context, popoverRef]);
+  useEffect(() => {
+    if (!context?.openOnHover) return;
+    if (!triggerHovered && !contentHovered) {
+      const closeTimeout = setTimeout(() => {
+        context?.closePopover();
+      }, 100);
+      return () => {
+        clearTimeout(closeTimeout);
+      };
+    }
+    if (triggerHovered && !contentHovered) {
+      if (context?.delay) {
+        const openTimeout = setTimeout(() => {
+          context?.openPopover();
+        }, context.delay);
+        return () => {
+          clearTimeout(openTimeout);
+        };
+      } else {
+        context?.openPopover();
+      }
+    }
+  }, [context?.delay, context?.openOnHover, triggerHovered, contentHovered]);
   const onMouseEnterHandler = () => {
     if (!context?.openOnHover) return;
-    context.openPopover();
+    setTriggerHovered?.(true);
   };
   const onMouseLeaveHandler = () => {
     if (!context?.openOnHover) return;
-    context.closePopover();
+    setTriggerHovered?.(false);
   };
-  const onFocusHandler = () => {
-    if (context?.controlled || !context?.openOnHover) return;
-    context?.openPopover();
+  const onFocusHandler = (_e) => {
+    if (context?.openOnHover) {
+      context?.openPopover();
+    }
   };
-  const onBlurHandler = () => {
-    if (context?.controlled || context?.disableCloseOnClickOutside || !context?.openOnHover)
+  const onBlurHandler = (e) => {
+    if (context?.popover?.contains(e.relatedTarget)) return;
+    if (context?.modal) {
+      e.preventDefault();
+      requestAnimationFrame(() => {
+        context?.invoker?.focus();
+        const focusables = tabbable(context?.popover);
+        if (focusables.length > 0) {
+          focusables[focusables.length - 1].focus();
+        }
+      });
       return;
-    context?.closePopover();
+    }
+    if (!context?.disableCloseOnClickOutside) {
+      context?.closePopover();
+    }
   };
   const onKeyDownHandler = (e) => {
     if (!context?.openState) return;
@@ -72,12 +111,6 @@ function usePopoverContext() {
       context?.closePopover();
       return;
     }
-    const focusables = context.focusables;
-    if (e.code === "Tab" && e.shiftKey && context?.modal && focusables) {
-      focusables[focusables.length - 1].focus();
-      e.preventDefault();
-      return;
-    }
   };
   const onClickHandler = () => {
     context?.invoker?.focus();
@@ -121,7 +154,6 @@ function usePopoverContext() {
     },
     rootNode: context.rootNode,
     onClose: context.onClose,
-    setOpen: context.setOpenState,
     open: context.openState,
     openOnHover: context.openOnHover,
     controlled: context.controlled,
@@ -138,7 +170,10 @@ function usePopoverContext() {
     disableFlipFallback: context.disableFlipFallback,
     disableFocusLock: context.modal,
     disableTriggerFocus: context.disableTriggerFocus,
-    focusables: context.focusables
+    triggerHovered: context.triggerHovered,
+    setTriggerHovered: context.setTriggerHovered,
+    contentHovered: context.contentHovered,
+    setContentHovered: context.setContentHovered
   };
 }
 
@@ -471,14 +506,9 @@ const PopoverClose = forwardRef(
         "data-anv": "popover-close",
         ...rest,
         onClick: (event) => {
-          onClick?.(event);
-          if (context?.controlled) {
-            setTimeout(() => {
-              context?.onClose?.();
-            }, 100);
-            return;
-          }
           context?.popover.close();
+          context?.onClose?.();
+          onClick?.(event);
         }
       }
     );
@@ -522,11 +552,11 @@ const PopoverButton = forwardRef(
     };
     const onFocusHandler = (e) => {
       onFocus?.(e);
-      context?.invoker.onFocus();
+      context?.invoker.onFocus(e);
     };
     const onBlurHandler = (e) => {
       onBlur?.(e);
-      context?.invoker.onBlur();
+      context?.invoker.onBlur(e);
     };
     const onKeyDownHandler = (e) => {
       onKeyDown?.(e);
@@ -580,52 +610,6 @@ const styles = {
 	"no-padding": "_no-padding_yo27y_62"
 };
 
-function compareElements(el1, el2, excludeAttributes = []) {
-  if (!el1 || !el2 || el1.tagName !== el2.tagName) {
-    return false;
-  }
-  const getFilteredAttributes = (attrs) => {
-    const filtered = {};
-    for (let i = 0; i < attrs.length; i++) {
-      const attr = attrs[i];
-      if (!excludeAttributes.includes(attr.name)) {
-        filtered[attr.name] = attr.value;
-      }
-    }
-    return filtered;
-  };
-  const filteredAttrs1 = getFilteredAttributes(el1.attributes);
-  const filteredAttrs2 = getFilteredAttributes(el2.attributes);
-  const keys1 = Object.keys(filteredAttrs1);
-  const keys2 = Object.keys(filteredAttrs2);
-  if (keys1.length !== keys2.length) return false;
-  for (const key of keys1) {
-    if (filteredAttrs1[key] !== filteredAttrs2[key]) {
-      return false;
-    }
-  }
-  const isOnlyText1 = el1.childNodes.length === 1 && el1.childNodes[0].nodeType === Node.TEXT_NODE;
-  const isOnlyText2 = el2.childNodes.length === 1 && el2.childNodes[0].nodeType === Node.TEXT_NODE;
-  if (isOnlyText1 && isOnlyText2) {
-    if (el1.textContent?.trim() !== el2.textContent?.trim()) {
-      return false;
-    }
-  }
-  const children1 = el1.children;
-  const children2 = el2.children;
-  if (children1.length !== children2.length) return false;
-  for (let i = 0; i < children1.length; i++) {
-    if (!compareElements(
-      children1[i],
-      children2[i],
-      excludeAttributes
-    )) {
-      return false;
-    }
-  }
-  return true;
-}
-
 const PopoverContent = forwardRef(
   function PopoverContent2(props, ref) {
     const {
@@ -651,85 +635,40 @@ const PopoverContent = forwardRef(
       ...style,
       ...context?.popover.style
     };
-    const focusables = context?.focusables;
+    const { props: wrapperProps } = useFocusWithin({
+      otherRelatedElements: context?.invoker.element ? [context?.invoker.element] : [],
+      onBlur: (e) => {
+        if (context?.modal) {
+          e.preventDefault();
+          requestAnimationFrame(() => {
+            context?.invoker.element?.focus();
+          });
+          return;
+        }
+        onBlur?.(e);
+        context?.popover.close();
+      },
+      onFocus: (e) => {
+        onFocus?.(e);
+        context?.popover.show();
+      }
+    });
     const onMouseEnterHandler = (e) => {
       onMouseEnter?.(e);
       if (!context?.openOnHover) return;
-      context.popover.show();
+      context.setContentHovered(true);
     };
     const onMouseLeaveHandler = (e) => {
       onMouseLeave?.(e);
       if (!context?.openOnHover) return;
-      context.popover.close();
-    };
-    const onFocusHandler = (e) => {
-      onFocus?.(e);
-      context?.popover.show();
-    };
-    const onBlurHandler = (e) => {
-      onBlur?.(e);
+      context.setContentHovered(false);
     };
     const onKeyDownHandler = (e) => {
       onKeyDown?.(e);
       if (e.code === "Escape" && !context?.disableCloseOnEscape) {
         context?.popover.close();
       }
-      if (!context?.modal) {
-        if (context?.controlled) {
-          return;
-        }
-        if (e.code === "Tab" && !e.shiftKey) {
-          if (focusables && compareElements(
-            context.rootNode?.activeElement,
-            focusables[focusables.length - 1],
-            ["tabindex"]
-          )) {
-            context.popover.close();
-          }
-        }
-        if (e.code === "Tab" && e.shiftKey) {
-          if (focusables && compareElements(
-            context.rootNode.activeElement,
-            focusables[0],
-            ["tabindex"]
-          )) {
-            context.popover.close();
-          }
-        }
-        return;
-      }
-      if (e.code === "Tab" && !e.shiftKey) {
-        if (focusables && compareElements(
-          context.rootNode?.activeElement,
-          focusables[focusables.length - 1],
-          ["tabindex"]
-        )) {
-          if (context.disableTriggerFocus) {
-            focusables[0].focus();
-          } else {
-            context.invoker.element?.focus();
-            context.popover.show();
-          }
-          e.preventDefault();
-        }
-      }
-      if (e.code === "Tab" && e.shiftKey) {
-        if (focusables && compareElements(
-          context.rootNode.activeElement,
-          focusables[0],
-          ["tabindex"]
-        )) {
-          if (context.disableTriggerFocus) {
-            focusables[focusables.length - 1].focus();
-          } else {
-            context.invoker.element?.focus();
-            context.popover.show();
-          }
-          e.preventDefault();
-        }
-      }
     };
-    const manualPopover = context?.controlled || context?.disableCloseOnClickOutside || context?.disableCloseOnEscape || context?.openOnHover;
     const popoverContentRef = useMergeRefs([context?.popover.ref, ref]);
     const popoverScrollerRef = useMergeRefs([childrenRef, scrollerRef]);
     if (!supportsPopover())
@@ -743,7 +682,7 @@ const PopoverContent = forwardRef(
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        popover: manualPopover ? "manual" : "auto",
+        popover: "manual",
         id: context?.popover.id,
         "data-anv": "popover-content",
         className: popoverClassNames,
@@ -751,10 +690,10 @@ const PopoverContent = forwardRef(
         style: combinedStyles,
         onMouseEnter: onMouseEnterHandler,
         onMouseLeave: onMouseLeaveHandler,
-        onBlur: onBlurHandler,
-        onFocus: onFocusHandler,
         role: "region",
         ...rest,
+        onFocus: wrapperProps.onFocus,
+        onBlur: wrapperProps.onBlur,
         children: [
           /* @__PURE__ */ jsx(
             "div",
@@ -788,11 +727,11 @@ function PopoverTrigger(props) {
     return /* @__PURE__ */ jsx(PopoverLegacyTrigger, { ...props });
   if (!context) return;
   const { element, ...rest } = context.invoker;
-  return children({ "data-test": "hello", ...rest });
+  return children(rest);
 }
 PopoverTrigger.displayName = "PopoverTrigger";
 
-const PopoverElement = (props) => {
+const PopoverElement = forwardRef((props, ref) => {
   const {
     children,
     openOnHover = false,
@@ -831,11 +770,14 @@ const PopoverElement = (props) => {
   const [popover, setPopover] = useState(void 0);
   const [rootNode, setRootNode] = useState();
   const [arrowElement, setArrowElement] = useState(void 0);
-  const [openState, setOpenState] = useState(
-    open ?? defaultOpen
-  );
+  const [openState, setOpenState] = useOptionallyControlledState({
+    controlledValue: open,
+    defaultValue: defaultOpen
+  });
   const arrowRef = useRef(null);
   const dialogContext = useContext(DialogContext);
+  const [triggerHovered, setTriggerHovered] = useState(false);
+  const [contentHovered, setContentHovered] = useState(false);
   const processMinHeight = typeof minHeight === "string" ? minHeight : `${minHeight}px`;
   usePopoverTransitionStates(popover, openState, {
     onOpenAnimationStart: useCallback(() => {
@@ -963,74 +905,58 @@ const PopoverElement = (props) => {
     };
   }, [invoker, popover, updatePosition, openState]);
   popover?.getRootNode();
-  const { focusables } = useKeyboardFocusables(popover, {
-    observeChange: true
-  });
   const popoverId = id ?? `popover-${uid.replace(/:/g, "")}`;
   const isControlled = typeof open !== "undefined";
-  const openTimeoutRef = useRef(null);
-  const closeTimeoutRef = useRef(null);
   const openPopover = useCallback(() => {
-    clearTimeout(closeTimeoutRef.current);
-    clearTimeout(openTimeoutRef.current);
     if (!popover || !rootNode?.querySelector(`#${popoverId}`))
       return;
-    openTimeoutRef.current = setTimeout(() => {
-      safeShowPopover(popover);
-      setOpenState(true);
-      onOpenChange?.(true);
-      dialogContext?.setHasOpenPopover?.(true);
-    }, delay);
-  }, [popover, rootNode, popoverId, delay, dialogContext]);
+    setOpenState(true);
+    onOpenChange?.(true);
+  }, [popover, rootNode, popoverId, onOpenChange, setOpenState]);
   const closePopover = useCallback(
     (fn) => {
-      clearTimeout(openTimeoutRef.current);
-      clearTimeout(closeTimeoutRef.current);
       if (!popover || !openState) return;
-      closeTimeoutRef.current = setTimeout(() => {
-        if (!openOnHover) onClose?.();
-        setOpenState(false);
-        onOpenChange?.(false);
-        fn?.();
-        safeHidePopover(popover);
-        dialogContext?.setHasOpenPopover?.(false);
-      }, 100);
+      if (!openOnHover) onClose?.();
+      setOpenState(false);
+      onOpenChange?.(false);
+      fn?.();
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- onClose and onOpenChange are intentionally omitted to prevent the closePopover function from being recreated on every render, which could cause unnecessary re-runs of the controlled useEffect and potential infinite loops
-    [popover, openState, openOnHover, dialogContext]
+    [popover, openState, openOnHover, onClose, setOpenState, onOpenChange]
+  );
+  useImperativeHandle(
+    ref,
+    () => ({
+      openPopover,
+      closePopover
+    }),
+    [openPopover, closePopover]
   );
   useEffect(() => {
-    return () => {
-      clearTimeout(closeTimeoutRef.current);
-      clearTimeout(openTimeoutRef.current);
-    };
-  }, []);
-  const initialRender = useRef(true);
-  useEffect(() => {
-    if (initialRender.current === true) {
-      if (openState) openPopover();
-      initialRender.current = false;
-      return;
-    }
-  }, [openState, openPopover]);
-  useEffect(() => {
-    if (typeof open === "undefined") return;
-    if (open) {
-      openPopover();
+    if (typeof openState === "undefined") return;
+    if (openState) {
+      if (dialogContext) {
+        if (dialogContext?.ref?.current?.open) {
+          safeShowPopover(popover);
+          dialogContext?.setHasOpenPopover?.(true);
+        }
+        return;
+      }
+      safeShowPopover(popover);
     } else {
-      closePopover();
+      safeHidePopover(popover);
+      dialogContext?.setHasOpenPopover?.(false);
     }
-  }, [open, openPopover, closePopover]);
+  }, [openState, openPopover, closePopover, dialogContext, popover]);
   useOnClickOutside({
+    disable: disableCloseOnClickOutside || !openState,
     onOutsidePress: (e) => {
-      if (!open) return;
+      if (!openState) return;
       onClickOutside?.(e);
       onOutsidePress?.(e);
     },
     targets: [invoker, popover],
     onClose: () => {
-      if (disableCloseOnClickOutside || openOnHover || isControlled || !openState)
-        return;
+      if (openOnHover || isControlled) return;
       closePopover();
     }
   });
@@ -1067,7 +993,11 @@ const PopoverElement = (props) => {
       resetKey: resetKey.current,
       rootNode,
       setRootNode,
-      focusables
+      delay,
+      triggerHovered,
+      setTriggerHovered,
+      contentHovered,
+      setContentHovered
     };
   }, [
     popoverId,
@@ -1095,12 +1025,17 @@ const PopoverElement = (props) => {
     isControlled,
     modal,
     rootNode,
-    focusables
+    delay,
+    triggerHovered,
+    setTriggerHovered,
+    contentHovered,
+    setContentHovered
   ]);
   if (!supportsPopover())
     return /* @__PURE__ */ jsx(PopoverLegacyElement, { ...props });
   return /* @__PURE__ */ jsx(PopoverContext.Provider, { value, children });
-};
+});
+PopoverElement.displayName = "Popover";
 const Popover = Object.assign(PopoverElement, {
   /**
    * PopoverTrigger component for creating custom trigger elements.
@@ -1185,4 +1120,4 @@ const Popover = Object.assign(PopoverElement, {
 });
 
 export { Popover as P, PopoverButton as a, PopoverClose as b, PopoverContent as c, PopoverTrigger as d, PopoverLegacy as e, usePopoverContext as f, usePopoverLegacyContext as u };
-//# sourceMappingURL=Popover-CrksxqKk.js.map
+//# sourceMappingURL=Popover-v8R920kj.js.map