@servicetitan/anvil2 2.6.0 → 2.7.0

package/dist/{SelectFieldSync-BQrC0j2-.js → SelectFieldSync-CJ2Ie_v1.js}

@@ -1,38 +1,19 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useCallback, useState, useMemo, useRef, useEffect, forwardRef, useId, useImperativeHandle } from 'react';
-import { u as useDownshiftEnvironment, a as useCombobox, b as useSelect, m as matchSorter } from './match-sorter.esm-adzV1NDp.js';
-import { w as warnDeprecatedErrorUsage } from './utils-pudAMGnO.js';
-import { V as VirtualizedFieldListBase, F as FieldListBase, a as useProcessedOptions, b as buildDownshiftItems, m as mapOptionToDownshiftItem, c as useDebouncedCallback, S as SelectFieldLabel, d as FieldDialog, e as FieldPopover, u as useAdaptiveView, D as DEFAULT_PAGE_SIZE, f as useSelectFieldLoading } from './FieldDialog-DaRvLS6m.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useRef, useCallback, useEffect, forwardRef, useId } from 'react';
+import { w as warnDeprecatedErrorUsage } from './utils-CM48ODEJ.js';
+import { S as SelectOptions } from './SelectOptions-Bf4xsFek.js';
 import { s as styles } from './SelectTriggerBase.module-B0NFRlQP.js';
-import { c as cx } from './index-SvGbrGuT.js';
-import { B as Button } from './Button-DuvaXRZ5.js';
+import { c as cx } from './index-De1g9FRV.js';
+import { B as Button } from './Button-CVsGhVJz.js';
 import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
 import { S as SvgClose } from './close-DZj38AEh.js';
-import { F as FieldMessage } from './FieldMessage-eYenMJY5.js';
+import { S as SelectFieldLabel } from './SelectFieldLabel-Dr8HeW3N.js';
+import { u as useDownshiftEnvironment, a as useCombobox, b as useSelect } from './downshift.esm-xtSnQp44.js';
+import { b as useProcessedOptions, c as buildSelectItems, h as toSelectItem, d as useDebouncedCallback, e as OptionsDialog, f as OptionsPopover, a as useSelectOrchestration, g as defaultSyncFilter, t as toSyncFilterFn, s as sortByGroup } from './syncFilterUtils-vt8ldsES.js';
+import { F as FieldMessage } from './FieldMessage-COHqUdj5.js';
 import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DMDdfIah.js';
 
-const SelectFieldList = ({
-  selectedOption,
-  virtualize,
-  ...rest
-}) => {
-  const getCheckedState = useCallback(
-    (item) => selectedOption?.id === item.original.id ? "checked" : "unchecked",
-    [selectedOption]
-  );
-  const ListComponent = virtualize ? VirtualizedFieldListBase : FieldListBase;
-  return /* @__PURE__ */ jsx(
-    ListComponent,
-    {
-      ...rest,
-      selectionType: "single",
-      getCheckedState
-    }
-  );
-};
-SelectFieldList.displayName = "SelectFieldList";
-
 const SelectFieldInput = ({
   placeholder,
   size,
@@ -129,7 +110,8 @@ const useCombo = ({
   displayAs = "popover",
   disableHighlightOnOpen = false,
   disabled,
-  virtualize = false
+  virtualize = false,
+  onScrollToHighlight
 }) => {
   const [inputValue, setInputValue] = useState(selectedOption?.label ?? "");
   const effectiveSearchValue = selectedOption?.label === inputValue ? "" : inputValue;
@@ -142,8 +124,8 @@ const useCombo = ({
       groupSorter
     }
   );
-  const { downshiftItems, sectionsMeta } = useMemo(
-    () => buildDownshiftItems({
+  const { items, sectionsMeta } = useMemo(
+    () => buildSelectItems({
       pinnedSections,
       groupSections,
       ungroupedItems
@@ -151,10 +133,9 @@ const useCombo = ({
     [pinnedSections, groupSections, ungroupedItems]
   );
   const selectedDownshiftItem = useMemo(() => {
-    return selectedOption ? mapOptionToDownshiftItem(selectedOption) : null;
+    return selectedOption ? toSelectItem(selectedOption) : null;
   }, [selectedOption]);
   const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
-  const highlightChangeTypeRef = useRef("");
   const {
     isOpen,
     highlightedIndex,
@@ -190,19 +171,21 @@ const useCombo = ({
       setInputValue(changes.inputValue ?? "");
       onInputValueChange?.(changes);
     },
-    onHighlightedIndexChange: ({ type }) => {
-      highlightChangeTypeRef.current = type;
+    onHighlightedIndexChange: ({ type, highlightedIndex: idx }) => {
+      if (type !== useCombobox.stateChangeTypes.ItemMouseMove && idx >= 0) {
+        onScrollToHighlight?.(idx);
+      }
     },
     onIsOpenChange: (changes) => {
       onIsOpenChange?.(changes);
       if (changes.isOpen && !disableHighlightOnOpen) {
-        const selectedItemIndex = downshiftItems.findIndex(
+        const selectedItemIndex = items.findIndex(
           (item) => item.original.id === selectedOption?.id
         );
         setHighlightedIndex(selectedItemIndex);
       }
     },
-    items: downshiftItems,
+    items,
     itemToString(item) {
       return item?.original.label ?? "";
     },
@@ -219,9 +202,8 @@ const useCombo = ({
     getInputProps,
     getItemProps,
     highlightedIndex,
-    highlightChangeTypeRef,
     isOpen,
-    downshiftItems,
+    items,
     sectionsMeta,
     closeMenu,
     openMenu
@@ -306,6 +288,7 @@ const SelectFieldComboboxMode = ({
   inputWrapperRef,
   debounceMs
 }) => {
+  const listRef = useRef(null);
   const debouncedOptionLoader = useDebouncedCallback((inputValue2) => {
     loadOptions(selectedOption?.label === inputValue2 ? "" : inputValue2, {
       initial: true
@@ -325,10 +308,9 @@ const SelectFieldComboboxMode = ({
     getInputProps,
     wrapperDivRef,
     highlightedIndex,
-    highlightChangeTypeRef,
     getItemProps,
     inputValue,
-    downshiftItems,
+    items,
     closeMenu,
     sectionsMeta
   } = useCombo({
@@ -351,7 +333,8 @@ const SelectFieldComboboxMode = ({
     },
     onInputValueChange: ({ inputValue: iv }) => {
       debouncedOptionLoader(iv ?? "");
-    }
+    },
+    onScrollToHighlight: (i) => listRef.current?.scrollToIndex(i)
   });
   useEffect(() => {
     const performInitialLoad = async () => {
@@ -425,7 +408,7 @@ const SelectFieldComboboxMode = ({
             }
           ) : null,
           /* @__PURE__ */ jsx(
-            FieldDialog,
+            OptionsDialog,
             {
               id: `${id}-dialog`,
               isOpen,
@@ -453,15 +436,15 @@ const SelectFieldComboboxMode = ({
                 return elements.find((element) => element.tagName === "INPUT") || elements[0];
               },
               children: /* @__PURE__ */ jsx(
-                SelectFieldList,
+                SelectOptions,
                 {
+                  ref: listRef,
                   isOpen: true,
-                  items: downshiftItems,
+                  items,
                   sectionsMeta,
                   getMenuProps,
                   getItemProps,
                   highlightedIndex,
-                  highlightChangeTypeRef,
                   selectedOption,
                   hasMore,
                   onLoadMore: handleLoadMore,
@@ -528,22 +511,23 @@ const SelectFieldComboboxMode = ({
           }
         ) : null,
         /* @__PURE__ */ jsx(
-          FieldPopover,
+          OptionsPopover,
           {
             id: `${id}-popover`,
             referenceElement: inputWrapperRef,
             open: isOpen && displayAs === "popover",
             onClickOutside: closeMenu,
+            width: "reference",
             children: /* @__PURE__ */ jsx(
-              SelectFieldList,
+              SelectOptions,
               {
+                ref: listRef,
                 isOpen,
-                items: downshiftItems,
+                items,
                 sectionsMeta,
                 getMenuProps,
                 getItemProps,
                 highlightedIndex,
-                highlightChangeTypeRef,
                 selectedOption,
                 hasMore,
                 onLoadMore: handleLoadMore,
@@ -656,7 +640,8 @@ const useSelectMode = ({
   displayAs = "popover",
   disableHighlightOnOpen = false,
   disabled,
-  virtualize = false
+  virtualize = false,
+  onScrollToHighlight
 }) => {
   const { pinnedSections, ungroupedItems, groupSections } = useProcessedOptions(
     {
@@ -667,8 +652,8 @@ const useSelectMode = ({
       groupSorter
     }
   );
-  const { downshiftItems, sectionsMeta } = useMemo(
-    () => buildDownshiftItems({
+  const { items, sectionsMeta } = useMemo(
+    () => buildSelectItems({
       pinnedSections,
       groupSections,
       ungroupedItems
@@ -676,10 +661,9 @@ const useSelectMode = ({
     [pinnedSections, groupSections, ungroupedItems]
   );
   const selectedDownshiftItem = useMemo(() => {
-    return selectedOption ? mapOptionToDownshiftItem(selectedOption) : null;
+    return selectedOption ? toSelectItem(selectedOption) : null;
   }, [selectedOption]);
   const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
-  const highlightChangeTypeRef = useRef("");
   const {
     isOpen,
     highlightedIndex,
@@ -706,19 +690,21 @@ const useSelectMode = ({
         onSelectedOptionChange(null);
       }
     },
-    onHighlightedIndexChange: ({ type }) => {
-      highlightChangeTypeRef.current = type;
+    onHighlightedIndexChange: ({ type, highlightedIndex: idx }) => {
+      if (type !== useSelect.stateChangeTypes.ItemMouseMove && idx >= 0) {
+        onScrollToHighlight?.(idx);
+      }
     },
     onIsOpenChange: (changes) => {
       onIsOpenChange?.(changes);
       if (changes.isOpen && !disableHighlightOnOpen) {
-        const selectedItemIndex = downshiftItems.findIndex(
+        const selectedItemIndex = items.findIndex(
           (item) => item.original.id === selectedOption?.id
         );
         setHighlightedIndex(selectedItemIndex);
       }
     },
-    items: downshiftItems,
+    items,
     itemToString(item) {
       return item?.original.label ?? "";
     },
@@ -733,9 +719,8 @@ const useSelectMode = ({
     getMenuProps,
     getItemProps,
     highlightedIndex,
-    highlightChangeTypeRef,
     isOpen,
-    downshiftItems,
+    items,
     sectionsMeta,
     closeMenu,
     openMenu
@@ -807,6 +792,7 @@ const SelectFieldSelectMode = ({
   inputWrapperRef,
   required
 }) => {
+  const listRef = useRef(null);
   const {
     isOpen,
     getToggleButtonProps,
@@ -814,9 +800,8 @@ const SelectFieldSelectMode = ({
     getMenuProps,
     wrapperDivRef,
     highlightedIndex,
-    highlightChangeTypeRef,
     getItemProps,
-    downshiftItems,
+    items,
     closeMenu,
     sectionsMeta
   } = useSelectMode({
@@ -834,7 +819,8 @@ const SelectFieldSelectMode = ({
         await loadOptions("", { initial: true });
         setInitialLoadPerformed(true);
       }
-    }
+    },
+    onScrollToHighlight: (i) => listRef.current?.scrollToIndex(i)
   });
   useEffect(() => {
     const performInitialLoad = async () => {
@@ -901,17 +887,18 @@ const SelectFieldSelectMode = ({
             }
           ) : null,
           /* @__PURE__ */ jsx(
-            FieldDialog,
+            OptionsDialog,
             {
               id: `${id}-dialog`,
               isOpen,
               onClose: closeMenu,
               title: label,
               children: /* @__PURE__ */ jsx(
-                SelectFieldList,
+                SelectOptions,
                 {
+                  ref: listRef,
                   isOpen: true,
-                  items: downshiftItems,
+                  items,
                   sectionsMeta,
                   getMenuProps: (opts) => getMenuProps({
                     ...opts,
@@ -922,7 +909,6 @@ const SelectFieldSelectMode = ({
                   }),
                   getItemProps,
                   highlightedIndex,
-                  highlightChangeTypeRef,
                   selectedOption,
                   hasMore,
                   onLoadMore: handleLoadMore,
@@ -984,22 +970,23 @@ const SelectFieldSelectMode = ({
           }
         ) : null,
         /* @__PURE__ */ jsx(
-          FieldPopover,
+          OptionsPopover,
           {
             id: `${id}-popover`,
             referenceElement: inputWrapperRef,
             open: isOpen && displayAs === "popover",
             onClickOutside: closeMenu,
+            width: "reference",
             children: /* @__PURE__ */ jsx(
-              SelectFieldList,
+              SelectOptions,
               {
+                ref: listRef,
                 isOpen,
-                items: downshiftItems,
+                items,
                 sectionsMeta,
                 getMenuProps,
                 getItemProps,
                 highlightedIndex,
-                highlightChangeTypeRef,
                 selectedOption,
                 hasMore,
                 onLoadMore: handleLoadMore,
@@ -1019,13 +1006,12 @@ const SelectFieldSelectMode = ({
 const SelectField = forwardRef(
   (propsWithLayout, ref) => {
     const { layoutStyles, componentProps } = useLayoutPropsUtil(propsWithLayout);
-    const [initialLoadPerformed, setInitialLoadPerformed] = useState(false);
     const inputWrapperRef = useRef(null);
     const {
       id: idProp,
       value: selectedOption,
-      initialLoad: initialLoadProp = "auto",
-      displayMenuAs: displayMenuAsProp = "auto",
+      initialLoad: initialLoadProp,
+      displayMenuAs: displayMenuAsProp,
       lazy,
       loadOptions: loadOptionsProp,
       label,
@@ -1062,69 +1048,26 @@ const SelectField = forwardRef(
     const errorMessages = typeof error === "boolean" || error === void 0 ? void 0 : error;
     const hasHelperText = !!(hint || errorMessages || warning || description);
     const isDisabledOrReadOnly = (disabled || readOnly) ?? false;
-    const { isMobile } = useAdaptiveView();
-    const displayAs = displayMenuAsProp === "auto" ? isMobile ? "dialog" : "popover" : displayMenuAsProp;
-    const initialLoad = initialLoadProp === "auto" ? "immediate" : initialLoadProp;
-    const pageSize = lazy === "page" && "lazyOptions" in componentProps ? componentProps.lazyOptions?.pageSize ?? DEFAULT_PAGE_SIZE : DEFAULT_PAGE_SIZE;
-    const limit = lazy === "offset" && "lazyOptions" in componentProps ? componentProps.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 {
+      displayAs,
+      initialLoad,
+      initialLoadPerformed,
+      setInitialLoadPerformed,
       options,
       loading,
       loadingMore,
       hasMore,
       loadOptions,
-      loadMore,
-      clearCache
-    } = useSelectFieldLoading(loadingHookConfig);
-    useImperativeHandle(
-      ref,
-      () => ({
-        clearCache,
-        invalidate: () => {
-          clearCache();
-          setInitialLoadPerformed(false);
-        }
-      }),
-      [clearCache]
-    );
+      loadMore
+    } = useSelectOrchestration({
+      lazy,
+      loadOptions: loadOptionsProp,
+      cache,
+      lazyOptions: "lazyOptions" in componentProps ? componentProps.lazyOptions : void 0,
+      initialLoad: initialLoadProp,
+      displayMenuAs: displayMenuAsProp,
+      ref
+    });
     const disableClearButton = disableClearButtonProp || !selectedOption || isDisabledOrReadOnly;
     const baseProps = {
       id,
@@ -1180,46 +1123,14 @@ const SelectField = forwardRef(
 );
 SelectField.displayName = "SelectField";
 
-const defaultFilter = (options, searchValue) => matchSorter(options, searchValue, {
-  keys: ["label", "searchText"],
-  baseSort: (a, b) => a.index - b.index
-});
-const toFilterFn = (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;
-  });
-};
 const SelectFieldSync = (props) => {
   const {
     options,
-    filter: filterProp = defaultFilter,
+    filter: filterProp = defaultSyncFilter,
     groupSorter,
     ...rest
   } = props;
-  const filter = useMemo(() => toFilterFn(filterProp), [filterProp]);
+  const filter = useMemo(() => toSyncFilterFn(filterProp), [filterProp]);
   const loadOptions = (searchValue) => {
     const filtered = filter(options, searchValue);
     return groupSorter ? sortByGroup(filtered, groupSorter) : filtered;
@@ -1245,4 +1156,4 @@ const SelectFieldSync = (props) => {
 };
 
 export { SelectField as S, SelectFieldSync as a };
-//# sourceMappingURL=SelectFieldSync-BQrC0j2-.js.map
+//# sourceMappingURL=SelectFieldSync-CJ2Ie_v1.js.map