@servicetitan/anvil2 2.6.0 → 2.7.0

package/dist/{MultiSelectFieldSync-B6J42MpG.js → MultiSelectFieldSync-DGpGgu8q.js}

@@ -1,49 +1,23 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useMemo, useCallback, useRef, useState, useLayoutEffect, useEffect, 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, a as warnOnce } from './utils-pudAMGnO.js';
-import { V as VirtualizedFieldListBase, F as FieldListBase, a as useProcessedOptions, b as buildDownshiftItems, 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 { c as cx } from './index-SvGbrGuT.js';
-import { B as Button } from './Button-DuvaXRZ5.js';
-import { C as Chip } from './Chip-BJmzOMOd.js';
-import { F as Flex } from './Flex-DZu-_z-U.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useLayoutEffect, useMemo, useEffect, forwardRef, useId, useCallback } from 'react';
+import { w as warnDeprecatedErrorUsage } from './utils-CM48ODEJ.js';
+import { u as useToggleSelection, M as MultiSelectOptions } from './useToggleSelection-BdXW3Zg3.js';
+import { c as cx } from './index-De1g9FRV.js';
+import { B as Button } from './Button-CVsGhVJz.js';
+import { C as Chip } from './Chip-DjTAR0va.js';
+import { F as Flex } from './Flex-WyyZm1bf.js';
 import { m as mergeRefs, u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
 import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
 import { S as SvgClose } from './close-DZj38AEh.js';
+import { S as SelectFieldLabel } from './SelectFieldLabel-Dr8HeW3N.js';
 import { s as styles$1 } from './SelectTriggerBase.module-B0NFRlQP.js';
-import { F as FieldMessage } from './FieldMessage-eYenMJY5.js';
+import { u as useDownshiftEnvironment, a as useCombobox, b as useSelect } from './downshift.esm-xtSnQp44.js';
+import { b as useProcessedOptions, c as buildSelectItems, d as useDebouncedCallback, e as OptionsDialog, f as OptionsPopover, a as useSelectOrchestration, g as defaultSyncFilter, t as toSyncFilterFn } from './syncFilterUtils-vt8ldsES.js';
+import { F as FieldMessage } from './FieldMessage-COHqUdj5.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DMDdfIah.js';
+import { w as warnOnce } from './warnOnce-Y9PRHcU4.js';
 
-import './MultiSelectFieldSync.css';const MultiSelectFieldList = forwardRef(({ selectedOptions, items, virtualize, ...rest }, ref) => {
-  const selectedIds = useMemo(
-    () => new Set(selectedOptions.map((opt) => opt.id)),
-    [selectedOptions]
-  );
-  const getCheckedState = useCallback(
-    (item) => {
-      if (item.type === "select-all" || item.type === "select-filtered") {
-        return item.checkState ?? "indeterminate";
-      }
-      const checkId = item.type === "pinned-option" ? item.original.id : item.id;
-      return selectedIds.has(checkId) ? "checked" : "unchecked";
-    },
-    [selectedIds]
-  );
-  const ListComponent = virtualize ? VirtualizedFieldListBase : FieldListBase;
-  return /* @__PURE__ */ jsx(
-    ListComponent,
-    {
-      ...rest,
-      ref,
-      items,
-      selectionType: "multiple",
-      getCheckedState
-    }
-  );
-});
-MultiSelectFieldList.displayName = "MultiSelectFieldList";
-
-const input = "_input_1t7vf_2";
+import './MultiSelectFieldSync.css';const input = "_input_1t7vf_2";
 const prefix = "_prefix_1t7vf_52";
 const suffix = "_suffix_1t7vf_53";
 const chip = "_chip_1t7vf_98";
@@ -264,34 +238,6 @@ const MultiSelectFieldInput = ({
 };
 MultiSelectFieldInput.displayName = "MultiSelectFieldInput";
 
-const useToggleSelection = ({
-  options,
-  pinnedSections,
-  selectedOptions,
-  onSelectedOptionsChange
-}) => {
-  const allPinnedOptions = useMemo(() => {
-    return pinnedSections.flatMap((section) => section.options);
-  }, [pinnedSections]);
-  const handleItemClick = useCallback(
-    (option) => {
-      const isSelected = selectedOptions.some((opt) => opt.id === option.id);
-      if (isSelected) {
-        onSelectedOptionsChange(
-          selectedOptions.filter((opt) => opt.id !== option.id)
-        );
-      } else {
-        const fullOption = options.find((opt) => opt.id === option.id) || allPinnedOptions.find((opt) => opt.id === option.id);
-        if (fullOption) {
-          onSelectedOptionsChange([...selectedOptions, fullOption]);
-        }
-      }
-    },
-    [selectedOptions, onSelectedOptionsChange, options, allPinnedOptions]
-  );
-  return { handleItemClick, allPinnedOptions };
-};
-
 const useComboMultiple = ({
   options,
   pinned,
@@ -306,7 +252,8 @@ const useComboMultiple = ({
   displayAs = "popover",
   disabled,
   loading = false,
-  virtualize = false
+  virtualize = false,
+  onScrollToHighlight
 }) => {
   const [inputValue, setInputValue] = useState("");
   const { pinnedSections, ungroupedItems, groupSections } = useProcessedOptions(
@@ -319,12 +266,12 @@ const useComboMultiple = ({
     }
   );
   const bulkActionItems = useMemo(() => {
-    const items = [];
+    const items2 = [];
     const hasSearchTerm = inputValue.trim().length > 0;
     const hasResults = ungroupedItems.length > 0 || groupSections.some((s) => s.options.length > 0) || pinnedSections.some((s) => s.options.length > 0);
     if (hasSearchTerm && selectFiltered && hasResults && !loading) {
       const config = selectFiltered(inputValue);
-      items.push({
+      items2.push({
         id: "select-filtered",
         type: "select-filtered",
         original: {
@@ -334,7 +281,7 @@ const useComboMultiple = ({
         checkState: config.checkState
       });
     } else if (!hasSearchTerm && selectAll) {
-      items.push({
+      items2.push({
         id: "select-all",
         type: "select-all",
         original: {
@@ -344,7 +291,7 @@ const useComboMultiple = ({
         checkState: selectAll.checkState
       });
     }
-    return items;
+    return items2;
   }, [
     inputValue,
     ungroupedItems,
@@ -354,8 +301,8 @@ const useComboMultiple = ({
     selectAll,
     loading
   ]);
-  const { downshiftItems, sectionsMeta } = useMemo(
-    () => buildDownshiftItems({
+  const { items, sectionsMeta } = useMemo(
+    () => buildSelectItems({
       prefixItems: bulkActionItems,
       pinnedSections,
       groupSections,
@@ -364,7 +311,6 @@ const useComboMultiple = ({
     [bulkActionItems, pinnedSections, groupSections, ungroupedItems]
   );
   const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
-  const highlightChangeTypeRef = useRef("");
   const { handleItemClick } = useToggleSelection({
     options,
     pinnedSections,
@@ -406,8 +352,10 @@ const useComboMultiple = ({
         }
       }
     },
-    onHighlightedIndexChange: ({ type }) => {
-      highlightChangeTypeRef.current = type;
+    onHighlightedIndexChange: ({ type, highlightedIndex: idx }) => {
+      if (type !== useCombobox.stateChangeTypes.ItemMouseMove && idx >= 0) {
+        onScrollToHighlight?.(idx);
+      }
     },
     onInputValueChange: (changes) => {
       setInputValue(changes.inputValue ?? "");
@@ -416,7 +364,7 @@ const useComboMultiple = ({
     scrollIntoView: virtualize ? () => {
     } : (node, menuNode) => {
       if (!node || !menuNode) return;
-      const firstItem = downshiftItems[0];
+      const firstItem = items[0];
       const hasBulkAction = firstItem?.type === "select-all" || firstItem?.type === "select-filtered";
       if (!hasBulkAction) {
         const nodeRect2 = node.getBoundingClientRect();
@@ -444,7 +392,7 @@ const useComboMultiple = ({
       }
     },
     onIsOpenChange,
-    items: downshiftItems,
+    items,
     itemToString(item) {
       return item?.original.label ?? "";
     },
@@ -459,9 +407,8 @@ const useComboMultiple = ({
     getInputProps,
     getItemProps,
     highlightedIndex,
-    highlightChangeTypeRef,
     isOpen,
-    downshiftItems,
+    items,
     sectionsMeta,
     closeMenu,
     openMenu,
@@ -572,6 +519,7 @@ const MultiSelectFieldComboboxMode = ({
   handleRemoveOption,
   handleClear
 }) => {
+  const listRef = useRef(null);
   const debouncedOptionLoader = useDebouncedCallback((inputValue2) => {
     loadOptions(inputValue2, { initial: true });
   }, debounceMs);
@@ -583,10 +531,9 @@ const MultiSelectFieldComboboxMode = ({
     getInputProps,
     wrapperDivRef,
     highlightedIndex,
-    highlightChangeTypeRef,
     getItemProps,
     inputValue,
-    downshiftItems,
+    items,
     sectionsMeta,
     closeMenu,
     toggleMenu
@@ -612,7 +559,8 @@ const MultiSelectFieldComboboxMode = ({
     onInputValueChange: ({ inputValue: iv }) => {
       debouncedOptionLoader(iv ?? "");
       onSearchChange?.(iv ?? "");
-    }
+    },
+    onScrollToHighlight: (i) => listRef.current?.scrollToIndex(i)
   });
   useEffect(() => {
     const performInitialLoad = async () => {
@@ -681,7 +629,7 @@ const MultiSelectFieldComboboxMode = ({
             }
           ) : null,
           /* @__PURE__ */ jsx(
-            FieldDialog,
+            OptionsDialog,
             {
               id: `${id}-dialog`,
               isOpen,
@@ -713,14 +661,14 @@ const MultiSelectFieldComboboxMode = ({
                 }
               ),
               children: /* @__PURE__ */ jsx(
-                MultiSelectFieldList,
+                MultiSelectOptions,
                 {
                   isOpen: true,
-                  items: downshiftItems,
+                  items,
                   getMenuProps,
+                  ref: listRef,
                   getItemProps,
                   highlightedIndex,
-                  highlightChangeTypeRef,
                   selectedOptions,
                   hasMore,
                   onLoadMore: handleLoadMore,
@@ -792,21 +740,22 @@ const MultiSelectFieldComboboxMode = ({
           }
         ) : null,
         /* @__PURE__ */ jsx(
-          FieldPopover,
+          OptionsPopover,
           {
             id: `${id}-popover`,
             referenceElement: inputWrapperRef,
             open: isOpen && displayAs === "popover",
             onClickOutside: closeMenu,
+            width: "reference",
             children: /* @__PURE__ */ jsx(
-              MultiSelectFieldList,
+              MultiSelectOptions,
               {
                 isOpen,
-                items: downshiftItems,
+                items,
                 getMenuProps,
+                ref: listRef,
                 getItemProps,
                 highlightedIndex,
-                highlightChangeTypeRef,
                 selectedOptions,
                 hasMore,
                 onLoadMore: handleLoadMore,
@@ -961,7 +910,8 @@ const useSelectModeMultiple = ({
   onIsOpenChange,
   displayAs = "popover",
   disabled,
-  virtualize = false
+  virtualize = false,
+  onScrollToHighlight
 }) => {
   const { pinnedSections, ungroupedItems, groupSections } = useProcessedOptions(
     {
@@ -973,9 +923,9 @@ const useSelectModeMultiple = ({
     }
   );
   const bulkActionItems = useMemo(() => {
-    const items = [];
+    const items2 = [];
     if (selectAll) {
-      items.push({
+      items2.push({
         id: "select-all",
         type: "select-all",
         original: {
@@ -985,10 +935,10 @@ const useSelectModeMultiple = ({
         checkState: selectAll.checkState
       });
     }
-    return items;
+    return items2;
   }, [selectAll]);
-  const { downshiftItems, sectionsMeta } = useMemo(
-    () => buildDownshiftItems({
+  const { items, sectionsMeta } = useMemo(
+    () => buildSelectItems({
       prefixItems: bulkActionItems,
       pinnedSections,
       groupSections,
@@ -1030,8 +980,13 @@ const useSelectModeMultiple = ({
         }
       }
     },
+    onHighlightedIndexChange: ({ type, highlightedIndex: idx }) => {
+      if (type !== useSelect.stateChangeTypes.ItemMouseMove && idx >= 0) {
+        onScrollToHighlight?.(idx);
+      }
+    },
     onIsOpenChange,
-    items: downshiftItems,
+    items,
     itemToString(item) {
       return item?.original.label ?? "";
     },
@@ -1047,7 +1002,7 @@ const useSelectModeMultiple = ({
     getItemProps,
     highlightedIndex,
     isOpen,
-    downshiftItems,
+    items,
     sectionsMeta,
     closeMenu,
     openMenu,
@@ -1131,6 +1086,7 @@ const MultiSelectFieldSelectMode = ({
   handleRemoveOption,
   handleClear
 }) => {
+  const listRef = useRef(null);
   const {
     isOpen,
     getToggleButtonProps,
@@ -1139,7 +1095,7 @@ const MultiSelectFieldSelectMode = ({
     wrapperDivRef,
     highlightedIndex,
     getItemProps,
-    downshiftItems,
+    items,
     sectionsMeta,
     closeMenu
   } = useSelectModeMultiple({
@@ -1158,7 +1114,8 @@ const MultiSelectFieldSelectMode = ({
         await loadOptions("", { initial: true });
         setInitialLoadPerformed(true);
       }
-    }
+    },
+    onScrollToHighlight: (i) => listRef.current?.scrollToIndex(i)
   });
   useEffect(() => {
     const performInitialLoad = async () => {
@@ -1228,17 +1185,18 @@ const MultiSelectFieldSelectMode = ({
             }
           ) : null,
           /* @__PURE__ */ jsx(
-            FieldDialog,
+            OptionsDialog,
             {
               id: `${id}-dialog`,
               isOpen,
               onClose: closeMenu,
               title: label,
               children: /* @__PURE__ */ jsx(
-                MultiSelectFieldList,
+                MultiSelectOptions,
                 {
+                  ref: listRef,
                   isOpen: true,
-                  items: downshiftItems,
+                  items,
                   getMenuProps: (opts) => getMenuProps({
                     ...opts,
                     style: { ...opts?.style, outline: "none" },
@@ -1313,17 +1271,19 @@ const MultiSelectFieldSelectMode = ({
           }
         ) : null,
         /* @__PURE__ */ jsx(
-          FieldPopover,
+          OptionsPopover,
           {
             id: `${id}-popover`,
             referenceElement: inputWrapperRef,
             open: isOpen && displayAs === "popover",
             onClickOutside: closeMenu,
+            width: "reference",
             children: /* @__PURE__ */ jsx(
-              MultiSelectFieldList,
+              MultiSelectOptions,
               {
+                ref: listRef,
                 isOpen,
-                items: downshiftItems,
+                items,
                 getMenuProps,
                 getItemProps,
                 highlightedIndex,
@@ -1346,13 +1306,12 @@ const MultiSelectFieldSelectMode = ({
 
 const MultiSelectField = forwardRef((propsWithLayout, ref) => {
   const { layoutStyles, componentProps } = useLayoutPropsUtil(propsWithLayout);
-  const [initialLoadPerformed, setInitialLoadPerformed] = useState(false);
   const inputWrapperRef = useRef(null);
   const {
     id: idProp,
     value: selectedOptions,
-    initialLoad: initialLoadProp = "auto",
-    displayMenuAs: displayMenuAsProp = "auto",
+    initialLoad: initialLoadProp,
+    displayMenuAs: displayMenuAsProp,
     lazy,
     loadOptions: loadOptionsProp,
     label,
@@ -1397,62 +1356,26 @@ const MultiSelectField = forwardRef((propsWithLayout, ref) => {
   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 handleRemoveOption = useCallback(
     (option) => {
       onSelectedOptionsChange(
@@ -1538,31 +1461,23 @@ const MultiSelectField = forwardRef((propsWithLayout, ref) => {
 });
 MultiSelectField.displayName = "MultiSelectField";
 
-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 MultiSelectFieldSync = (props) => {
   const {
     options,
-    filter: filterProp = defaultFilter,
+    filter: filterProp = defaultSyncFilter,
     selectAll: selectAllProp,
     selectFiltered: selectFilteredProp,
     value,
     onSelectedOptionsChange,
     ...rest
   } = props;
-  const filter = useMemo(() => toFilterFn(filterProp), [filterProp]);
+  const filter = useMemo(() => toSyncFilterFn(filterProp), [filterProp]);
   const selectAllConfig = useMemo(() => {
     if (!selectAllProp) return void 0;
     const enabledOptions = options.filter((opt) => !opt.disabled);
-    const selectedCount = value.length;
-    const totalCount = enabledOptions.length;
-    const allSelected = selectedCount === totalCount;
+    const enabledIds = new Set(enabledOptions.map((opt) => opt.id));
+    const selectedCount = value.filter((v) => enabledIds.has(v.id)).length;
+    const allSelected = selectedCount === enabledOptions.length;
     const labelProp = typeof selectAllProp === "object" ? selectAllProp.label : void 0;
     const label = typeof labelProp === "function" ? labelProp(allSelected) : labelProp;
     const checkState = allSelected ? "checked" : selectedCount > 0 ? "indeterminate" : "unchecked";
@@ -1637,4 +1552,4 @@ const MultiSelectFieldSync = (props) => {
 };
 
 export { MultiSelectField as M, MultiSelectFieldSync as a };
-//# sourceMappingURL=MultiSelectFieldSync-B6J42MpG.js.map
+//# sourceMappingURL=MultiSelectFieldSync-DGpGgu8q.js.map