@servicetitan/anvil2 2.0.4 → 2.2.0

package/dist/{FieldDialog-Be54L3E-.js → FieldDialog-CAuhkCZY.js}

@@ -1,24 +1,30 @@
-import { useState, useRef, useCallback, useEffect, useMemo, useId } from 'react';
+import { useState, useRef, useCallback, useEffect, useMemo, forwardRef, useId, useImperativeHandle } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { S as Spinner } from './Spinner-CpEm3Lud.js';
 import { B as Button } from './Button-l7pTJdPc.js';
 import { c as cx } from './index-SvGbrGuT.js';
+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 { 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 { a as SvgCheckBox, b as SvgCheckBoxOutlineBlank, S as SvgIndeterminateCheckBox } from './indeterminate_check_box-B4zobNlt.js';
 import { S as SvgCheck } from './check-Cf67OWrZ.js';
-import { T as Text } from './Text-DhheKsns.js';
-import { u as useIntersectionObserver } from './useIntersectionObserver-BEmMDO3P.js';
-import { D as Divider } from './Divider-De04mOU6.js';
-import { S as SrOnly } from './SrOnly-CrdBTl6E.js';
-import { F as FieldLabel } from './FieldLabel-DSrHbw9U.js';
-import { a as useOnClickOutside, t as tabbable } from './useOnClickOutside-Cyqbe1n3.js';
+import { d as defaultRangeExtractor, u as useVirtualizer } from './index-DXeGMe23.js';
+import { a as useCombobox } from './match-sorter.esm-B3vwg1-X.js';
+import { F as FieldLabel } from './FieldLabel-DL0D6fvc.js';
+import { a as useOnClickOutside } from './useOnClickOutside-Zw5vzxSq.js';
 import { c as computePosition, a as autoUpdate, o as offset, h as autoPlacement, g as size } from './floating-ui.react-dom-BZbDMh89.js';
 import { u as useBreakpoint } from './useBreakpoint-BP3HZXmh.js';
 import './anvil-fonts.css';import './FieldDialog.css';/* empty css                     */
 import { D as DialogCancelButton } from './DialogCancelButton-GuN5lgR-.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';
 
 const DEFAULT_PAGE_SIZE = 20;
@@ -172,34 +178,42 @@ function useSelectFieldLoading(config) {
   };
 }
 
-const empty = "_empty_1h0fh_6";
-const scroller = "_scroller_1h0fh_20";
-const divider = "_divider_1h0fh_47";
+const empty = "_empty_kcs6v_6";
+const scroller = "_scroller_kcs6v_20";
+const divider = "_divider_kcs6v_48";
 const styles$3 = {
-	"select-field-list": "_select-field-list_1h0fh_2",
+	"select-field-list": "_select-field-list_kcs6v_2",
 	empty: empty,
-	"load-more": "_load-more_1h0fh_13",
+	"load-more": "_load-more_kcs6v_13",
 	scroller: scroller,
-	"pinned-section": "_pinned-section_1h0fh_33",
-	"pinned-section-header": "_pinned-section-header_1h0fh_36",
-	"pinned-section-list": "_pinned-section-list_1h0fh_42",
+	"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",
 	divider: divider
 };
 
-const highlighted = "_highlighted_15431_26";
-const disabled = "_disabled_15431_29";
-const single = "_single_15431_33";
-const selected = "_selected_15431_33";
-const checkbox = "_checkbox_15431_36";
-const checked = "_checked_15431_40";
-const unchecked = "_unchecked_15431_43";
-const indeterminate = "_indeterminate_15431_46";
+const floating = "_floating_1nisb_32";
+const highlighted = "_highlighted_1nisb_38";
+const disabled = "_disabled_1nisb_41";
+const description = "_description_1nisb_45";
+const single = "_single_1nisb_51";
+const selected = "_selected_1nisb_51";
+const checkbox = "_checkbox_1nisb_60";
+const checked = "_checked_1nisb_64";
+const unchecked = "_unchecked_1nisb_67";
+const indeterminate = "_indeterminate_1nisb_70";
 const styles$2 = {
-	"select-field-list-item": "_select-field-list-item_15431_2",
+	"select-field-list-item": "_select-field-list-item_1nisb_2",
+	"bulk-action": "_bulk-action_1nisb_27",
+	floating: floating,
 	highlighted: highlighted,
 	disabled: disabled,
+	description: description,
+	"chips-row": "_chips-row_1nisb_48",
 	single: single,
 	selected: selected,
+	"side-content": "_side-content_1nisb_54",
 	checkbox: checkbox,
 	checked: checked,
 	unchecked: unchecked,
@@ -213,8 +227,10 @@ const SelectFieldListItem = ({
   disabled,
   getItemProps,
   selectionType,
-  checked
+  checked,
+  isListScrolled = false
 }) => {
+  const isBulkAction = item.type === "select-all" || item.type === "select-filtered";
   const checkbox = useMemo(() => {
     if (checked === "checked")
       return { icon: SvgCheckBox, class: styles$2["checked"] };
@@ -224,41 +240,84 @@ const SelectFieldListItem = ({
       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(
     "li",
     {
       ...getItemProps({
         item,
         index,
+        "data-type": item.type,
         className: cx(styles$2["select-field-list-item"], {
           [styles$2.highlighted]: highlighted,
           [styles$2.selected]: checked === "checked",
           [styles$2.disabled]: disabled,
           [styles$2.single]: selectionType === "single",
-          [styles$2.multiple]: selectionType === "multiple"
+          [styles$2["bulk-action"]]: isBulkAction,
+          [styles$2.floating]: isBulkAction && isListScrolled
         })
       }),
       children: [
-        selectionType === "multiple" && /* @__PURE__ */ jsx("div", { children: checked === "loading" ? /* @__PURE__ */ jsx(Spinner, { size: "medium" }) : /* @__PURE__ */ jsx(
+        selectionType === "multiple" && /* @__PURE__ */ jsx("div", { className: styles$2["side-content"], children: checked === "loading" ? /* @__PURE__ */ jsx(
+          Flex,
+          {
+            alignItems: "center",
+            justifyContent: "center",
+            style: { height: "1.5rem", width: "1.5rem" },
+            children: /* @__PURE__ */ jsx(Spinner, { size: "small" })
+          }
+        ) : (
+          // 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: checkbox.icon,
-            className: cx(styles$2["checkbox"], checkbox.class)
+            svg: content.icon.svg,
+            color: content.icon.color,
+            "aria-hidden": content.icon.label ? void 0 : "true",
+            "aria-label": content.icon.label
           }
         ) }),
-        /* @__PURE__ */ jsxs(Flex, { grow: 1, shrink: 1, direction: "column", gap: "1", children: [
-          /* @__PURE__ */ jsx(Text, { size: "medium", children: item.original.content?.title ?? item.original.label }),
-          item.original.content?.description && /* @__PURE__ */ jsx(Text, { size: "small", children: item.original.content?.description })
-        ] }),
-        selectionType === "single" && checked === "checked" && /* @__PURE__ */ jsx(
+        selectionType === "single" && checked === "checked" && /* @__PURE__ */ jsx("div", { className: styles$2["side-content"], children: /* @__PURE__ */ jsx(
           Icon,
           {
+            "aria-hidden": "true",
             size: "medium",
             svg: SvgCheck,
             className: cx(styles$2["checkbox"], styles$2["checked"])
           }
-        )
+        ) })
       ]
     },
     item.id
@@ -279,34 +338,8 @@ const InView = ({
   return /* @__PURE__ */ jsx("div", { ref, children });
 };
 
-const FieldListBase = ({
-  isOpen,
-  items,
-  getMenuProps,
-  getItemProps,
-  highlightedIndex,
-  getCheckedState,
-  selectionType,
-  hasMore,
-  onLoadMore,
-  loading,
-  loadingMore,
-  disableAutoLoadMore,
-  disabled,
-  className,
-  style,
-  sectionsMeta = []
-}) => {
-  const baseId = useId();
-  const anyPinnedLoading = sectionsMeta.some(
-    (s) => s.type === "pinned" && s.loading
-  );
-  const handleLoaderVisibilityChange = (visible) => {
-    if (visible && !disableAutoLoadMore) {
-      onLoadMore();
-    }
-  };
-  const sections = useMemo(() => {
+const useFieldListSections = (items, sectionsMeta) => {
+  return useMemo(() => {
     if (sectionsMeta.length === 0) {
       return [
         {
@@ -366,86 +399,450 @@ const FieldListBase = ({
     }
     return result;
   }, [items, sectionsMeta]);
-  const renderItem = (item, index) => /* @__PURE__ */ jsx(
-    SelectFieldListItem,
-    {
-      item,
-      index,
-      getItemProps,
-      selectionType,
-      checked: getCheckedState(item),
-      highlighted: highlightedIndex === index,
-      disabled: (disabled || item.disabled) ?? false
-    },
-    item.id
-  );
-  const renderSections = () => {
-    const result = [];
-    sections.forEach((section, sectionIndex) => {
-      const isLastSection = sectionIndex === sections.length - 1;
-      if (section.type === "pinned" || section.type === "group") {
-        const labelId = `${baseId}-section-${sectionIndex}`;
-        result.push(
-          /* @__PURE__ */ jsxs(
-            "li",
-            {
-              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(({ item, index }) => renderItem(item, index)) })
-              ]
-            },
-            `section-${sectionIndex}`
-          )
-        );
-        if (!isLastSection) {
+};
+function flattenSectionsToVirtualRows(sections, hasMore) {
+  const virtualRows = [];
+  const downshiftIndexToVirtualRowIndex = {};
+  const stickyIndices = [];
+  sections.forEach((section, sectionIndex) => {
+    const isLastSection = sectionIndex === sections.length - 1;
+    if (section.type === "pinned" || section.type === "group") {
+      virtualRows.push({
+        type: "header",
+        label: section.label,
+        sectionIndex
+      });
+      section.items.forEach(({ item, index: downshiftIndex }) => {
+        downshiftIndexToVirtualRowIndex[downshiftIndex] = virtualRows.length;
+        virtualRows.push({ type: "item", item, downshiftIndex });
+      });
+      if (!isLastSection) {
+        virtualRows.push({ type: "divider", sectionIndex });
+      }
+    } else {
+      section.items.forEach(({ item, index: downshiftIndex }) => {
+        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 });
+      });
+    }
+  });
+  if (hasMore) {
+    virtualRows.push({ type: "load-more" });
+  }
+  return { virtualRows, downshiftIndexToVirtualRowIndex, stickyIndices };
+}
+
+const FieldListBase = forwardRef(
+  ({
+    isOpen,
+    items,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex,
+    getCheckedState,
+    selectionType,
+    hasMore,
+    onLoadMore,
+    loading,
+    loadingMore,
+    disableAutoLoadMore,
+    disabled,
+    className,
+    style,
+    sectionsMeta = []
+  }, ref) => {
+    const baseId = useId();
+    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);
+        return;
+      }
+      if (!scrollSentinelRef.current) return;
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            setIsScrolled(!entry.isIntersecting);
+          });
+        },
+        { threshold: 0, root: scrollerRef.current }
+      );
+      observer.observe(scrollSentinelRef.current);
+      return () => observer.disconnect();
+    }, [isOpen]);
+    const anyPinnedLoading = sectionsMeta.some(
+      (s) => s.type === "pinned" && s.loading
+    );
+    const handleLoaderVisibilityChange = (visible) => {
+      if (visible && !disableAutoLoadMore) {
+        onLoadMore();
+      }
+    };
+    const sections = useFieldListSections(items, sectionsMeta);
+    const renderItem = (item, index) => /* @__PURE__ */ jsx(
+      SelectFieldListItem,
+      {
+        item,
+        index,
+        getItemProps,
+        selectionType,
+        checked: getCheckedState(item),
+        highlighted: highlightedIndex === index,
+        disabled: (disabled || item.disabled) ?? false,
+        isListScrolled: isScrolled
+      },
+      item.id
+    );
+    const renderSections = () => {
+      const result = [];
+      sections.forEach((section, sectionIndex) => {
+        const isLastSection = sectionIndex === sections.length - 1;
+        if (section.type === "pinned" || section.type === "group") {
+          const labelId = `${baseId}-section-${sectionIndex}`;
           result.push(
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsxs(
               "li",
               {
-                role: "separator",
-                className: styles$3["divider"],
-                children: /* @__PURE__ */ jsx(Divider, {})
+                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(
+                    ({ item, index }) => renderItem(item, index)
+                  ) })
+                ]
               },
-              `divider-${sectionIndex}`
+              `section-${sectionIndex}`
             )
           );
+          if (!isLastSection) {
+            result.push(
+              /* @__PURE__ */ jsx(
+                "li",
+                {
+                  role: "separator",
+                  className: styles$3["divider"],
+                  children: /* @__PURE__ */ jsx(Divider, {})
+                },
+                `divider-${sectionIndex}`
+              )
+            );
+          }
+        } else {
+          section.items.forEach(({ item, index }) => {
+            result.push(renderItem(item, index));
+          });
         }
-      } else {
-        section.items.forEach(({ item, index }) => {
-          result.push(renderItem(item, index));
-        });
+      });
+      return result;
+    };
+    const menuProps = getMenuProps({
+      className: cx(styles$3["scroller"], className),
+      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: [
+      isOpen && /* @__PURE__ */ jsx(
+        "li",
+        {
+          ref: scrollSentinelRef,
+          className: styles$3["scroll-sentinel"],
+          role: "presentation",
+          "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: [
+        /* @__PURE__ */ jsx(Spinner, { size: "small" }),
+        /* @__PURE__ */ jsx(SrOnly, { children: "Loading more..." })
+      ] }) : hasMore && !loading ? /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsx(
+        InView,
+        {
+          onVisibilityChange: handleLoaderVisibilityChange,
+          rootMargin: "0px 0px -100px 0px",
+          children: /* @__PURE__ */ jsx("div", { className: styles$3["load-more"], children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "secondary",
+              size: "small",
+              onClick: onLoadMore,
+              children: "Load more"
+            }
+          ) })
+        }
+      ) }) : null
+    ] }) });
+  }
+);
+FieldListBase.displayName = "FieldListBase";
+
+const EST_PADDING_BLOCK = 16;
+const EST_LINE_HEIGHT = 18;
+const EST_CHIP_ROW_HEIGHT = 28;
+const EST_SIDE_CONTENT_HEIGHT = 40;
+const EST_HEADER_HEIGHT = 32;
+const EST_DIVIDER_HEIGHT = 17;
+const EST_LOAD_MORE_HEIGHT = 40;
+const EST_BASE_ITEM_HEIGHT = EST_PADDING_BLOCK + EST_LINE_HEIGHT;
+function estimateRowHeight(row) {
+  if (row.type === "header") return EST_HEADER_HEIGHT;
+  if (row.type === "divider") return EST_DIVIDER_HEIGHT;
+  if (row.type === "load-more") return EST_LOAD_MORE_HEIGHT;
+  const content = row.item.original.content;
+  if (!content) return EST_BASE_ITEM_HEIGHT;
+  let contentHeight = EST_LINE_HEIGHT;
+  if (content.description) contentHeight += EST_LINE_HEIGHT;
+  if (content.chips?.length) contentHeight += EST_CHIP_ROW_HEIGHT;
+  if (content.avatar || content.icon)
+    contentHeight = Math.max(contentHeight, EST_SIDE_CONTENT_HEIGHT);
+  return EST_PADDING_BLOCK + contentHeight;
+}
+const VirtualizedFieldListBase = forwardRef(
+  ({
+    isOpen,
+    items,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex,
+    highlightChangeTypeRef,
+    getCheckedState,
+    selectionType,
+    hasMore,
+    onLoadMore,
+    loading,
+    loadingMore,
+    disableAutoLoadMore,
+    disabled,
+    className,
+    style,
+    sectionsMeta = []
+  }, ref) => {
+    const baseId = useId();
+    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);
+        return;
+      }
+      if (!scrollSentinelRef.current) return;
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            setIsScrolled(!entry.isIntersecting);
+          });
+        },
+        { threshold: 0, root: scrollerRef.current }
+      );
+      observer.observe(scrollSentinelRef.current);
+      return () => observer.disconnect();
+    }, [isOpen]);
+    const anyPinnedLoading = sectionsMeta.some(
+      (s) => s.type === "pinned" && s.loading
+    );
+    const sections = useFieldListSections(items, sectionsMeta);
+    const { virtualRows, downshiftIndexToVirtualRowIndex, stickyIndices } = useMemo(
+      () => flattenSectionsToVirtualRows(sections, hasMore),
+      [sections, hasMore]
+    );
+    const stickyHeightRef = useRef(EST_BASE_ITEM_HEIGHT);
+    const rangeExtractor = useCallback(
+      (range) => {
+        if (stickyIndices.length === 0) {
+          return defaultRangeExtractor(range);
+        }
+        const activeStickyIndex = [...stickyIndices].reverse().find((index) => range.startIndex >= index) ?? 0;
+        const next = /* @__PURE__ */ new Set([
+          activeStickyIndex,
+          ...defaultRangeExtractor(range)
+        ]);
+        return [...next].sort((a, b) => a - b);
+      },
+      [stickyIndices]
+    );
+    const virtualizer = useVirtualizer({
+      count: virtualRows.length,
+      getScrollElement: () => scrollerRef.current,
+      estimateSize: (index) => estimateRowHeight(virtualRows[index]),
+      overscan: 5,
+      rangeExtractor,
+      scrollPaddingStart: stickyIndices.length > 0 ? stickyHeightRef.current : 0,
+      enabled: isOpen,
+      getItemKey: (index) => {
+        const row = virtualRows[index];
+        if (row.type === "item") return row.item.id;
+        if (row.type === "header") return `header-${row.sectionIndex}`;
+        if (row.type === "divider") return `divider-${row.sectionIndex}`;
+        return "load-more";
       }
     });
-    return result;
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ...getMenuProps({
-        className: cx(styles$3["scroller"], className),
-        style
-      }),
-      children: [
-        /* @__PURE__ */ jsx("ul", { className: cx(styles$3["select-field-list"]), children: 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("div", { className: styles$3["load-more"], children: [
-          /* @__PURE__ */ jsx(Spinner, { size: "small" }),
-          /* @__PURE__ */ jsx(SrOnly, { children: "Loading more..." })
-        ] }) : hasMore && !loading ? /* @__PURE__ */ jsx(
-          InView,
+    const virtualItems = virtualizer.getVirtualItems();
+    if (stickyIndices.length > 0) {
+      const stickyItem = virtualItems.find(
+        (vi) => stickyIndices.includes(vi.index)
+      );
+      if (stickyItem) {
+        stickyHeightRef.current = stickyItem.size;
+      }
+    }
+    const downshiftMapRef = useRef(downshiftIndexToVirtualRowIndex);
+    downshiftMapRef.current = downshiftIndexToVirtualRowIndex;
+    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];
+      if (!lastItem) return;
+      if (lastItem.index >= virtualRows.length - 1) {
+        onLoadMoreRef.current();
+      }
+    }, [
+      hasMore,
+      loadingMore,
+      disableAutoLoadMore,
+      virtualItems,
+      virtualRows.length
+    ]);
+    const isSticky = useCallback(
+      (index) => stickyIndices.includes(index),
+      [stickyIndices]
+    );
+    const renderVirtualRow = (row) => {
+      if (row.type === "item") {
+        return /* @__PURE__ */ jsx(
+          SelectFieldListItem,
           {
-            onVisibilityChange: handleLoaderVisibilityChange,
-            rootMargin: "0px 0px -100px 0px",
-            children: /* @__PURE__ */ jsx("div", { className: styles$3["load-more"], children: /* @__PURE__ */ jsx(Button, { appearance: "secondary", size: "small", onClick: onLoadMore, children: "Load more" }) })
+            item: row.item,
+            index: row.downshiftIndex,
+            getItemProps,
+            selectionType,
+            checked: getCheckedState(row.item),
+            highlighted: highlightedIndex === row.downshiftIndex,
+            disabled: (disabled || row.item.disabled) ?? false,
+            isListScrolled: isScrolled
           }
-        ) : null
-      ]
-    }
-  );
-};
-FieldListBase.displayName = "FieldListBase";
+        );
+      }
+      if (row.type === "header") {
+        const labelId = `${baseId}-section-${row.sectionIndex}`;
+        return /* @__PURE__ */ jsx(
+          "li",
+          {
+            role: "presentation",
+            "aria-hidden": "true",
+            className: styles$3["pinned-section-header"],
+            children: /* @__PURE__ */ jsx("span", { id: labelId, children: /* @__PURE__ */ jsx(Text, { variant: "eyebrow", children: row.label }) })
+          }
+        );
+      }
+      if (row.type === "divider") {
+        return /* @__PURE__ */ jsx("li", { role: "separator", 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: [
+            /* @__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(
+          Button,
+          {
+            appearance: "secondary",
+            size: "small",
+            onClick: () => onLoadMoreRef.current(),
+            children: "Load more"
+          }
+        ) }) });
+      }
+      return null;
+    };
+    const menuProps = getMenuProps({
+      className: cx(styles$3["scroller"], className),
+      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: [
+      isOpen && /* @__PURE__ */ jsx(
+        "li",
+        {
+          ref: scrollSentinelRef,
+          className: styles$3["scroll-sentinel"],
+          role: "presentation",
+          "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",
+        {
+          role: "presentation",
+          "aria-hidden": "true",
+          style: {
+            height: virtualizer.getTotalSize(),
+            width: "100%",
+            position: "relative"
+          },
+          children: virtualItems.map((virtualItem) => {
+            const row = virtualRows[virtualItem.index];
+            const sticky = isSticky(virtualItem.index);
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-index": virtualItem.index,
+                ref: virtualizer.measureElement,
+                style: sticky ? {
+                  position: "sticky",
+                  top: 0,
+                  zIndex: 1
+                } : {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  transform: `translateY(${virtualItem.start}px)`
+                },
+                children: renderVirtualRow(row)
+              },
+              virtualItem.key
+            );
+          })
+        }
+      ) : /* @__PURE__ */ jsx("li", { role: "presentation", className: styles$3["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) })
+    ] }) });
+  }
+);
+VirtualizedFieldListBase.displayName = "VirtualizedFieldListBase";
 
 const SelectFieldLabel = ({
   label,
@@ -661,13 +1058,15 @@ function useGroupedOptions(options, groupToString) {
         groupedItems.push({
           id: option.id,
           type: "grouped-option",
-          original: option
+          original: option,
+          disabled: option.disabled ?? false
         });
       } else {
         ungroupedItems.push({
           id: option.id,
           type: "option",
-          original: option
+          original: option,
+          disabled: option.disabled ?? false
         });
       }
     });
@@ -687,7 +1086,7 @@ function sortGroupSections(sections, groupSorter) {
 }
 
 const styles$1 = {
-	"field-popover": "_field-popover_aeggh_2"
+	"field-popover": "_field-popover_f54ku_2"
 };
 
 const FieldPopover = (props) => {
@@ -774,12 +1173,12 @@ function useAdaptiveView() {
   };
 }
 
-const header = "_header_dcw9s_33";
-const field = "_field_dcw9s_2";
-const content = "_content_dcw9s_44";
+const header = "_header_1lctb_34";
+const field = "_field_1lctb_2";
+const content = "_content_1lctb_45";
 const styles = {
-	"field-dialog": "_field-dialog_dcw9s_2",
-	"field-dialog-visual-viewport-height": "_field-dialog-visual-viewport-height_dcw9s_16",
+	"field-dialog": "_field-dialog_1lctb_2",
+	"field-dialog-visual-viewport-height": "_field-dialog-visual-viewport-height_1lctb_17",
 	header: header,
 	field: field,
 	content: content
@@ -877,5 +1276,5 @@ const FieldDialog = ({
   );
 };
 
-export { DEFAULT_PAGE_SIZE as D, FieldListBase as F, SelectFieldLabel as S, usePinnedOptions as a, useGroupedOptions as b, useSelectFieldLoading as c, useDebouncedCallback as d, FieldDialog as e, FieldPopover as f, sortGroupSections as s, useAdaptiveView as u };
-//# sourceMappingURL=FieldDialog-Be54L3E-.js.map
+export { DEFAULT_PAGE_SIZE as D, FieldListBase as F, SelectFieldLabel as S, VirtualizedFieldListBase as V, usePinnedOptions as a, useGroupedOptions as b, useSelectFieldLoading as c, useDebouncedCallback as d, FieldDialog as e, FieldPopover as f, sortGroupSections as s, useAdaptiveView as u };
+//# sourceMappingURL=FieldDialog-CAuhkCZY.js.map