@servicetitan/anvil2 2.5.1 → 2.6.1

package/dist/{FieldDialog-C5mwMjrr.js → syncFilterUtils-BRKjFwxk.js}

@@ -1,31 +1,30 @@
-import { useState, useRef, useCallback, useEffect, useMemo, forwardRef, useId, useImperativeHandle } from 'react';
-import { u as useBreakpoint } from './useBreakpoint-BP3HZXmh.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { S as Spinner } from './Spinner-CpEm3Lud.js';
-import { B as Button } from './Button-DrNDkO2f.js';
-import { c as cx } from './index-SvGbrGuT.js';
+import { S as Spinner } from './Spinner-BqmcE2pb.js';
+import { B as Button } from './Button-CVsGhVJz.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-DhheKsns.js';
-import { D as Divider } from './Divider-De04mOU6.js';
+import { T as Text } from './Text-BJo4oMI2.js';
+import { D as Divider } from './Divider-B1UoK8ho.js';
 import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
-import { S as SrOnly } from './SrOnly-CrdBTl6E.js';
-import { F as Flex } from './Flex-CUtXN-C0.js';
-import { I as Icon } from './Icon-Bcil6aBo.js';
-import { A as Avatar } from './Avatar-DShevhcs.js';
-import { C as Chip } from './Chip-Bc7jiIJ1.js';
+import { S as SrOnly } from './SrOnly-eUpYGpAT.js';
+import { F as Flex } from './Flex-WyyZm1bf.js';
+import { I as Icon } from './Icon-DuIlne4x.js';
+import { A as Avatar } from './Avatar--CnTAnfD.js';
+import { C as Chip } from './Chip-DjTAR0va.js';
 import { a as SvgCheckBox, b as SvgCheckBoxOutlineBlank, S as SvgIndeterminateCheckBox } from './indeterminate_check_box-B4zobNlt.js';
 import { S as SvgCheck } from './check-Cf67OWrZ.js';
 import { d as defaultRangeExtractor, u as useVirtualizer } from './index-DXeGMe23.js';
-import { a as useCombobox } from './match-sorter.esm-adzV1NDp.js';
-import { F as FieldLabel } from './FieldLabel-DL0D6fvc.js';
 import { a as useOnClickOutside } from './useOnClickOutside-Zw5vzxSq.js';
-import { c as computePosition, o as offset, h as autoPlacement, g as size, a as autoUpdate } from './floating-ui.react-dom-BZbDMh89.js';
-import './anvil-fonts.css';import './FieldDialog.css';/* empty css                     */
-import { D as DialogCancelButton } from './DialogCancelButton-BfI9K4a4.js';
+import { k as computePosition, l as autoUpdate, o as offset, r as autoPlacement, q as size } from './floating-ui.react-dom-imrk9N49.js';
+import './anvil-fonts.css';import './syncFilterUtils.css';/* empty css                     */
+import { D as DialogCancelButton } from './DialogCancelButton-DQDMzGeT.js';
 import { S as SvgClose } from './close-DZj38AEh.js';
 import { D as DialogContext } from './DialogContext-DBgtApl9.js';
 import { t as tabbable } from './index.esm-K9kxJhLx.js';
 import { u as useDialogScrollLock } from './useDialogScrollLock-BW-aVboo.js';
+import { u as useBreakpoint } from './useBreakpoint-okJ64T1D.js';
+import { m as matchSorter } from './match-sorter.esm-CGAauEiU.js';
 
 const DEFAULT_PAGE_SIZE = 20;
 const DEFAULT_CACHE_MAX_SIZE = 15;
@@ -178,45 +177,18 @@ function useSelectFieldLoading(config) {
   };
 }
 
-function detectCoarsePointer() {
-  if (typeof window === "undefined" || !window.matchMedia) {
-    return false;
-  }
-  return window.matchMedia("(pointer: coarse)").matches;
-}
-function useAdaptiveView() {
-  const breakpoint = useBreakpoint();
-  const [hasCoarsePointer, setHasCoarsePointer] = useState(detectCoarsePointer);
-  useEffect(() => {
-    setHasCoarsePointer(detectCoarsePointer());
-    const mediaQuery = window.matchMedia("(pointer: coarse)");
-    const handleChange = (e) => {
-      setHasCoarsePointer(e.matches);
-    };
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
-  }, []);
-  const isSmallScreen = !breakpoint?.md;
-  const isMobile = isSmallScreen && hasCoarsePointer;
-  return {
-    view: isMobile ? "mobile" : "desktop",
-    isMobile,
-    isDesktop: !isMobile
-  };
-}
-
-const empty = "_empty_kcs6v_6";
-const scroller = "_scroller_kcs6v_20";
-const divider = "_divider_kcs6v_48";
+const empty = "_empty_1q60a_6";
+const scroller = "_scroller_1q60a_20";
+const divider = "_divider_1q60a_50";
 const styles$3 = {
-	"select-field-list": "_select-field-list_kcs6v_2",
+	"select-field-list": "_select-field-list_1q60a_2",
 	empty: empty,
-	"load-more": "_load-more_kcs6v_13",
+	"load-more": "_load-more_1q60a_13",
 	scroller: scroller,
-	"scroll-sentinel": "_scroll-sentinel_kcs6v_27",
-	"pinned-section": "_pinned-section_kcs6v_34",
-	"pinned-section-header": "_pinned-section-header_kcs6v_37",
-	"pinned-section-list": "_pinned-section-list_kcs6v_43",
+	"scroll-sentinel": "_scroll-sentinel_1q60a_29",
+	"pinned-section": "_pinned-section_1q60a_36",
+	"pinned-section-header": "_pinned-section-header_1q60a_39",
+	"pinned-section-list": "_pinned-section-list_1q60a_45",
 	divider: divider
 };
 
@@ -247,7 +219,7 @@ const styles$2 = {
 	indeterminate: indeterminate
 };
 
-const SelectFieldListItem = ({
+const SelectOption = ({
   item,
   index,
   highlighted,
@@ -272,8 +244,9 @@ const SelectFieldListItem = ({
   const hasChips = !!content?.chips?.length;
   const hasIcon = !!content?.icon;
   return /* @__PURE__ */ jsxs(
-    "li",
+    "div",
     {
+      "data-item-index": index,
       ...getItemProps({
         item,
         index,
@@ -365,7 +338,7 @@ const InView = ({
   return /* @__PURE__ */ jsx("div", { ref, children });
 };
 
-const useFieldListSections = (items, sectionsMeta) => {
+const useOptionsSections = (items, sectionsMeta) => {
   return useMemo(() => {
     if (sectionsMeta.length === 0) {
       return [
@@ -439,21 +412,21 @@ function flattenSectionsToVirtualRows(sections, hasMore) {
         label: section.label,
         sectionIndex
       });
-      section.items.forEach(({ item, index: downshiftIndex }) => {
-        downshiftIndexToVirtualRowIndex[downshiftIndex] = virtualRows.length;
-        virtualRows.push({ type: "item", item, downshiftIndex });
+      section.items.forEach(({ item, index }) => {
+        downshiftIndexToVirtualRowIndex[index] = virtualRows.length;
+        virtualRows.push({ type: "item", item, index });
       });
       if (!isLastSection) {
         virtualRows.push({ type: "divider", sectionIndex });
       }
     } else {
-      section.items.forEach(({ item, index: downshiftIndex }) => {
+      section.items.forEach(({ item, index }) => {
         const isBulkAction = item.type === "select-all" || item.type === "select-filtered";
         if (isBulkAction) {
           stickyIndices.push(virtualRows.length);
         }
-        downshiftIndexToVirtualRowIndex[downshiftIndex] = virtualRows.length;
-        virtualRows.push({ type: "item", item, downshiftIndex });
+        downshiftIndexToVirtualRowIndex[index] = virtualRows.length;
+        virtualRows.push({ type: "item", item, index });
       });
     }
   });
@@ -463,7 +436,7 @@ function flattenSectionsToVirtualRows(sections, hasMore) {
   return { virtualRows, downshiftIndexToVirtualRowIndex, stickyIndices };
 }
 
-const FieldListBase = forwardRef(
+const OptionsPanel = forwardRef(
   ({
     isOpen,
     items,
@@ -491,6 +464,19 @@ const FieldListBase = forwardRef(
         if (scrollerRef.current) {
           scrollerRef.current.scrollTop = 0;
         }
+      },
+      scrollToIndex: (index) => {
+        if (!scrollerRef.current) return;
+        if (index <= 0) {
+          scrollerRef.current.scrollTop = 0;
+          return;
+        }
+        const item = scrollerRef.current.querySelector(
+          `[data-item-index="${index}"]`
+        );
+        if (item) {
+          item.scrollIntoView({ block: "nearest" });
+        }
       }
     }));
     useEffect(() => {
@@ -518,9 +504,9 @@ const FieldListBase = forwardRef(
         onLoadMore();
       }
     };
-    const sections = useFieldListSections(items, sectionsMeta);
+    const sections = useOptionsSections(items, sectionsMeta);
     const renderItem = (item, index) => /* @__PURE__ */ jsx(
-      SelectFieldListItem,
+      SelectOption,
       {
         item,
         index,
@@ -541,14 +527,14 @@ const FieldListBase = forwardRef(
           const labelId = `${baseId}-section-${sectionIndex}`;
           result.push(
             /* @__PURE__ */ jsxs(
-              "li",
+              "div",
               {
                 role: "group",
                 "aria-labelledby": labelId,
                 className: styles$3["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("ul", { className: styles$3["pinned-section-list"], children: section.items.map(
+                  /* @__PURE__ */ jsx("div", { className: styles$3["pinned-section-list"], children: section.items.map(
                     ({ item, index }) => renderItem(item, index)
                   ) })
                 ]
@@ -558,10 +544,12 @@ const FieldListBase = forwardRef(
           );
           if (!isLastSection) {
             result.push(
+              // Decorative — group boundaries are already conveyed by role="group" with aria-labelledby
               /* @__PURE__ */ jsx(
-                "li",
+                "div",
                 {
-                  role: "separator",
+                  role: "presentation",
+                  "aria-hidden": "true",
                   className: styles$3["divider"],
                   children: /* @__PURE__ */ jsx(Divider, {})
                 },
@@ -582,9 +570,9 @@ const FieldListBase = forwardRef(
       style
     });
     const menuRef = useMergeRefs([menuProps.ref, scrollerRef]);
-    return /* @__PURE__ */ jsx("div", { ...menuProps, ref: menuRef, children: /* @__PURE__ */ jsxs("ul", { className: styles$3["select-field-list"], children: [
+    return /* @__PURE__ */ jsx("div", { ...menuProps, ref: menuRef, children: /* @__PURE__ */ jsxs("div", { className: styles$3["select-field-list"], children: [
       isOpen && /* @__PURE__ */ jsx(
-        "li",
+        "div",
         {
           ref: scrollSentinelRef,
           className: styles$3["scroll-sentinel"],
@@ -592,11 +580,11 @@ const FieldListBase = forwardRef(
           "aria-hidden": "true"
         }
       ),
-      isOpen && /* @__PURE__ */ jsx(Fragment, { children: loading || anyPinnedLoading ? /* @__PURE__ */ jsx("li", { role: "presentation", className: styles$3["empty"], children: /* @__PURE__ */ jsx(Spinner, { size: "medium" }) }) : items.length > 0 ? renderSections() : /* @__PURE__ */ jsx("li", { role: "presentation", className: styles$3["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) }),
-      loadingMore ? /* @__PURE__ */ jsxs("li", { role: "presentation", className: styles$3["load-more"], children: [
+      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: [
         /* @__PURE__ */ jsx(Spinner, { size: "small" }),
         /* @__PURE__ */ jsx(SrOnly, { children: "Loading more..." })
-      ] }) : hasMore && !loading ? /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsx(
+      ] }) : hasMore && !loading ? /* @__PURE__ */ jsx("div", { role: "presentation", children: /* @__PURE__ */ jsx(
         InView,
         {
           onVisibilityChange: handleLoaderVisibilityChange,
@@ -615,7 +603,7 @@ const FieldListBase = forwardRef(
     ] }) });
   }
 );
-FieldListBase.displayName = "FieldListBase";
+OptionsPanel.displayName = "OptionsPanel";
 
 const EST_PADDING_BLOCK = 16;
 const EST_LINE_HEIGHT = 18;
@@ -638,14 +626,13 @@ function estimateRowHeight(row) {
     contentHeight = Math.max(contentHeight, EST_SIDE_CONTENT_HEIGHT);
   return EST_PADDING_BLOCK + contentHeight;
 }
-const VirtualizedFieldListBase = forwardRef(
+const VirtualizedOptionsPanel = forwardRef(
   ({
     isOpen,
     items,
     getMenuProps,
     getItemProps,
     highlightedIndex,
-    highlightChangeTypeRef,
     getCheckedState,
     selectionType,
     hasMore,
@@ -662,13 +649,6 @@ const VirtualizedFieldListBase = forwardRef(
     const scrollSentinelRef = useRef(null);
     const scrollerRef = useRef(null);
     const [isScrolled, setIsScrolled] = useState(false);
-    useImperativeHandle(ref, () => ({
-      scrollToTop: () => {
-        if (scrollerRef.current) {
-          scrollerRef.current.scrollTop = 0;
-        }
-      }
-    }));
     useEffect(() => {
       if (!isOpen) {
         setIsScrolled(false);
@@ -689,7 +669,7 @@ const VirtualizedFieldListBase = forwardRef(
     const anyPinnedLoading = sectionsMeta.some(
       (s) => s.type === "pinned" && s.loading
     );
-    const sections = useFieldListSections(items, sectionsMeta);
+    const sections = useOptionsSections(items, sectionsMeta);
     const { virtualRows, downshiftIndexToVirtualRowIndex, stickyIndices } = useMemo(
       () => flattenSectionsToVirtualRows(sections, hasMore),
       [sections, hasMore]
@@ -736,17 +716,29 @@ const VirtualizedFieldListBase = forwardRef(
     }
     const downshiftMapRef = useRef(downshiftIndexToVirtualRowIndex);
     downshiftMapRef.current = downshiftIndexToVirtualRowIndex;
+    const virtualizerRef = useRef(virtualizer);
+    virtualizerRef.current = virtualizer;
+    useImperativeHandle(ref, () => ({
+      scrollToTop: () => {
+        if (virtualizerRef.current) {
+          virtualizerRef.current.scrollToOffset(0);
+        }
+      },
+      scrollToIndex: (index) => {
+        if (index <= 0) {
+          virtualizerRef.current.scrollToOffset(0);
+          return;
+        }
+        const virtualRowIndex = downshiftMapRef.current[index];
+        if (virtualRowIndex != null) {
+          virtualizerRef.current.scrollToIndex(virtualRowIndex, {
+            align: "auto"
+          });
+        }
+      }
+    }));
     const onLoadMoreRef = useRef(onLoadMore);
     onLoadMoreRef.current = onLoadMore;
-    useEffect(() => {
-      if (highlightedIndex < 0) return;
-      if (highlightChangeTypeRef?.current === useCombobox.stateChangeTypes.ItemMouseMove)
-        return;
-      const virtualRowIndex = downshiftMapRef.current[highlightedIndex];
-      if (virtualRowIndex != null) {
-        virtualizer.scrollToIndex(virtualRowIndex, { align: "auto" });
-      }
-    }, [highlightedIndex, virtualizer, highlightChangeTypeRef]);
     useEffect(() => {
       if (!hasMore || loadingMore || disableAutoLoadMore) return;
       const lastItem = virtualItems[virtualItems.length - 1];
@@ -768,14 +760,14 @@ const VirtualizedFieldListBase = forwardRef(
     const renderVirtualRow = (row) => {
       if (row.type === "item") {
         return /* @__PURE__ */ jsx(
-          SelectFieldListItem,
+          SelectOption,
           {
             item: row.item,
-            index: row.downshiftIndex,
+            index: row.index,
             getItemProps,
             selectionType,
             checked: getCheckedState(row.item),
-            highlighted: highlightedIndex === row.downshiftIndex,
+            highlighted: highlightedIndex === row.index,
             disabled: (disabled || row.item.disabled) ?? false,
             isListScrolled: isScrolled
           }
@@ -784,7 +776,7 @@ const VirtualizedFieldListBase = forwardRef(
       if (row.type === "header") {
         const labelId = `${baseId}-section-${row.sectionIndex}`;
         return /* @__PURE__ */ jsx(
-          "li",
+          "div",
           {
             role: "presentation",
             "aria-hidden": "true",
@@ -794,16 +786,27 @@ const VirtualizedFieldListBase = forwardRef(
         );
       }
       if (row.type === "divider") {
-        return /* @__PURE__ */ jsx("li", { role: "separator", className: styles$3["divider"], children: /* @__PURE__ */ jsx(Divider, {}) });
+        return (
+          // Decorative — group boundaries are already conveyed by role="group" with aria-labelledby
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "presentation",
+              "aria-hidden": "true",
+              className: styles$3["divider"],
+              children: /* @__PURE__ */ jsx(Divider, {})
+            }
+          )
+        );
       }
       if (row.type === "load-more") {
         if (loadingMore) {
-          return /* @__PURE__ */ jsxs("li", { role: "presentation", className: styles$3["load-more"], children: [
+          return /* @__PURE__ */ jsxs("div", { role: "presentation", className: styles$3["load-more"], children: [
             /* @__PURE__ */ jsx(Spinner, { size: "small" }),
             /* @__PURE__ */ jsx(SrOnly, { children: "Loading more..." })
           ] });
         }
-        return /* @__PURE__ */ jsx("li", { 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$3["load-more"], children: /* @__PURE__ */ jsx(
           Button,
           {
             appearance: "secondary",
@@ -820,9 +823,9 @@ const VirtualizedFieldListBase = forwardRef(
       style
     });
     const menuRef = useMergeRefs([menuProps.ref, scrollerRef]);
-    return /* @__PURE__ */ jsx("div", { ...menuProps, ref: menuRef, children: /* @__PURE__ */ jsxs("ul", { className: styles$3["select-field-list"], children: [
+    return /* @__PURE__ */ jsx("div", { ...menuProps, ref: menuRef, children: /* @__PURE__ */ jsxs("div", { className: styles$3["select-field-list"], children: [
       isOpen && /* @__PURE__ */ jsx(
-        "li",
+        "div",
         {
           ref: scrollSentinelRef,
           className: styles$3["scroll-sentinel"],
@@ -830,8 +833,8 @@ const VirtualizedFieldListBase = forwardRef(
           "aria-hidden": "true"
         }
       ),
-      isOpen && /* @__PURE__ */ jsx(Fragment, { children: loading || anyPinnedLoading ? /* @__PURE__ */ jsx("li", { role: "presentation", className: styles$3["empty"], children: /* @__PURE__ */ jsx(Spinner, { size: "medium" }) }) : items.length > 0 ? /* @__PURE__ */ jsx(
-        "li",
+      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(
+        "div",
         {
           role: "presentation",
           "aria-hidden": "true",
@@ -865,36 +868,11 @@ const VirtualizedFieldListBase = forwardRef(
             );
           })
         }
-      ) : /* @__PURE__ */ jsx("li", { 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$3["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) })
     ] }) });
   }
 );
-VirtualizedFieldListBase.displayName = "VirtualizedFieldListBase";
-
-const SelectFieldLabel = ({
-  label,
-  getLabelProps,
-  hideLabel = false,
-  labelNode,
-  moreInfo,
-  moreInfoOpen,
-  required
-}) => {
-  const labelContent = /* @__PURE__ */ jsx(
-    FieldLabel,
-    {
-      ...getLabelProps(),
-      required,
-      moreInfo,
-      moreInfoOpen,
-      children: labelNode ?? label
-    }
-  );
-  if (hideLabel) {
-    return /* @__PURE__ */ jsx(SrOnly, { children: labelContent });
-  }
-  return labelContent;
-};
+VirtualizedOptionsPanel.displayName = "VirtualizedOptionsPanel";
 
 function useDebouncedCallback(callback, delay = 300) {
   const timeoutRef = useRef(null);
@@ -1133,7 +1111,7 @@ const useProcessedOptions = ({
   return { pinnedSections, ungroupedItems, groupSections };
 };
 
-function mapOptionToDownshiftItem(option) {
+function toSelectItem(option) {
   return {
     id: option.id,
     type: "option",
@@ -1141,7 +1119,7 @@ function mapOptionToDownshiftItem(option) {
     original: option
   };
 }
-function buildDownshiftItems({
+function buildSelectItems({
   prefixItems,
   pinnedSections,
   groupSections,
@@ -1194,16 +1172,22 @@ function buildDownshiftItems({
     }
   });
   items.push(...ungroupedItems);
-  return { downshiftItems: items, sectionsMeta: meta };
+  return { items, sectionsMeta: meta };
 }
 
 const styles$1 = {
-	"field-popover": "_field-popover_f54ku_2"
+	"options-popover": "_options-popover_185l7_2"
 };
 
-const FieldPopover = (props) => {
+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 } = props;
+  const { id, children, referenceElement, open, onClickOutside, width } = props;
   useOnClickOutside({
     targets: [ref.current ?? void 0, referenceElement.current ?? void 0],
     onClickOutside,
@@ -1226,14 +1210,21 @@ const FieldPopover = (props) => {
         middleware: [
           offset(8),
           autoPlacement({
-            allowedPlacements: ["bottom-start", "top-start"],
+            allowedPlacements: [
+              "bottom-start",
+              "bottom-end",
+              "top-start",
+              "top-end"
+            ],
             padding: 8
           }),
           size({
             padding: 8,
-            apply({ rects, elements, availableHeight }) {
+            apply({ rects, elements, availableHeight, availableWidth }) {
+              const resolved = resolveWidth(width, rects.reference.width);
               Object.assign(elements.floating.style, {
-                width: `${rects.reference.width}px`,
+                ...resolved != null && { width: resolved },
+                maxWidth: `${Math.max(0, availableWidth)}px`,
                 maxHeight: `${Math.max(0, availableHeight)}px`
               });
             }
@@ -1243,7 +1234,7 @@ const FieldPopover = (props) => {
     );
     ref.current.style.left = `${position.x}px`;
     ref.current.style.top = `${position.y}px`;
-  }, [ref, referenceElement]);
+  }, [ref, referenceElement, width]);
   useEffect(() => {
     if (!ref.current || !referenceElement.current || !open) return;
     const cleanup = autoUpdate(
@@ -1255,7 +1246,16 @@ const FieldPopover = (props) => {
       cleanup();
     };
   }, [referenceElement, ref, updatePosition, open]);
-  return /* @__PURE__ */ jsx("div", { ref, id, className: styles$1["field-popover"], popover: "manual", children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      id,
+      className: styles$1["options-popover"],
+      popover: "manual",
+      children
+    }
+  );
 };
 
 const header = "_header_1lctb_34";
@@ -1269,7 +1269,7 @@ const styles = {
 	content: content
 };
 
-const FieldDialog = ({
+const OptionsDialog = ({
   id,
   isOpen,
   onClose,
@@ -1361,5 +1361,146 @@ const FieldDialog = ({
   );
 };
 
-export { DEFAULT_PAGE_SIZE as D, FieldListBase as F, SelectFieldLabel as S, VirtualizedFieldListBase as V, useProcessedOptions as a, buildDownshiftItems as b, useDebouncedCallback as c, FieldDialog as d, FieldPopover as e, useSelectFieldLoading as f, mapOptionToDownshiftItem as m, useAdaptiveView as u };
-//# sourceMappingURL=FieldDialog-C5mwMjrr.js.map
+function detectCoarsePointer() {
+  if (typeof window === "undefined" || !window.matchMedia) {
+    return false;
+  }
+  return window.matchMedia("(pointer: coarse)").matches;
+}
+function useAdaptiveView() {
+  const breakpoint = useBreakpoint();
+  const [hasCoarsePointer, setHasCoarsePointer] = useState(detectCoarsePointer);
+  useEffect(() => {
+    setHasCoarsePointer(detectCoarsePointer());
+    const mediaQuery = window.matchMedia("(pointer: coarse)");
+    const handleChange = (e) => {
+      setHasCoarsePointer(e.matches);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  const isSmallScreen = !breakpoint?.md;
+  const isMobile = isSmallScreen && hasCoarsePointer;
+  return {
+    view: isMobile ? "mobile" : "desktop",
+    isMobile,
+    isDesktop: !isMobile
+  };
+}
+
+function useSelectOrchestration(config) {
+  const {
+    lazy,
+    loadOptions: loadOptionsProp,
+    cache,
+    lazyOptions,
+    initialLoad: initialLoadProp = "auto",
+    displayMenuAs: displayMenuAsProp = "auto",
+    ref
+  } = config;
+  const [initialLoadPerformed, setInitialLoadPerformed] = useState(false);
+  const { isMobile } = useAdaptiveView();
+  const displayAs = displayMenuAsProp === "auto" ? isMobile ? "dialog" : "popover" : displayMenuAsProp;
+  const initialLoad = initialLoadProp === "auto" ? "immediate" : initialLoadProp;
+  const pageSize = lazy === "page" ? lazyOptions?.pageSize ?? DEFAULT_PAGE_SIZE : DEFAULT_PAGE_SIZE;
+  const limit = lazy === "offset" ? lazyOptions?.limit ?? DEFAULT_PAGE_SIZE : DEFAULT_PAGE_SIZE;
+  const loadingHookConfig = useMemo(() => {
+    const cacheConfig = {
+      enabled: cache?.enabled,
+      maxSize: cache?.maxSize
+    };
+    if (lazy === "page")
+      return {
+        lazy: "page",
+        loadOptions: loadOptionsProp,
+        pageSize,
+        cache: cacheConfig
+      };
+    if (lazy === "offset")
+      return {
+        lazy: "offset",
+        loadOptions: loadOptionsProp,
+        limit,
+        cache: cacheConfig
+      };
+    if (lazy === "group")
+      return {
+        lazy: "group",
+        loadOptions: loadOptionsProp,
+        cache: cacheConfig
+      };
+    return {
+      lazy: false,
+      loadOptions: loadOptionsProp,
+      cache: cacheConfig
+    };
+  }, [lazy, loadOptionsProp, pageSize, limit, cache?.enabled, cache?.maxSize]);
+  const {
+    options,
+    loading,
+    loadingMore,
+    hasMore,
+    loadOptions,
+    loadMore,
+    clearCache
+  } = useSelectFieldLoading(loadingHookConfig);
+  useImperativeHandle(
+    ref,
+    () => ({
+      clearCache,
+      invalidate: () => {
+        clearCache();
+        setInitialLoadPerformed(false);
+      }
+    }),
+    [clearCache]
+  );
+  return {
+    displayAs,
+    initialLoad,
+    initialLoadPerformed,
+    setInitialLoadPerformed,
+    options,
+    loading,
+    loadingMore,
+    hasMore,
+    loadOptions,
+    loadMore
+  };
+}
+
+const defaultSyncFilter = (options, searchValue) => matchSorter(options, searchValue, {
+  keys: ["label", "searchText"],
+  baseSort: (a, b) => a.index - b.index
+});
+const toSyncFilterFn = (filter) => typeof filter === "function" ? filter : (options, searchValue) => matchSorter(options, searchValue, {
+  baseSort: (a, b) => a.index - b.index,
+  ...filter
+});
+const sortByGroup = (options, groupSorter) => {
+  const groupOrder = /* @__PURE__ */ new Map();
+  const uniqueGroups = [];
+  options.forEach((opt) => {
+    if (!groupOrder.has(opt.group)) {
+      groupOrder.set(opt.group, uniqueGroups.length);
+      uniqueGroups.push(opt.group);
+    }
+  });
+  uniqueGroups.sort((a, b) => {
+    if (a === void 0 && b === void 0) return 0;
+    if (a === void 0) return 1;
+    if (b === void 0) return -1;
+    return groupSorter(a, b);
+  });
+  uniqueGroups.forEach((group, index) => {
+    groupOrder.set(group, index);
+  });
+  return [...options].sort((a, b) => {
+    const orderA = groupOrder.get(a.group) ?? Infinity;
+    const orderB = groupOrder.get(b.group) ?? Infinity;
+    return orderA - orderB;
+  });
+};
+
+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-BRKjFwxk.js.map