@servicetitan/anvil2 1.27.1 → 1.28.0

package/dist/{Popover-tcXHJePS-CMjz_uId.js → Popover-C1B3UJXp-B5obSIvA.js}

@@ -1,13 +1,324 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useEffect, forwardRef, useRef, useLayoutEffect, createContext, useContext, useId, useState, useCallback, useMemo } from 'react';
-import { e as DialogContext } from './Dialog-DDsVwnZZ-s9GGnSax.js';
-import { B as Button } from './Button-BHwg8Uip-DPU6y8-l.js';
-import { c as cx } from './index-tZvMCc77.js';
-import { g as getKeyboardFocusableElements } from './getKeyboardFocusableElements-QqcABz0D.js';
+import { createContext, useRef, forwardRef, useContext, useMemo, useState, useEffect, useLayoutEffect, useId, useCallback } from 'react';
+import { e as DialogContext } from './Dialog-CUK5YvVY-Dv5edacC.js';
+import { B as Button } from './Button-Ce--YZ9L-Csh0Zzuf.js';
+import { s as supportsPopover } from './supportsPopover-8aJR37cf-8aJR37cf.js';
+import { F as FloatingPortal, q as FloatingFocusManager, b as FloatingArrow, d as useFloating, e as autoUpdate, o as offset, r as size, f as flip, s as shift, l as limitShift, g as arrow$1, t as useClick, h as useHover, i as safePolygon, k as useDismiss, m as useRole, n as useInteractions, p as computePosition } from './floating-ui.react-4AwURJA3.js';
 import { u as useMergeRefs } from './useMergeRefs-Bde85AWI-Bde85AWI.js';
-import { c as computePosition, a as autoUpdate, o as offset, d as size, f as flip, s as shift, l as limitShift, b as arrow$1 } from './floating-ui.react-dom-D912oS4K.js';
+import { c as cx } from './index-tZvMCc77.js';
+import { a as PortalProviderContext } from './PortalProvider-9lXkQ0xY-BKoGegS1.js';
+import { e as DrawerContext } from './Drawer-CrXiK2w0-BMzKuNFt.js';
+import { T as ThemeProvider, a as ThemeProviderContext } from './ThemeProvider-CioBp3gk-B6HyDICa.js';
+import { u as useKeyboardFocusables } from './useKeyboardFocusables-CwVMAe5C-DtjYOAmt.js';
+
+import './Popover-C1B3UJXp.css';function usePopoverLegacy({
+  defaultOpen,
+  placement = "bottom",
+  modal,
+  open: controlledOpen,
+  onOpenChange: setControlledOpen,
+  onOutsidePress,
+  onClose,
+  disableCloseOnClickOutside,
+  disableCloseOnEscape,
+  openOnHover,
+  fillAvailableHeight,
+  fitScreen,
+  maxHeight,
+  minHeight = "2.875rem",
+  matchReferenceWidth,
+  fixedWidth,
+  disableCaret,
+  noPadding,
+  disableShift,
+  disableFlip,
+  disableFlipFallback,
+  disableAutoUpdate,
+  disableFocusLock,
+  disableTriggerFocus,
+  root
+} = {}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const [labelId, setLabelId] = useState();
+  const [descriptionId, setDescriptionId] = useState();
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = setControlledOpen ?? setUncontrolledOpen;
+  const arrowRef = useRef(null);
+  const processMinHeight = typeof minHeight === "string" ? minHeight : `${minHeight}px`;
+  const data = useFloating({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: !disableAutoUpdate ? autoUpdate : undefined,
+    middleware: [
+      offset(8),
+      size({
+        padding: 5,
+        apply({ rects, availableHeight, elements }) {
+          Object.assign(elements.floating.style, {
+            ...matchReferenceWidth ? { width: `${rects.reference.width}px` } : fixedWidth ? { width: "40dvw" } : {},
+            ...fillAvailableHeight ? {
+              height: `${availableHeight - 20}px`,
+              minHeight: processMinHeight
+            } : {},
+            ...maxHeight ? {
+              minHeight: processMinHeight,
+              height: fitScreen ? typeof maxHeight === "string" ? maxHeight : `${maxHeight}px` : undefined,
+              maxHeight: fitScreen ? `${availableHeight - 20}px` : typeof maxHeight === "string" ? maxHeight : `${maxHeight}px`
+            } : {},
+            ...fitScreen && !maxHeight ? {
+              minHeight: processMinHeight,
+              maxHeight: `${availableHeight - 20}px`
+            } : {},
+            zIndex: 1
+          });
+        }
+      }),
+      flip({
+        mainAxis: !disableFlip,
+        crossAxis: false,
+        fallbackAxisSideDirection: disableFlipFallback ? "none" : "end",
+        padding: 5
+      }),
+      shift({
+        padding: 5,
+        mainAxis: !disableShift,
+        crossAxis: false,
+        limiter: limitShift({
+          mainAxis: !disableShift
+        })
+      }),
+      arrow$1({ element: !disableCaret ? arrowRef : null, padding: 5 })
+    ]
+  });
+  const context = data.context;
+  const click = useClick(context, {
+    enabled: controlledOpen == null && !openOnHover
+  });
+  const hover = useHover(context, {
+    enabled: controlledOpen == null && !!openOnHover,
+    handleClose: safePolygon()
+  });
+  const dismiss = useDismiss(context, {
+    escapeKey: !disableCloseOnEscape,
+    outsidePress: (event) => {
+      if (disableCloseOnClickOutside) {
+        return false;
+      }
+      const result = typeof onOutsidePress === "function" ? onOutsidePress?.(event) : true;
+      if (!result) {
+        return result;
+      } else {
+        onClose?.();
+        setOpen(false);
+        return result;
+      }
+    }
+  });
+  const role = useRole(context);
+  const interactions = useInteractions([click, hover, dismiss, role]);
+  return useMemo(
+    () => ({
+      open,
+      setOpen,
+      onClose,
+      ...interactions,
+      ...data,
+      modal,
+      labelId,
+      descriptionId,
+      setLabelId,
+      setDescriptionId,
+      arrowRef,
+      disableCaret,
+      noPadding,
+      fillAvailableHeight,
+      maxHeight,
+      matchReferenceWidth,
+      fixedWidth,
+      disableFlipFallback,
+      disableAutoUpdate,
+      disableFocusLock,
+      disableTriggerFocus,
+      root
+    }),
+    [
+      open,
+      setOpen,
+      onClose,
+      interactions,
+      data,
+      modal,
+      labelId,
+      descriptionId,
+      disableCaret,
+      noPadding,
+      fillAvailableHeight,
+      maxHeight,
+      matchReferenceWidth,
+      fixedWidth,
+      disableFlipFallback,
+      disableAutoUpdate,
+      disableFocusLock,
+      disableTriggerFocus,
+      root
+    ]
+  );
+}
+
+const PopoverLegacyContext = createContext(null);
+const usePopoverLegacyContext = () => {
+  const context = useContext(PopoverLegacyContext);
+  if (context == null) {
+    throw new Error("Popover components must be wrapped in <Popover />");
+  }
+  return context;
+};
+
+const PopoverLegacyTrigger = function PopoverLegacyTrigger2(props) {
+  const { children } = props;
+  const context = usePopoverLegacyContext();
+  const ref = useRef(null);
+  const mergedRef = useMergeRefs([context.refs.setReference, ref]);
+  return children({
+    "data-state": context.open ? "open" : "closed",
+    "data-anv": "popover-trigger",
+    ...context.getReferenceProps({ ref: mergedRef })
+  });
+};
+
+const styles$1 = {
+	"content-legacy": "_content-legacy_v59n0_4",
+	"scroller-legacy": "_scroller-legacy_v59n0_28",
+	"arrow-legacy": "_arrow-legacy_v59n0_35",
+	"no-padding": "_no-padding_v59n0_46"
+};
+
+const PopoverLegacyContent = forwardRef(function PopoverContent({ className, style, ...props }, propRef) {
+  const {
+    context: floatingContext,
+    theme,
+    mode,
+    disableCaret,
+    noPadding,
+    onClose,
+    disableFocusLock,
+    disableTriggerFocus,
+    root,
+    ...context
+  } = usePopoverLegacyContext();
+  const dialogContext = useContext(DialogContext);
+  const drawerContext = useContext(DrawerContext);
+  const { root: portalRoot } = useContext(PortalProviderContext);
+  const ref = useMergeRefs([context.refs.setFloating, propRef]);
+  if (!floatingContext.open) return null;
+  if (dialogContext && !dialogContext?.ref?.current) return null;
+  const popoverClassNames = cx(className, styles$1["content-legacy"], {
+    [styles$1["no-padding"]]: noPadding
+  });
+  const onKeyDownHandler = (e) => {
+    if (e.code === "Escape") {
+      onClose?.();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    FloatingPortal,
+    {
+      root: root ?? dialogContext?.ref?.current ?? drawerContext?.ref?.current ?? portalRoot,
+      children: /* @__PURE__ */ jsx(
+        FloatingFocusManager,
+        {
+          context: floatingContext,
+          modal: context.modal,
+          order: disableTriggerFocus ? ["content"] : ["reference", "content"],
+          disabled: disableFocusLock,
+          children: /* @__PURE__ */ jsx(ThemeProvider, { theme, mode, children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref,
+              "data-anv": "popover-content",
+              style: { ...context.floatingStyles, ...style },
+              "aria-labelledby": context.labelId,
+              "aria-describedby": context.descriptionId,
+              className: popoverClassNames,
+              ...context.getFloatingProps(props),
+              onKeyDown: onKeyDownHandler,
+              role: "presentation",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: styles$1["scroller-legacy"], children: props.children }),
+                !disableCaret && /* @__PURE__ */ jsx(
+                  FloatingArrow,
+                  {
+                    ref: context.arrowRef,
+                    context: floatingContext,
+                    className: styles$1["arrow-legacy"]
+                  }
+                )
+              ]
+            }
+          ) })
+        }
+      )
+    }
+  );
+});
 
-import './Popover-tcXHJePS.css';const useOnClickOutside = ({
+const PopoverLegacyClose = forwardRef(function PopoverClose(props, ref) {
+  const { setOpen, onClose } = usePopoverLegacyContext();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      "data-anv": "popover-close",
+      ...props,
+      onClick: (event) => {
+        props.onClick?.(event);
+        onClose?.();
+        setOpen(false);
+      }
+    }
+  );
+});
+
+const PopoverLegacyButton = forwardRef(function PopoverButton(props, ref) {
+  const { children, size, ...rest } = props;
+  const context = usePopoverLegacyContext();
+  const childrenRef = children.ref;
+  const mergedRef = useMergeRefs([context.refs.setReference, ref, childrenRef]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref: mergedRef,
+      size,
+      "data-state": context.open ? "open" : "closed",
+      "data-anv": "popover-button",
+      ...context.getReferenceProps(rest),
+      children
+    }
+  );
+});
+
+function PopoverLegacyElement({
+  children,
+  modal,
+  ...restOptions
+}) {
+  const popover = usePopoverLegacy({ modal, ...restOptions });
+  const { theme, mode = "light" } = useContext(ThemeProviderContext);
+  const value = useMemo(
+    () => ({ ...popover, theme, mode }),
+    [mode, popover, theme]
+  );
+  return /* @__PURE__ */ jsx(PopoverLegacyContext.Provider, { value, children });
+}
+const PopoverLegacy = Object.assign(PopoverLegacyElement, {
+  Trigger: PopoverLegacyTrigger,
+  Close: PopoverLegacyClose,
+  Content: PopoverLegacyContent,
+  Button: PopoverLegacyButton
+});
+
+const useOnClickOutside = ({
   onOutsidePress,
   targets,
   onClose
@@ -52,6 +363,52 @@ import './Popover-tcXHJePS.css';const useOnClickOutside = ({
   }, [onClose, onOutsidePress, targets]);
 };
 
+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;
+}
+
 function usePopoverContext() {
   const context = useContext(PopoverContext);
   const invokerRef = useRef(null);
@@ -87,18 +444,12 @@ function usePopoverContext() {
   };
   const onKeyDownHandler = (e) => {
     if (!context?.openState) return;
-    if (e.code === "Escape" && !context.disableCloseOnEscape && !context.controlled) {
+    if (e.code === "Escape" && !context?.disableCloseOnEscape && !context?.controlled) {
       context?.closePopover();
       return;
     }
-    if (!context.popover) return;
-    const focusables = getKeyboardFocusableElements(context.popover);
-    if (e.code === "Tab" && !e.shiftKey && context?.modal) {
-      focusables[0].focus();
-      e.preventDefault();
-      return;
-    }
-    if (e.code === "Tab" && e.shiftKey && context?.modal) {
+    const focusables = context.focusables;
+    if (e.code === "Tab" && e.shiftKey && context?.modal && focusables) {
       focusables[focusables.length - 1].focus();
       e.preventDefault();
       return;
@@ -144,6 +495,7 @@ function usePopoverContext() {
       arrowRef,
       key: context.resetKey
     },
+    rootNode: context.rootNode,
     onClose: context.onClose,
     setOpen: context.setOpenState,
     open: context.openState,
@@ -161,7 +513,8 @@ function usePopoverContext() {
     fixedWidth: context.fixedWidth,
     disableFlipFallback: context.disableFlipFallback,
     disableFocusLock: context.modal,
-    disableTriggerFocus: context.disableTriggerFocus
+    disableTriggerFocus: context.disableTriggerFocus,
+    focusables: context.focusables
   };
 }
 
@@ -203,10 +556,19 @@ const PopoverButton = forwardRef(
       onClick?.(e);
       context?.invoker.onClick();
     };
+    const buttonRef = useMergeRefs([context?.invoker.ref, ref]);
+    if (!supportsPopover())
+      return /* @__PURE__ */ jsx(
+        PopoverLegacyButton,
+        {
+          ...props,
+          ref
+        }
+      );
     return /* @__PURE__ */ jsx(
       Button,
       {
-        ref: useMergeRefs([context?.invoker.ref, ref]),
+        ref: buttonRef,
         size,
         onClick: onClickHandler,
         onKeyDown: onKeyDownHandler,
@@ -230,6 +592,8 @@ const PopoverClose = forwardRef(
   function PopoverClose2(props, ref) {
     const { onClick, ...rest } = props;
     const context = usePopoverContext();
+    if (!supportsPopover())
+      return /* @__PURE__ */ jsx(PopoverLegacyClose, { ...props, ref });
     return /* @__PURE__ */ jsx(
       Button,
       {
@@ -280,15 +644,11 @@ const PopoverContent = forwardRef(
       [styles["no-padding"]]: context?.noPadding
     });
     const childrenRef = useRef(null);
-    const focusItems = useRef();
     const combinedStyles = {
       ...style,
       ...context?.popover.style
     };
-    useLayoutEffect(() => {
-      const focusElements = getKeyboardFocusableElements(childrenRef.current);
-      focusItems.current = focusElements;
-    }, [childrenRef, children, context?.open]);
+    const focusables = context?.focusables;
     const onMouseEnterHandler = (e) => {
       onMouseEnter?.(e);
       if (!context?.openOnHover) return;
@@ -310,15 +670,18 @@ const PopoverContent = forwardRef(
     };
     const onKeyDownHandler = (e) => {
       onKeyDown?.(e);
-      if (!context?.open) return;
-      if (e.code === "Escape" && !context.disableCloseOnEscape) {
+      if (e.code === "Escape" && !context?.disableCloseOnEscape) {
         context?.popover.close();
       }
-      if (!context.modal) return;
+      if (!context?.modal) return;
       if (e.code === "Tab" && !e.shiftKey) {
-        if (document.activeElement === focusItems.current?.[focusItems.current.length - 1]) {
+        if (focusables && compareElements(
+          context.rootNode?.activeElement,
+          focusables[focusables.length - 1],
+          ["tabindex"]
+        )) {
           if (context.disableTriggerFocus) {
-            focusItems.current[0].focus();
+            focusables[0].focus();
           } else {
             context.invoker.element?.focus();
             context.popover.show();
@@ -327,9 +690,13 @@ const PopoverContent = forwardRef(
         }
       }
       if (e.code === "Tab" && e.shiftKey) {
-        if (document.activeElement === focusItems.current?.[0]) {
+        if (focusables && compareElements(
+          context.rootNode.activeElement,
+          focusables[0],
+          ["tabindex"]
+        )) {
           if (context.disableTriggerFocus) {
-            focusItems.current[focusItems.current.length - 1].focus();
+            focusables[focusables.length - 1].focus();
           } else {
             context.invoker.element?.focus();
             context.popover.show();
@@ -339,6 +706,16 @@ const PopoverContent = forwardRef(
       }
     };
     const manualPopover = context?.controlled || context?.disableCloseOnClickOutside || context?.disableCloseOnEscape || context?.openOnHover;
+    const popoverContentRef = useMergeRefs([context?.popover.ref, ref]);
+    const popoverScrollerRef = useMergeRefs([childrenRef, scrollerRef]);
+    if (!supportsPopover())
+      return /* @__PURE__ */ jsx(
+        PopoverLegacyContent,
+        {
+          ...props,
+          ref
+        }
+      );
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -346,7 +723,7 @@ const PopoverContent = forwardRef(
         id: context?.popover.id,
         "data-anv": "popover-content",
         className: popoverClassNames,
-        ref: useMergeRefs([context?.popover.ref, ref]),
+        ref: popoverContentRef,
         style: combinedStyles,
         onMouseEnter: onMouseEnterHandler,
         onMouseLeave: onMouseLeaveHandler,
@@ -361,7 +738,7 @@ const PopoverContent = forwardRef(
               className: styles.scroller,
               role: "presentation",
               tabIndex: -1,
-              ref: useMergeRefs([childrenRef, scrollerRef]),
+              ref: popoverScrollerRef,
               onKeyDown: onKeyDownHandler,
               onScroll,
               onScrollCapture,
@@ -382,9 +759,11 @@ const PopoverContent = forwardRef(
 function PopoverTrigger(props) {
   const { children } = props;
   const context = usePopoverContext();
+  if (!supportsPopover())
+    return /* @__PURE__ */ jsx(PopoverLegacyTrigger, { ...props });
   if (!context) return;
   const { element, ...rest } = context.invoker;
-  return children(rest);
+  return children({ "data-test": "hello", ...rest });
 }
 
 const PopoverContext = createContext(null);
@@ -414,7 +793,8 @@ const PopoverElement = (props) => {
     modal,
     noPadding,
     onOutsidePress,
-    onClose
+    onClose,
+    root
   } = props;
   const uid = useId();
   const [invoker, setInvoker] = useState(undefined);
@@ -429,6 +809,7 @@ const PopoverElement = (props) => {
   const processMinHeight = typeof minHeight === "string" ? minHeight : `${minHeight}px`;
   const updatePosition = useCallback(() => {
     if (!invoker || !popover) return;
+    if (!openState) return;
     computePosition(invoker, popover, {
       placement,
       middleware: [
@@ -516,6 +897,7 @@ const PopoverElement = (props) => {
     invoker,
     matchReferenceWidth,
     maxHeight,
+    openState,
     placement,
     popover,
     processMinHeight
@@ -536,11 +918,17 @@ const PopoverElement = (props) => {
       cleanup();
     };
   }, [invoker, popover, updatePosition, openState]);
+  popover?.getRootNode();
+  const { focusables } = useKeyboardFocusables(popover, {
+    observeChange: true
+  });
   const popoverHoverTriggered = useRef(false);
   const openPopover = useCallback(async () => {
     popoverHoverTriggered.current = true;
     await new Promise((resolve) => setTimeout(resolve, delay));
-    if (!popoverHoverTriggered.current || !popover || !rootNode?.querySelector(`#${id ?? `popover-${uid.replace(/:/g, "")}`}`))
+    if (!popoverHoverTriggered.current || !popover || !rootNode?.querySelector(
+      `#${id ?? `popover-${uid.replace(/:/g, "")}`}`
+    ))
       return;
     popover.showPopover();
     setOpenState(true);
@@ -612,7 +1000,8 @@ const PopoverElement = (props) => {
       arrowRef,
       resetKey: resetKey.current,
       rootNode,
-      setRootNode
+      setRootNode,
+      focusables
     };
   }, [
     id,
@@ -642,8 +1031,11 @@ const PopoverElement = (props) => {
     arrowRef,
     resetKey,
     rootNode,
-    setRootNode
+    setRootNode,
+    focusables
   ]);
+  if (!supportsPopover())
+    return /* @__PURE__ */ jsx(PopoverLegacyElement, { ...props });
   return /* @__PURE__ */ jsx(PopoverContext.Provider, { value, children });
 };
 const Popover = Object.assign(PopoverElement, {
@@ -654,5 +1046,5 @@ const Popover = Object.assign(PopoverElement, {
   Context: PopoverContext
 });
 
-export { PopoverTrigger as P, PopoverContent as a, PopoverClose as b, PopoverButton as c, Popover as d, usePopoverContext as u };
-//# sourceMappingURL=Popover-tcXHJePS-CMjz_uId.js.map
+export { PopoverTrigger as P, PopoverContent as a, PopoverClose as b, PopoverButton as c, Popover as d, PopoverLegacy as e, usePopoverContext as f, usePopoverLegacyContext as u };
+//# sourceMappingURL=Popover-C1B3UJXp-B5obSIvA.js.map