@servicetitan/anvil2 3.0.5 → 3.0.7

package/dist/{syncFilterUtils-Dpp7gt05.js → syncFilterUtils-BEKek64h.js}

@@ -1,20 +1,20 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { S as Spinner } from './Spinner-B7tTWcP6.js';
 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 { useState, useRef, useCallback, useEffect, forwardRef, useMemo, 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 { 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';
+import { a as SvgCheckBoxOutlineBlank, S as SvgCheckBox } from './check_box-0U1tbEAd.js';
+import { S as SvgIndeterminateCheckBox } from './indeterminate_check_box-jjLG4UY6.js';
+import { F as Flex } from './Flex-_orhvoxS.js';
+import { A as Avatar } from './Avatar-B_cRQqKR.js';
+import { C as Chip } from './Chip-D2k5X_wX.js';
 import { d as defaultRangeExtractor, u as useVirtualizer } from './index-DXeGMe23.js';
 import { a as useOnClickOutside } from './useOnClickOutside-Zw5vzxSq.js';
 import { c as computePosition, o as offset, v as autoPlacement, g as size, a as autoUpdate } from './floating-ui.react-dom-CHrYz13o.js';
@@ -181,7 +181,7 @@ function useSelectFieldLoading(config) {
 const empty = "_empty_1stqb_7";
 const scroller = "_scroller_1stqb_23";
 const divider = "_divider_1stqb_59";
-const styles$3 = {
+const styles$6 = {
 	"select-field-list": "_select-field-list_1stqb_2",
 	empty: empty,
 	"load-more": "_load-more_1stqb_15",
@@ -193,31 +193,120 @@ const styles$3 = {
 	divider: divider
 };
 
-const floating = "_floating_1rq2x_30";
-const highlighted = "_highlighted_1rq2x_43";
-const disabled = "_disabled_1rq2x_59";
-const description = "_description_1rq2x_71";
-const checkbox = "_checkbox_1rq2x_79";
-const checked = "_checked_1rq2x_84";
-const indeterminate = "_indeterminate_1rq2x_85";
-const unchecked = "_unchecked_1rq2x_89";
-const styles$2 = {
-	"select-field-list-item": "_select-field-list-item_1rq2x_2",
+const floating = "_floating_1d3fe_2";
+const highlighted = "_highlighted_1d3fe_15";
+const checkmark = "_checkmark_1d3fe_36";
+const styles$5 = {
 	floating: floating,
-	"bulk-action": "_bulk-action_1rq2x_37",
+	"bulk-action": "_bulk-action_1d3fe_9",
 	highlighted: highlighted,
-	"single-selected": "_single-selected_1rq2x_49",
-	"single-selected-highlighted": "_single-selected-highlighted_1rq2x_54",
-	disabled: disabled,
-	"side-content": "_side-content_1rq2x_64",
-	description: description,
-	"chips-row": "_chips-row_1rq2x_75",
+	"single-selected": "_single-selected_1d3fe_22",
+	"single-selected-highlighted": "_single-selected-highlighted_1d3fe_29",
+	checkmark: checkmark
+};
+
+const checkbox = "_checkbox_1xh9p_1";
+const checked = "_checked_1xh9p_9";
+const unchecked = "_unchecked_1xh9p_13";
+const indeterminate = "_indeterminate_1xh9p_17";
+const loading = "_loading_1xh9p_21";
+const styles$4 = {
 	checkbox: checkbox,
 	checked: checked,
+	unchecked: unchecked,
 	indeterminate: indeterminate,
-	unchecked: unchecked
+	loading: loading
+};
+
+const iconMap = {
+  checked: SvgCheckBox,
+  unchecked: SvgCheckBoxOutlineBlank,
+  indeterminate: SvgIndeterminateCheckBox
+};
+function OptionCheckbox({ checkState, className }) {
+  if (checkState === "loading") {
+    return /* @__PURE__ */ jsx("span", { className: cx(styles$4["loading"], className), children: /* @__PURE__ */ jsx(Spinner, { size: "small", "aria-hidden": "true" }) });
+  }
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      "aria-hidden": "true",
+      size: "large",
+      svg: iconMap[checkState],
+      className: cx(styles$4["checkbox"], styles$4[checkState], className)
+    }
+  );
+}
+
+const disabled = "_disabled_1tqi5_27";
+const styles$3 = {
+	"option-row": "_option-row_1tqi5_2",
+	disabled: disabled,
+	"side-content": "_side-content_1tqi5_35"
+};
+
+const OptionRow = forwardRef(
+  function OptionRow2({ disabled, children, className, ...rest }, ref) {
+    const optionRowClass = cx(
+      styles$3["option-row"],
+      { [styles$3["disabled"]]: disabled },
+      className
+    );
+    return /* @__PURE__ */ jsx("div", { ref, ...rest, className: optionRowClass, children });
+  }
+);
+const OptionRowSideContent = forwardRef(function OptionRowSideContent2({ children, className, ...rest }, ref) {
+  const sideContentClass = cx(styles$3["side-content"], className);
+  return /* @__PURE__ */ jsx("div", { ref, ...rest, className: sideContentClass, children });
+});
+
+const title = "_title_te5wz_1";
+const description = "_description_te5wz_10";
+const styles$2 = {
+	title: title,
+	description: description,
+	"chips-row": "_chips-row_te5wz_21"
 };
 
+function OptionContentArea({
+  label,
+  content,
+  children
+}) {
+  const hasAvatar = !!content?.avatar;
+  const hasChips = !!content?.chips?.length;
+  const hasIcon = !!content?.icon;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    hasAvatar && /* @__PURE__ */ jsx(OptionRowSideContent, { "aria-hidden": "true", children: /* @__PURE__ */ jsx(Avatar, { size: "medium", ...content.avatar }) }),
+    /* @__PURE__ */ jsxs(Flex, { grow: 1, shrink: 1, direction: "column", justifyContent: "center", children: [
+      /* @__PURE__ */ jsx(Text, { size: "small", className: styles$2["title"], children: content?.title ?? label }),
+      content?.description && /* @__PURE__ */ jsx(Text, { size: "small", className: styles$2["description"], children: content.description }),
+      hasChips && /* @__PURE__ */ jsx(
+        Flex,
+        {
+          wrap: "wrap",
+          gap: "1",
+          className: styles$2["chips-row"],
+          role: "group",
+          "aria-label": "Tags",
+          children: content.chips.map((chip, i) => /* @__PURE__ */ jsx(Chip, { size: "small", ...chip }, `${chip.label}-${i}`))
+        }
+      ),
+      children
+    ] }),
+    hasIcon && /* @__PURE__ */ jsx(OptionRowSideContent, { children: /* @__PURE__ */ jsx(
+      Icon,
+      {
+        size: "large",
+        svg: content.icon.svg,
+        color: content.icon.color,
+        "aria-hidden": content.icon.label ? void 0 : "true",
+        "aria-label": content.icon.label
+      }
+    ) })
+  ] });
+}
+
 const SelectOption = ({
   item,
   index,
@@ -230,92 +319,39 @@ const SelectOption = ({
 }) => {
   const isBulkAction = item.type === "select-all" || item.type === "select-filtered";
   const isSingleSelected = selectionType === "single" && checked === "checked";
-  const checkbox = useMemo(() => {
-    if (checked === "checked")
-      return { icon: SvgCheckBox, class: styles$2["checked"] };
-    if (checked === "unchecked")
-      return { icon: SvgCheckBoxOutlineBlank, class: styles$2["unchecked"] };
-    if (checked === "indeterminate")
-      return { icon: SvgIndeterminateCheckBox, class: styles$2["indeterminate"] };
-    return { icon: SvgCheckBoxOutlineBlank, class: styles$2["unchecked"] };
-  }, [checked]);
-  const content = item.original.content;
-  const hasAvatar = !!content?.avatar;
-  const hasChips = !!content?.chips?.length;
-  const hasIcon = !!content?.icon;
   return /* @__PURE__ */ jsxs(
-    "div",
+    OptionRow,
     {
       "data-item-index": index,
+      disabled,
       ...getItemProps({
         item,
         index,
         "data-type": item.type,
-        className: cx(styles$2["select-field-list-item"], {
-          [styles$2.highlighted]: highlighted && !isSingleSelected,
-          [styles$2["single-selected"]]: isSingleSelected && !highlighted,
-          [styles$2["single-selected-highlighted"]]: isSingleSelected && highlighted,
-          [styles$2.disabled]: disabled,
-          [styles$2["bulk-action"]]: isBulkAction,
-          [styles$2.floating]: isBulkAction && isListScrolled
+        className: cx(styles$5["select-option"], {
+          [styles$5.highlighted]: highlighted && !isSingleSelected,
+          [styles$5["single-selected"]]: isSingleSelected && !highlighted,
+          [styles$5["single-selected-highlighted"]]: isSingleSelected && highlighted,
+          [styles$5["bulk-action"]]: isBulkAction,
+          [styles$5.floating]: isBulkAction && isListScrolled
         })
       }),
       children: [
-        selectionType === "multiple" && /* @__PURE__ */ jsx("div", { className: styles$2["side-content"], children: checked === "loading" ? /* @__PURE__ */ jsx(
-          Flex,
+        selectionType === "multiple" && /* @__PURE__ */ jsx(OptionRowSideContent, { children: /* @__PURE__ */ jsx(OptionCheckbox, { checkState: checked }) }),
+        /* @__PURE__ */ jsx(
+          OptionContentArea,
           {
-            alignItems: "center",
-            justifyContent: "center",
-            style: { height: "1.5rem", width: "1.5rem" },
-            children: /* @__PURE__ */ jsx(Spinner, { size: "small" })
+            label: item.original.label,
+            content: item.original.content
           }
-        ) : (
-          // Decorative: selection state is conveyed by aria-selected on the <li>
-          /* @__PURE__ */ jsx(
-            Icon,
-            {
-              "aria-hidden": "true",
-              size: "large",
-              svg: checkbox.icon,
-              className: cx(styles$2["checkbox"], checkbox.class)
-            }
-          )
-        ) }),
-        hasAvatar && // aria-hidden: Avatar has internal <SrOnly> text that would duplicate the option label
-        /* @__PURE__ */ jsx("div", { className: styles$2["side-content"], "aria-hidden": "true", children: /* @__PURE__ */ jsx(Avatar, { size: "medium", ...content.avatar }) }),
-        /* @__PURE__ */ jsxs(Flex, { grow: 1, shrink: 1, direction: "column", children: [
-          /* @__PURE__ */ jsx(Text, { size: "medium", children: content?.title ?? item.original.label }),
-          content?.description && /* @__PURE__ */ jsx(Text, { size: "small", className: styles$2["description"], children: content.description }),
-          hasChips && // Group label gives screen readers context that these are tags
-          /* @__PURE__ */ jsx(
-            Flex,
-            {
-              wrap: "wrap",
-              gap: "1",
-              className: styles$2["chips-row"],
-              role: "group",
-              "aria-label": "Tags",
-              children: content.chips.map((chip, i) => /* @__PURE__ */ jsx(Chip, { size: "small", ...chip }, `${chip.label}-${i}`))
-            }
-          )
-        ] }),
-        hasIcon && /* @__PURE__ */ jsx("div", { className: styles$2["side-content"], children: /* @__PURE__ */ jsx(
-          Icon,
-          {
-            size: "large",
-            svg: content.icon.svg,
-            color: content.icon.color,
-            "aria-hidden": content.icon.label ? void 0 : "true",
-            "aria-label": content.icon.label
-          }
-        ) }),
-        selectionType === "single" && checked === "checked" && /* @__PURE__ */ jsx("div", { className: styles$2["side-content"], children: /* @__PURE__ */ jsx(
+        ),
+        selectionType === "single" && checked === "checked" && /* @__PURE__ */ jsx(OptionRowSideContent, { children: /* @__PURE__ */ jsx(
           Icon,
           {
             "aria-hidden": "true",
             size: "medium",
             svg: SvgCheck,
-            className: cx(styles$2["checkbox"], styles$2["checked"])
+            className: styles$5["checkmark"]
           }
         ) })
       ]
@@ -531,10 +567,10 @@ const OptionsPanel = forwardRef(
               {
                 role: "group",
                 "aria-labelledby": labelId,
-                className: styles$3["pinned-section"],
+                className: styles$6["pinned-section"],
                 children: [
-                  /* @__PURE__ */ jsx("span", { id: labelId, className: styles$3["pinned-section-header"], children: /* @__PURE__ */ jsx(Text, { variant: "eyebrow", children: section.label }) }),
-                  /* @__PURE__ */ jsx("div", { className: styles$3["pinned-section-list"], children: section.items.map(
+                  /* @__PURE__ */ jsx("span", { id: labelId, className: styles$6["pinned-section-header"], children: /* @__PURE__ */ jsx(Text, { variant: "eyebrow", children: section.label }) }),
+                  /* @__PURE__ */ jsx("div", { className: styles$6["pinned-section-list"], children: section.items.map(
                     ({ item, index }) => renderItem(item, index)
                   ) })
                 ]
@@ -550,7 +586,7 @@ const OptionsPanel = forwardRef(
                 {
                   role: "presentation",
                   "aria-hidden": "true",
-                  className: styles$3["divider"],
+                  className: styles$6["divider"],
                   children: /* @__PURE__ */ jsx(Divider, {})
                 },
                 `divider-${sectionIndex}`
@@ -566,22 +602,22 @@ const OptionsPanel = forwardRef(
       return result;
     };
     const menuProps = getMenuProps({
-      className: cx(styles$3["scroller"], className),
+      className: cx(styles$6["scroller"], className),
       style
     });
     const menuRef = useMergeRefs([menuProps.ref, scrollerRef]);
-    return /* @__PURE__ */ jsx("div", { ...menuProps, ref: menuRef, children: /* @__PURE__ */ jsxs("div", { className: styles$3["select-field-list"], children: [
+    return /* @__PURE__ */ jsx("div", { ...menuProps, ref: menuRef, children: /* @__PURE__ */ jsxs("div", { className: styles$6["select-field-list"], children: [
       isOpen && /* @__PURE__ */ jsx(
         "div",
         {
           ref: scrollSentinelRef,
-          className: styles$3["scroll-sentinel"],
+          className: styles$6["scroll-sentinel"],
           role: "presentation",
           "aria-hidden": "true"
         }
       ),
-      isOpen && /* @__PURE__ */ jsx(Fragment, { children: loading || anyPinnedLoading ? /* @__PURE__ */ jsx("div", { role: "presentation", className: styles$3["empty"], children: /* @__PURE__ */ jsx(Spinner, { size: "medium" }) }) : items.length > 0 ? renderSections() : /* @__PURE__ */ jsx("div", { role: "presentation", className: styles$3["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) }),
-      loadingMore ? /* @__PURE__ */ jsxs("div", { role: "presentation", className: styles$3["load-more"], children: [
+      isOpen && /* @__PURE__ */ jsx(Fragment, { children: loading || anyPinnedLoading ? /* @__PURE__ */ jsx("div", { role: "presentation", className: styles$6["empty"], children: /* @__PURE__ */ jsx(Spinner, { size: "medium" }) }) : items.length > 0 ? renderSections() : /* @__PURE__ */ jsx("div", { role: "presentation", className: styles$6["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) }),
+      loadingMore ? /* @__PURE__ */ jsxs("div", { role: "presentation", className: styles$6["load-more"], children: [
         /* @__PURE__ */ jsx(Spinner, { size: "small" }),
         /* @__PURE__ */ jsx(SrOnly, { children: "Loading more..." })
       ] }) : hasMore && !loading ? /* @__PURE__ */ jsx("div", { role: "presentation", children: /* @__PURE__ */ jsx(
@@ -589,7 +625,7 @@ const OptionsPanel = forwardRef(
         {
           onVisibilityChange: handleLoaderVisibilityChange,
           rootMargin: "0px 0px -100px 0px",
-          children: /* @__PURE__ */ jsx("div", { className: styles$3["load-more"], children: /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsx("div", { className: styles$6["load-more"], children: /* @__PURE__ */ jsx(
             Button,
             {
               appearance: "secondary",
@@ -780,7 +816,7 @@ const VirtualizedOptionsPanel = forwardRef(
           {
             role: "presentation",
             "aria-hidden": "true",
-            className: styles$3["pinned-section-header"],
+            className: styles$6["pinned-section-header"],
             children: /* @__PURE__ */ jsx("span", { id: labelId, children: /* @__PURE__ */ jsx(Text, { variant: "eyebrow", children: row.label }) })
           }
         );
@@ -793,7 +829,7 @@ const VirtualizedOptionsPanel = forwardRef(
             {
               role: "presentation",
               "aria-hidden": "true",
-              className: styles$3["divider"],
+              className: styles$6["divider"],
               children: /* @__PURE__ */ jsx(Divider, {})
             }
           )
@@ -801,12 +837,12 @@ const VirtualizedOptionsPanel = forwardRef(
       }
       if (row.type === "load-more") {
         if (loadingMore) {
-          return /* @__PURE__ */ jsxs("div", { role: "presentation", className: styles$3["load-more"], children: [
+          return /* @__PURE__ */ jsxs("div", { role: "presentation", className: styles$6["load-more"], children: [
             /* @__PURE__ */ jsx(Spinner, { size: "small" }),
             /* @__PURE__ */ jsx(SrOnly, { children: "Loading more..." })
           ] });
         }
-        return /* @__PURE__ */ jsx("div", { role: "presentation", children: /* @__PURE__ */ jsx("div", { className: styles$3["load-more"], children: /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx("div", { role: "presentation", children: /* @__PURE__ */ jsx("div", { className: styles$6["load-more"], children: /* @__PURE__ */ jsx(
           Button,
           {
             appearance: "secondary",
@@ -819,21 +855,21 @@ const VirtualizedOptionsPanel = forwardRef(
       return null;
     };
     const menuProps = getMenuProps({
-      className: cx(styles$3["scroller"], className),
+      className: cx(styles$6["scroller"], className),
       style
     });
     const menuRef = useMergeRefs([menuProps.ref, scrollerRef]);
-    return /* @__PURE__ */ jsx("div", { ...menuProps, ref: menuRef, children: /* @__PURE__ */ jsxs("div", { className: styles$3["select-field-list"], children: [
+    return /* @__PURE__ */ jsx("div", { ...menuProps, ref: menuRef, children: /* @__PURE__ */ jsxs("div", { className: styles$6["select-field-list"], children: [
       isOpen && /* @__PURE__ */ jsx(
         "div",
         {
           ref: scrollSentinelRef,
-          className: styles$3["scroll-sentinel"],
+          className: styles$6["scroll-sentinel"],
           role: "presentation",
           "aria-hidden": "true"
         }
       ),
-      isOpen && /* @__PURE__ */ jsx(Fragment, { children: loading || anyPinnedLoading ? /* @__PURE__ */ jsx("div", { role: "presentation", className: styles$3["empty"], children: /* @__PURE__ */ jsx(Spinner, { size: "medium" }) }) : items.length > 0 ? /* @__PURE__ */ jsx(
+      isOpen && /* @__PURE__ */ jsx(Fragment, { children: loading || anyPinnedLoading ? /* @__PURE__ */ jsx("div", { role: "presentation", className: styles$6["empty"], children: /* @__PURE__ */ jsx(Spinner, { size: "medium" }) }) : items.length > 0 ? /* @__PURE__ */ jsx(
         "div",
         {
           role: "presentation",
@@ -868,7 +904,7 @@ const VirtualizedOptionsPanel = forwardRef(
             );
           })
         }
-      ) : /* @__PURE__ */ jsx("div", { role: "presentation", className: styles$3["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) })
+      ) : /* @__PURE__ */ jsx("div", { role: "presentation", className: styles$6["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) })
     ] }) });
   }
 );
@@ -903,352 +939,95 @@ function useDebouncedCallback(callback, delay = 300) {
   return debouncedCallback;
 }
 
-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();
+const DEFAULT_CACHE_SIZE = 15;
+const STATIC_CACHE_KEY = "__static__";
+function cacheSet(sectionCache, key, value, maxSize) {
+  if (sectionCache.has(key)) {
+    sectionCache.delete(key);
+  }
+  sectionCache.set(key, value);
+  while (sectionCache.size > maxSize) {
+    const oldest = sectionCache.keys().next().value;
+    if (oldest !== void 0) {
+      sectionCache.delete(oldest);
     }
-  }, [open]);
+  }
+}
+function usePinnedOptions(pinned, searchValue) {
+  const [dynamicResults, setDynamicResults] = useState({});
+  const [loadingSet, setLoadingSet] = useState(/* @__PURE__ */ new Set());
+  const latestSearchValueRef = useRef(searchValue);
+  latestSearchValueRef.current = searchValue;
+  const cacheRef = useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const nonReactiveTriggeredRef = useRef(/* @__PURE__ */ new Set());
+  const sections = useMemo(() => {
+    if (!pinned) return [];
+    return Array.isArray(pinned) ? pinned : [pinned];
+  }, [pinned]);
+  const sectionConfig = useMemo(() => {
+    return sections.map((section) => {
+      const isDynamic = typeof section.options === "function";
+      return {
+        label: section.label,
+        isDynamic,
+        searchReactive: section.searchReactive ?? true,
+        cacheSize: section.cacheSize ?? DEFAULT_CACHE_SIZE,
+        staticOptions: isDynamic ? void 0 : section.options,
+        loader: isDynamic ? section.options : void 0
+      };
+    });
+  }, [sections]);
   useEffect(() => {
-    if (!open) return;
-    const popoverEl = ref.current;
-    if (!popoverEl) return;
-    const handleFocusOut = (e) => {
-      const next = e.relatedTarget;
-      if (!next) {
-        safeClose();
-        return;
+    cacheRef.current = /* @__PURE__ */ new Map();
+    nonReactiveTriggeredRef.current = /* @__PURE__ */ new Set();
+  }, [sectionConfig]);
+  const getSectionCache = useCallback(
+    (index) => {
+      let sectionCache = cacheRef.current.get(index);
+      if (!sectionCache) {
+        sectionCache = /* @__PURE__ */ new Map();
+        cacheRef.current.set(index, sectionCache);
       }
-      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`
-              });
-            }
-          })
-        ]
+      return sectionCache;
+    },
+    []
+  );
+  const loadSection = useCallback(
+    (config, index, loaderArg) => {
+      const cacheKey = config.searchReactive ? loaderArg : STATIC_CACHE_KEY;
+      const handleResult = (options) => {
+        if (!config.searchReactive || latestSearchValueRef.current === loaderArg) {
+          const sectionCache = getSectionCache(index);
+          cacheSet(sectionCache, cacheKey, options, config.cacheSize);
+          setDynamicResults((prev) => ({ ...prev, [index]: options }));
+          setLoadingSet((prev) => {
+            const next = new Set(prev);
+            next.delete(index);
+            return next;
+          });
+        }
+      };
+      const handleError = (error) => {
+        console.error("Failed to load pinned options:", error);
+        if (!config.searchReactive || latestSearchValueRef.current === loaderArg) {
+          setDynamicResults((prev) => ({ ...prev, [index]: [] }));
+          setLoadingSet((prev) => {
+            const next = new Set(prev);
+            next.delete(index);
+            return next;
+          });
+        }
+      };
+      try {
+        Promise.resolve(config.loader(loaderArg)).then(handleResult).catch(handleError);
+      } catch (error) {
+        handleError(error);
       }
-    );
-    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";
-
-const DEFAULT_CACHE_SIZE = 15;
-const STATIC_CACHE_KEY = "__static__";
-function cacheSet(sectionCache, key, value, maxSize) {
-  if (sectionCache.has(key)) {
-    sectionCache.delete(key);
-  }
-  sectionCache.set(key, value);
-  while (sectionCache.size > maxSize) {
-    const oldest = sectionCache.keys().next().value;
-    if (oldest !== void 0) {
-      sectionCache.delete(oldest);
-    }
-  }
-}
-function usePinnedOptions(pinned, searchValue) {
-  const [dynamicResults, setDynamicResults] = useState({});
-  const [loadingSet, setLoadingSet] = useState(/* @__PURE__ */ new Set());
-  const latestSearchValueRef = useRef(searchValue);
-  latestSearchValueRef.current = searchValue;
-  const cacheRef = useRef(
-    /* @__PURE__ */ new Map()
-  );
-  const nonReactiveTriggeredRef = useRef(/* @__PURE__ */ new Set());
-  const sections = useMemo(() => {
-    if (!pinned) return [];
-    return Array.isArray(pinned) ? pinned : [pinned];
-  }, [pinned]);
-  const sectionConfig = useMemo(() => {
-    return sections.map((section) => {
-      const isDynamic = typeof section.options === "function";
-      return {
-        label: section.label,
-        isDynamic,
-        searchReactive: section.searchReactive ?? true,
-        cacheSize: section.cacheSize ?? DEFAULT_CACHE_SIZE,
-        staticOptions: isDynamic ? void 0 : section.options,
-        loader: isDynamic ? section.options : void 0
-      };
-    });
-  }, [sections]);
-  useEffect(() => {
-    cacheRef.current = /* @__PURE__ */ new Map();
-    nonReactiveTriggeredRef.current = /* @__PURE__ */ new Set();
-  }, [sectionConfig]);
-  const getSectionCache = useCallback(
-    (index) => {
-      let sectionCache = cacheRef.current.get(index);
-      if (!sectionCache) {
-        sectionCache = /* @__PURE__ */ new Map();
-        cacheRef.current.set(index, sectionCache);
-      }
-      return sectionCache;
-    },
-    []
-  );
-  const loadSection = useCallback(
-    (config, index, loaderArg) => {
-      const cacheKey = config.searchReactive ? loaderArg : STATIC_CACHE_KEY;
-      const handleResult = (options) => {
-        if (!config.searchReactive || latestSearchValueRef.current === loaderArg) {
-          const sectionCache = getSectionCache(index);
-          cacheSet(sectionCache, cacheKey, options, config.cacheSize);
-          setDynamicResults((prev) => ({ ...prev, [index]: options }));
-          setLoadingSet((prev) => {
-            const next = new Set(prev);
-            next.delete(index);
-            return next;
-          });
-        }
-      };
-      const handleError = (error) => {
-        console.error("Failed to load pinned options:", error);
-        if (!config.searchReactive || latestSearchValueRef.current === loaderArg) {
-          setDynamicResults((prev) => ({ ...prev, [index]: [] }));
-          setLoadingSet((prev) => {
-            const next = new Set(prev);
-            next.delete(index);
-            return next;
-          });
-        }
-      };
-      try {
-        Promise.resolve(config.loader(loaderArg)).then(handleResult).catch(handleError);
-      } catch (error) {
-        handleError(error);
-      }
-    },
-    [getSectionCache]
-  );
+    },
+    [getSectionCache]
+  );
   useEffect(() => {
     const dynamicEntries = sectionConfig.map((config, index) => ({ config, index })).filter(({ config }) => config.isDynamic);
     if (dynamicEntries.length === 0) return;
@@ -1432,6 +1211,266 @@ function buildSelectItems({
   return { items, sectionsMeta: meta };
 }
 
+const styles$1 = {
+	"options-popover": "_options-popover_1gogz_2",
+	"options-popover-body": "_options-popover-body_1gogz_37",
+	"options-popover-footer": "_options-popover-footer_1gogz_46"
+};
+
+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();
+      referenceElement.current?.focus();
+      safeClose();
+    };
+    popoverEl.addEventListener("keydown", handleKeyDown);
+    return () => popoverEl.removeEventListener("keydown", handleKeyDown);
+  }, [open, safeClose, referenceElement]);
+  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",
+      "data-anv": "popover-content",
+      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_1lxz8_41";
+const field = "_field_1lxz8_2";
+const content = "_content_1lxz8_54";
+const footer = "_footer_1lxz8_60";
+const styles = {
+	"field-dialog": "_field-dialog_1lxz8_2",
+	"field-dialog-visual-viewport-height": "_field-dialog-visual-viewport-height_1lxz8_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 },
+      onMouseDown: (e) => e.preventDefault(),
+      onClick: () => {
+        onCloseMenu?.();
+        onAddNewItem(searchText);
+      },
+      style: { width: "100%" },
+      children: resolvedLabel
+    }
+  );
+};
+AddNewItemButton.displayName = "AddNewItemButton";
+
 function detectCoarsePointer() {
   if (typeof window === "undefined" || !window.matchMedia) {
     return false;
@@ -1574,4 +1613,4 @@ const sortByGroup = (options, groupSorter) => {
 };
 
 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-Dpp7gt05.js.map
+//# sourceMappingURL=syncFilterUtils-BEKek64h.js.map