@servicetitan/anvil2 2.0.4 → 2.2.0

package/dist/{MultiSelectFieldSync-xj7jXas-.js → MultiSelectFieldSync-Bey99LzJ.js}

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMemo, useCallback, useRef, useState, useLayoutEffect, forwardRef, useId, useImperativeHandle, useEffect } from 'react';
+import { forwardRef, useMemo, useCallback, useRef, useState, useLayoutEffect, useId, useImperativeHandle, useEffect } from 'react';
 import { u as useDownshiftEnvironment, a as useCombobox, m as matchSorter } from './match-sorter.esm-B3vwg1-X.js';
-import { F as FieldListBase, a as usePinnedOptions, b as useGroupedOptions, s as sortGroupSections, u as useAdaptiveView, D as DEFAULT_PAGE_SIZE, c as useSelectFieldLoading, d as useDebouncedCallback, S as SelectFieldLabel, e as FieldDialog, f as FieldPopover } from './FieldDialog-Be54L3E-.js';
+import { V as VirtualizedFieldListBase, F as FieldListBase, a as usePinnedOptions, b as useGroupedOptions, s as sortGroupSections, u as useAdaptiveView, D as DEFAULT_PAGE_SIZE, c as useSelectFieldLoading, d as useDebouncedCallback, S as SelectFieldLabel, e as FieldDialog, f as FieldPopover } from './FieldDialog-CAuhkCZY.js';
 import { c as cx } from './index-SvGbrGuT.js';
 import { B as Button } from './Button-l7pTJdPc.js';
 import { C as Chip } from './Chip-Bc7jiIJ1.js';
@@ -10,20 +10,18 @@ import { m as mergeRefs } from './useMergeRefs-Dfmtq9cI.js';
 import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
 import { S as SvgClose } from './close-DZj38AEh.js';
 import { s as styles$1 } from './SelectTriggerBase.module-B0NFRlQP.js';
+import { F as FieldMessage } from './FieldMessage-DS0COrjp.js';
+import { w as warnDeprecatedErrorUsage } from './utils-pudAMGnO.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-loxbyklF.js';
-import { F as FieldMessage } from './FieldMessage-tEr6rWXS.js';
 
-import './MultiSelectFieldSync.css';const MultiSelectFieldList = ({
-  selectedOptions,
-  ...rest
-}) => {
+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") {
+      if (item.type === "select-all" || item.type === "select-filtered") {
         return item.checkState ?? "indeterminate";
       }
       const checkId = item.type === "pinned-option" ? item.original.id : item.id;
@@ -31,15 +29,18 @@ import './MultiSelectFieldSync.css';const MultiSelectFieldList = ({
     },
     [selectedIds]
   );
+  const ListComponent = virtualize ? VirtualizedFieldListBase : FieldListBase;
   return /* @__PURE__ */ jsx(
-    FieldListBase,
+    ListComponent,
     {
       ...rest,
+      ref,
+      items,
       selectionType: "multiple",
       getCheckedState
     }
   );
-};
+});
 MultiSelectFieldList.displayName = "MultiSelectFieldList";
 
 const input = "_input_1t7vf_2";
@@ -256,12 +257,15 @@ const useComboMultiple = ({
   groupToString,
   groupSorter,
   selectAll,
+  selectFiltered,
   selectedOptions,
   onSelectedOptionsChange,
   onInputValueChange,
   onIsOpenChange,
   displayAs = "popover",
-  disabled
+  disabled,
+  loading = false,
+  virtualize = false
 }) => {
   const [inputValue, setInputValue] = useState("");
   const { pinnedSections } = usePinnedOptions(pinned, inputValue);
@@ -278,7 +282,20 @@ const useComboMultiple = ({
   const { downshiftItems, sectionsMeta } = useMemo(() => {
     const items = [];
     const meta = [];
-    if (selectAll) {
+    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({
+        id: "select-filtered",
+        type: "select-filtered",
+        original: {
+          id: "select-filtered",
+          label: config.label ?? `Select items matching "${inputValue}"`
+        },
+        checkState: config.checkState
+      });
+    } else if (!hasSearchTerm && selectAll) {
       items.push({
         id: "select-all",
         type: "select-all",
@@ -339,8 +356,17 @@ const useComboMultiple = ({
       });
     });
     return { downshiftItems: items, sectionsMeta: meta };
-  }, [groupSections, ungroupedItems, pinnedSections, selectAll]);
+  }, [
+    groupSections,
+    ungroupedItems,
+    pinnedSections,
+    selectAll,
+    selectFiltered,
+    inputValue,
+    loading
+  ]);
   const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
+  const highlightChangeTypeRef = useRef("");
   const allPinnedOptions = useMemo(() => {
     return pinnedSections.flatMap((section) => section.options);
   }, [pinnedSections]);
@@ -385,19 +411,53 @@ const useComboMultiple = ({
     onSelectedItemChange: ({
       selectedItem: si
     }) => {
-      console.log("selectedItem", si);
       if (si) {
         if (si.type === "select-all") {
           selectAll?.onClick();
+        } else if (si.type === "select-filtered") {
+          selectFiltered?.(inputValue).onClick();
         } else if (si.type === "option" || si.type === "pinned-option" || si.type === "grouped-option") {
           handleItemClick(si.original);
         }
       }
     },
+    onHighlightedIndexChange: ({ type }) => {
+      highlightChangeTypeRef.current = type;
+    },
     onInputValueChange: (changes) => {
       setInputValue(changes.inputValue ?? "");
       onInputValueChange?.(changes);
     },
+    scrollIntoView: virtualize ? () => {
+    } : (node, menuNode) => {
+      if (!node || !menuNode) return;
+      const firstItem = downshiftItems[0];
+      const hasBulkAction = firstItem?.type === "select-all" || firstItem?.type === "select-filtered";
+      if (!hasBulkAction) {
+        const nodeRect2 = node.getBoundingClientRect();
+        const menuRect2 = menuNode.getBoundingClientRect();
+        if (nodeRect2.bottom > menuRect2.bottom || nodeRect2.top < menuRect2.top) {
+          node.scrollIntoView({ block: "nearest" });
+        }
+        return;
+      }
+      const bulkActionEl = menuNode.querySelector(
+        '[data-type="select-all"], [data-type="select-filtered"]'
+      );
+      if (node === bulkActionEl) {
+        menuNode.scrollTop = 0;
+        return;
+      }
+      const stickyHeight = bulkActionEl?.getBoundingClientRect().height ?? 0;
+      const nodeRect = node.getBoundingClientRect();
+      const menuRect = menuNode.getBoundingClientRect();
+      const visibleTop = menuRect.top + stickyHeight;
+      if (nodeRect.top < visibleTop) {
+        menuNode.scrollTop -= visibleTop - nodeRect.top;
+      } else if (nodeRect.bottom > menuRect.bottom) {
+        menuNode.scrollTop += nodeRect.bottom - menuRect.bottom;
+      }
+    },
     onIsOpenChange,
     items: downshiftItems,
     itemToString(item) {
@@ -414,6 +474,7 @@ const useComboMultiple = ({
     getInputProps,
     getItemProps,
     highlightedIndex,
+    highlightChangeTypeRef,
     isOpen,
     downshiftItems,
     sectionsMeta,
@@ -427,7 +488,6 @@ function stateReducer(state, actionAndChanges, displayAs) {
   const { type, changes } = actionAndChanges;
   switch (type) {
     case useCombobox.stateChangeTypes.InputBlur:
-      console.log("inputBlur", changes, state);
       if (displayAs === "dialog" && state.isOpen) {
         return {
           ...changes,
@@ -467,6 +527,11 @@ function stateReducer(state, actionAndChanges, displayAs) {
         inputValue: state.inputValue
         // Preserve input value for continued filtering
       };
+    case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
+      return {
+        ...changes,
+        inputValue: state.inputValue
+      };
     default:
       return changes;
   }
@@ -494,33 +559,30 @@ const MultiSelectField = forwardRef((propsWithLayout, ref) => {
     error,
     hint,
     description,
-    errorAriaLive: errorAriaLiveProp = "assertive",
     required,
     disabled,
     readOnly,
     prefix,
     suffix,
     selectAll,
+    selectFiltered,
     singleRow,
     maxChips,
+    warning,
     pinned,
+    onSearchChange,
     className,
-    style
+    style,
+    virtualize
   } = componentProps;
   const groupToString = "groupToString" in componentProps ? componentProps.groupToString : void 0;
   const groupSorter = "groupSorter" in componentProps ? componentProps.groupSorter : void 0;
   const autoId = useId();
   const id = idProp ?? autoId;
   const helperUid = useId();
-  const [shouldAriaLive, setShouldAriaLive] = useState(false);
-  const handleFocus = () => {
-    setShouldAriaLive(true);
-  };
-  const handleBlur = () => {
-    setShouldAriaLive(false);
-  };
-  const errorMessage = typeof error !== "boolean" ? error : void 0;
-  const hasHelperText = hint || errorMessage || description;
+  warnDeprecatedErrorUsage("MultiSelectField", error);
+  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;
@@ -567,7 +629,17 @@ const MultiSelectField = forwardRef((propsWithLayout, ref) => {
     loadMore,
     clearCache
   } = useSelectFieldLoading(loadingHookConfig);
-  useImperativeHandle(ref, () => ({ clearCache }), [clearCache]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      clearCache,
+      invalidate: () => {
+        clearCache();
+        setInitialLoadPerformed(false);
+      }
+    }),
+    [clearCache]
+  );
   const debouncedOptionLoader = useDebouncedCallback((inputValue2) => {
     loadOptions(inputValue2, { initial: true });
   }, debounceMs);
@@ -590,6 +662,7 @@ const MultiSelectField = forwardRef((propsWithLayout, ref) => {
     getInputProps,
     wrapperDivRef,
     highlightedIndex,
+    highlightChangeTypeRef,
     getItemProps,
     inputValue,
     downshiftItems,
@@ -601,14 +674,24 @@ const MultiSelectField = forwardRef((propsWithLayout, ref) => {
     onSelectedOptionsChange,
     disabled: isDisabledOrReadOnly,
     options,
+    loading,
     pinned,
+    virtualize,
     groupToString,
     groupSorter,
     selectedOptions,
     selectAll: selectAll ? {
       label: selectAll.label ?? "Select All",
       onClick: selectAll.onClick,
-      checkState: selectAll.isChecked === true ? "checked" : selectAll.isChecked === false ? "unchecked" : selectAll.isChecked ?? "indeterminate"
+      checkState: selectAll.checkState === true ? "checked" : selectAll.checkState === false ? "unchecked" : selectAll.checkState ?? "indeterminate"
+    } : void 0,
+    selectFiltered: selectFiltered ? (searchValue) => {
+      const config = selectFiltered(searchValue);
+      return {
+        label: config.label,
+        onClick: config.onClick,
+        checkState: config.checkState === true ? "checked" : config.checkState === false ? "unchecked" : config.checkState ?? "indeterminate"
+      };
     } : void 0,
     async onIsOpenChange(changes) {
       if (initialLoad === "open" && !initialLoadPerformed && changes.isOpen) {
@@ -618,6 +701,7 @@ const MultiSelectField = forwardRef((propsWithLayout, ref) => {
     },
     onInputValueChange: ({ inputValue: iv }) => {
       debouncedOptionLoader(iv ?? "");
+      onSearchChange?.(iv ?? "");
     }
   });
   useEffect(() => {
@@ -664,9 +748,7 @@ const MultiSelectField = forwardRef((propsWithLayout, ref) => {
               id: `${id}-input`,
               inputProps: getInputProps({
                 "aria-describedby": hasHelperText ? helperUid : void 0,
-                "aria-invalid": error ? true : void 0,
-                onFocus: handleFocus,
-                onBlur: handleBlur
+                "aria-invalid": error ? true : void 0
               }),
               size,
               error: !!error,
@@ -684,8 +766,8 @@ const MultiSelectField = forwardRef((propsWithLayout, ref) => {
             {
               id: helperUid,
               hint,
-              errorMessage,
-              errorAriaLive: isOpen || shouldAriaLive ? errorAriaLiveProp : "off",
+              error: errorMessages,
+              warning,
               description
             }
           ) : null,
@@ -729,6 +811,7 @@ const MultiSelectField = forwardRef((propsWithLayout, ref) => {
                   getMenuProps,
                   getItemProps,
                   highlightedIndex,
+                  highlightChangeTypeRef,
                   selectedOptions,
                   hasMore,
                   onLoadMore: handleLoadMore,
@@ -736,10 +819,7 @@ const MultiSelectField = forwardRef((propsWithLayout, ref) => {
                   loadingMore,
                   disabled: isDisabledOrReadOnly,
                   sectionsMeta,
-                  style: {
-                    paddingInline: 24,
-                    paddingBlockEnd: 24
-                  }
+                  virtualize
                 }
               )
             }
@@ -772,9 +852,7 @@ const MultiSelectField = forwardRef((propsWithLayout, ref) => {
             inputProps: getInputProps({
               popovertarget: `${id}-popover`,
               "aria-describedby": hasHelperText ? helperUid : void 0,
-              "aria-invalid": error ? true : void 0,
-              onFocus: handleFocus,
-              onBlur: handleBlur
+              "aria-invalid": error ? true : void 0
             }),
             toggleButtonProps: getToggleButtonProps(),
             disableToggleButton: false,
@@ -800,8 +878,8 @@ const MultiSelectField = forwardRef((propsWithLayout, ref) => {
           {
             id: helperUid,
             hint,
-            errorMessage,
-            errorAriaLive: isOpen || shouldAriaLive ? errorAriaLiveProp : "off",
+            error: errorMessages,
+            warning,
             description
           }
         ) : null,
@@ -820,6 +898,7 @@ const MultiSelectField = forwardRef((propsWithLayout, ref) => {
                 getMenuProps,
                 getItemProps,
                 highlightedIndex,
+                highlightChangeTypeRef,
                 selectedOptions,
                 hasMore,
                 onLoadMore: handleLoadMore,
@@ -827,9 +906,7 @@ const MultiSelectField = forwardRef((propsWithLayout, ref) => {
                 loadingMore,
                 disabled: isDisabledOrReadOnly,
                 sectionsMeta,
-                style: {
-                  padding: 8
-                }
+                virtualize
               }
             )
           }
@@ -840,25 +917,25 @@ const MultiSelectField = forwardRef((propsWithLayout, ref) => {
 });
 MultiSelectField.displayName = "MultiSelectField";
 
-const defaultFilter = (options, searchValue) => {
-  return matchSorter(options, searchValue, {
-    keys: ["label", "searchText"]
-  });
-};
+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,
     selectAll: selectAllProp,
+    selectFiltered: selectFilteredProp,
     value,
     onSelectedOptionsChange,
     ...rest
   } = props;
-  const filter = typeof filterProp === "function" ? filterProp : (options2, searchValue) => matchSorter(
-    options2,
-    searchValue,
-    filterProp
-  );
+  const filter = useMemo(() => toFilterFn(filterProp), [filterProp]);
   const selectAllConfig = useMemo(() => {
     if (!selectAllProp) return void 0;
     const enabledOptions = options.filter((opt) => !opt.disabled);
@@ -867,7 +944,7 @@ const MultiSelectFieldSync = (props) => {
     const allSelected = selectedCount === totalCount;
     const labelProp = typeof selectAllProp === "object" ? selectAllProp.label : void 0;
     const label = typeof labelProp === "function" ? labelProp(allSelected) : labelProp;
-    const isChecked = allSelected ? "checked" : selectedCount > 0 ? "indeterminate" : "unchecked";
+    const checkState = allSelected ? "checked" : selectedCount > 0 ? "indeterminate" : "unchecked";
     const handleClick = () => {
       if (allSelected) {
         onSelectedOptionsChange([]);
@@ -878,22 +955,65 @@ const MultiSelectFieldSync = (props) => {
     return {
       label,
       onClick: handleClick,
-      isChecked
+      checkState
     };
   }, [selectAllProp, options, value, onSelectedOptionsChange]);
+  const selectFilteredConfig = useMemo(() => {
+    if (!selectFilteredProp) return void 0;
+    return (searchValue) => {
+      const filteredOptions = filter(options, searchValue);
+      const enabledFilteredOptions = filteredOptions.filter(
+        (opt) => !opt.disabled
+      );
+      const selectedIds = new Set(value.map((v) => v.id));
+      const allFilteredSelected = enabledFilteredOptions.length > 0 && enabledFilteredOptions.every((opt) => selectedIds.has(opt.id));
+      const someFilteredSelected = enabledFilteredOptions.some(
+        (opt) => selectedIds.has(opt.id)
+      );
+      const label = typeof selectFilteredProp === "function" ? selectFilteredProp(searchValue).label : void 0;
+      const checkState = allFilteredSelected ? "checked" : someFilteredSelected ? "indeterminate" : "unchecked";
+      const handleClick = () => {
+        if (allFilteredSelected) {
+          const filteredIds = new Set(enabledFilteredOptions.map((o) => o.id));
+          onSelectedOptionsChange(value.filter((v) => !filteredIds.has(v.id)));
+        } else {
+          const currentIds = new Set(value.map((v) => v.id));
+          const newSelections = enabledFilteredOptions.filter(
+            (opt) => !currentIds.has(opt.id)
+          );
+          onSelectedOptionsChange([...value, ...newSelections]);
+        }
+      };
+      return {
+        label,
+        onClick: handleClick,
+        checkState
+      };
+    };
+  }, [selectFilteredProp, options, value, onSelectedOptionsChange, filter]);
+  const fieldRef = useRef(null);
+  const prevOptionsRef = useRef(options);
+  useEffect(() => {
+    if (prevOptionsRef.current !== options) {
+      prevOptionsRef.current = options;
+      fieldRef.current?.invalidate();
+    }
+  }, [options]);
   return /* @__PURE__ */ jsx(
     MultiSelectField,
     {
+      ref: fieldRef,
       lazy: false,
       loadOptions: (searchValue) => filter(options, searchValue),
       debounceMs: 0,
       value,
       onSelectedOptionsChange,
       selectAll: selectAllConfig,
+      selectFiltered: selectFilteredConfig,
       ...rest
     }
   );
 };
 
 export { MultiSelectField as M, MultiSelectFieldSync as a };
-//# sourceMappingURL=MultiSelectFieldSync-xj7jXas-.js.map
+//# sourceMappingURL=MultiSelectFieldSync-Bey99LzJ.js.map