@servicetitan/anvil2 3.0.4 → 3.0.6

package/dist/{syncFilterUtils-hlw11Ud8.js → syncFilterUtils-COxBIkt6.js}

@@ -4,14 +4,14 @@ import { B as Button } from './Button-C_V2xQAs.js';
 import { c as cx } from './index-De1g9FRV.js';
 import { useState, useRef, useCallback, useEffect, useMemo, forwardRef, useId, useImperativeHandle } from 'react';
 import { u as useIntersectionObserver } from './useIntersectionObserver-BEmMDO3P.js';
-import { T as Text } from './Text-BgPuOXJM.js';
+import { T as Text } from './Text-BTzgTpqu.js';
 import { D as Divider } from './Divider-CxtTyw8_.js';
 import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
 import { S as SrOnly } from './SrOnly-pnf8ajnh.js';
 import { F as Flex } from './Flex-_orhvoxS.js';
 import { I as Icon } from './Icon-feeG7gXA.js';
 import { A as Avatar } from './Avatar-B_cRQqKR.js';
-import { C as Chip } from './Chip-0-Yx9SGX.js';
+import { C as Chip } from './Chip-D2k5X_wX.js';
 import { S as SvgCheckBox, a as SvgCheckBoxOutlineBlank } from './check_box-0U1tbEAd.js';
 import { S as SvgIndeterminateCheckBox } from './indeterminate_check_box-jjLG4UY6.js';
 import { S as SvgCheck } from './check-Cf67OWrZ.js';
@@ -23,6 +23,7 @@ import { S as SvgClose } from './close-DZj38AEh.js';
 import { D as DialogContext } from './DialogContext-DBgtApl9.js';
 import { t as tabbable } from './usePopoverTransitionStates-CDXCdyKa.js';
 import { u as useDialogScrollLock } from './useDialogScrollLock-BW-aVboo.js';
+import { S as SvgAdd } from './add-BcQkAUip.js';
 import { u as useBreakpoint } from './useBreakpoint-CeaUyHxh.js';
 import { m as matchSorter } from './match-sorter.esm-CGAauEiU.js';
 
@@ -177,18 +178,18 @@ function useSelectFieldLoading(config) {
   };
 }
 
-const empty = "_empty_x5qls_7";
-const scroller = "_scroller_x5qls_23";
-const divider = "_divider_x5qls_57";
+const empty = "_empty_1stqb_7";
+const scroller = "_scroller_1stqb_23";
+const divider = "_divider_1stqb_59";
 const styles$3 = {
-	"select-field-list": "_select-field-list_x5qls_2",
+	"select-field-list": "_select-field-list_1stqb_2",
 	empty: empty,
-	"load-more": "_load-more_x5qls_15",
+	"load-more": "_load-more_1stqb_15",
 	scroller: scroller,
-	"scroll-sentinel": "_scroll-sentinel_x5qls_32",
-	"pinned-section": "_pinned-section_x5qls_40",
-	"pinned-section-header": "_pinned-section-header_x5qls_44",
-	"pinned-section-list": "_pinned-section-list_x5qls_51",
+	"scroll-sentinel": "_scroll-sentinel_1stqb_34",
+	"pinned-section": "_pinned-section_1stqb_42",
+	"pinned-section-header": "_pinned-section-header_1stqb_46",
+	"pinned-section-list": "_pinned-section-list_1stqb_53",
 	divider: divider
 };
 
@@ -902,192 +903,6 @@ function useDebouncedCallback(callback, delay = 300) {
   return debouncedCallback;
 }
 
-const styles$1 = {
-	"options-popover": "_options-popover_12bid_2"
-};
-
-function resolveWidth(width, referenceWidth) {
-  if (width === "reference") return `${referenceWidth}px`;
-  if (typeof width === "number") return `${width}px`;
-  if (typeof width === "string") return width;
-  return void 0;
-}
-const OptionsPopover = (props) => {
-  const ref = useRef(null);
-  const { id, children, referenceElement, open, onClickOutside, width } = props;
-  useOnClickOutside({
-    targets: [ref.current ?? void 0, referenceElement.current ?? void 0],
-    onClickOutside,
-    disable: !open
-  });
-  useEffect(() => {
-    if (open) {
-      ref.current?.showPopover();
-    } else {
-      ref.current?.hidePopover();
-    }
-  }, [open]);
-  const updatePosition = useCallback(async () => {
-    if (!ref.current || !referenceElement.current) return;
-    const position = await computePosition(
-      referenceElement.current,
-      ref.current,
-      {
-        placement: "bottom-start",
-        middleware: [
-          offset(8),
-          autoPlacement({
-            allowedPlacements: [
-              "bottom-start",
-              "bottom-end",
-              "top-start",
-              "top-end"
-            ],
-            padding: 8
-          }),
-          size({
-            padding: 8,
-            apply({ rects, elements, availableHeight, availableWidth }) {
-              const resolved = resolveWidth(width, rects.reference.width);
-              Object.assign(elements.floating.style, {
-                ...resolved != null && { width: resolved },
-                maxWidth: `${Math.max(0, availableWidth)}px`,
-                maxHeight: `${Math.max(0, availableHeight)}px`
-              });
-            }
-          })
-        ]
-      }
-    );
-    ref.current.style.left = `${position.x}px`;
-    ref.current.style.top = `${position.y}px`;
-  }, [ref, referenceElement, width]);
-  useEffect(() => {
-    if (!ref.current || !referenceElement.current || !open) return;
-    const cleanup = autoUpdate(
-      referenceElement.current,
-      ref.current,
-      updatePosition
-    );
-    return () => {
-      cleanup();
-    };
-  }, [referenceElement, ref, updatePosition, open]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      id,
-      className: styles$1["options-popover"],
-      popover: "manual",
-      children
-    }
-  );
-};
-
-const header = "_header_3g90c_40";
-const field = "_field_3g90c_2";
-const content = "_content_3g90c_53";
-const styles = {
-	"field-dialog": "_field-dialog_3g90c_2",
-	"field-dialog-visual-viewport-height": "_field-dialog-visual-viewport-height_3g90c_20",
-	header: header,
-	field: field,
-	content: content
-};
-
-const OptionsDialog = ({
-  id,
-  isOpen,
-  onClose,
-  field,
-  children,
-  title,
-  initialFocusResolver
-}) => {
-  const elRef = useRef(null);
-  const visualViewportHeightRef = useRef(null);
-  useDialogScrollLock({
-    open: isOpen,
-    id,
-    enableScrollChaining: false,
-    elementRef: elRef
-  });
-  const computeFocus = useCallback(
-    (focusables) => {
-      if (initialFocusResolver) {
-        return initialFocusResolver(focusables);
-      }
-      return focusables.find(
-        (focusable) => focusable.dataset.anv !== "dialog-cancel-button"
-      ) || focusables[0];
-    },
-    [initialFocusResolver]
-  );
-  useEffect(() => {
-    if (isOpen) {
-      elRef.current?.showModal();
-      if (elRef.current) {
-        computeFocus(tabbable(elRef.current)).focus();
-      }
-    } else {
-      elRef.current?.close();
-    }
-  }, [isOpen]);
-  useEffect(() => {
-    if (isOpen) {
-      const handleResize = () => {
-        if (!visualViewportHeightRef.current) return;
-        visualViewportHeightRef.current.style.height = `${window.visualViewport?.height ?? 0}px`;
-        visualViewportHeightRef.current.style.maxHeight = `${window.visualViewport?.height ?? 0}px`;
-      };
-      window.visualViewport?.addEventListener("resize", handleResize);
-      return () => {
-        window.visualViewport?.removeEventListener("resize", handleResize);
-      };
-    }
-  }, [isOpen]);
-  return /* @__PURE__ */ jsx(
-    "dialog",
-    {
-      ref: elRef,
-      id,
-      "data-anv": "field-dialog",
-      className: styles["field-dialog"],
-      onKeyDown: (e) => {
-        if (e.code === "Escape") {
-          e.preventDefault();
-          onClose();
-        }
-      },
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: styles["field-dialog-visual-viewport-height"],
-          ref: visualViewportHeightRef,
-          children: [
-            /* @__PURE__ */ jsxs(Flex, { direction: "row", className: styles["header"], children: [
-              /* @__PURE__ */ jsx(Text, { variant: "headline", el: "h1", children: title }),
-              /* @__PURE__ */ jsx("span", { className: styles["close-container"], children: /* @__PURE__ */ jsx(DialogContext.Provider, { value: { close: onClose }, children: /* @__PURE__ */ jsx(
-                DialogCancelButton,
-                {
-                  className: styles["close-button"],
-                  size: "small",
-                  appearance: "ghost",
-                  "aria-label": "Close dialog",
-                  icon: SvgClose
-                }
-              ) }) })
-            ] }),
-            field ? /* @__PURE__ */ jsx(Flex, { direction: "column", className: styles["field"], children: field }) : null,
-            /* @__PURE__ */ jsx(Flex, { direction: "column", className: styles["content"], children })
-          ]
-        }
-      )
-    }
-  );
-};
-
 const DEFAULT_CACHE_SIZE = 15;
 const STATIC_CACHE_KEY = "__static__";
 function cacheSet(sectionCache, key, value, maxSize) {
@@ -1360,6 +1175,263 @@ function buildSelectItems({
   return { items, sectionsMeta: meta };
 }
 
+const styles$1 = {
+	"options-popover": "_options-popover_1a8y0_2",
+	"options-popover-body": "_options-popover-body_1a8y0_39",
+	"options-popover-footer": "_options-popover-footer_1a8y0_48"
+};
+
+function resolveWidth(width, referenceWidth) {
+  if (width === "reference") return `${referenceWidth}px`;
+  if (typeof width === "number") return `${width}px`;
+  if (typeof width === "string") return width;
+  return void 0;
+}
+const OptionsPopover = (props) => {
+  const ref = useRef(null);
+  const { id, children, referenceElement, open, onClose, width, footer } = props;
+  const lastCloseRef = useRef(0);
+  const safeClose = useCallback(() => {
+    const now = Date.now();
+    if (now - lastCloseRef.current < 50) return;
+    lastCloseRef.current = now;
+    onClose();
+  }, [onClose]);
+  useOnClickOutside({
+    targets: [ref.current ?? void 0, referenceElement.current ?? void 0],
+    onClickOutside: safeClose,
+    disable: !open
+  });
+  useEffect(() => {
+    if (open) {
+      ref.current?.showPopover();
+    } else {
+      ref.current?.hidePopover();
+    }
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const popoverEl = ref.current;
+    if (!popoverEl) return;
+    const handleFocusOut = (e) => {
+      const next = e.relatedTarget;
+      if (!next) {
+        safeClose();
+        return;
+      }
+      if (popoverEl.contains(next)) return;
+      const trigger = referenceElement.current;
+      if (trigger && trigger.contains(next)) return;
+      safeClose();
+    };
+    popoverEl.addEventListener("focusout", handleFocusOut);
+    return () => popoverEl.removeEventListener("focusout", handleFocusOut);
+  }, [open, safeClose, referenceElement]);
+  useEffect(() => {
+    if (!open) return;
+    const popoverEl = ref.current;
+    if (!popoverEl) return;
+    const handleKeyDown = (e) => {
+      if (e.key !== "Escape" || e.defaultPrevented) return;
+      e.preventDefault();
+      safeClose();
+    };
+    popoverEl.addEventListener("keydown", handleKeyDown);
+    return () => popoverEl.removeEventListener("keydown", handleKeyDown);
+  }, [open, safeClose]);
+  const updatePosition = useCallback(async () => {
+    if (!ref.current || !referenceElement.current) return;
+    const position = await computePosition(
+      referenceElement.current,
+      ref.current,
+      {
+        placement: "bottom-start",
+        middleware: [
+          offset(8),
+          autoPlacement({
+            allowedPlacements: [
+              "bottom-start",
+              "bottom-end",
+              "top-start",
+              "top-end"
+            ],
+            padding: 8
+          }),
+          size({
+            padding: 8,
+            apply({ rects, elements, availableHeight, availableWidth }) {
+              const resolved = resolveWidth(width, rects.reference.width);
+              Object.assign(elements.floating.style, {
+                ...resolved != null && { width: resolved },
+                maxWidth: `${Math.max(0, availableWidth)}px`,
+                maxHeight: `${Math.max(0, availableHeight)}px`
+              });
+            }
+          })
+        ]
+      }
+    );
+    ref.current.style.left = `${position.x}px`;
+    ref.current.style.top = `${position.y}px`;
+  }, [ref, referenceElement, width]);
+  useEffect(() => {
+    if (!ref.current || !referenceElement.current || !open) return;
+    const cleanup = autoUpdate(
+      referenceElement.current,
+      ref.current,
+      updatePosition
+    );
+    return () => {
+      cleanup();
+    };
+  }, [referenceElement, ref, updatePosition, open]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      id,
+      className: styles$1["options-popover"],
+      popover: "manual",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles$1["options-popover-body"], children }),
+        footer ? /* @__PURE__ */ jsx("div", { className: styles$1["options-popover-footer"], children: footer }) : null
+      ]
+    }
+  );
+};
+
+const header = "_header_1v2a3_41";
+const field = "_field_1v2a3_2";
+const content = "_content_1v2a3_54";
+const footer = "_footer_1v2a3_60";
+const styles = {
+	"field-dialog": "_field-dialog_1v2a3_2",
+	"field-dialog-visual-viewport-height": "_field-dialog-visual-viewport-height_1v2a3_21",
+	header: header,
+	field: field,
+	content: content,
+	footer: footer
+};
+
+const OptionsDialog = ({
+  id,
+  isOpen,
+  onClose,
+  field,
+  children,
+  title,
+  initialFocusResolver,
+  footer
+}) => {
+  const elRef = useRef(null);
+  const visualViewportHeightRef = useRef(null);
+  useDialogScrollLock({
+    open: isOpen,
+    id,
+    enableScrollChaining: false,
+    elementRef: elRef
+  });
+  const computeFocus = useCallback(
+    (focusables) => {
+      if (initialFocusResolver) {
+        return initialFocusResolver(focusables);
+      }
+      return focusables.find(
+        (focusable) => focusable.dataset.anv !== "dialog-cancel-button"
+      ) || focusables[0];
+    },
+    [initialFocusResolver]
+  );
+  useEffect(() => {
+    if (isOpen) {
+      elRef.current?.showModal();
+      if (elRef.current) {
+        computeFocus(tabbable(elRef.current)).focus();
+      }
+    } else {
+      elRef.current?.close();
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (isOpen) {
+      const handleResize = () => {
+        if (!visualViewportHeightRef.current) return;
+        visualViewportHeightRef.current.style.height = `${window.visualViewport?.height ?? 0}px`;
+        visualViewportHeightRef.current.style.maxHeight = `${window.visualViewport?.height ?? 0}px`;
+      };
+      window.visualViewport?.addEventListener("resize", handleResize);
+      return () => {
+        window.visualViewport?.removeEventListener("resize", handleResize);
+      };
+    }
+  }, [isOpen]);
+  return /* @__PURE__ */ jsx(
+    "dialog",
+    {
+      ref: elRef,
+      id,
+      "data-anv": "field-dialog",
+      className: styles["field-dialog"],
+      onKeyDown: (e) => {
+        if (e.code === "Escape") {
+          e.preventDefault();
+          onClose();
+        }
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: styles["field-dialog-visual-viewport-height"],
+          ref: visualViewportHeightRef,
+          children: [
+            /* @__PURE__ */ jsxs(Flex, { direction: "row", className: styles["header"], children: [
+              /* @__PURE__ */ jsx(Text, { variant: "headline", el: "h1", children: title }),
+              /* @__PURE__ */ jsx("span", { className: styles["close-container"], children: /* @__PURE__ */ jsx(DialogContext.Provider, { value: { close: onClose }, children: /* @__PURE__ */ jsx(
+                DialogCancelButton,
+                {
+                  className: styles["close-button"],
+                  size: "small",
+                  appearance: "ghost",
+                  "aria-label": "Close dialog",
+                  icon: SvgClose
+                }
+              ) }) })
+            ] }),
+            field ? /* @__PURE__ */ jsx(Flex, { direction: "column", className: styles["field"], children: field }) : null,
+            /* @__PURE__ */ jsx(Flex, { direction: "column", className: styles["content"], children }),
+            footer ? /* @__PURE__ */ jsx("div", { className: styles["footer"], children: footer }) : null
+          ]
+        }
+      )
+    }
+  );
+};
+
+const AddNewItemButton = ({
+  searchText,
+  addItemLabel,
+  onAddNewItem,
+  onCloseMenu
+}) => {
+  if (!onAddNewItem) return null;
+  const resolvedLabel = typeof addItemLabel === "function" ? addItemLabel(searchText) : addItemLabel ?? "Add new item";
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      appearance: "secondary",
+      size: "small",
+      icon: { before: SvgAdd },
+      onClick: () => {
+        onCloseMenu?.();
+        onAddNewItem(searchText);
+      },
+      style: { width: "100%" },
+      children: resolvedLabel
+    }
+  );
+};
+AddNewItemButton.displayName = "AddNewItemButton";
+
 function detectCoarsePointer() {
   if (typeof window === "undefined" || !window.matchMedia) {
     return false;
@@ -1501,5 +1573,5 @@ const sortByGroup = (options, groupSorter) => {
   });
 };
 
-export { OptionsPanel as O, VirtualizedOptionsPanel as V, useSelectOrchestration as a, useProcessedOptions as b, buildSelectItems as c, useDebouncedCallback as d, OptionsDialog as e, OptionsPopover as f, defaultSyncFilter as g, toSelectItem as h, sortByGroup as s, toSyncFilterFn as t, useAdaptiveView as u };
-//# sourceMappingURL=syncFilterUtils-hlw11Ud8.js.map
+export { AddNewItemButton as A, OptionsPanel as O, VirtualizedOptionsPanel as V, useSelectOrchestration as a, useProcessedOptions as b, buildSelectItems as c, useDebouncedCallback as d, OptionsDialog as e, OptionsPopover as f, defaultSyncFilter as g, toSelectItem as h, sortByGroup as s, toSyncFilterFn as t, useAdaptiveView as u };
+//# sourceMappingURL=syncFilterUtils-COxBIkt6.js.map